@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap');
/*
.zen-maru-gothic-regular {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 400;
	font-style: normal;
}
*/
:root{
	--color-main:#00b552;
	--color-main-rgb:0, 181, 82;
	--color-blue:#2c70cb;
	--color-blue-rgb:44, 112, 203;
	--color-black:#353538;
	--color-gray:rgba(0,0,0,.15);
	
	--bg-beige:#F3F1EF; /* #f8f7f5 */

	--container-px:40px;
	--container-py:90px;
	--h-header:130px;

	--bs-border-radius:20px;
}

/* Layout
----------------------------------------------- */
html{font-size:17px;}
html.fixed,
body.open{position:fixed; width:100%;}
body, html {
	font-family:"Zen Maru Gothic", sans-serif;
	font-weight:500;
	font-style: normal;
	color:var(--color-black);
	line-height:2;
	background-color:var(--color-main);
	-webkit-text-size-adjust:none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing:.025em;
}
#header,
#footer,
#container,
article>*{position:relative;}

article{background-color:white;}

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

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

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

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

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

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

.box{padding:2rem;}

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


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

h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-weight:700;line-height:1.6; margin:0;}
h1,.h1,h2,.h2{font-size:33px;}
h3,.h3{font-size:20px;}
h4,.h4{font-size:18px;}

h2{margin-bottom:3rem;}
.h2, h3,.h3{margin-bottom:1.25rem;}

h1, .h1{color:var(--color-main);}
h1 .en, .h1 .en,
h2 .en, .h2 .en{display:block; font-size:.7em;}

p, .mb-p{margin-bottom:1.6rem;}
strong, .bold{font-weight:700;}

@media (max-width:991px){
	h1,.h1,h2,.h2{font-size:28px;}
	h2{margin-bottom:2rem;}
}
@media (max-width:767px){
	h1,.h1,h2,.h2{font-size:24px;}
	h3,.h3{font-size:18px;}
	h4,.h4{font-size:16px;}
	h2{margin-bottom:1.5rem;}
}

:root{
	--wave-h:120px;
}
[class*="bg-wave"]{position:relative;}
[class*="bg-wave"]::before,
[class*="bg-wave"]::after{
	content:'';
	display:block;
	width:100%;
	height:var(--wave-h);
	background:url(../img/bg-preserveAspectRatio-none.svg) no-repeat center center/100% 100%;
}
[class*="bg-wave"]::after{transform:scale(1,-1);}
[class*="bg-wave"]{
	background:linear-gradient(
		180deg,
		transparent calc(var(--wave-h) - 4px),
		var(--bg-beige) calc(var(--wave-h) - 4px),
		var(--bg-beige) calc(100% - var(--wave-h) + 4px),
		transparent calc(100% - var(--wave-h) + 4px)
	);
}

.bg-wave-top{
	background:linear-gradient(
		180deg,
		transparent calc(var(--wave-h) - 4px),
		var(--bg-beige) calc(var(--wave-h) - 4px)
	);
}
.bg-wave-top::after{content:none;}

@media (max-width:767px){
	:root{
		--wave-h:80px;
	}
}

.c-main{color:var(--color-main);}
.c-blue{color:var(--color-blue);}
.c-black{color:var(--color-black);}

.bg-main{background-color:var(--color-main); color:white;}
.bg-white{color:var(--color-black);}
.bg-beige{background-color:var(--bg-beige);}
.bg-blue-light{background-color:rgba(var(--color-blue-rgb),.1);}
.bg-main-light{background-color:rgba(var(--color-main-rgb),.15);}

.btn,.nav-link{font-weight:700;}

.btn{
	--bs-btn-border-radius:10em;
	--bs-btn-padding-x:1em;
	--bs-btn-padding-y:.75em;
	display:inline-flex;
	justify-content:space-between;
	gap:1em;
	align-items:center;
	transition: all .4s;
}
.btn.btn-lg{
	font-size:20px;
	padding:1.5rem 2rem;
	min-width:330px;
	box-shadow:0 5px 0 rgba(0,0,0,.2);
	transform: translateY(0);
	transition:
		box-shadow .1s ease,
		transform  .1s ease;
}
.btn.btn-lg:hover{
	transform: translateY(2px);
	box-shadow:0 0 0 rgba(0,0,0,.2);
}

.btn::before,
.btn::after{
	content:'';
	width:1em;
	aspect-ratio:1/1;
}
.btn::after{
	border:2px solid white;
	border-width:2px 2px 0 0;
	transform:rotate(45deg) scale(.7);
}

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

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

.btn.ic-mail{justify-content:center; gap:.75em;}
.btn.ic-mail::after{content:none;}
.btn.ic-mail::before{
	background:url(../img/ic-mail.svg) no-repeat center center/contain;
	transform-origin:center center;
	transform:scale(1.4);
}

@media (max-width:767px){
	.btn.btn-lg{
		font-size:18px;
		padding:1.25rem;
		min-width:300px;
	}
}

/* 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%; height:var(--h-header); align-items:center; background-color:var(--bg-beige); position:relative; z-index:999;}
#header>*{display:flex; width:100%; gap:2rem; justify-content:space-between; align-items:center; position:relative;}
#header .brand{width:290px; 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{color:var(--color-main);}

@media (min-width:1200px){
	.menu-panel,
	.menu-panel>*{position:relative;}
	.menu-panel::before{
		content:'';
		width:calc(100% + 4rem);
		height:100%;
		background-color:white;
		position:absolute;
		right:calc(var(--container-px) * -1);
		border-radius:10rem 0 0 10rem;
	}
	#btn-menu-wrap{display:none;}
}
@media (max-width:1199px){
	#header{position:fixed; top:0; left:0; z-index:999;}
	#header .brand{width:220px;}

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

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

	.menu-panel{
		width:100%;
		background-color:rgba(255,255,255,.9);
		padding:var(--h-header) 2rem 60px;
		overflow:scroll;
		position:fixed;
		top:0;
		right:0;
		
		height:0;
		opacity:0;
		visibility:collapse;
	}
	body.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::before{
	content:'';
	display:block;
	height:480px;
	background:url(../img/bg-footer.jpg) no-repeat center top/cover;
}

#contact-box{
	max-width:1000px;
	padding:2rem var(--container-px);
	margin:-240px auto 0;
	background:linear-gradient(
		180deg,
		rgba(255,255,255,.85),
		white 80%
	);
}
#contact-box>*{text-align:center; align-items:center;}
#contact-box .row>*:last-child{border-left:1px solid var(--color-gray);}
#contact-box a.tel{font-size:43px; text-decoration:none; color:var(--color-black); font-weight:700; line-height:1.2;}
#contact-box .btn.ic-mail{min-width:260px;}

#fnavi{justify-content:center; gap:.5rem 1.5rem; padding:3rem 0;}
#fnavi .nav-link{padding:0; color:white;}

#copylight{
	display:block;
	text-align:center;
	color:white;
	margin:0 calc(var(--container-px) * -1);
	padding:1rem var(--container-px) 3rem;
	border-top:1px solid white;
}

@media (max-width:991px){
	#contact-box .row{gap:1rem;}
	#contact-box .row>*:last-child{border:none;}
}
@media (max-width:767px){
	#footer::before{height:380px;}
	#fnavi{padding:1.5rem 0;}
}
@media (max-width:575px){
	#contact-box .h3{font-size:15px;}
	#contact-box a.tel{font-size:8.5vw;}
}

/* button effect
----------------------------------------------- */
:root{
	--menubtn-w:36px;
	--menubtn-h:26px;
	--menubtn-rgb:var(--color-main-rgb);
	--menubtn-open-rgb:var(--color-main-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;}

#btn-menu.open span{opacity:0}
#btn-menu.open::before{-webkit-animation:menu-icon-1 .6s alternate forwards; animation:menu-icon-1 .6s alternate forwards}
#btn-menu.open::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:1rem; padding-bottom:2rem; margin-bottom:2rem;}
#page-header{position:relative; z-index:1;}
#page-header h1,
#page-header .h1{line-height:1.4; text-align:center;}

#page-header::before,
#page-header::after{
	content:'';
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	z-index:-1;
}
#page-header::before{
	top:calc(var(--h-header) * -1);
	background-color:var(--bg-beige);
}
#page-header::after{
	top:0;
	background:white url(../img/bg-preserveAspectRatio-none.svg) no-repeat center center/100% 100%;
	transform:scale(1,-1);
}

@media (max-width:767px){
	#page-header{padding-bottom:1rem;}
}

/* news
----------------------------------------------- */
.list-news{flex-direction:column;}
.list-news li{border-bottom:1px solid var(--color-gray);}
.list-news .nav-link{display:flex; padding:1rem .5rem;}
.list-news .nav-link:hover{background-color:rgba(0,0,0,.03);}
.list-news time{color:var(--color-main); min-width:8em;}
.list-news p{color:var(--color-black); margin-bottom:0;}

#news-post h1{margin-bottom:2rem;}
#news-post time{}

@media (max-width:767px){
	.list-news .nav-link{flex-direction:column;}
	.list-news time{line-height:1;}

}