/* Portfolio overrides — loaded after style.min.css */

/* [hidden] を確実に効かせる（同じ詳細度の display 指定に負けないように）。
   WORKS の制作時期・使用ツール・概要など、情報が揃うまで隠すフィールドに使用 */
[hidden] {
    display: none !important;
}

/* ヒーロー見出し。
   - margin-bottom: サブテキストとの間隔を詰める（既存 60px を上書き）
   - overflow-wrap: 長い英単語が万一はみ出しても画面外で切れないための保険
   フォントサイズ・行間・折り返し位置・レイアウトは変更しない */
.heading__title {
    margin-bottom: 32px;
    overflow-wrap: break-word;
}

@media (max-width: 1210px) {
    .heading__title {
        margin-bottom: calc(16px + 16 * ((100vw - 375px) / 835));
    }
}

/* サブテキスト "Based in Japan & Hong Kong." */
.heading__subtitle {
    margin: 0 0 60px;
    color: #7d838c;
    font-weight: 500;
    font-size: 22px;
    letter-spacing: 0.04em;
}

.body--white .heading__subtitle {
    color: #4a4f57;
}

@media (max-width: 1210px) {
    .heading__subtitle {
        font-size: calc(15px + 7 * ((100vw - 375px) / 835));
        margin-bottom: calc(20px + 40 * ((100vw - 375px) / 835));
    }
}

/* PCのみ "Based in Japan & Hong Kong." を Digital Creator（タイトル
   3行目）のすぐ下、少し右にずらした位置へ配置。
   前回は position:absolute ＋ 固定px座標（top/left）で配置していたが、
   タイトルの実際の折り返し幅はブラウザのフォントレンダリングに依存し
   完全には予測できないため、座標がずれると .heading の overflow:hidden
   の外に出て見えなくなるリスクがあった。
   今回は absolute をやめ、.heading__subtitle を元どおり通常フロー
   （<h1 class="heading__title"> の直後、.container内）に戻した上で、
   margin-top（負の値でタイトルとの間隔を20〜25px程度に詰める）と
   margin-left（右にずらす）だけで調整している。通常フローのため、
   .heading__title の直後に必ず「すぐ下」に表示され、どんな画面幅でも
   HERO外・MARQUEE側へ消えることがない。.heading .container は
   position:relative; z-index:1; のまま（hero-artより確実に手前）。
   absoluteをやめたことで、従来subtitleの高さ分をheadingの高さへ
   補う必要があった .container の padding-bottom:93px の打ち消しも
   不要になったため削除した（Hero本来の高さの出し方に戻っただけで、
   高さの基準値自体は変更していない）。
   1210px以下（タブレット・スマホ）はこのブロックのスコープ外のため、
   既存どおり margin-left の無い通常の左寄せのまま変更していない */
@media (min-width: 1211px) {
    .heading__subtitle {
        margin-top: -10px;
        margin-left: 820px;
    }
}


/* ===== WHAT I DO（既存 .count セクションを流用）=====
   カード自体のデザイン・カラー・余白・ホバー（アイコン背景反転）は
   style.min.css のまま。増えた日本語1行ぶんだけ微調整する */

/* セクション見出しの下余白（groups-section-top を流用しているので基本は既存値）。
   count 専用に少しだけ詰める */
.count__head {
    margin-bottom: 40px;
}
@media (max-width: 1210px) {
    .count__head {
        margin-bottom: calc(20px + 20 * ((100vw - 375px) / 835));
    }
}

/* Clash Display はスペースが細く "WHAT I DO" が詰まって見えるため語間を広げる */
.count__head .groups-section-top__title {
    word-spacing: 0.18em;
}

/* 英語カテゴリ名（既存 .count-item__subtext を流用、字間だけ調整） */
.count-item__subtext {
    letter-spacing: 0.04em;
}

/* 日本語の詳細行。和文は Zen Kaku Gothic New。
   モダンな英字（Clash）と馴染むよう、細め・やや広めの字間・ゆったりした行間に調整 */
.count-item__desc {
    margin-top: 12px;
    color: #0e1218;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.03em;
}
@media (max-width: 1210px) {
    .count-item__desc {
        font-size: calc(12.5px + 1.5 * ((100vw - 375px) / 835));
        margin-top: calc(8px + 4 * ((100vw - 375px) / 835));
    }
}


/* ===== WHAT I DO：PCはhoverで裏面にflipするカード =====
   表面＝VISUAL（都市グラフィック＋テーマカラーで惹きつける）
   裏面＝INFORMATION（装飾を抑え、対応工程を読みやすく伝える）
   という役割分担にしている。
   outer の .count-item はグリッドセル兼perspectiveコンテナに専念させ、
   実際の背景・padding・border-radiusは中の .count-item__face（表/裏）側へ
   移した。vendor側の .count-item:nth-child(N){background:...}は透明化し、
   同じ色を .count-item__face--front / --back 側で再現している
   （vendorファイル自体は編集しない）。
   回転トリガーは「hoverできる環境（マウス等）」でのみCSSの:hoverに
   反応させ、タッチ端末では js/custom.js が付け外しする
   .is-flipped クラスだけで開閉する。prefers-reduced-motion では
   3D回転をやめ、opacityのクロスフェードに切り替える。

   表面：都市写真＋各カードのテーマカラーのグラデーションを
   background-blend-mode:overlay で一体化させ、「写真カード」ではなく
   色味の強いグラフィックカードに見えるようにしている。01=HONG KONG(黄)、
   02=TOKYO(桃)、03=VANCOUVER(紫)、04=PARIS(水色)。文字は白＋ごく弱い
   text-shadowで可読性を確保。
   裏面：画像を外し、各テーマカラーの非常に淡いグラデーション＋濃いめの
   ダーク文字に変更し、情報の読みやすさを最優先にしている。
   .count-item{height:100%}はこのブロックの1箇所にのみ記述（重複整理済み） */
.count-item {
    position: relative;
    height: 100%;
    padding: 0;
    perspective: 1400px;
    transition: transform 0.35s ease;
}
.count-item:nth-child(1),
.count-item:nth-child(2),
.count-item:nth-child(3),
.count-item:nth-child(4) {
    background: transparent;
}
.body--white .count-item:nth-child(4) {
    background: transparent;
    border: none;
}
.count-item__flip {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.count-item__face {
    box-sizing: border-box;
    border-radius: 25px;
    padding: 40px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
@media (max-width: 1210px) {
    .count-item__face {
        border-radius: 20px;
        padding: calc(26px + 14 * ((100vw - 375px) / 835));
    }
}

/* ---------- 表面：VISUAL ---------- */
.count-item__face--front {
    position: relative;
    height: 100%;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 115px;
    background-blend-mode: overlay;
}
@media (max-width: 1210px) {
    .count-item__face--front {
        min-height: calc(320px + 110 * ((100vw - 375px) / 835));
        padding-top: calc(86px + 30 * ((100vw - 375px) / 835));
    }
}
/* 文字まわりだけをごく薄く暗くして可読性を確保する層。画像そのものの
   明るさ・カラフルさは background-blend-mode の対象外で維持したいため、
   background合成ではなく独立した疑似要素（z-index:-1）として重ねている。
   上から下へフェードし、カード下部（詳しく見るの周辺）はほぼ素の写真のまま */
.count-item__face--front::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(8, 6, 2, 0.46) 0%,
        rgba(8, 6, 2, 0.3) 30%,
        rgba(8, 6, 2, 0.1) 52%,
        rgba(8, 6, 2, 0) 66%
    );
    pointer-events: none;
}
.count-item:nth-child(1) .count-item__face--front {
    background:
        linear-gradient(165deg, rgba(249, 212, 66, 0.58) 0%, rgba(224, 163, 0, 0.5) 100%),
        url("../images/what-i-do/hongkong.png") center 38% / cover no-repeat;
}
.count-item:nth-child(2) .count-item__face--front {
    background:
        linear-gradient(165deg, rgba(255, 153, 192, 0.56) 0%, rgba(216, 77, 140, 0.48) 100%),
        url("../images/what-i-do/tokyo.png") 66% 42% / cover no-repeat;
}
.count-item:nth-child(3) .count-item__face--front {
    background:
        linear-gradient(165deg, rgba(153, 129, 194, 0.56) 0%, rgba(106, 76, 156, 0.48) 100%),
        url("../images/what-i-do/vancouver.png") center 52% / cover no-repeat;
}
.count-item:nth-child(4) .count-item__face--front {
    background:
        linear-gradient(165deg, rgba(111, 203, 232, 0.56) 0%, rgba(58, 160, 200, 0.48) 100%),
        url("../images/what-i-do/paris.png") 68% 55% / cover no-repeat;
}
@media (max-width: 700px) {
    .count-item:nth-child(1) .count-item__face--front {
        background-position: center 35%;
    }
    .count-item:nth-child(2) .count-item__face--front {
        background-position: 62% 40%;
    }
    .count-item:nth-child(3) .count-item__face--front {
        background-position: center 50%;
    }
    .count-item:nth-child(4) .count-item__face--front {
        background-position: 62% 50%;
    }
}
/* 表面の文字は写真の上に乗るため白＋ごく弱いtext-shadowに統一。
   vendor側に .body--white .count-item:nth-child(4) .count-item__text /
   __subtext { color:#0e1218 } という高詳細度の上書きがあるため、
   4枚目だけは同等以上の詳細度で明示的に白へ戻している */
.count-item__face--front .count-item__text,
.count-item__face--front .count-item__subtext,
.count-item__face--front .count-item__desc {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.4);
}
/* 一番小さい説明文（Webサイト / LP / UI 等）はフォントが細い分
   コントラストが落ちやすいため、影をさらに一段強める */
.count-item__face--front .count-item__desc {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 3px 14px rgba(0, 0, 0, 0.5);
}
.body--white .count-item:nth-child(4) .count-item__face--front .count-item__text,
.body--white .count-item:nth-child(4) .count-item__face--front .count-item__subtext {
    color: #fff;
}
/* 表面右下の「詳しく見る ↻」。CTAボタンではなく、カードが裏返せることを
   伝える視覚的な誘導。クリック／hover対象はカード全体のままにするため
   pointer-events:none にしている */
.count-item__flip-hint {
    position: absolute;
    right: 28px;
    bottom: 28px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 3px 10px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    transition: transform 0.3s ease;
}
.count-item__flip-hint-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    font-size: 19px;
    line-height: 1;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 1210px) {
    .count-item__flip-hint {
        right: calc(18px + 10 * ((100vw - 375px) / 835));
        bottom: calc(16px + 12 * ((100vw - 375px) / 835));
        font-size: calc(13px + 2 * ((100vw - 375px) / 835));
    }
    .count-item__flip-hint-icon {
        width: calc(31px + 9 * ((100vw - 375px) / 835));
        height: calc(31px + 9 * ((100vw - 375px) / 835));
        font-size: calc(16px + 3 * ((100vw - 375px) / 835));
    }
}
@media (hover: hover) and (pointer: fine) {
    .count-item:hover .count-item__flip-hint {
        transform: translateX(-3px);
    }
    .count-item:hover .count-item__flip-hint-icon {
        transform: rotate(130deg);
    }
}
.count-item.is-flipped .count-item__flip-hint {
    transform: translateX(-3px);
}
.count-item.is-flipped .count-item__flip-hint-icon {
    transform: rotate(130deg);
}
@media (prefers-reduced-motion: reduce) {
    .count-item__flip-hint,
    .count-item__flip-hint-icon {
        transition: none;
    }
}

/* ---------- 裏面：INFORMATION ---------- */
.count-item__face--back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: rotateY(180deg);
    color: #0e1218;
}
.count-item:nth-child(1) .count-item__face--back {
    background: linear-gradient(160deg, #fdf6e0 0%, #fbe9c6 100%);
}
.count-item:nth-child(2) .count-item__face--back {
    background: linear-gradient(160deg, #fdeaf2 0%, #f9d7e5 100%);
}
.count-item:nth-child(3) .count-item__face--back {
    background: linear-gradient(160deg, #f1e9fa 0%, #e2d8f4 100%);
}
.count-item:nth-child(4) .count-item__face--back {
    background: linear-gradient(160deg, #eaf7fc 0%, #d9eef5 100%);
}
/* 裏面の情報階層：カテゴリ名（小さく控えめ）→ 説明文（本文として最も読ませる）
   → 工程一覧（番号を小さなデザイン要素として）→ VIEW WORKS（下部固定） */
.count-item__back-title {
    margin: 0 0 8px;
    font-family: "Clash Grotesk", sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(14, 18, 24, 0.6);
}
.count-item__back-desc {
    margin: 0 0 20px;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.02em;
    color: #0e1218;
}
.count-item__steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.count-item__steps li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: rgba(14, 18, 24, 0.82);
}
.count-item__step-num {
    flex: 0 0 auto;
    min-width: 18px;
    font-family: "Clash Grotesk", sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.02em;
}
.count-item:nth-child(1) .count-item__step-num {
    color: #e0a300;
}
.count-item:nth-child(2) .count-item__step-num {
    color: #d84d8c;
}
.count-item:nth-child(3) .count-item__step-num {
    color: #7a5bab;
}
.count-item:nth-child(4) .count-item__step-num {
    color: #2a9ec2;
}
.count-item__back-link {
    margin-top: auto;
    padding-top: 20px;
    align-self: flex-start;
    font-family: "Clash Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: opacity 0.25s ease;
}
.count-item__back-link:hover {
    opacity: 0.65;
}
.count-item:nth-child(1) .count-item__back-link {
    color: #e0a300;
}
.count-item:nth-child(2) .count-item__back-link {
    color: #d84d8c;
}
.count-item:nth-child(3) .count-item__back-link {
    color: #7a5bab;
}
.count-item:nth-child(4) .count-item__back-link {
    color: #2a9ec2;
}
@media (max-width: 1210px) {
    .count-item__back-title {
        font-size: calc(10.5px + 1.5 * ((100vw - 375px) / 835));
    }
    .count-item__back-desc {
        font-size: calc(12.5px + 1.5 * ((100vw - 375px) / 835));
        margin-bottom: calc(14px + 6 * ((100vw - 375px) / 835));
    }
    .count-item__steps li {
        font-size: calc(11.5px + 1.5 * ((100vw - 375px) / 835));
    }
    .count-item__steps {
        gap: calc(5px + 2 * ((100vw - 375px) / 835));
    }
}

/* ---------- flip trigger / motion ---------- */
/* hover（マウス等、実際にhoverできる環境のみ）でflip＋ごく軽く浮く */
@media (hover: hover) and (pointer: fine) {
    .count-item:hover {
        transform: translateY(-4px);
    }
    .count-item:hover .count-item__flip {
        transform: rotateY(180deg);
    }
}
/* タップ／クリックでのトグル（js/custom.js が付け外しする .is-flipped）。
   hoverできない環境ではこれが唯一のトリガーになる */
.count-item.is-flipped {
    transform: translateY(-4px);
}
.count-item.is-flipped .count-item__flip {
    transform: rotateY(180deg);
}
@media (prefers-reduced-motion: reduce) {
    .count-item,
    .count-item__flip {
        transition: none;
    }
    .count-item:hover,
    .count-item.is-flipped {
        transform: none;
    }
    .count-item__face {
        transition: opacity 0.25s ease;
    }
    .count-item__face--back {
        transform: none;
        opacity: 0;
        pointer-events: none;
    }
    .count-item:hover .count-item__flip,
    .count-item.is-flipped .count-item__flip {
        transform: none;
    }
    .count-item:hover .count-item__face--back,
    .count-item.is-flipped .count-item__face--back {
        opacity: 1;
        pointer-events: auto;
    }
    .count-item:hover .count-item__face--front,
    .count-item.is-flipped .count-item__face--front {
        opacity: 0;
    }
}


/* ---------- スマホ（550px以下）：flipをやめてアコーディオンにする ----------
   PC・タブレット（551px以上）は上記のflipカードのまま一切変えない。
   550px以下は vendor側で1列表示になる幅に合わせ、表面の上に重ねた
   .count-item__toggle（button、aria-expandedはjs/custom.jsが更新）で開閉する。
   裏面（.count-item__face--back）はそのまま「カード直下の説明エリア」として
   再利用し、.count-item__flip を grid（auto 0fr → auto 1fr）にして高さを
   JS計算なしでアニメーションさせる。閉じている間は visibility:hidden で
   中のリンクにフォーカスが入らないようにしている。
   prefers-reduced-motion の既存ルール（:hover時に表面をopacity:0にする等）は
   タッチ端末で:hoverが残ると表面が消えるため、同じ詳細度でここで打ち消す */
.count-item__toggle {
    display: none;
}
@media (max-width: 550px) {
    .count-item,
    .count-item:hover,
    .count-item.is-flipped {
        height: auto;
        perspective: none;
        transform: none;
    }
    .count-item__flip,
    .count-item:hover .count-item__flip,
    .count-item.is-flipped .count-item__flip {
        display: grid;
        grid-template-rows: auto 0fr;
        height: auto;
        transform: none;
        transform-style: flat;
        transition: grid-template-rows 0.35s ease;
    }
    .count-item.is-open .count-item__flip {
        grid-template-rows: auto 1fr;
    }
    .count-item__face {
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
    }
    .count-item__face--front,
    .count-item:hover .count-item__face--front,
    .count-item.is-flipped .count-item__face--front {
        min-height: 220px;
        padding-top: 56px;
        opacity: 1;
    }
    .count-item__flip-hint {
        display: none;
    }

    /* 表面全体を覆う透明なbutton。見た目は従来の「詳しく見る ↻」と同じ位置・
       雰囲気で「詳しく見る ＋」を表示する */
    .count-item__toggle {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: inherit;
        background: transparent;
        color: #fff;
        font: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .count-item__toggle:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -6px;
    }
    .count-item__toggle-sr {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .count-item__toggle-hint {
        position: absolute;
        right: 18px;
        bottom: 16px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: "Zen Kaku Gothic New", "Hiragino Sans",
            "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 3px 10px rgba(0, 0, 0, 0.35);
    }
    /* ＋／−はCSSの2本線で描き、開いたら縦線を寝かせて「−」にする */
    .count-item__toggle-icon {
        position: relative;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, 0.9);
        background: rgba(255, 255, 255, 0.14);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    }
    .count-item__toggle-icon::before,
    .count-item__toggle-icon::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 13px;
        height: 2px;
        border-radius: 1px;
        background: currentColor;
        transform: translate(-50%, -50%);
        transition: transform 0.3s ease;
    }
    .count-item__toggle-icon::after {
        transform: translate(-50%, -50%) rotate(90deg);
    }
    .count-item.is-open .count-item__toggle-icon::after {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    /* 裏面＝カード直下の説明エリア */
    .count-item__face--back,
    .count-item:hover .count-item__face--back,
    .count-item.is-flipped .count-item__face--back {
        position: relative;
        inset: auto;
        min-height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        visibility: hidden;
        transition: padding 0.35s ease, margin-top 0.35s ease, visibility 0s linear 0.35s;
    }
    .count-item.is-open .count-item__face--back {
        margin-top: 8px;
        padding-top: 24px;
        padding-bottom: 24px;
        visibility: visible;
        transition: padding 0.35s ease, margin-top 0.35s ease, visibility 0s;
    }
    /* カテゴリ名は真上の表面と重複するため、説明エリアでは省略する */
    .count-item__back-title {
        display: none;
    }
    .count-item__back-link {
        padding-top: 16px;
    }
}
@media (max-width: 550px) and (prefers-reduced-motion: reduce) {
    .count-item__flip,
    .count-item:hover .count-item__flip,
    .count-item.is-flipped .count-item__flip,
    .count-item__face--back,
    .count-item:hover .count-item__face--back,
    .count-item.is-flipped .count-item__face--back,
    .count-item.is-open .count-item__face--back,
    .count-item__toggle-icon::before,
    .count-item__toggle-icon::after {
        transition: none;
    }
}


/* ===== ファーストビュー / WHAT I DO の区切り：無限マーキー =====
   細いボーダー2本で区切りとして機能させる。上下に十分な余白。
   ヒーロー・WHAT I DO 本体のレイアウトには一切触れない */
.marquee {
    /* ヒーロー下（heading__subtitle の margin-bottom 60px）とカードの間に置く */
    margin-bottom: 72px;
    padding: 44px 0;
    border-top: 1px solid #4b515a;
    border-bottom: 1px solid #4b515a;
    overflow: hidden;
}
.body--white .marquee {
    border-top-color: #d7dadd;
    border-bottom-color: #d7dadd;
}
@media (max-width: 1210px) {
    .marquee {
        margin-bottom: calc(40px + 32 * ((100vw - 375px) / 835));
        padding: calc(26px + 18 * ((100vw - 375px) / 835)) 0;
    }
}

.marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
    /* 4 グループ連結 → -25% で 1 グループぶん移動＝継ぎ目なくループ */
    animation: marquee-scroll 22s linear infinite;
}

.marquee__group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
}

.marquee__item {
    color: #f4f5f7;
    font-weight: 500;
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.body--white .marquee__item {
    color: #0e1218;
}
@media (max-width: 1210px) {
    .marquee__item {
        font-size: calc(17px + 11 * ((100vw - 375px) / 835));
        letter-spacing: 0.1em;
    }
}

.marquee__star {
    display: inline-block;
    margin: 0 0.75em;
    font-size: 0.66em;
    transform: translateY(-0.06em);
}
.marquee__star--yellow {
    color: #e8b100;
}
.marquee__star--pink {
    color: #ff99c0;
}
.marquee__star--purple {
    color: #9981c2;
}

@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-25%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .marquee__track {
        animation: none;
        transform: translateX(-6%);
    }
}


/* ===== ABOUT ME =====
   海外クリエイターポートフォリオ風。PC は 写真（左・大）＋テキスト（右）の 2 カラム、
   スマホは縦 1 列。ライトテーマ／黄・桃・紫アクセント／余白を活かす */
.about {
    margin-bottom: 120px;
}
@media (max-width: 1210px) {
    .about {
        margin-bottom: calc(64px + 56 * ((100vw - 375px) / 835));
    }
}

.about__inner {
    display: flex;
    align-items: flex-start;
    gap: 72px;
}
@media (max-width: 1210px) {
    .about__inner {
        gap: calc(32px + 40 * ((100vw - 375px) / 835));
    }
}

/* --- 写真 --- */
.about__media {
    position: relative;
    flex: 0 0 42%;
    max-width: 460px;
    padding: 22px 0 0 22px;
}
/* 写真の背面にずらして置くアクセントブロック（余白内に収め、はみ出さない） */
.about__media::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 22px;
    height: 62%;
    border-radius: 24px;
    background: #f9d442;
    z-index: 0;
}
.about__photo {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    /* 元画像も 4:5。万一わずかに切れる場合は人物側（下寄り）を残す */
    object-position: center 55%;
    border-radius: 24px;
}

/* --- テキスト側 --- */
.about__body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 4px;
}
.about__title {
    margin-bottom: 28px;
    word-spacing: 0.18em;
}
@media (max-width: 1210px) {
    .about__title {
        margin-bottom: calc(16px + 12 * ((100vw - 375px) / 835));
    }
}

.about__text {
    max-width: 620px;
}
/* 本文が4段落に増えたため、段落間の余白を広げて内容のまとまり
   （経験／実績・学習／強み）ごとに読みやすく区切る */
.about__text p {
    margin: 0 0 28px;
    color: #2b2f36;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.95;
    letter-spacing: 0.04em;
}
.about__text p:last-child {
    margin-bottom: 0;
}
@media (max-width: 1210px) {
    .about__text p {
        margin-bottom: calc(20px + 8 * ((100vw - 375px) / 835));
        font-size: calc(14.5px + 1.5 * ((100vw - 375px) / 835));
        line-height: 1.9;
    }
}
/* 「強み」として最も伝えたい一文だけを、太字・大判フォントにはせず
   フォントウェイトのみ少し上げて視覚的に強調する */
.about__text-highlight {
    font-weight: 600;
}

/* --- FACTS（実績を数字・英字で簡潔に示すエリア） ---
   .about__profile と同じ「上罫線＋トラッキングされたラベル」の
   デザイン言語を踏襲し、ABOUT本文より目立たない大きさに留める */
.about__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 48px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #d7dadd;
}
.about__fact {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.about__fact-number {
    font-family: "Clash Grotesk", sans-serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.02em;
}
.about__fact-number--pink {
    color: #ff99c0;
}
.about__fact-number--purple {
    color: #9981c2;
}
.about__fact-label {
    color: #7d838c;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
}
@media (max-width: 1210px) {
    .about__facts {
        gap: 24px 36px;
        margin-top: 28px;
        padding-top: 24px;
    }
    .about__fact-number {
        font-size: 22px;
    }
}
@media (max-width: 480px) {
    .about__facts {
        flex-direction: column;
        gap: 18px;
    }
}

/* --- プロフィール（履歴書っぽくならないよう罫線＋トラッキングされたラベル） --- */
.about__profile {
    margin: 40px 0 0;
    border-top: 1px solid #d7dadd;
}
.about__row {
    display: flex;
    align-items: baseline;
    gap: 28px;
    padding: 15px 2px;
    border-bottom: 1px solid #d7dadd;
}
.about__row dt {
    flex: 0 0 78px;
    color: #9981c2;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.16em;
    line-height: 1.8;
}
.about__row dd {
    margin: 0;
    color: #0e1218;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.03em;
}
.about__row dd a {
    color: #0e1218;
    text-decoration: none;
    border-bottom: 1px solid #ff99c0;
    padding-bottom: 1px;
    transition: color .25s, border-color .25s;
}
.about__row dd a:hover {
    color: #9981c2;
    border-bottom-color: #9981c2;
}

/* --- INTERESTS --- */
.about__interests {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 34px;
}
.about__interests-label {
    color: #7d838c;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.22em;
}
.about__interests-list {
    color: #0e1218;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.14em;
}
.about__sep {
    font-style: normal;
    margin: 0 10px;
}
.about__sep--pink {
    color: #ff99c0;
}
.about__sep--purple {
    color: #9981c2;
}
.about__sep--yellow {
    color: #e8b100;
}

/* --- スマホ：縦 1 列 --- */
@media (max-width: 900px) {
    .about__inner {
        flex-direction: column;
        gap: 36px;
    }
    .about__media {
        flex: 0 0 auto;
        width: 100%;
        max-width: 380px;
    }
    .about__profile {
        margin-top: 32px;
    }
}
/* スマホ：横スクロール対策
   INTERESTS の「TRAVEL/ART/PHOTOGRAPHY/VLOG」はスペースを含まない1つの
   インライン列のため折り返し位置が無く、最小幅が約394pxになる。縦1列時の
   .about__inner は align-items:flex-start のため .about__body がこの最小幅に
   合わせて広がり、390px幅以下で画面外へはみ出していた。
   一覧を flex-wrap にして項目（単語と区切り / ）の間で折り返せるようにし、
   .about__body も親の幅いっぱい（=はみ出さない）に固定する。
   1行に収まる幅では見た目は従来と同じ */
@media (max-width: 600px) {
    .about__body {
        width: 100%;
    }
    .about__interests-list {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: baseline;
        row-gap: 4px;
    }
}


/* ===== WORKS =====
   海外クリエイターポートフォリオ風。01 FEATURED WORKS を大きく、
   02 GRAPHIC DESIGN はコンパクトなグリッド、03 MARKETING & CONTENT は
   デザイン作品と区別した横長リストにして強弱をつける。
   タイポ・配色は Hero / マーキー / WHAT I DO / ABOUT ME と共通の
   Clash（英字）+ Zen Kaku Gothic New（和文）、黄・桃・紫アクセント。 */
.works {
    margin-bottom: 120px;
}
@media (max-width: 1210px) {
    .works {
        margin-bottom: calc(60px + 60 * ((100vw - 375px) / 835));
    }
}

.works__head {
    max-width: 760px;
    margin-bottom: 72px;
}
.works__title {
    margin-bottom: 20px;
}
.works__lead {
    color: #4a4f57;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.95;
    letter-spacing: 0.03em;
}
@media (max-width: 1210px) {
    .works__head {
        margin-bottom: calc(36px + 36 * ((100vw - 375px) / 835));
    }
    .works__lead {
        font-size: calc(14.5px + 2.5 * ((100vw - 375px) / 835));
    }
}

/* --- サブセクション見出し（01 / 02 / 03） --- */
.works__group {
    margin-bottom: 96px;
}
.works__group:last-child {
    margin-bottom: 0;
}
@media (max-width: 1210px) {
    .works__group {
        margin-bottom: calc(52px + 44 * ((100vw - 375px) / 835));
    }
}
.works__group-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #d7dadd;
}
.works__group-num {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.06em;
}
.works__group-num--pink {
    color: #ff99c0;
}
.works__group-num--purple {
    color: #9981c2;
}
.works__group-num--yellow {
    color: #e8b100;
}
.works__group-title {
    margin: 0;
    color: #0e1218;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.works__group-sub {
    color: #7d838c;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.04em;
}
@media (max-width: 1210px) {
    .works__group-head {
        margin-bottom: calc(24px + 16 * ((100vw - 375px) / 835));
    }
}

/* --- 画像プレースホルダー共通ラベル ---
   実画像に差し替えたら works__thumb--placeholder クラスを外すだけで消える */
.works__thumb--placeholder {
    position: relative;
}
.works__thumb--placeholder::after {
    content: "WORK";
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(14, 18, 24, 0.3);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-indent: 0.32em;
    pointer-events: none;
}

/* --- 01 FEATURED WORKS：大きく2カラム --- */
.works-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
}
@media (max-width: 900px) {
    .works-featured {
        grid-template-columns: 1fr;
        gap: 56px;
    }
}

.works-featured__item {
    display: block;
    color: inherit;
    text-decoration: none;
}
.works-featured__media {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    aspect-ratio: 4 / 3;
    margin-bottom: 28px;
}
.works-featured__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.works-featured__item:hover .works-featured__img {
    transform: scale(1.045);
}
/* 介護アプリのモックアップ画像のみ：cover だと左右（タイトル／右端のスマホ）が
   切れてしまうため、この画像だけ contain に切り替えて全体を必ず表示する。
   .works-featured__img（cover、らくらくEコマース側）自体は変更しない */
.works-featured__img--contain {
    object-fit: contain;
    object-position: center center;
}
.works-featured__arrow {
    position: absolute;
    z-index: 3;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #0e1218;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translate(-6px, 6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.works-featured__item:hover .works-featured__arrow {
    opacity: 1;
    transform: translate(0, 0);
}

.works-featured__category {
    display: block;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.16em;
}
.works-featured__category--pink {
    color: #ff99c0;
}
.works-featured__category--purple {
    color: #9981c2;
}

.works-featured__title {
    margin: 0 0 20px;
    color: #0e1218;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 500;
    font-size: 23px;
    line-height: 1.55;
    letter-spacing: 0.02em;
}
@media (max-width: 1210px) {
    .works-featured__title {
        font-size: calc(18.5px + 4.5 * ((100vw - 375px) / 835));
    }
}

.works-featured__meta {
    margin: 0;
}
.works-featured__meta-row {
    display: flex;
    gap: 18px;
    padding: 12px 0;
    border-top: 1px solid #e7e5ea;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
}
.works-featured__meta-row:last-of-type {
    border-bottom: 1px solid #e7e5ea;
}
.works-featured__meta-row dt {
    flex: 0 0 88px;
    margin: 0;
    color: #9981c2;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
}
.works-featured__meta-row dd {
    margin: 0;
    color: #0e1218;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.02em;
}

.works-featured__desc {
    margin: 20px 0 0;
    color: #4a4f57;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.9;
    letter-spacing: 0.03em;
}

/* --- 02 GRAPHIC DESIGN：コンパクトな3カラム --- */
.works-graphic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
@media (max-width: 900px) {
    .works-graphic {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }
}
@media (max-width: 560px) {
    .works-graphic {
        grid-template-columns: 1fr;
        max-width: 340px;
        margin: 0 auto;
    }
}

/* 3枚のバナーは縦横比が異なる可能性があるため、cover で切らずに
   淡いトーン背景の中央へ原寸比率のまま配置。カード枠(1:1)は3枚とも共通で高さを揃える */
.works-graphic__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 8%;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 18px;
}
.works-graphic__media--yellow {
    background: #fbf3d6;
}
.works-graphic__media--pink {
    background: #fbe3ec;
}
.works-graphic__media--purple {
    background: #e9e0f1;
}
.works-graphic__img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 20px -10px rgba(14, 18, 24, 0.22);
    transition: transform 0.5s ease;
}
.works-graphic__item:hover .works-graphic__img {
    transform: scale(1.04);
}
/* カードを詳細ページへのリンク（<a>）にした場合のリセット。<div> のままの他カードには影響なし */
.works-graphic__item {
    display: block;
    color: inherit;
    text-decoration: none;
}
.works-graphic__title {
    margin: 0 0 6px;
    color: #0e1218;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0.02em;
}
.works-graphic__category {
    display: block;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
}
.works-graphic__category--yellow {
    color: #e8b100;
}
.works-graphic__category--pink {
    color: #ff99c0;
}
.works-graphic__category--purple {
    color: #9981c2;
}

/* --- 03 MARKETING & CONTENT：横長リストでデザイン作品と区別 --- */
.works-content {
    display: flex;
    flex-direction: column;
    gap: 36px;
}
.works-content__item {
    display: flex;
    align-items: center;
    gap: 32px;
    padding-bottom: 36px;
    border-bottom: 1px solid #d7dadd;
}
.works-content__item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
.works-content__media {
    flex: 0 0 260px;
    overflow: hidden;
    border-radius: 16px;
    aspect-ratio: 16 / 9;
}
.works-content__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.works-content__body {
    flex: 1 1 auto;
    min-width: 0;
}
.works-content__role {
    display: block;
    margin-bottom: 10px;
    color: #7d838c;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.16em;
}
.works-content__title {
    margin: 0 0 10px;
    color: #0e1218;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.6;
    letter-spacing: 0.02em;
}
.works-content__desc {
    margin: 0;
    color: #4a4f57;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1.85;
    letter-spacing: 0.03em;
}
@media (max-width: 700px) {
    .works-content__item {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }
    .works-content__media {
        flex-basis: auto;
        width: 100%;
    }
}


/* ===== WORK DETAIL（作品詳細ページ共通）=====
   home.html の Hero / WORKS と同じ余白・タイポ・アクセントで統一。
   今後の詳細ページ（介護アプリ等）もこのクラス群を使い回す想定 */
.work-detail {
    padding-top: 64px;
}
@media (max-width: 1210px) {
    .work-detail {
        padding-top: calc(32px + 32 * ((100vw - 375px) / 835));
    }
}

/* --- 01 HERO ---
   モックアップ画像は削除。英字タイポグラフィを主役にした2行タイトル＋
   小さめの和文サブタイトルで構成。DESIGN セクションがすぐ下に来るぶん、
   縦の余白は詰めめにして「タイトル→CTA→完成デザイン」が視界に収まるようにする */
.work-detail__hero {
    max-width: 880px;
    margin-bottom: 64px;
}
/* HERO 内の最後の要素（CTAあり=ボタン / CTAなし=メタ行）の余白を打ち消し、
   HERO が必要以上に縦長にならないようにする */
.work-detail__hero > :last-child {
    margin-bottom: 0;
}
@media (max-width: 1210px) {
    .work-detail__hero {
        margin-bottom: calc(36px + 28 * ((100vw - 375px) / 835));
    }
}

.work-detail__title {
    margin: 0 0 22px;
    color: #0e1218;
    font-weight: 700;
    font-size: 52px;
    line-height: 0.98;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
@media (max-width: 1210px) {
    .work-detail__title {
        font-size: calc(30px + 22 * ((100vw - 375px) / 835));
        margin-bottom: calc(14px + 8 * ((100vw - 375px) / 835));
    }
}

/* 英字タイトルへのごく控えめな紫アクセント（小さなライン1本のみ） */
.work-detail__hero-rule {
    display: block;
    width: 40px;
    height: 3px;
    margin-bottom: 20px;
    border-radius: 2px;
    background: #9981c2;
}

.work-detail__hero-jp {
    margin: 0 0 28px;
    color: #4a4f57;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.08em;
}
@media (max-width: 1210px) {
    .work-detail__hero-jp {
        font-size: calc(13.5px + 1.5 * ((100vw - 375px) / 835));
        margin-bottom: calc(18px + 8 * ((100vw - 375px) / 835));
    }
}

.work-detail__hero-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 32px;
}
.work-detail__hero-category {
    color: #9981c2;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.14em;
}
.work-detail__hero-date {
    color: #7d838c;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.03em;
}
/* CTA：「らくらくEコマース」のブルーを、鮮やかすぎない濃さに調整して塗りボタンに。
   hover で少し濃く＋矢印がわずかに右上へ */
.work-detail__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    color: #fff;
    background: #3d6fb0;
    border: 1px solid #3d6fb0;
    border-radius: 14px;
    padding: 16px 30px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-decoration: none;
    box-shadow: 0 12px 26px -14px rgba(61, 111, 176, 0.65);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.work-detail__cta:hover {
    background: #315d99;
    border-color: #315d99;
    box-shadow: 0 14px 30px -12px rgba(49, 93, 153, 0.7);
}
@media (max-width: 1210px) {
    .work-detail__cta {
        font-size: calc(12.5px + 1.5 * ((100vw - 375px) / 835));
        padding: calc(13px + 3 * ((100vw - 375px) / 835)) calc(22px + 8 * ((100vw - 375px) / 835));
    }
}
.work-detail__cta-arrow {
    color: inherit;
    transition: transform 0.25s ease;
}
.work-detail__cta:hover .work-detail__cta-arrow {
    transform: translate(2px, -2px);
}

/* --- 02 PROJECT INFO --- */
.work-detail__info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 28px 32px;
    margin-bottom: 100px;
    padding: 28px 0;
    border-top: 1px solid #d7dadd;
    border-bottom: 1px solid #d7dadd;
}
.work-detail__info-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* grid item のデフォルト min-width:auto によるはみ出しを防ぐ */
    min-width: 0;
}
.work-detail__info-label {
    color: #9981c2;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
}
.work-detail__info-value {
    color: #0e1218;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0.02em;
    overflow-wrap: break-word;
}
@media (max-width: 1210px) {
    .work-detail__info {
        margin-bottom: calc(56px + 44 * ((100vw - 375px) / 835));
    }
}

/* --- 汎用セクション見出し（OVERVIEW / DESIGN / DESIGN POINT） --- */
.work-detail__section {
    margin-bottom: 96px;
}
.work-detail__section:last-of-type {
    margin-bottom: 64px;
}
@media (max-width: 1210px) {
    .work-detail__section {
        margin-bottom: calc(52px + 44 * ((100vw - 375px) / 835));
    }
}
.work-detail__section-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 32px;
    padding-bottom: 18px;
    border-bottom: 1px solid #d7dadd;
}
.work-detail__section-eyebrow {
    margin: 0;
    color: #0e1218;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.work-detail__section-jp {
    color: #7d838c;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.04em;
}

.work-detail__text {
    margin: 0;
    color: #4a4f57;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0.03em;
}
@media (max-width: 1210px) {
    .work-detail__text {
        font-size: calc(14px + 2 * ((100vw - 375px) / 835));
        line-height: 1.9;
    }
}

/* --- 04 / 05 TARGET & PURPOSE（軽めの2カラム） --- */
.work-detail__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}
.work-detail__split-item {
    min-width: 0;
}
.work-detail__split-label {
    margin: 0 0 12px;
    color: #0e1218;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.work-detail__split-label span {
    margin-left: 10px;
    color: #7d838c;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: none;
}
@media (max-width: 700px) {
    .work-detail__split {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* --- DESIGN（1枚もの作品：バナー等をギャラリー風に大きく中央表示）---
   GRAPHIC DESIGN 系の詳細ページ共通。装飾は最小限（極薄シャドウ＋小さめ角丸のみ） */
.work-detail__stage {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
}
.work-detail__banner {
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 18px 44px -22px rgba(14, 18, 24, 0.28);
}

/* --- 06 DESIGN：PC広め＋SPはミニマルなスマホ風フレームでスクロール確認（LP系）--- */
.work-detail__design {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
    align-items: start;
}
.work-detail__design-tag {
    display: inline-block;
    margin-bottom: 16px;
    color: #7d838c;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.18em;
}
/* ミニマルなフレーム（角丸＋細いボーダーのみ）。中の画像は原寸比率のまま、
   フレーム内だけ縦スクロールして全体を確認できる。PC・SP共通の仕組み */
.work-detail__frame {
    width: 100%;
    border: 1px solid #d7dadd;
    background: #fff;
}
.work-detail__frame-screen {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.work-detail__frame-screen img {
    display: block;
    width: 100%;
    height: auto;
}

/* PC：横幅いっぱいの大きめフレーム（高さ固定でスクロール） */
.work-detail__frame--pc {
    height: 720px;
    border-radius: 18px;
    padding: 14px;
}
.work-detail__frame--pc .work-detail__frame-screen {
    border-radius: 8px;
}
@media (max-width: 1210px) {
    .work-detail__frame--pc {
        height: calc(420px + 300 * ((100vw - 375px) / 835));
    }
}

/* SP：スマートフォンの画面をイメージした縦長フレーム */
.work-detail__frame--sp {
    max-width: 300px;
    aspect-ratio: 9 / 19.5;
    border-radius: 30px;
    padding: 10px;
}
.work-detail__frame--sp .work-detail__frame-screen {
    border-radius: 20px;
}

.work-detail__design-hint {
    margin: 14px 0 0;
    color: #7d838c;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 400;
    font-size: 12.5px;
    letter-spacing: 0.03em;
}

@media (max-width: 900px) {
    .work-detail__design {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .work-detail__frame--sp {
        max-width: 300px;
        margin: 0 auto;
    }
    .work-detail__design-sp {
        text-align: center;
    }
}

/* --- 07 DESIGN POINT --- */
.work-detail__points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 900px) {
    .work-detail__points {
        grid-template-columns: 1fr;
    }
}
.work-detail__point {
    background: #eef2f6;
    border-radius: 20px;
    padding: 32px 28px;
}
.work-detail__point-num {
    display: block;
    margin-bottom: 18px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.1em;
}
.work-detail__point-num--pink {
    color: #ff99c0;
}
.work-detail__point-num--purple {
    color: #9981c2;
}
.work-detail__point-num--yellow {
    color: #e8b100;
}
.work-detail__point-title {
    margin: 0 0 12px;
    color: #0e1218;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.6;
    letter-spacing: 0.02em;
}
.work-detail__point-text {
    margin: 0;
    color: #4a4f57;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1.85;
    letter-spacing: 0.03em;
}

/* --- 08 BACK TO WORKS --- */
.work-detail__footer-nav {
    padding-top: 32px;
    border-top: 1px solid #d7dadd;
}
.work-detail__back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0e1218;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    transition: color 0.25s ease, gap 0.25s ease;
}
.work-detail__back-link:hover {
    color: #9981c2;
    gap: 12px;
}

/* --- home.html works-content：カードを詳細ページへのリンク（<a>）にした場合のリセット。
   <div> のままの他カードには影響なし（works-graphic__item と同じ考え方） --- */
.works-content__item {
    color: inherit;
    text-decoration: none;
}

/* --- home.html works-content：PIVOTDOORカードのみ、横長画像をカード内で
   切らずに見せるための modifier。.works-content__img（cover）自体は変更せず、
   他2枚のカード（content-2 / content-3）には影響しない --- */
.works-content__img--contain {
    object-fit: contain;
    background: #eef2f6;
}

/* ===== work-pivotdoor.html 専用（マーケティング実績ページ）=====
   バナー系詳細ページの work-detail__* と同じ余白・タイポ・アクセントで統一 */

/* --- MAIN VISUAL：横長のメインビジュアル。work-detail__stage（中央寄せの箱）は
   バナー詳細ページと共通利用しつつ、幅は横長画像に合わせて専用クラスで調整。
   object-fit は使わず原寸比率のまま表示し、トリミングしない --- */
.work-detail__visual-img {
    display: block;
    width: 100%;
    max-width: 960px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 18px 44px -22px rgba(14, 18, 24, 0.28);
}

/* --- ROLE：担当業務。カードを主張させず、ドット＋テキストのシンプルな2カラムリスト --- */
.work-detail__role-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.work-detail__role-item {
    position: relative;
    padding-left: 18px;
    color: #4a4f57;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.7;
    letter-spacing: 0.03em;
}
.work-detail__role-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9981c2;
}
@media (max-width: 700px) {
    .work-detail__role-list {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* --- CONTENT：制作コンテンツのギャラリー。PC3列→タブレット2列→SP1列 --- */
.work-detail__content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
@media (max-width: 900px) {
    .work-detail__content-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}
@media (max-width: 480px) {
    .work-detail__content-grid {
        grid-template-columns: 1fr;
        max-width: 340px;
        margin: 0 auto;
    }
}
.work-detail__content-media {
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 1 / 1;
    margin-bottom: 14px;
}
.work-detail__content-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.work-detail__content-label {
    margin: 0;
    color: #4a4f57;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 400;
    font-size: 13.5px;
    letter-spacing: 0.03em;
}

/* --- CONTENT（動画）：YouTubeサムネイルのギャラリー。PC3列→タブレット2列→SP1列。
   16:9を維持したまま object-fit: cover で表示（サムネイル自体が16:9のためトリミング無し） --- */
.work-detail__video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
@media (max-width: 900px) {
    .work-detail__video-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}
@media (max-width: 480px) {
    .work-detail__video-grid {
        grid-template-columns: 1fr;
        max-width: 340px;
        margin: 0 auto;
    }
}
.work-detail__video-item {
    display: block;
    color: inherit;
    text-decoration: none;
}
.work-detail__video-media {
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 16 / 9;
    margin-bottom: 14px;
}
.work-detail__video-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.work-detail__video-item:hover .work-detail__video-img {
    transform: scale(1.04);
}
/* タイトル行数がカードごとに違っても高さを揃えるため、2行分の min-height を確保。
   3行になっても切り詰めず自然に折り返す（無理な1行省略はしない） */
.work-detail__video-title {
    margin: 0;
    min-height: 3.2em;
    color: #0e1218;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0.02em;
}
@media (max-width: 480px) {
    .work-detail__video-title {
        min-height: 0;
    }
}

/* --- RESULT：指標を2つ並べて同じ重要度で見せたい場合の薄いラッパー
   （例：kurumi-youtube の MAX. VIEWS / CHANNEL SUBSCRIBERS）。
   work-detail__result 自体は変更せず、2つのボックスを横並びにするだけ --- */
.work-detail__result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 700px) {
    .work-detail__result-grid {
        grid-template-columns: 1fr;
    }
}

/* --- RESULT：運用期間中の最大フォロワー数を大きく見せる。
   「MAX. FOLLOWERS」（小）→ 数字（大）→ 補足説明（小）の縦積みで、
   現在の数値ではなく期間中の最大値であることを誤解なく伝える --- */
.work-detail__result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 48px 24px;
    background: #eef2f6;
    border-radius: 20px;
    text-align: center;
}
.work-detail__result-max {
    color: #9981c2;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.16em;
}
.work-detail__result-num {
    color: #0e1218;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 1;
    letter-spacing: 0.02em;
}
.work-detail__result-label {
    color: #7d838c;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.04em;
}
@media (max-width: 1210px) {
    .work-detail__result {
        padding: calc(28px + 20 * ((100vw - 375px) / 835)) 20px;
    }
    .work-detail__result-num {
        font-size: calc(38px + 26 * ((100vw - 375px) / 835));
    }
}

/* --- OVERVIEW：本文のみ横幅を絞って可読性を上げる（work-detail__text はそのまま、
   modifier クラスとして追加。適用したページ（work-pivotdoor.html / work-rakuraku.html）
   の OVERVIEW 本文にのみ影響し、他のクラス未使用ページには影響しない） --- */
.work-detail__text--narrow {
    max-width: 880px;
}
@media (max-width: 700px) {
    .work-detail__text--narrow {
        max-width: 100%;
    }
}

/* ===== work-caregiving-app.html 専用（UI/UXケーススタディ）=====
   既存の work-detail__* と同じ余白・タイポ・アクセントで統一 */

/* --- BACKGROUND / DESIGN GOAL / KEY FEATURE / TWO-SIDED EXPERIENCE で使う
   大きめの一文メッセージ。work-detail__title（英字タイトル）より控えめな
   サイズで、日本語の短いステートメントに合わせたウェイト --- */
.work-detail__statement {
    max-width: 720px;
    margin: 0 0 20px;
    color: #0e1218;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.55;
    letter-spacing: 0.02em;
}
@media (max-width: 1210px) {
    .work-detail__statement {
        font-size: calc(20px + 8 * ((100vw - 375px) / 835));
    }
}

/* --- CHALLENGE：4項目をPC2×2で見せるための列数だけの modifier。
   work-detail__point 自体のカードデザインは無改変。900px以下は明示的に
   1カラムへ戻す（source順で work-detail__points の @media より後に
   このファイル末尾へ追記しているため、明示しないと上書きされてしまう） --- */
.work-detail__points--2col {
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 900px) {
    .work-detail__points--2col {
        grid-template-columns: 1fr;
    }
}

/* --- SOLUTION：3つの解決策を横並びで一度に比較できる3カラム構成。
   カード化はせず、薄い縦の区切り線＋余白のみのシンプルな見せ方。
   番号・タイトル・本文は work-detail__point-num / __point-title / work-detail__text を流用し、
   各カラムの最後にUI画像（190〜220px程度）を配置する --- */
.work-detail__statement--center {
    max-width: 100%;
    margin: 0 auto 40px;
    text-align: center;
}
.work-detail__solution-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.work-detail__solution-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 0 32px;
}
.work-detail__solution-col:first-child {
    padding-left: 0;
}
.work-detail__solution-col:last-child {
    padding-right: 0;
}
.work-detail__solution-col:not(:last-child) {
    border-right: 1px solid #e2e5e8;
}
@media (max-width: 900px) {
    .work-detail__solution-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .work-detail__solution-col {
        padding: 32px 0 0;
        border-right: none;
        border-top: 1px solid #e2e5e8;
    }
    .work-detail__solution-col:first-child {
        padding-top: 0;
        border-top: none;
    }
}

/* --- KEY FEATURE：1枚の3状態比較画像（mimamori-change-states.png、正常/小さな変化/
   大きな変化が横に並んだ1枚）を、説明とセットの3カラムでそれぞれ対応する状態だけ
   見せるための modifier。新しい画像ファイルは追加せず、同じ画像を3回読み込み、
   width:300% + left のシフトで横方向の表示位置だけを切り替える（変形・圧縮はしない）。
   固定 height + overflow:hidden で下側を同じ位置でクロップし、上部は必ず表示する --- */
.work-detail__feature-crop {
    position: relative;
    width: 100%;
    max-width: 260px;
    /* margin-top:auto でカラム下部へ寄せる。3カラムは grid の伸縮（align-items:stretch）で
       高さが揃うため、テキスト量の差で生じていた画像の上端のズレが解消され、
       3枚とも同じ高さから始まる（SMALL CHANGE / LARGE CHANGE の現在位置が基準になる） */
    margin-top: auto;
    height: 320px;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 14px 34px -20px rgba(14, 18, 24, 0.25);
}
.work-detail__feature-crop-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;
    max-width: none;
    height: auto;
}
.work-detail__feature-crop--2 .work-detail__feature-crop-img {
    left: -100%;
}
.work-detail__feature-crop--3 .work-detail__feature-crop-img {
    left: -200%;
}
@media (max-width: 900px) {
    .work-detail__feature-crop {
        /* 900px以下は1カラム縦積みになり、grid のストレッチによる高さ揃えが
           発生しないため、margin-top:auto ではなく元の固定余白に戻す */
        margin-top: 8px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- MAIN VISUAL：4画面をポップに見せる専用コンポーネント。
   work-detail__stage は使わず独立させ、他ページのMAIN VISUAL（1画面表示）に
   一切影響しないようにする。淡いグリーンのパネルで囲み、UI画像を主役にする --- */
.work-detail__hero-panel {
    position: relative;
    padding: 48px 40px;
    background: #f3f8e8;
    border-radius: 24px;
}
.work-detail__hero-panel .work-detail__statement {
    margin: 0 0 12px;
}
.work-detail__hero-copy {
    max-width: 480px;
    margin: 0 0 24px;
}
.work-detail__hero-copy .work-detail__hero-jp {
    margin: 0;
}
@media (max-width: 700px) {
    .work-detail__hero-panel {
        padding: 32px 20px;
    }
}

/* 機能を表す小さな装飾アイコン。淡いグリーン・オレンジ・ピンクの円の中に
   線画SVGを配置。意味を持たせるため食事・水分・体調・相談・栄養素の5個のみ。
   文章やUIに重ならないよう、レイアウトが崩れやすい900px以下では非表示にする */
.work-detail__hero-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
}
.work-detail__hero-icon svg {
    width: 22px;
    height: 22px;
}
.work-detail__hero-icon--1 {
    top: 6%;
    right: 10%;
    color: #4f8a3d;
    background: #dcefc4;
}
.work-detail__hero-icon--2 {
    top: 15%;
    right: 2%;
    color: #d9861f;
    background: #ffe4bd;
}
.work-detail__hero-icon--3 {
    top: 24%;
    right: 16%;
    color: #d6668c;
    background: #ffd9e6;
}
.work-detail__hero-icon--4 {
    top: 2%;
    right: 34%;
    color: #d9861f;
    background: #ffe4bd;
}
.work-detail__hero-icon--5 {
    top: 13%;
    right: 24%;
    color: #4f8a3d;
    background: #dcefc4;
}
@media (max-width: 900px) {
    .work-detail__hero-icon {
        display: none;
    }
}

/* PC：4列固定のCSS Grid。親コンテナの横幅とgapから自動で4等分され、
   折り返し（flex-wrapの問題）が原理的に起こらない */
.work-detail__hero-showcase {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
    width: 92%;
    margin: 0 auto;
}
/* 「画像の高さを揃える」のではなく「同じ高さの窓から見せる」ための
   クリップ領域。4枚とも同じ height に固定し、上端をそろえて下側だけを切る。
   画像自体は width:100%; height:auto で原寸比率のまま、上部から表示される。
   min-width:0 でグリッド item の最小サイズ制約を解除し、4枚が均等に縮小できるようにする */
.work-detail__hero-showcase-window {
    width: 100%;
    min-width: 0;
    height: clamp(300px, 30vw, 350px);
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 14px 34px -20px rgba(14, 18, 24, 0.25);
}
.work-detail__hero-showcase-img {
    display: block;
    width: 100%;
    height: auto;
}
/* タブレット：2×2 */
@media (max-width: 900px) {
    .work-detail__hero-showcase {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }
}
/* SP：1カラムに積む。クリップ高さもPCと揃える必要はないため解除し、
   UIが見づらくならないよう原寸比率のまま全体を表示 */
@media (max-width: 700px) {
    .work-detail__hero-showcase {
        grid-template-columns: 1fr;
    }
    .work-detail__hero-showcase-window {
        height: auto;
    }
}

/* --- OVERVIEW：本文のみ読みやすく調整する専用 modifier。
   共通の work-detail__text--narrow（他4ページで使用中、max-width:880px）は
   変更せず、このページの OVERVIEW にだけ適用する --- */
.work-detail__text--overview-caregiving {
    max-width: 820px;
    line-height: 1.95;
    margin-bottom: 28px;
}
.work-detail__text--overview-caregiving:last-child {
    margin-bottom: 0;
}
@media (max-width: 700px) {
    .work-detail__text--overview-caregiving {
        max-width: 100%;
    }
}

/* --- SOLUTION / TWO-SIDED EXPERIENCE：work-rakuraku.html の
   work-detail__frame / work-detail__frame-screen（枠のデザインそのもの）は
   そのまま再利用しつつ、このページの画像はそこまで縦長ではないため、
   スクロール用の固定height/overflowはこのmodifier側で解除し、画像全体を
   そのまま表示する。work-rakuraku.html が使う --pc / --sp の
   固定height + overflow-y:auto の仕組みには一切触れていないため、
   らくらくEコマースの表示には影響しない --- */
.work-detail__frame--caregiving {
    max-width: 320px;
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 14px 34px -20px rgba(14, 18, 24, 0.25);
}
.work-detail__frame--caregiving .work-detail__frame-screen {
    /* height:auto で画像の実寸に合わせるため、この時点で縦方向に
       はみ出す内容が無くなり overflow-y:auto（スクロール）は発生しない。
       overflow は hidden にして「スクロール」ではなく角丸のクリップ目的だけ残す */
    height: auto;
    overflow: hidden;
    border-radius: 10px;
}
/* TWO-SIDED EXPERIENCE 用に少し幅広く */
.work-detail__frame--caregiving-wide {
    max-width: 360px;
}
@media (max-width: 900px) {
    .work-detail__frame--caregiving {
        margin: 0 auto;
    }
}
@media (max-width: 700px) {
    .work-detail__frame--caregiving {
        max-width: 340px;
    }
}

/* ===== index.html SERVICES：CREATIVE FOLDER =====
   8枚のサービスカードを最初から並べず、4つの「フォルダ」（WEB DESIGN /
   GRAPHIC DESIGN / SNS & MARKETING / VIDEO & CONTENT）として見せ、
   クリックで該当カテゴリのカード（既存の .courses__card .card をそのまま
   再利用）がフォルダ一覧の下に展開される。

   【第二段階（今回）】第一段階で用意した空の .service-folder__peek に、
   実際の制作物・アイコンを配置した。構造は引き続き奥→手前の2層：
     .service-folder__peek （z-index:1。主役の制作物imgと、アクセントの
       ブランドアイコン（.service-peek__sticker）を子要素として持つ）
     .service-folder__shape（z-index:2。タブ＋本体。不透明な背景を持つため
       peekに置いた画像の下側は自然にshapeへ隠れ、上側40〜60%程度が
       フォルダから飛び出して見える）
   shapeの開始位置（.service-folder の padding-top）をpeekの高さより
   浅くすることで、制作物がフォルダに差し込まれた状態を作っている。
   各フォルダの素材配置は .service-peek__item の nth-of-type を
   フォルダID（#service-folder-web 等）でスコープして個別に指定しており、
   構図がフォルダごとに異なるため共通のa/b/c命名ではなく出現順で管理する。

   配色は新しい色を増やさず、サイトに既に存在する組み合わせを再利用する：
   pink/purple/blueはWHAT I DOの裏面（.count-item__face--back
   nth-child(2)/(3)/(4)）と同じ色相。greenのみ、既存のSERVICESアクセント色
   #6d9985（.card__suptext--green と同じ）を起点に、他3色と同じ明度帯で
   新規にパステルトーンを作っている。参考画像のフラットなfolder shapeに
   合わせ、今回はグラデーションではなく単色にしている */
.service-folders {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-top: 56px;
}
.service-folder {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 120px 0 0;
    border: none;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.service-folder:focus-visible {
    outline: 2px solid #0e1218;
    outline-offset: 4px;
    border-radius: 20px;
}

/* --- 奥の層：制作物・アイコンをabsolute配置する領域 ---
   overflowは指定しない（上方向にはみ出す素材を切らないため）。
   peek（高さ200px）は .service-folder の padding-top（120px）より80px深く、
   shapeの裏側まで伸びている。制作物の下端はshapeの裏に差し込み、
   メイン制作物はshape上端から40〜60%程度が飛び出して見えるようにする */
.service-folder__peek {
    position: absolute;
    top: 0;
    left: 6%;
    right: 6%;
    height: 200px;
    z-index: 1;
    pointer-events: none;
}
/* hoverでは「フォルダ本体」より少し大きく、中身がふわっと持ち上がる
   印象にする（本体-5px程度に対し、中の素材は-6〜-8px程度動かす）。
   回転は --peek-rot にまとめ、translateYと衝突しないようにする */
.service-folder__peek > * {
    transform: rotate(var(--peek-rot, 0deg));
    transition: transform 0.25s ease;
}
.service-folder:hover .service-peek__item,
.service-folder:focus-visible .service-peek__item,
.service-folder.is-active .service-peek__item {
    transform: translateY(-8px) rotate(var(--peek-rot, 0deg));
}
.service-folder:hover .service-peek__sticker,
.service-folder:focus-visible .service-peek__sticker,
.service-folder.is-active .service-peek__sticker {
    transform: translateY(-6px) rotate(var(--peek-rot, 0deg));
}

/* 制作物（主役）：角丸・影を付け、実際にフォルダへ差し込まれた紙や
   カードのように見せる */
.service-peek__item {
    position: absolute;
    border-radius: 8px;
    box-shadow: 0 10px 20px -10px rgba(14, 18, 24, 0.45);
    object-fit: cover;
    background: #fff;
}
/* ブランドアイコン（アクセント）：白フチのステッカーとして制作物の周囲に
   浮かせる。サイズは45〜55px程度とし、作品（主役）より小さく保ちながら
   高さ・角度をずらして横一列に並ばないようにする */
.service-peek__sticker {
    position: absolute;
    z-index: 4;
    display: block;
    width: 32px;
    height: 32px;
    padding: 4px;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 12px -6px rgba(14, 18, 24, 0.45);
}
.service-peek__sticker img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* figma-logo.svg はviewBox内の余白が大きいため、ロゴ部分だけを拡大して見せる */
.service-peek__sticker--figma img {
    transform: scale(1.9);
}
.service-peek__sticker--youtube img,
.service-peek__sticker--x img {
    padding: 2px;
}

/* ---- フォルダごとの素材配置 ----
   各フォルダ「代表作品1点＋正式アイコン」のシンプルなコラージュ。
   座標はpeek基準。y=120がタブ上端、y=144が本体上端 */
/* WEB：PCモックを中央に、Figmaを右斜め上に重ねる */
#service-folder-web .service-peek__item {
    left: 20px;
    top: 52px;
    width: 168px;
    height: 112px;
    z-index: 3;
    --peek-rot: -3deg;
}
#service-folder-web .service-peek__sticker--figma {
    left: 166px;
    top: 26px;
    width: 52px;
    height: 52px;
    --peek-rot: 10deg;
}

/* GRAPHIC：バナーを中央に、Aiは左上（高め）、Psは右（低め） */
#service-folder-graphic .service-peek__item {
    left: 50px;
    top: 50px;
    width: 128px;
    height: 107px;
    z-index: 3;
    --peek-rot: -4deg;
}
#service-folder-graphic .service-peek__sticker--illustrator {
    left: 2px;
    top: 34px;
    width: 50px;
    height: 50px;
    --peek-rot: -10deg;
}
#service-folder-graphic .service-peek__sticker--photoshop {
    left: 178px;
    top: 64px;
    width: 48px;
    height: 48px;
    --peek-rot: 8deg;
}

/* SNS：Instagramモックを中央に、Instagramは右斜め上（高め）、Xは左（低め） */
#service-folder-sns .service-peek__item {
    left: 22px;
    top: 56px;
    width: 178px;
    height: 100px;
    z-index: 3;
    --peek-rot: -2deg;
}
#service-folder-sns .service-peek__sticker--instagram {
    left: 168px;
    top: 24px;
    width: 54px;
    height: 54px;
    --peek-rot: -8deg;
}
#service-folder-sns .service-peek__sticker--x {
    left: -4px;
    top: 50px;
    width: 46px;
    height: 46px;
    --peek-rot: 7deg;
}

/* VIDEO：YouTubeモックを中央やや右に、YouTubeは左上、TikTokは右（やや低め） */
#service-folder-video .service-peek__item {
    left: 34px;
    top: 56px;
    width: 180px;
    height: 101px;
    z-index: 3;
    --peek-rot: 3deg;
}
#service-folder-video .service-peek__sticker--youtube {
    left: 0;
    top: 28px;
    width: 54px;
    height: 54px;
    --peek-rot: -8deg;
}
#service-folder-video .service-peek__sticker--tiktok {
    left: 182px;
    top: 46px;
    width: 46px;
    height: 46px;
    --peek-rot: 9deg;
}

/* --- 手前の層：タブ＋本体で構成する folder shape --- */
.service-folder__shape {
    position: relative;
    z-index: 2;
    display: block;
    transition: transform 0.25s ease;
}
.service-folder:hover .service-folder__shape,
.service-folder:focus-visible .service-folder__shape {
    transform: translateY(-5px);
}
.service-folder.is-active .service-folder__shape {
    transform: translateY(-8px);
}
.service-folder__tab {
    display: block;
    width: 44%;
    height: 24px;
    border-radius: 14px 14px 0 0;
    background: var(--folder-tab);
    transform-origin: left bottom;
    transition: transform 0.3s ease;
}
/* 開いているフォルダは、タブ（フタ）が左下を支点にわずかに持ち上がる */
.service-folder.is-active .service-folder__tab {
    transform: rotate(-4deg) translateY(-2px);
}
.service-folder__front {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 148px;
    padding: 18px 22px 20px;
    border-radius: 0 20px 20px 20px;
    background: var(--folder-bg);
    box-shadow: 0 16px 28px -20px rgba(14, 18, 24, 0.35);
    transition: box-shadow 0.25s ease;
}
.service-folder.is-active .service-folder__front {
    box-shadow: 0 22px 34px -18px rgba(14, 18, 24, 0.4);
}
/* 右下の開閉アイコン（＋ / −）。CSSの2本線で描き、開いている
   （aria-expanded="true"）ときは縦線を寝かせて「−」にし、地を濃色に反転して
   選択中であることを示す */
.service-folder__toggle {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: #0e1218;
    box-shadow: 0 4px 10px -4px rgba(14, 18, 24, 0.35);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.service-folder__toggle::before,
.service-folder__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}
.service-folder__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.service-folder:hover .service-folder__toggle {
    transform: scale(1.08);
}
.service-folder[aria-expanded="true"] .service-folder__toggle {
    background: #0e1218;
    color: #fff;
}
.service-folder[aria-expanded="true"] .service-folder__toggle::after {
    transform: translate(-50%, -50%) rotate(0deg);
}
.service-folder__name {
    color: #0e1218;
    font-family: "Clash Grotesk", sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.01em;
}
.service-folder__tags {
    color: rgba(14, 18, 24, 0.6);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
}

.service-folder--pink {
    --folder-bg: #f9d7e5;
    --folder-tab: #f6c7de;
    --folder-accent: #ff99c0;
}
.service-folder--purple {
    --folder-bg: #e2d8f4;
    --folder-tab: #d2c2ed;
    --folder-accent: #9981c2;
}
.service-folder--green {
    --folder-bg: #d9ece2;
    --folder-tab: #bedbca;
    --folder-accent: #6d9985;
}
.service-folder--blue {
    --folder-bg: #d9eef5;
    --folder-tab: #bfe2ee;
    --folder-accent: #2a9ec2;
}

/* --- 展開エリア：フォルダ一覧のすぐ下に1つだけ表示する ---
   .service-detail は grid-template-rows を 0fr→1fr にアニメーションする
   ことで、JSで高さを計算せずに「自然に高さが展開する」動きを実現する。
   子要素に overflow:hidden; min-height:0 を付けるのがこの手法の必須条件 */
.service-detail {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
}
.service-detail.is-open {
    grid-template-rows: 1fr;
}
.service-detail__inner {
    overflow: hidden;
    min-height: 0;
}
.service-panel {
    padding-top: 40px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.service-panel.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* --- 詳細エリア：選択カテゴリに対応する淡い色の横長エリア ---
   どのカテゴリに切り替わったか気づけるよう、フォルダ本体（--folder-bg）より
   さらに淡い同系色を背景に敷く。影は付けず、フォルダより目立たせない。
   カテゴリ色（--panel-accent）はカテゴリ名の小さなドットに使う。
   PCでは1サービス＝1行で「サービス名｜説明文｜VIEW WORKS →」を
   横に並べ、カテゴリ名は左列の先頭に1回だけ表示する */
.service-panel--pink {
    --panel-accent: #ff99c0;
    --panel-bg: #fdeef4;
}
.service-panel--purple {
    --panel-accent: #9981c2;
    --panel-bg: #f4eefb;
}
.service-panel--green {
    --panel-accent: #6d9985;
    --panel-bg: #eef6f1;
}
.service-panel--blue {
    --panel-accent: #2a9ec2;
    --panel-bg: #ecf7fb;
}
.service-info {
    padding: 28px 36px 12px;
    border-radius: 20px;
    background: var(--panel-bg, #f7f7f9);
}
.service-info__category {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    color: rgba(14, 18, 24, 0.6);
    font-family: "Clash Grotesk", sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
}
.service-info__category::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--panel-accent);
}
.service-info__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.service-info__row {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(0, 2.2fr) 180px;
    gap: 40px;
    align-items: baseline;
    padding: 20px 0;
}
.service-info__row + .service-info__row {
    border-top: 1px solid rgba(14, 18, 24, 0.08);
}
.service-info__name {
    margin: 0;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
}
.service-info__name a {
    color: #0e1218;
    text-decoration: none;
}
.service-info__desc {
    margin: 0;
    color: rgba(14, 18, 24, 0.68);
    font-size: 14px;
    line-height: 1.8;
}
/* ボタンにはせず、テキストリンクとして右端に揃える */
.service-info__link {
    justify-self: end;
    color: #0e1218;
    font-family: "Clash Grotesk", sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.08em;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: opacity 0.2s ease;
}
.service-info__link:hover,
.service-info__link:focus-visible {
    opacity: 0.6;
}
.service-info__link--disabled {
    color: #b5bac1;
    border-bottom-color: transparent;
    cursor: default;
}

@media (max-width: 1210px) {
    .service-folders {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
        margin-top: 40px;
    }
    .service-info__row {
        grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr) 170px;
        gap: 28px;
    }
}
@media (max-width: 600px) {
    .service-folders {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .service-folder__front {
        min-height: 128px;
    }
    .service-info {
        padding: 22px 20px 8px;
        border-radius: 18px;
    }
    .service-info__row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 18px 0;
    }
    .service-info__name {
        font-size: 16px;
    }
    .service-info__link {
        justify-self: start;
        margin-top: 4px;
    }
}
/* --- スマホ（600px以下）：各フォルダの直下に開くアコーディオン ---
   js/custom.js が各 .service-panel を対応するフォルダ（button）の直後へ
   移動させる（.service-folders > .service-panel）。閉じたパネルの前後に
   gapが二重にかからないよう、この幅だけ一覧をflexの縦並びにし、フォルダ間の
   間隔（従来のgapと同じ28px）はフォルダ側のmarginで取る。パネルは
   grid-template-rows 0fr→1fr で高さを伸縮させる */
@media (max-width: 600px) {
    .service-folders {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .service-folders > .service-folder:not(:first-child) {
        margin-top: 28px;
    }
    .service-folders > .service-panel {
        display: grid;
        grid-template-rows: 0fr;
        margin-top: 0;
        padding-top: 0;
        opacity: 1;
        transform: none;
        transition: grid-template-rows 0.35s ease, margin-top 0.35s ease;
    }
    .service-folders > .service-panel.is-visible {
        grid-template-rows: 1fr;
        margin-top: 14px;
    }
    /* paddingは0frでも潰れないため、閉じている間は上下paddingも0にする */
    .service-folders > .service-panel > .service-info {
        min-height: 0;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
        visibility: hidden;
        transition: padding 0.35s ease, visibility 0s linear 0.35s;
    }
    .service-folders > .service-panel.is-visible > .service-info {
        padding-top: 22px;
        padding-bottom: 8px;
        visibility: visible;
        transition: padding 0.35s ease, visibility 0s;
    }
}
@media (prefers-reduced-motion: reduce) {
    .service-folder__shape,
    .service-folder__tab,
    .service-folder__toggle,
    .service-folder__toggle::before,
    .service-folder__toggle::after,
    .service-peek__item,
    .service-peek__sticker,
    .service-detail,
    .service-panel,
    .service-folders > .service-panel,
    .service-folders > .service-panel > .service-info,
    .service-info__link {
        transition: none;
    }
}

/* ===== index.html SERVICE INTRO：浮遊する「柔らかい3Dオブジェクト」=====
   【重要】以前は style.min.css の .elevate-view__img:nth-child(N) に位置を
   依存していたが、背景blur用のspanを追加したことで .elevate-view の
   実際の子要素の並びが変わり（1〜3:glow span、4:box、5〜9:ツール5つ、
   10〜11:写真2つ）、nth-child(2)〜(6) が本来意図した要素とズレて
   適用される不具合が起きていた（Figmaがnth-child(5)＝Canva用の位置を、
   IllustratorがCanvaがnth-child(6)＝HTML/CSS用の位置を受け取り、
   Photoshop/Canva/HTML-CSSはnth-child(7)(8)(9)に対応する
   vendorルールが存在せず無座標のまま重なっていた）。
   そのため nth-child には一切依存せず、HTML側に付与した固有クラス
   （.tool--figma 等）だけで位置・サイズ・背景を確定させる。
   デバッグのため、floating animationも一時的に無効化し、
   表示に関わる主要プロパティを !important で明示している */
.elevate-view__tool {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px;
    overflow: hidden;
    line-height: 1.25;
    letter-spacing: 0.01em;
    /* デバッグ：floating animationを一時的に完全停止 */
    animation: none !important;
}
/* Figma（100px、中サイズ）— 白〜ごく淡いブルーグレーのblob。
   creative-bloomとの重なりが大きすぎたため右上へ移動し、軽い重なり程度に調整。
   ハイライト・陰影は50〜60%程度まで弱めた */
.tool--figma {
    width: 100px !important;
    height: 100px !important;
    left: 181px !important;
    top: -20px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 3 !important;
    background: #eef2f5;
    border-radius: 46% 54% 58% 42% / 42% 46% 54% 58%;
    box-shadow: 0 8px 14px -12px rgba(120, 140, 160, 0.16);
    color: #0e1218;
    font-size: 14px;
    font-weight: 600;
}
/* Illustrator（210px、一番大きい円）— 淡いラベンダー系。彩度・コントラストを
   落とし、白文字では読みにくくなったためダークテキストに変更。
   organicな歪みもわずかに弱めた */
.tool--illustrator {
    width: 165px !important;
    height: 165px !important;
    top: 37px !important;
    right: 48px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 3 !important;
    background: #d9ccf2;
    border-radius: 53% 47% 49% 51% / 49% 53% 47% 51%;
    box-shadow: 0 14px 24px -18px rgba(140, 120, 180, 0.18);
    color: #0e1218;
    font-size: 18px;
    font-weight: 600;
}
/* Photoshop（150×118px、中サイズの横長oval）— 淡いペールピンク系に */
.tool--photoshop {
    width: 150px !important;
    height: 118px !important;
    left: 23px !important;
    bottom: 82px !important;
    right: auto !important;
    top: auto !important;
    z-index: 3 !important;
    background: #f7c4d9;
    border-radius: 51% 49% 48% 52% / 56% 56% 44% 44%;
    box-shadow: 0 10px 16px -12px rgba(230, 150, 185, 0.17);
    color: #0e1218;
    font-size: 15px;
    font-weight: 600;
}
/* Canva（90px、小サイズのorganic circle）— くすみグリーンから淡い水色系へ */
.tool--canva {
    width: 90px !important;
    height: 90px !important;
    right: 35px !important;
    bottom: 103px !important;
    left: auto !important;
    top: auto !important;
    z-index: 3 !important;
    background: #b9ddea;
    border-radius: 47% 53% 51% 49% / 52% 48% 52% 48%;
    box-shadow: 0 8px 14px -10px rgba(120, 170, 190, 0.17);
    color: #0e1218;
    font-size: 14px;
    font-weight: 600;
}
/* HTML / CSS（64px、一番小さい円）— 白系のまま、ハイライト・陰影のみ弱める */
.tool--html {
    width: 77px !important;
    height: 77px !important;
    right: 125px !important;
    bottom: 54px !important;
    left: auto !important;
    top: auto !important;
    z-index: 3 !important;
    border: none;
    background: #ddede6;
    border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;
    box-shadow: 0 5px 10px -8px rgba(150, 150, 170, 0.15);
    color: #0e1218;
    font-size: 9px;
    font-weight: 600;
}
/* 1150px以下は独自サイズ・寄せた位置も比例して縮小する */
@media (max-width: 1150px) {
    .tool--figma {
        left: 156px !important;
        top: -13px !important;
        font-size: 11px;
    }
    .tool--illustrator {
        width: 102px !important;
        height: 102px !important;
        top: 33px !important;
        right: 45px !important;
        font-size: 13px;
    }
    .tool--photoshop {
        height: 71px !important;
        left: 15px !important;
        bottom: 78px !important;
        font-size: 12px;
    }
    .tool--canva {
        width: 60px !important;
        height: 60px !important;
        right: 23px !important;
        bottom: 98px !important;
        font-size: 11px;
    }
    .tool--html {
        width: 53px !important;
        height: 53px !important;
        right: 109px !important;
        bottom: 35px !important;
        font-size: 7px;
    }
}

/* --- 右側ビジュアルの余白を埋める小さな抽象図形＋手描き風の細線。
   「丸を並べたスキル図」ではなく1枚のグラフィック作品に見せるための
   アクセント。すべて装飾のみ：文字なし・クリック不可・既存要素の
   position/z-indexロジックには一切干渉しない --- */
.elevate-view__deco {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}
.elevate-view__deco--square {
    width: 18px;
    height: 18px;
    top: 8px;
    left: 140px;
    background: #3b5bdb;
    border-radius: 4px;
    transform: rotate(18deg);
}
.elevate-view__deco--circle {
    width: 14px;
    height: 14px;
    top: 6px;
    right: 90px;
    background: #f7c4d9;
    border-radius: 50%;
}
.elevate-view__deco--capsule {
    width: 26px;
    height: 13px;
    bottom: 10px;
    right: 15px;
    background: #f9d442;
    border-radius: 999px;
}
.elevate-view__deco--blob {
    width: 22px;
    height: 20px;
    top: 200px;
    left: 4px;
    background: #b9ddea;
    border-radius: 58% 42% 45% 55% / 48% 55% 45% 52%;
}
.elevate-view__deco--triangle {
    width: 0;
    height: 0;
    bottom: 4px;
    left: 210px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 16px solid #d9ccf2;
}
.elevate-view__deco--dot {
    width: 10px;
    height: 10px;
    top: 140px;
    right: 8px;
    background: #b19cd9;
    border-radius: 50%;
}
.elevate-view__deco-line {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}
.elevate-view__deco-line--curve {
    width: 60px;
    height: 30px;
    left: 214px;
    bottom: 22px;
}
.elevate-view__deco-line--loop {
    width: 30px;
    height: 30px;
    top: 58px;
    right: 58px;
}
.elevate-view__deco-line--diagonal {
    width: 40px;
    height: 22px;
    top: 250px;
    left: 0;
}
@media (max-width: 1150px) {
    .elevate-view__deco--square,
    .elevate-view__deco--circle,
    .elevate-view__deco--capsule,
    .elevate-view__deco--blob,
    .elevate-view__deco--triangle,
    .elevate-view__deco--dot,
    .elevate-view__deco-line {
        display: none;
    }
}

/* ===== index.html CONTACT 専用 =====
   旧CONTACTはmailto:リンクのみの単純なCTAだったが、サイト内で
   「入力→送信→完了表示」まで完結するお問い合わせフォームに変更。
   送信は send-contact.php（PHPのmb_send_mail）が担い、フロントJS
   （js/custom.js）はfetchで結果(JSON)を受け取ってその場に完了/
   エラーメッセージを表示する。送信先メールアドレス等の秘密情報は
   send-contact.php側のみに保持し、HTML/CSS/JSには一切含めない。
   白背景・中央寄せのシンプルな構成、フッター直前に配置 */
.contact {
    padding-top: 100px;
    margin-bottom: 100px;
    scroll-margin-top: 96px;
}
/* 装飾用英字タイポグラフィの位置基準。.container自体は全ページ共通の
   ベンダークラスのため、CONTACT内でのみ position:relative を与える
   （他セクションのcontainerには影響しない） */
.contact .container {
    position: relative;
}
@media (max-width: 1210px) {
    .contact {
        padding-top: calc(60px + 40 * ((100vw - 375px) / 835));
        margin-bottom: calc(50px + 50 * ((100vw - 375px) / 835));
    }
}
.contact__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.contact__label {
    margin-bottom: 16px;
    color: #ff99c0;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
/* フォーム主体のレイアウトに合わせ、以前の128px巨大見出しから
   フォームと並び立つ程度のサイズへ縮小 */
.contact__title {
    margin: 0 0 20px;
    color: #9981c2;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.3;
    letter-spacing: 0.01em;
}
@media (max-width: 1210px) {
    .contact__title {
        font-size: calc(28px + 12 * ((100vw - 375px) / 835));
    }
}
/* .works__lead は既存クラスをそのまま再利用。ここでは中央寄せ配置に合わせて
   横幅だけを絞る（元の .works__lead 定義自体は変更しない） */
.contact__inner .works__lead {
    max-width: 560px;
    margin-bottom: 0;
}
.contact__lead-break {
    display: none;
}
@media (min-width: 701px) {
    .contact__lead-break {
        display: inline;
    }
}

/* 装飾用の英字タイポグラフィ（旧CONTACT見出し「LET'S CREATE SOMETHING
   TOGETHER.」の再利用）。見出しではなく背景のアクセントとして復活させ、
   海外のエディトリアル/アートポートフォリオのような雰囲気を補う。
   傾き（transform:rotate）は入れず、常に水平表示にする。
   スマホ・タブレットでは通常フローの中でCONTACT見出しの直前に小さく
   配置し、PC（1211px以上）では.container（max-width:1210px）の右端を
   基準に、中央640pxのフォームの外側にできる余白にのみ収まるサイズ・
   位置に切り替える。いずれもz-index:-1とpointer-events:noneでフォーム
   より常に背面に固定し、フォーム操作を一切妨げないようにする */
.contact__deco {
    display: block;
    margin: 0 0 20px;
    font-family: "Clash Grotesk", sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
    font-size: 15px;
    line-height: 1.3;
}
@media (min-width: 1211px) {
    .contact__deco {
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
        width: 300px;
        margin: 0;
        font-size: clamp(32px, 2.6vw, 50px);
        line-height: 1.15;
        text-align: right;
    }
}
.contact__deco-line {
    display: block;
}
.contact__deco-line--pink {
    color: rgba(249, 153, 192, 0.45);
}
.contact__deco-line--purple {
    color: rgba(153, 129, 194, 0.4);
}

/* ---- お問い合わせフォーム本体 ---- */
.contact-form {
    max-width: 640px;
    margin: 48px auto 0;
    padding: 48px 40px;
    border: 1px solid #e3e3e8;
    border-radius: 16px;
    background: #fff;
}
.contact-form__error {
    margin: 0 0 28px;
    padding: 14px 18px;
    border-radius: 8px;
    background: #fdecec;
    color: #c0392b;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
}
.contact-form__field {
    margin-bottom: 32px;
}
.contact-form__field:last-of-type {
    margin-bottom: 0;
}
.contact-form__label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: #0e1218;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
}
.contact-form__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.contact-form__badge--required {
    background: #f9d7e5;
    color: #9c3f68;
}
.contact-form__badge--optional {
    background: #f1f1f4;
    color: #6b6f76;
}
.contact-form__input {
    display: block;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #d8d8de;
    border-radius: 8px;
    background: #fff;
    color: #0e1218;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.3s ease;
}
.contact-form__input:focus {
    outline: none;
    border-color: #9981c2;
}
.contact-form__textarea {
    resize: vertical;
    min-height: 160px;
    line-height: 1.7;
}
.contact-form__checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.contact-form__checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid #d8d8de;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    color: #0e1218;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.contact-form__checkbox input {
    accent-color: #9981c2;
}
.contact-form__checkbox:has(input:checked) {
    border-color: #9981c2;
    background: #f6f1fb;
}
/* ハニーポット：実在の利用者には見せず、自動入力するボットだけを
   検知するための隠しフィールド。display:noneではなく画面外へ配置する
   ことで、display:none/visibility:hiddenのみをスキップする簡易ボットの
   回避策とする */
.contact-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.contact-form__actions {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}
/* 送信ボタン：TOPナビの「お仕事のご相談はこちら」CTAと同系のピンクで
   関連性を持たせつつ、ナビCTAより控えめな横長ボタンにとどめる */
.contact-form__submit {
    padding: 15px 48px;
    border: none;
    border-radius: 8px;
    background: #f9d7e5;
    color: #0e1218;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.3s ease, opacity 0.3s ease;
}
.contact-form__submit:hover {
    background: #f5c2db;
}
.contact-form__submit:disabled {
    opacity: 0.6;
    cursor: default;
}
.contact-form__success {
    max-width: 640px;
    margin: 48px auto 0;
    padding: 48px 40px;
    border: 1px solid #e3e3e8;
    border-radius: 16px;
    background: #fff;
    text-align: center;
    color: #0e1218;
    font-size: 15px;
    line-height: 1.8;
}
.contact__social-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
.contact__social {
    color: #0e1218;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: color 0.3s ease;
}
.contact__social:hover {
    color: #ff99c0;
}

@media (max-width: 700px) {
    .contact-form,
    .contact-form__success {
        padding: 32px 20px;
        border-radius: 12px;
    }
    .contact-form__field {
        margin-bottom: 26px;
    }
    .contact-form__input {
        /* iOSでのフォーカス時自動拡大を防ぐため16px以上を確保 */
        font-size: 16px;
    }
    .contact-form__checkbox {
        font-size: 13px;
        padding: 10px 14px;
    }
    .contact-form__submit {
        width: 100%;
    }
}

/* ===== index.html SERVICE INTRO（From Design to Digital...）専用 =====
   共通クラス .works__lead 自体は変更せず、.elevate-content 内での
   出現時だけ下余白を広げる。他の .works__lead 使用箇所（WORKS / SERVICES /
   CONTACT）には影響しない */
.elevate-content .works__lead {
    margin-bottom: 28px;
}
/* 見出し内「Bring Your Ideas」が必ず同じ行になるようにする改行位置調整。
   PC（1211px以上）ではnowrapで分割を防ぎ、スマホ・タブレットでは
   画面幅に応じて自然に折り返せるようnormalに戻す。文字サイズ・フォント・
   太さ・カラー・行間は変更しない */
.elevate-content__nowrap {
    white-space: nowrap;
}
@media (max-width: 1210px) {
    .elevate-content__nowrap {
        white-space: normal;
    }
}

/* ===== index.html SERVICE INTRO：写真2枚を追加してコラージュ感を出す =====
   既存の黄色い円（.elevate-view__box）・5つのツール円（.elevate-view__tool）は
   無改変。新しい2枚は元テンプレートの index.html にあった写真円
   （.elevate-view__index1〜8）と同じ考え方（円形トリミング・絶対配置・
   浮遊アニメーション・コンテナ端からの軽いはみ出し）を踏襲した専用クラス */
.elevate-view__photo {
    position: absolute;
    display: block;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 12px 22px -16px rgba(14, 18, 24, 0.16);
}
/* 大きめの円：人物写真。完全な真円ではなく、非対称のorganic border-radius
   （少し歪んだ丸み）にして規則的になりすぎないようにする。黄色い円の
   左下角に少し後ろから入り込み、Photoshopの円の縁とだけ重なる位置
   （Photoshopのテキスト中心は避けている。z-index指定なし＝黄色い円
   (z-index:1)より背面、DOM順で最後のためツール円より前面） */
.elevate-view__photo--library {
    width: 180px;
    height: 158px;
    border-radius: 46% 54% 58% 42% / 42% 48% 52% 58%;
    left: 20px;
    bottom: -10px;
    object-position: center 35%;
    animation: toLeftAnimation 9s ease-in-out infinite;
    animation-delay: 0.4s;
}
/* 小さめの円：「BLESS YOUR BLOOM」の写真。前回より一回り大きくし、
   縦長のorganic形にして「デザイン要素」として見えるようにする。
   Figmaの円と重なる位置まで寄せ、文字がより見えるよう object-position を
   微調整。z-index:2で黄色い円より前面に出し、奥行きのコントラストをつける */
.elevate-view__photo--bloom {
    width: 138px;
    height: 152px;
    border-radius: 58% 42% 45% 55% / 48% 55% 45% 52%;
    left: 55px;
    top: -8px;
    z-index: 2;
    object-position: center 48%;
    animation: smallToDownAnimation 8s ease-in-out infinite;
    animation-delay: 1.1s;
}
@media (max-width: 1150px) {
    .elevate-view__photo--library {
        width: 118px;
        height: 104px;
        left: 12px;
        bottom: -6px;
    }
    .elevate-view__photo--bloom {
        width: 90px;
        height: 99px;
        left: 34px;
        top: -4px;
    }
}
@media (max-width: 700px) {
    .elevate-view__photo--library,
    .elevate-view__photo--bloom {
        animation: none;
    }
}

/* --- 中央の黄色い円：「ボタン風」ではなく「柔らかい黄色の3Dオブジェクト」に。
   内側の白いハイライト＋外側の濃いめの黄色でふくらみを表現し、
   輪郭もほんの少しorganicにする。文字色・内容は無変更 --- */
.elevate-view__box {
    position: relative;
    background: #f9d442;
    border-radius: 49% 51% 53% 47% / 46% 49% 51% 54%;
    box-shadow: 0 10px 20px -14px rgba(14, 18, 24, 0.18);
}

/* --- エディトリアル・フラットデザインへの調整：グラデーションの立体感を
   やめて単色＋grain（ノイズ）テクスチャに。grainはSVG feTurbulenceを
   data URIとして::afterに重ね、mix-blend-modeで紙・印刷物のような
   質感だけを添える（光沢・3D感は出さない）。box/toolどちらも position は
   もともと確保済みのため、::afterはそこに absolute + inset:0 で重なる --- */
.elevate-view__box::after,
.elevate-view__tool::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.22;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* --- 右側ビジュアルの背後にごく薄いパステルのblurを3つ配置し、
   「空気感」「奥行き」を出す。z-index:-1で最背面、pointer-events:noneで
   操作の妨げにならないようにする。.elevate-view は position:relative
   （既存）なので、このコンテナ内だけに閉じたローカルな最背面になる --- */
.elevate-view__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
}
.elevate-view__glow--pink {
    width: 220px;
    height: 220px;
    left: -50px;
    top: 30px;
    background: rgba(255, 153, 192, 0.16);
}
.elevate-view__glow--blue {
    width: 200px;
    height: 200px;
    right: -30px;
    bottom: 10px;
    background: rgba(150, 180, 220, 0.14);
}
.elevate-view__glow--lavender {
    width: 190px;
    height: 190px;
    left: 150px;
    bottom: -60px;
    background: rgba(153, 129, 194, 0.13);
}
@media (max-width: 1150px) {
    .elevate-view__glow--pink {
        width: 150px;
        height: 150px;
        left: -30px;
        top: 20px;
    }
    .elevate-view__glow--blue {
        width: 140px;
        height: 140px;
        right: -20px;
        bottom: 5px;
    }
    .elevate-view__glow--lavender {
        width: 130px;
        height: 130px;
        left: 100px;
        bottom: -35px;
    }
}
/* スマホでは .elevate-view が画面幅いっぱい（左右余白15px）になるため、
   right:-20px の青いblurが画面右端を約5px越えて横スクロールの原因になる。
   ぼかしの見た目はほぼ変わらない範囲で、右端を .elevate-view 内に収める */
@media (max-width: 600px) {
    .elevate-view__glow--blue {
        right: 0;
    }
}

/* ===== index.html 上部ヘッダー：メインナビゲーション =====
   左サイドバー（.aside/.menu、HOME/ABOUT/WORKS/SERVICES/CONTACT）は
   HTML（<aside>一式）・JS（js/custom.jsのscroll-spy IIFE）ともに削除し、
   ヘッダーをサイト唯一のナビゲーションに再構成した。
   左＝テキストロゴ／右＝ABOUT・WORKS・SERVICESのアンカーリンク＋
   「お仕事のご相談はこちら ↗」CTA。
   custom.css は全ページ共通のため、index.html の <body> にだけ付けた
   .index-nav 配下に限定し、他ページ（work-*.html 等、サイドバー＋
   Instagram/YouTubeヘッダーのまま）には一切影響しない。
   vendorの .main/.header/.footer は固定サイドバー（幅80px）を前提に
   常時 padding-left:80px が付いているため、サイドバーを廃止した
   index.html だけ 0 に戻し、フル幅レイアウトにしている。
   .header は vendor側で元々 position:sticky; top:0; z-index:100 済み
   （スクロール追従は既存のまま機能する）。ここでは白背景を明示するに
   留め、過度なガラス表現（強いblur等）は使わない。
   モバイル（800px以下）は .header__wrapper を左からスライドする
   サイドドロワーに作り替えている（下記「サイドドロワーメニュー」参照） */
.index-nav .header,
.index-nav .main,
.index-nav .footer {
    padding-left: 0;
}
.index-nav .header {
    background: #fff6d8;
}
.index-nav .header__logo {
    font-family: "Clash Grotesk", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #0e1218;
    text-decoration: none;
    white-space: nowrap;
}
.index-nav .header__nav {
    display: flex;
    align-items: center;
    gap: 4px;
}
.index-nav .header__nav-link {
    display: inline-flex;
    align-items: center;
    font-family: "Clash Grotesk", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #0e1218;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 8px;
    background: transparent;
    transition: background 0.3s ease;
}
/* 通常時は白背景・黒文字。hoverだけサイト全体のイエロー/ピンク/パープル/
   ライトブルーの世界観に合わせた淡い色がふわっと入る */
.index-nav .header__nav-link--about:hover {
    background: #f9d7e5;
}
.index-nav .header__nav-link--works:hover {
    background: #e2d8f4;
}
.index-nav .header__nav-link--services:hover {
    background: #d9eef5;
}
/* CTA：ナビ文字ではなく右端の横長ボタンとして区別。角丸は強いpillには
   せず、ナビの高さに馴染む程度の控えめな丸みにとどめる */
.index-nav .header__cta {
    margin-left: 8px;
    background: #f9d7e5;
    color: #0e1218;
    white-space: nowrap;
}
.index-nav .header__cta:hover {
    background: #f5c2db;
}
@media (max-width: 1210px) {
    .index-nav .header__nav {
        gap: 2px;
    }
    .index-nav .header__nav-link {
        padding: 8px 12px;
    }
}
@media (max-width: 800px) {
    .index-nav .header__logo {
        font-size: 14px;
    }
}

/* ===== スマホ（800px以下）：左からスライドするサイドドロワーメニュー =====
   開閉状態は従来どおり body.body--active（main.min.js の .burger クリックで
   付け外し）を唯一の状態として使い、閉じる操作（×・背景・リンク・Esc）と
   aria属性・スクロール固定（html.is-drawer-open）は js/custom.js が担当する。
   .header__wrapper（PCでは横並びナビ）を、800px以下ではそのままドロワー本体に
   作り替える。vendor側の .body--active .header__wrapper（全画面・中央寄せ・
   白背景）や .header__wrapper{display:none} より詳細度を上げて上書きしている。
   PC（801px以上）では .drawer__head / .drawer__sns / .drawer-overlay は非表示で、
   ナビの見た目・動作は従来のまま */
.drawer__head,
.drawer__sns,
.drawer-overlay {
    display: none;
}
@media (max-width: 800px) {
    .index-nav .header .header__wrapper {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        z-index: 30;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        width: min(84vw, 360px);
        height: 100%;
        height: 100dvh;
        margin: 0;
        padding: 18px 20px calc(24px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff9e6;
        border-radius: 0 28px 28px 0;
        box-shadow: 12px 0 40px -18px rgba(14, 18, 24, 0.35);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0s linear 0.3s;
    }
    .index-nav.body--active .header .header__wrapper {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.3s ease, visibility 0s;
    }
    /* メニュー外の半透明オーバーレイ（タップで閉じる） */
    .index-nav .drawer-overlay {
        position: fixed;
        inset: 0;
        z-index: 20;
        display: block;
        background: rgba(14, 18, 24, 0.32);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    }
    .index-nav.body--active .drawer-overlay {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease, visibility 0s;
    }

    /* --- 上部：ロゴ＋×ボタン --- */
    .index-nav .drawer__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 18px;
        margin-bottom: 22px;
        border-bottom: 1.5px dashed rgba(14, 18, 24, 0.14);
    }
    .index-nav .drawer__logo {
        min-width: 0;
        font-family: "Clash Grotesk", sans-serif;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: #0e1218;
        text-decoration: none;
        white-space: nowrap;
    }
    .index-nav .drawer__close {
        position: relative;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1.5px solid #0e1218;
        border-radius: 50%;
        background: #fff;
        box-shadow: 3px 3px 0 #f9d442;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .index-nav .drawer__close:active {
        transform: translate(2px, 2px);
        box-shadow: 1px 1px 0 #f9d442;
    }
    .index-nav .drawer__close span::before,
    .index-nav .drawer__close span::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16px;
        height: 2px;
        border-radius: 1px;
        background: #0e1218;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .index-nav .drawer__close span::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* --- メニュー項目 --- */
    .index-nav .header .header__nav {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .index-nav .header .header__nav-link {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 52px;
        margin: 0;
        padding: 10px 16px;
        border-radius: 16px;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: #0e1218;
        background: transparent;
    }
    /* 各項目の頭にサイトのアクセントカラーの小さな丸を置き、カラフルさを添える */
    .index-nav .header .header__nav-link:not(.header__cta)::before {
        content: "";
        flex: 0 0 auto;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--drawer-dot, #ff99c0);
    }
    .index-nav .header .header__nav-link--about {
        --drawer-dot: #ff99c0;
    }
    .index-nav .header .header__nav-link--works {
        --drawer-dot: #9981c2;
    }
    .index-nav .header .header__nav-link--services {
        --drawer-dot: #2a9ec2;
    }
    /* 選択中（現在表示しているセクション）は淡いピンクで強調。
       hover/タップ中も同じ色にそろえる */
    .index-nav .header .header__nav-link:not(.header__cta):hover,
    .index-nav .header .header__nav-link.is-current {
        background: #fde3ee;
    }
    /* CTA：既存のピンクのボタンをそのまま使い、ドロワー幅いっぱいに */
    .index-nav .header .header__cta {
        justify-content: center;
        margin: 16px 0 0;
        font-size: 15px;
        letter-spacing: 0.02em;
        white-space: normal;
        text-align: center;
        background: #f9d7e5;
        border: 1.5px solid #0e1218;
        box-shadow: 3px 3px 0 #0e1218;
    }
    .index-nav .header .header__cta:hover {
        background: #f5c2db;
    }

    /* --- 下部：SNS --- */
    .index-nav .drawer__sns {
        display: block;
        margin-top: auto;
        padding-top: 28px;
    }
    .index-nav .drawer__sns-label {
        margin: 0 0 12px;
        font-family: "Clash Grotesk", sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.2em;
        color: #7d838c;
    }
    .index-nav .drawer__sns-list {
        display: flex;
        gap: 14px;
    }
    .index-nav .drawer__sns-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #f9d7e5;
        color: #0e1218;
        transition: background 0.2s ease, transform 0.2s ease;
    }
    .index-nav .drawer__sns-link:hover {
        background: #f5c2db;
        transform: translateY(-2px);
    }
    .index-nav .drawer__close:focus-visible,
    .index-nav .drawer__logo:focus-visible,
    .index-nav .header .header__nav-link:focus-visible,
    .index-nav .drawer__sns-link:focus-visible {
        outline: 2px solid #0e1218;
        outline-offset: 2px;
    }
}
/* スクロール固定：body（vendorの .body--active{overflow:hidden}）に加え、
   スマホでhtml側のスクロールも止める */
html.is-drawer-open {
    overflow: hidden;
}
/* ===== WORKS詳細ページ（body.page-work）=====
   ヘッダー・スマホドロワーはトップページと同じマークアップ＋body.index-nav
   を付けて上記のスタイル／js/custom.js の処理をそのまま再利用している
   （.index-nav が .main/.header/.footer の旧サイドバー分の padding-left も
   0 に戻す）。ここではフッターだけを小さめのダークグレーの控えめな表記にする */
.page-work .footer {
    background: #fff;
}
.page-work .footer__copy {
    color: #5b616b;
    font-size: 12px;
    letter-spacing: 0.04em;
}

@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
    .index-nav .header .header__wrapper,
    .index-nav.body--active .header .header__wrapper,
    .index-nav .drawer-overlay,
    .index-nav.body--active .drawer-overlay,
    .index-nav .drawer__close,
    .index-nav .drawer__sns-link {
        transition: none;
    }
}

/* ===== DESIGN ACROSS BORDERS：飛行ルートの装飾 =====
   ABOUT→WORKS／WORKS→ELEVATE（From Design to Digital）／SERVICES→CONTACT
   の3か所の白い余白に、海外を行き来しながら活動している背景を、抽象的な
   「飛行ルート」のビジュアルモチーフとして表現（都市名などの文字情報は
   表示しない）。既存セクションのHTML/CSSは一切変更せず、section間に新規の
   装飾専用ブロックとして追加するのみ（装飾専用クラス flight-route__* は
   本ブロックでのみ使用）。ベースは1本の細い実線カーブとし、ドット/小さな
   図形はアクセントとして一部にだけ使用（全面ドット線にはしない）。
   飛行機は offset-path で各ルートの曲線（.flight-route__path と同じ d）を
   なぞって移動し、offset-rotate:auto で曲線の向きに合わせて自然に回転する */
.flight-route {
    width: 100%;
    padding: 16px 0;
}
.flight-route__svg {
    display: block;
    width: 100%;
    height: 56px;
    overflow: visible;
}
.flight-route__path {
    fill: none;
    stroke: #4a4f57;
    stroke-width: 1.4;
    stroke-linecap: round;
    opacity: 0.6;
}
.flight-route__dot {
    fill: #4a4f57;
    opacity: 0.6;
}
.flight-route__plane {
    fill: #20232a;
    offset-rotate: auto;
    animation-name: flight-route-fly;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.flight-route--1 .flight-route__plane {
    offset-path: path('M30,62 C 260,18 420,78 650,34 C 820,2 930,46 1050,26');
    animation-duration: 12s;
    animation-delay: 0s;
}
.flight-route--2 .flight-route__plane {
    offset-path: path('M1050,58 C 960,30 840,80 660,50 C 430,10 240,70 30,24');
    animation-duration: 13s;
    animation-delay: -4s;
}
.flight-route--3 .flight-route__plane {
    offset-path: path('M30,50 C 350,8 750,86 1050,40');
    animation-duration: 11s;
    animation-delay: -7s;
}
@keyframes flight-route-fly {
    0% {
        offset-distance: 0%;
    }
    70% {
        offset-distance: 100%;
    }
    100% {
        offset-distance: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .flight-route__plane {
        animation: none;
        offset-distance: 45%;
    }
}
.flight-route__shape {
    opacity: 0.85;
}
.flight-route__shape--pink {
    fill: #f7c4d9;
}
.flight-route__shape--blue {
    fill: #b9ddea;
}
.flight-route__shape--yellow {
    fill: #f9d442;
}
.flight-route__shape--lavender {
    fill: #d9ccf2;
}
.flight-route__shape--green {
    fill: #6d9985;
}
@media (max-width: 1210px) {
    .flight-route {
        padding: 10px 0;
    }
    .flight-route__svg {
        height: 44px;
    }
}
@media (max-width: 700px) {
    .flight-route {
        display: none;
    }
}

/* ===== HERO 背景：手描きコラージュ画像（<img>方式） =====
   background-image での表示が安定しなかったため、CSS背景ではなく
   <img class="hero-art"> をHERO内に直接配置する方式に変更した。
   同じ画像を background と <img> の両方で表示しないよう、旧
   .hero-sky（background-image/-size/-position/-repeat一式）は削除済み。

   レイヤー構造：
   .heading（HERO本体）… position:relative; overflow:hidden; background:#fff;
   .hero-art（画像） … position:absolute; z-index:0; pointer-events:none;
   .heading .container（タイトル） … position:relative; z-index:1;

   .heading の display:flow-root は、最後の子（.heading__subtitleの
   margin-bottom）がsection外へマージン相殺で抜けるのを防ぎ、.hero-art の
   height:100% が marquee直前まで正しく届くようにするための既存の仕組み
   （維持）。左サイドバー廃止により .main/.header/.footer の
   padding-left は常時0のため、.heading は特別な補正なしで画面幅
   いっぱいになる。

   hero-art は object-fit:contain を起点に、width/height:100%で
   HERO全体を枠として使う。containなら画像（約2.45:1、四隅に装飾／
   中心に白の安全地帯）を欠けさせず・歪めずに必ず全体表示でき、
   余白は.headingのbackground:#fff（画像自身の白と同色）に馴染む。
   スマホはタイトルが幅のほとんどを占めるため、hero-art自体の
   width/leftを広げてcontain後の見かけの拡大率を上げ、中央の
   白地帯を広めに見せている（はみ出し分は.headingのoverflow:hiddenで
   クロップ） */
.heading {
    position: relative;
    display: flow-root;
    overflow: hidden;
    background: #fff;
}
.heading .container {
    position: relative;
    z-index: 1;
}
.hero-art {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* heroの横幅は画像（約2.45:1）より横長のことが多く、cover は常に
   「はみ出した側（この場合は上下）だけ」をクロップして左右は必ず
   端から端まで使う（containだと逆に左右が余って小さく見えていた）。
   coverは余白を作らず画像を敷き詰めるため、タイトル周辺の白い余白は
   画像側に薄い白のradial-gradientを重ねて確保する（タイトル自体は
   無変更。.hero-art と .heading .container の間、z-index:0 の
   レイヤー同士で .hero-art の後に書くことで上に重なる） */
.heading::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 62% 55% at 50% 45%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 70%);
}
@media (max-width: 700px) {
    .hero-art {
        width: 140%;
        height: 100%;
        left: -20%;
        object-fit: contain;
        object-position: center;
    }
}
/* 600px以下は画像全体を収めず、HEROの高さいっぱいまで拡大（cover）して
   大きなコラージュの一部を切り取ったように見せる。coverは比率を保ったまま
   HEROを隙間なく埋めるため、画像自体の左右端や白背景との境界は画面内に
   出ない。位置は中央で、タイトルの四隅にピンク・ブルー・緑などが覗く */
@media (max-width: 600px) {
    .hero-art {
        width: 100%;
        left: 0;
        object-fit: cover;
        object-position: 50% 50%;
    }
}