/* ============================================================
   症状ページ（記事型）symptom-article.php 専用スタイル
   ------------------------------------------------------------
   スコープ: .page-template-symptom-article
   このテンプレートを選んだページにだけ効くため、既存の症状ページ
   （page-seitai-02）には一切影響しない。本文側に独自クラスを付ける
   必要がないので、記事の生成・更新が単純になる。

   【他サイトへの導入手順】
   1. テーマフォルダに symptom-article.php を置く
   2. テーマフォルダに このファイル（symptom-article.css）を置く
   3. functions.php に次を追記して読み込む
        wp_enqueue_style(
          'symptom-article',
          get_stylesheet_directory_uri() . '/symptom-article.css',
          array( 'custom-style' ),
          filemtime( get_stylesheet_directory() . '/symptom-article.css' )
        );
      ※ 第4引数の filemtime は必須。省略するとCSSを更新しても
        ブラウザが古いファイルを掴み続ける。
   4. 対象ページの「テンプレート」で「症状ページ（記事型）」を選ぶ
   5. 対象ページのGenesisレイアウトを既存症状ページと同じ
      「sidebar-content」にする（_genesis_layout）

   このファイルは単体で完結しており、custom-style.css へは追記しない。
   混ぜると他サイトへのコピーや切り戻しが面倒になるため。
   ============================================================ */


/* ------------------------------------------------------------
   1. レイアウト（既存ページと見た目を揃えるための指定）
   ------------------------------------------------------------
   custom-style.css の幅・余白の指定は .page-template-page-seitai-01/-02 に
   限定されており、新しいテンプレートは対象外になる。指定しないと既存ページと
   横幅・上下位置がずれ、サイト内を回ったときに違和感が出る。
   基準値は /first/ 等（page-seitai-02）の実測値。
   **この節は装飾の変更時も触らないこと。** サイト遷移の違和感に直結する。
   ------------------------------------------------------------ */

/* site-inner の padding。既存テンプレートには padding:0 が指定されている。 */
.page-template-symptom-article .site-inner{
  padding:0;
}

/* breadcrumb の位置。既定の `margin:0 auto 30px auto`（中央寄せ）のままだと
   既存ページより右へ14pxずれる。既存は左3%固定。 */
.page-template-symptom-article .breadcrumb{
  margin:0 3% 0 3%;
  padding-top:16px;
}

@media only screen and (min-width:960px){
  /* site-inner の上余白。既定は35pxだが、既存の下層ページは21px。
     この14pxの差が breadcrumb 以下すべての垂直位置のずれになる。 */
  .page-template-symptom-article .site-inner{
    margin-top:21px;
  }
  .page-template-symptom-article .breadcrumb{
    display:block;
    margin:0 auto 0 3%;
    padding-top:14px;
  }
}

@media only screen and (min-width:980px){
  .page-template-symptom-article .site-inner{
    max-width:980px;
    width:100%;
  }
  .page-template-symptom-article .content{
    max-width:720px;
    width:70%;
  }
  .page-template-symptom-article .sidebar{
    float:right;
    margin-right:30px;
    max-width:230px;
    width:30%;
  }
}
@media only screen and (min-width:800px) and (max-width:979px){
  .page-template-symptom-article .site-inner{ width:75%; }
}


/* ------------------------------------------------------------
   2. 変数
   ------------------------------------------------------------
   custom-style.css では --oh-* が `.single-post .entry-content` に対してのみ
   定義されており、固定ページでは未定義になる。var() がすべて無効化されて
   スタイルが当たらないので、ここで定義し直す。

   **変数はテンプレート直下（body）で定義すること。**
   .entry-content に定義すると、その外側にある entry-header の h1 から
   参照できず、宣言ごと無効になって消える（実際に踏んだ）。
   ------------------------------------------------------------ */
.page-template-symptom-article{
  --oh-accent:#F5A623;      /* メインカラー。**変更しない** */
  --oh-soft:#FDF0DC;        /* 見出しの薄い面 */
  /* 蛍光ペン（strong）の色。**ここは薄くてよい。**
     マーカー自体を目立たせる必要はなく、上に乗る黒文字が読めることが要件。
     濃くすると文字とのコントラストが落ちて逆に読みにくくなる。 */
  --oh-marker:rgba(255, 226, 66, .55);
  --oh-line:#EFE3C8;
  --oh-text:#33322E;        /* 本文。真っ黒より疲れにくい */
  --oh-text-sub:#6E6C66;

  /* ----- 左右余白。**この1か所だけで全体の余白と字下げが決まる。** -----
     以下すべてがこの値に連動する:
       通常要素の margin-left / margin-right
       全幅ブロック（h2・表・クチコミ）の内側 padding
     つまり値を変えても、記事中のすべての文字の開始位置は自動でそろう。

     **単位に注意。**
       % … 親（.entry-content）の幅に対する割合。既存ページの `3%` と
           同じ基準なので、他ページと文字の開始位置がそろう。
       px … clampの上下限。狭い端末で詰まりすぎず、広い画面で開きすぎない。
     実測値: 320px→12px / 375px→13.88px / 430px→15.91px / PC(686px)→22px
     既存ページ（3%）はPCで20.6px。差1.4pxなのでサイト遷移で気づかない。

     **font-size の中でこの変数を使ってはいけない。** font-size 文脈では
     % が「親の文字サイズに対する割合」になり、幅ではなくなる。 */
  --oh-pad:clamp(12px, 3.7%, 22px);

  /* ----- 全幅ブロックが本文の余白より外へ出る量 -----
     スマホでは --oh-pad と同値にして画面端まで出す（＝全幅）。
     PCでは12px内側で止める。**PCの「端」は画面端ではなくカラムの境目**で、
     その先にサイドバーがある。境目まで色の面を出すと、サイドバーの
     オレンジのウィジェット見出しと30pxで隣り合ってぶつかって見える
     （既存ページは51px空いている。実測）。

     帯の左端 = --oh-pad - --oh-bleed、内側padding = --oh-bleed なので、
     **この値を変えても文字の開始位置は動かない**（両者を足すと必ず --oh-pad）。 */
  --oh-bleed:var(--oh-pad);
}

@media only screen and (min-width:980px){
  .page-template-symptom-article{
    --oh-bleed:calc(var(--oh-pad) - 12px);
  }
}


/* ------------------------------------------------------------
   3. 本文要素の左右位置
   ------------------------------------------------------------
   **entry-content に padding を付けてはいけない。** ショートコードで
   差し込まれるCTAボタンやメニューまで幅が狭まり、狭い画面ではみ出す
   （実測で確認）。既存ページと同じく、本文要素それぞれに左右marginを
   与える方式にする。
   ------------------------------------------------------------ */
.page-template-symptom-article .entry-content{
  color:var(--oh-text);
  font-size:clamp(16px, 4.4vw, 18px);
  line-height:1.95;
}

/* 通常要素（面を持たないもの）。左右に余白を取る。 */
.page-template-symptom-article .entry-content > p,
.page-template-symptom-article .entry-content > h3,
.page-template-symptom-article .entry-content > h4,
.page-template-symptom-article .entry-content > ul.wp-block-list,
.page-template-symptom-article .entry-content > ol{
  margin-left:var(--oh-pad);
  margin-right:var(--oh-pad);
}

/* ----- 全幅ブロック -----
   **面（背景）を持つブロックはすべて全幅にそろえる。**
   カード型のまま残すと、画面には左端が3種類できてしまう:
     面の左端 0 ／ カードの左端 --oh-pad ／ カードの中の文字 --oh-pad+15px
   全幅にして内側の padding を --oh-pad にすると2種類に減る:
     面の左端 0 ／ すべての文字 --oh-pad
   角丸と左右の線は画面端で切れると不自然なので付けない。
   上下の線と背景だけで区切りを示す。 */
.page-template-symptom-article .entry-content > h2,
.page-template-symptom-article .entry-content > .wp-block-table,
.page-template-symptom-article .entry-content > .review_v1_cnt,
.page-template-symptom-article .entry-content > .oh-box,
.page-template-symptom-article .entry-content > blockquote{
  margin-left:calc(var(--oh-pad) - var(--oh-bleed));
  margin-right:calc(var(--oh-pad) - var(--oh-bleed));
  border-left:none;
  border-right:none;
  border-radius:0;
}


/* ------------------------------------------------------------
   4. ページタイトル（h1）
   ------------------------------------------------------------
   h1 は .entry-header の中にあり .entry-content の外なので、
   本文用の指定は届かない。ここで個別に指定する。
   装飾は付けない。下に h2 の帯が来るため、h1 まで面を持たせると
   ページ上部が重くなる。太字と大きさだけで役割を示す。
   ------------------------------------------------------------ */
.page-template-symptom-article .entry-header > h1{
  margin:26px var(--oh-pad) 24px;
  padding:0;
  border:none;
  font-size:clamp(21px, 5.9vw, 26px);
  font-weight:700;
  line-height:1.5;
  color:var(--oh-text);
  position:static;
}
/* 既存テーマが付ける左の短い横線を消す */
.page-template-symptom-article .entry-header > h1::before{
  content:none;
}


/* ------------------------------------------------------------
   5. 見出し（h2 / h3）
   ------------------------------------------------------------
   h2 … 薄いオレンジの帯を全幅に敷き、下端を濃いオレンジ2pxで締める
   h3 … ■ ＋ 破線の下線

   **h2の下線は「下だけ」にすること。** 上下対称にすると見出しの向きが
   消え、前後どちらの本文に属するのかが曖昧になって区切り線に見える。
   下だけに線があると「ここから下の話」と読める。
   表・クチコミ枠も全幅で上下に線を持つため、h2だけ下線という非対称が
   「これは見出しである」という区別にもなっている。

   **上線を足してはいけない。** h2の上には 2.8em の余白がすでにあり、
   切れ目は線が無くても伝わる。線を足すぶんは重複になる。
   ------------------------------------------------------------ */
.page-template-symptom-article .entry-content > h2{
  margin-top:2.8em;
  margin-bottom:1.1em;
  padding:.7em var(--oh-bleed);
  background:var(--oh-soft);
  border:none;
  border-bottom:2px solid var(--oh-accent);
  font-size:clamp(18px, 5.1vw, 21px);
  font-weight:700;
  line-height:1.55;
  color:var(--oh-text);
}
.page-template-symptom-article .entry-content > h2:first-child{
  margin-top:.4em;
}

.page-template-symptom-article .entry-content > h3{
  margin-top:2.2em;
  margin-bottom:.8em;
  padding:0 0 .35em;
  background:none;
  border:none;
  border-bottom:1px dashed #D9D3C4;
  border-radius:0;
  font-size:clamp(16.5px, 4.6vw, 18.5px);
  font-weight:700;
  line-height:1.6;
  color:var(--oh-text);
  position:static;
}
/* h2が実線、h3が破線。形で階層が区別できるようにしている。
   ■ は h3 の目印。リストの●と形を変えて役割を分けている。 */
.page-template-symptom-article .entry-content > h3::before{
  content:"■";
  position:static;
  width:auto;
  height:auto;
  transform:none;
  background:none;
  color:var(--oh-accent);
  font-size:12px;
  margin-right:.5em;
  vertical-align:.12em;
}


/* ------------------------------------------------------------
   6. 本文
   ------------------------------------------------------------ */
/* **`.entry-content p` と書いてはいけない。`> p` に限定すること。**
   ショートコードで差し込まれるキャンペーン枠やCTAの中の段落まで当たり、
   行間1.95・下余白1.5em が上書きされて枠が縦に伸びる（実測で確認）。
   ショートコード側の指定は `.price-section p`（詳細度0,1,1）程度なので、
   こちらの `.page-template-… .entry-content p`（0,2,1）に負ける。

   段落の下余白に**左右のmarginを書かないこと。** `margin:0 0 1.5em` のような
   一括指定にすると `> p { margin-left:var(--oh-pad) }` を打ち消してしまい、
   本文だけが左に寄って他の要素と揃わなくなる（実測）。 */
.page-template-symptom-article .entry-content > p{
  margin-bottom:1.5em;
  line-height:1.95;
}

/* **段落の font-size は p に直接書くこと。.entry-content への指定では効かない。**
   custom-style.css に素の `p{font-size:16px}`（960px以上では17px）があり、
   **継承値は、どんなに弱くても「直接マッチした宣言」に必ず負ける。**
   セレクタの詳細度の問題ではないので、.entry-content 側をいくら強くしても
   解決しない。実測では本文だけ 16px に固定され、clamp が丸ごと無視されていた。
   h2/h3/表/クチコミは個別に font-size を持つため影響を受けていない。 */
.page-template-symptom-article .entry-content > p{
  font-size:clamp(16px, 4.4vw, 18px);
}

/* 蛍光ペン。段落・リスト内の strong に当てる。
   `.entry-content strong` にすると、テンプレートが差し込むメニューや
   ウィジェットの文字にも当たるので対象を絞る。 */
/* 蛍光ペン。**色はオレンジではなく黄にする。**
   オレンジはメインカラーで、見出しの帯・リストのマーカー・表のヘッダーと
   役割が競合する。強調は本文の中の補助なので、色を分けたほうが読み手が
   迷わない。黄は文房具の蛍光ペンそのものなので説明が要らない。

   **マーカー自体のコントラストは要らない。** 目立たせる対象は上に乗る文字
   であって、マーカーではない。濃くすると文字とのコントラストが落ちて
   かえって読みにくくなる。薄いほうが正しい。 */
.page-template-symptom-article .entry-content > p strong,
.page-template-symptom-article .entry-content > ul.wp-block-list strong,
.page-template-symptom-article .entry-content > ol strong{
  font-weight:700;
  background:linear-gradient(transparent 62%, var(--oh-marker) 62%);
  padding:0 .1em;
}

/* 赤太字。とくに注意してほしい箇所に使う。
   ブロックエディタで文字色を指定した場合と、<span class="oh-alert"> を
   直接書いた場合の両方に効かせる。 */
.page-template-symptom-article .entry-content .oh-alert,
.page-template-symptom-article .entry-content .has-vivid-red-color,
.page-template-symptom-article .entry-content .has-luminous-vivid-orange-color{
  color:#D93A2B;
  font-weight:700;
}

/* 本文中のリンク */
.page-template-symptom-article .entry-content > p a{
  color:#C77A00;
  text-decoration:underline;
  text-underline-offset:3px;
}
.page-template-symptom-article .entry-content > p a:hover{
  text-decoration:none;
}


/* ------------------------------------------------------------
   7. 箇条書き
   ------------------------------------------------------------
   セレクタは `.entry-content > ul.wp-block-list` に限定すること。
   `.entry-content ul` にすると、このテンプレートが差し込むサイドメニュー
   （nav 内の ul.menu）にも背景と余白が当たり、ナビゲーションが崩れる。

   **マーカーに ○（白丸）を使ってはいけない。** 日本語では ○＝正しい の
   意味を持つため、「やってはいけないこと」のような否定的な項目が並ぶ
   リストで誤読される。同じ理由で × △ も避け、意味を持たない塗り丸にする。

   ::before は position:absolute で置く。li 側の padding-left が
   ぶら下げインデントになるので、項目が折り返しても行頭がそろう。
   ------------------------------------------------------------ */
.page-template-symptom-article .entry-content > ul.wp-block-list{
  margin-top:0;
  margin-bottom:1.7em;
  padding:0;
  background:none;
  border:none;
  border-radius:0;
  list-style:none;
}
.page-template-symptom-article .entry-content > ul.wp-block-list > li{
  position:relative;
  margin:.5em 0;
  padding-left:1.35em;
  line-height:1.85;
  /* **list-style-type は li に直接書くこと。** custom-style.css / style.css に
     `.entry-content ul > li{list-style-type:disc}` があり、ul 側の
     `list-style:none` は li への直接指定に負ける（p の font-size と同じ罠）。
     消さないと、既定の disc と自前の ::before の丸で**マーカーが二重になる**。
     ul の padding-left が 0 なので disc は枠の外側に出て見切れる。 */
  list-style-type:none;
}
.page-template-symptom-article .entry-content > ul.wp-block-list > li::before{
  content:"";
  position:absolute;
  left:.15em;
  top:.72em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--oh-accent);
}

/* 番号付きリスト。数字そのものが目印になるので ::marker のままでよい。 */
.page-template-symptom-article .entry-content > ol{
  margin-top:0;
  margin-bottom:1.7em;
  padding-left:1.5em;
  background:none;
  border-radius:0;
}
.page-template-symptom-article .entry-content > ol > li{
  margin:.5em 0;
  line-height:1.85;
}
.page-template-symptom-article .entry-content > ol > li::marker{
  color:var(--oh-accent);
  font-weight:700;
}


/* ------------------------------------------------------------
   8. 表
   ------------------------------------------------------------
   全幅にすることで、320pxでも3列が窮屈にならない。
   セルの padding は列ごとに変え、1列目の文字が本文とそろうようにする。
   罫線は横線のみ。縦線を入れると狭い画面で圧迫感が出る。
   ------------------------------------------------------------ */
.page-template-symptom-article .entry-content > .wp-block-table{
  margin-top:0;
  margin-bottom:1.7em;
  overflow-x:auto;
}
/* **テーマ側の表スタイルを打ち消す指定が要る。** 素の型セレクタで書かれて
   いるため、こちらが親（table）にまとめて書いても効かない。実測で確認した
   打ち消し対象は5つ:
     style.css   table  { margin-bottom:40px }   … figure側の余白と二重になる
     style.css   td, th { line-height:2 }        … 直接指定なので継承では勝てない
     style.css   tbody  { border-bottom:1px #eee }
     style.css   tr     { border-top:1px #eee }  … td下線と合わさって二重線になる
     block-library .wp-block-table thead { border-bottom:3px solid currentcolor }
                                                 … 黒3pxの線がヘッダー下に重なる */
.page-template-symptom-article .entry-content table{
  width:100%;
  border-collapse:collapse;
  font-size:clamp(14px, 3.9vw, 16px);
  line-height:1.7;
  margin:0;                       /* style.css の margin-bottom:40px を消す */
}
.page-template-symptom-article .entry-content table thead,
.page-template-symptom-article .entry-content table tbody,
.page-template-symptom-article .entry-content table tr{
  border:none;                    /* テーマ側の #eee の罫線を全部消す */
}
.page-template-symptom-article .entry-content table th,
.page-template-symptom-article .entry-content table td{
  padding:.75em .7em;
  border:none;
  border-bottom:1px solid #E9E4D9;
  text-align:left;
  vertical-align:top;
  line-height:1.7;                /* td,th{line-height:2} を打ち消す */
}
/* 1列目の文字を本文とそろえ、最終列を画面端から離す */
.page-template-symptom-article .entry-content table th:first-child,
.page-template-symptom-article .entry-content table td:first-child{
  padding-left:var(--oh-bleed);
}
.page-template-symptom-article .entry-content table th:last-child,
.page-template-symptom-article .entry-content table td:last-child{
  padding-right:var(--oh-bleed);
}
.page-template-symptom-article .entry-content table thead th{
  background:#FAF7F0;
  color:var(--oh-text);
  font-weight:700;
  border-bottom:2px solid var(--oh-accent);
}
.page-template-symptom-article .entry-content table tbody th{
  background:none;
  font-weight:700;
  white-space:nowrap;
  color:#4A4843;
}
.page-template-symptom-article .entry-content table tbody tr:last-child th,
.page-template-symptom-article .entry-content table tbody tr:last-child td{
  border-bottom:none;
}


/* ------------------------------------------------------------
   9. 注意枠（.oh-box）— 任意のコンポーネント
   ------------------------------------------------------------
   「医療機関の受診をおすすめするケース」のような、本文から浮かせたい
   注意喚起に使う。**いまの記事は h2 ＋ リストで書かれているので必須ではない。**
   使う場合は、ブロックエディタでグループブロックに oh-box を、
   その中の見出し段落に oh-box-title を指定する。

   枠の中は背景色があるため、本文と同じ装飾だと詰まって見える。
     - マーカーを小さく（5px）して主張を落とす
     - 項目ごとに薄い区切り線を入れ、どこまでが1項目か分かるようにする
   マーカーの位置は本文のリストと同じ .15em にそろえる。
   枠の中だけ字下げが違うと、全幅にした意味が薄れる。
   ------------------------------------------------------------ */
.page-template-symptom-article .entry-content > .oh-box{
  margin-top:0;
  margin-bottom:1.7em;
  padding:13px var(--oh-bleed);
  background:#FFF9F0;
  border-top:1px solid #F0DFC0;
  border-bottom:1px solid #F0DFC0;
}
.page-template-symptom-article .entry-content .oh-box-title{
  margin:0 0 .55em;
  padding:0 0 .45em;
  border-bottom:1px solid #F0DFC0;
  font-size:15.5px;
  font-weight:700;
  color:#8A6A1F;
}
.page-template-symptom-article .entry-content .oh-box ul{
  margin:0;
  padding:0;
  list-style:none;
}
.page-template-symptom-article .entry-content .oh-box ul li{
  position:relative;
  /* **ここにも list-style-type:none が要る。**
     枠の中の ul は .entry-content の直下ではないため、本文リスト用の
     打ち消し（`> ul.wp-block-list > li`）が届かない。
     `.entry-content ul > li{list-style-type:disc}` が生き残り、
     既定のdiscと自前の::beforeで**マーカーが二重になる**（実測）。 */
  list-style-type:none;
  margin:0;
  padding:.42em 0 .42em 1.35em;
  font-size:clamp(14.5px, 4vw, 16.5px);
  line-height:1.7;
  border-bottom:1px solid rgba(180,150,90,.16);
}
.page-template-symptom-article .entry-content .oh-box ul li:first-child{ padding-top:0; }
.page-template-symptom-article .entry-content .oh-box ul li:last-child{
  border-bottom:none;
  padding-bottom:0;
}
.page-template-symptom-article .entry-content .oh-box ul li::before{
  content:"";
  position:absolute;
  left:.15em;
  top:.82em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#C99A3A;
}
.page-template-symptom-article .entry-content .oh-box ul li:first-child::before{ top:.55em; }


/* ------------------------------------------------------------
   10. お客様の声（クチコミ）
   ------------------------------------------------------------
   既存の症状ページ（/herunia/ など）と同じ構成にする。
     .review_v1_cnt
       └ p.review_v1_title   … 抜粋タイトル（太字）
       └ div.review_v1_star  … ★の並び ＋ 数値
       └ p.review_v1_text    … 本文
       └ p.review_v1_note    … ※個人の感想〜（右揃え・グレー）

   **注記は1件ごとに1つ付ける。** まとめて末尾に1つではなく、
   各クチコミの本文直下に置くこと（景品表示法まわりの運用として、
   どの体験談に対する注記かを明確にするため）。

   **タイトルは大きく、本文は小さく。**
   読者はまずタイトルで「自分と近い症状か」を見分け、気になったものだけ
   本文を読む。タイトルを縮めると流し読みができなくなるので、
   縮めるのは本文と注記だけにする。

   **縦の長さを抑えることを優先している。** 3件並べると縦が伸びるため:
     1. 抜粋タイトルを1行に収める … 2行だと26px増える
     2. 注記を1行に収める … 2行に折り返すと19px増える
     3. 上下paddingとカード間を詰める
   1 は **CSSで切らず、生成側（publish スクリプト）で28字以内に切る。**
   CSSの -webkit-line-clamp で隠すと、クチコミの文言が読めなくなる。
   ------------------------------------------------------------ */
.page-template-symptom-article .entry-content > .review_v1_cnt{
  margin-top:0;
  margin-bottom:14px;
  padding:11px var(--oh-bleed);
  background:#FCFAF6;
  border-top:1px solid #EFEADF;
  border-bottom:1px solid #EFEADF;
  box-shadow:none;
}
/* 抜粋タイトル。**2行までに収める。3行にはしない。**
   生成側（build_review_blocks.py）で34字以内に抑えているが、
   環境差で3行目に回ることがあるためCSS側でも止める。
   実測の1行あたり字数: 320px→18字 / 390px→20字 / 430px→22字 */
.page-template-symptom-article .entry-content .review_v1_title{
  margin:0 0 .35em;
  font-size:clamp(15px, 4.2vw, 17px);
  font-weight:700;
  line-height:1.5;
  color:var(--oh-text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* ★と数値は必ず同じ行に並べる。
   **WordPressはグループブロックの中に .wp-block-group__inner-container を挟むことがある。**
   そのため `.review_v1_star { display:flex }` だけでは、直接の子がラッパー1つになり
   横並びにならない（実際に縦積みになった）。ラッパー側にも flex を当てる。 */
.page-template-symptom-article .entry-content .review_v1_star,
.page-template-symptom-article .entry-content .review_v1_star > .wp-block-group__inner-container{
  display:flex;
  flex-wrap:nowrap;
  align-items:baseline;
  gap:.4em;
}
.page-template-symptom-article .entry-content .review_v1_star{
  margin:0 0 .45em;
}
.page-template-symptom-article .entry-content .review_v1_star p{
  margin:0;
  white-space:nowrap;
}
.page-template-symptom-article .entry-content .review_v1_star .star{
  margin:0;
  color:#F5B916;
  font-size:clamp(14px, 3.9vw, 16px);
  letter-spacing:.08em;
  line-height:1;
}
/* 数値は元ページと同じ赤の太字（#F1104A）。★と同じ文字サイズにする。 */
.page-template-symptom-article .entry-content .review_v1_star .txt{
  margin:0;
  font-size:clamp(14px, 3.9vw, 16px);
  font-weight:700;
  color:#F1104A;
  line-height:1;
}
.page-template-symptom-article .entry-content .review_v1_text{
  margin:0 0 .35em;
  font-size:clamp(14px, 3.9vw, 16px);
  line-height:1.8;
  color:#4A4843;
}
/* 注記は「1行に収まること」が要件なので画面幅に追従させる。
   **white-space:nowrap を付けてはいけない。** 320pxでは文字列が59pxはみ出して
   切れ、免責の文が読めなくなる（実測）。サイズ側で1行に収める。
     利用できる幅 ≒ 100vw - 左右padding（狭い端末で12px×2 ＝ 28pxを安全側に見る）
   これを29で割ると1文字あたりの上限。上下限は clamp で押さえる。
   **ここで var(--oh-pad) を使ってはいけない。** font-size 文脈では % が
   親の文字サイズに対する割合になり、幅の意味を失う。 */
/* **注記の色を薄くしすぎないこと。** #918E86 はカード地(#FCFAF6)に対して
   3.14:1 しかなく、WCAG AA（通常サイズの文字は4.5:1）を満たさない（実測）。
   景品表示法の打消し表示は「明瞭に表示」が要件なので、読めない注記は
   アクセシビリティだけでなく表示要件の面でも問題になる。
   #6E6C66 で 5.04:1。**文字サイズもレイアウトも変わらない。** */
.page-template-symptom-article .entry-content .review_v1_note{
  margin:0;
  text-align:right;
  color:#6E6C66;
  line-height:1.5;
  letter-spacing:-.02em;
  font-size:clamp(9px, calc((100vw - 28px) / 29), 11px);
}


/* ------------------------------------------------------------
   11. 引用（blockquote）
   ------------------------------------------------------------
   クチコミ以外の引用に使う。クチコミ枠と同じ全幅の形にそろえる。
   引用符（“）は本文に重なって読みにくくなるため置かない。
   ------------------------------------------------------------ */
.page-template-symptom-article .entry-content > blockquote{
  margin-top:0;
  margin-bottom:1.7em;
  padding:13px var(--oh-bleed);
  background:#FBF8F3;
  border-top:1px solid var(--oh-line);
  border-bottom:1px solid var(--oh-line);
  box-shadow:none;
  font-style:normal;
}
.page-template-symptom-article .entry-content > blockquote p{
  margin:0 0 .8em;
}
/* 最終行は出典（「（綱島店・腰痛でご来院）」など）を想定 */
.page-template-symptom-article .entry-content > blockquote p:last-child{
  margin-bottom:0;
  font-size:.88em;
  color:var(--oh-text-sub);
  text-align:right;
}


/* ------------------------------------------------------------
   12. よくあるご質問（Q&A）
   ------------------------------------------------------------
   マークアップ:
     <p class="oh-qa"><strong>質問文</strong>回答文…</p>

   **strong から「Q.」の文字は外すこと。** 丸バッジをCSSで付けるので、
   テキストに残すと「Q ● Q. 質問」と二重になる。

   装飾は軽くする。FAQはページ末尾のCTA直前に来るため、ここで色を使うと
   予約ボタンより目立ってしまう。丸バッジ1つと破線の区切りだけにして、
   「探して見つける」ために必要な最小限に留める。

   **strong の蛍光ペンを外すこと。** 質問文はラベルであって本文中の強調
   ではない。全文にマーカーが乗ると読みにくく、本文の強調とも区別がつかない。
   ------------------------------------------------------------ */
.page-template-symptom-article .entry-content > .oh-qa{
  position:relative;
  margin:0 var(--oh-pad) 1.15em;
  padding:0 0 1.15em 1.9em;
  border-bottom:1px dashed #DFD9CB;
}
.page-template-symptom-article .entry-content > .oh-qa:last-of-type{
  border-bottom:none;
}
.page-template-symptom-article .entry-content > .oh-qa::before{
  content:"Q";
  position:absolute;left:0;top:.15em;
  width:1.5em;height:1.5em;border-radius:50%;
  background:var(--oh-accent);color:#fff;
  font-size:.8em;font-weight:700;line-height:1.5em;text-align:center;
}
.page-template-symptom-article .entry-content > .oh-qa strong{
  display:block;
  background:none;          /* 蛍光ペンを外す */
  padding:0;
  margin:0 0 .4em;
  font-size:1.02em;
  line-height:1.6;
  color:var(--oh-text);
}


/* ------------------------------------------------------------
   13. ショートコード（キャンペーン枠・CTA）の復元
   ------------------------------------------------------------
   **これが無いとキャンペーン枠のデザインが崩れる。**
   custom-style.css のショートコード用スタイルは
   `.page-template-page-seitai-02` と `.home` に限定して書かれており、
   新テンプレートは対象外になる。節1のレイアウトとまったく同じ事情。

   下の値は custom-style.css の該当ルールを実測して写したもの。
   **custom-style.css 側を変更したら、ここも合わせること。**
   ショートコードは他ページと共用なので、向こうを直すと全ページに影響する。
   こちらへ写すほうが安全。
   ------------------------------------------------------------ */
/* **行間もショートコード側の値に戻すこと。** 本文の 1.95 は
   .entry-content からショートコードの中の span まで継承され、
   価格やバッジの行が間延びする（実測: 29.25px が 38.03px になっていた）。
   p だけ直しても span は直らないので、ブロックの根で止める。
   1.5 は既存ページ（/price/）の実測値。 */
.page-template-symptom-article .entry-content .price-section,
.page-template-symptom-article .entry-content .cta-v2,
.page-template-symptom-article .entry-content .custom_sc{
  line-height:1.5;
}

.page-template-symptom-article .entry-content p.course-name{
  text-align:center;
  font-size:5.6vw;
  font-weight:700;
  color:#222;
  padding:0 0 1.5em;
  margin:0;
  line-height:1.6;
}
.page-template-symptom-article .entry-content p.price-note{
  font-size:3.8vw;
  color:#888;
  margin-top:2em;
  margin-bottom:0;
  line-height:1.6;
}
.page-template-symptom-article .entry-content p.next-price{
  font-size:3.3vw;
  color:#555;
  line-height:1.8;
  text-align:center;
  margin-bottom:1em;
}
.page-template-symptom-article .entry-content p.guarantee-title{
  font-size:5vw;
  font-weight:700;
  color:#E65C00;
  padding-bottom:.7em;
  margin:0;
}
.page-template-symptom-article .entry-content p.guarantee-body{
  font-size:3.5vw;
  color:#444;
  line-height:1.8;
  padding-bottom:.7em;
  margin:0;
}
.page-template-symptom-article .entry-content p.guarantee-confidence{
  font-size:4vw;
  font-weight:700;
  color:#222;
  margin:0;
}
/* CTAの画像 */
.page-template-symptom-article .entry-content .wp-block-image{
  margin:0 6% 19px;
}
.page-template-symptom-article .entry-content .cta-v2 .cta-img-02.wp-block-image{
  margin-left:auto;margin-right:auto;width:95%;
}
.page-template-symptom-article .entry-content .cta-v2 .cta-img-01.wp-block-image img,
.page-template-symptom-article .entry-content .cta-v2 .cta-img-02.wp-block-image img{
  width:100%;
}
@media only screen and (min-width:480px){
  .page-template-symptom-article .entry-content .cta-v2 .cta-img-02.wp-block-image{
    width:94%;
  }
}

/* ------------------------------------------------------------
   CTAをキャンペーン枠と同じ幅基準にそろえる
   ------------------------------------------------------------
   **もともと2つの基準が混在していた。**
     キャンペーン枠 … .price-section の padding:1em（＝4vw）で内側へ入り、
                      さらに .price-wrap が max-width:640px で中央寄せ
     .cta-v2       … 480px以上で margin:0 3%、480px未満は全幅

   実測のズレ:
     PC カラム686px … 枠 23..663 / CTA 20.58..665.42（左右2.42pxずつ）
     カラム600px    … 枠は左24 / CTA は左0（24px）
     スマホ390px    … 枠は左15.59 / CTA は左0（15.59px）

   枠と同じ「内側余白1em＋640pxで頭打ち・中央寄せ」を CTA にも与える。
   border-box にして max-width に余白ぶんを足すと、枠の**中身の左右端**と
   CTA の中身がどの幅でも一致する。
   ------------------------------------------------------------ */
/* **.cta-v2 は背景色を持つので、幅を狭めてはいけない。**
   .price-section の背景（#FFF8F2）はカラム全幅 0..686 に広がる。
   .cta-v2 の背景（オレンジ5%）だけ内側に入ると、上下に並んだ2つの面の
   左右がズレて段差になる（実測で左右7pxずつ／修正前は20.58pxずつ）。

   そこで **.cta-v2 も全幅にし、中身の位置は padding で合わせる。**
   キャンペーン枠の中身は「.price-section の内側余白 ＋ .price-wrap が
   640pxで頭打ち・中央寄せ」で決まるので、その合計を padding で再現する:
     padding = max(内側余白, (カラム幅 - 640px) / 2)
   カラムが640pxより狭いときは内側余白がそのまま効き、広いときは
   中央寄せぶんが効く。どちらの側になっても中身の位置が一致する。 */
.page-template-symptom-article .entry-content .cta-v2{
  box-sizing:border-box;
  max-width:none;
  margin-left:0;
  margin-right:0;
  padding-left:max(4vw, calc((100% - 640px) / 2));
  padding-right:max(4vw, calc((100% - 640px) / 2));
}
/* 768px以上ではキャンペーン枠の内側余白が 4vw から 16px 固定に変わる
   （上の「PCでキャンペーン枠が縦に伸びる問題」の節で font-size を
     16px に固定したため、padding:1em が 16px になる）ので、そろえる。 */
@media (min-width:768px){
  .page-template-symptom-article .entry-content .cta-v2{
    padding-left:max(16px, calc((100% - 640px) / 2));
    padding-right:max(16px, calc((100% - 640px) / 2));
  }
}
/* ----- PCでキャンペーン枠が縦に伸びる問題 -----
   **`.price-section{font-size:4vw}` にPC用の上書きが無い。**
   1280pxでは 4vw = 51.2px になり、行間1.5で76.8px。
   子要素（.price-num / .limit-tag など）は個別に @768 で px 指定が
   あるため無事だが、**font-size を持たないコンテナ**
   （.campaign-body / .price-display / .limit-banner / .btn-wrap など）と、
   ショートコード内に多数ある**空の `<br>`** がこの51.2pxを継承し、
   1つあたり約58pxの空白を生んでいた（実測）。

   **これは既存ページ（/price/ など）でも同じ**（枠の高さ1355px）。
   このテンプレート起因ではないが、ここでは症状ページのスコープ内だけを
   直す。他ページへ広げるかは custom-style.css 側の判断になる。

   モバイルでは 390px で 4vw = 15.6px。PCも同じ水準に戻すだけでよい。 */
@media (min-width:768px){
  .page-template-symptom-article .entry-content .price-section{
    font-size:16px;
  }
}

/* ----- PCの縦余白を詰める -----
   枠の縦1300pxのうち、余白（padding+margin）が503px＝39%を占めていた（実測）。
   これらの値はスマホ（幅390px）で決められたもので、PCでカラムが686pxと
   1.76倍になっても同じまま。**横に広くなったぶん、縦の余白が相対的に
   過剰になり「間延びして見える」。** PCだけ約6割に詰める。

   **ボタン（.btn / .innercta_btn_*）には触らない。** 下のサブラベルの
   位置決めに padding を使っており、変えると重なる。 */
@media (min-width:768px){
  .page-template-symptom-article .entry-content .campaign-body{ padding-top:32px; }
  .page-template-symptom-article .entry-content .price-display{ padding-bottom:32px; }
  .page-template-symptom-article .entry-content .limit-banner{
    padding-top:28px;padding-bottom:28px;margin-bottom:20px;
  }
  .page-template-symptom-article .entry-content p.course-name{ padding-bottom:22px; }
  .page-template-symptom-article .entry-content .limit-tag{ margin-bottom:18px; }
  .page-template-symptom-article .entry-content .limit-main{ margin-bottom:16px; }
  .page-template-symptom-article .entry-content p.price-note{ margin-top:16px; }
  .page-template-symptom-article .entry-content .campaign-header{
    padding-top:12px;padding-bottom:12px;
  }
}

@media (min-width:768px){
  .page-template-symptom-article .entry-content p.course-name{ font-size:24px; }
  .page-template-symptom-article .entry-content p.next-price{ font-size:16px; }
  .page-template-symptom-article .entry-content p.price-note{ font-size:16px; margin-top:24px; }
  .page-template-symptom-article .entry-content p.guarantee-title{ font-size:24px; }
  .page-template-symptom-article .entry-content p.guarantee-body{ font-size:16px; }
  .page-template-symptom-article .entry-content p.guarantee-confidence{ font-size:18px; }
}


/* ------------------------------------------------------------
   14. LP型の部品（FV・お悩みチェック・クチコミの店舗表記）
   ------------------------------------------------------------
   仮ページ（_preview-herunia）で検証中のLP型構成用。
   記事型ページ（腰痛など）はこれらのクラスを使わないので影響を受けない。

   .oh-hero  … タイトル直下のファーストビュー。h2と同じ「薄い面＋下の
               オレンジ線」の全幅にして、面の文法（帯＝区切り）を増やさない。
   .oh-check … お悩みチェックリスト。「当てはまるか確かめながら読む」
               リストなので、通常リストの塗り丸とマーカーを分ける。
               ○×は使わない（7節と同じ理由）。
   ------------------------------------------------------------ */
.page-template-symptom-article .entry-content > .oh-hero{
  margin-top:0;
  margin-bottom:1.8em;
  margin-left:calc(var(--oh-pad) - var(--oh-bleed));
  margin-right:calc(var(--oh-pad) - var(--oh-bleed));
  padding:1.15em var(--oh-bleed) 1.05em;
  background:var(--oh-soft);
  border:none;
  border-bottom:2px solid var(--oh-accent);
  border-radius:0;
}
.page-template-symptom-article .entry-content .oh-hero-catch{
  margin:0 0 .45em;
  font-size:clamp(19px, 5.4vw, 23px);
  font-weight:700;
  line-height:1.5;
  color:var(--oh-text);
}
.page-template-symptom-article .entry-content .oh-hero-sub{
  margin:0 0 .75em;
  font-size:clamp(15px, 4.2vw, 17px);
  line-height:1.8;
  color:var(--oh-text);
}
.page-template-symptom-article .entry-content .oh-hero-badges{
  margin:0;
  font-size:clamp(11.5px, 3.2vw, 13px);
  line-height:1.7;
  color:var(--oh-text-sub);
}

/* お悩みチェック。**ul に wp-block-list クラスを付けていない**ため、
   7節の通常リストの指定はここには当たらない。テーマ既定の
   `.entry-content ul > li{list-style-type:disc}` だけが残るので、
   li への直接指定で消す（7節・9節と同じ罠）。 */
.page-template-symptom-article .entry-content > ul.oh-check{
  margin:0 var(--oh-pad) 1.2em;
  padding:0;
  background:none;
  border:none;
  list-style:none;
}
.page-template-symptom-article .entry-content > ul.oh-check > li{
  position:relative;
  margin:.55em 0;
  padding-left:1.6em;
  line-height:1.8;
  list-style-type:none;
}
.page-template-symptom-article .entry-content > ul.oh-check > li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--oh-accent);
  font-weight:700;
}

/* クチコミの店舗表記（.review_v1_attr）。見出しが店舗名を名乗らないページで、
   どの店へのクチコミかを1件ずつ明示する（事実表示）。注記の1行上・右揃え。 */
.page-template-symptom-article .entry-content .review_v1_attr{
  margin:0 0 .15em;
  text-align:right;
  font-size:clamp(10px, 2.9vw, 12px);
  line-height:1.5;
  color:#6E6C66;
}