/*=============================
    リンクボタン１
===============================*/
.link-btn-wrap {
    text-align: center;
}

.link-btn {
    display: inline-block;
    background: linear-gradient(135deg, #80a9d3, #2c67af);
    /* グラデーション */
    color: #fff;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 50px;
    /* 丸みを強くしてモダンに */
    font-weight: bold;
    letter-spacing: 0.1em;
    box-shadow: 0 4px 15px rgba(60, 70, 105, 0.4);
    transition: all 0.3s ease;
}

.link-btn:hover {
    transform: translateY(-3px);
    /* 上に少し動かす */
    box-shadow: 0 8px 25px rgba(12, 16, 29, 0.5);
    background: linear-gradient(135deg, #2c67af, #5e96ce);
    /* グラデーション */
    opacity: 0.9;
    color: #fff;
}


/* Editorial Hero */
.editorial-hero {
    padding: 60px 0;
    margin: 40px auto;
    font-family: 'Playfair Display', "serif", "Helvetica Neue", Arial, sans-serif;
}

.editorial-hero .hero-container {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 40px;
    align-items: center;
}

/* PCレイアウト：左右2カラム */
@media (min-width: 768px) {
    .editorial-hero .hero-container {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 60px;
        padding: 40px 20px;
    }
}

.editorial-hero .blog-hero-title {
    /* 💡 既存のサイズ等の指定 */
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 20px 0;
    letter-spacing: -0.02em;

    /* ⚡️ 追加：テーマのh1の色指定を無視して、親要素(section)の色を「強制継承」させる */
    color: inherit !important;
}

/* ついでにリード文や他のテキストもテーマの個別指定に負けないように強制継承させる */
.editorial-hero .hero-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: inherit !important;
    opacity: 0.85;
}

@media (min-width: 768px) {
    .editorial-hero .blog-hero-title {
        font-size: 3.8rem;
    }
}

.editorial-hero .hero-divider {
    width: 60px;
    border: none;
    border-top: 2px solid currentColor;
    margin: 20px 0;
    opacity: 0.8;
}

.editorial-hero .hero-text {
    font-size: 1.1rem;
    line-height: 1.8;
    opacity: 0.85;
    font-family: sans-serif;
}

.editorial-hero .hero-image-wrap {
    width: 100%;
    aspect-ratio: 4 / 5;
    /* 縦長で雑誌らしさを強調 */
    overflow: hidden;
}

.editorial-hero .hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.editorial-hero .hero-img-placeholder {
    width: 100%;
    height: 100%;
    background: #e0ddd5;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Bento Grid Mini */
.bento-grid-mini {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 40px auto;
    max-width: 1000px;
}

@media (min-width: 768px) {
    .bento-grid-mini {
        /* 6:4 の比率にして海外の雑誌やモダンなポートフォリオ風の非対称さを出す */
        grid-template-columns: 1.2fr 0.8fr;
    }
}

.bento-grid-mini .bento-card {
    background: #fff;
    padding: 40px;
    border: 1px solid #e8e6e1;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 左と右で背景色を変えてリズムを出す */
.bento-grid-mini .bento-card-left {
    background-color: #ffffff;
}

.bento-grid-mini .bento-card-right {
    background-color: #f0ede9;
    /* 少しトーンを落としたライトグレー/ベージュ */
    border: none;
}

.bento-grid-mini .bento-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 20px 0;
    color: #8b7355;
    /* アクセントカラー（アースカラー） */
}

.bento-grid-mini .bento-card-body {
    font-size: 1rem;
    line-height: 1.7;
    color: #333;
}


/* --- 既存のCSSの下にこれを追記 --- */

@media (min-width: 768px) {

    /* 💡 反転クラスがついている場合、列の比率を「0.8fr 1.2fr」に逆転させる */
    .bento-grid-mini--reverse {
        grid-template-columns: 0.8fr 1.2fr;
    }
}

/* 💡 カードの並び順（表示順）をブラウザ側で逆転させる */
.bento-grid-mini--reverse .bento-card-left {
    order: 2;
    /* 通常1番目の左カードを、後（2番目）にする */
}

.bento-grid-mini--reverse .bento-card-right {
    order: 1;
    /* 通常2番目の右カードを、先（1番目）にする */
}

/* Editorial Pull Quote */
.editorial-pull-quote {
    position: relative;
    max-width: 800px;
    margin: 60px auto;
    padding: 40px 20px;
    text-align: center;
}

/* 背景に大きなクオーテーションマークを薄く配置 */
.editorial-pull-quote .quote-mark {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Playfair Display', serif;
    font-size: 8rem;
    color: #8b7355;
    opacity: 0.08;
    line-height: 1;
    pointer-events: none;
}

.editorial-pull-quote .quote-body {
    margin: 0;
    padding: 0;
    border: none;
    /* 標準の引用の左線を消す */
}

.editorial-pull-quote .quote-phrase {
    font-family: 'Playfair Display', "YuMincho", "Hiragino Mincho ProN", serif;
    font-size: 1.5rem;
    line-height: 1.6;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 15px 0;
}

@media (min-width: 768px) {
    .editorial-pull-quote .quote-phrase {
        font-size: 2rem;
    }
}

.editorial-pull-quote .quote-source {
    font-family: sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #888;
    font-style: normal;
    display: block;
}


/* ==========================================================================
   Overlap Hero (テキスト・オーバーラップ)
   ========================================================================== */
.overlap-hero {
    position: relative;
    padding: 80px 0;
    margin: 40px auto;
    overflow: hidden;
    font-family: 'Playfair Display', "serif", sans-serif;
}

/* 全体コンテナをGridで制御 */
.overlap-hero .ol-container {
    display: grid;
    grid-template-columns: 1fr;
    /* スマホは1カラム */
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

/* 💻 PCレイアウト (768px以上) */
@media (min-width: 768px) {
    .overlap-hero .ol-container {
        /* 12分割の細分化グリッドを作り、画像と文字を正確にオーバーラップさせる */
        grid-template-columns: repeat(12, 1fr);
        align-items: center;
        padding: 60px 40px;
    }

    /* 【通常パターン】右画像：画像は 5マス目〜13マス目(右端) まで広く取る */
    .overlap-hero.is-img-right .ol-image-area {
        grid-column: 5 / 13;
        grid-row: 1;
    }

    /* 【通常パターン】右画像：テキストは 1マス目〜8マス目 までにして画像と「3マス分」重ねる */
    .overlap-hero.is-img-right .ol-content-area {
        grid-column: 1 / 9;
        grid-row: 1;
        z-index: 2;
    }

    /* 【反転パターン】左画像：画像は 1マス目〜9マス目 */
    .overlap-hero.is-img-left .ol-image-area {
        grid-column: 1 / 9;
        grid-row: 1;
    }

    /* 【反転パターン】左画像：テキストは 5マス目〜13マス目(右端) */
    .overlap-hero.is-img-left .ol-content-area {
        grid-column: 5 / 13;
        grid-row: 1;
        z-index: 2;
        text-align: right;
    }
}

/* --- 画像エリアの装飾 --- */
.overlap-hero .ol-image-area {
    width: 100%;
    aspect-ratio: 16 / 10;
    /* 横長でダイナミックなシネマスコープ比率 */
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
    .overlap-hero .ol-image-area {
        aspect-ratio: 16 / 11;
    }
}

.overlap-hero .ol-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 💡 ほんのり視差効果を出すために、少し大きめにしておく（拡張用） */
    transition: transform 0.5s ease;
}

/* --- テキストエリアと魔法のカラー反転 --- */
.overlap-hero .ol-content-area {
    position: relative;
    pointer-events: none;
    /* テキスト選択の邪魔にならないように */
}

/* 🔥 これが今回の主役：重なると色が反転する巨大英字 */
.overlap-hero .ol-en-title {
    font-family: 'Playfair Display', serif;
    font-size: 11vw;
    /* 画面幅に応じてダイナミックに拡大縮小 */
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.03em;
    text-transform: uppercase;

    /* ⚡️ カラー反転の魔法 */
    color: #ffffff;
    /* 元の文字色を「白」に指定 */
    mix-blend-mode: difference;
    /* 背景が白なら「黒」、画像（暗い色）の上なら「白」に自動反転 */

    margin-bottom: -20px;
}

@media (min-width: 1300px) {
    .overlap-hero .ol-en-title {
        font-size: 130px;
        /* 大きくなりすぎないようにストッパー */
    }
}

/* 下部の日本語とリード文（ここは反転させず、読みやすさ優先） */
.overlap-hero .ol-inner-text {
    margin-top: 30px;
    pointer-events: auto;
    /* リンクなどが入っても押せるように戻す */
}

.overlap-hero.is-img-left .ol-inner-text {
    display: inline-block;
    text-align: left;
    /* 左画像パターンの時も日本語は左揃えにして読みやすく */
}

.overlap-hero .ol-ja-title {
    font-family: "YuMincho", "Hiragino Mincho ProN", serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.overlap-hero .ol-lead-text {
    font-family: sans-serif;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #555;
    margin: 0;
    max-width: 500px;
}


/* ==========================================================================
   Split Content (左右スイッチ＆マガジンライン特殊デザイン)
   ========================================================================== */
.split-content {
    margin: 80px auto;
    max-width: 1200px;
    padding: 0 20px;
}

.split-content .sc-container {
    display: grid;
    grid-template-columns: 1fr;
    /* スマホは1カラム */
    gap: 40px;
    align-items: start;
}

/* 💻 PCレイアウト (768px以上) */
@media (min-width: 768px) {

    /* 💡 パターンA：【左写真 ・ 右文章】 */
    .split-content.is-layout-left .sc-container {
        /* 写真と文章の間に少し広めの余白（60px）を取る */
        grid-template-columns: 0.8fr 1.2fr;
        gap: 0 60px;
    }

    .split-content.is-layout-left .sc-visual-area {
        grid-column: 1;
        border-right: 1.5px solid #8b7355;
        /* お好みのアースカラー */
        padding-right: 60px;
        /* 線と文章の間の美しい余白 */
    }

    .split-content.is-layout-left .sc-text-area {
        grid-column: 2;
        /* ⚡️ 写真と文章を区切る縦ライン（左側につける） */
        /*border-left: 1px solid #8b7355; /* お好みのアースカラー */
        /*padding-left: 60px; /* 線と文章の間の美しい余白 */
    }

    /* 💡 パターンB：【右写真 ・ 左文章】（セレクトボックス切り替え） */
    .split-content.is-layout-right .sc-container {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 0 60px;
    }

    .split-content.is-layout-right .sc-visual-area {
        grid-column: 2;
        border-left: 1.5px solid #8b7355;
        padding-left: 60px;
        /* 線と文章の間の美しい余白 */
    }

    .split-content.is-layout-right .sc-text-area {
        grid-column: 1;
        grid-row: 1;
        /* ⚡️ 左右反転時は、縦ラインを自動的に「右側」にスイッチする */
        border-left: none;
        /*border-right: 1px solid #8b7355;*/
        padding-left: 0;
        /*padding-right: 60px;*/
        /* 線と文章の間の美しい余白 */
        margin-left: auto;
    }
}

/* --- 📸 画像エリアと大好きなアンダーラインの再現 --- */
.split-content .sc-visual-area {
    width: 100%;
}

.split-content .sc-image-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* 正方形 */
    overflow: hidden;
    background-color: #f0ede9;
    border-radius: 4px;
}

.split-content .sc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    /* モノクロを継承 */
}

.split-content .sc-img-color {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
    /* カラーのまま */
}

/* ⚡️ 完全再現：画像の下のネーム＆細い水平線 */
.split-content .sc-meta {
    margin-top: 15px;
    border-bottom: 1px solid #1a1a1a;
    /* 画像の下を走る美しい黒の細線 */
    padding-bottom: 8px;
}

.split-content .sc-current-name {
    font-family: 'Playfair Display', serif;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
    color: #1a1a1a;
    display: block;
}

/* --- 📄 テキストエリアのタイポグラフィ --- */
.split-content .sc-text-area {
    width: 100%;
}

/* 縦棒ラインと文字の高さの美しいスタート位置を合わせるため、ほんの少し微調整 */
@media (min-width: 768px) {
    .split-dialog .sc-text-area {
        padding-top: 5px;
    }
}

.split-content .sc-inner-body {
    font-family: "YuMincho", "Hiragino Mincho ProN", "Georgia", serif;
    font-size: 1.1rem;
    line-height: 1.9;
    color: #2c2c2c;
}

.split-content.is-layout-right .sc-inner-body {
    text-align: right;
}

@media (max-width: 768px) {
    .split-content.is-layout-right .sc-inner-body {
        text-align: left;
    }
}

.split-content .sc-inner-body p {
    margin: 0 0 1.6em 0;
}

.split-content .sc-inner-body p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   Asymmetry Collage (アシンメトリー・コラージュギャラリー)
   ========================================================================== */
.asymmetry-collage {
    margin: 100px auto;
    max-width: 1200px;
    padding: 0 20px;
}

.asymmetry-collage .ac-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* スマホは4列 */
    gap: 20px;
    position: relative;
}

/* 💻 PCレイアウト (768px以上でダイナミックに変化) */
@media (min-width: 768px) {
    .asymmetry-collage .ac-container {
        grid-template-columns: repeat(12, 1fr);
        /* 緻密な12列グリッド */
        grid-template-rows: repeat(6, 100px);
        /* 縦方向もマス目を切って高低差をコントロール */
        gap: 0;
        /* 重なりを緻密にするためギャップは0、代わりに内部でマージン調整 */
    }
}

/* --- 各画像共通のLook仕様（モノクロ、美しいシャドウ、角丸） --- */
.asymmetry-collage .ac-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
    /* 深みのあるシネマシャドウ */
    border-radius: 4px;
    background-color: #f5f5f5;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.asymmetry-collage .ac-item img.img-mono {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    /* お好みのモノクロ。カラーにするなら削除 */
    transition: transform 0.8s ease;
}

.asymmetry-collage .ac-item img.img-color {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
    /* お好みのモノクロ。カラーにするなら削除 */
    transition: transform 0.8s ease;
}

/* ホバーした時に、中の画像がほんのり拡大する色気 */
.asymmetry-collage .ac-item:hover img {
    transform: scale(1.03);
}

/* ==========================================================================
   📐 パターンA：【通常レイアウト配置】
   ========================================================================== */
@media (min-width: 768px) {

    /* 1. 縦書きキャプション：左端の空きスペースにひっそりと配置 */
    .asymmetry-collage.is-pattern-a .ac-caption-wrap {
        grid-column: 1;
        grid-row: 1 / 5;
        writing-mode: vertical-rl;
        /* 縦書きの魔法 */
        font-family: 'Playfair Display', serif;
        font-size: 1.2rem;
        letter-spacing: 0.3em;
        color: #8b7355;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 2. 画像1（メイン・大）：左下寄りにドンと構える（4マスの縦幅） */
    .asymmetry-collage.is-pattern-a .ac-item--main {
        grid-column: 2 / 8;
        /* 2列目〜8列目 */
        grid-row: 2 / 6;
        /* 2行目〜6行目 */
        z-index: 1;
    }

    /* 3. 画像2（サブ・中）：右上に配置し、メインと少し交差させる（z-index: 2で上に乗る） */
    .asymmetry-collage.is-pattern-a .ac-item--sub {
        grid-column: 7 / 12;
        /* メインと7列目で「1マス分」重なる設定 */
        grid-row: 1 / 4;
        z-index: 2;
        /* ⚡️ 前後に重ねる奥行き */
        transform: translateY(20px);
        /* 絶妙な初期ズラし */
    }

    /* 4. 画像3（アクセント・小）：右下に小さく、少し離してヌケ感を作る */
    .asymmetry-collage.is-pattern-a .ac-item--accent {
        grid-column: 9 / 13;
        grid-row: 4.5 / 6.5;
        z-index: 3;
    }
}

/* ==========================================================================
   📐 パターンB：【左右反転レイアウト配置】（スイッチ切り替え）
   ========================================================================== */
@media (min-width: 768px) {
    .asymmetry-collage.is-pattern-b .ac-caption-wrap {
        grid-column: 12;
        grid-row: 1 / 5;
        writing-mode: vertical-rl;
        font-family: 'Playfair Display', serif;
        font-size: 1.2rem;
        letter-spacing: 0.3em;
        color: #8b7355;
    }

    .asymmetry-collage.is-pattern-b .ac-item--main {
        grid-column: 6 / 12;
        /* 右側にメイン */
        grid-row: 2 / 6;
        z-index: 1;
    }

    .asymmetry-collage.is-pattern-b .ac-item--sub {
        grid-column: 2 / 7;
        /* 左側にサブ（6列目で重なる） */
        grid-row: 1 / 4;
        z-index: 2;
        transform: translateY(20px);
    }

    .asymmetry-collage.is-pattern-b .ac-item--accent {
        grid-column: 1 / 5;
        grid-row: 4.5 / 6.5;
        z-index: 3;
    }
}

/* ==========================================================================
   ⚡️ 魔法：CSSだけで動く、時間差（スタッガー）フェードイン
   ========================================================================== */
@media (min-width: 768px) {

    /* スクリプトを使わず、CSS標準の「animation」でページを開いた時にドラマチックに浮き上がらせます */
    .asymmetry-collage .ac-item,
    .asymmetry-collage .ac-caption-wrap {
        opacity: 0;
        animation: acRevealUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    /* ⏱ 各パーツの登場タイミングを少しずつズラす（時間差マジック） */
    .asymmetry-collage .ac-item--main {
        animation-delay: 0.2s;
        /* 最初 */
    }

    .asymmetry-collage .ac-item--sub {
        animation-delay: 0.5s;
        /* やや遅れて上に重なる */
    }

    .asymmetry-collage .ac-item--accent {
        animation-delay: 0.8s;
        /* さらに遅れて足元に */
    }

    .asymmetry-collage .ac-caption-wrap {
        animation-delay: 1.1s;
        /* 最後に文字がすっと現れる */
    }
}

/* 浮き上がるアニメーションの定義 */
@keyframes acRevealUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
        /* 50px下から */
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        /* 定位置へピタッ */
    }
}

/* スマホ用の簡易並び替え（画面が狭いときは無理に重ねず美しく流す） */
@media (max-width: 767px) {
    .asymmetry-collage .ac-container {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .asymmetry-collage .ac-caption-wrap {
        margin-bottom: -10px;
    }

    .asymmetry-collage .ac-item {
        aspect-ratio: 4 / 3;
    }

    .asymmetry-collage .ac-item--accent {
        width: 60%;
        /* アクセント画像だけ少し小さくしてアシンメトリー感をスマホでも残す */
        align-self: flex-end;
    }
}


/* ==========================================================================
   マガジン風タイムライン
   ========================================================================== */
/* 全体コンテナ */
.mzg-timeline-block {
    padding: 60px 20px;
    background-color: #fcfbfa;
    /* 上品なオフホワイト */
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    color: #333;
}

/* メインタイトル */
.mzg-timeline-main-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 60px;
    letter-spacing: 0.1em;
}

/* タイムラインの相対位置コンテナ */
.mzg-timeline-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

/* 中央を通る繊細な縦線 */
.mzg-timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #d1cbc4;
    /* 既存の画像に合わせたニュアンスグレー */
    transform: translateX(-50%);
}

/* 各タイムライン要素 */
.mzg-timeline-item {
    position: relative;
    width: 50%;
    margin-bottom: 40px;
    box-sizing: border-box;
}

/* 左右の配置振り分け */
.mzg-timeline-item.is-left {
    left: 0;
    padding-right: 40px;
}

.mzg-timeline-item.is-right {
    left: 50%;
    padding-left: 40px;
}

/* タイムライン上のドット（中心の交差点） */
.mzg-timeline-dot {
    position: absolute;
    top: 24px;
    width: 9px;
    height: 9px;
    background-color: #8c7f70;
    /* アクセントカラーのブラウングレー */
    border-radius: 50%;
    z-index: 2;
}

.mzg-timeline-item.is-left .mzg-timeline-dot {
    right: -5px;
}

.mzg-timeline-item.is-right .mzg-timeline-dot {
    left: -5px;
}

/* コンテンツカード（あえて目立つ枠線はつけず、余白とタイポグラフィで魅せる） */
.mzg-timeline-content {
    background: #ffffff;
    padding: 30px;
    border: 1px solid #f0ede9;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease;
}

.mzg-timeline-content:hover {
    transform: translateY(-3px);
}

/* ステップ数などのラベル (01 / INSIGHT風) */
.mzg-timeline-number {
    font-size: 0.85rem;
    font-weight: 600;
    color: #8c7f70;
    letter-spacing: 0.15em;
    border-bottom: 1px solid #d1cbc4;
    padding-bottom: 4px;
    display: inline-block;
    margin-bottom: 12px;
}

/* アイテムのタイトル */
.mzg-timeline-item-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 15px 0;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

/* 本文 */
.mzg-timeline-text p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.7;
    margin: 0;
}

/* 画像（仕上がりイメージに合わせたモダンな角丸 or シャープ） */
.mzg-timeline-image {
    margin-top: 20px;
    overflow: hidden;
}

.mzg-timeline-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* レスポンシブ対応（スマホ画面では縦一列にする） */
@media screen and (max-width: 768px) {
    .mzg-timeline-line {
        left: 20px;
    }

    .mzg-timeline-item {
        width: 100%;
        left: 0 !important;
        padding-left: 45px !important;
        padding-right: 0 !important;
    }

    .mzg-timeline-dot {
        left: 16px !important;
        right: auto !important;
    }
}

/* ==========================================
   マガジン風インタビュー)
========================================== */

/* 全体コンテナ */
.mzg-interview-block {
    padding: 50px 0;
    background-color: #ffffff;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

.mzg-interview-wrapper {
    max-width: 840px;
    /* 読みやすいように少しタイトな横幅に */
    margin: 0 auto;
    padding: 0 20px;
}

/* 対話の1行（質問・回答共通） */
.mzg-interview-row {
    display: flex;
    margin-bottom: 48px;
}

/* 発言者情報エリア */
.mzg-interview-meta {
    width: 140px;
    flex-shrink: 0;
    padding-top: 6px;
    padding-right: 20px;
    text-align: left;
}

/* アバター画像（モノクロにすることで一気に雑誌風になります） */
.mzg-interview-avatar {
    width: 50px;
    height: 50px;
    margin-bottom: 8px;
    overflow: hidden;
    border-radius: 50%;
    /* 丸型 */
}

.mzg-interview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    /* モノクロ化 */
    opacity: 0.9;
}

/* 発言者の名前・肩書き */
.mzg-interview-name {
    display: block;
    font-size: 0.75rem;
    color: #8c7f70;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

/* 発言内容のエリア */
.mzg-interview-bubble {
    position: relative;
    flex-grow: 1;
    padding-left: 24px;
}

/* Q. や A. のバッジ（タイポグラフィで魅せる） */
.mzg-interview-badge {
    position: absolute;
    left: 0;
    top: -2px;
    font-family: "Times New Roman", serif;
    font-size: 1.4rem;
    font-style: italic;
    font-weight: 700;
}

/* 本文テキスト */
.mzg-interview-text p {
    font-size: 1rem;
    line-height: 1.8;
    color: #222222;
    margin: 0;
}

/* ==========================================
   ★ 質問者（Q）と回答者（A）のデザイン差分
========================================== */

/* 質問者（Q）：ラインを引いてシンプルかつシャープに */
.mzg-interview-row.is-interviewer .mzg-interview-bubble {
    border-left: 1px solid #d1cbc4;
    /* 繊細な縦線（スクリーンショット11.55.55風） */
    color: #444444;
}

.mzg-interview-row.is-interviewer .mzg-interview-badge {
    color: #8c7f70;
    left: 24px;
    /* 線の内側に寄せる */
}

.mzg-interview-row.is-interviewer .mzg-interview-text {
    padding-left: 32px;
}

/* 回答者（A）：ニュアンスカラーの背景を敷いて主役感を出す */
.mzg-interview-row.is-interviewee .mzg-interview-bubble {
    background-color: #f7f5f2;
    /* 上品な薄ベージュ */
    padding: 30px 35px 30px 55px;
}

.mzg-interview-row.is-interviewee .mzg-interview-badge {
    color: #111111;
    left: 24px;
    top: 26px;
    /* パディングに合わせて調整 */
}

/* ==========================================
   レスポンシブ（スマホでは縦並びに）
========================================== */
@media screen and (max-width: 640px) {
    .mzg-interview-row {
        flex-direction: column;
        margin-bottom: 35px;
    }

    .mzg-interview-meta {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
        padding-right: 0;
    }

    .mzg-interview-avatar {
        margin-bottom: 0;
    }

    .mzg-interview-row.is-interviewer .mzg-interview-text {
        padding-left: 24px;
    }

    .mzg-interview-row.is-interviewer .mzg-interview-badge {
        left: 12px;
    }

    .mzg-interview-row.is-interviewee .mzg-interview-bubble {
        padding: 20px 20px 20px 45px;
    }

    .mzg-interview-row.is-interviewee .mzg-interview-badge {
        left: 18px;
        top: 16px;
    }
}


/* ==========================================
   マガジン風インサイト目次
========================================== */
/* 全体コンテナ */
.mzg-index-block {
    padding: 60px 0;
    background-color: #ffffff;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
}

/* グリッドコンテナ（2列表示） */
.mzg-index-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* カード共通の基本スタイル */
.mzg-index-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: #333333;
    padding: 35px 40px;
    box-sizing: border-box;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ★マジック：スクリーンショット風のアシンメトリー（上下のズレ）を自動生成 */
/* 左側の列（1個目、3個目のカードなど）を少し上に持ち上げる */
.mzg-index-grid .mzg-index-card:nth-child(odd) {
    transform: translateY(-20px);
}

/* 右側の列（2個目、4個目のカードなど）を少し下に下げる */
.mzg-index-grid .mzg-index-card:nth-child(even) {
    transform: translateY(20px);
}

/* マウスホバー時の美しい浮遊感 */
.mzg-index-card:hover {
    box-shadow: 0 15px 30px rgba(140, 127, 112, 0.08);
}

.mzg-index-grid .mzg-index-card:nth-child(odd):hover {
    transform: translateY(-25px);
}

.mzg-index-grid .mzg-index-card:nth-child(even):hover {
    transform: translateY(15px);
}

/* パターンA：白背景＋極細の線（スクリーンショット風） */
.mzg-index-card.is-bg-white {
    background-color: #ffffff;
    border: 1px solid #f0ede9;
}

/* パターンB：上品な薄ベージュ背景 */
.mzg-index-card.is-bg-beige {
    background-color: #f5f2ee;
    /* 画像に合わせたニュアンスベージュ */
    border: 1px solid transparent;
}

/* メタ情報（01 / INSIGHT） */
.mzg-index-card-meta {
    font-family: "Times New Roman", "Georgia", serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #8c7f70;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
}

.mzg-index-card-divider {
    margin: 0 6px;
    color: #d1cbc4;
}

/* カード内のタイトル */
.mzg-index-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 12px 0;
    line-height: 1.4;
    letter-spacing: 0.03em;
}

/* カード内の要約テキスト */
.mzg-index-card-text {
    font-size: 0.88rem;
    color: #666666;
    line-height: 1.6;
    margin: 0;
}

/* 繊細な矢印アイコン（ホバーすると少し右に動く演出） */
.mzg-index-card-arrow {
    position: absolute;
    bottom: 25px;
    right: 30px;
    font-family: serif;
    font-size: 1.2rem;
    color: #d1cbc4;
    transition: transform 0.3s ease, color 0.3s ease;
}

.mzg-index-card:hover .mzg-index-card-arrow {
    transform: translateX(5px);
    color: #8c7f70;
}

/* ==========================================
   レスポンシブ（スマホでは綺麗な1列に）
========================================== */
@media screen and (max-width: 768px) {
    .mzg-index-grid {
        grid-template-columns: 1fr;
        /* 1列に変更 */
        gap: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    /* スマホでは上下のズレをリセットして見やすさ優先 */
    .mzg-index-grid .mzg-index-card:nth-child(odd),
    .mzg-index-grid .mzg-index-card:nth-child(even) {
        transform: none;
    }

    .mzg-index-grid .mzg-index-card:nth-child(odd):hover,
    .mzg-index-grid .mzg-index-card:nth-child(even):hover {
        transform: translateY(-3px);
    }

    .mzg-index-card {
        padding: 30px 25px;
    }
}

/* ==========================================
   パララックス　バナー
========================================== */
.at-banner-thumb.post-single-banner {
    height: 600px;
}

.at-banner-thumb.post-single-banner .img-cover {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .at-banner-thumb.post-single-banner {
        height: 400px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
    .at-banner-thumb.post-single-banner {
        height: 400px;
    }

    .at-banner-thumb.post-single-banner .img-cover {
        width: 100%;
        height: 100vh;
        -o-object-fit: cover;
        object-fit: cover;
    }
}

/* 薄いオーバーレイ幕 */
.at-banner-thumb.post-single-banner .mzg-parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* 白文字用：背景をほんのり暗く（25%）して文字を浮き立たせる */
.at-banner-thumb.post-single-banner.is-text-light .mzg-parallax-overlay {
    background-color: rgba(0, 0, 0, 0.25);
}

/* 黒文字用：背景をほんのり白く（20%）して文字を浮き立たせる */
.at-banner-thumb.post-single-banner.is-text-dark .mzg-parallax-overlay {
    background-color: rgba(255, 255, 255, 0.2);
}

/*.at-banner-thumb.post-single-banner .mzg-parallax-content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
}*/

/* クラスの競合整理 */
.at-banner-thumb.post-single-banner .mzg-parallax-content {
    /* position: relative; は削除（HTMLのabsoluteを活かす） */
    z-index: 3;
    pointer-events: none;
    /* 下の動画やリンクを邪魔しないように（必要に応じて） */
}

/* テキストエリアにポインターイベントを戻す */
.mzg-parallax-content .container {
    pointer-events: auto;
}

.mzg-plx-en-title {
    font-family: "Times New Roman", "Georgia", serif;
    font-size: clamp(4rem, 10vw, 8rem);
    /* 画面幅に合わせて滑らかに拡大縮小 */
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: 0.05em;
    margin: 0;
    text-transform: uppercase;
    opacity: 0.85;
}

.mzg-plx-ja-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 10px 0 12px 0;
    letter-spacing: 0.1em;
}

.mzg-plx-lead {
    font-size: 0.88rem;
    line-height: 1.7;
    margin: 0;
    opacity: 0.9;
}

/* ==========================================
   ★カラー分岐設定
========================================== */
/* 白文字モード */
.at-banner-thumb.post-single-banner.is-text-light .mzg-plx-en-title {
    color: #ffffff;
}

.at-banner-thumb.post-single-banner.is-text-light .mzg-plx-ja-title {
    color: #ffffff;
}

.at-banner-thumb.post-single-banner.is-text-light .mzg-plx-lead {
    color: #ffffff;
}

/* 黒文字モード */
.at-banner-thumb.post-single-banner.is-text-dark .mzg-plx-en-title {
    color: #111111;
}

.at-banner-thumb.post-single-banner.is-text-dark .mzg-plx-ja-title {
    color: #111111;
}

.at-banner-thumb.post-single-banner.is-text-dark .mzg-plx-lead {
    color: #444444;
}

/* モバイル・タブレットでの文字の見せ方を最適化 */
@media (max-width: 991px) {
    .at-banner-thumb.post-single-banner .mzg-parallax-content .row {
        padding-top: 100px !important;
        /* パディングを減らす */
        text-align: center !important;
        /* モバイルはセンター寄せの方がマガジンっぽくなる場合が多い */
    }

    .at-banner-thumb.post-single-banner .mzg-plx-en-title {
        font-size: 3rem;
        /* モバイルでは少し小さくして溢れを防ぐ */
    }

    .mzg-plx-meta-box, .col-lg-4 {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}