@charset "utf-8";
/* ===================================================
	Base CSS
====================================================== */
body { min-width: 1450px; 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%; position: relative; font-feature-settings: "palt"; letter-spacing: 0.08em;}
.v_rl{ writing-mode: vertical-rl; font-feature-settings: "palt" 0;}

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

div { box-sizing: border-box;}

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

.gothic{ font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;}
.fixed { width: 100%; min-width: 1450px; 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: 100%;}
body,
input,
select,
textarea { font-size: 16px;}

body { min-width: 0;}
.br_sp,
span.view_sp { display: inline;}
.view_sp { display: block;}
.br_pc,
.view_pc { display: none !important;}
}

/* ---------------------------------------------------
	Common Parts
------------------------------------------------------ */
/* hoverで下線がアニメーション aに適用する a内にspanが必要 */
.ho_line_01:hover{ text-decoration: none;}
.ho_line_01 span { position: relative; text-decoration: none; color: inherit; }
.ho_line_01 span::after { content: ""; display: block; width: 100%; height: 1px; background: #000; position: absolute; bottom: -5px; left: 0; transform-origin: left center; transform: scaleX(0); transition: transform 0.5s; }
.ho_line_01:hover span{ opacity: 1; text-decoration: none;}
.ho_line_01:hover span::after { transform: scaleX(1); }

/* hoverで黒の下線が白の下線にアニメーション aに適用する a内にspanが必要 */
.ho_line_02:hover{ text-decoration: none;}
.ho_line_02 span { position: relative; text-decoration: none; color: inherit; }
.ho_line_02 span::before,
.ho_line_02 span::after { content: ""; display: block; width: 100%; height: 1px; position: absolute; bottom: -5px; left: 0; transform-origin: left center; transform: scaleX(0); transition: transform 0.5s; }
.ho_line_02 span::before { transform: scaleX(1); background: rgba(0,0,0,1);}
.ho_line_02 span::after { background: rgba(255,255,255,1); }
.ho_line_02:hover span{ opacity: 1; text-decoration: none;}
.ho_line_02:hover span::after { transform: scaleX(1); }

/* cmn_btn_01 */
.cmn_btn_01 a{ background: #3e3e3e; border-radius: 0; position: relative; display: flex; justify-content: center; align-items: center; max-width: 220px; padding: 10px 25px; color: #fff; transition: 0.3s ease-in-out; font-weight: 500; }
.cmn_btn_01 a::before { content: ''; position: absolute; bottom: -7px; right: -7px; width: 100%; height: 2px; background-color: #3e3e3e; transition: 0.2s ease 0s; }
.cmn_btn_01 a::after { content: ''; position: absolute; top: 7px; right: -7px; width: 2px; height: 100%; background-color: #3e3e3e; transition: 0.2s ease 0.2s; }
.cmn_btn_01 a:hover::before { width: 0%; }
.cmn_btn_01 a:hover::after { height: 0%; }
.cmn_btn_01 a:hover { text-decoration: none; background-color: #3e3e3e; }

/* ---------------------------------------------------
	Base Layout
------------------------------------------------------ */
/* コンテンツ幅 */
.inner_md { width: 90%; max-width: 1200px; margin: 0 auto;}
.inner_ld { width: 90%; max-width: 1450px; margin: 0 auto;}

/* ---------------------------------------------------
Slick.js ドットボタン共通 Overwrite
------------------------------------------------------ */
.slick-dots li{ margin: 0 3px!important;}
.slick-dots li button{}
.slick-dots li button:before{ color:#a2a5a8!important; font-size: 10px!important; opacity: 1!important;}
.slick-dots li.slick-active button:before{ color:#fff!important; font-size: 10px!important; opacity: 1!important;}

/* ---------------------------------------------------
Slick.js 前後矢印ボタン共通 Overwrite
------------------------------------------------------ */
/*.slick-arrow{ width: 70px!important; height: 70px!important;}
.slick-prev{ left: -80px!important; }
.slick-next{ right: -80px!important;}
.slick-prev:before,
.slick-next:before { content: ""!important; width: 70px!important; height: 70px!important; border-radius: 0!important; display: block; border-bottom: solid 1px #fff; border-right: solid 1px #fff;}
.slick-prev:before{}
.slick-next:before{}*/

/* ---------------------------------------------------
	Global Header
------------------------------------------------------ */
#g_header { width: 100%; min-width: 1450px; height: 90px; background: url("../img/hd_bg_01.webp") repeat-x; position: absolute; top: 0; left: 0; z-index: 100; display: flex; justify-content: flex-end; animation: fix_opacity ease-in-out 1s; transition: top .7s; }
#g_header.fixed { position: fixed; animation: fix_nav 1s both; }
#g_header.close_nav { animation: close_nav .7s both; }
#g_header .hd_logo_01{ position: absolute; top: 0; left: 5.5%; display: block; align-items: center; width: 130px; background: #fff;}
#g_header .hd_logo_02{ display: none;}
#g_header.fixed .hd_logo_01{ display: none;}
#g_header.fixed .hd_logo_02{ position: absolute; top: 10px; left: 5.5%; display: block; align-items: center; width: 215px;}
#g_header.fixed .hd_logo_01 img,
#g_header.fixed .hd_logo_02 img{ width: 100%; height: auto;}
#g_header .hd_nav{ display: flex; align-items: center;}
#g_header .hd_nav li{ margin: 0 15px;}
#g_header .hd_nav li a{ color: #fff; font-size: 17px; line-height: 1; padding: 15px 0; position: relative; display: block;}
#g_header .hd_nav li a:hover{ text-decoration: none;}
#g_header .hd_nav li a.ho_line_01 span::after { background: #fff; }
#g_header .hd_lang { border: solid 1px #b59e94; margin: 14px 15px 12px; transition: background 0.5s;}
#g_header .hd_lang:hover{ background: rgba(255,255,255,0.1);}
#g_header .hd_lang a{ display: flex; align-items: center; color: #b59e94; font-size: 17px; line-height: 1; padding: 0 15px 0 35px; position: relative; height: 100%; width: 100%; box-sizing: border-box;}
#g_header .hd_lang a::before{ content: ""; position: absolute; top: 0; left: 15px; bottom: 0; margin: auto 0; width: 0; height: 0; border-style: solid; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 9px solid #b59e94; border-right: 0;}
#g_header .hd_lang a:hover{ text-decoration: none;}
#g_header .hd_rsrv{ background: #936451; margin: 14px 0 12px; transition: background 0.5s;}
#g_header .hd_rsrv:hover{ background: #A97763;}
#g_header .hd_rsrv a{ display: flex; align-items: center; color: #fff; font-size: 17px; line-height: 1; padding: 0 25px 0 50px; position: relative; height: 100%; width: 100%; background: url("../img/ico_cal_01.svg") no-repeat center left 25px; background-size: 15px; box-sizing: border-box;}
#g_header .hd_rsrv a:hover{ text-decoration: none;}
#g_header .hd_menu { box-sizing: border-box; cursor: pointer; z-index: 1000; height: 90px; width: 85px; display: block; margin: 0; position: relative;}
#g_header .hd_menu a{ display: block; width: 100%; height: 100%;}
#g_header .hd_menu a > .bar{ transition: all 0.3s; box-sizing: border-box; position: absolute; height: 1px; width: 38px; right: 22px; text-indent: 100%; white-space: nowrap; overflow: hidden; z-index: 2; transform-origin: center center;}
#g_header .hd_menu a > .bar::after{ content: ""; height: 1px; width: 38px; display: block; background: #fff; position: absolute; top: 0; left: 0;}
#g_header .hd_menu a > .bar:nth-of-type(1) { top: 32px;}
#g_header .hd_menu a > .bar:nth-of-type(2) { top: 46px;}
#g_header .hd_menu a > .bar:nth-of-type(3) { top: 60px;}

@media screen and (max-width: 600px) {
#g_header { width: 100%; min-width: 100%; height: 60px; background: none; }
#g_header.fixed { display: none; }
#g_header .hd_logo_01{ position: absolute; top: 0; left: 5%; display: block; width: 75px; background: #fff;}
#g_header .hd_logo_02{ display: none;}
#g_header.fixed .hd_logo_01{ display: block;}
#g_header.fixed .hd_logo_02{ display: none;}
#g_header .hd_lang{ border: solid 1px #fff; margin: 15px 15px 0 0; }
#g_header .hd_lang a{ display: flex; align-items: center; color: #fff; font-size: 14px; line-height: 1; padding: 0 15px 0 35px; position: relative; height: 100%; width: 100%;}
#g_header .hd_lang a::before{ border-left: 9px solid #fff;}
#g_header .hd_nav,
#g_header .hd_rsrv,
#g_header .hd_menu{ display: none;}
}

@keyframes fix_opacity { 
0% { opacity: 0; }
25% { opacity: 1; }
}
@keyframes fix_nav {
0% { transform: translateY(-100%); }
100% { transform: translateY(0); }
}
@keyframes close_nav {
0% { transform: translateY(0); }
100% { transform: translateY(-100%); }
}

/* ---------------------------------------------------
	Global Navigation
------------------------------------------------------ */
/*.pos_fix { overflow: hidden;}*/
#menuOuter { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background: rgba(0,0,0,0.5); overflow: auto; pointer-events: none; transition: 0.75s; opacity: 0; padding: 0; margin: 0 !important;}
#menuOuter.active { pointer-events: auto; opacity: 1; margin: 0 !important;}
#menuInner { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 0; cursor: pointer;}
#gnav { width: 530px; /*min-width: 100%;*/ height: 100%; position: absolute; top: 0; right: 0; z-index: 20; transition: all 0.5s; display: none; clear: both; overflow-y: auto; background: #fff; color: #000;}
#menuOuter.active #gnav{ display: block;}
#gnav .close_menu { display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer;}
#gnav .close_menu::before,
#gnav .close_menu::after { content: ''; width: 40px; height: 1px; background: #000;}
#gnav .close_menu::before { transform: rotate(-45deg);}
#gnav .close_menu::after { margin: -1px 0 0; transform: rotate(45deg);}
#gnav #close_top { width: 85px; height: 90px; padding: 0; position: absolute; top: 0; right: 0; font-size: 0;}
#gnav .gn_logo{ display: block; padding: 50px 0; width: 127px; margin: 0 auto;}
#gnav .gn_logo img{ width: 100%; height: auto;}
#gnav .gn_nav{ display: block; width: 70%; margin: 0 auto 40px; column-count: 2;}
#gnav .gn_nav li{ margin: 0 0 20px; position: relative;}
#gnav .gn_nav li::before{ content: ""; display: block; width: 10px; height: 1px; background: #000; position: absolute; top: 50%; left: 0;}
#gnav .gn_nav li.none::before{ display: none;}
#gnav .gn_nav li a{ font-size: 17px; line-height: 1.1; padding: 10px 0 10px 25px; display: block; color: #000;}
#gnav .gn_nav li a:hover{ text-decoration: none;}
#gnav .gn_nav li a.ho_line_01 span::after { background: #000; }
#gnav .gn_btn_01{ width: 80%; height: 70px; margin: 0 auto; background: #936451; transition: background 0.5s;}
#gnav .gn_btn_01:hover{ background: #A97763;}
#gnav .gn_btn_01 a{ display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; line-height: 1; padding: 0 25px 0 50px; position: relative; height: 100%; width: 100%; background: url("../img/ico_cal_01.svg") no-repeat; background-repeat: no-repeat; background-position: calc( 50% - 3.5em ) center; background-size: 18px; box-sizing: border-box;}
#gnav .gn_btn_01 a:hover{ text-decoration: none;}
#gnav .gn_btn_02{ padding: 30px 0; text-align: center;}
#gnav .gn_btn_02 a{ color: #000;}
#gnav .gn_lang{ display: block; text-align: center;}
#gnav .gn_lang a{ display: inline-block; font-size: 18px; line-height: 1; padding: 15px 20px; border: solid 1px #3e3e3e; transition: background 0.5s; color: #000;}
#gnav .gn_lang a:hover{ background: rgba(0,0,0,0.1); text-decoration: none;}

@media screen and (max-width: 600px) {
.pos_fix { overflow: hidden;}
#gnav { width: 100%; min-height: 100%; padding: 0 0 70px; box-sizing: border-box;}
#gnav .close_menu::before,
#gnav .close_menu::after { background: #fff;}
#gnav #close_top { width: 20%; height: 60px; padding: 0; position: fixed; top: auto; bottom: 0; right: 0; background: #3a3a3b; z-index: 3}
#gnav .gn_logo{ padding: 30px 0 30px; width: 100px;}
#gnav .gn_nav{ width: 80%; margin: 0 auto 40px; z-index: 1;}
#gnav .gn_nav li{ margin: 0 0 15px;}
#gnav .gn_nav li a{ font-size: 14px;}
#gnav .gn_btn_01{ width: 80%; height: 50px;}
#gnav .gn_btn_01 a{ font-size: 18px;}
#gnav .gn_btn_02{ padding: 20px 0;}
#gnav .gn_btn_02 a{ font-size: 15px;}
#gnav .gn_lang a{ font-size: 16px; padding: 15px 20px;}
}

/* ---------------------------------------------------
Main Title （下層ページのメインタイトル部分）
------------------------------------------------------ */
.main_title{ position: relative;}
.main_title .img{ width: 100%; position: relative; z-index: 1;}
.main_title .img img{ width: 100%; height: auto;}
.main_title .img img.ofi{ height: 750px;}
.main_title .tit{ position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 32px; line-height: 1.5; color: #fff; text-shadow: 0px 0px 4px rgba(0,0,0,1); text-align: center;}

@media screen and (max-width: 600px) {
.main_title .img img{ width: 100%;}
.main_title .img img.ofi{ height: 375px;}
.main_title .tit{ font-size: 20px; line-height: 1.5;}
}

/* ---------------------------------------------------
	Breadcrumb
------------------------------------------------------ */
#breadcrumb { padding: 20px 0; width: 90%; max-width: 1200px; margin: 0 auto; font-size: 14px; line-height: 1.6; text-align: left; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; color: #fff; box-sizing: border-box;}
#breadcrumb li { display: block;}
#breadcrumb li:before { content: '>'; margin: 0 15px;}
#breadcrumb li:first-child:before { display: none;}
#breadcrumb a{ color: #fff;}

@media screen and (max-width: 600px) {
#breadcrumb { padding: 10px 0; font-size: 11px;}
}

/* ---------------------------------------------------
	Global Footer
------------------------------------------------------ */
#g_footer { display: block; color: #fff; font-size: 16px; line-height: 1.6; background-color: #000; background-image: url("../img/ft_bg_01.webp"); background-repeat: no-repeat; background-position: calc( 50% + 415px ) bottom; background-size: auto 100%; border-top: solid 2px #2f2f2f;}
#g_footer a,
#g_footer a:hover { color: #fff;}

#g_footer .ft_pagetop { bottom: 15px; right: 15px; position: fixed; z-index: 9999;}
#g_footer .ft_pagetop a { display: block; width: 50px; height: 0; padding: 50px 0 0; position: relative; background: #222; font-size: 0; overflow: hidden; transition: opacity 0.5s; }
#g_footer .ft_pagetop a::before { content: ''; width: 18px; height: 18px; position: absolute; top: 22px; left: 15px; border-top: 1px solid #fff; border-left: 1px solid #fff; transform: rotate(45deg); }
#g_footer .ft_pagetop a:hover { opacity: 0.65;}

#g_footer .ft_wrap{ display: flex; justify-content: flex-start; align-items: flex-start; padding: 50px 0 0;}
#g_footer .ft_logo{ width: 80px; margin: 0 35px 0 40px;}
#g_footer .ft_logo img{ width: 100%; height: auto;}
#g_footer .ft_box{ width: 300px; margin: 15px 120px 0 0;}
#g_footer .ft_box .ft_addr{ font-size: 15px; line-height: 2;}
#g_footer .ft_box .ft_rsrv{ width: 100%; height: 50px; margin: 10px 0 0; background: #936451; transition: background 0.5s;}
#g_footer .ft_box .ft_rsrv:hover{ background: #A97763;}
#g_footer .ft_box .ft_rsrv a{ display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; line-height: 1; padding: 0 25px 0 50px; position: relative; height: 100%; width: 100%; background: url("../img/ico_cal_01.svg") no-repeat; background-repeat: no-repeat; background-position: calc( 50% - 3.5em ) center; background-size: 18px; box-sizing: border-box;}
#g_footer .ft_box .ft_rsrv a:hover{ text-decoration: none;}
#g_footer .ft_nav{ column-count: 2; font-size: 16px; line-height: 2;}
#g_footer .ft_nav li{ margin: 0 120px 0 0;}
#g_footer .ft_nav li a{ color: #b2a985; padding: 0 0 0 20px; position: relative;}
#g_footer .ft_nav li a:hover{ color: #fff;}
#g_footer .ft_nav li a::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 0; margin: auto 0; display: block; width: 0; height: 0; border-style: solid; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid #936451; border-right: 0;}
#g_footer .ft_copyright{ display: block; width: 100%; text-align: center; font-size: 11px; color: #717171; padding: 30px 0 10px;}

@media screen and (max-width: 600px) {
#g_footer { display: block; color: #fff; font-size: 15px; line-height: 1.6; background-color: #000; background-image: url("../img/ft_bg_01.webp"); background-repeat: no-repeat; background-position: calc( 50% + 130px ) calc( 100% - 50px ); background-size: 178px;}

#g_footer .ft_pagetop { right: 10px; bottom: 70px;}
#g_footer .ft_pagetop a{ border: 1px solid #444;}

#g_footer .ft_wrap{ align-items: center; flex-direction: column; padding: 30px 0 0;}
#g_footer .ft_logo{ width: 70px; margin: 0 auto 30px;}
#g_footer .ft_box{ width: 100%; margin: 0;}
#g_footer .ft_box .ft_addr{ font-size: 15px; line-height: 2; text-align: center; padding: 0 0 30px;}
#g_footer .ft_box .ft_rsrv{ display: none;}
#g_footer .ft_nav{ column-count: 2; font-size: 16px; line-height: 2;}
#g_footer .ft_nav li{ margin: 0 20px 0 0;}
#g_footer .ft_copyright{ padding: 30px 0 70px;}
}

/* ---------------------------------------------------
	SmartPhone Fixed Navigation
------------------------------------------------------ */
#sp_fixed_nav{ display: none;}

@media screen and (max-width: 600px) {
#sp_fixed_nav{ display: flex; width: 100%; height: 60px; position: fixed; bottom: 0; left: 0; z-index: 19;}
#sp_fixed_nav > div{ height: 100%; width: 20%;}
#sp_fixed_nav > div.fx_rsrv{ width: 40%;}
#sp_fixed_nav > div a{ width: 100%; height: 100%; text-align: center; padding: 40px 0 0; font-size: 12px; line-height: 1; box-sizing: border-box; background: #3a3a3b; color: #fff; display: block; position: relative;}
#sp_fixed_nav > div a::before{ content: ""; background-repeat: no-repeat; background-position: 0 0; background-size: 20px; width: 20px; height: 20px; position: absolute; left: calc( 50% - 10px );}
#sp_fixed_nav > div.fx_rsrv a{ background-color: #936451;}
#sp_fixed_nav > div.fx_tel a,
#sp_fixed_nav > div.fx_access a{ border-right: solid 1px #999999;}
#sp_fixed_nav > div.fx_rsrv a::before{ top: 14px; background-image: url("../img/ico_cal_01.svg");}
#sp_fixed_nav > div.fx_tel a::before{ top: 16px; background-image: url("../img/ico_tel_01.svg"); background-size: 16px;}
#sp_fixed_nav > div.fx_access a::before{ top: 16px; background-image: url("../img/ico_pin_01.svg"); background-size: 16px;}
#sp_fixed_nav > div.fx_menu a{ text-indent: 100%; white-space: nowrap; overflow: hidden;}
#sp_fixed_nav > div.fx_menu a::before{ top: 18px; background-image: url("../img/ico_menu_01.svg"); background-size: 38px; width: 38px; height: 21px; position: absolute; left: calc( 50% - 19px );}
}