/* ============================================================
 * yomifami TOP CSS (Phase 1 skeleton)
 *
 *   - PC モック (index-pc.html) と SP モック (index-sp.html) の
 *     <style> 内容をそのまま統合した状態
 *   - PC: そのまま top-level
 *   - SP: @media screen and (max-width: 768px) でラップ
 *
 *   Phase 2 で共通 DOM 化＋クラス整理を行う
 * ============================================================ */

/* ============================================================
 *   PC レイアウト (default / >= 769px)
 *   ※ PC モックの内側 @media (max-width: 1100px / 600px) はそのまま残存
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* body に overflow-x:hidden を付けると .site-header の position:sticky が破綻する。
     横スクロール抑止は html だけに設定し、body は静かに保つ。 */
  html { overflow-x: hidden; }
  html, body { background: var(--bg); }

  body {
    font-family: arial, sans-serif;
    color: var(--text);
    line-height: 1.75;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
  }

  a { text-decoration: none; color: inherit; }
  img { display: block; width: 100%; object-fit: cover; }
  button { font-family: inherit; }

  .serif { font-family: arial, sans-serif; }

  /* ─── DEMO NOTE ─── */
  /* ─── MAIN LAYOUT ─── */
  .site-main {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 20px 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 304px;
    gap: 40px;
  }
  .site-main > .content { min-width: 0; }
  .site-main > .sidebar { min-width: 0; }

  /* ─── HERO ─── */
  .hero-carousel {
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 40px;
    position: relative;
    height: auto;
    box-shadow: var(--shadow);
  }

  .hero-slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .6s ease;
    display: flex;
    pointer-events: none;
  }

  /* active スライドだけ position:relative にして、カルーセルの高さを
     16/9 画像で自動算出させる（非 active は absolute で重ねてクロスフェード）*/
  .hero-slide.active { opacity: 1; pointer-events: auto; position: relative; height: 320px; }

  .hero-img {
    max-width: 60%; aspect-ratio: 16/9;
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  .hero-img-placeholder {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    font-size: 13px;
    color: rgba(255,255,255,.85);
    letter-spacing: .12em;
    font-family: arial, sans-serif;
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 2px, transparent 2px 14px),
      linear-gradient(135deg, var(--brand-mid), var(--brand-dark));
  }
  .hero-img-placeholder.trip   { background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 2px, transparent 2px 14px), linear-gradient(135deg, var(--cat-trip), #4e6a48); }
  .hero-img-placeholder.entame { background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 2px, transparent 2px 14px), linear-gradient(135deg, var(--cat-entame), #9c6527); }
  .hero-img-placeholder.recipe { background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 2px, transparent 2px 14px), linear-gradient(135deg, var(--cat-recipe), var(--pink-dark)); }

  .hero-content {
    width: 42%;
    background: var(--bg-card);
    /* 左の 16/9 画像より高くならないよう余白・gap を詰める
       （テキスト列が高いと画像が引き伸ばされ 16/9 が崩れるため）*/
    padding: 14px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    position: relative;
  }

  .hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--brand-pink);
    text-transform: uppercase;
  }
  .hero-kicker::before {
    content: '';
    width: 24px; height: 1px;
    background: var(--brand-pink);
  }

  .hero-cat {
    display: inline-block;
    background: var(--brand-pink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 3px;
    width: fit-content;
    letter-spacing: .08em;
  }

  .hero-title {
    font-family: arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--brand-dark);
    letter-spacing: .02em;
    /* 3 行で省略 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-meta {
    font-size: 12px;
    color: var(--brand-mid);
    letter-spacing: .08em;
  }

  .hero-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-dark);
    padding: 12px 0 10px;
    border-bottom: 1px solid var(--brand-dark);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    width: fit-content;
    margin-top: 8px;
    transition: gap .25s, color .25s;
  }
  .hero-link:hover { gap: 18px; color: var(--brand-pink); border-color: var(--brand-pink); }

  .hero-dots {
    position: absolute;
    bottom: 18px; left: 58%;
    transform: translateX(-50%);
    display: flex; gap: 6px;
  }

  .hero-dot {
    width: 20px; height: 2px;
    background: rgba(255,255,255,.4);
    cursor: pointer;
    transition: all .25s;
  }
  .hero-dot.active { background: #fff; }

  .hero-prev, .hero-next {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px;
    background: rgba(255,255,255,.9);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: grid; place-items: center;
    padding: 0;
    color: var(--brand-dark);
    z-index: 10;
    transition: background .2s, transform .2s, box-shadow .2s;
    box-shadow: 0 2px 8px rgba(84,69,65,.15);
  }
  .hero-prev:hover, .hero-next:hover {
    background: #fff;
    box-shadow: 0 4px 14px rgba(84,69,65,.25);
  }
  .hero-prev:active, .hero-next:active { transform: translateY(-50%) scale(.95); }
  .hero-prev svg, .hero-next svg {
    width: 14px; height: 14px;
    display: block;
    pointer-events: none;   /* svg内クリックでも button が受ける */
  }
  .hero-prev { left: 14px; }
  .hero-next { right: calc(40% + 14px); }

  /* ─── CATEGORY CHIPS ─── */
  .category-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    padding: 0 10px;
  }

  .tab-btn {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--brand-dark);
    background: var(--brand-dark);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    color: #fff;
    transition: all .2s;
    letter-spacing: .04em;
    opacity: .55;
  }

  .tab-btn:hover { opacity: .85; }
  .tab-btn.active {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
    opacity: 1;
  }

  /* ─── SECTION HEADER ─── */
  .section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }

  .section-title {
    font-family: arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--brand-dark);
    letter-spacing: .04em;
    line-height: 1.2;
  }
  .section-title small {
    display: block;
    font-family: arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: var(--brand-pink);
    letter-spacing: .2em;
    margin-bottom: 4px;
  }

  .see-all {
    font-size: 12px;
    color: var(--brand-dark);
    font-weight: 500;
    letter-spacing: .06em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .2s, gap .2s;
  }
  .see-all:hover { color: var(--brand-pink); gap: 10px; }
  .see-all::after { content: '→'; }

  /* ─── ARTICLE CARD ─── */
  .article-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 48px;
  }

  .article-grid.three-col { grid-template-columns: repeat(3, 1fr); }

  .article-card {
    background: transparent;
    overflow: hidden;
    cursor: pointer;
    transition: transform .25s;
  }
  /* a がデフォルト inline だと中の .card-img の aspect-ratio が正しく機能しない */
  .article-card > a { display: block; }
  .article-card:hover { transform: translateY(-3px); }
  .article-card:hover .card-title { color: var(--brand-pink); }

  .card-img {
    /* thumb570 (16/9) と完全一致させて余白も切れも出さない */
    aspect-ratio: 16/9;
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: var(--radius);
  }
  .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: center;
  }
  /* scroll-card / popular-img は親に合わせて埋める（親の aspect-ratio で決まる）*/
  .sc-img img,
  .popular-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: center;
  }

  .card-img-placeholder {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    font-size: 11px;
    color: rgba(255,255,255,.8);
    font-family: arial, sans-serif;
    letter-spacing: .1em;
  }
  .card-img-placeholder[data-ph="trip"]    { background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 2px, transparent 2px 12px), linear-gradient(135deg,#7a9a6e,#4e6a48);}
  .card-img-placeholder[data-ph="recipe"]  { background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 2px, transparent 2px 12px), linear-gradient(135deg,#e84e7f,#c93c6b);}
  .card-img-placeholder[data-ph="gourmet"] { background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 2px, transparent 2px 12px), linear-gradient(135deg,#c25a4f,#8b3a31);}
  .card-img-placeholder[data-ph="kurashi"] { background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 2px, transparent 2px 12px), linear-gradient(135deg,#6b8aa8,#3f5770);}
  .card-img-placeholder[data-ph="ticket"]  { background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 2px, transparent 2px 12px), linear-gradient(135deg,#b85c8e,#7e3c60);}
  .card-img-placeholder[data-ph="entame"]  { background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 2px, transparent 2px 12px), linear-gradient(135deg,#d9944b,#9c6527);}

  .card-category-badge {
    position: absolute;
    top: 12px; left: 12px;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .1em;
  }

  .card-body { padding: 14px 4px 0; }

  .card-title {
    font-family: arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.65;
    color: var(--brand-dark);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s;
    letter-spacing: .02em;
  }

  .card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--brand-mid);
    letter-spacing: .08em;
  }

  .card-tag {
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 10px;
    color: #fff;
    letter-spacing: .08em;
  }

  .cat-recipe  { background: var(--cat-recipe); }
  .cat-trip    { background: var(--cat-trip); }
  .cat-ticket  { background: var(--cat-ticket); }
  .cat-entame  { background: var(--cat-entame); }
  .cat-kurashi { background: var(--cat-kurashi); }
  .cat-gourmet { background: var(--cat-gourmet); }
  .cat-present { background: var(--cat-present); }
  .cat-fortune { background: var(--cat-fortune); }

  /* ─── PICKUP BANNER ─── */
  .pickup-banner {
    background: var(--brand-dark);
    border-radius: var(--radius);
    padding: 28px 32px;
    color: var(--cream-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 48px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: transform .3s;
  }
  .pickup-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, rgba(232,78,127,.08) 0 2px, transparent 2px 18px);
    pointer-events: none;
  }
  .pickup-banner:hover { transform: translateY(-2px); }

  .pickup-banner > * { position: relative; z-index: 1; }

  .pickup-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--brand-pink);
    letter-spacing: .24em;
    margin-bottom: 10px;
  }

  .pickup-text {
    font-family: arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    letter-spacing: .04em;
  }

  .pickup-arrow {
    font-size: 20px;
    width: 56px; height: 56px;
    border: 1px solid var(--cream-100);
    border-radius: 50%;
    display: grid; place-items: center;
    flex-shrink: 0;
    transition: all .3s;
    color: #fff;
  }
  .pickup-banner:hover .pickup-arrow { background: var(--brand-pink); border-color: var(--brand-pink); }

  /* ─── SIDEBAR ─── */
  .sidebar { display: flex; flex-direction: column; gap: 28px; }

  .widget {
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
  }

  .widget-header {
    padding: 14px 18px;
    font-family: arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--brand-dark);
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--line);
    letter-spacing: .06em;
  }
  .widget-header::before {
    content: '';
    width: 3px; height: 16px;
    background: var(--brand-pink);
    border-radius: 2px;
  }
  .widget-header .tag-link {
    font-size: 12px;
    font-weight: 400;
    padding: 16px 0 0 44px;
  }
  .widget-header a:hover {
    color: var(--brand-pink);
  }

  .widget-body { padding: 16px 18px; }

  /* Category links */
  .cat-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .cat-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    color: #fff !important;
    transition: transform .2s, filter .2s;
    cursor: pointer;
    letter-spacing: .04em;
  }
  .cat-link:hover { transform: translateX(2px); filter: brightness(1.08); }

  /* Popular articles */
  .popular-list { list-style: none; display: flex; flex-direction: column; }

  .popular-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: opacity .2s;
  }
  .popular-item:last-child { border-bottom: none; }
  .popular-item:first-child { padding-top: 4px; }
  .popular-item:hover .popular-title { color: var(--brand-pink); }

  .popular-rank {
    font-family: arial, sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--cream-300);
    min-width: 24px;
    line-height: 1;
    padding-top: 2px;
    font-style: italic;
  }

  .popular-rank.gold   { color: var(--brand-pink); }
  .popular-rank.silver { color: var(--brand-mid); }
  .popular-rank.bronze { color: var(--cat-entame); }

  .popular-img {
    width: 96px;            /* 親 flex 内での明示幅 */
    aspect-ratio: 16/9;     /* → 高さは 54px に自動算出 */
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    overflow: hidden;
  }
  .popular-img .card-img-placeholder { font-size: 0; }

  .popular-title {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s;
  }
  /* a:link/a:hover (common.css, 0,0,1,1) を上回るため a.popular-item__more:link/:visited (0,0,2,1) で明示 */
  .popular-item__more,
  a.popular-item__more:link,
  a.popular-item__more:visited {
    border-radius: 999px;
    padding: 9px 22px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .25s;
    letter-spacing: .1em;
    display: block;
    width: fit-content;
    margin: 10px auto 0;
    background: #3b2e2b;
    color: #fff;
    text-align: center;
  }
  .popular-item__more:hover,
  a.popular-item__more:hover {
    background: var(--brand-pink);
    color: #fff;
  }

  /* Fortune widget */
  .fortune-widget {
    background: linear-gradient(155deg, var(--brand-dark) 0%, #3b2e2b 100%);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--cream-100);
    padding: 24px 20px;
    text-align: center;
    cursor: pointer;
    transition: transform .25s;
    position: relative;
  }
  .fortune-widget::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(135deg, rgba(232,78,127,.12) 0 1px, transparent 1px 12px);
  }
  .fortune-widget > * { position: relative; }
  .fortune-widget:hover { transform: translateY(-2px); }

  .fw-kicker { font-size: 10px; color: var(--brand-pink); letter-spacing: .3em; margin-bottom: 8px; font-weight: 700; }
  .fw-title  { font-family: arial, sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 6px; color: #fff; letter-spacing: .04em;}
  .fw-sub    { font-size: 11px; color: rgba(236,234,218,.75); margin-bottom: 16px; letter-spacing: .06em; }
  .fw-btn {
    background: transparent;
    border: 1px solid var(--cream-100);
    border-radius: 999px;
    padding: 9px 22px;
    font-size: 12px;
    font-weight: 500;
    color: var(--cream-100);
    cursor: pointer;
    transition: all .25s;
    letter-spacing: .1em;
  }
  .fw-btn:hover { background: var(--brand-pink); border-color: var(--brand-pink); color: #fff; }

  /* Newsletter widget */
  .newsletter-widget {
    background: var(--brand-cream);
    border-radius: var(--radius);
    padding: 22px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .newsletter-widget::before {
    content: '';
    position: absolute;
    top: -20px; right: -20px;
    width: 80px; height: 80px;
    background: var(--brand-pink);
    border-radius: 50%;
    opacity: .14;
  }
  .nw-kicker { font-size: 10px; color: var(--brand-pink); letter-spacing: .3em; margin-bottom: 6px; font-weight: 700; }
  .nw-title { font-family: arial, sans-serif; font-weight: 700; font-size: 17px; margin-bottom: 6px; color: var(--brand-dark); letter-spacing: .04em; }
  .nw-sub { font-size: 11px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.7; }
  .nw-btn {
    background: var(--brand-dark);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 11px 22px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    transition: background .25s;
    letter-spacing: .1em;
  }
  .nw-btn:hover { background: var(--brand-pink); }

  /* Banner widget */
  /* a:link (0,0,1,1) を上回るため a.banner-widget:link/:visited (0,0,2,1) で明示 */
  .banner-widget,
  a.banner-widget:link,
  a.banner-widget:visited {
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform .25s;
    background: var(--brand-pink);
    color: #fff;
    padding: 22px 20px;
    text-align: center;
    position: relative;
  }
  .banner-widget::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 1px, transparent 1px 10px);
  }
  .banner-widget > * { position: relative; }
  .banner-widget:hover { transform: translateY(-2px); }
  .banner-widget .bw-kicker { font-size: 10px; letter-spacing: .3em; margin-bottom: 8px; opacity: .85; font-weight: 700; }
  .banner-widget .bw-title { font-family: arial, sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 4px; letter-spacing: .04em; }
  .banner-widget .bw-sub { font-size: 11px; opacity: .9; }

  /* ─── 背景画像オプション（任意・未設定時は従来背景のまま）─── */
  .fortune-widget.has-img,
  .banner-widget.has-img,
  a.banner-widget.has-img:link,
  a.banner-widget.has-img:visited {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .fortune-widget.has-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    display: flex;
    flex-direction: column;
  }
  /* 画像カードでは「占いを見る →」ボタンを下端・中央へ */
  .fortune-widget.has-img .fw-btn {
    align-self: center;
    margin-top: auto;
  }
  .banner-widget.has-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
  /* 画像時は ::before を文字可読用の暗めオーバーレイに差し替え（ストライプ無効）*/
  .fortune-widget.has-img::before,
  .banner-widget.has-img::before {
    background: linear-gradient(180deg, rgba(40,30,28,.35) 0%, rgba(40,30,28,.72) 100%);
  }

  /* Tag cloud */
  .tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 18px; }
  .tag-item {
    padding: 5px 12px;
    background: var(--cream-50);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 11px;
    color: var(--brand-dark);
    cursor: pointer;
    transition: all .2s;
  }
  .tag-item::before { content: '#'; color: var(--brand-mid); margin-right: 2px; }
  .tag-item:hover { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
  .tag-item:hover::before { color: var(--brand-pink); }

  /* ─── SCROLL CARDS ─── */
  .feature-section { margin-bottom: 48px; }

  /* デフォルト: 3 列 grid（エンタメ/チケット/くらし/グルメ/宿旅/プレゼント/占い 等） */
  .scroll-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 4px;
    margin: -4px;
  }
  @media (max-width: 900px) {
    .scroll-cards { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 480px) {
    .scroll-cards { grid-template-columns: 1fr; }
  }

  /* レシピ用: 横スクロール式（PC で 4 枚見せ、5 枚目以降は右へスクロール） */
  .scroll-cards.scroll-cards--scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 4px 4px 10px;
    margin: -4px -4px 0;
    scrollbar-width: thin;
  }
  .scroll-cards.scroll-cards--scroll .scroll-card {
    flex: 0 0 calc((100% - 48px) / 4);   /* 4 枚分 + 16px gap × 3 */
    scroll-snap-align: start;
  }
  @media (max-width: 900px) {
    .scroll-cards.scroll-cards--scroll .scroll-card {
      flex: 0 0 calc((100% - 32px) / 3); /* 3 枚分 + 16px × 2 */
    }
  }
  @media (max-width: 600px) {
    .scroll-cards.scroll-cards--scroll .scroll-card {
      flex: 0 0 calc((100% - 16px) / 2); /* 2 枚分 */
    }
  }

  .scroll-cards::-webkit-scrollbar { display: none; }
  .scroll-cards.scroll-cards--scroll::-webkit-scrollbar { display: block; height: 6px; }
  .scroll-cards.scroll-cards--scroll::-webkit-scrollbar-thumb { background: var(--cream-200); border-radius: 3px; }

  .scroll-card {
    display: block;
    min-width: 0;
    cursor: pointer;
    transition: transform .25s;
  }
  .scroll-card:hover { transform: translateY(-3px); }
  .scroll-card:hover .sc-title { color: var(--brand-pink); }

  .sc-img {
    aspect-ratio: 16/9;
    border-radius: var(--radius);
    overflow: hidden;
  }
  .sc-body { padding: 12px 2px 0; }
  .sc-title {
    font-family: arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
    color: var(--brand-dark);
    transition: color .2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sc-meta { font-size: 10px; color: var(--brand-mid); margin-top: 6px; letter-spacing: .08em; }

  /* ─── BOTTOM NAV (mobile) ─── */
  .bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    z-index: 200;
    padding: 6px 0 env(safe-area-inset-bottom);
    box-shadow: 0 -4px 16px rgba(84,69,65,.1);
  }
  .bottom-nav-list { display: flex; justify-content: space-around; list-style: none; }
  .bottom-nav-item a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 10px; font-size: 10px;
    color: var(--brand-mid); font-weight: 700;
    transition: color .2s;
  }
  .bottom-nav-item a svg { width: 18px; height: 18px; }
  .bottom-nav-item a.active, .bottom-nav-item a:hover { color: var(--brand-pink); }

  /* ─── SCROLL TO TOP ─── */
  .scroll-top {
    position: fixed;
    bottom: 28px; right: 28px;
    width: 46px; height: 46px;
    background: var(--brand-dark);
    color: #fff;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(84,69,65,.3);
    transition: transform .2s, opacity .2s, background .2s;
    z-index: 150;
    border: none;
  }
  .scroll-top:hover { transform: translateY(-2px); background: var(--brand-pink); }

  /* ─── RESPONSIVE ─── */
  @media (max-width: 1100px) {
    .site-main {
      grid-template-columns: minmax(0, 1fr);
      gap: 32px;
    }
    .hero-carousel { height: auto; min-height: 360px; }
    .hero-slide { flex-direction: column; }
    .hero-img { width: 100%; aspect-ratio: 16/9; }
    .hero-content { width: 100%; padding: 24px; }
    .hero-title { font-size: 17px; }
    .hero-dots { left: 50%; }
    .hero-next { right: 14px; }
    .article-grid.three-col { grid-template-columns: repeat(2, 1fr); }
    .bottom-nav { display: block; }
    .social-icons.header-social { display: none; }
    .btn-present { padding: 7px 14px; font-size: 11px; box-shadow: 0 2px 8px rgba(232,78,127,.25); }
    .yf-profile { grid-template-columns: 1fr; text-align: center; }
    .yf-profile__photo { margin: 0 auto; }
    .yf-profile__links { justify-content: center; }
  }

  @media (max-width: 600px) {
    .header-top { padding: 12px 16px; }
    .logo-sub { display: none; }
    .article-grid { grid-template-columns: 1fr; gap: 28px; }
    .article-grid.three-col { grid-template-columns: 1fr; }
    .cat-links { grid-template-columns: 1fr 1fr; }
    .preserved-part { padding: 20px; }
    .yf-accordion__inner li { grid-template-columns: 1fr; gap: 2px; }
    .section-title { font-size: 18px; }

    /* ─── PICKUP BANNER (SP モック準拠) ─── */
    .pickup-banner {
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 10px;
      margin: 28px 18px 28px;
      padding: 26px 22px 22px;
      border-radius: 2px;
    }
    /* 斜めストライプを止めて内側ボーダーに差し替え */
    .pickup-banner::before {
      background: none;
      inset: 8px;
      border: 1px solid rgba(236,234,218,.28);
      border-radius: 2px;
    }
    /* 内側ラッパ <div> を flex 子の中継ぎとして無効化 */
    .pickup-banner > div:not(.pickup-arrow) {
      display: contents;
    }
    .pickup-label {
      font-size: 10px;
      letter-spacing: .3em;
      font-weight: 800;
      margin-bottom: 0;
    }
    .pickup-text {
      font-size: 20px;
      line-height: 1.55;
      letter-spacing: .02em;
    }
    /* 円形矢印 → テキスト型 "READ THE STORY →" に */
    .pickup-arrow {
      width: auto; height: auto;
      border: none; border-radius: 0;
      background: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: arial, sans-serif;
      font-size: 10px;
      letter-spacing: .24em;
      font-weight: 800;
      color: var(--cream-100);
      place-items: initial;
    }
    .pickup-arrow::before {
      content: "READ THE STORY";
    }
    .pickup-banner:hover .pickup-arrow {
      background: none;
      border-color: transparent;
    }
  }

  /* ─── TAG BROWSER ─── */
  .tag-browser__body { padding: 12px 16px 18px; max-height: 520px; overflow-y: auto; }
  .tag-browser__body::-webkit-scrollbar { width: 6px; }
  .tag-browser__body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

  .tb-cat { padding: 14px 0; border-bottom: 1px dashed var(--line); }
  .tb-cat:last-child { border-bottom: none; }
  .tb-cat:first-child { padding-top: 6px; }

  .tb-cat__title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700;
    color: var(--brand-dark);
    letter-spacing: .04em;
    margin-bottom: 10px;
  }
  .tb-cat__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
  .tb-cat__flag {
    font-size: 10px;
    font-weight: 700;
    background: var(--pink-soft);
    color: var(--brand-pink);
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: .04em;
    margin-left: 2px;
  }

  .tb-group { margin-bottom: 10px; }
  .tb-group:last-child { margin-bottom: 0; }
  .tb-group__label {
    font-size: 10px;
    color: var(--brand-mid);
    letter-spacing: .06em;
    margin-bottom: 6px;
    font-weight: 500;
  }
  .tb-chips { display: flex; flex-wrap: wrap; gap: 5px; }
  /* a:link (0,0,1,1) を上回るため a.foo:link/:visited (0,0,2,1) で明示。
     span にも同じピル形状を共有させるため span.tb-chip もまとめて指定。 */
  a.tb-chip,
  a.tb-chip:link,
  a.tb-chip:visited,
  span.tb-chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--brand-dark);
    background: #fff;
    border: 1px solid var(--line);
    transition: transform .15s, filter .15s;
    cursor: pointer;
    letter-spacing: .02em;
    text-decoration: none;
  }
  a.tb-chip:hover { transform: translateY(-1px); filter: brightness(.97); }
  a.tb-chip--trip:link,    a.tb-chip--trip:visited,    span.tb-chip--trip    { background: #eaf3fb; border-color: #c7dbed; color: #3d5f7e; }
  a.tb-chip--scene:link,   a.tb-chip--scene:visited,   span.tb-chip--scene   { background: #edf6e9; border-color: #c9e0c0; color: #4a6a3f; }
  a.tb-chip--feature:link, a.tb-chip--feature:visited, span.tb-chip--feature { background: #fbf1dc; border-color: #ecd9af; color: #7e5e2a; }
  a.tb-chip--food:link,    a.tb-chip--food:visited,    span.tb-chip--food    { background: #fbe6e6; border-color: #edc2c2; color: #8f3f3f; }
  a.tb-chip--price:link,   a.tb-chip--price:visited,   span.tb-chip--price   { background: #f2efe5; border-color: #ddd5c1; color: #6b5f4a; }
  /* present tabs */
  .present-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:-4px 0 22px; }
  .ptab { background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 16px; font:inherit; font-size:13px; font-weight:700; color:var(--brand-dark); cursor:pointer; letter-spacing:.04em; display:inline-flex; align-items:center; gap:8px; transition:all .2s; }
  .ptab:hover { border-color:var(--brand-pink); color:var(--brand-pink); }
  .ptab.active { background:var(--brand-pink); border-color:var(--brand-pink); color:#fff; }
  .ptab__sub { font-size:10px; font-weight:500; opacity:.75; letter-spacing:.02em; }

  /* present grid (PC: 4列) */
  .present-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }
  a.pcard,
  a.pcard:link,
  a.pcard:visited {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform .25s;
  }
  a.pcard:hover { transform: translateY(-3px); }
  a.pcard:hover .pcard__title { color: var(--brand-pink); }
  .pcard__img {
    aspect-ratio: 16/9;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 14px;
  }
  .pcard__ph {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    font-family: arial, sans-serif;
    font-size: 14px; letter-spacing: .18em; color: rgba(255,255,255,.85);
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 2px, transparent 2px 14px), linear-gradient(135deg, var(--cat-present), #b78a2d);
  }
  .pcard__title {
    font-family: arial, sans-serif;
    font-size: 14px; font-weight: 700; line-height: 1.55;
    color: var(--brand-dark);
    letter-spacing: .02em;
    margin-bottom: 10px;
    /* 2 行で省略 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    transition: color .2s;
  }
  .pcard__date {
    font-size: 11px;
    color: var(--brand-mid);
    letter-spacing: .06em;
  }
  /* フィルタで非表示（specificity を確保するため :where で重ねる）*/
  .present-section .present-grid.is-hidden,
  .present-section .pcard.is-hidden { display: none !important; }
  @media (max-width: 1100px) {
    .present-grid { grid-template-columns: repeat(2, 1fr); }
  }

/* ============================================================
 *   SP レイアウト (<= 768px)
 *   ※ SP モックの style をまるごとここに入れて、PC を上書き
 * ============================================================ */
@media screen and (max-width: 768px) {
:root {
    /* Brand */
    --brand-dark:   #544541;
    --brand-mid:    #897570;
    --brand-pink:   #e84e7f;
    --brand-cream:  #eceada;
    --cream-50:     #fffff9;
    --cream-100:    #eceada;
    --cream-200:    #ddd9c3;
    --pink-soft:    #fce3ec;
    --line:         #d9d3c0;
    --text:         #3a2f2c;
    --text-muted:   #7a6b66;
    --text-light:   #a79e97;
    --bg:           var(--cream-50);
    --bg-card:      #ffffff;

    /* Category colours */
    --cat-recipe:   #e84e7f;
    --cat-trip:     #7a9a6e;
    --cat-ticket:   #b85c8e;
    --cat-entame:   #d9944b;
    --cat-kurashi:  #6b8aa8;
    --cat-gourmet:  #c25a4f;
    --cat-present:  #d4a64a;
    --cat-fortune:  #8b7bb0;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { background: var(--bg); }
  body {
    font-family: arial, sans-serif;
    color: var(--text);
    line-height: 1.75;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
  }
  a { text-decoration: none; color: inherit; }
  img { display: block; max-width: 100%; }
  button { font-family: inherit; border: none; background: none; cursor: pointer; }

  /* ── Placeholder gradients per category ── */
  .ph {
    position: relative; overflow: hidden;
    display: grid; place-items: center;
    color: rgba(255,255,255,.82);
    font-size: 9px; letter-spacing: .18em;
    background: linear-gradient(135deg, #b5a48f, #7a6658);
  }
  .ph::before {
    content:''; position:absolute; inset:0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 55%);
  }
  .ph[data-ph="trip"]    { background: linear-gradient(135deg, #b5c9aa, var(--cat-trip)); }
  .ph[data-ph="recipe"]  { background: linear-gradient(135deg, #f4a5c0, var(--cat-recipe)); }
  .ph[data-ph="ticket"]  { background: linear-gradient(135deg, #d8a3c2, var(--cat-ticket)); }
  .ph[data-ph="entame"]  { background: linear-gradient(135deg, #eec391, var(--cat-entame)); }
  .ph[data-ph="kurashi"] { background: linear-gradient(135deg, #a8c1d6, var(--cat-kurashi)); }
  .ph[data-ph="gourmet"] { background: linear-gradient(135deg, #e0a297, var(--cat-gourmet)); }
  .ph[data-ph="present"] { background: linear-gradient(135deg, #ecd297, var(--cat-present)); }
  .ph[data-ph="fortune"] { background: linear-gradient(135deg, #c2b6d4, var(--cat-fortune)); }
  .ph__label { position: relative; z-index: 1; }

  /* ═══ HERO ═══ */
  .hero {
    position: relative;
    margin: 18px 14px 20px;
  }
  .hero__img {
    aspect-ratio: 16/9;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(84,69,65,.14);
    overflow: hidden;
  }
  .hero__img .ph { height: 100%; }
  .hero__caption {
    display: flex; justify-content: space-between;
    padding: 10px 4px 0;
    font-family: arial, sans-serif;
    font-size: 10px; color: var(--text-muted);
    letter-spacing: .16em;
  }
  .hero__cat {
    color: var(--brand-dark); font-weight: 800;
  }
  .hero__title {
    padding: 6px 4px 0;
    font-family: arial, sans-serif;
    font-size: 18px; line-height: 1.6; color: var(--brand-dark);
    font-weight: 700; letter-spacing: .02em;
  }
  .hero__dots {
    display: flex; justify-content: center; gap: 6px;
    margin-top: 16px;
  }
  .hero__dots span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--cream-200);
    transition: width .2s, background .2s;
  }
  .hero__dots span.active {
    width: 18px; background: var(--brand-dark); border-radius: 3px;
  }

  /* ═══ SECTION MARK ═══ */
  .section-mark {
    padding: 36px 18px 14px;
    display: grid; grid-template-columns: 1fr auto;
    align-items: end; gap: 14px;
  }
  .section-mark__no { display: none; }
  .section-mark__body { min-width: 0; }
  .section-mark__small {
    font-family: arial, sans-serif; font-size: 10px;
    letter-spacing: .28em; color: var(--brand-mid);
    font-weight: 700; text-transform: uppercase;
  }
  .section-mark__title {
    font-family: arial, sans-serif;
    font-size: 22px; font-weight: 700;
    color: var(--brand-dark); margin-top: 4px;
    letter-spacing: .02em;
  }
  /* タグから選ぶ → タグ一覧をみる リンク（PC widget-header と同形・SP サイズ） */
  .section-mark__title:has(.tag-link) {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  .section-mark__title .tag-link {
    margin-left: auto;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--brand-mid);
    white-space: nowrap;
    transition: color .2s;
  }
  .section-mark__title .tag-link:hover {
    color: var(--brand-pink);
  }
  .section-mark__more {
    font-size: 10px; letter-spacing: .18em; color: var(--brand-mid);
    font-weight: 700; padding-bottom: 6px;
  }
  .section-mark__rule {
    height: 1px; background: var(--line);
    margin: 0 18px;
  }

  /* ═══ LATEST ROWS (magazine rows) ═══ */
  .mag-rows { padding: 6px 0 8px; }
  .mag-row {
    display: grid; grid-template-columns: 173px 1fr;
    gap: 14px; padding: 18px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-card);
  }
  .mag-row:first-child { border-top: 1px solid var(--line); }
  .mag-row__img {
    aspect-ratio: 16/9; align-self: start;
    border-radius: 2px; overflow: hidden;
  }
  .mag-row__img .ph { height: 100%; }
  .mag-row__body { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
  .mag-row__cat {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: arial, sans-serif;
    font-size: 9px; letter-spacing: .22em; font-weight: 800;
  }
  .mag-row__cat::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
  }
  .mag-row__title {
    font-family: arial, sans-serif;
    font-size: 12px; line-height: 1.5; font-weight: 700;
    color: var(--brand-dark); margin-top: 5px;
    letter-spacing: .02em;
    display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .mag-row__date {
    font-family: arial, sans-serif;
    font-size: 10px; color: var(--text-muted);
    letter-spacing: .14em; margin-top: 5px;
  }

  .mag-row--trip    .mag-row__cat { color: var(--cat-trip); }
  .mag-row--recipe  .mag-row__cat { color: var(--cat-recipe); }
  .mag-row--ticket  .mag-row__cat { color: var(--cat-ticket); }
  .mag-row--entame  .mag-row__cat { color: var(--cat-entame); }
  .mag-row--kurashi .mag-row__cat { color: var(--cat-kurashi); }
  .mag-row--gourmet .mag-row__cat { color: var(--cat-gourmet); }
  .mag-row--present .mag-row__cat { color: var(--cat-present); }
  .mag-row--fortune .mag-row__cat { color: var(--cat-fortune); }

  /* ═══ PICKUP BANNER ═══ */
  .pickup {
    display: flex; flex-direction: column; gap: 10px;
    margin: 28px 14px;
    position: relative;
    background: var(--brand-dark); color: var(--cream-50);
    border-radius: 2px; overflow: hidden;
    padding: 26px 22px 22px;
  }
  .pickup::before {
    content: ''; position: absolute; inset: 8px;
    border: 1px solid rgba(236,234,218,.28);
    border-radius: 2px; pointer-events: none;
  }
  .pickup__kicker {
    font-family: arial, sans-serif; font-size: 10px;
    letter-spacing: .3em; color: var(--brand-pink); font-weight: 800;
  }
  .pickup__title {
    font-family: arial, sans-serif;
    font-size: 20px; line-height: 1.55; font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
  }
  .pickup__arrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: arial, sans-serif; font-size: 10px; letter-spacing: .24em;
    color: var(--cream-100); font-weight: 800;
  }

  /* ═══ HORIZONTAL SCROLL CARDS ═══ */
  .scroll-strip {
    display: flex; gap: 14px;
    padding: 4px 18px 18px;
    overflow-x: auto; scrollbar-width: none;
  }
  .scroll-strip::-webkit-scrollbar { display: none; }
  .scroll-card {
    flex: 0 0 220px;
  }
  .scroll-card__img {
    aspect-ratio: 16/9;
    border-radius: 2px; overflow: hidden;
  }
  .scroll-card__img .ph { height: 100%; }
  .scroll-card__num {
    font-family: arial, sans-serif; font-size: 10px;
    letter-spacing: .22em; color: var(--brand-mid);
    font-weight: 700; margin-top: 10px;
  }
  .scroll-card__title {
    font-family: arial, sans-serif;
    font-size: 13px; line-height: 1.6; font-weight: 700;
    color: var(--brand-dark); margin-top: 4px;
    letter-spacing: .02em;
    display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .scroll-card__date {
    font-family: arial, sans-serif;
    font-size: 10px; color: var(--text-muted);
    letter-spacing: .14em; margin-top: 6px;
  }

  /* ═══ FEATURE POSTER (full-bleed card) ═══ */
  .poster {
    display: block;
    margin: 8px 14px 0;
    position: relative;
    border-radius: 2px; overflow: hidden;
    aspect-ratio: 16/9;
  }
  .poster .ph { height: 100%; }
  .poster__shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.72) 100%);
  }
  .poster__body {
    position: absolute; left: 18px; right: 18px; bottom: 18px;
    color: #fff;
  }
  .poster__kicker {
    font-family: arial, sans-serif; font-size: 9px;
    letter-spacing: .28em; font-weight: 800; opacity: .9;
  }
  .poster__title {
    font-family: arial, sans-serif;
    font-size: 18px; line-height: 1.55; font-weight: 700;
    letter-spacing: .02em; margin-top: 6px;
    text-shadow: 0 2px 16px rgba(0,0,0,.35);
  }
  .poster__date {
    font-family: arial, sans-serif;
    font-size: 10px; letter-spacing: .16em;
    opacity: .85; margin-top: 6px;
  }

  /* ═══ TWO-UP GRID ═══ */
  .two-up {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px 14px;
    padding: 6px 18px 8px;
  }
  .two-up__card .two-up__img {
    aspect-ratio: 16/9;
    border-radius: 2px; overflow: hidden;
  }
  .two-up__card .two-up__img .ph { height: 100%; }
  .two-up__cat {
    font-family: arial, sans-serif;
    font-size: 9px; letter-spacing: .22em; font-weight: 800;
    margin-top: 8px;
  }
  .two-up__title {
    font-family: arial, sans-serif;
    font-size: 13px; line-height: 1.6; font-weight: 700;
    color: var(--brand-dark); margin-top: 4px;
    letter-spacing: .02em;
    display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .two-up__date {
    font-family: arial, sans-serif;
    font-size: 10px; color: var(--text-muted);
    letter-spacing: .14em; margin-top: 4px;
  }

  /* ═══ RANKING ═══ */
  .ranking {
    padding: 0 18px 6px;
  }
  .ranking__item {
    display: grid; grid-template-columns: 44px 0.8fr 1fr;
    gap: 12px; padding: 14px 0;
    border-bottom: 1px solid var(--line);
    align-items: center;
  }
  .ranking__item:first-child { border-top: 1px solid var(--line); }
  .ranking__rank {
    font-family: arial, sans-serif;
    font-size: 28px; line-height: 1;
    color: var(--text-light); font-weight: 700;
    letter-spacing: -.02em;
    text-align: center;
  }
  .ranking__item:nth-child(1) .ranking__rank { color: var(--brand-pink); }
  .ranking__item:nth-child(2) .ranking__rank { color: var(--cat-entame); }
  .ranking__item:nth-child(3) .ranking__rank { color: var(--cat-trip); }
  .ranking__img {
    aspect-ratio: 16/9; border-radius: 2px; overflow: hidden;
  }
  .ranking__img .ph { height: 100%; }
  .ranking__title {
    font-family: arial, sans-serif;
    font-size: 13px; line-height: 1.55; font-weight: 700;
    color: var(--brand-dark); letter-spacing: .02em;
    display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
  }

  /* ═══ 今週の運勢 / プレゼント（PC のサイドバーウィジェットを SP でも共用）═══ */
  /* マークアップ・装飾は PC の .fortune-widget / .banner-widget をそのまま使用する。
     ここでは SP 用に「全幅で縦並びにするラッパー」だけを定義する。 */
  .sp-widgets {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 6px 14px 0;
  }
  /* ═══ TAG BROWSER ═══ */
  .tag-browser {
    margin: 28px 14px 0;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 2px;
    overflow: hidden;
  }
  .tag-browser__head {
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    display: flex; align-items: baseline; gap: 10px;
  }
  .tag-browser__head h3 {
    font-family: arial, sans-serif;
    font-size: 16px; font-weight: 700; color: var(--brand-dark);
    letter-spacing: .02em;
  }
  .tag-browser__head small {
    font-family: arial, sans-serif;
    font-size: 9px; letter-spacing: .28em;
    color: var(--brand-mid); font-weight: 700;
  }
  .tb-cat {
    border-bottom: 1px dashed var(--line);
  }
  .tb-cat:last-child { border-bottom: none; }
  .tb-cat__btn {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    text-align: left;
    font-family: arial, sans-serif;
    font-size: 14px; font-weight: 700;
    color: var(--brand-dark); letter-spacing: .02em;
  }
  .tb-cat__dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  }
  .tb-cat__sub {
    font-family: arial, sans-serif;
    font-size: 9px; letter-spacing: .22em;
    color: var(--brand-mid); font-weight: 700;
    margin-left: auto;
  }
  .tb-cat__caret {
    font-family: arial, sans-serif; font-size: 16px;
    color: var(--brand-mid);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    margin-left: 8px;
  }
  .tb-cat.open .tb-cat__caret { transform: rotate(45deg); }
  .tb-cat__body {
    max-height: 0; overflow: hidden;
    padding: 0 18px;
    transition: max-height    .35s cubic-bezier(.4, 0, .2, 1),
                padding-top    .35s cubic-bezier(.4, 0, .2, 1),
                padding-bottom .35s cubic-bezier(.4, 0, .2, 1);
    /* will-change で GPU 合成を促し、滑らかに */
    will-change: max-height;
  }
  .tb-group { margin-top: 10px; }
  .tb-group__label {
    font-size: 10px; letter-spacing: .1em; color: var(--brand-mid);
    font-weight: 600; margin-bottom: 6px;
  }
  .tb-chips { display: flex; flex-wrap: wrap; gap: 5px; }
  /* a:link 対策（PC と同じ理由）+ span にも同じピル形状を共有 */
  a.tb-chip,
  a.tb-chip:link,
  a.tb-chip:visited,
  span.tb-chip {
    padding: 5px 11px; border-radius: 999px;
    font-size: 11px; line-height: 1.5;
    background: #fff; border: 1px solid var(--line);
    color: var(--brand-dark); letter-spacing: .02em;
    text-decoration: none;
  }
  a.tb-chip--trip:link,    a.tb-chip--trip:visited,    span.tb-chip--trip    { background:#eaf3fb; border-color:#c7dbed; color:#3d5f7e; }
  a.tb-chip--scene:link,   a.tb-chip--scene:visited,   span.tb-chip--scene   { background:#edf6e9; border-color:#c9e0c0; color:#4a6a3f; }
  a.tb-chip--feature:link, a.tb-chip--feature:visited, span.tb-chip--feature { background:#fbf1dc; border-color:#ecd9af; color:#7e5e2a; }
  a.tb-chip--food:link,    a.tb-chip--food:visited,    span.tb-chip--food    { background:#fbe6e6; border-color:#edc2c2; color:#8f3f3f; }
  a.tb-chip--price:link,   a.tb-chip--price:visited,   span.tb-chip--price   { background:#f2efe5; border-color:#ddd5c1; color:#6b5f4a; }

  /* ═══ CATEGORY SHORTCUT PANEL ═══ */
  .cat-shortcut {
    margin: 28px 14px 0;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .cat-shortcut a {
    position: relative; overflow: hidden;
    padding: 18px 16px; color: #fff;
    border-radius: 2px;
    min-height: 92px;
    display: flex; flex-direction: column; justify-content: space-between;
    border-radius: var(--radius-sm);
  }
  .cat-shortcut a::before {
    content: ''; position: absolute; inset: 6px;
    border: 1px solid rgba(255,255,255,.28);
    pointer-events: none;
  }
  .cat-shortcut__small {
    font-family: arial, sans-serif; font-size: 9px;
    letter-spacing: .26em; font-weight: 800; opacity: .9;
  }
  .cat-shortcut__jp {
    font-family: arial, sans-serif;
    font-size: 16px; font-weight: 700; letter-spacing: .04em;
  }

  }

/* ============================================================
 *  カテゴリタブの in-page スクロール
 *  - html 全体に scroll-behavior: smooth
 *  - feature-section に scroll-margin-top でヘッダー分オフセット
 *  - <a class="tab-btn"> がリンクなので underline / text-color を明示
 * ============================================================ */
html { scroll-behavior: smooth; }

.feature-section {
  scroll-margin-top: 100px;
}

.category-tabs a.tab-btn {
  text-decoration: none;
  color: #fff;
  display: inline-block;
}
.category-tabs a.tab-btn:hover {
  text-decoration: none;
  color: #fff;
}

@media (max-width: 768px) {
  .feature-section { scroll-margin-top: 70px; }

  /* ─── SP section anchor scroll-margin（将来の in-page nav 用に残置）─── */
  .sp-sec { scroll-margin-top: 70px; }
}

/* ============================================================
 *  scroll-card に card-tag (カテゴリチップ) を表示するための調整
 *  - sc-meta を flex でタグ＋日付横並びに
 * ============================================================ */
.sc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* マップに無いカテゴリ用のフォールバックカラー */
.cat-misc { background: var(--brand-mid); }