@charset "utf-8";

.page-header .inner:before {background-image: url(../img/concept/page-header-img.png);}
.bottom-arrow {width: 0; height: 0; border-style: solid; border-width: 30px 35px 0 35px;	border-color: #d7dbe3 transparent transparent transparent;margin: 5rem auto;position: relative;z-index: 2;}
.bottom-arrow + .bottom-arrow {margin-top: -3rem;}

/* -------------------------------------------------- */
/* .block02 */
/* -------------------------------------------------- */
.block02 {margin-top: -12rem;position: relative;z-index: 2;}
.block02 .box {background: left top / 13rem no-repeat;padding: 3rem 6rem 3rem 17rem;min-height: 14rem}
.block02 .inner {padding-bottom: 0;}
.block02 .box:nth-child(1) {background-color: #5476b2;background-image: url(../img/concept/block02-point01.png);border-radius: 1rem 1rem 0 0;}
.block02 .box:nth-child(2) {background-color: #3b5c96;background-image: url(../img/concept/block02-point02.png);}
.block02 .box:nth-child(3) {background-color: #28477d;background-image: url(../img/concept/block02-point03.png);border-radius: 0 0 1rem 1rem;}
.block02 h3 {color: #f6ff00;font-size: 2rem;font-weight: bold;margin-bottom: 1rem;}
.block02 p {color: #fff;}


/* -------------------------------------------------- */
/* .block03 */
/* -------------------------------------------------- */
.block03 {margin-top: -18rem;}
.block03:after {background-image: url(../img/contents-wave01.png);bottom: 0;}
.block03 .inner {padding-top: 10rem;padding-bottom: 16rem;}
.block03 .box {border-radius: 1rem;}
.block03 .box .ttl h3 {color: #fff;font-size: 1.8rem;display: flex;align-items: center; position: relative;}
.block03 .box .ttl h3:before {content: '';width: 2em;height: 2em;display: inline-block;margin: 1rem	1rem 1rem 1.5rem ;background: center / cover no-repeat;} 
.block03 .box .ttl p {flex: 1;}
.block03 .box .ttl p em {font-weight: bold;font-size: 1.8rem;}
.block03 .box figure {text-align: center;}

.block03 .box.box1 .ttl h3 {background-color: #3d45e6;}
.block03 .box.box2 .ttl h3 {background-color: #3da4e6;}
.block03 .box.box3 .ttl h3 {background-color: #29c463;}
.block03 .box.box4 .ttl h3 {background-color: #e8b11b;}

.block03 .box.box1 .ttl p {color: #3d45e6;}
.block03 .box.box2 .ttl p {color: #3da4e6;}
.block03 .box.box3 .ttl p {color: #29c463;}
.block03 .box.box4 .ttl p {color: #e8b11b;}

.block03 .box.box1 .ttl h3:before {background-image: url(../img/concept/icon-file.svg);}
.block03 .box.box2 .ttl h3:before {background-image: url(../img/concept/icon-pc.svg);}
.block03 .box.box3 .ttl h3:before {background-image: url(../img/concept/icon-money.svg);}
.block03 .box.box4 .ttl h3:before {background-image: url(../img/concept/icon-suport.svg);}
.block03 .box.box1 figure img {width: 839px;}
.block03 .box.box2 figure img {width: 912px;}
.block03 .box.box3 figure img {width: 889px;}
.block03 .box.box4 figure img {width: 752px;}

.block03 .btn-blue {display: block;max-width: 40rem;margin: auto;}


/* -------------------------------------------------- */
/* .block04 */
/* -------------------------------------------------- */
.block04 .inner {padding-top: 5rem;}
.block04 ul {flex-wrap: wrap;}
.block04 ul li {margin-right: 2rem;}
.block04 ul li .img {background-color: #f2f5fa;border-radius: 1rem;text-align: center;padding: 2rem 1rem;}
.block04 ul li h3 {font-size: 1.8rem;margin-top: 1rem;}
.block04 ul li p {font-size: 1.4rem;padding: 1.5rem;}

/* -------------------------------------------------- */
/* .block05 */
/* -------------------------------------------------- */
.block05 .youtube {	width: 100%;	height: 0;	position: relative;	padding-top: 56.25%;	overflow: hidden;}
.block05 .youtube iframe {	position: absolute;	top: 0;	left: 0;	width: 100% !important;	height: 100% !important;}


/* ======================================================================================================================= */
/* for pc */
/* ======================================================================================================================= */
@media screen and (min-width:800px){

	/* -------------------------------------------------- */
	/* .block03 */
	/* -------------------------------------------------- */
	.block03 .box {padding: 2rem 4rem 4rem;}
	.block03 .box .ttl {display: flex;align-items: center;margin-left: -5rem;margin-bottom: 2rem;}
	.block03 .box .ttl h3 {width: 20rem;height: 11rem;margin-right: 3rem;}
	.block03 .box .ttl h3:after {content: '';display: block;	width:2rem;	height:100%;position: absolute;right: 0;top: 0;
		background:linear-gradient(to bottom left, #fff 50%, rgba(255, 255, 255, 0) 50%) top left/ 100% 50% no-repeat,linear-gradient(to top left, #fff 50%, rgba(255, 255, 255, 0) 50%) bottom left / 100% 50% no-repeat;}

	/* -------------------------------------------------- */
	/* .block04 */
	/* -------------------------------------------------- */
	.block04 ul li {width: calc( 25% - 15px );margin-right: 2rem;}
	.block04 ul li:nth-child(4n) {margin-right: 0;}
	.block04 ul li:nth-child(-n + 4) {margin-bottom: 4rem;}

	/* -------------------------------------------------- */
	/* .block05 */
	/* -------------------------------------------------- */
	.block05 .inner {padding-top: 0;}
	.block05 h2 {position: relative;display: flex;align-items: center;}
	.block05 h2:before,
	.block05 h2:after {content:'' ;display: inline-block;flex: 1; height: 1px;background-color: #203a69;}
	.block05 h2:before{margin-right: 3rem;}
	.block05 h2:after {margin-left: 3rem;}
}
/* ======================================================================================================================= */
/* for tablet */
/* ======================================================================================================================= */
@media screen and (max-width:1059px){
}

/* ======================================================================================================================= */
/* for sp */
/* ======================================================================================================================= */
@media screen and (max-width:799px){

	/* -------------------------------------------------- */
	/* .block02 */
	/* -------------------------------------------------- */
	.block02 {margin-top: -10rem;}
	.block02 .box {background-size: auto 10rem;padding-left: 13rem;padding-right: 4rem;}
	.block02 h3 {font-size: 1.8rem;}

	/* -------------------------------------------------- */
	/* .block03 */
	/* -------------------------------------------------- */
	.block03 .inner {padding-bottom: 8rem;}
	.block03 .box {overflow: hidden;}
	.block03 .ttl p {padding: 2rem 3%;}
	.block03 figure {padding: 0 4% 3rem;}

	/* -------------------------------------------------- */
	/* .block04 */
	/* -------------------------------------------------- */
	.block04 ul li {width: calc( 33% - 13px );}
	.block04 ul li:nth-child(3n) {margin-right: 0;}
	.block04 ul li:nth-child(-n + 6) {margin-bottom: 4rem;}

	/* -------------------------------------------------- */
	/* .block05 */
	/* -------------------------------------------------- */
	.block05 .inner {padding-top: 0;}
}

@media screen and (max-width: 600px) {

	/* -------------------------------------------------- */
	/* .block04 */
	/* -------------------------------------------------- */
	.block04 ul li {width: calc( 50% - 10px );}
	.block04 ul li:nth-child(3n) {margin-right: 2rem;}
	.block04 ul li:nth-child(even) {margin-right: 0;}
	.block04 ul li:nth-child(-n + 6) {margin-bottom: 4rem;}
}

@media screen and (max-width: 400px) {
	.bottom-arrow {margin: 3rem auto;}
	.bottom-arrow + .bottom-arrow {margin-top: -1rem;}
	/* -------------------------------------------------- */
	/* .block02 */
	/* -------------------------------------------------- */
	.block02 {margin-top: 0;}
	.block02 .box {background-size: auto 7rem;padding: 2rem 2rem 2rem 10rem;}


	/* -------------------------------------------------- */
	/* .block04 */
	/* -------------------------------------------------- */
	.block04 ul li .img figure {width: 60%;margin: auto;}
}