/* CSS Document */

/*
@import url("./svg.css");
*/

:root{
/* color */
--color-K   :#231815;
--color-R   :#bf1920;
--color-Y   :#ffdc00;
--color-B   :#0000aa;
--color-gold:#b49a6c;
--color-gray-F:#f5f6f7;
--color-gray-C:#c8c8c8;
--color-gray-2:#282828;
--color-dark50:rgba(0,0,0,0.5);
--color-dark30:rgba(0,0,0,0.3);
/* font-family */
--font-yumin :"YuMincho","Yu Mincho","游明朝",serif;
--font-yugo  :"YuGothic","Yu Gothic","游ゴシック",sans-serif;
--font-hirago:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
/* radius */
--radius-10:10px;
/* transition */
--transition-fast:0.3s;
--transition-middle:0.5s;
/* size */
--size-header-W:225px;
--size-header-logo-sp-W:96px;
--size-yoyaku-pc-H:214px;
--size-yoyaku-sp-H:62px;
--size-backbtn-mgnT:min(45px,max(30px,calc(1vw * 30 / 3.75)));
--size-inner-maxW:calc(100% - 120px);
}
:root{
--font-limit20:max(20px, calc(1vw * 20 / 3.75));
--font-limit16:max(16px, calc(1vw * 16 / 3.75));
}
:root{
/* font-size */
--font-32-28:min(32px,max(28px, calc(1vw * 28 / 3.75)));
--font-32-20:min(32px,var(--font-limit20));
/* --- */
--font-30-22:min(30px,max(22px, calc(1vw * 22 / 3.75)));
--font-30-16:min(30px,var(--font-limit16));
/* --- */
--font-27-24:min(27px,max(24px, calc(1vw * 24 / 3.75)));
/* --- */
--font-24-20:min(24px,var(--font-limit20));
--font-24-16:min(24px,var(--font-limit16));
/* --- */
--font-21-20:min(21px,var(--font-limit20));
--font-21-16:min(21px,var(--font-limit16));
/* --- */
--font-18-17:min(18px,max(17px, calc(1vw * 17 / 3.75)));
--font-18-16:min(18px,var(--font-limit16));
--font-18-15:min(18px,max(15px, calc(1vw * 15 / 3.75)));
/* --- */
--font-17-16:min(17px,var(--font-limit16));
/* --- */
--font-16-12:min(16px,max(12px, calc(1vw * 12 / 3.75)));
/* --- */
--font-15-14:min(15px,max(14px, calc(1vw * 14 / 3.75)));
--font-15-11:min(15px,max(11px, calc(1vw * 11 / 3.75)));
/* --- */
--font-14-13:min(14px,max(13px, calc(1vw * 13 / 3.75)));
/* --- */
--font-12-10:min(12px,max(10px, calc(1vw * 10 / 3.75)));
--font-12-09:min(12px,max( 9px, calc(1vw *  9 / 3.75)));
}
@media screen and (max-width: 870px){
	:root{
		--size-inner-maxW:max(320px,calc(1vw * 320 / 3.75));
	}
}
/*
@media screen and (max-width: 870px){}
*/
:root{
--size-inner-W750 :min( 750px,var(--size-inner-maxW));
--size-inner-W825 :min( 825px,var(--size-inner-maxW));
--size-inner-W900 :min( 900px,var(--size-inner-maxW));
--size-inner-W975 :min( 975px,var(--size-inner-maxW));
--size-inner-W1000:min(1000px,var(--size-inner-maxW));
--size-inner-W1100:min(1100px,var(--size-inner-maxW));
}
:root{
--size-inner-W:var(--size-inner-W825);
}

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
html,body{
	padding: 0;
	margin: 0!important;
}
html{font-size:16px;}
/*
@media screen and (max-width: 1100px) and (orientation: portrait){}
*/
body{
	font-family:var(--font-yumin);
	font-size: 1rem;
	font-weight: 500;
	padding-left: var(--size-header-W);
	min-height: 100vh; min-height: 100dvh;
	position: relative;
	display: flex;
	flex-direction: column;
}
body *{line-height: 1.5em;}
a{
	text-decoration: none;
	color: inherit;
	transition: color var(--transition-fast),
	opacity var(--transition-fast);
}
a:focus{outline:none;}
h1, h2, h3, h4, h5, h6,
hr,dl,dt,dd,ul,li,p,
figure{
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6{font-weight: 900;}
h3.subt{font-size: var(--font-27-24);text-align: center; margin-bottom: 1em;}
ul,li{list-style: none;}
hr{
	border: none;
	border-top:solid 1px var(--color-K);
	border-left:solid 1px var(--color-K);
}
span{display: inline-block;}
time{font-size: var(--font-12-10); font-family: var(--font-yugo); font-weight: 700;}
figure,img{display: block;}
picture{display: flex; justify-content: center; align-items: center;}
picture source{display: none;}
picture img,
figure img{width:100%; height:auto;}
img:not([src*="svg"]){object-fit: cover; max-width: 100%;}
img[src*="svg"]{width:100%;}
img[src*="svg"][h-base]{width: auto; height: 1em;}

.cmn_logomark,
.cmn_logomark span{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.cmn_logomark svg{width:100%;}
.cmn_logomark svg[fn*="logo"]{margin-top: calc(100% * 20 / 166); width: calc(100% * 160 / 166);}
.cmn_menu{font-size: var(--font-14-13); display: flex; justify-content: space-between;}
.cmn_menu dd{display: flex;flex-direction: column;justify-content: space-between;}
.cmn_menu a{text-decoration: underline;}
.cmn_menu[type_v] dd{width: 100%; flex-direction: column; flex-wrap: wrap; align-content: space-between;}
.cmn_menu[type_v] dd::after{content:''; display: block; height: 100%; border-left: solid 1px var(--color-K);}
@media screen and (max-width: 1100px){
	header .cmn_menu[type_v] dd::after{border-color: #FFF;}
	header .cmn_menu[type_v][sp] dd{max-height: calc(2em * attr(sp number));}
	header .cmn_menu[type_v][sp="4"] dd{max-height: calc(2em * 4);}
	header .cmn_menu[type_v][sp="6"] dd{max-height: calc(2em * 6);}
	header .cmn_menu[type_v][pc="4"] dd a:nth-child(n+5){order:2;}
}
@media screen and (min-width: 871px){
	footer .cmn_menu[type_v][pc] dd{max-height: calc(1.6em * attr(pc number));}	
	footer .cmn_menu[type_v][pc="4"] dd{max-height: calc(1.6em * 4);}
	footer .cmn_menu[type_v][pc="4"] dd a:nth-child(n+9){order:2;}
}
@media screen and (max-width: 870px){
	.cmn_menu[type_v][sp] dd{max-height: calc(2em * attr(sp number));}
	.cmn_menu[type_v][sp="4"] dd{max-height: calc(2em * 4);}
	.cmn_menu[type_v][sp="6"] dd{max-height: calc(2em * 6);}
	.cmn_menu[type_v][sp="4"] dd a:nth-child(n+5),
	.cmn_menu[type_v][sp="6"] dd a:nth-child(n+7){order:2;}
}
.cmn_sns{
	font-size: min(36px,max(32px,calc(1vw * 32 / 3.75)));
	gap:0.25em; display: flex; align-items: flex-start;
}
.cmn_sns a{width:1em; height:1em;
display:flex; justify-content: center; align-items:center;}
.cmn_sns a img{width:100%;}
.cmn_sns a img[src*="insta"]{width:calc(100% * 34 / 36);}
.cmn_copy{font-size: var(--font-12-09); text-align: center; display: flex; justify-content: center; align-items: center;}
header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	max-width: var(--size-header-W);
	height: 100%;
	z-index: 1000;
	background-color: #FFF;
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
}
header h1{height: var(--size-header-W); display: flex;}
header h1 a{
	width:100%;
	height:100%;
	background-color: var(--color-R);
	color:#FFF;
}
header h1 a span{width:calc(1% * 166 / 3);}
header nav{
	font-size: var(--font-18-16);
	padding: 1em;
	display: flex;
	flex-direction: column;
}
header nav a{font-weight:900; min-height:3em; gap:0.6em; display:flex; align-items:center;}
header nav a + a{border-top:solid 1px var(--color-gray-C);}
header nav span{width:2.4em; display:flex; justify-content:center; align-items:center;}
header nav svg[fn="icon-hamayuu"]{width:100%;}
header nav svg[fn="icon-scene"]{width:calc(100% * 54 / 60);}
header nav svg[fn="icon-menu"]{width:calc(100% * 52 / 60);}
header nav svg[fn="icon-tokubetsu"]{width:calc(100% * 50 / 60);}
header nav svg[fn="icon-tenpo"]{width:calc(100% * 44 / 60);}
section.menubtn{
	/* font-size: min(calc(0.5rem * 21 / 16),21px,calc(1vw * 21 / 11.7)); */
	position: fixed;
	top: 0;
	right: 0;
	width: 51px;
	height: 51px;
	text-align: center;
	cursor: pointer;
	z-index: 1010;
	/* mix-blend-mode: difference; */
	display:flex; justify-content:center; align-items:center;
}
section.menubtn > div{
	width:25px;
	height:23px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
/*
:root{
--menubtn-bar:3px;
}
*/
section.menubtn span{
	display: block;
	width: 100%;
	height: 3px;
	position: relative;
	background-color: #000;
	/* box-shadow: 0 0 2px 1px rgba(255,255,255,0.25); */
	transition: background-color var(--transition-middle);
	/* transition: transform var(--transition-fast),width var(--transition-fast); */
}
section.menubtn:not(.colK) span{background-color: #FFF;}
/* header.active ~ section.menubtn > div{height:calc(var(--menubtn-bar) * 3);} */
header.active ~ section.menubtn span{width: calc(100% * sqrt(2)); background-color: #FFF; position: absolute;
top:0; bottom:0; margin: auto;}
header.active ~ section.menubtn span:first-child{transform: rotate(45deg);}
header.active ~ section.menubtn span:nth-child(2){width:0;}
header.active ~ section.menubtn span:last-child{transform: rotate(-45deg);}
header.ease ~ section.menubtn.colK span{transition: background-color var(--transition-middle) ease-in;}
header.ease.active ~ section.menubtn.colK span{transition: background-color var(--transition-middle) ease-out;}
@media screen and (min-width: 1101px){
	header nav a.yoyaku,
	header .sp,
	section.menubtn{display: none!important;}
}
@media screen and (max-width: 1100px){
	body{padding-left: 0;}
	header{
		max-width: none;
		height:auto;
		box-shadow: none;
	}
	header h1{
		width:var(--size-header-logo-sp-W);
		height:var(--size-header-logo-sp-W);
		position: absolute;
		top:0;
		left:0;
		z-index: 2;
	}
	header .inner{
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		width:100%;
		background-color: #000;
		color:#FFF;
	}
	header .inner .pad{
		min-height: 100vh;
		min-height: 100dvh;
		padding-top: var(--size-header-logo-sp-W);
		display: flex; flex-direction: column;
	}
	header .inner *[class*="scroll"]{
		flex-grow: 1;
		width: 100%;
		max-height: calc(100vh - var(--size-header-logo-sp-W));
		max-height: calc(100dvh - var(--size-header-logo-sp-W));
		overflow-y: auto;
		gap:40px; display: flex; flex-direction: column; justify-content: space-between; align-items: center;
	}
	header .inner *[class*="scroll"]::-webkit-scrollbar{width:0.5rem;}
	header .inner *[class*="scroll"]::-webkit-scrollbar-track{background-color:transparent; }
	header .inner *[class*="scroll"]::-webkit-scrollbar-thumb{background-color:var(--color-R); border-radius:0.5rem;}
	header nav{padding: 0; margin: 0 auto; width: calc(1% * 182 / 3.75); height: min(500px,max(348px,20em)); justify-content: flex-end;}
	header nav span{width: calc(1em * 38 / 16);}
	header nav svg[fn="icon-yoyaku"]{width:calc(100% * 28 / 38);}
	header .sp{width:100%; min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; align-items: center;}
	header .cmn_menu{width: 20.5em; padding-left: 1em;}
	header .cmn_sns{margin: 30px auto;}
	header .cmn_copy{width:100%; min-height: calc(1em * 24 / 9);}
}
section.yoyaku{
	font-size: 12px;
	position: fixed;
	right: 0;
	z-index: 990;
}
section.yoyaku a{background-color: #FFF; color:var(--color-R); padding: 1em;
gap:0.5em; display: flex; align-items: center;}
section.yoyaku a svg{width:2em;}
@media screen and (min-width: 1101px){
	section.yoyaku{
		top: min(210px, calc(50vh - var(--size-yoyaku-pc-H) / 2));
		top: min(210px, calc(50dvh - var(--size-yoyaku-pc-H) / 2));
	}
	section.yoyaku a{
	border: solid 1px var(--color-R); border-right: none; min-height: var(--size-yoyaku-pc-H);
	border-radius: 0.25em 0 0 0.25em; flex-direction: column; justify-content: space-between;}
	section.yoyaku a span{/* writing-mode: vertical-rl; */
	width: 1em; line-height: 1em; text-align: center;}
	section.yoyaku a svg{/* height:calc(2em + 1px); */ object-position:center top;}
}
@media screen and (max-width: 1100px){
	section.yoyaku{bottom:0; width:100%; font-size: 17px;}
	section.yoyaku a{color:var(--color-K); min-height: var(--size-yoyaku-sp-H); padding: 0;
	border-top: solid 1px var(--color-K);
	gap:10px; justify-content: center;}
	section.yoyaku a svg{width:28px; margin-top: -4px;}
}
main{flex-grow:1;}
footer{}
footer .inner{
margin: 0 auto; padding-bottom: 50px; width: min(825px,calc(100% - 70px));
gap: 0 1em; display: flex; justify-content: space-between;}
footer .cmn_logomark{width:66px;}
footer .cmn_menu{width:430px; max-width: 100%;}
footer .cmn_copy{
	background-color: var(--color-K);
	color:#FFF;
	min-height: 38px;
}
@media screen and (max-width: 1100px){
	footer .cmn_copy{padding: 5px 0 calc(5px + var(--size-yoyaku-sp-H));}
}
@media screen and (max-width: 870px){
	footer .inner{
		padding-bottom: 50px;
		flex-direction: column; align-items: center;
	}
	footer .cmn_logomark{width:90px;}
	footer .cmn_menu{
		margin-top:min(50px,max(24px,calc(1vw * 24 / 3.75)));
		width: 21.5em; padding-left: 1em;}
	footer .cmn_sns{margin-top: 50px;}
}
:root{
--pagetop-btn-W:min(50px,max(42px,calc(1vw * 42 / 3.75)));
}
section.pagetop{position: relative; display:flex; justify-content: flex-end;}
section.pagetop a{background-color: var(--color-R);	color:#FFF; border-radius: 100%; overflow: hidden;
position: fixed; bottom:62px; right:30px; z-index:990;
transition: bottom var(--transition-fast);
}
section.pagetop:not(.active) a{bottom:calc(var(--pagetop-btn-W) * -1);}
section.pagetop a img{width:var(--pagetop-btn-W);}
@media screen and (max-width: 1100px){
	section.pagetop a{
		bottom: calc(var(--size-yoyaku-sp-H) + var(--font-12-09) + 30px);
		right:min(30px,max(12px,calc(1vw * 12 / 3.75)));
	}
}

:root{
--ovalbtn-arrow:min(1em,max(12px,calc(1vw * 12 / 3.75)));
}
.ovalbtn_box,
.ovalbtn_box a{display: flex; justify-content: center; align-items: center;}
.ovalbtn_box a{
	font-size: 16px;
	position: relative;
	padding: 0 calc(var(--ovalbtn-arrow) * 3);
	border-radius: 2em;
	min-width: min(13em,max(9em,calc(1vw * 16 * 9 / 3.75)));
	min-height: min(calc(1em * 44 / 16),max(36px,calc(1vw * 36 / 3.75)));
	border:solid 1px var(--color-R);
	background-color: #FFF;
	color: var(--color-R);
}
.ovalbtn_box.R a{background-color: var(--color-R); color: #FFF;}
.ovalbtn_box.Y a{background-color: var(--color-Y); color: var(--color-K); border-color: var(--color-Y);}
.ovalbtn_box a svg{position: absolute; right: var(--ovalbtn-arrow); height:var(--ovalbtn-arrow);}
.ovalbtn_box a svg *{stroke: var(--color-R);}
.ovalbtn_box.R a svg *{stroke: #FFF;}
.ovalbtn_box.Y a svg *{stroke: var(--color-K);}
.ovalbtn_box.thin a{
	font-size: 1em;
	min-width: 0; min-height: 2em;
	padding-left: 1em; padding-right: 2em;
}
.ovalbtn_box.thin a svg{right:calc(var(--ovalbtn-arrow) * 3 / 4);}

.pc_vanish,.sp_vanish,
.vanish_branch,.vanish_branch_onoff{}
.im_vanish{display:none!important;}
@media screen and (min-width: 1101px){
	.pc_vanish,
	.vanish_branch img[src*="-sp."],
	.vanish_branch_onoff img[src*="-sp."]{display:none!important;}
}
@media screen and (max-width: 1100px){
	.sp_vanish,
	.vanish_branch img[src*="-pc."],
	.vanish_branch_onoff img:not([src*="-sp."]){display:none!important;}
}
@media screen and (min-width: 871px){}
@media screen and (max-width: 870px){}

table.sp870_block{}
@media screen and (max-width: 870px){
	table.sp870_block,
	table.sp870_block tbody,
	table.sp870_block tr,
	table.sp870_block th,
	table.sp870_block td{display: block;}
	table.sp870_block.tbody_flex tbody{display:flex; flex-direction:column;}
}


/* 印刷用CSS */
/*
@media print{
  印刷用CSSの定義を指定する
}
※印刷時は
「@media screen and (min-width: 1000px)」
「@media screen and (max-width: 999px)」内のスタイルは効かなくなる
*/
/*
@media print{
	body > div .H_head,
	.pc_vanish{
		display:none!important;
	}
	header{position:relative;}
}
*/