/*
 * スマホチェック記事デザインCSS（Phase 4）
 * 対象: 本自動化システムで生成した記事（_sc_article_id を持つ投稿）のみ。
 * smartphone-check-automation-bridge.php から、該当記事の表示時のみ読み込まれる。
 * 既存テーマ・他プラグインの表示に影響しないよう、すべてのセレクタを
 * .sc-article 配下に限定している。
 */

/* ==============================
   基本本文
   ============================== */

.sc-article {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.sc-article-body {
  font-size: 17px;
  line-height: 1.9;
  color: #222222;
  word-break: break-word;
  overflow-wrap: break-word;
  /* v25: 記事内の要素（表・埋め込み等）が原因で本文全体に不要な横スクロールが
     発生しないようにする安全策。横スクロールが必要な要素（表）は
     .sc-table-scroll / .sc-table-wrap 側で個別に overflow-x: auto を設定する。 */
  overflow-x: hidden;
}

.sc-article-body p {
  margin: 0 0 1.6em;
}

.sc-article-body a {
  color: #1a73c7;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sc-article-body img {
  max-width: 100%;
  height: auto;
}

/* ==============================
   h2見出し（主要見出し）
   ============================== */

.sc-article-body h2 {
  margin: 2.6em 0 1.1em;
  padding: 0.7em 0.9em;
  font-size: 1.28em;
  line-height: 1.5;
  font-weight: 700;
  color: #163a5f;
  background: #eef4fb;
  border-left: 5px solid #2f6fb3;
  border-radius: 4px;
}

.sc-article-body h2:first-child {
  margin-top: 0;
}

/* ==============================
   h3見出し（サブ見出し。h2より控えめ）
   ============================== */

.sc-article-body h3 {
  margin: 2em 0 0.8em;
  padding-bottom: 0.35em;
  font-size: 1.1em;
  font-weight: 700;
  color: #1f4a73;
  border-bottom: 2px solid #cfe0f0;
}

.sc-article-body h3::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.5em;
  background: #2f6fb3;
  border-radius: 50%;
  vertical-align: middle;
}

/* ==============================
   ul / ol / li
   ============================== */

.sc-article-body ul,
.sc-article-body ol {
  margin: 0 0 1.6em;
  padding-left: 1.6em;
}

.sc-article-body li {
  margin-bottom: 0.55em;
  line-height: 1.8;
}

.sc-article-body ul > li {
  list-style: disc;
}

/* ==============================
   table（スマホで横スクロール対応。v25でスマホ最優先レイアウトへ強化）

   .sc-table-scroll: v25でthe_contentフィルタ（PHP側、優先度22）がtableを自動で
   ラップするクラス。本文中に .sc-table-scroll が既に含まれる場合はPHP側で
   二重ラップしない（55項参照）。
   .sc-table-wrap: Phase 4で先行用意した、Claudeの生成HTMLが将来このクラスを
   直接出力した場合のための予備クラス（現状Claudeは出力していない。53項参照）。
   どちらでラップされても同じスタイルが適用されるよう、両クラスへ同じ
   ルールを指定している。

   本文全体（.sc-article-body）はoverflow-x: hiddenとし、表など横幅が必要な
   要素だけ、この2クラスの中でoverflow-x: autoにより個別に横スクロールできる
   ようにする。
   ============================== */

.sc-article-body .sc-table-scroll,
.sc-article-body .sc-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.8em;
  border: 1px solid #dfe3e8;
  border-radius: 4px;
}

.sc-article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
  line-height: 1.6;
  /* セル内の文字が極端に縦長にならないよう、表自体の最小幅を確保する
     （スマホ幅では.sc-table-scroll/.sc-table-wrap側の横スクロールで対応する）。 */
  min-width: 480px;
}

.sc-article-body th,
.sc-article-body td {
  padding: 0.7em 0.9em;
  border: 1px solid #e2e6ea;
  text-align: left;
  vertical-align: top;
}

.sc-article-body th {
  background: #eaf2fb;
  color: #163a5f;
  font-weight: 700;
  white-space: nowrap;
}

.sc-article-body tr:nth-child(even) td {
  background: #fafbfc;
}

/* ==============================
   この記事でわかることボックス
   ============================== */

.sc-summary-box {
  margin: 1.6em 0 2.2em;
  padding: 1.2em 1.4em;
  background: #f7fafd;
  border: 1px solid #d5e3f0;
  border-radius: 6px;
}

.sc-summary-box .sc-box-title,
.sc-summary-box strong:first-child {
  display: block;
  margin-bottom: 0.6em;
  font-size: 1.02em;
  font-weight: 700;
  color: #163a5f;
}

.sc-summary-box ul {
  margin: 0;
  padding-left: 1.4em;
}

.sc-summary-box li {
  margin-bottom: 0.4em;
  line-height: 1.7;
}

/* ==============================
   ポイントボックス（判断基準・確認ポイント）
   ============================== */

.sc-point-box {
  margin: 1.8em 0;
  padding: 1.2em 1.4em;
  background: #f4faf6;
  border: 1px solid #cfe6d8;
  border-left: 5px solid #3f9c63;
  border-radius: 4px;
}

.sc-point-box .sc-box-title,
.sc-point-box strong:first-child {
  display: block;
  margin-bottom: 0.5em;
  font-weight: 700;
  color: #256242;
}

/* ==============================
   注意ボックス（煽り感を抑えた注意喚起デザイン）
   ============================== */

.sc-caution-box {
  margin: 1.8em 0;
  padding: 1.2em 1.4em;
  background: #fbf5f2;
  border: 1px solid #ecd9cd;
  border-left: 5px solid #c98a5e;
  border-radius: 4px;
}

.sc-caution-box .sc-box-title,
.sc-caution-box strong:first-child {
  display: block;
  margin-bottom: 0.5em;
  font-weight: 700;
  color: #8a4b26;
}

/* ==============================
   StyleMart相談CTAボックス
   ============================== */

.sc-cta-box {
  margin: 2.4em 0 1em;
  padding: 1.4em 1.5em;
  background: #f2f7fc;
  border: 1px solid #cfe0f0;
  border-radius: 8px;
  text-align: left;
}

.sc-cta-box strong:first-child {
  display: block;
  margin-bottom: 0.5em;
  font-size: 1.08em;
  color: #163a5f;
}

.sc-cta-box p {
  margin: 0 0 0.6em;
  line-height: 1.8;
}

.sc-cta-box p:last-child {
  margin-bottom: 0;
}

/* 将来追加予定のリンク群（店舗一覧・LINE相談・電話・修理カテゴリ）用のスタイル。
   現時点ではリンク未設定でも崩れないよう、あらかじめ用意しておく。 */
.sc-cta-box .sc-cta-links {
  margin-top: 0.9em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}

.sc-cta-box .sc-cta-links a {
  display: inline-block;
  padding: 0.55em 1.1em;
  background: #2f6fb3;
  color: #ffffff;
  border-radius: 999px;
  font-size: 0.92em;
  font-weight: 700;
  text-decoration: none;
}

.sc-cta-box .sc-cta-links a:hover {
  background: #23578f;
}

/* ==============================
   端末販売・機種変更CTAボックス（v19）
   中古iPhone購入検討・修理か買い替え判断・バッテリー交換セット割の3種。
   .sc-cta-box と同じトーン・レイアウトを踏襲しつつ、端末販売・買い替え判断系として
   ややアクセントを効かせている。本文を邪魔しない範囲での強調にとどめ、
   1カラム表示・スマホ表示で崩れないようにしている。
   ============================== */

.sc-used-phone-cta,
.sc-replace-or-repair-cta,
.sc-battery-set-cta {
  margin: 2.4em 0 1em;
  padding: 1.4em 1.5em;
  border-radius: 8px;
  text-align: left;
}

.sc-used-phone-cta strong:first-child,
.sc-replace-or-repair-cta strong:first-child,
.sc-battery-set-cta strong:first-child {
  display: block;
  margin-bottom: 0.5em;
  font-size: 1.08em;
}

.sc-used-phone-cta p,
.sc-replace-or-repair-cta p,
.sc-battery-set-cta p {
  margin: 0 0 0.6em;
  line-height: 1.8;
}

.sc-used-phone-cta p:last-child,
.sc-replace-or-repair-cta p:last-child,
.sc-battery-set-cta p:last-child {
  margin-bottom: 0;
}

/* 中古iPhone購入検討CTA（メイン想定）: グリーン系アクセント */
.sc-used-phone-cta {
  background: #f2faf5;
  border: 1px solid #bfe3cc;
  border-left: 6px solid #2e9e5b;
}

.sc-used-phone-cta strong:first-child {
  color: #1f6b3d;
}

/* 修理か買い替え判断CTA（メイン想定）: オレンジ系アクセント */
.sc-replace-or-repair-cta {
  background: #fdf7ef;
  border: 1px solid #ecdcc0;
  border-left: 6px solid #d99a3c;
}

.sc-replace-or-repair-cta strong:first-child {
  color: #8a5a17;
}

/* バッテリー交換セット割CTA（補足枠想定）: 主張しすぎないグレー系アクセント。
   メインCTAの直後に続けて表示される想定のため、上マージンを詰めている。 */
.sc-battery-set-cta {
  margin-top: 1em;
  background: #f7f7f9;
  border: 1px solid #dcdce2;
  border-left: 6px solid #7c7c96;
}

.sc-battery-set-cta strong:first-child {
  color: #46465a;
}

/* ==============================
   モバイル表示対応（v25: スマホ表示での読みやすさを最優先するレイアウトへ強化。
   本文幅・余白・行間・文字サイズ・見出し間隔・箇条書きの余白・CTAブロックの
   余白のすべてを、スマホ幅で詰まって見えないよう個別に調整している）
   ============================== */

@media (max-width: 600px) {
  .sc-article {
    padding: 0 14px;
  }

  .sc-article-body {
    font-size: 16px;
    line-height: 1.8;
  }

  .sc-article-body p {
    margin: 0 0 1.4em;
  }

  .sc-article-body h2 {
    font-size: 1.12em;
    padding: 0.6em 0.75em;
    margin: 1.8em 0 0.85em;
    line-height: 1.5;
  }

  .sc-article-body h2:first-child {
    margin-top: 0;
  }

  .sc-article-body h3 {
    font-size: 1.02em;
    margin: 1.6em 0 0.7em;
  }

  .sc-article-body ul,
  .sc-article-body ol {
    margin: 0 0 1.4em;
    padding-left: 1.3em;
  }

  .sc-article-body li {
    margin-bottom: 0.5em;
    line-height: 1.75;
  }

  .sc-summary-box,
  .sc-point-box,
  .sc-caution-box,
  .sc-cta-box,
  .sc-used-phone-cta,
  .sc-replace-or-repair-cta,
  .sc-battery-set-cta {
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding: 1em 1.1em;
  }

  .sc-cta-box p,
  .sc-used-phone-cta p,
  .sc-replace-or-repair-cta p,
  .sc-battery-set-cta p {
    line-height: 1.75;
  }

  .sc-cta-box .sc-cta-links a {
    flex: 1 1 auto;
    text-align: center;
  }

  .sc-article-body table {
    font-size: 0.85em;
  }

  .sc-article-body th,
  .sc-article-body td {
    padding: 0.55em 0.7em;
  }
}

/* ==============================
   v21: スマホチェック生成記事の1カラム化・コメント欄非表示
   対象: body.sc-automation-article（smartphone-check-automation-bridge.php の
   body_classフィルタにより、スマホチェック生成記事の表示時のみ付与される）。
   通常投稿・固定ページにはこのbody classが付与されないため、以下のルールは
   一切適用されない。
   GeneratePressテーマ環境の主要セレクタ（.site-content/.content-area/
   .inside-article/.widget-area/.right-sidebar/.is-right-sidebar/#right-sidebar/
   #secondary等）を想定しつつ、他テーマでも最低限効くよう汎用セレクタ
   （.sidebar/#comments/.comment-respond等）もあわせて指定している。
   ============================== */

/* コメント欄非表示。
   PHP側のcomments_templateフィルタ（空テンプレート差し替え）が主たる抑制手段だが、
   テーマによっては見出し・枠だけが別途出力される場合があるため、CSSでも
   念のため隠しておく（表示上の二重の安全策）。 */
body.sc-automation-article .comments-area,
body.sc-automation-article #comments,
body.sc-automation-article .comment-respond,
body.sc-automation-article #respond,
body.sc-automation-article .comment-reply-title,
body.sc-automation-article .comment-list,
body.sc-automation-article .comment-form {
  display: none !important;
}

/* 右サイドバー非表示（汎用セレクタ + GeneratePress想定セレクタ）。 */
body.sc-automation-article .sidebar,
body.sc-automation-article #secondary,
body.sc-automation-article .widget-area,
body.sc-automation-article .site-content .sidebar,
body.sc-automation-article #right-sidebar,
body.sc-automation-article .right-sidebar,
body.sc-automation-article .is-right-sidebar,
body.sc-automation-article .inside-right-sidebar {
  display: none !important;
}

/* 本文エリアを1カラム幅へ拡張（汎用セレクタ + GeneratePress想定セレクタ）。
   PC表示で本文が狭くなりすぎないよう、max-widthは960pxとしている
   （記事本文自体は.sc-articleがさらに720pxへ内側で絞るため、読みやすさは
   維持される）。 */
body.sc-automation-article .content-area,
body.sc-automation-article #primary,
body.sc-automation-article .site-main,
body.sc-automation-article .site-content,
body.sc-automation-article .inside-article {
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

/* GeneratePressはグリッド/フレックスでコンテンツ幅を制御している場合があるため、
   サイドバーを非表示にした後も本文列が正しく全幅を使えるよう明示しておく。 */
body.sc-automation-article .site-content {
  display: block;
}

@media (max-width: 600px) {
  body.sc-automation-article .content-area,
  body.sc-automation-article #primary,
  body.sc-automation-article .site-main {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ==============================
   v22: 投稿者名・不要な投稿メタ情報の非表示
   対象: body.sc-automation-article（v21のbody_classフィルタで、スマホチェック
   生成記事の表示時のみ付与される）。通常投稿・固定ページには一切適用されない。

   タイトル直下の「2026年7月16日 by Automatic Smartphone Check」のような投稿者名・
   投稿日表示、および記事下部のカテゴリ・タグ・投稿ナビゲーションを非表示にし、
   自動生成感・WordPress初期テーマ感を抑える。
   GeneratePress環境の主要セレクタ（.entry-meta/.byline/.posted-on/.cat-links/
   .tags-links等）を想定しつつ、他テーマでも最低限効くよう汎用セレクタ
   （.author/.author-name/.entry-footer/.nav-links等）もあわせて指定している。
   ============================== */

/* タイトル下のentry-meta全体（投稿者名・投稿日をまとめて）非表示。
   entry-meta全体を消すため、以下の個別セレクタ（.byline/.posted-on等）の指定は
   主に、entry-meta配下に無い場合や、テーマがentry-meta外に投稿者名・日付を
   直接出力している場合への保険として残している。 */
body.sc-automation-article header.entry-header .entry-meta,
body.sc-automation-article .inside-article .entry-meta,
body.sc-automation-article .entry-meta {
  display: none !important;
}

/* 投稿者名（by Author、投稿者アーカイブへのリンクを含む）を個別に非表示。 */
body.sc-automation-article .byline,
body.sc-automation-article .author,
body.sc-automation-article .author-name,
body.sc-automation-article .entry-meta .byline,
body.sc-automation-article .entry-meta .author,
body.sc-automation-article .entry-meta .url.fn.n,
body.sc-automation-article .posted-by,
body.sc-automation-article .vcard,
body.sc-automation-article .fn {
  display: none !important;
}

/* 投稿日（entry-meta外に単独で出力される場合への保険）を個別に非表示。 */
body.sc-automation-article .posted-on,
body.sc-automation-article .entry-date,
body.sc-automation-article .updated,
body.sc-automation-article .published,
body.sc-automation-article .entry-meta .posted-on,
body.sc-automation-article .entry-meta time {
  display: none !important;
}

/* 記事下部のカテゴリ・タグ・投稿ナビゲーションを非表示。
   将来的に関連記事・中古端末導線を下部に設計する予定のため、WordPress標準の
   カテゴリ・タグ表示・前後の記事リンクは現段階では非表示にする。 */
body.sc-automation-article .cat-links,
body.sc-automation-article .tags-links,
body.sc-automation-article .nav-links,
body.sc-automation-article .post-navigation,
body.sc-automation-article .entry-footer {
  display: none !important;
}