@charset "utf-8";

:root{
	--color-orange:#F47920;
	--color-main:var(--color-orange);
	--color-black:#282828;
	
	--bg-main:#F5F5F1;

	--bs-body-color:var(--color-black);

	--py:150px;
	--px:50px;
	
	--gx:40px;
	--gy:40px;
	
	--border-radius-lg:40px;
	--border-radius-sm:24px;

	--h-header:70px;
	--border-radius:40px;
}

/* Layout
----------------------------------------------- */
html, body{height:100%;}
body{display:flex; flex-direction:column;}
main{flex:1;}
#footer{margin-top:auto;}

html{font-size:16px; scroll-padding-top:calc(var(--h-header) + var(--py)); scrollbar-gutter:stable; /* for sidebar */}
html.fixed,
body.menu-open{position:fixed; width:100%;}
body, html{
	color:var(--color-black);
	line-height:1.8;
	background-color:var(--bg-main);
/* 	-webkit-text-size-adjust:none; */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

.row{
	--bs-gutter-x:40px;
	row-gap:40px;
}

.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);}
.pt-content{padding-top:var(--py);}
.pt-content-sm{padding-top:calc(var(--py) / 2);}
.pb-content{padding-bottom:var(--py);}

.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:767.98px) {
	.row{
		--bs-gutter-x:20px;
		row-gap:30px;
	}
}
@media (min-width:1400px) {
	.container{
		max-width:1260px;
	}
}

@media (max-width:1399.98px){
	:root{
		--px:40px;
	}
}
@media (max-width:1199.98px){
	:root{
		--h-header:50px;
	}
/* 	article{padding-top:var(--h-header);} */
	.container{max-width:100%;}
}
@media (max-width:991.98px){
	:root{
		--py:100px;
	}
}
@media (max-width:767.98px){
	:root{
		--px:25px;
		--py:50px;
	}
}


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

dl.flow dt::before,
.num{
	font-family:"Inter", sans-serif;
	font-optical-sizing:auto;
	font-weight:600;
	font-style:normal;
	line-height:1;
}

#cover h1::after,
.en{
	font-family:"Allison", cursive;
	font-weight:400;
	font-style:normal;
	font-size:min(23vw, 170px);
	color:var(--color-main);
	line-height:.8;
}

h1,.h1,h2,.h2,h3,.h3,.h4,.lead,.lead-sm,.btn,.accordion-button,.accordion-body::before,th,dt,[class*="label-"],.ja{
	font-family:"Noto Sans JP", sans-serif;
	font-optical-sizing:auto;
	font-weight:700;
	font-style:normal;
}

h1,.h1,h2,.h2,h3,.h3{line-height:1.6;}
h1,.h1{font-size:min(5vw, 40px); color:white; margin:0; letter-spacing:.1em;}
h2,.h2{font-size:min(5vw, 36px); margin-bottom:3rem;}
h3,.h3{font-size:min(4.8vw, 28px);}
h3{margin-bottom:1.5rem;}
.h4{font-size:20px; line-height:1.8; margin-bottom:1rem;}
.lead{font-size:min(4.5vw, 20px);}
.lead-sm{font-size:18px;}

p, .mb-p{margin-bottom:2rem;}

.normal{font-weight:400; font-family:sans-serif !important; font-weight:normal !important;}

.c-main{color:var(--color-main);}
.c-white{color:white !important;}
.bg-main{background-color:var(--bg-main);}

a:not([class]){color:var(--color-main); transition:.3s;}
a:not([class]):hover{opacity:.7;}

.btn{
	display:inline-flex;
	align-items:center;
	justify-content:space-between;
	gap:.5em;
	--bs-btn-padding-x:13px;
	--bs-btn-padding-y:13px;
	--bs-btn-border-radius:10em;
	transition:.3s;
}
.card-btn .card-body::after,
.btn::before,
.btn::after{
	content:'';
	min-width:32px;
	aspect-ratio:1/1;
}
.btn-lg{
	--bs-btn-font-size:1rem;
	--bs-btn-padding-x:23px;
	width:100%;
	max-width:300px;
	height:80px;
}

@media (max-width:767.98px){
	.btn-lg{
		--bs-btn-padding-x:13px;
		max-width:280px;
		height:60px;
	}
}

.btn-main{
	--bs-btn-color:white;
	--bs-btn-bg:var(--color-main);
	--bs-btn-border-color:var(--color-main);

	--bs-btn-hover-color:white;
	--bs-btn-hover-bg:var(--color-main);
	--bs-btn-hover-border-color:var(--color-main);
}

.btn-ol-main{
	--bs-btn-color:var(--color-main);
	--bs-btn-bg:transparent;
	--bs-btn-border-color:var(--color-main);

	--bs-btn-hover-color:var(--color-main);
	--bs-btn-hover-bg:transparent;
	--bs-btn-hover-border-color:var(--color-main);

	--bs-btn-border-radius:8px;
}

.btn-white{
	--bs-btn-color:var(--color-main);
	--bs-btn-bg:white;
	--bs-btn-border-color:white;

	--bs-btn-hover-color:var(--color-main);
	--bs-btn-hover-bg:white;
	--bs-btn-hover-border-color:white;
}

.btn-ol-white{
	--bs-btn-color:white;
	--bs-btn-bg:transparent;
	--bs-btn-border-color:white;

	--bs-btn-hover-color:white;
	--bs-btn-hover-bg:transparent;
	--bs-btn-hover-border-color:white;

	--bs-btn-border-radius:8px;
}

.btn-ol-black{
	--bs-btn-color:var(--color-black);
	--bs-btn-bg:transparent;
	--bs-btn-border-color:var(--color-black);

	--bs-btn-hover-color:var(--color-black);
	--bs-btn-hover-bg:transparent;
	--bs-btn-hover-border-color:var(--color-black);

	--bs-btn-border-radius:8px;
}

.card-btn .card-body::after,
[class*="btn-next"]::after{
	-webkit-mask:url(../img/arrow-en.svg) no-repeat center center/contain;
	mask:url(../img/arrow-en.svg) no-repeat center center/contain;
	transform:scale(1);
	transition:.3s;
}
.card-btn:hover .card-body::after,
[class*="btn-next"]:hover::after{
	transform:scale(1.2);
}

[class*="btn-blank"]::after{
	-webkit-mask:url(../img/ic-blank.svg) no-repeat center center/contain;
	mask:url(../img/ic-blank.svg) no-repeat center center/contain;
	transform:scale(.6);
	transition:.3s;
}
[class*="btn-blank"]:hover::after{
	transform:scale(.8);
}
.btn-blank-flat{padding:0 .5em; padding-left:1em;}
.btn-blank-flat::before{content:none;}


.btn-main[class*="btn-next"]::after{
	background:white;
}
.card-btn .card-body::after,
.btn-ol-main[class*="btn-blank"]::after,
.btn-ol-main[class*="btn-next"]::after,
.btn-white[class*="btn-next"]::after{
	background:var(--color-main);
}
.btn-ol-white::after{
	background:white;
}
.btn-ol-black::after{
	background:var(--color-black);
}
.btn-next-down::after{
	transform:rotate(90deg);
}
.btn-next-down:hover::after{
	transform:rotate(90deg) scale(1.2);
}

/*
.btn-white.btn-next{
	--bs-btn-hover-color:var(--color-main);
	--bs-btn-hover-bg:white;
	--bs-btn-hover-border-color:white;
}
*/
/*
.btn:not(.dropdown-toggle):not(.btn-category):not([data-bs-toggle="collapse"]):not([data-bs-toggle="modal"]){
	display:inline-flex;
	align-items:center;
	gap:.5em;
	--bs-btn-padding-x:2em;
	--bs-btn-padding-y:.75em;
	--bs-border-width:2px;
	--bs-btn-border-radius:10em;
	transition:.3s;
}
.btn:not(.dropdown-toggle):not(.btn-category):not([data-bs-toggle="collapse"]):not([data-bs-toggle="modal"])::after{
	content:'';
	width:1em;
	aspect-ratio:18/16;
	-webkit-mask:url(assets/img/btn-arrow.svg) no-repeat center center/contain;
	mask:url(assets/img/btn-arrow.svg) no-repeat center center/contain;
}

.btn-ol-black::after{background-color:var(--color-black);}
.btn-ol-black:hover::after{background-color:white;}

.btn.no-arrow::after{content:none !important;}
*/

@media (max-width:575px){
/*
	h1,.h1{font-size:22px;}
	h2,.h2{font-size:24px;}
	.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
----------------------------------------------- */
h1:not(#home h1){
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	aspect-ratio:1440/370;
	padding-top:calc(var(--h-header) + 20px);
	background:linear-gradient(180deg, #fbaa26, #f47920);
	-webkit-mask:url(../img/bg.svg) no-repeat center bottom/100% auto;
	mask:url(../img/bg.svg) no-repeat center bottom/100% auto;
}
@media (max-width:767.98px){
	h1:not(#home h1){aspect-ratio:1440/500;}
}

#header{width:100%; position:fixed; top:20px; left:0; z-index:999; --nav-link-padding-x:10px;}
#header>*{display:flex; width:100%; gap:2rem; justify-content:space-between; position:relative;}
#header>*>*{display:flex; align-items:center; height:var(--h-header); padding:10px; background-color:rgba(255,255,255,.85); border-radius:10em;}

#header a.brand{width:306px; margin:0 20px; z-index:1000;}

#gnavi{gap:.5em; --bs-nav-link-padding-x:var(--nav-link-padding-x);}
#gnavi li,
#gnavi li>a{display:flex;}
#gnavi li>a{align-items:center;}

#gnavi li a.nav-link{color:var(--color-black);}
#gnavi li a.nav-link:hover{opacity:.7;}
#gnavi .btn-lg{
	--bs-btn-padding-x:13px;
	height:60px;
}
#gnavi .btn-dl{--bs-btn-padding-y:.35em;}

#header .btn-lg{max-width:inherit;}

#header .menu-copylight{font-size:11px; margin-top:2rem;}

@media (min-width:1200px){
	#header .menu-panel .inner{margin-left:calc(20px - var(--nav-link-padding-x));}
	#gnavi .btn-lg{
		--bs-btn-padding-x:0;
		--bs-btn-padding-y:0;
		justify-content:center;
		min-width:120px;
		height:auto;
		font-size:18px;
		margin-left:var(--nav-link-padding-x);
	}
	#gnavi li .btn-next::before,
	#gnavi li .btn-next::after{content:none;}
	
	#header #btn-menu-wrap{display:none;}
}
@media (min-width:1400px){
	#header a.brand{margin:0 40px;}
	#header .menu-panel .inner{margin-left:calc(40px - var(--nav-link-padding-x));}
	#gnavi li .btn-lg{
		column-gap:20px;
		min-width:150px;
	}
}

@media (max-width:1199.98px){
	#header{top:15px;}
	#header a.brand{width:195px;}
	
	#gnavi{flex-direction:column;}
	#gnavi li{display:block;}
	#gnavi .btn-lg{margin:.5em 0 1em;}

	#gnavi a.nav-link{justify-content:space-between; align-items:center;}
	#gnavi a.nav-link::after{
		content:'';
		min-width:32px;
		aspect-ratio:1/1;
		background-color:var(--color-main);
		-webkit-mask:url(../img/arrow.svg) no-repeat center center/contain;
		mask:url(../img/arrow.svg) no-repeat center center/contain;
	}
	
	#header .menu-panel{
		display:block;
		aspect-ratio:1/1;
		padding:0 0 20vh;
		border-radius:0;
		background-color:rgba(255,255,255,.85);
		
		clip-path:circle(0 at 100% 0); /* circle(R at X Y) */
		overflow-y:auto;

		position:fixed;
		top:0;
		right:0;

		height:0;
		opacity:0;
		visibility:collapse;
		transition:.6s;
	}

	#header .menu-panel .inner{
		display:flex;
		flex-direction:column;
		width:fit-content;
		margin-left:auto;
		padding:calc(var(--h-header) * 2) var(--px) var(--h-header);
	}

	body.menu-open #header .menu-panel{
		height:95vh;
		height:95dvh;
		
		clip-path:circle(100% at 100% 0); /* circle(R at X Y) */
		opacity:1;
		visibility:visible;
	}
}

@media (max-width:767.98px){
	#header .menu-panel .inner{width:100vw; align-items:center;}
	#header .menu-panel .inner>*{width:300px;}
}
@media (max-width:575.98px){
	#header>*{padding-left:15px; padding-right:15px;}
}

/* breadcrumb
----------------------------------------------- */
.breadcrumb{font-size:14px; padding:1rem 0 8%; margin:0;}
.breadcrumb li::after{
	content:'＞';
	margin:0 .75em;
}
.breadcrumb li:last-child::after{content:none;}
.breadcrumb a{color:var(--color-black); text-decoration:none;}
.breadcrumb a:hover{opacity:.7;}

/* 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{color:white;}
#footer>*{position:relative;}

#footer .upper{
	overflow:hidden;
	text-align:center;
}
#footer .upper>*{
	padding-top:5%;
	padding-bottom:calc(var(--py) / 2);
	position:relative;
}
#footer .lower::before,
#footer .upper::before,
#footer .upper::after{
	content:'';
	display:block;
}
#footer .upper::before{
	width:100%;
	height:100%;
	background:url(../img/footer.webp) no-repeat center top/cover;
	position:absolute;
	top:0;
	left:0;
}

#footer .lower::before,
#footer .upper::after{
	width:100%;
	aspect-ratio:1440/130;
	position:relative;
}
#footer .lower::before{
	background:#F47920;
	-webkit-mask:url(../img/bg-footer.svg) no-repeat center top/100% auto;
	mask:url(../img/bg-footer.svg) no-repeat center top/100% auto;
	position:absolute;
	top:2px;
	left:0;
	transform:translateY(-100%);
}

#footer .lower{
	background:linear-gradient(0deg, #fbaa26, #f47920);
}
#footer .lower>*{
	padding-top:2rem;
	padding-bottom:calc(var(--py) / 2);
}

#footer .en{
	color:white;
	font-size:25.5vw;
	line-height:1;
	text-indent:-.23em;
	white-space:nowrap;
	transform:rotate(-5deg);
}

#footer .upper img{display:none;}

#footer ul{justify-content:center; gap:30px;}
#footer #fnavi{gap:5px 0;}
#fnavi li a.nav-link{color:white;}
#fnavi li a.nav-link:hover{opacity:.7;}

@media (min-width:768px){
	#footer .upper .nav li{width:300px;}
}
@media (max-width:767.98px){
	#footer ul{flex-direction:column;}
	
	#footer .upper img{display:block;}
	#footer .upper::before{filter:blur(30px); opacity:.4;}

	#footer .en{margin-top:-.8em;}

	#copylight{font-size:11px;}
}

#float-scroll-link-box{position:fixed; bottom:30px; right:30px; z-index:1000;}
.scroll-link{
	display:block;
	width:140px;
	aspect-ratio:1/1;
	border-radius:50%;
	position:relative;
	visibility:collapse;
	opacity:0;
	transition:all 1s;
}
.scroll-link.show{
	visibility:visible;
	opacity:1;
}
.scroll-link::after{
	content:'';
	display:block;
	width:100%;
	height:100%;
	background:url(../img/ic-tour.png) no-repeat center center/contain;
	transform:scale(1);
	transition:.3s;
}
.scroll-link:hover::after{
	transform:scale(1.1);
}
/*
.scroll-link::after{
	content:'';
	display:block;
	width:12px;
	height:12px;
	border:1px solid white;
	border-width:1px 1px 0 0;
	-webkit-transform:rotate(-45deg) translate(-50%, -50%);
	transform:rotate(-45deg) translate(-50%, -50%);
	position:absolute;
	top:56%;
	left:50%;
	transform-origin:0 0;
}
*/
@media (max-width:767.98px){
	.scroll-link{width:80px;}
}

/* button effect
----------------------------------------------- */
:root{
	--menubtn-w:20px;
	--menubtn-h:15px;
	--menubtn-color:var(--color-main);
	--menubtn-open-color:var(--color-main);
	--menubtn-border-w:2px;
	--menubtn-border-radius:10em;
}

#btn-menu-wrap{display:flex; justify-content:center; align-items:center; width:var(--h-header); aspect-ratio:1/1; line-height:1; z-index:1000;}

#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:'';
	height:var(--menubtn-border-w);
	border-radius:var(--menubtn-border-radius);
	background:var(--menubtn-color);
	position:absolute;
	left:0;
	transform-origin:center center;
}
#btn-menu span{display:block;width:100%;text-indent:100%;overflow:hidden;top:50%;transform:translateY(-50%);}
#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{animation:menu-before .6s forwards;}
body.menu-open #btn-menu::after{animation:menu-after .6s forwards;}
@keyframes menu-before{
	40%{
		top:50%;
		transform:translate(0,-50%);
		background:var(--menubtn-color);
	}
	100%{
		top:50%;
		transform:translate(0,-50%) rotate(135deg);
		background:var(--menubtn-open-color);
		left:-10%;
		width:120%;
	}
}
@keyframes menu-after{
	40%{
		bottom:50%;
		transform:translate(0,50%);
		background:var(--menubtn-color);
	}
	100%{
		bottom:50%;
		transform:translate(0,50%) rotate(-135deg);
		background:var(--menubtn-open-color);
		left:-10%;
		width:120%;
	}
}

/*
#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;}

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

h2{position:relative;}
h2.en,
h2 span.en{
	display:block;
	color:var(--color-main);
}
h2 span.en.absolute{
	position:absolute;
	left:50%;
	top:0;
	transform:translate(-50%,-100%);
}

.photo-cover{position:relative;}
.photo-cover::before,
.photo-cover::after{
	content:'';
	display:block;
	width:50%;
	height:135px;
	background:var(--bg-main);
	-webkit-mask:url(../img/bg-photo-cover.svg) no-repeat left bottom/auto 100%;
	mask:url(../img/bg-photo-cover.svg) no-repeat left bottom/auto 100%;
	position:absolute;
	bottom:-1px;
}
.photo-cover::before{left:12%;}
.photo-cover::after{right:12%; transform:scale(-1,1);}
.photo-cover>*{border-radius:var(--border-radius);}

.photo-cover + h2{
	margin-top:calc(1em * -1.6);
}
.photo-cover + h2 span.en.absolute{
	transform:translate(-50%,-125%);
}

@media (max-width:1199.98px){
	.photo-cover::before{left:8%;}
	.photo-cover::after{right:8%;}
}
@media (max-width:991.98px){
	.photo-cover>*{aspect-ratio:4/3; object-fit:cover;}
	.photo-cover::before,
}

@media (max-width:767.98px){
	.photo-cover::before,
	.photo-cover::after{height:20%;}

	.photo-cover + h2 span.en.absolute{
		transform:translate(-50%,-100%);
	}
}

/*
----------------------------------------------- */
.card{
	--bs-card-border-radius:var(--border-radius-sm);
	--bs-card-inner-border-radius:var(--border-radius-sm);
	--bs-card-border-width:0;
}
.card:not(.system-card) p:last-child{margin-bottom:0;}

.card-list{display:flex; flex-direction:column; gap:40px;}
.card-list .card{
	--bs-card-spacer-y:20px;
	--bs-card-spacer-x:20px;
}
.card-list .card img{border-radius:6px;}

@media (min-width:768px){
	.card-list{display:flex; flex-direction:column; gap:50px;}
	.card-list .card .col-photo{width:40%; max-width:330px; flex-shrink:0;}
}
@media (min-width:992px){
	.card-list .card{
		--bs-card-spacer-y:50px;
		--bs-card-spacer-x:50px;
	}
}

[class*="label-"]{padding:.4em; text-align:center; border-radius:8px;}
.label-main{color:white; background-color:var(--color-main);}
.label-ol-white{border:1px solid var(--color-black);}

.bg-grad-rounded-top{
	border-radius:160px 160px 0 0;
	background:linear-gradient(180deg, #F89824, #f47920);
}
.bg-grad-rounded-top h2,
.bg-grad-rounded-top h2 .en{color:white;}

@media (max-width:991.98px) {
	.bg-grad-rounded-top{
		border-radius:60px 60px 0 0;
	}
}
