/*++++++++++++++++
root
+++++++++++++++++*/
:root {
/*maxwidth*/
--width-sp: 100vw;
--width-pc: 640px;
--width640:640px;
--width480:480px;

/*color*/
--white:#fff;
--black:#000;
--darkblack:#111;
--gray:#eee;
--lightgray:#f7f7f7;
--orange: #fedc5e;
--blue:#4a9fcd;
--green:#5eb9ad;
--darkgray:#333333;
--beige: #f4f5ea;
--opa-white02:rgba(255,255,255,0.2);
--opa-black05:rgba(0,0,0,0.5);

/*fontsize*/
--font-h1:50px;
--font-h2: 35px;
--font-h3: 32px;
--font-h4: 28px;
--font-h5: 20px;
--font-h6: 15px;
--font-em: 13px;
--font-mc: 12px;

/*fontfamily*/
--gs:"Zen Kaku Gothic New", sans-serif;
--mn: "Zen Old Mincho", serif;
--en:"Open Sans", sans-serif;

/*flex-basis*/
--flex-20:20%;
--flex-25:25%;
--flex-30:30%;
--flex-35:35%;
--flex-40:40%;
--flex-45:45%;
--flex-48:48%;
--flex-50:50%;
--flex-55:55%;
--flex-60:60%;
--flex-65:65%;
--flex-70:70%;
--flex-75:75%;
--flex-80:80%;
--flex-80:85%;
--flex-90:90%;
--flex-100:100%;

/*lineheight*/
--lh-sm: 1.6;
--lh-md: 2;
--lh-lg: 2.5;
}

/*fontfamily*/
.gs {font-family: var(--gs);}
.mn {font-family: var(--mn);}
.en {font-family: var(--en);}

.pa-30 {padding: 30px;}

.ptb-30 {padding: 30px 0;}
.ptb-50 {padding: 50px 0;}
.ptb-100 {padding: 100px 0 80px;}

.pb-30 {padding: 0 0 30px;}
.pb-100 {padding: 0 0 100px;}

/*margin*/
.mb-10 {margin: 0 0 10px;}
.mb-20 {margin: 0 0 20px;}
.mb-30 {margin: 0 0 30px !important;}
.mb-40 {margin: 0 0 40px;}
.mb-50 {margin: 0 0 50px;}
.mb-60 {margin: 0 0 60px;}
.mb-100 {margin: 0 0 100px;}

/*line-height*/
.lh-sm {line-height: var(--lh-sm);}
.lh-md {line-height: var(--lh-md);}
.lh-lg {line-height: var(--lh-lg);}

/*align*/
.m-auto {margin: auto;}
.center {display: block; margin: auto; text-align: center;}
.right {text-align: right;}

/*font-weight*/
.wght-600 {font-weight: 600;}

/*width*/
.flex-70{width:var(--flex-70);}
.flex-80{width:var(--flex-80);}
.flex-90{width:var(--flex-90);}

/*background*/
.bg-pt {background: var(--gray);}
.bg-gray {background: var(--beige);}
.bg-white {background: var(--white);}

/*++++++++++++++++
root end
+++++++++++++++++*/
strong {font-weight: var(--wght-500);}
body {
	font-family: var(--gs);
	background:var(--lightgray);
	/* background: var(--white); */
	overflow-x: hidden;
}


#container {
	width: var(--flex-100);
max-width: var(--flex-100);
border-left: 5px solid var(--white);
	box-sizing: border-box;
border-right: 5px solid var(--white);
height: 100%;
background: var(--beige);
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.inner {
	padding: 4rem 2rem 2rem;
}

.drawer-nav {
	display: none;
}

img {width: auto;max-width: var(--flex-100);}

/*++++++++++++++++
header
+++++++++++++++++*/
header {
	position: absolute;
	top: 0;
	overflow: hidden;
	left: 0;
	right: 0;
	width: auto;
	padding: 20px;
	box-sizing: border-box;
	z-index: 10;
	text-align: center;
}

header figure {width: 250px;margin: auto;}
header figure p {
 	position: relative;
 	z-index: 100;
 	letter-spacing: 6px;
 	font-size: 9px;
 	margin: 5px 0 0;
}

/*++++++++++++++++
columns
+++++++++++++++++*/
.block-columns {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 20px;
}
.block-columns {

}

.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
/*++++++++++++++++
inview
+++++++++++++++++*/
.view-up {
opacity: 0;
transform: translate(0, 10px);
 -webkit-transform: translate(0, 10px);	
transition: .7s;
transition-delay:0.7s;
}

.view-up2 {
opacity: 0;
transform: translate(0, 10px);
-webkit-transform: translate(0, 10px);		
transition: .8s;
transition-delay:0.8s;	
}

.mv-up {
opacity: 1.0;
}
/*++++++++++++++++
hr
+++++++++++++++++*/
.hr {
border-top: 1px solid var(--black);
border-bottom: 1px solid var(--black);
padding: 25px 0 20px;
position: relative;
text-align: center;
}
.hr:before {
content:"";
position: absolute;
width: var(--flex-100);
height: 1px;
top: 2px;
/* border-color: var(--black); */
/* border-top: 1px dashed; */
}
.hr:after  {
content:"";
position: absolute;
width: var(--flex-100);
height: 1px;
bottom: 1px;
/* border-color: var(--black); */
/* border-top: 1px dashed; */
}
/*++++++++++++++++
title
+++++++++++++++++*/
.large-title {
font-size: var(--font-h4);
letter-spacing: 1px;
}
.medium-title {
font-size: var(--font-h5);
letter-spacing: 1px;
}
.small-title {

}

/*下線あり*/
.under-title {
border-bottom: 1px solid var(--black);
max-width: max-content;
padding: 0 0 5px;
}

p {font-size: var(--font-h6);line-height: var(--lh-md);font-weight: 500;}

.h4-title {font-size: var(--font-h4);}
.h5-title {font-size: var(--font-h5);}
.h6-title {font-size: var(--font-h6);}
.em-title {font-size: var(--font-em);}
.mc-title {font-size: var(--font-mc);}


/*++++++++++++++++
title end
+++++++++++++++++*/

.circle img {
max-width: max-content;
margin: 0;
border-radius: 100px;
width: 100px;
height: 100px;
overflow: hidden;
display: block;
margin: 0 auto 0;
border: 5px solid var(--white);
}


/*++++++++++++++++

+++++++++++++++++*/
.benefit_rowbox {
padding: 40px 20px;
/* border: 1px solid var(--darkgray); */
position: relative;
background: var(--beige);
}
.benefit_rowbox .small-title {
 margin: -23% auto 20px;
}
.benefit_rowbox::before {
content: "";
position: absolute;
width: 40px;
height: 40px;
background-color: #fff;
left: 0;
top: 0;
transform: rotate(45deg);
z-index: 2;
border-right: 1px solid var(--darkgray);
border-radius: 20px 0 0 20px;
margin: -21px;
}
.benefit_rowbox::after {
/* 右下の切り欠き部分 */
content: "";
position: absolute;
width: 40px;
height: 40px;
background-color: #fff;
right: 0;
bottom: 0;
border-left: 1px solid var(--darkgray);
transform: rotate(45deg);
z-index: 2;
margin: -21px;
}
.benefit_rowbox dl {
margin: 0 0 20px;
border-bottom: 1px dashed var(--darkgray);
padding: 0 0 20px;
}
.benefit_rowbox dl:last-child {
margin:0;
border: none;
padding: 0;
}
.benefit_rowbox dt {
max-width: max-content;
background: #ff0;
margin: 0 0 10px;
text-align: center;
display: block;
/* font-style: italic; */
}

.benefit_rowbox dd {
	font-size: var(--font-em);
	line-height: var(--lh-sm);
}
.copyright {
	padding: 10px 0;
}


@media screen and (min-width: 600px) {
	body {
		font-size: inherit;
	}	
#container {
max-width: 420px;
}

}

@media screen and (min-width: 1024px) {

/*++++++++++++++++
header
+++++++++++++++++*/
header {
	position: fixed;
	top: 0;
	overflow: hidden;
	left: 19%;
	right: inherit;
	width: auto;
	padding: 50px 0;
	box-sizing: border-box;
	z-index: 10;
	text-align: center;
}

header figure {
width: auto;
margin: auto;
}
header figure p {
 	position: relative;
 	z-index: 100;
 	letter-spacing: 6px;
 	font-size: var(--font-mc);
 	margin: 5px 0 0;
}

header h1 {
font-size: var(--font-h5);
letter-spacing: 1px;
font-family: var(--en);	
}
	
	
.drawer-nav {
display:block;
position: fixed;
z-index: 101;
bottom: 4%;
overflow: hidden;
width: auto;
height: auto;
color: #222;
text-align: right;
left: 26%;
background: none;
top: inherit;
right: inherit !important;
}
.drawer-nav ul li {
margin: 0;
}
.drawer-nav ul li a {
padding: 0 0 20px;
display: block;
color: var(--black);
text-decoration: none;
}	

.drawer-nav ul li dl {

}
.drawer-nav ul li dt {
font-size: var(--font-h4);
}

.drawer-nav ul li dd {
font-size: var(--font-em);	
}
}