/* =============================================================
   Solua 社労士事務所  —  サイト共通スタイル
   カラー・形状はロゴ（重なり合う角丸ブロック／ライトブルー）に準拠
   ============================================================= */

:root{
  --blue:        #4a94e0;   /* ロゴのメインブルー */
  --blue-deep:   #2e6cb5;   /* 濃いブルー（リンク・強調） */
  --navy:        #24405e;   /* 見出し・フッター */
  --blue-light:  #a9cdf0;   /* ロゴのライトブルー */
  --blue-pale:   #e8f2fb;   /* 淡い背景 */
  --blue-mist:   #f4f9fd;   /* さらに淡い背景 */
  --grayblue:    #c9d4e0;   /* ロゴのグレーブルー */
  --ink:         #333d4a;   /* 本文 */
  --muted:       #67788c;   /* 補足テキスト */
  --line:        #dbe6f0;   /* 罫線 */
  --sun:         #f39c3d;   /* CTA（太陽のオレンジ） */
  --sun-deep:    #e9832a;
  --line-green:  #06c755;   /* LINEブランドカラー */
  --white:       #ffffff;

  --grad-blue:  linear-gradient(135deg,#5da3ea 0%,#4a94e0 55%,#3b7fd0 100%);
  --grad-sun:   linear-gradient(135deg,#f7ab4b 0%,#f39c3d 55%,#ec8129 100%);
  --grad-sky:   linear-gradient(160deg,#eaf4fd 0%,#f6fafe 45%,#fdfeff 100%);

  --shadow-sm:  0 2px 10px rgba(58,111,171,.08);
  --shadow-md:  0 10px 30px rgba(58,111,171,.12);
  --shadow-lg:  0 18px 44px rgba(46,95,150,.16);

  /* ロゴブロックを模した角丸（1角だけ小さい） */
  --r-block: 26px 26px 26px 6px;
  --r-block2: 26px 26px 6px 26px;

  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --font-en: "Quicksand", "Noto Sans JP", sans-serif;

  --header-h: 78px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body{
  font-family:var(--font-jp);
  color:var(--ink);
  font-size:16px;
  line-height:1.9;
  letter-spacing:.02em;
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--blue-deep); text-decoration:none; }
a:hover{ opacity:.85; }
ul,ol{ list-style:none; }
strong{ font-weight:700; }
em{ font-style:normal; color:var(--blue-deep); font-weight:700; }
.marker{ background:linear-gradient(transparent 62%, #fde9c8 62%); font-weight:700; }
.marker-blue{ background:linear-gradient(transparent 62%, #cfe5fa 62%); font-weight:700; }

.container{ max-width:1120px; margin:0 auto; padding:0 24px; }
.container-narrow{ max-width:860px; margin:0 auto; padding:0 24px; }

/* ---------- 見出し ---------- */
.sec{ padding:96px 0; }
.sec-tight{ padding:72px 0; }
.sec-head{ text-align:center; margin-bottom:56px; }
.sec-head .en{
  font-family:var(--font-en);
  font-weight:600;
  color:var(--blue);
  letter-spacing:.14em;
  font-size:15px;
  text-transform:lowercase;
  display:inline-flex; align-items:center; gap:10px;
}
.sec-head .en::before,.sec-head .en::after{
  content:""; width:22px; height:3px; border-radius:3px;
  background:var(--blue-light);
}
.sec-head h2{
  font-family:var(--font-head);
  font-size:clamp(26px,3.6vw,38px);
  line-height:1.5;
  color:var(--navy);
  font-weight:700;
  margin-top:10px;
}
.sec-head h2 .accent{ color:var(--blue); }
.sec-head .lead{ margin-top:18px; color:var(--muted); font-size:15.5px; }
.sec-lead{ text-align:center; max-width:760px; margin:-28px auto 48px; color:var(--muted); }

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:700; font-size:17px; letter-spacing:.04em;
  padding:18px 44px; border-radius:999px; border:none; cursor:pointer;
  transition:transform .25s,box-shadow .25s,opacity .25s;
  font-family:var(--font-jp);
}
.btn svg{ flex-shrink:0; }
.btn-sun{
  background:var(--grad-sun); color:#fff;
  box-shadow:0 10px 24px rgba(236,129,41,.35);
}
.btn-sun:hover{ transform:translateY(-3px); box-shadow:0 16px 30px rgba(236,129,41,.42); opacity:1; }
.btn-blue{
  background:var(--grad-blue); color:#fff;
  box-shadow:0 10px 24px rgba(59,127,208,.32);
}
.btn-blue:hover{ transform:translateY(-3px); opacity:1; }
.btn-ghost{
  background:#fff; color:var(--blue-deep);
  border:2px solid var(--blue-light);
}
.btn-ghost:hover{ background:var(--blue-mist); opacity:1; }
.btn-line{
  background:linear-gradient(135deg,#1ed160 0%,#06c755 55%,#05b34c 100%); color:#fff;
  box-shadow:0 10px 24px rgba(6,199,85,.32);
}
.btn-line:hover{ transform:translateY(-3px); box-shadow:0 16px 30px rgba(6,199,85,.4); opacity:1; }
.btn-small{ padding:12px 28px; font-size:15px; }
.btn-arrow::after{
  content:""; width:8px; height:8px;
  border-top:2.5px solid currentColor; border-right:2.5px solid currentColor;
  transform:rotate(45deg); margin-left:2px;
}

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(219,230,240,.7);
  transition:box-shadow .3s;
}
.site-header.is-scrolled{ box-shadow:var(--shadow-sm); }
.header-inner{
  max-width:1380px; margin:0 auto; padding:0 24px;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand img{ height:48px; width:auto; }
.brand .brand-note{ font-size:11px; color:var(--muted); letter-spacing:.08em; }
.gnav ul{ display:flex; align-items:center; gap:2px; }
.gnav a{
  display:block; padding:10px 11px; font-size:14px; font-weight:600;
  color:var(--ink); border-radius:12px; position:relative; white-space:nowrap;
}
.gnav a:hover{ background:var(--blue-mist); color:var(--blue-deep); opacity:1; }
.gnav a.is-current{ color:var(--blue-deep); }
.gnav a.is-current::after{
  content:""; position:absolute; left:13px; right:13px; bottom:4px; height:3px;
  border-radius:3px; background:var(--blue-light);
}
.header-cta{ display:flex; align-items:center; gap:12px; }
.header-tel{
  display:flex; flex-direction:column; align-items:flex-start; line-height:1.3;
}
.header-tel .tel-num{
  font-family:var(--font-en); font-weight:700; font-size:21px; color:var(--navy);
  display:flex; align-items:center; gap:6px;
}
.header-tel .tel-num svg{ color:var(--blue); }
.header-tel .tel-note{ font-size:10.5px; color:var(--muted); letter-spacing:.05em; }
.header-contact-btn{ padding:13px 26px; font-size:15px; }

/* ハンバーガー */
.menu-btn{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:52px; height:52px; border-radius:16px; border:none; cursor:pointer;
  background:var(--blue-pale);
}
.menu-btn span{ width:22px; height:2.5px; border-radius:2px; background:var(--blue-deep); transition:.3s; }
.menu-btn.is-open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.menu-btn.is-open span:nth-child(2){ opacity:0; }
.menu-btn.is-open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* SPドロワー */
.drawer{
  display:none; position:fixed; inset:var(--header-h) 0 0 0; z-index:99;
  background:rgba(244,249,253,.98); backdrop-filter:blur(8px);
  padding:32px 24px 120px; overflow-y:auto;
}
.drawer.is-open{ display:block; }
.drawer > ul{ display:flex; flex-direction:column; gap:4px; max-width:480px; margin:0 auto; }
.drawer > ul a{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; background:#fff; border-radius:16px;
  font-weight:700; color:var(--navy); box-shadow:var(--shadow-sm);
}
.drawer > ul a::after{
  content:""; width:7px; height:7px;
  border-top:2px solid var(--blue); border-right:2px solid var(--blue);
  transform:rotate(45deg);
}
.drawer .drawer-cta{ margin-top:24px; display:flex; flex-direction:column; gap:12px; max-width:480px; margin-inline:auto; }
.drawer .drawer-cta .btn{ width:100%; }

/* ---------- ヒーロー（トップ） ---------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--grad-sky);
  padding:84px 0 120px;
}
.hero-inner{ position:relative; z-index:2; max-width:1120px; margin:0 auto; padding:0 24px; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.hero-copy .hero-tag{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1.5px solid var(--blue-light); color:var(--blue-deep);
  font-weight:700; font-size:14px; letter-spacing:.06em;
  padding:8px 20px; border-radius:999px; box-shadow:var(--shadow-sm);
}
.hero-copy .hero-tag::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--grad-sun);
}
.hero-copy h1{
  font-family:var(--font-head);
  font-size:clamp(30px,3.6vw,44px);
  line-height:1.45; color:var(--navy); font-weight:700;
  margin:22px 0 18px;
}
.hero-copy h1 .blue{ color:var(--blue); }
.hero-copy .hero-sub{ font-size:16.5px; color:#4a5a6d; max-width:560px; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.hero-badges li{
  background:#fff; border-radius:999px; padding:9px 20px;
  font-size:14px; font-weight:700; color:var(--blue-deep);
  box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:7px;
}
.hero-badges li svg{ color:var(--sun); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; align-items:center; }
.hero-tel{
  background:#fff; border-radius:20px; padding:14px 26px;
  box-shadow:var(--shadow-sm); line-height:1.35;
}
.hero-tel .num{
  font-family:var(--font-en); font-size:26px; font-weight:700; color:var(--navy);
  display:flex; align-items:center; gap:8px;
}
.hero-tel .num svg{ color:var(--blue); }
.hero-tel .note{ font-size:11.5px; color:var(--muted); }

/* ヒーロー右の実績カード */
.hero-stats{
  display:flex; flex-direction:column; gap:18px; position:relative;
}
.stat-card{
  background:rgba(255,255,255,.9); backdrop-filter:blur(4px);
  border-radius:var(--r-block); box-shadow:var(--shadow-md);
  padding:26px 30px; display:flex; align-items:center; gap:20px;
  border:1px solid rgba(169,205,240,.4);
}
.stat-card:nth-child(2){ border-radius:var(--r-block2); transform:translateX(26px); }
.stat-card .stat-icon{
  width:58px; height:58px; flex-shrink:0; border-radius:18px 18px 18px 5px;
  background:var(--blue-pale); display:flex; align-items:center; justify-content:center;
}
.stat-card .stat-label{ font-size:13.5px; font-weight:700; color:var(--muted); }
.stat-card .stat-num{
  font-family:var(--font-en); font-weight:700; color:var(--blue-deep);
  font-size:40px; line-height:1.15; letter-spacing:.01em;
}
.stat-card .stat-num .unit{ font-family:var(--font-head); font-size:18px; color:var(--navy); margin-left:2px; }
.stat-card .stat-note{ font-size:10.5px; color:var(--muted); }

/* ヒーロー装飾（ロゴブロック） */
.hero-deco{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-deco span{
  position:absolute; display:block; opacity:.5;
  animation:float 9s ease-in-out infinite;
}
.hero-deco .b1{ width:170px; height:120px; background:#bcd9f5; border-radius:48px 48px 48px 10px; top:-40px; right:12%; animation-delay:0s; }
.hero-deco .b2{ width:110px; height:80px; background:#d5e2ef; border-radius:34px 34px 10px 34px; bottom:60px; left:4%; animation-delay:1.6s; }
.hero-deco .b3{ width:80px; height:58px; background:#9ec9f2; border-radius:26px 26px 26px 6px; top:120px; left:12%; opacity:.35; animation-delay:3s; }
.hero-deco .b4{ width:220px; height:150px; background:#e3eef9; border-radius:60px 60px 14px 60px; bottom:-60px; right:-40px; animation-delay:2.2s; }
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}

/* ヒーロー下部の波 */
.hero-wave{ position:absolute; left:0; right:0; bottom:-1px; z-index:1; }
.hero-wave svg{ display:block; width:100%; height:70px; }

/* ---------- お悩みセクション ---------- */
.worry{ background:#fff; }
.worry-list{
  max-width:820px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.worry-list li{
  background:var(--blue-mist); border:1.5px solid var(--line);
  border-radius:18px; padding:18px 22px 18px 56px; position:relative;
  font-weight:500; font-size:15.5px;
}
.worry-list li::before{
  content:""; position:absolute; left:20px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:7px 7px 7px 2px;
  background:var(--grad-blue);
}
.worry-list li::after{
  content:""; position:absolute; left:26px; top:50%;
  width:9px; height:5px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff;
  transform:translateY(-70%) rotate(-45deg);
}
.worry-close{
  margin-top:48px; text-align:center;
}
.worry-close .arrow-down{
  width:0; height:0; margin:0 auto 24px;
  border-left:30px solid transparent; border-right:30px solid transparent;
  border-top:22px solid var(--blue-light);
}
.worry-close p{ font-family:var(--font-head); font-size:clamp(20px,3vw,28px); font-weight:700; color:var(--navy); line-height:1.7; }
.worry-close p .big{ color:var(--blue); font-size:1.15em; }

/* ---------- 特徴カード ---------- */
.features{ background:var(--blue-mist); position:relative; overflow:hidden; }
.features::before{
  content:""; position:absolute; width:340px; height:240px; right:-120px; top:-80px;
  background:#e0edf9; border-radius:90px 90px 90px 20px;
}
.feature-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px; position:relative; z-index:2;
}
.feature-card{
  background:#fff; border-radius:var(--r-block);
  box-shadow:var(--shadow-md); padding:38px 30px 34px;
  position:relative; transition:transform .3s, box-shadow .3s;
}
.feature-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.feature-card .f-num{
  position:absolute; top:18px; right:24px;
  font-family:var(--font-en); font-weight:700; font-size:15px; color:var(--blue-light);
  letter-spacing:.1em;
}
.feature-card .f-icon{
  width:76px; height:76px; border-radius:24px 24px 24px 6px;
  background:var(--blue-pale);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.feature-card h3{
  font-family:var(--font-head); font-size:20px; color:var(--navy); line-height:1.5; margin-bottom:12px;
}
.feature-card h3 .accent{ color:var(--blue); }
.feature-card p{ font-size:14.5px; color:#54667c; line-height:1.85; }

/* ---------- 実績バンド ---------- */
.record{
  background:linear-gradient(135deg,#2c5c96 0%,#3b7fd0 60%,#4a94e0 100%);
  color:#fff; position:relative; overflow:hidden;
}
.record::before{
  content:""; position:absolute; width:300px; height:210px; left:-90px; bottom:-70px;
  background:rgba(255,255,255,.07); border-radius:80px 80px 80px 18px;
}
.record::after{
  content:""; position:absolute; width:220px; height:150px; right:-60px; top:-40px;
  background:rgba(255,255,255,.08); border-radius:60px 60px 14px 60px;
}
.record .sec-head .en{ color:#cfe5fa; }
.record .sec-head .en::before,.record .sec-head .en::after{ background:rgba(255,255,255,.4); }
.record .sec-head h2{ color:#fff; }
.record-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; max-width:860px; margin:0 auto; position:relative; z-index:2; }
.record-item{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  border-radius:var(--r-block); padding:36px 30px; text-align:center;
  backdrop-filter:blur(4px);
}
.record-item .r-label{ font-weight:700; font-size:16px; letter-spacing:.08em; }
.record-item .r-num{
  font-family:var(--font-en); font-weight:700; font-size:clamp(52px,7vw,76px); line-height:1.1;
  margin:8px 0 4px; color:#fff; text-shadow:0 4px 20px rgba(0,0,0,.15);
}
.record-item .r-num .unit{ font-family:var(--font-head); font-size:.38em; margin-left:4px; }
.record-item .r-note{ font-size:12px; color:#d8e9fa; }
.record-foot{ text-align:center; margin-top:34px; font-size:13px; color:#d8e9fa; position:relative; z-index:2; }

/* ---------- 対応疾患 ---------- */
.disease-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.disease-card{
  background:#fff; border:1.5px solid var(--line); border-radius:22px;
  padding:30px 18px 26px; text-align:center; transition:.3s;
  box-shadow:var(--shadow-sm);
}
.disease-card:hover{ border-color:var(--blue-light); transform:translateY(-5px); box-shadow:var(--shadow-md); }
.disease-card .d-icon{
  width:68px; height:68px; margin:0 auto 16px; border-radius:50%;
  background:var(--blue-pale); display:flex; align-items:center; justify-content:center;
}
.disease-card h3{ font-family:var(--font-head); font-size:17px; color:var(--navy); }
.disease-card .d-en{ font-family:var(--font-en); font-size:10.5px; color:var(--blue-light); letter-spacing:.1em; margin-top:4px; font-weight:600; }
.disease-note{ text-align:center; margin-top:28px; color:var(--muted); font-size:14px; }

/* 疾患詳細ページ */
.disease-sec{
  background:#fff; border:1.5px solid var(--line); border-radius:28px;
  padding:44px 46px; margin-bottom:34px; box-shadow:var(--shadow-sm);
}
.disease-sec .d-head{ display:flex; align-items:center; gap:18px; margin-bottom:20px; flex-wrap:wrap; }
.disease-sec .d-head .d-icon{
  width:64px; height:64px; border-radius:20px 20px 20px 5px; flex-shrink:0;
  background:var(--blue-pale); display:flex; align-items:center; justify-content:center;
}
.disease-sec h2{ font-family:var(--font-head); font-size:24px; color:var(--navy); }
.disease-sec h2 small{ display:block; font-family:var(--font-en); font-size:11px; color:var(--blue); letter-spacing:.12em; font-weight:600; }
.disease-sec h3{
  font-size:16.5px; color:var(--blue-deep); margin:26px 0 10px;
  padding-left:14px; border-left:4px solid var(--blue-light); line-height:1.5;
}
.disease-sec p{ font-size:15px; color:#48586c; }
.point-list li{
  position:relative; padding:10px 0 10px 34px; font-size:15px; color:#48586c;
  border-bottom:1px dashed var(--line);
}
.point-list li:last-child{ border-bottom:none; }
.point-list li::before{
  content:""; position:absolute; left:4px; top:16px;
  width:16px; height:16px; border-radius:50%;
  background:var(--blue-pale); border:2px solid var(--blue-light);
}
.point-list li::after{
  content:""; position:absolute; left:9px; top:21px;
  width:7px; height:4px; border-left:2px solid var(--blue-deep); border-bottom:2px solid var(--blue-deep);
  transform:rotate(-45deg);
}

/* ---------- 料金 ---------- */
.zero-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:56px; }
.zero-card{
  background:#fff; border-radius:var(--r-block); box-shadow:var(--shadow-md);
  text-align:center; padding:34px 20px 30px; position:relative;
}
.zero-card .z-label{ font-weight:700; font-size:16.5px; color:var(--navy); }
.zero-card .z-num{
  font-family:var(--font-en); font-weight:700; font-size:64px; line-height:1.1;
  color:var(--blue); margin-top:6px;
}
.zero-card .z-num .yen{ font-size:.42em; font-family:var(--font-head); color:var(--navy); }
.zero-card .z-note{ font-size:12px; color:var(--muted); margin-top:6px; }
.price-table-wrap{ overflow-x:auto; }
table.price-table{
  width:100%; border-collapse:separate; border-spacing:0; background:#fff;
  border-radius:22px; overflow:hidden; box-shadow:var(--shadow-md); min-width:560px;
}
table.price-table th, table.price-table td{
  padding:22px 26px; text-align:left; border-bottom:1px solid var(--line);
  font-size:15.5px; vertical-align:middle;
}
table.price-table tr:last-child th, table.price-table tr:last-child td{ border-bottom:none; }
table.price-table th{
  background:var(--blue-pale); color:var(--navy); font-weight:700; width:34%;
}
table.price-table td .big{
  font-size:20px; font-weight:700; color:var(--blue-deep);
}
table.price-table td small{ color:var(--muted); font-size:12.5px; display:block; }

/* 手出し0円 図解 */
.payflow{
  background:#fff; border-radius:28px; box-shadow:var(--shadow-md);
  padding:46px 40px; margin-top:56px;
}
.payflow h3{
  text-align:center; font-family:var(--font-head); font-size:clamp(20px,2.6vw,26px);
  color:var(--navy); margin-bottom:8px;
}
.payflow h3 .accent{ color:var(--sun-deep); }
.payflow .payflow-lead{ text-align:center; color:var(--muted); font-size:14px; margin-bottom:36px; }
.payflow-steps{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:12px; align-items:stretch; }
.payflow-step{
  background:var(--blue-mist); border:1.5px solid var(--line); border-radius:20px;
  padding:24px 18px; text-align:center;
}
.payflow-step .p-icon{ width:58px; height:58px; margin:0 auto 10px; border-radius:18px 18px 18px 5px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); }
.payflow-step .p-t{ font-weight:700; color:var(--navy); font-size:15.5px; line-height:1.5; }
.payflow-step .p-d{ font-size:12.5px; color:var(--muted); margin-top:6px; line-height:1.7; }
.payflow-step.is-sun{ background:#fef4e7; border-color:#f8d9b0; }
.payflow-arrow{ display:flex; align-items:center; justify-content:center; }
.payflow-arrow span{
  width:0; height:0; border-top:12px solid transparent; border-bottom:12px solid transparent;
  border-left:16px solid var(--blue-light);
}
.payflow-note{ margin-top:26px; font-size:12.5px; color:var(--muted); }

/* 料金シミュレーション */
.sim-box{
  margin-top:56px; background:var(--blue-mist); border-radius:28px; padding:44px 40px;
  border:1.5px solid var(--line);
}
.sim-box h3{ text-align:center; font-family:var(--font-head); font-size:22px; color:var(--navy); margin-bottom:30px; }
.sim-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.sim-card{ background:#fff; border-radius:22px; padding:30px 28px; box-shadow:var(--shadow-sm); }
.sim-card h4{
  font-size:16px; color:var(--blue-deep); margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.sim-card h4::before{ content:""; width:12px; height:12px; border-radius:4px 4px 4px 1px; background:var(--grad-blue); }
.sim-card dl{ font-size:14.5px; }
.sim-card dl div{ display:flex; justify-content:space-between; gap:12px; padding:9px 2px; border-bottom:1px dashed var(--line); }
.sim-card dl div:last-child{ border-bottom:none; }
.sim-card dt{ color:var(--muted); }
.sim-card dd{ font-weight:700; color:var(--navy); text-align:right; }
.sim-card .sim-total dd{ color:var(--sun-deep); font-size:17px; }
.sim-note{ font-size:12px; color:var(--muted); margin-top:20px; }

/* ---------- 流れ ---------- */
.flow-list{ max-width:820px; margin:0 auto; }
.flow-item{
  display:grid; grid-template-columns:96px 1fr; gap:28px; position:relative;
  padding-bottom:44px;
}
.flow-item:last-child{ padding-bottom:0; }
.flow-item::before{
  content:""; position:absolute; left:47px; top:96px; bottom:0; width:3px;
  background:linear-gradient(var(--blue-light), var(--blue-pale));
  border-radius:3px;
}
.flow-item:last-child::before{ display:none; }
.flow-step-no{
  width:96px; height:96px; border-radius:30px 30px 30px 8px;
  background:var(--grad-blue); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(59,127,208,.3); flex-shrink:0;
  position:relative; z-index:2;
}
.flow-step-no .s-en{ font-family:var(--font-en); font-size:10.5px; letter-spacing:.18em; font-weight:600; opacity:.85; }
.flow-step-no .s-num{ font-family:var(--font-en); font-size:34px; font-weight:700; line-height:1.1; }
.flow-item.is-sun .flow-step-no{ background:var(--grad-sun); box-shadow:0 10px 24px rgba(236,129,41,.3); }
.flow-body{
  background:#fff; border:1.5px solid var(--line); border-radius:24px;
  padding:28px 32px; box-shadow:var(--shadow-sm);
}
.flow-body h3{
  font-family:var(--font-head); font-size:19px; color:var(--navy); margin-bottom:8px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.flow-body h3 .tag{
  font-family:var(--font-jp); font-size:11.5px; background:#fef4e7; color:var(--sun-deep);
  border:1px solid #f8d9b0; padding:3px 12px; border-radius:999px; font-weight:700;
}
.flow-body p{ font-size:14.5px; color:#4c5d71; }
.flow-body .flow-hint{
  margin-top:12px; background:var(--blue-mist); border-radius:14px; padding:12px 18px;
  font-size:13px; color:var(--blue-deep);
}

/* トップ用・簡易フロー */
.flow-mini{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.flow-mini-item{
  background:#fff; border-radius:20px; box-shadow:var(--shadow-sm); border:1.5px solid var(--line);
  padding:26px 14px 22px; text-align:center; position:relative;
}
.flow-mini-item:not(:last-child)::after{
  content:""; position:absolute; right:-13px; top:50%; transform:translateY(-50%); z-index:2;
  width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent;
  border-left:11px solid var(--blue-light);
}
.flow-mini-item .fm-no{ font-family:var(--font-en); color:var(--blue-light); font-weight:700; font-size:13px; letter-spacing:.12em; }
.flow-mini-item .fm-icon{ width:54px; height:54px; margin:10px auto; border-radius:17px 17px 17px 4px; background:var(--blue-pale); display:flex; align-items:center; justify-content:center; }
.flow-mini-item h3{ font-size:14.5px; color:var(--navy); font-weight:700; line-height:1.5; }

/* ---------- 代表挨拶 ---------- */
.greeting{ background:var(--grad-sky); position:relative; overflow:hidden; }
.greeting::before{
  content:""; position:absolute; width:280px; height:200px; right:-80px; bottom:-60px;
  background:#e2eefa; border-radius:80px 80px 18px 80px;
}
.greeting-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start; position:relative; z-index:2; }
.greeting-photo{ position:relative; }
.greeting-photo img{
  border-radius:36px 36px 36px 10px; box-shadow:var(--shadow-lg);
  aspect-ratio:4/4.6; object-fit:cover; object-position:top;
}
.greeting-photo .name-plate{
  position:absolute; left:22px; bottom:-24px; background:#fff; border-radius:18px;
  box-shadow:var(--shadow-md); padding:14px 26px; line-height:1.4;
}
.greeting-photo .name-plate .role{ font-size:11.5px; color:var(--blue); font-weight:700; letter-spacing:.08em; }
.greeting-photo .name-plate .name{ font-family:var(--font-head); font-size:21px; color:var(--navy); font-weight:700; }
.greeting-photo .name-plate .name-en{ font-family:var(--font-en); font-size:10.5px; color:var(--muted); letter-spacing:.14em; }
.greeting-body h3{
  font-family:var(--font-head); font-size:clamp(21px,2.8vw,27px); color:var(--navy);
  line-height:1.7; margin-bottom:20px;
}
.greeting-body p{ font-size:15px; color:#48586c; margin-bottom:16px; }
.greeting-sign{ margin-top:26px; text-align:right; font-family:var(--font-head); color:var(--navy); }
.greeting-sign .sign-title{ font-size:12.5px; color:var(--muted); }
.greeting-sign .sign-name{ font-size:22px; font-weight:700; }

/* ---------- FAQ ---------- */
.qa-list{ max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.qa{
  background:#fff; border:1.5px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.qa summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px;
  padding:22px 60px 22px 24px; font-weight:700; font-size:16px; color:var(--navy);
  position:relative; line-height:1.6;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary .q-mark{
  width:40px; height:40px; flex-shrink:0; border-radius:13px 13px 13px 3px;
  background:var(--grad-blue); color:#fff; font-family:var(--font-en);
  display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700;
}
.qa summary::after{
  content:""; position:absolute; right:26px; top:50%;
  width:10px; height:10px; border-right:2.5px solid var(--blue); border-bottom:2.5px solid var(--blue);
  transform:translateY(-70%) rotate(45deg); transition:.3s;
}
.qa[open] summary::after{ transform:translateY(-30%) rotate(225deg); }
.qa .qa-body{
  padding:4px 26px 26px 80px; font-size:14.5px; color:#4c5d71;
  display:flex; gap:16px;
}
.qa .a-mark{
  width:40px; height:40px; flex-shrink:0; margin-left:-56px; border-radius:13px 13px 13px 3px;
  background:var(--grad-sun); color:#fff; font-family:var(--font-en);
  display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700;
}

/* ---------- お問い合わせCTA帯 ---------- */
.cta-band{
  background:linear-gradient(135deg,#2c5c96 0%,#3b7fd0 55%,#4a94e0 100%);
  position:relative; overflow:hidden; color:#fff; text-align:center;
}
.cta-band::before{
  content:""; position:absolute; width:260px; height:180px; left:-70px; top:-50px;
  background:rgba(255,255,255,.08); border-radius:70px 70px 70px 16px;
}
.cta-band::after{
  content:""; position:absolute; width:300px; height:200px; right:-80px; bottom:-70px;
  background:rgba(255,255,255,.07); border-radius:80px 80px 18px 80px;
}
.cta-band .cta-inner{ position:relative; z-index:2; }
.cta-band .cta-en{ font-family:var(--font-en); letter-spacing:.16em; font-size:14px; color:#cfe5fa; font-weight:600; }
.cta-band h2{
  font-family:var(--font-head); font-size:clamp(24px,3.4vw,34px); margin:12px 0 14px; line-height:1.6;
}
.cta-band .cta-lead{ color:#e2effb; font-size:15px; max-width:640px; margin:0 auto; }
.cta-badges{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:26px 0 34px; }
.cta-badges li{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
  border-radius:999px; padding:8px 20px; font-size:13.5px; font-weight:700;
}
.cta-actions{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; align-items:stretch; }
.cta-tel-card{
  background:#fff; color:var(--navy); border-radius:22px; padding:18px 34px;
  box-shadow:var(--shadow-lg); text-align:left; line-height:1.4;
}
.cta-tel-card .label{ font-size:12px; color:var(--blue-deep); font-weight:700; }
.cta-tel-card .num{
  font-family:var(--font-en); font-size:30px; font-weight:700;
  display:flex; align-items:center; gap:10px; color:var(--navy);
}
.cta-tel-card .num svg{ color:var(--sun); }
.cta-tel-card .note{ font-size:11.5px; color:var(--muted); }
.cta-band .btn-sun{ font-size:18px; padding:0 46px; display:inline-flex; align-items:center; }
.cta-mail{ margin-top:26px; font-size:14px; color:#e2effb; }
.cta-mail a{ color:#fff; font-weight:700; text-decoration:underline; }

/* ---------- 下層ページ共通 ---------- */
.page-hero{
  background:var(--grad-sky); position:relative; overflow:hidden;
  padding:72px 0 64px; text-align:center;
}
.page-hero::before{
  content:""; position:absolute; width:200px; height:140px; right:6%; top:-50px;
  background:#dcebf9; border-radius:54px 54px 54px 12px; opacity:.8;
}
.page-hero::after{
  content:""; position:absolute; width:150px; height:100px; left:3%; bottom:-30px;
  background:#e6f0fa; border-radius:40px 40px 10px 40px; opacity:.9;
}
.page-hero .en{
  font-family:var(--font-en); color:var(--blue); font-weight:600; letter-spacing:.16em; font-size:14px;
  position:relative; z-index:2;
}
.page-hero h1{
  font-family:var(--font-head); font-size:clamp(26px,4vw,38px); color:var(--navy);
  margin-top:8px; position:relative; z-index:2; line-height:1.5;
}
.breadcrumb{
  background:#fff; border-bottom:1px solid var(--line);
}
.breadcrumb ol{
  max-width:1120px; margin:0 auto; padding:12px 24px; display:flex; flex-wrap:wrap; gap:8px;
  font-size:12.5px; color:var(--muted);
}
.breadcrumb li:not(:last-child)::after{ content:"›"; margin-left:8px; color:var(--grayblue); }
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--blue-deep); }

/* 記事風の本文 */
.article h2{
  font-family:var(--font-head); font-size:clamp(21px,2.8vw,27px); color:var(--navy);
  margin:56px 0 22px; padding:14px 22px; line-height:1.5;
  background:var(--blue-mist); border-radius:16px; border-left:6px solid var(--blue);
}
.article h2:first-child{ margin-top:0; }
.article h3{
  font-size:18px; color:var(--blue-deep); margin:34px 0 12px; line-height:1.6;
  padding-left:14px; border-left:4px solid var(--blue-light);
}
.article p{ margin-bottom:16px; font-size:15.5px; color:#42536a; }
.article .note{ font-size:12.5px; color:var(--muted); }

/* 情報カード2枚組（基礎年金・厚生年金など） */
.duo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:28px 0; }
.duo-card{
  background:#fff; border:1.5px solid var(--line); border-radius:22px; padding:30px 28px;
  box-shadow:var(--shadow-sm);
}
.duo-card h4{
  font-family:var(--font-head); font-size:18px; color:var(--navy); margin-bottom:6px;
  display:flex; align-items:center; gap:10px;
}
.duo-card h4::before{ content:""; width:14px; height:14px; border-radius:5px 5px 5px 1px; background:var(--grad-blue); flex-shrink:0; }
.duo-card .duo-tag{ font-size:12px; color:var(--blue); font-weight:700; margin-bottom:10px; }
.duo-card p{ font-size:14px; color:#4c5d71; margin:0; }
.duo-card .amount{ margin-top:14px; background:var(--blue-mist); border-radius:14px; padding:12px 16px; font-size:13.5px; color:var(--navy); }
.duo-card .amount strong{ color:var(--blue-deep); font-size:16px; }

/* 要件3つ */
.req-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:28px 0; }
.req-card{
  background:#fff; border-radius:var(--r-block); box-shadow:var(--shadow-md);
  padding:32px 26px; text-align:center; position:relative;
}
.req-card .req-no{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  background:var(--grad-sun); color:#fff; font-family:var(--font-en); font-weight:700;
  width:44px; height:44px; border-radius:14px 14px 14px 4px;
  display:flex; align-items:center; justify-content:center; font-size:19px;
  box-shadow:0 6px 16px rgba(236,129,41,.35);
}
.req-card h4{ font-family:var(--font-head); font-size:18px; color:var(--navy); margin:16px 0 10px; }
.req-card p{ font-size:13.5px; color:#4c5d71; text-align:left; }

/* ---------- 事務所概要テーブル ---------- */
table.info-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:#fff; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-md);
}
table.info-table th, table.info-table td{
  padding:20px 26px; border-bottom:1px solid var(--line); text-align:left;
  font-size:15px; vertical-align:top;
}
table.info-table tr:last-child th, table.info-table tr:last-child td{ border-bottom:none; }
table.info-table th{ background:var(--blue-pale); color:var(--navy); font-weight:700; width:30%; white-space:nowrap; }
.map-wrap{
  margin-top:34px; border-radius:24px; overflow:hidden; box-shadow:var(--shadow-md);
  border:1.5px solid var(--line);
}
.map-wrap iframe{ display:block; width:100%; height:400px; border:0; }

/* ---------- フォーム ---------- */
.contact-panel{
  background:#fff; border-radius:28px; box-shadow:var(--shadow-md); border:1.5px solid var(--line);
  padding:52px 54px;
}
.form-row{ margin-bottom:26px; }
.form-row label.form-label{
  display:flex; align-items:center; gap:10px; font-weight:700; color:var(--navy);
  margin-bottom:10px; font-size:15px;
}
.tag-req,.tag-opt{
  font-size:10.5px; font-weight:700; padding:2.5px 10px; border-radius:999px; letter-spacing:.06em;
}
.tag-req{ background:#fdeade; color:var(--sun-deep); border:1px solid #f6cf9e; }
.tag-opt{ background:var(--blue-mist); color:var(--muted); border:1px solid var(--line); }
input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%; border:1.5px solid var(--line); border-radius:14px;
  padding:14px 18px; font-size:16px; font-family:var(--font-jp); color:var(--ink);
  background:var(--blue-mist); transition:.25s; -webkit-appearance:none; appearance:none;
}
select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a94e0' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--blue); background:#fff;
  box-shadow:0 0 0 4px rgba(74,148,224,.13);
}
textarea{ min-height:170px; resize:vertical; }
.radio-group{ display:flex; flex-wrap:wrap; gap:10px; }
.radio-group label{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--blue-mist); border:1.5px solid var(--line); border-radius:999px;
  padding:10px 20px; font-size:14.5px; font-weight:500; transition:.2s;
}
.radio-group input{ accent-color:var(--blue); width:16px; height:16px; }
.radio-group label:has(input:checked){
  background:#fff; border-color:var(--blue); color:var(--blue-deep); font-weight:700;
  box-shadow:0 0 0 3px rgba(74,148,224,.12);
}
.consent-row{
  text-align:center; font-size:14px; margin:30px 0 22px; color:#4c5d71;
}
.consent-row label{ display:inline-flex; gap:10px; align-items:center; cursor:pointer; }
.consent-row input{ accent-color:var(--blue); width:18px; height:18px; }
.form-submit{ text-align:center; }
.form-submit .btn{ width:min(420px,100%); font-size:18px; }
.form-note{ font-size:12.5px; color:var(--muted); margin-top:16px; text-align:center; }

/* 連絡方法カード（contact上部） */
.contact-methods{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:64px; }
.method-card.is-line .m-icon{ background:#e6f9ee; }
.method-card.is-line h3{ color:#059b44; }

/* LINEパネル */
.line-panel{
  background:linear-gradient(135deg,#f0fcf5 0%,#e8faf0 100%);
  border:1.5px solid #bfeed3; border-radius:28px;
  padding:48px 50px; margin-bottom:64px; position:relative; overflow:hidden;
}
.line-panel::before{
  content:""; position:absolute; right:-40px; bottom:-40px; width:200px; height:140px;
  background:rgba(6,199,85,.08); border-radius:60px 60px 14px 60px;
}
.line-grid{ display:grid; grid-template-columns:auto 1fr; gap:44px; align-items:center; position:relative; z-index:1; }
.line-qr{
  background:#fff; border-radius:22px; padding:16px; box-shadow:var(--shadow-md);
  width:240px;
}
.line-qr img{ width:100%; height:auto; }
.line-qr .qr-note{ text-align:center; font-size:11.5px; color:var(--muted); margin-top:8px; }
.line-body h3{
  font-family:var(--font-head); font-size:clamp(20px,2.6vw,25px); color:var(--navy); margin-bottom:12px; line-height:1.6;
}
.line-body h3 .green{ color:#059b44; }
.line-body p{ font-size:14.5px; color:#43604f; margin-bottom:8px; }
.line-steps{ display:flex; flex-direction:column; gap:8px; margin:18px 0 24px; }
.line-steps li{
  background:#fff; border-radius:14px; padding:11px 18px; font-size:14px; font-weight:500;
  color:var(--ink); display:flex; align-items:center; gap:12px; box-shadow:var(--shadow-sm);
}
.line-steps li .n{
  width:24px; height:24px; flex-shrink:0; border-radius:8px 8px 8px 2px;
  background:var(--line-green); color:#fff; font-family:var(--font-en); font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
.line-note{ font-size:12px; color:var(--muted); margin-top:14px; }
.method-card{
  background:#fff; border-radius:var(--r-block); box-shadow:var(--shadow-md);
  padding:34px 26px; text-align:center;
}
.method-card .m-icon{
  width:64px; height:64px; margin:0 auto 14px; border-radius:20px 20px 20px 5px;
  background:var(--blue-pale); display:flex; align-items:center; justify-content:center;
}
.method-card h3{ font-family:var(--font-head); font-size:17.5px; color:var(--navy); margin-bottom:6px; }
.method-card .m-main{ font-family:var(--font-en); font-size:22px; font-weight:700; color:var(--blue-deep); word-break:break-all; line-height:1.4; }
.method-card .m-main-jp{ font-size:15px; font-weight:700; color:var(--blue-deep); }
.method-card .m-note{ font-size:12px; color:var(--muted); margin-top:8px; }

/* ---------- フッター ---------- */
.site-footer{
  background:var(--navy); color:#cfdcea; padding:72px 0 0; position:relative; overflow:hidden;
}
.site-footer::before{
  content:""; position:absolute; width:280px; height:190px; right:-70px; top:-60px;
  background:rgba(255,255,255,.04); border-radius:74px 74px 74px 16px;
}
.footer-grid{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:48px; position:relative; z-index:2;
}
.footer-brand .f-logo{
  background:#fff; border-radius:20px; padding:16px 22px; display:inline-block;
  box-shadow:var(--shadow-md);
}
.footer-brand .f-logo img{ height:56px; width:auto; }
.footer-brand p{ font-size:13px; margin-top:18px; line-height:2; color:#b9cbdd; }
.footer-col h4{
  font-family:var(--font-en); font-size:13px; letter-spacing:.16em; color:#8fb4d8;
  margin-bottom:18px; font-weight:600;
}
.footer-col ul li{ margin-bottom:10px; }
.footer-col a{ color:#dbe7f2; font-size:14px; display:inline-flex; align-items:center; gap:8px; }
.footer-col a::before{ content:""; width:5px; height:5px; border-radius:2px; background:var(--blue-light); }
.footer-col a:hover{ color:#fff; }
.footer-info li{ display:flex; gap:10px; font-size:13.5px; margin-bottom:12px; color:#dbe7f2; align-items:flex-start; }
.footer-info svg{ flex-shrink:0; margin-top:4px; color:#8fb4d8; }
.footer-bottom{
  margin-top:56px; border-top:1px solid rgba(255,255,255,.12);
  padding:22px 0; font-size:12px; color:#8ba5bf; text-align:center; position:relative; z-index:2;
}

/* ---------- SP固定CTA ---------- */
.sp-cta{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-top:1px solid var(--line); padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  grid-template-columns:1fr 1fr 1fr; gap:8px;
}
.sp-cta a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border-radius:16px; font-weight:700; font-size:12.5px; padding:9px 4px 8px;
  white-space:nowrap; line-height:1.3;
}
.sp-cta .sp-tel{ background:var(--grad-blue); color:#fff; box-shadow:0 6px 14px rgba(59,127,208,.3); }
.sp-cta .sp-line{ background:linear-gradient(135deg,#1ed160,#06c755 60%,#05b34c); color:#fff; box-shadow:0 6px 14px rgba(6,199,85,.3); }
.sp-cta .sp-form{ background:var(--grad-sun); color:#fff; box-shadow:0 6px 14px rgba(236,129,41,.3); }

/* ---------- アニメーション ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.1s; } .reveal-d2{ transition-delay:.2s; } .reveal-d3{ transition-delay:.3s; }
.reveal-d4{ transition-delay:.4s; } .reveal-d5{ transition-delay:.5s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-deco span{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- 表示切替ユーティリティ ---------- */
.sp-only{ display:none; }
@media (max-width: 640px){
  .sp-only{ display:inline; }
  .pc-only{ display:none; }
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 1420px){
  .header-tel{ display:none; }
}
@media (max-width: 1150px){
  .gnav{ display:none; }
  .menu-btn{ display:flex; }
}
@media (max-width: 900px){
  .sec{ padding:72px 0; }
  .hero{ padding:56px 0 96px; }
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .hero-copy h1{ font-size:clamp(23px,6.4vw,42px); }
  .hero-stats{ flex-direction:row; }
  .stat-card{ flex:1; flex-direction:column; text-align:center; gap:10px; padding:22px 16px; }
  .stat-card:nth-child(2){ transform:none; }
  .feature-grid{ grid-template-columns:1fr 1fr; }
  .disease-grid{ grid-template-columns:repeat(3,1fr); }
  .record-grid{ grid-template-columns:1fr; max-width:520px; }
  .greeting-grid{ grid-template-columns:1fr; gap:52px; }
  .greeting-photo{ max-width:380px; margin:0 auto; }
  .flow-mini{ grid-template-columns:1fr 1fr; }
  .flow-mini-item:not(:last-child)::after{ display:none; }
  .payflow-steps{ grid-template-columns:1fr; }
  .payflow-arrow span{ transform:rotate(90deg); }
  .sim-grid{ grid-template-columns:1fr; }
  .duo-grid{ grid-template-columns:1fr; }
  .req-grid{ grid-template-columns:1fr; gap:30px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .contact-methods{ grid-template-columns:1fr 1fr; }
  .contact-panel{ padding:40px 28px; }
  .line-panel{ padding:36px 26px; }
  .line-grid{ grid-template-columns:1fr; gap:30px; }
  .line-qr{ margin:0 auto; }
  .zero-grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
  .disease-sec{ padding:32px 24px; }
}
@media (max-width: 640px){
  body{ font-size:15px; padding-bottom:74px; }
  .sp-cta{ display:grid; }
  .brand img{ height:42px; }
  .hero-stats{ flex-direction:column; }
  .worry-list{ grid-template-columns:1fr; }
  .feature-grid{ grid-template-columns:1fr; }
  .contact-methods{ grid-template-columns:1fr; }
  .disease-grid{ grid-template-columns:1fr 1fr; }
  .flow-item{ grid-template-columns:64px 1fr; gap:16px; }
  .flow-step-no{ width:64px; height:64px; border-radius:20px 20px 20px 6px; }
  .flow-step-no .s-num{ font-size:24px; }
  .flow-item::before{ left:31px; top:64px; }
  .flow-body{ padding:22px 20px; }
  .qa summary{ font-size:15px; padding:18px 52px 18px 18px; }
  .qa .qa-body{ padding:2px 20px 22px 66px; font-size:14px; }
  .qa summary .q-mark,.qa .a-mark{ width:34px; height:34px; font-size:15px; }
  .qa .a-mark{ margin-left:-50px; }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .cta-tel-card{ width:100%; text-align:center; }
  .cta-tel-card .num{ justify-content:center; }
  .cta-actions{ flex-direction:column; }
  .cta-band .btn-sun{ width:100%; padding:18px 20px; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-tel{ text-align:center; }
  .hero-tel .num{ justify-content:center; }
  .btn{ padding:16px 30px; }
  .greeting-photo .name-plate{ left:14px; padding:12px 20px; }
  .flow-mini{ grid-template-columns:1fr; max-width:340px; margin-inline:auto; }
  .map-wrap iframe{ height:300px; }
  .sim-box,.payflow{ padding:32px 22px; }
  .origin-card{ padding:32px 24px; }
}