@charset "utf-8";
/* ===================================================
	Room CSS
====================================================== */
#sec01,
#sec03{ background: url(../img/cmn_bg.jpg);}

a.more{
	display: block; margin: 0 auto; padding: 25px; width: 100%; max-width: 400px;
	color: #fff; font-size: 16px; text-align: center; background: #95362d;
	box-sizing: border-box; transition: all .5s;
}
a.more span{ padding: 0 50px; position: relative;}
a.more span:after{
	display: block; content: ''; width: 10px; height: 12px;
	top: calc( 50% - 6px); right: 0; position: absolute;
	background: url(../../room/img/icon_arrow.svg) no-repeat center center;
	background-size: contain;
}

@media screen and (hover:hover) and (min-width: 601px) {
	a.more:hover { text-decoration: none; opacity: 0.75;}
}
@media screen and (max-width: 600px) {
	a.more{ padding: 3.5vw 2vw; width: 100%;}
	a.more span{ padding: 0 35px; position: relative;}
}


/* ---------------------------------------------------
.room_col
------------------------------------------------------ */
.room_col{ padding: 100px 0;}
.room_col .cmn_tit_03{ margin-bottom: 50px;}
.room_col .cmn_tit_03 span{ font-size: 16px;}
.room_col .inner_md p{ margin-bottom: 35px; font-size: 16px; text-align: center; line-height: 2;}
.room_col a.more{ margin-top: 50px;}

@media screen and (max-width: 1360px) {
	.room_col .inner_md:nth-of-type(2){ padding-left: 50px;}
}
@media screen and (hover:hover) and (min-width: 601px) {
	.room_col .inner_md a:hover{ text-decoration: none; opacity: .75;}
}
@media screen and (max-width: 600px) {
	.room_col{ padding: 10vw 0 12vw;}
	.room_col .cmn_tit_03{ margin-bottom: 5vw;}
	.room_col .inner_md:nth-of-type(2){ padding-left: 0;}
	.room_col .inner_md p{ margin-bottom: 7vw; text-align: left; line-height: 1.6;}
	.room_col .inner_md a.more{ margin-top: 7vw;}
}


/* ===================================================
スライダー
=================================================== */
[class*="slider_wrap"]{ margin-bottom: 50px; width: 92%;}
[class*="slider_wrap"] .photo img { width: 100%;}

[class*="slider"][class*="arrow"] .slick-prev:before,
[class*="slider"][class*="arrow"] .slick-next:before { content: ''; display: block; width: 100%; height: 100%; background-size: contain; opacity: 1;}
[class*="slider"][class*="arrow"] .slick-prev:hover:before,
[class*="slider"][class*="arrow"] .slick-next:hover:before { opacity: .75;}

[class*="slider_basic"][class*="arrow"] .slick-prev { left: -4%; transform: translate(0,-50%);}
[class*="slider_basic"][class*="arrow"] .slick-next { right: -4%; transform: translate(0,-50%);}

[class*="slider"][class*="arrow_1"] .slick-prev,
[class*="slider"][class*="arrow_1"] .slick-next { width: 35px; height: 117px; z-index: 1;}
[class*="slider"][class*="arrow_1"] .slick-next:before { background-image: url(../../room/img/arrow1_next.svg); background-repeat: no-repeat;}
[class*="slider"][class*="arrow_1"] .slick-prev:before { background-image: url(../../room/img/arrow1_prev.svg); background-repeat: no-repeat;}

@media screen and (max-width: 600px){
	[class*="slider_wrap"]{ margin-bottom: 7vw;}
	[class*="slider"][class*="arrow_1"] .slick-prev,
	[class*="slider"][class*="arrow_1"] .slick-next { width: 10px; height: 30px; z-index: 1;}
}

/* ページネーション */
.thumb_list { display: flex; flex-wrap: wrap; justify-content: center; margin: 0;}
.thumb_list > div{ margin: 8px; text-align: center; opacity: .5;}
.thumb_list > div.current{ opacity: 1;}

@media screen and (max-width: 600px){
	.thumb_list > div{ width: 15%; margin: 1%;}
}


/* ---------------------------------------------------
sec04
------------------------------------------------------ */
#sec04{ padding: 100px 0 80px;}

#sec04 h3,
#sec04 h3 span{ display: flex;}

#sec04 h3{ margin-bottom: 25px; align-items: baseline;}
#sec04 h3 span:first-of-type{ font-size: 32px; align-items: center;}
#sec04 h3 span:first-of-type::before{
	display: block; content: ''; margin-right: 15px; width: 30px; height: 24px;
	background: url(../img/icon_tit_01.svg) no-repeat center center;
	background-size: contain;
}
#sec04 h3 span:last-of-type{ margin-left: 15px; font-size: 16px;}

#sec04 .flex_col{ margin-bottom: 50px; display: flex;}
#sec04 .flex_col dl{
	padding: 30px; width: 30%; text-align: center; line-height: 1;
	border: 1px solid #aaa; box-sizing: border-box;
}
#sec04 .flex_col dl:not(:nth-of-type(0n+3)){ margin-right: 5%;}

#sec04 .flex_col dt{ padding-bottom: 25px; border-bottom: 1px solid #aaa;}
#sec04 .flex_col dt span{ display: block; font-size: 16px;}
#sec04 .flex_col dt span.tit{ margin-bottom: 15px; color: #7e6b2e; font-size: 30px;}
#sec04 .flex_col dt span.tit span{ margin-bottom: 10px; font-size: 16px;}

#sec04 .flex_col dd{ padding-top: 20px;}
#sec04 .flex_col dd p{ margin-bottom: 30px; padding-left: 25px; font-size: 22px;}
#sec04 .flex_col dd p span{ font-size: 40px;}

#sec04 ul{}
#sec04 li{ margin-bottom: 5px; padding-left: 1.5em; position: relative;}
#sec04 li::before{ display: block; content: '※'; top: 0; left: 0; position: absolute;}

@media screen and (max-width: 1360px) {
	#sec04 .inner_md{ padding-left: 50px;}
}
@media screen and (max-width: 600px) {
	#sec04{ padding: 10vw 0;}
	#sec04 .inner_md{ padding-left: 0;}
	#sec04 h3{ margin-bottom: 5vw; flex-direction: column;}
	#sec04 h3 span:first-of-type{ font-size: 23px;}
	#sec04 h3 span:last-of-type{ margin-left: 45px; font-size: 14px;}
	#sec04 .flex_col{ margin-bottom: 5vw; flex-direction: column; flex-wrap: wrap;}
	#sec04 .flex_col:last-of-type{ margin-bottom: 0;}
	#sec04 .flex_col dl{ margin-bottom: 10vw; padding: 7vw 4vw; width: 100%;}
	#sec04 .flex_col dl:not(:nth-of-type(0n+3)){ margin-right: 0;}
	#sec04 .flex_col dt{ padding-bottom: 5vw;}
	#sec04 .flex_col dt span.tit{ margin-bottom: 2.5vw; font-size: 24px;}
	#sec04 .flex_col dt span.tit span{ font-size: 14px;}
	#sec04 .flex_col dd{ padding-top: 5vw;}
	#sec04 .flex_col dd p{ margin-bottom: 5vw;}
}