@charset "UTF-8";
.outline::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/index/bg_line.webp) no-repeat calc(50% + 108px) 888px / 2997px auto;
	z-index: -1;
}
.main > .bg {position: absolute;left: 50%;top: 100px;width: 1500px;height: 1500px;z-index: -1;transform: translate(-50%, 0);}
.main > .bg .img {height: 100%;width: 100%;position: relative;}
.main > .bg .img::after {
	content: "";
	background: url(../images/index/img_visual.webp) no-repeat center center / 1500px 1500px;
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 70%;
	height: 70%;
	opacity: 1;
	transform: translate(-50%, -50%);
	transition: 1s all ease;
	opacity: 0;
	border-radius: 2000px;
}
.main > .bg.active .img::after {
	opacity: 1;
	width: 100%;
	height: 100%;
}
.main > .bg .img img {width: 100%;height: 100%;opacity: 0.25;}
.main > .bg .textstyle {
}
.main .visual {
    padding-top: 340px;
}
.main .visual > .inner {
    max-width: 1240px;
    margin: 0 auto;
    width: 94%;
    position: relative;
}
.main .visual h1 {
	width: 253px;
	opacity: 0;
	position: relative;
	top: 20px;
	transition: 1s ease all +0.5s;
}
.main .visual.active h1 {
	top: 0;
	opacity: 1;
}
.main .visual .logo {
	width: 240px;
	position: absolute;
	right: 130px;
	top: -20px;
	box-sizing: border-box;
	padding: 10px;
}
.main .visual .logo::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: #d1c2c8;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 300px;
	opacity: 0;
	transition: all ease 1s +0.5s;
}
.main .visual .logo.active::before {
	opacity: 1;
}
.main .visual .logo .svg_logomark {
	position: relative;
	display: block;
}
.main .visual .logo .svg_logomark .cls-1 {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	fill: none;
	stroke: #fff;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 4.49px;
}

.main .visual .logo.active .svg_logomark .cls-1 {
  animation: drawLine 2s ease forwards;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}
.main .visual .info {
	margin-top: 180px;
	color: #fff;
	opacity: 0;
	position: relative;
	top: 20px;
	transition: 1s ease all +0.7s;
}
.main .visual.active .info {
	top: 0;
	opacity: 1;
}
.main .visual .info .title {
	
}
.main .visual .info dl {
	font-size: 13px;
	display: flex;
	width: 370px;
	flex-wrap: wrap;
	margin-top: 15px;
}
.main .visual .info dl dt {
	width: 155px;
}
.main .visual .info dl dd {
	width: calc(100% - 155px);
}
.main .visual .intro {
	margin-top: 640px;
}
.main .visual .intro .text {
	color: #fff;
	font-size: 30px;
	font-weight: 500;
	line-height: 2.2em;
	width: 640px;
}
.main .visual .intro .note {
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.8em;
	margin-top: 40px;
	width: 640px;
}
.main .visual .intro .text.en {
	width: 400px;
	font-size: 15px;
	letter-spacing: 0.1em;
	line-height: 1.6em;
	margin: -170px 0 0 auto;
}
.main .sec {
	margin-top: 220px;
}
.main .sec + .sec {
  margin-top: 150px;
}
.main .sec > .inner {
	max-width: 1200px;
	width: 94%;
	margin: 0 auto;
	position: relative;
}
.main .sec .fbox {
	display: flex;
	justify-content: space-between;
	align-items: end;
}
.main .sec .fbox .img {
	
}
.main .sec.sec1 .fbox .img:nth-child(1) {width: 51.1%;}
.main .sec.sec1 .fbox .img:nth-child(2) {width: 40.5%;}
.main .sec.sec3 .fbox {
	align-items: start;
}
.main .sec.sec3 .fbox .img:nth-child(1) {width: 40.5%;}
.main .sec.sec3 .fbox .img:nth-child(2) {width: 51.1%;}

.main .sec .info {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 100;
}
.main .sec .info h2 {
	position: relative;
	text-align: center;
	padding: 17px 35px;
	line-height: 1.5em;
}
.main .sec .info h2::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	border-radius: 60px;
	opacity: 0;
	transition: all ease 2s;
}
.main .sec .info h2.active::before {
	opacity: 1;
	border-radius: 0px;
}
.main .sec .info h2 span {
	position: relative;
	line-height: 1.5em;
	z-index: 100;
	font-size: 16px;
	display: block;
}
.main .sec .info .label {
	font-size: 15px;
	text-align: center;
	color: #fff;
	margin-top: 11px;
}



/**************************************************************/
/** SP ********************************************************/
/**************************************************************/
@media screen and (max-width: 767px) {
		    
	.outline::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: url(../images/index/bg_line.webp) no-repeat calc(50% + 158px) 848px / 1500px auto;
		z-index: -1;
	}
	.main > .bg {position: absolute;left: 50%;top: 77px;width: 750px;height: 750px;z-index: -1;transform: translate(-50%, 0);}
	.main > .bg .img {height: 100%;width: 100%;position: relative;}
	.main > .bg .img::after {
		content: "";
		background: url(../images/index/img_visual.webp) no-repeat center center / 750px 750px;
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
		width: 70%;
		height: 70%;
		opacity: 1;
		transform: translate(-50%, -50%);
		transition: 1s all ease;
		opacity: 0;
		border-radius: 2000px;
	}
	.main > .bg.active .img::after {
		opacity: 1;
		width: 100%;
		height: 100%;
	}
	.main > .bg .img img {width: 100%;height: 100%;opacity: 0.25;}
	.main > .bg .textstyle {
	}
	.main .visual {
	    padding-top: 260px;
	}
	.main .visual > .inner {
	    max-width: 1240px;
	    margin: 0 auto;
	    width: 87%;
	    position: relative;
	}
	.main .visual h1 {
		width: 163px;
		opacity: 0;
		position: relative;
		top: 20px;
		transition: 1s ease all +0.5s;
	}
	.main .visual.active h1 {
		top: 0;
		opacity: 1;
	}
	.main .visual .logo {
		width: 240px;
		position: absolute;
		right: 130px;
		top: -20px;
		box-sizing: border-box;
		padding: 10px;
		display: none;
	}
	.main .visual .logo::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background: #d1c2c8;
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 300px;
		opacity: 0;
		transition: all ease 1s +0.5s;
	}
	.main .visual .logo.active::before {
		opacity: 1;
	}
	.main .visual .logo .svg_logomark {
		position: relative;
		display: block;
	}
	.main .visual .logo .svg_logomark .cls-1 {
		stroke-dasharray: 1000;
		stroke-dashoffset: 1000;
		fill: none;
		stroke: #fff;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 4.49px;
	}
	
	.main .visual .logo.active .svg_logomark .cls-1 {
	  animation: drawLine 2s ease forwards;
	}
	
	@keyframes drawLine {
	  to {
	    stroke-dashoffset: 0;
	  }
	}
	.main .visual .info {
		margin-top: 260px;
		color: #fff;
		opacity: 0;
		position: relative;
		top: 20px;
		transition: 1s ease all +0.7s;
	}
	.main .visual.active .info {
		top: 0;
		opacity: 1;
	}
	.main .visual .info .title {
		
	}
	.main .visual .info dl {
		font-size: 11px;
		display: flex;
		width: 360px;
		flex-wrap: wrap;
		margin-top: 15px;
	}
	.main .visual .info dl dt {
		width: 125px;
	}
	.main .visual .info dl dd {
		width: calc(100% - 125px);
	}
	.main .visual .intro {
		margin-top: 400px;
	}
	.main .visual .intro .text {
		color: #fff;
		font-size: 14px;
		font-weight: 500;
		line-height: 2.2em;
		width: 110%;
	}
	.main .visual .intro .note {
		color: #fff;
		font-size: 11px;
		font-weight: 500;
		line-height: 1.8em;
		margin-top: 20px;
		width: auto;
	}
	.main .visual .intro .text.en {
		width: auto;
		font-size: 11px;
		letter-spacing: 0.1em;
		line-height: 1.6em;
		margin: 50px 0 0 0;
	}
	.main .sec {
		margin-top: 120px;
	}
	.main .sec + .sec {
	  margin-top: 100px;
	}
	.main .sec > .inner {
		max-width: 1200px;
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.main .sec .fbox {
		display: flex;
		justify-content: space-between;
		align-items: end;
		flex-direction: column;
		gap: 20px;
	}
	.main .sec .fbox .img {
		
	}
	.main .sec.sec1 .fbox .img:nth-child(1) {width: 65%;margin-right: auto;}
	.main .sec.sec1 .fbox .img:nth-child(2) {width: 46%;}
	.main .sec.sec1 .info {
		top: 47%;
	}
	.main .sec.sec2 .fbox .img img {width: 100%;height: 340px;object-fit: cover;}
	.main .sec.sec3 .fbox {
		align-items: start;
	}
	.main .sec.sec3 .fbox .img:nth-child(1) {width: 55%;margin-left: auto;}
	.main .sec.sec3 .fbox .img:nth-child(2) {width: 65%;}
	.main .sec.sec3 .info {
		top: 44%;
	}
	.main .sec .info {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate(0, -50%);
		z-index: 100;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.main .sec .info h2 {
		position: relative;
		text-align: center;
		padding: 17px 35px;
		line-height: 1.5em;
	}
	.main .sec .info h2::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #fff;
		border-radius: 60px;
		opacity: 0;
		transition: all ease 2s;
	}
	.main .sec .info h2.active::before {
		opacity: 1;
		border-radius: 0px;
	}
	.main .sec .info h2 span {
		position: relative;
		line-height: 1.5em;
		z-index: 100;
		font-size: 13px;
		display: block;
	}
	.main .sec .info .label {
		font-size: 13px;
		text-align: center;
		color: #fff;
		margin-top: 9px;
	}
	

	
}