/* ============================================================
   1. ベース・トークン
   ============================================================ */
:root {

    --ct-radius-sm: 0.5rem;
    --ct-radius-md: 0.75rem;
    --ct-radius-lg: 1.25rem;

    --ct-section-gap: 2.5rem;
    --ct-edge-gap:    1.25rem;
}

/* ============================================================
   2. body.is-top-page：フッターメニューを上部に、ヘッダー非表示
   ============================================================ */
body.is-top-page .fixed-header {
    display: none !important;
}

/* is-top-page では body の余分なオフセットを排除（テーマ由来のマージン対策）。
   admin-bar は管理者の利便性のため表示したまま残す。WP コアが html に付ける
   margin-top はそのまま admin-bar の表示領域になるため、白い余白にはならない。 */
html.is-top-page-html,
body.is-top-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* TOP は共通フッター（下部固定）を上部固定に反転する差分のみ。
   デザイン本体（緑帯・擬似要素アイコン5種・ストライプ仕切り・テキスト/img非表示・未読バッジ）
   は custom-my-environment.css の共通スタイルで適用される。 */
body.is-top-page .fixed-footer {
    top: 0 !important;
    bottom: auto !important;
}

/* ストライプ仕切りはコンテンツ側端に来るのが正なので、TOP（上部固定）では下端に反転。
   共通側のデフォルトは top:0（下部固定フッターの上端） */
body.is-top-page .fixed-footer-divider {
    top: auto;
    bottom: 0;
}

body.is-top-page .fixed-main {
    padding-top: var(--fixed-footer-height);
    padding-bottom: 0;
}


.custom-top-main {
    display: flex;
    flex-direction: column;
}

/* 各セクション間の仕切り線（HERO 緑帯と同じ黒）。
   各 section の下端に 1 本だけ引いて重複を避ける */
.custom-top-main > section {
    border-bottom: 1px solid #000000;
}
.custom-top-main > section:first-child {
    border-top: 1px solid #000000;
}

/* ピックアップ各セクション（CAST 8 以降）は区切りを明確にするため上下の余白を広げる */
.custom-top-cast8,
.custom-top-blog,
.custom-top-store,
.custom-top-reel,
.custom-top-sns {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

.custom-top-empty {
    padding: 2rem var(--ct-edge-gap);
    color: #ffffff;
    text-align: center;
    font-size: 0.875rem;
}


/* ============================================================
   5. ヒーロー
   ============================================================ */
.custom-top-hero {
    position: relative;
    width: 100%;
    /* stage（swiper + badge + pagination） → meta（緑帯）の縦並び */
    display: flex;
    flex-direction: column;
}

/* HERO 画像領域 = swiper + pagination + badge を包むラッパー
   badge が下端からほんの少し緑帯にはみ出るので overflow: visible */
.custom-top-hero-stage {
    position: relative;
    width: 100%;
    overflow: visible;
}

.custom-top-hero-swiper {
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 75vh;
    overflow: hidden;
}

.custom-top-hero-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

.custom-top-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.custom-top-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* CAST COLLECTION ロゴ画像（Figma 4:1758 を SVG として配置） */
.custom-top-hero-logo-image {
    width: 92.5%;
    max-width: 397px;
    height: auto;
    filter: drop-shadow(0 0.125rem 0.5rem rgba(0, 0, 0, 0.4));
}

/* Pagination：swiper 内に配置。badge（高さ 92px ≒ 5.75rem、画像下端から 1rem はみ出し）の
   上端より上に来るよう、画像下端から十分なクリアランスを確保 */
.custom-top-hero-pagination {
    position: absolute;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    bottom: 5.5rem !important; /* badge 上端 ≒ 4.75rem の少し上 */
    text-align: center;
    z-index: 5;
}

.custom-top-hero-pagination .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    margin: 0 0.25rem;
}

.custom-top-hero-pagination .swiper-pagination-bullet-active {
    background: var(--custom-green);
}

/* PICK UP! / 日付の緑帯（Figma 4:598 長方形 414, 554x77 @ y=855）
   画像の下に通常フロー配置。badge を内側 absolute で持つため position: relative */
.custom-top-hero-meta {
    position: relative;
    width: 100%;
    padding: 0.75rem var(--ct-edge-gap);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: var(--custom-green-vivid);
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
    min-height: 3rem;
}

/* バッジ（Figma 4:808 楕円形 5, 92×92, white + 黒2pxボーダー）
   stage 内で HERO 画像下端からほんの少し緑帯側にはみ出る位置に配置 */
.custom-top-hero-badge {
    position: absolute;
    left: 50%;
    bottom: -1rem; /* 画像下端から少しだけ緑帯にはみ出す */
    transform: translateX(-50%);
    width: 5.75rem;  /* 92px */
    height: 5.75rem; /* 92px */
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #000000;
    overflow: hidden;
    z-index: 6;
}

/* badge の中身（ring + icon）をまとめて回転させる rotator
   custom-top.js の Swiper slideChange で transform: rotate を更新 */
.custom-top-hero-badge-rotator {
    position: absolute;
    inset: 0;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* バッジ内のテキストリング（Figma 4:1789 グループ 412, 78.586×78.464） */
.custom-top-hero-badge-ring {
    position: absolute;
    inset: 7.5%; /* 円中央に 85% size で配置 */
    width: 85%;
    height: 85%;
    object-fit: contain;
    display: block;
}

/* バッジ中央のひし形アイコン（Figma 4:897, 45.03×45.097 ≒ 49% of 92px） */
.custom-top-hero-badge-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 49%;
    height: 49%;
    object-fit: contain;
    display: block;
}

.custom-top-hero-pickup-row {
    width: 100%; /* 子の margin-left: auto を効かせるため幅いっぱい */
    color: var(--custom-dark-soft);
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
    font-family: 'Montserrat', sans-serif;
}

.custom-top-hero-pickup-label {
    /* Figma 4:638: Montserrat SemiBold var(--custom-dark-soft) 17px */
    font-size: 17px;
    font-weight: 600;
}

.custom-top-hero-pickup-sep {
    font-size: 15px;
    font-weight: 600;
    color: var(--custom-dark-soft);
}

.custom-top-hero-pickup-date {
    /* Figma 4:686: Montserrat SemiBold var(--custom-dark-soft) 15px */
    font-size: 15px;
    font-weight: 600;
}

.custom-top-hero-pickup-sub {
    font-size: 13px;
    font-weight: 600;
    color: var(--custom-dark-soft);
    letter-spacing: 0.05em;
    margin-left: auto; /* 右寄せ */
}

/* ============================================================
   6. ガチャタグ
   ============================================================ */
.custom-top-gacha {
    position: relative;
    background: #ffffff;
    /* ステージ下部にボールが堆積するため、次セクション（紫帯など）に
       被らないよう十分な余白を確保 */
    padding-bottom: 5rem;
    margin-bottom: 1rem;
}

.custom-top-gacha-stage {
    position: relative;
    width: 100%;
    height: 28rem;
    overflow: hidden;
    /* 背景タッチでページ縦スクロールを許可する保険（JS 側で touchmove を
       preventDefault しなければブラウザがこの宣言通りに pan-y を採用する）。 */
    touch-action: pan-y;
}

.custom-top-gacha-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    height: 100%;
}

.custom-top-gacha-tag {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: auto;
}

/* ガチャボール：Figma からエクスポートした SVG ボール画像を背景として使用。
   タグ文字は球の中央に半透明白 pill で読みやすく表示。Matter.js は要素サイズから
   半径を計算するため画像差し替えのみで物理演算は流用される。 */
.custom-top-gacha-tag-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* デフォルトは md サイズ。data-size で上書き */
    width: 4.5rem;
    height: 4.5rem;
    padding: 0.5rem;
    border: none;
    background-color: transparent;
    background-image: url('images/assets/gacha-balls/ball-01.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    text-decoration: none;
    user-select: none;
    /* マウス/タッチイベントは <li>（Matter.js）が処理する。
       キーボードフォーカス＋Enter での遷移は通常通り動作する。 */
    pointer-events: none;
}

/* 文字数に応じてボールサイズを切り替え（PHP の data-size を反映）。
   Matter.js は要素の getBoundingClientRect から半径を計算するので、
   width/height を変えるだけで物理演算が自動追従する。 */
.custom-top-gacha-tag[data-size="sm"] .custom-top-gacha-tag-link {
    width: 4rem;     /* 64px：1〜3 文字 */
    height: 4rem;
    padding: 0.4rem;
}
.custom-top-gacha-tag[data-size="sm"] .custom-top-gacha-tag-text {
    font-size: 0.7rem;
}
.custom-top-gacha-tag[data-size="md"] .custom-top-gacha-tag-link {
    width: 5.5rem;   /* 88px：4〜5 文字 */
    height: 5.5rem;
    padding: 0.5rem;
}
.custom-top-gacha-tag[data-size="md"] .custom-top-gacha-tag-text {
    font-size: 0.8rem;
    white-space: nowrap; /* 5 文字以内は改行させない */
}
.custom-top-gacha-tag[data-size="lg"] .custom-top-gacha-tag-link {
    width: 6.75rem;  /* 108px：6〜8 文字 */
    height: 6.75rem;
    padding: 0.6rem;
}
.custom-top-gacha-tag[data-size="lg"] .custom-top-gacha-tag-text {
    font-size: 0.85rem;
}
.custom-top-gacha-tag[data-size="xl"] .custom-top-gacha-tag-link {
    width: 8.25rem;  /* 132px：9 文字以上 */
    height: 8.25rem;
    padding: 0.75rem;
}
.custom-top-gacha-tag[data-size="xl"] .custom-top-gacha-tag-text {
    font-size: 0.9rem;
}

/* タグ文字は黒アウトライン（4方向 text-shadow）で背景色問わず読めるように。
   pill 背景は使わず、ボールに直接文字が載っているデザイン。 */
.custom-top-gacha-tag-text {
    display: inline-block;
    max-width: 90%;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         0    1px 2px rgba(0, 0, 0, 0.4);
}

/* reduced-motion 時は静的グリッドなので、リンクのクリックを通す */
.custom-top-gacha-stage.is-reduced-motion .custom-top-gacha-tag-link {
    pointer-events: auto;
}

/* ガチャボール画像：12枚を nth-child で循環表示（タグの色マッピングは廃止） */
.custom-top-gacha-tag:nth-child(12n+1)  .custom-top-gacha-tag-link { background-image: url('images/assets/gacha-balls/ball-01.png'); }
.custom-top-gacha-tag:nth-child(12n+2)  .custom-top-gacha-tag-link { background-image: url('images/assets/gacha-balls/ball-02.png'); }
.custom-top-gacha-tag:nth-child(12n+3)  .custom-top-gacha-tag-link { background-image: url('images/assets/gacha-balls/ball-03.png'); }
.custom-top-gacha-tag:nth-child(12n+4)  .custom-top-gacha-tag-link { background-image: url('images/assets/gacha-balls/ball-04.png'); }
.custom-top-gacha-tag:nth-child(12n+5)  .custom-top-gacha-tag-link { background-image: url('images/assets/gacha-balls/ball-05.png'); }
.custom-top-gacha-tag:nth-child(12n+6)  .custom-top-gacha-tag-link { background-image: url('images/assets/gacha-balls/ball-06.png'); }
.custom-top-gacha-tag:nth-child(12n+7)  .custom-top-gacha-tag-link { background-image: url('images/assets/gacha-balls/ball-07.png'); }
.custom-top-gacha-tag:nth-child(12n+8)  .custom-top-gacha-tag-link { background-image: url('images/assets/gacha-balls/ball-08.png'); }
.custom-top-gacha-tag:nth-child(12n+9)  .custom-top-gacha-tag-link { background-image: url('images/assets/gacha-balls/ball-09.png'); }
.custom-top-gacha-tag:nth-child(12n+10) .custom-top-gacha-tag-link { background-image: url('images/assets/gacha-balls/ball-10.png'); }
.custom-top-gacha-tag:nth-child(12n+11) .custom-top-gacha-tag-link { background-image: url('images/assets/gacha-balls/ball-11.png'); }
.custom-top-gacha-tag:nth-child(12n)    .custom-top-gacha-tag-link { background-image: url('images/assets/gacha-balls/ball-12.png'); }

/* reduced motion: 静的グリッドフォールバック */
.custom-top-gacha-stage.is-reduced-motion {
    height: auto;
    padding: 1rem var(--ct-edge-gap);
}

.custom-top-gacha-stage.is-reduced-motion .custom-top-gacha-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    height: auto;
}

.custom-top-gacha-stage.is-reduced-motion .custom-top-gacha-tag {
    position: static;
    transform: none !important;
}

/* CAST & FUN マーキー帯（Figma 4:682 準拠：Inter Regular 109px、白文字、横スクロール無限ループ） */
.custom-top-gacha-section-mark {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4rem;
    background: var(--custom-purple);
    overflow: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    border-top: 1px solid #000000;
}

.custom-top-gacha-section-mark-marquee {
    display: flex;
    width: max-content;
    flex-wrap: nowrap;
    animation: custom-top-gacha-marquee 18s linear infinite;
    will-change: transform;
}

/* 画像 6 枚を均等に並べる。gap ではなく要素ごとの margin-right にすることで
   total width = N × (imgW + margin) になり、-50% で完全シームレスループ */
.custom-top-gacha-section-mark-image {
    height: 4rem;
    width: auto;
    flex-shrink: 0;
    margin-right: 1.5rem;
    display: block;
}

@keyframes custom-top-gacha-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* 6枚 ÷ 2 = 3枚ぶん移動でシームレス */
}

@media (prefers-reduced-motion: reduce) {
    .custom-top-gacha-section-mark-marquee {
        animation: none;
    }
}

/* ============================================================
   7. CAST 8
   ============================================================ */
.custom-top-cast8 {
    position: relative;
    background: #ffffff;
    /* 装飾の星画像（メタリック）をセクション右上に配置 */
    background-image: url('images/assets/star-decoration.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 8rem auto; /* 約 128px、モバイルで重く見えないサイズ */
}

.custom-top-cast8-swiper {
    padding: 0 var(--ct-edge-gap);
    overflow: visible;
}

/* CAST カード（Figma 4:1074 準拠：white bg + var(--custom-dark) 1px border + 15px radius）
   既存の 8 件横スクロール構造を維持しつつ、カード見た目を Figma 調に */
.custom-top-cast8-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #ffffff;
    border: 1px solid var(--custom-dark);
    border-radius: 15px;
    overflow: hidden;
}

.custom-top-cast8-image {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-size: cover;
    background-position: center;
    background-color: var(--custom-bg-gray);
}

.custom-top-cast8-body {
    padding: 0.5rem 0.75rem 0.75rem;
}

.custom-top-cast8-store {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--custom-gray-mid);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-top-cast8-name {
    margin-top: 0.125rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--custom-black);
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

/* ============================================================
   8. BLOG
   ============================================================ */
/* BLOG セクション（緑帯 var(--custom-green-vivid) と統一の背景 + Figma 準拠の白カード） */
.custom-top-blog {
    position: relative;
    background: var(--custom-green-vivid);
    /* 装飾の緑ハート画像（Figma グループ 402）をセクション右上に配置。
       ヘッダー部分の上に重ねて投稿の上端にかぶるくらいのサイズにする。 */
    background-image: url('images/assets/blog-heart.png');
    background-repeat: no-repeat;
    background-position: top 1.25rem right 1rem;
    background-size: 10rem auto; /* 約 160px、投稿上端にかぶる */
}

/* ヘッダーは透明にして背景のハート画像が透ける */
.custom-top-blog .custom-top-section-header {
    background: transparent;
}

/* 緑背景上の見出しは黒で（Figma の PICK UP! 4:638 と同じ var(--custom-dark-soft)） */
.custom-top-blog .custom-top-section-pickup,
.custom-top-blog .custom-top-section-heading {
    color: var(--custom-dark-soft);
}

.custom-top-blog-swiper {
    position: relative;
    padding: 0;
}

/* カード（CAST と同じ Figma 共通スタイル：white + var(--custom-dark) border + 15px radius） */
.custom-top-blog-card {
    display: block;
    background: #ffffff;
    border: 1px solid var(--custom-dark);
    border-radius: 15px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.custom-top-blog-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: center;
    background-color: var(--custom-bg-gray);
}

/* meta の左右 padding は 0 にして、border-top がカード幅いっぱいに引けるようにする。
   各子要素には個別に左右 padding を入れる。 */
.custom-top-blog-meta {
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.custom-top-blog-date {
    display: block;
    padding: 0.875rem 0.875rem 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--custom-gray-mid);
    letter-spacing: 0.02em;
}

.custom-top-blog-title {
    margin: 0.25rem 0 0.5rem;
    padding: 0 0.875rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    line-height: 1.4;
    font-weight: 700;
    color: var(--custom-black);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* VIEW MORE：上に薄ボーダー（カード幅いっぱい）、右寄せ、矢印は緑 */
.custom-top-blog-more {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem 0.875rem 0.625rem;
    border-top: 1px solid var(--custom-gray-light);
    text-align: right;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--custom-black);
    letter-spacing: 0.05em;
}

.custom-top-blog-more-arrow {
    margin-left: 0.25rem;
    color: var(--custom-green-vivid);
    font-weight: 900;
}

.custom-top-blog-prev,
.custom-top-blog-next {
    --swiper-navigation-size: 1.5rem;
    --swiper-navigation-color: var(--custom-green-vivid);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #ffffff;
    border: none;
    cursor: pointer;
}

/* ============================================================
   9. STORE
   ============================================================ */
/* SHOP/STORE セクション（Figma 準拠：白背景 + 月雲星デコ + 黒枠カード） */
.custom-top-store {
    position: relative;
    background: #ffffff;
    /* 月＋雲＋星のメタリック画像をセクション右上に配置 */
    background-image: url('images/assets/shop-decoration.png');
    background-repeat: no-repeat;
    background-position: top 1.25rem right 1rem;
    background-size: 9rem auto;
}

/* ヘッダーは透明にして装飾画像が透ける */
.custom-top-store .custom-top-section-header {
    background: transparent;
}

.custom-top-store-list {
    list-style: none;
    margin: 0;
    padding: 0 var(--ct-edge-gap);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* カード（CAST/BLOG と同じ Figma 共通スタイル：white + var(--custom-dark) border + 15px radius） */
.custom-top-store-card {
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border: 1px solid var(--custom-dark);
    border-radius: 15px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    min-height: 5.5rem;
    font-family: 'Montserrat', sans-serif;
}

.custom-top-store-image {
    flex: 0 0 6rem;
    background-size: cover;
    background-position: center;
    background-color: var(--custom-bg-gray);
}

.custom-top-store-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.625rem 0.875rem;
    gap: 0.125rem;
}

.custom-top-store-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.0625rem; /* 17px：店舗名は読み応えのあるサイズに */
    font-weight: 700;
    color: var(--custom-black);
    line-height: 1.25;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.custom-top-store-area {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--custom-gray-mid);
    margin: 0;
    letter-spacing: 0.02em;
}

/* VIEW MORE：カード内の最下行に固定（margin-top: auto で下端へ）、右寄せ */
.custom-top-store-more {
    margin-top: auto;
    align-self: stretch;
    text-align: right;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--custom-black);
    letter-spacing: 0.05em;
}

/* 矢印は BLOG の背景と同じ緑 */
.custom-top-store-more-arrow {
    margin-left: 0.25rem;
    color: var(--custom-green-vivid);
    font-weight: 900;
}

/* ============================================================
  10. REEL
   ============================================================ */
/* REEL セクション背景：1 枚の SVG にグリッド全要素を描画して repeat する方式。
   1 セル = 7.5rem × 7.5rem (= 120 × 120 px) を repeat。
   - 太い線 (#8d8d8d 2px) は SVG 中央 (60, 60) を通る → background-position: center で
     画面中央を通る
   - 細い線 (#484848 1px) は SVG 内 12/36/84/108 px = 太い線中央から 1.5rem ずつ離れた位置に 4 本
   - 太い線交点 (= SVG 中央) に白の十字（長さ 24 = 1/5 グリッド、太さ 4）
   - 5×5 中央 (= SVG 4 隅、隣接セルと組み合わさって完全な点に) に白の小さな円 */
.custom-top-reel {
    background-color: var(--custom-black);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><line x1='0' y1='12' x2='120' y2='12' stroke='%23484848' stroke-width='1'/><line x1='0' y1='36' x2='120' y2='36' stroke='%23484848' stroke-width='1'/><line x1='0' y1='84' x2='120' y2='84' stroke='%23484848' stroke-width='1'/><line x1='0' y1='108' x2='120' y2='108' stroke='%23484848' stroke-width='1'/><line x1='12' y1='0' x2='12' y2='120' stroke='%23484848' stroke-width='1'/><line x1='36' y1='0' x2='36' y2='120' stroke='%23484848' stroke-width='1'/><line x1='84' y1='0' x2='84' y2='120' stroke='%23484848' stroke-width='1'/><line x1='108' y1='0' x2='108' y2='120' stroke='%23484848' stroke-width='1'/><line x1='0' y1='60' x2='120' y2='60' stroke='%238d8d8d' stroke-width='2'/><line x1='60' y1='0' x2='60' y2='120' stroke='%238d8d8d' stroke-width='2'/><line x1='57' y1='60' x2='63' y2='60' stroke='white' stroke-width='1' stroke-linecap='round'/><line x1='60' y1='57' x2='60' y2='63' stroke='white' stroke-width='1' stroke-linecap='round'/><circle cx='0' cy='0' r='2' fill='white'/><circle cx='120' cy='0' r='2' fill='white'/><circle cx='0' cy='120' r='2' fill='white'/><circle cx='120' cy='120' r='2' fill='white'/></svg>");
    background-size: 7.5rem 7.5rem;
    background-position: center center;
    background-repeat: repeat;
}

/* REEL ヘッダーは透過 + 全要素を中央寄せ + 縦並び（PICK UP! / REEL / XXX を 3 行に） */
.custom-top-reel .custom-top-section-header {
    background: transparent;
    align-items: center;
    text-align: center;
}

.custom-top-reel .custom-top-section-heading-row {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* 暗背景上の見出しは白 */
.custom-top-reel .custom-top-section-pickup,
.custom-top-reel .custom-top-section-heading {
    color: #ffffff;
}

.custom-top-reel .custom-top-section-sub {
    color: rgba(255, 255, 255, 0.7);
}

.custom-top-reel-swiper {
    position: relative;
    /* centeredSlides + centeredSlidesBounds で Swiper 側がオフセットを管理する */
    padding: 0;
    /* スライドが大きくなった時にカードがはみ出して見えるよう余白で吐き出させる */
    overflow: visible;
}

.custom-top-reel-slide {
    /* スライド内でカードを中央に揃える（アクティブ時の視覚的フォーカスを安定化） */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 非アクティブはやや暗くフェードして「中央が選ばれている」感を出す */
    opacity: 0.55;
    transform: scale(0.92);
    transition: opacity 280ms ease, transform 280ms ease;
}

.custom-top-reel-slide.swiper-slide-active {
    opacity: 1;
    transform: scale(1);
}

.custom-top-reel-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 16rem;
    overflow: hidden;
    text-decoration: none;
    background: #2A2E29;
}

/* 形状バリエーション（PHP の data-shape でローテーション） */
/* 1) 丸形（円） */
.custom-top-reel-card[data-shape="round"] {
    border-radius: 50%;
}

/* 2) 縦長カプセル（pill 形状）。他形状（1:1, max-width 16rem）と縦サイズを揃えるため
   横幅を 12rem に縮小 → 縦 = 12 × 4/3 = 16rem で他と同じ高さに */
.custom-top-reel-card[data-shape="oval"] {
    aspect-ratio: 3 / 4;
    border-radius: 9999px;
    max-width: 12rem;
}

/* 3) 花びら型（6 花弁、中心円さらに大きく、花弁を内側に寄せて見切れ防止、付け根 90° 風） */
.custom-top-reel-card[data-shape="flower"] {
    border-radius: 0;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='black'><ellipse cx='50' cy='30' rx='20' ry='22'/><ellipse cx='50' cy='30' rx='20' ry='22' transform='rotate(60 50 50)'/><ellipse cx='50' cy='30' rx='20' ry='22' transform='rotate(120 50 50)'/><ellipse cx='50' cy='30' rx='20' ry='22' transform='rotate(180 50 50)'/><ellipse cx='50' cy='30' rx='20' ry='22' transform='rotate(240 50 50)'/><ellipse cx='50' cy='30' rx='20' ry='22' transform='rotate(300 50 50)'/><circle cx='50' cy='50' r='36'/></g></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='black'><ellipse cx='50' cy='30' rx='20' ry='22'/><ellipse cx='50' cy='30' rx='20' ry='22' transform='rotate(60 50 50)'/><ellipse cx='50' cy='30' rx='20' ry='22' transform='rotate(120 50 50)'/><ellipse cx='50' cy='30' rx='20' ry='22' transform='rotate(180 50 50)'/><ellipse cx='50' cy='30' rx='20' ry='22' transform='rotate(240 50 50)'/><ellipse cx='50' cy='30' rx='20' ry='22' transform='rotate(300 50 50)'/><circle cx='50' cy='50' r='36'/></g></svg>");
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}

/* 4) 星型（5 角星、角を丸めて viewBox 内に収める。頂点を内側に寄せて stroke で外膨張） */
.custom-top-reel-card[data-shape="star"] {
    border-radius: 0;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='50,12 60,40 90,40 66,58 75,86 50,70 25,86 34,58 10,40 40,40' fill='black' stroke='black' stroke-width='16' stroke-linejoin='round' stroke-linecap='round'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='50,12 60,40 90,40 66,58 75,86 50,70 25,86 34,58 10,40 40,40' fill='black' stroke='black' stroke-width='16' stroke-linejoin='round' stroke-linecap='round'/></svg>");
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}

/* カバー画像（初期表示・iframe マウント前のフォールバック） */
.custom-top-reel-cover {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #2A2E29;
    transition: opacity 200ms ease;
}

/* TikTok iframe（アクティブスライドのみマウント） */
.custom-top-reel-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    /* TikTok 動画は 9:16 縦長。1:1 の円形カードに収めるため scale で拡大 */
    transform: scale(1.78);
    transform-origin: center;
}

/* 再生中はカバーを薄くフェード（iframe ロード中はカバーが透けて見える保険） */
.custom-top-reel-card.is-playing .custom-top-reel-cover {
    opacity: 0;
}

/* クリックで /reel/?video_id=… に遷移する透過リンク（iframe 上に被せる） */
.custom-top-reel-card-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    /* iframe をクリック吸収させない */
}

.custom-top-reel-play {
    color: #ffffff;
    font-size: 1.5rem;
    text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.6);
    /* 再生中は ▶ を非表示（カバーと一緒にフェード） */
    transition: opacity 200ms ease;
}
.custom-top-reel-card.is-playing .custom-top-reel-play {
    opacity: 0;
}

.custom-top-reel-prev,
.custom-top-reel-next {
    --swiper-navigation-size: 1.5rem;
    --swiper-navigation-color: #ffffff;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    cursor: pointer;
}

/* ============================================================
  11. SNS
   ============================================================ */
.custom-top-sns {
    position: relative;
    background: #ffffff;
    font-family: 'Montserrat', sans-serif;
    overflow: hidden; /* 装飾楕円をセクション境界でクリップ */
}

/* 紫長円（カプセル）マークを CSS で描画。
   横幅は SNS カードリストの 90%、縦は直線部分がカードリスト上下端、
   その上下に半円が形成されてカードリストを上下にはみ出す */
.custom-top-sns::before {
    content: '';
    position: absolute;
    top: 3%;
    bottom: 3%;
    left: 50%;
    width: 80%;
    transform: translateX(-50%);
    background: var(--custom-purple);
    border-radius: 9999px; /* カプセル形状：短軸（横幅）の半分の半径で上下が半円に */
    pointer-events: none;
    z-index: 0;
}

/* 装飾の上にカード/ヘッダーが乗るよう前面に */
.custom-top-sns > * {
    position: relative;
    z-index: 1;
}

/* SNS リスト：モバイルから 2 カラム CSS columns でマソンリー風表示
   1〜4 枚の画像と本文 5 行で各カードの高さがバラつくが column-count + break-inside で
   段組内に詰まって表示される */
.custom-top-sns-grid {
    list-style: none;
    margin: 0;
    padding: 0 var(--ct-edge-gap);
    display: block;
    column-count: 2;
    column-gap: 0.5rem;
}
@media (min-width: 768px) {
    .custom-top-sns-grid {
        column-count: 2;
        column-gap: 0.75rem;
    }
}

/* JS パーソナライズ前の CLS 抑制：候補プール 24 件中、9 件目以降を初期非表示
   JS が再ランキング後に container に .is-personalized を付けるとこのルールは解除される
   （REEL のループモード複製スライドを誤って隠さないため） */
.custom-top-sns-grid:not(.is-personalized) > .custom-top-sns-item:nth-child(n+9) {
    display: none;
}
.custom-top-reel-swiper:not(.is-personalized) .swiper-wrapper > .swiper-slide:nth-child(n+9) {
    display: none;
}

/* マソンリー時にカードが列をまたいで途中で切れないように。
   column 内で縦に積まれるカードの間隔は margin-bottom で確保する。 */
.custom-top-sns-item {
    break-inside: avoid;
    margin: 0 0 0.5rem;
}
@media (min-width: 768px) {
    .custom-top-sns-item {
        margin-bottom: 0.75rem;
    }
}

/* カード本体（CAST/BLOG/SHOP と同じ Figma 共通：white + var(--custom-dark) 1px + 15px radius） */
.custom-top-sns-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--custom-dark);
    border-radius: 15px;
    overflow: hidden;
    transition: box-shadow 150ms ease;
    font-family: 'Montserrat', sans-serif;
}
.custom-top-sns-card:hover,
.custom-top-sns-card:focus-within {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}

/* ヘッダー：店舗名 + ハンドル + 𝕏 アイコン。BLOG と同じ緑 (var(--custom-green-vivid)) で塗りつぶし、
   下に黒ボーダー、𝕏 の左に縦線をヘッダーの上下端まで引ききる */
.custom-top-sns-card-header {
    display: flex;
    align-items: stretch; /* 子要素にヘッダー高さいっぱい引き伸ばし */
    justify-content: space-between;
    padding: 0; /* 内側の info/icon 側で padding を取る */
    background: var(--custom-green-vivid);
    border-bottom: 1px solid var(--custom-dark);
}

/* 店舗名 + ハンドル のラッパー（右側に黒ボーダーで 𝕏 アイコンと区切る） */
.custom-top-sns-card-header-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.0625rem;
    padding: 0.5rem 0.75rem;
    border-right: 1px solid var(--custom-dark); /* ヘッダーの上端〜下端まで貫通 */
}

/* 店舗名は表示しない（指示により非表示） */
.custom-top-sns-card-header-store {
    display: none;
}

.custom-top-sns-handle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--custom-black);
    text-decoration: none;
}
.custom-top-sns-handle:hover { text-decoration: underline; }

.custom-top-sns-icon {
    font-size: 1rem;
    font-weight: 900;
    color: var(--custom-black);
    line-height: 1;
    flex-shrink: 0;
    /* ヘッダーの上下端まで触れた縦線の右側に icon、上下中央寄せで padding */
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
}

/* 本文（最大140字 = 5行クランプ。リンク化はせず素のテキスト） */
.custom-top-sns-text {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 0.75rem 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--custom-black);
    text-decoration: none;
    word-break: break-word;
}
.custom-top-sns-text:hover { text-decoration: none; }

/* メディアグリッド（custom-sns プラグインと同じレイアウト規則） */
.custom-top-sns-media-grid {
    display: block;
    margin: 0 0.75rem 0.625rem;
    border-radius: var(--ct-radius-sm);
    overflow: hidden;
    background: var(--custom-bg-gray);
}
.custom-top-sns-media-item {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--custom-bg-gray);
}
.custom-top-sns-media-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 1枚：横幅いっぱい・縦は画像のアスペクトに任せる（custom-sns と同じ contain 振る舞い） */
.custom-top-sns-media-grid.custom-top-sns-media-count-1 {
    background: transparent;
}
.custom-top-sns-media-grid.custom-top-sns-media-count-1 .custom-top-sns-media-item {
    aspect-ratio: auto;
}
.custom-top-sns-media-grid.custom-top-sns-media-count-1 .custom-top-sns-media-image {
    height: auto;
    object-fit: contain;
    border-radius: var(--ct-radius-sm);
    max-height: 22rem;
}

/* 2 / 3 / 4 枚：CSS Grid */
.custom-top-sns-media-grid.custom-top-sns-media-count-2,
.custom-top-sns-media-grid.custom-top-sns-media-count-3,
.custom-top-sns-media-grid.custom-top-sns-media-count-4 {
    display: grid;
    gap: 0.125rem;
}

/* 2枚：横2分割（各 1:1） */
.custom-top-sns-media-grid.custom-top-sns-media-count-2 {
    grid-template-columns: 1fr 1fr;
}
.custom-top-sns-media-grid.custom-top-sns-media-count-2 .custom-top-sns-media-item {
    aspect-ratio: 1 / 1;
}

/* 3枚：左に縦長1枚 + 右に小2枚（custom-sns プラグインと同じ Twitter 風） */
.custom-top-sns-media-grid.custom-top-sns-media-count-3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.custom-top-sns-media-grid.custom-top-sns-media-count-3 .custom-top-sns-media-item:nth-child(1) {
    grid-row: 1 / span 2;
    grid-column: 1;
    aspect-ratio: 1 / 2;
}
.custom-top-sns-media-grid.custom-top-sns-media-count-3 .custom-top-sns-media-item:nth-child(2) {
    grid-row: 1;
    grid-column: 2;
    aspect-ratio: 1 / 1;
}
.custom-top-sns-media-grid.custom-top-sns-media-count-3 .custom-top-sns-media-item:nth-child(3) {
    grid-row: 2;
    grid-column: 2;
    aspect-ratio: 1 / 1;
}

/* 4枚：2x2 */
.custom-top-sns-media-grid.custom-top-sns-media-count-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.custom-top-sns-media-grid.custom-top-sns-media-count-4 .custom-top-sns-media-item {
    aspect-ratio: 1 / 1;
}

/* フッター：店舗名 + いいね */
.custom-top-sns-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.625rem;
    border-top: 1px solid var(--custom-gray-light);
    font-size: 0.75rem;
    color: var(--custom-gray-mid);
}
.custom-top-sns-store {
    font-weight: 600;
    color: var(--custom-black);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}
.custom-top-sns-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}
.custom-top-sns-like {
    color: #E0245E;
}

/* ============================================================
  12. ブランドフッター
   ============================================================ */
/* ブランドフッター（Figma 4:1248 / 4:1253 準拠：ロゴ + 著作権 + 大きい CAST & FUN マーキー） */
.custom-top-brand-footer {
    background: #f0f0f0;
    border-top: 1px solid #575757;
    padding: 2.5rem 0 0;
    text-align: center;
}

/* 紫色のキャスコレ + CAST COLLECTION ロゴ画像 */
.custom-top-brand-footer-logo {
    display: block;
    width: auto;
    max-width: 14rem;
    height: auto;
    margin: 0 auto 1rem;
}

.custom-top-brand-footer-copy {
    margin: 0 var(--ct-edge-gap) 1.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--custom-gray-mid);
}

/* CAST & FUN 画像マーキー（footer-marquee.png を流用、シームレスループ） */
.custom-top-brand-footer-marquee {
    background: var(--custom-purple);
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 5rem;
}

.custom-top-brand-footer-marquee-track {
    display: flex;
    width: max-content;
    flex-wrap: nowrap;
    animation: ct-brand-footer-marquee 120s linear infinite;
    will-change: transform;
}

.custom-top-brand-footer-marquee-image {
    height: 5rem;
    width: auto;
    /* オリジナル 2859×248 のアスペクト比を維持（flex 内で潰れ防止） */
    aspect-ratio: 2859 / 248;
    /* テーマ等の img { max-width: 100% } を解除して本来の横幅を出す */
    max-width: none;
    min-width: 0;
    flex-shrink: 0;
    margin-right: 1.5rem;
    display: block;
}

/* 8 枚並べた合計幅の半分 (= 4 枚分) を移動して、後半 4 枚で前半をカバーするシームレス */
@keyframes ct-brand-footer-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .custom-top-brand-footer-marquee-track {
        animation: none;
    }
}

/* ============================================================
   セクション末尾「もっと見る」CTA ボタン
   各セクションの背景色に追従するため variant クラスで色を切り替え
   ============================================================ */
.custom-top-section-cta {
    display: flex;
    justify-content: center;
    padding: 1rem var(--ct-edge-gap) 0;
}

.custom-top-section-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 14rem;
    padding: 0.75rem 1.5rem;
    background: #ffffff;
    color: var(--custom-black);
    border: 1.5px solid var(--custom-black);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, color 150ms ease;
}

.custom-top-section-cta-button:hover,
.custom-top-section-cta-button:focus-visible {
    transform: translateY(-1px);
    background: var(--custom-black);
    color: #ffffff;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
    outline: none;
}

.custom-top-section-cta-arrow {
    color: var(--custom-green-vivid);
    font-weight: 900;
    transition: transform 150ms ease;
}
.custom-top-section-cta-button:hover .custom-top-section-cta-arrow,
.custom-top-section-cta-button:focus-visible .custom-top-section-cta-arrow {
    transform: translateX(0.25rem);
}

/* BLOG（緑背景）専用 variant */
.custom-top-section-cta--on-accent .custom-top-section-cta-button {
    background: #ffffff;
    color: var(--custom-black);
    border-color: var(--custom-black);
}
.custom-top-section-cta--on-accent .custom-top-section-cta-button:hover,
.custom-top-section-cta--on-accent .custom-top-section-cta-button:focus-visible {
    background: var(--custom-black);
    color: #ffffff;
    border-color: var(--custom-black);
}

/* REEL（暗背景）専用 variant：REEL 背景 (var(--custom-black)) で塗りつぶしたボタン */
.custom-top-section-cta--on-dark .custom-top-section-cta-button {
    background: var(--custom-black);
    color: #ffffff;
    border-color: #ffffff;
}
.custom-top-section-cta--on-dark .custom-top-section-cta-button:hover,
.custom-top-section-cta--on-dark .custom-top-section-cta-button:focus-visible {
    background: #ffffff;
    color: var(--custom-black);
}

/* ============================================================
   モバイル最小幅 375px の保証
   ============================================================ */
@media (max-width: 374px) {
    :root {
        --ct-edge-gap: 0.75rem;
    }
    .custom-top-section-heading {
        font-size: 1.125rem;
    }
    .custom-top-section-cta-button {
        min-width: 12rem;
        padding: 0.6875rem 1.25rem;
        font-size: 0.8125rem;
    }
}

/* ============================================================
   全ページ共通：ページコンテンツのコンテナ
   ============================================================ */
/* TOP ページの中央コンテンツ枠。max-width 800px で中央寄せ。
   TOP は固定フッターを上部固定にしているので、その高さ分を padding-top で確保しヒーローが被らないようにする。 */
.custom-top-page {
    background: #ffffff;
    width: 100%;
    max-width: var(--custom-page-max-width);
    margin: 0 auto;
    color: var(--custom-black);
    overflow-x: hidden;
    padding-top: var(--fixed-footer-height);
}

/* ============================================================
   全ページ共通：セクション共通ヘッダー(PICK UP! + 大見出し + sub)
   ============================================================ */
/* PICK UP! は Figma 4:638 準拠(Montserrat SemiBold 17px var(--custom-dark-soft))。
   heading は Montserrat/Inter で大きく(Figma の各セクション h=69 相当)。 */
.custom-top-section-header {
    padding: 2rem var(--ct-edge-gap, 1.25rem) 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.custom-top-section-pickup {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.0625rem; /* 17px */
    font-weight: 600;
    color: var(--custom-dark-soft);
    letter-spacing: 0;
    line-height: 1;
}

/* heading とサブテキストを横並びにする wrapper */
.custom-top-section-heading-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.custom-top-section-heading {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 2.75rem; /* 44px */
    font-weight: 600;
    margin: 0;
    color: var(--custom-black);
    letter-spacing: 0.02em;
    line-height: 1;
}

.custom-top-section-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9375rem; /* 15px：見出し横で見える程度の大きさ */
    font-weight: 600;
    color: var(--custom-gray-mid);
    letter-spacing: 0.05em;
}

/* バリアント：accent(緑背景) */
.custom-top-section-header--accent {
    background: var(--custom-green);
    margin: 0;
}

.custom-top-section-header--accent .custom-top-section-pickup,
.custom-top-section-header--accent .custom-top-section-heading {
    color: var(--custom-black);
}

/* バリアント：dark(黒背景) */
.custom-top-section-header--dark {
    background: var(--custom-dark-warm);
    margin: 0;
}

.custom-top-section-header--dark .custom-top-section-pickup,
.custom-top-section-header--dark .custom-top-section-heading {
    color: #ffffff;
}

/* ============================================================
   PWAインストール案内
   ============================================================ */

.custom-top-pwa-fab {
    display: none;
    position: fixed;
    bottom: 3rem;
    right: max(1rem, calc((100vw - var(--custom-page-max-width)) / 2 + 1rem));
    z-index: 500;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
    transition: transform 0.15s;
}

.custom-top-pwa-fab.is-visible {
    display: inline-flex;
}

.custom-top-pwa-fab:active {
    transform: scale(0.96);
}

.custom-top-pwa-fab-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1.375rem;
    overflow: hidden;
    background: var(--custom-white);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.22);
}

.custom-top-pwa-fab-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.custom-top-pwa-fab-label {
    font-size: 0.875rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--custom-white);
    background: rgba(0, 0, 0, 0.55);
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.custom-top-ios-install-swiper {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 1.25rem;
}

.custom-top-ios-install-swiper .swiper-slide {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    height: auto;
}

.custom-top-ios-install-swiper .swiper-pagination {
    position: relative;
}

.custom-top-ios-install-swiper img {
    width: 90%;
    height: auto;
    margin-bottom: 1.25rem;
    margin-top: 2.5rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.custom-top-ios-install-swiper-text {
    width: 100%;
}

.custom-top-ios-install-swiper .swiper-pagination-bullet {
    background: var(--custom-purple);
    opacity: 0.3;
}

.custom-top-ios-install-swiper .swiper-pagination-bullet-active {
    background: var(--custom-purple);
    opacity: 1;
}