/* ============ CSS設計 ============
       - BEM + ユーティリティ
       - カラートークン & 余白スケール
       - 画像は /img/ 配下に配置想定（コメント参照）
    */
    :root{
      --brand:#1135C7;          /* メインブルー */
      --brand-2:#0B2AA0;        /* 濃い青 */
      --accent:#F47E00;         /* CTAオレンジ */
      --sky:#E2F0F7;            /* 明るい水色背景 */
      --ink:#111827;            /* 本文色 */
      --muted:#6B7280;          /* 補助文字 */
      --white:#fff;
      --max:1120px;             /* 最大横幅 */
      --radius:16px;            /* 角丸 */
      --shadow:0 10px 25px rgba(0,0,0,.08);
      --space-1:.25rem;  /*4*/
      --space-2:.5rem;   /*8*/
      --space-3:.75rem;  /*12*/
      --space-4:1rem;    /*16*/
      --space-5:1.5rem;  /*24*/
      --space-6:2rem;    /*32*/
      --space-7:3rem;    /*48*/
      --space-8:4rem;    /*64*/
    }
    html,body{height:100%;}
    body{
      margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,system-ui,sans-serif;
      color:var(--ink); line-height:1.8; background:#fff;
    }
    img{max-width:100%; height:auto; display:block;}
    .container{max-width:var(--max); margin-inline:auto; padding:0 var(--space-4);}    
    .section{padding:var(--space-8) 0;}    
    .section--tight{padding:var(--space-6) 0;}
    .section--sky{background:var(--sky);} 
    .section--dark{color:#fff; position:relative;}
    .grid{display:grid; gap:var(--space-6);}    
    .grid--2{grid-template-columns:1.2fr .8fr;} /* 左本文 右画像 */
    .grid--2r{grid-template-columns:.9fr 1.1fr;} /* 左画像 右本文 */
    .grid--3{grid-template-columns:repeat(3,1fr);}    
    .grid--3-tight{gap:var(--space-5);}    
    .grid--4{grid-template-columns:repeat(4,1fr);}
    /* ===== 無料登録の特典セクション（左右均等＆スマホ縦積み） ===== */
    .section--benefits .grid--2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* 左右50:50の等幅 */
      gap: clamp(24px, 4vw, 40px);            /* 画面幅に応じて柔軟な間隔 */
      align-items: start;
    }

    @media (max-width: 960px){
      .section--benefits .grid--2 {
        grid-template-columns: 1fr !important; /* ←上書き確実 */
      }
      .grid--2,.grid--2r,.grid--3,.grid--4{
        grid-template-columns:1fr;
      }
    }

    /* ヒーロー */
.hero{background:linear-gradient(180deg,#f8fbff, #fff);}
.hero__image img{width:100%;height:auto;display:block;margin-inline:auto;}
.hero__inner{display:grid;grid-template-columns:1fr;align-items:center;gap:clamp(20px,3vw,40px);padding-block:clamp(36px,6vw,64px)}
.hero__col--visual img{max-width:560px;margin-inline:auto}
.hero__pill{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.35em .9em;font-weight:700;color:#334}
.hero__title{font-size:clamp(40px,7vw,64px);line-height:1.1;margin:.2em 0 .1em;color:var(--brand);font-weight:900;letter-spacing:.02em}
.hero__subtitle{font-size:clamp(16px,2.2vw,20px);margin:0;color:#193}
.badge{position:relative;display:inline-block;background:var(--accent);color:#fff;font-weight:900;border-radius:999px;padding:.55em .9em;margin-bottom:10px;box-shadow:var(--shadow)}
.hero--image-only{padding:0;}
.hero__kv{display:block;width:100%;margin:0;}
.hero__kv img{display:block;width:100%;height:auto;}

    /* 見出し */
    .h2{font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.35; margin:.2rem 0 var(--space-4);}
    .h3{font-size:clamp(1.1rem,2vw,1.35rem); margin:0 0 var(--space-3);} 
    .center{text-align:center;}

    /* 悩みリスト（枠） */
    .panel{background:#fff; border:1px solid #E5E7EB; border-radius:var(--radius); padding:var(--space-6); box-shadow:var(--shadow);}    
    .checklist{display:grid; gap:var(--space-3);} 
    .check{display:flex; gap:.6rem; align-items:flex-start;}
.check__icon{
  flex:0 0 32px;             /* ← 幅・高さを統一して拡大（24→32） */
  width:32px;
  height:32px;
  border-radius:50%;         /* ← 999pxでも可だが、50%が明確 */
  background:#22C55E;
  display:grid;
  place-items:center;
  margin-top:.15rem;
}
    .check__icon svg{width:14px; height:14px; fill:#fff;}

/* === 「こんなお悩みはありませんか？」最小上書き === */
.section--sky .panel{
  max-width: 560px;      /* 白い枠の横幅を狭める */
  margin-inline: auto;   /* 中央寄せ */
}

.section--sky .checklist{
  font-size: 1.125rem;   /* 本文をやや大きく（約18px相当） */
  line-height: 1.6;
}

.section--sky .check__icon{
  width: 32px;           /* 緑の丸をバランス良く拡大 */
  height: 32px;
}

.section--sky .check__icon svg{
  width: 18px;           /* チェックマークも少し拡大 */
  height: 18px;
}
/* 「こんなお悩み…」の次に来る “そのお悩み…” セクションの上をゆったり */
.section--sky + .section:not(.cta) {
  padding-top: clamp(32px, 5vw, 64px);/* 上余白を増やす（SP〜PCで可変） */
}

/* 前セクションの下が広すぎるようなら 少し詰める（任意） */
.section--sky{
  padding-bottom: clamp(40px, 5vw, 64px);
}

/* 見出し下の行間を整える（任意：詰まり感の解消） */
.section .container > .h2.center{
  margin-bottom: clamp(16px, 2.2vw, 28px);
}
/* 直前が通常セクションのときにだけ、「声（sky）」の上側にゆとりを足す */
.section:not(.section--sky) + .section.section--sky{
  padding-top: clamp(72px, 7vw, 120px);
}

/* 見出し直下が詰まって見える場合の微調整（任意） */
.section.section--sky .h2.center{
  margin-bottom: clamp(20px, 2.4vw, 49px);
}

    /* ポイントブロック */
    .point-label{display:inline-block; background:var(--brand); color:#fff; padding:.35rem .6rem; border-radius:6px; font-weight:700; font-size:.95rem;}
    .feature__img{border-radius:12px; overflow:hidden; box-shadow:var(--shadow);}    

    /* 声（カード） */
    .voices{display:grid; gap:var(--space-5);}    
    .voice{display:grid; grid-template-columns:96px 1fr; gap:var(--space-4); align-items:center; background:#fff; border:1px solid #E5E7EB; border-radius:var(--radius); padding:var(--space-5);}    
    .voice__avatar{width:96px; height:96px; border-radius:999px; overflow:hidden; border:3px solid #fff; box-shadow:var(--shadow);}    
    @media (max-width:640px){ .voice{grid-template-columns:72px 1fr;} .voice__avatar{width:72px; height:72px;} }

    /* CTA（青グラデ） */
    .cta{position:relative; overflow:hidden; color:#fff;}
    .cta::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,#1F49E0 0%,#153CD4 50%,#1135C7 100%);} 
    .cta__inner{position:relative;}
    .cta .btn{display:inline-block; background:var(--accent); color:#fff; text-decoration:none; padding:1rem 1.5rem; border-radius:10px;font-size: larger; font-weight:700; box-shadow:var(--shadow);}    

    /* 3カラム（アイコン付き） */
    .card{background:#fff; border:1px solid #E5E7EB; border-radius:var(--radius); padding:var(--space-5); box-shadow:var(--shadow);}    
    .icon{width:80px; height:80px; margin:0 auto var(--space-3); border-radius:12px; overflow:hidden;}

* ===== 3カード（ニュース/カレンダー/解説）を大きめデザインに ===== */
.section--sky .grid--3 .card{
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* 共通 .icon(80x80) を上書きして、大きい白パネルに */
.section--sky .grid--3 .card .icon{
  width: clamp(220px, 26vw, 300px);   /* ← 白パネルを大きく */
  height: auto;                       /* 共通80pxを無効化 */
  aspect-ratio: 4 / 3;                /* ほぼ長方形（理想画像に近づける） */
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  overflow: hidden;
}

/* アイコン画像も大きく */
.section--sky .grid--3 .card .icon img{
  width: clamp(150px, 16vw, 250px);   /* ← 画像の存在感を出す */
  height: auto;
}

/* 見出しの余白と太さ */
.section--sky .grid--3 .card h3{
  margin-top: 12px;
  font-weight: 700;
}
/* ===== 3カラム（ニュース・カレンダー・解説）を中央寄せ ===== */
.section--sky .grid--3 {
  justify-content: center; /* グリッド全体を中央寄せ */
  justify-items: center;   /* 各カードも中央寄せ */
  margin-inline: auto;     /* ブロック自体も中央に */
  max-width: 1080px;       /* 横幅をやや狭めてバランス調整（任意） */
}

/* ===== 特典セクション（だけ）を整える ===== */
.section--benefits .grid--2{
  grid-template-columns: 1fr 1fr;   /* 左右50/50 等幅 */
  align-items: start;
  gap: 32px;                        /* 32〜40でお好み調整 */
}
.section--benefits .ratio{ margin-bottom: var(--space-3); }
.section--benefits h3{ margin: .75em 0 .6em; }
.section--benefits p{ margin-top: 0; }

/* インラインstyleの置き換え（任意） */
.section--benefits .mt-6{ margin-top: var(--space-6); } /* 既にあるならOK、40pxのinlineは削除 */

    /* 16:9 / 4:3 画像カード */
    .ratio{position:relative; width:100%; overflow:hidden; border-radius:12px; box-shadow:var(--shadow);}    
    .ratio--169{aspect-ratio:16/9;}
    .ratio--43{aspect-ratio:4/3;}
    .ratio img{width:100%; height:100%; object-fit:cover;}

    /* 二重線見出し */
    .double-title{display:inline-block; padding:.25rem 1rem .5rem; border-top:3px solid var(--brand); border-bottom:3px solid var(--brand);}

    /* ボタン */
    .btn{display:inline-block; background:var(--brand); color:#fff; text-decoration:none; padding:.85rem 1.25rem; border-radius:10px; font-weight:700;}

    /* フッター */
    .footer{background:#000; color:#fff; padding:var(--space-6) 0; text-align:center;}

    /* 細部余白調整 */
    .mb-1{margin-bottom:var(--space-1);}
    .mb-2{margin-bottom:var(--space-2);}
    .mb-3{margin-bottom:var(--space-3);}
    .mb-4{margin-bottom:var(--space-4);}
    .mb-5{margin-bottom:var(--space-5);}
    .mb-6{margin-bottom:var(--space-6);}
    .mb-7{margin-bottom:var(--space-7);}
    .mt-0{margin-top:0;}
    .mt-3{margin-top:var(--space-3);}
    .mt-5{margin-top:var(--space-5);}
    .mt-6{margin-top:var(--space-6);}
    .py-0{padding-top:0;padding-bottom:0;}

    /* 背景画像の代替：幾何学風グラデ */
    .bg-geo{position:relative;}
    .bg-geo::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,#2E5EF1 0%,#1E47DA 50%,#153DD0 100%);}    
    .bg-geo::after{content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 40%); mix-blend-mode:overlay;}
    .bg-geo > *{position:relative;}
    /* ===== CTAの背景レイヤーをクリック不可にする（修正） ===== */
    .bg-geo::before,
    .bg-geo::after {
      pointer-events: none; /* 背景レイヤーを無効化 */
    }

 .section .container {
  max-width: 960px;   /* ここで全体の横幅を制限 */
  margin-inline: auto; /* 中央寄せ */
}
/* 解決見出し（そのお悩み…）のセクションは .py-0 で上下0になっている → 上に余白を付与 */
/* タイポ修正：48x → 48px */
.section.py-0{
  padding-top: clamp(58px, 6vw, 48px) !important;
}

/* 次の「ご利用者様の声」セクションの“上”にも余白を足す（直前が通常.sectionのときのみ） */
.section + .section.section--sky{
  padding-top: clamp(32px, 6vw, 56px) !important;
}

/* 見出し直下の詰まり感が残る場合のみ（任意） */
.section.section--sky .h2.center{
  margin-bottom: clamp(29px, 2.4vw, 48px) !important;
}

/* ===== CTA1（青グラデ） 上余白を詰める ===== */
section.cta.bg-geo:first-of-type {
  padding-top: clamp(32px, 4vw, 56px); /* 余白を半分程度に調整 */
  padding-bottom: clamp(56px, 6vw, 80px); /* 下は維持気味でOK */
}