/* ============================================================
   p-top — TOPページ全セクション
   依存：style.css の :root CSS変数
   ============================================================ */

/* ---- 共通パーツ ---- */
.p-top__more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-default);
    text-decoration: none;
    font-feature-settings: "palt" 1;
}

.p-top__more-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background-color: var(--color-text-accent);
    flex-shrink: 0;
}

.p-top__tag {
    display: inline-block;
    background-color: var(--color-bg-subtle);
    color: var(--color-text-heading);
    border-radius: 999px;
    padding: 2px 10px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    font-feature-settings: "palt" 1;
}

/* 引用ブロック共通（"〜"スタイル） */
.p-top__quote {
    position: relative;
    width: fit-content;          /* 重要：ボックスを本文幅まで収縮させ、引用符がテキストを囲うようにする
                                    （従来は親幅いっぱいに広がり、左右の引用符がテキストから離れていた） */
    max-width: 100%;
    margin: 0 auto var(--space-xl); /* fit-contentボックスを中央寄せ */
    padding: 6px 26px;           /* 左右: 引用符が3行の外側に軽く添う余白 */
    text-align: center;
}

.p-top__quote::before {
    content: '\201C'; /* " */
    position: absolute;
    top: -2px;
    left: 2px;        /* 3行の左上に軽く添える */
    font-family: Georgia, serif; /* serif系で上品に */
    font-size: 38px;  /* 56→38px: 主張しすぎを抑える */
    font-weight: 400; /* 太くしない */
    color: var(--color-text-heading);
    line-height: 1;
}

.p-top__quote::after {
    content: '\201D'; /* " */
    position: absolute;
    bottom: -12px;
    right: 2px;       /* 3行の右下に軽く添える */
    font-family: Georgia, serif;
    font-size: 38px;  /* 56→38px */
    font-weight: 400;
    color: var(--color-text-heading);
    line-height: 1;
}

.p-top__quote-line {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500; /* 共通の引用クオートはMedium（全mvas_quote_blockセクション共通） */
    color: var(--color-text-heading);
    line-height: 1.9;
    padding-bottom: 16px;
    margin: 0;
    font-feature-settings: "palt" 1;
    text-align: center;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--color-text-heading);
    text-underline-offset: 8px;
    text-decoration-thickness: 1px;
}

/* ---- p-reason quote（Why Saipan? リードブロック） ----
   Figma準拠：ティール・破線アンダーライン・引用符・中央揃えの共通
   .p-top__quote / .p-top__quote-line スタイルをそのまま使う。
   レイアウト（中央寄せ・最大幅）だけ調整する。 */
.p-reason .p-top__quote {
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: var(--space-xl);
}

.p-top__quote-line:last-of-type {
    padding-bottom: 0;
}

/* ============================================================
   ① HERO
   ============================================================ */
.p-hero {
    position: relative;
    overflow: hidden;
    height: 600px;  /* Figma SP: 600px（100svhは使用しない） */
    min-height: 500px;
}

.p-hero__slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.p-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.p-hero__slide.is-active {
    opacity: 1;
}

.p-hero__slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.p-hero__slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.45) 100%);
}

.p-hero__slide-body {
    position: absolute;
    inset: 0;
    /* コピーは .p-hero__slide-text 側で絶対配置（SP:上中央 / PC≥1280:右上） */
}

/* 縦組みコピー（vertical_copy）は廃止。フロント未出力のためスタイル定義も削除済み */

.p-hero__slide-text {
    /* SP: 上中央寄せ（指示書#10-C 4. top 4〜8% → 6%）。ロゴは下中央へ固定配置 */
    position: absolute;
    top: 6%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    width: min(90vw, 680px); /* SP: 左右に自然な余白 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 上中央：子要素を中央寄せ */
    text-align: center;
    gap: 0; /* メイン↔サブの間隔は .p-hero__sub-copy の margin-top で制御 */
    z-index: 2;
}

.p-hero__sub-copy {
    font-family: var(--font-sans);
    font-size: 14px; /* SP */
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.7;
    margin: clamp(8px, 1.4vw, 16px) 0 0; /* メインコピー直下に配置（上方向の間隔） */
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); /* 画像上の視認性補助 */
}

.p-hero__main-copy {
    /* Figma寄せ：高級セリフ体。Webフォント Playfair Display を第一候補、OS標準セリフをフォールバック */
    font-family: "Playfair Display", "Didot", "Bodoni 72", "Bodoni 72 Display", "Times New Roman", serif;
    font-size: clamp(44px, 13vw, 82px); /* SP〜tablet基準。PC(≥1280)は専用clampへ。横に伸びすぎないよう抑制 */
    font-weight: 400;
    color: rgba(255, 255, 255, 0.82);
    line-height: 0.95;
    letter-spacing: -0.035em;
    text-transform: none; /* 入力どおり Visit SAIPAN! を表示（強制大文字化しない） */
    margin: 0;
    white-space: pre-line; /* nl2br + 改行を自然に表示 */
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.28); /* 上部配置で背景オーバーレイ外になるため、視認性補助の軽いシャドウ */
}

/* SP：375pxで1行に自然に収まるサイズ。SPは自然に折り返す */
@media (max-width: 767px) {
    .p-hero__main-copy {
        font-size: clamp(44px, 13vw, 82px);
        line-height: 0.95;
        letter-spacing: -0.03em;
        white-space: normal;
    }
}

.p-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-white);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 999px;
    padding: 8px 20px;
    width: fit-content;
    margin-top: 4px;
}

.p-hero__dots {
    position: absolute;
    bottom: var(--space-sm);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.p-hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.5);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, width 0.3s;
}

.p-hero__dot.is-active {
    background: var(--color-white);
    width: 24px;
}

.p-hero__deco-text {
    display: none; /* Figma Exportに存在しないため非表示 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-en);
    font-size: clamp(48px, 12vw, 160px);
    font-weight: 700;
    color: rgba(255,255,255,0.08);
    white-space: nowrap;
    pointer-events: none;
    margin: 0;
    letter-spacing: 0.05em;
    z-index: 1;
}

/* Hero共通ロゴ（背景画像上に固定配置） */
.p-hero__logo {
    /* SP: 下中央（指示書#10-C 4. bottom 5〜7% → 6%）。ドット(bottom約16px)より上に収まる */
    position: absolute;
    left: 50%;
    bottom: 6%;
    transform: translateX(-50%);
    width: 240px; /* SP目安: 220〜300px */
    max-width: 64%;
    z-index: 3;
    pointer-events: none;
}

.p-hero__logo img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)); /* 視認性補助 */
}

/* ============================================================
   ② NEWS
   ============================================================ */
.p-top-news {
    background: var(--color-bg-card);
    padding-block: var(--space-xl) var(--space-2xl);
}

.p-top-news__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-sm); /* SP: 20px（32pxから縮小） */
}

.p-top-news__heading {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--color-text-default);
    text-align: center;
    margin: 0 0 var(--space-lg);
    font-feature-settings: "palt" 1;
}

.p-top-news__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--color-border-default); /* Figma: 上端ボーダー */
}

.p-top-news__item {
    border-bottom: 1px solid var(--color-border-default);
}

.p-top-news__link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: var(--space-sm) 0;
    text-decoration: none;
    color: inherit;
}

.p-top-news__date {
    font-family: var(--font-en);
    font-size: 13px;
    color: var(--color-text-subtle);
    flex-shrink: 0;
}

.p-top-news__tag {
    background: var(--color-bg-subtle);
    color: var(--color-text-heading);
    border-radius: 999px; /* Figma: pill型 */
    padding: 2px 10px;
    font-size: 11px;
    font-family: var(--font-sans);
    flex-shrink: 0;
}

.p-top-news__title {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-text-default);
    font-feature-settings: "palt" 1;
    flex: 1;
}

.p-top-news__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-default);
    text-decoration: none;
    font-feature-settings: "palt" 1;
}

.p-top-news__more-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background-color: var(--color-text-accent);
    color: #fff; /* SVG矢印は stroke="currentColor"。ティール丸背景上で白に統一 */
    flex-shrink: 0;
}

/* ============================================================
   ③ WHY SAIPAN
   ============================================================ */
.p-why {
    background: var(--color-bg-default);
    padding-block: var(--space-3xl) var(--space-4xl);
}

.p-why__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-lg);
    /* 一律の中央揃えは廃止。中央揃えは大見出し（.p-why__heading）と
       引用ブロック・mapキャプションに限定し、小見出し・本文へ波及させない */
}

.p-why__deco {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-lg);
}

.p-why__deco img { height: auto; }
/* WHEREデコ(deco-where-saipan.svg)は intrinsic 97×41。max-widthでは拡大できない
   （max-widthは縮小方向のみ）。実拡大には width 指定が必須。waveは除外。 */
.p-why__deco img:not(.p-why__wave) { width: 148px; max-width: 100%; }
.p-why__wave { max-width: 80px !important; }

.p-why__heading {
    font-family: var(--font-serif);
    font-size: clamp(18px, 5vw, 26px); /* SP: 長文が画面からはみ出さないようclamp */
    font-weight: 500;
    color: var(--color-text-default);
    line-height: 1.55;
    letter-spacing: 0.03em; /* SP: letter-spacing を詰めて幅に収める */
    font-feature-settings: "palt" 1;
    text-align: center;
    margin: 0 0 var(--space-lg);
    white-space: normal; /* pre-lineをやめ自然な折り返しに */
    overflow-wrap: break-word;
}

.p-why__map-wrap {
    margin-bottom: var(--space-2xl);
    overflow: hidden;
    width: 100%;
}

.p-why__map {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
}

.p-why__map-cap {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-text-subtle);
    margin-top: 8px;
    text-align: left; /* 通常本文（mapキャプション）は左寄せ。中央は見出しと引用ブロックのみ */
}

.p-why__cards {
    display: none; /* Figma Export上に存在しないため非表示（HTML削除はしない） */
}

.p-why__card {
    position: relative;
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    aspect-ratio: 3/4;
}

.p-why__card-img {
    width: 100%;
    height: 100%;
}

.p-why__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-why__card-copy,
.p-why__card-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    background: linear-gradient(transparent, rgba(0,0,0,0.5));
    color: var(--color-white);
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 500;
}

/* ============================================================
   ④ REASON
   ============================================================ */
.p-reason {
    background: var(--color-bg-card);
    padding-block: var(--space-3xl) var(--space-4xl);
}

.p-reason__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-lg);
    text-align: center;
}

.p-reason__deco {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-lg);
}

.p-reason__deco img { max-width: 160px; height: auto; }
.p-reason__wave { max-width: 80px !important; }

.p-reason__heading-main {
    font-family: var(--font-serif);
    font-size: clamp(24px, 8.5vw, 32px); /* SP: Figma 32px に寄せて存在感UP（長文用clamp） */
    font-weight: 500;
    color: var(--color-text-default);
    line-height: 1.5;
    letter-spacing: 0.04em;
    font-feature-settings: "palt" 1;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    margin: 0 0 var(--space-lg);
}

/* 大見出しの改行（nl2brのbr）はPCでは無効化し1行表示。SPはmax-widthクエリで有効化 */
.p-reason__heading-main br { display: none; }

.p-reason__heading {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text-subtle);
    text-align: center;
    margin: var(--space-lg) 0 var(--space-2xl);
    line-height: 1.9;
    font-feature-settings: "palt" 1;
    white-space: pre-line;
}

.p-reason__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
}

/* SP: 縦積み */
.p-reason__item {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: var(--space-2xl);
    border-bottom: 1px dashed var(--color-border-default);
}

.p-reason__item-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
}

.p-reason__item-cols {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.p-reason__item-media img.p-reason__item-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--radius-md);
    display: block;
}

.p-reason__item-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
}

.p-reason__item-num {
    text-align: center;
}

.p-reason__item-num img {
    width: 48px;
    height: auto;
    margin-bottom: 4px;
}

/* 各項目見出しの改行（nl2brのbr）はPCでは無効化し1行寄り。SPはmax-widthクエリで有効化 */
.p-reason__item-heading br { display: none; }

.p-reason__item-heading {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 26px; /* SP: 32px→26px に縮小してFigmaに近づける */
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--color-text-default);
    font-feature-settings: "palt" 1;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
    margin: 0;
}

.p-reason__item-body-text {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.9;
    color: var(--color-text-default);
    margin: 0;
    font-feature-settings: "palt" 1;
    text-align: left; /* 本文は左寄せ */
    white-space: pre-line;
}

/* reason サブテキスト：本文エリア（.p-reason__item-body）先頭のリード文。
   Figma準拠でティールの強調リードとして表示、左寄せ。 */
.p-reason__item-sub {
    font-family: var(--font-sans);
    font-size: 18px;            /* SP: 本文より一段強いリード */
    font-weight: 500;
    color: var(--color-text-heading); /* ティール #00818f */
    line-height: 1.8;
    margin: 0 0 12px;
    font-feature-settings: "palt" 1;
    text-align: left;
    white-space: normal;
}

/* ============================================================
   ⑤ SPECIAL ARTICLES
   ============================================================ */
.p-top-articles {
    background: var(--color-bg-default);
    padding-block: var(--space-3xl) var(--space-4xl);
}

.p-top-articles__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-lg);
}

.p-top-articles__deco {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-lg);
    text-align: center;
}

.p-top-articles__deco img { max-width: 160px; }
.p-top-articles__wave { max-width: 80px !important; }

.p-top-articles__heading {
    font-family: var(--font-serif);
    font-size: 28px; /* セクション見出し統一（SP） */
    font-weight: 500;
    color: var(--color-text-default);
    text-align: center;
    font-feature-settings: "palt" 1;
    margin: 0 0 8px;
    line-height: 1.45;        /* セクション見出し統一（SP） */
    white-space: pre-line;   /* SP: Textarea改行（\n）を反映（PCは下でnormalに戻す） */
}

.p-top-articles__sub {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-text-subtle);
    text-align: center;
    margin: 0 0 var(--space-2xl);
}

/* ピックアップ */
.p-top-articles__pickup-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-lg);
}

.p-top-articles__pickup-img {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.p-top-articles__pickup-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-top-articles__pickup-body {
    padding: var(--space-sm);
}

.p-top-articles__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.p-top-articles__tag {
    display: inline-block;
    background: var(--color-bg-subtle);
    color: var(--color-text-heading);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-family: var(--font-sans);
}

.p-top-articles__pickup-title {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-default);
    line-height: 1.6;
    margin: 0 0 8px;
    font-feature-settings: "palt" 1;
}

.p-top-articles__pickup-date {
    font-size: 13px;
    color: var(--color-text-subtle);
    margin: 0;
    font-family: var(--font-sans);
}

/* グリッド — SP: 1カラム（Figma SP準拠） */
.p-top-articles__grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.p-top-articles__card {
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.p-top-articles__card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.p-top-articles__card-img {
    width: 100%;
    height: 200px; /* SP 1カラム時に適切な高さに */
    overflow: hidden;
}

.p-top-articles__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    display: block;
}

.p-top-articles__card-body {
    padding: var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.p-top-articles__card-title {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-default);
    line-height: 1.5;
    margin: 0;
    font-feature-settings: "palt" 1;
}

.p-top-articles__card-date {
    font-size: 11px;
    color: var(--color-text-subtle);
    margin: 0;
    font-family: var(--font-sans);
}

.p-top-articles__more-wrap {
    display: flex;
    justify-content: center;
}

/* Figma Export準拠: TOPではピックアップカード非表示 */
.p-top-articles__pickup {
    display: none;
}

/* ============================================================
   ⑥ MARIANAS WORLD
   ============================================================ */
.p-marianas {
    background: var(--color-bg-card);
    padding-block: var(--space-3xl) var(--space-4xl);
}

.p-marianas__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-lg);
    text-align: center;
}

.p-marianas__deco {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-lg);
}

.p-marianas__deco img { max-width: 160px; }
.p-marianas__wave { max-width: 80px !important; }

.p-marianas__heading {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 500;
    color: var(--color-text-default);
    font-feature-settings: "palt" 1;
    margin: 0 0 8px;
    white-space: pre-line;
}

.p-marianas__quote {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-text-subtle);
    margin: 0 0 var(--space-2xl);
    line-height: 1.8;
}

.p-marianas__islands {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    text-align: left;
}

.p-marianas__island-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-card);
}

.p-marianas__island-img {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.p-marianas__island-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-marianas__island-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.55) 100%);
}

.p-marianas__island-img-label {
    position: absolute;
    bottom: var(--space-sm);
    left: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.p-marianas__island-en-sm {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.p-marianas__island-name-overlay {
    font-family: var(--font-serif);
    font-size: 40px;
    font-weight: 500;
    color: var(--color-white);
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.p-marianas__island-catch-sm {
    font-family: var(--font-serif);
    font-size: 16px;
    color: rgba(255,255,255,0.85);
}

/* 画像下テキストエリア */
.p-marianas__island-body {
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.p-marianas__island-names {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.p-marianas__island-ja {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--color-text-default);
}

.p-marianas__island-en {
    font-family: var(--font-en);
    font-size: 13px;
    color: var(--color-text-heading);
    font-style: italic;
}

.p-marianas__island-catch {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-heading);
    margin: 0;
}

.p-marianas__island-desc {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.9;
    color: var(--color-text-default);
    margin: 0;
    font-feature-settings: "palt" 1;
}

.p-marianas__island-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.p-marianas__island-tag {
    background: var(--color-bg-subtle);
    color: var(--color-text-heading);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-family: var(--font-sans);
}

/* ============================================================
   ⑦ DIVING CTA
   ============================================================ */
.p-diving-cta {
    position: relative;
    background-size: cover;
    background-position: center;
    padding-block: var(--space-4xl);
    text-align: center;
    min-height: 512px; /* Figma SP: 512px */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.p-diving-cta__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.p-diving-cta__inner {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin-inline: auto;
    padding-inline: var(--space-lg);
}

.p-diving-cta__heading {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 500;
    color: var(--color-white);
    line-height: 1.7;
    font-feature-settings: "palt" 1;
    margin: 0 0 var(--space-sm);
    white-space: pre-line;
}

.p-diving-cta__desc {
    font-family: var(--font-sans);
    font-size: 15px;
    color: #fff;
    text-align: center;
    line-height: 1.45;
    font-weight: 500; /* タイトル/ボタンより弱いサブコピー階層に */
    max-width: calc(100vw - 48px);
    margin: 14px auto 24px; /* SP: 2行コピーが一体に見える上下余白 */
    font-feature-settings: "palt" 1;
    white-space: pre-line;
}

.p-diving-cta__btn {
    position: relative; /* 矢印を絶対配置・テキストを視覚的中央にするため */
    display: inline-flex;
    align-items: center;
    justify-content: center; /* テキストを中央寄せ */
    text-align: center;
    gap: 10px;
    background: var(--color-text-accent);
    color: var(--color-white);
    border-radius: 999px;
    width: min(360px, calc(100vw - 48px)); /* SP: 360px上限・画面内に収める */
    min-height: 58px; /* SP: 58px前後 */
    padding: 0 48px 0 28px; /* 右に矢印ぶんの余白を確保しテキストと干渉させない */
    box-sizing: border-box;
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap; /* 「ダイビング特集サイトへ」を1行で全文表示 */
    font-feature-settings: "palt" 1;
}

/* 矢印アイコンはダイビングCTAボタン内だけ右固定（共有 .p-top__more-btn-icon へは波及させない） */
.p-diving-cta__btn .p-top__more-btn-icon {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
}

/* ============================================================
   ⑧ HOTEL / ⑨ EVENT（共通カード構造）
   ============================================================ */
.p-top-hotel,
.p-top-event {
    background: var(--color-bg-default);
    padding-block: var(--space-3xl) var(--space-4xl);
}

.p-top-hotel__inner,
.p-top-event__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-lg);
}

.p-top-hotel__deco,
.p-top-event__deco {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-lg);
    text-align: center;
}

.p-top-hotel__deco img,
.p-top-event__deco img { max-width: 120px; }

.p-top-hotel__wave,
.p-top-event__wave { max-width: 80px !important; }

.p-top-hotel__heading,
.p-top-event__heading {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 500;
    color: var(--color-text-default);
    text-align: center;
    font-feature-settings: "palt" 1;
    margin: 0 0 8px;
    white-space: pre-line;
    line-height: 1.4;        /* SP改行間スペースを詰める（Figma寄せ） */
}

.p-top-hotel__sub,
.p-top-event__sub {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-text-subtle);
    text-align: center;
    margin: 0 0 var(--space-2xl);
}

.p-top-hotel__grid,
.p-top-event__grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* SP: 縦積み（1件でも幅いっぱい） */
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
}

.p-top-hotel__card,
.p-top-event__card {
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.p-top-hotel__card-link,
.p-top-event__card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.p-top-hotel__card-img,
.p-top-event__card-img {
    width: 100%;
    height: 240px; /* Figma: カード画像高さ240px（ホテル/イベント共通） */
    overflow: hidden;
}

.p-top-hotel__card-img img,
.p-top-event__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    display: block;
}

.p-top-hotel__card-body,
.p-top-event__card-body {
    padding: var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.p-top-hotel__card-title,
.p-top-event__card-title {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-default);
    line-height: 1.5;
    margin: 0;
    font-feature-settings: "palt" 1;
}

.p-top-hotel__card-desc,
.p-top-event__card-desc {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-text-subtle);
    margin: 0;
    line-height: 1.6;
    font-feature-settings: "palt" 1;
}

.p-top-hotel__card-date,
.p-top-event__card-date {
    font-size: 11px;
    color: var(--color-text-subtle);
    margin: 0;
    font-family: var(--font-sans);
}

.p-top-hotel__card-tags,
.p-top-event__card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Figma Exportにホテルカード日付なし */
.p-top-hotel__card-date {
    display: none;
}

.p-top-hotel__more-wrap,
.p-top-event__more-wrap {
    display: flex;
    justify-content: center;
}

/* ============================================================
   ⑩ MODEL PLAN
   ============================================================ */
.p-top-plan {
    background: var(--color-bg-card);
    padding-block: var(--space-3xl) var(--space-4xl);
}

.p-top-plan__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-lg);
    text-align: center;
}

.p-top-plan__deco {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-lg);
}

.p-top-plan__deco img { max-width: 120px; }
.p-top-plan__wave { max-width: 80px !important; }

.p-top-plan__heading {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 500;
    color: var(--color-text-default);
    font-feature-settings: "palt" 1;
    margin: 0 0 8px;
    white-space: pre-line;
}

.p-top-plan__sub {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-text-subtle);
    margin: 0 0 var(--space-2xl);
}

.p-top-plan__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    text-align: left;
}

.p-top-plan__item {
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border-default);
}

.p-top-plan__item-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.p-top-plan__item-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.p-top-plan__item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-top-plan__item-body {
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.p-top-plan__item-title {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-default);
    line-height: 1.6;
    margin: 0;
    font-feature-settings: "palt" 1;
}

.p-top-plan__item-price {
    font-family: var(--font-en);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-heading);
    margin: 0;
}

.p-top-plan__item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.p-top-plan__item-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-text-heading);
    color: var(--color-white);
    border-radius: 999px;
    padding: 8px 20px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    width: fit-content;
}

/* ============================================================
   ⑪ CAMPAIGN
   ============================================================ */
.p-top-campaign {
    background: var(--color-bg-default);
    padding-block: var(--space-3xl) var(--space-4xl);
}

.p-top-campaign__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-lg);
    text-align: center;
}

.p-top-campaign__deco {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-lg);
}

.p-top-campaign__deco img { max-width: 180px; }
.p-top-campaign__wave { max-width: 80px !important; }

.p-top-campaign__heading {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 500;
    color: var(--color-text-default);
    font-feature-settings: "palt" 1;
    margin: 0 0 8px;
    white-space: pre-line;
    line-height: 1.4;        /* SP改行間スペースを詰める（Figma寄せ） */
    text-align: center;
}

.p-top-campaign__sub {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-text-subtle);
    margin: 0 0 var(--space-2xl);
    line-height: 1.8;
}

.p-top-campaign__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    text-align: left;
    margin-bottom: var(--space-2xl);
}

.p-top-campaign__item {
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.p-top-campaign__item-inner {
    display: flex;
    flex-direction: column;
}

.p-top-campaign__provider {
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--color-border-default);
}

.p-top-campaign__provider-icon {
    height: 32px;
    width: auto;
}

.p-top-campaign__provider-name {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-text-subtle);
}

.p-top-campaign__item-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.p-top-campaign__item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-top-campaign__item-body {
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.p-top-campaign__item-title {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-default);
    line-height: 1.6;
    margin: 0;
    font-feature-settings: "palt" 1;
}

.p-top-campaign__item-price {
    font-family: var(--font-en);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-heading);
    margin: 0;
}

.p-top-campaign__item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.p-top-campaign__item-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-text-heading);
    color: var(--color-white);
    border-radius: 999px;
    padding: 8px 20px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    width: fit-content;
}

.p-top-campaign__more-wrap {
    display: flex;
    justify-content: center;
}

/* ============================================================
   ⑫ TRAVEL GUIDE
   ============================================================ */
.p-top-guide {
    background: var(--color-bg-default);
    padding-block: var(--space-3xl) var(--space-4xl);
}

.p-top-guide__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-lg);
    text-align: center;
}

.p-top-guide__deco {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-lg);
}

.p-top-guide__deco img { max-width: 120px; }
.p-top-guide__wave { max-width: 80px !important; }

.p-top-guide__heading {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 500;
    color: var(--color-text-default);
    font-feature-settings: "palt" 1;
    margin: 0 0 8px;
    white-space: pre-line;
}

.p-top-guide__sub {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-text-subtle);
    margin: 0 0 var(--space-2xl);
}

.p-top-guide__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* SP: 2×2グリッド（横スクロールなし） */
    gap: var(--space-sm);
}

.p-top-guide__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: var(--space-sm);
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text-default);
    transition: opacity 0.2s;
}

.p-top-guide__item:hover { opacity: 0.8; }

.p-top-guide__item-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.p-top-guide__item-title {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-default);
    font-feature-settings: "palt" 1;
}

.p-top-guide__item-desc {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--color-text-subtle);
    font-feature-settings: "palt" 1;
}

/* ============================================================
   ⑬ BUSINESS AREA
   ============================================================ */
.p-top-business {
    background: var(--color-bg-card);
    padding-block: var(--space-3xl) var(--space-4xl);
}

.p-top-business__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-lg);
}

.p-top-business__heading {
    font-family: var(--font-serif);
    font-size: 28px; /* セクション見出し統一（SP） */
    font-weight: 500;
    color: var(--color-text-default);
    text-align: center;
    line-height: 1.45; /* セクション見出し統一（SP） */
    font-feature-settings: "palt" 1;
    margin: 0 0 var(--space-2xl);
    white-space: normal;      /* PC/タブレットは改行を無視して1行表示 */
    word-break: keep-all;     /* 日本語の1文字改行を防ぐ */
    overflow-wrap: normal;    /* anywhereは使わず不自然な1文字折返しを回避 */
}

/* Business見出し：SP（〜767px）のみ管理画面（textarea）の改行を反映し、行間を詰める。
   ベース white-space:normal より後・同詳細度で後勝ちさせる。font-sizeは変更しない。 */
@media (max-width: 767px) {
    .p-top-business__heading {
        white-space: pre-line;
        line-height: 1.35;
    }
}

.p-top-business__grid {
    display: grid;
    grid-template-columns: 1fr; /* SP: 1カラム縦積み（Figma寄せ） */
    gap: var(--space-lg);
}

.p-top-business__item-img {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: var(--radius-md); /* カード感を弱めフラットに：画像全角丸 */
}

.p-top-business__item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-top-business__item-body {
    padding: var(--space-xs) 0 0;
    background: transparent; /* カード枠を外しフラットなテキスト配置に */
}

.p-top-business__item-title {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-default);
    margin: 0 0 6px;
    font-feature-settings: "palt" 1;
}

.p-top-business__item-desc {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-text-subtle);
    line-height: 1.7;
    margin: 0 0 var(--space-xs);
    font-feature-settings: "palt" 1;
}

.p-top-business__item-contact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-text-heading);
    color: var(--color-white);
    border-radius: 999px;
    padding: 6px 16px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

/* ============================================================
   ④-B HIGHLIGHTS
   ============================================================ */
.p-highlights {
    background: var(--color-bg-card);
    padding-block: var(--space-3xl) var(--space-4xl);
}

.p-highlights__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-lg);
    text-align: center;
}

.p-highlights__deco {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-lg);
}

.p-highlights__deco img { max-width: 160px; height: auto; }
.p-highlights__wave { max-width: 80px !important; }

.p-highlights__heading {
    font-family: var(--font-serif);
    font-size: 28px; /* セクション見出し統一（SP） */
    font-weight: 500;
    color: var(--color-text-default);
    line-height: 1.45; /* セクション見出し統一（SP） */
    font-feature-settings: "palt" 1;
    margin: 0 0 var(--space-2xl);
}

/* SP: 1枚目全幅、2・3枚目2カラム（Figma SP準拠） */
.p-highlights__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
}

.p-highlights__card:first-child {
    grid-column: 1 / -1; /* 全幅 */
}

.p-highlights__card:not(:first-child) {
    /* 2カラム収まり */
}

.p-highlights__card-link {
    display: block;
    text-decoration: none;
}

.p-highlights__card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* SP: デフォルトは全幅カード想定（横長） */
    overflow: hidden;
    border-radius: var(--radius-md);
}

/* SP: 2・3枚目の小カードは正方形に */
.p-highlights__card:not(:first-child) .p-highlights__card-media {
    aspect-ratio: 1 / 1;
}

.p-highlights__card-video,
.p-highlights__card-img,
.p-highlights__card-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 動画がある場合、fallback画像は非表示（動画読み込み失敗時に表示） */
.p-highlights__card-video + .p-highlights__card-fallback {
    display: none;
}

.p-highlights__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,0.5) 100%);
    pointer-events: none;
}

.p-highlights__card-caption {
    position: absolute;
    bottom: var(--space-sm);
    left: var(--space-sm);
    right: var(--space-sm); /* 右端まで広げて折り返しを制御 */
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
    font-feature-settings: "palt" 1;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    z-index: 1;
    line-height: 1.4;
}

/* SP: 2・3枚目の小カードはキャプション小さめ */
.p-highlights__card:not(:first-child) .p-highlights__card-caption {
    font-size: 13px;
    bottom: var(--space-xs);
    left: var(--space-xs);
    right: var(--space-xs);
}

.p-highlights__card-credit {
    position: absolute;
    bottom: 8px;
    right: var(--space-sm);
    font-size: 10px;
    color: rgba(255,255,255,0.8);
    font-family: sans-serif;
    z-index: 1;
}

/* CTAボタン群 */
.p-highlights__ctas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-xs); /* カード下のgap */
}

/* ============================================================
   PC（1280px〜）
   ============================================================ */
@media (min-width: 1280px) {

    /* 共通 */
    .p-top__more-btn { font-size: 20px; }
    .p-top__more-btn-icon { width: 32px; height: 32px; }
    .p-top__quote-line { font-size: 18px; }

    /* ① HERO */
    .p-hero {
        height: 980px; /* Figma PC: 980px */
    }
    .p-hero__slide-text {
        /* PC: 右上寄せ（指示書#10-C 4. top 8〜12% → 10%、right 5〜7% → 6%、右揃え） */
        top: 10%;
        right: 6%;
        left: auto;
        bottom: auto;
        transform: none;
        max-width: 48vw; /* PC: メインコピーが画面幅の半分以下に収まる目安 */
        width: auto;
        align-items: flex-end; /* 右上：子要素を右端へ */
        text-align: right;
    }
    .p-hero__sub-copy { font-size: clamp(16px, 1.4vw, 22px); line-height: 1.7; }
    /* PC: Visit SAIPAN! を画面幅の半分以下に収める。clampで横伸びを抑制し1行固定 */
    .p-hero__main-copy {
        font-size: clamp(56px, 6vw, 112px);
        white-space: nowrap; /* PCのみ：1行表示。SPはmax-width:767pxでnormalに戻す */
    }
    /* Hero共通ロゴ — PC: 左下（指示書#10-C 4. left 3〜5% → 4%、bottom 5〜7% → 6%） */
    .p-hero__logo {
        left: 4%;
        right: auto;
        bottom: 6%;
        transform: none;
        width: 300px; /* PC目安: 260〜360px */
        max-width: 32%;
    }

    /* ② NEWS — Figma寄せ：中央寄せ・幅を絞る・各行整列・CTA中央 */
    .p-top-news { padding-block: var(--space-3xl); }
    /* リストを中央に寄せ、横幅を絞る（Figma: px-160 → 実効 約880px中央） */
    .p-top-news__inner { padding-inline: var(--space-6xl); }
    .p-top-news__heading { font-size: 28px; margin-bottom: var(--space-2xl); }
    .p-top-news__link {
        flex-wrap: nowrap;
        align-items: center;
        gap: 16px;
        padding-block: var(--space-md); /* 行余白をゆったり（20→24px） */
    }
    .p-top-news__date { width: 110px; flex-shrink: 0; font-size: 15px; }
    .p-top-news__tag {
        min-width: 112px;
        text-align: center;
        flex-shrink: 0;
        font-size: 13px;
        padding: 2px 12px;
    }
    .p-top-news__title { font-size: 18px; }
    .p-top-news__more { justify-content: center; font-size: 16px; } /* CTA中央配置 */

    /* ③ WHY SAIPAN */
    .p-why__inner { padding-inline: 0; }
    .p-why__deco img:not(.p-why__wave) { width: 168px; } /* PC: 拡大はwidthで指定（max-widthは97px intrinsicに無効） */
    .p-why__heading {
        font-size: 38px; /* 40px→38px：長文1行に収まりやすく */
        line-height: 1.45;
        letter-spacing: 0.04em;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: keep-all; /* 日本語：単語単位での改行を防ぐ */
        text-align: center;
        max-width: 960px; /* 1200pxより狭めてぶら下がりを防止 */
        margin-left: auto;
        margin-right: auto;
    }
    .p-why__cards {
        grid-template-columns: repeat(3, 1fr);
    }

    /* ④ REASON */
    .p-reason__inner { padding-inline: 0; }
    .p-reason__heading-main {
        font-size: 40px; /* Figma PC: 40px（38→40で存在感UP・1行維持） */
        line-height: 1.45;
        white-space: normal;
        max-width: 860px;
        margin-left: auto;
        margin-right: auto;
        word-break: keep-all;
    }
    .p-reason__heading { font-size: 16px; } /* Figma本文: 16px */
    .p-reason__item {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-bottom: var(--space-4xl);
        border-bottom: 1px dashed var(--color-border-default);
    }

    .p-reason__items > .p-reason__item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .p-reason__item-header {
        align-items: center; /* Figma PC: 番号・見出し・サブを中央揃え */
        margin-bottom: 40px;
    }

    .p-reason__item-num img {
        width: 64px;
    }

    .p-reason__item-heading {
        font-size: 26px; /* PC: 大見出し38pxに対し明確に小さく（項目見出しの階層を下げる） */
        line-height: 1.5;
        text-align: center;
        color: var(--color-text-default);
        white-space: normal;
        overflow-wrap: break-word;
        word-break: keep-all;
    }

    .p-reason__item-sub {
        font-size: 20px;       /* PC: 本文エリア内の強調リード */
        line-height: 1.8;
        text-align: left;
        color: var(--color-text-heading); /* ティール */
    }

    .p-reason__item-cols {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-2xl); /* 64px→48px：Figmaに近い余白 */
    }

    .p-reason__item--reverse .p-reason__item-cols {
        flex-direction: row-reverse;
    }

    .p-reason__item-media {
        flex: 1;
    }

    .p-reason__item-media img.p-reason__item-img {
        aspect-ratio: 4/3;
        border-radius: var(--radius-md);
    }

    .p-reason__item-body {
        flex: 1;
        align-items: flex-start;
        text-align: left;
    }

    .p-reason__item-body-text {
        font-size: 15px;
        line-height: 2.0;
    }

    /* ⑤ SPECIAL ARTICLES — Figma: 上段に大きな注目記事1件、下段に3カード */
    .p-top-articles__inner { padding-inline: 0; }
    .p-top-articles__heading { font-size: 40px; line-height: 1.4; white-space: normal; } /* PC: セクション見出し統一40px/56px相当 */
    .p-top-articles__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
        row-gap: var(--space-xl);
    }
    .p-top-articles__card-img { height: 240px; } /* Figma PC: 240px基準（下段カード） */
    .p-top-articles__card-title { font-size: 16px; }
    /* 注目記事 = 先頭カードを全幅・画像左／本文右の横長カードに */
    .p-top-articles__card:first-child { grid-column: 1 / -1; }
    .p-top-articles__card:first-child .p-top-articles__card-link {
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }
    .p-top-articles__card:first-child .p-top-articles__card-img {
        width: 58%;
        height: auto;
        min-height: 340px;
        flex-shrink: 0;
    }
    .p-top-articles__card:first-child .p-top-articles__card-img img {
        border-radius: var(--radius-md) 0 0 var(--radius-md);
    }
    .p-top-articles__card:first-child .p-top-articles__card-body {
        flex: 1;
        justify-content: center;
        padding: var(--space-xl);
        gap: 12px;
    }
    .p-top-articles__card:first-child .p-top-articles__card-title {
        font-size: 24px;
        line-height: 1.6;
    }
    .p-top-articles__card:first-child .p-top-articles__card-date { font-size: 14px; }

    /* ⑥ MARIANAS WORLD */
    .p-marianas__inner { padding-inline: 0; }
    .p-marianas__heading { font-size: 40px; white-space: normal; }
    /* PC: 2カラムグリッド */
    .p-marianas__islands {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }

    .p-marianas__island-img {
        aspect-ratio: 4/3;
    }

    .p-marianas__island-body {
        padding: var(--space-md);
    }

    .p-marianas__island-ja {
        font-size: 22px;
    }

    .p-marianas__island-catch {
        font-size: 16px;
    }

    .p-marianas__island-desc {
        font-size: 15px;
    }

    /* ⑦ DIVING CTA */
    .p-diving-cta {
        min-height: 760px; /* Figma PC: 760px */
    }
    .p-diving-cta__heading { font-size: 40px; white-space: normal; }
    .p-diving-cta__desc {
        font-size: 18px;
        line-height: 1.5;
        max-width: 720px;
    }
    .p-diving-cta__btn {
        min-width: 360px; /* Figma PC: 360px */
        height: 72px;
        justify-content: center; /* テキストを視覚的中央に（矢印は絶対配置で右固定） */
        padding: 16px 48px;
        font-size: 17px;
    }
    .p-diving-cta__btn .p-top__more-btn-icon { right: 28px; }

    /* ⑧⑨ HOTEL / EVENT */
    .p-top-hotel__heading,
    .p-top-event__heading { font-size: 40px; white-space: normal; }
    .p-top-hotel__inner,
    .p-top-event__inner { padding-inline: 0; }
    .p-top-hotel__grid,
    .p-top-event__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
    .p-top-hotel__card-img,
    .p-top-event__card-img { height: 220px; }
    .p-top-hotel__card-title,
    .p-top-event__card-title { font-size: 18px; }
    /* Hotel / Event: Figma PC カード幅約376px・中央寄せ（共通） */
    .p-top-hotel__grid,
    .p-top-event__grid {
        grid-template-columns: repeat(2, minmax(0, 376px));
        justify-content: center;
    }
    .p-top-hotel__card-img,
    .p-top-event__card-img { height: 240px; } /* Figma PC: 240px */

    /* ⑩ MODEL PLAN — Figma: 画像左／テキスト右の横型カード・中央寄せ */
    .p-top-plan__heading { font-size: 40px; white-space: normal; }
    .p-top-plan__inner { padding-inline: 0; }
    .p-top-plan__list {
        flex-direction: column;
        align-items: center;
        gap: var(--space-lg);
    }
    .p-top-plan__item {
        flex: none;
        width: 100%;
        max-width: 920px;
    }
    .p-top-plan__item-link {
        flex-direction: row;
        align-items: stretch;
    }
    .p-top-plan__item-img {
        width: 46%;
        height: auto;
        min-height: 300px;
        flex-shrink: 0;
    }
    .p-top-plan__item-body {
        flex: 1;
        justify-content: center;
        padding: var(--space-lg) var(--space-xl);
        gap: 12px;
    }
    .p-top-plan__item-title { font-size: 22px; }

    /* ⑪ CAMPAIGN — Figma: 2カード横並び・中央寄せ・カード内CTA中央下 */
    .p-top-campaign__inner { padding-inline: 0; }
    .p-top-campaign__heading { font-size: 40px; white-space: normal; }
    .p-top-campaign__list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-lg);
    }
    .p-top-campaign__item {
        flex: 0 1 calc(50% - var(--space-lg));
        max-width: 480px;
        display: flex;
    }
    .p-top-campaign__item-inner { width: 100%; height: 100%; }
    .p-top-campaign__item-img { height: 260px; }
    .p-top-campaign__item-body { flex: 1; padding: var(--space-md); }
    .p-top-campaign__item-btn { align-self: center; margin-top: auto; }

    /* ⑫ TRAVEL GUIDE / CHECK POINT — Figma寄せ：カード余白・アイコン・間隔 */
    .p-top-guide__inner { padding-inline: 0; }
    .p-top-guide__heading { font-size: 40px; white-space: normal; }
    .p-top-guide__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
    .p-top-guide__item { padding: var(--space-md) var(--space-sm); gap: 12px; }
    .p-top-guide__item-icon img { width: 56px; height: 56px; }
    .p-top-guide__item-title { font-size: 16px; }
    .p-top-guide__item-desc { font-size: 13px; line-height: 1.7; }

    /* ⑬ BUSINESS AREA — Figma寄せ：3カラム・フラット配置・CTA余白 */
    .p-top-business__inner { padding-inline: 0; }
    .p-top-business__heading { font-size: 40px; line-height: 1.4; margin-bottom: var(--space-xl); } /* セクション見出し統一40px/56px相当 */
    .p-top-business__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
    .p-top-business__item-title { font-size: 18px; }
    .p-top-business__item-desc { font-size: 14px; }
    .p-top-business__item-contact { padding: 10px 24px; font-size: 14px; }

    /* HIGHLIGHTS PC */
    .p-highlights__inner {
        padding-inline: 0;
        max-width: 1200px; /* 他セクションと同じ幅に揃える（修正5） */
    }
    .p-highlights__heading { font-size: 40px; line-height: 1.4; } /* セクション見出し統一40px/56px相当 */
    /* PC: 左カード大・中右縦長（Figma Export準拠） */
    .p-highlights__grid {
        display: grid; /* flexからgridに変わっているためPC側でも明示 */
        grid-template-columns: repeat(3, 1fr); /* 3カラム均等（1枚目だけ肥大化を解消） */
        height: 520px;
        align-items: stretch;
        gap: 32px; /* Figmaに近い余白 */
    }
    .p-highlights__card {
        height: 100%;
    }
    /* 高さチェーンを通す：card(520px) > card-link(100%) > card-media(100%)。
       card-link に height:100% が無いと card-media の height:100% が 0 になり
       PCで画像・動画が消える不具合になるため明示する。 */
    .p-highlights__card-link {
        display: block;
        height: 100%;
    }
    .p-highlights__card:first-child {
        grid-column: auto; /* PC: 全幅指定を解除 */
    }
    .p-highlights__card-media {
        aspect-ratio: unset; /* PC: 高さをgridで制御 */
        height: 100%;
    }
    .p-highlights__card:not(:first-child) .p-highlights__card-media {
        aspect-ratio: unset; /* SP用のoverride解除 */
        height: 100%;
    }
    .p-highlights__ctas {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-3xl);
    }

} /* end @media PC */

/* ============================================================
   SP（〜1279px）REASON 微調整（PCに波及させない）
   - 理由見出しのサイズ/行間/字間をFigmaに寄せ、各ブロックで統一
   - サブテキストは本文エリアへ移動済み（.p-reason__item-sub 基本スタイル参照）
   ============================================================ */
@media (max-width: 1279px) {
    .p-reason__item-header {
        gap: 8px; /* 番号→見出しの最小余白 */
    }
    .p-reason__item-heading {
        font-size: 22px;        /* SP: 大見出しclamp上限28pxより明確に小さく */
        line-height: 1.55;
        letter-spacing: 0.04em;
    }
    /* 通常本文/サブテキストの左寄せは max-width:600px（SP）限定へ移設。
       601px以上（タブレット/狭幅PC）では base の中央寄せ（.p-reason__heading）に戻す。 */
    /* SPのみ大見出し・各項目見出しのbrを有効化し、Textareaの改行を反映 */
    .p-reason__heading-main br { display: block; }
    .p-reason__item-heading br { display: block; }
}

/* ============================================================
   Reason 本文/サブテキスト左寄せ：SP（600px以下）限定
   601px以上のタブレット/狭幅PCでは base の中央寄せに戻し、
   タブレット幅での不自然な左寄せを防ぐ。
   ============================================================ */
@media (max-width: 600px) {
    .p-reason__heading,
    .p-reason__item-body,
    .p-reason__item-body-text {
        text-align: left;
    }
}

/* ============================================================
   WHY(p-reason)引用ブロックの最終上書き（後方・高詳細度で確実に後勝ち）
   base .p-top__quote::before/::after/-line に勝たせ、引用符を小さく細く、
   引用テキストを軽くする。中央揃え・ティール・破線下線はbaseを維持。
   ============================================================ */
.p-reason .p-top__quote::before,
.p-reason .p-top__quote::after {
    font-size: 27px;            /* 34→27px：装飾として控えめに添うサイズ */
    font-weight: 400;           /* 細く */
    font-family: Georgia, serif;/* serif系で上品に */
}
.p-reason .p-top__quote-line {
    font-weight: 500;           /* 700→500：少し軽く（色・下線・中央揃えはbase維持） */
    font-size: 16px;            /* SP: 引用内テキストの存在感UP（base 15px→16px、.p-reason限定） */
}

/* WHY(.p-reason) 引用内テキストのPCサイズ（base/PC .p-top__quote-line 18px に勝つ・.p-reason限定） */
@media (min-width: 1280px) {
    .p-reason .p-top__quote-line {
        font-size: 20px; /* Figma寄せ：18→20px */
    }
}

/* ============================================================
   引用クオート共通化（#11-TOP最終調整）
   WHY(.p-reason)で確定した「控えめな引用符・破線下線・ティール・中央揃え」
   を、mvas_quote_block を使う各セクションへ拡張する。
   ※ .p-why / .p-highlights は対象外（既存の見え方を維持）。
   ※ Campaign / Check Point は front-page.php 側で mvas_quote_block へ
     統一済みのため、ここで .p-top__quote として共通スタイルが効く。
   ============================================================ */
.p-top-articles .p-top__quote::before,
.p-top-articles .p-top__quote::after,
.p-marianas .p-top__quote::before,
.p-marianas .p-top__quote::after,
.p-top-plan .p-top__quote::before,
.p-top-plan .p-top__quote::after,
.p-top-campaign .p-top__quote::before,
.p-top-campaign .p-top__quote::after,
.p-top-guide .p-top__quote::before,
.p-top-guide .p-top__quote::after,
.p-top-hotel .p-top__quote::before,
.p-top-hotel .p-top__quote::after,
.p-top-event .p-top__quote::before,
.p-top-event .p-top__quote::after {
    font-size: 27px;
    font-weight: 400;
    font-family: Georgia, serif;
}
.p-top-articles .p-top__quote-line,
.p-marianas .p-top__quote-line,
.p-top-plan .p-top__quote-line,
.p-top-campaign .p-top__quote-line,
.p-top-guide .p-top__quote-line,
.p-top-hotel .p-top__quote-line,
.p-top-event .p-top__quote-line {
    font-weight: 500;
}

/* ============================================================
   SP: 見出し→引用→カードの縦間隔をFigmaに寄せて詰める
   共通 .p-top__quote の下余白(40px)が各カードセクションで過剰なため、
   対象セクション配下のみ縮小する（.p-reason / .p-why は対象外で非波及）。
   ============================================================ */
@media (max-width: 1279px) {
    .p-top-articles .p-top__quote,
    .p-marianas .p-top__quote,
    .p-top-plan .p-top__quote,
    .p-top-campaign .p-top__quote,
    .p-top-guide .p-top__quote {
        margin-bottom: var(--space-md); /* 40px→24px */
    }
}

/* ============================================================
   狭幅PC / タブレット横（1024〜1279px）中間レイアウト
   目的：ベース(SP)が1279pxまで全適用され、1カラム巨大化・SP見出しに
        なる問題を是正する。
   非干渉：PC(min-width:1280px) と SP(〜1023px) は変更しない。
   対象：Special Articles / Hotel / Event / Marianas / Campaign /
        Business / Reason / Highlights / 各セクション主要見出し
   非対象（変更しない）：Hero / Model Plan / Travel Guide / Diving CTA /
        WHY / 全体padding / quote / タグ / カード内padding
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {

    /* --- 主要見出し：SPサイズのままにせず拡大（各セクションPC値を超えない範囲） --- */
    .p-top-articles__heading { font-size: 28px; white-space: normal; }  /* base22→28（PC30） */
    .p-marianas__heading     { font-size: 36px; white-space: normal; }  /* base28→36（PC40） */
    .p-top-hotel__heading,
    .p-top-event__heading    { font-size: 36px; white-space: normal; }  /* base28→36（PC40） */
    .p-top-campaign__heading { font-size: 36px; white-space: normal; }  /* base28→36（PC40） */
    .p-top-business__heading { font-size: 26px; }                       /* base22→26（PC28） */
    .p-highlights__heading   { font-size: 30px; }                       /* base24→30（PC32） */
    .p-reason__heading-main  { font-size: 36px; white-space: normal; }  /* base max32→36（PC40） */
    .p-reason__heading-main br { display: none; }                       /* SPの強制改行を解除（PC同様1行寄り） */

    /* --- Special Articles：1カラム→2カラム --- */
    .p-top-articles__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- Hotel / Event：2カラム中央寄せ（PC踏襲・カード幅376px） --- */
    .p-top-hotel__grid,
    .p-top-event__grid {
        grid-template-columns: repeat(2, minmax(0, 376px));
        justify-content: center;
        gap: var(--space-lg);
    }

    /* --- Marianas World：1カラム→2カラム --- */
    .p-marianas__islands {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }

    /* --- Campaign：1カラム→2カラム中央寄せ（カード内paddingは非変更） --- */
    .p-top-campaign__list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-lg);
    }
    .p-top-campaign__item {
        flex: 0 1 calc(50% - var(--space-lg));
        max-width: 480px;
        display: flex;
    }
    .p-top-campaign__item-inner { width: 100%; height: 100%; }
    .p-top-campaign__item-btn { align-self: center; margin-top: auto; }

    /* --- Business：1カラム→3カラム（PC踏襲） --- */
    .p-top-business__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
    }

    /* --- Model Plan：中間幅では横型化せず、縦型カードのまま中央寄せ＋最大幅制限。
       PC(1280px〜)の画像左/本文右の横型化は本クエリ外のため非干渉。 --- */
    .p-top-plan__list { align-items: center; }
    .p-top-plan__item { width: 100%; max-width: 800px; }
    .p-top-plan__item-link { flex-direction: column; } /* 縦型を明示（PC横型の波及を防止） */

    /* --- Reason：画像+本文の縦積み→2カラム（PC踏襲・本文/見出し階層は非変更） --- */
    .p-reason__item-cols {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-2xl);
    }
    .p-reason__item--reverse .p-reason__item-cols {
        flex-direction: row-reverse;
    }
    .p-reason__item-media { flex: 1; }
    .p-reason__item-media img.p-reason__item-img { aspect-ratio: 4/3; }
    .p-reason__item-body { flex: 1; align-items: flex-start; text-align: left; }

    /* --- Highlights：1枚目全幅→3カラム均等（PC踏襲の高さチェーン） --- */
    .p-highlights__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        height: 520px;
        align-items: stretch;
        gap: 32px;
    }
    .p-highlights__card { height: 100%; }
    .p-highlights__card-link { display: block; height: 100%; }
    .p-highlights__card:first-child { grid-column: auto; }
    .p-highlights__card-media { aspect-ratio: unset; height: 100%; }
    .p-highlights__card:not(:first-child) .p-highlights__card-media {
        aspect-ratio: unset;
        height: 100%;
    }
}