@charset "utf-8";
/* ===================================================
	stay CSS
====================================================== */
#breadcrumb { background: url(../img/main_bg.jpg);}

[id^="sec"] h2{
	margin-bottom: 0; padding-bottom: 120px;
	text-align: center; line-height: 1; position: relative;
}
[id^="sec"] h2 .subtit{
	display: block; margin-bottom: 30px;
	color: #c0a872; font-size: 16px;}

[id^="sec"] h2:after{
	display: block; content: "";
	bottom: 0; left: calc(50% - 1px); position: absolute;
	width: 2px; height: 83px; background: #cfb67f;
}


[class^="sec"]{ padding: 105px 0; position: relative;}
[class^="sec"]::before{
	display: block; content: ""; width: 133px; height: 38px;
	bottom: -20px; left: calc(50% - 66.5px); position: absolute; z-index: 2;
	background: url(../../stay/img/icon_next.svg) no-repeat center bottom;
}

[class^="detail_"]{
	margin-bottom: 60px; display: flex; justify-content: space-between;
	position: relative; z-index: 3;
}
[class^="detail_"] .photo_block{ width: calc(94% - 320px);}
[class^="detail_"] .txt_block{ width: 320px;}
[class^="detail_"] h3{ margin-bottom: 30px;}
[class^="detail_"] h3 span{ display: block; line-height: 1.5;}
[class^="detail_"] h3 .time{ color: #e0d1b3; font-size: 78px;}
[class^="detail_"] h3 .txt{ font-size: 34px;}
[class^="detail_"] p.txt{ line-height: 2.25;}
[class^="detail_"] p.more{ text-align: right;}
.detail_left{ flex-direction: row-reverse;}

.spot_col{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.spot_col .spot{ margin-bottom: 70px; width: 48%; max-width: 524px;}
.spot_col .photo{ margin-bottom: 25px;}
.spot_col dt{ margin-bottom: 25px; font-size: 25px; text-align: center;}

@media screen and (max-width: 600px) {
	[id^="sec"] h2{ padding-bottom: 12vw;}
	[id^="sec"] h2 .subtit{ margin-bottom: 3vw;}
	[id^="sec"] h2:after{ height: 9vw;}
	[class^="sec"]{ padding: 10vw 0;}
	[class^="sec"]::before{
		width: 98px; height: 28px;
		bottom: -5vw; left: calc(50% - 49px);
	}
	[class^="detail_"]{ margin-bottom: 6vw; flex-direction: column;}
	[class^="detail_"] .photo_block{ margin-bottom: 3vw; width: 100%;}
	[class^="detail_"] .txt_block{ width: 100%;}
	[class^="detail_"] h3{ margin-bottom: 5vw;}
	[class^="detail_"] h3 .time{ margin-bottom: 0; font-size: 46px;}
	[class^="detail_"] h3 .txt{ font-size: 26px;}
	[class^="detail_"] p.txt { margin-bottom: 5vw; line-height: 1.6;}

	.detail_left{ flex-direction: column;}
	.spot_col .spot{ margin-bottom: 10vw; width: 100%; max-width: 100%;}
	.spot_col .photo{ margin-bottom: 5vw; text-align: center;}
	.spot_col dt{ margin-bottom: 2vw; font-size: 24px;}
}


/* 各セクション
------------------------------------------------------ */
#sec01{ padding-bottom: 10px;}
#sec02{
	padding: 155px 0 0;
	background:
		url(../../stay/img/sec02_top.jpg) no-repeat center top;
	background-size: 100% auto;
}

.sec01,
.sec07{ padding-top: 0;}

.sec02,
.sec04,
.sec06{ background: #f9f5ef;}

.sec08,
.sec010{ background: url(../img/main_bg.jpg);}

.sec01::after,
.sec03::after,
.sec05::after,
.sec07::after,
.sec09::after{
	display: block; content: ""; width: 257px; height: 314px;
	bottom: -150px; right: 0; position: absolute; z-index: 2;
	background: url(../img/bg_fl_ore.png) no-repeat left bottom;
	background-size: auto 314px; 
}

.sec02::after,
.sec04::after,
.sec08::after{
	display: block; content: ""; width: 257px; height: 314px;
	bottom: -150px; left: 0; position: absolute; z-index: 2;
	background: url(../img/bg_fl_ore.png) no-repeat right bottom;
	background-size: auto 314px; 
}

.sec02 .link_line::before,
.sec04 .link_line::before,
.sec06 .link_line::before,
.sec07 .link_line::before{ background: #f3ede3;}

.sec02 .btn_col{ display: flex; justify-content: space-between; flex-direction: row-reverse;}
.sec02 .btn_col .photo{ width: 524px;}
.sec02 .btn_col .photo img{ width: 100%; height: 344px;}
.sec02 .btn_col dl{ width: calc( 94% - 524px);}
.sec02 .btn_col dt{ margin-bottom: 25px; font-size: 25px;}

.sec06{ margin-bottom: 75px;}
.sec06::before{ display: none;}

.sec010{ padding-bottom: 0;}
.sec010::before{ display: none;}


@media screen and (max-width: 600px) {
	#sec01{ padding-bottom: 5vw;}
	#sec02{ padding: 10vw 0 0;}
	.sec01::after,
	.sec03::after,
	.sec05::after,
	.sec07::after,
	.sec09::after{
		width: 30vw; height: 40vw;
		bottom: -11vw; background-size: auto 40vw; 
	}
	.sec02::after,
	.sec04::after,
	.sec08::after{
		width: 30vw; height: 40vw;
		bottom: -11vw; background-size: auto 40vw; 
	}
	.sec02 .btn_col{ flex-direction: column; position: relative; z-index: 3;}
	.sec02 .btn_col .photo{ margin-bottom: 5vw; width: 100%;}
	.sec02 .btn_col .photo img{ height: auto;}
	.sec02 .btn_col dl{ width: 100%;}
	.sec02 .btn_col dt{ margin-bottom: 3vw; font-size: 23px;}
	.sec06{ margin-bottom: 7vw;}
}