@charset "utf-8";

/* OriginalityMessage
---------------------------------------------------------------------- */
.OriginalityMessage{
    padding:140px 0;
    text-align:center;
}
.OriginalityMessage h2{
    width:fit-content;
    max-width:100%;
    margin:auto;
    background:linear-gradient(93deg,#00B0BD 20%,#00AEEF 45%,#293896 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-size:80px;
    font-weight:600;
    line-height:1.375;
    letter-spacing:3px;
}
.OriginalityMessage p{
    margin:100px 0;
    color:#1E1E1E;
    font-size:28px;
    font-weight:600;
    line-height:48px;
    letter-spacing:1px;
}
.OriginalityLogo{
    display:block;
    width:500px;
    max-width:80%;
    height:auto;
    margin:auto;
}
@media (max-width: 678px){
    .OriginalityMessage{
        padding:65px 0;
    }
    .OriginalityMessage h2{
        font-size:clamp(27px,7vw,46px);
        letter-spacing:1px;
    }
    .OriginalityMessage p{
        margin:45px 0;
        font-size:clamp(14px,3.5vw,20px);
        line-height:2;
        letter-spacing:0;
    }
}

/* OriginalityFuture
---------------------------------------------------------------------- */
.OriginalityFuture{
    padding:140px 0;
    background:#FFFFFF;
}
.OriginalitySection{
    padding:80px 100px;
    background:#FFFFFF;
    color:#1E1E1E;
}
.OriginalitySection h2{
    width:fit-content;
    max-width:100%;
    background:linear-gradient(93deg,#00B0BD 20%,#00AEEF 45%,#293896 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-size:48px;
    font-weight:600;
    letter-spacing:2px;
    line-height:1.45;
}
.OriginalitySection h2::after{
    content:"";
    display:block;
    width:100px;
    height:3px;
    background:linear-gradient(90deg,#00B0BD 20%,#00AEEF 45%,#293896 100%);
    margin-top:10px;
}
.OriginalitySection h3{
    margin:40px 0;
    font-size:32px;
    font-weight:600;
    line-height:1.45;
    letter-spacing:1px;
}
.OriginalitySection p{
    font-size:16px;
    font-weight:600;
    line-height:1.65;
    letter-spacing:1px;
}
/* 見出しの文字はcommon.cssのTitleTextInを使用。時間・文字間隔はここで編集。 */
.OriginalityMessage .TitleAnimation,
.OriginalitySection .TitleAnimation{
    --TitleDuration:1100ms;
    --TitleInterval:45ms;
    --OriginalityLineDuration:1200ms;
    --OriginalityLineDelay:200ms;
    --OriginalityLineMoveY:12px;
}
.OriginalityMessage .TitleAnimationWord,
.OriginalitySection .TitleAnimationWord{
    position:relative;
}
.OriginalityMessage .TitleAnimationLetter,
.OriginalitySection .TitleAnimationLetter{
    background:linear-gradient(93deg,#00B0BD 20%,#00AEEF 45%,#293896 100%);
    background-size:var(--OriginalityGradientWidth) 100%;
    background-position:var(--OriginalityGradientOffset) 0;
    background-repeat:no-repeat;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.OriginalitySection .TitleAnimation.IsPreparing::after{
    opacity:0;
    transform:translateY(var(--OriginalityLineMoveY));
}
.OriginalitySection .TitleAnimation.IsVisible::after{
    animation:OriginalityLineIn var(--OriginalityLineDuration) ease both;
    animation-delay:var(--OriginalityLineDelay);
}
@keyframes OriginalityLineIn{
    0%{
        opacity:0;
        transform:translateY(var(--OriginalityLineMoveY));
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}
@media (prefers-reduced-motion: reduce){
    .OriginalitySection .TitleAnimation.IsPreparing::after,
    .OriginalitySection .TitleAnimation.IsVisible::after{
        animation:none;
        opacity:1;
        transform:none;
    }
}
@media (max-width: 678px){
    .OriginalityFuture{
        padding:50px 0;
    }
    .OriginalitySection{
        padding:35px 6%;
    }
    .OriginalitySection h2{
        font-size:30px;
    }
    .OriginalitySection h3{
        margin:28px 0;
        font-size:21px;
        letter-spacing:0;
    }
    .OriginalitySection p{
        font-size:14px;
        line-height:1.9;
        letter-spacing:0;
    }
}