html {
    box-sizing: border-box;
  }
  
  *, *::before, *::after {
    box-sizing: inherit;
  }

  html{scroll-behavior:smooth;}

  
  /* ベースリセット */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Inter', sans-serif;
    background-color: #fff;
    color: #2d3748;
    overflow-x: hidden;
  }
  
  
  /* Header */
  header {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  
  .header-inner {
    max-width: 1200px;
    margin: auto;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  header h1 {
    color: #1d4ed8;
    font-weight: 700;
    font-size: 20px;
  }
  
  header nav a {
    margin-left: 24px;
    font-size: 14px;
    color: #374151;
  }
  
  header nav a:hover {
    color: #1d4ed8;
  }

  .nav-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;                /* ← ここに flex を当てれば崩れない */
    gap:1.5rem;
    align-items:center;
  }
  
  /* 既存リンク（a）なら特に変更不要だが例示 */
  .nav-list a{
    color:#111827;
    text-decoration:none;
    font-weight:500;
  }
  
  /* nav-cta は前ステップで書いたまま */
/* ============  burger ============ */
.burger{
    display:none;                     /* PC 非表示 */
    flex-direction:column; gap:5px;
    width:32px; height:24px;          /* クリック領域 */
    background:none; border:none; cursor:pointer;
  }
  .burger span{
    width:100%; height:2px; background:#111827;
    transition:transform .3s, opacity .3s;
  }
  
/* ===== モバイル ≤768px ===== */
@media(max-width:768px){
    /* ハンバーガー表示 */
    .burger{display:flex; z-index:10003;}
  
    /* オフキャンバス（右 60% 幅）*/
    .nav{
      position:fixed; inset:0 0 0 40%;      /* ← 幅 60% */
      background:#fff; padding:5rem 1rem;
      transform:translateX(100%);
      transition:transform .35s ease;
      box-shadow:-4px 0 16px rgba(0,0,0,.1);
      z-index:9999;                         /* オーバーレイより上 */
    }
    body.site-open .nav{transform:none;}
  
    .nav-list{
      flex-direction:column; gap:1.2rem; align-items:flex-start;
    }
    .nav-cta{width:100%; text-align:center;}
  
  
    /* バーガー → × 変形 */
    body.site-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    body.site-open .burger span:nth-child(2){opacity:0;}
    body.site-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  }
  
  /* 共通：最初は非表示・クリック不可 */
.menu-overlay{
    position:fixed;               /* 生成は JS 側で行う */
    inset:0 60% 0 0;              /* 画面左 40% だけ覆う */
    background:rgba(0,0,0,.35);
    opacity:0; pointer-events:none;
    transition:opacity .25s;
    z-index:9998;                 /* nav より低く */
  }
  
  /* メニューを開いた時だけ ON（site-open は JS が付与） */
  body.site-open .menu-overlay{
    opacity:1; pointer-events:auto;
  }
  
  
  /* Heroセクション */
  .hero {
    position: relative;
    height: 100vh;
    background-image: url("../img/z104LL.webp"); /* 好きな画像に変更OK */
    background-size: cover;
    background-position: bottom;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    padding-top: 0;
  }
  
  .overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
  }
  
  .hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: white;
    padding: 0 16px;
  }
  
  .hero-content h1 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  
  .hero-content p {
    font-size: 18px;
    max-width: 640px;
    margin: auto;
  }

  .cta-primary{
    display:inline-block;
    padding:.9rem 1.8rem;
    border-radius:.6rem;
    background:#1d4ed8;
    color:#fff;
    font-weight:600;
    text-decoration:none;
    transition:opacity .2s;
    white-space:nowrap;        /* 1 行キープ */
  }
  .cta-primary:hover{opacity:.85;}
  
  
  /* ===================================
   お悩み ⇔ 解決 ブリッジ
=================================== */
.bridge{
    padding:88px 20px 72px;
    text-align:center;
  }
  .pain-title{
    font:700 28px/1.4 'Inter',sans-serif;
    margin-bottom:48px;
    color:#1d4ed8;
  }
  .pain-list,
  .solve-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:24px;
    margin:0 auto 40px;
    max-width:1000px;
    list-style:none;
    counter-reset:num;
  }
  .pain-list li,
  .solve-list li{
    background:#F7FAFC;
    border-radius:16px;
    padding:26px 20px;
    font:600 15px/1.7 'Inter',sans-serif;
    color:#2d3748;
    position:relative;
    box-shadow:0 4px 12px rgba(0,0,0,.05);
  }
  .pain-list li::before,
  .solve-list li::before{
    counter-increment:num;
    content:counter(num);
    position:absolute;
    top:-16px;left:-16px;
    width:40px;height:40px;
    border-radius:50%;
    background:#1d4ed8;
    color:#fff;
    font:700 18px/40px 'Inter';
  }
  .solve-head{
    font:700 22px/1.4 'Inter',sans-serif;
    color:#111;
    margin:24px 0 32px;
  }
  .solve-list li strong{color:#1d4ed8;}
  
  /* ------ SP 調整 ------ */
  @media(max-width:768px){
    .bridge{padding:64px 16px 56px;}
    .pain-title{font-size:24px;margin-bottom:36px;}
    .solve-head{font-size:20px;}
    .pain-list li,.solve-list li{font-size:14px;padding:22px 16px;}
    .pain-list li::before,.solve-list li::before{
      top:-14px;left:-14px;width:34px;height:34px;font-size:16px;line-height:34px;
    }
  }

  .pain-illust{
    text-align:center;
    margin:40px auto 64px;     /* 上下の余白を調整 */
  }
  .pain-illust img{
    max-width:260px;           /* お好みでサイズ */
    width:80%;
    height:auto;
  }
  
  /* =============================
   限定モニター訴求ボックス
============================= */
.bridge-copy{
    max-width:760px;
    margin:56px auto 0;
    padding:48px 32px;
    background:#f4f8ff;
    border:4px solid #1d4ed8;
    border-radius:16px;
    text-align:center;
    display:flex !important;          /* flex を使う前提で */
  flex-direction:column !important; /* ← 決定打           */
  align-items:center;
  text-align:center;
  gap:24px;  
    
  }

/* 中の 3 要素（見出し・価格コピー・ボタン）を中央寄せ */
.bridge-copy > *{
    margin-inline:auto;               /* 左右 auto で中央寄せ */
    width:auto;                       /* 内容分だけに縮む    */
  }

  .bridge-limited{
    font:700 20px/1.4 'Inter',sans-serif;
    color:#1d4ed8;
    margin-bottom:18px;
  }
  .bridge-limited span{
    font-size:30px;
  }
  .bridge-price{
    font:600 17px/1.7 'Inter',sans-serif;
    color:#111;
    margin-bottom:28px;
  }
  .bridge-price del{color:#9ca3af;}
  .bridge-price .price{color:#dc2626;font-weight:700;}
  .bridge-price .arrow{margin:0 6px;color:#1d4ed8;font-weight:700;}
  .bridge-btn{
    display:inline-block;
    padding:14px 32px;
    font:700 16px/1 'Inter',sans-serif;
    color:#1d4ed8;
    background:#fff;
    border-radius:8px;
    transition:background .25s;
  }
  .bridge-btn:hover{background:#1742c6;}
  
  /* ---------- SP 調整 ---------- */
  @media(max-width:768px){
    .bridge-copy{margin-top:48px;padding:40px 20px;}
    .bridge-limited{font-size:18px;}
    .bridge-limited span{font-size:26px;}
    .bridge-price{font-size:15px;}
    .bridge-btn{width:100%;padding:14px 0;}
  }
  
  
  /* サービスセクション */
  
  /* 全画面セクション */
  .service-block {
    height: 100vh;
    width: 100%;
    min-height:100vh;
    margin-top: 0;
  }
  
  .service-container {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: stretch;
    min-height: 500px;
  }
  
  /* 画像側（縦長でもOKにする） */
  .service-image {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    height: 100%;
  }
  
  .service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  
  /* テキスト側 */
  /* .service-text は高さ制御だけに専念 */
  .service-text {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    height: 100%;
    /*overflow: hidden;*/
  }
  
  /* 🔥 パディング＆内容整える専用のラッパー */
  .service-text .inner {
    padding: 60px;
    box-sizing: border-box;
    max-width: 600px;
    width: 100%;
  }
  
  
  
  .service-text h3 {
    font-size: 28px;
    font-weight: bold;
    color: #1d4ed8;
    margin-bottom: 24px;
  }
  
  .service-text ul {
    list-style: disc;
    padding-left: 1.2em;
    margin-bottom: 24px;
    font-size: 16px;
    color: #374151;
  }
  
  .service-text .price {
    font-weight: bold;
    color: #111827;
    font-size: 16px;
    margin-bottom: 12px;
  }
  
  .more-link {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    display: inline-block;
    background-color: #000;
    padding: 12px 24px;
    border-radius: 10px;
    transition: background-color 0.3s ease;
  }
  .more-link:hover {
    background-color: #333;
  }
  
  /* レスポンシブ対応 */
  @media (max-width: 768px) {
    .service-container {
      flex-direction: column;
      height: auto;
    }
  
    .service-online .service-container {
      flex-direction: column-reverse; /* 🔁 テキスト→画像 を 画像→テキスト に変更 */
    }
  
    .service-image,
    .service-text {
      width: 100%; /* 🔴 修正：スマホ時は横幅100%に */
    }
  
    .service-image img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  
    .service-text {
      padding: 40px 20px;
      text-align: left;
      align-items: flex-start;
    }
  
    .service-text h3 {
      font-size: 22px;
    }
  
    .service-text ul,
    .service-text .price,
    .more-link {
      font-size: 15px;
    }
  
    .service-text .inner {
      width: 100%;
      padding: 40px 20px;
    }

    .service-block {
        height: auto;       /* ← 元の height:100vh を打ち消す            */
        min-height: auto;   /* ← 同じく min-height もリセット            */
      }
    
      /* コンテナの最小高さも不要なのでオフ */
      .service-container {
        min-height: auto;
      }
  }
  
  /* 共通スタイルの再利用に備えてクラス分離 */
  .service-online,
  .service-management {
    width: 100%;
    min-height: 100vh;
    height: 100vh;
  }
  
  /* 既存共通スタイル省略 */
  
  /* プロフィールセクション全体 */
  .profile-container {
    display: flex;
    flex-direction: row;
  }
  
  .profile-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 1000px;
    margin: 80px auto;
    padding: 0 20px;
    flex-wrap: wrap;
  }
  
  /* プロフィール写真（左） */
  .profile-image {
    /*flex: 0 0 220px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 0 auto;
    
  }
  
  .profile-img-wrapper {
    transform: scale(1.3);
    width: 100%;
    height: 100%;
    
  }
  
  .profile-image img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    object-position: center top; /* ← ここで人物の顔寄りにずらす！ */
    /*border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
  }
  
  /* プロフィール文章（右） */
  .profile-text {
    flex: 1;
    font-size: 16px;
    line-height: 1.7;
    color: #222;
  }
  
  .profile-text h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  .profile-text p {
    margin-bottom: 24px;
  }
  
  .profile-item h3 {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  
  .section-title {
    font-size: 2rem;
    margin-bottom: 1.5em;
    text-align: center;
    font-weight: bold;
  }
  
  
  /* レスポンシブ対応 */
  @media (max-width: 768px) {
    .profile-section {
      flex-direction: column;
      text-align: center;
    }
  
    .profile-image {
      margin-bottom: 20px;
    }
  
    .profile-text {
      text-align: left;
    }
  }
  
  @media (min-width: 768px) {
    .profile-container {
      flex-direction: row;
      align-items: flex-start;
      justify-content: center;
      gap: 40px;
      max-width: 1000px;
      margin: auto;
    }
  
    .profile-image {
      flex-shrink: 0;
    }
  
    .profile-text {
      max-width: 600px;
      text-align: left;
    }
  }
  
  
  /* アイコン付きの見出し */
  .profile-text h3::before {
    content: "👤";
    margin-right: 8px;
  }
  
  /* それぞれにアイコンを出す場合はこう個別指定も */
  .profile-text .career::before {
    content: "👤";
  }
  .profile-text .stance::before {
    content: "🧑‍⚕️";
  }
  .profile-text .hobby::before {
    content: "🎻";
  }
  .profile-text .message::before {
    content: "💬";
  }
  
  
  
  /* === Profile Section (Split Layout) === */
  .profile-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 20px;
    background-color: #ffffff;
    align-items: center;
    max-width: 1000px;
    margin: 80px auto;
    gap: 40px;
  }
  
  .profile-container {
    display: flex;
    flex-direction: row;
    /*justify-content: center;*/
    justify-content: space-between;
    /*align-items: flex-start;*/
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    width: 100%;
    flex: 1;
  }
  
  .profile-left {
    flex: 0 0 300px;
    text-align: center;
    flex: 1;
    /*transform: translateX(-50px);  ← お好みで値を調整 */
  }
  
  /* ── 1200px 以上のワイド画面だけ、写真を少し左へ ── */
  @media (min-width: 1200px) {
    .profile-left {
      transform: translateX(-40px); /* ← お好みで -20〜-60px くらいに調整 */
    }
  }
  
  
  .profile-img-wrapper {
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  }
  
  .profile-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .profile-name {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 15px 0 10px;
  }
  
  .profile-caption {
    font-size: 1rem;
    color: #555;
  }
  
  .profile-right {
    flex: 1;
    max-width: 650px;
  }
  
  .section-label {
    font-size: 1.2rem;
    color: #1e40af;
    margin-bottom: 30px;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  .profile-block {
    margin-bottom: 30px;
  }
  
  .profile-block h4 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: #222;
  }
  
  .profile-block p {
    font-size: 1rem;
    line-height: 1.7;
    color: #333;
  }

  /* =====================================================
   add-on : 学習管理 → 家庭教師 動線
   ===================================================== */

  /* ── スマホ調整 ───────────────────────── */
  @media(max-width:768px){
    .add-on-copy{font-size:14px;}
    .sp-break{display:none;}        /* 不要な改行を消す */
    .link-sub{width:100%;}
  }
  
  
  /* Responsive */
  @media (max-width: 768px) {
    .profile-container {
      flex-direction: column;
      align-items: center;
      gap: 40px;
    }
  
    .profile-left {
      text-align: center;
    }
  
    .profile-right {
      padding: 0 20px;
    }
  }
  
  /* ========== 学習管理とは？ : カード4枚 ========== */
.sub-title{
  font-size: 1.4rem;
  font-weight:600;
  margin:40px 0 12px;
  color:#1d4ed8;
  text-align:center;
}
.lead{
  font-size:1rem;
  line-height:1.7;
  max-width:640px;
  margin:0 auto 32px;
  text-align:center;
  color:#374151;
}

.feature-cards{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:center;
}

.feature-card{
  flex:1 1 200px;
  max-width:240px;
  background:#ffffff;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  padding:24px 18px;
  text-align:center;
}

.feature-card h4{
  font-size:1.05rem;
  margin:12px 0 8px;
  color:#1d4ed8;
  font-weight:600;
}

.feature-card p{
  font-size:.9rem;
  line-height:1.6;
  color:#555;
}

.icon{
  display:inline-block;
  width:36px;
  height:36px;
  margin-bottom:10px;
  /* ↓ お好みのSVG / Webフォントに置き換えてください */
  background:#1d4ed8;
  border-radius:50%;
  mask:no-repeat center/60%;
  -webkit-mask:no-repeat center/60%;
}

/* 例として Heroicons のURLをマスクに利用するなら：
.icon-plan       { mask-image:url('/icons/calendar.svg'); }
.icon-progress   { mask-image:url('/icons/chart-bar.svg'); }
.icon-review     { mask-image:url('/icons/refresh.svg'); }
.icon-question   { mask-image:url('/icons/help-circle.svg'); }
*/

/* ── レスポンシブ (2列→1列) ── */
@media(max-width:768px){
  .feature-card{flex:1 1 100%;}
}

/* ========= 学習管理とは？ Section ========= */
.learning-explain{
    padding:80px 0px;
    background:#f5f9ff;               /* 軽いブルーで横断感 */
    text-align:center;
  }
  
/* ───────── ★ 追加ここから ★ ───────── */
.learning-explain + .service-block{
    margin-top:0;             /* ← 上の 48px をゼロにする */
  }
  .service-block + .learning-explain{
    margin-top:0;             /* ← 下へ続く場合も同様にゼロ */
  }
  /* ───────── ★ 追加ここまで ★ ───────── */
  
  .learning-title{
    font-size:1.6rem;
    font-weight:700;
    color:#1d4ed8;
    margin-bottom:16px;
    letter-spacing:1px;
  }
  .learning-lead{
    font-size:1rem;
    line-height:1.7;
    color:#374151;
    max-width:680px;
    margin:0 auto 48px;
  }
  .learning-cards{
    display:flex;
    flex-wrap:wrap;
    gap:28px;
    justify-content:center;
  }
  .learning-card{
    flex:1 1 220px;
    max-width:1200px;
    background:#ffffff;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
    padding:60px 20px;
    min-height: 360px;
    margin: 0 28px;
  }
  .learning-card h3{
    font-size:1.05rem;
    margin:14px 0 8px;
    color:#1d4ed8;
    font-weight:600;
  }
  .learning-card p{
    font-size:.9rem;
    line-height:1.6;
    color:#555;
  }

  .learning-card:focus{outline:3px solid #2563eb}

  .learning-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 24px rgba(0,0,0,.08)
}

  
  /* アイコン用の占位。mask-image をお好みの SVG に差し替えてください */
/* =====================================================
   Learning カード用アイコン
   ===================================================== */
   .icon{
    /* 外枠の円 */
    display:inline-flex;          /* 中央配置しやすいように flex に */
    align-items:center;
    justify-content:center;
    width:100px;                  /* ← ここだけ調整すればサイズを変えられます */
    height:100px;
    background:#1d4ed8;           /* 円の色 */
    border-radius:50%;
    margin-bottom:10px;
  
    /* マスク SVG を “丸ごと” 収め、見切れを防止  ---------------- */
    mask:no-repeat center/contain;         /* Chrome / Edge */
    -webkit-mask:no-repeat center/contain; /* Safari */
  
    transition:background-color .25s;
  }
  
  .icon:hover{
    background:#2563eb;           /* Hover で少しトーンアップ */
  }
  
  /* アイコンフォント（Font Awesome など）を中に置く場合 --------- */
  .icon i{
    font-size:64px;               /* 内側アイコンの大きさ */
    color:#fff;                   /* アイコン色 */
  }
  
  /* 例：
  .icon-plan      {mask-image:url('/icons/calendar.svg');}
  .icon-progress  {mask-image:url('/icons/bar-chart.svg');}
  .icon-review    {mask-image:url('/icons/refresh.svg');}
  .icon-question  {mask-image:url('/icons/help-circle.svg');}
  */
  
  @media(max-width:768px){
    .learning-card{
        flex:1 1 100%;
        padding:40px 20px;
        min-height:auto;
    }

    .icon{ width:80px; height:80px; }
    .icon i{ font-size:48px; }
  }
  
/* ▼既存 style02.css の該当ブロック直後で OK */
@media (max-width: 768px) {
    .service-block  {               /* ← 3つのサービス帯まとめて */
      height:auto;                  /* ← 100vh を無効化        */
      min-height:100vh;             /* PCではそのまま、SPはauto */
    }
  }

  
  .learning-explain {
    padding:80px 0 64px;            /* ← 上下にゆとり（お好みで）*/
    background:#f5f9ff;             /* 水色 */
  }
  
  /* SP だけ余分に空けたいなら */
  @media (max-width:768px){
    .learning-explain{
       margin-top:48px;             /* サービス帯と十分に離す   */
    }
  }
  

/* ブリッジ帯 ====================================== */
.tutoring-bridge{
    margin:72px auto 0;
    padding:48px 24px;
    max-width:720px;              /* ← 横幅を絞る */
    background:#f5f9ff;
    border-radius:16px;
    text-align:center;
    box-shadow:0 4px 12px rgba(0,0,0,.04);
    margin-bottom:96px; 
  }
  
  .bridge-copy{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:14px;
    line-height:1.6;
    margin-bottom:32px;
    font-size:19px;
  }

  /* ＋マークを正円に揃える -------------- */
.bridge-copy .plus{
    flex:0 0 44px;      /* 幅を固定               */
    width:44px;         /* ← これを追加           */
    height:44px;        /* ← これを追加           */
  }
  
  .bridge-copy strong{font-weight:700;color:#1d4ed8;}
  .bridge-copy .plus{
    flex:0 0 44px;
    height:44px;
    border-radius:50%;
    background:#1d4ed8;
    color:#fff;
    font-size:28px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:4px;
  }
  
  /* CTA ボタン */
  .bridge-btn{
    display:inline-block;
    padding:16px 40px;
    font-weight:700;
    font-size:16px;
    color:#1d4ed8;
    border:2px solid #1d4ed8;
    border-radius:8px;
    transition:.25s;
    box-shadow:0 0 0 rgba(29,78,216,.0);
    text-decoration:none; 
  }
  .bridge-btn:hover{
    background:#1d4ed8;
    color:#fff;
    box-shadow:0 6px 16px rgba(29,78,216,.25);
    text-decoration:none; 
  }
  
  /* スマホ調整 */
  @media(max-width:768px){
    .tutoring-bridge{margin:56px 16px 0;padding:40px 16px;}
    .bridge-copy{flex-direction:column;align-items:center;font-size:17px;gap:10px;}
    .bridge-copy .plus{margin:0 auto;}
    .bridge-btn{width:100%;padding:14px 0;}
  }
  
  .btn-primary{
    background:#1d4ed8;color:#fff;
  }
  .btn-primary:hover{
    filter:brightness(1.1);
  }
  .btn-outline{
    border:2px solid #1d4ed8;color:#1d4ed8;background:#fff;
  }
  .btn-outline:hover{
    background:#1d4ed8;color:#fff;
  }
  
  /* ========== 料金プラン ========== */
.plan-section{
    padding:96px 16px;
    text-align:center;
    background:#ffffff;
  }
  .plan-title{
    font-size:28px;
    font-weight:700;
    color:#1d4ed8;
    margin-bottom:48px;
  }
  .plan-wrapper{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:32px;
    max-width:1000px;
    margin:0 auto;
  }
  .plan-card{
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:40px 24px 48px;
    box-shadow:0 4px 12px rgba(0,0,0,.05);
    position:relative;
    display:flex;
    flex-direction:column;
    transition:.25s;
  }
  .plan-card:hover{
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    transform:translateY(-4px);
  }
  .plan-name{
    font-size:20px;
    font-weight:600;
    margin-bottom:16px;
  }
  .plan-price{
    font-size:32px;
    font-weight:700;
    color:#1d4ed8;
    margin-bottom:24px;
  }
  .plan-price .per{font-size:14px;font-weight:500;color:#6b7280;}
  .plan-feature{
    text-align:left;
    font-size:15px;
    line-height:1.6;
    margin:0 0 32px;
    list-style:disc;
    padding-left:1.2em;
    color:#374151;
  }
  .plan-btn{
    margin-top:auto;
    display:block;
    background:#1d4ed8;
    color:#fff;
    padding:14px 0;
    border-radius:8px;
    font-weight:600;
    transition:.25s;
  }
  .plan-btn:hover{background:#0f3ace;}
  .plan-note{
    font-size:13px;
    color:#6b7280;
    margin-top:32px;
  }
  
  /* ―――― “人気”バッジ & ハイライト ――― */
  .plan-recommend{
    border:2px solid #2563eb;
  }
  .plan-badge{
    position:absolute;
    top:-14px; left:50%; transform:translateX(-50%);
    background:#2563eb;
    color:#fff;
    font-size:12px;
    padding:2px 12px;
    border-radius:14px;
  }
  
  /* ― スマホ調整 ― */
  @media(max-width:768px){
    .plan-card{padding:32px 20px 40px;}
    .plan-price{font-size:28px;}
  }

  /* === price === */
  .pricing-section{
    padding:40px 16px;
    text-align:center;
  }
  
  .pricing-section a{
    text-decoration:none;   /* ⬅︎ 下線を消す */
  }
  

.price-wrapper{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
    max-width:1000px;
    margin:64px auto;
  }
  .price-card{
    background:#fff;
    border:2px solid #e5e7eb;
    border-radius:16px;
    padding:32px 24px;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    box-shadow:0 4px 12px rgba(0,0,0,.05);
    min-height:460px;  
  }
  .price-card.popular{
    border-color:#1d4ed8;
    transform:translateY(-8px);
  }
  .badge{
    display:inline-block;
    background:#1d4ed8;
    color:#fff;
    font-size:12px;
    padding:4px 12px;
    border-radius:9999px;
    margin-bottom:12px;
  }
  .plan-name{font-size:20px;font-weight:700;margin-bottom:8px;line-height:1.4}
  .plan-small{font-size:14px;font-weight:400}
  .plan-price{font-size:32px;font-weight:700;margin:8px 0}
  .plan-price .yen{font-size:20px;vertical-align:top}
  .plan-point{margin:24px 0;text-align:left}
  .plan-point li{position:relative;padding-left:20px;margin-bottom:6px;list-style: none;}
  .plan-point li::before{content:"✔";position:absolute;left:0;color:#2563eb}
  .btn-primary{display:block;margin-top:auto;padding:12px;border:2px solid #2563eb;
    color:#2563eb;border-radius:8px;font-weight:600;transition:.2s}
  .btn-primary:hover{background:#2563eb;color:#fff}
  .plan-note{font-size:12px;color:#6b7280;margin-top:8px}
  .tax-note{text-align:center;font-size:12px;color:#6b7280;margin-top:16px}
  
  /* モバイル補正 */
  @media(max-width:768px){
    .price-card.popular{transform:none}
  }
  
/* ❶ PC：３列 */
.pricing-section .price-wrapper{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
  }
  
  /* ❷ タブレット（～1024px）：２列 */
  @media(max-width:1024px){
    .pricing-section .price-wrapper{
      grid-template-columns:repeat(2,1fr);
    }
  }
  
  /* ❸ モバイル（～600px）：１列 */
  @media(max-width:600px){
    .pricing-section .price-wrapper{
      grid-template-columns:1fr;
      gap:20px;
    }
  }

/* ------------------------------------------------------------------ */
/*  ボタンとリンクの視認性改善  */
/* ------------------------------------------------------------------ */
a {text-decoration:none;}                 /* 全リンクの下線を一括解除   */

.btn-primary{
  background:#1d4ed8;
  color:#fff !important;                  /* 文字を白で固定              */
  text-decoration:none;
}
.btn-primary:hover{
  filter:brightness(1.1);
}

/* 価格カード下の注釈（通常価格）を小さくグレーで */
.plan-note{
  font-size:13px;
  color:#6b7280;
}

/* ------------------------------------------------------------------ */
/*  price クラスの衝突を回避（サービス帯の数字用）                    */
/* ------------------------------------------------------------------ */
.service-text .fee{                       /* ← class 名を fee に変更 */
  font-weight:bold;
  color:#111827;
  font-size:16px;
  margin-bottom:12px;
}

/* ------------------------------------------------------------------ */
/*  「人気 No.1」バッジの中央寄せ補正（タブレット幅でズレる対策）     */
/* ------------------------------------------------------------------ */
@media (max-width:1024px){
  .price-card.popular .badge{
    left:50%;transform:translateX(-50%);
  }
}

/* ------------------------------------------------------------------ */
/*  レスポンシブ：料金 ⇔ プロフィール間の余白を最適化                 */
/* ------------------------------------------------------------------ */

/* PC デフォルト ─ 既存値を少しタイトに（任意）*/
.pricing-section{
    margin-bottom:30px;      /* ← もし今 160px 以上なら減らす */
  }
  .profile-section{
    margin-top:0;             /* 下で上書きするので一度リセット */
  }
  
  /* 1024px 以下（タブレット）*/
  @media (max-width:1024px){
    .pricing-section{margin-bottom:88px;}
    .profile-section{margin-top:-24px;}   /* 少し重ねる感覚で */
  }
  
  /* 768px 以下（スマホ）*/
  @media (max-width:768px){
    .pricing-section{margin-bottom:56px;}
    .profile-section{margin-top:-32px;}
  }
  
  /* 480px 以下（小型スマホ）*/
  @media (max-width:480px){
    .pricing-section{margin-bottom:40px;}
    .profile-section{margin-top:-36px;}
  }
  
/* ===== お申し込みフロー ===== */
.flow-section{
    padding:40px 20px;
    text-align:center;
  }
  
  .flow-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:40px;
    max-width:1000px;
    margin:48px auto 0;
  }
  
  .flow-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:40px 24px 32px;
    box-shadow:0 4px 20px rgba(0,0,0,.05);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .flow-card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 28px rgba(0,0,0,.08);
  }
  
  /* アイコン丸背景 */
  .flow-icon{
    width:80px;height:80px;
    margin:0 auto 24px;
    border-radius:50%;
    background:#e0e7ff;
    display:flex;align-items:center;justify-content:center;
  }
  .flow-icon i{
    font-size:38px;
    color:#1d4ed8;
  }
  
  /* テキスト類 */
  .flow-step{
    font-size:18px;
    font-weight:700;
    margin-bottom:12px;
    color:#1d4ed8;
  }
  .flow-text{
    font-size:15px;
    line-height:1.7;
    color:#374151;
  }
  
  /* 小さい画面調整 */
  @media(max-width:768px){
    .flow-section{padding:72px 16px;}
    .flow-card{padding:32px 20px;}
    .flow-icon{margin-bottom:20px;}
  }

/* ===== apply セクション (カード版) ===== */
.apply{
    background:#f8fafc;
    padding:clamp(2.5rem,5vw,4rem) 1rem;
    display:flex;                 /* 中央寄せ */
    justify-content:center;
  }
  .apply-card{
    position:relative;
    max-width:640px;
    width:100%;
    padding:2rem clamp(1.5rem,4vw,2.5rem);
    background:#fff;
    border-radius:1rem;
    box-shadow:0 6px 18px rgba(0,0,0,.04);
    overflow: hidden;
  }
  .apply-card::before{            /* アクセント帯 */
    content:'';
    position:absolute;
    top:0; left:0;
    width:100%; height:6px;
    background:var(--primary,#1d4ed8);
    border-radius:1rem 1rem 0 0;
  }
  
  /* タイトル */
  .apply-card h2{
    font-size:clamp(1.5rem,2vw+1rem,2rem);
    text-align:center;
    margin-bottom:1.5rem;
  }
  
  /* フォーム */
  .apply-form{
    display:grid;
    gap:.75rem;
    max-width:480px;
    margin:0 auto 2rem;
  }
  .apply-form input,
  .apply-form select{
    padding:.65rem .9rem;
    font-size:1rem;
    border:1px solid #d1d5db;
    border-radius:.5rem;
    width:100%;
  }
  .apply-form button{
    padding:.7rem 1.2rem;
    font-size:1rem;
    border:none;
    border-radius:.5rem;
    background:#1d4ed8;
    color:#fff;
    cursor:pointer;
    transition:opacity .2s;
  }
  .apply-form button:hover{opacity:.85;}
  .apply-form .note{display:block;margin-top:.3rem;font-size:.8rem;color:#6b7280;}
  
  /* ボタン群 */
  .alt-cta{
    display:flex;
    justify-content:center;
    gap:1rem;
    flex-wrap:wrap;
  }
  .alt-cta a{
    padding:.7rem 1.2rem;
    border-radius:.5rem;
    font-weight:600;
    text-decoration:none;
    transition:opacity .2s;
  }
  .line-btn{background:#06c755;color:#fff;}
  .mail-btn{background:#f3f4f6;color:#111827;}
  .alt-cta a:hover{opacity:.85;}
  
  /* レスポンシブ：フォーム2列→1列 */
  @media(min-width:768px){
    .apply-form{grid-template-columns:1fr 1fr;}
    .apply-form button{grid-column:span 2;}
  }
  
  
/* ----------------------------------------
   右下固定 CTA（クラス .fixed-cta）
   PC のみ表示 … モバイルは好きな CTA を
-----------------------------------------*/
@media (min-width:1025px){
    .fixed-cta{position:fixed;right:30px;bottom:32px;z-index:9999}

  
    /* 丸ボタン */
    .cta-circle{
      width:74px;height:74px;border-radius:50%;
      background:#06c755;color:#fff;
      display:none;align-items:center;justify-content:center;
      font-size:36px;box-shadow:0 4px 16px rgba(0,0,0,.18);
      cursor:pointer;transition:transform .15s;
    }
    .cta-circle:hover{transform:scale(1.06)}
  
    /* パネル */
    .cta-panel{
      width:280px;padding:20px 18px;border-radius:16px;
      background:#fff;border:1px solid #e5e7eb;
      box-shadow:0 6px 24px rgba(0,0,0,.12);
      position:absolute;right:0px;bottom:0;
      transition:opacity .25s,transform .25s;
    }
  
    /* 見出し */
    .cta-head{font:700 18px/1.3 "Inter",sans-serif;text-align:center;margin:0 0 14px}
    .cta-head span{color:#06c755}
  
    /* パネル内ボタン */
    .cta-panel a{
      display:block;font:600 15px/1 "Inter",sans-serif;
      padding:12px 14px;border-radius:10px;text-align:center;margin-bottom:10px;
      color:#fff;transition:filter .15s
    }
    .cta-line{background:#06c755}
    .cta-form{background:#1d4ed8}
    .cta-panel a:hover{filter:brightness(1.1)}
  
    /* 閉じる（右上に×） */
    .cta-close{
      position:absolute;top:10px;right:10px;
      background:none;border:none;color:#9ca3af;font-size:20px;cursor:pointer
    }
  
    /* ===== 開閉状態 ===== */
    /* 初期状態：.open なのでパネル表示 & 丸ボタン非表示 */
    .fixed-cta.open .cta-panel{opacity:1;transform:none;pointer-events:auto}
    .fixed-cta.open .cta-circle{display:none}
  
    /* 閉じた状態：パネルを隠し、丸ボタンを表示 */
    .fixed-cta:not(.open) .cta-panel{
      opacity:0;pointer-events:none;transform:translateX(12px)
    }
    .fixed-cta:not(.open) .cta-circle{display:flex}
  }

  /* ==== 丸ボタン ==== */
.cta-mail-btn{
    position:fixed;right:24px;bottom:120px;          /* LINE の 24px 上に重ねる想定 */
    width:64px;height:64px;border-radius:50%;
    background:#4285f4;color:#fff;font-size:28px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:filter .2s;
  }
  .cta-mail-btn:hover{filter:brightness(1.1);}
  
  /* ==== パネル本体 ==== */
  .cta-mail-panel{
    position:fixed;right:24px;bottom:120px;
    width:320px;max-width:90vw;
    padding:24px 20px;border-radius:12px;
    background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.15);
    opacity:0;pointer-events:none;transform:translateX(24px);
    transition:.25s;
  }
  .cta-mail-panel h4{
    font-size:19px;font-weight:700;margin-bottom:12px;color:#4285f4;
  }
  .cta-mail-panel input,
  .cta-mail-panel textarea{
    width:100%;border:1px solid #cbd5e1;border-radius:6px;
    padding:10px 12px;font:16px/1.4 "Inter",sans-serif;margin-bottom:12px;
  }
  .cta-mail-panel textarea{resize:vertical;min-height:80px;}
  /* ボタンは既存の .btn-primary を再利用 */
  
  .cta-mail-panel .btn-primary{width:100%;}
  
  /* ==== トグル動き ==== */
  #cta-mail-toggle{display:none;}
  #cta-mail-toggle:checked ~ .cta-mail-panel{
    opacity:1;pointer-events:auto;transform:none;
  }
  #cta-mail-toggle:checked + .cta-mail-btn{display:none;}   /* 開いたら丸ボタンを隠す */
  
  
  #service, #pricing, #apply{scroll-margin-top:72px;}  /* ヘッダーの高さぶん */

  @media (max-width: 768px){
    #ctaBox .cta-panel {display:none;}
  }

/* thanks.html */
/* ===== thanks page ===== */
body.thanks{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100dvh;
    background:#f7f9fc;
    font-family: system-ui, "Helvetica Neue", Arial, sans-serif;
  }
  
  .thanks__box{
    text-align:center;
    padding:3rem 2rem;
    max-width:560px;
    width:90%;
    background:#fff;
    border-radius:1rem;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
  }
  
  .thanks__title{
    font-size:clamp(1.5rem,4.5vw,2.25rem);
    margin-bottom:1rem;
    line-height:1.3;
    font-weight:700;
    color:#111827;
  }
  
  .thanks__lead{
    font-size:clamp(.95rem,3.5vw,1.125rem);
    margin-bottom:2.5rem;
    color:#374151;
  }
  
  .btn{
    display:inline-block;
    padding:.75rem 1.75rem;
    border-radius:.625rem;
    font-weight:600;
    text-decoration:none;
    transition:.2s;
  }
  
  .btn--primary{
    background:#2563eb;
    color:#fff;
  }
  .btn--primary:hover{filter:brightness(1.1);}
  
  /* === Responsive tweak : narrow screen → reduce padding === */
  @media(max-width:480px){
    .thanks__box{padding:2.25rem 1.25rem;}
  }