@charset "UTF-8";
/*
 * clover-llmo / assets/choose.css — 固定ページ /choose/ の版面
 *
 * ■ なぜプラグイン側に置くのか
 *   テーマ clover_themes は保守会社（ソライル様）の資産で、FTP の許可範囲も
 *   plugins/clover-llmo/ と review/index.html の 2 つだけ。テーマの CSS は触れない。
 *
 * ■ 何を再現しているのか（すべて 2026-09-14 に本番同等の staging で実測した値）
 *   このサイトには長文用の設計が既に在る（ブログ記事 .blog-article-body）。
 *   固定ページの simple テンプレートはそれを 1 つも受け取らないので、
 *   同じ設計値をこのページだけに写す。新しい意匠は足さない。
 *     .blog-article-body p  { font-size:1.8rem; margin:2em 0 }
 *     .blog-article-body h2 { font-size:2.4rem; background:#F1F8EB; padding:.2em .8em; margin:4rem 0 2rem }
 *     .blog-article-body h3 { font-size:2rem; border-left:5px solid #5BB78F; border-bottom:1px solid #5BB78F }
 *     本文カラム幅 759px / ブランド緑 #5BB78F / 文字色 #42210B
 *   🔴 html { font-size:10px } なので 1rem = 10px。
 *
 * ■ ロールバック
 *   このファイルを消す（または includes/choose-style.php を消す）と、
 *   ページは素の simple テンプレートに戻る。DB には何も書いていない。
 */

.cchoose {
  max-width: 76rem;
  margin: 0 auto;
  padding: 1rem 0 6rem;
  color: #42210B;
}

/* --- 見出し（扉） --------------------------------------------------- */
.cchoose__head {
  margin: 0 0 3.2rem;
  padding: 0 0 2.4rem;
  border-bottom: 1px solid #DCEBE2;
}
.cchoose__head h1 {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.55;
  margin: 0 0 .5em;
}
/* 🔴 .cchoose p (0,1,1) に負けないよう詳細度を上げる（2026-09-14 に実測して判明）。
   単一クラスで書くと本文の margin:2em がそのまま乗り、余白が倍になる。 */
.cchoose p.cchoose__lead {
  font-size: 1.8rem;
  line-height: 1.9;
  margin: 0;
}
/* ⚠️ かつてここに `.cchoose__head + p { margin-top: 0 }` を置いていたが、
   `.cchoose p`（同じ 0,1,1）に後出しで負けて 1 度も効いていなかった（2026-09-14 実測 36px）。
   扉直後の段落は下の .cchoose__byline（0,2,1）で受ける。 */
.cchoose p.cchoose__byline {
  font-size: 1.4rem;
  line-height: 1.8;
  margin: 0;
  color: #6B5B4E;
}

/* 折れてよい位置を文節で決める（中身は不可分） */
.cph { display: inline-block; }

/* --- 目次 ----------------------------------------------------------- */
.cchoose__toc {
  margin: 0 0 4rem;
  padding: 2.4rem 2.8rem;
  background: #F1F8EB;
}
.cchoose p.cchoose__toc-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.8;
  margin: 0 0 1.2em;
}
.cchoose__toc ol {
  counter-reset: cchoose-toc;
  margin: 0;
}
.cchoose__toc li {
  counter-increment: cchoose-toc;
  font-size: 1.5rem;
  line-height: 1.8;
  margin: 0 0 .7em;
  padding-left: 2.6em;
  text-indent: -2.6em;
}
.cchoose__toc li:last-child { margin-bottom: 0; }
.cchoose__toc li::before {
  content: "Q" counter(cchoose-toc);
  display: inline-block;
  width: 2.2em;
  text-indent: 0;
  font-weight: 700;
  color: #2E7D5C;   /* 淡緑地 4.61:1（旧 #5BB78F は 2.30:1 で不合格） */
}
.cchoose__toc a { color: #42210B; text-decoration: none; border-bottom: 1px solid #BFDECC; }
.cchoose__toc a:hover { color: #27694C; }

/* --- 本文 ----------------------------------------------------------- */
.cchoose p {
  font-size: 1.8rem;
  line-height: 1.9;
  margin: 2em 0;
}
/* 🔴 テーマに `.simple h2 { font-size: 1.25em }`（style.css:20-22）が在り、詳細度が同点。
   いまは読み込み順（header.php が <link> を wp_head() より前に直書き）で勝っているだけなので、
   下に詳細度で確定させる規則を併記する。両方残すのは、どちらの前提が崩れても落ちないため。 */
.cchoose h2 {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.6;
  background-color: #F1F8EB;
  padding: .4em .8em;
  margin: 4rem 0 2rem;
}
.cchoose h3 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.7;
  border-left: 5px solid #5BB78F;
  border-bottom: 1px solid #5BB78F;
  padding: 0 .8em;
  margin: 4rem 0 1.6rem;
}
/* 質問の直後に置く「一行の答え」 */
.cchoose p.cchoose__answer {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.8;
  margin: 0 0 1.4em;
}
.cchoose section > p:first-of-type.cchoose__answer { margin-top: 0; }

.cchoose ul {
  margin: 2em 0;
}
.cchoose ul li {
  font-size: 1.8rem;
  line-height: 1.9;
  margin: 0 0 .8em;
  padding-left: 1.5em;
  position: relative;
}
.cchoose ul li:last-child { margin-bottom: 0; }
.cchoose ul li::before {
  content: "";
  position: absolute;
  left: .2em;
  top: .72em;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: #5BB78F;
}
.cchoose a { color: #2E7D5C; text-decoration: underline; }   /* 白地 5.00:1 / 淡緑地 4.61:1 */
.cchoose a:hover { color: #27694C; }

/* --- 「では、クローバーは」の節 ------------------------------------- */
.cchoose section.cchoose__us p { margin: 1.2em 0 2em; }

/* --- 相談の導線 ----------------------------------------------------- */
.cchoose__cta {
  margin: 4rem 0 0;
  padding: 3.2rem;
  background: #F1F8EB;
}
.cchoose .cchoose__cta p.cchoose__cta-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.7;
  margin: 0 0 .8em;
}
.cchoose .cchoose__cta p { font-size: 1.6rem; line-height: 1.9; margin: 0 0 1.4em; }
.cchoose .cchoose__cta p:last-child { margin-bottom: 0; }
.cchoose__cta-tel {
  margin: 0 0 .2em !important;
}
.cchoose__cta-tel a {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: #2E7D5C;
  text-decoration: none;
  letter-spacing: .02em;
}
.cchoose__cta-note { font-size: 1.4rem !important; color: #6B5B4E; margin: 0 0 2em !important; }
.cchoose__btn {
  display: inline-block;
  background: #2E7D5C;   /* 白文字 5.00:1（旧 #5BB78F は 2.44:1 で不合格） */
  color: #fff !important;
  text-decoration: none !important;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6;
  padding: .9em 2.4em;
  border-radius: 5px;
}
.cchoose__btn:hover { background: #27694C; color: #fff !important; }   /* 6.54:1 */

/* --- 関連記事 ------------------------------------------------------- */
.cchoose__related {
  margin: 3.2rem 0 0;
  padding: 2.4rem 0 0;
  border-top: 1px solid #DCEBE2;
}
.cchoose p.cchoose__related-title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.8;
  margin: 0 0 1em;
}
.cchoose__related li { font-size: 1.6rem; line-height: 1.8; margin: 0 0 .7em; }
.cchoose__related li::before { top: .6em; }

/* --- スマートフォン（サイト本体の SP 値に合わせる） ------------------ */
@media screen and (max-width: 767px) {
  .cchoose { padding: 0 0 4rem; }
  .cchoose__head { margin-bottom: 3rem; padding-bottom: 2rem; }
  /* 360px 端末で溢れないところまで落とす（15 文字 x 2.1rem = 315px < 360px） */
  .cchoose__head h1 { font-size: 2.1rem; }
  .cchoose p.cchoose__lead { font-size: 1.7rem; }
  .cchoose p { font-size: 1.7rem; }
  .cchoose ul li { font-size: 1.7rem; }
  .cchoose h2 { font-size: 1.8rem; margin: 4.5rem 0 1.6rem; }
  .cchoose h3 { font-size: 1.6rem; border-left-width: 4px; }
  .cchoose p.cchoose__answer { font-size: 1.7rem; }
  .cchoose__toc { padding: 2rem; margin-bottom: 3.5rem; }
  .cchoose__cta { padding: 2.4rem 2rem 2.8rem; }
  .cchoose__cta-tel a { font-size: 2.8rem; }
  .cchoose__btn { display: block; text-align: center; padding: 1em; }
}

/* 🔴 テーマは style.css で `section { padding: 6em 0 }` を全称で当てている（2026-09-14 実測）。
   本文に <section> を使うと 1 節ごとに上下 96px が積まれ、
   「節の最後の文 → 次の見出し」が 288px（96 + 96 + 見出しの上余白）になる。
   節の間隔は h2 の margin だけで作るので、ここで打ち消す。 */
.cchoose section { padding: 0; margin: 0; }

.inner_page .cchoose h2 { font-size: 2.4rem; }
@media screen and (max-width: 767px) { .inner_page .cchoose h2 { font-size: 1.8rem; } }

/* 目次から飛んだときに固定ヘッダーへ潜らせない */
.cchoose section { scroll-margin-top: 12rem; }
@media screen and (max-width: 767px) { .cchoose section { scroll-margin-top: 8rem; } }

/* --- ヘッダー最上部の細帯（このページだけ） --------------------------
 * 症状（2026-09-14 実測）: 本ページだけ帯が 2 行になり
 *   「大分ヘルパーステーション訪問介 / 護のみかた」と語中で折れていた。
 * 原因: 帯はテーマが the_title() から組み立て、幅は 552px で固定。
 *   ヘッダー内側 1104px = 帯 552 + ナビ 399 + エントリー 140 で横の余地はゼロ。
 *   他ページは帯 38〜41 文字で 1 行（/aboutus/ 38 / /privacy/ 41）。本ページは 55 文字。
 * 直し方の選択（テーマは保守会社の資産なので触れない）:
 *   ①タイトルを 8 文字まで削る → <title> と llms.txt が使うので不可
 *   ②14px のまま 1 行 → 756px 必要で不可能
 *   ③採用: テーマ自身が SP で隠している社名の接尾辞を PC でも隠し（756→619px）、
 *      14px→12px（619→531px < 552px）。行の高さは他ページと同じ 25.2px に固定して
 *      ヘッダー全体の高さを揃える。
 * 幅が足りない時は折り返さず「…」で切る（2 行に戻さない）。
 */
@media screen and (min-width: 768px) {
  .header_L .header_h1,
  .header_h1 {
    font-size: 1.2rem;
    line-height: 2.52rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header_h1 .sp_hidden { display: none; }
}