@charset "utf-8";
/* CSS INFORMATION -====================================================
File name : forecast.css
Description : スケッチ予報ページ
===================================================================== */

/* =====================================================================
*    共通
* =================================================================== */
.wrapper_subpage #main {
	padding-bottom: 0px !important;
}

@media screen and (min-width:700px){
	.wrapper_subpage #main {
		padding-bottom: 130px !important;
	}
}

/* バナー */
.banner {
	background: url(../img/forecast/bg_banner_bottom_sp.jpg) no-repeat center bottom #f6f4ec;
	background-size: 100% auto;
	position: relative;
	padding-bottom: 10.9375%;
}

.banner::before {
	content: "";
	width: 100%;
	height: 0;
	padding-top: 30.46875%;
	display: block;
	background:url(../img/forecast/img_banner_top_sp.png) no-repeat center top;
	background-size: 100% auto;
	position: absolute;
	top: 0;
	left: 0;
	margin-top: -30.46875%;
}

.banner ul {
	padding-top: 3.125%;
}

.banner ul li {
	width: 81.25%;
	margin-bottom: 9.375%;
	margin-left: auto;
	margin-right: auto;
}

/* カレンダー2020 */

.calenderBox {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	font-size: 16px;
	width: 75%;
	margin: 10px auto 0;
	color: #59493f;
}

.calenderBox dt {
	width: 100px;
	padding: .5rem;
}
.calenderBox dd {
	width: 100%;
	padding: .5rem;
	line-height: 2.2rem;
}

.calenderBox strong {
	font-weight: 700;
	line-height: 3rem;
}

.imgCalender {
	width: 75%;
	text-align: center;
	margin: 0 auto;
}

.imgCalender img {
	width: 100%;
}

.title  {
	font-size: 16px;
	line-height: 1.15em;
	font-weight: bold;
	color: #6c2363;
	position: relative;
	box-sizing: border-box;
	padding-top: 6%;
	padding-left: 30px;
	width: 75%;
	margin: 0 auto 6.25%;
}

.title::before{
     content: "";
    width: 30px;
    height: 26px;
    display: block;
    background: url(../img/corner/img_article_child_h1.png) no-repeat center top;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: -10px;
    margin-top: 6.25%;
}

@media screen and (min-width:700px){
	.banner {
		background: url(../img/forecast/bg_banner_bottom_pc.jpg) no-repeat center bottom #f6f4ec;
		background-size: 100% auto;
		padding-bottom: 13.1579%;
	}

	.banner::before {
		width: 13.9474%;
		padding-top: 18.4211%;
		background:url(../img/forecast/img_banner_top_01_pc.png) no-repeat center top;
		background-size: 100% auto;
		margin-top: -13.6843%;
		margin-left: -2.6316%;
	}

	.banner::after {
		content: "";
		width: 28.1579%;
		padding-top: 16.8422%;
		background:url(../img/forecast/img_banner_top_02_pc.png) no-repeat center top;
		background-size: 100% auto;
		position: absolute;
		top: 0;
		right: 0;
		margin-top: -12.1053%;
		margin-right: -2.6316%;
	}

	.banner ul {
		text-align: center;
		overflow: hidden;
		letter-spacing: -.40em;
		padding-top: 6.579%;
	}

	.banner ul li {
		width: 31.579%;
		display: inline-block;
		letter-spacing: normal;
		margin-bottom: 0;
		margin-left: 2.6316%;
		margin-right: 2.6316%;
	}

	/* カレンダー2020 */

.calenderBox {
	flex-direction: row;
	font-size: 18px;
	width: 680px;
	margin: 10px auto 0;
}

	.calenderBox dt {
width: 100px;
padding: .5rem;
	}
		.calenderBox dd {
width: 550px;
padding: .5rem;
	line-height: 2.2rem;
	}

	.calenderBox strong {
		font-weight: 700;
	}

	.imgCalender {
		width: 300px;
		margin: 0 auto;
	}
	.imgCalender img {
		width: 100%;
	}

	.title  {
    font-size: 18px;
    line-height: 22px;
    border-top: none;
    padding-left: 0;
    padding-top: 45px;
		margin-bottom: 25px;
		width: 580px;
		margin: 0 auto;
		color: #6c2363;
    position: relative;
    box-sizing: border-box;
}

	.title::before{
    content: "";
    width: 32px;
    height: 0;
    padding-top: 28px;
    display: block;
    background: url(../img/corner/img_article_child_h1.png) no-repeat center top;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
		margin-top: 6.25%;
		margin-top: 40px;
    margin-left: -40px;
}
}


/* =====================================================================
*    ヘッダー
* =================================================================== */
.page_ttl {
	color: #59493f;
	margin-bottom: 6.25% !important;
}

@media screen and (min-width:700px){
	.page_ttl {
		margin-bottom: 3.9474% !important;
	}
}

/* =====================================================================
*    スケッチ予報トップ
* =================================================================== */
/* スケッチ最新 */
.today {
	position: relative;
	background: url(../img/forecast/bg_today_top_sp.jpg) no-repeat center top, url(../img/forecast/bg_today_bottom_sp.jpg) no-repeat center bottom, #f6f4ec;
	background-size: 100% auto, 100% auto;
	padding-top: 18.75%;
	padding-bottom: 48.4375%;
	margin-left: auto;
	margin-right: auto;
}

.today::before {
	content: "";
	width: 33.28125%;
	height: 0;
	padding-top: 32.5%;
	display: block;
	background: url(../img/forecast/img_today_top_sp.png) no-repeat center top;
	background-size: 100% auto;
	position: absolute;
	top: 0;
	right: 0;
	margin-top: -11.875%;
}

.today .date {
	width: 100%;
	height: 25px;
	text-align: center;
	position: relative;
	padding-bottom: 10px;
}

.today .date span {
	display: inline-block;
	padding-top: 5px;
	font-size: 20px;
	line-height: 20px;
	color: #59493f;
	font-weight: bold;
	vertical-align: top;
}

.today .date::before {
	content: "";
	width: 25px;
	height: 25px;
	display: inline-block;
	background: url(../img/forecast/img_tv_icon.png) no-repeat left top;
	background-size: 100% auto;
	margin-right: 20px;
	vertical-align: top;
}

.today .date::after {
	content: "";
	width: 100%;
	height: 2px;
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	background: url(../img/forecast/img_date_line.png) no-repeat center top;
	background-size: auto 2px;
}

.today .sketch {
	background: url(../img/forecast/bg_today_sketch_sp_top.jpg) no-repeat center top, url(../img/forecast/bg_today_sketch_sp_bottom.jpg) no-repeat center bottom, #FFF;
	background-size: 100% auto, 100% auto;
	position: relative;
	padding-top: 10.9375%;
	margin-top: 6.25%;
}

.today .sketch::before {
	content: "";
	width: 100%;
	height: 0;
	padding-top: 73.59375%;
	background: url(../img/forecast/img_today_sketch_sp.png) no-repeat center top;
	background-size: 100% auto;
	position: absolute;
	bottom: 0;
	left: 0;
	margin-bottom: -58.75%;
}

.today .sketch .image {
	width: 75%;
	margin-left: auto;
	margin-right: auto;
}

.today .sketch figcaption {
	width: 75%;
	color: #59493f;
	font-size: 16px;
	line-height: 1.5em;
	text-align: center;
	padding-bottom: 17.1875%;
	margin-top: 3.125%;
	margin-left: auto;
	margin-right: auto;
}

.today .btn_backnumber {
	width: 87.5%;
	margin-top: 53.90625%;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (min-width:700px){
	.today {
		background: url(../img/forecast/bg_today_top_pc.jpg) no-repeat center top, url(../img/forecast/bg_today_bottom_pc.jpg) no-repeat center bottom, #f6f4ec;
		background-size: 100% auto, 100% auto;
		padding-top: 10.5264%;
		padding-bottom: 17.1053%;
	}

	.today::before {
		width: 20.7894%;
		padding-top: 19.8684%;
		background: url(../img/forecast/img_today_top_pc.png) no-repeat center top;
		background-size: 100% auto;
		margin-top: -5%;
		margin-right: 2.6316%;
	}

	.today .date {
		height: 33px;
		z-index: 10;
	}

	.today .date span {
		padding-top: 7px;
		font-size: 26px;
		line-height: 26px;
	}

	.today .date::before {
		width: 33px;
		height: 33px;
	}

	.today .date::after {
		height: 4px;
		background: url(../img/forecast/img_date_line.png) no-repeat center top;
		background-size: auto 4px;
}

	.today .sketch {
		width: 89.4737%;
		background: url(../img/forecast/bg_today_sketch_pc.jpg) no-repeat center top;
		background-size: 100% auto;
		padding-top: 7.8948%;
		padding-bottom: 18.4211%;
		margin-top: 3.9474%;
		margin-left: auto;
		margin-right: auto;
	}

	.today .sketch::before {
		width: 117.6471%;
		padding-top: 62.2369%;
		background: url(../img/forecast/img_today_sketch_pc.png) no-repeat center top;
		background-size: 100% auto;
		top: 0;
		bottom: auto;
		left: -8.82355%;
		margin-top: -13.2353%;
		margin-bottom: 0;
	}

	.today .sketch .image {
		width: 58.8236%;
	}

	.today .sketch figcaption {
		width: 58.8236%;
		font-size: 18px;
		line-height: 1.5em;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		padding-bottom: 0;
		margin-top: 54%;
	}

	.today .btn_backnumber {
		width: 43.4211%;
		margin-top: 4.6053%;
	}
}

/* 季節のコラム */
.column {
	background: url(../img/forecast/bg_stripe.jpg) repeat center top;
	background-size: 8px auto;
	padding-top: 14.0625%;
	padding-bottom: 37.5%;
}

.column .column_page_ttl {
	width: 100%;
	height: 20px;
	font-size: 20px;
	line-height: 20px;
	color: #59493f;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-bottom: 10px;
}

.column .column_page_ttl::after {
	content: "";
	width: 100%;
	height: 2px;
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	background: url(../img/forecast/img_date_line.png) no-repeat center top;
	background-size: auto 2px;
}

.column .column_img {
	width: 75%;
	margin-top: 6.25%;
	margin-left: auto;
	margin-right: auto;
}

.column .column_text {
	width: 75%;
	font-size: 16px;
	line-height: 1.5em;
	color: #59493f;
	margin-top: 7.8125%;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (min-width:700px){
	.column {
		background: url(../img/forecast/bg_stripe.jpg) repeat center top;
		background-size: 16px auto;
		position: relative;
		padding-top: 9.2106%;
		padding-bottom: 17.1053%;
	}

	.column::after {
		content: "";
		width: 100%;
		height: 0;
		padding-top: 6.579%;
		display: block;
		background: url(../img/forecast/img_banner_top_pc.png) no-repeat center top;
		background-size: 100% auto;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.column .column_page_ttl {
		height: 26px;
		font-size: 26px;
		line-height: 26px;
	}

	.column .column_page_ttl::after {
		height: 4px;
		background: url(../img/forecast/img_date_line.png) no-repeat center top;
		background-size: auto 4px;
	}

	.column .column_img {
		width: 35.5264%;
		margin: 6.579% 5.2632% 3.9474% 11.8422%;
		float: left;
	}

	.column .column_text {
		width: 76.3158%;
		line-height: 24px;
		margin-top: 6.579%;
		margin-right: 3%;
		font-size: 18px;
	}
	
	.column_flbox{
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
	}
}


/* =====================================================================
*    これまでのスケッチ
* =================================================================== */
.archive_sketch {
	position: relative;
	background: url(../img/forecast/bg_today_top_sp.jpg) no-repeat center top #f6f4ec;
	background-size: 100% auto;
	padding-top: 28.125%;
	margin-left: auto;
	margin-right: auto;
}

.archive_sketch::after {
	content: "";
	width: 48.75%;
	height: 0;
	padding-top: 31.25%;
	background: url(../img/forecast/img_archive_01.png) no-repeat center top;
	background-size: 100% auto;
	position: absolute;
	top: 0;
	right: 0;
	margin-top: -6.25%;
}

@media screen and (min-width:700px){
	.archive_sketch {
		background: url(../img/forecast/bg_today_top_pc.jpg) no-repeat center top #f6f4ec;
		background-size: 100% auto, 100% auto;
		padding-top: 14.4737%;
	}

	.archive_sketch::after {
		width: 34.2106%;
		padding-top: 21.8422%;
		margin-top: -7.8948%;
		margin-right: -2.6316%;
	}


}

/* oa_month_list */
.archive_sketch .oa_month_list {
	width: 81.25%;
	padding-bottom: 20.3125%;
}

.archive_sketch .oa_month_list li h2 {
	background-color: #59493f;
}

.archive_sketch .oa_month_list li ul li {
	color: #d7d2c9;
	border-left: 1px dotted #59493f;
	font-size: 16px;
}

.archive_sketch .oa_month_list li ul li:nth-child(4n) {
	border-right: 1px dotted #59493f;
}

.archive_sketch .oa_month_list li ul li a {
	color: #59493f;
}

@media screen and (min-width:700px){
	.archive_sketch .oa_month_list {
		width: 100%;
		margin-top: 0;
		padding-bottom: 13.1579%;
	}

	.archive_sketch .oa_month_list li a:hover {
		opacity: 1;
		color: #FFF;
		background-color: #59493f;
	}

	.archive_sketch .oa_month_list li ul li {
		font-size: 18px;
	}

	.archive_sketch .oa_month_list li ul li:nth-child(4n) {
		border-right: none;
	}

	.archive_sketch .oa_month_list li ul li:first-child {
		border-left: none;
	}
}

/* pastoa_month */
.archive_sketch .pastoa_month {
	position: relative;
	background: url(../img/forecast/bg_stripe.jpg) repeat center top;
	background-size: 8px auto;
	padding-top: 15.625%;
	padding-bottom: 32.8125%;
}

.archive_sketch .pastoa_month::before {
	content: "";
	width: 59.375%;
	height: 0;
	padding-top: 22.8125%;
	display: block;
	background: url(../img/forecast/img_archive_02.png) no-repeat center top;
	background-size: 100% auto;
	position: absolute;
	top: 0;
	left: 0;
	margin-top: -11.5625%;
}


.archive_sketch .pastoa_month .month_ttl_s {
	height: 22px;
	line-height: 22px;
	color: #59493f;
	border-bottom: none;
	padding-bottom: 3.125%;
    margin-bottom: 0;
	font-size: 18px;
}

.archive_sketch .pastoa_month .month_ttl_s::before {
	content: "";
	width: 28px;
	height: 22px;
	display: block;
	position: absolute;
	top: 0;
	right: 50%;
	background: url(../img/forecast/img_month_icon.png) no-repeat center top;
	background-size: 100% auto;
	margin-right: 70px;
	padding-bottom: 10px;
}


.archive_sketch .pastoa_month .month_ttl_s::after {
	content: "";
	width: 75%;
	height: 2px;
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: url(../img/forecast/img_date_line.png) no-repeat center top;
	background-size: auto 2px;
	margin-left: auto;
	margin-right: auto;
}

.archive_sketch .pastoa_month .sketch_list {
	width: 75%;
	letter-spacing: -.40em;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.archive_sketch .pastoa_month .sketch_list li {
	width: 45.8334%;
	text-align: left;
	display: inline-block;
	vertical-align: top;
	letter-spacing: normal;
	margin-top: 8.9286%;
	margin-right: 6.25%;
}

.archive_sketch .pastoa_month .sketch_list li:nth-child(2n),
.archive_sketch .pastoa_month .sketch_list li:last-child {
	margin-right: 0;
}

.archive_sketch .pastoa_month .sketch_list li .img {
	box-sizing: border-box;
	border: 2px solid #59493f;
}

.archive_sketch .pastoa_month .sketch_list li .img > a {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
}

.archive_sketch .pastoa_month .sketch_list li .img > a::after {
	content: "";
	width: 26px;
	height: 26px;
	display: block;
	background: url(../img/forecast/icon_popup.jpg) no-repeat center top;
	background-size: 100% auto;
	position: absolute;
	bottom: 0;
	right: 0;
}

.archive_sketch .pastoa_month .sketch_list li .date {
	height: auto;
	color: #59493f;
	font-size: 16px;
	line-height: 1.4em;
	font-weight: bold;
	display: inline-block;
	margin-top: 4.1667%;
	margin-bottom: 6.25%;
}

.archive_sketch .pastoa_month .btn_top {
	width: 87.5%;
	margin-top: 10.9375%;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (min-width:700px){
	.archive_sketch .pastoa_month {
		background: url(../img/forecast/bg_stripe.jpg) repeat center top;
		background-size: 16px auto;
		padding-top: 9.21053%;
		padding-bottom: 13.1579%;
	}

	.archive_sketch .pastoa_month::after {
		content: "";
		width: 100%;
		height: 0;
		padding-top: 6.579%;
		display: block;
		background: url(../img/forecast/img_banner_top_pc.png) no-repeat center top;
		background-size: 100% auto;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.archive_sketch .pastoa_month::before {
		width: 38.1579%;
		padding-top: 14.7369%;
		margin-top: -11.3158%;
	}

	.archive_sketch .pastoa_month .month_ttl_s {
		padding-bottom: 10px;
		font-size: 20px;
	}

	.archive_sketch .pastoa_month .month_ttl_s::after {
		width: 100%;
		height: 4px;
		background: url(../img/forecast/img_date_line.png) no-repeat center top;
		background-size: auto 4px;
	}

	.archive_sketch .pastoa_month .sketch_list {
	    width: 89.4737%;
	}

	.archive_sketch .pastoa_month .sketch_list li {
	    width: 29.4118%;
		margin-top: 4.4177%;
		margin-right: 4.4177% !important;
	}

	.archive_sketch .pastoa_month .sketch_list li:nth-child(3n),
	.archive_sketch .pastoa_month .sketch_list li:last-child {
		margin-right: 0px !important;
	}

	.archive_sketch .pastoa_month .sketch_list li .date {
		font-size: 18px;
	}

	.archive_sketch .pastoa_month .btn_top {
		width: 43.4211%;
		margin-top: 5.8824%;
	}
}


/* =====================================================================
*    img_popup
* =================================================================== */
.imgpp_wrapper {
    background-color: rgba(255, 255, 255, 0.8);
}

.imgpp_wrapper p {
	color: #333333;
	font-size: 1.4rem;
	line-height: 1.5em;
}

.imgpp_wrapper .date {
	font-weight: bold !important;
	margin-bottom: 0px !important;
}

.imgpp_wrapper img {
	box-sizing: border-box;
	border: 1px solid #64554c;
}

.imgpp_wrapper .btn_close {
	width: 62.5%;
	height: 0;
	padding-top: 15.625%;
	text-indent: -999em;
	overflow: hidden;
	background: url(../img/forecast/btn_popup_close.png) no-repeat center top;
	background-size: 100% auto;
}

@media screen and (min-width:700px){
	.imgpp_wrapper p {
		font-size: 1.6rem;
		line-height: 1.5em;
	}

	.imgpp_wrapper .date {
		margin-top: 10px !important;
	}

	.imgpp_wrapper .btn_close {
		width: 200px;
		padding-top: 50px;
	}
}