@charset "UTF-8";
.page-top{
	background: url(/archive/img/service/kv-bg.jpg) no-repeat center;
	background-size: cover;
	position: relative;
}

.kv{
	position: relative;
	padding-bottom: var(--space-lvl5);
}

.kv h1{
    display: flex;
    justify-content: center;
}

.kv .kv-Title-sub{
	color: var(--white);
	background: var(--hakaruGreen-700);
	font-size: 1.25rem;
	padding: 10px var(--space-lvl4);
	text-align: center;
	line-height: 1.2;
	position: absolute;
	top: -21px;
}

.kv .kv-Title-main{
	background: var(--white);
	font-size:2rem;
	line-height: 1;
	font-weight: bold;
	padding: var(--space-lvl8) 0 var(--space-lvl4) 0;
	max-width: 582px;
	width: 100%;
	display: grid;
	place-content: center;
	place-items: center;
	row-gap: 10px;
}
.kv .kv-Title-main img{
	display: block;
	max-width: 364px;
	height: auto;
}
.kv .kv-Title-main span{
	color: #246DA3;
	font-size: 3rem;
	display: block;
}

@media screen and (max-width:924px) {
	.kv{
		padding-bottom: var(--space-lvl8);
	}
}

@media screen and (max-width:39.9375em) {
	.kv{
		padding-bottom: var(--space-lvl4);
	}
	.kv .kv-Title-sub{
		font-size: 1rem;
	}
	.kv .kv-Title-main{
		font-size: 1.25rem;
	}
	.kv .kv-Title-main span{
		font-size: 1.5rem;
	}
	.kv .kv-Title-main img{
		width: 70%;
	}
}

.lead-area{
	padding-top: 0;
	margin-bottom: 0;
}
.lead-area h2 strong{
	font-weight:700;
}

@media screen and (min-width: 40em) {
	.lead-area h2 {
		margin-bottom:40px;
	}
	.lead-area h2 strong:first-child{font-size:2.25rem;}
	.lead-area h2 span{
		font-size: 2.25rem;
		display: block;
		color: #3d92ad;
	}
	.lead-area h2 strong{color: #3d92ad;}
	.button.online-order:hover{text-decoration: none;}
	.what-online .flex{
		justify-content: space-between;
		margin-bottom: 90px;
	}
	/*.what-online dl{width:33%;}*/
	.what-online dl{width:30%;}
	.what-online dd{font-size: 1.25rem;}
	.what-online dd:nth-of-type(2){
		font-size: 1rem;
		text-align: left;
	}
	.online-flow .flex{
		max-width: 1000px;
	}
	.flowblock{	width: calc((100% - 30px) / 3);}
	.flowttl{
		position: relative;
		padding:15px 0 15px 30px;
		width: 100%;
		border:2px solid;
		border-color:#fff transparent #fff #fff;
		font-size: 1.2rem;
		overflow: hidden;
		/*outline:2px solid #fff;
		outline-offset: -2px;*/
	}
	.flowttl.gray{background-color: #d8d8d8;}
	.flowttl.blue{background-color: #c9e2ea;}
	.flowblock:not(:nth-of-type(3)) .flowttl:after{
		display: inline-block;
		content:'';
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 35px 0 35px 15px;
		/*border-color:transparent transparent transparent #d8d8d8;*/
		/*background-color: #d8d8d8; */
		position: absolute;
		right:18px;
		top:0;
		z-index:1;
	}
	.flowblock:not(:nth-of-type(3)) .flowttl.gray:after{border-color:transparent transparent transparent #d8d8d8;}
	.flowblock:not(:nth-of-type(3)) .flowttl.blue:after{border-color:transparent transparent transparent #c9e2ea;}
	.flowblock:not(:nth-of-type(3)) .flowttl:before{
		display: inline-block;
		content:'';
		width: 0;
		height: 0;
		/*background-color: #fff;	*/
		border-style: solid;
		border-width: 35px 0 35px 15px;
		border-color:transparent transparent transparent #fff;	
		position: absolute;
		right:16px;
		top:0;
		z-index:1;
	}
	.flowttl .flownum{
		display: inline-block;
		font-style: italic;
		font-size: 1.37rem;
		margin-right: 1rem;
	}
	.flowttl .minutes{
		display: inline-block;
		font-size: 0.87rem;
		text-align:center;
		border-radius: 14px; 
		padding:0 10px;
		margin-left: 1rem;
		background-color: rgba(255,255,255,.5)
	}
	.flowcontents{padding:20px 40px; }
	.flowcontents ul li{display:flex;align-items:baseline;}
	.flowcontents ul li:before{
		display: inline-block;
		color: #c1bcbc;
		content:'・';
		transform: scale(1.5);
	}
	.schedule{
		background:url(../img/online/online_back01.png) no-repeat #fff;
		background-position: center;
		background-size: cover; 
	}
	.schedule h3{
		text-shadow: 1px 1px 8px rgba(9,9,9,.5),1px 1px 8px rgba(9,9,9,.5),
		-1px -1px 8px rgba(9,9,9,.5),-1px -1px 8px rgba(9,9,9,.5);
	}
	.schedule ul{box-shadow: 1px 0 11px 8px rgba(0,0,0,.11);}
	.schedule li{
		background:rgba(255,255,255,.8);
		padding:30px 40px; 
		font-size: 1.25rem;
		display: flex;
		align-items: center;
	}
	.schedule li span{font-size: 1.75rem;}
	.schedule li:not(last-child){border-bottom:1px solid #96b6be;}
	.schedule li .button.online-order{
		min-width: 100px;
		padding: 15px 40px;
		font-size: 1rem;
		font-style: normal;
		text-align: center;
		margin-left: auto;
		margin-right: 0;
	}
	.schedule li .button.online-order.disable{
		color: #7b7979;
		background:#d5d5d5;
		box-shadow: none;
		cursor: not-allowed;
	}
	.sec-plan table th{width: 240px;font-size: 1rem;}
	.sec-plan table td{padding-right: 1rem;font-size: 1rem;}
	.sec-plan table td ol li{
		line-height: 1.5;
		margin-bottom: 10px;
	}
	.sec-plan table td ol li strong{font-weight: bold;}
	 .online-contact{margin-bottom:40px;}

/*}*/
/*@media screen and (max-width: 62.438em) {*/

	/*.lead-area {margin-bottom:0;}*/
	.lead-area  p:first-child {
		font-size: 1.25rem;
		text-align: left;
	}
	.lead-area .button.order {
		margin-top:20px;
	    padding-top: 25px;
		line-height: 1.1;
	}
	section{padding: 70px 0;}
}

@media screen and (max-width: 39.9375em) {
	section{padding: 40px 0;}
	.lead-area{
		padding-top: 60px;
	}
	.lead-area h2 {margin-bottom:20px;}
	.lead-area h2 span{
		font-size: 1.4rem;
		display: block;
		color: #3d92ad;
	}
	.lead-area h2 strong{color: #3d92ad;}
	.lead-area p{margin-bottom:20px;}
	.button.online-order{
		max-width: 438px;
	}
	.button.online-order:hover{text-decoration: none;}
	.what-online dl{
		margin-bottom: 30px;
	}
	.what-online dd{
		font-size: 1.25rem;
		margin-bottom: 20px;
	}
	.what-online dd:nth-of-type(2){
		font-size: 1rem;
		text-align: left;
	}
	.flowblock{	width:calc(100% - 30px);}
	.flowttl{
		padding:15px 0 15px 30px;
		width: 100%;
		border:2px solid #fff;
		font-size: 1.2rem;
	}
	.flowttl.gray{background-color: #d8d8d8;}
	.flowttl.blue{background-color: #c9e2ea;}
	.flowttl .flownum{
		display: inline-block;
		font-style: italic;
		font-size: 1.37rem;
		margin-right: 1rem;
	}
	.flowttl .minutes{
		display: inline-block;
		font-size: 0.87rem;
		text-align:center;
		border-radius: 14px; 
		padding:0 10px;
		margin-left: 1rem;
		background-color: rgba(255,255,255,.5)
	}
	.flowcontents{padding:20px 40px;}
	.flowcontents ul li:before{
		display: inline-block;
		color: #c1bcbc;
		content:'・';
		transform: scale(1.5);
	}
	.schedule{
		background:url(../img/online/online_back01.png) no-repeat #fff;
		background-position: center;
		background-size: cover; 
	}
	.schedule h3{
		text-shadow: 1px 1px 8px rgba(9,9,9,.5),1px 1px 8px rgba(9,9,9,.5),
		-1px -1px 8px rgba(9,9,9,.5),-1px -1px 8px rgba(9,9,9,.5);
	}
	.schedule ul{box-shadow: 1px 0 11px 8px rgba(0,0,0,.11);}
	.schedule li{
		background:rgba(255,255,255,.8);
		padding:30px 40px; 
		font-size: 1.25rem;
		text-align: center;
	}
	.schedule li span{font-size: 1.75rem;}
	.schedule li:not(last-child){border-bottom:1px solid #96b6be;}
	.schedule li .button.online-order{
		padding: 15px 0px;
		font-size: 1rem;
		font-style: normal;
		text-align: center;
		margin-top: 10px;
	}
	.schedule li .button.online-order.disable{
		color: #7b7979;
		background:#d5d5d5;
		box-shadow: none;
		cursor: not-allowed;
	}
	.sec-plan table th{width: 90px;}
	.sec-plan table td{padding-right: 1rem;}
	.sec-plan table td ol li{
		line-height: 1.5;
		margin-bottom: 10px;
	}
	 .online-contact{margin-bottom:20px;}
	.text-note{font-size:75%;}
}

/* このような方におすすめ */
.recomennd-wrap {
    background-color: rgba(255, 255, 255, 0.9);
}

.recomennd-lists-wrapper{
	border: 1px solid #CCCCCC;
	display: flex;
    justify-content: center;
	margin-bottom: 70px;
}

.recomennd-lists {
    padding: 40px 0 30px 0;
}

.recomennd-lists li {
	margin-bottom: 10px;
	padding-left: 32px;
	background: url(/img/seminar/seminar_check.png) no-repeat left top 3px;
}

.recomennd-lists li strong{
	font-weight: bold;
}

@media screen and (max-width:1000px) {
    .recomennd-lists {
        padding: 40px 1rem 30px 1rem;
    }
}
@media screen and (max-width:39.9375em) {
	.recomennd-lists-wrapper{
		margin-bottom: 40px;
	}
}
/* ボタン */
.button-request{
	margin-inline: auto;
	width: 100%;
	max-width: 438px;
	padding: 30px 0;
	font-size: 1.5rem;
	line-height: 1.8;
}

@media screen and (max-width:39.9375em) {
	.button-request{
		max-width: 400px;
		font-size: 1rem;
	}
}

/* button */
.nc-button {
  font-weight: normal;
  font-style: normal;
  &::after {
    display: none;
  }
}