@charset "UTF-8";
/* ============================================================
   L'Aube HP 分割リニューアル｜追加スタイル
   split.css ／ 2026-07-30 作成（Phantom）

   方針：
   - 本番の assets/css/style.css は1行も書き換えない（現行トップページと共用中のため）
   - 読み込み順は style.css → split.css。ここでの上書きが後勝ちになる
   - 追加したのは「グローバルナビ（8項目化）」「ページ見出し帯」「入口カード」
     「テキストボタン」「パンくず」「準備中ページ」の6ブロックのみ
   ============================================================ */

/* フッターナビも8項目に増えるため、PCで1段に収める */
@media screen and (min-width: 56.0625em) {
  .c-footer > .c-container .c-footer-nav li a {
    padding: 0 0.75em;
    font-size: 1.5rem;
  }
}

/* ------------------------------------------------------------
   3. ページ見出し帯（下層ページの先頭）
   画像ではなくHTMLテキストで組む＝SEOと保守性のため
   ------------------------------------------------------------ */
.p-pagehead {
  margin-top: 92px;
  padding: 30px 0;
  background-color: #ebf4ff;
  border-bottom: 3px solid #aab8da;
}

@media screen and (max-width: 56em) {
  .p-pagehead {
    margin-top: 12vw;
  }
}

@media screen and (max-width: 600px) {
  .p-pagehead {
    margin-top: 15vw;
    padding: 22px 0;
  }
}

.p-pagehead__title {
  color: #115190;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1.4;
}

@media screen and (max-width: 600px) {
  .p-pagehead__title {
    font-size: 2.3rem;
  }
}

.p-pagehead__lead {
  margin-top: 12px;
  color: #333;
  font-size: 1.5rem;
  line-height: 1.9;
}

@media screen and (max-width: 600px) {
  .p-pagehead__lead {
    font-size: 1.4rem;
  }
}

/* パンくず */
.c-breadcrumb {
  margin-bottom: 10px;
  font-size: 1.2rem;
  color: #555;
}

.c-breadcrumb ol {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.c-breadcrumb li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c-breadcrumb li:not(:last-child)::after {
  content: "›";
  padding: 0 0.5em;
  color: #aab8da;
}

.c-breadcrumb a {
  display: inline;
  color: #115190;
  text-decoration: underline;
}

/* ------------------------------------------------------------
   4. 入口カード（トップページ下部）
   ------------------------------------------------------------ */
.p-guide {
  padding: 50px 0 30px;
}

.p-guide__title {
  color: #115190;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
}

@media screen and (max-width: 600px) {
  .p-guide__title {
    font-size: 2rem;
  }
}

.p-guide__lead {
  margin: 10px auto 26px;
  font-size: 1.4rem;
  line-height: 1.9;
  text-align: center;
}

.p-guide__list {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  gap: 16px;
}

@media screen and (max-width: 1000px) {
  .p-guide__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 600px) {
  .p-guide__list {
    grid-template-columns: 1fr;
    grid-gap: 12px;
    gap: 12px;
  }
}

.p-guide__item a {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  padding: 18px 16px;
  background-color: #fff;
  border: 1px solid #aab8da;
  border-radius: 6px;
}

.p-guide__item a:hover {
  background-color: #ebf4ff;
  opacity: 1;
}

.p-guide__item .name {
  color: #115190;
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.5;
}

.p-guide__item .desc {
  margin-top: 10px;
  color: #333;
  font-size: 1.3rem;
  line-height: 1.8;
}

.p-guide__item .more {
  margin-top: 12px;
  color: #115190;
  font-size: 1.2rem;
}

.p-guide__item .tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  background-color: #aab8da;
  border-radius: 3px;
  color: #fff;
  font-size: 1.1rem;
  font-weight: normal;
  vertical-align: middle;
}

/* ------------------------------------------------------------
   5. テキストボタン（ページ間の送客用）
   ------------------------------------------------------------ */
.c-textbtn {
  margin: 30px auto 10px;
  max-width: 440px;
}

.c-textbtn a {
  padding: 16px 10px;
  background-color: #115190;
  border-radius: 4px;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
}

.c-textbtn--ghost a {
  background-color: #fff;
  border: 2px solid #115190;
  color: #115190;
}

/* 節の見出し（テキスト） */
.c-sect-title {
  margin-bottom: 20px;
  padding-left: 12px;
  border-left: 5px solid #115190;
  color: #115190;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.5;
}

@media screen and (max-width: 600px) {
  .c-sect-title {
    font-size: 1.9rem;
  }
}

.c-note {
  margin-top: 16px;
  font-size: 1.3rem;
  line-height: 1.9;
  color: #333;
}

/* ------------------------------------------------------------
   6. 準備中ページ
   ------------------------------------------------------------ */
.p-prep {
  padding: 60px 0 80px;
  text-align: center;
}

.p-prep__body {
  font-size: 1.6rem;
  line-height: 2;
}

.p-prep__body p + p {
  margin-top: 1em;
}

/* ------------------------------------------------------------
   お客様の声ページ（2026-08-31）
   現行から切り出したブロックが上余白を持っていないため、
   ページ見出しのリード文に見出し画像が食い込んでいた。その分を空ける
   ------------------------------------------------------------ */
.voice-p .p-pagehead {
  padding-bottom: 2.4em;
}
.voice-p .p-pagehead + * {
  margin-top: 2.4em;
}

/* --- (6) スクールページの「このページの内容」 --------------------
   ヘッダーには「スクール」としか出ないが、下にライセンス保持者リストが続くため */
.pagenav {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  list-style: none; margin: 0 auto 8px; padding: 0; max-width: 860px;
}
.pagenav li { min-width: 0; }
.pagenav a {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 24px;
  background: #ebf4ff; border: 1px solid #aab8da; border-radius: 10px;
  color: #115190; font-size: 16px; font-weight: 700; text-decoration: none; line-height: 1.5;
  transition: background-color .15s ease, color .15s ease;
}
.pagenav a:hover { background: #115190; color: #ffffff; }

@media screen and (max-width: 56em) {
  /* スマホは2つの枠を「中央寄せで上下に」並べる（2026-09-10 ゆうじさん実機確認＝Safariで右下へずれていた）
     flex＋list-item の組み合わせはSafariで幅の解決が揺れるため、gridの1列に切り替えて幅を明示する */
  .pagenav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: center; padding: 0 16px; }
  .pagenav li { display: block; width: 100%; max-width: 420px; margin: 0; padding: 0; }
  .pagenav a { width: 100%; box-sizing: border-box; font-size: 15px; text-align: center; }
}

/* ============================================================
   表示速度改善（2026-09-10）
   Font Awesome（CSS 55KB＋フォント3本 約180KB・描画ブロック）をやめ、
   使っていた8種のアイコンを自前のSVGに置き換えた。<i> と同じ場所に同じ大きさで出す */
.svg-i { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; }
.c-footer-nav-tb .svg-i { display: block; margin: 0 auto 2px; width: 1.2em; height: 1.2em; }

/* ヘッダー（帯・ナビ・電話/LINE・本文の上余白）は header.css が全部持つ（2026-09-11）。ここには書かない */

/* ==================================================================
   2026-09-13 追加分
   (1) フッターのSNSアイコン  (2) Googleのクチコミ
   (3) 手書きアンケートの小見出し  (4) 初めての方へ のFAQ
   ================================================================== */

/* --- (1) フッターのSNS（全9ページ共通） --- */
.c-footer-sns{
  list-style:none; margin:22px 0 0; padding:0;
  display:flex; justify-content:center; gap:18px;
}
.c-footer-sns a{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff;
  transition:background .2s ease, transform .2s ease;
}
.c-footer-sns a:hover{ background:rgba(255,255,255,.3); transform:translateY(-2px); }
.c-footer-sns svg{ width:22px; height:22px; display:block; }

/* --- (2) Googleのクチコミ --- */
.gr-sec{ padding:38px 0 34px; }
/* 🔴 2026-09-13 の修正。base.css の .p-voice2 は margin-top:-80px（1000px以下は -8.16327%）で、
   その上の帯の下へもぐり込む前提で作られている。お客様の声のページでは、この負のマージンが
   Googleのクチコミの節を食ってしまい、「あなたと同じ悩みを…」の画像とクチコミのカードが重なっていた。
   直前に .gr-sec が来たときだけ打ち消す（他のページの .p-voice2 には触れない）。 */
.gr-sec + .p-voice2{ margin-top:0; }
@media screen and (max-width:1000px){ .gr-sec + .p-voice2{ margin-top:0; } }
.gr-sec__inner{ width:min(1000px, calc(100% - 40px)); margin:0 auto; }
.gr-sec__ttl{
  font-size:22px; font-weight:700; text-align:center;
  color:#115190; margin:0 0 18px; letter-spacing:.04em;
}
.gr-score{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px 18px; padding:16px 18px; margin:0 0 22px;
  background:#fff; border:1px solid #e2e6ea; border-radius:10px;
}
.gr-score__num{ margin:0; line-height:1; white-space:nowrap; }
.gr-score__num b{ font-size:38px; color:#115190; font-weight:700; }
.gr-score__num span{ font-size:15px; color:#6b7680; margin-left:2px; }
.gr-score__txt{ margin:0; font-size:14px; color:#435b5b; line-height:1.7; }
.gr-score__txt b{ color:#115190; }
.gr-score__link{
  margin-left:auto; font-size:14px; color:#115190; text-decoration:underline;
  white-space:nowrap;
}
.gr-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.gr-card{
  margin:0; padding:18px 18px 16px; background:#fff;
  border:1px solid #e2e6ea; border-radius:10px;
  display:flex; flex-direction:column;
}
.gr-card__stars{ line-height:0; margin-bottom:10px; }
/* 🔴 2026-09-13 菅井さんのご指摘。スマホで★が口コミ本文より先に目に入っていた。
   17px → 13px（本文は14.5px）。星が本文より小さくなり、視線が本文へ先に行く。
   12px まで下げると5つの星の見分けがつきにくくなるため13pxで止めている。 */
.gr-card__stars svg{ width:13px; height:13px; color:#f5a623; display:inline-block; }
.gr-card blockquote{ margin:0; flex:1; }
.gr-card blockquote p{
  margin:0; font-size:14.5px; line-height:1.95; color:#3b4a4a;
  text-align:left;
}
.gr-card figcaption{
  margin-top:12px; padding-top:10px; border-top:1px solid #eef1f4;
  font-size:13px; color:#6b7680;
}
.gr-note{ margin:14px 0 0; font-size:12.5px; color:#7b858c; text-align:center; }

@media (max-width:900px){
  .gr-list{ grid-template-columns:1fr; }
  .gr-score{ justify-content:flex-start; }
  .gr-score__link{ margin-left:0; width:100%; }
  .gr-sec__ttl{ font-size:19px; }
}

/* --- (3) 手書きアンケートの小見出し（トップ） --- */
.voices__ttl{
  margin:34px 0 4px; text-align:center; font-size:18px; font-weight:700; color:#115190;
}
.voices__lead{ margin:0 0 16px; text-align:center; font-size:14px; color:#566565; }
.voices__more{ margin:18px 0 0; text-align:center; font-size:15px; }
.voices__more a{ color:#115190; text-decoration:underline; }

/* --- (4) 初めての方へ のFAQ --- */
.hj-faq{ max-width:760px; margin:0 auto; }
.hj-faq details{
  background:#fff; border:1px solid #e2e6ea; border-radius:8px;
  margin-bottom:10px; overflow:hidden;
}
.hj-faq summary{
  cursor:pointer; list-style:none; padding:15px 44px 15px 18px; position:relative;
  font-size:15.5px; font-weight:700; color:#115190; line-height:1.6;
}
.hj-faq summary::-webkit-details-marker{ display:none; }
.hj-faq summary::after{
  content:""; position:absolute; right:18px; top:50%;
  width:9px; height:9px; margin-top:-6px;
  border-right:2px solid #115190; border-bottom:2px solid #115190;
  transform:rotate(45deg); transition:transform .2s ease;
}
.hj-faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.hj-faq details p{
  margin:0; padding:0 18px 17px; font-size:14.5px; line-height:1.95; color:#3b4a4a;
}