@charset "UTF-8";

/* TOP */
body.top{
	color: #242a46;
	background: #fff;
}
.contents{
    position:relative;
}
.top-canvas{
		opacity: 0;
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		--c1: #eaead2;
		--c2: #ffffff;
		--c3: #c9c9e2;
		--c4: #ffffff;


		/*background:
			radial-gradient(circle at top left, var(--c1), transparent 60%),
			radial-gradient(circle at top right, var(--c2), transparent 60%),
			radial-gradient(circle at bottom right, var(--c3), transparent 60%),
			radial-gradient(circle at bottom left, var(--c4), transparent 60%);*/
}
.color-grd{
    background: linear-gradient(
        90deg,
        #6780a6 0%,
        #747ca3 25%,
        #7f78a0 50%,
        #8e6f99 75%,
        #9f5f91 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.copy-bg{
	position: fixed;
	top: 4%;
	left: 1%;
	height: 100%;
}
.copy-bg-text{
	color: rgba(127, 120, 160, 0.14);
	font-size: 17vw;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	white-space: nowrap;
	font-family: 'futura-pt', sans-serif;
}
.main-copy {
		padding: 2vw 3vw;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: flex-end;
		gap: 12px;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
}
.main-copy-text {
		opacity: 0;
		font-family: 'futura-pt', sans-serif;
		font-weight: 300;
		font-style: normal;
		font-size: 11.8vw;
		width: 100vw;
		margin-left: calc(50% - 50vw);
		text-align: center;
}
.main-copy-ja {
		font-size: 8vw;
		font-weight: 800;
		line-height: 1.2;
		font-style: italic;
}
.is-screen {
		min-height: 150vh;
}
.general-section {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
}
.general-section.second-section {
		margin: 800px auto 100px;
}
.contents .inner {
		padding: clamp(60px, 7.8vw, 100px) 3vw;
}
.general-section.second-section .inner{
		padding: 500px 3vw;
}
.third-section{
	margin: 100px auto 100px;
}
.general-section.third-section .inner{
		padding: 300px 3vw 1000px;
}
.note {
		margin-top: 80px;
		padding: 0 40px;
		font-size: 16px;
		line-height: 2.2;
		letter-spacing: 0.05em;
}

.sub-copy{
	font-size: clamp(21px, 3vw, 43px);
	text-align: center;
	line-height: 1.4;
	width: 100%;
}
.sub-copy-fixed{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
}
.text-center {
		text-align: center;
}
.usp-section{
	/*margin-top: 460px;*/
}
.usp-container{
	margin: 160px auto 200px;
}
.usp-wrap{
	margin: 0 auto;
	max-width:1380px;
	width: calc(100% - 50px);
}
.usp-copy{
	margin-bottom: clamp(50px, 4.5vw, 63px);
	font-size: clamp(18px, 2.75vw, 33px);
	line-height: 1.4;
}
.usp {
		font-size: 2vw;
		font-weight: 800;
		line-height: 1.2;
}
.usp-sub {
		margin-top: 24px;
		font-size: 20px;
		font-weight: 400;
		line-height: 1.6;
}
.perse-wrapper{
	position: relative;
}
.perse-wrapper .sub-copy{
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
}
.perse-wrapper .img-wrapper .caption{
	bottom: 10%;
}
.detail-copy-block {
	margin-top: -14%;
}
.detail-copy-ttl-sub{
	font-size: clamp(18px, 5vw, 45px);
}
.detail-copy-ttl-sub.sub-small{
	position: relative;
	font-size: clamp(14px, 4vw, 36px);
	letter-spacing: .1em;
}
.detail-copy-ttl-main{
	margin: clamp(4px, 1vw, 20px) 0;
	font-size: clamp(55px, 15vw, 134px);
}
.detail-copy-text{
	margin-top: clamp(50px, 6.25vw, 80px);
	font-size: clamp(15px, 3.5vw, 22px);
	line-height: 2;
}
.usp-section .lead-text{
	font-size: clamp(50px, 11vw, 104px);
	line-height: 1.4;
}
.usp-section .middle-text{
	position: relative;
	font-size: clamp(16px, 3.6vw, 42px);
	line-height: 1.6;
}
.usp-section .info-block{
	margin-top: clamp(40px, 5vw, 60px);
}
.usp-section .info-block .info-text{
	font-size: clamp(14px, 2.2vw, 26px);
	line-height: 1.6;
}
.usp-section .info-block .info-text-large{
	margin-top: clamp(14px, 1.8vw, 20px);
	font-size: clamp(22px, 3.3vw, 40px);
	line-height: 1.4;
}

.canvas-bottom{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:16%;
    z-index:0;
    pointer-events:none;
		z-index:-1;
}

#bottomCanvas{
    width:100%;
    height:100%;
    display:block;
}
.annotation-sup-text{
	position: relative;
}
.annotation-sup{
	font-size: 30%;
	position: absolute;
	bottom: -12px;
	right: 0;
	letter-spacing: 0;
}


@media screen and (max-width: 767px){
	.main-copy-text {
		font-size: 10.4vw;
	}
	.general-section.second-section {
		margin: 300px auto 60px;
	}
	.general-section.second-section .inner{
		padding: 300px 3vw 0;
	}
	.perse-wrapper .img-wrapper .caption{
		bottom: 14%;
		font-size: .7rem;
	}
	.usp-container{
		margin: 60px auto 30px;
	}
	.usp-wrap{
		max-width: 70%;
	}
	.second-section.is-screen {
    min-height: 120vh;
	}
	.third-section-copy {
    min-height: 70vh;
	}
	.third-section {
    margin: 0 auto 0;
	}
	.annotation-sup{
		bottom: -6px;
	}
}