@charset "UTF-8";
/* ==========================================================================
   スマホ専用の共通レイヤー
   ・必ず最後に読み込む（各セクションCSSを上書きするため）
   ・中身はすべて @media (max-width: 900px) の中。PC には一切影響しない
   ・文字と余白の基準をここで1本化する
   ========================================================================== */

/* 画面下の固定バーは PC では出さない */
.sp-bar{ display: none; }
/* スマホだけに出す／隠すための道具 */
.sp-only{ display: none !important; }

@media (max-width: 900px){

  /* ────────────────────────────────────────────────
     0. 基準値（このファイル内で使い回す）
     文字：本文16 / 補足13 / 小見出し19 / 見出し26〜30
     余白：8の倍数（8 / 16 / 24 / 32 / 40）
     ──────────────────────────────────────────────── */
  :root{
    --sp-fs-body: 16px;
    --sp-fs-sub:  13px;
    --sp-fs-lead: 19px;
    --sp-fs-head: clamp(24px, 6.4vw, 30px);
    --sp-gap-s: 8px;
    --sp-gap-m: 16px;
    --sp-gap-l: 24px;
    --sp-gap-xl: 32px;
    --sp-pad: 5vw;          /* 左右の余白 */
    --sp-radius: 14px;
    --sp-line: #E7E9EE;
    --sp-card: #FDFDFD;
  }

  .sp-only{ display: block !important; }
  .sp-hide{ display: none !important; }

  /* 固定バーぶんの余白を確保して、フッターが隠れないようにする */
  body{ padding-bottom: 76px; }

  /* ────────────────────────────────────────────────
     1. 画面下の固定バー（LINE ／ フォーム）
     ──────────────────────────────────────────────── */
  .sp-bar{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    box-shadow: 0 -2px 14px rgba(10,23,53,.14);
    transition: transform .28s ease, opacity .28s ease;
  }
  /* 相談セクションを見ているときは、同じボタンが2つ出て邪魔なので隠す */
  .sp-bar.is-hidden{ transform: translateY(110%); opacity: 0; pointer-events: none; }

  .sp-bar-btn{
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 52px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;
  }
  .sp-bar-btn.line{ background: #06BA29; color: #fff; }
  .sp-bar-btn.form{ background: #FEBE01; color: #061638; }
  .sp-bar-btn .ic{ width: 24px; height: 24px; flex: none; object-fit: contain; }
  /* LINEのロゴは緑なので、緑地の上では白丸を敷かないと見えない */
  .sp-bar-btn.line .ic{
    width: 26px; height: 26px;
    background: #fff; border-radius: 50%; padding: 3px; box-sizing: border-box;
  }

  /* ────────────────────────────────────────────────
     2. スマホ用のテキスト部品（画像に焼かれていた文字の代わり）
     ──────────────────────────────────────────────── */
  .sp-t{     /* 小見出し */
    margin: 0; font-weight: 800; color: #0A1735;
    font-size: var(--sp-fs-lead); line-height: 1.45; letter-spacing: .01em;
  }
  .sp-d{     /* 説明文 */
    margin: 0; font-weight: 500; color: #1E2443;
    font-size: 14px; line-height: 1.7; letter-spacing: .01em;
  }
  .sp-b{     /* 本文 */
    margin: 0; font-weight: 500; color: #1E2443;
    font-size: var(--sp-fs-body); line-height: 1.75;
  }

  /* ────────────────────────────────────────────────
     3. 共通：セクションの上下余白をそろえる
     ──────────────────────────────────────────────── */
  section.s1, section.s3, section.s4, section.s5,
  section.s7, section.s8, section.s9, section.s10{
    padding-top: 40px !important;
    padding-bottom: 48px !important;
  }

  /* ────────────────────────────────────────────────
     4. 文字サイズの底上げ（11〜12px を無くし、本文を読める大きさに）
     各セクションCSSより後に読むので、ここが最終値になる
     ──────────────────────────────────────────────── */

  /* SECTION 1 お悩み神経衰弱 */
  .s1 .s1-lead{ font-size: 15px; line-height: 1.75; }
  .s1 .s1-hint{ font-size: 13px; }
  .s1 .s1-card-text{ font-size: 13.5px; line-height: 1.45; }
  .s1 .s1-msg{ font-size: 16px; line-height: 1.7; }
  .s1 .s1-score-num b{ font-size: 22px; }

  /* SECTION 3 代表ストーリー */
  .s3 .s3-body{ font-size: 15px; line-height: 1.9; }
  .s3 .s3-quote p{ font-size: 16px; line-height: 1.75; }
  .s3 .s3-step p{ font-size: 14px; line-height: 1.75; }

  /* SECTION 4 Before/After */
  .s4 .s4-tab .t{ font-size: 13px; line-height: 1.55; }
  .s4 .s4-sub{ font-size: 15px; line-height: 1.75; }
  .s4 .s4-list{ font-size: 14.5px; line-height: 1.9; }
  .s4 .s4-note{ font-size: 12.5px; }

  /* SECTION 5 サービス */
  .s5 .s5-body{ font-size: 14.5px; line-height: 1.75; }
  .s5 .s5-low{ font-size: 14px; line-height: 1.7; }
  .s5 .s5-title{ font-size: 20px; line-height: 1.45; }

  /* SECTION 7 4コマ */
  .s7 .s7-pbody{ font-size: 14px; line-height: 1.7; }

  /* SECTION 11 会社概要 */
  .s11 .s11-table td{ font-size: 15px; line-height: 1.8; }
  .s11 .s11-table th{ font-size: 13.5px; }
  /* 経営理念・行動指針は下のカードで大きく見せているので、表からは省いて重複をなくす */
  .s11 .s11-table tr:nth-child(8), .s11 .s11-table tr:nth-child(9){ display: none; }

  /* SECTION 3 引用は、元の改行位置で折り返させる（「す」だけ残るのを防ぐ） */
  .s3 .s3-quote p br{ display: inline !important; }

  /* ────────────────────────────────────────────────
     5. 画像の上限（1枚で画面を占領させない）
     ──────────────────────────────────────────────── */
  .s3 .s3-photo{ width: min(78%, 300px); margin-left: auto; margin-right: auto; }
  /* サービス4枚：1枚560px は長いので、絵と余白を締めて 1枚 420px 程度にする */
  .s5 .s5-cards{ gap: 14px; margin-top: 22px; }
  .s5 .s5-card{ padding: 34px 16px 20px; }
  .s5 .s5-suit{ top: -17px; }
  .s5 .s5-suit img{ height: 24px; }
  .s5 .s5-illust{ width: 58% !important; max-width: 58%; margin: 10px auto 0;
                  margin-left: auto; margin-right: auto; }
  .s5 .s5-c4 .s5-illust{ width: 33% !important; max-width: 33%; margin: 10px 1% 0; }
  .s5 .s5-body{ margin-top: 10px; }
  .s5 .s5-dots{ margin: 10px 0; }
  .s5 .s5-low{ margin-top: 6px; }
  .s5 .s5-pill .pill{ height: 28px; font-size: 15px; }
  .s10-stage img.s10-person{ max-width: 46%; }

  /* ────────────────────────────────────────────────
     6a. 横スライド（共通部品）
     スマホは縦に長く積むより、同じ種類のものは横に送れた方が読みやすい。
     指で払うと1枚ずつ吸い付いて止まる（scroll-snap）。
     ──────────────────────────────────────────────── */
  .sp-swipe{
    display: flex !important;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* 親の左右余白を打ち消して画面端まで使い、その内側で1枚目をそろえる */
    margin-left: calc(var(--sp-pad) * -1);
    margin-right: calc(var(--sp-pad) * -1);
    padding: 4px var(--sp-pad) 10px;
    scroll-padding-left: var(--sp-pad);
  }
  .sp-swipe::-webkit-scrollbar{ display: none; }
  .sp-swipe > *{
    flex: 0 0 var(--sp-slide, 86%);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* 何枚目を見ているかの点 */
  .sp-dots{
    display: flex; justify-content: center; align-items: center; gap: 8px;
    margin: 4px 0 0; padding: 0; list-style: none;
  }
  .sp-dots li{
    width: 7px; height: 7px; border-radius: 50%;
    background: #C9CDD8; transition: width .2s ease, background .2s ease;
  }
  .sp-dots li.is-on{ width: 20px; border-radius: 4px; background: #0A1735; }

  /* 「横に送れる」ことを伝える一言 */
  .sp-hint{
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 10px 0 0; font-size: 12.5px; font-weight: 700;
    color: #5B6274; letter-spacing: .02em;
  }
  .sp-hint::before, .sp-hint::after{
    content: ""; width: 16px; height: 10px; background: #B9BEC9;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
  }
  .sp-hint::after{ clip-path: polygon(0 0, 0 100%, 100% 50%); }

  /* 横スライドを使う箱 */
  .s7-koma, #service .s5-cards, #cases .s8-cards{
    display: flex !important;
    gap: 12px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-left: calc(var(--sp-pad) * -1);
    margin-right: calc(var(--sp-pad) * -1);
    padding: 4px var(--sp-pad) 10px;
    scroll-padding-left: var(--sp-pad);
  }
  .s7-koma::-webkit-scrollbar,
  #service .s5-cards::-webkit-scrollbar,
  #cases .s8-cards::-webkit-scrollbar{ display: none; }
  .s7-koma > *, #service .s5-cards > *, #cases .s8-cards > *{
    flex: 0 0 var(--sp-slide, 86%);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* ────────────────────────────────────────────────
     6b. 画像だけだったボタンを、文字のボタンに置き換える
     ──────────────────────────────────────────────── */
  .s8-cta img, .s9-cta img{ display: none; }
  .s8-ctatx, .s9-ctatx{
    display: flex !important; align-items: center; justify-content: center; gap: 12px;
    width: min(100%, 420px); height: 56px; margin: 0 auto;
    background: #F7C21B; border-radius: 12px;
    font-weight: 800; font-size: 17px; letter-spacing: .03em; color: #061637;
    box-shadow: 0 3px 0 #DFA800;
  }
  .s8-ctatx i, .s9-ctatx i{ font-style: normal; font-family: "Poppins", sans-serif; font-size: 19px; }

  /* ────────────────────────────────────────────────
     6. セクションの見出しの大きさをそろえる
     ──────────────────────────────────────────────── */
  .s1 .s1-title, .s3 .s3-head .l1, .s3 .s3-head .l2,
  .s4 .s4-head, .s5 .s5-head, .s7 .s7-head,
  .s8 .s8-head, .s9 .s9-head{
    font-size: clamp(23px, 6.1vw, 29px) !important;
    line-height: 1.5 !important;
  }
}