@charset "utf-8";
/* ===================================================
Base CSS
====================================================== */
body {
min-width: 1140px; min-height: 100vh; background: #fff; color: #444;
font-size: 14px; font-weight: normal; line-height: 1.5;
font-family: "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
-webkit-text-size-adjust: 100%;
}

input,
select,
textarea { font-size: 13px;}

div { -webkit-box-sizing: border-box; box-sizing: border-box;}

a { color: #444; text-decoration: none;}
a:hover { color: #444; text-decoration: underline;}
a:hover img { opacity: 0.75;}

#lineup-font-size-sampler { bottom: 0; left: 0;}
.fixed { width: 100%; position: fixed; top:0; left: 0; z-index: 999;}
iframe[name="google_conversion_frame"] { position: absolute; bottom: 0; left: 0;}

.v_rl{ -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}

br.br_sp{ display: none;}
br.br_pc{ }

@media screen and (max-width: 600px) {
body,
input,
select,
textarea { font-size: 16px;}
body { min-width: 0;}

br.br_sp{ display: block;}
br.br_pc{ display: none;}
}


/* ---------------------------------------------------
	objectFitImages (ofi.js)
------------------------------------------------------ */
.ofi { object-fit: cover; font-family: 'object-fit: cover;' }
.ofi_l_t { object-fit: cover; object-position: 0 0; font-family: 'object-fit: cover; object-position: 0 0;' }
.ofi_r_t { object-fit: cover; object-position: 100% 0; font-family: 'object-fit: cover; object-position: 100% 0;' }
.ofi_l_b { object-fit: cover; object-position: 0 100%; font-family: 'object-fit: cover; object-position: 0 100%;' }
.ofi_r_b { object-fit: cover; object-position: 100% 100%; font-family: 'object-fit: cover; object-position: 100% 100%;' }


/* ---------------------------------------------------
	delighters.js（スクロール連動アニメーション）
------------------------------------------------------ */
.delighter.fade { transform:none; opacity:0; transition: all 1s ease-out; }
.delighter.fade.started { transform:none; opacity:1; }

.delighter.LtoR { transform:translate(-20%); opacity:0; transition: all 1s ease-out; }
.delighter.LtoR.started { transform:none; opacity:1; }

.delighter.RtoL { transform:translate(20%); opacity:0; transition: all 1s ease-out; }
.delighter.RtoL.started { transform:none; opacity:1; }

.delighter.BtoT { transform:translateY(50px); opacity:0; transition: all 1s ease-out; }
.delighter.BtoT.started { transform:none; opacity:1; }

.delighter.zoom{ opacity: 1; transform: scale(1.1); transition: transform 2s ease-out;}
.delighter.zoom.started{ transform: scale(1);}
/*
.delighter.zoom{ opacity: 1; transform: scale(1); transition: opacity 1s linear, transform 15s linear;}
.delighter.zoom.started{ transform: scale(1.2);} */

@media screen and (max-width: 600px) {
.delighter.fade { transform:none; opacity:1; transition: none; }
.delighter.fade.started { transform:none; opacity:1!important; }

.delighter.LtoR { transform:none; opacity:1; transition: none; }
.delighter.LtoR.started { transform:none; opacity:1!important; }

.delighter.RtoL { transform:none; opacity:1; transition: none; }
.delighter.RtoL.started { transform:none; opacity:1!important; }

.delighter.BtoT { transform:none; opacity:1; transition: none; }
.delighter.BtoT.started { transform:none; opacity:1!important; }
}


/* ---------------------------------------------------
	初回読み込み時のみのアニメーション（ページ上部でスクロール発火によらない）
------------------------------------------------------ */
.fadein_BtoT{ animation-name: fadeinBtoT; animation-duration: 1s; animation-iteration-count: 1; }
.fadein_LtoR{ animation-name: fadeinLtoR; animation-duration: 1s; animation-iteration-count: 1; }
.fadein_RtoL{ animation-name: fadeinRtoL; animation-duration: 1s; animation-iteration-count: 1; }
@media screen and (max-width: 600px) {
.fadein_BtoT{ animation-iteration-count: 0; }
.fadein_LtoR{ animation-iteration-count: 0; }
.fadein_RtoL{ animation-iteration-count: 0; }
}

@keyframes fadeinBtoT {
	from {
		opacity: 0;
		transform: translateY(50px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeinLtoR {
	from {
		opacity: 0;
		transform: translate(-20%);
	}
	to {
		opacity: 1;
		transform: translate(0);
	}
}

@keyframes fadeinRtoL {
	from {
		opacity: 0;
		transform: translate(20%);
	}
	to {
		opacity: 1;
		transform: translate(0);
	}
}


/* ---------------------------------------------------
Header
------------------------------------------------------ */
#header_wrap { width: 100%; min-width: 1140px; bottom: 0; height: 90px; position: fixed; z-index: 100; background: url("../img/hd_bg1_sample.png") repeat-x; webkit-transition: top 0.8s; -o-transition: top 0.8s; transition: top 0.8s; }
#header_wrap.fixed { bottom: 0 !important;}
#header { position: relative; width: 1100px; padding: 0; margin: 0 auto; box-sizing: border-box;}
#header .hd_reserve{ display: none;}
#header .hd_tel { font-size: 24px; line-height: 1;}
#header .hd_tel span { display: inline; padding: 0 10px 0 0;font-size: 18px;}
#header .gnav_lang { padding: 0 0 3px; text-align: center; top: 18px; right: 0;}
#header .gnav_lang dt { padding: 1px 0; position: relative; border: 1px solid #999; border-radius: 5px; cursor: pointer; font-size: 14px;}
#header .gnav_lang dt span { padding: 0 5px 0 17px; background: url(../img/ico_lang1.png) no-repeat left center; background-size: 14px;}
#header .gnav_lang dd { position: relative;}
#header .gnav_lang dd ul { display: none; width: 100%; position: absolute; bottom: 25px; left: 0; background: rgba(98, 98, 98, 0.95);}
#header .gnav_lang dd a { display: block; width: 100%; padding: 3px 0; border-bottom: 1px dotted #fff; color: #fff; font-size: 14px;}
#header .gnav_lang dd a:before { content: none;}
#header .gnav_lang dd a:hover { background: rgba(69, 69, 69, 0.95);}
#header .gnav_lang dd li:last-child a { border-bottom: none;}

@media screen and (max-width: 600px) {
#header_wrap { display: block; min-width: 0; position: absolute; left: 0 !important; background: none;}
#header { display: block; padding: 15px 4% 10px; width: 92%;}
#header .hd_tel,
#header .gnav_lang { position: static; }
#header .hd_reserve,
#header .hd_tel,
#header .gnav_lang { display: block; width: 92%; margin: 0 auto; }
#header .hd_reserve{ background: rgba(86,137,68,1.00); border-radius: 4px; margin: 30px auto;}
#header .hd_reserve a{ padding: 15px 0; color: #fff; text-align: center; font-size: 20px;}
#header .hd_tel{ text-align: center; margin: 20px auto; }
#header .gnav_lang dt { padding: 15px 0; font-size: 16px;}
#header .gnav_lang dd ul { position: static;}
#header .gnav_lang dd a { padding: 10px 0;}
}


/* ---------------------------------------------------
gnav
------------------------------------------------------ */
#gnav { box-sizing: border-box;}
#gnav .close_menu { display: none;}
#gnav >ul:nth-of-type(1) { float: left;display: flex; width: 540px;flex-wrap: wrap;}
#gnav ul,
#gnav li,
#gnav a { display: -webkit-flex; display: -ms-flex; display: flex;}
#gnav > ul a { -ms-align-items: center; align-items: center; padding: 10px 20px; position: relative; font-size: 16px;}
#gnav > ul:nth-of-type(1) a:before { content: ''; height: 2px; position: absolute; left: 50%; right: 50%; top: 0; background: #00693e; -webkit-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s;}
#gnav > ul:nth-of-type(1) a:hover { text-decoration: none;}
#gnav > ul:nth-of-type(1) a { cursor: pointer;}
#points #gn_01 a:before,
#spa #gn_02 a:before,
#room #gn_03 a:before,
#meal #gn_04 a:before,
#facilities #gn_05 a:before,
#sightseeing #gn_06 a:before,
#access #gn_07 a:before,
#gnav > ul:nth-of-type(1) a:hover:before { left: 1vw; right: 1vw;}
#gnav .h_info { float: left; padding: 10px 325px 0 0;}
#gnav .h_info+ul { position: absolute; right: 0;height: 90px;}
#gnav .h_info+ul li:nth-of-type(1) span { display: block; padding: 35px 20px 23px 40px; background: url(../img/h_ai.png)no-repeat 8px center,url(../img/h_arrow1.png)no-repeat center 12px; color: #00693e; background-color: #c4d59f;}
#gnav .h_info+ul li:nth-of-type(1) span:hover { opacity: 0.7;}
#gnav .h_info+ul li:nth-of-type(2) a { padding: 23px 30px; background: url(../img/h_arrow2.png)no-repeat center right 10px; background-color: #568944; color: #fff;}
#gnav .h_info+ul li:nth-of-type(2) a:hover { text-decoration: none; background-color: #446d36;}

@media screen and (max-width: 600px) {
.pos_fix { overflow: hidden;}
#menuOuter { width: 100%; height: 0; position: fixed; top: 0; left: 0; z-index: 10000; background: rgba(255, 255, 255,0.95); overflow: auto; pointer-events: none; -webkit-transition: 0.75s; -o-transition: 0.75s; transition: 0.75s; }
#menuOuter.active { height: 100%; pointer-events: auto;}
#menuInner { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 0; cursor: pointer;}
#gnav { display: none; width: 100%; position: relative; z-index: 15; background: none;}
#gnav li,
#gnav a,
#gnav .close_menu,
#gnav .add_menu{ display: block;}
#gnav .ver_pc { display: none;}
#gnav .close_menu { cursor: pointer;}
#gnav #close_top { width: 26px; height: 26px; position: absolute; top: 20px; right: 4%; background: url("../img/modal_close.png") no-repeat; background-size: 26px; text-indent: -9999px; border-bottom: none;}
#gnav >ul:nth-of-type(1) { float: none;}
#gnav > ul:nth-of-type(1) { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: flex-start; padding: 90px 4% 0; margin: 0; background: url("../img/menu_logo.png") no-repeat center 15px; background-size: 150px;}
#gnav > ul:nth-of-type(1) li { flex-basis: 50%; width: 50%; border-bottom: 1px solid #d9d5d2;}
#gnav > ul:nth-of-type(1) li:nth-child(2),
#gnav > ul:nth-of-type(1) li:nth-child(3){ border-top: 1px solid #d9d5d2;}
#gnav > ul:nth-of-type(1) a { width: 100%; padding: 15px 0 15px 20px; background: url(../img/ico_arrow7.png) no-repeat 3px center; background-size: 5px; box-sizing: border-box; }
#gnav > ul:nth-of-type(1) a:before { content: none;}
#gnav #close_bot { padding: 50px 0 0; color: #424242; font-size: 16px; text-align: center; background: url("../img/modal_close.png") no-repeat center 20px; background-size: 26px;}
#gnav #close_bot img { display: block; width: 32px; margin: 0 auto 5px;}
#gnav .h_info { float: none; padding: 0;}
#gnav .h_info+ul { position: static; padding: 0 4%;}
#gnav .h_info+ul li { width: 50%; text-align: center;}
#gnav .h_info+ul li:nth-of-type(1) span {    padding: 23px 20px 23px 39px;}

}

@media screen and (max-width: 320px) {
#gnav > ul:nth-of-type(1) a { padding: 10px 0 10px 20px; font-size: 14px;}
}


/* ---------------------------------------------------
Side buttons
------------------------------------------------------ */
#side_btns{ position: fixed; top: 150px; right: 0; text-align: right; z-index: 11; width: 74px;}
#side_btns a{ display: inline-block; margin: 0 0 10px;}
#side_btns a:first-of-type{ width: 63px;}
#side_btns a:last-of-type{ width: 74px;}

@media screen and (max-width: 600px) {
#side_btns{ display: none;}
}


/* ---------------------------------------------------
	modal_box
------------------------------------------------------ */
#modal_box { width: 900px; height: 590px; margin: -295px 0 0 -450px; padding: 50px; border: 1px solid #ccc; background: url("../img/modal_bg1.jpg"); position: fixed; top: 50%; left: 50%; display: none; z-index: 1001; text-align: center;}
#modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 120%; background: rgba(0,0,0,0.50); display: none; z-index: 1000;}
#modal_box .modal_tit{ margin: 0 auto; padding: 0 0 30px; width: 231px;}
#modal_box .modal_close{ position: absolute; top: 20px; right: 20px;}
#modal_box .modal_bestrate{ clear: both; border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; padding: 10px 0; margin: 0 0 40px; text-align: center; display: table; width: 100%;}
#modal_box .modal_bestrate img,
#modal_box .modal_bestrate span{ display: table-cell; vertical-align: middle;}
#modal_box .modal_bestrate img{ width: 269px; padding: 0 0 0 60px;}
#modal_box .modal_bestrate span{ font-size: 18px; padding: 0 0 0 15px; text-align: left;}
#modal_box #search_489ban{ display: inline-block;}
#modal_box #search_489ban .date_489ban,
#modal_box #search_489ban .inbox_489ban{ float: left;}
#modal_box #search_489ban .date_489ban{ display: table;}
#modal_box #search_489ban .date_489ban dt,
#modal_box #search_489ban .date_489ban dd{ display: table-cell; padding: 0 10px 0 0; font-size: 16px;}
#modal_box #search_489ban .stay_489ban dt{ display: none;}
#modal_box #search_489ban input[type="text"]{ height: 50px; margin: 0 5px 0 0; box-sizing: border-box; border: solid 1px #8a8f92; border-radius: 4px; padding: 7px 10px; font-size: 16px; line-height: 1;}
#modal_box #search_489ban input[type="text"]:disabled{ color: graytext;}
#modal_box #search_489ban .hasDatepicker{ background:url(../img/ico_calender.png) no-repeat right 10px center #fff; background-size: 16px;}
#modal_box #search_489ban select{ height: 50px;  margin: 0 5px 0 0; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius:4px; border:solid 1px #8a8f92; padding: 5px 25px 5px 10px; background:url(../img/ico_select.png) no-repeat right center #fff; background-size:18px; font-size: 16px;}
#modal_box #search_489ban select::-ms-expand { display: none;}
#modal_box #search_489ban select:disabled{ color: graytext;}
#modal_box #search_489ban option{ font-size: 14px;}
#modal_box #search_489ban button{ height: 50px; padding: 0 20px; color: #fff; text-align: center; font-size: 16px; background: rgba(86,137,68,1.00); -webkit-appearance: button; appearance: button; border: none; border-radius: 4px; box-sizing: border-box; cursor: pointer; font-family: "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;}
#modal_box #search_489ban button:hover{ background: rgba(86,137,68,0.8);}
#modal_box ul{ display: flex; justify-content: space-around; flex-wrap: wrap; width: 790px; margin: 20px auto; font-size: 16px;}
#modal_box ul li:nth-child(1),
#modal_box ul li:nth-child(2),
#modal_box ul li:nth-child(3){ width: 230px; height: 50px; margin: 20px 3px 0; background: url(../img/common/modal_btn_bg1.png) no-repeat 0 0;}
#modal_box ul li:nth-child(1):hover,
#modal_box ul li:nth-child(2):hover,
#modal_box ul li:nth-child(3):hover{ background: url(../img/common/modal_btn_bg2.png) no-repeat 0 0;}
#modal_box ul li a{ display: block;}
#modal_box ul li:nth-child(1) a,
#modal_box ul li:nth-child(2) a,
#modal_box ul li:nth-child(3) a{ text-align: center; padding: 0; height: 50px; line-height: 50px; color: #fff; border-radius: 5px;}
#modal_box ul li:nth-child(2) a,
#modal_box ul li:nth-child(3) a,
#modal_box ul li:nth-child(4) a{ color: #000;}
#modal_box ul li:nth-child(1) a:hover,
#modal_box ul li:nth-child(2) a:hover,
#modal_box ul li:nth-child(3) a:hover{ color: #fff; text-decoration: none;}
#modal_box ul li:nth-child(2) a:hover,
#modal_box ul li:nth-child(3) a:hover{ color: #000;}
#modal_box ul li:nth-child(1) a{ background: url(../img/modal_ico1.png) no-repeat 30px center rgba(86,137,68,1); background-size: 19px; padding: 0 0 0 25px;}
#modal_box ul li:nth-child(1) a:hover{ background: url(../img/modal_ico1.png) no-repeat 30px center rgba(86,137,68,0.8); background-size: 19px;}
#modal_box ul li:nth-child(2) a{ background: url(../img/modal_ico2.png) no-repeat 25px center rgba(196,213,160,1); background-size: 26px; padding: 0 0 0 30px;}
#modal_box ul li:nth-child(2) a:hover{ background: url(../img/modal_ico2.png) no-repeat 25px center rgba(196,213,160,0.8); background-size: 26px;}
#modal_box ul li:nth-child(3) a{ background: url(../img/modal_ico3.png) no-repeat 15px center rgba(196,213,160,1); background-size: 16px; padding: 0 0 0 20px;}
#modal_box ul li:nth-child(3) a:hover{ background: url(../img/modal_ico3.png) no-repeat 15px center rgba(196,213,160,0.8); background-size: 16px;}
#modal_box ul li:nth-child(4){ margin: 20px 0;}
#modal_box ul li:nth-child(4) a{ background: url(../img/modal_ico4.png) no-repeat 0 center; background-size: 14px; padding: 0 0 0 20px;}
#modal_box .modal_tel{ clear: both; border-top: solid 1px #ccc; padding: 30px 0 0; text-align: center;}
#modal_box .modal_tel p{ display: inline-block; color: #444444; font-size: 15px;}
#modal_box .modal_tel p.telnum{ padding: 0 0 0 50px; font-size: 36px; background: url("../img/ico_tel1.png") no-repeat 15px 25px; background-size: 25px;}


/* ---------------------------------------------------
Contents
------------------------------------------------------ */
#contents_wrap { clear: both; width: 100%; padding: 0;}


/* ---------------------------------------------------
Main img
------------------------------------------------------ */
#main_img { width: 100%; padding: 0; position: relative; height: 400px; background: #fff;}
#main_img h1{ position: static; text-align: center; font-size: 36px; color: #fff; padding: 200px 0 0; text-shadow:0px 0px 5px #000000;}
#main_img h1 span{ display: block; text-align: center; font-size: 16px;}

@media screen and (max-width: 600px) {
#main_img { height: auto;}
#main_img h1{ font-size: 28px; padding: 80px 0;}
#main_img h1 span{ font-size: 16px;}
}


/* ---------------------------------------------------
Breadcrumb
------------------------------------------------------ */
#contents_wrap #breadcrumb { margin: 5px auto 25px; max-width: 1100px; width: 100%; font-size: 13px; text-align: left;}
#contents_wrap #breadcrumb li { display: inline-block; line-height: 1.6;}
#contents_wrap #breadcrumb li:before { content: '>'; margin: 0 5px;}
#contents_wrap #breadcrumb li:first-child:before { display: none;}

@media screen and (max-width: 600px) {
#contents_wrap #breadcrumb { display: none;}
}


/* section */
/*#contents_wrap section { margin: 0 auto 25px;}*/


/* ---------------------------------------------------
Footer
------------------------------------------------------ */
#footer_wrap { background: url("../img/bg_pattern2.jpg");}
#pagetop { display:block;}
#pagetop a { display: block; width: 100%; padding: 10px 0; border-bottom: solid 1px #ccc; text-align: center; line-height: 1;}
#pagetop a img{ width: 46px; height: auto;}
#footer .ft_block1{ width: 1100px; margin: 0 auto; text-align: center;}
#footer .ft_block1 .ft_logo{ width: 226px; margin: 55px auto 25px;}
#footer .ft_block1 address{ display: inline-block; font-size: 15px; padding: 0 0 20px;}
#footer .ft_block1 address span,
#footer .ft_block1 address a{ display: inline-block; margin: 0 5px;}
#footer .ft_block1 .ft_btns { text-align: center; letter-spacing: -.40em;}
#footer .ft_block1 .ft_btns li { display: inline-block; letter-spacing: normal;}
#footer .ft_block1 .ft_btns li:nth-of-type(1) { margin: 0 15px 0 0;}
#footer .ft_block1 .ft_btns+a { display: block; margin: 30px auto 50px; padding: 10px 0; width: 300px; text-align: center; color: #fff; font-size: 20px; background: url(../img/sec_bg.jpg);}
#footer .ft_block1 .ft_btns+a:hover { text-decoration: none; opacity: 0.7;}
#footer .copyright { clear: both; width: 100%; padding: 8px 0 100px; text-align: center; background: #434a35; color: #fff; font-size: 12px;}

@media screen and (max-width: 600px) {
#footer_wrap { background: url("../img/ft_bg1.jpg"); background-size: 100%;}
#pagetop a img{ width: 26px;}
#footer { padding: 0 0 70px; box-sizing: border-box;}
#footer .ft_block1{ width: 92%; }
#footer .ft_block1 .ft_logo{ width: 164px; margin: 23px auto 17px;}
#footer .ft_block1 address{ display: inline-block; font-size: 15px; padding: 0 0 20px; line-height: 1.9;}
#footer .ft_block1 address span,
#footer .ft_block1 address a{ display: inline-block; margin: 0 5px;}
#footer .ft_block2 .acc_tit{ display: block; text-align: center; padding: 10px 0;}
#footer .ft_block2 .acc_tit span{ display: inline-block; padding: 0 20px 0 0; background: url("../img/arrow_off.png") no-repeat right center; }
#footer .ft_block2 .acc_tit.active span{ background: url("../img/arrow_on.png") no-repeat right center; }
#footer .ft_block2 ul{ width: 92%; margin: 0 auto; padding: 0 0 20px; }
#footer .ft_block2 ul li{ margin: 10px 0 0 0; font-size: 15px; width: 50%; box-sizing: border-box;}
#footer .copyright { padding: 8px 0 10px;}
}

@media screen and (max-width: 320px) {
#footer .ft_block2 ul li{ font-size: 13px;}
}


/* ---------------------------------------------------
sp_nav
------------------------------------------------------ */

#sp_nav { display: none;}

@media screen and (max-width: 600px) {
#sp_nav { display: block; position: fixed; bottom: 0; left: 0; background: #fff; border-top: 1px solid #c4d5a0; z-index: 10;}
#sp_nav ul { display: table; width: 100%; table-layout: fixed; height: 70px;}
#sp_nav li { display: table-cell; -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: middle;}
#sp_nav li:nth-child(1){}
#sp_nav li:nth-child(2){ border-left: 1px solid #c4d5a0;}
#sp_nav li:nth-child(3) { background: #568944; border-right: 1px solid #c4d5a0;}
#sp_nav li:nth-child(4){ background: #00693e;}
#sp_nav a,#sp_nav span { display: block; padding: 5px 10px; text-align: center;}
#sp_nav img { width: 60px;}
}


/* ---------------------------------------------------
更新履歴
------------------------------------------------------

180205_kamiguchi_更新履歴コメントひな形追加
180228_〇〇_cssを更新したらここに更新履歴を追加していきます。多くなったら上の方は削除。

------------------------------------------------------ */