@charset "UTF-8";


.logo-scale{
	transform: translateY(50px);
	opacity: 0;
}
.logo-scale.on{
	transform: translateY(0);
	opacity: 0.1;
	transition: transform 1100ms ease ,opacity 800ms ease;
}
.thinknext-txt,
.thinknext-col figure{
	transform: translateY(50px);
	opacity: 0;	
}
.thinknext-txt.on,
.thinknext-col figure.on{
	transform: translateY(0);
	opacity: 1;
	transition: transform 400ms ease,opacity 400ms ease;
}
.contents-header .logo{
	opacity: 0;
}
.onload .contents-header .logo{
	opacity: 1;
	transition: opacity 400ms ease 500ms;
}
.line-svg{
	position: absolute;
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5,
.circle6{
	position: absolute;	
}
.thinknext-col mask *{
	fill:none;stroke:#fff;stroke-width:4;stroke-miterlimit:10;
}


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

	#statement .sec-inner{
		padding: 100px 10px 0;
	}
	.sec-bk{
		padding: 0 0 250px;
	}
	.sec-bk:after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		width: 100%;
		height: 200%;
		border-radius: 30px 30px 0 0;
		background: url(../img/bg.jpg) 0 0 repeat;
		z-index: 10;
	}
	.thinknext-col p{
		color: #fff;
		font-size: 45px;
		letter-spacing: -1px;
		line-height: 1.8;
	}
	.thinknext-col figure img{
		border-radius: 6px;
	}
	.thinknext-col figure{
		z-index: 10;
	}
	.thinknext-txt{
		position: relative;
		z-index: 20;
	}
	.thinknext-col-inner{
		position: relative;
		display: flex;
		justify-content: space-between;
	}
	.statement-box-inner{
		width: 1220px;
		transform-origin: top left;		
	}
	.contents-header .logo{
		position: absolute;
		margin: auto;
		top: 0;
		right: 80px;
		z-index: 40;
	}

	.line_col1_sp1,
	.line_col1_sp2,
	.line_col2_sp,
	.line_col3_sp,
	.line_col4_sp1,
	.line_col4_sp2,
	.line_col5_sp,
	.line_col6_sp{
		display: none;
	}



	/* thinknext-col1
	===============================================================*/

	.thinknext-col1 figure{
		position: absolute;
		top: 60px;
		right: 0;
		width: 575px;
	}
	.circle1{
		left: -25px;
		bottom: -15px;
		width: 323px;
		height: 103px;
	}
	.line_col1{
		left: 0;
		bottom: 15px;
		width: 740px;
		height: 12px;
	}


	/* thinknext-col2
	===============================================================*/
	.thinknext-col2{
		margin: 185px 0 0;
	}
	.thinknext-col2 figure{
		position: absolute;
		top: 0;
		left: 0;
		width: 512px;
	}
	.thinknext-col2 .thinknext-col-inner{
		justify-content: flex-end;
	}
	.thinknext-col2 .thinknext-txt{
		position: relative;
		margin: 236px 0 0;
	}
	.circle2{
		left: -30px;
		bottom: -15px;
		width: 279px;
		height: 102px;
	}
	.line_col2{
		left: 0;
		bottom: 20px;
		width: 443px;
		height: 8px;
	}


	/* thinknext-col3
	===============================================================*/
	.thinknext-col3{
		margin: 240px 0 0;
	}
	.thinknext-col3 figure{
		position: absolute;
		top: 0;
		right: 0;
		width: 512px;
	}
	.line_col3{
		left: 0;
		bottom: 20px;
		width: 608px;
		height: 9px;
	}

	/* thinknext-col4
	===============================================================*/
	.thinknext-col4{
		margin: 210px 0 0;
	}
	.thinknext-col4 figure{
		position: absolute;
		left: 0;
		width: 395px;
	}
	.thinknext-col4 .thinknext-col-inner{
		justify-content: flex-end;
	}
	.thinknext-col4 .thinknext-txt{
		position: relative;
		margin: 140px 50px 0 0;
	}
	.circle4{
		top: 75px;
		right: 10px;
		width: 198px;
		height: 103px;
	}
	.line_col4{
		left: 0;
		bottom: 20px;
		width: 608px;
		height: 9px;
	}

	/* thinknext-col5
	===============================================================*/
	.thinknext-col5{
		margin: 270px 0 0;
	}
	.thinknext-col5 figure{
		position: absolute;
		top: 0;
		right: 0;
		width: 610px;
	}
	.thinknext-col5 .thinknext-txt{
		position: relative;
		margin: 50px 0 0;
	}
	.circle5{
		left: -30px;
		bottom: -15px;
		width: 172px;
		height: 103px;
	}

	/* thinknext-col6
	===============================================================*/
	.thinknext-col6{
		margin: 380px 0 0;
	}
	.thinknext-col6 .thinknext-col-inner{
		justify-content: center;
		text-align: center;
	}
	.line_col6{
		left: -10px;
		bottom: 100px;
		width: 570px;
		height: 8px;
	}


}



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

	#statement .sec-inner{
		padding: 130px 20px 0;
	}
	.sec-bk{
		padding: 0 0 130px;
	}
	.sec-bk:after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		width: 100%;
		height: 200%;
		border-radius: 20px 20px 0 0;
		background: url(../img/bg.jpg) 0 0 repeat;
		z-index: 10;
	}
	.thinknext-col p{
		color: #fff;
		font-size: 40px;
		letter-spacing: -1px;
		line-height: 2;
	}
	.thinknext-col figure img{
		border-radius: 12px;
	}
	.thinknext-col figure{
		z-index: 10;
	}
	.thinknext-txt{
		position: relative;
		z-index: 20;
	}
	.thinknext-col-inner{
		position: relative;
		display: flex;
		align-items: center;
	}
	.statement-box-inner{
		width: 710px;
		transform-origin: top left;		
	}

	.contents-header .logo{
		position: absolute;
		margin: auto;
		width: 100px;
		height: 128px;
		top: 0;
		right: 20px;
		z-index: 40;
	}

	.line_col1,
	.line_col2,
	.line_col3,
	.line_col4,
	.line_col5,
	.line_col6{
		display: none;
	}


	/* thinknext-col1
	===============================================================*/

	.thinknext-col1 figure{
		position: absolute;
		right: 0;
		bottom: -100px;
		width: 420px;
	}
	.circle1{
		position: absolute;
		left: -20px;
		bottom: 65px;
		width: 302px;
	}
	.line_col1_sp1{
		left: 0;
		bottom: 95px;
		width: 300px;
	}
	.line_col1_sp2{
		left: 0;
		bottom: 15px;
		width: 348px;
	}

	/* thinknext-col2
	===============================================================*/
	.thinknext-col2{
		margin: 200px 0 0;
	}
	.thinknext-col2 figure{
		position: absolute;
		top: 0;
		left: 0;
		width: 252px;
	}
	.thinknext-col2 .thinknext-col-inner{
		justify-content: flex-end;
	}
	.thinknext-col2 .thinknext-txt{
		position: relative;
		margin: 80px 0 0 0;
	}
	.circle2{
		left: -20px;
		bottom: -10px;
		width: 240px;
	}
	.line_col2_sp{
		left: 0;
		bottom: 10px;
		width: 382px;
	}

	/* thinknext-col3
	===============================================================*/
	.thinknext-col3{
		margin: 110px 0 0;
	}
	.thinknext-col3 figure{
		position: absolute;
		top: 0;
		right: 0;
		width: 412px;
	}
	.thinknext-col3 .thinknext-txt{
		position: relative;
		margin: 76px 0 0 0;
		z-index: 20;
	}
	.line_col3_sp{
		left: 0;
		bottom: 15px;
		width: 552px;
	}

	/* thinknext-col4
	===============================================================*/
	.thinknext-col4{
		margin: 160px 0 0;
	}
	.thinknext-col4 figure{
		position: absolute;
		top: 80px;
		left: 0;
		width: 240px;
	}
	.thinknext-col4 .thinknext-txt{
		position: relative;
	}
	.thinknext-col4 .thinknext-col-inner{
		justify-content: flex-end;
	}
	.circle4{
		top: 239px;
		left: 95px;
		width: 162px;
	}

	.line_col4_sp1{
		left: 0;
		bottom: 90px;
		width: 416px;
	}
	.line_col4_sp2{
		left: 0;
		bottom: 10px;
		width: 244px;
	}

	/* thinknext-col5
	===============================================================*/
	.thinknext-col5{
		margin: 170px 0 0;
	}
	.thinknext-col5 figure{
		position: absolute;
		top: 40px;
		right: 0;
		width: 532px;
	}
	.thinknext-col5 .thinknext-txt{
		position: relative;
		z-index: 20;
	}
	.circle5{
		left: -30px;
		top: -5px;
		width: 162px;
	}


	/* thinknext-col6
	===============================================================*/
	.thinknext-col6{
		margin: 346px 0 0;
	}
	.thinknext-col6 .thinknext-col-inner{
		justify-content: center;
		text-align: center;
	}
	.thinknext-col6 p{
		font-size: 44px;
	}
	.line_col6_sp{
		left: 0;
		bottom: 100px;
		width: 534px;
	}



}


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


}