@charset "utf-8";

/*-------------- all --------------*/

body { min-width: 1200px; margin: 0 auto;}


.bunner { display: flex; background-color: #eee; padding: 0;}
.bunner img { height: 230px;}
.bunner div { padding: 21px 45px 27px 26px; color: #000;}
.bunner h4 { margin-bottom: 16px;}
.bunner h4 img { height: 40px;}
.bunner h5 { font-size: 22px; font-weight: 500; margin-bottom: 11px;}
.bunner p { line-height: 1.625; margin-bottom: 22px;}
.bunner .view { font-size: 14px; line-height: 1; text-align: right; margin-bottom: 0;}

/*
#fv a:visited,#fv a:link,
#about a:visited,#about a:link,
#roomlist a:visited,#roomlist a:link,
#stay a:visited,#stay a:link,
#amenities a:visited,#amenities a:link,
.room a:visited,.room a:link { color: inherit;}
*/

/*-------------- fv --------------*/

#fv .fv { background: url(../images/rooms/fv.jpg) no-repeat center center / cover;}

/*-------------- about --------------*/

#about { position: relative; background: #fff; padding: 100px 0; z-index: 2;}
#about .about { text-align: center;}
#about .about h3 { font-size: 20px; letter-spacing: 0.2em; font-weight: 500; margin-bottom: 30px;}
#about .about h3 img { display: block; margin: 0 auto 13px;}
#about .about .big { margin: 0 auto 70px;}
#about .about .title { font-size: 24px; font-weight: 700; margin-bottom: 50px;}
#about .about .title span { display: block; font-size: 36px; font-weight: 700; margin-top: 15px;}
#about .about .txt { font-size: 16px; font-weight: 300; line-height: 2; margin-bottom: 90px;}
#about .about h4 { font-size: 18px; font-weight: 500; margin-bottom: 30px;}
#about .about h4 img { display: block; margin: 0 auto 13px;}
#about .about .middle { font-size: 16px; line-height: 1.625; letter-spacing: 0.04em; font-weight: 300; margin-bottom: 40px;}
#about .about .flex { display: flex; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 25px;}
#about .about .flex .feature { width: 346px; margin-right: 30px; margin-bottom: 35px; text-align: left;}
#about .about .flex .feature:nth-child(3n) { margin-right: 0;}
#about .about .flex .feature img { margin-bottom: 22px;}
#about .about .flex .feature .title { font-size: 20px; font-weight: 500; margin-bottom: 20px;}
#about .about .flex .feature .txt { font-size: 14px; line-height: 1.714; letter-spacing: -0.02em; margin-bottom: 0;}
#about .about .flex .feature .txt small { display: block; font-size: 10px;}

#about .about .slide { overflow: hidden;}
#about .about .slick-slider { position: relative; width: 600px; margin: 0 auto 105px; text-align: center;}
#about .about .slick-slider .slick-lists { position: relative; width: 600px; margin-right: 50px;}
#about .about .slick-slider .slick-lists div { }
#about .about .slick-slider .slick-list { overflow: visible;}
#about .about .slick-list img { display: block; width: 100%; height: auto; margin-bottom: 30px;}
#about .about .slick-list .title { font-size: 20px; font-weight: 500; margin-bottom: 15px;}
#about .about .slick-list .txt { font-size: 14px; font-weight: 300; line-height: 1.714; letter-spacing: 0.04em; margin-bottom: 0;}
#about .about .slick-list .txt small { display: block; font-size: 12px;}
#about .about .slick-slider .slick-dots { bottom: -40px;}
#about .about .slick-slider .slick-dots li { width: 10px; height: 10px; margin: 0 10px; background-color: #c9c9c9; border-radius: 50%;}
#about .about .slick-slider .slick-dots li.slick-active { background-color: #8c0000;}
#about .about .slick-slider .slick-dots li button::before { color: transparent;}
#about .about .slick-prev,
#about .about .slick-next { width: 80px; height: 80px; z-index: 1; top: 185px;}
#about .about .slick-prev:before,
#about .about .slick-next:before { content: "";}
#about .about .slick-prev { background: url(../images/common/btn_01.png) no-repeat center center / 100%; left: -40px;}
#about .about .slick-next { background: url(../images/common/btn_02.png) no-repeat center center / 100%; right: -40px;}

#about #sauna { margin-bottom: 120px;}
#about #sauna .btn { display: flex; justify-content: center;}
#about #sauna .btn .btns { font-weight: 500;}
#about #sauna .btn .btns:first-child { background: #9a8b68; color: #fff; margin-right: 40px;}
#about #sauna .btn .btns:first-child:hover { background: #fff; color: #9a8b68;}
#about #sauna .btn .btns:last-child { color: #000;}
#about #sauna .btn .btns:last-child:hover { background: #9a8b68; color: #fff;}

#about #room { }

#about .other { border-top: 1px solid #898989; padding-top: 100px;}
#about .other h5 { font-size: 24px; font-weight: 500; margin-bottom: 45px; text-align: center;}
#about .other h5 img { display: block; margin: 0 auto 13px;}
#about .other .flex { display: flex; justify-content: space-between;}
#about .other .flex a { display: block;}
#about .other .flex a img { margin-bottom: 20px;}
#about .other .flex a p { position: relative; font-size: 20px; font-weight: 500; letter-spacing: 0.08em;}
#about .other .flex a p:before { content: ""; display: inline-block; width: 24px; height: 24px; background: #000; border-radius: 50%; vertical-align: -4px; margin-right: 14px;}
#about .other .flex a p:after { position: absolute; content: ""; display: block; width: 8px; height: 8px; border-top: solid 1px #ffffff; border-right: solid 1px #ffffff; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 7px; top: 37%;}

/*-------------- roomlist --------------*/

#roomlist { padding: 101px 0 63px; background: url(../images/rooms/bg_pattern01.jpg) repeat left top / auto;}
#roomlist h3 { font-size: 36px; font-weight: 700; margin-bottom: 84px; text-align: center; }
#roomlist h3 img { display: block; margin: 0 auto 10px;}
#roomlist h3 em { font-size: 44px; font-weight: 700; vertical-align: -0.07em; padding: 0 3px;}
#roomlist .circle { font-size: 20px; color: #8c0000; padding: 15px 0; width: 550px; border: 1px solid #8c0000; border-radius: 30px; margin: 0 auto 50px; text-align: center; font-weight: 500;}

#roomlist ul { display: flex; justify-content: space-between; flex-wrap: wrap; width: 880px; margin: 0 auto;}
#roomlist li { width: 260px; text-align: center; border-bottom: 5px solid #c9c9c9; margin-bottom: 41px;}
#roomlist li:hover { border-bottom: 5px solid #626262;}
#roomlist li a { display: block; text-align: left;}
#roomlist li .num { display: inline-block; margin-bottom: 11px;}
#roomlist li h4 { font-size: 36px; margin-bottom: 19px; color: #1b1b1b;}
#roomlist li h4 img { margin-left: 18px; vertical-align: 6px;}
#roomlist li .feature { margin-bottom: 15px;}
#roomlist li .feature p { font-size: 13px; color: #1b1b1b; line-height: 1.385; margin-bottom: 9px; padding-bottom: 15px; border-bottom: 1px solid #c9c9c9;}
#roomlist li .feature p em { padding-left: 3em;}
#roomlist li .feature p:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0px;}

#roomlist li .arrow { display: block; margin: 0 auto 15px;}

#roomlist .all { }
#roomlist .all .circle { color: #fff; background-color: #8c0000; }

#roomlist .all li { width: 415px;}
#roomlist .all .top { width: 320px; margin: 0 auto;}
#roomlist .all li h4 {}
#roomlist .all li h4 img { }
#roomlist .all li .feature { margin-bottom: 30px;}
#roomlist .all li .arrow { margin-bottom: 20px;}


/*-------------- room --------------*/

.room { position: relative; z-index: 1;}
.room .top { padding-top: 350px;}
.room .top .inner div { width: 100%; background-color: rgba(255,255,255,0.8); color: #000; text-align: center; padding: 76px 0 53px;}
.room .top p { font-size: 16px; line-height: 1.875; letter-spacing: 0; margin-bottom: 68px;}
.room .top h3 { font-size: 80px; font-weight: 200; margin-bottom: 49px;}
.room .top h3 .num { display: block; margin: 0 auto 20px;}
.room .top h3 .name { display: block; margin: 31px auto 0;}
.room .top .circle { font-size: 20px; color: #8c0000; line-height: 1; letter-spacing: 0; padding: 11px 0; width: 500px; border-radius: 22px; background-color: #fff; border: 1px solid #8c0000; margin: 0 auto 40px;}

.room.oyakata { background-color: #000;}
.room.oyakata .top { color: #fff;}
.room.oyakata .top .inner div { width: 100%; background-color: rgba(0,0,0,0.6); color: #fff; text-align: center;}
.room.oyakata .top h3 span {color: #bdb28f;}
.room.oyakata .top .circle { color: #fff; border: 0px; background-color: #8c0000;}



.room .bottom { padding-bottom: 101px;}
.room .bottom .slide { overflow: hidden;}
.room .bottom .slick-slider { position: relative; width: 940px; margin: 0 auto 135px; text-align: center;}
.room .bottom .slick-slider .slick-lists { position: relative; width: 940px; margin-right: 60px;}
.room .bottom .slick-slider .slick-lists div { }
.room .bottom .slick-slider .slick-list { overflow: visible;}
.room .bottom .slick-list img { display: block; width: 100%; height: auto; margin-bottom: 30px;}
.room .bottom .slick-list p { font-size: 16px; letter-spacing: 0.04em; line-height: 130%;}
.room .bottom .slick-slider .slick-dots { bottom: -40px;}
.room .bottom .slick-slider .slick-dots li { width: 10px; height: 10px; margin: 0 10px; background-color: #c9c9c9; border-radius: 50%;}
.room .bottom .slick-slider .slick-dots li.slick-active { background-color: #8c0000;}
.room .bottom .slick-slider .slick-dots li button::before { color: transparent;}
.room .bottom .slick-prev,
.room .bottom .slick-next { width: 80px; height: 80px; z-index: 1;}
.room .bottom .slick-prev:before,
.room .bottom .slick-next:before { content: "";}
.room .bottom .slick-prev { background: url(../images/common/btn_01.png) no-repeat center center / 100%; left: -40px;}
.room .bottom .slick-next { background: url(../images/common/btn_02.png) no-repeat center center / 100%; right: -40px;}

.room .bottom .bunner { margin-bottom: 96px; z-index: 1;}
.room .bottom .details h4 { font-size: 20px; margin-bottom: 60px; text-align: center; letter-spacing: 0.2em;}
.room .bottom .details h4 img { display: block; margin: 0 auto 21px;}
.room .bottom .details .flex { display: flex; justify-content: space-between; align-items: flex-start; flex-flow: row-reverse; margin-bottom: 60px;}
.room .bottom .details .flex_l { position: relative; width: 500px; text-align: center; padding-top: 40px; z-index: 1;}
.room .bottom .details .flex_l:before { position: absolute; top: 0; left: 0; content: ""; display: block; width: 500px; height: 411px; background: #e5e5e5; z-index: -1;}
.room .bottom .details .flex_l p { font-size: 20px; letter-spacing: 0.04em; line-height: 1; color: #000; font-weight: 400; margin-bottom: 30px;}
.room .bottom .details .flex_l img { }
.room .bottom .details .flex_r { width: 50%; margin-top: -10px;}
.room .bottom .details h5 { font-size: 36px; line-height: 1.333; font-weight: 700; margin-bottom: 26px;}
.room .bottom .details p { font-size: 16px; line-height: 2; margin-bottom: 30px;}

.room .bottom .details .feature { }
.room .bottom .details .feature p { font-size: 16px; margin-bottom: 10px;}
.room .bottom .details .feature p:before { display: inline-block; content: ""; width: 4px; height: 23px; background-color: #000; vertical-align: -0.4em; margin-right: 15px;}
.room .bottom .details .feature dl { display: flex; border-bottom: 1px solid #535353; padding: 19px 0;}
.room .bottom .details .feature dl:last-of-type { border-bottom: 0px; margin-bottom: 20px;}
.room .bottom .details .feature dt { width: 155px; line-height: 1.625; font-weight: 500;}
.room .bottom .details .feature dd { font-weight: 300; line-height: 1.625;}
.room .bottom .details .feature dd.side { display: flex; align-items: center;}
.room .bottom .details .feature dd small { font-size: 12px; line-height: 1.667; padding-left: 30px;}
.room .bottom .details .feature dd em { display: block; font-size: 12px; line-height: 1.667; padding-top: 5px;}
.room .bottom .details .feature dd em small { display: block; font-size: 10px; line-height: 1.667; padding: 6px 0 0;}
.room .bottom .details .feature .notes { display: inline-block; font-size: 12px; line-height: 1.667; padding-bottom: 30px;}

.room .bottom .details .feature a { display: block; width: 320px; padding: 22px 0; font-size: 14px; font-weight: 400; text-align: center; border: 1px solid #000;}
.room .bottom .details .feature a:hover { color: #fff; background: #000;}
.room .bottom .details .booking { display: block; width: 480px; color: #fff; line-height: 80px; font-size: 20px; font-weight: 500; text-align: center; background-color: #8c0000; margin:  0 auto;}

.room.oyakata .bottom { color: #fff;}
.room.oyakata .bottom .details .flex_l:before { background: #1b1b1b;}
.room.oyakata .bottom .details .flex_l p { color: #fff;}
.room.oyakata .bottom .details .feature p:before { background-color: #fff; }
.room.oyakata .bottom .details .feature a { color: #fff; border: 1px solid #fff;}
.room.oyakata .bottom .details .feature a:hover { color: #000; background: #fff;}




/*--------- utsukushi */
#utsukushi .top { background: url(../images/rooms/room01/room01_bg_01.jpg) no-repeat center top / 100%;}
#utsukushi .bottom { background: url(../images/rooms/room01_bg_02.webp) no-repeat center bottom / 100%;}

/*--------- utsukushi */
#akari .top { background: url(../images/rooms/room02/room02_bg_01.jpg) no-repeat center top / 100%;}
#akari .bottom { background: url(../images/rooms/room01_bg_02.webp) no-repeat center bottom / 100%;}


/*--------- yasuraka */
#yasuraka .top { color: #fff; background: url(../images/rooms/room03/room03_bg_01.jpg) no-repeat center top / 100%;}

/*--------- yasuraka */
#matsuri .top { color: #fff; background: url(../images/rooms/room04/room04_bg_01.jpg) no-repeat center top / 100%;}

/*--------- yasuraka */
#kotowari .top { color: #fff; background: url(../images/rooms/room05/room05_bg_01.jpg) no-repeat center top / 100%;}

/*--------- yasuraka */
#syou .top { color: #fff; background: url(../images/rooms/room06/room06_bg_01.jpg) no-repeat center top / 100%;}

/*--------- yasuraka */
#dai .top { color: #fff; background: url(../images/rooms/room07/room07_bg_01.jpg) no-repeat center top / 100%;}

/*--------- yasuraka */
#sou .top { color: #fff; background: url(../images/rooms/room08/room08_bg_01.jpg) no-repeat center top / 100%;}

/*-------------- amenities --------------*/

#amenities { padding: 116px 0 75px; background: url(../images/rooms/bg_pattern01.jpg) repeat left top / auto;}
#amenities .a_inner { width: 941px; margin: 0 auto;}
#amenities h3 { font-size: 20px; letter-spacing: 0.04em; margin-bottom: 30px; text-align: center;}
#amenities h3 img { display: block; margin: 0 auto 24px;}
#amenities .flex { width: 100%; display: flex; flex-wrap: wrap; margin: 0 auto 82px;}
#amenities .flex .item { max-width: 305px; margin: 0 13px 13px 0; position: relative;}
#amenities .flex .item:nth-child(3n) { margin-right: 0;}
#amenities .flex .item:nth-child(n+7) { margin-bottom: 0;}
#amenities .flex .item:hover .item_text { opacity: 1;}
#amenities .flex .item .item_img { width: 100%; height: 100%;}
#amenities .flex .item .item_img .plus { display: none;}
#amenities .flex .item .item_text { position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-align: center; color: #fff; background-color: rgba(0,0,0,0.8);  transition: .3s ease-in-out; opacity: 0; display: flex; flex-direction: column; align-items: center; padding: 27px 20px 0;}
#amenities .flex .item .item_text p.top { font-size: 20px; line-height: 1.5; font-weight: 500; letter-spacing: 0.08em; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid #fff; text-align: center;}
#amenities .flex .item .item_text p { font-size: 13px; line-height: 1.692; font-weight: 300; letter-spacing: 0; text-align: left;}

#amenities .equip { }
#amenities .equip h5 { font-size: 23px; letter-spacing: 0.06em; margin-bottom: 20px; font-weight: 500; padding-bottom: 20px; border-bottom: 1px solid #313131;}
#amenities .equip h5:before { display: inline-block; content: ""; width: 4px; height: 23px; background-color: #000; vertical-align: -0.1em; margin-right: 16px;}
#amenities .equip .flex { display: flex; justify-content: space-between;}
#amenities .equip ul {  width: calc( 100% / 3 );}
#amenities .equip li { font-size: 16px; font-weight: 300; line-height: 2; letter-spacing: 0.04em;}
#amenities .equip li.btm { margin-bottom: 1em;}

#amenities .other { }
#amenities .other h4 { font-size: 20px; letter-spacing: 0.04em; margin-bottom: 50px; text-align: center;}
#amenities h4 img { display: block; margin: 0 auto 20px;}
#amenities .other table { }
#amenities .other table tr { border-bottom: 1px solid #000;}
#amenities .other table tr:first-child { border-top: 1px solid #000;}
#amenities .other table tr:last-child { border-bottom: 0px;}
#amenities .other table .bottom { border-bottom: 0px;}
#amenities .other table .request p { line-height: 1.625; text-indent: -1em; padding-left: 1em;}

#amenities .other table th,
#amenities .other table td { padding: 20px 0; text-align: left; line-height: 1.625;}
#amenities .other table th { width: 290px; font-weight: 500; vertical-align: text-top;}
#amenities .other table th.merge { text-align: left; font-weight: 400; padding: 10px 0 20px;}
#amenities .other table th.merge p { font-size: 15px; line-height: 1.733; }
#amenities .other table th.merge p span { font-weight: 500;}
#amenities .other table td { }
#amenities .other table td small { display: block; font-size: 14px; margin-top: 6px;}

/*--------- amemodal */

.amemodal { display: none;}




/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {
	
	/*-------------- all --------------*/
	
	body { min-width: auto;}
	
	.view { }
	
	.bunner { display: block; padding: 0 0 24px; background-color: #fff;}
	.bunner img { width: 100%; height: auto;}
	.bunner div { margin-left: auto; padding: 15px 25px 0; text-align: center;}
	.bunner h4 { margin-bottom: 7px;}
	.bunner h4 img { width: 77px; height: auto;}
	.bunner h5 { font-size: 15px; line-height: 1.667; margin-bottom: 7px;}
	.bunner p { font-size: 12px; line-height: 1.5; margin-bottom: 18px; text-align: left;}
	.bunner .view { font-size: 13px; text-align: center;}
	
	
	/*-------------- fv --------------*/
	
	#fv .fv { background: url(../images/rooms/fv_sp.jpg) no-repeat center center / cover;}
	#fv h2 img { width: auto; height: 32.5px;}
	
	/*-------------- about --------------*/
	
	#about { position: relative; background: #fff; padding: 50px 0;}
	#about .about { }
	#about .about h3 { font-size: 15px; letter-spacing: 0.04em; margin-bottom: 20px;}
	#about .about h3 img { display: block; width: auto; height: 25px; margin-top: 10px;}
	#about .about .big { width: 300px; height: auto; margin-bottom: 40px;}
	#about .about .title { font-size: 18px; margin-bottom: 30px;}
	#about .about .title span { font-size: 24px; margin-top: 15px;}
	#about .about .txt { font-size: 13px; margin-bottom: 50px;}
	#about .about h4 { font-size: 18px; font-weight: 500; margin-bottom: 30px;}
	#about .about h4 img { width: auto; height: 22px; margin-top: 10px;}
	#about .about .middle { font-size: 13px; line-height: 1.769; letter-spacing: 0; margin-bottom: 20px;}
	#about .about .flex { display: block; margin-bottom: 25px;}
	#about .about .flex .feature { width: 300px; margin-right: 0; margin: 0 auto 20px; padding-bottom: 20px; border-bottom: 1px solid #c9c9c9;}
	#about .about .flex .feature:nth-child(3n) { margin-right: auto;}
	#about .about .flex .feature:last-child { margin-bottom: 0;}
	#about .about .flex .feature img { width: 100%; height: auto; margin-bottom: 15px;}
	#about .about .flex .feature .title { font-size: 15px; margin-bottom: 15px;}
	#about .about .flex .feature .txt { font-size: 12px; line-height: 1.833; letter-spacing: 0.04em; margin-bottom: 0;}
	
	#about .about .slick-slider { width: 100%; margin: 0 auto 71px;}
	#about .about .slick-slider .slick-lists { width: 300px; margin: 0 8px;}
	#about .about .slick-slider .slick-lists div { }
	#about .about .slick-list img { width: 100%; height: auto; margin-bottom: 15px;}
	#about .about .slick-list .title { font-size: 15px; margin-bottom: 15px;}
	#about .about .slick-list .txt { font-size: 12px; line-height: 1.833; text-align: left; margin-bottom: 0;}
	#about .about .slick-list .txt small { font-size: 10px;}
	#about .about .slick-slider .slick-dots { bottom: -33px;}
	#about .about .slick-slider .slick-dots li { margin: 0 5px;}
	#about .about .slick-prev,
	#about .about .slick-next { width: 40px; height: 40px; z-index: 1; top: 42%;}
	#about .about .slick-prev { left: 20px;}
	#about .about .slick-next { right: 20px;}
	
	#about #sauna { margin-bottom: 60px;}
	#about #sauna .btn { display: block;}
	#about #sauna .btn .btns { font-weight: 500; margin: 0 auto;}
	#about #sauna .btn .btns:first-child { margin: 0 auto 15px;}
	
	#about #room { }
	
	#about .other { padding-top: 50px;}
	#about .other h5 { font-size: 18px; margin-bottom: 28px;}
	#about .other h5 img { width: auto; height: 8.5px; margin-bottom: 15px;}
	#about .other .flex { display: block; text-align: center;}
	#about .other .flex a { display: inline-block; margin: 0 auto 25px; text-align: left;}
	#about .other .flex a:last-child { margin-bottom: 0px;}
	#about .other .flex a img { margin-bottom: 10px;}
	#about .other .flex a p { font-size: 15px;}
	#about .other .flex a p:before { width: 15px; height: 15px; vertical-align: -2px; margin-right: 5px;}
	#about .other .flex a p:after { width: 5px; height: 5px; left: 4px; top: 37%;}
	
	
	/*-------------- roomlist --------------*/
	
	#roomlist { padding: 48px 0 20px; }
	#roomlist h3 { font-size: 20px; line-height: 1.5; letter-spacing: 0.04em; margin-bottom: 42px;}
	#roomlist h3 span { font-size: 12px; letter-spacing: 0.1em; margin-bottom: 7px;}
	#roomlist h3 em { font-size: inherit; font-weight: inherit; vertical-align: 0; padding: 0;}
	#roomlist .circle { font-size: 14px; padding: 9px 0 8px; width: 100%; border-radius: 29px; margin: 0 auto 30px;}
	#roomlist ul { display: flex; justify-content: space-between; flex-wrap: wrap; width: 90%; margin: 0 auto;}
	#roomlist li { width: 48%; border-bottom: 2.5px solid #c9c9c9; margin-bottom: 30px;}
	#roomlist li:hover { border-bottom: 2.5px solid #626262;}
	#roomlist li .num { width: auto; height: 8.5px; margin-bottom: 10px;}
	#roomlist li h4 { font-size: 25px; margin-bottom: 11px;}
	#roomlist li h4 img { width: auto; height: 7px; margin-left: 8px; vertical-align: 6px;}
	#roomlist li .feature { margin-bottom: 10px;}
	#roomlist li .feature p { font-size: 10px; line-height: 1.6; margin-bottom: 9px; padding-bottom: 10px; }
	#roomlist li .feature p em { padding-left: 0;}
	#roomlist li .arrow { margin-bottom: 7px;}
	
	#roomlist .all ul { display: block;}
	#roomlist .all li { width: 100%;}
	#roomlist .all .top { width: 225px; margin: 0 auto;}
	#roomlist .all li .num { height: 10.5px; margin-bottom: 14px;}
	#roomlist .all li h4 { font-size: 35px; margin-bottom: 15px;}
	#roomlist .all li h4 img { height: 8.5px; margin-left: 14px;}
	#roomlist .all li .feature { margin-bottom: 15px;}
	#roomlist li .feature p { font-size: 11px;}
	#roomlist .all li .arrow { margin-bottom: 10px;}
		
	#roomlist .all { }
	
	
	
	/*-------------- room --------------*/
	
	.room { }
	.room .top { padding-top: 133px;}
	.room .top .inner div { width: 100%; padding: 30px 5% 30px;}
	.room .top p { font-size: 12px; line-height: 1.833; letter-spacing: 0.04em; text-align: left; margin-bottom: 25px;}
	.room .top h3 { font-size: 50px; margin-bottom: 25px;}
	.room .top h3 .num { width: auto; height: 10.5px; margin-bottom: 18px;}
	.room .top h3 .name { width: auto; height: 8.5px; margin-top: 16px;}
	.room .top .circle { font-size: 13px; padding: 9px 0; width: 100%; border-radius: 30px; margin: 0 auto 20px; text-align: center;}
	
	.room.oyakata .top .inner div { width: 100%; padding: 30px 5% 30px; background-color: rgba(0,0,0,0.6);}
			
	
	.room .bottom { padding-bottom: 50px;}
	.room .bottom .slick-slider { width: 100%; margin: 0 auto 71px;}
	.room .bottom .slick-slider .slick-lists { width: 100%; margin: 0 8px;}
	.room .bottom .slick-slider .slick-lists div { }
	.room .bottom .slick-list img { width: 100%; height: auto; margin-bottom: 10px;}
	.room .bottom .slick-list p { font-size: 15px; line-height: 1.667; letter-spacing: 0;}
	.room .bottom .slick-slider .slick-dots { bottom: -33px;}
	.room .bottom .slick-slider .slick-dots li { margin: 0 5px;}
	.room .bottom .slick-prev,
	.room .bottom .slick-next { width: 40px; height: 40px; z-index: 1; top: 40%;}
	.room .bottom .slick-prev { left: 20px;}
	.room .bottom .slick-next { right: 20px;}
	
	.room .bottom .bunner { margin-bottom: 50px;}
	.room .bottom .details h4 { font-size: 15px; margin-bottom: 42px; letter-spacing: 0.04em;}
	.room .bottom .details h4 img { width: auto; height: 25.5px; margin-bottom: 10px;}
	.room .bottom .details .flex { display: block; margin-bottom: 20px;}
	.room .bottom .details .flex_l { width: 100%; padding-top: 30px; margin: 0 auto;}
	.room .bottom .details .flex_l:before { width: 100%; height: auto; padding-bottom: 100%;}
	.room .bottom .details .flex_l p { font-size: 15px; margin-bottom: 20px;}
	.room .bottom .details .flex_l img { width: 90%; height: auto;}

	.room .bottom .details .flex_r { width: 100%; margin: 0 0 40px;}
	
	.room .bottom .details .feature { }
	.room .bottom .details .feature p { font-size: 13px; margin-bottom: 5px; letter-spacing: 0.04em;}
	.room .bottom .details .feature p:before { width: 5px; height: 20px; vertical-align: -0.4em; margin-right: 13px;}
	.room .bottom .details .feature dl { display: block; padding: 19px 0;}
	.room .bottom .details .feature dl:last-of-type { border-bottom: 0px; margin-bottom: 10px;}
	.room .bottom .details .feature dt { width: 100%; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; margin-bottom: 3px;}
	.room .bottom .details .feature dd { font-size: 13px; font-weight: 300; letter-spacing: 0.04em;}
	.room .bottom .details .feature dd.side { display: block;}
	.room .bottom .details .feature dd small { display: block; font-size: 10px; line-height: 1.8; padding: 7px 0 0;}
	.room .bottom .details .feature dd em { display: block; font-size: 10px; line-height: 1.8; padding: 7px 0 0;}
	.room .bottom .details .feature a { width: 275px; padding: 18px 0 17px; margin: 0 auto; font-size: 13px; font-weight: 700;}
	.room .bottom .details .booking { width: 275px; line-height: 50px; font-size: 13px; font-weight: 700;}
	
	
	
	/*--------- utsukushi */
	#utsukushi .top { background: #000 url(../images/rooms/room01/room01_bg_01_sp.jpg) no-repeat center top / 100%;}
	#utsukushi .bottom { background: #000;}
	
	/*--------- utsukushi */
	#akari .top { background: #000 url(../images/rooms/room02/room02_bg_01_sp.jpg) no-repeat center top / 100%;}
	#akari .bottom { background: #000;}
	
	/*--------- yasuraka */
	#yasuraka .top { color: #fff; background: url(../images/rooms/room03/room03_bg_01_sp.jpg) no-repeat center top / 100%;}

	/*--------- #matsuri */
	#matsuri .top { color: #fff; background: url(../images/rooms/room04/room04_bg_01_sp.jpg) no-repeat center top / 100%;}
	
	/*--------- kotowari */
	#kotowari .top { color: #fff; background: url(../images/rooms/room05/room05_bg_01_sp.jpg) no-repeat center top / 100%;}
	
	/*--------- #syou */
	#syou .top { color: #fff; background: url(../images/rooms/room06/room06_bg_01_sp.jpg) no-repeat center top / 100%;}
	
	/*--------- #dai */
	#dai .top { color: #fff; background: url(../images/rooms/room07/room07_bg_01_sp.jpg) no-repeat center top / 100%;}
	
	/*--------- #sou */
	#sou .top { color: #fff; background: url(../images/rooms/room08/room08_bg_01_sp.jpg) no-repeat center top / 100%;}

	
	/*-------------- amenities --------------*/
	
	#amenities { padding: 50px 0 40px;}
	#amenities .a_inner { width: 90%; margin: 0 auto;}
	#amenities h3 { font-size: 15px; margin-bottom: 25px;}
	#amenities h3 img { width: auto; height: 25px; margin-bottom: 15px;}
	#amenities .flex { justify-content: space-between; width: 100%; margin: 0 auto 34px;}
	#amenities .flex .item { position: relative; max-width: none; width: 49%; margin: 0 0 10px;}
	#amenities .flex .item .item_img .plus { position: absolute; display: block; width: 20%; height: 20%; top: 0; right: 0; background-color: #000;}
	#amenities .flex .item .item_img .plus span { position: absolute; display: block; content: ""; width: 50%; height: 2px; background-color: #c9c9c9; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
	#amenities .flex .item .item_img .plus span:last-child { top: 49%; left: 25%; transform: rotate(90deg);}
	#amenities .flex .item .item_text { display: none;}
	#amenities .flex .item:nth-child(3n) { margin-right: 0;}
	#amenities .flex .item:nth-child(even) { margin-right: 0;}
	
	#amenities .equip { }
	#amenities .equip h5 { font-size: 13px; letter-spacing: 0.04em; margin-bottom: 25px; padding-bottom: 15px;}
	#amenities .equip h5:before { width: 5px; height: 20px; vertical-align: -0.1em; margin-right: 13px;}
	#amenities .equip .flex { display: block;}
	#amenities .equip ul {  width: 100%;}
	#amenities .equip ul:nth-of-type(2) { margin-bottom: 1em;}
	#amenities .equip li { font-size: 14px;}
	#amenities .equip li.btm { margin-bottom: 1em;}
	
	#amenities .other { }
	#amenities .other h4 { font-size: 15px; letter-spacing: 0.04em; margin-bottom: 50px; text-align: center;}
	#amenities h4 img { width: auto; height: 22px; margin-bottom: 14px;}
	#amenities .other table { }
	#amenities .other table tr { border-bottom: 1px solid #000;}
	#amenities .other table tr:first-child { border-top: 1px solid #000;}
	#amenities .other table tr:last-child { border-bottom: 0px;}
	
	#amenities .other table th,
	#amenities .other table td { display: block; padding: 0; font-size: 13px; line-height: 1.769;}
	#amenities .other table th { width: 100%; font-weight: 500; padding-top: 15px;}
	#amenities .other table th.merge { text-align: center; font-weight: 400; padding: 30px 0 15px;}
	#amenities .other table th.merge p { font-size: 13px; }
	#amenities .other table th.merge p span { }
	#amenities .other table th.merge .left { text-align: left; border-bottom: 1px solid #000; border-top: 1px solid #000; padding-top: 1.5em; margin-bottom: 1em;}
	#amenities .other table td { padding-bottom: 15px;}
	#amenities .other table td small { font-size: 10px; margin-top: 6px;}
	
	
	/*--------- amemodal */
	
	.amemodal { display: none; position: fixed; top: 0; height: 100vh; width: 100%; background: rgba(0,0,0,0.9); overflow-y: scroll; z-index: 120;}
	.amemodal .modal { position: relative; padding: 25px 0 0; color: #fff; text-align: center;}
	.amemodal .modal .js-modal-close { position: relative; display: block; left: 90%; width: 31px; height: 31px; margin-bottom: 25px; cursor: pointer;}
	.amemodal .modal .js-modal-close span { position: absolute; display: block; content: ""; top: 13px; width: 40px; height: 4px; background-color: #c9c9c9;}
	.amemodal .modal .js-modal-close span:first-child { transform: rotate(45deg);}
	.amemodal .modal .js-modal-close span:last-child { transform: rotate(-45deg);}
	.amemodal .modal img { width: 100%; height: auto; margin-bottom: 45px;}
	.amemodal .modal .top { font-size: 20px; font-weight: 500; line-height: 1.5; letter-spacing: 0.08em; padding-bottom: 24px; margin-bottom: 25px; border-bottom: 1px solid #fff; text-align: center;}
	.amemodal .modal p { font-size: 13px; line-height: 2; letter-spacing: 0.04em; text-align: left;}
	
	body.fixed { position: fixed; width: 100%; height: 100%; left: 0;}
	
	
	.access { background: url(../images/rooms/bg_pattern01.jpg) repeat left top / auto;}
	
}