@charset 'utf-8';

/**
 * フロントページ限定のスタイル
 */
:root{
    --section-title-size: 4vw;
    --honoka: 'Honoka Antique Maru', var(--noto-sans);
    --questrial: 'Questrial', var(--noto-sans);
}

/* main-visual */
.stl-top-mv-section{
    position: relative;
    height: 100svh;
    padding: 0 10vw;/* PCでは不要。SPは？ */
    overflow: hidden;
    background: #fff;
}
.stl-top-mv-slider-item{
    position: absolute;
    display: grid;
    align-items: center;
    width: 80%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.stl-top-mv-circle-img{
    position: absolute;
    width: 140%;
    height: 140%;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
}
.stl-top-mv-circle-img.rolling{animation: stlTopMvCircle 10s linear 0s infinite forwards;}
@keyframes stlTopMvCircle{
    0%{transform: translate3d(-50%, -50%, 0) rotate(0deg);}
    100%{transform: translate3d(-50%, -50%, 0) rotate(360deg);}
}
.stl-top-mv-text-wrap{
    display: grid;
    line-height: 6vw;
    letter-spacing: .3em;
    opacity: 0;
    visibility: hidden;
    /*transition: .75s;*/
}
.stl-top-mv-headline{
    font-family: var(--noto-sans);
    font-size: 3vw;
}
.stl-top-mv-text-top{
    font-size: 1.8vw;
    order: -1;
    margin-bottom: .25em;
}
.stl-top-mv-text{font-size: 1.2vw;}
.stl-top-mv-slider-item.visible .stl-top-mv-text-wrap{
    /*
    opacity: 1;
    visibility: visible;
    transition-delay: .75s;
    */
    animation: sliderTextFade 6s linear 0s 1 forwards;
}
@keyframes sliderTextFade{
    0%{}
    20%{
        opacity: 1;
        visibility: visible;
    }
    87.5%{
        opacity: 1;
        visibility: visible;

    }
    97.5%{
        opacity: 0;
        visibility: hidden;
    }
    100%{visibility: hidden;}
}
.stl-top-mv-slider-item.first-visible .stl-top-mv-text-wrap{animation: sliderFirstTextFadeOut 6s linear 0s 1 forwards;}
@keyframes sliderFirstTextFadeOut{
    0%{
        visibility: visible;
        opacity: 1;
    }
    87.5%{
        opacity: 1;
        visibility: visible;

    }
    97.5%{
        opacity: 0;
        visibility: hidden;
    }
    100%{visibility: hidden;}
}
.stl-top-mv-img-wrap{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 62.5%;
    height: 0;
    padding-top: 62.5%;
    perspective: 10000px;
}
.stl-top-mv-img{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%) rotateY(90deg);
    border-radius: 50%;
    visibility: hidden;
    transition: .25s;
    transition-timing-function: linear;
}
.stl-top-mv-slider-item.visible .stl-top-mv-img{
    visibility: visible;
    transform: translate(-50%, -50%);
    transition-delay: .25s;
}
.stl-top-mv-slider-buttons-wrap{
    position: absolute;
    display: flex;
    width: 80%;
    justify-content: space-between;
    bottom: 5vw;
    left: 50%;
    transform: translateX(-50%);
}
.stl-top-mv-slider-button-item{
    width: 12.5%;
    line-height: 0;
}
.stl-top-mv-slider-button{
    position: relative;
    width: 100%;
    height: 5px;
}
.stl-top-mv-slider-button-item:first-of-type .stl-top-mv-slider-button{background: #efe8da;}
.stl-top-mv-slider-button-item:nth-of-type(2) .stl-top-mv-slider-button{background: #a86a6a;}
.stl-top-mv-slider-button-item:nth-of-type(3) .stl-top-mv-slider-button{background: #4882a4;}
.stl-top-mv-slider-button-item:nth-of-type(4) .stl-top-mv-slider-button{background: #441c3e;}
.stl-top-mv-slider-button-item:nth-of-type(5) .stl-top-mv-slider-button{background: #549394;}
.stl-top-mv-slider-button-item:nth-of-type(6) .stl-top-mv-slider-button{background: #ff8163;}
.stl-top-mv-slider-button:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background: #fff;
    opacity: .5;
    z-index: 1;
}
.stl-top-mv-slider-button.active:before{
    width: 0;
    transition: 6s; /* スライダー下のバー */
    transition-timing-function: linear;
}
.stl-font-honoka{font-family: var(--honoka);}
.stl-font-questrial{font-family: var(--questrial);}
.stl-top-mv-main-char{opacity: 1;}
.visible .stl-top-mv-main-char{
    opacity: 0;
    animation: stlTopMvChars .5s ease 1 forwards;
    animation-delay: .8s;
    transform: translate3d(0, 0, 0);
}
.stl-top-mv-main-char:nth-of-type(2){animation-delay: .9s;}
.stl-top-mv-main-char:nth-of-type(3){animation-delay: 1s;}
.stl-top-mv-main-char:nth-of-type(4){animation-delay: 1.1s;}
.stl-top-mv-main-char:nth-of-type(5){animation-delay: 1.2s;}
.stl-top-mv-main-char:nth-of-type(6){animation-delay: 1.3s;}
.stl-top-mv-main-char:nth-of-type(7){animation-delay: 1.4s;}
.stl-top-mv-main-char:nth-of-type(8){animation-delay: 1.5s;}
.stl-top-mv-main-char:nth-of-type(9){animation-delay: 1.6s;}
.stl-top-mv-main-char:nth-of-type(10){animation-delay: 1.7s;}
.stl-block:nth-of-type(2) .stl-top-mv-main-char{animation-delay: 1.8s;}
.stl-block:nth-of-type(2) .stl-top-mv-main-char:nth-of-type(2){animation-delay: 1.9s;}
.stl-block:nth-of-type(2) .stl-top-mv-main-char:nth-of-type(3){animation-delay: 2s;}
.stl-block:nth-of-type(2) .stl-top-mv-main-char:nth-of-type(4){animation-delay: 2.1s;}
.stl-block:nth-of-type(2) .stl-top-mv-main-char:nth-of-type(5){animation-delay: 2.2s;}
.stl-block:nth-of-type(2) .stl-top-mv-main-char:nth-of-type(6){animation-delay: 2.3s;}
.stl-block:nth-of-type(2) .stl-top-mv-main-char:nth-of-type(7){animation-delay: 2.4s;}
.stl-block:nth-of-type(2) .stl-top-mv-main-char:nth-of-type(8){animation-delay: 2.5s;}
.stl-block:nth-of-type(2) .stl-top-mv-main-char:nth-of-type(9){animation-delay: 2.6s;}
.stl-block:nth-of-type(2) .stl-top-mv-main-char:nth-of-type(10){animation-delay: 2.7s;}
.stl-block:nth-of-type(2) .stl-top-mv-main-char:nth-of-type(11){animation-delay: 2.8s;}
@keyframes stlTopMvChars{
    0%{opacity: 0;}
    100%{opacity: 1;}
}

/* sections */
.stl-front-page-section{
    position: relative;
    padding: 10vw 10vw;
    display: grid;
    grid-template-rows: auto auto;
    z-index: 1;
    align-items: center;
    overflow: hidden;
}
.stl-front-page-section-img-group, .stl-front-page-section-img-item{position: relative;}
.stl-top-title .stl-front-page-section-title{
    grid-column: 1 / -1;
    padding-bottom: 10vw;
}
.stl-front-page-section-title{
    font-size: var(--section-title-size);
    overflow: hidden;
}
.stl-right-title .stl-front-page-section-title{
    text-align: right;
    padding-right: 1.5em;
}
.stl-front-page-section-title .stl-title-inner:before{
    content: "";
    position: absolute;
    height: 1.5px;
    width: 1.5em;
    top: 100%;
    left: 0;
    transform: translateY(.5em);
}
.stl-front-page-download .stl-title-inner:before{
    top: 50%;
    left: 100%;
    transform: translate(.25em, .125em);
}
.stl-back-black .stl-title-inner:before{background: #fff;}
.stl-back-white-vertical-gradient .stl-title-inner:before,
.stl-back-gray-white-vertical-gradient .stl-title-inner:before,
.stl-back-transparent .stl-title-inner:before{background: #333;}
.stl-front-page-about-us{padding-bottom: 16vw;}
.stl-front-page-about-us .stl-title-inner:before{display: none;}
.stl-grid-reverse .stl-front-page-section-text-wrap{order: 2;}
.stl-front-page-section-subtitle{
    font-size: 2vw;
    letter-spacing: .28em;
    line-height: 1.8;
    font-weight: 700;
    margin-bottom: 2em;
}
.stl-front-page-section-text-wrap p{
    line-height: 2.2;
    letter-spacing: .2em;
    margin: 2em 0;
    color: #555;
}
.stl-front-page-about-us .stl-front-page-section-img-item{
    width: 30%;
    margin: 7vw auto;
}
.stl-front-page-about-us .stl-front-page-background-text{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}
.stl-front-page-service .stl-front-page-background-text{
    position: relative;
    z-index: -1;
    height: 15vw;
    width: 100vw;
    margin: -2em -10vw 3.5vw;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
    transform: translate3d(0,0,0);
}
.stl-front-page-background-text:before, .stl-front-page-background-text:after{
    content: attr(data-background-before);
    position: absolute;
    font-size: 15vw;
    font-weight: 700;
    letter-spacing: .2em;
    color: #222;
    white-space: nowrap;
    top: 0;
    left: 0;
    z-index: -1;
    transform: translate3d(0,0,0);
    animation: liftToLeft 40s linear infinite forwards;
}
.stl-front-page-background-text:after{
    content: attr(data-background-after);
}
.stl-front-page-about-us .stl-front-page-background-text:before,
.stl-front-page-about-us .stl-front-page-background-text:after{
    color: #fff;
    top: calc(100% - 20vw);
    animation-duration: 30s;
    opacity: .8;
}
.stl-front-page-about-us .stl-front-page-background-text:after{
    padding: 0 .5em 0 .3em;
    animation-delay: -15s;
}
.stl-front-page-service .stl-front-page-background-text:after{
    padding: 0 3.5em 0 .5em;
    animation-delay: -20s;
}
@keyframes liftToLeft{
    0%{transform: translate3d(100%, 0, 0);}
    100%{transform: translate3d(-100%, 0, 0);}
}
.stl-front-page-section-img-wrap{
    display: grid;
    gap: 3vw;
}
.stl-front-page-section-img{max-width: 100%;}
.stl-front-page-service{align-items: start;}
.stl-front-page-service .stl-title-inner:before{display: none;}
.stl-front-page-service-ampersand{
    color: #676157;
    margin: 1.5em 0;
}
.stl-front-page-service, .stl-front-page-service p{color: #fff;}
.stl-front-page-service .stl-front-page-section-img{height: auto;}
.liberthas-front-page-section-corner{
    position: absolute;
    top: 0;
    right: 0;
    width: 10vw;
    stroke-width: 0px;
    z-index: -1;
}
.stl-front-page-service .liberthas-front-page-section-corner,
.stl-front-page-download .liberthas-front-page-section-corner{fill: var(--off-white);}
.stl-front-page-case .liberthas-front-page-section-corner{
    right: 100%;
    transform: translateX(100%) scale(-1, 1);
    fill: #000;
}
.stl-front-service-list-wrap{
    position: relative;
    grid-column: 1 / -1;
}
.stl-front-service-list{
    display: grid;
    text-align: center;
    gap: 10vw;
    font-family: var(--questrial);
}
.stl-front-service-group-title{
    padding: .25em;
    background: #fff;
    color: #333;
    font-weight: 400;
}
.stl-front-service-item{margin: 2em 0;}
.stl-front-service-list-bottom-text{
    position: relative;
    display: block;
    text-align: center;
    padding: .5em 0;
    /*border: 1px solid #fff;*/
    margin: .5em 0 0;
    width: 100%;
    transition: .3s;
    overflow: hidden;
}
.stl-front-service-list-bottom-text:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: translateX(-110%);
    background: #fff;
    z-index: -1;
    transition: .3s;
}
.stl-front-service-list-bottom-text:hover{color: #333;}
.stl-front-service-list-bottom-text:hover:before{transform: translateX(0);}
.stl-article-card:hover{box-shadow: 0 0 10px #ddd;}
.stl-archive-article-list{margin-bottom: 2em;}
.stl-view-all-button-wrap{
    display: grid;
    justify-content: center;
}
.stl-view-all-button{
    position: relative;
    letter-spacing: .2em;
    padding: .75em 3em;
    /*border: 1px solid #555;*/
    display: block;
    text-align: center;
    max-width: 15em;
    margin: auto;
    white-space: nowrap;
    overflow: hidden;
    transition: .3s;
}
.stl-view-all-button:hover{color: #fff;}
.stl-view-all-button:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000;
    transform: translateX(-125%);
    transition: .3s;
    z-index: -1;
}
.stl-view-all-button:hover:before{transform: translateX(0);}
.stl-front-page-case .stl-front-page-section-img-wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 4vh;
}
.stl-front-page-case .stl-front-page-section-img-item{
    height: 0;
    padding-top: 125%;
    overflow: hidden;
}
.stl-front-page-case .stl-front-page-section-img, .stl-front-page-download .stl-front-page-section-img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.stl-front-page-case .stl-front-page-section-img-text{
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    bottom: 0;
    transform: translateY(7vw);
}
.stl-front-page-column{padding: 5vw 20vw 5vw 10vw;}
.stl-front-case-column-wrap{
    position: relative;
    overflow: hidden;
    background: linear-gradient(var(--off-white), #fff, var(--off-white));
    z-index: 1;
}
.stl-front-case-column-back-wrap{
    position: absolute;
    width: 20vw;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
}
.stl-front-case-column-back-img{
    position: absolute;
    display: block;
    width: 50%;
    padding: 20vw 0;
    top: 0;
    left: 50%;
    transform: translate3d(-50%, 100%, 0);
    animation: liftToTop 40s linear 0s infinite forwards;
}
.stl-front-case-column-back-img:nth-of-type(2){
    animation-delay: -20s;
}
@keyframes liftToTop{
    0%{transform: translate3d(-50%, 100%, 0);}
    100%{transform: translate3d(-50%, -100%, 0);}
}
.stl-front-page-download .stl-front-page-section-img-item{
    padding-top: 70%;
    height: 0;
    overflow: hidden;
}

/* animation */
.stl-belt-animation{
    position: relative;
    color: transparent;
    transition: .1s;
    transition-delay: .35s;
}
.stl-belt-animation:not(.animated){background: transparent;}
.stl-belt-animation.animated{
    color: unset;
    color: var(--animated-color);
}
.stl-belt-animation:after{
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    background: #000;
    top: 0;
    bottom: 0;
    z-index: 9;
}
.stl-belt-animation.stl-belt-custom:after{background: var(--belt-color);}
.stl-belt-animation.animated:after{animation: textBeltAnimation .6s ease 0s 1 forwards;}
@keyframes textBeltAnimation{
    0%{}
    40%{
        left: 0;
        right: 0;
    }
    60%{
        left: 0;
        right: 0;
    }
    100%{
        left: 100%;
        right: 0;
    }
}
.stl-article-title{color: #333;}
.stl-title-inner.stl-animation-target:before{
    width: 0;
    transition: .35s;
    transition-delay: .4s;
}
.stl-title-inner.animated:before{width: 1.5em;}
.stl-front-page-section-text-wrap.stl-animation-target p{
    transform: translateY(2em);
    opacity: 0;
    transition: .75s;
    transition-delay: .25s;
}
.stl-front-page-section-text-wrap.animated p{
    transform: translateY(0);
    opacity: 1;
}
.stl-width-animation{
    white-space: nowrap;
    overflow: hidden;
    transition: .6s;
    width: 0;
}
.stl-width-animation.animated{width: 100%;}
.stl-front-service-group-title, .stl-article-card-grid{
    opacity: 0;
    transition: .1s;
    transition-delay: .3s;
}
.animated > .stl-front-service-group-title, .animated > .stl-article-card-grid{opacity: 1;}
.stl-front-square-link-inner.stl-animation-target{
    color: transparent;
    transition: .3s;
    transition-delay: .5s;
}
.stl-front-page-service .stl-front-square-link-inner.stl-animation-target{transition-delay: .6s;}
.stl-front-square-link-inner.animated{color: unset;}
.stl-front-square-link-inner.animation-completed{
    transition: 0s !important;
    transition-delay: 0s !important;
}
.stl-front-square-link-inner:before{
    left: 0;
    bottom: 0;
    border-left: 1px solid;
    border-bottom: 1px solid;
}
.stl-front-square-link-inner:after{
    top: 0;
    right: 0;
    border-top: 1px solid;
    border-right: 1px solid;
}
.stl-front-square-link-inner:before, .stl-front-square-link-inner:after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    transition: width .6s, height .3s, border-color 0s;
    transition-delay: .5s, .8s, .5s;
}
.stl-front-square-link-inner.animated:before, .stl-front-square-link-inner.animated:after{
    width: 100%;
    height: 100%;
    border-color: #555;
}
.stl-front-page-service .stl-front-square-link-inner:before,
.stl-front-page-service .stl-front-square-link-inner:after{transition-delay: .6s, .9s, .6s;}
.stl-front-page-service .stl-front-square-link-inner.animated:before,
.stl-front-page-service .stl-front-square-link-inner.animated:after{border-color: #fff;}
@media(orientation: landscape){
    .stl-top-mv-slider-item{grid-template-columns: 1fr 1fr;}
    .stl-top-mv-text-wrap{margin-left: 3vw;}
    .stl-front-page-about-us .stl-front-page-section-subtitle{margin-top: -4.25vw;}
}
@media(orientation: portrait){
    :root{
        --section-title-size: 4vh;
    }
    .stl-top-mv-slider-item{height: 80%;}
    .stl-top-mv-text-wrap{line-height: 11.2vw;}
    .stl-top-mv-headline{font-size: 6vw;}
    .stl-top-mv-text-top{font-size: 4vw;}
    .stl-top-mv-text{font-size: 2vw;}
    .stl-top-mv-img-wrap{order: -1;}
    .stl-top-mv-slider-buttons-wrap{bottom: 5vh;}
    .stl-front-page-section{padding: 10vh 7vw;}
    .stl-front-page-section-img-wrap{gap: 3vh;}
    .stl-front-page-service .stl-front-page-background-text{margin: -2em -7vw 3.5vw;}
    .stl-front-case-column-back-img{height: 100%;}
}
@media(max-width: 991px){
    .stl-front-page-section-subtitle{margin-bottom: 2.5em;}
    .stl-front-service-list{gap: 2em;}
    .stl-front-service-item{font-size: 14px;}
}
@media(max-width: 575px){
    /*.stl-front-page-download .stl-front-page-section-title{padding-bottom: 0;}*/
    .stl-front-page-section-subtitle{font-size: 5.3vw;}
    .stl-front-page-section-text-wrap{
        font-size: 14px;
        padding-top: 10vw;
    }
    .stl-front-page-about-us{padding-bottom: 30vw;}
    .stl-front-page-background-text:before, .stl-front-page-background-text:after{
        font-size: 30vw;
        animation-duration: 24s;
    }
    .stl-front-page-service .stl-front-page-background-text:after{animation-delay: -12s;}
    .stl-front-page-about-us .stl-front-page-background-text:before,
    .stl-front-page-about-us .stl-front-page-background-text:after{
        animation-duration: 20s;
        top: calc(100% - 40vw);
    }
    .stl-front-page-about-us .stl-front-page-background-text:after{animation-delay: -10s;}
    .stl-front-page-service .stl-front-page-background-text{
        height: 30vw;
        margin-bottom: 7vw;
    }
    .stl-front-page-service-ampersand{margin: .5em 0;}
    .stl-front-page-column{padding-bottom: 20vh;}
    .stl-front-case-column-back-wrap{
        width: 100%;
        opacity: .7;
    }
    .stl-front-case-column-back-img{
        width: 400%;
        height: 80%;
        padding: 35vw 0;
        top: unset;
        bottom: 0;
        transform: translate3d(-125%, 47%, 0) rotate(-90deg);
    }
    @keyframes liftToTop{
        0%{transform: translate3d(100%, 47%, 0) rotate(-90deg);}
        100%{transform: translate3d(-125%, 47%, 0) rotate(-90deg);}
    }
}
@media(min-width: 576px){
    .stl-grid-half{grid-template-columns: 1fr 1fr;}
    .stl-grid-4-6{grid-template-columns: 40% 60%;}
    .stl-grid-6-4{grid-template-columns: 60% 40%;}
    .stl-bottom-title{grid-template-rows: 1fr 7vw;}
    .stl-front-page-about-us .stl-front-page-section-title{padding: 0;}
    .stl-front-page-about-us .stl-front-page-section-img-item{margin: 0 0 0 var(--section-title-size);}
    .stl-top-mv-circle-img.rolling{animation-duration: 12.5s;}
    .stl-front-page-about-us .stl-front-page-section-text-wrap{padding-right: var(--section-title-size);}
    .stl-front-page-service .stl-front-page-section-title{margin-bottom: 1em;}
    .stl-front-page-service .stl-front-page-background-text{grid-column: 1 / -1;}
    .stl-front-service-list{grid-template-columns: 1fr 1fr 1fr;}
    .stl-front-service-list-bottom-text{
        position: absolute;
        bottom: 0;
        right: 0;
        margin: 1.5em 0;
        width: calc(33.33% - 7vw);
    }
    .stl-front-page-case, .stl-front-page-column{padding-right: 20vw;}
    .stl-front-page-case .stl-view-all-button-wrap, .stl-front-page-column .stl-view-all-button-wrap{grid-template-columns: repeat(3, 1fr);}
    .stl-front-page-case .stl-view-all-button{grid-column-start: 3;}
    .stl-front-page-case .stl-front-page-section-img-wrap{margin-bottom: 3.5vw;}
    .stl-front-page-case .stl-front-page-section-text-wrap{padding-left: var(--section-title-size);}
    .stl-front-page-download{gap: 0 7vw;}
}
@media(min-width: 576px) and (max-width: 991px){
    .stl-front-page-section-subtitle{font-size: 2.8vw;}
    .stl-front-service-list-bottom-text{width: calc(33.33% - 1.5em);}
    .stl-front-page-case .stl-view-all-button{grid-column-start: 2;}
}
@media(orientation: landscape) and (max-width: 710px){
    .stl-front-service-list{gap: 1em;}
    .stl-front-service-list-bottom-text{width: calc(33.33% - 1em);}
}
@media(orientation: landscape) and (max-width: 750px){
    .stl-top-mv-text{font-size: .7vw;}
}
@media(orientation: landscape) and (min-width: 751px){
    .stl-front-service-group-title{font-size: 1.2em;}
}
@media(orientation: portrait) and (min-width: 576px){
    .stl-front-page-about-us .stl-front-page-section-subtitle{margin-top: -5.55vw;}
}
@media(max-width: 345px){
    .stl-top-mv-text{font-size: 1.3vw;}
}