@charset "utf-8";

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* テキスト出現アニメーション */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

.scrollText{
	font-size: clamp(2rem,3.4vw,6rem);
	font-weight:700;
	line-height: 1.6667;
	letter-spacing: -0.05em;
}

.scrollText .char{
	display:inline-block;
	color:rgba(0,0,0,.15);
	transition:color .2s linear;
}

.scrollText .char.active{
	color:#555;
}

.scrollText .char.blue.active{
	color:#6FA6E8;
}
.scrollText .char.pink.active{
	color:#E8858D;
}
.scrollText .char.green.active{
	color:#68BC8F;
}
.scrollText .char.orange.active{
	color:#EAA276;
}

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

.scrollText{
	line-height:1.4;
}
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* テキスト出現アニメーション終了 */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* スライダーテキスト */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */


.text_slider{
	width:100%;
	overflow:hidden;
	white-space:nowrap;
	position:relative;
}

.text_slider_track{
	display:flex;
	width:max-content;
	animation:scrollText 20s linear infinite;
}

.text_slider_track span{
	font-size: 5rem;
	font-size: clamp(1.5rem,2.7vw,5rem);
	font-weight: 700;
	padding-right: 100px;
	flex-shrink:0;
	line-height: 1.44;
}

@keyframes scrollText{
	from{
		transform:translateX(0);
	}
	to{
		transform:translateX(-50%);
	}
}


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

	.text_slider_track span{
	padding-right: 50px;
	}
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* テキスト出現終了 */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */



/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* 三角アニメーション */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */



.diagram{
	position:relative;
	margin:auto;
	max-width: 781px;
	height: 725px;
	width: 781px;
	flex-shrink: 0;
}

.triangle{
	position:absolute;
	inset:0;
	transform-origin:center;
}

.line{
	position:absolute;
	height: 7px;
	background:#fff;
	transform-origin:left center;
	opacity:0;
}

.line1{
	width: 18%;
	left: 47%;
	top: 44.5%;
	transform:
		rotate(120deg)
		scaleX(0);
}

.line2{
	width: 19.463%;
	left: 0;
	top: 65%;
	transform:scaleX(0);
	right: 0;
	margin: auto;
}

.line3{
	width: 18%;
	left: 53.5%;
	top: 44.5%;
	transform:
		rotate(60deg)
		scaleX(0);
}

.circle{
	position:absolute;
	width: 43.663%;
	aspect-ratio:1/1;
	border-radius:50%;
	background:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	transform:
		translate(-50%,-50%)
		scale(0);
	opacity:0;
	z-index:2;
}

.circle.top{
	left: 0;
	right: 0;
	margin: auto;
}

.circle.left{
	left:18%;
	top:72%;
	left: 0;
	bottom: 0;
	top: auto;
}

.circle.right{
	left:82%;
	top:72%;
	right: 0;
	bottom: 0;
	top: auto;
	left: auto;
}

.circle span{
	font-size: 4.4rem;
	font-weight:700;
	color:#6FA6E8;
	opacity:0;
	transform:translateY(10px);
	text-align:center;
	line-height:1.25;
}

.circle span.orange{
color: #EAA276;
}

.circle span.green{
color: #68BC8F;
}

.circle span.pink{
color: #E8858D;
}

.diagram.active .triangle{
	animation:
		triangleRotate 1s ease forwards;
}

.diagram.active .line1{
	animation:
		line1Show .5s ease forwards .2s;
}

.diagram.active .line2{
	animation:
		line2Show .5s ease forwards .35s;
}

.diagram.active .line3{
	animation:
		line3Show .5s ease forwards .5s;
}

.diagram.active .circle.top{
	animation:
		circleShow .5s cubic-bezier(.17,.89,.32,1.4) forwards .9s;
}

.diagram.active .circle.left{
	animation:
		circleShow .5s cubic-bezier(.17,.89,.32,1.4) forwards 1.05s;
}

.diagram.active .circle.right{
	animation:
		circleShow .5s cubic-bezier(.17,.89,.32,1.4) forwards 1.2s;
}

.diagram.active .circle span{
	animation:
		textShow .5s ease forwards 1.6s;
}


@keyframes triangleRotate{
	from{
		transform: rotate(-180deg);
	}
	to{
		transform:rotate(0deg);
	}
}

@keyframes line1Show{
	to{
		opacity:1;
		transform:
			rotate(120deg)
			scaleX(1);
	}
}

@keyframes line2Show{
	to{
		opacity:1;
		transform:scaleX(1);
	}
}

@keyframes line3Show{
	to{
		opacity:1;
		transform:
			rotate(60deg)
			scaleX(1);
	}
}

@keyframes circleShow{

	0%{
		opacity:0;
		transform: translate(0%,0%)
   scale(0);
	}

	70%{
		opacity:1;
		transform: translate(0%,0%)
   scale(1.08);
	}

	100%{
		opacity:1;
		transform: translate(0%,0%)
   scale(1);
	}
}

@keyframes textShow{
	to{
		opacity:1;
		transform:translateY(0);
	}
}

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

.diagram {
    height: 557px;
    width: 600px;
}

.circle span {
    font-size: 3.6rem;
}

}

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

.diagram {
    height: 464px;
    width: 500px;
}

.circle span {
    font-size: 3rem;
}

}

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

.diagram {
    height: 371px;
    width: 400px;
}

.circle span {
    font-size: 2.4rem;
}

}

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

.diagram {
	margin:0 auto
}


}

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

.diagram {
    height: 281px;
    width: 303px;
}

.circle span {
    font-size: 1.7rem;
}


}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* 三角アニメーション終了 */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */




/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* overlap */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */


.overlap_area{
	position:relative;
	width: 100%;
	margin:auto;
}

.overlap_sticky{
	position:sticky;
	top:0;
	height: 100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}

.overlap_cont{
	position:absolute;
	width:100%;
	background:#fff;
	border-radius: 10px;
	padding: 5.264% 4.679%;
	display:flex;
	opacity:0;
	transform:
		translateY(120px)
		scale(.9);
	transition:
		opacity .15s linear,
		transform .15s linear;
	justify-content: space-between;
	align-items: flex-start;
	top: 120px;
	min-height: 410px;
}

.overlap_area .text_area{
	width: 52%;
	max-width: 780px;
}

.overlap_area .text1{
	margin-bottom: 6.54%;
	color: #fff;
	padding: 0 15px;
	max-width: max-content;
	font-size: clamp(1.5rem,2.4vw,2.5rem);
	line-height: 1.48;
}

.overlap_area .title{
	font-size: 6rem;
	line-height: 1.45;
	margin-bottom: 5.13%;
	font-size: clamp(2.4rem, 3.7vw, 6rem);
	font-weight: 700;
}

.overlap_area .text2{
	font-size: clamp(1.5rem, 1.4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.48;
}

.overlap_area .img{
	width: 45%;
	max-width: 690px;
}

.overlap_area .img img{
	width:100%;
	display:block;
	height:auto;
}

@media screen and (max-width:1200px){
.overlap_cont{
	top:150px;
}
}

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

	.overlap_cont{
		flex-direction:column-reverse;
		padding: 45px 16px 7px;
		border-radius:10px;
	}

	
	.overlap_area .img{
		max-width:400px;
		height: 40vw;
	}

	.overlap_area .img img{
		width:100%;
		height:100%;
		object-fit:cover;
		object-position:center;
	}

	.overlap_area .text_area{
		max-width: initial;
	}
	
	.overlap_area .text_area,
	.overlap_area .img{
		width:100%;
		margin: 0 auto 20px;
	}

	.overlap_area .title{
	margin-bottom: 15px;
	}

    .overlap_cont {
        top: 90px;
    }

	.overlap_area .text1{
		margin-bottom: 19px;
		padding: 0 14px;
	}
}


@media screen and (max-width:591px){
	    .overlap_cont {
        top: 70px;
    }
}


@media screen and (max-width:414px){
	    .overlap_cont {
        top: 40px;
    }
	.overlap_cont{
		padding: 15px 16px 7px;
	}
}



/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* overlap終了 */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */



/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* 横スクロール */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */


.horizontal_wrap{
	position:relative;
	height: 1800px;
}

.horizontal_sticky{
	position:sticky;
	top: 20%;
	display:flex;
	overflow:hidden;
	height: 550px;
	align-items: flex-start;
	padding-top: 90px;
}

.horizontal_content{
	display:flex;
	align-items:center;
	will-change:transform;
}


.co4_list1{
	display:flex;
}

.co4_list1 li{
	width:406px;
	background:#fff;
	border-radius: 10px;
	padding:40px 30px;
	margin-right: 40px;
}

.co4_list1 li .title_area{
	margin-bottom:30px;
}

.co4_list1 li .text{
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.48;
	text-align: center;
}

.co4_list1 li .title1{
	font-size: 5.5rem;
	line-height: 1.4545;
	font-weight: 700;
	text-align: center;
	margin-bottom: 40px;
}

.co4_list1 li .icon{
	margin: 0 auto 20px;
	text-align: center;
}


.co4_list1 li .text1{
	font-size:3.2rem;
	font-weight:700;
	line-height:1.4375;
	text-align:center;
}

.co4_list1 li .text2{
	font-size:1.8rem;
	line-height:1.444;
	font-weight:500;
	text-align:center;
}

.co4_list1 li .big{
	font-size:9rem;
	line-height:1;
	margin: 0 10px;
	font-weight: 400;
}
@media screen and (max-width:1200px){
.horizontal_sticky{
	top: 10%;
}
}

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


	.horizontal_wrap{
		height:auto !important;
		margin-top: 32px;
	}

	.horizontal_sticky{
		position:relative;
		top:auto;
		height:auto;
		overflow:visible;
		padding-top:0;
	}

	.horizontal_content{
		transform:none !important;
		width: 100%;
	}
	
	.horizontal_content .panel{
		width:100%;
	}

	.co4_list1{
		display:block;
		width: 100%;
	}

	.co4_list1 li{
		width:100%;
		min-width:initial;
		margin: 0 auto 30px;
		padding: 24px;
		max-width: 400px;
	}

	.co4_list1 li .text {
    font-size: 1.4rem;
		line-height:1.5;
	}

.co4_list1 li .title1{
	font-size:2.4rem;
	line-height:1.458333;
	margin: 0 auto;
}

.co4_list1 li .title_area {
    margin-bottom: 7px;
}

.co4_list1 li .icon{
	width:86px;
}
	
.co4_list1 li .big{
	font-size: 5.6rem;
}

	.co4_list1 li .text1{
		font-size:2.4rem;
	}
	
.co4_list1 li .text2{
	font-size:1.4rem;
}
	
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* 横スクロール終了 */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */