@charset "UTF-8";
/* mystery-assets / mystery.scss = エントリポイント
 * 各 partial を @import で順に読み込む
 *  - _settings: CSS 変数 + mixin
 *  - _base    : body, header, main の共通スタイル
 *  - _card-mv : メインビジュアル用カード (.mystery-card-mv)
 *  - _card-grid: グリッド一覧用カード (.mystery-card-grid)
 *  - _top     : /mystery/ TOP (MV + 週刊feature + フィルター + グリッド)
 *  - _detail  : /mystery/{slug}/ 詳細
 *  - _weekly  : /weekly-mystery/ archive + single
 *  - _modal   : 正解モーダル
 *  - _front-banner: フロントページバナー
 *
 * Figma: IymirpAR7OUoimF9pQxz8k
 * フォント (LINE Seed JP / Alan Sans / IBM Plex Sans JP) は各テンプレ <link> で Google Fonts から読込
 */
/* mystery-assets / _settings.scss
 * 変数 (CSS カスタムプロパティ) と mixin
 */
:root {
  /* 基本トーン */
  --mys-bg: #f2f2fc; /* Figma 全体 bg: 寒色グレーから僅か暖色寄り */
  --mys-card: #ffffff;
  --mys-white: #ffffff;
  --mys-black: #000000;
  --mys-text: #333328; /* テキスト・線・shadow の標準ダーク */
  --mys-text-sub: #5c5c5c;
  --mys-text-muted: #9b9b9b;
  --mys-border: #e8e8ec;
  --mys-card-border: #333328; /* カード枠は意味別の参照点 */
  /* purple ファミリー (週刊ナゾノバ・フィルタ active 等で使用) */
  --mys-purple-primary: #7657e8; /* メイン紫 (フィルタ active bg, 週刊 lead 等) */
  --mys-purple-deep-bg: #492e9c; /* 週刊背景 渦巻きグラデの濃い側 */
  --mys-purple-base: #756bff; /* 週刊背景 base */
  --mys-purple-lavender: #f0ecff; /* 週刊 inner box 薄紫 */
  --mys-purple-hero-bg: #f2f2fc; /* hero / MV のドット背景下地 */
  /* 旧ブランドカラー（既存B向けサイト由来。toCでは未使用だが上位サイトと共存のため残す） */
  --mys-navy: #181a5b;
  --mys-navy-deep: #0f1145;
  --mys-purple: #4f3daf;
  --mys-purple-light: #8a7adf;
  --mys-purple-deep: #2e2467;
  --mys-purple-bg-grad: linear-gradient(180deg, #4f3daf 0%, #6b5bc9 100%);
  /* navy / blue (タグ・CTA・ボタン系) */
  --mys-tag-blue: #3740e4; /* mystery-card のタグ navy */
  --mys-cta-blue: #2a36e2; /* もっと見るボタン bg */
  --mys-cta-blue-hover: #1a26d2; /* もっと見るボタン hover */
  --mys-button-deep: #090d4e; /* 週刊 submit button bg */
  /* filter chip (未選択 / active) */
  --mys-filter-active-bg: #6e709b;
  --mys-filter-mute-text: #8d8d8d;
  --mys-filter-mute-border: #cacaca;
  /* input */
  --mys-input-bg: #f6f6ff;
  /* error/feedback (誤答ふきだし) */
  --mys-err-bg: #fff0f0;
  --mys-err-border: #f5a5a5;
  --mys-err-text: #c0392b;
  /* 詳細ページ・hover・グラデ補助色 (単発色も命名する) */
  --mys-detail-bg: #fafafc;
  --mys-black-soft: #222222; /* X ボタン hover (黒のわずかな弱化) */
  --mys-near-black: #0a0a0a; /* weekly 内の濃い黒 */
  --mys-button-deep-hover: #1a1f6e; /* 週刊 submit hover */
  --mys-purple-banner-from: #5b4eff; /* front-banner linear-grad 起点 */
  --mys-purple-banner-to: #2820a0; /* front-banner linear-grad 終点 */
  --mys-purple-mid: #6b5bc9; /* purple-bg-grad の終点 */
  --mys-purple-pale-1: #e5defd; /* modal 紫グラデ */
  --mys-purple-pale-2: #b6a1fe;
  --mys-purple-pale-3: #e4ddfe;
  --mys-purple-text-modal: #5037b8; /* modal CTA テキスト */
  /* よく使う透過色 (シャドウ・ドット・オーバーレイ) */
  --mys-shadow-soft: rgba(0, 0, 0, 0.06);
  --mys-shadow-mid: rgba(0, 0, 0, 0.2);
  --mys-shadow-strong: rgba(0, 0, 0, 0.3);
  --mys-white-alpha-06: rgba(255, 255, 255, 0.06);
  --mys-white-alpha-08: rgba(255, 255, 255, 0.08);
  --mys-white-alpha-15: rgba(255, 255, 255, 0.15);
  --mys-white-alpha-18: rgba(255, 255, 255, 0.18);
  --mys-white-alpha-40: rgba(255, 255, 255, 0.4);
  --mys-white-alpha-70: rgba(255, 255, 255, 0.7);
  --mys-white-alpha-92: rgba(255, 255, 255, 0.92);
  --mys-white-alpha-98: rgba(255, 255, 255, 0.98);
  --mys-text-alpha-18: rgba(51, 51, 40, 0.18); /* #333328 alpha. dot-grid 用 */
  --mys-purple-deep-alpha-50: rgba(73, 46, 156, 0.5);
  --mys-purple-deep-alpha-85: rgba(73, 46, 156, 0.85);
  --mys-purple-darker-alpha-60: rgba(45, 30, 100, 0.6);
  --mys-purple-deep-alpha-92: rgba(46, 36, 103, 0.92);
  /* 旧アクセント（B向けサイトと共存。toCでは未使用） */
  --mys-blue: #1e80ff;
  --mys-blue-deep: #0e63dc;
  --mys-orange: #ff6b1a;
  --mys-orange-deep: #e85a0e;
  --mys-status-open: #1e80ff;
  --mys-status-closed: #9e9e9e;
  /* カード色バリエーション（Figma準拠：シャドウ＋バッジ＋タグの3点に同色適用） */
  --mys-c1: #f83016; /* 赤 */
  --mys-c2: #1aba85; /* 緑 */
  --mys-c3: #0e86f7; /* 青（メイン） */
  --mys-c4: #3740e4; /* 紺紫 */
  --mys-c5: #f7c30e; /* 黄 */
  --mys-status-closed-bg: #b9b9b9;
  /* border 線幅 (1440px viewport で 1.5px 相当 = 0.10416666vw) */
  --border-px: 0.12vw;
  /* ============================
   * 共通: ドットグリッド背景パターン (mystery-mv / list-page-hero などで共有)
   * ここ 1 箇所を触ると全 dot-grid-bg 適用箇所のサイズ/粒径が同期更新される
   * ============================ */
  --dot-pattern: radial-gradient(
    circle,
    var(--mys-text-alpha-18) 0.6px,
    transparent 1.2px
  );
  --dot-size: 22px;
}

/* ハーフトーンドット背景（紫セクション用：白ドット） */
/* ライトセクション用ドットグリッド（Figma 169:60499 / 169:62387）
 * パターン本体は :root の --dot-pattern / --dot-size を参照 (マスター 1 箇所、変更すれば全適用箇所が同期) */
/* mystery-assets / _base.scss
 * body.mystery / .mystery-header / .mystery-main 共通
 */
body.mystery {
  background: var(--mys-bg);
  color: var(--mys-text);
  font-family: "LINE Seed JP", "yakuhanjp", "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* /js/app.js が footer .js-view に貼る GSAP/ScrollTrigger が、mystery 系ページでは
 * progress 0.4 付近で stuck し opacity 0.1 / translateY(35) のまま固まる事象がある
 * (根本原因は別途調査)。CTA「お問い合わせはこちら」 が見えなくなる実害があるので、
 * mystery 系ではフェードイン演出を諦めて常時表示に固定する。
 * GSAP の inline style に勝つため !important が必要。 */
body.mystery footer .footTop .js-view {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================
 * toC向けヘッダー（Figma 169:62649系）
 * 既存B向け .header の position:fixed/top:56px/z-index:200/height:6.5vw を上書き
 * ============================ */
body.mystery > header,
body.mystery .mystery-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  height: auto !important;
  margin-top: 0 !important;
  width: 100% !important;
}
@media (max-width: 767px) {
  body.mystery > header,
  body.mystery .mystery-header {
    padding: 0;
  }
  body.mystery > header__inner,
  body.mystery .mystery-header__inner {
    gap: var(--v12-px);
  }
  body.mystery > header__logo,
  body.mystery .mystery-header__logo {
    padding: var(--v16-px) 0;
  }
  body.mystery > header__logo img,
  body.mystery .mystery-header__logo img {
    height: var(--v22-px);
  }
  body.mystery > header__nav,
  body.mystery .mystery-header__nav {
    position: fixed;
    inset: 0;
    /* 全面プライマリー紫 + 上にうっすら白ドットを乗せて単色べた塗りを避ける */
    background-color: var(--mys-purple-primary);
    background-image: radial-gradient(var(--mys-white-alpha-08) 0.6px, transparent 1.2px);
    background-size: var(--dot-size) var(--dot-size);
    z-index: 9990;
    padding: var(--v96-px) var(--v20-px) var(--v32-px);
    transform: translateX(20%);
    opacity: 0;
    transition: 0.32s ease;
    justify-content: flex-start;
    overflow-y: auto;
    pointer-events: none;
  }
  body.mystery > header__nav.is-open,
  body.mystery .mystery-header__nav.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
  body.mystery > header__nav ul,
  body.mystery .mystery-header__nav ul {
    flex-direction: column;
    gap: var(--v10-px);
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
  }
  body.mystery > header__nav a,
  body.mystery .mystery-header__nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 16px 18px;
    line-height: 1.4;
    /* 白の角丸ボタン: 紫bgの上に乗る */
    background: var(--mys-white);
    color: var(--mys-purple-deep);
    border: 0;
    border-radius: 14px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }
  body.mystery > header__nav a:hover, body.mystery > header__nav a:focus-visible,
  body.mystery .mystery-header__nav a:hover,
  body.mystery .mystery-header__nav a:focus-visible {
    background: var(--mys-white-alpha-92);
    color: var(--mys-purple-primary);
    transform: translateX(-2px);
  }
  body.mystery > header__nav a.mystery-header__nav--external,
  body.mystery .mystery-header__nav a.mystery-header__nav--external {
    /* 外部リンクは透明 + 白枠でアクセント変える */
    margin-top: var(--v14-px);
    background: transparent;
    color: var(--mys-white);
    border: var(--border-px) solid var(--mys-white-alpha-40);
    font-weight: 600;
  }
  body.mystery > header__nav a.mystery-header__nav--external:hover, body.mystery > header__nav a.mystery-header__nav--external:focus-visible,
  body.mystery .mystery-header__nav a.mystery-header__nav--external:hover,
  body.mystery .mystery-header__nav a.mystery-header__nav--external:focus-visible {
    background: var(--mys-white-alpha-08);
    color: var(--mys-white);
    transform: translateX(-2px);
  }
  body.mystery > header__nav-chevron,
  body.mystery .mystery-header__nav-chevron {
    display: inline-block;
  }
  body.mystery > header__menu-toggle,
  body.mystery .mystery-header__menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--v4-px);
    width: var(--v54-px);
    height: var(--v54-px);
    border: none;
    cursor: pointer;
    z-index: 9991;
    position: relative;
    background: var(--mys-purple-primary);
    transition: background-color 0.2s ease;
  }
  body.mystery > header__menu-toggle span,
  body.mystery .mystery-header__menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--mys-white);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  body.mystery > header__menu-toggle,
  body.mystery .mystery-header__menu-toggle {
    /* Open 時は背景を透明にして、紫 panel と同化させない (× アイコンの白棒だけ浮く形) */
  }
  body.mystery > header__menu-toggle[aria-expanded=true],
  body.mystery .mystery-header__menu-toggle[aria-expanded=true] {
    background: transparent;
  }
  body.mystery > header__menu-toggle[aria-expanded=true] span:nth-child(1),
  body.mystery .mystery-header__menu-toggle[aria-expanded=true] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  body.mystery > header__menu-toggle[aria-expanded=true] span:nth-child(2),
  body.mystery .mystery-header__menu-toggle[aria-expanded=true] span:nth-child(2) {
    opacity: 0;
  }
  body.mystery > header__menu-toggle[aria-expanded=true] span:nth-child(3),
  body.mystery .mystery-header__menu-toggle[aria-expanded=true] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

body.mystery header h1 {
  display: none;
} /* 既存サイトの h1 ロゴ rule を排除 */
.mystery-header {
  /* Figma 169:60497: padding 32px 全方向、logo 305x39、nav LINE Seed JP Bold 15px tracking 0.9px gap 24px
   * border-bottom 無し（区切り線がない）*/
  width: 100%;
  background: var(--mys-white);
  border-bottom: 0;
  padding: var(--v32-px);
  padding-right: var(--v40-px);
  border-bottom: var(--border-px) solid var(--mys-text);
}
.mystery-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v32-px);
  max-width: none;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .mystery-header__inner {
    width: 100%;
    padding-left: var(--v16-px);
  }
}
.mystery-header__logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.mystery-header__logo img {
  height: var(--v39-px);
  width: auto;
  display: block;
}
.mystery-header__nav {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
}
.mystery-header__nav ul {
  list-style: none;
  display: flex;
  gap: var(--v24-px);
  margin: 0;
  padding: 0;
  align-items: center;
}
.mystery-header__nav a {
  display: inline-block;
  font-size: var(--f15-px);
  font-weight: 700;
  color: var(--mys-text);
  text-decoration: none;
  letter-spacing: 0.06em;
  line-height: 1.65;
  padding: 0;
  transition: color 0.2s ease;
}
.mystery-header__nav a:hover {
  color: var(--mys-purple);
}
.mystery-header__nav--external {
  display: inline-flex;
  align-items: center;
  gap: var(--v6-px);
}
.mystery-header__nav-extlink {
  width: var(--v12-px);
  height: var(--v12-px);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.mystery-header {
  /* SP メニュー内のリンク行末 chevron。PC では非表示。
   * @media (max-width: 767px) 側で display: inline-block で復活 */
}
.mystery-header__nav-chevron {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  display: none;
}
.mystery-header {
  /* mystery-header__nav-label は PC でも HTML 上は存在するが、
   * 視覚的には素のテキストと同じ振る舞いでよいので装飾なし */
}
.mystery-header__menu-toggle {
  display: none; /* PCでは非表示 */
}
.mystery-header {
  /* Figma 169:66992 + 169:66993: 紫円 192px (右上はみ出し配置) + 白文字 MENU
   * 親 .mystery-header に position: relative を当てて配置基準にする */
}
.mystery-header__menu-circle {
  position: absolute;
  /* Figma: x=1286, y=-26, w/h=192 → 右に -38 はみ出す、上に -26 はみ出す */
  top: var(--m26-px);
  right: calc(0px - var(--v38-px));
  width: var(--v192-px);
  height: var(--v192-px);
  border-radius: 50%;
  background: var(--mys-purple-primary);
  color: var(--mys-white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 10;
  transition: background 0.2s ease;
}
.mystery-header__menu-circle:hover {
  background: var(--mys-purple-deep-bg);
}
.mystery-header__menu-circle-text {
  /* Alan Sans Bold 16px tracking 0.96px (=6%) / 円の下半分に配置 (Figma 169:66993 y=61) */
  font-size: var(--f16-px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.65;
  color: var(--mys-white);
  font-family: "Alan Sans", "Archivo", sans-serif;
  transform: translateY(var(--v40-px));
}
@media (max-width: 767px) {
  .mystery-header__menu-circle {
    display: none; /* SP はハンバーガーメニューに切り替え */
  }
}

/* 親に position: relative を当てて menu-circle の絶対配置基準にする */
.mystery-header {
  position: relative;
}

.mystery-main {
  padding-top: 0;
  padding-bottom: 0;
}
@media (max-width: 767px) {
  .mystery-main {
    padding-bottom: 0;
  }
}

/* mystery-assets / _card-mv.scss
 * メインビジュアル用カード
 * Figma 169:60580 中央 480x529 upright / 169:60560,60599 両脇 rotate(2deg)
 */
.mystery-card-mv {
  --card-accent: var(--mys-c3); /* デフォルト青 */
  /* Figma 169:60580: w=480 h=529 固定。content-fit にするとサブタイトル長等でカード間に高さの
   * バラつきが出て見た目がガタガタになるため、Figma 通り高さも固定する */
  flex: 0 0 var(--v480-px);
  height: var(--v529-px);
  background: var(--mys-card);
  border: var(--border-px) solid var(--mys-card-border);
  border-radius: var(--v16-px);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--v32-px);
  box-sizing: border-box;
  /* Figma準拠: ベタ凸シャドウ（ぼかしなし、オフセット16px、カード色） */
  box-shadow: var(--v8-px) var(--v8-px) 0 0 var(--card-accent);
  /* rotation の上下ぶん margin で逃がす（9px ぶん余白で gap 24 が見た目通り出る） */
  margin: var(--v12-px) var(--v9-px);
  transform: rotate(2deg);
  transform-origin: center center;
  transition: 0.2s ease;
}
.mystery-card-mv--color1 {
  --card-accent: var(--mys-c1);
}
.mystery-card-mv--color2 {
  --card-accent: var(--mys-c2);
}
.mystery-card-mv--color3 {
  --card-accent: var(--mys-c3);
}
.mystery-card-mv--color4 {
  --card-accent: var(--mys-c4);
}
.mystery-card-mv--color5 {
  --card-accent: var(--mys-c5);
}
.mystery-card-mv--active {
  transform: rotate(0deg);
}
.mystery-card-mv:hover {
  transform: translate(var(--v8-px), var(--v8-px));
  box-shadow: 0 0 0 0 var(--card-accent);
}
.mystery-card-mv {
  /* stretched link: カード全面を 1 つのリンクにする */
}
.mystery-card-mv__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
}
.mystery-card-mv__link:focus-visible {
  outline: var(--v3-px) solid var(--card-accent);
  outline-offset: var(--m3-px);
}
.mystery-card-mv {
  /* thumb は画像を切り取らず natural 比で全体表示。
   * PC と SP で Figma 仕様が異なる (PC 624x326 横長 / SP は card 480x529 内で別比率) ため、
   * aspect-ratio をハードコードで統一せず、画像比率にそのまま従う */
}
.mystery-card-mv__thumb {
  margin: 0;
  overflow: hidden;
  background: var(--mys-bg);
}
.mystery-card-mv__thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.mystery-card-mv__body {
  padding: 0 var(--v32-px) var(--v40-px);
  display: flex;
  flex-direction: column;
  gap: var(--v8-px);
}
.mystery-card-mv {
  /* Figma 169:60586: ベタ塗り + 白文字 */
}
.mystery-card-mv__status {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: var(--v4-px) var(--v8-px);
  border-radius: var(--v16-px);
  font-size: var(--f13-px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.65;
  color: var(--mys-white);
}
@media (max-width: 767px) {
  .mystery-card-mv__status {
    font-size: var(--f11-px);
  }
}
.mystery-card-mv__status.is-open {
  background: var(--card-accent);
}
.mystery-card-mv__status.is-closed {
  background: var(--mys-status-closed-bg);
}
.mystery-card-mv__date {
  font-size: var(--f15-px);
  font-weight: 700;
  color: var(--mys-text);
  margin: 0;
  letter-spacing: 0.06em;
  line-height: 1;
  font-family: "Alan Sans", "Archivo", sans-serif;
  margin-top: var(--v6-px);
  margin-bottom: var(--v2-px);
}
.mystery-card-mv {
  /* Figma 169:60589: LINE Seed JP ExtraBold 27px tracking 5.4px line-height normal */
}
.mystery-card-mv__title {
  font-size: var(--f27-px);
  font-weight: 800;
  line-height: normal;
  margin: 0;
  letter-spacing: 0.2em;
  color: var(--mys-text);
  /* タイトル個別の <a>/hover は廃止 (stretched link でカード全体が 1 リンク) */
}
.mystery-card-mv__subtitle {
  font-size: var(--f15-px);
  color: var(--mys-text);
  line-height: 1.65;
  letter-spacing: 0.06em;
  margin: 0;
  font-weight: 400;
  display: none;
}
.mystery-card-mv {
  /* Figma 169:60572 緑 #1aba85 / 60591 青 #3740e4 / 60612 赤 #f83016
   * → タグ文字色はカード accent と連動 (grid 側と同じ仕様) */
}
.mystery-card-mv__tags {
  font-size: var(--f13-px);
  color: var(--card-accent);
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--v8-px);
  letter-spacing: 0.06em;
  line-height: 1.65;
}
.mystery-card-mv__tag-sep {
  color: var(--card-accent);
  opacity: 0.7;
}
@media (max-width: 767px) {
  .mystery-card-mv {
    flex: 0 0 calc(100vw - 96px);
    /* SP も Figma 480:529 比率を維持して高さ揃え (content-fit のガタつき防止) */
    height: auto;
    aspect-ratio: 480/529;
    margin: 12px 4px;
    gap: 20px;
    box-shadow: 8px 8px 0 0 var(--card-accent);
  }
  .mystery-card-mv__thumb {
    /* SP は card 自体が 480/529 比なので thumb も natural 比のまま (切り取りなし) */
    height: auto;
  }
  .mystery-card-mv__body {
    padding: 0 var(--v20-px) var(--v24-px);
    gap: 6px;
  }
  .mystery-card-mv__title {
    font-size: var(--f15-px);
    letter-spacing: 0.12em;
  }
  .mystery-card-mv__subtitle {
    font-size: var(--f12-px);
  }
  .mystery-card-mv__tags {
    font-size: var(--f11-px);
  }
  .mystery-card-mv__date {
    font-size: var(--f12-px);
  }
}

/* mystery-assets / _card-grid.scss
 * グリッド一覧用カード
 * Figma 169:60669 (Grid LEFT+TOP のみ border = テーブル状で外枠が囲い内枠は共有)
 * Figma 169:60674 (status はアウトライン: 白塗り + カード色枠 + カード色文字)
 */
.mystery-card-grid {
  --card-accent: var(--mys-c3); /* デフォルト青 */
  background: var(--mys-card);
  /* TOP のみ base、外周/divider は JS の is-edge-* / is-col-divider で付与
   * 左列カード (奇数番目) には左 border を付けない (コンテナ左端の縦線は不要) */
  border-top: var(--border-px) solid var(--mys-card-border);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--v48-px);
  gap: var(--v36-px);
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* stretched link: カード全面を 1 つのリンクにする (個別の thumb/title/btn リンクは廃止) */
}
.mystery-card-grid__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
  /* キーボードフォーカス時の視認性 */
}
.mystery-card-grid__link:focus-visible {
  outline: var(--v3-px) solid var(--card-accent);
  outline-offset: var(--m3-px);
}
.mystery-card-grid--color1 {
  --card-accent: var(--mys-c1);
}
.mystery-card-grid--color2 {
  --card-accent: var(--mys-c2);
}
.mystery-card-grid--color3 {
  --card-accent: var(--mys-c3);
}
.mystery-card-grid--color4 {
  --card-accent: var(--mys-c4);
}
.mystery-card-grid--color5 {
  --card-accent: var(--mys-c5);
}
.mystery-card-grid.is-hidden {
  display: none;
}
.mystery-card-grid {
  /* 外周補完は JS の updateBorderClasses() が visible カードの index ベースで付与する
   * .is-col-divider (右列カードに付与 = 左列との縦区切り線)
   * .is-edge-right (右列カードに付与 = コンテナ右端)
   * .is-edge-bottom (最下行 = コンテナ下端)
   * フィルタ・pagination で visible 順序が変わっても整合性が保てる */
}
.mystery-card-grid.is-col-divider {
  border-left: var(--border-px) solid var(--mys-card-border);
}
@media (max-width: 767px) {
  .mystery-card-grid.is-col-divider {
    border-left: 0;
  }
}
.mystery-card-grid.is-edge-right {
  border-right: var(--border-px) solid var(--mys-card-border);
}
@media (max-width: 767px) {
  .mystery-card-grid.is-edge-right {
    border-right: 0;
  }
}
.mystery-card-grid.is-edge-bottom {
  border-bottom: var(--border-px) solid var(--mys-card-border);
}
.mystery-card-grid {
  /* PC 2 列で visible が奇数のとき末尾に挿入する空セル。
   * 中身は無し、border の整合性を取るためだけのプレースホルダー */
}
.mystery-card-grid--placeholder {
  background: var(--mys-white);
  pointer-events: none;
}
.mystery-card-grid {
  /* thumb は OGP 同比率 (1200x630 = 40/21 ≈ 1.905) に統一。
   * MV カードと統一 (8:5 = 480x300 / 960x600)。過去のやりとりで決定済 */
}
.mystery-card-grid__thumb {
  margin: 0;
  aspect-ratio: 8/5;
  overflow: hidden;
  background: var(--mys-bg);
}
.mystery-card-grid__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mystery-card-grid {
  /* Figma 169:60672: status-block + button の gap 24px / 中身 8px */
}
.mystery-card-grid__body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--v8-px);
}
.mystery-card-grid {
  /* Figma 169:60674: アウトライン = 白塗り + カード色枠 + カード色文字 */
}
.mystery-card-grid__status {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: var(--v4-px) var(--v8-px);
  border-radius: var(--v16-px);
  font-size: var(--f13-px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.65;
  background: var(--mys-white);
  border: var(--border-px) solid var(--card-accent);
  color: var(--card-accent);
}
@media (max-width: 768px) {
  .mystery-card-grid__status {
    font-size: var(--f12-px);
  }
}
.mystery-card-grid__status.is-closed {
  border-color: var(--mys-status-closed-bg);
  color: var(--mys-status-closed-bg);
}
.mystery-card-grid__date {
  font-size: var(--f15-px);
  font-weight: 700;
  color: var(--mys-text);
  margin: 0;
  letter-spacing: 0.06em;
  font-family: "Alan Sans", "Archivo", sans-serif;
  line-height: 1;
  margin-top: var(--v6-px);
  margin-bottom: var(--v2-px);
}
.mystery-card-grid {
  /* Figma 169:60589: LINE Seed JP ExtraBold 27px tracking 5.4px line-height normal */
}
.mystery-card-grid__title {
  font-size: var(--f27-px);
  font-weight: 800;
  line-height: normal;
  margin: 0;
  letter-spacing: 0.2em;
  color: var(--mys-text);
  /* タイトル個別の <a>/hover は廃止 (stretched link でカード全体が 1 リンク) */
}
.mystery-card-grid__subtitle {
  font-size: var(--f15-px);
  color: var(--mys-text);
  line-height: 1.65;
  letter-spacing: 0.06em;
  margin: 0;
  font-weight: 400;
}
.mystery-card-grid {
  /* Figma 169:60591: IBM Plex Sans JP Bold 13px / tracking 0.78px / gap 8。
   * 色はカードの --card-accent (color1〜5) と連動 */
}
.mystery-card-grid__tags {
  font-size: var(--f13-px);
  color: var(--card-accent);
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--v8-px);
  letter-spacing: 0.06em;
  line-height: 1.65;
  font-family: "IBM Plex Sans JP", "yakuhanjp", "Hiragino Sans", sans-serif;
}
.mystery-card-grid__tag-sep {
  color: var(--card-accent);
  opacity: 0.7;
}
.mystery-card-grid {
  /* Figma 169:60684 詳細を見る: padding 8 16 / LINE Seed JP Bold 16px / radius 100 / gap 16
   * 装飾的な CTA 表示 (実体は <span>)。クリックは stretched link が拾うので個別 hover は持たせない */
}
.mystery-card-grid__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--v16-px);
  padding: var(--v8-px) var(--v16-px);
  box-sizing: border-box;
  border-radius: var(--v100-px);
  font-size: var(--f16-px);
  font-weight: 700;
  line-height: 1.65;
  margin-top: var(--v16-px); /* body gap 8 + 16 = 24 total (Figma) */
  color: var(--mys-white);
  background: var(--card-accent);
  letter-spacing: 0.06em;
  /* arrow はカルーセル ナビ (.mystery-mv__nav svg) と同じ chevron SVG を使う。
   * fill: none + stroke: currentColor で btn の文字色に追従、サイズはボタン内向け */
}
.mystery-card-grid__btn-arrow {
  width: var(--v16-px);
  height: var(--v16-px);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.mystery-card-grid {
  /* びっしり詰めるグリッドでは位置ずれ系 hover は隣接カードと衝突するため、
   * カード自体は動かさず、背景・サムネ・btn 反転で反応を出す。
   * FB: タイトル色変化は (リンク領域内のテキストが色変わる印象が強いので) 撤去 */
  transition: background 0.2s ease;
}
.mystery-card-grid:hover {
  background: var(--mys-detail-bg);
}
.mystery-card-grid:hover .mystery-card-grid__thumb img {
  transform: scale(1.02);
}
.mystery-card-grid__thumb img {
  transition: transform 0.3s ease;
}
.mystery-card-grid {
  /* FB: card hover で btn の bg/color 反転 (白bg + card-accent 文字) */
}
.mystery-card-grid__btn {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  border: var(--border-px) solid var(--card-accent);
}
.mystery-card-grid:hover .mystery-card-grid__btn {
  background: var(--mys-white);
  color: var(--card-accent);
}
@media (max-width: 767px) {
  .mystery-card-grid {
    padding: 24px;
    gap: 20px;
    /* SP は 1 カラム。両サイド border は SP では常時付与 (PC base で外したため復元)、
     * 下 border は JS の is-edge-bottom で最下 (visible 最後の 1 枚) に付与 */
    border-bottom: 0;
  }
  .mystery-card-grid:hover {
    transform: none;
  }
  .mystery-card-grid__body {
    gap: 6px;
  }
  .mystery-card-grid__title {
    font-size: 22px;
    letter-spacing: 0.12em;
  }
  .mystery-card-grid__subtitle {
    font-size: 13px;
  }
  .mystery-card-grid__tags {
    font-size: 12px;
  }
  .mystery-card-grid__date {
    font-size: 13px;
  }
  .mystery-card-grid__btn {
    padding: 8px 14px;
    font-size: 14px;
    letter-spacing: 0.04em;
    gap: 12px;
  }
}

/* mystery-assets / _top.scss
 * /mystery/ TOP
 */
/* ====================================
 * ① メインビジュアル（カルーセル）
 * Figma 169:60491 / 169:60580 ヘッダ直下 48px ギャップでカード開始
 * カード 498×549 (thumb 300, gap 32, body padding 0 32 40 0, gap 8 / 親内)
 * ==================================== */
.mystery-mv {
  /* Figma 169:60498 (Frame 94): pale lavender + 黒ドットグリッド (list-page hero と同じ) */
  background-color: var(--mys-purple-hero-bg);
  background-image: var(--dot-pattern);
  background-size: var(--dot-size) var(--dot-size);
  background-position: 0 0;
  padding: 0 0 var(--v64-px);
  position: relative;
  overflow: hidden;
  /* viewport は画面幅、左右はみ出しを隠して clean な見切れに */
}
.mystery-mv__viewport {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding: 0 var(--v24-px);
}
.mystery-mv__track {
  list-style: none;
  display: flex;
  align-items: flex-start;
  /* Figma 169:60559 計測: 中心間 ~593 / 480 card / margin 9*2 → gap 約 86px */
  gap: var(--v80-px);
  padding: var(--v48-px) 0 var(--v32-px); /* 上 48px (Figma ヘッダ→カード gap)、下 32px (shadow 表示余白) */
  margin: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.2, 1), opacity 0.3s ease;
  will-change: transform;
  /* JS が初期位置計算 (translateX) を当てるまでは見せない。
   * カードの rotate は PHP の --active クラスで CSS が決めるので、姿勢のカクツキは出ない */
  opacity: 0;
}
.mystery-mv__track.is-ready {
  opacity: 1;
}
.mystery-mv__nav {
  /* Figma 169:60577: 44px白丸＋黒枠2px＋黒影1px、中央カード両脇に重ねる。
   * left/right の絶対位置は JS が中央カードに合わせて毎フレーム書き換える。
   * (CSS calc + viewport translate の二重計算で生じるリサイズ時のズレを防ぐため) */
  position: absolute;
  top: 50%;
  width: var(--v44-px);
  height: var(--v44-px);
  border-radius: 50%;
  background: var(--mys-white);
  border: var(--v2-px) solid var(--mys-text);
  box-shadow: var(--v1-px) var(--v1-px) 0 0 var(--mys-text);
  cursor: pointer;
  transform: translateY(-50%);
  z-index: 10;
  font-size: var(--f20-px);
  line-height: 1;
  color: var(--mys-text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: var(--v2-px);
  font-weight: 700;
  /* track 同期の left transition + hover で opacity 変化を transition で繋ぐ。
   * (指示は「hover に transition 入れろ」のみ。bg/color/scale の hover 変更は指示外だったため撤回) */
  transition: left 0.5s cubic-bezier(0.4, 0.2, 0.2, 1), opacity 0.2s ease;
}
.mystery-mv__nav:hover {
  opacity: 0.7;
}
.mystery-mv__nav svg {
  width: 60%;
  height: 60%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mystery-mv__nav {
  /* JS が left を書く前の初期 paint 用フォールバック (Figma: 矢印中心は gap 中央)
   *  prev 中心 = viewport center - (card 半幅 240 + gap 半分 40) = 50% - 280
   *    要素 left = 50% - 280 - 矢印半幅 22 → 50% - 302
   *  next 中心 = viewport center + (card 半幅 240 + box-shadow 16 + gap 半分 40) = 50% + 296
   *    要素 left = 50% + 296 - 22 → 50% + 274 (影込みで gap 中央に矢印中心) */
}
.mystery-mv__nav--prev {
  left: calc(50% - var(--v302-px));
}
.mystery-mv__nav--next {
  left: calc(50% + var(--v274-px));
}
.mystery-mv__empty {
  text-align: center;
  padding: var(--v80-px) 0;
  color: var(--mys-text-muted);
}
@media (max-width: 767px) {
  .mystery-mv {
    padding: 24px 0 40px;
  }
  .mystery-mv__viewport {
    padding: 0 24px;
  }
  .mystery-mv__track {
    gap: 16px;
    padding: 16px 0;
  }
  .mystery-mv__nav {
    top: 40%;
    width: 36px;
    height: 36px;
    font-size: 18px;
    border-width: 1.5px;
    box-shadow: 1px 1px 0 0 var(--mys-text);
    /* SP も PC と同じく JS の updateArrowPositions で card 端に 6px 食い込む位置に動的配置。
     * PC base の `left: calc(...)` を打ち消すため left/right を auto にしておく
     * (JS が動く前の初回 paint で PC 用座標が当たって画面外に飛ばないため両方必須) */
  }
  .mystery-mv__nav--prev, .mystery-mv__nav--next {
    left: auto;
    right: auto;
  }
}

/* ====================================
 * ② 週刊ナゾノバ（メインTOP内 / Figma 169:60618）
 * 背景は mystery-assets/img/weekly-feature-bg.png に差し替え (旧 radial-gradient 合成版は廃止)
 * ==================================== */
.weekly-feature {
  background: url("../img/weekly-feature-bg.png") no-repeat center center/cover, var(--mys-purple-base);
  padding: 0;
  color: var(--mys-text);
  text-align: center;
  position: relative;
  border-top: var(--border-px) solid var(--mys-text);
  border-bottom: var(--border-px) solid var(--mys-text);
  /* 内側 lavender ボックス: 848 幅・96px 185px パディング・両側 border */
}
.weekly-feature__inner {
  background: var(--mys-purple-lavender);
  border-left: var(--border-px) solid var(--mys-text);
  border-right: var(--border-px) solid var(--mys-text);
  max-width: var(--v848-px);
  width: var(--v848-px);
  margin: 0 auto;
  padding: var(--v96-px) var(--v96-px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v64-px);
  box-sizing: border-box;
  position: relative;
}
.weekly-feature {
  /* ヘッディング部 (update + title + lead + card) を内側でまとめる */
}
.weekly-feature__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v32-px);
  width: 100%;
}
.weekly-feature__heading-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v16-px);
}
.weekly-feature {
  /* 「04.01 UPDATE!」Figma 169:60626 - Alan Sans Bold 15px / 紫 var(--mys-purple-primary) / tracking 0.9px */
}
.weekly-feature__update {
  font-size: var(--f15-px);
  font-weight: 700;
  color: var(--mys-purple-primary);
  letter-spacing: 0.06em;
  margin: 0;
  font-family: "Alan Sans", "Archivo", sans-serif;
}
.weekly-feature {
  /* タイトル「週刊ナゾノバ」Figma 169:60628 - LINE Seed JP ExtraBold 48px / var(--mys-text) / tracking 9.6px (20%) / line-height normal */
}
.weekly-feature__title {
  font-size: var(--f48-px);
  font-weight: 800;
  letter-spacing: 0.2em;
  margin: 0;
  color: var(--mys-text);
  line-height: normal;
}
.weekly-feature__lead {
  font-size: var(--f15-px);
  color: var(--mys-text);
  margin: 0;
  line-height: 1.65;
  letter-spacing: 0.06em;
  font-weight: 400;
}
.weekly-feature {
  /* X アカウントバナー (Figma 169:60641): 478px幅・64px高・黒ピル・X アイコン白丸 / gap 16px / radius 500px */
}
.weekly-feature__x {
  display: flex;
  align-items: center;
  gap: var(--v16-px);
  padding: var(--v8-px);
  background: var(--mys-black);
  color: var(--mys-white);
  border-radius: var(--v500-px);
  text-decoration: none;
  width: var(--v478-px);
  height: var(--v64-px);
  box-sizing: border-box;
  transition: background 0.2s ease;
  position: relative;
}
.weekly-feature__x:hover {
  background: var(--mys-black-soft);
}
.weekly-feature__x-icon {
  width: var(--v49-px);
  height: var(--v49-px);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mys-white);
  color: var(--mys-black);
  border: var(--v3-px) solid var(--mys-black);
  border-radius: 50%;
  font-weight: 900;
  font-size: var(--f22-px);
}
.weekly-feature__x-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  text-align: center;
  color: var(--mys-white);
}
.weekly-feature__x-sub {
  font-size: var(--f13-px);
  opacity: 0.92;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.weekly-feature__x-main {
  font-size: var(--f15-px);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.weekly-feature__x-arrow {
  display: none;
}
@media (max-width: 767px) {
  .weekly-feature__inner {
    width: 100%;
    max-width: 100%;
    padding: 48px 24px;
    gap: 32px;
    border-left: 0;
    border-right: 0;
  }
  .weekly-feature__title {
    font-size: 28px;
    letter-spacing: 0.1em;
  }
  .weekly-feature__lead {
    font-size: 13px;
  }
  .weekly-feature__update {
    font-size: 13px;
  }
  .weekly-feature__x {
    width: 100%;
    max-width: 320px;
    height: 56px;
  }
  .weekly-feature__x-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  .weekly-feature__x-sub {
    font-size: 11px;
  }
  .weekly-feature__x-main {
    font-size: 13px;
  }
}

/* 週刊カード (Figma 169:60630): var(--mys-purple-primary) 紫bg / rounded 16 / 内 thumb 560x560 square + form */
.weekly-card {
  background: var(--mys-purple-primary);
  border-radius: var(--v16-px);
  padding: 0 0 var(--v32-px);
  display: flex;
  flex-direction: column;
  gap: var(--v32-px);
  text-align: center;
  box-shadow: none;
  color: var(--mys-text);
  width: var(--v560-px);
  max-width: 100%;
}
.weekly-card__update {
  /* TOPの weekly-feature では使わない（feature__update が代替） */
  display: none;
}
.weekly-card {
  /* 週刊ナゾノバの thumb は画像内に謎の出題が含まれるため、aspect-ratio / object-fit:cover で
   * 切り取らず必ず全体表示する。img の自然比 + height:auto で出す。 */
}
.weekly-card__thumb {
  margin: 0;
  border-radius: var(--v16-px) var(--v16-px) 0 0;
  overflow: hidden;
  background: transparent;
  position: relative;
}
.weekly-card__thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.weekly-card {
  /* Figma 169:60634 - form-wrap: gap 16 縦並び */
}
.weekly-card__form {
  display: flex;
  flex-direction: column;
  gap: var(--v16-px);
  align-items: center;
  padding: 0 var(--v32-px);
  width: 100%;
  box-sizing: border-box;
  position: relative; /* __feedback の absolute 配置基準 */
}
.weekly-card {
  /* Figma 169:60635 - input: bg var(--mys-input-bg) / 24px 16px padding / rounded 8 / 478px width / LINE Seed JP 18px tracking 1.08px */
}
.weekly-card__input {
  width: 100%;
  max-width: var(--v414-px); /* 478 - 32*2 padding = 414 内側 */
  padding: var(--v16-px) var(--v24-px);
  border-radius: var(--v8-px);
  border: none;
  background: var(--mys-input-bg);
  font-size: var(--f18-px);
  letter-spacing: 0.06em;
  color: var(--mys-text);
  box-sizing: border-box;
  line-height: 1.65;
}
.weekly-card__input::placeholder {
  opacity: 0.5;
  color: var(--mys-text);
}
.weekly-card__input:focus {
  outline: var(--v2-px) solid var(--mys-button-deep);
  outline-offset: var(--v1-px);
}
.weekly-card {
  /* Figma 169:60637 - submit: bg var(--mys-button-deep) / rounded 100 / LINE Seed JP Bold 16px tracking 0.96px / padding 16px 96px */
}
.weekly-card__submit {
  padding: var(--v16-px) var(--v96-px);
  background: var(--mys-button-deep);
  color: var(--mys-white);
  border: none;
  border-radius: var(--v100-px);
  font-size: var(--f16-px);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v16-px);
  transition: background 0.2s ease, transform 0.2s ease;
  letter-spacing: 0.06em;
  line-height: 1.65;
  position: relative;
}
.weekly-card__submit:hover {
  background: var(--mys-button-deep-hover);
}
.weekly-card__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.weekly-card__submit {
  /* 「回答する」ボタンの右側 chevron SVG (カルーセル ナビ等と同じ path) */
}
.weekly-card__submit-arrow {
  width: var(--v18-px);
  height: var(--v18-px);
  position: absolute;
  right: var(--v24-px);
  top: 50%;
  transform: translateY(-50%);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.weekly-card {
  /* 誤答ふきだし: submit の下に absolute で出す。
   * 角丸 bg と上向きツノは同色・連続塗りで一体感を出す（border の三角分離アンチパターンを避ける）。
   * 出入りは opacity + translateY transition でフェード in/out (パッと出てパッと消える単調さを避ける) */
}
.weekly-card__feedback {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: var(--v16-px);
  padding: var(--v12-px) var(--v24-px);
  background: #fcf3ff;
  /* Figma 169:61180 (TOP - 誤答時) 吹き出し文字色は本文と同じ黒系 #333328 */
  color: #ff3838;
  border-radius: var(--v12-px);
  font-size: var(--f14-px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 var(--v4-px) var(--v12-px) var(--mys-shadow-mid);
  box-sizing: border-box;
  z-index: 5;
  pointer-events: none;
  /* 非表示状態: 透明 + 下に 8px ずれた位置で待機 */
  opacity: 0;
  transform: translate(-50%, var(--v8-px));
  transition: opacity 0.3s ease, transform 0.3s ease;
  /* 表示状態: フェード + 上スライドで定位置に */
}
.weekly-card__feedback.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.weekly-card__feedback {
  /* HTML 側の hidden 属性は使わない (CSS class でアニメ制御する) */
  /* 上向きツノ: bg と同じ白で連続させる */
}
.weekly-card__feedback::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: var(--v10-px) solid transparent;
  border-right: var(--v10-px) solid transparent;
  border-bottom: var(--v10-px) solid var(--mys-white);
}
@media (max-width: 767px) {
  .weekly-card {
    width: 100%;
    padding: 0 0 24px;
    gap: 20px;
  }
  .weekly-card__form {
    padding: 0 16px;
  }
  .weekly-card__input {
    font-size: 16px;
    padding: 14px 18px;
    max-width: 100%;
  }
  .weekly-card__submit {
    padding: 14px 48px;
    font-size: 15px;
  }
}

/* ====================================
 * ③ すべての謎 (Figma 169:60647)
 * 帯高さ61px・LEFT 195px purple "すべての謎" / RIGHT 1246px white chip bar
 * ==================================== */
.mystery-list {
  background: var(--mys-bg);
  padding-top: 0;
  margin-top: 0;
  /* 全幅帯: LEFT 紫ブロック + RIGHT 白ブロックを横並び（gap:0）
   * topbar 自体は白で塗る → 紫タイトル右隣の triangle の透明領域 (右上) も白で埋まる。
   * transparent にすると親 .mystery-list (var(--mys-bg) 薄ベージュ) が透けて崩れに見えるため */
}
.mystery-list__topbar {
  background: var(--mys-white);
  color: var(--mys-text);
  height: var(--v61-px);
  padding: 0;
  display: flex;
  align-items: stretch;
  position: relative;
}
.mystery-list {
  /* LEFT: Figma 169:60665 - 紫bg var(--mys-purple-primary)、padding-l 48 padding-r 24、tail/arrow 32x61 右側 */
}
.mystery-list__title {
  background: var(--mys-purple-primary);
  color: var(--mys-white);
  font-size: var(--f24-px);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0;
  white-space: nowrap;
  line-height: 1;
  display: flex;
  align-items: center;
  padding: 0 var(--v24-px) 0 var(--v48-px);
  width: auto;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  /* tail/arrow: Figma 169:62468 (Rectangle 5 vector 32x61) 右下がり直角三角形
   * 左上→右下→左下を結ぶ三角形 (斜辺が左上から右下へ右下がり) */
}
.mystery-list__title::after {
  content: "";
  position: absolute;
  right: -2.18277764vw;
  top: 0;
  width: var(--v32-px);
  height: var(--v61-px);
  background: var(--mys-purple-primary);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.mystery-list {
  /* RIGHT: white bg、padding 16px 48px、ラベル＋chip 群 */
}
.mystery-list__filters-wrap {
  background: var(--mys-white);
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--v16-px);
  flex-wrap: nowrap;
  padding: var(--v16-px) var(--v48-px) var(--v16-px) var(--v16-px);
  box-sizing: border-box;
  margin-left: var(--v32-px); /* LEFT の tail と被らないように */
}
.mystery-list__filters-label {
  font-size: var(--f15-px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--mys-text);
  line-height: 1.65;
  white-space: nowrap;
}
.mystery-list__filters {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--v8-px);
  margin: 0;
  padding: 0;
}
.mystery-list {
  /* Figma 169:60655: 未選択は破線枠 var(--mys-filter-mute-border)・テキスト var(--mys-filter-mute-text)・透明bg */
}
.mystery-list__filter-btn {
  padding: var(--v4-px) var(--v12-px);
  background: transparent;
  color: var(--mys-filter-mute-text);
  border: var(--border-px) dashed var(--mys-filter-mute-border);
  border-radius: var(--v16-px);
  cursor: pointer;
  font-size: var(--f13-px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.65;
  transition: all 0.2s ease;
  /* hover は active/is-selected と同じ色系統 (--mys-filter-active-bg) に揃える */
}
.mystery-list__filter-btn:hover {
  border-color: var(--mys-filter-active-bg);
  color: var(--mys-filter-active-bg);
}
.mystery-list__filter-btn {
  /* URL スラッグ由来の固定フィルタは操作不可。
   * 「選ばれてる感」は残したいので紫塗り＋枠線は維持し、文字色だけ薄くしてロック感を出す */
}
.mystery-list__filter-btn.is-locked {
  cursor: not-allowed;
  pointer-events: none;
}
.mystery-list__filter-btn.is-locked.is-selected {
  color: rgba(255, 255, 255, 0.65);
}
.mystery-list__filter-btn {
  /* Figma 169:60653: 選択時は var(--mys-filter-active-bg) bg・白文字・solid。
   * is-active = dropdown 開いている状態、is-selected = 値が選択されていてチップテキストが選択内容に差替済の状態 */
}
.mystery-list__filter-btn.is-active, .mystery-list__filter-btn.is-selected {
  background: var(--mys-filter-active-bg);
  border: var(--border-px) solid var(--mys-filter-active-bg);
  color: var(--mys-white);
}
.mystery-list {
  /* dropdown: クリックしたチップ直下に floating 表示。
   * top / left / width は JS の positionDropdown が chip 基準でセットする
   * (PC=chip中央寄せ・SP=66.66vw幅。topbar 端を超える場合は端揃え) */
}
.mystery-list__dropdown {
  position: absolute;
  /* top/left は JS が動的にセット。初期値は不可視位置にして flash 防止 */
  top: 0;
  left: -9999px;
  right: auto;
  z-index: 50;
  background: var(--mys-white);
  border: var(--border-px) solid var(--mys-text);
  border-radius: var(--v8-px);
  padding: var(--v12-px) var(--v16-px);
  box-shadow: 0 var(--v8-px) var(--v24-px) var(--mys-shadow-mid);
  box-sizing: border-box;
}
.mystery-list__dropdown[hidden] {
  display: none;
}
.mystery-list__dropdown-items {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--v8-px);
  margin: 0;
  padding: 0;
  /* チップ (.mystery-list__filter-btn) と同じ挙動・色で統一:
   * 通常 = 枠+文字色 (グレー)、hover = 枠+文字色 (紫)、選択中 = 紫塗り+白文字 */
}
.mystery-list__dropdown-items button {
  padding: var(--v6-px) var(--v12-px);
  background: transparent;
  color: var(--mys-filter-mute-text);
  border: var(--border-px) solid var(--mys-filter-mute-border);
  border-radius: var(--v999-px);
  cursor: pointer;
  font-size: var(--f13-px);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  font-family: inherit;
  letter-spacing: 0.06em;
  /* hover: チップと同じく filter-active-bg 系統に揃える (active との色違いを解消) */
}
.mystery-list__dropdown-items button:hover {
  border-color: var(--mys-filter-active-bg);
  color: var(--mys-filter-active-bg);
}
.mystery-list__dropdown-items button {
  /* 選択中: チップの is-active/is-selected と同じ filter-active-bg 塗り */
}
.mystery-list__dropdown-items button.is-selected {
  background: var(--mys-filter-active-bg);
  color: var(--mys-white);
  border-color: var(--mys-filter-active-bg);
}
.mystery-list {
  /* 「全てクリア」: items の下段に改行配置 + テキストリンク風の控えめ表示 */
}
.mystery-list__dropdown-clear-wrap {
  margin-top: var(--v12-px);
  padding-top: var(--v8-px);
  border-top: var(--border-px) dashed var(--mys-filter-mute-border);
  text-align: center;
}
.mystery-list__dropdown-clear {
  background: transparent;
  border: 0;
  color: var(--mys-text-muted);
  text-decoration: underline;
  font-size: var(--f12-px);
  cursor: pointer;
  padding: var(--v4-px) var(--v8-px);
  letter-spacing: 0.06em;
  font-family: inherit;
}
.mystery-list__dropdown-clear:hover {
  color: var(--mys-text);
}
.mystery-list {
  /* Figma 169:60668 Frame 93 1441x1296、card width 720（画面半分）、innerはfull width */
}
.mystery-list__inner {
  max-width: var(--v1440-px);
  margin: 0 auto;
  padding: 0;
}
.mystery-list__inner .mystery-card-grid {
  border-radius: 0;
}
.mystery-list__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
}
.mystery-list {
  /* 1280px以上で3カラム化。767px以下のSP 1カラム / 768〜1279px の PC 2カラムは維持
   * JS mystery.js updateBorderClasses() の cols 判定も同じ閾値で 3 に切り替える */
}
@media (min-width: 1280px) {
  .mystery-list__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.mystery-list__empty {
  grid-column: 1/-1;
  text-align: center;
  padding: var(--v80-px) 0;
  color: var(--mys-text-muted);
}
.mystery-list {
  /* もっと見るボタン: 紫 bg / 白文字 / 全幅 / 上に区切り線 */
}
.mystery-list__more-wrap {
  margin: 0;
}
.mystery-list__more {
  display: block;
  width: 100%;
  padding: var(--v28-px) var(--v32-px);
  background: var(--mys-purple-primary);
  color: var(--mys-white);
  border: none;
  border-bottom: var(--border-px) solid var(--mys-text);
  cursor: pointer;
  font-size: var(--f18-px);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.65;
  transition: background 0.2s ease;
}
.mystery-list__more:hover {
  background: var(--mys-purple-deep-bg);
}
@media (max-width: 767px) {
  .mystery-list__more {
    padding: 18px 24px;
    font-size: 15px;
  }
}
@media (max-width: 767px) {
  .mystery-list__topbar {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    border-top: var(--border-px) solid var(--mys-text);
    border-bottom: var(--border-px) solid var(--mys-text);
  }
  .mystery-list__title {
    /* FB「下層ページの見出しは幅なりゆきに」: SP でも auto + 左寄せに */
    width: auto;
    align-self: flex-start;
    font-size: var(--f18-px);
    padding: var(--v12-px) var(--v16-px);
    letter-spacing: 0.06em;
    /* SP は PC と逆向きの斜辺: 左下→右上 (右上がり)。
     * 直角頂点を左上に置く polygon で、PC の左下直角と斜辺の向きを反転する */
  }
  .mystery-list__title::after {
    display: block;
    right: -4.1vw;
    top: 0;
    width: var(--v16-px);
    height: 100%;
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }
  .mystery-list__filters-wrap {
    margin-left: 0;
    padding: var(--v12-px) var(--v16-px);
    flex-wrap: wrap;
    gap: var(--v8-px);
  }
  .mystery-list__filters-label {
    font-size: var(--f13-px);
  }
  .mystery-list__filter-btn {
    font-size: var(--f12-px);
    padding: var(--v4-px) var(--v10-px);
  }
  .mystery-list {
    /* SP も PC と同じ「びっしり詰めて見せる」コンセプトを維持。
     * ページ左右余白なし、カード間 gap なしで Figma の構造をそのまま 1 カラムに展開 */
  }
  .mystery-list__inner {
    padding: 0;
  }
  .mystery-list__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .mystery-list__grid .mystery-list__more-wrap {
    margin-top: 0;
  }
}

/* mystery-assets / _list-page.scss
 * /mystery/list/ 系の汎用一覧ページ
 * Figma 169:62380 ヒーロー + もっと見るボタン
 */
/* ============================
 * ヒーロー (Figma 169:62386)
 * pale lavender bg + dot grid + 中央タイトル
 * ============================ */
.list-page-hero {
  background-color: var(--mys-purple-hero-bg);
  background-image: var(--dot-pattern);
  background-size: var(--dot-size) var(--dot-size);
  background-position: 0 0;
  padding: var(--v64-px) var(--v32-px);
  text-align: center;
  border-bottom: var(--border-px) solid var(--mys-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v32-px);
}
.list-page-hero__title {
  /* Figma 169:62447 / 169:62718: LINE Seed JP ExtraBold 36-48px tracking 7.2-9.6px / color var(--mys-text) */
  font-size: var(--f48-px);
  font-weight: 800;
  line-height: normal;
  letter-spacing: 0.2em;
  color: var(--mys-text);
  margin: 0;
}
.list-page-hero {
  /* Figma 169:62719 lead: LINE Seed JP Regular 15px tracking 0.9px lh 1.65 */
}
.list-page-hero__lead {
  font-size: var(--f15-px);
  font-weight: 400;
  color: var(--mys-text);
  line-height: 1.65;
  letter-spacing: 0.06em;
  margin: 0;
}
.list-page-hero {
  /* Figma 169:62720 X アカウントボタン: 478x64 黒pill / 内部 49sq 白丸X + 2行テキスト中央寄せ + 右 > */
}
.list-page-hero__x {
  display: inline-flex;
  align-items: center;
  background: var(--mys-black);
  color: var(--mys-white);
  border-radius: var(--v500-px);
  width: var(--v478-px);
  max-width: 100%;
  height: var(--v64-px);
  padding: 0 var(--v24-px) 0 var(--v8-px);
  text-decoration: none;
  gap: var(--v16-px);
  box-sizing: border-box;
  position: relative;
}
.list-page-hero__x-icon {
  width: var(--v49-px);
  height: var(--v49-px);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mys-white);
  color: var(--mys-black);
  border: var(--v3-px) solid var(--mys-black);
  border-radius: 50%;
  font-weight: 900;
  font-size: var(--f22-px);
}
.list-page-hero__x-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.5;
  color: var(--mys-white);
}
.list-page-hero__x {
  /* Figma 169:62724 sub: 13px ExtraBold tracking 0.9 */
}
.list-page-hero__x-sub {
  font-size: var(--f13-px);
  font-weight: 800;
  letter-spacing: 0.06em;
}
.list-page-hero__x {
  /* Figma 169:62724 main: 18px ExtraBold tracking 0.9 */
}
.list-page-hero__x-main {
  font-size: var(--f18-px);
  font-weight: 800;
  letter-spacing: 0.06em;
}
.list-page-hero__x {
  /* list-page-hero__x-arrow: 公式 X ボタンの右端 chevron SVG */
}
.list-page-hero__x-arrow {
  width: var(--v18-px);
  height: var(--v18-px);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 767px) {
  .list-page-hero {
    padding: 32px 16px;
    background-size: 18px 18px;
    gap: 20px;
  }
  .list-page-hero__title {
    font-size: 24px;
    letter-spacing: 0.16em;
  }
  .list-page-hero__lead {
    font-size: 13px;
  }
  .list-page-hero__x {
    width: 100%;
    max-width: 320px;
    height: 56px;
    padding: 0 16px 0 6px;
    gap: 10px;
  }
  .list-page-hero__x-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
    border-width: 2px;
  }
  .list-page-hero__x-sub {
    font-size: 11px;
  }
  .list-page-hero__x-main {
    font-size: 15px;
  }
}

/* ============================
 * ページネーション (一覧ページ用、TOP の もっと見る とは別)
 * 数字 + 前へ/次へ のリンクボタン群
 * ============================ */
.mystery-list-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--v12-px);
  padding: var(--v48-px) var(--v32-px);
  border-top: var(--border-px) solid var(--mys-text);
  background: var(--mys-white);
}
@media (max-width: 767px) {
  .mystery-list-pagination {
    border-top: 0;
  }
}
.mystery-list-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--v44-px);
  height: var(--v44-px);
  padding: 0;
  border: var(--border-px) solid var(--mys-text);
  background: var(--mys-white);
  color: var(--mys-text);
  text-decoration: none;
  font-size: var(--f15-px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
  font-family: "LINE Seed JP", "yakuhanjp", "Hiragino Sans", sans-serif;
}
.mystery-list-pagination__link:hover {
  background: var(--mys-purple-primary);
  color: var(--mys-white);
  border-color: var(--mys-purple-primary);
}
.mystery-list-pagination__link {
  /* 現在ページは紫塗りつぶし */
}
.mystery-list-pagination__link--current {
  background: var(--mys-purple-primary);
  color: var(--mys-white);
  border-color: var(--mys-purple-primary);
  cursor: default;
}
.mystery-list-pagination__link--current:hover {
  background: var(--mys-purple-primary);
}
.mystery-list-pagination__link {
  /* 前へ/次へは chevron SVG (カルーセル ナビと同じ path) を円ボタン内中央に */
}
.mystery-list-pagination__link--prev svg, .mystery-list-pagination__link--next svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 767px) {
  .mystery-list-pagination {
    padding: 24px 16px;
    gap: 8px;
  }
  .mystery-list-pagination__link {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
}

.mystery-list-page footer .footTop,
.weekly-archive-page footer .footTop {
  margin-top: 0 !important;
}

/* mystery-assets / _detail.scss
 * /mystery/{slug}/ 詳細 (Figma 169:66446)
 *
 * 1 カラム構成: status badge → title → hero image → 本文 → メタ → CTA
 * コンテナ幅 782px (中央寄り)。 Figma 169:65304 (2カラム variant) は採用しない。
 */
.mystery-single .footTop {
  margin-top: 0 !important;
}

/* Figma 169:66446 詳細ページ全体: 背景はフラット (--mys-detail-bg)。
 * コンテンツコンテナ(782幅)の左右に縦線を入れる ─ 実装は .mystery-detail-page::before/::after で
 * viewport 中央 782 幅の両端位置に 1px navy 縦線を引く方式 (hero画像 808px はみ出しと干渉しない) */
/* 詳細ページのコンテナ内「前のページに戻る」テキストリンク
 * single-mystery-list は .mystery-detail (flex column) の最初の child、
 * single-weekly-mystery は .weekly-archive の直下 (hero の前) に置く。
 * referrer がない場合は archive にフォールバック。 */
.mystery-back {
  align-self: flex-start; /* .mystery-detail (flex column) 内では左寄せ */
  display: inline-flex;
  align-items: baseline;
  gap: var(--v4-px);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--mys-text);
  font-size: var(--f14-px);
  font-weight: 500;
  letter-spacing: 0.06em;
  /* reset.css の `a { text-decoration: none !important; }` を打ち返すため !important */
  text-decoration: underline !important;
  text-underline-offset: 0.25em;
  cursor: pointer;
  transition: opacity 0.2s ease;
  font-family: inherit;
}
.mystery-back::before {
  content: "‹";
  font-size: 1.2em;
  line-height: 1;
  text-decoration: none;
  display: inline-block;
}
.mystery-back:hover {
  opacity: 0.7;
}
@media (max-width: 767px) {
  .mystery-back {
    font-size: 13px;
  }
}

/* weekly archive 側のコンテナ内に置いたときも左寄せに揃える */
.weekly-archive > .mystery-back {
  margin: var(--v24-px) 0 0 var(--v24-px);
}

.mystery-detail-page {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 0;
  background-color: var(--mys-purple-hero-bg);
  overflow-x: hidden;
  border-bottom: var(--border-px) solid var(--mys-text);
  background-image: radial-gradient(circle, var(--mys-text-alpha-18) var(--v1-px), transparent var(--v2-px));
  /* Figma 169:66447 の line 要素は stroke="#3740E4" (= --mys-tag-blue navy) + 親 g opacity="0.07"。
   * その値をそのまま縦線にも適用 (rgba 55,64,228 = #3740E4 の RGB 表記、α 0.07) */
}

.mystery-detail {
  --card-accent: var(--mys-c3);
  background-color: #fafafc;
  /* Figma 169:66999: コンテナは 782 幅で中央寄り
   * 各セクション間 gap は Figma 計測で 33〜40px とバラつきあり (heading→hero 40 / hero→本文 39 / 本文→meta 33)
   * 平均的に gap=33 で揃え、heading→hero だけ少し広げる方針 */
  display: flex;
  flex-direction: column;
  gap: var(--v33-px);
  width: var(--v974-px);
  max-width: 100%;
  margin: 0 auto;
  padding: var(--v96-px);
  box-sizing: border-box;
  border-left: var(--border-px) solid var(--mys-text);
  border-right: var(--border-px) solid var(--mys-text);
}
@media (max-width: 767px) {
  .mystery-detail {
    border-left: 0;
    border-right: 0;
  }
}
.mystery-detail--color1 {
  --card-accent: var(--mys-c1);
}
.mystery-detail--color2 {
  --card-accent: var(--mys-c2);
}
.mystery-detail--color3 {
  --card-accent: var(--mys-c3);
}
.mystery-detail--color4 {
  --card-accent: var(--mys-c4);
}
.mystery-detail--color5 {
  --card-accent: var(--mys-c5);
}
.mystery-detail {
  /* Figma 169:67000: status badge + title 群、gap 13px */
}
.mystery-detail__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--v13-px);
  width: 100%;
  max-width: 100%;
}
.mystery-detail {
  /* Figma 169:67001: status badge navy filled / padding 4 8 / radius 16 / LINE Seed Bold 13px white */
}
.mystery-detail__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--v4-px) var(--v8-px);
  background: var(--card-accent);
  color: var(--mys-white);
  border-radius: var(--v16-px);
  font-size: var(--f13-px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.65;
}
@media (max-width: 767px) {
  .mystery-detail__status {
    font-size: var(--f12-px);
  }
}
.mystery-detail__status.is-closed {
  background: var(--mys-status-closed-bg);
}
.mystery-detail {
  /* Figma 169:67003: LINE Seed JP ExtraBold 56px tracking 3.36px (= 6%) var(--mys-text) line-height normal */
}
.mystery-detail__title {
  font-size: var(--f48-px);
  font-weight: 800;
  line-height: normal;
  margin: 0;
  letter-spacing: 0.06em;
  color: var(--mys-text);
  font-family: "LINE Seed JP", "yakuhanjp", "Hiragino Sans", sans-serif;
}
.mystery-detail__subtitle {
  font-size: var(--f15-px);
  color: var(--mys-text);
  line-height: 1.65;
  margin: 0;
  letter-spacing: 0.06em;
}
.mystery-detail {
  /* Figma 169:67005: ヒーロー画像 808x454 (コンテナ 782 を右に 26px overflow)
   * Figma の意図通り、画像はコンテナ幅より広く、右側に少しはみ出させる */
}
.mystery-detail__hero {
  margin: 0;
  width: 100%;
  overflow: hidden;
  /* 親 mystery-detail (782 幅) より 26 広いので、右側にはみ出す形になる */
}
.mystery-detail__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mystery-detail {
  /* Figma 169:67006: LINE Seed JP Regular 15px / lh 1.65 / tracking 0.9px (= 6%) / var(--mys-text) */
}
.mystery-detail__content {
  font-size: var(--f15-px);
  line-height: 1.65;
  letter-spacing: 0.06em;
  color: var(--mys-text);
  margin: 0;
  font-family: "LINE Seed JP", "yakuhanjp", "Hiragino Sans", sans-serif;
}
.mystery-detail__content p {
  margin: 0 0 1.65em;
}
.mystery-detail__content p:last-child {
  margin-bottom: 0;
}
.mystery-detail {
  /* Figma 169:67007: メタ 1 行レイアウト (629幅 / 2 項目 / 各 302.5 / gap 24)
   * Figma は placeholder で 2 項目 同じ「参加人数」だが、本実装は「参加人数」+「イベント」を採用 */
}
.mystery-detail__spec {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--v24-px);
  margin: 0;
  padding: 0;
  width: var(--v629-px);
  max-width: 100%;
}
@media (max-width: 768px) {
  .mystery-detail__spec {
    gap: var(--v12-px);
  }
}
.mystery-detail__spec li {
  display: flex;
  align-items: center;
  gap: var(--v12-px);
  width: var(--v302-px);
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .mystery-detail__spec li {
    gap: var(--v8-px);
  }
}
.mystery-detail {
  /* Figma 169:67009: spec ラベル navy filled / radius 4 / padding 4 8 / Bold 13px white */
}
.mystery-detail__spec-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--v4-px) var(--v8-px);
  background: var(--card-accent);
  color: var(--mys-white);
  border-radius: var(--v4-px);
  font-size: var(--f13-px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.65;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .mystery-detail__spec-label {
    font-size: var(--f12-px);
  }
}
.mystery-detail {
  /* Figma 169:67011: spec 値 Bold 13px var(--mys-text) */
}
.mystery-detail__spec-value {
  font-size: var(--f13-px);
  font-weight: 700;
  color: var(--mys-text);
  letter-spacing: 0.06em;
  line-height: 1.65;
}
@media (max-width: 767px) {
  .mystery-detail__spec-value {
    font-size: var(--f12-px);
  }
}
.mystery-detail__labels {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--v8-px);
  margin: 0;
  padding: 0;
}
.mystery-detail__labels li {
  padding: var(--v4-px) var(--v12-px);
  border: var(--border-px) dashed var(--mys-filter-mute-border);
  border-radius: var(--v16-px);
  font-size: var(--f13-px);
  font-weight: 700;
  color: var(--mys-filter-mute-text);
  letter-spacing: 0.06em;
}
.mystery-detail__cta {
  display: flex;
  gap: var(--v16-px);
  flex-wrap: wrap;
}
.mystery-detail__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--v16-px);
  padding: var(--v8-px) var(--v16-px);
  border-radius: var(--v100-px);
  text-decoration: none;
  font-size: var(--f16-px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.65;
  transition: opacity 0.2s ease;
}
.mystery-detail__btn:hover {
  opacity: 0.9;
}
.mystery-detail__btn {
  /* external / back ともカード色 (card-accent) に連動。
   * .mystery-detail--color{1〜5} が --card-accent を 5 色から差し替え、
   * その色をボタン背景に流すことで「カードのカラーとボタンが揃う」見た目になる */
}
.mystery-detail__btn--external, .mystery-detail__btn--back {
  background: var(--card-accent);
  color: var(--mys-white);
}
.mystery-detail__btn {
  /* btn 内のアイコン: ヘッダー「テラノバ公式サイト ↗」と同じ右上斜め矢印 SVG に揃える。
   * fill: none + stroke: currentColor で線のみ、ボタン文字色に追従。
   * Figma 169:66993 のヘッダー nav-extlink と同等の path、サイズはボタン内向けに 16px */
}
.mystery-detail__btn-arrow {
  width: var(--v16-px);
  height: var(--v16-px);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
@media (max-width: 1023px) {
  .mystery-detail {
    width: 100%;
    padding: var(--v32-px) var(--v32-px) var(--v64-px);
  }
}
@media (max-width: 767px) {
  .mystery-detail {
    padding: 24px 16px 48px;
    gap: 24px;
  }
  .mystery-detail__heading {
    width: 100%;
    gap: 10px;
  }
  .mystery-detail__title {
    font-size: 28px;
    letter-spacing: 0.08em;
  }
  .mystery-detail__content {
    font-size: 14px;
  }
  .mystery-detail__spec li {
    width: 100%;
  }
  .mystery-detail__cta {
    flex-direction: column;
    width: 100%;
  }
  .mystery-detail__btn {
    width: 100%;
    justify-content: center;
  }
}

/* mystery-assets / _weekly.scss
 * /weekly-mystery/ archive grid
 *
 * 構造は他下層 (page-mystery-list.php) と同じ list-page-hero + mystery-list を使用。
 * カードのスタイルは Figma 169:62729 通り (白bg / 左+上 border でテーブル状 / 紫pillの UPDATE / 560sq thumb / form)
 */
.weekly-card-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
}
.weekly-card-grid__item {
  list-style: none;
  display: flex;
}
@media (max-width: 767px) {
  .weekly-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Figma 169:62729 カード本体: 白bg + LEFT+TOP border。
 * TOPの weekly-feature 用 .weekly-card (紫bg) を完全に override する archive variant */
.weekly-card--in-grid {
  background: var(--mys-white);
  border-top: var(--border-px) solid var(--mys-card-border);
  border-left: var(--border-px) solid var(--mys-card-border);
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  padding: 0 0 var(--v48-px);
  gap: var(--v36-px);
  color: var(--mys-text);
  width: 100%;
  max-width: 100%;
  align-items: center;
}
@media (max-width: 767px) {
  .weekly-card--in-grid {
    border-left: 0;
    border-right: 0;
  }
}

/* テーブル状外枠補完: 右列 / 最下行 / 奇数件最後 に border 追加 (mystery-card-grid と同じロジック) */
.weekly-card-grid__item:nth-child(2n) .weekly-card--in-grid {
  border-right: var(--border-px) solid var(--mys-card-border);
}

.weekly-card-grid__item:nth-last-child(-n+2) .weekly-card--in-grid {
  border-bottom: var(--border-px) solid var(--mys-card-border);
}

.weekly-card-grid__item:last-child:nth-child(odd) .weekly-card--in-grid {
  border-right: var(--border-px) solid var(--mys-card-border);
}

/* Figma 169:62731 「MM.DD UPDATE!」紫pill + 右側 tail (Rectangle 8) */
.weekly-card--in-grid .weekly-card__update {
  display: inline-flex;
  align-items: center;
  background: var(--mys-purple-primary);
  color: var(--mys-white);
  font-family: "Alan Sans", "Archivo", sans-serif;
  font-size: var(--f15-px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.65;
  padding: var(--v4-px) var(--v12-px);
  margin: 0;
  align-self: flex-start;
  position: relative;
  /* tail(三角) は「左端 2px の長方形 ＋ 右側の三角」の形にし、長方形部分を pill に重ねる。
   * 旧実装は right:var(--m16-px) + width:var(--v16-px) の打ち消しで tail を右外に置いていたが、
   * どちらも vw 由来の端数値で個別に丸められるため、ビューポート幅次第で
   * pill の右端と tail の左端の間に髪の毛線の隙間が出た（毎回ではなく幅依存で再現）。
   * left:100% で基準を pill の右辺 1 つに統一し、負マージン 2px 分を重ねて隙間を物理的に塞ぐ。
   * 重なる 2px は pill と同色の長方形なので見た目は変わらない（斜辺の傾きも従来どおり）。
   * 参考: 同種の tail (_top.scss の filters-title) も既に少量オーバーラップさせている。 */
}
.weekly-card--in-grid .weekly-card__update::after {
  content: "";
  position: absolute;
  left: 100%;
  margin-left: -2px;
  top: -0.5px;
  bottom: 0;
  width: calc(var(--v16-px) + 2px);
  background: var(--mys-purple-primary);
  clip-path: polygon(0 0, 100% 0, 2px 100%, 0 100%);
}

/* 週刊ナゾノバの thumb は画像内に謎の出題が含まれるため、絶対に切り取らず全体表示。
 * aspect-ratio / object-fit:cover は禁止。img の自然比に従って height:auto で出す。 */
.weekly-card--in-grid .weekly-card__thumb {
  width: calc(100% - var(--v160-px));
  max-width: var(--v560-px);
  margin: 0 auto;
  border-radius: 0;
  background: transparent;
}
.weekly-card--in-grid .weekly-card__thumb img {
  width: 100%;
  height: auto;
  display: block;
}

/* form は base の .weekly-card__form (_top.scss) を継承。
 * archive では padding 調整のみ (TOPと違ってカードに 32px padding が無いため) */
.weekly-card--in-grid .weekly-card__form {
  padding: 0 var(--v82-px);
}

@media (max-width: 767px) {
  .weekly-card--in-grid {
    padding: 0 0 24px;
    gap: 20px;
  }
  .weekly-card--in-grid .weekly-card__thumb {
    width: calc(100% - 48px);
    max-width: 100%;
  }
  .weekly-card--in-grid .weekly-card__form {
    padding: 0 24px;
  }
}
/* mystery-assets / _modal.scss
 * 正解モーダル
 */
/* ====================================
 * 正解モーダル
 * ==================================== */
.weekly-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* transition のため hidden を display:none ではなく opacity 0 で隠す。
   * hidden=true の時のみ display:none（初期状態 + 完全クローズ後） */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.weekly-modal[hidden] {
  display: none;
}
.weekly-modal {
  /* JS が次フレームで is-open を付ける → opacity と panel scale が transition で出る */
}
.weekly-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.weekly-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.65);
  cursor: pointer;
}
.weekly-modal {
  /* Figma 169:60888: 980×601 bg #f0ecff / border 20px solid #7657e8 / padding 64 120 / radius 16 / 内側 gap 48 */
}
.weekly-modal__panel {
  position: relative;
  background: var(--mys-purple-lavender);
  border: var(--v20-px) solid var(--mys-purple-primary);
  border-radius: var(--v16-px);
  padding: var(--v64-px) var(--v120-px);
  max-width: var(--v980-px);
  width: calc(100% - var(--v32-px));
  z-index: 1;
  text-align: center;
  box-shadow: 0 var(--v12-px) var(--v32-px) var(--mys-shadow-strong);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v48-px);
  /* オープン時の panel pop アニメ */
  transform: scale(0.92);
  transition: transform 0.25s cubic-bezier(0.34, 1.35, 0.45, 1);
}
.weekly-modal.is-open .weekly-modal__panel {
  transform: scale(1);
}
.weekly-modal__close {
  position: absolute;
  top: var(--m40-px);
  right: var(--m40-px);
  width: var(--v60-px);
  height: var(--v60-px);
  border-radius: 50%;
  background: var(--mys-white);
  border: var(--v2-px) solid var(--mys-text);
  cursor: pointer;
  font-size: var(--f28-px);
  line-height: 1;
  color: var(--mys-text);
  box-shadow: 0 var(--v4-px) var(--v12-px) var(--mys-shadow-mid);
}
.weekly-modal__update {
  display: none; /* Figma にはない */
}
.weekly-modal {
  /* Figma 169:60890: title 596px width / gap 24px / LINE Seed JP ExtraBold 48px tracking 9.6px */
}
.weekly-modal__title {
  font-size: var(--f48-px);
  font-weight: 800;
  margin: 0;
  color: var(--mys-text);
  letter-spacing: 0.2em;
  line-height: normal;
  max-width: var(--v596-px);
  width: 100%;
}
.weekly-modal__title-accent {
  color: var(--mys-purple-primary); /* Figma 169:60891: 「正解」だけ #7657e8 */
}
.weekly-modal {
  /* Figma 169:60892: LINE Seed JP Bold 18px tracking 1.08px lh 1.65 */
}
.weekly-modal__body {
  font-size: var(--f18-px);
  font-weight: 700;
  line-height: 1.65;
  color: var(--mys-text);
  letter-spacing: 0.06em;
  margin: 0;
  max-width: 100%;
}
.weekly-modal {
  /* Figma 169:60893: 2 cards / gap 16px / 320×108 each */
}
.weekly-modal__cta {
  list-style: none;
  display: flex;
  gap: var(--v16-px);
  margin: 0;
  padding: 0;
  justify-content: center;
}
@media (max-width: 767px) {
  .weekly-modal__cta {
    width: 100%;
  }
}
.weekly-modal__cta-item {
  width: var(--v320-px);
  aspect-ratio: 320/108;
}
@media (max-width: 767px) {
  .weekly-modal__cta-item {
    width: 100%;
  }
}
.weekly-modal__cta-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--v16-px);
  border-radius: var(--v8-px);
  border: var(--border-px) solid var(--mys-text);
  text-decoration: none;
  color: var(--mys-white);
  height: 100%;
  box-sizing: border-box;
  transition: transform 0.2s ease;
  position: relative;
  overflow: hidden;
}
.weekly-modal__cta-item a:hover {
  transform: translateY(var(--m2-px));
}
.weekly-modal__cta-item {
  /* Figma 169:60894: 320×108 のバナーをそのまま画像化（紫グラデ+紫帯+ロゴ+テキスト全部入り）。
   * HTML 側のテキストは画像内に含まれるため visually hide する */
}
.weekly-modal__cta-item--weekly a {
  background: url("../img/modal-cta-weekly-bg.png") center/cover no-repeat;
  color: var(--mys-purple-text-modal);
  text-indent: -9999em;
  overflow: hidden;
}
.weekly-modal__cta-item {
  /* Figma 169:60900: 320×108 のバナーをそのまま画像化（紺ベタ+キャラ画像+テキスト全部入り） */
}
.weekly-modal__cta-item--mystery a {
  background: url("../img/modal-cta-mystery-bg.png") center/cover no-repeat;
  color: var(--mys-white);
  text-indent: -9999em;
  overflow: hidden;
}
.weekly-modal__cta-sub {
  font-size: 12.7px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: var(--v5-px);
}
.weekly-modal__cta-main {
  font-size: var(--f24-px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: normal;
}
.weekly-modal {
  /* Figma 169:60906: 478×72 / bg black / rounded 500 / X icon 49 white circle / 2行テキスト */
}
.weekly-modal__x {
  display: flex;
  align-items: center;
  padding: var(--v8-px);
  background: var(--mys-black);
  color: var(--mys-white);
  border-radius: var(--v500-px);
  text-decoration: none;
  width: var(--v478-px);
  height: var(--v72-px);
  box-sizing: border-box;
  position: relative;
}
.weekly-modal__x-icon {
  width: var(--v49-px);
  height: var(--v49-px);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mys-white);
  color: var(--mys-black);
  border: var(--v3-px) solid var(--mys-black);
  border-radius: 50%;
  font-weight: 900;
  font-size: var(--f22-px);
}
.weekly-modal__x-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  text-align: center;
  color: var(--mys-white);
}
.weekly-modal__x-sub {
  font-size: var(--f14-px);
  opacity: 0.92;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
}
.weekly-modal__x-main {
  font-size: var(--f18-px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.weekly-modal__x-arrow {
  display: none;
}
@media (max-width: 767px) {
  .weekly-modal__panel {
    max-width: 92vw;
    width: 100%;
    padding: var(--v40-px) var(--v24-px) var(--v28-px);
    margin: 0 var(--v16-px);
    border-width: var(--v4-px);
    gap: var(--v16-px);
  }
  .weekly-modal__close {
    width: var(--v36-px);
    height: var(--v36-px);
    font-size: var(--f18-px);
    top: var(--m16-px);
    right: var(--m8-px);
  }
  .weekly-modal__title {
    font-size: var(--f22-px);
  }
  .weekly-modal__body {
    font-size: var(--f12-px);
  }
  .weekly-modal__cta {
    gap: var(--v8-px);
    flex-direction: column;
  }
  .weekly-modal {
    /* X アカウントボタン: 他箇所 (.weekly-feature__x / .list-page-hero__x) の SP と
     * 文字数・サイズを揃える (Figma 471x72 を vw scale すると SP で潰れて画面はみ出すため
     * 絶対 px で再指定) */
  }
  .weekly-modal__x {
    width: 100%;
    max-width: 320px;
    height: 56px;
    padding: 0 16px 0 6px;
    gap: 10px;
  }
  .weekly-modal__x-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
    border-width: 2px;
  }
  .weekly-modal__x-sub {
    font-size: 11px;
  }
  .weekly-modal__x-main {
    font-size: 13px;
  }
}

/* mystery-assets / _front-banner.scss
 * front-page バナー (keybnr + home-mystery-banner) のスタッキング
 *
 * HTML 上は <section class="area1"> 内に .area1__keybnr-stack でラップ。
 *   .area1__keybnr-stack
 *     .keybnr           ← レガシー要素 (5つの鍵を見つけてみよう)
 *     .home-mystery-banner  ← Figma 169:68002
 *
 * 位置取りは **wrapper 1 箇所** だけが負う。中の 2 要素は flex の gap/basis で並ぶので、
 * 個別要素に position: absolute / left:calc(...) を書かない。サイズが変わっても座標ズレが起きない。
 */
/* ===== wrapper =================================== */
.area1__keybnr-stack {
  /* PC: area1 内の左寄せ。keybnr が 110vh 下に出る既存挙動を踏襲 */
  position: absolute;
  top: 110vh;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--v16-px);
  z-index: 100;
}
@media (max-width: 767px) {
  .area1__keybnr-stack {
    /* SP: コンテナ左右 16px 余白、中で keybnr / banner を横並び (55:45) */
    left: var(--v16-px);
    right: var(--v16-px);
    top: 115vh;
    flex-direction: row;
    align-items: stretch;
    gap: var(--v8-px);
  }
}

/* ===== keybnr (legacy 要素) を wrapper 配下にハマるよう override ===== */
/* legacy index_pc.css: position:absolute; left:0; top:110vh; width:var(--v260-px)
 * legacy index_sp.css: position:relative; left:0; top:110vh; width:61.33vw; border-radius:0 ... 0
 * wrapper が位置を持つので、子側は position:static で flow に乗せる */
.area1__keybnr-stack > .keybnr {
  position: static !important;
  top: auto !important;
  left: auto !important;
}
@media (max-width: 767px) {
  .area1__keybnr-stack > .keybnr {
    /* SP: 横並び 55:45 + padding 圧縮で「見つけてみよう。」2 行を保つ */
    width: 50% !important;
    box-sizing: border-box;
    padding: var(--v10-px) var(--v12-px) !important;
    border-radius: var(--v8-px) !important;
  }
  .area1__keybnr-stack > .keybnr p {
    gap: var(--v10-px) !important;
  }
  .area1__keybnr-stack > .keybnr img {
    width: var(--v24-px) !important;
  }
}

/* ===== home-mystery-banner (Figma 169:68002) ===== */
/* 260x108 のテキスト入り画像をそのまま bg に当てる。HTML span は SR 用に visually hidden */
.home-mystery-banner {
  display: block;
  width: var(--v260-px);
  height: var(--v108-px);
  background: url("../img/front-banner.png") center/cover no-repeat;
  border: var(--border-px) solid var(--mys-text);
  border-radius: 0 var(--v16-px) var(--v16-px) 0;
  border-left: 0;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.2s ease;
  /* PC: 個別位置取りなし、wrapper の flex column の 2 つ目として keybnr の下に */
}
.home-mystery-banner__character, .home-mystery-banner__text, .home-mystery-banner__sub, .home-mystery-banner__main {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: 0;
}
@media (max-width: 767px) {
  .home-mystery-banner {
    /* SP: 横並び 45% 側。aspect-ratio で高さ自動、4 隅 angle 揃え */
    width: 50%;
    height: auto;
    aspect-ratio: 220/92;
    border: var(--border-px) solid var(--mys-text);
    border-radius: var(--v8-px);
    margin: 0;
  }
}

/*# sourceMappingURL=mystery.css.map */