@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Cormorant+Garamond:wght@400&family=Old+Standard+TT:wght@400&family=Shippori+Mincho:wght@400;500;600;800&display=swap');

:root {
    /* Figma変数に準拠 */
    --spain-main: #D1535D;
    /* メインの赤 */
    --spain-main-light: #E35C66;
    /* 明るい赤（タイル・ボタン） */
    --spain-bg01: #FAF0EE;
    /* 背景ピンク */
    --spain-bg02: #FFF8F6;
    /* 背景ピンク（淡） */
    --spain-yellow: #FAE850;
    /* カレント・アクセント */
    --spain-black: #070606;
    /* 本文の黒 */

    --spain-font-en: 'Cormorant Garamond', serif;
    --spain-font-ja: 'Shippori Mincho', serif;
    --spain-font-vol: 'Old Standard TT', serif;
}

#ContentsContainer {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

.commonOneColumn {
    background-color: #fff;
    margin-bottom: 0;
    padding: 0;
}

#BreadCrumb {

    margin-bottom: 0;

    @media only screen and (min-width: 769px) {

        max-width: 1054px;
        margin-inline: auto;
        padding: 20px 15px;
    }
}

/*==============================
全ページ共通
==============================*/
/* ラッパーは <div id="PageId__kaori-muraji">。
   もとは <main> で、サイト共通CSS（style.css）の `main { }` から
   固定ヘッダーぶんの padding とハンバーガー開閉のスライドを受け取っていた。
   div にしてその3ルール（style.css 446 / 453 / 618行）が効かなくなったので、
   ここで id セレクタとして引き継ぐ。サイト共通CSSは編集しない（RULES-core §1）。
   ※ style.css は `transition: transform 0.5s, -webkit-transform 0.5s` だが、
     -webkit- 別名は現行ブラウザでは不要なので transform だけにしている。 */
#PageId__kaori-muraji {
    /* 固定ヘッダー（position: fixed・SP 63px / PC 93px）の下に潜らせない */
    padding-block-start: 60px;
    transition: transform 0.5s;
    line-break: strict;
    color: var(--spain-black);

    @media only screen and (min-width: 769px) {
        padding-block-start: 93px;
    }
}

/* SPドロワーを開いたときに本文を左へスライドさせる */
body.Hamburger-open #PageId__kaori-muraji {
    transform: translateX(calc(-100% + 60px));
}

/* ------------------------------
 ① MVエリア
------------------------------ */
.spain-mv {

    /* --- タイトル帯 --- */
    & .spain-mv-title {
        position: relative;
        background-color: var(--spain-main);
        overflow: hidden;

        /* タイトル画像は透過PNG。地紋（::before / ::after）より前面に置く */
        & img {
            position: relative;
            display: block;
            width: 100%;
            height: auto;
            z-index: 1;
        }

        @media only screen and (min-width: 769px) {
            display: flex;
            justify-content: center;
            padding-block: 8px;

            & img {
                width: 1024px;
                height: auto;
            }

            /* 帯の左右端に入る唐草の地紋 */
            &::before,
            &::after {
                content: '';
                position: absolute;
                display: block;
                width: 127px;
                height: 196px;
                background-image: url('/images/kaori-muraji/deco-ornament.png');
                background-size: 127px 196px;
                background-repeat: no-repeat;
                opacity: 0.35;
                mix-blend-mode: luminosity;
                pointer-events: none;
                z-index: 0;
            }

            /* 楔形マスクの向きを Figma の変換指定に合わせる。
               素材は「右が残り・上が広い」向きで作ってあるので、
               左端は左右反転、右端は上下反転で一致する。 */
            &::before {
                inset-block-start: 0;
                inset-inline-start: -1px;
                transform: scaleX(-1);
            }

            &::after {
                inset-block-end: 0;
                inset-inline-end: 0;
                transform: scaleY(-1);
            }
        }
    }

    /* --- 写真＋プロフィール --- */
    & .spain-mv-body {
        background-color: var(--spain-bg01);
    }

    & .spain-mv-inner {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 24px;
        padding-block-end: 32px;

        /* 左端の淡い縦帯 */
        &::before {
            content: '';
            position: absolute;
            inset-block-start: 0;
            inset-inline-start: 0;
            display: block;
            width: 88px;
            height: 100%;
            background-color: var(--spain-bg02);
        }

        @media only screen and (min-width: 769px) {
            display: block;
            max-width: 1300px;
            margin-inline: auto;
            padding-block-end: 64px;

            &::before {
                inset-inline-start: 3px;
                width: 215px;
            }
        }
    }

    /* --- MV写真 --- */
    & .spain-mv-photo {
        position: relative;
        width: 100%;
        aspect-ratio: 787 / 474;

        & img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Figma準拠の光のグラデーション2枚 */
        &::after {
            content: '';
            position: absolute;
            inset: 0;
            display: block;
            background-image:
                linear-gradient(253.41deg, rgba(255, 255, 255, 0) 78.519%, rgba(255, 255, 255, 0.2) 86.789%),
                linear-gradient(-66.28deg, rgba(210, 218, 223, 0.2) 0.486%, rgba(0, 0, 0, 0) 35.13%);
            pointer-events: none;
        }

        @media only screen and (min-width: 769px) {
            width: 787px;
            margin-inline-start: auto;
        }
    }

    /* --- 手書き文字 --- */
    & .spain-mv-handwriting {
        position: absolute;
        inset-inline-start: 56.267%;
        inset-block-start: 66.86%;
        width: 38.667%;
        aspect-ratio: 145 / 50;
        margin: 0;
        overflow: hidden;
        z-index: 2;

        /* SVGは枠より一回り大きく、枠でクリップする（Figma準拠） */
        & img {
            position: absolute;
            inset-block-start: -20.33%;
            inset-inline-start: -6.98%;
            display: block;
            width: 113.96%;
            height: 140.66%;
        }

        @media only screen and (min-width: 769px) {
            /* Figmaでは1300px枠を基準に left:997px。
               実装では787px幅の写真が基準なので 997 - (1300-787) = 484px。 */
            inset-inline-start: 484px;
            inset-block-start: 362px;
            width: 214px;
        }
    }

    /* --- プロフィール（共通ブロック ①-c の文脈上書き） --- */
    & .spain-profile {

        /* トップページでは写真に重ねるため絶対配置にする。 */
        @media only screen and (min-width: 769px) {
            position: absolute;
            inset-inline-start: 139px;
            inset-block-start: 88px;
            gap: 24px;
            width: 492px;
            padding-inline: 0;
        }
    }
}

/* ------------------------------
 ①-c プロフィール（共通ブロック）
 ---
 index.html と articleNN.html の両方で使用する。
 位置・余白の差分は各MVブロック側（.spain-mv / .spain-mv-article）で
 文脈上書きする。ここには両ページ共通の値だけを置く。
------------------------------ */
.spain-profile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    padding-inline: 24px;
    z-index: 1;
}

.spain-profile-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 「— Muraji Kaori —」 */
.spain-profile-name-en {
    margin: 0;
    font-family: var(--spain-font-en);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    color: var(--spain-black);
    white-space: nowrap;

    /* 両脇の16pxの罫線。
       flex + gap にすると「M」と「uraji Kaori」の間にも
       gap が入って隙間ができるため、inline-block で組む。 */
    &::before,
    &::after {
        content: '';
        display: inline-block;
        width: 16px;
        height: 1px;
        background-color: var(--spain-black);
        vertical-align: middle;
    }

    &::before {
        margin-inline-end: 8px;
    }

    &::after {
        margin-inline-start: 8px;
    }

    & span {
        color: var(--spain-main);
    }
}

/* 「村治 佳織」 */
.spain-profile-name-ja {
    margin: 0;
    font-family: var(--spain-font-ja);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    color: var(--spain-black);

    & span {
        color: var(--spain-main);
    }

    @media only screen and (min-width: 769px) {
        font-size: 48px;
    }
}

.spain-profile-detail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* 「profile」 */
.spain-profile-label {
    margin: 0;
    padding-block-end: 4px;
    border-block-end: 0.5px solid var(--spain-black);
    font-family: var(--spain-font-en);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    color: var(--spain-black);
}

.spain-profile-text {
    margin: 0;
    font-family: var(--spain-font-ja);
    font-weight: 600;
    font-size: 14px;
    line-height: 2.2;
    letter-spacing: 0.08em;
    color: var(--spain-black);

    @media only screen and (min-width: 769px) {
        font-size: 15px;
    }
}

/* ------------------------------
 ①-b MVエリア（記事ページ）
 ---
 トップ（①）とは赤帯の中身・記事タイトル部・丸型写真が異なるため、
 .spain-mv を継承せず .spain-mv-article として独立させている。
 旧実装は .spain-mv との2クラス併記だったため①の値が流れ込み、
 リード文が左に50pxずれる不具合が出ていた。
 記事タイトルはモリサワ UD黎ミン（商用）のため画像化している。

------------------------------ */
.spain-mv-article {

    /* --- タイトル帯 --- */
    & .spain-mv-article-title {
        position: relative;
        display: flex;
        gap: 8px;
        align-items: flex-start;
        justify-content: center;
        padding-block: 8px;
        background-color: var(--spain-main);

        /* 帯の左右に入る唐草の地紋。
           素材は「上が広い・右が残り」向きなので、
           左端は左右反転（scaleX）、右端は上下反転（scaleY）で一致する。
           ※ 帯に overflow: hidden はかけられない。
             vol.1ラベルが帯の下へ意図的にはみ出すため。
             地紋は疑似要素の箱に background-size で収めてクリップする。 */
        &::before,
        &::after {
            content: '';
            position: absolute;
            inset-block-start: 0;
            display: block;
            /* SPは楔の全体を49×79に収める（素材127×196に対し縦4.5%伸びるが、
               opacity 0.35 の地紋なので視認できない）。 */
            width: 49px;
            height: 79px;
            background-image: url('/images/kaori-muraji/deco-ornament.png');
            background-size: 49px 79px;
            background-repeat: no-repeat;
            opacity: 0.35;
            mix-blend-mode: luminosity;
            pointer-events: none;
            z-index: 0;
        }

        &::before {
            inset-inline-start: 0;
            transform: scaleX(-1);
        }

        &::after {
            inset-inline-end: 0;
            transform: scaleY(-1);
        }

        @media only screen and (min-width: 769px) {
            padding-block: 16px;

            /* PCは楔の広い上部だけを見せる（素材を自然サイズで置いてクロップ）。
               疑似要素の高さ = 帯の高さ 80px なので inset-block-start: 0 のまま。 */
            &::before,
            &::after {
                width: 127px;
                height: 80px;
                background-size: 127px 196px;
                background-position: left top;
            }

            &::before {
                inset-inline-start: -1px;
            }
        }
    }

    /* --- 帯の中身（連載特集ラベル＋連載名） --- */
    & .spain-mv-article-title-inner {
        display: flex;
        flex: 1 0 0;
        min-width: 0;
        gap: 8px;
        align-items: center;
        /* 左のvol.1ラベル（87px）を避ける */
        padding-inline: 104px 8px;

        @media only screen and (min-width: 769px) {
            flex: none;
            width: 1024px;
            /* PCはラベルが本文幅の左端に載るため 144px 逃げる */
            padding-inline: 144px 0;
        }
    }

    /* 「連載特集／全8回」 */
    & .spain-mv-article-series {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        gap: 8px;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    & .spain-mv-article-series-main {
        font-family: var(--spain-font-ja);
        font-weight: 400;
        font-size: 14px;
        line-height: 1;
        letter-spacing: 0.08em;
        color: #fff;
        white-space: nowrap;

        @media only screen and (min-width: 769px) {
            font-size: 16px;
        }
    }

    /* 「全8回」の白枠。
       flex にすると3つの span がベースラインを共有しなくなるため、
       inline のまま text-align で中央寄せする（ARCHIVE 落とし穴4）。 */
    & .spain-mv-article-series-count {
        display: block;
        width: 100%;
        padding-block-end: 4px;
        border: 1px solid #fff;
        font-family: var(--spain-font-ja);
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.08em;
        text-align: center;
        color: #fff;
        white-space: nowrap;

        & span {
            font-size: 13px;
            line-height: 1;
        }

        /* 「8」だけ大きい */
        & span:nth-child(2) {
            font-size: 18px;
        }
    }

    /* 連載名 */
    & .spain-mv-article-seriesname {
        flex: 1 0 0;
        min-width: 0;
        margin: 0;
        font-family: var(--spain-font-ja);
        font-weight: 400;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: 0.08em;
        color: #fff;

        @media only screen and (min-width: 769px) {
            flex: none;
            font-size: 22px;
            white-space: nowrap;
        }
    }

    /* vol.1 ラベル画像。帯の高さ（79px）より高く、下へはみ出す。 */
    & .spain-mv-article-label {
        position: absolute;
        inset-block-start: 6px;
        inset-inline-start: 7px;
        width: 87px;
        height: 99px;
        margin: 0;
        z-index: 2;

        & img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        @media only screen and (min-width: 769px) {
            inset-block-start: 16px;

            /* 本文幅1024pxの列（.spain-mv-article-title-inner）の左端に合わせる。
               この列は帯の中で中央寄せなので左端は calc(50% - 512px)。
               ビューポートが1300px未満のあいだは 138px（=(1300-1024)/2）で
               従来どおり固定し、負値になって画面外へ出るのを防ぐ。 */
            inset-inline-start: max(138px, calc(50% - 512px));
            width: 120px;
            height: 136px;
        }
    }

    /* --- 記事タイトル部 --- */
    /* 左端の淡い縦帯（.spain-mv-article-inner::before）は絶対配置なので、
       位置指定のないテキストより前面に描かれて左側を覆ってしまう。
       z-index を与えて前面に出す。 */
    & .spain-mv-article-lead {
        position: relative;
        display: flex;
        flex-direction: column;
        align-self: stretch;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
        padding-inline: 15px;
        color: var(--spain-main);
        z-index: 1;

        @media only screen and (min-width: 769px) {
            /* 616px幅で写真の上まではみ出す設計（親のテキスト列は311px） */
            flex: none;
            align-self: flex-start;
            width: 616px;
            padding-inline: 0;
        }
    }

    /* 「Madrid /spain」
       Georgia は Win/Mac 標準搭載なのでテキストのまま。
       字送りは Figma のテキストノード値に合わせて絶対値 1.92px
       （サイズ違いの2つの span に同じ量をかけるため em にしない）。 */
    & .spain-mv-article-city {
        width: 100%;
        margin: 0;
        font-family: Georgia, 'Times New Roman', serif;
        font-style: italic;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: 1.92px;

        & span {
            font-size: 22px;
        }

        @media only screen and (min-width: 769px) {
            font-size: 16px;

            & span {
                font-size: 30px;
            }
        }
    }

    /* 記事タイトル。商用フォント（A-OTF UD黎ミン Pro M）のため画像。
       Figmaは文字のインク範囲で書き出すため、
       SPは仕様345×60に対し画像320×49。
       テキストだった場合の行送りぶんの高さを枠で確保する
       （20px × 1.5 × 2行 = 60px、インク49px、差11pxを上下に配分＝上5px）。 */
    & .spain-mv-article-headline {
        height: 60px;
        margin: 0;

        & img {
            display: block;
            width: 320px;
            height: auto;
            margin-block-start: 5px;
        }

        @media only screen and (min-width: 769px) {
            width: 616px;
            height: 39px;

            /* PCは写真に重なるので白いグローで可読性を確保する。
               Figmaの text-shadow: 0 0 8px #fff, 0 0 4px #fff 相当。
               画像は文字だけの透過PNGなので filter: drop-shadow で再現する。
               画像には除去したグロー領域ぶんの透明余白が左右上下8pxずつ残るため、
               文字のインク左端を本文左端（138px）に合わせて8px戻す。 */
            & img {
                width: 629px;
                max-width: none;
                margin-block-start: 0;
                margin-inline-start: -8px;
                filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #fff);
            }
        }
    }

    /* --- レイアウト --- */
    & .spain-mv-article-body {
        position: relative;
        background-color: var(--spain-bg01);
    }

    & .spain-mv-article-inner {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding-block: 32px;

        /* 左端の淡い縦帯（Figma Rectangle 37・--bace02）。
           inner は PC で max-width: 1300px の中央寄せになるので、
           帯もビューポート左端ではなく1300px枠の左端に付く。
           body に padding が無いため inset-block: 0 で body 全高を覆える。 */
        &::before {
            content: '';
            position: absolute;
            inset-block: 0;
            inset-inline-start: 0;
            display: block;
            width: 88px;
            background-color: var(--spain-bg02);
            pointer-events: none;
            z-index: 0;
        }

        @media only screen and (min-width: 769px) {
            flex-direction: row;
            align-items: flex-start;
            gap: 64px;
            max-width: 1300px;
            margin-inline: auto;
            /* 写真(520px)の下に64px残して body 584px にする */
            padding-block: 0 64px;
            padding-inline-start: 138px;

            &::before {
                width: 215px;
            }
        }
    }

    /* SPはラッパーを透過させ、記事タイトル部・写真・プロフィールを
       inner の直下に縦積みする（PCでのみ左の1列としてまとめる）。 */
    & .spain-mv-article-textcol {
        display: contents;

        @media only screen and (min-width: 769px) {
            display: flex;
            flex: none;
            flex-direction: column;
            gap: 24px;
            width: 311px;
            /* Figma: Frame 3 は body 上端から 110.5px */
            margin-block-start: 110.5px;
        }
    }

    /* HTMLはPC都合で textcol(lead, profile) → photo の順に組んでいる。
       SPのFigma順（記事タイトル → 写真 → プロフィール）に order で並べ替える。
       PCでは photo が textcol の兄弟になり、order 1 でそのまま右側に並ぶ。 */
    & .spain-mv-article-lead {
        order: 0;
    }

    & .spain-mv-article-photo {
        order: 1;
    }

    & .spain-profile {
        order: 2;
    }



    /* --- 写真まわり --- */
    & .spain-mv-article-photo {
        position: relative;
        align-self: stretch;
        width: 100%;
        aspect-ratio: 375 / 248;

        /* 主写真。手書き文字・丸型写真の img と取り違えないよう
           直下の picture に限定して指定する。 */
        & > picture {
            display: block;
            width: 100%;
            height: 100%;
        }

        & > picture img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        @media only screen and (min-width: 769px) {
            flex: none;
            /* SPの align-self: stretch を打ち消す。
               残さないとテキスト列が写真より高いときに引き伸ばされ、
               aspect-ratio の520pxが効かなくなる。 */
            align-self: flex-start;
            width: 787px;
            aspect-ratio: 787 / 520;
        }
    }

    /* 「#大好きな街」手書き文字 */
    & .spain-mv-article-handwriting {
        position: absolute;
        inset-block-start: 29px;
        inset-inline-end: 17px;
        width: 106px;
        aspect-ratio: 106 / 31;
        margin: 0;
        z-index: 2;

        & img {
            display: block;
            width: 100%;
            height: auto;
        }

        @media only screen and (min-width: 769px) {
            inset-block-start: 35px;
            inset-inline-end: 40px;
            width: 152px;
            aspect-ratio: 152 / 44;
        }
    }

    /* 丸型プロフィール写真。
       SPは写真の下辺から128pxはみ出してプロフィール欄に重なる。
       PCは写真の左辺から32pxはみ出す。どちらも前面に置く。 */
    & .spain-mv-article-round {
        position: absolute;
        inset-inline-start: 207px;
        inset-block-end: -128px;
        width: 151px;
        margin: 0;
        z-index: 2;

        /* photo_round.png は角に背景ピンク(#FAF0EE)が焼き込まれた不透過PNG。
           SPは丸型写真がMV写真に重なるため、角のピンクが写真を隠してしまう。
           白リングの外周は画像の辺にちょうど接しているので、
           border-radius: 50% で角だけを落とせる（リングは削らない）。 */
        & img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 50%;
        }

        @media only screen and (min-width: 769px) {
            inset-inline-start: -32px;
            inset-block-end: 16px;
            width: 198px;
        }
    }


    /* --- プロフィールの記事ページ差分（共通ブロック ①-c の文脈上書き） --- */
    /* 積み順の order はレイアウト節でまとめて指定している。
       トップは写真に重ねる絶対配置だが、記事ページはSP縦積み／PC左列。
       絶対配置は .spain-mv 側にしか無いので打ち消し不要。 */
    & .spain-profile {
        /* 写真との間隔は Figma 24px。inner の gap 16px に 8px 足す。 */
        margin-block-start: 8px;

        @media only screen and (min-width: 769px) {
            margin-block-start: 0;
            padding-inline: 0;
        }
    }

    & .spain-profile-name-ja {
        @media only screen and (min-width: 769px) {
            font-size: 40px;
        }
    }

    /* 本文はトップより1段小さい（SP 13px / PC 14px）。
       Figma: SP 327×116=13px×2.2×4行 / PC 311×155=14px×2.2×5行 */
    & .spain-profile-text {
        font-size: 13px;

        @media only screen and (min-width: 769px) {
            font-size: 14px;
        }
    }

}


/* ------------------------------
 ② SNSシェア
 ---
 .snsBox の本体は style.css（サイト共通）にある。
 ここは位置と余白の調整のみ。エジプト連載と同じ扱い。
------------------------------ */
.snsBox {
    position: relative;
    top: -20px;
    gap: 10px;
    margin: 0 15px 0 0;
    z-index: 2;

    & .twitter_btn {
        background-color: #000;
        border-radius: 50%;

        & img {
            scale: 0.6;
        }
    }

    @media only screen and (min-width: 769px) {
        top: -80px;
        max-width: 1024px;
        margin-inline: auto;
    }
}

/* ------------------------------
 ③ 連載ナビ（全8回）
 ---
 状態は修飾クラスで持たせ、nth-child を使わない。
 Vol.4以降を公開するときはHTMLのクラスを付け替えるだけで済む。
   （既定）                     … 他ページへのリンク。矢印は「>」
   .spain-nav-item--unreleased … 未公開。矢印なし・リンクなし
   .spain-nav-item--current    … 自分のページ（記事ページで使用）
------------------------------ */
.spain-nav {
    padding: 10px 15px 40px 15px;

    & .spain-nav-list {
        display: grid;
        /* SP 375px で (345-16)/3 = 109.7px ≒ デザインの109px */
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    & .spain-nav-item {
        display: grid;
    }

    /* --- タイル本体 --- */
    & .spain-nav-link {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        height: 95px;
        padding: 8px;
        border-radius: 4px;
        background-color: var(--spain-main-light);
        overflow: hidden;
        text-decoration: none;

        /* ホバーはリンクのタイルだけ。
           .spain-nav-link は未公開タイルの <span> にも付いているので
           :is(a) で絞り込む */
        transition: opacity 0.3s ease;

        &:is(a):hover {
            opacity: 0.8;
        }

        /* タイル内の地紋。MV帯と同じ素材を流用（幾何は相似なので拡縮のみ）。 */
        &::before {
            content: '';
            position: absolute;
            /* Figmaはタイル幅109px固定で right:67px だが、実装のタイルは
               grid の 1fr で可変幅。右端基準だと幅が広がるほど地紋が
               中央へ流れるため、左端基準にする（109 − 67 − 87 = −45）。 */
            inset-inline-start: -45px;
            inset-block-end: -15px;
            display: block;
            width: 87px;
            height: 134px;
            background-image: url('/images/kaori-muraji/deco-ornament.png');
            background-size: 87px 134px;
            background-repeat: no-repeat;
            /* Figmaは rotate(-90°) のみ＝「左が残り・下が広い」。
               素材は「右が残り・上が広い」なので180°回して合わせる。 */
            transform: rotate(180deg);
            opacity: 0.22;
            mix-blend-mode: luminosity;
            pointer-events: none;
            z-index: 0;
        }
    }

    & .spain-nav-body {
        position: relative;
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 0;
        width: 100%;
        z-index: 1;
    }

    /* --- 「\ Vol.1 /」 --- */
    & .spain-nav-vol {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-family: var(--spain-font-vol);
        font-weight: 400;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: 0.08em;
        color: var(--spain-yellow);
        white-space: nowrap;

        /* 両脇の「\」「/」。6.71×9.95 は12pxの線を34°傾けた外接矩形なので、
           矩形の対角線を引くと角度・長さがデザインと一致する。 */
        &::before,
        &::after {
            content: '';
            display: block;
            flex: none;
            width: 6.71px;
            height: 9.95px;
        }

        /* 色は currentColor。こうしておくと修飾クラスで color を変えるだけで
           「\」「/」も文字と一緒に色が変わる（--current は赤）。 */
        &::before {
            background-image: linear-gradient(to top right,
                    transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px),
                    currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px));
        }

        &::after {
            background-image: linear-gradient(to bottom right,
                    transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px),
                    currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px));
        }
    }

    /* --- 都市名 / 公開予定月 --- */
    & .spain-nav-city {
        font-family: var(--spain-font-ja);
        font-weight: 800;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: 0.08em;
        color: #fff;
        text-align: center;
    }

    /* --- 矢印。maskなので background-color で色を変えられる --- */
    & .spain-nav-arrow {
        position: relative;
        flex: none;
        width: 7.5px;
        height: 15px;
        background-color: #fff;
        z-index: 1;
        -webkit-mask: url('/images/kaori-muraji/arrow-right.svg') no-repeat center / contain;
        mask: url('/images/kaori-muraji/arrow-right.svg') no-repeat center / contain;
    }

    /* --- 未公開の回（リンクなし）
       押せないボタンであることが分かるよう全体を半透明にする。
       タイル・文字・地紋をまとめて落としたいのでリンクではなく item に掛ける。 --- */
    & .spain-nav-item--unreleased {
        opacity: 0.5;
    }

    /* --- 自分のページ（記事ページで使用）
       黄色タイル＋赤文字＋下向き矢印。 --- */
    & .spain-nav-item--current {
        & .spain-nav-link {
            background-color: var(--spain-yellow);

            /* Figmaのタイル地紋は合成モードなしの opacity 30%。
               既定タイル（赤地）は luminosity 22% で組んであるが、
               黄色地では luminosity にすると青緑の色味が消えて見た目が変わるため、
               このタイルだけ normal に戻す。 */
            &::before {
                mix-blend-mode: normal;
                opacity: 0.3;
            }
        }

        /* 「\ Vol.1 /」の斜線は currentColor 追従なので color だけで足りる */
        & .spain-nav-vol,
        & .spain-nav-city {
            color: var(--spain-main);
        }

        /* 現在地なので矢印は下向き。縦横が入れ替わる。 */
        & .spain-nav-arrow {
            width: 15px;
            height: 7.5px;
            background-color: var(--spain-main);
            -webkit-mask-image: url('/images/kaori-muraji/arrow-down.svg');
            mask-image: url('/images/kaori-muraji/arrow-down.svg');
        }

        @media only screen and (min-width: 769px) {

            /* 矢印の中心はタイル右端から27.75px＝既定の「>」と同じ。
               幅が7.5→15pxに変わるので右オフセットを 24 → 20.25px にする。 */
            & .spain-nav-arrow {
                inset-inline-end: 20.25px;
                inset-block-start: calc(50% - 0.5px);
            }
        }
    }

    @media only screen and (min-width: 769px) {
        max-width: 1024px;
        margin-inline: auto;
        padding-inline: 0;

        & .spain-nav-list {
            /* PC 1024px で (1024-24)/4 = 250px ＝ デザイン実寸 */
            grid-template-columns: repeat(4, 1fr);
        }

        & .spain-nav-link {
            height: 80px;
            padding: 16px;
            justify-content: flex-start;

            &::before {
                /* SPと同じ理由で左端基準（250 − 171 − 127 = −48） */
                inset-inline-start: -48px;
                inset-block-end: -61px;
                width: 127px;
                height: 196px;
                background-size: 127px 196px;
            }
        }

        & .spain-nav-body {
            flex: none;
        }

        & .spain-nav-city {
            font-size: 18px;
        }

        /* PCは矢印がタイル右端・上下中央 */
        & .spain-nav-arrow {
            position: absolute;
            inset-inline-end: 24px;
            inset-block-start: 50%;
            translate: 0 -50%;
        }
    }
}

/* ------------------------------
 ④ 導入リード文＋写真
------------------------------ */
.spain-intro {
    padding-inline: 15px;

    & .spain-intro-inner {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    /* --- 赤字のリード文 --- */
    & .spain-intro-lead {
        margin: 0;
        font-family: var(--spain-font-ja);
        font-weight: 600;
        font-size: 14px;
        line-height: 2.2;
        letter-spacing: 0.08em;
        color: var(--spain-main);
    }

    & .spain-intro-figure {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0;
    }

    /* --- 傾けた写真の外接ボックス。回転してもレイアウトが崩れないよう場所を確保する --- */
    & .spain-intro-photo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        aspect-ratio: 343.03 / 256.9;
    }

    /* --- 白フチ＋影＋5.42度の傾き --- */
    & .spain-intro-photo-frame {
        width: 93.62%;
        /* 323 / 345 */
        padding: 8px;
        background-color: #fff;
        filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
        transform: rotate(5.42deg);

        & img {
            display: block;
            width: 100%;
            aspect-ratio: 278 / 191;
            object-fit: cover;
        }
    }

    /* --- キャプションだけサイト共通の Noto Sans JP --- */
    & .spain-intro-caption {
        margin: 0;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: 12px;
        line-height: 1.5;
        letter-spacing: 0.08em;
        color: var(--spain-black);
    }

    @media only screen and (min-width: 769px) {
        padding-block-start: 48px;
        padding-inline: 0;

        & .spain-intro-inner {
            flex-direction: row;
            align-items: center;
            gap: 24px;
            /* 560(文字) + 24(gap) + 312.231(写真) = 896.231 を中央寄せ */
            max-width: 896px;
            margin-inline: auto;
        }

        & .spain-intro-lead {
            font-size: 20px;
            white-space: nowrap;
        }

        & .spain-intro-figure {
            flex: none;
            gap: 0;
            width: 312.231px;
        }

        & .spain-intro-photo {
            width: 312.231px;
            aspect-ratio: 312.231 / 233.834;
            margin-block-end: -6px;
        }

        & .spain-intro-photo-frame {
            width: 294px;

            & img {
                aspect-ratio: auto;
                height: 191px;
            }
        }

        /* 2行目を「▲」1文字ぶん字下げして本文の頭に揃える（ぶら下げインデント） */
        & .spain-intro-caption {
            padding-inline-start: 1em;
            text-indent: -1em;
        }
    }
}

/* ------------------------------
 ⑤ 本文（見出し・段落・写真2点・背景のギター）
------------------------------ */
.spain-body {
    padding-block: 56px 64px;
    padding-inline: 15px;

    & .spain-body-inner {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    & .spain-body-cols {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        width: 100%;
        /* 背景のギターより前面に置く */
        z-index: 1;
    }

    & .spain-body-text {
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
    }

    /* --- 見出し（左の赤い縦棒＋1行目にマーカー） --- */
    & .spain-body-heading {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin: 0;
        padding-inline-start: 16px;
        border-inline-start: 6px solid var(--spain-main);
        font-family: var(--spain-font-ja);
        font-weight: 600;
        font-size: 20px;
        line-height: 1.5;
        letter-spacing: 0.08em;
        color: var(--spain-black);
    }

    /* Figmaは「内側に16pxの下線」。線を足すと行の高さが変わるので、
       背景グラデーションで行の下16pxだけを塗る（蛍光ペン方式）。
       20px × 1.5 = 30px の行に対して (30-16)/30 = 46.67% */
    & .spain-body-heading-marker {
        background-image: linear-gradient(transparent 46.67%, var(--spain-bg01) 46.67%);
    }

    & .spain-body-paragraphs {
        display: flex;
        flex-direction: column;
        gap: 8px;

        & p {
            margin: 0;
            font-family: var(--spain-font-ja);
            font-weight: 500;
            font-size: 14px;
            line-height: 2.2;
            letter-spacing: 0.08em;
            color: var(--spain-black);
        }
    }

    /* --- 写真2点 --- */
    & .spain-body-photos {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        width: 100%;
    }

    & .spain-body-photo1 {
        flex: 1 0 0;
        min-width: 0;
        margin: 0;
        aspect-ratio: 175 / 300;

        & img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    & .spain-body-photo2 {
        flex: none;
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 192px;
        margin: 0;

        & img {
            display: block;
            width: 100%;
            height: 297px;
            object-fit: cover;
        }

        & figcaption {
            font-family: 'Noto Sans JP', sans-serif;
            font-weight: 400;
            font-size: 12px;
            line-height: 1.5;
            letter-spacing: 0.08em;
            color: var(--spain-black);
        }
    }

    /* --- 写真の下に続く長文 --- */
    & .spain-body-outro {
        position: relative;
        width: 100%;
        margin: 0;
        font-family: var(--spain-font-ja);
        font-weight: 500;
        font-size: 14px;
        line-height: 2.2;
        letter-spacing: 0.08em;
        color: var(--spain-black);
        z-index: 1;
    }

    /* --- 背景の薄いギター --- */
    & .spain-body-guitar {
        position: absolute;
        inset-block-end: -41px;
        inset-inline-start: 0;
        display: block;
        width: 240px;
        height: 432px;
        background-image: url('/images/kaori-muraji/illust_guitar.svg');
        background-size: 240px 432px;
        background-repeat: no-repeat;
        pointer-events: none;
        z-index: 0;
    }

    @media only screen and (min-width: 769px) {
        padding-block-end: 80px;
        padding-inline: 0;

        & .spain-body-inner {
            max-width: 1024px;
            margin-inline: auto;
        }

        & .spain-body-cols {
            flex-direction: row;
            align-items: flex-start;
            justify-content: center;
            gap: 40px;
        }

        & .spain-body-text {
            flex: 1 0 0;
            min-width: 0;
            width: auto;
        }

        & .spain-body-heading {
            font-size: 24px;
        }

        /* 24px × 1.5 = 36px の行に対して (36-16)/36 = 55.56% */
        & .spain-body-heading-marker {
            background-image: linear-gradient(transparent 55.56%, var(--spain-bg01) 55.56%);
        }

        & .spain-body-paragraphs p {
            font-size: 16px;
        }

        & .spain-body-photos {
            flex: none;
            width: auto;
        }

        & .spain-body-photo1 {
            flex: none;
            width: 175px;
            height: 300px;
            aspect-ratio: auto;
        }

        & .spain-body-photo2 {
            width: 233px;

            & img {
                height: 360px;
            }
        }

        & .spain-body-outro {
            font-size: 16px;
        }

        & .spain-body-guitar {
            inset-block-end: -16px;
            inset-inline-start: -104px;
        }
    }
}

/* ------------------------------
 ⑤-b 本文（記事ページ）
 ---
 トップ（⑤）とは構成が違うため .spain-body を継承せず独立させている。
   トップ … 左に赤い縦棒の見出し／横並び2枚の写真／段落2つ＋outro
   記事   … Reasons why I like it ラベル＋横線／1段落／写真は縦積み2枚
            （PCは左テキスト636px＋右写真列348px）
 文字仕様と16pxマーカーの手法はトップと同じ。

------------------------------ */
.spain-body-article {
    /* SPはナビ直下（ナビ側の padding-block 40px のみ）。
       下は「#思い出の曲」までの間隔 56px を持たせる。 */
    padding-block: 0 56px;
    padding-inline: 15px;

    /* ギターがSPで右に15pxはみ出して横スクロールを生むので横だけ切る。
       カメラは上へ出るため overflow-y は visible のままにする
       （clip は hidden と違い片軸だけの指定が有効）。 */
    overflow-x: clip;

    & .spain-body-article-inner {
        /* カメラを絶対配置するための基準 */
        position: relative;
    }

    & .spain-body-article-cols {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    & .spain-body-article-text {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    /* --- 見出しブロック（ラベル＋2行の見出し。行間はすべて8px） --- */
    & .spain-body-article-headings {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* 「Reasons why I like it」＋右へフェードする120pxの罫線 */
    & .spain-body-article-label {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-family: var(--spain-font-vol);
        font-weight: 400;
        font-size: 13px;
        line-height: 1.5;
        letter-spacing: 0.08em;
        color: var(--spain-main);
        white-space: nowrap;

        &::after {
            content: '';
            flex: none;
            width: 120px;
            height: 1px;
            background-image: linear-gradient(to right, currentColor, transparent);
        }
    }

    & .spain-body-article-heading {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin: 0;
        font-family: var(--spain-font-ja);
        font-weight: 600;
        font-size: 20px;
        line-height: 1.5;
        letter-spacing: 0.08em;
        color: var(--spain-black);

        /* Figmaと同じく折り返さない。SPは2行目が345pxの枠にちょうど収まる幅で、
           CSSは最終文字の後にも字送りが入るため放置すると3行に割れる。 */
        & span {
            white-space: nowrap;
        }
    }

    /* Figmaは「内側に16pxの下線」。線を足すと行の高さが変わるので、
       背景グラデーションで行の下16pxだけを塗る（蛍光ペン方式・⑤と同手法）。
       20px × 1.5 = 30px の行に対して (30-16)/30 = 46.67% */
    & .spain-body-article-heading-marker {
        background-image: linear-gradient(transparent 46.67%, var(--spain-bg01) 46.67%);
    }

    /* --- 本文（1段落）＋背景の薄いギター --- */
    & .spain-body-article-paragraph {
        position: relative;

        & p {
            position: relative;
            margin: 0;
            font-family: var(--spain-font-ja);
            font-weight: 500;
            font-size: 14px;
            line-height: 2.2;
            letter-spacing: 0.08em;
            color: var(--spain-black);
            /* ギターより前面 */
            z-index: 1;
        }
    }

    & .spain-body-article-guitar {
        position: absolute;
        inset-block-start: 432.5px;
        inset-inline-start: 135px;
        display: block;
        width: 240px;
        height: 432px;
        background-image: url('/images/kaori-muraji/illust_guitar.svg');
        background-size: 240px 432px;
        background-repeat: no-repeat;
        pointer-events: none;
        z-index: 0;
    }

    /* --- 写真2点（縦積み。PCでは右の列になる） --- */
    & .spain-body-article-photos {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    & .spain-body-article-figure {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin: 0;

        & img {
            display: block;
            width: 100%;
            height: auto;
        }

        & figcaption {
            font-family: 'Noto Sans JP', sans-serif;
            font-weight: 400;
            font-size: 12px;
            line-height: 1.5;
            letter-spacing: 0.08em;
            color: var(--spain-black);
        }
    }

    /* --- カメラ。ラベル行の右に置く装飾。
           SPはブロック上端より39.5px上へ出て、ナビの下余白に食い込む。 --- */
    & .spain-body-article-camera {
        position: absolute;
        inset-block-start: -39.5px;
        inset-inline-start: 272px;
        width: 69px;
        margin: 0;
        z-index: 2;

        & img {
            display: block;
            width: 100%;
            height: auto;
        }
    }

    @media only screen and (min-width: 769px) {
        /* 本文幅1024pxの列。上64px、下は「#思い出の曲」までの64px。 */
        padding-block: 64px;
        padding-inline: 0;

        & .spain-body-article-inner {
            max-width: 1024px;
            margin-inline: auto;
        }

        /* 左テキスト636px ＋ 40px ＋ 右写真列348px = 1024px */
        & .spain-body-article-cols {
            flex-direction: row;
            align-items: flex-start;
            gap: 40px;
        }

        & .spain-body-article-text {
            flex: none;
            width: 636px;
        }

        & .spain-body-article-label {
            font-size: 15px;
        }

        & .spain-body-article-heading {
            font-size: 24px;
        }

        /* 24px × 1.5 = 36px の行に対して (36-16)/36 = 55.56% */
        & .spain-body-article-heading-marker {
            background-image: linear-gradient(transparent 55.56%, var(--spain-bg01) 55.56%);
        }

        & .spain-body-article-paragraph p {
            font-size: 16px;
        }

        /* ギターは1024px枠の左外へはみ出す */
        & .spain-body-article-guitar {
            inset-block-start: 169px;
            inset-inline-start: -88px;
        }

        & .spain-body-article-photos {
            flex: none;
            width: 348px;
        }

        & .spain-body-article-camera {
            inset-block-start: 20px;
            inset-inline-start: 416px;
            width: 92px;
        }
    }
}

/* ------------------------------
 ⑤-c 思い出の曲（記事ページ）
 ---
 上下13pxだけ覗くタイル柄の枠に、白いカードを重ねた構成。
 タイル柄は既存の bg-tile.jpg（753×394）を cover で敷いて流用する。
 丸型写真はMVと同じ BL26-022829（photo_round.png・角にピンクが焼き込まれた
 不透過PNGなので border-radius で角を落とす）。

------------------------------ */
.spain-song {
    /* 上の余白は本文側の padding-block-end 56px(SP)/64px(PC) が持つ */
    padding-block: 0 64px;
    padding-inline: 15px;

    & .spain-song-inner {
        position: relative;
        /* 枠の地。カードの外側 上下13pxだけが見える。
           既存の bg-tile.jpg とは同じ写真だがトリミングが違うため専用素材にした
           （Figmaの描画サイズ1024×683に合わせて書き出し）。 */
        padding-block: 13px;
        background-image: url('/images/kaori-muraji/bg-tile-song.jpg');
        background-size: cover;
        background-position: center;
    }

    & .spain-song-card {
        display: flex;
        flex-direction: column;
        gap: 24px;
        align-items: center;
        padding: 32px 16px;
        border-inline: 1px solid #e6ebe3;
        background-color: #fff;
    }

    & .spain-song-main {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
        width: 100%;
    }

    /* --- 見出し（ギターの分だけ左を空ける） --- */
    & .spain-song-head {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
        width: 100%;
        padding-block-end: 8px;
        padding-inline-start: 48px;
        border-block-end: 1px solid #d1d1d1;
    }

    & .spain-song-lead {
        margin: 0;
        font-family: var(--spain-font-ja);
        font-weight: 600;
        font-size: 15px;
        line-height: 1.5;
        letter-spacing: 0.08em;
        color: var(--spain-black);
        white-space: nowrap;
    }

    & .spain-song-title {
        margin: 0;
        font-family: var(--spain-font-ja);
        font-weight: 700;
        font-size: 20px;
        line-height: 1.5;
        letter-spacing: 0.08em;
        color: #ef9037;
        white-space: nowrap;
    }

    /* 音符はPCのみ */
    & .spain-song-note {
        display: none;
    }

    /* ギター写真。回転後の中心を Figma の位置に合わせるため、
       中心座標に置いてから幅・高さの半分だけ負マージンで戻す。 */
    & .spain-song-guitar {
        position: absolute;
        inset-inline-start: 23.41px;
        inset-block-start: calc(50% - 27.39px);
        display: block;
        width: 42.355px;
        height: 110.491px;
        margin-inline-start: -21.18px;
        margin-block-start: -55.25px;
        rotate: 19.78deg;
        background-image: url('/images/kaori-muraji/img-EBP15-12027.png');
        background-size: 42.355px 110.491px;
        background-repeat: no-repeat;
        pointer-events: none;
    }

    & .spain-song-text {
        width: 100%;
        margin: 0;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 2;
        letter-spacing: 0.08em;
        color: var(--spain-black);
    }

    /* --- ジャケット＋丸型写真＋吹き出し --- */
    & .spain-song-media {
        position: relative;
        display: flex;
        gap: 16px;
        align-items: flex-end;
        width: 100%;
    }

    /* ジャケットの右下に7pxずらした白い枠（1px罫）を覗かせる。
       枠のはみ出し分は padding で確保する。 */
    & .spain-song-jacket {
        position: relative;
        flex: 1 0 0;
        min-width: 0;
        margin: 0;
        padding-inline-end: 7px;
        padding-block-end: 7px;

        &::before {
            content: '';
            position: absolute;
            inset-block-start: 7px;
            inset-inline-start: 7px;
            width: calc(100% - 7px);
            height: calc(100% - 7px);
            box-sizing: border-box;
            border: 1px solid var(--spain-black);
            background-color: #fff;
            z-index: 0;
        }

        & img {
            position: relative;
            display: block;
            width: 100%;
            height: auto;
            z-index: 1;
        }
    }

    & .spain-song-portrait {
        flex: none;
        width: 114px;
        margin: 0;

        /* photo_round.png は角に背景ピンクが焼き込まれているので落とす（MVと同じ） */
        & img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 50%;
        }
    }

    /* 吹き出し。両脇の「\\」「/」は 19.5×33.775 の箱の対角線で引く
       （39pxの線を30°傾けた外接矩形。ナビの「\\ Vol.1 /」と同手法）。

       inset は回転前のボックスに効くが、Figmaが返す座標は
       回転後の外接矩形。回転は中心基準なので ずれ = (外接矩形 − 回転前ボックス) ÷ 2 を
       足し戻す必要がある。実測 SP 回転前122×65 → 外接127.79×77.05 ＝ Δ(2.90, 6.03)。
       Figmaの外接矩形は .spain-song-media 相対で left 199.88 / top -7.18 なので
       end = 311 −(199.88+2.90+122) = -13.78 / block-start = -7.18+6.03 = -1.15。 */
    & .spain-song-balloon {
        position: absolute;
        inset-inline-end: -13.78px;
        inset-block-start: -1.15px;
        display: flex;
        align-items: flex-end;
        margin: 0;
        rotate: 5.95deg;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: 12px;
        line-height: 1.8;
        letter-spacing: 0.08em;
        text-align: center;
        color: var(--spain-black);
        white-space: nowrap;
        z-index: 2;

        & span {
            margin-inline-end: -4px;
        }

        &::before,
        &::after {
            content: '';
            display: block;
            flex: none;
            width: 19.5px;
            height: 33.775px;
        }

        &::before {
            margin-inline-end: -4px;
            background-image: linear-gradient(to top right,
                    transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px),
                    currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px));
        }

        &::after {
            background-image: linear-gradient(to bottom right,
                    transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px),
                    currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px));
        }
    }

    /* --- 「#思い出の曲」手書き。枠の上辺からはみ出す --- */
    & .spain-song-hand {
        position: absolute;
        inset-inline-end: 24px;
        inset-block-start: -27px;
        display: block;
        width: 135px;
        height: 45px;
        background-image: url('/images/kaori-muraji/txt-song.svg');
        background-size: 135px 45px;
        background-repeat: no-repeat;
        pointer-events: none;
        z-index: 2;
    }

    @media only screen and (min-width: 769px) {
        padding-block: 0 80px;
        padding-inline: 0;

        & .spain-song-inner {
            max-width: 1024px;
            margin-inline: auto;
        }

        /* PCは 左テキスト（flex）＋ 右メディア の横並び */
        & .spain-song-card {
            flex-direction: row;
            gap: 32px;
            align-items: flex-start;
            justify-content: center;
            padding: 32px;
        }

        & .spain-song-main {
            flex: 1 0 0;
            min-width: 0;
            width: auto;
        }

        & .spain-song-head {
            padding-inline-start: 56px;
        }

        & .spain-song-lead {
            font-size: 16px;
        }

        & .spain-song-title {
            font-size: 24px;
        }

        & .spain-song-note {
            position: absolute;
            inset-inline-start: 336px;
            inset-block-start: -1px;
            display: block;
            width: 44px;
            height: 53px;
            background-image: url('/images/kaori-muraji/icon_note-pair.svg');
            background-size: 44px 53px;
            background-repeat: no-repeat;
            pointer-events: none;
        }

        & .spain-song-guitar {
            inset-inline-start: 24.5px;
            inset-block-start: calc(50% - 34px);
            width: 49px;
            height: 128px;
            margin-inline-start: -24.5px;
            margin-block-start: -64px;
            background-size: 49px 128px;
        }

        & .spain-song-text {
            font-size: 16px;
        }

        & .spain-song-media {
            flex: none;
            width: auto;
        }

        & .spain-song-jacket {
            flex: none;
            width: 191px;
        }

        /* PC: 回転前129×70 → 外接137.69×87.25 ＝ Δ(4.34, 8.63)。
           Figmaの外接矩形は media 相対で left 216.31 / top -1.07 なので
           end = 321 −(216.31+4.34+129) = -28.65 / block-start = -1.07+8.63 = 7.55。 */
        & .spain-song-balloon {
            inset-inline-end: -28.65px;
            inset-block-start: 7.55px;
            rotate: 7.89deg;
            font-size: 13px;
        }

        & .spain-song-hand {
            inset-inline-end: 61px;
            inset-block-start: -33px;
            width: 180px;
            height: 60px;
            background-size: 180px 60px;
        }
    }
}

/* ------------------------------
 ⑥ 装飾ボーダー ＋ ここから下のピンク背景（⑦〜⑨を包む）
------------------------------ */
.spain-lower {
    background-color: var(--spain-bg01);

    /* 唐草ボーダー。1周期ぶん（4モチーフ）のタイルを repeat-x で敷く。
       Figmaのままだと692KBあるため、繰り返し単位だけを切り出して26KBにした。
       画面幅に自動追従するのでSP用・PC用の画像を分ける必要がない。 */
    &::before {
        content: '';
        display: block;
        height: 31px;
        background-image: url('/images/kaori-muraji/deco-border.png');
        background-repeat: repeat-x;
        background-size: 341.5px 31px;
    }

    /* 最下部の余白（バナーの下） */
    padding-block-end: 64px;

    @media only screen and (min-width: 769px) {
        padding-block-end: 80px;

        /* PCはモチーフが約6%大きい（高さ31→33px、周期341.5→359.8px） */
        &::before {
            height: 33px;
            background-size: 359.8px 33px;
        }
    }
}

/* ------------------------------
 ⑦ 連載一覧
 ---
 ナビと同じく状態は修飾クラスで持たせる。
   （既定）                       … 公開済み。白カード＋赤枠＋ボタン
   .spain-series-item--unreleased … 未公開。白い帯だけ
------------------------------ */
.spain-series {
    padding-block-start: 48px;
    padding-inline: 15px;

    /* --- 見出し --- */
    & .spain-series-head {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    & .spain-series-lead {
        margin: 0;
        font-family: var(--spain-font-ja);
        font-weight: 500;
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: 0.08em;
        color: var(--spain-black);
        text-align: center;
    }

    & .spain-series-title {
        display: flex;
        align-items: center;
        gap: 16px;
        margin: 0;
        padding-inline: 16px;
        padding-block-end: 8px;
        border-block-end: 1px dashed var(--spain-main);
        font-family: var(--spain-font-ja);
        font-weight: 600;
        color: var(--spain-main);
        white-space: nowrap;
    }

    & .spain-series-title-main {
        font-size: 30px;
        line-height: 1.5;
        letter-spacing: 0.08em;
    }

    /* 「全8回」枠。数字だけ2px大きい */
    & .spain-series-title-count {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-inline: 8px;
        border: 1px solid var(--spain-main);
        font-size: 28px;
        line-height: 1.5;
        letter-spacing: 0.08em;

        & span:nth-child(2) {
            font-size: 30px;
        }
    }

    & .spain-series-note {
        position: absolute;
        inset-inline-end: 4px;
        inset-block-start: 38px;
        display: block;
        width: 36px;
        height: 43px;
        background-image: url('/images/kaori-muraji/icon_note.svg');
        background-size: contain;
        background-repeat: no-repeat;
    }

    /* 筆記体の「Featured Series」はPCのみ */
    & .spain-series-script {
        display: none;
    }

    /* --- リスト --- */
    & .spain-series-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin: 0;
        padding: 0;
        margin-block-start: 40px;
        list-style: none;
    }

    /* --- 公開済みカード --- */
    & .spain-series-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 16px;
        padding: 24px 16px;
        border: 2px solid var(--spain-main-light);
        background-color: #fff;
        text-decoration: none;
        overflow: hidden;
        transition: opacity 0.3s ease;

        /* .spain-series-card は公開済みカードの <a> にしか付いていないが、
           ナビと揃えて :is(a) で明示しておく */
        &:is(a):hover {
            opacity: 0.8;
        }

        /* 右下の地紋 */
        &::before {
            content: '';
            position: absolute;
            inset-block-end: -1px;
            inset-inline-end: -18px;
            display: block;
            width: 144px;
            height: 385px;
            background-image: url('/images/kaori-muraji/deco-ornament.png');
            background-size: 144px 385px;
            background-repeat: no-repeat;
            /* Figmaは rotate(-90°)＋scaleY(-1)。MV帯の右端と同じ向き。
               カードだけは輝度合成がかからないので、タイル柄の色がそのまま出る。 */
            transform: scaleY(-1);
            opacity: 0.15;
            pointer-events: none;
            z-index: 0;
        }
    }

    /* SPではラッパーを透過させ、タブと本体をカード直下の子にする */
    & .spain-series-card-left {
        display: contents;
    }

    /* 素材は26×17の横長。これを90度回転して17×26の枠に収める。
       17×26に引き伸ばしてから回転すると比率が崩れるため、
       素材の実寸のまま回転し、回転後の中心が枠の中心に来るよう配置する。
       枠: right 14 / top -2 / 17×26 → 中心は右から22.5px・上から11px
       素材26×17の中心をそこに合わせる → right 9.5px / top 2.5px
       さらに絶対配置は枠線(2px)の内側が基準なので、両方から2pxを引く */
    & .spain-series-card-tab {
        position: absolute;
        inset-inline-end: 7.5px;
        inset-block-start: 0.5px;
        display: block;
        width: 26px;
        height: 17px;
        background-image: url('/images/kaori-muraji/deco-tab.svg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        transform: rotate(90deg);
        z-index: 1;
    }

    & .spain-series-card-body {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 100%;
        letter-spacing: 0.08em;
        z-index: 1;
    }

    & .spain-series-card-head {
        display: flex;
        margin: 0;
        align-items: center;
        gap: 8px;
        font-family: var(--spain-font-vol);
        font-weight: 400;
        font-size: 18px;
        line-height: 1;
        color: var(--spain-main);
        white-space: nowrap;

        /* 巻数の数字だけ大きい */
        & .spain-series-card-vol span {
            font-size: 24px;
        }
    }

    & .spain-series-card-title {
        margin: 0;
        font-family: var(--spain-font-ja);
        font-weight: 600;
        font-size: 18px;
        line-height: 1.5;
        color: var(--spain-black);
    }

    & .spain-series-card-note {
        position: absolute;
        inset-inline-start: 302px;
        inset-block-start: calc(50% - 16.5px);
        display: block;
        width: 17px;
        height: 19px;
        translate: 0 -50%;
        background-image: url('/images/kaori-muraji/icon_note-single.svg');
        background-size: contain;
        background-repeat: no-repeat;
        z-index: 1;
    }

    & .spain-series-card-photos {
        position: relative;
        display: flex;
        align-items: flex-end;
        width: 100%;
        z-index: 1;
    }

    & .spain-series-card-photo {
        flex: none;
        display: block;
        width: 236px;
        height: 163px;
        /* 人物の下に潜り込ませる */
        margin-inline-end: -38px;
        object-fit: cover;
    }

    & .spain-series-card-person {
        flex: none;
        display: block;
        width: 134px;
        height: 159px;
        object-fit: cover;
        object-position: top;
    }

    & .spain-series-card-btn {
        position: relative;
        display: flex;
        margin: 0;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 16px 24px;
        border-radius: 4px;
        background-color: var(--spain-main-light);
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 500;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: 0.08em;
        color: var(--spain-yellow);
        white-space: nowrap;
        z-index: 1;

        &::after {
            content: '';
            position: absolute;
            inset-inline-end: 16px;
            inset-block-start: 50%;
            display: block;
            width: 7.5px;
            height: 15px;
            translate: 0 -50%;
            background-color: var(--spain-yellow);
            -webkit-mask: url('/images/kaori-muraji/arrow-right.svg') no-repeat center / contain;
            mask: url('/images/kaori-muraji/arrow-right.svg') no-repeat center / contain;
        }
    }

    /* --- 未公開の帯 --- */
    & .spain-series-item--unreleased .spain-series-row {
        position: relative;
        /* テキストを直接置くと無名フレックスアイテムになり z-index を持てない。
           内部にスタッキングコンテキストを作り、地紋を z-index:-1 に落とす */
        isolation: isolate;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        height: 120px;
        margin: 0;
        padding: 16px 24px;
        background-color: #fff;
        overflow: hidden;
        font-family: var(--spain-font-ja);
        font-weight: 600;
        font-size: 18px;
        line-height: 1.5;
        letter-spacing: 0.08em;
        color: var(--spain-black);
        white-space: nowrap;

        /* 右下の地紋（カードより少し小さい） */
        &::before {
            content: '';
            position: absolute;
            inset-block-end: 0.83px;
            inset-inline-end: -1px;
            display: block;
            width: 136px;
            height: 210px;
            background-image: url('/images/kaori-muraji/deco-ornament.png');
            background-size: 136px 210px;
            background-repeat: no-repeat;
            transform: scaleY(-1);
            opacity: 0.15;
            pointer-events: none;
            z-index: -1;
        }
    }

    /* 「／」。12×20.785 は24pxの線を30°傾けた外接矩形なので対角線を引く */
    & .spain-series-row-slash {
        display: block;
        flex: none;
        width: 12px;
        height: 20.785px;
        background-image: linear-gradient(to bottom right,
                transparent calc(50% - 0.5px), var(--spain-black) calc(50% - 0.5px),
                var(--spain-black) calc(50% + 0.5px), transparent calc(50% + 0.5px));
    }

    /* ==================== PC ==================== */
    @media only screen and (min-width: 769px) {
        padding-block-start: 71px;
        padding-inline: 0;

        /* Figmaの見出し枠はリード文の幅(675px)。音符と筆記体はこの枠が基準なので、
           1024px にすると右に174.5pxずれる。内容幅にして中央寄せする。 */
        & .spain-series-head {
            width: fit-content;
            margin-inline: auto;
            gap: 24px;
        }

        & .spain-series-lead {
            font-size: 20px;
            line-height: 2.2;
        }

        & .spain-series-title {
            padding-block-end: 12px;
        }

        & .spain-series-title-main {
            font-size: 40px;
        }

        & .spain-series-title-count {
            font-size: 30px;
            letter-spacing: 0.068em;

            & span:nth-child(2) {
                font-size: 34px;
            }
        }

        & .spain-series-note {
            inset-inline-end: -50px;
            inset-block-start: -26px;
            width: 44px;
            height: 53px;
        }

        /* 筆記体はPCのみ表示。左に寄せて16.32度傾ける。
           inset は回転前のボックスに効くが、Figmaが返すのは回転後の外接矩形なので
           両軸とも「外接矩形の中心」を指定して translate で半分戻す（落とし穴20の手法）。
           外接 115.544×82.963 / 回転前 104×56 → 中心 (94.61, 93.76)。
           縦を外接上端 52.29px のまま inset に入れると、回転で外接が
           (82.963−56)/2 = 13.5px ぶん上へ膨らむため Figma より13.5px高く出る。 */
        & .spain-series-script {
            position: absolute;
            inset-inline-start: 94.61px;
            inset-block-start: 93.76px;
            display: block;
            translate: -50% -50%;
            rotate: -16.32deg;
            font-family: 'Alex Brush', cursive;
            font-size: 28px;
            line-height: 1;
            letter-spacing: 0.08em;
            color: var(--spain-black);
            text-align: center;
            white-space: nowrap;
        }

        & .spain-series-list {
            max-width: 1024px;
            margin-inline: auto;
            margin-block-start: 48px;
        }

        /* --- カードは横並びに --- */
        & .spain-series-card {
            flex-direction: row;
            align-items: center;
            gap: 0;
            /* 左端はタブが接するのでパディングなし */
            padding: 16px 24px 16px 0;

            &::before {
                inset-block-end: -1.17px;
                inset-inline-end: -3px;
                width: 136px;
                height: 210px;
                background-size: 136px 210px;
            }
        }

        & .spain-series-card-left {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            flex: none;
            width: 420.5px;
            margin-inline-end: 40px;
        }

        /* PCではタブが見出しの左に並ぶ横長の旗 */
        & .spain-series-card-tab {
            position: static;
            flex: none;
            width: 42px;
            height: 17px;
            margin-block-start: 4px;
            transform: none;
        }

        & .spain-series-card-body {
            flex: 1 0 0;
            min-width: 0;
            gap: 8px;
            width: auto;
        }

        & .spain-series-card-title {
            font-size: 20px;
        }

        & .spain-series-card-note {
            inset-inline-start: 391px;
            inset-block-start: calc(50% - 19.83px);
        }

        /* PCは都市写真だけが並び、人物は絶対配置 */
        & .spain-series-card-photos {
            display: contents;
        }

        & .spain-series-card-photo {
            width: 313px;
            height: 163px;
            margin-inline-end: 24px;
        }

        & .spain-series-card-person {
            position: absolute;
            inset-block-end: -2.17px;
            /* Figmaはカード外形基準の370px。絶対配置は枠線の内側が基準なので2px引く */
            inset-inline-start: 368px;
            z-index: 1;
        }

        & .spain-series-card-btn {
            flex: none;
            width: auto;
            margin-inline-start: auto;
            padding-inline: 24px;

            /* PCの矢印は文字の右に並ぶ */
            &::after {
                position: static;
                translate: none;
            }
        }

        /* --- 未公開の帯 --- */
        & .spain-series-item--unreleased .spain-series-row {
            height: 199px;
        }

        & .spain-series-item--unreleased .spain-series-row {
            font-size: 20px;
        }
    }
}

/* ------------------------------
 ⑧ Column（特集に関する記事）
------------------------------ */
.spain-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    margin-block-start: 56px;
    padding-inline: 15px;

    /* --- 見出し --- */
    & .spain-column-title {
        position: relative;
        margin: 0;
        padding-inline: 16px;
        padding-block-end: 8px;
        border-block-end: 1px dashed var(--spain-main);
        font-family: var(--spain-font-ja);
        font-weight: 600;
        font-size: 24px;
        line-height: 1.5;
        letter-spacing: 0.08em;
        color: var(--spain-main);
        text-align: center;
        white-space: nowrap;
    }

    /* 筆記体の「Column」 */
    & .spain-column-script {
        position: absolute;
        inset-inline-start: 61.38px;
        inset-block-start: -16.47px;
        translate: -50% 0;
        rotate: -15deg;
        font-family: 'Alex Brush', cursive;
        font-weight: 400;
        font-size: 18px;
        line-height: 1;
        letter-spacing: 0.08em;
        color: var(--spain-black);
    }

    /* --- 記事リスト --- */
    & .spain-column-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    & .spain-column-item {
        padding-block-end: 16px;
        border-block-end: 1px solid #CBCBCB;
    }

    & .spain-column-link {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        text-decoration: none;

        /* リンクのどこにホバーしても、サムネとタイトルの両方が反応する */
        &:hover {
            & .spain-column-thumb {
                opacity: 0.8;
            }

            & .spain-column-name {
                text-decoration: underline;
            }
        }
    }

    /* 画像は <figure> で包む。フレックスアイテムは figure 側 */
    & .spain-column-figure {
        flex: none;
        width: 100px;
        height: 100px;
        margin: 0;
    }

    & .spain-column-thumb {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.3s ease;
    }

    & .spain-column-txt {
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        align-self: stretch;
        gap: 4px;
        min-width: 0;
        padding-block: 4px;
    }

    /* 日付だけサイト共通の Roboto Condensed */
    & .spain-column-date {
        font-family: 'Roboto Condensed', sans-serif;
        font-weight: 500;
        font-size: 13px;
        line-height: 1.2;
        letter-spacing: 0.05em;
        color: #AAA;
    }

    & .spain-column-name {
        margin: 0;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 500;
        font-size: 14px;
        line-height: 1.3;
        letter-spacing: 0.05em;
        color: #000;
    }

    /* ==================== PC ==================== */
    @media only screen and (min-width: 769px) {
        gap: 48px;
        margin-block-start: 96px;
        padding-inline: 0;

        & .spain-column-title {
            padding-block-end: 12px;
            font-size: 34px;
        }

        /* PCは見出し枠の左内側に置く（translateなし） */
        /* Figmaの外接ボックス122.66pxから逆算して36px */
        & .spain-column-script {
            inset-inline-start: 13px;
            inset-block-start: -12.37px;
            translate: none;
            font-size: 36px;
        }

        & .spain-column-list {
            width: 900px;
            gap: 16px;
        }

        & .spain-column-link {
            gap: 24px;
        }

        & .spain-column-figure {
            width: 180px;
            height: 120px;
        }

        & .spain-column-txt {
            gap: 10px;
            padding-block: 8px;
        }

        & .spain-column-date {
            font-size: 15px;
        }

        & .spain-column-name {
            font-size: 16px;
            color: var(--spain-black);
        }
    }
}

/* ------------------------------
 ⑨ バナー（阪急交通社＝外部サイト）
------------------------------ */
.spain-banner {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin-block-start: 48px;
    margin-inline: 15px;
    overflow: hidden;
    /* --spain-yellow(#FAE850) ではなく琥珀色 */
    background-color: #FFBF00;
    color: #000;
    /* text-decoration: none はホバー時も維持する（下線は出さない） */
    text-decoration: none;
    transition: opacity 0.3s ease;

    &:hover {
        opacity: 0.8;
    }

    /* 写真は絶対配置。flexアイテムのままだと width/height 属性由来の
       縦横比(1:1)が優先されて正方形になり、バナーが縦に伸びてしまう。 */
    & .spain-banner-photo {
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        display: block;
        width: 150px;
        height: 100%;
        object-fit: cover;
    }

    & .spain-banner-txt {
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
        margin-inline-start: 150px;
        padding: 15px 15px 10px;
    }

    & .spain-banner-lead {
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 700;
        font-size: 14px;
        line-height: 1.4;
        letter-spacing: 0.05em;
    }

    & .spain-banner-note {
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: 9px;
        line-height: 1.3;
        text-align: right;
    }

    @media only screen and (min-width: 769px) {
        width: 644px;
        margin-block-start: 80px;
        margin-inline: auto;

        height: 140px;

        & .spain-banner-photo {
            width: 320px;
        }

        /* PCは注意書きを下端に張り付ける */
        & .spain-banner-txt {
            justify-content: space-between;
            gap: 0;
            margin-inline-start: 320px;
            padding: 20px 20px 10px;
        }

        & .spain-banner-lead {
            font-size: 16px;
            letter-spacing: 0.05em;
        }

        & .spain-banner-note {
            font-size: 12px;
        }
    }
}

/* ------------------------------
 ⑩ スペイン特集TOPへ戻る（記事ページ）
 ---
 Figma の寸法は SP 345×64 / PC 440×66。
 矢印素材は「>」しか無いので180°回して「<」にする。
------------------------------ */
.spain-back {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* .spain-lower に padding-inline が無いので、本文幅(345px)に合わせて自分で持つ */
    margin-block-start: 48px;
    margin-inline: 15px;
    /* Figmaの上下20pxパディング。16px × 1.5 = 24px の行と合わせて高さ64pxになる */
    padding: 20px;
    border-radius: 4px;
    background-color: var(--spain-main-light);
    font-family: var(--spain-font-ja);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-align: center;
    text-decoration: none;
    color: #fff;
    white-space: nowrap;
    transition: opacity 0.3s ease;

    &:hover {
        opacity: 0.8;
    }

    /* 左端の「<」。maskなので background-color で色を変えられる。 */
    &::before {
        content: '';
        position: absolute;
        inset-inline-start: 16.5px;
        inset-block-start: calc(50% - 0.5px);
        display: block;
        width: 7.5px;
        height: 15px;
        translate: 0 -50%;
        rotate: 180deg;
        background-color: #fff;
        -webkit-mask: url('/images/kaori-muraji/arrow-right.svg') no-repeat center / contain;
        mask: url('/images/kaori-muraji/arrow-right.svg') no-repeat center / contain;
    }

    @media only screen and (min-width: 769px) {
        width: 440px;
        margin-block-start: 80px;
        margin-inline: auto;
        font-weight: 700;
        font-size: 17px;
    }
}

/* ------------------------------
 ⑪ 公式アカウント（Instagram / YouTube）
 ---
 ⑩ ボタンの下に置く新規セクション（2026-09-02 追加）。
 Figma の寸法は SP 345×473 / PC 727×299。
 背景は .spain-lower のピンク（--spain-bg01）をそのまま使う。
 アイコンPNGはノード書き出しのため背景ピンクが焼き込まれているが、
 この背景色の上でしか使わないため見た目に影響しない（落とし穴4b）。
 「— Muraji Kaori —」は体裁がプロフィール欄と同一なので
 HTML側で .spain-profile-name-en を流用している。
------------------------------ */
.spain-official {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    /* ⑩ ボタンと同じリズム（バナー→ボタンも 48px / 80px） */
    margin-block-start: 48px;
    /* .spain-lower に padding-inline が無いので本文幅(345px)に合わせる */
    margin-inline: 15px;

    @media only screen and (min-width: 769px) {
        gap: 40px;
        /* Figma: 本文幅1024pxの中央に727px */
        width: 727px;
        margin-block-start: 80px;
        margin-inline: auto;
    }
}

.spain-official-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    width: 100%;

    @media only screen and (min-width: 769px) {
        /* Figma: リード1行ぶんの幅（484px）で中央寄せ */
        width: auto;
    }
}

.spain-official-name {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 「村治 佳織」。プロフィール欄（SP32px / PC48px）とはサイズが違うので別指定。 */
.spain-official-name-ja {
    margin: 0;
    font-family: var(--spain-font-ja);
    font-weight: 400;
    font-size: 36px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    color: var(--spain-black);
    white-space: nowrap;

    & span {
        color: var(--spain-main);
    }

    @media only screen and (min-width: 769px) {
        font-size: 40px;
    }
}

/* 「Instagram、YouTubeの公式アカウントはこちらから」。SPは2行・PCは1行。 */
.spain-official-lead {
    width: 100%;
    margin: 0;
    font-family: var(--spain-font-ja);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.6;
    letter-spacing: 0.08em;
    text-align: center;
    color: var(--spain-black);

    @media only screen and (min-width: 769px) {
        width: auto;
        font-size: 18px;
        white-space: nowrap;
    }
}

.spain-official-accounts {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    width: 100%;

    @media only screen and (min-width: 769px) {
        flex-direction: row;
        gap: 32px;
        align-items: flex-start;
        justify-content: center;
        width: auto;
    }
}

.spain-official-account {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--spain-black);

    /* hover時にロゴ（Instagram / YouTube）は透過させない。
       opacity は親に掛けると子側の指定では戻せないため、
       リンク全体ではなく文字だけに掛ける。 */
    &:hover .spain-official-txt {
        opacity: 0.8;
    }
}

.spain-official-icon {
    display: block;
    height: auto;
}

/* Instagram側。SPは下に、PCは右に赤の破線が入る（Figma: border-dashed #d1535d 1px）。 */
.spain-official-account--ig {
    gap: 16px;
    width: 100%;
    padding-block-end: 24px;
    border-block-end: 1px dashed var(--spain-main);

    & .spain-official-icon {
        width: 50px;
    }

    @media only screen and (min-width: 769px) {
        /* Figma: 内容331px ＋ 右padding32px ＋ 罫線1px ＝ 364px（border-box） */
        width: 364px;
        padding-block-end: 0;
        padding-inline-end: 32px;
        border-block-end: none;
        border-inline-end: 1px dashed var(--spain-main);
    }
}

.spain-official-account--yt {
    gap: 24px;

    & .spain-official-icon {
        width: 65px;
    }
}

.spain-official-txt {
    transition: opacity 0.3s ease;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.08em;
    text-align: center;
    white-space: nowrap;

    @media only screen and (min-width: 769px) {
        font-size: 16px;
    }
}


/*==============================
index.html
==============================*/
.spain-index {}


/*==============================
article02.html ／ Vol.2「バルセロナ」固有
==============================*/
.spain-series02 {

    /* MVの各指定は基底（.spain-mv-article 配下）と詳細度が並ぶため、
       .spain-mv-article を挟んで1段上げ、順序に依存せず勝たせる。 */
    & .spain-mv-article {

        /* --- 「Barcelona /spain」 ---
           Vol.1の「Madrid」は22px、Vol.2の「Barcelona」は24px。
           行高が 33px → 36px に変わり、以降の要素の位置が3px下がる。 */
        & .spain-mv-article-city span {
            font-size: 24px;

            /* 詳細度を1段上げたぶん基底のPC指定(30px)まで打ち消してしまうので再宣言する。
               PCは Vol.1 と同じ30px（Figma: 616×45）。 */
            @media only screen and (min-width: 769px) {
                font-size: 30px;
            }
        }

        /* --- 記事タイトル（Vol.1と行数・インク幅が違うため上書き） ---
           SP: 仕様345×60（20px × 1.5 × 2行）に対し画像インク343.5×49。
               差11pxを上下に配分＝上5px（基底の margin をそのまま使う）。
           PC: 仕様476×78（26px × 1.5 × 2行）。Vol.1は1行（616×39）なので枠ごと上書きする。
               画像にはグローぶんの透明余白が左8.5px／上8px残るため、
               文字のインク左端を枠の左端に合わせて戻す。 */
        & .spain-mv-article-headline {
            & img {
                width: 343.5px;
            }

            @media only screen and (min-width: 769px) {
                width: 476px;
                height: 78px;

                & img {
                    width: 483.5px;
                    margin-block-start: -0.5px;
                    margin-inline-start: -8.5px;
                }
            }
        }

        /* --- テキスト列の位置 ---
           Figma: Frame 3 は body 上端から 71.5px（Vol.1は 110.5px）。
           記事タイトルが1行→2行になった39pxぶん列全体が上がり、
           結果として列の下端が写真の下端（520px）に揃う。 */
        & .spain-mv-article-textcol {
            @media only screen and (min-width: 769px) {
                margin-block-start: 71.5px;
            }
        }

        /* --- 黄色マーカー帯 ---
           文字はモリサワ A-OTF UD黎ミン Pro M（Web配信なし）のため画像。
           帯の両端の台形（Figma: M0 0H9L5 27H0V0Z）と傾きはCSSで再現する。
           傾きはFigmaが数値を返さないので、両端台形の外接矩形から逆算した -7°。
           SPは3本・PCは2本で改行位置が違うため、DOMを分けてCSSで出し分ける。
           left/top は回転前の枠の左上（Figmaの外接矩形の中心から逆算した値）。 */
        & .spain-mv-markers {
            position: absolute;
            z-index: 2;
            display: none;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            margin: 0;
            transform: rotate(-7deg);
        }

        & .spain-mv-marker {
            display: flex;
            align-items: stretch;

            & img {
                display: block;
            }
        }

        /* 帯の両端の台形。左端は右端を180°回した形。 */
        & .spain-mv-marker-end {
            flex: none;
            width: 9px;
            background-color: var(--spain-yellow);
        }

        & .spain-mv-marker-end--l {
            clip-path: polygon(44.444% 0, 100% 0, 100% 100%, 0 100%);
        }

        & .spain-mv-marker-end--r {
            clip-path: polygon(0 0, 100% 0, 55.556% 100%, 0 100%);
        }

        /* SP（3本） */
        & .spain-mv-markers--sp {
            display: flex;
            inset-inline-start: 8.5px;
            inset-block-start: 22.6px;
            width: 214px;

            & .spain-mv-marker,
            & .spain-mv-marker img {
                height: 24px;
            }

            & .spain-mv-marker--1 img {
                width: 196px;
            }

            & .spain-mv-marker--2 {
                margin-inline-start: 8px;
            }

            & .spain-mv-marker--2 img {
                width: 120px;
            }

            & .spain-mv-marker--3 {
                margin-inline-start: 16px;
            }

            & .spain-mv-marker--3 img {
                width: 120px;
            }

            @media only screen and (min-width: 769px) {
                display: none;
            }
        }

        /* PC（2本） */
        & .spain-mv-markers--pc {
            @media only screen and (min-width: 769px) {
                display: flex;
                inset-inline-start: 18.5px;
                inset-block-start: 183.3px;
                width: 344px;

                & .spain-mv-marker,
                & .spain-mv-marker img {
                    height: 27px;
                }

                & .spain-mv-marker--1 img {
                    width: 249px;
                }

                & .spain-mv-marker--2 {
                    margin-inline-start: 24px;
                }

                & .spain-mv-marker--2 img {
                    width: 302px;
                }
            }
        }
    }

    /* --- ⑤ 本文 ---
       見出し・段落・カメラ・SPのギターはVol.1と位置も寸法も同一なので上書き不要。
       違うのは「段落が2つに分かれた」「写真1枚目が210px幅」「PCのギターが8px下」の3点。 */
    & .spain-body-article {

        /* Vol.1は段落1つ。Vol.2は2つで、Figmaの間隔は8px。 */
        & .spain-body-article-paragraph p + p {
            margin-block-start: 8px;
        }

        /* 写真列。Vol.1は2枚とも列幅いっぱいだが、Vol.2の1枚目は210×276の縦位置。
           Figmaは SP が items-center（中央寄せ）、PC が左寄せ。 */
        & .spain-body-article-photos {
            align-items: center;
        }

        & .spain-body-article-figure {
            width: 100%;
        }

        & .spain-body-article-figure--narrow {
            width: 210px;
        }

        @media only screen and (min-width: 769px) {
            & .spain-body-article-photos {
                align-items: flex-start;
            }

            /* ギターはVol.1より8px下。
               Figma: inner上端から312px、段落は135px なので 312-135=177px。 */
            & .spain-body-article-guitar {
                inset-block-start: 177px;
            }
        }
    }

    /* --- ⑤-c 思い出の曲 ---
       枠・カード・見出し・本文・ジャケット・丸型写真・吹き出し・「#思い出の曲」手書きは
       位置も寸法もVol.1と同一なので上書き不要（手書きは right61/top-33/180×60）。
       違うのは「ギターの寸法と回転角」と「PCの音符の位置」の2点。 */
    & .spain-song {

        /* ギター。Vol.1は 42.355×110.491 を 19.78°、Vol.2は 42.249×116.283 を 30° 回す。
           素材も別物（Vol.1 img-EBP15-12027.png / Vol.2 BP26-027659）。
           Vol.1と同じく「中心座標に置いてから幅・高さの半分を負マージンで戻す」方式。
           中心は Figma の外接矩形 SP(left -17.06 / top -49.59 / 94.73×121.829) から算出。 */
        & .spain-song-guitar {
            inset-inline-start: 30.305px;
            inset-block-start: calc(50% - 21.676px);
            width: 42.249px;
            height: 116.283px;
            margin-inline-start: -21.125px;
            margin-block-start: -58.142px;
            rotate: 30deg;
            background-image: url('/images/kaori-muraji/02/img-guitar-song.png');
            background-size: 42.249px 116.283px;
        }

        /* 吹き出しは上書き不要。Figma座標が Vol.1 と完全に同一
           （left 199.878 / top -7.179 / 127.192×78.192）で、基底が正しい値を持つ。 */

        @media only screen and (min-width: 769px) {
            /* 音符はVol.1より14px右（Figma: left 350px／Vol.1は 336px） */
            & .spain-song-note {
                inset-inline-start: 350px;
            }

            /* PC: 外接矩形 left -20 / top -68 / 109.935×141.413 → 中心 (34.968, 2.707)。
               head の高さは 73px なので top は calc(50% - 33.794px)。 */
            & .spain-song-guitar {
                inset-inline-start: 34.968px;
                inset-block-start: calc(50% - 33.794px);
                width: 49px;
                height: 135px;
                margin-inline-start: -24.5px;
                margin-block-start: -67.5px;
                background-size: 49px 135px;
            }
        }
    }
}


/*==============================
article03.html ／ Vol.3「バレンシア」固有
==============================*/
.spain-series03 {

    /* MVの各指定は基底（.spain-mv-article 配下）と詳細度が並ぶため、
       .spain-mv-article を挟んで1段上げ、順序に依存せず勝たせる。
       ※ 詳細度を上げた宣言は、基底が別ブレークポイントで持つ値も必ず再宣言する
         （落とし穴15。上書きが別BPの指定まで打ち消すため）。 */
    & .spain-mv-article {

        /* 「Valencia /spain」は Vol.1 と同値（SP 22px / PC 30px）なので上書き不要。
           寸法は SP 345×33 / PC 448×45。Vol.2 だけが SP 24px。 */

        /* --- リード枠 ---
           Figma の Frame 45 は Vol.1/Vol.2 が 616px、Vol.3 は 448px。
           記事タイトル画像（457.5px）は枠から 9.5px はみ出す（Vol.2 も同様の作り）。 */
        & .spain-mv-article-lead {
            @media only screen and (min-width: 769px) {
                width: 448px;
            }
        }

        /* --- 記事タイトル（インク幅と PC の行数が Vol.1 と違う） ---
           SP: 仕様345×60（20px × 1.5 × 2行）に対し画像インク330.5×49。
               上5pxの配分は基底のまま使える。
           PC: 仕様448×78（26px × 1.5 × 2行）。Vol.1は1行（616×39）なので枠ごと上書きする。
               書き出し画像にはグローぶんの透明余白が上下左右14px残るため、
               インク左端を枠の左端に、インク上端を枠から7.5px（(78−63)÷2）に戻す。
               白グロー自体は基底の filter: drop-shadow で描く。 */
        & .spain-mv-article-headline {
            & img {
                width: 330.5px;

                @media only screen and (min-width: 769px) {
                    width: 457.5px;
                    margin-block-start: -6.5px;
                    margin-inline-start: -14px;

                    /* 白グローは画像に半透明で含まれている（Figmaの5枚重ねの text-shadow を
                       そのまま持つ書き出し）。基底の drop-shadow と二重掛けになるため切る。 */
                    filter: none;
                }
            }

            @media only screen and (min-width: 769px) {
                width: 448px;
                height: 78px;
            }
        }

        /* --- テキスト列の位置 ---
           Figma: Frame 3 は body 上端から 102.5px（Vol.1 110.5px / Vol.2 71.5px）。
           記事タイトルが2行になったぶん Vol.1 より 8px 上がる。 */
        & .spain-mv-article-textcol {
            @media only screen and (min-width: 769px) {
                margin-block-start: 102.5px;
            }
        }

        /* --- 「#大好きな街」手書き文字 ---
           SPだけ写真上端からの距離が違う（Vol.1 29px → Vol.3 17px）。
           PCは Vol.1 と同じ 35px なので、詳細度を上げたぶんを再宣言して戻す。
           素材（txt-handwriting.svg）は Vol.1/Vol.2 と md5 一致。 */
        & .spain-mv-article-handwriting {
            inset-block-start: 17px;

            @media only screen and (min-width: 769px) {
                inset-block-start: 35px;
            }
        }

        /* --- MV写真 ---
           PCの光のグラデーション
           （linear-gradient(267.744deg, rgba(255,255,255,0) 79.498%, rgba(255,255,255,.4) 96.345%)）は
           **画像に焼き込み済み**なのでCSSでは足さない。
           Vol.3 の原本は CMYK＋大きなICCプロファイル付きJPEGで、Chrome と Figma で
           色変換が食い違う（平均色差 約20）。そのため写真は raw ではなく
           Figma のノード書き出しを素材にしており、
           書き出しにはグラデーションのフィルが含まれる。
           → グラデーションを変更するときは画像を再書き出しすること。 */
    }

    /* --- ⑤ 本文 ---
       見出し・ラベル・段落の位置・SPのカメラ・SPのギターは Vol.1 と同値なので上書き不要
       （SPカメラ 69×64 @top-39.5/left272、SPギター 240×432 @top432.5/left135 とも一致）。
       Vol.3 で違うのは4点。 */
    & .spain-body-article {

        /* ① 段落が2つ（Vol.1は1つ）。Figmaの間隔は8px。 */
        & .spain-body-article-paragraph p + p {
            margin-block-start: 8px;
        }

        /* キャプションの末尾字送りを詰める。
           CSSは最終文字の後にも letter-spacing を入れるため、2枚目のキャプションは
           2行目に必要な幅が 348.6px となり枠348pxに 0.6px 足りず3行に割れていた
           （さらに行末が「氏。」になり禁則で2文字まとめて次行へ送られる）。
           末尾1文字ぶん（0.08em＝0.96px）を負マージンではみ出させて容量を戻す。
           基底の `.spain-song-balloon span { margin-inline-end: -4px }` と同じ手法。
           SPは枠が345pxなので3行のまま（Figmaは348px前提。ARCHIVE 落とし穴24）。 */
        & .spain-body-article-figure figcaption {
            margin-inline-end: -0.08em;
        }

        /* ② 写真1枚目が 210×276 の縦位置（Vol.2と同じ）。
           Figmaは SP が中央寄せ、PC が左寄せ。2枚目は列幅いっぱい（348px）。 */
        & .spain-body-article-photos {
            align-items: center;
        }

        & .spain-body-article-figure {
            width: 100%;
        }

        & .spain-body-article-figure--narrow {
            width: 210px;
        }

        @media only screen and (min-width: 769px) {
            & .spain-body-article-photos {
                align-items: flex-start;
            }

            /* ③ PCのカメラが右へ32px（Vol.1/Vol.2 は left416）。上は同じ20px。
               Figma のカメラは本文セクションの**外**、さらに親の
               「コンテンツ」フレーム直下にあり (586, 84) で返る（落とし穴16の変種）。
               本文セクションはそのフレーム内の (138, 64) なので、本文基準では
               (586−138, 84−64) = (448, 20)。 */
            & .spain-body-article-camera {
                inset-inline-start: 448px;
            }

            /* ④ PCのギターが Vol.1 より78px下（Vol.1 169px / Vol.2 177px）。
               Figma のギターは本文フレーム基準で (-88, 382)。
               CSSは段落（上端135px）基準なので 382 − 135 = 247px。左は Vol.1 と同じ -88px。 */
            & .spain-body-article-guitar {
                inset-block-start: 247px;
            }
        }
    }

    /* --- ⑤-c 思い出の曲 ---
       枠・カード・リード・本文・ジャケット枠・丸型写真・吹き出し・
       「#思い出の曲」手書き（SP right24/top-27、PC right61/top-33）・タイル背景は
       Vol.1/Vol.2 と同一なので上書き不要。
       Vol.3 で違うのは「曲名にルビが付いた（SPは2行になる）」「PCの音符の位置」
       「ギターが Vol.2 と同じ素材・角度（基底のVol.1とは別）」の3点。 */
    & .spain-song {

        /* --- 曲名のルビ「きしん」 ---
           Figma では曲名に重ねた別テキストで、
           Shippori Mincho Bold 10px・字送り0.8px・色は曲名と同じ #ef9037。
           行の高さを変えずに同じ見た目にするため rt を絶対配置する
           （通常のルビは行送りを押し広げてしまい、Figmaの見出し高さ 96px/73px と合わない）。
           位置はベース文字（貴紳）の中央上。SP/PCとも文字のインク上端にちょうど乗る。 */
        & .spain-song-title {
            & ruby {
                position: relative;
            }

            & rt {
                position: absolute;
                inset-inline-start: 50%;
                inset-block-end: 100%;
                translate: -50% 0;
                margin-block-end: -6px;
                width: max-content;
                font-size: 10px;
                line-height: 1;
                letter-spacing: 0.08em;
                white-space: nowrap;
            }

            @media only screen and (min-width: 769px) {
                & rt {
                    /* PCはベース文字（貴紳）の字送りが1文字ぶん多く入るぶん中心が右へ
                       約1.5pxずれるので、その量だけ戻す（CSSは最終文字の後にも
                       letter-spacing を入れるため。落とし穴26と同じ理屈）。 */
                    translate: calc(-50% - 1.5px) 0;
                    margin-block-end: -6px;
                }
            }
        }

        /* --- ギター ---
           Figma の値は Vol.2 と完全に同一（SP 41.083/-49.592/94.730×121.829、
           PC 47.5/-68/109.935×141.413）。素材も同じ BP26-027659。
           Figmaのx/yは「回転後の原点コーナー」なので外接矩形の左上に直してから
           中心を出す（落とし穴20）:
             SP 外接left = 41.083 − 116.283·sin30° = −17.06 → 中心x = −17.06 + 94.730/2 = 30.305
                外接top  = −49.592               → 中心y = −49.592 + 121.829/2 = 11.322
           中心に置いてから幅・高さの半分を負マージンで戻す。
           基底（Vol.1）は素材も角度（19.78°）も別なので全項目上書きする。
           ※ Vol.2 は 50% 起点で書いていたが、Vol.3 はSPの見出しが2行で高さが変わる
             （66px → 96px）ため、絶対値で指定する。 */
        & .spain-song-guitar {
            inset-inline-start: 30.305px;
            inset-block-start: 11.322px;
            width: 42.249px;
            height: 116.283px;
            margin-inline-start: -21.125px;
            margin-block-start: -58.142px;
            rotate: 30deg;
            background-image: url('/images/kaori-muraji/03/img-guitar-song.png');
            background-size: 42.249px 116.283px;
        }

        @media only screen and (min-width: 769px) {
            /* 音符は Vol.1 336px / Vol.2 350px → Vol.3 は 446px（Figma の x=446） */
            & .spain-song-note {
                inset-inline-start: 446px;
            }

            /* PC: 外接left = 47.5 − 135·sin30° = −20 → 中心x = −20 + 109.935/2 = 34.968
                   外接top  = −68               → 中心y = −68 + 141.413/2 = 2.707 */
            & .spain-song-guitar {
                inset-inline-start: 34.968px;
                inset-block-start: 2.707px;
                width: 49px;
                height: 135px;
                margin-inline-start: -24.5px;
                margin-block-start: -67.5px;
                background-size: 49px 135px;
            }
        }
    }
}


/*==============================
article04.html ／ Vol.4「カンポ・デ・クリプターナ」固有
==============================*/
.spain-series04 {

    /* MVの各指定は基底（.spain-mv-article 配下）と詳細度が並ぶため、
       .spain-mv-article を挟んで1段上げ、順序に依存せず勝たせる。
       ※ 詳細度を上げた宣言は、基底が別ブレークポイントで持つ値も必ず再宣言する
         （落とし穴15。上書きが別BPの指定まで打ち消すため）。 */
    & .spain-mv-article {

        /* --- 「Campo de Criptana El Toboso /spain」 ---
           都市名が長いぶん文字が小さい（SP 18px / PC 26px。Vol.1/Vol.3 は 22px / 30px）。
           Figma は都市名と「/spain」の間に SP 22px / PC 26px のスペースを置いていて、
           これが行の高さ（SP 33px / PC 39px）を決めている。
           そこで p 自身の font-size でその行の高さを作り（＝strut）、
           都市名と「/spain」は個別に指定する。
           p を基底の 14px のままにすると行が 27px に縮み、
           記事タイトル以下すべてが 6px 上がってしまう。 */
        & .spain-mv-article-city {
            font-size: 22px;
            /* 字送りは基底の絶対値 1.92px から **em（フォントサイズ比）** に変える。
               Figma は都市名の字送りをサイズ比で入れているため、
               サイズ違いの span に同じ絶対値をかけると合わない。
               とくに SP の都市名は 18px と小さく、1.92px では必要幅が 353.6px になって
               345px 枠に収まらず折り返す（行が 33→66px になり以下すべてが 30px 下がる）。
               ピクセル差分で 1.92px / 0.08em / 1.85px を比較した実測値:
                 SP 都市名  1.92px → 11.10 ／ 0.08em → 1.28
                 PC 都市名  1.92px → 12.60 ／ 0.08em → 4.49 ／ 1.85px → 14.01
               → 両ブレークポイントとも 0.08em が最良。
               ※ letter-spacing の em は**指定した要素の font-size で解決**され、
                 子は計算済みの絶対値を継承する。サイズ違いの span ごとに効かせるため
                 p と span の両方に書く必要がある
                 （SP 18px→1.44px / 14px→1.12px、PC 26px→2.08px / 16px→1.28px）。 */
            letter-spacing: 0.08em;

            & span {
                font-size: 18px;
                letter-spacing: 0.08em;
            }

            & .spain-mv-article-city-suffix {
                font-size: 14px;
            }

            @media only screen and (min-width: 769px) {
                font-size: 26px;

                & span {
                    font-size: 26px;
                }

                & .spain-mv-article-city-suffix {
                    font-size: 16px;
                }
            }
        }

        /* --- リード枠 ---
           Figma の Frame 45 は Vol.1/Vol.2 が 616px、Vol.3 が 448px、Vol.4 は 504px。 */
        & .spain-mv-article-lead {
            @media only screen and (min-width: 769px) {
                width: 504px;
            }
        }

        /* --- 記事タイトル（SPが3行・PCが2行） ---
           SP: 仕様 345×90（20px × 1.5 × 3行）に対し画像のインクは 253.5×78.5。
               差 11.5px を上下に配分して上 5.75px。
           PC: 仕様 504×78（26px × 1.5 × 2行）に対し画像のインクは 502.5×63.5。
               差 14.5px を上下に配分して上 7.25px。
           書き出しに焼き込まれていた白グローは素材づくりの段階で落としてあるので、
           グローは基底の filter: drop-shadow がそのまま描く
           （画像にグローが残っていた Vol.3 は filter: none にしていた。Vol.4 は逆）。
           インク範囲でクロップ済みなので基底の負マージン（-8px）は 0 に戻す。 */
        & .spain-mv-article-headline {
            height: 90px;

            & img {
                width: 253.5px;
                margin-block-start: 5.75px;
                /* 画像はインク範囲でクロップしてあるが、Figma のインクは
                   テキスト枠の左端から左サイドベアリングぶん内側にある。
                   ずらし量はピクセル差分の最小値から 2px と実測
                   （0px だと平均色差 16.5、2px で 3.9 に落ちる）。 */
                margin-inline-start: 2px;

                @media only screen and (min-width: 769px) {
                    width: 502.5px;
                    margin-block-start: 7.25px;
                    /* PCはインク幅 502.5 と枠 504 の差が 1.5px しかなく、
                       ベアリングは 0.75px。整数では 0 が最良（実測）。 */
                    margin-inline-start: 0;
                }
            }

            @media only screen and (min-width: 769px) {
                width: 504px;
                height: 78px;
            }
        }

        /* --- テキスト列の位置 ---
           Figma: Frame 3 は body 上端から 108.5px
           （Vol.1 110.5px / Vol.2 71.5px / Vol.3 102.5px）。 */
        & .spain-mv-article-textcol {
            @media only screen and (min-width: 769px) {
                margin-block-start: 108.5px;
            }
        }

        /* --- 「#大好きな街」手書き文字 ---
           SPだけ写真上端からの距離が違う（基底29px → 17px。Vol.3 と同値）。
           PCは基底と同じ 35px なので、詳細度を上げたぶんを再宣言して戻す。
           素材は Vol.1〜Vol.3 と md5 一致。 */
        & .spain-mv-article-handwriting {
            inset-block-start: 17px;

            @media only screen and (min-width: 769px) {
                inset-block-start: 35px;
            }
        }

        /* --- MV写真 ---
           PC写真の左端にかかる白いグラデーションは**画像に焼き込み済み**なので
           CSSでは足さない。素材は raw ではなく Figma のノード書き出し
           （落とし穴21。原本がCMYKだとChromeとFigmaで色が食い違う）。
           → グラデーションを変更するときは画像を再書き出しすること。

           丸型写真・プロフィール・帯・ラベルは基底と同値なので上書き不要
           （SP 丸型 151×151 @写真上端+225/left207、PC 198×198、
             プロフィールは Vol.3 と同じ本文なので SP 246.5 / PC 266.5）。 */
    }

    /* --- ③ 連載ナビ（自回タイルのみ）---
       都市名「カンポ・デ・クリプターナ」は12文字で、Vol.1〜3 の5文字と違い1行に入らない。
       Figma も SP/PC とも「カンポ・デ・ / クリプターナ」の2行なので HTML に <br> を入れた。

       PCだけ調整が要る。基底は1行前提で padding 16px・行送り 1.5（18px → 27px）のため、
       2行にすると 16 + 21 + 54 = 91px となり 80px のタイルからはみ出して下端で切れる。
       Figma の実測に合わせて 2点だけ上書きする:
         行送り  25px（Figma の都市名 2行が 50px。1.5 の 27px では 54px になる）
         上余白  4.5px（Figma は Vol行が上端から 4.5px。16px のままだと下がはみ出す）
       → Vol行 4.5〜25.5 ／ 都市名 25.5〜75.5 で 80px に収まる（Figma と同じ）。
       SPは基底のままで Figma と一致するため上書きしない（都市名 上33.25・高さ42）。
       ※ ③ ナビのCSSは連載共通なので、他ページに影響しないよう .spain-series04 に
         スコープしている（未公開の Vol.4 の都合を Vol.1〜3 に持ち込まないため）。 */
    & .spain-nav {
        @media only screen and (min-width: 769px) {
            & .spain-nav-item--current {
                & .spain-nav-link {
                    padding-block-start: 4.5px;
                }

                & .spain-nav-city {
                    line-height: 25px;
                }
            }
        }
    }

    /* --- ⑤ 本文 ---
       Figma: SP 345×1694 / PC 1024×773
       見出しブロック・Reasonsラベル・段落の位置・SPのカメラ・SPのギターは
       基底と同値なので上書き不要
       （SPカメラ 69×64 @top-39.5/left272、SPギター 240×432 @top432.5/left135）。
       PCのカメラも Vol.3 と同じ (448, 20)。
       Vol.4 で違うのは下記4点。 */
    & .spain-body-article {

        /* ① 段落が2つ（基底は1つ）。Figma の間隔は 8px。
           さらに Vol.4 は**各段落の中に強制改行がある**（段落1に2つ・段落2に1つ）。
           改行は HTML 側の <br> で入れている（Vol.1〜Vol.3 には無かった作り）。 */
        & .spain-body-article-paragraph p + p {
            margin-block-start: 8px;
        }

        /* ② 写真1枚目が 210×276 の縦位置。
           Figma は SP が中央寄せ、PC が左寄せ。2枚目は列幅いっぱい。 */
        & .spain-body-article-photos {
            align-items: center;
        }

        & .spain-body-article-figure {
            width: 100%;
        }

        & .spain-body-article-figure--narrow {
            width: 210px;
        }

        @media only screen and (min-width: 769px) {
            & .spain-body-article-photos {
                align-items: flex-start;
            }

            /* ③ PCのカメラが右へ32px（基底は left416）。上は同じ20px。
               Figma のカメラは本文セクションの**外**、さらに親の
               「コンテンツ」フレーム直下にあり (586, 84) で返る（落とし穴25）。
               本文セクションはそのフレーム内の (138, 64) なので、本文基準では
               (586−138, 84−64) = (448, 20)。Vol.3 と同値。 */
            & .spain-body-article-camera {
                inset-inline-start: 448px;
            }

            /* ④ PCのギターの縦位置。Figma のギターは本文フレーム基準で (-88, 347)
               （Vol.1 -88/169 相当 / Vol.2 177 / Vol.3 382）。
               CSSは段落（上端135px）基準なので 347 − 135 = 212px。 */
            & .spain-body-article-guitar {
                inset-block-start: 212px;
            }
        }
    }

    /* --- ⑤-c 思い出の曲 ---
       Figma: SP `5:2347`(345×517) / PC `5:2082`(1024×281)。枠は空フレームで返る（落とし穴17）。
       曲は「粉屋の踊り」（マヌエル・デ・ファリャ）／アルバム『Spain』。
       **幾何は Vol.2 と同一**（見出し SP 66px / PC 73px）。Vol.3 は曲名にルビが付いて
       2行になり見出しが 96px だったが、Vol.4 はルビ無し・1行なので Vol.2 に戻る。
       枠・カード・リード・ジャケット枠・丸型写真・吹き出し・「#思い出の曲」手書き
       （SP 135×45 @top-27/right186、PC 180×60 @top-33/right61）は基底と同一なので上書き不要。
       本文が5行（Vol.2 は6行）なので、その下は 28px 上がる（自動）。
       Vol.4 で上書きが必要なのは「ギターの素材・寸法・回転角」と「PCの音符の位置」の2点。 */
    & .spain-song {

        /* ギター。基底(Vol.1)は 42.355×110.491 を 19.78° 回すが、
           Vol.4 は Vol.2/Vol.3 と同じ 42.249×116.283 を 30°（素材も BP26-027659）。
           Figma の値は Vol.2/Vol.3 と完全に同一
           （SP 41.083/-49.592/94.730×121.829、PC 47.5/-68/109.935×141.413）。
           「中心座標に置いてから幅・高さの半分を負マージンで戻す」方式（落とし穴20）。
           中心は外接矩形 SP(left -17.06 / top -49.59 / 94.73×121.829) から算出して (30.305, 11.322)。
           見出しの高さが SP 66px なので top は calc(50% - 21.676px)。 */
        & .spain-song-guitar {
            inset-inline-start: 30.305px;
            inset-block-start: calc(50% - 21.676px);
            width: 42.249px;
            height: 116.283px;
            margin-inline-start: -21.125px;
            margin-block-start: -58.142px;
            rotate: 30deg;
            background-image: url('/images/kaori-muraji/04/img-guitar-song.png');
            background-size: 42.249px 116.283px;
        }

        @media only screen and (min-width: 769px) {
            /* 音符は Figma の x=446（基底 336 / Vol.2 350 / Vol.3 446）。Vol.3 と同値。 */
            & .spain-song-note {
                inset-inline-start: 446px;
            }

            /* PC: 外接矩形 left -20 / top -68 / 109.935×141.413 → 中心 (34.968, 2.707)。
               見出しの高さは 73px なので top は calc(50% - 33.794px)。 */
            & .spain-song-guitar {
                inset-inline-start: 34.968px;
                inset-block-start: calc(50% - 33.794px);
                width: 49px;
                height: 135px;
                margin-inline-start: -24.5px;
                margin-block-start: -67.5px;
                background-size: 49px 135px;
            }
        }
    }
}