/**
 * COMS Manga Section
 * File: coms-manga.css
 *
 * 漫画セクション専用スタイル
 * ─ LP全体へ影響しない独立スコープ設計
 * ─ .coms-manga プレフィックスで完全に名前空間を分離
 * ─ CSS カスタムプロパティによる一元管理
 * ─ WCAG 2.1 AA 準拠（色コントラスト・フォーカス）
 *
 * ⚠️ 既知バグ修正:
 *   旧実装では PC 奇数カードに transform: translateY(40px) を使用していたため、
 *   .js-comsFade の transform アニメーションと競合し、
 *   hover の transform も上書きされる不具合があった。
 *   → 本実装では PC 視差オフセットを margin-top で実現し、競合を完全に解消。
 */


/* ══════════════════════════════════════════════
   CSS カスタムプロパティ（セクションスコープ）
══════════════════════════════════════════════ */

.coms-manga {
    /* カラー */
    --cm-bg:             #f4f2ec;     /* 和紙を想起させる温かみのあるオフホワイト */
    --cm-card-bg:        #ffffff;
    --cm-ink:            #0f0e0c;     /* 墨色に近いほぼ黒 */
    --cm-ink-mid:        #3d3b37;
    --cm-ink-muted:      #7a7670;
    --cm-border:         rgba(15, 14, 12, 0.08);
    --cm-border-strong:  rgba(15, 14, 12, 0.18);
    --cm-accent:         #0f0e0c;     /* 数字バッジ背景 */
    --cm-accent-fg:      #ffffff;
    --cm-shadow-sm:      0 2px 12px rgba(15, 14, 12, 0.06);
    --cm-shadow-md:      0 8px 32px rgba(15, 14, 12, 0.08);
    --cm-shadow-lg:      0 20px 64px rgba(15, 14, 12, 0.12);

    /* タイポグラフィ */
    --cm-font-body:      'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
                         'Noto Sans JP', 'YuGothic', 'Yu Gothic', sans-serif;
    --cm-font-eyebrow:   'Georgia', 'Times New Roman', serif;

    /* スペース */
    --cm-radius-card:    16px;
    --cm-radius-badge:   100px;

    /* アニメーション */
    --cm-ease-out:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --cm-ease-spring:    cubic-bezier(0.34, 1.20, 0.64, 1.00);
}


/* ══════════════════════════════════════════════
   セクション基盤
══════════════════════════════════════════════ */

.coms-manga {
    position:         relative;
    /* ── 余白設計（世界的 LP 標準：セクション高さの約 12〜15%）──
     * clamp(100px, 13vw, 160px) とすることで、
     * スマホ〜PC すべてで「息の詰まらない」余白を確保。
     */
    padding: clamp(100px, 13vw, 160px) 0 !important;
    background-color: var(--cm-bg);
    font-family:      var(--cm-font-body);
    overflow:         hidden;
}

/* 上下のグラデーションフェード（他セクションとの接続） */
.coms-manga::before,
.coms-manga::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 80px;
    pointer-events: none;
    z-index: 1;
}

.coms-manga::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(244, 242, 236, 1), rgba(244, 242, 236, 0));
}

.coms-manga::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(244, 242, 236, 1), rgba(244, 242, 236, 0));
}


/* ══════════════════════════════════════════════
   インナー
══════════════════════════════════════════════ */

.coms-manga__inner {
    position: relative;
    z-index: 2;
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}


/* ══════════════════════════════════════════════
   ヘッダー
══════════════════════════════════════════════ */

.coms-manga__header {
    text-align:    center;
    /* ── ヘッダー下余白：グリッドとの呼吸空間 ── */
    margin-bottom: clamp(64px, 10vw, 120px) !important;
}

/* アイブロウ（STORY MANGA） */
.coms-manga__eyebrow {
    display:        block;
    /* ── アイブロウ〜タイトル間の余白を拡大 ── */
    margin-bottom: clamp(20px, 3vw, 32px) !important;
    font-family:    var(--cm-font-eyebrow);
    font-size:      0.75rem;
    letter-spacing: 0.30em;
    color:          var(--cm-ink-muted);
    font-weight:    400;
    font-style:     italic;
}

/* セクションタイトル */
.coms-manga__title {
    margin: 0;
    font-size: clamp(1.75rem, 4.5vw, 3.25rem);
    line-height: 1.4;
    letter-spacing: -0.01em;
    font-weight: 900;
    color: var(--cm-ink);
}

.coms-manga__title em {
    font-style: normal;
    position: relative;
    display: inline-block;
}

/* "ちょうどいい移動" の下線アクセント */
.coms-manga__title em::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--cm-ink);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.8s var(--cm-ease-out) 0.4s;
}

/* ヘッダーが表示されたら下線をアニメーション */
.coms-manga__title.is-visible em::after {
    transform: scaleX(1);
}

/* リード文 */
.coms-manga__lead {
    font-size:   clamp(1rem, 1.9vw, 1.15rem);
    line-height: 2.4;
    color:       var(--cm-ink-mid);
    font-weight: 400;
    margin-top:   clamp(24px, 3.5vw, 40px) !important;
    max-width:    640px;
    margin-left:  auto !important;
    margin-right: auto !important;
	}

/* ══════════════════════════════════════════════
   グリッド
   ─ スマホ: 1列
   ─ PC: 2列 + 視差オフセット（margin-top 使用）
   ⚠️ transform を使わないことで js-comsFade との競合を回避
══════════════════════════════════════════════ */

.coms-manga__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 48px);
    align-items: start;
}


/* ══════════════════════════════════════════════
   カード
══════════════════════════════════════════════ */

.coms-manga__card {
    position:   relative;
    background: var(--cm-card-bg);
    border:     1px solid var(--cm-border);
    border-radius: var(--cm-radius-card);
    overflow:   hidden;
    box-shadow: var(--cm-shadow-sm);
    transition: box-shadow 0.40s var(--cm-ease-out);

    /* ── 追加: カードを確実に中央揃え ── */
    width:      100%;
    max-width:  560px;
    margin-left:  auto;
    margin-right: auto;
}

.coms-manga__card::before {
    /* カード上部の 3px ボーダーライン（漫画コマ枠の演出） */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--cm-ink);
    z-index: 1;
    border-radius: var(--cm-radius-card) var(--cm-radius-card) 0 0;
}

.coms-manga__card:hover {
    box-shadow: var(--cm-shadow-lg);
}

/* フォーカスリング（キーボード操作） */
.coms-manga__card:focus-within {
    outline: 3px solid var(--cm-ink);
    outline-offset: 4px;
}


/* ══════════════════════════════════════════════
   画像
══════════════════════════════════════════════ */

.coms-manga__figure {
    margin: 0;
    display: block;
    background: #fafafa;
    overflow: hidden;
}

.coms-manga__image {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;

    /* アスペクト比を保持（破綻防止） */
    object-fit: contain;
    object-position: center top;
}


/* ══════════════════════════════════════════════
   コンテンツエリア
══════════════════════════════════════════════ */

.coms-manga__content {
    padding: clamp(20px, 4vw, 28px) !important;
    border-top: 1px solid var(--cm-border);
}


/* ── メタ行（コマ番号 + 感情タグ） ── */

.coms-manga__meta {
    display: flex;
    align-items: center;
    gap:           12px;
    margin-bottom: 16px !important;
}

/* コマ番号バッジ */
.coms-manga__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--cm-radius-badge);
    background: var(--cm-accent);
    color: var(--cm-accent-fg);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    font-feature-settings: 'tnum';
    line-height: 1;
}

/* 感情タグ */
.coms-manga__emotion {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--cm-ink-muted);
    letter-spacing: 0.10em;
    padding: 4px 10px;
    border: 1px solid var(--cm-border-strong);
    border-radius: var(--cm-radius-badge);
    white-space: nowrap;
}


/* ── パネルタイトル ── */

.coms-manga__panelTitle {
    margin: 0 0 12px !important;
    font-size: clamp(1.1rem, 2.2vw, 1.45rem);
    line-height: 1.65;
    letter-spacing: -0.005em;
    font-weight: 800;
    color: var(--cm-ink);
}


/* ── 説明テキスト ── */

.coms-manga__text {
    margin: 0;
    font-size: clamp(0.9rem, 1.6vw, 1rem);
    line-height: 2.0;
    color: var(--cm-ink-mid);
    font-weight: 400;
}


/* ══════════════════════════════════════════════
   フェードインアニメーション
   ─ js-comsFade: 初期状態
   ─ is-visible:  表示状態（JS が付与）
   ─ --stagger:   遅延（JS が CSS 変数で注入）
══════════════════════════════════════════════ */

.js-comsFade {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity  0.70s var(--cm-ease-out) var(--stagger, 0ms),
        transform 0.70s var(--cm-ease-out) var(--stagger, 0ms);
    will-change: opacity, transform;
}

.js-comsFade.is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto; /* アニメーション完了後に解放 */
}


/* ══════════════════════════════════════════════
   PC レイアウト（1024px 以上）
   ⚠️ transform ではなく margin-top で視差オフセット
      → js-comsFade の transform と絶対に競合しない
══════════════════════════════════════════════ */

@media (min-width: 1024px) {

    .coms-manga__inner {
        /* ── 左右均等の padding で確実に中央配置 ──
         * width: min() はコンテナ幅を制御するが、
         * padding で左右対称を明示して Cocoon のレイアウト干渉を排除。
         */
        width:        min(1120px, calc(100% - 80px));
        margin-left:  auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }

    .coms-manga__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:           36px;
        /* ── グリッド自体も中央寄せを明示 ── */
        justify-items: center;
        width:         100%;
    }

    /* 偶数カードを下にオフセット（千鳥配置） */
    .coms-manga__card:nth-child(even) {
        margin-top: 60px !important;
    }

    .coms-manga__content {
        padding: 32px !important;
    }

    .coms-manga__panelTitle {
        font-size: clamp(1.2rem, 1.6vw, 1.45rem);
    }

}


/* ══════════════════════════════════════════════
   タブレット（768px〜1023px）
══════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1023px) {

    .coms-manga__inner {
        width: calc(100% - 48px);
    }

}


/* ══════════════════════════════════════════════
   モバイル（767px 以下）
══════════════════════════════════════════════ */

@media (max-width: 767px) {

    .coms-manga {
        padding: clamp(80px, 12vw, 120px) 0 !important;
    }

    .coms-manga__inner {
        width: calc(100% - 32px);
    }

    .coms-manga__grid {
        /* ── 1列グリッドで1コマずつ中央表示 ── */
        grid-template-columns: 1fr;
        gap:           clamp(24px, 6vw, 36px);
        justify-items: center;
    }

    .coms-manga__card {
        /* ── スマホでの最大幅を画面幅に合わせてセット ── */
        max-width: min(480px, 100%);
        width:     100%;
    }

    .coms-manga__content {
        padding: 20px !important;
    }

    .coms-manga__lead br {
        display: none;
    }

}


/* ══════════════════════════════════════════════
   アクセシビリティ：動き軽減設定
   prefers-reduced-motion が有効なユーザーへの配慮
══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

    .coms-manga__card,
    .js-comsFade,
    .coms-manga__title em::after {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

}