/* reletore.com — デザイン言語: 旧モックアップ（2026-04 レシピサイト設計）継承
   白ベース＋グレー階調＋淡いパステルのカテゴリ色。コンパクト密度・ヘアライン罫線。
   出典: 見本HTML/reletore_TOP_V4最新版.html ほか＋Phase 3追補指示書§3 */
:root {
  --ink: #222;        /* 強調・アクティブ */
  --text: #555;       /* 通常テキスト */
  --label: #aaa;      /* ラベル・補助 */
  --line: #e8e8e8;    /* ヘアライン */
  --hover: #f0f0ee;
  --outer: #f5f5f2;   /* ページ外背景 */
  --link: #185FA5;    /* リンク（c3アイテム色） */
  --brand: #085041;   /* ブランドグリーン（ボタン・Stepナンバー等の限定使用） */
  /* 不調4分類（c1=コリ痛み c2=美容体型 c3=内臓神経 c4=姿勢歪み） */
  --c1-bg: #E1F5EE; --c1-fg: #085041;
  --c2-bg: #FBEAF0; --c2-fg: #72243E;
  --c3-bg: #E6F1FB; --c3-fg: #0C447C;
  --c4-bg: #EEEDFE; --c4-fg: #3C3489;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Roboto", -apple-system, sans-serif;
  color: var(--text);
  background: var(--outer);
  line-height: 1.8;
  font-size: 13px;
  -webkit-text-size-adjust: 100%;
}
main {
  max-width: 680px; margin: 0 auto; padding: 0 20px 48px;
  background: #fff;
}
@media (min-width: 720px) {
  main { border-left: 0.5px solid var(--line); border-right: 0.5px solid var(--line); }
}

/* header / footer */
.site-head {
  border-bottom: 0.5px solid var(--line); background: #fff;
  position: sticky; top: 0; z-index: 10;
}
.head-inner { max-width: 680px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 12px; }
body.home .head-inner { max-width: none; }
.logo {
  padding: 13px 0; flex: 0 0 auto;
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.3;
  letter-spacing: 0.03em; text-decoration: none;
}
.logo span { color: var(--label); font-size: 11px; margin-left: 8px; font-weight: 400; font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; }
/* PCは検索ボックス（ポータル準拠・340px相当のピル）。クリックで全画面オーバーレイを開く */
.search-open {
  margin-left: auto; flex: 0 1 300px; background: var(--outer); border: 0.5px solid var(--line);
  color: var(--label); cursor: pointer; padding: 8px 16px; display: flex; align-items: center; gap: 8px;
  border-radius: 999px; font-family: inherit; font-size: 13px;
}
.search-open:hover { border-color: #ccc; color: var(--text); }
.search-open-ph { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
@media (max-width: 720px) { /* モバイルはアイコンのみ */
  .search-open { flex: 0 0 auto; background: none; border: 0; padding: 8px; color: var(--text); }
  .search-open-ph { display: none; }
}

/* サイト内検索オーバーレイ（全ページ共通・PC/モバイル同一） */
.search-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(255,255,255,0.98); display: flex; flex-direction: column; }
.search-overlay[hidden] { display: none; }
.search-bar { display: flex; align-items: center; gap: 10px; max-width: 680px; width: 100%; margin: 0 auto; padding: 15px 20px; border-bottom: 0.5px solid var(--line); }
.search-ic { color: var(--label); flex: 0 0 auto; }
.search-input { flex: 1; border: 0; outline: 0; font-size: 16px; font-family: inherit; color: var(--ink); background: none; min-width: 0; }
.search-close { background: none; border: 0; font-size: 18px; color: var(--label); cursor: pointer; padding: 6px 8px; line-height: 1; }
.search-results { max-width: 680px; width: 100%; margin: 0 auto; padding: 6px 12px 40px; overflow-y: auto; flex: 1; }
.search-hint, .search-empty { color: var(--label); font-size: 13px; padding: 20px 8px; }
.search-hit { display: flex; align-items: center; gap: 10px; padding: 11px 10px; text-decoration: none; border-bottom: 0.5px solid #f0f0ee; }
.search-hit:hover { background: var(--hover); }
.sh-k { font-size: 10px; color: var(--label); flex: 0 0 auto; border: 0.5px solid var(--line); border-radius: 20px; padding: 1px 8px; }
.sh-t { font-size: 14px; color: var(--ink); font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-m { font-size: 11px; color: var(--label); flex: 0 0 auto; }
.site-foot { border-top: 0.5px solid var(--line); background: #fff; margin-top: 28px; padding: 26px 20px 36px; }
.site-foot > * { max-width: 680px; margin: 0 auto; }
.site-foot .disclaim { font-size: 11px; color: var(--label); line-height: 1.75; margin: 0 0 18px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 22px; margin: 0 0 16px; }
.site-foot nav a { font-size: 12.5px; color: var(--text); text-decoration: none; }
.site-foot nav a:hover { color: var(--ink); }
.site-foot .copy { font-size: 11px; color: var(--label); margin: 0; }
.crumb { font-size: 11px; color: var(--label); padding: 14px 0 0; }
.crumb a { color: var(--label); }

/* text */
h1 { font-size: 26px; font-weight: 500; line-height: 1.5; margin: 16px 0 8px; color: var(--ink); }
h2 {
  font-size: 16px; font-weight: 500; color: var(--ink); line-height: 1.5;
  margin: 40px 0 12px; padding-bottom: 8px; border-bottom: 0.5px solid var(--line);
}
h3 { font-size: 14px; font-weight: 500; color: var(--ink); margin: 26px 0 8px; }
p { margin: 0 0 1.2em; }
strong { color: var(--ink); font-weight: 500; }
.lead { color: #888; font-size: 12px; }
ul, ol { padding-left: 1.4em; }
li { margin-bottom: .4em; }
a { color: var(--link); }
.point {
  background: var(--outer); border-radius: 12px; padding: 14px 16px; margin: 0 0 1.2em;
}
.point ul, .point p { margin: 0; }
.point p { margin-bottom: .4em; }

/* video facade */
.video { margin: 0 0 28px; }
.yt {
  position: relative; cursor: pointer; border-radius: 12px; overflow: hidden;
  aspect-ratio: 16 / 9; background: #e8e8e6;
}
.yt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-play {
  position: absolute; inset: 0; margin: auto; width: 60px; height: 42px;
  background: rgba(20, 20, 20, .78); border-radius: 12px;
}
.yt-play::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-style: solid; border-width: 9px 0 9px 16px; border-color: transparent transparent transparent #fff;
}
.yt:hover .yt-play, .yt:focus .yt-play { background: rgba(20, 20, 20, .92); }
.yt-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; margin: 0 0 6px; }
.video figcaption { font-size: 11px; color: var(--label); margin-top: 6px; }
.yt-note { font-size: 12px; color: var(--text); }

/* page cards（TOP・関連リンク） */
.cards { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cards a, .cards .na {
  display: block; background: #fff; border: 0.5px solid var(--line); border-radius: 10px;
  padding: 12px 14px; text-decoration: none; color: var(--ink); min-height: 44px; height: 100%;
  transition: border-color 0.15s;
}
.cards a:hover { border-color: #ccc; background: var(--hover); }
.cards .ct { display: block; font-weight: 500; font-size: 13px; color: var(--ink); }
.cards .cm { display: block; font-size: 11px; color: var(--label); }
.cards .na { opacity: .55; }
.soon-tag { display: inline-block; font-size: 11px; color: var(--label); border: 0.5px solid var(--line); border-radius: 20px; padding: 1px 10px; margin-top: 4px; }

/* TOP 不調4分類のグループ見出し（c1〜c4パステル） */
.cat-label {
  display: inline-block; font-size: 13px; font-weight: 500;
  border-radius: 20px; padding: 4px 14px; margin: 20px 0 10px;
}
.cat-label.c1 { background: var(--c1-bg); color: var(--c1-fg); }
.cat-label.c2 { background: var(--c2-bg); color: var(--c2-fg); }
.cat-label.c3 { background: var(--c3-bg); color: var(--c3-fg); }
.cat-label.c4 { background: var(--c4-bg); color: var(--c4-fg); }

/* FR box */
.frbox {
  background: #fff; border: 0.5px solid var(--line); border-radius: 12px;
  padding: 16px 18px; margin: 36px 0;
}
.frbox-t { font-weight: 500; color: var(--ink); margin-bottom: .6em; }
.btn {
  display: inline-block; background: var(--brand); color: #fff !important;
  border-radius: 20px; padding: 9px 20px; text-decoration: none; font-size: 13px;
}
.btn:hover { opacity: .85; }

/* steps */
.steps { counter-reset: st; list-style: none; padding: 0; }
.steps li { counter-increment: st; position: relative; padding-left: 38px; margin-bottom: 12px; }
.steps li::before {
  content: counter(st); position: absolute; left: 0; top: 2px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff;
  font-size: 12px; font-weight: 500; display: grid; place-items: center;
}

/* ---- 構造化動画一覧（修正指示書2・見本CSS継承のまま）---- */
.section-label { font-size: 10px; font-weight: 500; color: var(--label); letter-spacing: .08em; margin-bottom: 12px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; align-items: center; }
.pill {
  font-size: 12px; padding: 5px 12px; border-radius: 20px; background: #fff;
  border: .5px solid #85B7EB; color: #185FA5; cursor: pointer; user-select: none;
  font-family: inherit; min-height: 30px;
}
.pill.active { background: #185FA5; color: #fff; border-color: #185FA5; }
.pill:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* ハブの不調4分類に応じたピル配色（設計書§4: カテゴリに応じたボーダー/アクティブ塗り） */
.pillwrap-c1 .pill { border-color: #9FE1CB; color: #0F6E56; }
.pillwrap-c1 .pill.active { background: #0F6E56; color: #fff; border-color: #0F6E56; }
.pillwrap-c2 .pill { border-color: #F3C3D4; color: #993556; }
.pillwrap-c2 .pill.active { background: #993556; color: #fff; border-color: #993556; }
.pillwrap-c3 .pill { border-color: #85B7EB; color: #185FA5; }
.pillwrap-c3 .pill.active { background: #185FA5; color: #fff; border-color: #185FA5; }
.pillwrap-c4 .pill { border-color: #C9C4F2; color: #534AB7; }
.pillwrap-c4 .pill.active { background: #534AB7; color: #fff; border-color: #534AB7; }
.method { margin-bottom: 28px; }
.method.hidden { display: none; }
.method-head {
  display: flex; align-items: baseline; gap: 8px; padding-bottom: 8px;
  border-bottom: .5px solid var(--line); margin-bottom: 4px;
}
.method-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.method-sub { font-size: 11px; color: var(--label); }
.method-count { font-size: 11px; color: var(--label); margin-left: auto; }
.vrow {
  display: flex; gap: 10px; padding: 12px 0; border-bottom: .5px solid #f0f0ee;
  cursor: pointer; text-decoration: none; color: var(--ink);
}
.vrow:last-child { border-bottom: none; }
.vrow:hover { background: #fafaf8; }
.vthumb {
  width: 116px; height: 65px; border-radius: 8px; flex-shrink: 0;
  position: relative; overflow: hidden; background: #e8e8e6; display: block;
}
.vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vdur {
  position: absolute; bottom: 4px; right: 4px; font-size: 9px;
  background: rgba(0,0,0,.72); color: #fff; padding: 1px 5px; border-radius: 4px;
}
.vbody { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vtitle {
  font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vdesc { font-size: 11px; color: #777; line-height: 1.5; }
.vmeta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.vviews { font-size: 10px; color: var(--label); margin-right: 2px; }
.vtag {
  font-size: 11px; padding: 3px 10px; border-radius: 20px;
  background: var(--outer); border: .5px solid #e0e0e0; color: #888;
}
.vplayer { margin: 4px 0 12px; }
.empty { font-size: 12px; color: var(--label); padding: 24px 0; text-align: center; display: none; }
.empty.show { display: block; }

@media (min-width: 640px) {
  h1 { font-size: 26px; }
  .cards { grid-template-columns: 1fr 1fr 1fr; }
}

/* ============================================================
   回遊型TOP（横スクロール棚）— ポータル設計書 asmr_portal_design_spec 準拠
   すべて body.home 配下にスコープ。detailページには影響しない。
   全棚が統一カード（.card = 16:9サムネ＋1行タイトル＋1行サブ）＝画像ファースト。
   ============================================================ */
body.home main { max-width: none; margin: 0; padding: 0; background: transparent; }
@media (min-width: 720px) { body.home main { border: none; } }

/* タブバー（sticky・site-headの下） */
.home .tabbar {
  background: #fff; border-bottom: 0.5px solid var(--line);
  padding: 10px 24px; position: sticky; top: 53px; z-index: 9;
  display: flex; gap: 8px; align-items: center; overflow-x: auto;
}
.home .tabbar::-webkit-scrollbar { display: none; }
.home .tab {
  font-size: 12.5px; padding: 5px 12px; border-radius: 8px; background: #fff;
  border: 0.5px solid #e0e0e0; color: var(--text); white-space: nowrap; text-decoration: none;
}
.home .tab.home { border: none; font-weight: 500; color: var(--ink); }

/* レイアウト */
.home .hlayout { display: flex; max-width: none; margin: 0; background: #fff; min-height: 100vh; }
.home .hside {
  width: 230px; flex-shrink: 0; border-right: 0.5px solid var(--line);
  padding: 12px 10px; position: sticky; top: 107px; height: calc(100vh - 107px); overflow-y: auto;
}
.home .side-label { font-size: 11px; font-weight: 500; color: #999; letter-spacing: 0.05em; padding: 16px 10px 8px; }
.home .side-label:first-child { padding-top: 4px; }
.home .rank-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; text-decoration: none; }
.home .rank-item:hover { background: var(--hover); }
.home .rank-no { font-size: 12px; color: #bbb; width: 16px; text-align: center; flex-shrink: 0; }
.home .rank-name { font-size: 13.5px; font-weight: 500; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home .rank-n { font-size: 11px; color: #bbb; flex-shrink: 0; }
.home .side-item { display: block; font-size: 13px; color: var(--text); padding: 8px 10px; border-radius: 8px; text-decoration: none; }
.home .side-item:hover { background: var(--hover); color: var(--ink); }

.home .hmain { flex: 1; min-width: 0; padding: 6px 0 48px; }

/* 棚見出し（h2 20/600・ポータル§2）。›は付けない（一覧ページが無い＝誤誘導防止・§2） */
.home .sec-head { padding: 20px 24px 12px; scroll-margin-top: 116px; }
.home .sec-title { font-size: 20px; font-weight: 600; color: var(--ink); margin: 0; display: inline-flex; align-items: center; gap: 10px; line-height: 1.3; }
.home .cat-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.home .cat-dot.c1 { background: var(--c1-fg); } .home .cat-dot.c2 { background: var(--c2-fg); }
.home .cat-dot.c3 { background: var(--c3-fg); } .home .cat-dot.c4 { background: var(--c4-fg); }
.home .hline { border-top: 0.5px solid var(--line); margin: 18px 24px 2px; }

/* 横スクロール棚（ポータル§2） */
.home .row-wrap { position: relative; }
.home .row {
  display: flex; gap: 14px; overflow-x: auto; padding: 0 24px 14px;
  scroll-behavior: smooth; overflow-anchor: none;  /* scroll-snapは左寄せズレ(Safari+シャッフル)の原因のため撤去・anchoringも無効化 */
}
.home .row::-webkit-scrollbar { display: none; }
.home .row > * { flex-shrink: 0; min-width: 0; } /* min-width:0必須（膨張バグ回避・§2） */
.home .arrow {
  position: absolute; top: 33%; transform: translateY(-50%); width: 38px; height: 38px;
  border-radius: 50%; background: rgba(255,255,255,0.96); border: 0.5px solid #ddd;
  font-size: 17px; color: var(--text); display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 8; box-shadow: 0 1px 5px rgba(0,0,0,0.1); padding: 0; line-height: 1;
}
.home .arrow.r { right: 6px; }

/* 統一カード（全棚共通・16:9サムネ＋1行タイトル＋1行サブ。4.5枚見せ・ホバー演出なし §6.1） */
.home .card { width: calc((100% - 49px) / 4.5); display: block; text-decoration: none; } /* 49=3.5*14gap */
.home .ct-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #ececea; }
.home .ct-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home .ct-thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px;
  color: #bbb; background: linear-gradient(135deg, #f0f0ee, #e2e2df); }
.home .cdur { position: absolute; bottom: 7px; right: 7px; background: rgba(0,0,0,0.78); color: #fff;
  font-size: 11px; font-weight: 500; padding: 1px 6px; border-radius: 4px; }
.home .ct-meta { padding: 7px 2px 0; }
.home .ct-title { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home .ct-sub { font-size: 12.5px; color: var(--label); margin-top: 2px; min-height: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* モバイル（v1: サイドバー非表示・カード幅を広げてスワイプ前提・§1 SP余白14px） */
@media (max-width: 720px) {
  .home .hlayout { display: block; }
  .home .hside { display: none; }
  .home .tabbar { top: 53px; padding: 9px 20px; }
  .home .arrow { display: none; }
  .home .sec-head { padding: 18px 20px 11px; }
  .home .row { padding: 0 20px 15px; }
  .home .hline { margin: 18px 20px 2px; }
  .home .card { width: 64vw; }
  .home .hmain { padding: 4px 0 40px; }
}

/* ============================================================
   モバイル フェーズ2: 下部固定ナビ + ランキングドロワー（設計書§1 ≤760px）
   ============================================================ */
.drawer-open { display: none; }            /* 既定非表示。モバイル×TOPのみ表示 */
.bottomnav { display: none; }              /* 既定非表示。モバイルのみ表示 */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 92; }
.drawer-backdrop[hidden] { display: none; }

@media (max-width: 720px) {
  /* 下部固定ナビ（Home / 悩み / 技 / 検索） */
  .bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: #fff; border-top: 0.5px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bn-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; height: 56px; font-size: 10px; color: var(--label); text-decoration: none;
    background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0;
  }
  .bn-item:active, .bn-item:hover { color: var(--ink); }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

  /* ランキングドロワー: モバイルTOPのみ。PCサイドバー(.hside)を右オフキャンバスに転用 */
  body.home .drawer-open { display: flex; align-items: center; background: none; border: 0;
    color: var(--ink); cursor: pointer; padding: 8px; border-radius: 8px; flex: 0 0 auto; margin-left: auto; }
  .home .hside {
    display: block; position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: 288px; max-width: 84vw; height: 100%; z-index: 94; background: #fff;
    border-left: 0.5px solid var(--line); border-right: 0; padding: 16px 12px;
    overflow-y: auto; transform: translateX(100%); transition: transform 0.22s ease;
    box-shadow: -4px 0 22px rgba(0,0,0,0.10);
  }
  .home .hside.open { transform: translateX(0); }
}

/* カード密度2段（ポータル§3）: カテゴリ的な棚(悩み・技)は5.5枚のcompactで「より一覧的」に */
.home .row-compact .card { width: calc((100% - 63px) / 5.5); } /* 63=4.5*14gap */
@media (max-width: 720px) { .home .row-compact .card { width: 40vw; } }

/* タブバー: スクロール連動のアクティブ表示（現在のセクションを塗りピルで示す） */
.home .tab.active { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 500; }

/* ── 固定ページ（/massage/ 等・body.page限定＝辞典ページには一切影響させない） ── */
/* 元WP(JIN:R)デザインを実測して再現：濃紺本文・中央黒見出し・角ラベルボックス */
body.page { --mp-navy: #31345e; background: #fff; }
body.page main { color: var(--mp-navy); }
body.page main strong { font-weight: 700; }  /* 辞典の最大500制限を上書き＝募集ページは明確に太字 */
body.page main img { max-width: 100%; height: auto; }
body.page .mp-sec { margin: 0 0 2.4em; }
/* セクション見出し（h1=先頭・h2=以降）：中央・黒・太め・字間広め・直下に細い罫線 */
body.page .mp-sec > h1, body.page .mp-sec > h2 { margin: 1.4em 0 .9em; padding-bottom: .6em; border-bottom: 1px solid #333; font-size: 20px; font-weight: 600; color: #000; text-align: center; letter-spacing: .1em; line-height: 1.35; }
/* 【魅力①②③】：中央・濃紺・太字・2行 */
body.page .mp-sec h3 { margin: 1.8em 0 .8em; font-size: 16px; font-weight: 700; color: var(--mp-navy); text-align: center; line-height: 1.6; }
body.page .mp-sec h4 { margin: 1.1em 0 .3em; font-size: 13.5px; font-weight: 600; color: var(--mp-navy); }
/* 本文：濃紺・行間やや詰め・段落間ほどほど */
body.page .mp-sec > p { line-height: 1.7; margin: 1.4em 0; font-size: 13px; letter-spacing: .02em; }
body.page .mp-sec > p.lead { text-align: center; color: #333; font-size: 11px; font-weight: 500; letter-spacing: .04em; margin: 1.5em 0 0; line-height: 1.3; }
/* 副題(.lead)と先頭タイトル(h1)は密着させて1つのまとまりに */
body.page .mp-sec > p.lead + h1 { margin-top: -3px; }
body.page main figure { margin: 1.2em 0; text-align: center; }
body.page main figure img { border-radius: 8px; }
body.page main figcaption { font-size: 12px; color: #888; margin-top: 6px; }
/* 角ラベル付きボックス（元 simplebox / d--heading-box2 の再現）: モデル様の感想・小項目 */
body.page .lbox { position: relative; border: 1px solid #111; border-radius: 8px; margin: 1.9em 0; padding: 2.7em 18px .6em; }
body.page .lbox-tag { position: absolute; top: -1px; left: -1px; background: #000; color: #fff; font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: 8px 0 6px 0; letter-spacing: .02em; }
body.page .lbox > p { font-size: 13.5px; line-height: 1.8; margin: .6em 0 1em; letter-spacing: .02em; }
body.page .lbox figure { margin: .4em 0 1em; }
body.page .lbox .note { font-size: 12.5px; color: #6b6e88; }
/* スライドショー */
body.page .slideshow { position: relative; margin: 0 auto 1.6em; border-radius: 8px; overflow: hidden; background: #f1f1f0; }
body.page .ss-slide { display: none; }
body.page .ss-slide.active { display: block; animation: ss-fade .5s ease; }
@keyframes ss-fade { from { opacity: .4; } to { opacity: 1; } }
body.page .ss-slide img { width: 100%; height: auto; display: block; }
/* フェード方式（ヒーロー）：グリッド重ね＋ゆっくりクロスフェード・矢印/ドット無し */
body.page .slideshow.fx-fade { display: grid; }
body.page .slideshow.fx-fade > .ss-slide { grid-area: 1 / 1; display: block; opacity: 0; transition: opacity 2.5s ease-in-out; animation: none; }
body.page .slideshow.fx-fade > .ss-slide.active { opacity: 1; }
/* 矢印・ドット（感想スライダー用） */
body.page .ss-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(20,20,20,.42); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; transition: background .2s; }
body.page .ss-arrow:hover { background: rgba(20,20,20,.7); }
body.page .ss-prev { left: 8px; } body.page .ss-next { right: 8px; }
body.page .ss-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; gap: 6px; justify-content: center; z-index: 2; }
body.page .ss-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.55); cursor: pointer; }
body.page .ss-dot.active { background: #fff; }
/* このページだけ：下部モバイルナビとパンくずを消す（募集ランディングとして独立） */
body.page .bottomnav { display: none !important; }
@media (max-width: 720px) { body.page main { padding-bottom: 2em !important; } }
/* アコーディオン（details/summary）: 質問バー＋開閉 */
body.page details { border: 1px solid var(--line, #e6e8ea); border-radius: 10px; margin: 8px 0; background: #fff; overflow: hidden; }
body.page details summary { list-style: none; cursor: pointer; padding: 15px 42px 15px 16px; font-weight: 600; font-size: 15px; position: relative; color: #444; }
body.page details summary::-webkit-details-marker { display: none; }
body.page details summary::after { content: "＋"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #444; font-weight: 400; }
body.page details[open] summary { border-bottom: 1px solid var(--line, #e6e8ea); }
body.page details[open] summary::after { content: "−"; }
body.page .acc-body { padding: 10px 16px 16px; }
body.page .acc-body > p { font-size: 13.5px; line-height: 1.8; letter-spacing: .02em; }
/* このページは募集ランディングなので辞典用の注意書きは非表示（リンク・著作権は残す） */
body.page .site-foot .disclaim { display: none; }