@charset "UTF-8";

:root{
	--color-scalp: #84C0FF;
}

/* layout
++--------------------------------------------++*/
h2{font-size: 32px; font-size: 3.2rem;}
h3{font-size: 16px; font-size: 1.6rem;}

.menu-banner img{
	display: block;
	margin: 0 auto 6em;}

/* sec 1
++--------------------------------------------++*/
.sec1{
	margin: 0 auto 0em;}

.sec1 h2{
	font-family: var(--font-mincho);
	text-align: center;
	padding: 0 1em 1em;}

.sec1 h2 span{
	color: var(--color-scalp);}

/*@media (min-width: 1025px){
	.sec1-div{
		padding: 0 0 1em 10em;}
}

@media (max-width: 1024px){
	.sec1-div{
		width: 90%;
		margin: 0 auto;}
}*/

/* sec2
++--------------------------------------------++*/
.sec2{
	margin: 0 auto 3em;}

.sec2-right{
	padding: 0 0 0 2em;}

.sec2-right h2{
	font-size: 21px; font-size: 2.1rem;
	padding: 0 0 1em;}

@media (min-width: 1025px){
	.sec2-fix{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;}

	.sec2-left{
		flex: 1;
		margin-right: 1em;}
/*		flex: 0 0 350px;}*/

	.sec2-right{
		flex: 2;}
}

@media (max-width: 1024px){
	.sec2-left{
		width: 70%;
		margin: 0 auto 1em;}

	.sec2-right{
		padding: 0 1em;}
}

/* sec 3
++--------------------------------------------++*/
.sec3-bk{
	background: #D9EBFA;
	margin: 0 auto 3em;}

.sec3{
	background: url(../../../uploads/img/scalp/08.png) top right no-repeat;
	background-size: contain;
	padding: 3em 0;}

.sec3 h2{
	font-size: 26px; font-size: 2.6rem;
	text-align: center;
	padding: 0 0 0.5em;}

.sec3-div1 p{
	font-size: 19px; font-size: 1.9rem;
	padding: 0;}

.sec3-div1 ul{
	list-style: none none inside;
	margin-left: 1em;
	font-size: 16px; font-size: 1.6rem;}

.sec3-div1 ul:after{
	content:"";
	display: block;
	clear: both;}

.sec3-div1 ul li{
	color: #000;
	float: left;
	display: block;
	width: 150px;
	text-align: center;
	background: #D9EBFA;
	margin: 1.5em 1em;
	padding: 0.5em 0;}

.sec3-div1 dl dt{
	color: #2B9BFA;
	font-weight: bold;}

.sec3-wrapper{
	border: 4px double #2B9BFA;
	color: #1A1A1A;
	background: rgba(255,255,255,0.8);}

@media (min-width: 1025px){
	.sec3-div1{
		padding: 0 0 0 5em;}

	.sec3-wrapper{
		width: 800px;
		padding: 2em 2em;}
}

@media (max-width: 1024px){
	.sec3-wrapper{
		width: 95%;
		margin: 0 auto;
		padding: 2em 1em;}
}

/* sec 4
++--------------------------------------------++*/
.sec4-bk{
	margin: 0 auto 3em;}

.sec4 h2{
	font-family: var(--font-mincho);
	text-align: center;
	padding: 0 0 1em;}

.sec4 h2 span{
	color: var(--color-scalp);}

.sec4 h3{
	position: relative;
	font-size: 21px; font-size: 2.1rem;
	padding: 5px 0px 5px 3em;
	background: #84C0FF;
	color: #fff;
	margin: 0em 0 1em -1em;
	z-index:-1;}

.sec4 h3:before {
	position: absolute;
	content: '';
	left: -2px;
	top: -2px;
	border-left: solid 40px #fff;
	border-bottom: solid 79px transparent;
	z-index:-2}

.sec4 ul li{
	margin: 0 auto 3em;}

@media (min-width: 1025px){
	/*clear fix*/
	.sec4-fix{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;}

	.sec4-left{
		padding: 0 2em 0 0;}

	.sec4-right{
		flex: 0 0 350px}
}

@media (max-width: 1024px){
	.sec4-left{
		width: 90%;
		margin: 0 auto 2em;}

	.sec4-right{
		width: 80%;
		margin: 0 auto;
	}
}


/* flow
++--------------------------------------------++*/
.flow-sec p{
	padding: 2em 0 0em 2em;
	text-align: left;}

.flow-list li ul{
	list-style: disc none outside;
	padding: 0 0 0 1.5em;}

.flow-list li ol{
	list-style: decimal none inside;}


/* 2024
++--------------------------------------------++*/
.sec1 .bl_flex{
	margin-bottom: 16px;
}

@media (max-width: 767px){
	.sec1 .bl_flex figure{
		width: 80%;
		margin: 0 auto;
	}
	.sec1 .bl_flex figure:first-of-type{
		margin-bottom: 16px;
	}
}