@charset "utf-8";
/* ===================================================
	Base CSS
====================================================== */
/* amiri-regular - latin */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
	font-display: swap;
  src: local(''),
       url('../fonts/amiri-v26-latin-regular.woff2') format('woff2'); /* Super Modern Browsers */
}

.amiri { font-family: 'Amiri', serif;}

body {
	min-width: 1200px; min-height: 100vh; background: #000; color: #fff;
	font-size: 16px; font-weight: normal; line-height: 1.8;
	font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
	-webkit-text-size-adjust: 100%; letter-spacing: 0.08em;
}
html.pos_fix { overflow: hidden;}


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

div { box-sizing: border-box;}

a { color: #fff; text-decoration: none;}
a img { transition: opacity .3s;}

.fixed { width: 100%; min-width: 1100px; position: fixed; top:0; left: 0; z-index: 999;}
iframe[name="google_conversion_frame"] { position: absolute; bottom: 0; left: 0;}

.ofi { object-fit: cover; width: 100%; height: 100%;}
.sp { display: none;}
.br_sp { display: none;}

@media screen and (hover: hover) {
	a:hover { color: #fff;}
	a:hover img { opacity: 0.75;}
}

@media screen and (max-width: 600px) {
	body { font-size: 15px; min-width: 0; line-height: 1.8;}
	.sp { display: block;}
	.br_sp { display: inline;}
	.pc { display: none !important;}
}


/* ---------------------------------------------------
	Base Layout
------------------------------------------------------ */
/* コンテンツ幅 */
.inner_lg { width: 1400px; max-width: calc(98% - 180px); margin: 0 auto;}
.inner_md { width: 1200px; max-width: calc(98% - 180px); margin: 0 auto;}
.inner_sm { width: 1100px; max-width: calc(98% - 180px); margin: 0 auto;}

.cmn_linkbtn01 { position: relative; display: block; width: 250px; padding: 10px; text-align: center; box-sizing: border-box;}
.cmn_linkbtn01::before,
.cmn_linkbtn01::after { content: ''; position: absolute; border: solid rgba(255 255 255/60%); width: 95%; height: 65%; transition: all .3s ease-in-out; box-sizing: border-box;}
.cmn_linkbtn01::before { top: 0; left: 0; border-width: 2px 0 0 2px;}
.cmn_linkbtn01::after { right: 0; bottom: 0; border-width: 0 2px 2px 0;}

@media screen and (hover: hover) {
  .cmn_linkbtn01:hover::before,
  .cmn_linkbtn01:hover::after { width: 100%; height: 100%; border-color: rgba(255 255 255/90%);}
}

@media screen and (max-width: 600px) {
  .inner_lg { max-width: 92%;}
	.inner_md { max-width: 92%;}
  .inner_sm { max-width: 92%;}
}


/* ---------------------------------------------------
	Header
------------------------------------------------------ */
#header_top { width: calc(99% - 90px); height: 90px; display: flex; justify-content: space-between; align-items: center; padding-left: 30px;}
#header_top #h_lang { position: relative; width: 145px; text-align: center; cursor: pointer; }
#header_top #h_lang p { }
#header_top #h_lang p::before { content: ''; display: block; position: absolute; top: 50%; right: 10px; content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 10px; transform: translateY(-50%) rotate(45deg); border-right: 1px solid #fff; border-bottom: 1px solid #fff;}
#header_top #h_lang ul { display: none; position: absolute; width: 100%; left: 0; top: 50px; background: #000; z-index: 1;}
#header_top #h_lang ul li a { display: block; padding: 5px 0;}

#h_menu { width: 30px; position: fixed; top: 30px; right: 30px; z-index: 999;}
#h_menu a { display: block; transition: opacity .3s;}
#h_menu a > span:first-of-type { font-size: 0; display: flex; justify-content: space-between;}
#h_menu a > span:first-of-type span { width: 1px; height: 40px; background: #969696; transition: transform .3s;}
#h_menu a > span:nth-of-type(2) { display: block; font-size: 14px; color: #a1a1a1; letter-spacing: normal; opacity: 0; transition: opacity .3s; line-height: 1.4; white-space: nowrap;}

#h_reserve { width: 90px; height: 250px; position: fixed; bottom: 0; right: 0; z-index: 90;}
#h_reserve a { display: block; width: 100%; height: 100%; background: url(../img/btn_bg01.jpg); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .3s;}
#h_reserve a span { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 17px;}
#h_reserve a span:nth-of-type(2) { margin-top: 5px;}
#h_reserve a .amiri { font-size: 13px; margin-top: 5px;}

.active #header_top #h_lang { position: fixed; top: 29px; right: calc(1% + 90px); z-index: 999;}

.active #h_menu a > span:first-of-type { justify-content: center;}
.active #h_menu a > span:first-of-type span:first-of-type { transform: rotate(45deg);}
.active #h_menu a > span:first-of-type span:nth-of-type(2) { opacity: 0;}
.active #h_menu a > span:first-of-type span:nth-of-type(3) { transform: rotate(-45deg) translate(-2px, -2px);}
.active #h_menu a > span:nth-of-type(2) { opacity: 1;}


@media screen and (hover: hover) {
	#h_menu a:hover { opacity: .7;}
	#h_reserve a:hover { opacity: .85;}
}

@media screen and (max-width: 600px) {
	#header_top { width: calc(82% - 100px); height: 15vw; padding-left: 3vw;}
	#header_top .h_logo img { width: 22vw; min-width: 75px;}
	#header_top #h_lang { width: 120px;  opacity: 0;}
  #header_top #h_lang ul { top: 35px;}
	#h_menu { width: 18vw; height: 15vw; display: flex; justify-content: center; align-items: center; right: 0; top: 0; background: #000;}
	#h_menu a { width: 25px; position: relative;}
	#h_menu a > span:first-of-type span { height: 8vw;}
	#h_menu a > span:nth-of-type(2) { position: absolute; bottom: -7px; left: 50%; transform: translate(-50% ,50%);}
	#h_reserve { width: 100px; height: 15vw; bottom: auto; top: 0; right: 18vw;}
	#h_reserve a span { font-size: 16px; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb;}

	.active #header_top #h_lang { right: 20vw; top: 5vw; opacity: 1;}

}


/* ---------------------------------------------------
	G-nav
------------------------------------------------------ */
#gnav_wrap { opacity: 0; pointer-events: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 998; padding: 100px 0 120px; transition: opacity .3s; overflow: scroll;}
#gnav { width: 1100px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; min-height: 100%; max-width: 98%;}
#gnav #gnav_logo { text-align: center;}
#gnav_main { margin-top: 50px; display: flex; flex-wrap: wrap; justify-content: space-between;}
#gnav_main ul { width: 33%; padding: 10px 0 10px 2%; border-left: 1px solid #4d4d4d; box-sizing: border-box;}
#gnav_main ul li { line-height: 1.2;}
#gnav_main ul li a { transition: color .3s; display: inline-block;}
#gnav_main ul li + li { margin-top: 23px;}
#gnav_main ul li.weather { margin-top: 25px;}
#gnav_main ul li.weather a { padding-left: 25px; position: relative; text-decoration: underline;}
#gnav_main ul li.weather a::before {
  content: ''; display: block; width: 20px; height: 20px; background: url(../img/ico_weather_w.svg)no-repeat center; background-size: contain;
  position: absolute; top: calc(50% - 11px); left: 0;
}

#gnav_reserve { margin-top: 65px;}
#gnav_reserve > p { text-align: center;}
#gnav_reserve > p > span { color: #bbaa82; display: block; font-size: 32px; line-height: 1.3;}
#gnav_reserve > p > span span { margin-right: 10px;}
#gnav_reserve ul { display: flex; justify-content: center; margin-top: 25px;}
#gnav_reserve ul li { width: 280px;}
#gnav_reserve ul li + li { margin-left: 15px;}
#gnav_reserve ul li a { display: block; background: url(../img/btn_bg02.jpg); text-align: center; padding: 20px 0; transition: opacity .3s;}
#gnav_reserve ul li:first-of-type a { background: url(../img/btn_bg01.jpg);}

.active #gnav_wrap { opacity: 1; pointer-events: auto;}

@media screen and (hover: hover) {
	#gnav_main ul li a:hover { color: #b3bff3;}
	#gnav_reserve ul li a:hover { opacity: .85;}
}

@media screen and (max-width: 600px) {
	#gnav_wrap { padding: 80px 0 120px;}
	#gnav { width: 90%;}
	#gnav #gnav_logo img { width: 35vw;}
	#gnav_main { margin-top: 30px;}
	#gnav_main ul { width: 49%; padding: 0; border-left: none;}
	#gnav_main ul:nth-of-type(3) { width: 100%; margin-top: 30px; border-bottom: 1px solid #4d4d4d; padding-bottom: 25px;}
	#gnav_main ul li + li { margin-top: 20px;}
	#gnav_main ul:nth-of-type(3) li + li { margin-top: 10px;}

	#gnav_reserve { margin-top: 30px;}
	#gnav_reserve > p > span { font-size: 24px; line-height: 1.6;}
	#gnav_reserve ul { display: block; margin-top: 15px;}
	#gnav_reserve ul li { width: 85%; margin: 0 auto;}
	#gnav_reserve ul li + li { margin: 10px auto 0;}
	#gnav_reserve ul li a { padding: 15px 0;}

}


/* ---------------------------------------------------
	Main img
------------------------------------------------------ */
#main_img { width: calc(99% - 90px);}
#main_img .img_wrap { position: relative;}
#main_img .tit_wrap { display: flex; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-left: calc(50% - 600px);}
#main_img h1 { font-size: 34px; line-height: 1.4; text-shadow: 0 0 5px rgba(0,0,0,0.75);}
#main_img h1 span { font-size: 16px; display: block;}

@media screen and (max-width: 1409px) {
  #main_img .tit_wrap { padding-left: calc(1vw + 90px);}
}

@media screen and (max-width: 1200px) {
  #main_img .tit_wrap { padding-left: 102px;}
}

@media screen and (max-width: 600px) {
  #main_img { width: 100%;}
  #main_img .tit_wrap { padding-left: 4%;}
  #main_img h1 { font-size: 28px;}
  #main_img h1 span { font-size: 15px;}

}

/* ---------------------------------------------------
	Contents
------------------------------------------------------ */
#lead { padding: 50px 0 65px; border-bottom: 1px solid #303030;}
#lead dl { display: flex; flex-wrap: wrap;}
#lead dl dt { font-size: 28px; line-height: 1.5; width: 390px;}
#lead dl dd { width: calc(100% - 400px);}

@media screen and (max-width: 600px) {
  #lead { padding: 0 0 40px;}
  #lead dl dt { width: 100%; font-size: 22px;}
  #lead dl dd { width: 100%; margin-top: 15px;}
}


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


@media screen and (max-width: 600px) {
  #breadcrumb { width: 94%;}
}


/* ---------------------------------------------------
	Footer
------------------------------------------------------ */
#footer_reserve { padding: 100px 0 125px; background: url(../img/footer_reserve_bg.jpg)no-repeat center; background-size: cover;}
#footer_reserve p { font-size: 28px; display: flex; align-items: center;}
#footer_reserve p span { font-size: 20px; color: #a0a0a0; margin-left: 25px;}
#footer_reserve ul { display: flex; justify-content: center; margin-top: 55px;}
#footer_reserve ul li { width: 280px;}
#footer_reserve ul li + li { margin-left: 50px;}
#footer_reserve ul li a { display: block; background: #ffffff; text-align: center; padding: 20px 0; font-size: 18px; color: #000; transition: background-color .3s, color .3s;}

#footer { padding: 85px 4% 120px; position: relative; display: flex; justify-content: space-between;}
#pagetop { position: absolute; top: 50px; right: 2%;}
#pagetop a { display: block; padding: 0 10px;}
#f_logo { width: 350px;}
#f_logo .name { margin-top: 30px;}
#f_logo address span { display: inline-block;}
#f_logo address span:first-of-type { margin-right: 10px;}
#f_logo address .tel-link span { font-size: 30px; line-height: 1.4;}
#f_logo ul { display: flex; margin-top: 15px;}
#f_logo ul li + li { margin-left: 20px;}

#f_nav { width: 700px; max-width: calc(100% - 350px); margin: 15px auto 0;}
#f_nav > p { display: flex; justify-content: flex-end;}
#f_nav > p > span { display: flex; align-items: center; border: 1px solid #6b6b6b; color: #d2d2d2; line-height: 1; padding: 6px 10px;}
#f_nav > p > span span { margin-right: 10px;}
#f_navmain { display: flex; justify-content: space-between; margin-top: 60px;}
#f_navmain ul { width: 210px;}
#f_navmain ul li { line-height: 1.2;}
#f_navmain ul li a { transition: color .3s; display: inline-block;}
#f_navmain ul li.weather a { padding-left: 25px; position: relative; text-decoration: underline;}
#f_navmain ul li.weather a::before {
  content: ''; display: block; width: 20px; height: 20px; background: url(../img/ico_weather_w.svg)no-repeat center; background-size: contain;
  position: absolute; top: calc(50% - 11px); left: 0;
}
#f_navmain ul li + li { margin-top: 18px;}

#copyright { color: #969696; font-size: 12px; margin-top: 65px;}

@media screen and (hover: hover) {
	#footer_reserve ul li a:hover { background: #474e6e; color: #fff;}
	#f_navmain ul li a:hover { color: #b3bff3;}
}

@media screen and (max-width: 600px) {
	#footer_reserve { padding: 30px 0;}
	#footer_reserve > div { width: 84%;}
	#footer_reserve p { font-size: 22px;}
	#footer_reserve p span { font-size: 16px;}
	#footer_reserve ul { display: block; margin-top: 10px;}
	#footer_reserve ul li { width: 100%;}
	#footer_reserve ul li + li { margin: 10px 0 0;}
	#footer_reserve ul li a { font-size: 16px; padding: 15px 0;}

	#footer { flex-direction: column; padding: 20px 4% 50px;}
	#pagetop { right: 1%; top: 20px;}
	#f_logo { width: 100%; order: 1; margin-top: 50px;}
	#f_logo .logo { text-align: center;}
	#f_logo .logo img { width: 36vw; min-width: 130px;}
	#f_logo .name { margin-top: 20px;}
	#f_logo ul { margin-top: 20px;}
	#f_nav { max-width: none; width: 100%;}
	#f_nav > p { justify-content: center;}
	#f_navmain { flex-wrap: wrap; margin-top: 50px;}
	#f_navmain ul { width: 49%;}
	#f_navmain ul:nth-of-type(3) { width: 100%; margin-top: 25px;}

	#copyright { margin-top: 30px;}
}


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

180228_〇〇_cssを更新したらここに更新履歴を追加していきます。多くなったら上の方は削除。
180205_kamiguchi_更新履歴コメントひな形追加
200828_akimoto_IEで游ゴシック体を使用すると謎の余白ができるバグがあるため、IEでのみfont-familyを変更する記述を追記
201029_maehata_bodyタグにfont-feature-settings: "palt";追加
201223_akimito_下記内容の修正
　・bodyのdisplay:flex;の削除。
　・iPhoneセーフエリアの対応記述。
　・object-fitのIE対応の記述およびjs追加。

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