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

@font-face {
	font-display: swap;
	font-family: 'Instrument Serif';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/instrument-serif-v5-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Cardo';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/cardo-v21-latin-regular.woff2') format('woff2');
}

body { min-width: 1280px; min-height: 100vh; background: #212121; color: #eee; font-size: 16px; font-weight: 400; line-height: 1.5; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif; -webkit-text-size-adjust: 100%; position: relative; font-feature-settings: "palt"; letter-spacing: 0.1em; position: relative; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.noscroll{ overflow: hidden;}

.v_rl{ writing-mode: vertical-rl; font-feature-settings: "palt" 0;}

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

div { box-sizing: border-box;}

a { color: #eee; text-decoration: none;}
a:hover { color: #eee; text-decoration: underline;}
a img{ transition: all 0.5s; filter: brightness(1);}
a:hover img { filter: brightness(1.3);}

.en{ font-family: 'Instrument Serif'; }
.en2{ font-family: 'Cardo'; }
.mincho{ font-family: "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;}
.gothic{ font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;}

/* .fixed { width: 100%; min-width: 1100px; position: fixed; top:0; left: 0; z-index: 999;} */

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

@media screen and (max-width: 600px) {
body { min-width: 0;}
.br_sp,
.view_sp { display: block;}
.br_pc,
.view_pc { display: none !important;}
}

/* ホバーでテキストリンクに下線が左から右にのびる */
.ho_line_01 a{ position: relative; text-decoration: none; display: inline-block;}
.ho_line_01 a:hover{ text-decoration: none;}
.ho_line_01 a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #fff; transform: scaleX(0); transform-origin: left top; transition: transform 0.3s ease; }
.ho_line_01 a:hover::after { transform: scaleX(1); }

/* Common Title Type 01 */
.cmn_tit_01{ display: block; width: 100%; text-align: center;}
.cmn_tit_01 span{ display: block;}
.cmn_tit_01 span.en2{ font-size: 50px; line-height: 1; color: #545454;}
.cmn_tit_01 span.ja{ font-size: 20px; line-height: 1; padding: 20px 0 70px;}

@media screen and (max-width: 600px) {
.cmn_tit_01 span.en2{ font-size: 40px;}
.cmn_tit_01 span.ja{ font-size: 16px; padding: 15px 0 30px;}
}

/* Slick Slider Basic（ドットあり・左右ボタンなし・フェード） */
.slide_basic .slick-dots{ bottom: -30px}
.slide_basic .slick-dots li{ width: auto;}
.slide_basic .slick-dots li.slick-active{}
.slide_basic .slick-dots li button{ background-color: #9b9b9b; width: 6px; height: 6px; border-radius: 6px; padding: 0; margin: 0 auto; transition: all 0.5s;}
.slide_basic .slick-dots li.slick-active button{ background-color: #626262; width: 24px;}
.slide_basic .slick-dots li button:before{ display: none;}

/* ---------------------------------------------------
	MENU Button
------------------------------------------------------ */
#menu_btn { position: fixed; z-index: 101; top: 0; left: 0; box-sizing: border-box; cursor: pointer; height: 120px; width: 70px; display: flex; justify-content: center; align-items: center;}
#menu_btn .wrap{ width: 32px; height: 22px; position: relative; display: flex; flex-direction: column; justify-content: space-between;}
#menu_btn .bar{ box-sizing: border-box; height: 1px; width: 32px; text-indent: 100%; white-space: nowrap; overflow: hidden; z-index: 2; transform-origin: center center; position: relative;}
#menu_btn .bar::after{ content: ""; height: 1px; width: 32px; display: block; background: #adadad; position: absolute; top: 0; left: 0;}
#menu_btn .bar:last-of-type{ transition: width 0.5s;}
#menu_btn:hover .bar:last-of-type{ width: 22px;}
#menu_btn .txt{ display: none;}

@media screen and (max-width: 600px) {
#menu_btn { top: auto; left: auto; right: 0; bottom: 0; height: 65px; width: 80px; background-color: #212121;}
}

/* ---------------------------------------------------
	Global Header
------------------------------------------------------ */
#g_header { position: fixed; z-index: 100; top: 0; left: 0; height: 100%; width: 70px; background: rgba(33, 33, 33, 0.8);}
#g_header .hd_copyright{ position: absolute; top: 50%; left: 50%; color: #a3a3a3; font-size: 12px; line-height: 1; transform: translate(-50%, -50%) rotate(90deg); white-space: nowrap;}
#g_header .hd_book{ position: absolute; bottom: 0; left: 0; width: 70px; height: 270px;}
#g_header .hd_book a{ color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; height: 100%; background-color: #8e5943;}
#g_header .hd_book a:hover{ text-decoration: none; background-color: #a06850;}
#g_header .hd_book a span.ja{ padding: 70px 0 0;}
#g_header .hd_book a span.en{ transform: rotate(90deg); transform-origin: center center; font-size: 12px; padding: 0 0 0 90px; color: rgba(255,255,255,0.5);}

@media screen and (max-width: 600px) {
#g_header { top: auto; bottom: 0; height: 65px; width: 100%; background: none;}
#g_header .hd_copyright{ display: none;}
#g_header .hd_book{ bottom: 0; left: auto; right: 80px; width: 220px; height: 65px;}
#g_header .hd_book a{ flex-direction: row; justify-content: center;}
#g_header .hd_book a span.ja{ padding: 0; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb;}
#g_header .hd_book a span.en{ transform: rotate(0deg); padding: 0 0 0 10px;}
}

/* ---------------------------------------------------
	Language Button
------------------------------------------------------ */
.lang_btn{ position: absolute; z-index: 99; top: 50px; right: 50px; color: #fff;}
.lang_btn .tit{ border-bottom: solid 1px rgba(255,255,255,0.7); cursor: pointer;}
.lang_btn .list{ width: 100%; position: absolute; top: 2em; left: 0; opacity: 0; z-index: 100; visibility: hidden; height: auto; transition: all, 0.5s; box-sizing: border-box; font-size: 14px;}
.lang_btn .list.on{ opacity: 1; visibility: visible; height: auto;}
.lang_btn .list li{ margin: 0 0 1px;}
.lang_btn .list li a{ display: block; padding: 5px; text-align: center; background: rgba(255,255,255,0.8); color: #000; transition: background .5s;}
.lang_btn .list li a:hover{ background: #E6E6E6; text-decoration: none;}

@media screen and (max-width: 600px) {
.lang_btn{ position: absolute; z-index: 101; top: 20px; right: 30px; color: #fff;}
}

/* ---------------------------------------------------
	Global Navigation
------------------------------------------------------ */
#gnav { position: fixed; top: 0; left: -500px; bottom: 0; z-index: 200; overflow: auto; width: 500px; padding: 0; box-sizing: border-box; transition: left 0.5s; color: #fff;}
#gnav.on { left: 0;}
#gnav .gnav_inner{ position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; padding: 90px; background-color: #212121;}
#gnav .close{ position: absolute; top: 0; left: 0; box-sizing: border-box; cursor: pointer; height: 120px; width: 70px; text-indent: 100%; white-space: nowrap; overflow: hidden;}
#gnav .close::before,
#gnav .close::after{ content: ""; display: block; width: 30px; height: 1px; background-color: #adadad; position: absolute; top: 50%; left: 50%; transform-origin: center center; transition: all 0.5s;}
#gnav .close::before{ transform: translate(-50%, -50%) rotate(-45deg); }
#gnav .close::after{ transform: translate(-50%, -50%) rotate(45deg);}
#gnav .close:hover::before { width: 20px; transform: translate(-60%, -550%) rotate(145deg); }
#gnav .close:hover::after { width: 20px; transform: translate(-60%, 550%) rotate(-145deg); }
#gnav .gn_list{ padding: 0 0 30px;}
#gnav .gn_list li{ padding: 0;}
#gnav .gn_list li a{ padding: 10px 0;}
#gnav .gn_book a{ display: flex; align-items: center; justify-content: center; width: 270px; height: 60px; background-color: #8e5943;}
#gnav .gn_book a:hover{ text-decoration: none; background-color: #a06850;}
#gnav .gn_book a span.ja{ padding: 0 10px 0 0;}
#gnav .gn_book a span.en{ font-size: 12px; color: rgba(255,255,255,0.5);}
#gnav .gn_tel{ padding: 20px 0 40px; font-size: 20px; line-height: 1.1;}
#gnav .gn_tel .open{ font-size: 12px; line-height: 1;}
#gnav .gn_link{ width: 100%; border-top: solid 1px #494949; padding: 10px 0 0;}
#gnav .gn_link a{ padding: 10px 0;}
#gnav .overlay{ width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; z-index: 1; display: none;}
#gnav.on .overlay{ display: block;}

@media screen and (max-width: 600px) {
#gnav { left: -100%; width: 100%; }
#gnav .gnav_inner{ padding: 20%;}
#gnav .close{ top: auto; left: auto; right: 0; bottom: 0; height: 70px; width: 80px;}
#gnav .gn_list{ padding: 0 0 20px;}
#gnav .gn_list li{ padding: 5px 0;}
#gnav .gn_list li a{ padding: 5px 0;}
#gnav .gn_book a{ width: 100%; height: 60px;}
#gnav .gn_book a span.ja{ padding: 0 10px 0 0;}
#gnav .gn_book a span.en{ font-size: 12px;}
#gnav .gn_tel{ padding: 20px 0 30px;}
#gnav .gn_link{ padding: 10px 0 0;}
#gnav .gn_link a{ padding: 10px 0;}
}

/* ---------------------------------------------------
	Main img
------------------------------------------------------ */
#main_img {}

/* ---------------------------------------------------
	Contents
------------------------------------------------------ */
#contents_wrap { overflow: clip;}

/* ---------------------------------------------------
	Global Footer
------------------------------------------------------ */
#g_footer .ft_img_01{ width: 100%; height: 620px; text-align: center;}
#g_footer .ft_img_01 img{ width: 100%;}
#g_footer .ft_box_01{ width: 100%; display: flex; border-bottom: solid 1px #454545;}
#g_footer .ft_box_01 .ft_book,
#g_footer .ft_box_01 .ft_tel{ width: 50%; box-sizing: border-box;}
#g_footer .ft_box_01 .ft_book{ border-right: solid 1px #454545;}
#g_footer .ft_box_01 .ft_book a{ position: relative; display: flex; justify-content: center; align-items: center; height: 100%; transition: all 0.5s;}
#g_footer .ft_box_01 .ft_book a:hover{ text-decoration: none; background-color: #333;}
#g_footer .ft_box_01 .ft_book a::after{ content: ""; display: block; width: 12px; height: 12px; border-right: solid 1px #fff; border-bottom: solid 1px #fff; position: absolute; top: 50%; right: 50%; transform: translate( 11em, -50%) rotate(-45deg); transition: all 0.5s;}
#g_footer .ft_box_01 .ft_book a:hover::after{ transform: translate( 11.5em, -50%) rotate(-45deg);}
#g_footer .ft_box_01 .ft_book a span.ja{ font-size: 24px;}
#g_footer .ft_box_01 .ft_book a span.en{ color: rgba(255,255,255,0.5); padding: 0 0 0 1em; font-size: 16px;}
#g_footer .ft_box_01 .ft_tel{ display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 80px 0; font-size: 24px;}
#g_footer .ft_box_01 .ft_tel .tel-link{ padding: 0 0 0 0.2em; font-size: 30px;}
#g_footer .ft_box_01 .ft_tel .num,
#g_footer .ft_box_01 .ft_tel .open{ display: block;}
#g_footer .ft_box_01 .ft_tel .open{ font-size: 14px;}
#g_footer .ft_wrap{ width: 90%; max-width: 1270px; margin: 0 auto; padding: 80px 0 100px 70px; display: flex; justify-content: space-between; align-items: flex-start;}
#g_footer .ft_box_02{ width: 240px;}
#g_footer .ft_logo{ padding: 0 0 60px;}
#g_footer .ft_box_03{ width: auto; padding: 120px 0 0;}
#g_footer .ft_list{ margin: 0 0 30px;}
#g_footer .ft_list li a{ padding: 10px 0;}
#g_footer .ft_lang{ display: inline-block; position: relative;}
#g_footer .ft_lang .tit{ border-bottom: solid 1px #ccc; cursor: pointer;}
#g_footer .ft_lang .list{ width: 100%; position: absolute; top: 2em; left: 0; opacity: 0; z-index: 100; visibility: hidden; height: auto; transition: all, 0.5s; box-sizing: border-box; font-size: 14px;}
#g_footer .ft_lang .list.on{ opacity: 1; visibility: visible; height: auto;}
#g_footer .ft_lang .list li{ margin: 0 0 1px;}
#g_footer .ft_lang .list li a{ display: block; padding: 5px; text-align: center; background: rgba(255,255,255,0.8); color: #000; transition: background .5s;}
#g_footer .ft_lang .list li a:hover{ background: #E6E6E6; text-decoration: none;}
#g_footer .ft_box_04{ width: 480px; padding: 120px 0 0;}
#g_footer .ft_links{ margin: 0 0 30px;}
#g_footer .ft_links li{ position: relative;}
#g_footer .ft_links li::before,
#g_footer .ft_links li::after{ content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #454545;}
#g_footer .ft_links li::after { background-color: #fff; transform: scaleX(0); transform-origin: left top; transition: transform 0.3s ease; }
#g_footer .ft_links li:hover::after { transform: scaleX(1); }
#g_footer .ft_links li a{ display: block; width: 100%; height: 100%; padding: 40px 0; transition: all 0.5s;}
#g_footer .ft_links li a:hover{ text-decoration: none;}
#g_footer .ft_links li a::after{ content: ""; display: block; width: 8px; height: 8px; border-right: solid 1px #454545; border-bottom: solid 1px #454545; position: absolute; top: 50%; right: 30px; transform: translate( 0, -50%) rotate(-45deg); transition: all 0.5s;}
#g_footer .ft_tit{ font-size: 17px; color: #5e5e5e; padding: 0 0 20px; font-family: 'Instrument Serif';}
#g_footer .ft_txt{ font-size: 15px; line-height: 1.6; padding: 0 0 40px;}
#g_footer .ft_tel{ font-size: 15px; line-height: 1.6; padding: 0;}
#g_footer .ft_open{ font-size: 13px; line-height: 1.6; padding: 0 0 40px;}

@media screen and (max-width: 600px) {
#g_footer .ft_img_01{ height: 200px;}
#g_footer .ft_box_01{ flex-direction: column;}
#g_footer .ft_box_01 .ft_book,
#g_footer .ft_box_01 .ft_tel{ width: 100%;}
#g_footer .ft_box_01 .ft_book{ border-right: none; border-bottom: solid 1px #454545;}
#g_footer .ft_box_01 .ft_book a{ padding: 30px;}
#g_footer .ft_box_01 .ft_book a::after{ width: 12px; height: 12px; top: 50%; right: 50%; transform: translate( 9em, -50%) rotate(-45deg); transition: all 0.5s;}
#g_footer .ft_box_01 .ft_book a:hover::after{ transform: translate( 9.5em, -50%) rotate(-45deg);}
#g_footer .ft_box_01 .ft_book a span.ja{ font-size: 24px;}
#g_footer .ft_box_01 .ft_book a span.en{ padding: 0 0 0 1em; font-size: 16px;}
#g_footer .ft_box_01 .ft_tel{ padding: 25px 0; font-size: 24px;}
#g_footer .ft_box_01 .ft_tel .tel-link{ padding: 0 0 0 0.2em; font-size: 30px;}
#g_footer .ft_wrap{ max-width: 85%; max-width: 85%; padding: 40px 0 100px 0; flex-direction: column;}
#g_footer .ft_box_02{ width: 100%; padding: 50px 0 0; order: 2;}
#g_footer .ft_logo{ padding: 0 0 30px; width: 240px; }
#g_footer .ft_box_03{ width: 100%; padding: 0 0 50px; order: 1;}
#g_footer .ft_list{ margin: 0 0 30px;}
#g_footer .ft_list li a{ padding: 10px 0;}
#g_footer .ft_box_04{ width: 100%; padding: 40px 0 0; order: 3;}
#g_footer .ft_links{ margin: 0 0 30px;}
#g_footer .ft_links li a{ padding: 20px 0;}
#g_footer .ft_tit{ font-size: 17px; padding: 0 0 10px;}
#g_footer .ft_txt{ font-size: 15px; line-height: 1.6; padding: 0 0 20px;}
#g_footer .ft_tel{ font-size: 15px; line-height: 1.6; padding: 0;}
#g_footer .ft_open{ font-size: 12px; line-height: 1.6; padding: 0 0 20px;}
}