@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root{
	--color-red:#DD0000;
	--color-green:#006601;
	--color-green-rgb:0,102,1;
	--color-black:var(--bs-body-color);
	--bg-yellow:#FFF8DC;

	--px:40px;
	--py:90px;

	--h-header:80px;
}

/* Layout
----------------------------------------------- */
html{font-size:18px;}
html.fixed,
body.menu-open{position:fixed; width:100%;}
body, html{
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing:auto;
	font-weight:500;
	font-style:normal;
	color:var(--color-black);
	line-height:1.8;

	-webkit-text-size-adjust:none;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	letter-spacing:.025em;
}

.container-fluid,
.container{padding-left:var(--px); padding-right:var(--px);}

.row:not([class*="g-"]){margin-left:calc(var(--px) * -1); margin-right:calc(var(--px) * -1);}
.row:not([class*="g-"])>[class*="col"]{padding-left:var(--px); padding-right:var(--px);}

.thin{max-width:800px; margin-left:auto; margin-right:auto;}
.container.thin{max-width:calc(800px + var(--px) * 2);}

.py-content{padding-top:var(--py); padding-bottom:var(--py);}
.py-content-sm{padding-top:calc(var(--py) / 2); padding-bottom:calc(var(--py) / 2);}

.my-content{margin-top:var(--py); margin-bottom:var(--py);}
.my-content-sm{margin-top:calc(var(--py) / 2); margin-bottom:calc(var(--py) / 2);}

.mb-content{margin-bottom:var(--py);}
.mb-content-sm{margin-bottom:calc(var(--py) / 2);}
.mt-content{margin-top:var(--py);}
.mt-content-sm{margin-top:calc(var(--py) / 2);}

.child-flex>*{display:flex;}
.child-flex>*>*{width:100%;}

@media (max-width:1199px){
	:root{
		--h-header:60px;
	}
	article{padding-top:var(--h-header);}
	.container{max-width:100%;}
}
@media (max-width:991px){
	:root{
		--py:60px;
	}
}
@media (max-width:767px){
	:root{
		--px:20px;
	}
	html{font-size:16px;}
}


/* common
----------------------------------------------- */
img{max-width:100%; height:auto;}

h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-weight:700; line-height:1.4; margin:0;}
h1,.h1{font-size:28px;}
h2,.h2{font-size:36px; margin-bottom:1em;}
h3,.h3{font-size:21px; margin-bottom:.5em;}
.lead{font-size:20px; line-height:2; font-weight:600;}
/*
p, .mb-p{margin-bottom:1.6rem;}
strong, .bold{font-weight:700;}
*/

.num{
	font-family:"Roboto", sans-serif;
	font-optical-sizing:auto;
	font-weight:700;
	font-style:normal;
	font-variation-settings:"wdth" 100;
	line-height:1.4;
}

.kakko{display:inline-block; padding:1em 2.2em; position:relative;}
.kakko:before,
.kakko:after{
	content:'';
	width:18px;
	height:100%;
	border:4px solid var(--color-black);
	position:absolute;
	top:0;
}
.kakko:before{left:0; border-width:3px 0 3px 3px;}
.kakko:after{right:0; border-width:3px 3px 3px 0;}

.c-red{color:var(--color-red);}
.c-green{color:var(--color-green);}
.c-black{color:var(--color-black);}

.btn,
.nav-link{font-weight:700; transition:all .5s;}
.btn:hover,
.nav-link:hover{opacity:.7;}

.btn.btn-lg{
	--bs-btn-border-radius:10em;
	--bs-btn-padding-x:1em;
	--bs-btn-padding-y:.75em;
	font-size:20px;
	padding:1.5rem 2rem;
	min-width:330px;
}

.btn-green,
.btn-green:hover{color:white; background-color:var(--color-green);}


.biz_time{
	display:inline-flex;
	gap:1rem;
	align-items:center;
	font-weight:700;
	font-size:26px;
	color:var(--color-green);
}
.biz_time .num{font-size:1.4em;}

.tel{font-size:24px;}
.tel a{
	color:var(--color-black);
	text-decoration:none;
}

.youtube{
	aspect-ratio:16/9;
}
.youtube iframe {
	display:block;
	width:100%;
	height:100%;
}

@media (max-width:575px){
	h1,.h1{font-size:22px;}
	h2,.h2{font-size:24px;}
/* 	h3,.h3{font-size:24px; margin-bottom:.5em;} */
	.lead{font-size:18px;}

	.biz_time{font-size:20px;}
	.tel{font-size:22px;}

	.kakko{padding:1em 2em;}
}


/* scroll fadein
----------------------------------------------- */
.fadein{
	opacity:0;
	transform:translateY(40px);
	transition:opacity .8s, transform .8s;
	will-change:opacity, transform;
}
.fadein.is-show{
	opacity:1;
	transform:none;
}

/* header
----------------------------------------------- */
#header{display:flex; width:100%; align-items:center; height:var(--h-header); background-color:white; position:relative; z-index:999;}
#header>*{display:flex; width:100%; gap:2rem; justify-content:space-between; align-items:center; position:relative;}
#header .brand{width:160px; z-index:1000;}

#gnavi{gap:.5rem; height:70px; align-items:center;}
#gnavi li a:not(.btn){color:var(--color-black);}
#gnavi li a:not(.btn):hover{opacity:.7;}

#gnavi .btn{
	display:flex;
	height:var(--h-header);
	border-radius:0;
	align-items:center;
	gap:.75em;
	padding-left:1.5em;
	padding-right:1.5em;
}
#gnavi .btn::before{
	content:'';
	width:.9em;
	height:100%;
	background:url(../img/ic-mail.svg) no-repeat center center/contain;
	transform-origin:center center;
	transform:scale(1.4);
}

@media (min-width:1200px){
	#header>*{padding-right:0;}
	#gnavi{height:var(--h-header);}

	.menu-panel,
	.menu-panel>*{position:relative;}

	#btn-menu-wrap{display:none;}
}
@media (max-width:1199px){
	#header{position:fixed; top:0; left:0; z-index:999;}
	#header .brand{width:120px;}

	#gnavi{
		flex-direction:column;
		gap:1.5rem;
		height:auto;
	}

	#gnavi a{font-size:1.2rem;}

	.menu-panel{
		width:100%;
		background-color:rgba(255,255,255,.95);
		padding:var(--h-header) 2rem 60px;
		overflow:scroll;
		position:fixed;
		top:0;
		right:0;
		
		height:0;
		opacity:0;
		visibility:collapse;
	}
	body.menu-open .menu-panel{
		height:100vh;
		height:100dvh;
		opacity:1;
		visibility:visible;
		transition:all .5s;
	}
}

/* fix header
----------------------------------------------- */
.home #header.fix-header{
	transition: all 1s;
	background-color:rgba(255,255,255,1);
	box-shadow:0px 1px 8px rgba(0,0,0,.1);
}

/* footer
----------------------------------------------- */
#footer{
	font-size:16px;
	background-color:#F6F7F8;
}
#footer img{max-width:35%;}

#copylight{
	font-size:14px;
}

@media (max-width:767px){
	#footer{font-size:14px;}
}

/* button effect
----------------------------------------------- */
:root{
	--menubtn-w:36px;
	--menubtn-h:26px;
	--menubtn-rgb:var(--color-green-rgb);
	--menubtn-open-rgb:var(--color-green-rgb);
	--menubtn-border-w:2px;
}

#btn-menu-wrap{line-height:1;}

#btn-menu,
#header .nav .close{padding:0;border:none;outline:0;cursor:pointer}
#btn-menu{width:var(--menubtn-w);height:var(--menubtn-h);background-color:transparent;position:relative;z-index:1000;}
#btn-menu span,
#btn-menu::after,
#btn-menu::before{
	content:'';
	background:rgb(var(--menubtn-rgb));
	position:absolute;
	left:0;
	height:var(--menubtn-border-w);
	-webkit-transition:width .2s cubic-bezier(.25,.46,.45,.94);
	transition:width .2s cubic-bezier(.25,.46,.45,.94);
	-webkit-transform-origin:left center;
	-ms-transform-origin:left center;
	transform-origin:left center;
}
#btn-menu span{display:block;width:100%;text-indent:100%;overflow:hidden;top:calc(50% - var(--menubtn-border-w) / 2);}
#btn-menu::before{width:100%;top:0;}
#btn-menu::after{width:100%;bottom:0;}

body.menu-open #btn-menu span{opacity:0}
body.menu-open #btn-menu::before{-webkit-animation:menu-icon-1 .6s alternate forwards; animation:menu-icon-1 .6s alternate forwards}
body.menu-open #btn-menu::after{-webkit-animation:menu-icon-2 .6s alternate forwards; animation:menu-icon-2 .6s alternate forwards}
@-webkit-keyframes menu-icon-1{
    40%{top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);-webkit-transform-origin:center center;transform-origin:center center;background:rgb(var(--menubtn-rgb))}
    100%{top:50%;-webkit-transform:translate(0,-50%) rotate(135deg);transform:translate(0,-50%) rotate(135deg);-webkit-transform-origin:center top;transform-origin:center top;background:rgb(var(--menubtn-open-rgb))}
}
@keyframes menu-icon-1{
    40%{top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);-webkit-transform-origin:center center;transform-origin:center center;background:rgb(var(--menubtn-rgb))}
    100%{top:50%;-webkit-transform:translate(0,-50%) rotate(135deg);transform:translate(0,-50%) rotate(135deg);-webkit-transform-origin:center top;transform-origin:center top;background:rgb(var(--menubtn-open-rgb))}
}
@-webkit-keyframes menu-icon-2{
    40%{bottom:50%;-webkit-transform:translate(0,50%);transform:translate(0,50%);-webkit-transform-origin:center center;transform-origin:center center;background:rgb(var(--menubtn-rgb))}
    100%{bottom:50%;-webkit-transform:translate(0,50%) rotate(-135deg);transform:translate(0,50%) rotate(-135deg);-webkit-transform-origin:center top;transform-origin:center top;background:rgb(var(--menubtn-open-rgb))}
}
@keyframes menu-icon-2{
    40%{bottom:50%;-webkit-transform:translate(0,50%);transform:translate(0,50%);-webkit-transform-origin:center center;transform-origin:center center;background:rgb(var(--menubtn-rgb))}
    100%{bottom:50%;-webkit-transform:translate(0,50%) rotate(-135deg);transform:translate(0,50%) rotate(-135deg);-webkit-transform-origin:center top;transform-origin:center top;background:rgb(var(--menubtn-open-rgb))}
}

/*
#btn-menu.txt-show span{
	border-top:2px solid #000;
	background-color:transparent;
	padding-top:12px;
	height:auto;
	overflow:visible;
	text-indent:inherit;
	font-size:13px;
}
*/

/* page
----------------------------------------------- */
#page-header{padding-top:1em; padding-bottom:1em; margin-bottom:1em;}
#page-header h1{display:inline-block;}
#page-header .en{display:block; font-size:1rem; line-height:1.6; padding:0 .5em; background-color:var(--color-green); color:white;}

@media (max-width:575px){
	#page-header{text-align:center;}
}