@charset "utf-8";
/* ===================================================
	Base CSS
====================================================== */
/*html,
body{ height: 100%; overflow: hidden;}*/
body { min-width: 1240px; min-height: 100vh; background: #fff; color: #000; 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: #000; text-decoration: none;}
a:hover { color: #000; text-decoration: underline;}
a:hover img { opacity: 0.75;}

.gothic{ font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","ＭＳ Ｐゴシック", sans-serif;}

.v_rl{ -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}
br.br_sp{ display: none;}/*PCで改行、SPで改行トル*/

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

br.br_sp{ display: block;}/*PCで改行、SPで改行トル*/
br.br_pc{ display: none;}/*SPで改行、PCで改行トル*/
}

/* ---------------------------------------------------
	Common parts
------------------------------------------------------ */
.cmn_btn{ width: 260px; border: solid 1px #aaa; padding: 15px 0; text-align: center; display: block; position: relative; background: #fff;}
.cmn_btn::after{ content: ""; position: absolute; top: 0; bottom: 0; left: inherit; right: 15px; margin: auto 0; content: ""; vertical-align: middle; width: 6px; height: 6px; border-top: 1px solid #94702c; border-right: 1px solid #94702c; transform: rotate(45deg); }
.cmn_btn:hover{ background: #000; color: #fff; text-decoration: none;}
.cmn_btn:hover::after{ border-top: 1px solid #fff; border-right: 1px solid #fff; }


/* ---------------------------------------------------
	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!important; }

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

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

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


/* ---------------------------------------------------
	Header
------------------------------------------------------ */
#header_wrap { width: 100%; min-width: 1240px; height: 80px; position: fixed; z-index: 10; background: #fff;}
#header_wrap.fixed { position: fixed; top: 0; left: 0; background: #fff; }
#header_wrap #header { position: absolute; top: 5px; left: 50%; margin: 0 0 0 -600px;}
#header_wrap #header h1 a{ background-image: url("../img/hd_logo_pc2.png"); background-repeat: no-repeat; background-position: 0 0; background-size: 150px; width: 150px; height: 70px; text-indent: -9999px; display: block;}
#header_wrap.fixed #header h1 a{ background-image: url("../img/hd_logo_pc2.png");}

@media screen and (max-width: 600px) {
#header_wrap { width: 100%; min-width: 100%; height: auto; position: relative; z-index: 10;}
#header_wrap #header { position: static; margin: 0; background: #fff; padding: 10px 0;}
#header_wrap #header h1 a{ background-image: url("../img/hd_logo_sp.png"); background-size: 100px; width: 100px; height: 47px; margin: 0 auto;}
}


/* ---------------------------------------------------
	G-nav
------------------------------------------------------ */
.close_menu,
#gn_home{ display: none;}
.pos_fix #header_wrap #gnav ul li#gn_lang::after { display: none;}
#header_wrap #gnav{ position: absolute; top: 15px; right: 50%; margin: 0 -600px 0 0; width: 1000px; color: #000; text-shadow:0px 0px 3px #fff; font-size: 15px; z-index: 11;}
#header_wrap #gnav ul{ display: flex; justify-content: flex-end;}
#header_wrap #gnav ul li{ line-height: 1;}
#header_wrap #gnav ul li a{ color: #000; display: block; padding: 20px 10px; text-decoration: none; text-shadow:0px 0px 3px #fff; font-size: 14px;}
#header_wrap #gnav ul li#gn_09 { padding-right: 10px;}
#header_wrap #gnav > ul a { display: flex; align-items: center; position: relative;}
#header_wrap #gnav > ul a:before { content: ''; height: 1px; position: absolute; left: 50%; right: 50%; bottom: 0; background: #000; -webkit-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s;}
#header_wrap #gnav > ul a:hover { text-decoration: none;}
#cuisine #header_wrap #gnav > ul #gn_01 a:before,
#spa #header_wrap #gnav > ul #gn_02 a:before,
#room #header_wrap #gnav > ul #gn_03 a:before,
#room_tsukitei #header_wrap #gnav > ul #gn_03 a:before,
#facilities #header_wrap #gnav > ul #gn_04 a:before,
#sightseeing #header_wrap #gnav > ul #gn_05 a:before,
#access #header_wrap #gnav > ul #gn_06 a:before,
#sdgs #header_wrap #gnav > ul #gn_08 a:before,
#header_wrap #gnav > ul a:hover:before { left: 1vw; right: 1vw;}
#header_wrap #gnav ul li#gn_lang{ padding: 20px 15px 20px 15px; position: relative; font-size: 14px;}
#header_wrap #gnav ul li#gn_lang::before{ content: ""; display: block; width: 1px; height: 20px; position: absolute; top: 18px; left: 0; background: #000;}
#header_wrap #gnav ul li#gn_lang::after{ position: absolute; top: 26px; margin: auto; content: ""; vertical-align: middle; right: 3px; width: 4px; height: 4px; border-top: 1px solid #000; border-right: 1px solid #000; transform: rotate(135deg); }
#header_wrap #gnav ul li#gn_lang ul{ display: none;}
#header_wrap #gnav ul li#gn_lang:hover ul{ display: flex; flex-direction: column; background: #000; width: 100%; position: absolute; top: 45px; left: 0; padding: 0;}
#header_wrap #gnav ul li#gn_lang ul li a{ padding: 5px 10px; text-align: center; text-shadow:none; color: #fff;}
#header_wrap #gnav ul li#gn_lang ul li a:before{ display: none;}
#header_wrap #gnav ul li#gn_lang ul li a:hover{ background: #fff; color: #000;}
#header_wrap #gnav ul li#gn_489ban a{ background: #000; text-shadow: none; color: #fff; width: 110px; padding: 10px 15px 10px 0; text-align: center; margin: 10px 0 0 5px; border: solid 1px #000; box-sizing: border-box;}
#header_wrap #gnav ul li#gn_489ban a:before{ display: none;}
#header_wrap #gnav ul li#gn_489ban a:hover{ background: #fff; color: #000;}
#header_wrap #gnav ul li#gn_489ban a::after{ position: absolute; top: 0; bottom: 0; right: 10px; margin: auto 0; content: ""; vertical-align: middle; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); }
#header_wrap #gnav ul li#gn_489ban a:hover::after{ border-top: 1px solid #000; border-right: 1px solid #000;}

@media screen and (max-width: 600px) {
.pos_fix { overflow: hidden;}
#menuOuter { width: 100%; position: fixed; top: 0; left: 0; z-index: 10000; background: #fff; overflow: auto; pointer-events: none; -webkit-transition: 0.75s; -o-transition: 0.75s; transition: 0.75s; height: 100%;  opacity: 0;  }
#menuOuter.active { pointer-events: auto; opacity: 1;  }
#menuInner { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 0; cursor: pointer;}
#header_wrap #gnav{ position: relative; top: 0; right: 0; margin: 0; width: 100%; padding: 0; color: #fff; text-shadow:none; font-size: 15px;}
#header_wrap #gnav ul{ display: block; margin: 10px 4% 4%; box-sizing: border-box;}
#header_wrap #gnav ul li { display: block; width: 100%; height: auto; float: none; padding: 0; background-color: #fff; font-size: 15px; line-height: 1; border-bottom: 1px solid #aaa;}
#header_wrap #gnav ul li a{ color: #000; display: block; padding: 15px; text-decoration: none; text-shadow: none; font-size: inherit;}
#header_wrap #gnav > ul a { display: block;}
#header_wrap #gnav > ul a:before { display: none;}
#header_wrap #gnav > ul a:hover { text-decoration: none;}

#header_wrap #gnav ul li#gn_home{ border-bottom: none; position: absolute; top: 0; left: 50%; z-index: 3; background: none; width: 100px; margin: 0 0 0 -50px;}
#header_wrap #gnav ul li#gn_home a{ background-image: url("../img/hd_logo_sp.png"); background-size: 100px; width: 100px; height: 47px; text-indent: -9999px; padding: 0; margin: 0 auto; display: block;}



#header_wrap #gnav ul li#gn_lang{ padding: 0; position: relative; color: #000; border-bottom: none; font-size: inherit;}
#header_wrap #gnav ul li#gn_lang span{ padding: 15px; display: block;}
#header_wrap #gnav ul li#gn_lang::before{ display: none;}
#header_wrap #gnav ul li#gn_lang::after{ position: absolute; top: 15px; margin: auto; content: ""; vertical-align: middle; right: 10px; width: 6px; height: 6px; border-top: 1px solid #000; border-right: 1px solid #000; transform: rotate(135deg); }
#header_wrap #gnav ul li#gn_lang ul{ display: flex; flex-wrap: wrap; background: #fff; width: 100%; position: static; padding: 0; margin: 0; border-top: solid 1px #aaa; border-right: solid 1px #aaa; border-left: solid 1px #aaa;}
#header_wrap #gnav ul li#gn_lang:hover ul{ flex-direction: row; background: #fff; width: 100%; position: static; padding: 0;}
#header_wrap #gnav ul li#gn_lang ul li{ width: 50%; padding: 15px 0; box-sizing: border-box;}
#header_wrap #gnav ul li#gn_lang ul li:nth-child(2n){ border-left: solid 1px #aaa;}
#header_wrap #gnav ul li#gn_lang ul li a{ padding: 0; text-align: center; text-shadow:none; color: #000;}
#header_wrap #gnav ul li#gn_lang ul li a:before{ display: none;}
#header_wrap #gnav ul li#gn_489ban{ border: none;}
#header_wrap #gnav ul li#gn_489ban a{ background: #9873ac; text-shadow: none; color: #fff; width: 100%; padding: 15px 0; text-align: center; margin: 15px 0 0;}
#header_wrap #gnav ul li#gn_489ban a::after{ position: absolute; top: 0; bottom: 0; right: 10px; margin: auto 0; content: ""; vertical-align: middle; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); }
#header_wrap #gnav .close_menu { cursor: pointer;}
#header_wrap #gnav .close_menu span:before,
#header_wrap #gnav .close_menu span:after { content: ''; width: 25px; height: 2px; position: absolute; left: 0;}
#header_wrap #gnav .close_menu span:before { transform: rotate(-45deg);}
#header_wrap #gnav .close_menu span:after { transform: rotate(45deg);}

#header_wrap #gnav #close_top { text-align: center; position: relative; height: 50px !important; border-bottom: none !important;
text-indent: -9999px; background: none; z-index: 2;
}
#header_wrap #gnav #close_top span { width: 25px; height: 0; padding: 25px 0 0; position: absolute; top: 13px; right: 10px; overflow: hidden;}
#header_wrap #gnav #close_top span:before,
#header_wrap #gnav #close_top span:after { background: #494949; margin: -2px 0 0; top: 50%;}
#header_wrap #gnav #close_bot { padding: 15px 0 !important; margin: 0 auto; border: none !important; text-align: center; color: #494949;}
#header_wrap #gnav #close_bot span { display: inline-block; padding: 30px 0 0; position: relative;}
#header_wrap #gnav #close_bot span:before,
#header_wrap #gnav #close_bot span:after { margin: 10px auto 0; top: 0; left: 0; right: 0; background: #494949;}
}


/* ---------------------------------------------------
	Main img
------------------------------------------------------ */
#main_img { position: relative; padding: 0; height: 500px; background-position: center top; background-repeat: no-repeat; background-size: cover; background-color: #797979; top: 80px; left: 0;}
#main_img h2 { color: #fff; width: 1em; line-height: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto auto;}

@media screen and (max-width: 600px) {
#main_img { padding: 0; height: 150px; background-position: center top; top: 0; left: 0;}
}


/* ---------------------------------------------------
	Contents
------------------------------------------------------ */
#contents_wrap { position: relative; z-index: 2; padding: 0;}
#contents_wrap main{ position: relative; z-index: 3; background: #fff; display: block;}

@media screen and (max-width: 600px) {
#contents_wrap { width: 100%; padding: 0;}
}

/* breadcrumb */
#contents_wrap #breadcrumb { margin: 85px auto 25px; width: 1200px; 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;}
}


/* ---------------------------------------------------
	Footer
------------------------------------------------------ */
#pagetop { display:block; position: fixed; bottom: 10px; right: 10px; z-index: 9999;}
#pagetop a { display: block; width: 60px; height: 60px;}
#footer_wrap { position: relative; z-index: 4; background: #000;}
#footer { color: #fff; line-height: 1.6;}
#footer a { color: #fff;}
#footer a:hover { text-decoration: underline;}
#ft_block1 { background: url("../img/ft_bg.jpg") no-repeat center center; background-size: cover; padding: 60px 0 30px;}
#ft_block1 #ft_logo{ width: 200px; margin: 0 auto 20px;}
#ft_block1 address p{ text-align: center;}
#ft_block1 address p.ft_tel1{ padding: 0 0 20px;}
#ft_block1 address p.ft_tel2 a,
#ft_block1 address p.ft_tel2 span{ font-size: 30px;}
#ft_block1 .ft_btns{ display: flex; flex-wrap: wrap; justify-content: center; width: 930px; margin: 30px auto 0;}
#ft_block1 .ft_btns li{}
#ft_block1 .ft_btns li:nth-child(1),
#ft_block1 .ft_btns li:nth-child(2),
#ft_block1 .ft_btns li:nth-child(3){ width: 300px; margin: 0 5px;}
#ft_block1 .ft_btns li:nth-child(1) a,
#ft_block1 .ft_btns li:nth-child(2) a,
#ft_block1 .ft_btns li:nth-child(3) a{ display: block; text-align: center; padding: 18px 0;}
#ft_block1 .ft_btns li:nth-child(1) a{ background: #9873ac; color: #fff;}
#ft_block1 .ft_btns li:nth-child(2) a,
#ft_block1 .ft_btns li:nth-child(3) a{ background: #bfa9d3; color: #000;}
#ft_block1 .ft_btns li:nth-child(1) a:hover{ background:#B693C9; text-decoration: none;}
#ft_block1 .ft_btns li:nth-child(2) a:hover,
#ft_block1 .ft_btns li:nth-child(3) a:hover{ background:#E2CCF6; text-decoration: none;}
#ft_block1 .ft_btns li:nth-child(4){ margin: 15px 0;}
#ft_block1 .ft_btns li:nth-child(4) a{ position: relative; padding: 0 0 0 15px;}
#ft_block1 .ft_btns li:nth-child(4) a::before{ position: absolute; top: 0; bottom: 0; left: 0; right: inherit; margin: auto 0; content: ""; vertical-align: middle; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); }
#ft_block2 .acc_tit{ display: none;}
#ft_block2 .ft_nav{ display: flex; justify-content: center; padding: 40px 90px 40px 0;}
#ft_block2 .ft_nav ul{ padding: 0 0 0 90px;}
#ft_block2 .ft_nav ul li{}
#ft_block2 .ft_nav ul li a{ position: relative; padding: 10px 0 10px 15px; display: block;}
#ft_block2 .ft_nav ul li a::before{ position: absolute; top: 0; bottom: 0; left: 0; right: inherit; margin: auto 0; content: ""; vertical-align: middle; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); }
#copyright { clear: both; padding: 5px 0; text-align: center; width: 1200px; margin: 0 auto; border-top: solid 1px #333; font-size: 12px;}

/*#ft_block3*/
#ft_block3 {
	display: flex; justify-content: space-between; max-width: 1200px; width: 92%; margin: 0 auto;
	padding: 0 0 30px; border-bottom: solid 1px #333; font-size: 15px; font-weight: 400; font-feature-settings: "palt"; }
#ft_block3 #calendar_ft { width: 780px; padding-right: 7.9%; box-sizing: border-box; letter-spacing: 2px; }
#ft_block3 #calendar_ft h2 { padding: 28px 0 8px; }
#ft_block3 #calendar_ft #calendar { width: 100%; }
#ft_block3 #calendar_ft th,
#ft_block3 #calendar_ft td { border-collapse: collapse; border: 1px solid #8f8f8f; padding: 5px 0; }
#ft_block3 #calendar_ft th::after { content: '日'; font-size: 13px; }
#ft_block3 #calendar_ft td { color: #b10000; background: #fff; text-align: center; }
#ft_block3 #calendar_ft td a { color: #87add6; }
#ft_block3 .ft_btns { display: flex; justify-content: space-between; flex-wrap: wrap; width: 420px; margin-top: 60px; }
#ft_block3 .ft_btns li:first-child { width: 100%; margin-bottom: 20px; }
#ft_block3 .ft_btns li:first-child a { background: #9873ac; }
#ft_block3 .ft_btns li:nth-of-type(2),
#ft_block3 .ft_btns li:nth-of-type(3) { width: calc((100% - 20px) / 2); }
#ft_block3 .ft_btns li:nth-of-type(2) a,
#ft_block3 .ft_btns li:nth-of-type(3) a { color: #000; background: #bfa9d3; }
#ft_block3 .ft_btns li:last-child { width: 100%; padding: 10px 0 0; text-align: right; }
#ft_block3 .ft_btns li:last-child a { position: relative; }
#ft_block3 .ft_btns li:last-child a::before { position: absolute; left: -15px; top: 50%; transform: translateY(-50%) rotate(45deg); content: ''; display: inline-block; border-top: 1px solid #fff; border-right: 1px solid #fff; width: 5px; height: 5px; }
#ft_block3 .ft_btns li:not(:last-child) a { display: block; padding: 17px 0; text-align: center; }
#ft_block3 .ft_btns li:nth-child(1) a:hover { background: rgb(182, 147, 201); text-decoration: none; }
#ft_block3 .ft_btns li:nth-child(2) a:hover,
#ft_block3 .ft_btns li:nth-child(3) a:hover { background: rgb(226, 204, 246); text-decoration: none; }

@media screen and (min-width: 601px) {
	#ft_block3 .ft_btns li:not(:last-child) a { font-size: 16px; }
}

@media screen and (max-width: 600px) {
#pagetop { bottom: 80px;}
#ft_block1 { padding: 30px 0;}
#ft_block1 #ft_logo{ width: 120px; margin: 0 auto 10px;}
#ft_block1 address p{ text-align: center; font-size: 13px;}
#ft_block1 address p.ft_tel1{ padding: 0 0 10px;}
#ft_block1 address p.ft_tel2 a,
#ft_block1 address p.ft_tel2 span{ font-size: 24px;}
#ft_block1 .ft_btns { width: 290px; margin: 15px auto 0;}
#ft_block1 .ft_btns li{ font-size: 13px;}
#ft_block1 .ft_btns li:nth-child(1){ width: 98%; margin: 0 1% 2%;}
#ft_block1 .ft_btns li:nth-child(2),
#ft_block1 .ft_btns li:nth-child(3){ width: 48%; margin: 0 1%;}
#ft_block1 .ft_btns li:nth-child(1) a,
#ft_block1 .ft_btns li:nth-child(2) a,
#ft_block1 .ft_btns li:nth-child(3) a{ padding: 15px 0;}
#ft_block2 .acc_tit{ display: block; text-align: center; font-size: 13px; padding: 15px 0 25px; position: relative;}
#ft_block2 .acc_tit::before{ position: absolute; top: inherit; bottom: 15px; left: 0; right: 0; margin: auto auto; content: ""; vertical-align: middle; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(135deg); }
#ft_block2 .acc_tit.active::before{ transform: rotate(-45deg); }
#ft_block2 .ft_nav{ justify-content: flex-start; flex-wrap: wrap; padding: 4%; border-top: solid 1px #333;}
#ft_block2 .ft_nav ul{ padding: 0; width: 50%;}
/*#ft_block2 .ft_nav ul:last-of-type{ width: 100%;}*/
#ft_block2 .ft_nav ul li{ font-size: 13px;}
#ft_block2 .ft_nav ul li a{ position: relative; padding: 8px 0 8px 15px; display: block;}
#copyright { padding: 5px 0 80px; width: 100%; margin: 0; font-size: 12px;}

	#ft_block3 { display: block; font-size: 13px; }
	#ft_block3 #calendar_ft { width: 100%; padding: 0; }
	#ft_block3 .ft_btns { width: 100%; margin-top: 30px; }
	#ft_block3 .ft_btns li:first-child { margin-bottom: 10px; }
	#ft_block3 .ft_btns li:nth-of-type(2),
	#ft_block3 .ft_btns li:nth-of-type(3) { width: calc((100% - 10px) / 2); }
	#ft_block3 .ft_btns li:last-child { text-align: center; }
}

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


/* ---------------------------------------------------
	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 #000; z-index: 9;}
	#sp_nav ul { display: table; width: 100%; table-layout: fixed;}
	#sp_nav li { display: table-cell; -webkit-box-sizing: border-box; box-sizing: border-box;}
	#sp_nav li:nth-child(2){ border-left: 1px solid #78655b;}
	#sp_nav li:nth-child(3){ background: #b79dc5;}
	#sp_nav li:nth-child(4){ border-left: 1px solid #fff; background: #9873ac;}
	#sp_nav li:nth-child(5){ border-left: 1px solid #fff; background: #000;}
	#sp_nav a { display: block; padding: 10px; text-align: center;}
	#sp_nav img { width: auto; height: 51px;}
}


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

yymmdd_Name_更新履歴コメントひな形追加
210420_eriko padding: 20px 12px; padding 変更


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