/* ========================================
   KAGENEKO-CHAN
   TOP Page CSS
======================================== */

/* ========================================
   HEADER
======================================== */

/* ヘッダーは、共通ヘッダーなためそちらを参照 */


/* =========================
   HERO 基本
========================= */

.hero {
    position: relative;
    height: min(92vh, 760px);
    overflow: hidden;
    background: #05070d;
}

/* =========================
   仮想空間グリッド
========================= */

/*.hero__virtual-background {
    position: absolute;
    left: 50%;
    bottom: -100%;
    width: 180%;
    height: 120%;
    transform: translateX(-50%) perspective(1200px) rotateX(72deg);*/ /*RotateXによって床を倒して奥行きがあるように見せる。 72 */
    /*transform-origin: center top;
}*/


    /* グリッド本体 */
    /*.hero__virtual-background::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient( rgba(100, 170, 255, 0.35) 2px, transparent 2px ), linear-gradient( 90deg, rgba(100, 170, 255, 0.35) 1px, transparent 1px );*/  /*縦線と横線を用意する。*/
        /*background-size: 72px 72px;*/  /*マス目のサイズ　72x72*/
        /*animation: hero-grid-flow 8s linear infinite;

        will-change: background-position;
    }


@keyframes hero-grid-flow {

    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 0 78px, 0px 0;
    }
}*/



/* 画面の奥側をフェード (text)*/
/*.hero__virtual-space::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient( to bottom, rgba(5, 7, 13, 1) 0%, rgba(5, 7, 13, 1) 40%, rgba(5, 7, 13, 0.92) 48%, rgba(5, 7, 13, 0.72) 55%, rgba(5, 7, 13, 0.38) 62%, rgba(5, 7, 13, 0.12) 68%, rgba(5, 7, 13, 0) 74% );
}*/

/*.hero__virtual-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(100, 170, 255, 0.8) 0 1.4px, transparent 1.6px);
    background-size: 56px 56px;
    background-repeat: repeat;
    animation: hero-dot-flow 8s linear infinite;
    -webkit-mask-image: linear-gradient( to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0.5) 72%, rgba(0, 0, 0, 0) 84% );
    mask-image: linear-gradient( to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0.5) 72%, rgba(0, 0, 0, 0) 84% );
}

@keyframes hero-dot-flow {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 56px;
    }
}*/

/* ========================================
   黒塗り主殿
======================================== */

/*.hero__shadow-character,
.hero__weapon-mask,
.hero__night-sky {
    display:none;
}*/


/* ========================================
   HERO MODE CHANGE
======================================== */

.hero {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* 仮想空間と夜空を同じ場所に重ねる */
.hero__virtual-space,
.hero__night-sky {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* 最初は仮想空間 */
.hero__virtual-space {
    opacity: 1;
    visibility: visible;
}

/* 最初は夜空を隠す */
.hero__night-sky {
    opacity: 0;
    visibility: hidden;
}

/* 夜空モードになった後 */
.hero.is-night .hero__virtual-space {
    opacity: 0;
    visibility: hidden;
}

.hero.is-night .hero__night-sky {
    opacity: 1;
    visibility: visible;
}


/* 暗転用の黒レイヤー */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #000000;
    opacity: 0;
    pointer-events: none;
    z-index: 100;
    transition: opacity 0.7s ease;
}

/* JSからこれを付けると黒くなる */
.hero.is-fading::after {
    opacity: 1;
}

/* 夜空の背景 */
.hero__night-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/night_sky.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* ========================================
   ABOUT
======================================== */

.about {
    position: relative;
    width: min(1000px, calc(100% - 40px));
    margin-inline: auto;
    padding: 100px 0;
}

    /* セクション全体の装飾 */
    .about::before {
        content: "";
        position: absolute;
        top: 65px;
        left: -100px;
        width: 380px;
        height: 360px;
        background-color: #8f9193;
        clip-path: polygon( 0 0, 72% 0, 100% 100%, 28% 100% );
        z-index: 0;
        pointer-events: none;
        transform: skewX(16deg);
    }

/* 平行四辺形より前へ */
.about__heading,
.about__visual,
.about__actions {
    position: relative;
    z-index: 1;
}


/* 見出し */
.about__heading {
    position: relative;
    width: fit-content;
    margin-bottom: 32px;
    padding: 30px 60px 20px 0;
}

    /* 背後の斜め四角 */
    /*.about__heading::before {
        content: "";
        position: absolute;
        width: 320px;
        height: 150px;
        left: -70px;
        top: 0;
        background-color: #8f9193;
        z-index: -1;
    }*/

.about__title {
    position: relative;
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(72px, 9vw, 140px);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: #15171A;
}

.about__subtitle {
    position: relative;
    margin: 8px 0 0;
    transform: translateX(240px);
    font-family: "Montserrat", sans-serif;
    font-size: clamp(24px, 3vw, 42px);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #15171A;
}

/* */

/*.about__title {
    margin-bottom: 0;*/ /* ブラウザがh2に勝手につけている余白を一旦消して、「ABOUTとKAGENEKO」の距離を手動で設定するためのもの。*/
    /*font-family: "Montserrat", sans-serif;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #202328;
}

.about__subtitle {
    margin-bottom: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: #263D55;
}*/

/* 影猫ちゃんの紹介風画像を貼る部分*/
/* aboutセクションの画像部分 */
.about__visual {
    position: relative;
    /* ここでは翼を切らない */
    overflow: visible;
    /*
        画像全体を少し左寄せしたければ、
        ここを後で調整。
    */
    width: 92%;
    margin-left: 0;
    margin-right: auto;

    transform: translateX(55px);
}


/* 本体画像の枠 */
.about__frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 1;
}


.about__art {
    display: block;
    width: 100%;
    height: auto;
}


/* 枠外へ出る翼 */
.about__wing {
    position: absolute;
    top: 0;
    /*
        本体画像の左端に、
        翼画像の右端をピッタリ接続する。
    */
    right: 100%;
    /*
        InsideとOutsideは元画像の高さが
        どちらも555pxなので、
        本体と同じ高さにすると比率が合う。
    */
    height: 100%;
    width: auto;
    max-width: none;
    z-index: 2;
    pointer-events: none;
}

/* */

    /*
    ABOUT完成画像を用意するまでの仮装飾。
    完成画像に斜め図形を含める場合は削除する。
*/
    /* 要らない */
/*    .about__visual::before {
        content: "";
        position: absolute;
        width: 45%;
        height: 140%;
        top: -20%;
        left: -8%;
        background-color: #263D55;
        transform: skewX(-12deg);
        opacity: 0.12;
    }*/

/*.about__art {
    width: 100%;
}*/

/* 名前プレート*/
.about__nameplate { /* 「.about__visualというフィールド内の右から24px、下から24pxにこのカードを置く」になる。おもしろポイント。*/
    position: absolute;
    right: 24px;
    bottom: 24px;
    padding: 8px 16px;
    background-color: #D94F55;
    color: #FFFFFF;
    border-radius: 4px;
    font-weight: 600;
    z-index: 2; /* 重なった場合用の前後関係*/
}

/* PROFILE, BLOG ボタン */
.about__actions {
    display: flex; /* 横に並べるようにするヤツ。 */
    justify-content: center;
    gap: 16px; /* これは、PROFILEとBLOGの間隔を調整するための値。*/
    margin-top: 24px;
}

.about__button {
    min-width: 140px;
    padding: 12px 24px;
    border: 1px solid #202328;
    border-radius: 6px;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-align: center;
    transition: background-color 0.2s, color 0.2s;
}

    .about__button:hover { /* :hoverは、「対象に対して(このスコープ内)、マウスオーバーした場合に適用するという誘発効果。このスコープ内が効果処理となる。」*/
        background-color: #202328;
        color: #FFFFFF;
    }

/* ========================================
   ABOUT - Mobile
======================================== */

@media (max-width: 768px) {

    .about {
        width: calc(100% - 24px);
        padding: 64px 0;
    }

    /* 見出し全体 */
    .about__heading {
        margin-bottom: 24px;
    }

    /* 画面横スクロール対策用に現在コメントアウト中 */
    /* KAGENEKOを少し左へ寄せる */
    .about__subtitle {
        position: relative;
        left: -12px;
    }
/*    .about__subtitle {
        position: static;
        transform: translateX(-12px);
    }
*/
    /* 画面横スクロール対策用に現在コメントアウト中 */
    /* メイン画像も少し左へ */
    .about__art {
        position: relative;
        left: 0px;
        width: calc(100% + 8px);
        max-width: none;
    }
/*    .about__art {
        position: relative;
        left: -8px;
        width: 100%;
        max-width: 100%;
    }*/

    /* 名前プレートを少しコンパクトに */
    .about__nameplate {
        right: 16px;
        bottom: 16px;
        padding: 7px 14px;
    }

    /* ボタン */
    .about__actions {
        gap: 12px;
        margin-top: 20px;
    }

    .about__button {
        min-width: 0;
        flex: 1;
        padding: 11px 16px;
    }
}
/* しね */
/*@media (max-width: 768px) {

    .about {
        overflow: clip;
    }
}*/

/*@media (max-width: 768px) {

    .about__subtitle {
        width: fit-content;
        margin-left: auto;
        margin-right: 32px;
        position: static;
        transform: none;
    }

    .about__visual {
        transform: translateX(-4px);
    }
}*/


/* ========================================
   3D WORKS
======================================== */

.works {
    width: min(1200px, calc(100% - 40px)); /* 左右の画像をチラ見せしたいので1200px取っている。*/
    margin-inline: auto;
    padding: 100px 0;
}


/* Heading */

.works__heading {
    width: min(1000px, 100%);
    margin: 0 auto 32px;
}

.works__title {
    margin-bottom: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #202328;
}

/* カルーセルの外側*/
.works__carousel {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    align-items: center;
    gap: 16px;
}
/*   52px          残り全部          52px
     ↓              ↓               ↓

┌─────┬─────────────────┐
│  ←  │      作品エリア       │  →  │
└─────┴─────────────────┘*/

/* 作品を表示する窓 */
.works__viewport {
/*    display: flex;
    justify-content: center;*/
    overflow: hidden;
    padding: 24px 0;
}

/* 中の3作品を横並びにする。*/
.works__track {
    --carousel-move: 0px;
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    transform: translateX( calc(-52% - 24px + var(--carousel-move)) );
    will-change: transform;
/*        transform: translateX(calc(-52% - 24px));*/
}

/* 作品カード */
.works__item {
    position: relative;
    flex: 0 0 68%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: #FFFFFF;
    border: 1px solid #D7DBDF;
    border-radius: 8px;
    transition: transform 0.3s, opacity 0.3s;
}
    /* 真ん中だけ主役にする。 */ /* これによって、主役ではないカードは、やや少しだけサイズが小さくなる！！ */
    .works__item:not(:nth-child(2)) {
        transform: scale(0.88);
        opacity: 0.55;
    }

    /* 画像そのもの */
    .works__item img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 枠いっぱいに画像を表示させる。でも縦横比は崩さずに、はみだした部分は除外される。*/
    }

    /*
    作品画像完成までの仮設定。
    本画像配置後に削除する。
*/
    .works__item img {
/*        display: none;*/
    }
    /*
    作品画像完成までの仮表示。
    本画像配置後に削除する。
*/
    .works__item::before {
/*        content: "3D WORK";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Montserrat", sans-serif;
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 0.12em;
        color: #263D55;
        background-color: #E7EAED;*/
    }

/* 左右ボタン */
.works__prev,
.works__next {
    width: 52px;
    height: 52px;
    padding: 0;
    background-color: #FFFFFF;
    color: #202328;
    border: 1px solid #D7DBDF;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

    .works__prev:hover,
    .works__next:hover {
        background-color: #202328;
        color: #FFFFFF;
        border-color: #202328;
    }


/* ========================================
   3D WORKS - Mobile
======================================== */

@media (max-width: 768px) {

    .works {
        width: calc(100% - 24px);
        padding: 64px 0;
    }

    .works__heading {
        margin-bottom: 24px;
    }


    /* =========================
       カルーセルを2段構成へ
    ========================= */

    .works__carousel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "viewport viewport"
            "prev     next";
        gap: 12px;
    }


    /* 作品表示エリアを横幅いっぱい使う */
    .works__viewport {
        grid-area: viewport;
        width: 100%;
        padding: 16px 0;
    }


    /* 左ボタン */
    .works__prev {
        grid-area: prev;
        justify-self: start;
    }


    /* 右ボタン */
    .works__next {
        grid-area: next;
        justify-self: end;
    }
}

/* ========================================
   CUSTOMIZE
======================================== */

.customize {
    width: min(1200px, calc(100% - 40px));
    margin-inline: auto;
    padding: 100px 0;
}


/* 6枚横並び */
.customize__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}


/* ========================================
   CUSTOMIZE ITEM
======================================== */

.customize__item {
    --reveal-delay: 0s;
    position: relative;
    /* かなり縦長 */
    aspect-ratio: 1 / 2;
    overflow: hidden;
    /*
        最初は「何もない空間」にしたいので、
        背景や枠は付けない。
    */
    background: transparent;
    border: none;
    border-radius: 6px;
}


    /* ========================================
   黒幕
======================================== */

    .customize__item::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background-color: #111318;
        /*
        上を支点にして、
        最初は高さ0の状態。
    */
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--reveal-delay) + 0.5s);
    }


    /* ========================================
   作品画像
======================================== */

    .customize__item img {
        position: relative;
        z-index: 2;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /*
        最初は透明。
    */
        opacity: 0;
        /*
        上 → 下へフェードしながら
        画像を出現させるためのマスク。

        300%の巨大なグラデーションを作って、
        最初は透明部分を画像へ重ねておく。
    */
        -webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 45%, rgba(0, 0, 0, 0.65) 50%, transparent 58%, transparent 100% );
        mask-image: linear-gradient( to bottom, #000 0%, #000 45%, rgba(0, 0, 0, 0.65) 50%, transparent 58%, transparent 100% );
        -webkit-mask-size: 100% 300%;
        mask-size: 100% 300%;
        -webkit-mask-position: 0 100%;
        mask-position: 0 100%;
        transition: opacity 0.5s ease calc(var(--reveal-delay) + 0.55s), -webkit-mask-position 0.75s ease calc(var(--reveal-delay) + 0.55s), mask-position 0.75s ease calc(var(--reveal-delay) + 0.55s);
    }

    /* ========================================
   CUSTOMIZE REVEALED
======================================== */


    /* 黒幕を上から下まで伸ばす */
    .customize__item.is-revealed::before {
        transform: scaleY(1);
    }


    /* 黒幕完成後、画像を上から描画 */
    .customize__item.is-revealed img {
        opacity: 1;
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }

    .customize__item:nth-child(1) {
        --reveal-delay: 0s;
    }

    .customize__item:nth-child(2) {
        --reveal-delay: 0.1s;
    }

    .customize__item:nth-child(3) {
        --reveal-delay: 0.2s;
    }

    .customize__item:nth-child(4) {
        --reveal-delay: 0.3s;
    }

    .customize__item:nth-child(5) {
        --reveal-delay: 0.4s;
    }

    .customize__item:nth-child(6) {
        --reveal-delay: 0.5s;
    }

    /* ========== ホバー ===========*/

    .customize__item:hover {
        transform: translateY(-4px);
    }


/* ========================================
   CUSTOMIZE - Mobile
======================================== */

@media (max-width: 768px) {

    .customize {
        width: calc(100% - 24px);
    }

    .customize__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
}

/* ========================================
   RECENT POSTS
======================================== */

.recent-posts {
    width: min(1000px, calc(100% - 40px));
    margin-inline: auto;
    padding: 100px 0;
}


/* Heading */

.recent-posts__heading {
    margin-bottom: 32px;
}

.recent-posts__title {
    margin-bottom: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #202328;
}

.recent-posts__subtitle {
    margin-bottom: 0;
    font-size: 14px;
    color: #263D55;
}

.recent-posts__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.recent-posts__item {
    overflow: hidden;
    background-color: #FFFFFF;
    border: 1px solid #D7DBDF;
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .recent-posts__item:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

/* サムネイル部分 */
.recent-posts__thumbnail {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: #E7EAED;
}

/* カード内の文章 */
.recent-posts__content {
    padding: 20px;
}

.recent-posts__date {
    display: block;

    margin-bottom: 8px;

    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 500;

    color: #D94F55;
}

.recent-posts__post-title {
    margin-bottom: 8px;

    font-size: 18px;
    font-weight: 600;

    color: #202328;
}

.recent-posts__excerpt {
    margin-bottom: 0;

    font-size: 14px;
    color: #555B61;

    line-height: 1.7;
}

/* ALL POSTSボタン */
.recent-posts__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 32px;
}

.recent-posts__more {
    padding: 12px 24px;
    background-color: #D94F55;
    color: #FFFFFF;
    border-radius: 6px;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    letter-spacing: 0.08em;
    transition: background-color 0.2s, transform 0.2s;
}

    .recent-posts__more:hover {
        background-color: #202328;
        transform: translateY(-2px);
    }

/* スマホ */
/* ========================================
   RECENT POSTS - Mobile
======================================== */

@media (max-width: 768px) {

    .recent-posts {
        width: calc(100% - 24px);
        padding: 64px 0;
    }

    .recent-posts__heading {
        margin-bottom: 24px;
    }

    .recent-posts__title {
        font-size: 32px;
        line-height: 1.15;
    }


    /* 3枚を横並び */
    .recent-posts__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }


    .recent-posts__item {
        min-width: 0;
    }


    /* サムネイル */
    .recent-posts__thumbnail {
        aspect-ratio: 1 / 1;
    }

        .recent-posts__thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }


    /* カード内文字 */
    .recent-posts__content {
        padding: 10px;
    }

    .recent-posts__date {
        margin-bottom: 4px;
        font-size: 9px;
    }

    .recent-posts__post-title {
        margin-bottom: 0;
        font-size: 12px;
        line-height: 1.4;
    }


    /* 3列では本文まで入れると窮屈なので省略 */
    .recent-posts__excerpt {
        display: none;
    }


    /* ALL POSTSは今まで通り右側 */
    .recent-posts__actions {
        margin-top: 24px;
    }

    .recent-posts__more {
        padding: 10px 16px;
        font-size: 12px;
    }
}