@charset "utf-8";

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

body { min-width: 1400px;}
/* .btns { display: block; width: 320px; border: 1px solid #9a8b68; padding: 25px 0; font-size: 14px; text-align: center; letter-spacing: 0.04em; color: #bdb28f; font-weight: 700;} */
/* .view { font-weight: 700; letter-spacing: 0.04em; color: #bdb28f; text-decoration: underline; text-decoration-color: #bdb28f; text-underline-offset: 9px;} */
.max_in { position: relative; max-width: 1600px; margin: 0 auto;}
header { min-width: 1400px;}
/*
#fv a:visited,#fv a:link,
#about a:visited,#about a:link,
#service a:visited,#service a:link,
#stay a:visited,#stay a:link,
#other a:visited,#other a:link { color: inherit;}
*/

.btns.white:hover { color: #fff; background: #9a8b68;}


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

#fv { color: #fff;}
#fv .fv_video { position: relative; overflow: hidden; width: 100%; height: 100vh;}
#fv .fv_video video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); object-fit: cover; z-index: 1;}
#fv .fv_video video[poster] { max-height: 100%;}

#fv .open { position: absolute; bottom: 64px; left: 87px; z-index: 2;}
#fv .open p { line-height: 1.375; margin-bottom: 22px;}
#fv .open .open_p { font-size: 30px;  font-weight: 300; font-style: italic; line-height: 1; margin-bottom: 0;}
#fv .open .open_p span { display: block; font-size: 50px; font-weight: 500; font-style: italic;}
#fv .open .open_p em { display: block; font-size: 18px; font-style: italic; margin-top: 9px;}

#fv .scroll { position: absolute; bottom: 46px; left: 40px; z-index: 2; font-size: 10px; letter-spacing: 0.4em; writing-mode: vertical-rl;}
#fv .scroll:after { content: ""; display: inline-block; width: 1px; height: 80px; background-color: #fff; margin-top: 13px; animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;}

@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}


/*-------------- reservation --------------*/

#reservation { padding: 60px 0 100px;}
#reservation .top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 34px;}
#reservation .top h3 { font-size: 34px; font-weight: 700; padding-left: 17px; border-left: 6px solid #000; text-align: left;}
#reservation .top h3 span { display: block; font-size: 14px; font-weight: 300; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; letter-spacing: 0.16em; margin-top: 15px;}
#reservation .top .best { display: flex; justify-content: flex-end; align-items: flex-start;}
#reservation .top .best img { margin-right: 9px;}
#reservation .top .best p { font-size: 23px; font-weight: 700; color: #776620; letter-spacing: 0.04em; text-align: center; padding-top: 16px;}
#reservation .top .best p small { display: block; font-size: 10px; font-weight: 300; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; letter-spacing: 0.1em; margin-top: 7px;}
#reservation .top .best p span { display: block; font-size: 11px; font-weight: 300; color: #000; letter-spacing: 0.04em; margin-top: 13px;}

#reservation form { }
#reservation form .checkin {}
/*
#reservation form .checkin .inputform { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px;}
#reservation form .checkin .inputform .check { display: flex; align-items: flex-end;}
#reservation form .checkin .inputform .check div { position: relative; width: 340px;}
#reservation form .checkin .inputform .check div:nth-child(1) { margin-right: 45px;}
#reservation form .checkin .inputform .check div:nth-child(1):after { position: absolute; right: -30px; bottom: 20px; display: inline-block; content: "〜"}
#reservation form .checkin .inputform .check p { font-size: 16px; font-weight: 500; letter-spacing: 0.04em; margin-bottom: 6px; text-align: left;}
#reservation form .checkin .inputform .check p img { display: inline-block; vertical-align: -6px; margin-right: 10px;}
#reservation form .checkin .inputform .check .calendar { width: 100%; padding: 15px 19px; color: #b5b5b5; border: 1px solid #c9c9c9;}
#reservation form .checkin .inputform .check .calendar:focus { color: #000;}

#reservation form .checkin .inputform .other { display: flex; align-items: flex-end;}
#reservation form .checkin .inputform .other div { position: relative; width: 140px;}
#reservation form .checkin .inputform .other div:nth-child(1) { margin-right: 20px;}
#reservation form .checkin .inputform .other p { font-size: 16px; font-weight: 500; letter-spacing: 0.04em; margin-bottom: 6px; text-align: left;}
#reservation form .checkin .inputform .other p img { display: inline-block; vertical-align: -2px; margin-right: 10px;}
#reservation form .checkin .inputform .other .list { width: 100%; padding: 19px 20px; color: #b5b5b5; background: #fff; border: 1px solid #c9c9c9;}
#reservation form .checkin .inputform .other div:after { content: ""; position: absolute; bottom: 28.5px; right: 16px; border-top: solid 1px #b5b5b5; border-right: solid 1px #b5b5b5; width: 6px; height: 6px; transform: rotate(135deg); -webkit-transform: rotate(135deg);}
#reservation form .checkin .inputform .other .list:focus { color: #000;}

#reservation form .undecided { text-align: left; margin-bottom: 40px;}
#reservation form .undecided .checkbox { width: 20px; height: 20px; vertical-align: -2px;}
#reservation form .undecided label { letter-spacing: 0.04em;}
*/
#reservation form .checkin .inputform .search_box { align-items: flex-start; display: flex; flex-wrap: wrap; justify-content: space-between; margin: auto; padding: 10px 0 30px; }
#reservation form .checkin .inputform .search_box .count { width: calc(25% - 10px); }
#reservation form .checkin .inputform .search_box h3 { padding: 10px 0; font-size: 16px; }
#reservation form .checkin .inputform .search_box .nights h3 { padding: 10px 0 10px 30px; 
	background: url(../images/reservation/icn-0.png) no-repeat left center;
	background-size: 25px auto;
}
#reservation form .checkin .inputform .search_box .room h3 { padding: 10px 0 10px 30px; 
	background: url(../images/reservation/icn-1.png) no-repeat left center;
	background-size: 25px auto;
}
#reservation form .checkin .inputform .search_box .box { position: relative; border: 1px solid #c9c9c9; padding: 20px; }
#reservation form .checkin .inputform .search_box .disabled .box { color: #9c9c9c; }

#reservation form .checkin .inputform .search_box .input { cursor: pointer; position: relative; }
#reservation form .checkin .inputform .search_box .disabled .input { cursor: default; pointer-events: none; }
#reservation form .checkin .inputform .search_box .box::before { transform: rotate(45deg); width: 5px; height: 5px; border-right: 2px solid #c9c9c9; border-bottom: 2px solid #c9c9c9; top: 0; bottom: 0; right:15px; margin: auto; position: absolute; content: ''; display: block; }
#reservation form .checkin .inputform .search_box .disabled .box::before { display: none; }
#reservation form .checkin .inputform .search_box .input .dropdown { position: absolute; display: none; width: auto; padding: 10px; top: 110%; box-shadow: 2px 3px 8px -6px #999; border: 1px solid #c9c9c9; box-sizing: border-box; background: #fff; z-index: 1; border-radius: 5px; }
#reservation form .checkin .inputform .search_box .input .dropdown input[type="text"] { display: inline-block; vertical-align: top; text-align: center; width: 50px; height: 30px; line-height: 30px; padding: 0; color: #000; vertical-align: middle; }
#reservation form .checkin .inputform .search_box .input .dropdown button { box-sizing: border-box; padding: 0; font-size: 20px; width: 30px; height: 30px; line-height: 30px; background: #0b65bf; color: #fff; display: inline-block; margin: 0 5px; cursor: pointer; text-align: center; vertical-align: middle; }
#reservation form .checkin .inputform .search_box .input .dropdown button.disabled { pointer-events: none; cursor: auto; background: #dbdbdb; }
#reservation form .checkin .inputform .search_box .input .dropdown .children { padding: 5px 0 0; }
#reservation form .checkin .inputform .search_box .input .dropdown .children p { display: none; padding: 5px 0; }
#reservation form .checkin .inputform .search_box .input .dropdown .children p select { width: 100%; }

#reservation form .search { margin-bottom: 24px;}
#reservation form .search .flex { display: flex; justify-content: center; gap: 15px; align-items: center;  margin-bottom: 18px;}
#reservation form .search .plan { width: 350px; line-height: 70px; font-size: 16px; color: #fff; background-color: #c9c9c9;}
#reservation form .search .plan:hover { background: #000;}
#reservation form .search .plan.stayplan { background-color: #000;}
#reservation form .search .plan.dayuseplan:hover +#reservation form .search .plan.stayplan,
#reservation form .search .plan.banquetplan:hover +#reservation form .search .plan.stayplan { background: #c9c9c9;}
#reservation form .search p { font-size: 14px; }
#reservation form .checkin .attention { font-size: 12px; line-height: 2; margin-bottom: 132px; text-indent: -1em; padding-left: 1em;}

#reservation .benefit { position: relative; width: 100%; padding: 40px 40px 28px; margin-bottom: 50px; border: 1px solid #9a8b68;}
#reservation .benefit h4 { margin: 0 auto 56px; text-align: center;}
#reservation .benefit .flex { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px;}
#reservation .benefit .flex img { }
#reservation .benefit .off { position: absolute; top: 0; right: 40px;}
#reservation .benefit p { text-align: center; margin-bottom: 50px;}
#reservation .benefit p:last-child { margin-bottom: 0;}
#reservation .benefit .grey { width: 100%; padding: 20px 0; background: #eee; font-size: 14px; line-height: 140%;}
#reservation .benefit .grey img { width: 95%; margin: 0 auto 10px;}
#reservation .benefit .caution { color: #666; line-height: 120%;}
#reservation .btn_list { display: flex; justify-content: space-between; align-items: center;}
#reservation .btn_list a { display: block; width: 350px; line-height: 70px;}
#reservation .btn_list .reservation { font-size: 20px; text-align: center; background: #8c0000; color: #fff;}
#reservation .btn_list .btns { padding: 0;}
#reservation .btn_list .btns:hover { color: #fff; background: #9a8b68;}

#reservation form input[type=date]::-webkit-calendar-picker-indicator {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
#reservation form input[type=date]::-moz-calendar-picker-indicator {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}


#reservation form input[type="date"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
}

#reservation form input[type="date"]::-webkit-clear-button{
  -webkit-appearance: none;
}

#reservation form input[type="date"]{
  position: relative;
}





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

#about { position: relative; background: #000 url(../images/top/bg_03.jpg) no-repeat center center / cover; color: #fff; padding: 200px 0 150px; z-index: 2;}
#about .max_in { max-width: 2000px;}
#about .flex { display: flex; justify-content: flex-end; flex-flow: row-reverse; margin-bottom: 94px;}
#about .flex_l { width: 50%; min-width: 800px;}
#about .flex_l img { width: 100%; height: auto;}
#about .flex_r { width: 725px; padding-right: 20px; margin: -20px 0 0 80px; }
#about .flex_r h2 { font-size: 20px; font-weight: 500; margin-bottom: 60px;}
#about .flex_r h2 img { display: block; margin-bottom: 28px; }
#about .flex_r .about_p { width: 487px;}
#about .flex_r h3 { font-size: 36px; letter-spacing: 0.04em; line-height: 1.444; margin-bottom: 35px; font-weight: 700;}
#about .flex_r p { font-size: 16px; line-height: 2; margin-bottom: 70px; font-feature-settings: "palt";}
#about .flex_r .btns { }

#about .bunner { display: flex; align-items: center; background-color: #eee; padding: 35px 40px;}
#about .bunner img { height: 168px;}
#about .bunner div { margin-left: 40px; color: #000; width: 560px;}
#about .bunner h4 { margin-bottom: 16px;}
#about .bunner h4 img { height: 45px;}
#about .bunner h5 { font-size: 22px; font-weight: 500; margin-bottom: 11px;}
#about .bunner p { line-height: 1.625; margin-bottom: 7px;}
#about .bunner .view { font-size: 14px; line-height: 1; text-align: right; margin-bottom: 0;}

/*-------------- service --------------*/

#service { position: relative; padding: 150px 0 480px; }
#service .service { display: flex; justify-content: flex-end;}
#service .service h3 { font-size: 20px; font-weight: 700; margin-bottom: 58px; line-height: 1; letter-spacing: 0.1em; font-family: 'source-han-sans-cjk-ja', sans-serif;}
#service .service h3 img { display: block; margin-bottom: 21px;}
#service .service h4 { font-size: 36px; font-weight: 700; line-height: 1.444; margin-bottom: 30px;}
#service .meals h4 { margin-bottom: 40px;}
#service .service p { font-size: 16px; line-height: 2; margin-bottom: 59px; font-feature-settings: "palt";}
#service .room { margin-bottom: 145px;}
#service .meals { flex-flow: row-reverse;}
#service .room .flex_r,
#service .meals .flex_l { position: relative; width: 700px; height: 800px;}
#service .room .flex_l { width: 490px; margin-right: 170px; padding-top: 77px;}
#service .meals .flex_r { margin-left: 100px; padding-top: 85px;}

@media only screen and (max-width: 1500px) {
#service .room .flex_l { margin-right: 80px;}
#service .meals .flex_r { margin-left: 80px;}
}

#service .slick-slider { width: 100%; height: 100%; margin: 0 auto;}
#service .slick-slider img { width: 100%; height: 100%; object-fit: cover;}
#service .slick-slider .slick-dots { bottom: -40px;}
#service .slick-slider .slick-dots li { width: 14px; height: 14px; margin: 0 10px; background-color: #c9c9c9; border-radius: 50%;}
#service .slick-slider .slick-dots li.slick-active { background-color: #8c0000;}
#service .slick-slider .slick-dots li button::before { color: transparent;}

#service .room .slick-slider .slick-dots { padding-right: 210px;}
#service .meals .slick-slider .slick-dots { padding-left: 210px;}

.slick-slider { display: none;}
.slick-slider.slick-initialized { display: block;}

/*-------------- stay --------------*/

#stay { position: relative; background: #000 url(../images/top/bg_04.jpg) no-repeat center center / cover; color: #fff; padding: 387px 0 150px;}
#stay .stay { }
#stay .stay_bg { position: relative; width: 90%; height: 600px; margin: -675px 0 96px; background: url(../images/top/pic_07.jpg) no-repeat center center / cover;}
#stay .stay_bg img { position: absolute; top: -3px; right: -107px;}
#stay h3 { font-size: 40px; line-height: 1.7; font-weight: 700; margin-bottom: 37px;}
#stay p { line-height: 2; letter-spacing: 0.04em; margin-bottom: 62px;}
#stay .flex { display: flex; justify-content: center;}
#stay .flex a { width: 475px; /* width: calc( ( 100% / 3) - 60px ); */ text-decoration: none;}
#stay .flex a:nth-of-type(2) { margin: 0 13px;}
#stay .plan { padding: 23px 42px 37px; text-align: center; color: #fff;}
#stay .plan div { padding: 249px 0 37px;}
#stay .plan h4 { font-size: 60px; font-weight: 700; letter-spacing: 0.2em;}
#stay .plan h4 img { display: block; margin: 16px auto 0;}
#stay .plan h4:after { display: block; content: ""; width: 300px; height: 1px; background-color: #fff; margin: 28px auto 23px;}
#stay .plan p { line-height: 2.125; margin-bottom: 40px; letter-spacing: 0;}
#stay .plan .view { width: 225px; line-height: 44px; text-decoration: none; border: 1px solid #9a8b68; font-size: 14px; margin: 0 auto;}
#stay a:hover .plan .view { color: #fff; background: #9a8b68;}
#stay .plan1 { background: url(../images/top/pic_08.jpg) no-repeat center top; background-size: cover;}
#stay .plan2 { background: url(../images/top/pic_09.jpg) no-repeat center top; background-size: cover;}
#stay .plan3 { background: url(../images/top/pic_10.jpg) no-repeat center top; background-size: cover;}


/*-------------- other --------------*/
#other { overflow: hidden;}
#other .hita { position: relative; }
#other .hita_bg { width: 100%; height: 600px; background: url(../images/top/pic_12.jpg) no-repeat center center / cover;}
#other .flex { position: relative; z-index: 2;}
#other .city .flex { display: flex; justify-content: space-between; align-items: center; padding-bottom: 245px; margin-top: -145px;}
#other .city .flex_l { }
#other .city .flex_l h3 { font-size: 70px; font-weight: 700; margin-bottom: 50px;}
#other .city .flex_l h3 span { display: block; font-size: 20px; font-family: 'source-han-sans-cjk-ja', sans-serif; font-weight: 500; margin-top: 18px;}
#other .city .flex_l h4 { font-size: 36px; font-weight: 700; line-height: 1.444; letter-spacing: 0.04em; margin-bottom: 32px;}
#other .city .flex_l p { line-height: 2; margin-bottom: 62px; width: 527px;}
#other .city .flex_l .btns { width: 280px; font-family: 'source-han-sans-cjk-ja', sans-serif; padding: 23px 20px 23px 0; background: url(../images/top/icn_05.png) no-repeat 90% center; background-color: #fff;}
#other .city .flex_l .btns:hover { color: #fff; background-color: #9a8b68;}

#other .city .flex_r { margin-bottom: 280px;}

#other .hita:before { display: block; position: absolute; content: ""; width: 100%; height: 100%; top: 380px; right: calc( ( 100% - 1530px ) /2 ); background: url(../images/top/pic_14.png) no-repeat right center; background-size: 1123px;}

#other .news { padding: 100px 0 78px; background: url(../images/common/pattern_01.png) left top;}
#other .news .btns { display: none;}
#other .news .flex { display: flex; justify-content: space-between; align-items: flex-start;}
#other .news .flex_l { width: 260px;}
#other .news .flex_l h4 { font-size: 40px; font-weight: 700; margin-left: -2px; margin-bottom: 28px; letter-spacing: 0.04em; line-height: 1;}
#other .news .flex_l h4 span { display: block; font-size: 16px; margin-left: 2px; font-weight: 400; margin-top: 20px; letter-spacing: 0.06em;}
#other .news .flex_l p { font-size: 14px; line-height: 1.857; margin-bottom: 65px;}
#other .news .flex_l .btns { display: block; width: 220px; padding: 19px 0;}

#other .news article { width: 730px;}
#other .news article a { display: flex; border-bottom: 1px solid #313131; align-items: center; padding: 30px 0;}
#other .news article a:first-child { padding-top: 0;}
#other .news article a:last-child { border-bottom: none; padding-bottom: 0;}
#other .news article a img { margin-right: 50px;}
#other .news article a p { font-size: 14px; font-weight: 700; margin-bottom: 16px; letter-spacing: 0.1em;}
#other .news article a p span { color: #9a8b68; margin-left: 35px; letter-spacing: 0.04em; font-family: 'source-han-sans-cjk-ja', sans-serif; font-weight: 300;}
#other .news article a h5 { font-size: 16px; font-weight: 400; letter-spacing: 0.04em;}

.access { background: #fff;}

/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {
	
	/*-------------- all --------------*/
	body { min-width: auto;}
	.btns { display: block; width: 80%; margin: 0 auto; padding: 18px 0; font-size: 12px; background-color: #fff;}
	.view { }
	.max_in { max-width: none;}
	header { min-width: auto;}
	/*-------------- fv --------------*/
	
	#fv { }
	#fv .fv_video { width: 100%; height: 100vh;}
	#fv .fv_video video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1;}
	
	#fv .open { position: absolute; bottom: 17px; left: auto; right: 2.5%; width: 184px; height: auto;}
	#fv .open img { width: 100%; height: auto;}
	#fv .scroll { display: block; position: absolute; bottom: 46px; left: 4%; z-index: 2;}
	#fv .scroll:after { content: ""; display: inline-block; width: 1px; height: 80px; background-color: #fff; margin-top: 13px; animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;}
		
	
	/*-------------- reservation --------------*/
	
	#reservation { padding: 40px 0 50px;}
	#reservation .top { margin-bottom: 25px;}
	#reservation .top h3 { font-size: 22px; padding-left: 7px; border-left: 5px solid #000;}
	#reservation .top h3 span { display: block; font-size: 12px; letter-spacing: 0.04em; margin-top: 10px;}
	#reservation .top .best { }
	#reservation .top .best img { width: 31px; height: auto; margin-right: 5px;}
	#reservation .top .best p { font-size: 12px; padding-top: 10px;}
	#reservation .top .best p small { font-size: 6px; margin-top: 5px;}
	#reservation .top .best p span { font-size: 6px; margin-top: 5px;}
	
	#reservation form { }
	#reservation form .checkin {}

	#reservation form .checkin .inputform { display: block; margin-bottom: 15px;}
/*
	#reservation form .checkin .inputform .check { justify-content: space-between; margin-bottom: 15px;}
	#reservation form .checkin .inputform .check div { position: relative; width: 48%;}
	#reservation form .checkin .inputform .check div:nth-child(1) { margin-right: 0;}
	#reservation form .checkin .inputform .check div:nth-child(1):after { right: -7%; bottom: 15px; font-size: 8px;}
	#reservation form .checkin .inputform .check p { font-size: 13px; margin-bottom: 4px; text-align: left;}
	#reservation form .checkin .inputform .check p img { width: auto; height: 15px; vertical-align: -4px; margin-right: 8px;}
	#reservation form .checkin .inputform .check .calendar { display: block; width: 100%; min-width: 100%; font-size: 13px; padding: 6px 10px; background: #fff; appearance: none; -webkit-appearance: none; -moz-appearance: none; border-radius: 0; text-align: left;}
	 input[type="date"]::-webkit-date-and-time-value {
            text-align: left;
        }
	#reservation form .checkin .inputform .other { display: flex; align-items: flex-end; justify-content: space-between;}
	#reservation form .checkin .inputform .other div { width: 48%;}
	#reservation form .checkin .inputform .other div:nth-child(1) { margin-right: 0;}
	#reservation form .checkin .inputform .other p { font-size: 13px; margin-bottom: 5px;}
	#reservation form .checkin .inputform .other p img { width: auto; height: 12px; vertical-align: -2px; margin-right: 6px;}
	#reservation form .checkin .inputform .other .list { font-size: 13px; color: #707070; padding: 7px 12px;}
	#reservation form .checkin .inputform .other div:after {  bottom: 29%; right: 10px; width: 6px; height: 6px; }
	
	#reservation form .undecided { text-align: left; margin-bottom: 33px;}
	#reservation form .undecided .checkbox { width: 15px; height: 15px; vertical-align: -1px;}
	#reservation form .undecided label { font-size: 12px;}
*/
	#reservation form .checkin .inputform .search_box .count { width: calc(50% - 10px); }
	#reservation form .checkin .inputform .search_box .count.person { width: 100%; }
	#reservation form .checkin .inputform .search_box .box { padding: 15px 10px; font-size: 14px; }
	#reservation form .checkin .inputform .search_box .input .dropdown { position: relative; margin: 10px 0 0; height: auto; }
	#reservation form .checkin .inputform .search_box .input .dropdown button { width: 25px; height: 25px; line-height: 25px; }
	#reservation form .checkin .inputform .search_box .input .dropdown input[type="text"] { width: 40px; height: 25px; line-height: 25px; }

	
	#reservation form .search { width: 275px; margin: 0 auto 16px;}
	#reservation form .search .flex { display: block; margin-bottom: 18px;}
	#reservation form .search .plan { display: block; width: 100%; line-height: 50px; font-size: 13px; font-weight: 700; color: #fff; background-color: #c9c9c9; margin: 0 auto 15px;}
	#reservation form .search .plan:hover { background: #000;}
	#reservation form .search p { font-size: 10px; line-height: 1.7;}
	#reservation form .checkin .attention { font-size: 10px; line-height: 1.7; margin-bottom: 40px; text-indent: 0; padding-left: 0;}
	
	#reservation .benefit { position: relative; width: 100%; padding: 30px 0 35px; margin-bottom: 30px; border: 2px solid #9a8b68;}
	#reservation .benefit h4 { width: 80%; margin-bottom: 15px;}
	#reservation .benefit .off { position: relative; top: auto; right: auto; width: 300px; height: auto; margin: 0 auto 10px;}
	#reservation .benefit .flex { position: relative; display: block; margin-bottom: 20px;}
	#reservation .benefit .flex img { width: 300px; height: auto; margin: 0 auto 10px;}
	
	#reservation .benefit p { text-align: center; margin-bottom: 20px;}
	#reservation .benefit p img { width: 235px; height: auto; margin: 0 auto;}
	#reservation .benefit .grey { width: 300px; padding: 30px 0; font-size: 12px; line-height: 140%; margin: 0 auto 20px;}
	#reservation .benefit .grey img { width: 80%; margin: 0 auto 10px;}


	#reservation .btn_list { display: block;}
	#reservation .btn_list a { display: block; width: 275px; line-height: 50px; margin: 0 auto 10px;}
	#reservation .btn_list .reservation { font-size: 13px;}
	#reservation .btn_list .btns { padding: 0;}

	
	/*-------------- about --------------*/
	
	#about { padding: 40px 0 50px;}
	#about .flex { display: block; width: 100%; margin: 0 auto 25px;}
	#about .flex_l { width: 100%;  min-width: auto;}
	#about .flex_l img { }
	#about .flex_r { width: 90%; padding-right: 0; margin: 0 auto 50px;}
	#about .flex_r h2 { font-size: 15px; margin-bottom: 35px;}
	#about .flex_r h2 img { width: 232px; height: auto; margin-bottom: 20px;}
	#about .flex_r .about_p { width: 100%;}
	#about .flex_r h3 { font-size: 24px; line-height: 1.417; margin-bottom: 22px;}
	#about .flex_r p { font-size: 13px; line-height: 1.769; margin-bottom: 40px;}
	#about .flex_r .btns { background-color: transparent;}
	
	#about .bunner { display: block; background-color: #eee; padding: 25px 20px 33px; text-align: start;}
	#about .bunner img { height: auto; margin-bottom: 11px;}
	#about .bunner div { width: 100%; margin-left: 0; color: #000;}
	#about .bunner h4 { margin-bottom: 13px;}
	#about .bunner h4 img { width: 92px; height: auto; margin-bottom: 0;}
	#about .bunner h5 { font-size: 15px; line-height: 1.467; margin-bottom: 15px;}
	#about .bunner p { font-size: 12px; line-height: 1.667; margin-bottom: 10px;}
	#about .bunner .view { font-size: 12px; line-height: 1; text-align: center;}
	
	
	/*-------------- service --------------*/

	#service { padding: 31px 0 188px; overflow: hidden ;background-position: -20% 5%, 120% 80%; background-size: 705px, 670px;}
	#service .service { display: block; width: 90%; margin: 0 auto;}
	#service .service h3 { font-size: 15px; margin-bottom: 26px;}
	#service .service h3 img { width: auto; height: 29px; margin-bottom: 15px;}
	#service .service h4 { font-size: 24px; line-height: 1.417; margin-bottom: 20px;}
	#service .service p { font-size: 13px; line-height: 1.769; margin-bottom: 25px;}
	#service .room { margin-bottom: 75px;}
	#service .room .flex_r,
	#service .meals .flex_l { position: relative; width: 100%; height: auto;}
	#service .room .flex_l,
	#service .meals .flex_r { width: 95%; margin: 0 auto; padding-top: 0;}
	#service .service .btns { position: relative; z-index: 2; margin-bottom: 30px;}
	
	#service .slick-slider .slick-dots { bottom: -27px;}
	#service .slick-slider .slick-dots li { width: 10px; height: 10px; margin: 0 5px;}
	#service .room .slick-slider .slick-dots { padding-right: 0;}
	#service .meals .slick-slider .slick-dots { padding-left: 0;}
	
	/*-------------- stay --------------*/
	
	#stay { padding: 148px 0 50px;}
	#stay .stay_bg { position: relative; width: 86.67%; height: 225px; margin: -260px 0 30px; background: url(../images/top/pic_07_sp.jpg) no-repeat center center / cover;}
	#stay .stay_bg img { position: absolute; width: 85px; height: auto; top: -1px; right: -43px;}
	#stay .stay { }
	#stay h3 { font-size: 18px; line-height: 1.556; margin-bottom: 25px;}
	#stay p { font-size: 8px; margin-bottom: 30px;}
	#stay .flex { display: block;}
	#stay .flex a { display: block; width: 90%; /* width: calc( ( 100% / 3) - 60px ); */ margin: 0 auto;}
	#stay .flex a:nth-of-type(2) { margin: 0 auto;}
	#stay .plan { margin: 0 auto; padding: 5px 12.5px 12px;}
	#stay .plan div { /* background: url(../images/top/pic_11_sp.png) no-repeat center bottom / cover; */ padding: 20px 0;}
	#stay .plan h4 { font-size: 30px;}
	#stay .plan h4 img { width: auto; height: 7px; margin-top: 8px;}
	#stay .plan h4:after { width: 90%; margin: 10px auto 10px;}
	#stay .plan p { font-size: 12px; line-height: 1.417; font-weight: 300; margin-bottom: 12px;}
	#stay .plan .view { font-size: 12px; width: 60%; line-height: 35px; font-weight: 700;}
	#stay .plan1 { background: url(../images/top/pic_08_sp.jpg) no-repeat center top / cover; margin-bottom: 15px;}
	#stay .plan2 { background: url(../images/top/pic_09_sp.jpg) no-repeat center top / cover; margin-bottom: 15px;}
	#stay .plan3 { background: url(../images/top/pic_10_sp.jpg) no-repeat center top / cover;}
	
	
	/*-------------- other --------------*/
	
	#other { }
	#other .hita { }
	#other .hita_bg { width: 100%; height: 225px;}
	#other .flex { position: relative; z-index: 2;}
	#other .city .flex { display: flex; justify-content: space-between; align-items: center; padding: 34px 0 271px; margin-top: 0;}
	#other .city .flex_l { position: relative;}
	#other .city .flex_l .right { position: absolute; top: -110px; right: 0; z-index: 2}
	#other .city .flex_l h3 { position: relative; font-size: 40px; margin-bottom: 25px; z-index: 3;}
	#other .city .flex_l h3 img { width: 209px; height: auto;}
	#other .city .flex_l h3 span { display: block; font-size: 15px; margin-top: 15px;}
	#other .city .flex_l h4 { font-size: 20px; line-height: 1.5; margin-bottom: 18px;}
	#other .city .flex_l p { font-size: 13px; line-height: 1.769; margin-bottom: 24px; width: auto;}
	#other .city .flex_l .btns { width: 80%; padding: 20px 0; background: #fff url(../images/top/icn_05.png) no-repeat 90% center;}
	
	#other .hita:before { display: block; position: absolute; content: ""; width: 100%; height: 100%; top: 405px; right: 0; background: url(../images/top/pic_14.png) no-repeat 13% 12%; background-size: 180%;}
	
	#other .news { padding: 41px 0 59px;}
	#other .news .btns { display: block; background-color: transparent;}
	#other .news .flex { display: block;}
	#other .news .flex_l { width: 100%; margin-bottom: 30px;}
	#other .news .flex_l h4 { font-size: 24px; margin-bottom: 10px;}
	#other .news .flex_l h4 span { font-size: 12px; margin-top: 10px;}
	#other .news .flex_l p { font-size: 14px; line-height: 1.769; margin-bottom: 0;}
	#other .news .flex_l .btns { display: none;}
	
	#other .news article { width: 100%; margin-bottom: 35px;}
	#other .news article a { display: flex; border-bottom: 1px solid #313131; padding: 15px 0;}
	#other .news article a img { width: 90px; height: auto; margin-right: 15px;}
	#other .news article a p { font-size: 12px; margin-bottom: 6px; font-weight: 500; letter-spacing: 0.1em;}
	#other .news article a p span { margin-left: 15px;}
	#other .news article a h5 { font-size: 12px; line-height: 1.5;}
	#other .news .btns { background-color: transparent;}
	
	
	
	
	
}