/* ---------- Base ---------- */
:root{
  --blue:#00178c;
  --blue-dk:#093A95;
  --pale:#F5FAFE;
  --orange:#e58100;
  --red:#e8412e;
  --text:#333;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Hiragino Kaku Gothic ProN","Meiryo",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans JP",sans-serif;
  color:var(--text);
  line-height:1.9;
  background:#fff;
}
img{max-width:100%;height:auto;vertical-align:middle}
.container{width:min(1120px,92%);margin-inline:auto}
.container.narrow{width:min(980px,92%)}
.container.medium{width:min(860px,92%)}
.center{text-align:center}
h1,h2,h3{margin:0 0 .6em}
h1{font-size:clamp(20px,3.2vw,32px);color:var(--blue);font-weight:700}
h2{font-size:clamp(20px,2.4vw,28px)}
h3{font-size:clamp(18px,2vw,22px)}
.lead{font-size:clamp(14px,1.6vw,16px);margin:.25rem 0 1rem}
.title-blue{color:var(--blue);font-weight:700}
.title-underline{color:var(--blue);font-weight:700;text-decoration:underline}
.title-sonota{color:var(--blue);font-weight:700;}
.c-red{color:var(--red)}
mark{background:#ffe169;padding:.05em .25em}

/* ---------- Utility ---------- */
.flex{display:flex}
.align-center{align-items:center}
.mt-32{margin-top:32px}
.img-fluid{display:block;width:100%}
.img-circle{width:160px;height:160px;border-radius:50%;object-fit:cover}
.grid{display:grid}
.cols-2{grid-template-columns:.85fr 1.15fr}
.gap-40{gap:40px}
.gap-24{gap:24px}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #eee
}
.header-inner{justify-content:space-between;align-items:center;min-height:72px}
.logo img{height:42px}
.main-nav .nav-list{display:flex;gap:20px;list-style:none;margin:0;padding:0;align-items:center;flex-wrap:wrap}
.main-nav a{display:block;padding:10px 6px;color:#333;text-decoration:none;font-size:14px}
.nav-cta a{background:var(--orange);color:#fff;font-weight:bold;border-radius:999px;padding:10px 14px}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate}
.hero img{width:100%;height:auto;display:block}
.hero-copy{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  text-align:left
}
.hero-copy h1{background:rgba(255,255,255,.9);padding:18px 20px;border-left:6px solid var(--blue);max-width:640px}
.hero-btn{margin-top:10px;pointer-events:auto}
.btn{display:inline-block;padding:12px 22px;border-radius:999px;text-decoration:none}
.btn-orange{background:var(--orange);color:#fff;font-weight:700}
.btn-blue{background:#0081CC;color:#fff;padding: 10px 22px;margin-bottom:20px}

/* ---------- Sections ---------- */
.section{padding:64px 0}
.section-pale{background:var(--pale)}
.triangle-down{width:0;height:0;border-left:62px solid transparent;border-right:62px solid transparent;border-top:42px solid #00A0D9;margin:0 auto}
#solution .triangle-down{
  margin-bottom: 22px;   /* お好みで 12–24px などに */
}
/* ---------- Intro list ---------- */
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.check-list li{padding-left:30px;position:relative}
.check-list li::before{
  content:"✓";position:absolute;left:0;top:.1em;color:var(--blue);font-weight:700
}

/* ---------- Cards ---------- */
.cards-3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border-radius:8px;padding:20px;border:1px solid #e7eef6}
.card h3{color:#222;font-weight:700;margin:.3rem 0 .6rem}
.card p{margin:.4rem 0 0}
.card.simple h3{margin-top:12px;text-align:center}
.numbered .num{
  font-size:40px;font-weight:800;color:var(--blue);margin-bottom:6px
}

/* ---------- CTA Dark ---------- */
.cta-dark{
  background:#1D2088;color:#fff;text-align:center;padding:56px 0
}
.cta-dark h2{color:#fff}

/* ---------- Footer CTA (photo) ---------- */
.footer-cta{
  background:
    linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
    url("./img/ctaback.webp")
    center/cover no-repeat;
  color:#fff;padding:64px 0;text-align:center
}
.footer-cta h2{color:#fff}

/* ---------- Boxes ---------- */
.boxed{border:1px solid #cfe2ff;background:#fff;padding:18px;border-radius:6px; max-width:500px;  margin-inline:auto; }
.note-box{
  margin-top:32px;
  border:1px dashed #cfe2ff;
  background:#fff;
  padding:16px;
  border-radius:6px;
  max-width:680px;
  width:100%;
  margin-inline:auto;
}

/* ---------- FAQ ---------- */
.faq .faq-a { margin-bottom:16px; }         /* 回答の直後に1行分の余白 */
.faq .faq-item:last-child .faq-a { margin-bottom:0; }  /* 最後は不要なら */

/* ---------- Table ---------- */
/* ---------- Table ---------- */
.table-wrap{
  overflow-x:auto;
  background:#fff;
  border:1px solid #e7eef6;
  border-radius:8px;
  max-width:860px;          /* テーブル全体の最大幅 */
  margin-inline:auto;       /* 中央寄せ */
  width:100%;
}

.price-table{
  width:100%;
  border-collapse:collapse;
  min-width:680px;          /* SP 横スクロール閾値 */
  table-layout: fixed;      /* 列幅指定を安定させる */
}

.price-table th,
.price-table td{
  border:1px solid #e7eef6;
  padding:12px;             /* タイトめの余白 */
  vertical-align:top;
  word-break: break-word;   /* 長文を折り返す */
}

.price-table thead th{background:#eef6ff;vertical-align: middle}

/* 列幅（1: 業務内容 / 2: 詳細 / 3: 参考価格）*/
.price-table th:nth-child(1),
.price-table td:nth-child(1){ width: 30%; }

.price-table th:nth-child(2),
.price-table td:nth-child(2){ width: 54%; }

/* 3列目は幅20%：見出しとデータを分けて指定 */
.price-table th:nth-child(3){ width: 16%; }
.price-table td:nth-child(3){
  width: 20%;
  text-align: right;        /* 価格は基本右寄せ */
  white-space: nowrap;      /* 桁や単位の改行を防ぐ */
}

/* 価格セルでも center 指定がある場合は中央寄せを優先 */
.price-table td:nth-child(3).center{
  text-align: center;
  white-space: normal;      /* 任意：長い表記は折り返す */
}

/* ▼ セル内の箇条書きの左余白を詰める */
.price-table td ul{
  padding-left:1.1em;       /* デフォルト(~40px) → 約1.1emに縮小 */
  margin:.2em 0 0;
  list-style-position:outside;
}
.price-table td ul li{
  margin:.25em 0;           /* 行間をやや詰める */
  padding-left:0;
  text-indent:0;
}

.center{text-align:center}
.notes{
  font-size:14px;
  margin-top:14px;
  max-width:840px;       /* ← 表(.table-wrap)と同じ最大幅にする */
  margin-inline:auto;    /* ← 中央寄せ。結果として表の左端と揃う */
  text-align:left;       /* ← 念のため左寄せを明示 */
}

/* ---------- Voices ---------- */
.voice-list{grid-template-columns:1fr;max-width:900px;margin:0 auto}
.voice{display:grid;grid-template-columns:120px 1fr;gap:18px;border:1px solid #e7eef6;border-radius:10px;padding:18px;background:#fff}
.voice h3{margin-top:4px;color:#222}

/* ---------- Flow ---------- */
.flow-list{display:grid;gap:16px;max-width:920px;margin:0 auto}
.flow-item{display:grid;grid-template-columns:96px 1fr;gap:16px;border:1px solid #e7eef6;border-radius:10px;padding:16px;background:#fff}
.flow-icon img{width:96px;height:96px;object-fit:cover}

/* ---------- cta ---------- */
.cta{
  background: linear-gradient(180deg, var(--blue-100, #EEF3FF), #fff);
}
#cta.section{ padding: 0; }              /* 外側の64pxは無効化 */
#cta > .cta{ padding: 64px 0; }          /* 代わりに内側へ64px */
/* ---------- About ---------- */
.bordered{border:1px solid #e7eef6;border-radius:10px;padding:22px;background:#fff}
.mini-blue{color:var(--blue);font-weight:700}
.about-title{color:#000;font-weight:800;font-size:clamp(18px,2.1vw,24px)}
/* Company (About) */
#about .company-info{padding:24px;border-radius:12px}
#about .company-grid{
  display:grid;
  grid-template-columns: 1fr 340px;
  grid-template-rows: auto auto;
  gap:24px;
  align-items:start;
}
#about .company-text h2{margin:0 0 8px}
#about .company-image{grid-row:1;grid-column:2;align-self:start;justify-self:center}
#about .metrics{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:18px;
}
#about .kpi{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  border:1px solid #e7eef6;border-radius:12px;padding:16px;background:#fff;
}
#about .kpi .num{font-size:28px;font-weight:700;color:var(--blue)}
#about .kpi .cap{color:#666;font-size:.95rem;font-weight:500}

@media (max-width: 720px){
  #about .company-grid{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  #about .company-image{grid-column:1;grid-row:2}
  #about .metrics{grid-template-columns:1fr;grid-row:3}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--blue-dk);color:#fff;padding:18px 0;text-align:center}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .cols-2{grid-template-columns:1fr}
  .rev-on-mobile{display:flex;flex-direction:column}
  .hero-copy{place-items:end start;padding:12px}
}
@media (max-width: 860px){
  .main-nav .nav-list{gap:10px}
  .nav-cta a{padding:8px 12px}
  .cards-3{grid-template-columns:1fr 1fr}
}
@media (max-width: 680px){
  .cards-3{grid-template-columns:1fr}
  .voice{grid-template-columns:80px 1fr}
  .img-circle{width:100px;height:100px}
  .flow-item{grid-template-columns:72px 1fr}
  .flow-icon img{width:72px;height:72px}
  .hero-copy h1{font-size:18px}
  .hero-copy{place-items:end stretch;padding:8px}
  .main-nav{display:none}
  .header-inner{justify-content:flex-start}
  .logo img{ height: 39px; }
}
@media (max-width:540px){
  .site-header{position:sticky}
  .header-inner{flex-direction:row;gap:0;padding:10px 0;justify-content:flex-start}
  .main-nav{display:none}
  /* nav hidden on mobile */
}