@charset "utf-8";
/* ===================================================
	Base CSS
====================================================== */
/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/poppins-v24-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
	--color01: #448d99;
	--color01_hover: #377e89;
}

body {
	min-width: 1200px; min-height: 100vh; background: #fff; color: #000;
	font-size: 20px; font-weight: normal; line-height: 1.6;
	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";
}

.v_rl{ writing-mode: vertical-rl; font-feature-settings: "palt" 0;}
.v_rl .num { writing-mode: horizontal-tb; font-feature-settings: "palt"; line-height: 1; }
.font_en { font-family: 'Poppins'; }

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

*, *::before, *::after { box-sizing: border-box; }

a { color: #000; text-decoration: none; transition: opacity .5s; }

@media screen and (hover: hover) {
	a:hover { color: #000; opacity: .7; }
}

#lineup-font-size-sampler { bottom: 0; left: 0;}
.fixed { width: 100%; min-width: 1100px; position: fixed; top:0; left: 0; z-index: 999;}
.pos_fix { overflow: hidden; position: relative; }

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

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

	body { min-width: 0;}
	.v_rl.pc { writing-mode: horizontal-tb; font-feature-settings: "palt";}
	.view_sp { display: block;}
	.view_pc { display: none !important;}
}


/* ---------------------------------------------------
	Base Layout
------------------------------------------------------ */
.inner_lg { width: min(1600px, 100%); margin: 0 auto;}
.inner_md { width: min(1200px, 90%); margin: 0 auto;}
.inner_sm { width: min(1000px, 86%); margin: 0 auto;}

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

/* ---------------------------------------------------
	Header
------------------------------------------------------ */
#g_header { padding: 25px 0; position: absolute; width: 100%; z-index: 99; }
#g_header .hd_inner{ display: flex; justify-content: space-between; padding: 0 30px;}
#g_header .hd_tit .hd_logo { display: block; }

#g_header #open_menu { position: fixed; top: 0; right: 0; z-index: 9999; }

.menu_btn { cursor: pointer; width: 100px; height: 100px; display: flex; flex-direction: column; justify-content: center; background: #fff; color: var(--color01); border-radius: 0 0 0 30px; transition: opacity .5s; }
.menu_btn .icon { width: 35px; height: 35px; margin: 0 auto; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: gap .5s;}
.menu_btn .icon span,
.menu_btn .icon::before,
.menu_btn .icon::after { content: ''; display: block;; width: 35px; height: 4px; background: var(--color01); transition: transform .5s, opacity .5s; }
.menu_btn .txt { font-weight: 600; font-size: 16px; position: relative; text-align: center; margin: 5px 0; }
.menu_btn .txt .open { opacity: 1; transition: opacity .5s; line-height: 1; display: block; }
.menu_btn .txt .close { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; line-height: 1; }

.fixed_rsv { width: 60px; height: 240px; align-content: center; text-align: center; position: fixed; bottom: 150px; right: 0; background: var(--color01); color: #fff; font-weight: 600; font-size: 18px; letter-spacing: 0.06em; border-radius: 15px 0 0 15px; transition: background .5s; }

#g_header:has(#gnav_wrap.active) .menu_btn .txt .open { opacity: 0; }
#g_header:has(#gnav_wrap.active) .menu_btn .txt .close { opacity: 1; }
#g_header:has(#gnav_wrap.active) .menu_btn .icon { gap: 0; }
#g_header:has(#gnav_wrap.active) .menu_btn .icon span { display: none; }
#g_header:has(#gnav_wrap.active) .menu_btn .icon::before { transform: translateY(2px) rotate(45deg);}
#g_header:has(#gnav_wrap.active) .menu_btn .icon::after { transform: translateY(-2px) rotate(-45deg);}

@media screen and (hover: hover) {
	.fixed_rsv:hover { color: #fff; background: var(--color01_hover); opacity: 1; }
	.menu_btn:hover { color: var(--color01); opacity: .8;  }
}
@media screen and (min-width: 601px) {
}
@media screen and (max-width: 600px) {
	#g_header { padding: 15px 0; }
	#g_header .hd_inner { display: block; padding: 0 4%; }
	#g_header .hd_tit .hd_logo { width: min(100px, 22vw); }

	.menu_btn { width: 60px; height: 55px; border-radius: 0 0 0 15px; }
	.menu_btn .icon { width: 20px; height: 25px; gap: 4px; }
	.menu_btn .icon span,
	.menu_btn .icon::before,
	.menu_btn .icon::after { width: 23px; height: 2px; }
	.menu_btn .txt { font-size: 11px; margin: 0 0 5px; }

	#g_header:has(#gnav_wrap.active) .menu_btn .icon::before { transform: translateY(1px) rotate(45deg);}
	#g_header:has(#gnav_wrap.active) .menu_btn .icon::after { transform: translateY(-1px) rotate(-45deg);}

	.fixed_rsv { width: 100%; height: calc(55px + env(safe-area-inset-bottom)); bottom: 0; font-size: 16px; border-radius: 10px 10px 0 0; padding-bottom: env(safe-area-inset-bottom); }

}


/* ---------------------------------------------------
	G-nav
------------------------------------------------------ */
#gnav_wrap {
	width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999;
	background: rgba(0, 0, 0, 0.5); pointer-events: none; transition: 0.75s; opacity: 0;
}
#gnav_wrap.active {
	pointer-events: auto; opacity: 1;
}
#gnav_wrap.active #gnav { transform: translateX(0%);}
#gnav { width: min(500px, 100%); height: 100vh; overflow: scroll; padding: 100px min(65px, 13%); margin: 0 0 0 auto; position: relative; z-index: 15; background: none; background: #fff; font-weight: bold; transition: transform .8s; transform: translateX(100%); }

#gnav .gnav_logo { display: block; width: fit-content; text-align: center; margin: 10px auto 0; }
#gnav .gnav_rsv { margin: 45px 0 0; display: block; height: 70px; align-content: center; padding: 10px 20px; text-align: center; background: var(--color01); color: #fff; font-size: 16px; letter-spacing: 0.06em; transition: background .5s; }
#gnav .gnav_nav { margin: 20px 0 40px; }
#gnav .gnav_nav li { border-bottom: 2px solid #d6d6d6; }
#gnav .gnav_nav li a { display: flex; align-items: center; gap: 15px; font-size: 14px; padding: 30px 5px; line-height: 1; letter-spacing: 0.06em; }
#gnav .gnav_nav li a .en { font-weight: 600; font-size: 26px; letter-spacing: 0.04em; }
#gnav .gnav_link { line-height: 1; color: #8d8d8d; font-size: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px;}
#gnav .gnav_link + .gnav_link { margin-top: 20px; }
#gnav .tel::before { content: ''; width: 14px; height: 19px; background: url(../img/icon_tel.svg) no-repeat center/contain; }
#gnav .tel .tel-link { color: #8d8d8d; }
#gnav .tel .tel_txt { font-size: 14px;}
#gnav .mail { width: fit-content;}
#gnav .mail::before { content: ''; width: 18px; height: 13px; background: url(../img/icon_mail_gr.svg) no-repeat center/contain; }

@media screen and (hover: hover) {
	#gnav .gnav_rsv:hover { color: #fff; background: var(--color01_hover); opacity: 1; }
}
@media screen and (min-width: 601px) {
}
@media screen and (max-width: 600px) {
	#gnav { width: 100%; padding: 50px 8% calc(100px + env(safe-area-inset-bottom)); }

	#gnav .gnav_logo { width: min(140px, 80%); }
	#gnav .gnav_rsv { margin: 30px 0 0; height: 55px; padding: 10px 20px; font-size: 15px; }
	#gnav .gnav_nav { margin: 15px 0 30px; }
	#gnav .gnav_nav li { border-bottom: 1px solid #d6d6d6; }
	#gnav .gnav_nav li a { gap: 10px; font-size: 13px; padding: 15px 5px; }
	#gnav .gnav_nav li a .en { font-size: 20px; }
	#gnav .gnav_link + .gnav_link { margin-top: 15px; }
	#gnav .tel::before { width: 13px; height: 17px; }
	#gnav .tel .tel_txt { font-size: 13px; }
	#gnav .mail::before { width: 17px; height: 12px; }
}


/* ---------------------------------------------------
	Main img
------------------------------------------------------ */
#main_img { width: 100%; height: 100vh; overflow: hidden; position: relative; }
#main_img .main_visual { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; }
#main_img .slick { font-size: 0; line-height: 0; }
#main_img .slick img { height: 100vh; }
#main_img .main_visual::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); z-index: 5; }
#main_img .main_tit { font-size: 45px; color: #fff; font-weight: bold; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9; line-height: 1.3; letter-spacing: 0.05em; }
#main_img .main_tit .v_rl .num { line-height: 1.05; }
@media screen and (min-width: 601px) {
}
@media screen and (max-width: 600px) {
	#main_img { height: 100svh; }
	#main_img .movie { font-size: 0; line-height: 0; overflow: hidden; position: relative; padding-bottom: 100svh; }
	#main_img .movie video { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; object-fit: cover; }
	#main_img .main_tit { font-size: min(30px, 8vw); line-height: 1.5; }
}


/* ---------------------------------------------------
	Contents
------------------------------------------------------ */
.cmn_tit { text-align: center; }
.cmn_tit .en_tit { font-size: 60px; font-weight: 600; line-height: 1; letter-spacing: 0.04em; }
.cmn_tit .ja_tit { font-size: 20px; margin-top: 10px; font-weight: bold; letter-spacing: 0.06em; }

@media screen and (hover: hover) {
}
@media screen and (min-width: 601px) {
}
@media screen and (max-width: 600px) {
	.cmn_tit { }
	.cmn_tit .en_tit { font-size: 35px;  }
	.cmn_tit .ja_tit { font-size: 14px; margin-top: 5px; }
}


/* section */
#contents_wrap { background: #fff; position: relative; }

/* breadcrumb */
#contents_wrap #breadcrumb { margin: 5px auto 150px; font-size: 14px; display: flex; justify-content: flex-end; flex-wrap: wrap; align-items: center;}
#contents_wrap #breadcrumb li { display: flex; align-items: center; line-height: 1.3; margin: calc(1em * 0.3) 0;}
#contents_wrap #breadcrumb li a { border-bottom: 1px solid transparent; transition: border .5s;}
#contents_wrap #breadcrumb li:before { content: '>'; margin: 0 5px;}
#contents_wrap #breadcrumb li:first-child:before { display: none; }

@media screen and (hover: hover) {
	#contents_wrap #breadcrumb li a:hover { border-color: #000; opacity: 1; }
}
@media screen and (max-width: 600px) {
	#contents_wrap #breadcrumb { margin: 5px auto 50px;}
}

/* ---------------------------------------------------
	Footer
------------------------------------------------------ */
#footer { background: #565656; padding: 90px 0 70px; color: #fff; border-radius: 80px 80px 0 0; margin-top: -80px; position: relative; z-index: 1; }
#footer a { color: #fff;}

#footer .f_info { }
#footer .f_info .f_logo { display: block; width: fit-content; margin: 0 auto 45px; }
#footer .f_info address { text-align: center; font-weight: bold; line-height: 1.45; }
#footer .f_info address > span { display: block;}
#footer .f_info .f_sns { margin-top: 25px; display: flex; align-items: center; justify-content: center; gap: 20px; }
#footer .f_info .f_sns a { font-size: 0; line-height: 0; }

#footer .f_link { font-weight: bold; margin-top: 55px; }
#footer .f_link .btn { display: block; height: 90px; text-align: center; align-content: center; background: #333; color: #bfbfbf; transition: background .5s; margin-bottom: 10px; }
#footer .f_link .rsv_btn { height: 110px; font-size: 24px; background: var(--color01); color: #fff; }
#footer .f_link .mail { width: fit-content; margin: 40px auto 0; display: flex; align-items: center; gap: 5px;}
#footer .f_link .mail::before { content: ''; width: 24px; height: 17px; background: url(../img/icon_mail_wh.svg) no-repeat center/contain; }

#footer .f_link .tokushoho_col .acc_tit { position: relative; margin: 0; cursor: pointer; }
#footer .f_link .tokushoho_col .acc_tit::before,
#footer .f_link .tokushoho_col .acc_tit::after { content: ''; width: 15px; height: 3px; background: #999; position: absolute; top: calc(50% - 1.5px); right: 30px; }
#footer .f_link .tokushoho_col .acc_tit::after { transform: rotate(90deg); transition: transform .5s; }
#footer .f_link .tokushoho_col .acc_tit.active::after { transform: rotate(0deg); }
#footer .f_link .tokushoho_col .acc_contents { display: none; background: #333; padding: 0 min(100px, 8.5%) 90px; }
#footer .f_link .tokushoho_col  dl div { display: flex; border-bottom: 2px solid #565656; padding: 15px 0; line-height: 2; }
#footer .f_link .tokushoho_col  dl div:first-child { border-top: 2px solid #565656; }
#footer .f_link .tokushoho_col  dl div dt { font-size: 18px; width: 270px; flex-shrink: 0; color: #bfbfbf; }
#footer .f_link .tokushoho_col  dl div dd { font-size: 16px; flex-grow: 1; color: #717171; margin: 3px 0; }
#footer .f_link .tokushoho_col  dl div dd p + p { margin-top: 1.5em;}
#footer .f_link .tokushoho_col  dl div dd p img { vertical-align: middle; }

#copyright { padding-top: 45px; text-align: center; font-size: 14px; }

@media screen and (hover: hover) {
	#footer .f_link .btn:hover { opacity: 1; background: #222; }
	#footer .f_link .rsv_btn:hover { background: var(--color01_hover); }
	#footer .f_link .tokushoho_col .acc_tit.active:hover { background: #333; }
}
@media screen and (min-width: 601px) {
}
@media screen and (max-width: 600px) {
	#footer { padding: 70px 0 calc(75px + env(safe-area-inset-bottom)); border-radius: 30px 30px 0 0; margin-top: -30px; position: relative; z-index: 3; }

	#footer .f_info .f_logo { width: 110px; margin: 0 auto 15px; }
	#footer .f_info address { line-height: 1.6; }
	#footer .f_info .f_sns { margin-top: 20px; gap: 15px; }

	#footer .f_link { margin-top: 30px; }
	#footer .f_link .btn { height: 45px; margin-bottom: 5px; }
	#footer .f_link .rsv_btn { height: 45px; font-size: 15px; }
	#footer .f_link .mail { margin: 20px auto 0; }
	#footer .f_link .mail::before { width: 19px; height: 14px; }

	#footer .f_link .tokushoho_col .acc_tit::before,
	#footer .f_link .tokushoho_col .acc_tit::after { height: 2px; top: calc(50% - 1px); right: 15px; }
	#footer .f_link .tokushoho_col .acc_contents { padding: 0 6% 45px; }
	#footer .f_link .tokushoho_col  dl div { flex-direction: column; border-bottom: 1px solid #565656; padding: 15px 0; line-height: 1.8; }
	#footer .f_link .tokushoho_col  dl div:first-child { border-top: 1px solid #565656; }
	#footer .f_link .tokushoho_col  dl div dt { font-size: 15px; width: 100%; margin-bottom: 5px; }
	#footer .f_link .tokushoho_col  dl div dd { font-size: 13px; margin: 0; }
	#footer .f_link .tokushoho_col  dl div dd p img { height: 13px; width: auto; }

	#copyright { padding-top: 25px; font-size: 10px; }
}


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

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