@charset "utf-8";

/* ===========================
 * WebGL
 */
#js-webgl{
    z-index: -1;
    position: fixed;
    inset: 0;
    pointer-events: none;
    user-select: none;
}
/* #js-webgl .__filter{
    z-index: 1;
    position: absolute;
    inset: 0;
    margin: auto;
    backdrop-filter: blur(5px);
    background-color: #fafafa40;
} */


/* ===========================
 * KV
 */
.kv-area {
    /* width: 100%;
    height: 100vh; */
    /* margin-bottom: 100vh; */
    z-index: -1;
    position: relative;
    position: sticky;
    top: 0;
    height: 100vh;
}

.kv-area__inner{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template: 1fr / 1fr;
    place-items: center;
    height: 100%;
}

.kv-animation{
    z-index: -1; /* canvas より後ろ */
    position: relative;
    display: grid;
    align-content: center;
    width: 100%;
    height: 100vh;
    /* margin-bottom: 200vh; */
    text-align: center;
    user-select: none;
}
.kv-animation__upper{
    font-size: clamp(40px, -2.254px + 11.268vw, 160px);
    font-family: "GFS Didot", serif;
    line-height: 1;
    letter-spacing: -0.05em;
    white-space: nowrap;

    transform: translateX(-100vw);
    opacity: 0;

    color: transparent;
    background-clip: text;
    background-image: linear-gradient(to right, #f19ec2, #7fcef4, #f19ec2, #7fcef4);
    background-size: 320% auto;
    background-repeat: no-repeat;

    animation: move 6s linear infinite;
}
.kv-animation__lower{
    font-size: clamp(40px, 11.831px + 7.512vw, 120px);
    line-height: 1;
    font-weight: 500;
    white-space: nowrap;

    transform: translateX(100vw);
    opacity: 0;
}

@keyframes move {
    0% {
        background-position-x: 0%
    }

    to {
        background-position-x: 100%
    }
}

.kv-animation__copy{
    position: absolute;
    bottom: clamp(40px, 9.718px + 8.075vw, 126px);
    left: calc((50% - 50vw) + clamp(40px, -31.127px + 18.967vw, 242px));
    text-align: left;
    font-size: clamp(16px, 12.479px + 0.939vw, 26px);
    font-weight: 500;
    line-height: calc(48 / 26);
    letter-spacing: 0.1em;
}


/* ===========================
 * between KV to about scroll animation spacer
 */
.kv-about-spacer{
    content: '';
    opacity: 0;
    pointer-events: none;
    user-select: none;
    height: 250vh;
}
.about-works-spacer{
    content: '';
    opacity: 0;
    pointer-events: none;
    user-select: none;
    height: 200vh;
}
.works-service-spacer{
    content: '';
    opacity: 0;
    pointer-events: none;
    user-select: none;
    height: 200vh;
    height: 400vh;
}
.contact-footer-spacer{
    content: '';
    opacity: 0;
    pointer-events: none;
    user-select: none;
    height: 200vh;
}


/* ===========================
 * about section
 */
.about-area{
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    row-gap: 70px;
    width: 100%;
    height: 100vh;
    /* min-height: 100vh;
    min-height: 150vh; 背景ロゴのスクロールアニメーション領域の確保するため、100vhに50vh追加 */
    padding-top: 120px; /* 適当な値 */
    /* margin-bottom: 200vh; 背景ロゴのスクロールアニメーション領域の確保 */
    user-select: none;
}

.about-copy{
    margin-block: calc((1em - 1lh) / 2);
    font-size: clamp(20px, 4.3333vw ,40px);
    line-height: calc(70 / 40);
    font-weight: 500;
}
.about-copy > *+*{
    margin-top: 0.1em;
}
.about-copy span{
    display: block;
}

.about-en-copy{
    max-width: 336px;
    font-size: clamp(12px, 2.3333vw,15px);
    line-height: calc(25 / 15);
}

.about-outro{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: var(--inner-gatter);
}
.about-outro__main{
    font-size: clamp(40px, 11.831px + 7.512vw, 120px);
    font-family: "GFS Didot", serif;
    line-height: 1;
    letter-spacing: -0.05em;
    white-space: nowrap;

    transform: translateY(100px);
    opacity: 0;

    color: transparent;
    background-clip: text;
    background-image: linear-gradient(to right, #f19ec2, #7fcef4, #f19ec2, #7fcef4);
    background-size: 320% auto;
    background-repeat: no-repeat;

    animation: move 6s linear infinite;
}
.about-outro__sub{
    font-size: clamp(14px, calc(14/375*100vw),16px);
    font-weight: 500;

    transform: translateY(100px);
    opacity: 0;
}


/* ===========================
 * works section
 */
.works-layout{
    display: grid;
    grid-template:
        "title button" auto
        "list list" 1fr / 1fr auto
    ;
    justify-content: space-between;
    row-gap: 64px;
    width: 100%;
    min-height: 100vh;
    padding-block: 8vh 10vh;
}

.works-layout__title{
    grid-area: title;
}

.works-layout__moreButton{
    grid-area: button;
}

.works-layout__contents{
    grid-area: list;
}
@media (min-width: 960px) {
    .works-layout__contents{
        margin-inline: calc(50% - 50vw);
    }
}

/* --- Works スクロールエリア --- */
@media (min-width: 960px) {
    .works-area {
        height: 400vh;
        position: relative;
        z-index: 20;
        margin-inline: calc(50% - 50vw);
    }

    .works-area__sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
    }

    .works-container {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        perspective: 2000px;
    }
}

.works-list {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: calc(40/375*100vw);
}
@media (min-width: 960px) {
    .works-list {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        transform-style: preserve-3d;
        will-change: transform;
    }
    .works-link {
        display: contents;
    }
}

.works-card {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 700 / 360;
    color: var(--base-white);
}
.works-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0px 0px 20px 0px rgba(51, 51, 51, 0.3);
}

@media (min-width: 960px) {
    .works-card {
        width: 630px;
        aspect-ratio: 700 / 360;
        flex-shrink: 0;
        margin-left: -472px;
        margin-right: 40px;
        rotate: y -35deg;
        transform: translateZ(0);
        transform-style: preserve-3d;
        animation: workscardOff .2s ease forwards;
    }
    .works-link:first-child .works-card{
        animation: workscardOffFirst .2s forwards;
    }
    .works-card img {
        box-shadow: 0px 0px 40px 0px rgba(51, 51, 51, 0.3);
    }
}


.works-card__info {
    font-size: 12px;
    padding-top: 1.5em;
}
.works-card__info .__name {
    display: block;
    font-size: 1.25em;
    font-weight: 400;
    margin-bottom: .75em;
}
.works-card__info .__type,
.works-card__info .__role {
    display: block;
    font-weight: 500;
}
@media (min-width: 960px) {
    .works-card__info {
        font-size: calc(14px * 0.9);/* translateZ(200px)で拡大されるため */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        opacity: 0;
        pointer-events: none;
        transition: opacity .8s;
    }
}

@keyframes workscard {
  0% {
    transform: translateZ(0);
    rotate: y -35deg;
    margin-left: -472px;
    margin-right: 40px;
  }
  100% {
    rotate: y 0deg;
    transform: translateZ(200px);
    margin-left: 0;
  }
}
@keyframes workscardFirst {
  0% {
    transform: translateZ(0);
    rotate: y -35deg;
  }
  100% {
    rotate: y 0deg;
    transform: translateZ(200px);
  }
}
@keyframes workscardOff {
  0% {
     rotate: y 0deg;
     transform: translateZ(200px);
     margin-left: 0;
     margin-right: 0;
  }
  100% {
    transform: translateZ(0);
    rotate: y -35deg;
    margin-left: -472px;
    margin-right: 40px;
  }
}
@keyframes workscardOffFirst {
  0% {
    rotate: y 0deg;
    transform: translateZ(200px);
  }
  100% {
    transform: translateZ(0);
    rotate: y -35deg;
  }
}

@media (min-width: 960px) {
    .works-card:hover {
        z-index: 1000;
    }
    .works-card.is-active {
        transform: translateZ(200px);
        rotate: y 0deg;
        animation: workscard .4s ease forwards;
    }
    .works-link:first-child .works-card.is-active {
        animation: workscardFirst .4s ease forwards;
    }
    .works-card.is-active .works-card__info {
        opacity: 1;
        pointer-events: auto;
    }
}


/* ===========================
 * service section
 */
 .service-area {
    position: relative;
    padding-top: 200px;
 }
.service-area__head {
    text-align: center;
    margin-bottom: 100px;
}
.service-area .heading-group__sub {
    font-size: clamp(90px, calc(150/1400*100vw), 150px);
    font-weight: 500;
}

.service-lead {
    font-size: clamp(18px, calc(24/1400*100vw), 24px);
    font-weight: 500;
    line-height: 1.67;
    margin-top: 3em;
}
.service-en-lead {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-gray);
    margin-top: 1.5em;
    display: inline-block; /* アニメーションのため*/
    margin-inline: auto; /* アニメーションのため*/
}
.service-category {
    display: grid;
    width: 90%;
    max-width: 378px;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    column-gap: calc(30/378*100%);
    margin-top: 50px;
    margin-inline: auto;
}
.service-category__item {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--base-white);
    border: 1px solid currentColor;
    font-size: 14px;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
}

.service-area__body {
    position: relative;
}

.service-visual {
    position: absolute;
    top: 0;
    right: 0;
    width: 46%;
    height: 100%;
    --service-visual-height: 810px; /*JSで更新される値*/
}
@media (max-width: 959px) {
    .service-visual {
        display: none;
    }
}


.service-visual__sticky {
    position: sticky;
    top: calc((100vh - var(--service-visual-height)) / 2);
    right: 0;
    width: 100%;
    height: var(--service-visual-height);
}
.service-visual__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: translateZ(calc(-1 * var(--service-visual-height) / 2));
}
.service-visual__items {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    will-change: transform;
}
.service-visual__item {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
}
.service-visual__item img  {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.service-visual__item.--front {
    transform: translateZ(calc(var(--service-visual-height) / 2));
    z-index: 15;
}
.service-visual__item.--bottom {
    transform:  rotateX(90deg) translateZ(calc(-1 * var(--service-visual-height) / 2)) rotateY(180deg);
    z-index: 10;
}
.service-visual__item.--bottom img {
    transform: rotate(-180deg);
}
.service-content {
    width: 100%;
    padding-block: 40px;
}
@media (min-width: 960px) {
    .service-content {
        width: min(50%, 582px);
        height: 100vh;
        display: grid;
        align-items: center;
    }
}
.service-content__title {
    font-size: clamp(38px, calc(50/1400*100vw), 50px);
    font-weight: 500;
}
.service-content__lead {
    font-size: clamp(18px, calc(24/1400*100vw), 24px);
    font-weight: 500;
    margin-top: 0.5em;
}
.service-content__desc {
    line-height: 2.25em;
    margin-top: 1em;
}
.service-content__box {
    background-color: #f9f9f9;
    border: 1px solid currentColor;
    padding: 1em 1.75em;
    margin-top: 2.875em;
}
.service-content__list {
    display: grid;
    grid-template-columns: repeat(3,max-content);
    column-gap: 1em;
}
.service-content__list li {
    padding-block: .125em;
}
.service-content__list li::before {
    display: inline-block;
    content: "";
    width: .625em;
    height: .625em;
    border-radius: 50%;
    background-color: currentColor;
    margin-right: .75em;
}
@media (min-width: 960px) {
    .service-content__list {
        grid-template-columns: repeat(3,1fr);
        width: max-content;
    }
}
.service-content__visual img {
    width: 100%;
    aspect-ratio: 16 / 15;
    object-fit: cover;
    margin-block: 10px;
}
@media (min-width: 960px) {
    .service-content__visual {
        display: none;
    }
}


/* ===========================
 * topics section
 */
.topics-area{
    display: grid;
    grid-template:
        "title button" auto
        "list list" 1fr / 1fr auto
    ;
    justify-content: space-between;
    row-gap: 64px;
    width: 100%;
    margin-top: 200px;
}

.topics-area__title{
    grid-area: title;
}

.topics-area__moreButton{
    grid-area: button;
}

.topics-area__contents{
    grid-area: list;
}

.topics-list{
    --gatter-block: 40px; /* 子要素の topics-card をコンテンツ外にはみ出すための設定 */
    --gatter-inline: 50px; /* 子要素の topics-card をコンテンツ外にはみ出すための設定 */
}
.topics-list > *+*{
    margin-top: var(--gatter-block);
}

/* topics-card */
.topics-card{
    z-index: 0;
    position: relative;
    width: 100%;
    padding-bottom: var(--gatter-block);
    border-bottom: 1px solid #ccc;
    transition: border-bottom-color 0.4s ease;
}

@media (min-width: 640px) {
    .topics-card:has(a:hover, a:focus){
        z-index: 1;
        border-bottom-color: transparent;
    }
}

.topics-card a{
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    row-gap: 16px;
}
@media (min-width: 640px) {
    .topics-card a{
        grid-template-columns: max-content fit-content(226px) 1fr 40px;
        column-gap: max(32px,calc(56/1400*100%));
    }
}

.topics-card__meta{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: 32px;
}
@media (min-width: 1280px) {
    .topics-card__meta{
        padding-right: calc(154px - 56px);
    }
}

.topics-date{
    color: var(--text-gray);
    font-size: 14px;
}

.topics-category{
    display: inline-block;
    width: fit-content;
    color: var(--base-white);
    padding-block: calc(1em * 8 / 12);
    padding-inline: calc(1em * 24 / 12);
    border-radius: 9999px;
    background-color: var(--base-black);
    color: var(--base-white);
    font-size: 12px;
    line-height: 1;
}

.topics-card__thumbnail{
    width: 100%;
}
.topics-card__thumbnail img{
    width: 100%;
}
@media (max-width: 639px) {
    .topics-card__thumbnail{
        order: -1;
    }
}

.topics-card__title{
    font-weight: 500;
    line-height: 2;
}

.topics-card__arrow{
    width: 100%;
}
.topics-card .rounded-arrow{
    width: 40px;
    margin-left: auto;
}

@media (min-width: 640px) {
    .topics-card a:hover .rounded-arrow{
        background-color: var(--base-black);
        color: var(--base-white);
    }
    .topics-card__title,
    .topics-card__arrow{
        align-self: center;
    }
}

.topics-card__bg{
    z-index: -1;
    position: absolute;
    inset: 0;
    margin-top: calc(-1 * var(--gatter-block) - 1px); /* border-bottom 隠すための1px */
    margin-inline: calc(-1 * var(--gatter-inline));
    content: '';
    background-color: var(--base-white);
    box-shadow: 0px 0px 30px 0px rgba(51, 51, 51, 0.2);

    opacity: 0;
    transition: opacity 0.4s ease;
}

@media (min-width: 640px) {
    .topics-card a:hover + .topics-card__bg{
        opacity: 1;
    }
}

.service-topics-wrapper{
    z-index: 1;
    position: relative;
    padding-bottom: 100px; /* .contact-area__containerのmargin-topから移動 */
}
.service-topics-wrapper::before{
    z-index: -1;
    position: absolute;
    inset: 0;
    margin-inline: 8px;
    display: block;
    content: '';
    backdrop-filter: blur(30px);
    background-color: #fafafa40;
}
@media (min-width: 960px){
    .service-topics-wrapper{
        padding-bottom: 200px;
    }
    .service-topics-wrapper::before{
        margin-inline: var(--inner-gatter);
    }
}