@charset "utf-8";


/* FV
---------------------------------------------------------*/
section#hero {
    height: calc(900 * var(--px));
    min-height: unset;
    position: relative;
    z-index: 1;
}
section#hero video {
    width: 100%;
    cursor: auto;
}

/* ローディングオーバーレイ */
body:has(#hero-loader) {
    overflow: hidden;
}
#hero-loader {
    position: fixed;
    inset: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.6s ease;
    pointer-events: none;
}
#hero-loader.hidden {
    opacity: 0;
}
#hero-loader .spinner {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: hero-spin 0.8s linear infinite;
}
@keyframes hero-spin {
    to { transform: rotate(360deg); }
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#hero {
        height: calc(540 * var(--px));
    }
    section#hero video {
        height: 100%;
    }
}





/* 見出し
---------------------------------------------------------*/
section#overview .label {
    font-size: var(--label-size);
}
section#overview .background {
    width: 48%;
    
    right: 0;
    top: var(--m8);
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#overview .wrap {
        padding-block: var(--m4);
    }
    section#overview .background {
        width: 80%;
        top: 0;
        translate: none;
    }
}




/* ３要素
---------------------------------------------------------*/
section#core-services {
    --graphic-size: calc(288 * var(--px));
    margin-top: calc(-1 * var(--graphic-size) * 0.7);
    padding-bottom: var(--graphic-size);
    background: black;
    color: white;
    position: relative;
}
.core-services-graphic {
    position: sticky;
    top: 150px;
    transition: 1s 0s ease;
}
.core-services-graphic.other-services {
    opacity: 0;
}
.core-services-graphic .container {
    width: var(--graphic-size);
    height: var(--graphic-size);
    margin-left: auto;
    translate: -50% 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.core-services-graphic .circle {
    --size: calc(340 * var(--px));
    width: var(--size);
    height: var(--size);
    border-radius: var(--size);
    border: 1px solid var(--dark);
    color: var(--dark);
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    display: grid;
    place-items: center;
    position: absolute;
    offset-path: border-box;
    offset-anchor: center;
    offset-rotate: 0deg;

    transition: 
        offset-distance 1.5s cubic-bezier(0.25, 1, 0.5, 1),
        background 0.4s ease,
        color 0.4s ease,
        box-shadow 0.4s ease;
}
.core-services-graphic .install { offset-distance: 22.22%; }
.core-services-graphic .operate-and-growth { offset-distance: 55.55%; }
.core-services-graphic .create { offset-distance: 88.88%; }

/* 1. INSTALL がアクティブな時 (初期位置) */
.core-services-graphic.install .install { offset-distance: 0%; }
.core-services-graphic.install .operate-and-growth { offset-distance: 33.33%; }
.core-services-graphic.install .create { offset-distance: 66.66%; }

/* 2. OPERATE & GROWTH がアクティブな時 */
/* 全体を反時計回りに33.33%回し、OPERATEを 0% の位置に持ってくる場合 */
.core-services-graphic.operate-and-growth .install { offset-distance: -33.33%; }
.core-services-graphic.operate-and-growth .operate-and-growth { offset-distance: 0%; }
.core-services-graphic.operate-and-growth .create { offset-distance: 33.33%; }

/* 3. CREATE がアクティブな時 */
.core-services-graphic:is(.create, .other-services) .install { offset-distance: -66.66%; }
.core-services-graphic:is(.create, .other-services) .operate-and-growth { offset-distance: -33.33%; }
.core-services-graphic:is(.create, .other-services) .create { offset-distance: 0%; }

.core-services-graphic.install .install,
.core-services-graphic.operate-and-growth .operate-and-growth,
.core-services-graphic.create .create {
    background: var(--black);
    color: var(--light);
    box-shadow: -2px -1px 0 0 var(--green), 2px 3px 0 0 var(--sky);
    z-index: 1;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#core-services {
        margin-top: 0;
        --graphic-size: calc(140 * var(--px));
        padding-bottom: var(--m4);
    }
    .core-services-graphic {
        top: var(--m8);
    }
    .core-services-graphic .circle {
         --size: calc(150 * var(--px));
         font-size: var(--small-size);
    }
}




/* コアサービスセクション
---------------------------------------------------------*/
section.core {}
section.core .wrap {}
section.core .heading {}
section.core .label {}
section.core .label::after {}
section.core .label + p {}
section.core .container {
    margin-top: var(--m4);
    display: flex;
    margin-left: var(--m4);
}
section.core .block {
    flex: 1 0 38.8%;
    margin-left: calc(-1 * var(--m4));
}
section.core .block:nth-of-type(2) {
    margin-top: calc(150 * var(--px));
}
section.core .block:nth-of-type(3) {
    margin-top: calc(300 * var(--px));
}
section.core .image {}
section.core .caption {
    margin-top: 0.5lh;
    font-size: 112.5%;
}
section.core .nav-more {
    translate: 0 -100%;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section.core .wrap {
        padding-bottom: var(--m6);
    }
    section.core .container {
        display: block;
        margin-left: 0;
    }
    section.core .block {
        margin-left: 0;
        padding-inline: var(--m3);
    }
    section.core .block + .block {
        margin-top: var(--m4);
    }
    section.core .nav-more {
        margin-top: var(--m4);
        translate: none;
    }
}



/* INSTALL
---------------------------------------------------------*/
section#install {}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#install {
        background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.7) var(--m8), rgb(0 0 0 / 0.7));
    }
}


/* OPERATE & GROWTH
---------------------------------------------------------*/
section#operate-and-growth {}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#operate-and-growth {
        background: rgb(0 0 0 / 0.7);
    }
    section#operate-and-growth .label {
        font-size: var(--headline-size);
        letter-spacing: 0.2em;
    }

}


/* CREATE
---------------------------------------------------------*/
section#create {}
section#create .container {
    margin-top: var(--m10);
    width: 100svw;
    padding-bottom: 300px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: visible;
    overflow-x: clip;
}
section#create .swiper-wrapper {
    margin-left: -240px;
}
section#create .swiper-slide {
    opacity: 0;
    scale: 0.5;
    transition: 1s 0s ease;
}
section#create .swiper-slide-prev {
    scale: 0.9;
    opacity: 0.1;
    z-index: 1;
}
section#create .swiper-slide-active {
    scale: 1.2;
    opacity: 1;
    z-index: 5;
} 
section#create .swiper-slide-next {
    scale: 0.9;
    opacity: 1;
    z-index: 4;
}
section#create .swiper-slide-next-2nd {
    scale: 0.7;
    opacity: 0.5;
    z-index: 3;
}
section#create .swiper-slide-next-3rd {
    scale: 0.5;
    opacity: 0;
    z-index: 2;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#create {
        background: linear-gradient(to bottom, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.7) calc(100% - var(--m8)), transparent);
    }
    section#create .container {
        margin-top: var(--m6);
        padding-bottom: var(--m8);
    }
    section#create .swiper-wrapper {
        margin-left: 0;
    }
    section#create .swiper-slide {
        padding-right: var(--m4);
    }
}





/* その他のサービス
---------------------------------------------------------*/
section#other-services {
    padding-block: var(--m10) var(--m8);
    background: radial-gradient(circle at center top, var(--pale) 0%, var(--pale) 21%, var(--light) 100%);
}
section#other-services .wrap {
    max-width: 1600px;
}
section#other-services > .label {
    margin-bottom: 1lh;
}
section.image-card {
    min-height: unset;
    color: white;
    background: black;
    overflow: hidden;
    position: relative;
}
section.image-card + section.image-card {
    margin-top: var(--m8);
}
section.image-card .body {
    width: 100%;
    height: 100%;
    padding-block: var(--m6);
    padding-inline: 13.5%;
    display: flex;
    flex-direction: column;

    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
section.image-card .label {
    letter-spacing: 0.2em;
}
section.image-card .label::after {
    border-color: white;
}
section.image-card .nav-more {
    margin-top: auto;
    margin-left: auto;
}
section#cvst {
    --accent-color: var(--cyan);
    --button-bg: var(--cyan)
}
section#hardware-provision {
    --accent-color: var(--emerald);
    --button-bg: var(--emerald)
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#other-services {
        padding-block: var(--m4);
    }
    section.image-card .body {
        padding-inline: var(--m2);
        position: relative;
    }
	.heading:where(.frame) :is(.label, .headline) {
		padding-left: 0;
		border-left: 0;
		margin-left: 0;
	}
    section.image-card .label::after {
        border-color: var(--accent-color, var(--green));
        top: 0.2lh;
    }
    section.image-card .background {
        height: 100%;
        object-fit: cover;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
    }
    section.image-card .nav-more {
        margin-top: var(--m4);
    }
}


main.content > section:not(#hero, #overview, #core-services, #other-services) {
    display: none;
}



/* CHANGE ViSiON STUDIO TOKYO
---------------------------------------------------------*/
section#CVST {}

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





/* HARDWARE PROVISION
---------------------------------------------------------*/
section#hardware-provision {}

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





/* NEWS
---------------------------------------------------------*/
section#news {
    padding-block: var(--m10) var(--m8);
    background: var(--pale);
}
section#news .label {
    margin-bottom: 1lh;
}

section#news .nav-more {
    margin-top: var(--m8);
    margin-left: auto;
    --button-hover-color: var(--black); 
}
section#news .background {
    width: 48%;
    
	position: absolute;
    right: 0;
    top: var(--m8);
	z-index: -1;
}

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