@charset "utf-8";
/* ============================================================
   天才性診断ページ専用スタイル
   対象: /genius/（天才性診断トップ） /genius/how-to/（天才性の活かし方）
   読み込み: functions.php で「該当ページのフロント」と「編集画面」の両方に enqueue
   テンプレート: page-genius.php（ヘッダー・フッター・パンくずなし）

   ブロック構成（SWELLネイティブ）:
     loos/full-wide
       └ group.genius-types            … 黄色の枠
           ├ h2.genius-types__tab      … 枠上辺に重ねるタブ見出し
           └ group.genius-types__grid
               └ loos/columns（PC4列 / SP2列）
                   └ loos/column × 8
                       └ group.genius-types__item（ブロック全体が1リンク）
                           ├ figure.genius-types__img
                           ├ p.genius-types__lead
                           └ h3.genius-types__name

   ※ 列組みは SWELLのカラムブロックが担当（CSSでgridは組まない）
   ※ セレクタに .post_content を使わない
      → 編集画面（.editor-styles-wrapper 配下）でも同じ見た目になるようにするため
      → SWELLの is-style-section_ttl（装飾リセット系）に勝つ必要がある箇所は
        「.genius-types 子孫 ＋ クラス重ね」で詳細度を上げている
   2026-08 新規
   ============================================================ */

:root {
  --genius-yellow: #fffbc0;
  --genius-blue: #1b68c5;

  /* 本文フォント（竹内さんご指定：Yu Gothic / Bold、なければ Noto Sans JP）
     ─ MacとWindowsでフォント名が違うため、両方の名前を並べている
        Windows … "Yu Gothic"（Boldの字形あり）
        Mac     … YuGothic ／ "游ゴシック体"（同じくBoldあり）
     ─ どちらも無い環境（Android等）は Noto Sans JP 系に落ちる
     ※ Noto Sans JP はWebフォントとして読み込まない（表示速度を優先するため。
        Androidの標準フォントが Noto Sans CJK JP なので、実質そこに落ちる） */
  --genius-font-body: "Yu Gothic", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Noto Sans CJK JP", sans-serif;

  /* 見出し・強調用（Figma指定＝A P-OTF ゴシックMB101 Pr6N B）
     エックスサーバーのWebフォント（TypeSquare）で配信される。
     ⚠ サーバー管理画面側でこのフォントを有効にしておく必要がある。
     読めない環境では本文用（Yu Gothic系）に落ちる */
  /* 先頭の「ゴシックMB101 B」は TypeSquare 側の呼び名（2026-08-07 追加）。
     配信のされ方によって届く名前が違うことがあるので、候補を先頭から順に並べている。
     ブラウザは前から順に探して、最初に見つかったもので描画する */
  --genius-font-mb101: "ゴシックMB101 B", "A P-OTF ゴシックMB101 Pr6N",
    "A-OTF ゴシックMB101 Pr6N", "ゴシックMB101 Pr6N B",
    "Yu Gothic", YuGothic, "游ゴシック体", sans-serif;
}

/* ------------------------------------------------------------
   ページ全体のフォント
   ------------------------------------------------------------ */

.is-genius-page,
.is-genius-page .post_content,
.editor-styles-wrapper .genius-types {
  font-family: var(--genius-font-body);
  font-weight: 700;
}

/* 見出しは Figma指定の ゴシックMB101（TypeSquare）
   ─ h1〜h4 をまとめて指定。個別クラスに書くと足し漏れるため
   ─ 読み込めない環境では本文用（Yu Gothic系）に落ちる */
.is-genius-page h1,
.is-genius-page h2,
.is-genius-page h3,
.is-genius-page h4,
.editor-styles-wrapper .genius-types h1,
.editor-styles-wrapper .genius-types h2,
.editor-styles-wrapper .genius-types h3,
.editor-styles-wrapper .genius-types h4 {
  font-family: var(--genius-font-mb101);
}

/* 見出し以外でもMB101にしたいところは、編集画面で f_mb101 クラスを付ける
   （2026-08-07 追加。本文・段落など h1〜h4 に当たらない要素のため）
   ⚠ 個別のセクション指定（.genius-worry など）より後に置いて、
     クラスを付けた側が確実に勝つようにしている
   ⚠ 子孫（* ）には当てない。font-family は継承されるので不要だし、
     * を書くと中に別のフォントを使いたい要素が出たときに上書きできなくなる */
.is-genius-page .f_mb101,
.editor-styles-wrapper .f_mb101 {
  font-family: var(--genius-font-mb101);
}

/* 字間を広げたいところは、編集画面で ls-20 クラスを付ける（2026-08-12 追加）
   ─ 0.16em（既定）→ 0.2em にする
   ─ 名前の「20」は 0.20em のこと（px ではない）

   ⚠ !important が要る理由
     字間は .genius-worry .genius-worry__say のように
     クラス2つ以上のセレクタで、セクションごとに18箇所指定されている。
     クラス1つの .ls-20 では詳細度で負けるため
   ⚠ 子孫（* ）には当てない。letter-spacing は継承されるので不要だし、
     * を書くと中に別の字間にしたい要素が出たときに上書きできなくなる */
.is-genius-page .ls-20,
.editor-styles-wrapper .ls-20 {
  letter-spacing: 0.2em !important;
}

/* ------------------------------------------------------------
   スクロールで現れるアニメーション（共通）
   竹内さんご指定：「鷹の爪団のような単純で漫画っぽいイメージ」
     ・見出し … 下から軽くフェードアップ
     ・バッジ … 少し膨らむようにポップイン
   使い方：要素に  is-anim-up  /  is-anim-pop  を付ける
          画面に入ると is-anim-in が付いて動き出す（js/genius-anim.js）
   ------------------------------------------------------------ */

/* 下から軽くフェードアップ
   ※ 消えている間も場所は確保されたまま（opacity で消す）なので、
     出るときにページの高さが変わってガクッと動くことはない */
.is-anim-up {
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.5s ease-out, translate 0.5s ease-out;
}

/* 少し膨らむようにポップイン（ゆっくりめ・ぷるんと戻る動き）
   ※ scale は見た目だけの拡大縮小で、要素が占める高さは変わらないため
     ページがガクッと動くことはない */
.is-anim-pop {
  opacity: 0;
  scale: 0.6;
  transform-origin: center center;
  transition: opacity 0.4s ease-out, scale 0.68s cubic-bezier(0.34, 1.56, 0.5, 1);
}

.is-anim-up.is-anim-in,
.is-anim-pop.is-anim-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* 子要素を順番に出す（行の中の項目が左から順に現れる）
   親に is-anim-stagger を付けると、中の子要素が少しずつ遅れて出る */
.is-anim-stagger > * {
  opacity: 0;
  translate: 0 20px;
  transition: opacity 0.4s ease-out, translate 0.4s ease-out;
}

.is-anim-stagger.is-anim-in > *:nth-child(1) {
  transition-delay: 0s;
}

.is-anim-stagger.is-anim-in > *:nth-child(2) {
  transition-delay: 0.08s;
}

.is-anim-stagger.is-anim-in > *:nth-child(3) {
  transition-delay: 0.16s;
}

/* 4行を続けて流す
   行ごとの遅れ（--row-d）と、行の中の左→右の遅れ（0.08秒ずつ）を足し合わせる */
.is-anim-stagger.is-anim-in > *:nth-child(1) {
  transition-delay: var(--row-d, 0s);
}

.is-anim-stagger.is-anim-in > *:nth-child(2) {
  transition-delay: calc(var(--row-d, 0s) + 0.08s);
}

.is-anim-stagger.is-anim-in > *:nth-child(3) {
  transition-delay: calc(var(--row-d, 0s) + 0.16s);
}

/* 列見出しの行から4行まで、続けて流れるように少しずつ遅らせる */
.genius-8types .mw_480 > .genius-8types__row:nth-of-type(1) {
  --row-d: 0s;
}

.genius-8types .mw_480 > .genius-8types__row:nth-of-type(2) {
  --row-d: 0.12s;
}

.genius-8types .mw_480 > .genius-8types__row:nth-of-type(3) {
  --row-d: 0.24s;
}

.genius-8types .mw_480 > .genius-8types__row:nth-of-type(4) {
  --row-d: 0.36s;
}

.genius-8types .mw_480 > .genius-8types__row:nth-of-type(5) {
  --row-d: 0.48s;
}

.is-anim-stagger.is-anim-in > * {
  opacity: 1;
  translate: 0 0;
}

/* 行の区切り線（要素自身の border）も、中身と一緒に現れるようにする
   ※ border は子要素ではないので stagger の対象にならず、先に見えてしまう */
.genius-8types .genius-8types__row.is-anim-stagger {
  border-bottom-color: transparent;
  /* 中身（最大0.24秒遅れ）が出そろってから線を引く */
  transition: border-bottom-color 0.4s ease-out 0.3s;
}

.genius-8types .genius-8types__row.is-anim-stagger.is-anim-in {
  border-bottom-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .genius-8types .genius-8types__row.is-anim-stagger {
    border-bottom-color: #fff;
    transition: none;
  }
}

.editor-styles-wrapper .genius-8types .genius-8types__row.is-anim-stagger {
  border-bottom-color: #fff !important;
  transition: none !important;
}

/* 動きを減らす設定の方には動かさず、最初から表示する */
@media (prefers-reduced-motion: reduce) {
  .is-anim-up,
  .is-anim-pop {
    opacity: 1;
    translate: none;
    scale: 1;
    transition: none;
  }

  .is-anim-stagger > * {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* JavaScriptが動かない環境でも必ず見えるようにする */
.no-js .is-anim-up,
.no-js .is-anim-pop {
  opacity: 1;
  translate: none;
  scale: 1;
}

/* 🔴 編集画面では動かさない（アニメを動かすJSが編集画面では読み込まれないため、
   opacity:0 のまま消えて見えてしまう。編集中は常に表示しておく） */
.editor-styles-wrapper .is-anim-up,
.editor-styles-wrapper .is-anim-pop,
.editor-styles-wrapper .is-anim-stagger,
.editor-styles-wrapper .is-anim-stagger > * {
  opacity: 1 !important;
  translate: none !important;
  scale: 1 !important;
  transition: none !important;
}

/* ------------------------------------------------------------
   MV（メインビジュアル）
   背景 #FFFBC0
   ------------------------------------------------------------ */

.genius-mv {
  background: var(--genius-yellow);
  text-align: center;
  /* 上の余白（SWELLフルワイドの pc-py-20 / sp-py-20 に勝つため !important）
     KAZEHIRAKUロゴの上を詰める */
  padding-top: 7px !important;
}

@media screen and (min-width: 960px) {
  .genius-mv {
    padding-top: 15px !important;
  }
}

/* ------- ファーストビューの登場順（竹内さんご指定）
   鷹の爪団のような単純で漫画っぽい動き。
     ① H1「天才性診断」  下から軽くフェードアップ
     ② 吹き出し          少し膨らむようにポップイン
     ③ ボタン            フェードアップ
   ※ 画面に入った時ではなく「ページを開いた時」に順番に出す。
     MVは最初から画面内にあるので、遅れ時間だけで順番を作れる。
   ※ HTMLの並びは 吹き出し→H1 だが、動きはH1が先。
     見た目の順序と登場順は別でよい（デザイン指定どおり）
   ------- */

.genius-mv h1.is-anim-up {
  transition-delay: 0.1s;
}

.genius-mv .genius-mv__balloon.is-anim-pop {
  transition-delay: 0.7s;
}

.genius-mv .genius-btn.is-anim-up {
  transition-delay: 1s;
}

/* スマホのボタンはMVの下部（宝箱イラストの後）に置かれていて、
   スクロールして初めて画面に入る。
   ファーストビュー用の待ち時間（1秒）を待つと出遅れて見えるので、
   宝箱と同じタイミング（遅延なし）で出す */
@media screen and (max-width: 959px) {
  .genius-mv .sp_only .genius-btn.is-anim-up {
    transition-delay: 0s;
  }
}

/* 吹き出し（可能性は、まだ使われていないだけ…） */
.genius-mv .genius-mv__balloon {
  margin: 8px 0 0;
}

.genius-mv .genius-mv__balloon img {
  display: block;
  width: 114px;
  height: auto;
  margin: 0 auto 0;
}

/* タイトル（H1）＝ロゴ画像
   ⚠ 中の画像が inline のままだと、H1の行送り（57.6px）の余りが
     画像の上下に「行の高さ」として残り、吹き出しとの間が空いて見える。
     block にして行送りの影響を消し、吹き出しに寄せる */
.genius-mv h1 {
  /* 吹き出しに寄せる（SWELLのブロック間余白より上に引き上げる） */
  margin-top: -1em !important;
  padding-top: 0;
  line-height: 0;
}

/* SWELLはブロックとブロックの間に余白を入れる（swl-has-mb--s ＝ 27px）。
   吹き出しとロゴはくっつけたいので、ここだけ消す */
.genius-mv .genius-mv__balloon + h1,
.genius-mv h1.wp-block-heading {
  margin-block-start: 0;
}

.genius-mv .genius-mv__balloon {
  margin-block-end: 0;
}

.genius-mv h1 img {
  display: block;
  height: auto;
  margin-inline: auto;
}

/* スマホはロゴを240pxに。
   ⚠ 画像ブロック側が style="width:478px" をインラインで持つため、
     !important でないと勝てない（PCはブロックの指定をそのまま使う） */
@media screen and (max-width: 959px) {
  .genius-mv h1 img {
    width: 240px !important;
    max-width: 100%;
  }
}

/* 集合イラスト */
.genius-mv .genius-mv__people {
  margin: 12px auto 0;
}

.genius-mv .genius-mv__people img {
  display: block;
  width: 100%;
  max-width: 336px;
  height: auto;
  margin-inline: auto;
}

/* スマホだけ上に詰める（ロゴとイラストを寄せる） */
@media screen and (max-width: 599px) {
  .genius-mv .genius-mv__people img {
    margin-top: -50px;
  }
}

/* ------- 縦書きのイントロ本文 ------- */

/* 下部（CTA）の縦書きと同じ設定にそろえる */
.genius-mv .genius-mv__intro {
  /* 縦書き。右の行から読む＝そのままの順で書ける */
  writing-mode: vertical-rl;
  /* インラインブロックにして「文字の分だけの幅」にする。
     幅100%のままだと、縦書きは右端から始まるため右に寄って見える */
  display: inline-block;
  vertical-align: top;
  height: auto;
  max-width: 100%;
  margin: 28px 0 0;
  color: var(--genius-blue);
  /* Figma指定＝ゴシックMB101 Pr6N B */
  font-family: var(--genius-font-mb101);
  font-size: 16px;
  font-weight: 700;
  /* 縦書きでは line-height が「列と列の間隔」になる */
  line-height: 2.2;
  letter-spacing: 0.16em;
  /* 縦書き時は「行頭＝上」に揃える */
  text-align: start;
  /* 縦書き用の字形（句読点・長音・括弧を縦向きに） */
  font-feature-settings: "vkna" 1, "vrt2" 1;
}

/* 宝箱イラスト */
.genius-mv .genius-mv__treasure {
  margin: 16px auto 0;
}

.genius-mv .genius-mv__treasure img {
  display: block;
  width: 140px;
  height: auto;
  margin-inline: auto;
}

/* ------- タブレット以上 ------- */
@media screen and (min-width: 600px) {
  .genius-mv .genius-mv__people img {
    max-width: 430px;
  }

  .genius-mv .genius-mv__treasure img {
    max-width: 170px;
  }
}

/* ------- PC ------- */
@media screen and (min-width: 960px) {
  /* ※ PCの2カラム（左＝吹き出し＋ロゴ／右＝集合イラスト）は
     編集画面のリッチカラムブロックで組んでいるので、CSSでは触らない */

  .genius-mv .genius-mv__people img {
    max-width: 520px;
  }

  /* ⚠ MVの縦書きは PC でも縦書きのまま（デザイン指定）。
     下部CTAはPCで横書きになるが、ここは違う
     Figma: 22px / weight 900 / line-height 250% / letter-spacing 3.52px（=0.16em） */
  .genius-mv .genius-mv__intro {
    font-size: 22px;
    font-weight: 900;
    line-height: 2.5;
    letter-spacing: 0.16em;
  }

  .genius-mv .genius-mv__treasure img {
    width: 200px;
  }
}

/* ------------------------------------------------------------
   セクション上端の波の飾り（共通）
   CTAの波（.genius-wave）と同じ作り＝波1山（48×32px）のタイルを横に繰り返す。
   画面幅が変わっても波の大きさが一定になる。

   仕組み：各セクションの ::before で「自分の上端」に、
   ひとつ上のセクションの色の波を描く（上から垂れ下がって見える）。

   ※ ブロックとして置くと編集中に動かされやすいので、CSSで固定する
   ------------------------------------------------------------ */

.genius-worry,
.genius-manga,
.genius-ba,
.genius-tsumari {
  position: relative;
}

.genius-worry::before,
.genius-manga::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  height: 32px;
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 48px 32px;
  pointer-events: none;
}

/* 波の色＝ひとつ上のセクションの背景色 */
.genius-manga::before {
  /* 上が #FFF692（お悩み） */
  background-image: url("images/genius-wave-top-tile.svg");
}

/* ⚠ つまり…セクションは「上」ではなく「下」に波を出す（こんた指示 2026-08-06）
   このセクション（#FFFBC0）が下のセクションへ垂れ下がる形 */
.genius-tsumari {
  position: relative;
  /* 下に垂らす波が次のセクションの背景に隠れないよう手前に置く */
  z-index: 1;
}

.genius-tsumari::after {
  content: "";
  position: absolute;
  bottom: -32px;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  height: 32px;
  background: url("images/genius-wave-bottom-tile.svg") repeat-x center top;
  background-size: 48px 32px;
  pointer-events: none;
}

/* ⚠ genius-ba の上端に波は付けない（こんた指示 2026-08-06）
   ひとつ上（漫画セクション）との境目は波なしでつなぐ */

/* お悩みの上は MV。MVを作ってから色を合わせる */
.genius-worry::before {
  background-image: url("images/genius-wave-bottom-tile.svg");
}

/* 波の下に中身が潜り込まないよう、その分だけ上に余白をとる */
.genius-worry > .swell-block-fullWide__inner,
.genius-manga > .swell-block-fullWide__inner {
  padding-top: 16px;
}

/* ------------------------------------------------------------
   お悩みセクション（毎日、なんだかしっくりこない…）
   背景 #FFF692
   イラスト＋つぶやきを3行、左右交互に並べる
   ------------------------------------------------------------ */

.genius-worry {
  background: #fff692;
  text-align: center;
  /* このセクションは中身すべて ゴシックMB101（Figma指定）
     ─ 見出しだけでなく、つぶやき・締めの文もMB101 */
  font-family: var(--genius-font-mb101);
}

.genius-worry .genius-worry__say,
.genius-worry .genius-worry__lead {
  font-family: var(--genius-font-mb101);
}

/* 見出し（毎日、なんだかしっくりこない…） */
.genius-worry .genius-worry__title,
.genius-worry .genius-worry__title.is-style-section_ttl {
  margin: 0 auto;
  padding: 0;
  color: var(--genius-blue);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.75;
  letter-spacing: 0.08em;
  text-align: center;
}

.genius-worry .genius-worry__title::before,
.genius-worry .genius-worry__title::after {
  content: none;
}

/* 最大幅620pxで中央寄せ（mw_620 グループ）
   ※ スマホは 310px で頭打ち（デザインの実寸） */
.genius-worry .mw_620 {
  width: 100%;
  max-width: 310px;
  margin-inline: auto;
}

@media screen and (min-width: 600px) {
  .genius-worry .mw_620 {
    max-width: 620px;
  }
}

/* 1行（イラスト＋つぶやき） */
.genius-worry .genius-worry__row {
  margin: 20px auto 0;
}

/* 中の列をイラスト幅に合わせる（イラストは狭く、文字に幅を回す）

   ⚠ リッチカラムは各列に margin-left（--swl-clmn-mrgn--x／実測20.25px）を付ける。
     2列だと左右で計40px以上が余白に消え、310pxの枠では中身が入りきらず
     折り返して段落ちする。ここでは列の余白を0にして gap だけで間隔をとる */
.genius-worry .genius-worry__row > .swell-block-columns__inner {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-inline: 0;
}

.genius-worry .genius-worry__row > .swell-block-columns__inner > .swell-block-column {
  margin: 0;
}

/* イラストの列は中身の幅ぶんだけ・つぶやきの列は必要な幅を必ず確保する

   ⚠ リッチカラムは colMobile:2 のとき各列に --clmn-w--mobile:50% を出力し、
     それが width として効く（＝1列155px固定）。
     つぶやきは折り返さない指定なので、この固定幅だと収まらず段落ちする。
     そのため 50% 指定そのものを上書きする */
.genius-worry .genius-worry__row > .swell-block-columns__inner > .swell-block-column {
  width: auto !important;
  max-width: none;
  min-width: 0;
  flex: 0 1 auto;
}

/* つぶやきの列＝縮ませない（文字が入りきる幅を確保） */
.genius-worry .genius-worry__row > .swell-block-columns__inner > .swell-block-column:has(.genius-worry__say) {
  flex: 0 0 auto;
}

/* イラストの列＝余った分だけ（足りなければ縮む） */
.genius-worry .genius-worry__row > .swell-block-columns__inner > .swell-block-column:has(.genius-worry__img) {
  flex: 0 1 auto;
}

/* イラスト */
.genius-worry .genius-worry__img {
  margin: 0;
}

/* 編集画面で左右寄せを付けても回り込ませない（列の中で寄せるだけ） */
.genius-worry .genius-worry__img.alignright,
.genius-worry .genius-worry__img.alignleft {
  float: none;
  width: 100%;
  margin-inline: auto;
}

/* スマホでは枠が310pxしかなく、イラスト170pxだと
   つぶやき（最長「何かある気がする。」＝136px）がぴったりで余白ゼロになり、
   わずかな差で段落ちする。イラストを詰めて文字側に余裕を作る */
.genius-worry .genius-worry__img img {
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
  margin-inline: auto;
}

/* つぶやき */
.genius-worry .genius-worry__say {
  margin: 0;
  color: #444;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-align: center;
  white-space: nowrap;
}

/* 締めの一文（そんな自分の思考癖を〜） */
.genius-worry .genius-worry__lead {
  margin: 24px auto 0;
  color: var(--genius-blue);
  font-size: 14px;
  font-weight: 700;
  line-height: 2.2;
  letter-spacing: 0.16em;
  text-align: center;
}

@media screen and (min-width: 600px) {
  .genius-worry .genius-worry__title,
  .genius-worry .genius-worry__title.is-style-section_ttl {
    font-size: 22px;
  }

  .genius-worry .genius-worry__img img {
    max-width: 200px;
  }

  .genius-worry .genius-worry__say,
  .genius-worry .genius-worry__lead {
    font-size: 15px;
  }
}

@media screen and (min-width: 960px) {
  .genius-worry .genius-worry__title,
  .genius-worry .genius-worry__title.is-style-section_ttl {
    font-size: 26px;
  }

  .genius-worry .genius-worry__row {
    margin-top: 28px;
  }

  .genius-worry .genius-worry__img img {
    max-width: 230px;
  }

  .genius-worry .genius-worry__say,
  .genius-worry .genius-worry__lead {
    font-size: 22px;
  }
}

/* ------------------------------------------------------------
   漫画セクション（ある日〜天才性!? 3コマ）
   背景 #FFFBC0
   ※ PC版デザインに「ここは画像でOKです」との指示あり
   ------------------------------------------------------------ */

.genius-manga {
  background: var(--genius-yellow);
  text-align: center;
}

/* 最大幅530pxで中央寄せ（mw_530 グループ） */
.genius-manga .mw_530 {
  width: 100%;
  max-width: 530px;
  margin-inline: auto;
}

/* 漫画3コマ（1枚の画像にまとめている。コマの左右の寄せも画像側で再現済み） */
.genius-manga .genius-manga__all {
  margin: 0 auto;
}

.genius-manga .genius-manga__all img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}

/* リード文（誰もが持っている〜） */
.genius-manga .genius-manga__lead {
  margin: 28px auto 0;
  color: #444;
  font-size: 14px;
  font-weight: 700;
  line-height: 2.3;
  letter-spacing: 0.24em;
  text-align: center;
}

@media screen and (min-width: 600px) {
        .genius-manga .genius-manga__lead {
    font-size: 15px;
  }
}

@media screen and (min-width: 960px) {
        .genius-manga .genius-manga__lead {
    font-size: 22px;
  }
}

/* ------------------------------------------------------------
   BEFORE / AFTER セクション（欠点や弱みだと思っていたものが実は天才性!）
   背景 #FFF692
   ------------------------------------------------------------ */

.genius-ba {
  background: #fff692;
  text-align: center;
}

/* CHECK バッジ（8タイプ紹介と同じ） */
.genius-ba .genius-ba__badge {
  display: block;
  width: 56px;
  height: 32px;
  margin: 0 auto 12px;
  padding: 0;
  background: url("images/genius-check-badge.svg") no-repeat center / contain;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

/* 見出し（H2）＋下の飾り線 */
.genius-ba .genius-ba__title,
.genius-ba .genius-ba__title.is-style-section_ttl {
  margin: 0 auto;
  padding: 0;
  color: var(--genius-blue);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-align: center;
}

.genius-ba .genius-ba__title::before {
  content: none;
}

.genius-ba .genius-ba__title::after,
.genius-ba .genius-ba__title.is-style-section_ttl::after {
  content: "";
  display: block;
  width: min(274px, 90%);
  height: 12px;
  margin: 10px auto 0;
  border: none;
  background: url("images/genius-ba-underline.svg") no-repeat center / 100% 100%;
  opacity: 0;
  translate: 0 8px;
  /* 見出しが出たすぐ後に線が伸びる（待ちすぎない） */
  transition: opacity 0.35s ease-out 0.25s, translate 0.35s ease-out 0.25s;
}

.genius-ba .genius-ba__title.is-anim-in::after {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .genius-ba .genius-ba__title::after,
  .genius-ba .genius-ba__title.is-style-section_ttl::after {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

.editor-styles-wrapper .genius-ba .genius-ba__title::after,
.editor-styles-wrapper .genius-ba .genius-ba__title.is-style-section_ttl::after {
  opacity: 1 !important;
  translate: none !important;
  transition: none !important;
}

/* リード文 */
.genius-ba .genius-ba__lead {
  margin: 16px auto 0;
  color: #444;
  font-size: 14px;
  line-height: 1.75;
  text-align: center;
}

/* 最大幅550pxで中央寄せ（mw_550 グループ） */
.genius-ba .mw_550 {
  width: 100%;
  max-width: 550px;
  margin-inline: auto;
}

/* 1組（BEFORE → 矢印 → AFTER） */
.genius-ba .genius-ba__set {
  margin: 24px auto 0;
}

/* BEFORE → 矢印 → AFTER の順に、左から流れるようにフェードイン
   （他のセクションの stagger は「下から」だが、ここは左右の流れを見せたいので「左から」）

   ※ リッチカラムは中に __inner という入れ物が1つ挟まる。
     共通の stagger はその入れ物に効いてしまうので、ここで打ち消して
     さらに中の各列に効かせる */
.genius-ba .genius-ba__set.is-anim-stagger > .swell-block-columns__inner {
  opacity: 1;
  translate: none;
  transition: none;
}
.genius-ba .genius-ba__set.is-anim-stagger > .swell-block-columns__inner > * {
  opacity: 0;
  translate: -24px 0;
  transition: opacity 0.45s ease-out, translate 0.45s ease-out;
}

.genius-ba .genius-ba__set.is-anim-stagger.is-anim-in > .swell-block-columns__inner > *:nth-child(1) {
  transition-delay: 0s;
}

.genius-ba .genius-ba__set.is-anim-stagger.is-anim-in > .swell-block-columns__inner > *:nth-child(2) {
  transition-delay: 0.25s;
}

.genius-ba .genius-ba__set.is-anim-stagger.is-anim-in > .swell-block-columns__inner > *:nth-child(3) {
  transition-delay: 0.5s;
}

.genius-ba .genius-ba__set.is-anim-stagger.is-anim-in > .swell-block-columns__inner > * {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .genius-ba .genius-ba__set.is-anim-stagger > .swell-block-columns__inner > * {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

.editor-styles-wrapper .genius-ba .genius-ba__set.is-anim-stagger > .swell-block-columns__inner > * {
  opacity: 1 !important;
  translate: none !important;
  transition: none !important;
}

/* 真ん中の矢印の列だけ幅を詰める（BEFORE・AFTERに幅を回す） */
.genius-ba .genius-ba__set > .swell-block-columns__inner {
  display: flex;
  align-items: center;
  gap: 0;
}

.genius-ba .genius-ba__set > .swell-block-columns__inner > .swell-block-column {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
}

.genius-ba .genius-ba__set > .swell-block-columns__inner > .swell-block-column:nth-child(2) {
  flex: 0 0 48px;
}

/* BEFORE / AFTER の列 */
.genius-ba .genius-ba__col {
  margin: 0;
  text-align: center;
}

.genius-ba .genius-ba__img {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 185px;
  margin: 0 auto 4px;
}

/* 1組目のBEFORE（genius-before-01）だけ少し小さく。※こんた指示 2026-08-07
   ─ 横に広い絵（262×310）なので、高さを枠いっぱいまで使うと
     隣のAFTER（147×260）より大きく見えてしまう
   ─ 枠の高さ（185/220/260px）に対する%で指定。画面幅ごとに書かなくて済む
   ─ 枠は下揃えなので、小さくしても地面の位置は変わらない

   ⚠ 列は「.swell-block-column の何番目か」で指定する。
     .genius-ba__col:first-child だと、各列の中の最初の子という意味になり
     BEFORE列とAFTER列の両方に当たってしまう（2026-08-07 実際に踏んだ）
     並びは 1列目=BEFORE / 2列目=矢印 / 3列目=AFTER */
.genius-ba .genius-ba__set:nth-of-type(1) > .swell-block-columns__inner > .swell-block-column:nth-child(1) .genius-ba__img img {
  max-height: 90%;
}

/* 2組目のBEFORE（誰にでも気を使いすぎる）だけ縦位置を中央に。
   ─ 他より背が低い絵（203px / 枠260px）なので、下揃えのままだと
     上に57pxの空きが出て浮いて見える
   ─ 右のAFTERと目線の高さを合わせる
   ※ 上と同じ理由で、列は .swell-block-column の番号で指定する */
.genius-ba .genius-ba__set:nth-of-type(2) > .swell-block-columns__inner > .swell-block-column:nth-child(1) .genius-ba__img {
  align-items: center;
}

/* 高さだけ決めて幅を自由にすると、横長のイラストが列からはみ出して
   隣の文字と重なるため、幅も列に収める */
.genius-ba .genius-ba__img img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 185px;
  margin-inline: auto;
  object-fit: contain;
}

/* BEFORE / AFTER のラベル */
.genius-ba .genius-ba__label {
  margin: 0 0 4px;
  color: #444;
  /* 活かし方ページの STEP1 と同じ欧文フォント（Figma指定 Montserrat Bold） */
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 2.2;
  letter-spacing: 0.16em;
  text-align: center;
}

/* 説明の丸いタグ */
.genius-ba .genius-ba__note {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 56px;
  margin: 0;
  padding: 10px 16px;
  border-radius: 100px;
  color: #444;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: center;
}

.genius-ba .genius-ba__note--before {
  background: #d9d9d9;
}

.genius-ba .genius-ba__note--after {
  background: #fff;
}

/* 真ん中の「天才性発揮！」＝画像1枚
   ⚠ 以前は縦書きテキスト＋矢印を別々に置いていたが、
     文字と矢印の位置がデザインと揃わないため画像にした（こんた判断 2026-08-06） */
.genius-ba .genius-ba__arrow {
  margin: 0 auto;
}

.genius-ba .genius-ba__arrow img {
  display: block;
  width: 39px;
  height: auto;
  margin-inline: auto;
}

/* ------- タブレット以上 ------- */
@media screen and (min-width: 600px) {
  .genius-ba .genius-ba__title,
  .genius-ba .genius-ba__title.is-style-section_ttl {
    font-size: 22px;
  }

  .genius-ba .genius-ba__lead {
    font-size: 15px;
  }

  .genius-ba .genius-ba__img {
    height: 220px;
  }

  .genius-ba .genius-ba__img img {
    max-height: 220px;
  }

  .genius-ba .genius-ba__note {
    font-size: 14px;
  }
}

/* ------- PC ------- */
@media screen and (min-width: 960px) {
  .genius-ba .genius-ba__title,
  .genius-ba .genius-ba__title.is-style-section_ttl {
    font-size: 26px;
  }

  .genius-ba .genius-ba__lead {
    font-size: 16px;
  }

  .genius-ba .genius-ba__img {
    height: 260px;
  }

  .genius-ba .genius-ba__img img {
    max-height: 260px;
  }

  .genius-ba .genius-ba__note {
    min-height: 64px;
    font-size: 15px;
  }
}

/* ------------------------------------------------------------
   「つまり…」セクション（天才性とは＝当たり前すぎて気づいていない価値）
   背景 #FFFBC0
   ------------------------------------------------------------ */

.genius-tsumari {
  background: var(--genius-yellow);
  text-align: center;
}

/* 「つまり…」 */
.genius-tsumari .genius-tsumari__intro {
  margin: 0 auto;
  color: #444;
  font-size: 20px;
  font-weight: 700;
  line-height: 2.3;
  letter-spacing: 0.24em;
  text-align: center;
}

/* もこもこ吹き出し（H2）
   Figma: 330×209px・白いギザギザ縁 */
.genius-tsumari .genius-tsumari__balloon,
.genius-tsumari .genius-tsumari__balloon.is-style-section_ttl {
  /* 中の文字は縦に積む（横並びにしない） */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: min(330px, 100%);
  min-height: 209px;
  margin: 8px auto 0;
  padding: 34px 34px 40px;
  background: url("images/genius-moko-balloon.svg") no-repeat center / 100% 100%;
  color: #444;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-align: center;
}

.genius-tsumari .genius-tsumari__balloon::before,
.genius-tsumari .genius-tsumari__balloon::after {
  content: none;
}

/* 吹き出しの中の大きい文字（当たり前すぎて／気づいていない価値） */
.genius-tsumari .genius-tsumari__balloon strong {
  display: block;
  font-size: 23px;
  font-weight: 900;
  line-height: 1.8;
  letter-spacing: 0.12em;
}

/* 本文（特別な才能ではなく、〜） */
.genius-tsumari .genius-tsumari__text {
  margin: 24px auto 0;
  color: #444;
  font-size: 14px;
  font-weight: 700;
  line-height: 2.3;
  letter-spacing: 0.24em;
  text-align: center;
}

/* 3つの癖（ものの見方／考え方／動き方）
   Figma: 94px の円・青枠2px */
.genius-tsumari .genius-tsumari__circles {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 24px auto 0;
}

/* 中にグループが入っている場合も横並びにする（編集画面で入れ子にされることがある） */
.genius-tsumari .genius-tsumari__circles > .wp-block-group {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
}

.genius-tsumari .genius-tsumari__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 94px;
  height: 94px;
  margin: 0;
  padding: 10px;
  border: 2px solid var(--genius-blue);
  border-radius: 100px;
  color: var(--genius-blue);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-align: center;
}

/* まさみさんの吹き出し（誰にでも可能性があるのよ！）
   Figma: 179×116px ＋ しっぽ 29×33px */
.genius-tsumari .genius-tsumari__says {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: min(179px, 100%);
  /* SVGの実寸 179×132px。しっぽまで1枚に含まれているので、その比率で枠を取る
     （2026-08-07 差し替え。以前は本体116px＋しっぽを別SVGで重ねていた） */
  min-height: 132px;
  margin: 40px auto 0;
  /* 左右の余白は詰める。
     文字の分（「可能性があるのよ！」で約146px）が入りきらないと段落ちするため。
     字間は最後の1文字の後ろにも入るので、Figmaの実寸ぴったりだと溢れる
     下だけ厚いのは、しっぽの19px分に文字がかからないようにするため */
  padding: 24px 8px 49px;
  background: url("images/genius-masami-balloon.svg") no-repeat center / 100% 100%;
  color: #444;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.16em;
  text-align: center;
  /* デザインどおり折り返さない */
  white-space: nowrap;
}

/* しっぽは 2026-08-07 の差し替えで genius-masami-balloon.svg 本体に含まれたため、
   別SVGを重ねる ::after は撤去した（重ねたままだとしっぽが二重になる）
   ※ images/genius-masami-tail.svg は未使用になったが、ファイルは残してある */

/* まさみさんのイラスト
   ※ しっぽ込みのSVGに差し替えた分、吹き出しとの間を詰める（2026-08-07） */
.genius-tsumari .genius-tsumari__figure {
  margin: 11px auto 0;
}

.genius-tsumari .genius-tsumari__figure img {
  display: block;
  width: 163px;
  height: auto;
  margin-inline: auto;
}

/* ------- タブレット以上 ------- */
@media screen and (min-width: 600px) {
  .genius-tsumari .genius-tsumari__intro {
    font-size: 22px;
  }

  .genius-tsumari .genius-tsumari__balloon,
  .genius-tsumari .genius-tsumari__balloon.is-style-section_ttl {
    font-size: 15px;
  }

  .genius-tsumari .genius-tsumari__balloon strong {
    font-size: 26px;
  }

  .genius-tsumari .genius-tsumari__text {
    font-size: 14px;
  }

  .genius-tsumari .genius-tsumari__circle {
    width: 108px;
    height: 108px;
    font-size: 15px;
  }
}

/* ------- PC ------- */
@media screen and (min-width: 960px) {
  .genius-tsumari .genius-tsumari__intro {
    font-size: 24px;
  }

  .genius-tsumari .genius-tsumari__balloon,
  .genius-tsumari .genius-tsumari__balloon.is-style-section_ttl {
    width: min(420px, 100%);
    min-height: 240px;
    font-size: 16px;
  }

  .genius-tsumari .genius-tsumari__balloon strong {
    font-size: 28px;
  }

  .genius-tsumari .genius-tsumari__text {
    font-size: 18px;
  }

  .genius-tsumari .genius-tsumari__circle {
    width: 120px;
    height: 120px;
    font-size: 16px;
  }

  .genius-tsumari .genius-tsumari__figure img {
    width: 200px;
  }
}

/* ------- スマホだけの調整（Figma 2026-08-07 更新分） -------
   ─ 先方が「吹き出しのサイズと文字サイズを少し調整」されたのを反映
   ─ Figma実寸: 吹き出し 330×225px／大きい文字 20px・行間2・字間4px(=0.2em)

   ⚠ ここだけ max-width で書いている理由
     行間・字間はタブレット以上で上書きしていないため、基本値を変えると
     タブレット・PCの見た目まで変わってしまう。
     ご指示は「スマホ用」なので、スマホ幅だけに閉じ込めている */
@media screen and (max-width: 599px) {
  .genius-tsumari .genius-tsumari__balloon,
  .genius-tsumari .genius-tsumari__balloon.is-style-section_ttl {
    min-height: 225px;
  }

  .genius-tsumari .genius-tsumari__balloon strong {
    font-size: 20px;
    line-height: 2;
    letter-spacing: 0.2em;
  }
}

/* ------- タブレットだけの調整（600〜959px・2026-08-13 追加） -------
   ⚠ 600px以上の指定（26px）だと、この幅で吹き出しの中の文字が段落ちする。
     960px以上は28pxのままでよいので、この帯だけを24pxに落とす */
@media screen and (min-width: 600px) and (max-width: 959px) {
  .genius-tsumari .genius-tsumari__balloon strong {
    font-size: 24px;
  }
}

/* ------------------------------------------------------------
   8タイプ紹介セクション（天才性診断で分かる8つのタイプ）
   背景 #FFF692／4行×2列で1〜8を紹介
   ------------------------------------------------------------ */

.genius-8types {
  background: #fff692;
}

/* 見出しまわり */
.genius-8types__head {
  margin: 0 auto 8px;
  text-align: center;
}

/* CHECK バッジ（段落ブロックに付ける。文字は隠して画像で見せる） */
.genius-8types .genius-8types__badge {
  display: block;
  width: 56px;
  height: 32px;
  margin: 0 auto 12px;
  padding: 0;
  background: url("images/genius-check-badge.svg") no-repeat center / contain;
  /* 中の「CHECK」の文字は画面から隠す（編集画面では文字として編集できる） */
  font-size: 0;
  line-height: 0;
  color: transparent;
}

/* 見出し本体（H2） */
.genius-8types .genius-8types__title,
.genius-8types .genius-8types__title.is-style-section_ttl {
  margin: 0 auto;
  padding: 0;
  color: var(--genius-blue);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.75;
  letter-spacing: 0.08em;
  text-align: center;
}

/* SWELLの見出し装飾は消す */
.genius-8types .genius-8types__title::before {
  content: none;
}

/* 見出し下の飾り線（H2の ::after で描く。HTMLブロックを使わない）
   見出しが出たあとに線が伸びる（①CHECK → ②見出し → ③線 の順） */
.genius-8types .genius-8types__title::after,
.genius-8types .genius-8types__title.is-style-section_ttl::after {
  content: "";
  display: block;
  width: min(269px, 90%);
  height: 12px;
  margin: 10px auto 0;
  border: none;
  background: url("images/genius-heading-underline.svg") no-repeat center / 100% 100%;
  opacity: 0;
  translate: 0 8px;
  /* 見出しが出たすぐ後に線が伸びる（待ちすぎない） */
  transition: opacity 0.35s ease-out 0.25s, translate 0.35s ease-out 0.25s;
}

/* 見出しが表示されたら、少し遅れて線も出す */
.genius-8types .genius-8types__title.is-anim-in::after {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .genius-8types .genius-8types__title::after,
  .genius-8types .genius-8types__title.is-style-section_ttl::after {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* 編集画面では常に表示 */
.editor-styles-wrapper .genius-8types__title::after,
.editor-styles-wrapper .genius-8types__title.is-style-section_ttl::after {
  opacity: 1 !important;
  translate: none !important;
  transition: none !important;
}

/* リード文 */
.genius-8types .genius-8types__lead {
  margin: 16px auto 20px;
  color: #444;
  font-size: 14px;
  line-height: 1.75;
  text-align: center;
}

/* 列見出し（【自分向き】【他者向き】）
   ※ リッチカラムの各列に1つずつ入っているので、列の中で中央寄せ */
.genius-8types .genius-8types__cols {
  margin: 0;
  color: var(--genius-blue);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

/* 最大幅480pxで中央寄せ（mw_480 グループ） */
.genius-8types .mw_480 {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
}

/* 1行分（行ラベル＋2セル）
   行の区切りは白い3pxの線 */
.genius-8types .genius-8types__row {
  align-items: center;
  margin: 0;
  padding: 26px 0;
  border-bottom: 3px solid #fff;
}

/* ラベル列だけ狭く、残りをタイプ2列で分ける
   （リッチカラムは3等分なので、CSSで列幅を上書きする） */
.genius-8types .genius-8types__row > .swell-block-columns__inner {
  display: flex;
  align-items: center;
  gap: 0;
}

.genius-8types .genius-8types__row > .swell-block-columns__inner > .swell-block-column {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
}

/* 1列目（創る／訳す…）は幅を詰める */
.genius-8types .genius-8types__row > .swell-block-columns__inner > .swell-block-column:first-child {
  flex: 0 0 56px;
}

.genius-8types .genius-8types__row:last-of-type {
  border-bottom: none;
}

/* 編集画面で mt-10 クラスを付けた行だけ、スマホで10px上に詰める
   （2026-08-07 こんた指示。付け外しで調整できるよう、行の指定と分けている）

   ⚠ !important が要る理由
     ひとつ上の見出し行に SWELL の u-mb-ctrl クラスが付いており、
     SWELL本体の main.css に `.u-mb-ctrl + * { margin-top: 0 !important }` がある。
     その「次の要素」がこの行にあたるため、!important なしでは必ず0に戻される */
@media screen and (max-width: 599px) {
  .genius-8types .genius-8types__row.mt-10 {
    margin-top: -10px !important;
  }
}

/* 列見出し【自分向き】【他者向き】の行は、見出しなので線・余白なし
   ─ :has() が使えるブラウザ … 中に .genius-8types__cols があるかで判定
   ─ 使えない場合 …「mw_480 の最初の行」＝列見出しの行、として判定
   ─ 下の余白も無し（2026-08-07 こんた指示。もとは 4px あけていた） */
.genius-8types .mw_480 > .genius-8types__row:first-child,
.genius-8types .genius-8types__row:has(.genius-8types__cols) {
  padding: 0;
  border-bottom: none;
}

/* 行ラベル（創る／訳す／動かす／整える）縦書きの白いタブ
   Figma実寸: 幅36px × 高さ154px・角丸100px */
.genius-8types .genius-8types__label {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 36px;
  height: 154px;
  margin: 0 auto;
  padding: 0;
  border-radius: 100px;
  background: #fff;
  color: var(--genius-blue);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  /* 縦書きの「創る」「訳す」などの字間（こんた指定 2026-08-06） */
  letter-spacing: 0.6em;
  text-align: center;
  writing-mode: vertical-rl;
}

/* 各タイプのセル */
.genius-8types .genius-8types__item {
  position: relative;
  margin: 0;
  text-align: center;
}

/* 大きな番号（イラストの背面・白抜き） */
.genius-8types .genius-8types__num {
  position: absolute;
  top: -6px;
  left: 6px;
  z-index: 0;
  margin: 0;
  color: #fff;
  font-family: "Outfit", "Yu Gothic", sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.16em;
  pointer-events: none;
}

/* イラスト */
.genius-8types .genius-8types__img {
  position: relative;
  z-index: 1;
  margin: 0 auto 6px;
}

.genius-8types .genius-8types__img img {
  display: block;
  width: auto;
  height: 130px;
  margin-inline: auto;
}

/* カオス回収番長（fig-04）だけ少し小さく＝85%。2026-08-07 こんた指示
   ─ 隣に並ぶ深掘り翻訳者（fig-03）と背丈をそろえるため
   ─ 枠の高さは他と同じに保ち、絵だけ縮めて下端に揃える。
     枠ごと縮めると、その列だけタイプ名の位置が隣とずれてしまう
   ─ 高さは枠に対する%なので、画面幅ごとに85%が保たれる */
.genius-8types .genius-8types__img:has(> img[src*="genius-fig-04"]) {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 130px;
}

.genius-8types .genius-8types__img > img[src*="genius-fig-04"] {
  height: 85%;
}

/* タイプ名（H3） */
.genius-8types .genius-8types__name,
.genius-8types .genius-8types__name.is-style-section_ttl {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  color: var(--genius-blue);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-align: center;
}

.genius-8types .genius-8types__name::before,
.genius-8types .genius-8types__name::after {
  content: none;
}

/* セル全体が1リンク */
.genius-8types .block-link-wrap {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: translate 0.25s ease-out;
}

@media (hover: hover) {
  .genius-8types .block-link-wrap:hover {
    translate: 0 -8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .genius-8types .block-link-wrap {
    transition: none;
  }

  .genius-8types .block-link-wrap:hover {
    translate: none;
  }
}

/* ------- タブレット以上 ------- */
@media screen and (min-width: 600px) {
  .genius-8types .genius-8types__title,
  .genius-8types .genius-8types__title.is-style-section_ttl {
    font-size: 22px;
  }

  .genius-8types .genius-8types__lead {
    font-size: 15px;
  }

  .genius-8types .genius-8types__img:has(> img[src*="genius-fig-04"]) {
    height: 150px;
  }

  .genius-8types .genius-8types__img img {
    height: 150px;
  }

  .genius-8types .genius-8types__name,
  .genius-8types .genius-8types__name.is-style-section_ttl {
    font-size: 16px;
  }

  .genius-8types .genius-8types__num {
    font-size: 64px;
  }

  .genius-8types .genius-8types__label {
    width: 40px;
    height: 168px;
    font-size: 15px;
  }

  .genius-8types .genius-8types__row > .swell-block-columns__inner > .swell-block-column:first-child {
    flex: 0 0 64px;
  }
}

/* ------- PC ------- */
@media screen and (min-width: 960px) {
  .genius-8types .genius-8types__title,
  .genius-8types .genius-8types__title.is-style-section_ttl {
    font-size: 26px;
  }

  .genius-8types .genius-8types__img:has(> img[src*="genius-fig-04"]) {
    height: 176px;
  }

  .genius-8types .genius-8types__img img {
    height: 176px;
  }

  .genius-8types .genius-8types__name,
  .genius-8types .genius-8types__name.is-style-section_ttl {
    font-size: 18px;
  }

  .genius-8types .genius-8types__row {
    padding: 20px 0;
  }

  /* 列見出し【自分向き】【他者向き】はPCで18px */
  .genius-8types .genius-8types__cols {
    font-size: 18px;
  }
}

/* ------------------------------------------------------------
   CTAセクション（縦書きメッセージ＋イラスト＋ボタン2つ）
   8タイプ一覧の直前に入るセクション
   ------------------------------------------------------------ */

/* セクション全体（Figma: 背景 #FFFBC0・下パディング24px） */
.genius-cta {
  background: var(--genius-yellow);
  padding-bottom: 24px;
  text-align: center;
}

/* 波形の区切り（Figma: 高さ32px・幅いっぱい）
   上＝前セクション(#FFF692)からCTAへ／下＝CTAから白へ
   画像は横に伸縮させたいので background-size を 100% 100% にする */
.genius-wave {
  display: block;
  /* 画面幅いっぱいに広げる（フルワイドブロックの内側＝l-article の左右余白を打ち消す）
     ※ 100vw ではなく margin で外へ逃がす形にして、横スクロールが出にくいようにしている */
  width: auto;
  max-width: none;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 32px;
  /* 波1山（48px）のタイルを横に繰り返す＝画面幅が変わっても波の大きさが一定 */
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 48px 32px;
}

.genius-wave--top {
  background-image: url("images/genius-wave-top-tile.svg");
}

/* 下の波は CSS でセクションの下端に固定する（ブロックとして置かない）
   ─ 黄色い波が「下の白い背景の上」に乗って初めて見えるため、
     黄色いブロックの中に置くと背景に溶けて消えてしまう
   ─ ブロックとして置くと編集中に移動してしまいやすいので、
     セクション自身から下にはみ出させる形にした */
.genius-cta {
  position: relative;
}

.genius-cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -32px;
  z-index: 1;
  display: block;
  height: 32px;
  /* 波1山（48px）のタイルを横に繰り返す。
     幅360pxのSVGを画面幅まで引き伸ばすと、PCでは4倍に間延びしてしまうため */
  background: url("images/genius-wave-bottom-tile.svg") repeat-x center top;
  background-size: 48px 32px;
  pointer-events: none;
}

/* 使わなくなったブロック版の下の波は表示しない（残っていても影響が出ないように） */
.genius-wave--bottom {
  display: none;
}

/* 縦書きメッセージ
   Figma: 高さ338px・列間18px・行送り1.3・上32px/下20pxパディング
   ※ 縦書きは右の列から読む＝HTMLも右に来る文から順に書く必要はなく、
     writing-mode に任せて自然な順（上から）で書けばよい */
/* 中央寄せは flex ではなく「インラインブロック＋text-align:center」で行う。
   縦書き（writing-mode）＋ flex ＋ width:max-content の組み合わせは
   Safari（iPhone）とChromeで解釈が違い、iPhoneだけ右に寄ってしまうため。 */
.genius-lead {
  display: block;
  width: 100%;
  margin: 0 auto;
  /* スマホは下の余白なし（縦書きの下端とイラストの間が空きすぎるため） */
  padding: 32px 0 0;
  text-align: center;
}

.genius-lead__text,
.genius-lead .genius-lead__text {
  writing-mode: vertical-rl;
  /* インラインブロックにして「文字の分だけの幅」にする。
     幅100%のままだと、縦書きは右端から始まるため右に寄って見える。
     max-content は Safari で挙動が異なるので使わない */
  display: inline-block;
  vertical-align: top;
  margin: 0;
  /* 高さは内容に合わせる。
     338px（Figmaの枠の高さ）で固定すると、一番長い行より短い分だけ
     下に空白が残り、イラストとの間が空きすぎて見える */
  height: auto;
  max-width: 100%;
  color: var(--genius-blue);
  font-size: 16px;
  font-weight: 700;
  /* 縦書きでは line-height が「列と列の間隔」になる。
     1.3だと詰まって見えるため広げる（Figmaは列を個別に配置しているためgap換算で余裕がある） */
  line-height: 2.2;
  letter-spacing: 0.16em;
  /* 縦書き時は「行頭＝上」に揃える（左寄せ指定が入っていても上下位置がずれないように） */
  text-align: start;
}

/* ブロック側で左寄せ・右寄せが指定されていても、縦書きでは配置を崩さない
   （縦書きでは text-align は上下方向の揃えになるため start に固定する） */
.genius-lead .genius-lead__text.has-text-align-left,
.genius-lead .genius-lead__text.has-text-align-right,
.genius-lead .genius-lead__text.has-text-align-center {
  margin: 0;
  text-align: start;
}

/* イラスト（宝箱・Figma 140×136px）
   ブロック標準の上余白を打ち消して、縦書きテキストに近づける */
.genius-cta__img,
.genius-cta .genius-cta__img {
  margin: 8px auto 0;
}

.genius-cta__img img {
  display: block;
  width: 140px;
  height: auto;
  margin-inline: auto;
}

/* ボタン共通 */
.genius-btn,
.genius-btn.wp-block-button {
  display: block;
  margin: 0 auto;
  text-align: center;
}

/* Figma実寸: 幅220 高さ58 角丸200 / 文字14px・字間1.68px（0.12em）・白 */
.genius-btn a,
.genius-btn .wp-block-button__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  width: 220px;
  max-width: 100%;
  min-height: 58px;
  margin: 0 auto;
  /* 左右の余白は24px（40pxだと文字が入りきらず段落ちする。
     letter-spacing は最後の1文字の後ろにも入るため、Figmaの実寸ぴったりだと溢れる） */
  padding: 16px 24px;
  border: none;
  border-radius: 200px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-align: center;
  text-decoration: none;
  transition: translate 0.25s ease-out;
}

/* 主ボタン（天才性を診断する） */
.genius-btn--main a,
.genius-btn--main .wp-block-button__link {
  background: var(--genius-blue);
}

/* 主ボタンの電球アイコン（Figma 11×17px） */
.genius-btn--main a::after,
.genius-btn--main .wp-block-button__link::after {
  content: "";
  flex: none;
  width: 11px;
  height: 17px;
  background: url("images/genius-bulb.svg") no-repeat center / contain;
}

/* 「無料」バッジ（ギザギザの白い印・ボタン左上に重ねる） */
.genius-btn--main a::before,
.genius-btn--main .wp-block-button__link::before {
  content: "無料";
  position: absolute;
  top: -27px;
  left: -10px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  rotate: -8deg;
  background: url("images/genius-badge-free.svg") no-repeat center / contain;
  color: var(--genius-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

/* 副ボタン（天才性の活かし方をもっと知りたい） */
.genius-btn--sub a,
.genius-btn--sub .wp-block-button__link {
  background: #84c2ee;
}

@media (hover: hover) {
  .genius-btn a:hover,
  .genius-btn .wp-block-button__link:hover {
    translate: 0 -4px;
    opacity: 0.95;
  }
}

@media (prefers-reduced-motion: reduce) {
  .genius-btn a,
  .genius-btn .wp-block-button__link {
    transition: none;
  }

  .genius-btn a:hover,
  .genius-btn .wp-block-button__link:hover {
    translate: none;
  }
}

/* ------- PC（Figma PC版に合わせる） -------
   PCデザインでは縦書きではなく「横書き・中央揃え」。イラストも大きい。
   ※ PCデザインはデザイン完成前の版のため、レイアウトの参考として扱う
     （テキスト・画像はSP版が正。2026-08-05 つたわる設計さん回答） */
@media screen and (min-width: 960px) {
  .genius-lead {
    padding: 48px 0 32px;
  }

  /* ⚠ PCでも縦書きのまま（こんた指示 2026-08-06）。MVのイントロと同じ扱い。
     以前はPCで横書きに切り替えていたが撤回 */
  .genius-lead__text,
  .genius-lead .genius-lead__text {
    writing-mode: vertical-rl;
    height: auto;
    font-size: 22px;
    font-weight: 900;
    line-height: 2.5;
    letter-spacing: 0.16em;
    /* 縦書きでは text-align は上下の揃えになるので行頭＝上に固定 */
    text-align: start;
  }

  /* 左寄せ指定が入っていても縦書きの配置は崩さない */
  .genius-lead .genius-lead__text.has-text-align-left,
  .genius-lead .genius-lead__text.has-text-align-right,
  .genius-lead .genius-lead__text.has-text-align-center {
    text-align: start;
  }

  .genius-cta__img img {
    width: 186px;
  }

  .genius-cta {
    padding-bottom: 40px;
  }
}

/* ------------------------------------------------------------
   8タイプ一覧セクション
   ------------------------------------------------------------ */

/* 黄色の枠 */
.genius-types {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 1060px;
  margin-inline: auto;
  padding: 48px 20px 32px;
  border: 2px solid var(--genius-blue);
  border-radius: 10px;
  background: var(--genius-yellow);
}

/* 見出しタブ（枠の上辺に重ねる） */
.genius-types .genius-types__tab,
.genius-types .genius-types__tab.is-style-section_ttl {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 14px 22px;
  border: 2px solid var(--genius-blue);
  border-radius: 100px;
  background: var(--genius-yellow);
  color: var(--genius-blue);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-align: center;
}

/* タブ見出しの装飾は出さない */
.genius-types .genius-types__tab::before,
.genius-types .genius-types__tab::after {
  content: none;
}

/* グリッドの器（列組みはSWELLカラムが担当） */
.genius-types .genius-types__grid {
  margin: 0;
}

/* カラム間の余白をデザインに合わせる */
.genius-types .swell-block-columns {
  --swl-clmn-mrgn--x: 16px;
  --swl-clmn-mrgn--y: 32px;
}

.genius-types .swell-block-columns__inner {
  padding-bottom: 0;
}

/* 各タイプ */
.genius-types .genius-types__item {
  margin: 0;
  text-align: center;
}

/* イラスト（円形） */
.genius-types .genius-types__img {
  margin: 0 auto 10px;
}

.genius-types .genius-types__img img {
  display: block;
  width: 110px;
  height: auto;
  margin-inline: auto;
  border-radius: 50%;
}

/* 「発想を創る」など */
.genius-types .genius-types__lead {
  margin: 0 0 2px;
  color: var(--genius-blue);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

/* タイプ名 */
.genius-types .genius-types__name,
.genius-types .genius-types__name.is-style-section_ttl {
  margin: 0;
  padding: 0;
  color: var(--genius-blue);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-align: center;
}

.genius-types .genius-types__name::before,
.genius-types .genius-types__name::after {
  content: none;
}

/* タイプ全体が1つのリンク（block-link-wrap.js で <a> に包まれる・フロントのみ） */
.genius-types .block-link-wrap {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: translate 0.25s ease-out;
}

/* ホバーで少し上へ動く（竹内さんご要望・単純で漫画っぽい動き） */
@media (hover: hover) {
  .genius-types .block-link-wrap:hover {
    translate: 0 -8px;
  }
}

/* 動きを減らす設定にしている方には動かさない */
@media (prefers-reduced-motion: reduce) {
  .genius-types .block-link-wrap {
    transition: none;
  }

  .genius-types .block-link-wrap:hover {
    translate: none;
  }
}

/* ------- タブレット以上 ------- */
@media screen and (min-width: 600px) {
  .genius-types {
    padding: 60px 32px 44px;
  }

  .genius-types .genius-types__tab,
  .genius-types .genius-types__tab.is-style-section_ttl {
    padding: 17px 30px;
    font-size: 18px;
  }

  .genius-types .swell-block-columns {
    --swl-clmn-mrgn--x: 20px;
    --swl-clmn-mrgn--y: 44px;
  }

  .genius-types .genius-types__img img {
    width: 128px;
  }

  .genius-types .genius-types__lead {
    font-size: 15px;
  }

  .genius-types .genius-types__name,
  .genius-types .genius-types__name.is-style-section_ttl {
    font-size: 17px;
  }
}

/* ------- PC（Figma 1440px基準） ------- */
@media screen and (min-width: 960px) {
  .genius-types {
    padding: 70px 40px 58px;
  }

  .genius-types .genius-types__tab,
  .genius-types .genius-types__tab.is-style-section_ttl {
    /* PCデザインでは左寄りで枠の上辺に重なる */
    left: 42px;
    translate: 0 -50%;
    padding: 20px 24px;
    font-size: 20px;
  }

  .genius-types .swell-block-columns {
    --swl-clmn-mrgn--x: 24px;
    --swl-clmn-mrgn--y: 56px;
  }

  .genius-types .genius-types__img img {
    width: 139px;
  }

  .genius-types .genius-types__lead {
    font-size: 16px;
  }

  .genius-types .genius-types__name,
  .genius-types .genius-types__name.is-style-section_ttl {
    font-size: 20px;
    letter-spacing: 0.176em;
  }
}

/* ============================================================
   編集画面だけの調整
   タブ見出しはフロントでは枠の上辺に「重ねる」（position:absolute）が、
   編集画面で浮かせるとブロックが選択しづらく、他のブロックにも重なるため、
   編集画面では通常の並び（静的配置）に戻す。
   ※ 色・文字サイズ・枠線などの見た目はそのまま効く
   ============================================================ */

.editor-styles-wrapper .genius-types .genius-types__tab,
.editor-styles-wrapper .genius-types .genius-types__tab.is-style-section_ttl {
  position: static;
  top: auto;
  left: auto;
  translate: none;
  max-width: 100%;
  margin: 0 auto 24px;
}

.editor-styles-wrapper .genius-types {
  padding-top: 32px;
}

/* 文字色は編集画面側の指定に負けることがあるため、ここで確実に当てる
   （編集画面はiframe化されることがあるので、変数ではなく実際の色で指定） */
.editor-styles-wrapper .genius-types .genius-types__tab,
.editor-styles-wrapper .genius-types .genius-types__tab.is-style-section_ttl,
.editor-styles-wrapper .genius-types .genius-types__name,
.editor-styles-wrapper .genius-types .genius-types__name.is-style-section_ttl,
.editor-styles-wrapper .genius-types .genius-types__lead {
  color: #1b68c5 !important;
}

/* ============================================================
   天才性の活かし方ページ（/genius/how-to/）
   2026-08 新規。下から順に実装
   ============================================================ */

/* ------------------------------------------------------------
   締めセクション（フリーランス、会社員、経営者。〜）
   背景 #FFFBC0
   ------------------------------------------------------------ */

.genius-end {
  position: relative;
  background: var(--genius-yellow);
  text-align: center;
}

/* ⚠ このセクションの上端に波は付けない。
   境目のカーブは、ひとつ上（8タイプ紹介）が
   SWELLフルワイドブロックの「下部の形状＝円形」で描いているため、
   CSSで足すと二重になる */

.genius-end > .swell-block-fullWide__inner {
  padding-top: 24px;
}

/* 本文（罫線つき）
   Figma: 16px・行送り2.6・白い罫線を42px間隔で13本
   ※ 線は1本ずつ図形で置かれているが、CSSでは
     「背景を42px周期で繰り返す」1指定で同じ見た目にできる */
.genius-end .genius-end__text {
  width: min(297px, 100%);
  margin: 0 auto;
  padding: 0;
  color: #444;
  font-size: 16px;
  font-weight: 700;
  /* 42px ÷ 16px ＝ 2.625。行の高さを罫線の間隔にぴったり合わせる */
  line-height: 2.625;
  letter-spacing: 0.16em;
  text-align: center;
  /* 文字の下に白い罫線を敷く（1行につき1本） */
  background-image: linear-gradient(
    to bottom,
    transparent calc(2.625em - 2.5px),
    #fff calc(2.625em - 2.5px),
    #fff 2.625em
  );
  background-size: 100% 2.625em;
  background-repeat: repeat-y;
}

/* キャラクター（「少し前に進めるかも」＋人物） */
.genius-end .genius-end__chara {
  margin: 24px auto 0;
}

.genius-end .genius-end__chara img {
  display: block;
  width: 116px;
  height: auto;
  margin-inline: auto;
}

.genius-end .genius-end__figure {
  margin: 0 auto;
}

.genius-end .genius-end__figure img {
  display: block;
  width: 96px;
  height: auto;
  margin-inline: auto;
}

/* 講座ボタン（ザ・コンソーシアムモデル構築講座を見る）
   Figma: 枠208×72px・角丸8px・下に4pxずれた影 */
.genius-end .genius-btn--course {
  margin: 8px auto 0;
}

.genius-end .genius-btn--course .wp-block-button__link,
.genius-end .genius-btn--course .wp-element-button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 208px;
  min-height: 72px;
  /* 左右のパディングは取らない。
     「ザ・コンソーシアムモデル」は13px・字間0.12emで175px必要で、
     左右24pxずつ取ると使える幅が156pxしかなく段落ちする。
     Figmaもテキスト枠(212px)が枠(208px)より大きい＝余白なしの設計 */
  padding: 16px 4px;
  border: 2px solid var(--genius-blue);
  border-radius: 8px;
  /* 下にずれた影＝厚みのある押せそうな見た目 */
  box-shadow: 3px 4px 0 0 var(--genius-blue);
  background: var(--genius-yellow);
  color: var(--genius-blue);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-align: center;
  transition: translate 0.15s ease-out, box-shadow 0.15s ease-out;
}

/* 押した時は影の分だけ沈む */
.genius-end .genius-btn--course .wp-block-button__link:hover,
.genius-end .genius-btn--course .wp-element-button:hover {
  translate: 3px 4px;
  box-shadow: 0 0 0 0 var(--genius-blue);
}

@media (prefers-reduced-motion: reduce) {
  .genius-end .genius-btn--course .wp-block-button__link,
  .genius-end .genius-btn--course .wp-element-button {
    transition: none;
  }
}

/* ------- タブレット以上 ------- */
@media screen and (min-width: 600px) {
  .genius-end .genius-end__text {
    width: min(420px, 100%);
    font-size: 17px;
  }

  .genius-end .genius-end__chara img {
    width: 140px;
  }

  .genius-end .genius-end__figure img {
    width: 116px;
  }
}

/* ------- PC ------- */
@media screen and (min-width: 960px) {
  .genius-end .genius-end__text {
    width: min(390px, 100%);
    font-size: 18px;
  }

  .genius-end .genius-end__chara img {
    width: 165px;
  }

  .genius-end .genius-end__figure img {
    width: 136px;
  }
}

/* ------------------------------------------------------------
   作用先セクション（その役割が発揮される作用先は2パターン）
   背景 #FFFBC0
   ------------------------------------------------------------ */

.genius-dir {
  position: relative;
  /* 下に垂らす波が、次のセクションの背景に隠れないよう手前に置く */
  z-index: 1;
  background: var(--genius-yellow);
  text-align: center;
}

/* 下端の波（診断TOPの漫画セクションと同じ作り＝48×32pxのタイルを繰り返す）
   このセクション（#FFFBC0）が下のセクションへ垂れ下がる形 */
.genius-dir::after {
  content: "";
  position: absolute;
  bottom: -32px;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  height: 32px;
  background: url("images/genius-wave-bottom-tile.svg") repeat-x center top;
  background-size: 48px 32px;
  pointer-events: none;
}

/* リード文（H3） */
.genius-dir .genius-dir__lead,
.genius-dir .genius-dir__lead.is-style-section_ttl {
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
  color: #444;
  font-size: 14px;
  font-weight: 700;
  line-height: 2.3;
  letter-spacing: 0.24em;
  text-align: center;
}

.genius-dir .genius-dir__lead::before,
.genius-dir .genius-dir__lead::after {
  content: none;
}

/* 図の見出し（H4）【 天才性における役割の作用先 】 */
.genius-dir .genius-dir__caption,
.genius-dir .genius-dir__caption.is-style-section_ttl {
  margin: 28px auto 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--genius-blue);
  font-size: 13px;
  font-weight: 700;
  line-height: 2.2;
  letter-spacing: 0.12em;
  text-align: center;
}

.genius-dir .genius-dir__caption::before,
.genius-dir .genius-dir__caption::after {
  content: none;
}

/* 最大幅400pxで中央寄せ（mw_400 グループ）
   ※ スマホは290pxで頭打ち（デザインの実寸） */
.genius-dir .mw_400 {
  width: 100%;
  max-width: 290px;
  margin-inline: auto;
}

@media screen and (min-width: 600px) {
  .genius-dir .mw_400 {
    max-width: 400px;
  }
}

/* 2つの図（他者向き／自分向き） */
.genius-dir .genius-dir__cols {
  margin: 10px auto 0;
}

/* ⚠ リッチカラムは各列に margin-left（約20px）を付ける。
   2列だと40px以上が余白に消え、290pxの枠では中身が入りきらない。
   ここでは列の余白を0にして gap だけで間隔をとる */
.genius-dir .genius-dir__cols > .swell-block-columns__inner {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: flex-start;
  justify-content: center;
  margin-inline: 0;
}

.genius-dir .genius-dir__cols > .swell-block-columns__inner > .swell-block-column {
  width: auto !important;
  max-width: none;
  min-width: 0;
  flex: 1 1 0;
  margin: 0;
}

.genius-dir .genius-dir__col {
  margin: 0;
  text-align: center;
}

/* 犬＋矢印3本（1枚のSVGにまとめている。矢印の向きも画像側で作り分け済み）
   ※ 以前はCSSの疑似要素で矢印を3本置いていたが、
     HTMLブロックが必要になり編集画面でエラーが出たため画像1枚にした */
.genius-dir .genius-dir__fig {
  margin: 0 auto;
}

.genius-dir .genius-dir__fig img {
  display: block;
  width: 100%;
  /* 実寸 259×227px（2倍素材）→ 表示は約130px */
  max-width: 130px;
  height: auto;
  margin-inline: auto;
}

/* 白い丸ラベル（他者向き／自分向き） */
.genius-dir .genius-dir__label {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 130px;
  margin: 8px auto 0;
  padding: 6px 8px;
  border-radius: 100px;
  background: #fff;
  color: var(--genius-blue);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-align: center;
}

/* 箇条書き（・他者との場 など） */
.genius-dir .genius-dir__list {
  width: 100%;
  max-width: 130px;
  margin: 9px auto 0;
  color: var(--genius-blue);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-align: left;
}

/* 締めの本文（天才性診断ではこの2軸を〜） */
.genius-dir .genius-dir__text {
  margin: 32px auto 0;
  color: #444;
  font-size: 14px;
  font-weight: 700;
  line-height: 2.3;
  letter-spacing: 0.24em;
  text-align: center;
}

/* ------- タブレット以上 ------- */
@media screen and (min-width: 600px) {
  .genius-dir .genius-dir__lead,
  .genius-dir .genius-dir__lead.is-style-section_ttl,
  .genius-dir .genius-dir__text {
    font-size: 15px;
  }

  .genius-dir .genius-dir__caption,
  .genius-dir .genius-dir__caption.is-style-section_ttl {
    font-size: 15px;
  }

  .genius-dir .genius-dir__fig img {
    max-width: 150px;
  }

  .genius-dir .genius-dir__label,
  .genius-dir .genius-dir__list {
    max-width: 150px;
  }
}

/* ------- PC ------- */
@media screen and (min-width: 960px) {
  .genius-dir .genius-dir__lead,
  .genius-dir .genius-dir__lead.is-style-section_ttl,
  .genius-dir .genius-dir__text {
    font-size: 16px;
  }

  .genius-dir .genius-dir__caption,
  .genius-dir .genius-dir__caption.is-style-section_ttl {
    font-size: 16px;
  }

  .genius-dir .genius-dir__fig img {
    width: 170px;
  }

  .genius-dir .genius-dir__label {
    width: 170px;
    font-size: 20px;
  }

  .genius-dir .genius-dir__list {
    width: 170px;
    font-size: 15px;
  }
}

/* ------------------------------------------------------------
   4つの役割セクション（人によって価値の発揮の仕方は違う）
   背景 #FFF692
   創る／訳す／動かす／整える の白いカード＋縦書きの英字
   ------------------------------------------------------------ */

.genius-role {
  position: relative;
  background: #fff692;
  text-align: center;
}

/* CHECK バッジ */
.genius-role .genius-role__badge {
  display: block;
  width: 56px;
  height: 32px;
  margin: 0 auto 12px;
  padding: 0;
  background: url("images/genius-check-badge.svg") no-repeat center / contain;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

/* 見出し（H2）＋下の飾り線 */
.genius-role .genius-role__title,
.genius-role .genius-role__title.is-style-section_ttl {
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--genius-blue);
  font-size: 16.5px;
  font-weight: 900;
  line-height: 2.2;
  letter-spacing: 0.2em;
  text-align: center;
}

.genius-role .genius-role__title::before {
  content: none;
}

.genius-role .genius-role__title::after,
.genius-role .genius-role__title.is-style-section_ttl::after {
  content: "";
  display: block;
  width: min(312px, 96%);
  height: 14px;
  margin: 10px auto 0;
  border: none;
  background: url("images/genius-role-underline.svg") no-repeat center / 100% 100%;
}

/* リード文 */
.genius-role .genius-role__lead {
  margin: 24px auto 0;
  color: #444;
  font-size: 14px;
  font-weight: 700;
  line-height: 2.3;
  letter-spacing: 0.24em;
  text-align: center;
}

/* ------- 4つのカード -------
   構成（編集画面で組んだSWELLネイティブブロック）:
     loos/columns（PC2列 / SP1列）
       └ loos/column × 4
           ├ p.genius-role__en    … 縦書きの英字（カードの左右にはみ出す）
           ├ group.genius-role__card（白背景）
           │   ├ h3.genius-role__name
           │   └ p.genius-role__desc
           └ ul.genius-role__jobs
   ------- */

/* 最大幅700pxで中央寄せ（mw_700 グループ） */
.genius-role .mw_700 {
  width: 100%;
  max-width: 700px;
  margin-inline: auto;
}

.genius-role .genius-role__cards {
  margin: 24px auto 0;
}

/* 列＝カード1枚ぶん。英字を左右にはみ出させるので位置の基準にする */
.genius-role .genius-role__cards > .swell-block-columns__inner > .swell-block-column {
  position: relative;
  margin-bottom: 24px;
}

/* 白いカード */
.genius-role .genius-role__card {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(220px, 100%);
  margin: 0 auto;
  padding: 20px 16px;
  border-radius: 10px;
  background: #fff;
}

/* 役割名（創る／訳す／動かす／整える） */
.genius-role .genius-role__name,
.genius-role .genius-role__name.is-style-section_ttl {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--genius-blue);
  font-size: 36px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.24em;
  /* 字間が最後の1文字の後ろにも入るぶん、中央に見えるよう寄せ戻す */
  text-indent: 0.24em;
  text-align: center;
}

.genius-role .genius-role__name::before,
.genius-role .genius-role__name::after {
  content: none;
}

/* 説明文 */
.genius-role .genius-role__desc {
  margin: 0;
  color: var(--genius-blue);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-align: center;
}

/* 縦書きの英字（CREATE / TRANSLATE / MOVE / ADJUST）
   カードの左右にはみ出す白い大きな文字。
   ※ Webフォントは足さず、端末にある欧文Boldで表示する */
.genius-role .genius-role__en {
  position: absolute;
  top: 0;
  z-index: 0;
  margin: 0;
  color: #fff;
  font-family: "Futura", "Century Gothic", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  /* 縦に倒して読ませる */
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

.genius-role .genius-role__en--left {
  left: 0;
}

.genius-role .genius-role__en--right {
  right: 0;
}

/* TRANSLATE だけ文字数が多く下に長く伸びるので、1文字ぶん上へ上げる */
.genius-role .genius-role__cards > .swell-block-columns__inner > .swell-block-column:nth-child(2) .genius-role__en {
  top: -1em;
}

/* PCは2×2に並ぶので、上の行（1つ目・2つ目）の下に余白を足して
   上下の組の間隔をあける */
@media screen and (min-width: 960px) {
  .genius-role .genius-role__cards > .swell-block-columns__inner > .swell-block-column:nth-child(1),
  .genius-role .genius-role__cards > .swell-block-columns__inner > .swell-block-column:nth-child(2) {
    margin-bottom: 41px;
  }

  /* PCはカードを少し広げる */
  .genius-role .genius-role__card {
    width: min(240px, 100%);
  }
}

/* 職種（商品開発・新規事業開発 …） */
.genius-role .genius-role__jobs,
.genius-role ul.genius-role__jobs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: center;
  justify-content: center;
  width: min(220px, 100%);
  margin: 12px auto 0;
  padding: 0;
  list-style: none;
}

.genius-role .genius-role__jobs li {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 0;
  padding: 0;
  color: var(--genius-blue);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 頭の緑の丸（リストの黒点は消す） */
.genius-role .genius-role__jobs li::marker {
  content: "";
}

.genius-role .genius-role__jobs li::before {
  content: "";
  display: block;
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  background: url("images/genius-role-dot.svg") no-repeat center / contain;
}

/* ------- タブレット以上 ------- */
@media screen and (min-width: 600px) {
  .genius-role .genius-role__title,
  .genius-role .genius-role__title.is-style-section_ttl {
    font-size: 20px;
  }

  .genius-role .genius-role__lead {
    font-size: 15px;
  }

  .genius-role .genius-role__en {
    font-size: 39px;
  }
}

/* ------- PC ------- */
@media screen and (min-width: 960px) {
  .genius-role .genius-role__title,
  .genius-role .genius-role__title.is-style-section_ttl {
    font-size: 24px;
  }

  .genius-role .genius-role__lead {
    font-size: 16px;
  }

}

/* ------------------------------------------------------------
   天才性の発揮条件セクション（うつわ3種＋STEP1〜3）
   背景 #FFFBC0
   ------------------------------------------------------------ */

.genius-step {
  position: relative;
  background: var(--genius-yellow);
  text-align: center;
}

/* CHECK バッジ */
.genius-step .genius-step__badge {
  display: block;
  width: 56px;
  height: 32px;
  margin: 0 auto 12px;
  padding: 0;
  background: url("images/genius-check-badge.svg") no-repeat center / contain;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

/* 見出し（H2）＋下の飾り線 */
.genius-step .genius-step__title,
.genius-step .genius-step__title.is-style-section_ttl {
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--genius-blue);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.75;
  letter-spacing: 0.08em;
  text-align: center;
}

.genius-step .genius-step__title::before {
  content: none;
}

.genius-step .genius-step__title::after,
.genius-step .genius-step__title.is-style-section_ttl::after {
  content: "";
  display: block;
  width: min(146px, 60%);
  height: 14px;
  margin: 10px auto 0;
  border: none;
  background: url("images/genius-step-underline.svg") no-repeat center / 100% 100%;
}

/* 本文 */
.genius-step .genius-step__text {
  margin: 24px auto 0;
  color: #444;
  font-size: 14px;
  font-weight: 700;
  line-height: 2.3;
  letter-spacing: 0.24em;
  text-align: center;
}

/* ------- うつわ3種 ------- */

/* うつわ3種の並び（編集画面で組んだ形）
     1つ目「整ったうつわ」… 幅100%で1行占有 → 中央に単独で置かれる
     2・3つ目            … その下に横並び（SP2列）
   ※ 列の指定はブロック側が持つので、CSSでは幅の上限だけそろえる */
.genius-step .genius-step__bowls {
  max-width: 260px;
  margin: 24px auto 0;
}

/* 1つ目（整ったうつわ）は1行を占めるので中央に */
.genius-step .genius-step__bowls > .swell-block-columns__inner {
  flex-wrap: wrap;
  justify-content: center;
}

/* 1つ目（整ったうつわ）は1行を占有して単独で中央に置く。
   ブロック側の幅指定（--clmn-w--pc:100%）に合わせて、
   SPでも同じ並びになるよう flex-basis を100%にする */
.genius-step .genius-step__bowls > .swell-block-columns__inner > .swell-block-column:first-child {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
}

/* 2・3つ目は下段に横並び */
.genius-step .genius-step__bowls > .swell-block-columns__inner > .swell-block-column:nth-child(n+2) {
  flex: 0 1 auto;
}

.genius-step .genius-step__bowl {
  margin: 0;
  text-align: center;
}

.genius-step .genius-step__bowl img {
  display: block;
  width: 100%;
  max-width: 90px;
  height: auto;
  margin-inline: auto;
}

/* うつわの名前（白い丸タグ） */
.genius-step .genius-step__bowlname {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 4px auto 0;
  padding: 4px 10px;
  border-radius: 100px;
  background: #fff;
  color: #444;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
}

/* ------- STEP 1〜3 -------
   構成（編集画面で組み直された形）:
     group.genius-step__steps
       └ loos/columns（PC3列）        … PCで3つ横並び
           └ loos/column × 3
               └ loos/columns.genius-step__item（PC1列 / SP2列）
                   ├ column（STEP番号[pc_only] ＋ 白い丸）
                   └ column（STEP番号[sp_only] ＋ 説明）
   ※ STEP番号はPCで丸の上・SPで説明の上に出したいので、
     同じ文字を2つ置いて pc_only / sp_only（SWELL標準・960pxで切替）で出し分けている
   ------- */

.genius-step .genius-step__steps {
  max-width: 340px;
  margin: 32px auto 0;
}

/* 外側のカラム（PC3列）の中に、STEP本体と矢印が交互に入っている。
   矢印は列ではないので、flexの並びとしては
   「STEP・矢印・STEP・矢印・STEP」の5つになる */
.genius-step .genius-step__steps .swell-block-columns__inner {
  align-items: flex-start;
}

/* 1つのSTEP */
.genius-step .genius-step__item {
  margin: 0;
}

/* 白い丸（見方を変える など） */
.genius-step .genius-step__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 114px;
  height: 114px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 100px;
  background: #fff;
  color: var(--genius-blue);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-align: center;
}

/* STEP1 などの小見出し */
.genius-step .genius-step__num {
  margin: 0;
  color: #84c2ee;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 2.2;
  letter-spacing: 0.16em;
  text-align: left;
}

/* STEPの説明文 */
.genius-step .genius-step__desc {
  margin: 0;
  color: var(--genius-blue);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.75;
  text-align: left;
}

/* STEPの間の矢印（SPは下向き） */
.genius-step .genius-step__arrow {
  display: block;
  width: 23px;
  height: 13px;
  margin: 16px auto;
  padding: 0;
  background: url("images/genius-step-arrow.svg") no-repeat center / contain;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

/* ------- タブレット以上 ------- */
@media screen and (min-width: 600px) {
  .genius-step .genius-step__title,
  .genius-step .genius-step__title.is-style-section_ttl {
    font-size: 20px;
  }

  .genius-step .genius-step__text {
    font-size: 15px;
  }

  .genius-step .genius-step__bowls {
    max-width: 320px;
  }

  .genius-step .genius-step__bowl img {
    max-width: 110px;
  }
}

/* ------- PC ------- */
@media screen and (min-width: 960px) {
  .genius-step .genius-step__title,
  .genius-step .genius-step__title.is-style-section_ttl {
    font-size: 24px;
  }

  .genius-step .genius-step__text {
    font-size: 16px;
  }

  .genius-step .genius-step__bowls {
    max-width: 380px;
  }

  .genius-step .genius-step__bowl img {
    max-width: 130px;
  }

  /* PCは3つ横並び。丸を大きくし、文字は中央に */
  .genius-step .genius-step__circle {
    width: 150px;
    height: 150px;
    font-size: 18px;
  }

  .genius-step .genius-step__num,
  .genius-step .genius-step__desc {
    text-align: center;
  }

  .genius-step .genius-step__num {
    font-size: 18px;
  }

  .genius-step .genius-step__steps {
    max-width: 980px;
  }

  /* PCの矢印
     ⚠ 矢印は「列と列の間」ではなく、各列の中（STEP本体の下）に入っている。
       そのままだと文章の下に縦向きで出てしまうので、
       絶対配置で列の右端・丸と同じ高さへ移す */
  .genius-step .genius-step__steps .swell-block-column {
    position: relative;
  }

  .genius-step .genius-step__arrow {
    position: absolute;
    top: 101px;
    right: -22px;
    width: 31px;
    height: 26px;
    margin: 0;
    rotate: -90deg;
  }
}

/* ------------------------------------------------------------
   見方を変える例セクション（CHANGE図＋漫画2本）
   背景 #FFFBC0（発揮条件セクションと地続き）
   ------------------------------------------------------------ */

/* ⚠ このかたまりは発揮条件セクション（.genius-step）に統合された。
   単独のフルワイドではなくなったので、背景は親が持つ。
   ここでは中身の見た目だけを指定する */
.genius-change {
  text-align: center;
}

/* 本文 */
/* ⚠ .post_content を付けている理由
   top.css に `.post_content p { letter-spacing: 0.02em }` があり、
   クラス1＋要素1でこちら（クラス1のみ）より詳細度が高い。
   genius.css の方が後に読まれても、詳細度が低いと勝てない（2026-08-07 実際に踏んだ） */
.post_content .genius-change__text {
  margin: 0 auto;
  color: #444;
  font-size: 14px;
  font-weight: 700;
  line-height: 2.3;
  /* Figma実寸に合わせて固定値で指定（2026-08-07 こんた指示）
     ⚠ em で書くと文字サイズが 14→15→16px と変わるたびに字間も変わってしまう */
  letter-spacing: 3.36px;
  text-align: center;
}

/* 最大幅320pxで中央寄せ（mw_320 グループ） */
.genius-change .mw_320,
.genius-step .mw_320 {
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
}

/* ------- CHANGE図（へこんだうつわ → 注ぎ口に！） ------- */

.genius-change__cols {
  margin: 20px auto 0;
}

/* ⚠ リッチカラムは各列に margin-left（約20px）を付ける。
   3列だと60px以上が余白に消え、320pxの枠では「CHANGE」の文字が入りきらない。
   列の余白を0にして gap だけで間隔をとる */
.genius-change__cols > .swell-block-columns__inner {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  justify-content: center;
  margin-inline: 0;
}

.genius-change__cols > .swell-block-columns__inner > .swell-block-column {
  width: auto !important;
  max-width: none;
  min-width: 0;
  margin: 0;
  flex: 1 1 0;
}

/* 真ん中（CHANGE）は文字が入る幅を確保し、うつわ側が縮む */
.genius-change__cols > .swell-block-columns__inner > .swell-block-column:nth-child(2) {
  flex: 0 0 auto;
}

/* うつわ */
.genius-change__bowl {
  margin: 0;
}

.genius-change__bowl img {
  display: block;
  width: 100%;
  max-width: 90px;
  height: auto;
  margin-inline: auto;
}

/* うつわの下の文（へこんだ部分は／注ぎ口に！） */
.genius-change__caption {
  margin: 4px 0 0;
  color: #444;
  font-size: 13px;
  font-weight: 700;
  line-height: 2.2;
  letter-spacing: 0.04em;
  text-align: center;
}

/* 真ん中の CHANGE ＋ 矢印 */
.genius-change__change {
  margin: 0;
  color: var(--genius-blue);
  /* STEP1 と同じ欧文フォント（Figma指定 Montserrat Bold） */
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 2.2;
  letter-spacing: 0.16em;
  text-align: center;
}

.genius-change__change::after {
  content: "";
  display: block;
  width: 23px;
  height: 25px;
  margin: 1px auto 0;
  background: url("images/genius-change-arrow.svg") no-repeat center / contain;
}

/* ------- 漫画 ------- */

.genius-change__manga {
  margin: 20px auto 0;
}

.genius-change__manga img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}

.genius-change__manga--1 img {
  max-width: 296px;
}

.genius-change__manga--2 img {
  max-width: 256px;
}

/* ------- タブレット以上 ------- */
@media screen and (min-width: 600px) {
  .post_content .genius-change__text {
    font-size: 15px;
  }

  .genius-change__bowl img {
    max-width: 110px;
  }

  .genius-change__manga--1 img {
    max-width: 400px;
  }

  .genius-change__manga--2 img {
    max-width: 340px;
  }
}

/* ------- PC ------- */
@media screen and (min-width: 960px) {
  .post_content .genius-change__text {
    font-size: 16px;
  }

  .genius-change__bowl img {
    max-width: 130px;
  }

  .genius-change__manga--1 img {
    max-width: 480px;
  }

  .genius-change__manga--2 img {
    max-width: 410px;
  }
}

/* ------------------------------------------------------------
   活かし方ページ 導入セクション（天才性の活かし方）
   背景 #FFF692
   ------------------------------------------------------------ */

.genius-intro {
  background: #fff692;
  text-align: center;
  /* 上の余白は診断トップのMVと同じ（SWELLフルワイドの sp-py-20 に勝つため !important） */
  padding-top: 7px !important;
}

@media screen and (min-width: 960px) {
  .genius-intro {
    padding-top: 15px !important;
  }
}

/* 下端の波（このセクション #FFF692 が下へ垂れ下がる） */
.genius-intro {
  position: relative;
  z-index: 1;
}

.genius-intro::after {
  content: "";
  position: absolute;
  bottom: -32px;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  height: 32px;
  background: url("images/genius-wave-top-tile.svg") repeat-x center top;
  background-size: 48px 32px;
  pointer-events: none;
}

/* 電球アイコン（H1の上に置く） */
.genius-intro .genius-intro__title::before {
  content: "";
  display: block;
  width: 17px;
  height: 27px;
  margin: 0 auto 4px;
  background: url("images/genius-intro-bulb.svg") no-repeat center / contain;
}

/* H1「天才性の活かし方」
   Figma: 「天才性」24px ＋「の」18px ＋「活かし方」24px */
/* 他セクションの見出しと同じ作り（色・太さ・揃え）。
   このページの主見出しなのでサイズだけ大きくする */
.genius-intro .genius-intro__title,
.genius-intro .genius-intro__title.is-style-section_ttl {
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--genius-blue);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.75;
  letter-spacing: 0.24em;
  text-align: center;
}

/* SWELLの見出し装飾は消す。
   ただし ::before は電球アイコンに使っているので ::after だけ */
.genius-intro .genius-intro__title::after {
  content: none;
}

/* 「の」だけ小さく（編集画面のフォントサイズ指定 swl-fz に合わせる） */
.genius-intro .genius-intro__title .swl-fz,
.genius-intro .genius-intro__title .u-fz-s {
  font-size: 18px;
  letter-spacing: 0.2em;
}

/* 本文 */
/* 本文は他セクション（.genius-step__text など）と同じ指定 */
.genius-intro .genius-intro__text {
  margin: 16px auto 0;
  color: #444;
  font-size: 14px;
  font-weight: 700;
  line-height: 2.3;
  letter-spacing: 0.24em;
  text-align: center;
}

/* ------- タブレット以上 ------- */
@media screen and (min-width: 600px) {
  .genius-intro .genius-intro__title::before {
    width: 20px;
    height: 32px;
  }

  .genius-intro .genius-intro__title,
  .genius-intro .genius-intro__title.is-style-section_ttl {
    font-size: 28px;
  }

  .genius-intro .genius-intro__title .swl-fz,
  .genius-intro .genius-intro__title .u-fz-s {
    font-size: 21px;
  }

  .genius-intro .genius-intro__text {
    font-size: 15px;
  }
}

/* ------- PC ------- */
@media screen and (min-width: 960px) {
  .genius-intro .genius-intro__title,
  .genius-intro .genius-intro__title.is-style-section_ttl {
    font-size: 32px;
  }

  .genius-intro .genius-intro__title .swl-fz,
  .genius-intro .genius-intro__title .u-fz-s {
    font-size: 24px;
  }

  .genius-intro .genius-intro__text {
    font-size: 16px;
  }
}

/* 縦書きの三点リーダー（2026-08-07 こんた案で決着）

   ⚠ ここに至るまでの経緯（同じ回り道をしないための記録）
     ① font-feature-settings（vert / vrt2）… Yu Gothic が「…」の縦組み字形を
        持っていないため、縦書きでも横に寝たまま変わらなかった
     ② span を 90度回転（rotate / transform）… Chrome では縦になったが、
        **Safari では向きが変わらなかった**。縦書きの中では回転の基準が
        ブラウザごとに違うため、回転に頼るのをやめた
     ③ 文字を透明にして丸を3つ自前で描く … 縦には並んだが**右にずれた**

   結論：文字そのものを「•」3つにする。
   縦書きでは1文字ずつ縦に積まれるので、回転も描画もせずに必ず縦3点になる。
   ブラウザによる差が原理的に出ない。

   使い方: <span class="tate-leader">•••</span>
   ─ 3文字ぶんの高さになるので letter-spacing で詰める
     （縦書きでは letter-spacing は「文字の進む向き」＝縦方向に効く） */
.tate-leader {
  /* ⚠ display は指定しない（インラインのまま）。
     inline-block にすると独立した箱になり、中の3文字が横に並んでしまう。
     素のインラインなら縦書きの流れにそのまま乗り、1文字ずつ縦に積まれる */
  font-size: 0.75em;
  /* 3つを近づけて、元の「…」1文字ぶんに近い長さに収める */
  letter-spacing: -0.42em;
  /* 次の「？」との間を空ける。
     ⚠ 縦書きでは inline方向＝縦なので、「下」の余白は margin-inline-end。
       margin-bottom（block方向）はここでは横向きの余白になるので効かない。
     ⚠ letter-spacing のマイナスは最後の文字の後ろにも入るため、
       その分（0.42em）を戻したうえで余白を足している */
  margin-inline-end: 0.4em;
}

/* 「当たり前すぎて／気づいていない価値」の文字の上に付く丸（2026-08-06）
   Figma: #D5FFC7 の 7px の丸を1文字ずつ、文字の上に置く
   ─ ルビのように見せるが ruby タグは使わない（行間が崩れるため）
   ─ 1文字ずつ span で包み、その上に疑似要素で丸を出す */
.genius-tsumari .dot-ruby {
  position: relative;
  display: inline-block;
}

.genius-tsumari .dot-ruby::before {
  content: "";
  position: absolute;
  top: -0.06em;
  left: 50%;
  translate: -50% 0;
  z-index: -1;
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d5ffc7;
  pointer-events: none;
}

/* 丸のぶん行間を確保する（上の行と重ならないように） */
.genius-tsumari .has-dot-ruby {
  display: inline-block;
  padding-top: 0.3em;
}