@charset "UTF-8";

/* ============================================================
   WORK-DETAIL.CSS
   Works 詳細ページ共通コンポーネント
   kikismill / tanotabi など全 works 詳細ページで共有
   ロード順: reset.css → base.css → common.css → work-detail.css
   ============================================================ */


/* ============================================================
   LANGUAGE — JP / EN 切り替え
   body に .is-en クラスをつけると英語表示
   ============================================================ */

.lang-en { display: none; }

body.is-en .lang-ja { display: none; }
body.is-en .lang-en { display: block; }


/* ============================================================
   TERTIARY BUTTON — work-detail ページ内では IconUpperRight を使用
   ============================================================ */

.work-detail .tertiary-button::after {
    background-image: url('../images/Icon/IconUpperRight.svg');
}


/* ============================================================
   CASE BACK — ← Works 戻るボタン
   ============================================================ */

.case-back {
    display: flex;               /* block-level → border-bottom が横幅いっぱいに */
    align-items: center;
    gap: 16px;
    font-family: var(--font-body-en);
    font-size: clamp(18px, 1.7vw, 24px);
    font-weight: 400;
    color: var(--color-text-main);
    /* padding-top が fixed header clearance + 上余白を兼ねる */
    padding-top: clamp(120px, 8.9vw, 228px);
    padding-bottom: clamp(48px, 5.5vw, 80px);
    padding-inline: var(--container-px);
    border-bottom: 1px solid var(--color-divider);
    transition: color var(--transition-base);
    width: 100%;
}

.case-back::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-image: url('../images/Icon/IconBack.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.case-back:hover {
    color: var(--color-text-main);
}


/* ============================================================
   CASE HERO — ページタイトル + メタ情報（旧共通コンポーネント）
   ============================================================ */

.case-hero {
    padding-top: 0;
    padding-bottom: clamp(48px, 7vw, 96px);
    padding-inline: var(--container-px);
}

.case-hero__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 4vw, 48px);
}

.case-hero__label {
    font-family: var(--font-body-en);
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 600;
    color: var(--color-text-sub);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.case-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(36px, 5vw, 72px);
    font-weight: 500;
    color: var(--color-text-main);
    line-height: 1.1;
    letter-spacing: var(--ls-heading);
}

.case-hero__meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 2.5vw, 32px) clamp(24px, 3vw, 48px);
    border-top: 1px solid var(--color-divider);
    padding-top: clamp(24px, 3vw, 40px);
}

.case-hero__meta-item {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.5vw, 8px);
}

.case-hero__meta-label {
    font-family: var(--font-body-en);
    font-size: clamp(10px, 0.9vw, 12px);
    font-weight: 600;
    color: var(--color-text-sub);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.case-hero__meta-value {
    font-family: var(--font-body-en);
    font-size: clamp(13px, 1.2vw, 15px);
    color: var(--color-text-main);
    line-height: 1.5;
}

.case-hero__image {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
}

.case-hero__img {
    width: 100%;
    display: block;
    object-fit: cover;
}

@media screen and (min-width: 768px) {
    .case-hero__meta {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* ============================================================
   CASE OVERVIEW — プロジェクト概要 + Goals
   ============================================================ */

.case-overview {
    padding-block: var(--section-py);
    padding-inline: var(--container-px);
}

.case-overview__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 5vw, 64px);
}

.case-overview__text {
    font-family: var(--font-body-ja);
    font-size: clamp(14px, 1.8vw, 18px);
    line-height: 1.8;
    color: var(--color-text-main);
    letter-spacing: var(--ls-body);
}

.case-overview__goals {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vw, 24px);
}

.case-overview__goals-label {
    font-family: var(--font-body-en);
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 600;
    color: var(--color-text-sub);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.case-overview__goal-list {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vw, 16px);
}

.case-overview__goal-item {
    display: flex;
    align-items: flex-start;
    gap: clamp(8px, 1vw, 12px);
    font-family: var(--font-body-ja);
    font-size: clamp(14px, 1.8vw, 18px);
    line-height: 1.6;
    color: var(--color-text-main);
}

.case-overview__goal-item img {
    width: clamp(18px, 1.5vw, 22px);
    height: clamp(18px, 1.5vw, 22px);
    flex-shrink: 0;
    margin-top: 2px;
}

.case-overview__link {
    align-self: flex-start;
}

@media screen and (min-width: 768px) {
    .case-overview__inner {
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(48px, 8vw, 128px);
    }

    .case-overview__body {
        flex: 3;
        min-width: 0;
    }

    .case-overview__goals {
        flex: 2;
        min-width: 0;
    }
}


/* ============================================================
   CASE SECTION — アイコン付きセクション（旧共通コンポーネント）
   ============================================================ */

.case-section {
    padding-block: var(--section-py);
    padding-inline: var(--container-px);
}

.case-section__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 5vw, 64px);
}

.case-section__header {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.5vw, 16px);
}

.case-section__icon-title {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 16px);
    font-family: var(--font-heading);
    font-size: clamp(24px, 3.5vw, 48px);
    font-weight: 500;
    color: var(--color-text-main);
    line-height: 1.1;
}

.case-section__icon {
    display: block;
    width: clamp(28px, 3vw, 48px);
    height: clamp(28px, 3vw, 48px);
    flex-shrink: 0;
}

.case-section__sub {
    font-family: var(--font-body-ja);
    font-size: clamp(14px, 1.8vw, 18px);
    color: var(--color-text-sub);
    line-height: 1.6;
    letter-spacing: var(--ls-body);
}

.case-section__text {
    font-family: var(--font-body-ja);
    font-size: clamp(14px, 1.8vw, 18px);
    line-height: 1.8;
    color: var(--color-text-main);
    letter-spacing: var(--ls-body);
}

.case-section__list {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vw, 16px);
}

.case-section__list-item {
    display: flex;
    align-items: flex-start;
    gap: clamp(8px, 1vw, 12px);
    font-family: var(--font-body-ja);
    font-size: clamp(14px, 1.8vw, 18px);
    line-height: 1.6;
    color: var(--color-text-main);
}

.case-section__list-item img {
    width: clamp(18px, 1.5vw, 22px);
    height: clamp(18px, 1.5vw, 22px);
    flex-shrink: 0;
    margin-top: 2px;
}

.case-section__image {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
}

.case-section__img {
    width: 100%;
    display: block;
}

.case-section__columns {
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 5vw, 64px);
}

@media screen and (min-width: 768px) {
    .case-section__columns {
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(48px, 6vw, 96px);
    }

    .case-section__columns > .case-section__text,
    .case-section__columns > .case-section__list {
        flex: 1;
        min-width: 0;
    }

    .case-section__columns > .case-section__image {
        flex: 1;
        min-width: 0;
    }
}


/* ============================================================
   CASE FLOW — プロセスフロー図
   ============================================================ */

.case-flow {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vw, 16px);
}

.case-flow__steps {
    display: flex;
    align-items: center;
}

#design-solution .case-flow__steps {
    gap: clamp(20px, 3vw, 32px);
}

.case-flow__step {
    margin-bottom: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 1vw, 12px);
    background-color: transparent;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-base);
}

.case-flow__step-icon {
    display: block;
    width: clamp(60px, 5vw, 80px);
    height: clamp(60px, 5vw, 80px);
}

.case-flow__arrow {
    flex-shrink: 0;
    width: clamp(24px, 2vw, 32px);
    height: auto;
    display: block;
}

.case-flow__step-label {
    font-family: var(--font-body-ja);
    font-size: clamp(15px, 1.5vw, 18px);
    font-weight: 600;
    color: var(--color-text-main);
    text-align: center;
}

.case-flow .work-section__card-text {
    text-align: center;
    line-height: 1.6;
    letter-spacing: 0.04em;
}


/* ============================================================
   CASE DESIGN — デザインショーケース（旧共通コンポーネント）
   ============================================================ */

.case-design {
    padding-block: var(--section-py);
    padding-inline: var(--container-px);
}

.case-design__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 5vw, 64px);
}

.case-design__screen {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vw, 16px);
}

.case-design__screen-label {
    font-family: var(--font-body-en);
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 600;
    color: var(--color-text-sub);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.case-design__screen-label::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-primary-accent);
    flex-shrink: 0;
}

.case-design__screen-image {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
}

.case-design__screen-img {
    width: 100%;
    display: block;
}

@media screen and (min-width: 768px) {
    .case-design__screens {
        display: flex;
        align-items: flex-start;
        gap: clamp(32px, 4vw, 64px);
    }

    .case-design__screen--desktop {
        flex: 3;
        min-width: 0;
    }

    .case-design__screen--mobile {
        flex: 1;
        min-width: 0;
    }
}


/* ============================================================
   CASE NAV — ← Previous | All Projects | Next →（旧共通コンポーネント）
   ============================================================ */

.case-nav {
    padding-block: clamp(48px, 7vw, 96px);
    padding-inline: var(--container-px);
    border-top: 1px solid var(--color-divider);
}

.case-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 3vw, 32px);
}

.case-nav__prev,
.case-nav__next {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.case-nav__prev {
    align-items: flex-start;
}

.case-nav__next {
    align-items: flex-end;
}

.case-nav__direction {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body-en);
    font-size: clamp(10px, 0.9vw, 12px);
    font-weight: 600;
    color: var(--color-text-sub);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.case-nav__prev .case-nav__direction::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-image: url('../images/Icon/IconNext.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(180deg);
    flex-shrink: 0;
}

.case-nav__next .case-nav__direction::after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-image: url('../images/Icon/IconNext.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.case-nav__title {
    font-family: var(--font-heading);
    font-size: clamp(16px, 2vw, 26px);
    font-weight: 500;
    color: var(--color-text-main);
    line-height: 1.2;
    transition: color var(--transition-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.case-nav__prev:hover .case-nav__title,
.case-nav__next:hover .case-nav__title {
    color: var(--color-primary-accent);
}

.case-nav__center {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.case-nav__all {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body-en);
    font-size: clamp(10px, 0.9vw, 12px);
    font-weight: 600;
    color: var(--color-text-sub);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color var(--transition-base);
}

.case-nav__all:hover {
    color: var(--color-text-main);
}

.case-nav__all-icon {
    display: grid;
    grid-template-columns: repeat(3, 4px);
    gap: 3px;
}

.case-nav__all-icon span {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: currentColor;
}


/* ============================================================
   WORK DETAIL — ページラッパー
   上余白は .case-back の padding-top が header clearance を兼ねる
   ============================================================ */

.work-detail {
    padding-top: 0;
}


/* ============================================================
   WORK DETAIL HERO
   Mobile  : 縦積み（info → visual）
   768px+  : 5col(info) + 7col(visual) 横並び
   ============================================================ */

.work-detail__hero {
    /* case-back border 下からここまで 128px */
    padding-top: clamp(32px, 8.9vw, 128px);
    padding-inline: var(--container-px);
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 5vw, 56px);
}

/* ── Left: info block ── */
.work-detail__hero-inner {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3.5vw, 32px);
}

.work-detail__header {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2vw, 24px);
}

.work-detail__label {
    line-height: normal;
    font-family: var(--font-body-en);
    font-size: clamp(13px, 1.4vw, 24px);
    font-weight: 400;
    color: var(--color-text-sub);
    letter-spacing: 0;
}

.work-detail__title {
    font-family: var(--font-heading);
    font-size: clamp(40px, 4.5vw, 80px);
    font-weight: 500;
    color: var(--color-text-main);
    line-height: 1.1;
    letter-spacing: var(--ls-heading);
}

/* Role / Tools / Year / Industry */
.work-detail__meta {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 2.2vw, 16px);
}

.work-info-card {
    display: flex;
    gap: clamp(6px, 0.8vw, 12px);
}

.work-info-card__label {
    font-family: var(--font-heading);
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 500;
    color: var(--color-text-main);
    line-height: normal;
    width: clamp(80px, 8.3vw, 120px);
    flex-shrink: 0;
}

.work-info-card__value {
    font-family: var(--font-body-en);
    font-size: clamp(14px, 1.4vw, 20px);
    color: var(--color-text-main);
    line-height: normal;
    letter-spacing: normal;
}

/* ── Right: cover image ── */
.work-detail__visual {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    margin: 0;
}

.work-detail__visual-img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* Desktop: 5col + 7col */
@media screen and (min-width: 768px) {
    .work-detail__hero {
        flex-direction: row;
        align-items: center;
        gap: clamp(40px, 5vw, 80px);
    }

    .work-detail__hero-inner {
        flex: 5;
        min-width: 0;
    }

    .work-detail__visual {
        flex: 7;
        min-width: 0;
    }
}


/* ============================================================
   WORK SECTION — 共通コンテンツセクション
   Mobile  : 縦積み（heading → body）
   768px+  : 5col(heading) + 7col(body) 横並び
   ============================================================ */

.work-section {
    padding-top: 0;
    padding-bottom: var(--section-py);
    padding-inline: var(--container-px);
}

.work-section__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 5vw, 48px);
}

/* heading + text を縦並び（全セクション共通） */
.work-section__head {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.5vw, 24px);
}

/* section-heading を左揃えに上書き（common.css の center を打ち消す） */
.work-section__head .section-heading {
    margin-bottom: 0;
    justify-content: flex-start;
    text-align: left;
    font-size: clamp(24px, 3vw, 42px);
}

/* sparkle アイコンを詳細ページ向けに小さくする */
.work-section__head .section-heading::before,
.work-section__head .section-heading::after {
    width: clamp(24px, 4vw, 42px);
    height: clamp(24px, 4vw, 42px);
}

.work-section__body {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3.5vw, 40px);
}

/* Desktop: 5col + 7col */
@media screen and (min-width: 768px) {
    .work-section__inner {
        flex-direction: row;
        gap: clamp(40px, 5vw, 80px);
    }

    .work-section__head {
        flex: 5;
        min-width: 0;
    }

    .work-section__body {
        flex: 7;
        min-width: 0;
    }
}


/* ── Body: 本文テキスト ── */

.work-section__text {
    font-family: var(--font-body-ja);
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.8;
    color: var(--color-text-main);
    letter-spacing: var(--ls-body);
}


/* ── セクション下部 CTA ── */

.work-section__cta {
    display: flex;
    justify-content: center;
    margin-top: clamp(40px, 7vw, 128px);
}


/* ── Head: カード内テキスト（card-label + card-text の組み合わせで使用） ── */

.work-section__card-text {
    font-family: var(--font-body-ja);
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.8;
    color: var(--color-text-main);
    letter-spacing: 0.08em;
}


/* ── Body: カード（背景付きコンテナ） ── */

.work-section__card {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.5vw, 24px);
    background-color: rgba(224, 216, 211, 0.40);
    padding: clamp(24px, 2.8vw, 40px);
    border-radius: var(--radius-md);
}

.work-section__card-label {
    font-family: var(--font-body-en);
    font-size: clamp(18px, 1.7vw, 24px);
    font-weight: 600;
    color: var(--color-text-main);
}

.work-section__card-list {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.7vw, 16px);
    list-style: none;
}

.work-section__card-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: var(--font-body-ja);
    font-size: clamp(14px, 1.4vw, 16px);
    line-height: 1.6;
    color: var(--color-text-main);
}

.work-section__card-item img {
    width: clamp(16px, 1.4vw, 24px);
    height: clamp(16px, 1.4vw, 24px);
    flex-shrink: 0;
    margin-top: 3px;
}


.case-list {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 1.4vw, 8px);
    list-style: none;
}


/* ── Body: アイコンリスト（Challenge / Design Solution / Outcome） ── */

.work-section__list {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.2vw, 12px);
    list-style: none;
}

.work-section__list-item {
    display: flex;
    gap: clamp(4px, 1.5vw, 8px);
    border-radius: var(--radius-md);
}

.work-section__list-item > img {
    margin-top: 4px;
    width: clamp(16px, 2vw, 24px);
    height: clamp(16px, 2vw, 24px);
    flex-shrink: 0;
}

.work-section__list-content {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.5vw, 6px);
}


/* ============================================================
   DESIGN PREVIEW — PC(9col) + Mobile(3col) 横並び
   ============================================================ */

.design-preview {
    padding-top: 0;
    padding-bottom: var(--section-py);
    padding-inline: var(--container-px);
    display: flex;
    gap: clamp(24px, 5vw, 64px);
}

.design-preview__pc,
.design-preview__sp {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vw, 32px);
}

.design-preview__label {
    font-family: var(--font-body-en);
    font-size: clamp(11px, 2vw, 24px);
    color: var(--color-text-sub);
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.2vw, 16px);
}

/* アクセントカラーのドット */
.design-preview__label::before {
    content: '';
    display: block;
    width: clamp(6px, 0.56vw, 8px);
    height: clamp(6px, 0.56vw, 8px);
    border-radius: 50%;
    background-color: var(--color-text-accent);
    flex-shrink: 0;
}

.design-preview__image {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    margin: 0;
}

.design-preview__img {
    width: 100%;
    display: block;
}

/* Desktop: PC(3) + Mobile(1) = 9col + 3col */
@media screen and (min-width: 768px) {
    .design-preview {
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(20px, 6vw, 64px);
    }

    .design-preview__pc {
        flex: 3;
        min-width: 0;
    }

    .design-preview__sp {
        flex: 1;
        min-width: 0;
    }
}


/* SP: SNS系2カラムを縦積み全幅に */
@media screen and (max-width: 767px) {
    .design-preview--sns {
        flex-direction: column;
    }
}


/* ============================================================
   WORK PAGER — ← Previous | All Projects | Next →
   ============================================================ */

.work-pager {
    margin-bottom: var(--section-py);
    background-color: var(--color-secondary-supplementary);
    padding-block: clamp(16px, 5vw, 40px);
    padding-inline: var(--container-px);
    display: flex;
    justify-content: space-between;
    gap: clamp(16px, 3vw, 40px);
}

.work-pager__prev,
.work-pager__next {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 0.8vw, 10px);
    flex: 1;
    min-width: 0;
}

.work-pager__prev { align-items: flex-start; }
.work-pager__next { align-items: flex-end; }

.work-pager__next .work-pager__title {
    text-align: right;
}

.work-pager__direction {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.8vw, 12px);
    font-family: var(--font-body-en);
    font-size: clamp(14px, 1.7vw, 24px);
    font-weight: 500;
    color: var(--color-text-main);
    white-space: nowrap;
}

.work-pager__direction img {
    width: clamp(14px, 1.4vw, 20px);
    height: clamp(14px, 1.4vw, 20px);
    flex-shrink: 0;
}

.work-pager__title {
    font-family: var(--font-heading);
    font-size: clamp(20px, 2.5vw, 32px);
    font-weight: 700;
    font-style: italic;
    color: var(--color-primary-main);
    line-height: 1.2;
    transition: color var(--transition-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.work-pager__prev:hover .work-pager__title,
.work-pager__next:hover .work-pager__title {
    color: var(--color-primary-accent);
}

.work-pager__all {
    flex-shrink: 0;
    font-family: var(--font-body-en);
    font-size: clamp(14px, 1.7vw, 24px);
    font-weight: 500;
    color: var(--color-text-main);
    text-align: center;
    transition: color var(--transition-base);
}

.work-pager__all:hover {
    color: var(--color-text-main);
}

/* Mobile: mobile.css に移動 */


/* ============================================================
   PRODUCT PREVIEW — Product Design 案件用プロトタイプギャラリー
   .design-preview--product モディファイアと組み合わせて使用
   Web案件の .design-preview__pc / .design-preview__sp には影響しない
   ============================================================ */

/* Desktop の flex-direction: row を打ち消して縦積みに固定 */
.design-preview--product {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(48px, 6vw, 80px);
}

@media screen and (min-width: 768px) {
    .design-preview--product {
        flex-direction: column;
        align-items: stretch;
        gap: clamp(56px, 7vw, 96px);
    }
}

/* グループ（ONBOARDING / TUTORIAL / CREATE など） */
.product-preview__group {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vw, 24px);
}

/* グループ見出し */
.product-preview__head {
    font-family: var(--font-body-en);
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 600;
    color: var(--color-text-sub);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* 画像グリッド — SP: 2カラム */
.product-preview__images {
    display: flex;
    gap: clamp(16px, 2.2vw, 32px);
    align-items: start;
}


/* 個別画像ラッパー */
.product-preview__image {
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
    max-width: clamp(120px, 14vw, 200px);
}

/* 画像本体 */
.product-preview__img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* wrap — head と images を束ねる内包コンテナ */
.product-preview__wrap {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vw, 20px);
}

/* グループ揃え — center（wrap ごと中央寄せ） */
.product-preview__group--center {
    align-items: center;
}

/* グループ揃え — right（wrap ごと右寄せ） */
.product-preview__group--right {
    align-items: flex-end;
}

/* SP: design-preview--product 内の画像を横スクロールスナップに */
@media screen and (max-width: 767px) {
    .design-preview--product .product-preview__images {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding-bottom: 8px;
        scrollbar-width: none;
    }

    .design-preview--product .product-preview__images::-webkit-scrollbar {
        display: none;
    }

    /* 1枚 = 85%、次のカードが右端に少し見える */
    .design-preview--product .product-preview__image {
        flex: 0 0 85%;
        max-width: none;
        scroll-snap-align: start;
    }
}

/* PC: design-preview--product 内の画像を3カラム横スライドに（次のカードが見える） */
@media screen and (min-width: 768px) {
    .design-preview--product .product-preview__images {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .design-preview--product .product-preview__images::-webkit-scrollbar {
        display: none;
    }

    /* 3枚表示 + 4枚目が右端に少し見える（約29%幅 × 3 = 87% + gap） */
    .design-preview--product .product-preview__image {
        flex: 0 0 29%;
        max-width: none;
        scroll-snap-align: start;
    }
}


/* --4col / --5col: スライドを解除して全画像を表示 */
@media screen and (max-width: 767px) {
    .design-preview--product .product-preview__images--4col,
    .design-preview--product .product-preview__images--5col {
        overflow-x: visible;
        scroll-snap-type: none;
        flex-wrap: wrap;
    }
    .design-preview--product .product-preview__images--4col .product-preview__image,
    .design-preview--product .product-preview__images--5col .product-preview__image {
        flex: 0 0 calc(50% - 8px);
        max-width: none;
        scroll-snap-align: none;
    }
}

@media screen and (min-width: 768px) {
    .design-preview--product .product-preview__images--4col,
    .design-preview--product .product-preview__images--5col {
        overflow-x: visible;
        scroll-snap-type: none;
    }
    .design-preview--product .product-preview__images--4col .product-preview__image,
    .design-preview--product .product-preview__images--5col .product-preview__image {
        flex: 0 0 auto;
        max-width: clamp(120px, 14vw, 200px);
        scroll-snap-align: none;
    }
}


/* ============================================================
   BANNER DETAIL — work-detail__visual に work-card__image--banner の
   スタイルを適用（バナー詳細ページ専用）
   ============================================================ */

.work-detail__visual.work-card__image--banner {
    background-color: #F7EEED;
    aspect-ratio: 1 / 1;
    max-width: 620px;
    position: relative;
    padding: 0;
}

.work-detail__visual.work-card__image--banner .work-detail__visual-img {
    position: absolute;
    top: clamp(16px, 4.44vw, 64px);
    left: clamp(16px, 4.44vw, 64px);
    width: calc(100% - 2 * clamp(16px, 4.44vw, 64px));
    height: calc(100% - 2 * clamp(16px, 4.44vw, 64px));
    object-fit: contain;
    object-position: center;
}