@charset "utf-8";
/* ===================================================
	Base CSS
====================================================== */

.sample { color: blue; }

:root {
	--cmn-color: #5a436e;
	--cmn-color2: #856b9c;
	--cmn-color3: #d8bfd8;
	--cmn-bg: /* #f9f2e6 */ #f5f5f5;
	--cmn-btn: /* #261604 */ #36454f;
	--cmn-btn2: #445561;
	--cmn-yel: /* #a4782f */ #d2bf8c;
	--cmn-yel-op: rgba(210 180 140 / 85%);
	--cmn-yel2: /*#9b8856;*/ #d6b784;
}

body { min-width: 1240px; min-height: 100vh; background: #fff; color: #000; font-size: 14px; font-weight: normal; line-height: 1.5; font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","ＭＳ Ｐゴシック", sans-serif; -webkit-text-size-adjust: 100%; position: relative; font-feature-settings: "palt"; letter-spacing: 0.08em;
}

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

div { box-sizing: border-box;}

a { color: #000; text-decoration: none;}
a img {  transition: all 0.5s;}
a:hover { color: #000; text-decoration: underline;}
a:hover img { opacity: 0.75;}

.inner { width: 1100px; max-width: 92%; margin: 0 auto; }
.ofi { object-fit: cover;}
.view_sp { display: none;}

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

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

body { min-width: 0;}
body.noscroll{ overflow: hidden;}

.view_sp { display: block;}
.view_pc { display: none !important;}

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


/* ---------------------------------------------------
	Global Header
------------------------------------------------------ */
#g_header { background: #fff; height: 90px; width: 100%; min-width: 1240px; display: block; position: fixed; top: 0; left: 0; z-index: 30;}
#g_header .hd_h1{ font-size: 13px; line-height: 1; padding: 5px 0 0 30px;}
#g_header .hd_logo{ display: inline-block; }
#g_header .hd_btn{ width: 210px; color: #fff; position: absolute; top: 0; right: 0;}
#g_header .hd_btn a{ width: 100%; height: 90px; color: #fff; background-color: var(--cmn-color); line-height: 90px; display: block; font-size: 18px; text-align: center; box-sizing: border-box; transition: background 0.5s;}
#g_header .hd_btn a:hover{ text-decoration: none; background-color: var(--cmn-color2); }
#g_header .hd_menu{ display: none;}

@media screen and (max-width: 600px) {
#g_header { background: none; height: 65px; min-width: 0; z-index: 31;}
#g_header .hd_h1{ display: none;}
#g_header .hd_btn{ width: 65px; right: 65px; opacity: 1; transition: opacity 0.5s;}
#g_header .hd_btn.off{ opacity: 0; pointer-events: none; }
#g_header .hd_btn a{ height: 65px; line-height: 1.7; font-size: 12px; padding: 12px 0 0;}
#g_header .hd_btn a:hover{ background-position: center top 5px;}
#g_header .hd_menu { box-sizing: border-box; cursor: pointer; position: fixed; z-index: 30; top: 0; right: 0; height: 65px; width: 65px; background: #fff; display: block;}
#g_header .hd_menu > .bar{ transition: all 0.3s; box-sizing: border-box; position: absolute; height: 2px; width: 30px; text-indent: 100%; white-space: nowrap; overflow: hidden; z-index: 2; transform-origin: center center; left: 17px;}
#g_header .hd_menu > .bar::after{ content: ""; height: 1px; width: 36px; display: block; background: #000; position: absolute; top: 0; left: 0;}
#g_header .hd_menu > .bar:nth-of-type(1) { top: 17px;}
#g_header .hd_menu > .bar:nth-of-type(2) { top: 23px;}
#g_header .hd_menu > .bar:nth-of-type(3) { top: 29px;}
#g_header .hd_menu.on > .bar { width: 30px; left: 19px; }
#g_header .hd_menu.on > .bar::after{ width: 30px;}
#g_header .hd_menu.on > .bar:nth-of-type(1) { transform: rotate(145deg); top: 20px; }
#g_header .hd_menu.on > .bar:nth-of-type(2) { opacity: 0;}
#g_header .hd_menu.on > .bar:nth-of-type(3) { transform: rotate(-145deg); top: 20px;}
#g_header .hd_menu .menu,
#g_header .hd_menu .close{ text-align: center; color: #000; font-size: 12px; line-height: 1; position: absolute; top: 36px; left: 0; width: 100%; letter-spacing: -0.05em; transition: opacity 0.5s;}
#g_header .hd_menu .menu{ opacity: 1;}
#g_header .hd_menu .close{ opacity: 0;}
#g_header .hd_menu.on .menu{ opacity: 0;}
#g_header .hd_menu.on .close{ opacity: 1;}
}


/* ---------------------------------------------------
	Global Navigation
------------------------------------------------------ */
#gnav { position: fixed; top: 0; left: 0; width: calc( 100% - 540px ); min-width: 700px; height: 90px; margin: 0 210px 0 330px; padding: 0; box-sizing: border-box; z-index: 31;}
#gnav .gn_btns_01{ display: flex; justify-content: flex-end; margin: 30px 0 0;}
#gnav .gn_btns_01 li{ margin: 0 30px 0 0; font-size: 16px;}
#gnav .gn_btns_01 li a{ line-height: 1.1; position: relative; display: block; padding: 8px 0;}
#gnav .gn_btns_01 li a:before { content: ""; width: 100%; height: 1px; position: absolute; left: 0; transform: scale(0, 1); transform-origin: left top; bottom: 0; background: var(--cmn-color2); transition: transform 0.4s;}
#gnav .gn_btns_01 li a:hover{ text-decoration: none;}
#home #gnav .gn_btns_01 li.gn_home a:before,
#rooms #gnav .gn_btns_01 li.gn_01 a:before,
#breakfast #gnav .gn_btns_01 li.gn_02 a:before,
#facilities #gnav .gn_btns_01 li.gn_03 a:before,
#sightseeing #gnav .gn_btns_01 li.gn_04 a:before,
#access #gnav .gn_btns_01 li.gn_05 a:before,
#news #gnav .gn_btns_01 li.gn_06 a:before,
#gnav .gn_btns_01 li a:hover:before{ transform: scale(1, 1)}
#gnav .gn_logo,
#gnav .gn_06,
#gnav .gn_btns_02,
#gnav .gn_close{ display: none;}

@media screen and (max-width: 600px) {
#gnav { top: 0; left: 0; bottom: 0; overflow-y: auto; width: 100%; min-width: 100%; height: 100%; margin: 0; padding: 65px 0 0; background-color: #fff; opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; display: block; z-index: 30;}
#gnav.on { opacity: 1; visibility: visible;}
#gnav .gn_inner{ pointer-events: auto; width: 84%; margin: 0 auto; padding: 10px 0 50px;}
#gnav .gn_logo{ display: block; width: 100%; text-align: center;}
#gnav .gn_btns_01{ display: block; margin: 10px 0 40px;}
#gnav .gn_btns_01 li{ margin: 0; font-size: 15px; border-bottom: solid 1px #aaa;}
#gnav .gn_btns_01 li a{ line-height: 1.3; padding: 15px 0;}
#gnav .gn_btns_01 li a:before { display: none;}
#gnav .gn_btns_01 li.gn_06{ display: block;}
#gnav .gn_btns_02{ display: block;}
#gnav .gn_btns_02 .gn_btn_01 a{ display: block; background-color: var(--cmn-color); color: #fff; font-size: 18px; line-height: 60px; height: 60px; width: 100%; text-align: center;}
#gnav .gn_btns_02 .gn_btn_01 a:hover{ background-color: var(--cmn-color); text-decoration: none; background-color: var(--cmn-color);}
#gnav .gn_btns_02 .gn_btn_02{ text-align: center; font-size: 13px; line-height: 1.1; padding: 15px 0 40px;}
#gnav .gn_btns_02 .gn_btn_02 a{ text-decoration: underline;}
#gnav .gn_btns_02 .gn_txt{ font-size: 13px; text-align: center;}
#gnav .gn_btns_02 .gn_tel{ font-size: 16px; text-align: center;}
#gnav .gn_btns_02 .gn_tel .tel-link span{ font-size: 32px; letter-spacing: 0;}
#gnav .gn_close{ display: block; position: relative; height: 50px; width: 100%; text-align: center; font-size: 14px; line-height: 50px; background-color: #f8f8f8; padding: 0 0 0 20px; margin: 30px 0 0; box-sizing: border-box;}
#gnav .gn_close::before,
#gnav .gn_close::after{ content: ""; display: block; width: 10px; height: 1px; background: #000; position: absolute; top: 0; bottom: 0; left: 50%; margin: auto 0 auto -2.5em; transform-origin: center center;}
#gnav .gn_close::before{ transform: rotate(-45deg);}
#gnav .gn_close::after{ transform: rotate(45deg);}
}


/* ---------------------------------------------------
	Main Title
------------------------------------------------------ */
.main_tit { width: 100%; position: relative;}
.main_tit .tit{ position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; color: #fff;}
.main_tit .tit span{ display: block; text-align: center; letter-spacing: 0.1em; filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.6));}
.main_tit .tit .en{ font-size: 40px;}
.main_tit .tit .ja{ font-size: 20px;}
.main_tit .img{ position: relative; z-index: 1; width: 100%; height: 600px;}

@media screen and (max-width: 600px) {
.main_tit .tit .en{ font-size: 30px;}
.main_tit .tit .ja{ font-size: 16px;}
.main_tit .img{ height: 250px;}
}


/* ---------------------------------------------------
	Contents
------------------------------------------------------ */
#contents_wrap { padding: 90px 0 0; position: relative; z-index: 10;}

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


/* breadcrumb */
#contents_wrap #breadcrumb { margin: 0; padding: 10px 30px; width: 100%; font-size: 15px; box-sizing: border-box; position: absolute; bottom: 0; left: 0;}
#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 { padding: 10px 5%; width: 100%; font-size: 13px; box-sizing: border-box;}
}


/* Common Button Type 01 */
.cmn_btn_01{ display: block; background-color: var(--cmn-btn); color: #fff; position: relative; padding: 10px 50px; margin: 20px 0 0; transition: all 0.5s; box-sizing: border-box;}
.cmn_btn_01::before,
.cmn_btn_01::after{ content: ""; width: 50px; height: 1px; background: #fff; position: absolute; top: 50%; right: 0; transition: all 0.5s;}
.cmn_btn_01::before{ background: var(--cmn-btn);}
.cmn_btn_01::after{ background: #fff;}
.cmn_btn_01:hover{ background-color: var(--cmn-btn2); color: #fff; text-decoration: none;}
.cmn_btn_01:hover::before{ right: -25px;}
.cmn_btn_01:hover::after{ width: 25px;}

@media screen and (max-width: 600px) {
.cmn_btn_01{ padding: 10px 25px; margin: 10px 0 0; font-size: 15px;}
.cmn_btn_01::before,
.cmn_btn_01::after{ width: 30px;}
.cmn_btn_01:hover::before{ right: 0;}
.cmn_btn_01:hover::after{ width: 30px;}
}


/* Common Button Type 02 */
.cmn_btn_02{ background: #fff; text-align: center; display: block; font-size: 15px; color: #000; padding: 10px 0; margin: 20px 0 0; position: relative; border: solid 1px #c4c4c4; transition: all 0.5s;}
.cmn_btn_02::after{ content: ""; display: block; width: 30px; height: 1px; background: #c4c4c4; position: absolute; top: 50%; right: 0; transition: right 0.5s;}
.cmn_btn_02:hover{ background: #efefef; text-decoration: none;}
.cmn_btn_02:hover::after{ right: -15px;}

@media screen and (max-width: 600px) {
.cmn_btn_02{ font-size: 13px; padding: 10px 0}
.cmn_btn_02::after{ width: 20px;}
.cmn_btn_02:hover::after{ right: 0;}
}


/* ---------------------------------------------------
	Global Footer
------------------------------------------------------ */
#g_footer { background: var(--cmn-color); color: #fff; position: relative; z-index: 11;}
#g_footer a { color: #fff;}
#g_footer .ft_box_01{ width: 100%; margin: 0 auto; border-bottom: solid 1px var(--cmn-color3); padding: 20px 0;}
#g_footer .ft_box_01 .acc_tit{ display: none;}
#g_footer .ft_box_01 ul{ display: flex; justify-content: center; font-size: 15px; line-height: 1.1;}
#g_footer .ft_box_01 ul li{ margin: 0 20px;}
#g_footer .ft_box_01 ul li a{ display: block; padding: 10px 0 10px 15px; position: relative;}
#g_footer .ft_box_01 ul li a::before{ content: ""; display: block; width: 6px; height: 6px; border-right: solid 1px #fff; border-bottom: solid 1px #fff; transform: rotate(-45deg); position: absolute; top: 0; bottom: 0; left: 0; margin: auto 0;}
#g_footer .ft_box_01 ul li a::after { content: ""; width: 100%; height: 1px; position: absolute; left: 0; transform: scale(0, 1); transform-origin: left top; bottom: 0; background: #fff; transition: transform 0.4s;}
#g_footer .ft_box_01 ul li a:hover{ text-decoration: none;}
#g_footer .ft_box_01 ul li a:hover::after{ transform: scale(1, 1)}
#g_footer .ft_box_02{ width: 1100px; margin: 0 auto; padding: 40px 0; display: flex; justify-content: space-between; align-items: flex-start;}
#g_footer .ft_box_02 .ft_logo{ width: 420px; }
#g_footer .ft_box_02 .ft_txts{ line-height: 2; font-size: 15px;}
#g_footer .ft_box_02 .ft_btns{ width: 300px;}
#g_footer .ft_box_02 .ft_btns .ft_btn_01{ width: 100%;}
#g_footer .ft_box_02 .ft_btns .ft_btn_01 a{ background: var(--cmn-bg); color: var(--cmn-btn); text-align: center; display: block; height: 64px; font-size: 16px; line-height: 64px; position: relative; transition: all 0.5s;}
#g_footer .ft_box_02 .ft_btns .ft_btn_01 a::after{ content: ""; display: block; width: 50px; height: 1px; background: var(--cmn-color); position: absolute; top: 50%; right: 0; transition: all 0.5s;}
#g_footer .ft_box_02 .ft_btns .ft_btn_01 a:hover{ background: var(--cmn-color3); text-decoration: none;}
#g_footer .ft_box_02 .ft_btns .ft_btn_01 a:hover::after{ right: -25px;}
#g_footer .ft_box_02 .ft_btns .ft_btn_02 a{ display: inline-block; padding: 10px 0 5px; position: relative;}
#g_footer .ft_box_02 .ft_btns .ft_btn_02 a::after { content: ""; width: 100%; height: 1px; position: absolute; left: 0; transform: scale(0, 1); transform-origin: left top; bottom: 0; background: #fff; transition: transform 0.4s;}
#g_footer .ft_box_02 .ft_btns .ft_btn_02 a:hover{ text-decoration: none;}
#g_footer .ft_box_02 .ft_btns .ft_btn_02 a:hover::after{ transform: scale(1, 1)}
#g_footer .ft_copyright{ width: 100%; background: #fff; text-align: center; padding: 20px 0; font-size: 12px; line-height: 1; color: var(--cmn-color2); }
/* #g_footer .ft_winery { padding: 50px 0; border-top: #C5C5C5 solid 1px; background: #fff; text-align: center; } */

@media screen and (max-width: 600px) {
#g_footer { padding: 8vw 0 0;}
#g_footer .ft_box_01{ width: 84%; border: solid 1px var(--cmn-color3); padding: 0;}
#g_footer .ft_box_01 .acc_tit{ display: block; padding: 15px 0; text-align: center; font-size: 15px; line-height: 1; position: relative;}
#g_footer .ft_box_01 .acc_tit::after{ content: ""; display: block; width: 7px; height: 7px; border-right: solid 1px #fff; border-bottom: solid 1px #fff; transform: rotate(45deg); transition: transform 0.5s; position: absolute; top: 18px; right: 15px;}
#g_footer .ft_box_01 .acc_tit.active::after{ transform: rotate(-135deg);}
#g_footer .ft_box_01 ul{ justify-content: flex-start; flex-wrap: wrap; font-size: 13px; line-height: 1.1; padding: 0 0 5%;}
#g_footer .ft_box_01 ul li{ margin: 0 5%; width: 40%;}
#g_footer .ft_box_02{ width: 84%; border-bottom: none; padding: 8vw 0; flex-direction: column}
#g_footer .ft_box_02 .ft_logo{ width: 100%; }
#g_footer .ft_box_02 .ft_txts{ line-height: 1.7; font-size: 12px; text-align: center; width: 100%; padding: 15px 0;}
#g_footer .ft_box_02 .ft_btns{ width: 100%;}
#g_footer .ft_box_02 .ft_btns .ft_btn_01 a{ height: 45px; font-size: 15px; line-height: 45px;}
#g_footer .ft_box_02 .ft_btns .ft_btn_01 a:hover::after{ right: 0;}
#g_footer .ft_box_02 .ft_btns .ft_btn_02{ text-align: center;}
#g_footer .ft_box_02 .ft_btns .ft_btn_02 a{ font-size: 12px;}
#g_footer .ft_copyright{ padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); font-size: 10px; }
/* #g_footer .ft_winery a { display: block; max-width: 60vw; margin: 0 auto; } */
}


/* ---------------------------------------------------
	Update history
------------------------------------------------------



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