@charset "utf-8";
/* ===================================================
	Home CSS
====================================================== */

/* ---------------------------------------------------
main_img
------------------------------------------------------ */
#main_img { position: relative; overflow: hidden;}
#main_img .slick_main img { max-height: 100vh;}
#main_img .slick-slide div { vertical-align: bottom;}
#main_img .slick_main img { width: 100%; height: 100vh; transform: scale(1); transition: transform 10s linear;}
#main_img .slick_main .active img { transform: scale(1.1);}

#main_img .main_txt { display: flex; justify-content: space-between; position: absolute; left: 50%; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); width: 94%; margin: 0 auto 50px; bottom: 0; color: #fff; align-items: center; padding: 30px 0 0;}
#main_img .main_txt p { font-size: 55px; font-family: "Hannari", serif; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);}
#main_img .main_txt p span { display: block; font-size: 15px;}



@media screen and (max-width: 600px) {
	#main_img .main_txt { display: block; margin: 0;}
	#main_img .main_txt p { font-size: 36px;}
	#main_img .main_txt p span { width: 100%;}
	#main_img .main_txt p+.circle { display: table; margin: -3% 0 0 auto; right: 93px;}
	
}


/* ---------------------------------------------------
sec_reserve
------------------------------------------------------ */

.sec_reserve { display: flex; margin: 0 0 100px;}
.sec_reserve .reserve_best { width: 300px; margin: 0 70px 0 auto; padding: 50px 0 0; text-align: center;}
.sec_reserve .reserve_best h2 { margin: 0 0 10px; padding: 0 0 10px; font-size: 35px; border-bottom: 1px solid #b7aaa5;}
.sec_reserve .reserve_best h2 span { display: block; font-size: 18px; color: #bda872;}
.sec_reserve .reserve_best a { display: table; border: 1px solid #dbd4d2; margin: 20px auto 0; padding: 8px 20px;}
.sec_reserve .reserve_best p { font-size: 16px;}
.sec_reserve .reserve_best p span { font-size: 21px;}
.sec_reserve .reserve_search { width: calc(100% - 470px); min-width: 955px; margin: 0; padding: 80px 50px 0; background-color: #f6f3ec;}
.sec_reserve .reserve_search >dl { display: flex; align-items: center;}
.sec_reserve .reserve_search >dl >dt { margin: 0 30px 0 0; font-size: 22px; padding: 0 0 0 30px; background: url(../../img/icon_search.svg) no-repeat left center; background-size: 21px;}
.sec_reserve .reserve_search >ul li::before { display: inline-block; content: ""; width: 10px; height: 10px; padding: 0 10px 0 0; background: url(../../img/icon_arrow.svg)no-repeat center center;}

#search_489ban form {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
#search_489ban .inbox_489ban {
	position: relative;
	margin-left: 20px;
}
#search_489ban input[type="text"],
#search_489ban select {
	font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
	appearance: none;
	border: none;
	border-radius: 0;
	outline: none;
}
#search_489ban select {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 135px;
	height: 50px;
	font-size: 16px;
	opacity: 0;
}
#search_489ban button {
	flex-grow: 1;
	width: 190px;
	height: 60px;
	margin-left: 30px;
	font-size: 20px;
	color: #fff;
	text-decoration: none;
	letter-spacing: 2px;
	border: none;
	background-color: #e19797;
	font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	transition: all 0.5s;
}
#search_489ban .date_489ban dd {
	display: flex;
	align-items: center;
}
#search_489ban .date_489ban dt,
#search_489ban .inbox_489ban dt {
	font-size: 16px;
	line-height: 1.2;
}
#search_489ban .date_489ban input[type="text"] {
	box-sizing: border-box;
	width: 210px;
	padding: 10px 33px 10px 0;
	font-size: 24px;
	letter-spacing: 1.5px;
	background: url(../../img/icon_calendar.svg) no-repeat center right 13px;
	background-size: 16px;
	border-bottom: 1px solid #a6a6a6;
}
#search_489ban .date_489ban input[type="text"]:disabled {
	-webkit-text-fill-color: #81706c;
	color: #81706c;
	opacity: 1;
}
#search_489ban .date_489ban input[type="checkbox"]:checked {
	background: #000;
}
#search_489ban .date_489ban input[type="checkbox"]:checked::after {
	position: absolute;
	top: 0;
	left: 4px;
	display: block;
	width: 5px;
	height: 10px;
	content: "";
	border-right: 3px solid #fff;
	border-bottom: 3px solid #fff;
	transform: rotate(40deg);
}
#search_489ban .date_489ban input[type="checkbox"] {
	position: relative;
	width: 18px;
	height: 18px;
	margin: 0 10px 0 0;
	vertical-align: text-bottom;
	appearance: none;
	background: #fff;
	border: 1px solid #000;
	border-radius: 0;
}
#search_489ban .date_489ban dd label {
	display: flex;
	align-items: center;
	margin-left: 20px;
	font-size: 16px;
}
#search_489ban .stay_489ban dd {
	display: flex;
	align-items: flex-end;
	width: 135px;
	height: 61px;
}
#search_489ban #stay_label {
	width: 100%;
	height: 50px;
	font-size: 24px;
	letter-spacing: 1px;
	background: url(../../img/icon-stay_arrow.svg) no-repeat center right 7px;
	background-size: 10px;
	border-bottom: 1px solid #a6a6a6;
}
.ui-widget-header {
	background: #eaddd7;
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	color: #fff;
	background: #965431;
	border-color: #965431;
}

.sec_reserve .reserve_search >ul { display: flex; margin: 45px 0 0;}
.sec_reserve .reserve_search >ul li { margin: 0 40px 0 0;}


@media screen and (max-width: 1330px) {
	.sec_reserve .reserve_best { margin-right: 2%; padding-left: 4%;}
}

@media screen and (max-width: 600px) {
	.sec_reserve { display: block;}
	.sec_reserve .reserve_best { margin: 0 auto; padding: 30px 0;}
	.sec_reserve .reserve_best h2 { font-size: 26px;}
	.sec_reserve .reserve_best h2 span { font-size: 16px;}
	.sec_reserve .reserve_best p span { font-size: 20px;}
	.sec_reserve .reserve_search { width: 100%; min-width: inherit; padding: 50px 4%; box-sizing: border-box;}
	.sec_reserve .reserve_search >dl { display: block;}
	.sec_reserve .reserve_search >dl >dt { display: table; margin: 0 auto 10px;}
	#search_489ban .date_489ban input[type="text"],
	#search_489ban select,#search_489ban #stay_label { font-size: 20px;}
	#search_489ban .date_489ban { width: 100%;}
	#search_489ban .date_489ban dd label { margin: 10px 0 0;}
	#search_489ban { padding: 0; clear: both;}
	#search_489ban form { flex-wrap: wrap;}
	#search_489ban .inbox_489ban { margin: 20px 0 0;}
	#search_489ban button { width: 80px;}
	
	.sec_reserve .reserve_search >ul { flex-wrap: wrap;}
	.sec_reserve .reserve_search >ul li { width: calc(50% - 1em); margin: 0; text-indent: -1em; padding-left: 1em;}
	
}



/* ---------------------------------------------------
sec_reserve
------------------------------------------------------ */
#sec_plan { position: relative; display: flex; justify-content: right; align-items: flex-end; margin: 0 0 50px;}
#sec_plan::after { display: block; content: ""; position: absolute; bottom: -50px; z-index: -1; height: 360px; width: 100%; background-color: #e1d4b2;}
#sec_plan #recommend_489ban .comment { display: none;}
#sec_plan * { min-height:0; min-width : 0;}
#sec_plan .sec_tit { width: 18%; position: relative; right: -100px; min-height: 300px; padding: 30px 0 0; display: flex; flex-wrap: wrap; flex-direction: column;}
#sec_plan .sec_tit h2 { font-size: 70px; color: #c7b585;}
#sec_plan .slick-prev { position: static; display: block; background: url(../../img/slide_arrow1.svg)no-repeat; width: 15px; height: 15px; margin: 0 30px 0 0;}
#sec_plan .slick-prev:before { display: none;}
#sec_plan .slick-next { position: static; display: block; background: url(../../img/slide_arrow2.svg)no-repeat; width: 15px; height: 15px;}
#sec_plan .slick-next:before { display: none;}

#sec_plan .plan_slide { width: 73%; margin: 0 0 0 auto;}
#sec_plan #recommend_489ban { width: 100%;}
#sec_plan #recommend_489ban .slick-list { padding: 0 calc(63% - 30px) 0 0;}
#sec_plan #recommend_489ban .slick-slide { margin: 0 15px; height: 100%; box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.5);}
#sec_plan #recommend_489ban .slick-slide .PlanView { background: #fff; display: flex!important; flex-direction: column; }
#sec_plan #recommend_489ban .slick-slide .PlanView .picture { overflow: hidden;}
#sec_plan #recommend_489ban .slick-slide .PlanView .picture .main_picture { width: 100%; height: max(216px, 18vw); overflow: hidden; background: #000; transition: transform .75s, opacity .75s;}
#sec_plan #recommend_489ban .slick-slide .PlanView .picture img { transition: transform .75s, opacity .75s; width: 100%; height: 100%; object-fit: cover; z-index: 1; position: relative; }
#sec_plan #recommend_489ban .slick-slide .PlanView .plan { margin-bottom: 20px;}
#sec_plan #recommend_489ban .slick-slide .PlanView .plan a { color: var(--color-gray); line-height: 2; }
#sec_plan #recommend_489ban .slick-slide .PlanView .explan { padding: 40px 40px 55px; display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; }
#sec_plan #recommend_489ban .slick-slide .PlanView .planlist a { display: block; position: relative; color: #ebacac; font-size: 14px; width: fit-content; margin: 0 0 0 auto; padding: 0 4px; border-bottom: 1px solid #ebacac; font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","ＭＳ Ｐゴシック", sans-serif;}
#sec_plan .arrow_box { display: flex; justify-content: right; margin: auto 0 0;}

#sec_plan #recommend_489ban .slick-slide .PlanView .picture:hover .main_picture { transform: scale(1.05);}
#sec_plan #recommend_489ban .slick-slide .PlanView .picture:hover .picture img { opacity: .75;}

@media screen and (max-width: 600px) {
#sec_plan { display: block; padding: 0 0 50px; background-color: #e2d5b2;}
#sec_plan::after { content: none;}
#sec_plan .sec_tit { position: static; padding: 30px 0; width: auto; text-align: center; min-height: inherit;}
#sec_plan .sec_tit h2 { font-size: 46px;}
#sec_plan .plan_slide { width: 100%;}
#sec_plan #recommend_489ban { width: 90%; margin: 0 auto;}
#sec_plan #recommend_489ban .slick-list { padding: 0;}
#sec_plan .arrow_box { position: absolute; top: 50%; left: 2%; width: 96%; z-index: 10;}
#sec_plan .slick-prev { margin: 0 auto 0 0;}
}

/* ---------------------------------------------------
sec_lead
------------------------------------------------------ */
#sec_lead { margin: 0 auto -30px; padding: 200px 0 160px; background: url(../../img/lead_bg01.png)no-repeat top right,url(../../img/lead_bg02.png)no-repeat 60px bottom; background-size: 50%;}
#sec_lead >ul { display: flex; align-items: flex-end; justify-content: space-between;}
#sec_lead >ul li:nth-of-type(1) { width: 63%;}
#sec_lead >ul li:nth-of-type(2) { width: 35%; margin: 0 0 -160px; text-align: right;}
#sec_lead .inner_sm { display: flex; margin: 35px auto 0;}
#sec_lead .inner_sm div { padding: 80px 0 0 85px;}
#sec_lead .inner_sm div h2 { margin: 0 0 30px; font-size: 23px; line-height: 1.8;}
#sec_lead .inner_sm div h2 .font_en { display: block; margin: 0 0 20px; font-size: 80px; color: #e7dcc5; line-height: 1.2;}
#sec_lead .inner_sm div p { padding: 0 0 45px; line-height: 2.8;}
#sec_lead .inner_sm div a { margin: 0 0 0 auto;}

@media screen and (max-width: 600px) {
	#sec_lead { padding: 0; margin: 0 auto; background: none;}
	#sec_lead >ul { width: 100%; display: block; position: relative;}
	#sec_lead >ul li:nth-of-type(1) { width: 100%; height: 40vh;}
	#sec_lead >ul li:nth-of-type(2) { margin: -18% 0 0 auto; width: 55%;}
	#sec_lead .inner_sm { max-width: 100%; padding: 0 5%; flex-wrap: wrap;  background: url(../../img/lead_bg01.png)no-repeat top right,url(../../img/lead_bg02.png)no-repeat 60px bottom; background-size: 50%;}
	#sec_lead .inner_sm div { position: relative; padding: 0; margin: -70px 0 0; order: 1;}
	#sec_lead .inner_sm >img { order: 2; width: 230px; margin: 0 auto 50px;}
	#sec_lead .inner_sm div h2 { font-size: 20px;}
	#sec_lead .inner_sm div h2 .font_en { font-size: 53px;}
	#sec_lead .inner_sm div a { margin: 0 auto 45px;}
}

/* ---------------------------------------------------
sec_loc
------------------------------------------------------ */

#sec_loc .sec_photo { position: relative;}
#sec_loc .sec_photo div { position: absolute; left: 0; top: 0; height: 100%; padding: 80px 60px 50px 90px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-feature-settings: initial; color: #fff; background-color: rgba(0, 0, 0, 0.6);}
#sec_loc .sec_photo div h2 { position: relative; font-size: 50px; color: #ac9761;}
#sec_loc .sec_photo div h2::before { content: '';
    position: absolute;
    left: 0;
    width: 1px;
    height: 100%;
    text-align: center;
    background-image: -webkit-linear-gradient(bottom, transparent, #ac9761 25%, #ac9761 100%, transparent);
    background-image: linear-gradient(bottom, transparent, #ac9761 25%, #ac9761 100%, transparent);
    background-position: center;
    background-repeat: no-repeat;}
#sec_loc .sec_photo div p { font-size: 16px; line-height: 2;}
#sec_loc .sec_photo div p span { display: block; padding: 0 50px 0 30px; font-size: 25px;}
#sec_loc .sec_photo >img { height: 680px;}
#sec_loc .sec_col { padding: 100px 0 120px; color: #fff; background: url(../../img/sec_loc_bg.png)no-repeat top right #150e05;}
#sec_loc .sec_col .inner_md { display: flex; justify-content: space-between; align-items: center;}
#sec_loc .sec_col .inner_md img { width: 54%;}
#sec_loc .sec_col .inner_md div { width: 37%;}
#sec_loc .sec_col .inner_md div h3 { padding: 0 0 20px; font-size: 23px;}
#sec_loc .sec_col .inner_md div p { padding: 0 0 50px; line-height: 2.4;}
#sec_loc .sec_col .inner_md div a { margin: 0 0 0 auto;}

@media screen and (max-width: 600px) {
	#sec_loc { background-color: #150d05;}
	#sec_loc .sec_photo >img { height: 50vh;}
	#sec_loc .sec_photo div  { position: relative; width: 100%; margin: -25vh 0 0; padding: 0 5%; height: auto; -ms-writing-mode: inherit; writing-mode: inherit; z-index: 1;}
	#sec_loc .sec_col .inner_md { display: block;}
	#sec_loc .sec_photo div h2 { padding: 20px 0 0; font-size: 40px; border-left: none;}
	#sec_loc .sec_photo div h2::before { content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		text-align: center;
		background-image: -webkit-linear-gradient(right, transparent, #ac9761 25%, #ac9761 100%, transparent);
		background-image: linear-gradient(right, transparent, #ac9761 25%, #ac9761 100%, transparent);
		background-position: center;
		background-repeat: no-repeat;}
	#sec_loc .sec_photo div p span { padding: 0 0 20px; font-size: 22px;}
	#sec_loc .sec_col { background: #150d05; margin: -21vh 0 0; padding: 21vh 0 50px;}
	#sec_loc .sec_col .inner_md img { width: 100%; margin: 20px 0 0;}
	#sec_loc .sec_col .inner_md div { width: 100%; margin: 20px 0 0;}
	
}


/* ---------------------------------------------------
sec_wrap
------------------------------------------------------ */
.sec_wrap { margin: 130px 0 0; background: url(../../img/sec_room_bg.png)no-repeat; background-position: 80px 1000px;}
#sec_meal { padding: 0 0 180px; background: url(../../img/sec_meal_bg.png)no-repeat; background-position: calc(50% + 400px) 430px;}
#sec_meal .flex_col { display: flex; align-items: flex-start; justify-content: space-between; max-width: 100%; margin-right: calc(50vw - 600px);}
#sec_meal .flex_col >img { width: calc(94% - 150px); height: 700px;}
#sec_meal .flex_col >.sec_tit { margin: 40px 0 0; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-feature-settings: initial;}
#sec_meal .flex_col h2 { position: relative; font-size: 60px; color: #ccb49d; min-height: 400px;}
#sec_meal .flex_col h2::before { content: '';
    position: absolute;
    left: 0;
    width: 1px;
    height: 100%;
    text-align: center;
    background-image: -webkit-linear-gradient(bottom, transparent, #ac9761 25%, #ac9761 100%, transparent);
    background-image: linear-gradient(bottom, transparent, #ac9761 25%, #ac9761 100%, transparent);
    background-position: center;
    background-repeat: no-repeat;}
#sec_meal .flex_col p { margin: 0 20px 0 0; font-size: 23px;}
#sec_meal .sec_col { display: flex; justify-content: space-between; margin: 80px auto 0;}
#sec_meal .sec_col >div { width: 36%;}
#sec_meal .sec_col >div p { margin: 10px 0 0; font-size: 16px; line-height: 2.4;}
#sec_meal .sec_col >div a { margin: 30px 0 0 auto;}
#sec_meal .sec_col >ul { display: flex; position: relative; right: -100px;}

@media screen and (max-width: 1300px) {
	#sec_meal .sec_col >ul { right: -4%;}
}

@media screen and (max-width: 600px) {
	.sec_wrap { margin: 0;}
	#sec_meal { padding: 0 0 50px; background-size: cover; background-position: -550px 100px;}
	#sec_meal .flex_col { display: block; padding: 50px 0 0;}
	#sec_meal .flex_col >img { width: 100%; height: 50vh;}
	#sec_meal .flex_col >.sec_tit { width: 90%; margin: 25px auto 0; -ms-writing-mode: inherit; writing-mode: inherit;}
	#sec_meal .flex_col h2 { margin: 0 0 20px; font-size: 40px; min-height: auto;}
	#sec_meal .flex_col h2::before { content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		text-align: center;
		background-image: -webkit-linear-gradient(right, transparent, #ac9761 25%, #ac9761 100%, transparent);
		background-image: linear-gradient(right, transparent, #ac9761 25%, #ac9761 100%, transparent);
		background-position: center;
		background-repeat: no-repeat;}
	#sec_meal .flex_col p { font-size: 20px;}
	#sec_meal .sec_col { display: block; margin: 30px auto 0;}
	#sec_meal .sec_col >div { width: 100%;}
	#sec_meal .sec_col >div a { margin: 30px auto;}
	#sec_meal .sec_col >ul { right: 0;}
}

#sec_room * { min-height:0; min-width : 0;}
#sec_room .flex_col { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row-reverse; max-width: 100%; padding: 100px 0 0; margin-left: calc(50vw - 600px);}
#sec_room .flex_col .sec_slide { width: calc(97% - 150px); background-color: #fff;}
#sec_room .flex_col .sec_slide img { height: 700px;}
#sec_room .flex_col >.sec_tit { margin: 40px 0 0; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-feature-settings: initial;}
#sec_room .flex_col h2 { position: relative; font-size: 60px; color: #ccb49d;}
#sec_room .flex_col h2::before { content: '';
    position: absolute;
    left: 0;
    width: 1px;
    height: 100%;
    text-align: center;
    background-image: -webkit-linear-gradient(bottom, transparent, #ac9761 25%, #ac9761 100%, transparent);
    background-image: linear-gradient(bottom, transparent, #ac9761 25%, #ac9761 100%, transparent);
    background-position: center;
    background-repeat: no-repeat;}
#sec_room .flex_col p { margin: 0 20px 0 0; font-size: 23px;}
/* slick共通設定 */
#sec_room .slick-list div { vertical-align: bottom;}
#sec_room .slick-dots { line-height: 0; font-size: 0; text-align: left;}
#sec_room .slick-dots li { width: 10px; height: 10px; margin: 0 5px;}
#sec_room .slick-dots li:first-of-type { margin-left: 0;}
#sec_room .slick-dots li button { width: 10px; height: 10px; padding: 0;}
#sec_room .slick-dots li button::before { content: ''; width: 15px; height: 15px; background: #9c8a79; border-radius: 50%; opacity: 1; transform: scale(.5); transition: transform .5s;}
#sec_room .slick-dots li.slick-active button::before { background: #ccb49d; transform: scale(1);}
#sec_room .sec_col { margin: -180px 0 0; padding: 220px 0 100px; color: #fff; background: url(../../img/sec_room_bg2.png)no-repeat top left; background-color: #150d05;}
#sec_room .sec_col .inner_md >div { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 0 120px;}
#sec_room .sec_col .inner_md >div p { line-height: 2.4;}
#sec_room .sec_col .inner_md >div a { border: 1px solid #fff; color: #fff;}
#sec_room .sec_col .inner_md >div a.link_btn span.link_arrow { color: #fff;}
#sec_room .sec_col .inner_md ul { display: flex; justify-content: space-between;}
#sec_room .sec_col .inner_md ul li { position: relative; overflow: hidden;}
#sec_room .sec_col .inner_md ul li a { display: flex; font-size: 20px; flex-direction: row-reverse; color: #fff;}
#sec_room .sec_col .inner_md ul li p { padding: 0 0 0 15px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-feature-settings: initial;}
#sec_room .sec_col .inner_md ul li p::before { content: ""; display: inline-block; margin: 0 0 15px; width: 1px; height: 50px; background-color: #fff;}
#sec_room .sec_col .inner_md ul li img { transition: transform .75s, opacity .75s;}

@media (hover: hover) {
	#sec_room .sec_col .inner_md ul li:hover img { transform: scale(1.05);}
	#sec_room .sec_col .inner_md ul li:hover img { opacity: .75;}
}

@media screen and (max-width: 1220px) {
	#sec_room .flex_col { margin-left: auto; padding-left: 2%;}
}

@media screen and (max-width: 600px) {
	#sec_room { padding: 0 0 50px; background-color: #150d05;}
	#sec_room .flex_col { display: block; margin: 0 auto; padding: 0;}
	#sec_room .flex_col .sec_slide { width: 100%;}
	#sec_room .flex_col .sec_slide img { height: 50vh;}
	#sec_room .slick-dots { text-align: center;}
	#sec_room .flex_col >.sec_tit { width: 90%; margin: 0 auto; padding: 20px 0 0; -ms-writing-mode: inherit; writing-mode: inherit;}
	#sec_room .flex_col h2 { margin: 0 0 20px; font-size: 40px;}
	#sec_room .flex_col h2::before { content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		text-align: center;
		background-image: -webkit-linear-gradient(right, transparent, #ac9761 25%, #ac9761 100%, transparent);
		background-image: linear-gradient(right, transparent, #ac9761 25%, #ac9761 100%, transparent);
		background-position: center;
		background-repeat: no-repeat;}
	#sec_room .flex_col p { margin: 0; font-size: 20px; color: #fff;}
	#sec_room .sec_col { margin: 20px 0 0; padding: 0;}
	#sec_room .sec_col .inner_md >div { display: block; margin: 0 0 40px;}
	#sec_room .sec_col .inner_md >div a { margin: 30px auto 0;}
	#sec_room .sec_col .inner_md ul { display: block;}
	#sec_room .sec_col .inner_md ul li { width: 70%; margin: 0 auto 30px; font-size: 18px;}
}

/* ---------------------------------------------------
sec_spa
------------------------------------------------------ */
#sec_spa { padding: 130px 0 100px; background: url(../../img/sec_spa_bg.png)no-repeat right 100px bottom 0;}
#sec_spa .flex_col { display: flex; justify-content: space-between; max-width: 100%; margin-right: calc(50vw - 600px);}
#sec_spa .flex_col .sec_slide { width: calc(89% - 150px);}
#sec_spa .flex_col .sec_slide img { height: 800px;}
#sec_spa .flex_col > .sec_txt { display: flex; flex-direction: column; height: 700px; width: 270px;}
#sec_spa .flex_col > .sec_txt div { display: flex; flex-wrap: wrap; flex-direction: row-reverse; margin: 40px 0 0;}
#sec_spa .flex_col h2 { height: 300px; position: relative; font-size: 60px; color: #ccb49d; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-feature-settings: initial;}
#sec_spa .flex_col h2::before { content: '';
    position: absolute;
    left: 0;
    width: 1px;
    height: 100%;
    text-align: center;
    background-image: -webkit-linear-gradient(bottom, transparent, #ac9761 25%, #ac9761 100%, transparent);
    background-image: linear-gradient(bottom, transparent, #ac9761 25%, #ac9761 100%, transparent);
    background-position: center;
    background-repeat: no-repeat;}

#sec_spa .flex_col p { margin: 0 20px 0 0; max-height: 425px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-feature-settings: initial; line-height: 2;}
#sec_spa .flex_col p span { display: block; margin: 0 0 0 20px; font-size: 23px;}
#sec_spa .flex_col >.sec_txt a { margin: auto 0 0 0;}
/* slick共通設定 */
#sec_spa .slick-list div { vertical-align: bottom;}
#sec_spa .slick-dots { line-height: 0; font-size: 0; text-align: right;}
#sec_spa .slick-dots li { width: 10px; height: 10px; margin: 0 5px;}
#sec_spa .slick-dots li:last-of-type { margin-right: 0;}
#sec_spa .slick-dots li button { width: 10px; height: 10px; padding: 0;}
#sec_spa .slick-dots li button::before { content: ''; width: 15px; height: 15px; background: #9c8a79; border-radius: 50%; opacity: 1; transform: scale(.5); transition: transform .5s;}
#sec_spa .slick-dots li.slick-active button::before { background: #ccb49d; transform: scale(1);}


@media screen and (max-width: 600px) {
	#sec_spa { padding: 50px 0; background-size: cover; background-position: right -170px bottom;}
	#sec_spa .flex_col { display: block; padding: 0;}
	#sec_spa .flex_col .sec_slide { width: 100%;}
	#sec_spa .flex_col .sec_slide img { height: 50vh;}
	#sec_spa .slick-dots { text-align: center;}
	#sec_spa .flex_col >.sec_txt { display: block; height: auto; width: 90%; margin: 0 auto;}
	#sec_spa .flex_col >.sec_txt div { display: block;}
	#sec_spa .flex_col h2 { height: auto; font-size: 40px; -ms-writing-mode: inherit; writing-mode: inherit;}
	#sec_spa .flex_col h2::before { content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		text-align: center;
		background-image: -webkit-linear-gradient(right, transparent, #ac9761 25%, #ac9761 100%, transparent);
		background-image: linear-gradient(right, transparent, #ac9761 25%, #ac9761 100%, transparent);
		background-position: center;
		background-repeat: no-repeat;}
	#sec_spa .flex_col p span { margin: 20px 0;}
	#sec_spa .flex_col p { max-height: inherit; -ms-writing-mode: inherit; writing-mode: inherit;}
	#sec_spa .flex_col >.sec_txt a { margin: 30px auto 0;}
}

/* ---------------------------------------------------
sec_dayplan
------------------------------------------------------ */
#sec_dayplan { background: #f3ebd6;}
#sec_dayplan .sec_inner { display: flex; align-items: flex-start; justify-content: space-between; max-width: 100%; padding: 90px 0; margin-left: calc(50vw - 550px);}
#sec_dayplan .sec_inner .sec_txt+img { width: calc(68% - 150px); height: 580px;}
#sec_dayplan h2 { margin: 0 0 20px;}
#sec_dayplan h2 span:nth-of-type(1) { display: table; background-color: #d4c7a3; color: #fff; font-size: 15px; padding: 3px 10px;}
#sec_dayplan h2 span.font_en { font-size: 60px; color: #d4c7a3;}
#sec_dayplan p { line-height: 2.4;}
#sec_dayplan p span { display: block; padding: 0 0 10px; font-size: 23px;}
#sec_dayplan a { margin: 48px 0 0 auto;}

@media screen and (max-width: 1200px) {
	#sec_dayplan .sec_inner { margin-left: auto; padding-left: 2%;}
}

@media screen and (max-width: 600px) {
	#sec_dayplan .sec_inner { display: block; width: 90%; margin: 0 auto; padding: 50px 0;}
	#sec_dayplan h2 { margin: 0;}
	#sec_dayplan p span { font-size: 20px;}
	#sec_dayplan h2 span:nth-of-type(1) { font-size: 14px;}
	#sec_dayplan h2 span.font_en { font-size: 40px;}
	#sec_dayplan a { margin: 30px auto;}
	#sec_dayplan .sec_inner .sec_txt+img { width: 100%; height: auto;}
}


/* ---------------------------------------------------
sec_blog
------------------------------------------------------ */
#sec_blog { display: flex; flex-wrap: wrap; margin: 120px auto 140px; justify-content: space-between;}
#sec_blog h2 { display: block; text-align: center; width: 100%; margin: 0 0 60px;}
#sec_blog h2 span.font_en { display: block; font-size: 60px; color: #d3c5a1;}
#sec_blog #blog { width: 45%;}
#sec_blog #blog li { width: 100%; padding: 30px 0 18px; border-bottom: 1px solid #d2d2d2;}
#sec_blog #blog .date { display: block; margin: 0 0 10px; color: #e29999;}
#sec_blog #blog li a { display: block; position: relative;}

#sec_blog #blog li a span.link_arrow {
	position: absolute;
	top: 50%;
	right: 3%;
	display: inline-block;
	vertical-align: middle;
	color: #e29999;
	line-height: 1;
	width: 10px;
	height: 1px;
	background: currentColor;
	transition: right 0.5s ease-out;
}
#sec_blog #blog li a span.link_arrow::after {
	position: absolute;
	content: '';
	width: 8px;
	height: 8px;
	border: 1px solid currentColor;
	border-left: 0;
	border-bottom: 0;
	transform: rotate(45deg);
	transform-origin: top right;
	position: absolute;
	top: 50%;
	right: -0.05em;
	box-sizing: border-box;
}
#sec_blog #blog #feed+a { display: table; margin: 35px 0 0 auto; padding: 13px 42px; border: 1px solid #a6a6a6; color: #5d473d;}

#sec_blog>ul li { margin: 0 0 18px;}
#sec_blog>ul li:last-of-type { margin: 0;}

@media (hover: hover) {
	#sec_blog #blog li a:hover span.link_arrow {
		right: 0;
	}
}

@media screen and (max-width: 600px) {
	#sec_blog { margin: 50px auto;}
	#sec_blog h2 { margin: 0 0 10px;}
	#sec_blog h2 span.font_en { font-size: 40px;}
	#sec_blog #blog { width: 100%;}
	#sec_blog #blog #feed+a { margin: 35px 0 30px auto;}
	#sec_blog #blog+ul { margin: 0 auto;}

}

/* ---------------------------------------------------
sec_sns
------------------------------------------------------ */
#sec_sns { padding: 80px 0 130px; background: url(../../img/sns_bg.jpg)no-repeat; background-size: cover;}
#sec_sns h2 { margin: 0 0 40px; text-align: center; font-size: 40px; color: rgba(255, 255, 255, 0.8)}
#sec_sns ul { display: flex; justify-content: space-between; width: 1100px; max-width: 90%; margin: 0 auto;}
#sec_sns ul li { width: 32%;}
#sec_sns ul li a { display: block; width: 100%; padding: 27px 0; font-size: 23px; color: #fff; border: 1px solid #fff; text-align: center; transition: all .5s; background: url(../../img/sec_sns_icon.svg)no-repeat right 10% center; background-color: rgba(0, 0, 0, 0.1); background-size: 12px;}

@media (hover: hover) {
	#sec_sns ul li a:hover {
		background-color: rgba(0, 0, 0, 0.5);
	}
}

@media screen and (max-width: 600px) {
	#sec_sns { padding: 50px 0; background: url(../../img/sns_bg_sp.jpg)no-repeat; background-size: cover;}
	#sec_sns h2 { margin: 0 0 20px; font-size: 26px;}
	#sec_sns ul { display: block;}
	#sec_sns ul li { width: 100%; margin: 0 0 20px;}
	#sec_sns ul li a { padding: 15px 0; font-size: 18px; background-color: rgba(0, 0, 0, 0.2); }
}

/* ---------------------------------------------------
sec_sns
------------------------------------------------------ */

.topics_bnr { padding: 150px 0; background-color: #f2ead5;}
.topics_slide { width: 1100px; max-width: 90%; margin: 0 auto;}
.topics_slide .slick-slide { margin: 0 20px;}
.topics_slide .slick-dots { line-height: 0; font-size: 0; text-align: center;}
.topics_slide .slick-dots li { width: 10px; height: 10px; margin: 0 5px;}
.topics_slide .slick-dots li:last-of-type { margin-right: 0;}
.topics_slide .slick-dots li button { width: 10px; height: 10px; padding: 0;}
.topics_slide .slick-dots li button::before { content: ''; width: 10px; height: 10px; background: #ccc1af; border-radius: 50%; opacity: 1;}
.topics_slide .slick-dots li.slick-active button::before { background: #5d473d;}
.topics_slide .slick-prev { width: 40px; padding: 0 0 34px; left: -50px; background: url(../../img/slide_arrow1.svg)no-repeat bottom center !important; background-size: 13px !important;}
.topics_slide .slick-next { width: 40px; padding: 0 0 34px; right: -50px; background: url(../../img/slide_arrow2.svg)no-repeat bottom center !important; background-size: 13px !important;}
.topics_slide .slick-next::before { content: "NEXT"; font-size: 14px; font-family: 'Marcellus'; color: #5d473d;}
.topics_slide .slick-prev::before { content: "PREV"; font-size: 14px; font-family: 'Marcellus'; color: #5d473d;}

#sec_info { padding: 90px 0 110px; background-color: #6d5548;}
#sec_info h2 { font-size: 15px; color: #fff;}
#sec_info h2 .font_en { display: block; font-size: 60px; color: #c6a18b;}
#sec_info .info_list { display: flex; justify-content: space-between; margin: 50px auto 100px;}
#sec_info .info_list li { position: relative; overflow: hidden;}
#sec_info .info_list li div p { position: absolute; padding: 28px 20px 0 20px; right: 0; top: 0; height: 100%; color: #fff;  -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-feature-settings: initial; background-color: rgba(0, 0, 0, 0.4); font-size: 32px; box-sizing: border-box; z-index: 1;}
#sec_info .info_list li div p span { display: block; font-size: 16px;}
#sec_info .info_list li img { transition: transform .75s, opacity .75s;}
#sec_info .info_list+ul { display: flex; justify-content: center; flex-direction: row-reverse;}

@media (hover: hover) {
	#sec_info .info_list li:hover img { transform: scale(1.05);}
	#sec_info .info_list li:hover img { opacity: .75;}
}

@media screen and (max-width: 600px) {
	.topics_bnr { padding: 50px 0;}
	.topics_slide { width: 75%;}
	.topics_slide .slick-slide { margin: 0 5px;}
	.topics_slide .slick-next { right: -13%;}
	.topics_slide .slick-prev { left: -13%;}

	#sec_info { padding: 50px 0;}
	#sec_info h2 .font_en { font-size: 40px;}
	#sec_info .info_list { display: block; margin: 25px auto 50px;}
	#sec_info .info_list li { margin: 0 0 20px;}
	#sec_info .info_list li img { height: 25vh;}
	#sec_info .info_list li div p span { font-size: 14px;}
	#sec_info .info_list li div p { padding: 20px 20px 30px; font-size: 26px;}
	#sec_info .info_list+ul { display: block;}
	#sec_info .info_list+ul li:nth-of-type(1) { margin: 0 0 10px;}
	
}


