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

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

@font-face {
font-display: swap;
font-family: 'Cardo';
font-style: normal;
font-weight: 700;
src: url('../fonts/cardo-v19-latin-700.woff2') format('woff2');
}

body { min-width: 1240px; min-height: 100vh; background: #000; background-size: 150px; color: #fff; font-size: 16px; font-weight: normal; line-height: 2; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; -webkit-text-size-adjust: 100%; position: relative; font-feature-settings: "palt"; letter-spacing: 0.1em; -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: #fff; text-decoration: none;}
a:hover { color: #fff; text-decoration: underline;}
a:hover img { opacity: 0.75;}

.ofi { object-fit: cover;}
.view_sp,
.br_sp{ display: none;}

.en{ font-family: 'Cardo';}
.gothic{ font-family:"Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;}

.inner_sm{ width: 80%; max-width: 1000px; margin: 0 auto;}
.inner_md{ width: 90%; max-width: 1200px; margin: 0 auto;}
.inner_lg{ width: 90%; max-width: 1400px; margin: 0 auto;}

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

/* lightbox.js style overwrite */
.lb-data .lb-caption { font-weight: normal !important;}

/* ---------------------------------------------------
Common Parts
------------------------------------------------------ */

/* テキストリンクType01（アンダーライン左から右） */
.hov_01 { position: relative; display: inline-block; text-decoration: none; box-sizing: border-box;}
.hov_01::after { position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 1px; background: #fff; transform: scale(0, 1); transform-origin: left top; transition: transform .3s; }
.hov_01:hover{ text-decoration: none;}
.hov_01:hover::after { transform: scale(1, 1);}

/* テキストリンクType01（アンダーライン中央から外） */
.hov_02 { position: relative; display: inline-block; text-decoration: none; box-sizing: border-box;}
.hov_02::after { position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 1px; background: #fff; transform: scale(0, 1); transform-origin: center top; transition: transform .3s; }
.hov_02:hover{ text-decoration: none;}
.hov_02:hover::after { transform: scale(1, 1);}

/* 画像パララックス */
.prx-outer { overflow: hidden; }
.prx-inner { height: 130%; }
.prx-inner img { width: 100%; height: 100%; }

/* Slick.js Style Overwrite */
.slide_basic.slick-dotted.slick-slider{ margin-bottom: 0 !important; line-height: 0; padding: 0 0 40px;}
.slide_basic .slick-dots{ bottom: 10px !important;}
.slide_basic .slick-dots li{ margin: 0 !important;}
.slide_basic .slick-dots li button:before{ content: '○';font-size: 8px !important; color: #fff; opacity: 1 !important;}
.slide_basic .slick-dots li.slick-active button:before{ content: '●'; font-size: 8px !important; color: #fff;}

@media screen and (max-width: 600px) {
.slide_basic.slick-dotted.slick-slider{ padding: 0 0 30px;}
.slide_basic .slick-dots{ bottom: 5px !important;}
}

/* ---------------------------------------------------
Global Header
------------------------------------------------------ */
#g_header{ position: absolute; top: 0; left: 0; width: 100%; z-index: 30;}
#g_header::before{ content: ""; width: 450px; height: 890px; position: absolute; top: 0; left: 0; z-index: 1; background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0));}
#home #g_header::before{ height: 100vh;}
#g_header .hd_logo{ padding: 40px 0 0 60px; position: relative; z-index: 2;}
#g_header .hd_logo .hd_subtit{ font-size: 14px; line-height: 1; padding: 0 0 25px; position: relative; z-index: 2;}
#g_header .hd_logo .logo{ width: 112px; height: auto; padding: 0 0 0 5px;}
#g_header .hd_nav{ padding: 90px 0 0 60px; font-size: 15px; line-height: 1.5; position: relative; z-index: 2;}
#g_header .hd_nav li{ margin: 5px 0;}
#g_header .hd_nav li a { padding: 5px; position: relative; display: inline-block; text-decoration: none; }
#g_header .hd_nav li a::after { position: absolute; bottom: calc( 50% - 1px ); left: -60px; content: ''; width: 60px; height: 1px; background: #fff; transform: scale(0, 1); transform-origin: left top; transition: transform .3s; }
#g_header .hd_nav li a:hover::after { transform: scale(1, 1);}
#g_header .hd_insta{ margin: 30px 0 0 65px; display: block; font-size: 14px; line-height: 1; position: relative; z-index: 2;}
#g_header .hd_insta a{ background: url("/common/img/ico_insta_01.svg") no-repeat left center; background-size: 15px; padding: 5px 0 5px 25px; color: #6f6e6d;}
#g_header .hd_insta a:hover{ background: url("/common/img/ico_insta_02.svg") no-repeat left center; background-size: 15px; color: #fff; text-decoration: none;}
#g_header .hd_tel{ position: absolute; top: 23px; right: 216px; z-index: 2; font-size: 20px; line-height: 1; padding: 10px 0 10px 20px; background: url("/common/img/ico_tel_01.svg") no-repeat left center; background-size: 15px;}
#g_header .hd_lang{ position: absolute; top: 70px; right: 20px; z-index: 4; font-size: 15px; display: flex; justify-content: flex-end;}
#g_header .hd_lang::after{ content: ""; display: block; width: 1px; height: 14px; background: #fff; position: absolute; top: 7px; left: 52%;}
#g_header .hd_lang li{ margin: 0 15px;}
#g_header .hd_lang li:last-child{ margin: 0 0 0 15px;}
#g_header .hd_lang li a{ color: #6f6e6d;}
#g_header .hd_lang li a:hover{ color: #fff;}

@media screen and (max-width: 600px) {
#g_header{ height: 100vh;}
#g_header::before{ display: none;}
#g_header .hd_logo{ padding: 12px 0 0 10px;}
#g_header .hd_logo .hd_subtit{ font-size: 10px; padding: 0 0 15px; line-height: 1.5;}
#g_header .hd_logo .logo{ width: 69px; padding: 0 0 0 30px;}
#g_header .hd_nav{ display: none;}
#g_header .hd_insta{ margin: 0; position: absolute; bottom: 30px; left: 10px;}
#g_header .hd_tel{ top: 12px; right: 158px; font-size: 8px; padding: 0; background: url("/common/img/ico_tel_01.svg") no-repeat center top; background-size: 15px; width: 30px; height: 40px;}
#g_header .hd_tel a{ padding: 25px 0 0 0; text-align: center; display: block;}
#g_header .hd_lang{ top: 55px; right: 5px; font-size: 12px;}
#g_header .hd_lang::after{ height: 10px; top: 7px; left: 52%;}
#g_header .hd_lang li{ margin: 0 10px;}
#g_header .hd_lang li:last-child{ margin: 0 0 0 10px;}
}

/* ---------------------------------------------------
Global Navigation
------------------------------------------------------ */
#gnav { position: fixed; top: 0; right: 200px; width: 100%; min-width: 1040px; height: 80px; transition: opacity 0.8s; opacity: 0; z-index: -1;}
#gnav::after{ content: ""; width: 100%; height: 100px; position: absolute; top: 0; left: 200px; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 80%, rgba(0, 0, 0, 0)); pointer-events: none; z-index: -1;}
#gnav.up.active { opacity: 1; visibility: visible; z-index: 40;}
.gn_nav{ display: flex; justify-content: flex-end;}
.gn_nav li{ margin: 28px 30px 0 0; font-size: 15px; line-height: 1;}
.gn_nav li a{ padding: 10px 0;}

@media screen and (max-width: 600px) {
#gnav,
#gnav.up.active{ display: none !important; visibility: hidden;}
}

/* ---------------------------------------------------
Main Title
------------------------------------------------------ */
.main_tit{ color: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; width: 100%; height: 890px; z-index: 1;}
.main_tit .ja,
.main_tit .en{ width: 100%; line-height: 1.4; text-align: center; position: relative; z-index: 3;}
.main_tit .ja{ font-size: 18px;}
.main_tit .en{ font-size: 70px;}
.main_tit .img{ width: 100%; height: 890px; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 2;}

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

/* ---------------------------------------------------
	BreadCrumb
------------------------------------------------------ */
/*.breadcrumb{ display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; list-style-type: none; padding: 20px 50px; font-size: 14px; line-height: 1.2;}
.breadcrumb li:nth-child(n+2) a{ padding: 0 0 0 40px; position: relative;}
.breadcrumb li:nth-child(n+2) a::before{ content: ""; display: block; width: 15px; height: 1px; background: #fff; position: absolute; top: 0; bottom: 0; left: 13px; margin: auto 0;}

@media screen and (max-width: 600px) {
.breadcrumb{ padding: 20px 5vw; font-size: 12px;}
}*/

/* ---------------------------------------------------
Global Footer
------------------------------------------------------ */
#g_footer{ padding: 0 0 100px;}

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

/* Return to Pagetop */
#g_footer #pagetop{ position: fixed; bottom: 50px; right: 5px; z-index: 3; width: 1em; font-size: 14px; line-height: 1; transition: bottom 0.8s;}
#g_footer #pagetop:hover{ bottom: 55px;}
#g_footer #pagetop a { display: block; width: 100%; height: 150px;}
#g_footer #pagetop a:hover { text-decoration: none; }
#g_footer #pagetop a .pt_txt{ transform: rotate(90deg); width: 150px; height: 1em; display: block; transform-origin: left top; text-align: right;}
#g_footer #pagetop a .pt_line { display: block; height: 100%; margin: 0; position: absolute; left: -1.5em; top: 0; text-indent: 100%; white-space: nowrap; overflow: hidden;}
#g_footer #pagetop a .pt_line::after,
#g_footer #pagetop a .pt_line::before{ content: ''; display: block; width: 1px; height: 150px; position: absolute; top: 0; left: 0;}
#g_footer #pagetop a .pt_line::after { background: #fff; animation: 2s line cubic-bezier(.645, .045, .355, 1) infinite;}
#g_footer #pagetop a .pt_line::before{ background: #6f6e6d;}

@media screen and (max-width: 600px) {
#g_footer #pagetop{ font-size: 10px;}
#g_footer #pagetop a { height: 120px;}
#g_footer #pagetop a .pt_txt{ width: 120px;}
#g_footer #pagetop a .pt_line::after,
#g_footer #pagetop a .pt_line::before{ height: 120px;}
}

@keyframes line {
0% { transform: translateY(200%); }
100% { transform: translateY(-100%) }
}

/* Marquee */
#g_footer .marquee { overflow: hidden; position: relative; z-index: 1;}
#g_footer .marquee ul { animation: marquee 120s linear infinite; display: flex; margin: 0; padding: 0; width: max-content; }
#g_footer .marquee ul li { list-style: none; width: 736px; }
#g_footer .marquee img { display: block; width: 100%; }

@media only screen and (max-width: 600px) {
#g_footer .marquee ul li { width: 368px; }
}

@keyframes marquee {
from { transform: translateX(0%); }
to { transform: translateX(-50%); }
}

/* Footer Inner */
#g_footer .ft_inner{ display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 2;}
#g_footer .ft_inner .ft_box_01{ width: 400px;}
#g_footer .ft_inner .ft_box_02{ width: 700px; padding: 70px 0 0; display: flex; flex-wrap: wrap; justify-content: flex-end;}
#g_footer .ft_logo{ position: relative; top: -50px; left: 100px; width: 182px; height: auto;}
#g_footer .ft_logo img{ width: 100%; height: auto;}
#g_footer .ft_addr{ font-size: 15px;}
#g_footer .ft_copyright{ font-size: 13px; color: #6f6e6d;}
#g_footer .ft_nav{ display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; padding: 0 0 10px; width: 700px;}
#g_footer .ft_nav li{ width: 25%; margin: 0 0 20px;}
#g_footer .ft_nav li a{ text-align: left; font-size: 15px; line-height: 1.4; padding: 5px 0 5px 10px; position: relative;}
#g_footer .ft_nav li a::before{ content: ""; display: block; width: 5px; height: 1px; background: #fff; position: absolute; top: 15px; left: 0;}
#g_footer .ft_rsrv{ width: 100%;}
#g_footer .ft_rsrv a{ background: #1f1d1d; display: flex; justify-content: center; align-items: center; width: 100%; padding: 40px 0; text-align: center; font-size: 26px; line-height: 1; transition: background 0.6s;}
#g_footer .ft_rsrv a:hover{ background: #3F3C3C; text-decoration: none;}
#g_footer .ft_tel{ margin: 60px 40px 0 0; font-size: 20px; line-height: 1; color: #6f6e6d;}
#g_footer .ft_tel .tel-link{ color: #6f6e6d; padding: 10px 0 10px 20px; background: url("/common/img/ico_tel_03.svg") no-repeat left center; background-size: 15px; display: block;}
#g_footer .ft_insta{ margin: 60px 40px 0 0; font-size: 15px; line-height: 1;}
#g_footer .ft_insta a{ background: url("/common/img/ico_insta_01.svg") no-repeat left center; background-size: 21px; padding: 12px 0 8px 28px; color: #6f6e6d; display: inline-block;}
#g_footer .ft_insta a:hover{ background: url("/common/img/ico_insta_02.svg") no-repeat left center; background-size: 21px; color: #fff; text-decoration: none;}
#g_footer .ft_outline{ margin: 60px 0 0 0;}
#g_footer .ft_outline a{ color: #6f6e6d; padding: 2px 0; display: inline-block;}
#g_footer .ft_outline a:hover{ color: #fff; text-decoration: none;}

@media only screen and (max-width: 600px) {
#g_footer .ft_inner{ flex-direction: column;}
#g_footer .ft_inner .ft_box_01{ width: 100%;}
#g_footer .ft_inner .ft_box_02{ width: 100%; padding: 20px 0 0; justify-content: flex-start;}
#g_footer .ft_logo{ top: -40px; left: 0; right: 0; width: 95px; padding: 0 0 0 45px; margin: 0 auto;}
#g_footer .ft_addr{ font-size: 14px; text-align: center; margin: -20px 0 0;}
#g_footer .ft_copyright{ font-size: 11px; text-align: center; display: block;}
#g_footer .ft_nav{ justify-content: flex-start; align-items: center; padding: 0 0 10px; flex-direction: column; margin: 0 auto; width: auto;}
#g_footer .ft_nav li{ width: 100%; margin: 0 0 15px;}
#g_footer .ft_nav li a{ font-size: 15px; line-height: 1.4; padding: 5px 0 5px 10px;}
#g_footer .ft_rsrv{ margin: 0 0 10px;}
#g_footer .ft_rsrv a{ padding: 20px 0; font-size: 18px;}
#g_footer .ft_rsrv a span{ font-size: 18px; /*padding: 0 0 0 1em;*/}
#g_footer .ft_tel{ margin: 10px 20px 0 0; font-size: 20px;}
#g_footer .ft_tel .tel-link{ padding: 10px 0 10px 20px;}
#g_footer .ft_tel .tel-link:hover{ color: #fff; text-decoration: none; background: url("/common/img/ico_tel_01.svg") no-repeat left center; background-size: 15px;}
#g_footer .ft_insta{ margin: 10px 20px 0 0; display: block; font-size: 15px; line-height: 1;}
#g_footer .ft_insta a{ padding: 12px 0 8px 28px; color: #6f6e6d;}
#g_footer .ft_outline{ margin: 10px 0 0 0;}
#g_footer .ft_outline a{ padding: 2px 0;}
}

/* ------------------------------
Fixed Button
------------------------------ */
.fixedRsrv{ display: block; position: fixed; top: 20px; right: 20px; z-index: 50; width: 180px; height: 46px; color: #fff; font-size: 15px; line-height: 46px; text-align: center;}
.fixedRsrv a{ display: block; width: 100%; height: 100%; background: #57492b; transition: background 0.6s ease;}
.fixedRsrv a:hover{ background: #6a5e47; text-decoration: none;}

#fixedMenu{ display: none;}

@media only screen and (max-width: 600px) {
.fixedRsrv{ top: 8px; right: 38px; width: 110px; height: 35px; font-size: 13px; line-height: 35px;}
/*.fixedRsrv a{ background: #836b39;}*/

#fixedMenu{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 40px; height: 40px; position: fixed; right: 0; top: 5px; z-index: 61; text-align: center; }
#fixedMenu span.bar{ display: block; width: 20px; height: 1px; background: #fff; margin: 3px 0; text-indent: 100%; white-space: nowrap; overflow: hidden; transition: all 0.5s;}
#fixedMenu span.bar:last-of-type{ width: 10px; margin: 3px 10px 3px 0;}
#fixedMenu.on .bar{ background: #000; position: absolute; left: 10px; transform-origin: center;}
#fixedMenu.on .bar:nth-of-type(1){ transform: rotate(45deg); top: 16px;}
#fixedMenu.on .bar:nth-of-type(2){ transform: rotate(-45deg); top: 16px;}
#fixedMenu.on .bar:nth-of-type(3){ opacity: 0;}
}

/* ------------------------------
	Overlay MENU
	SPでのみ有効。格納され、トグルボタンによりオーバーレイ表示
------------------------------ */
#ovl_menu{ display: none;}

@media only screen and (max-width: 600px) {
#ovl_menu{ display: flex; justify-content: center; align-items: center; flex-direction: column; opacity: 0; transition: opacity 0.5s; position: fixed; top: 0; bottom: 0; right: 0; width: 100%; box-sizing: border-box; padding: 0 0 60px; z-index: -1; background: rgba(0,0,0,0.8); color: #000; overflow: hidden;}
#ovl_menu.on{ opacity: 1; right: 0; z-index: 60;}
#ovl_menu .wrap{ padding: 70px 0; position: absolute; top: 0; right: -90%; background: #fff; width: 90%; height: 100%; margin: 0; transition: all 0.5s; overflow: auto; visibility: visible;}
#ovl_menu.on .wrap{ right: 0;}
#ovl_menu ul{ width: 200px; margin: 0 auto;}
#ovl_menu ul li{ margin: 0 0 5px 0;}
#ovl_menu ul li a{ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; font-size: 15px; line-height: 1.4; padding: 10px 0 10px 10px; color: #000; position: relative;}
#ovl_menu ul li a::before{ content: ""; display: block; width: 5px; height: 1px; background: #000; position: absolute; top: 20px; left: 0;}
#ovl_menu .ovl_rsrv{ width: 200px; height: 40px; margin: 20px auto 0; }
#ovl_menu .ovl_rsrv a{ width: 100%; height: 100%; background: #836b39; color: #fff; display: block; font-size: 18px; line-height: 40px; text-align: center; transition: background 0.5s;}
#ovl_menu .ovl_rsrv a:hover{ text-decoration: none; background: #6a5e47; }
#ovl_menu .ovl_tel{ display: block; width: 200px; margin: 20px auto 0;}
#ovl_menu .ovl_tel a{ padding: 5px 0 5px 20px; color: #000; font-size: 18px; line-height: 1; background: url("/common/img/ico_tel_02.svg") no-repeat center left; background-size: 12px; display: inline-block;}
}