/* =========================================
   CSS Variables / Base
========================================= */
:root{
  --brand:#0000CD;
  --accent:#F47E00;
  --text:#333;
  --line:#E3E7EF;
  --muted:#6B7280;
  --blue-100:#E6F2FF;
  --footer:#0F172A;
  --bg:#fff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

/* Container & Utilities */
.container{width:min(1100px, 92%); margin-inline:auto}
.u-center{text-align:center}
.section{padding:clamp(36px,6vw,72px) 0}
.lead{font-size:1.05rem;color:#444;margin:8px 0 0}

/* === ベースの本文フォント（見本サイト準拠） === */
body{
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.8;         /* 見本は1.8でややゆったり */
  color: var(--ink, #222);   /* --ink があればそれを使う */
}

/* === 見出しはしっかり太めに（サイト全体のトーンを近づける） === */
h1, .h1 { font-weight: 900; letter-spacing: .02em; }
h2, .h2 { font-weight: 900; }
h3, .h3 { font-weight: 800; }
h4, .h4 { font-weight: 700; }

/* 強調テキスト */
b, strong { font-weight: 700; }

/* 電話やボタンの太さ（見本と同じノリ） */
.tel { font-weight: 800; }
.btn { font-weight: 700; }   /* すでに指定済みなら不要 */


/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; font-weight:700; border-radius:999px;
  padding:.8rem 1.2rem; border:1px solid transparent;
  transition:transform .06s ease, background .2s ease, color .2s ease, border .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn--lg{padding:1rem 1.4rem; font-size:1.05rem}
.btn--accent{
  background:var(--accent);
  color:#fff;
  border-radius: 8px;        /* ← 角丸の指定 */
  padding: .4rem 1.1rem;     /* ← 上下左右の余白を少し広めに */
  font-weight: 700;
}
.btn--accent:hover{filter:brightness(0.95)}
.btn--ghost{background:#fff;border-color:var(--line);color:#111}
.btn--ghost:hover{background:#f9fafb}

/* Headline */
.headline{font-size:clamp(22px,2.6vw,28px);font-weight:900;margin:0 0 14px}
.headline--centerline{
  position:relative; padding-top:16px; text-align:center;
}
.headline--centerline:before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:84px; height:3px; background:var(--brand); border-radius:3px;
}

/* =========================
   Topbar（ご指定CSS）
========================= */
.topbar{
  position: sticky; top: 0; z-index: 30;
  background: #fff; border-bottom: 1px solid var(--line);
}
.topbar__inner{
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
}
.brand img{ height: 28px; width: auto; }
.topbar__right{ display: flex; align-items: center; gap: 14px; }
.tel{ font-weight: 800; color: #111; text-decoration: none; }
.tel:hover{ text-decoration: underline; }
@media (max-width: 767px){
  .topbar__right{ display: none; }
}
.logo{ display:flex; align-items:center; gap:.4rem; text-decoration:none; }
.logo:hover{ text-decoration:none; }
.logo__img{ height:22px; width:auto; }
.sitetitle{
  font-weight:700; line-height:1.2;
  font-size: clamp(14px, 4.2vw, 20px); color:#093A95; margin:0; padding-right:12px;
}
@media (min-width:720px){
  .logo__img{ height:26px; }
  .sitetitle{ font-size: clamp(16px, 2vw, 20px); }
}
@media (min-width:1024px){
  .topbar__inner{ height:68px; }
  .logo__img{ height:32px; }
  .sitetitle{ font-size: clamp(18px, 1.6vw, 24px); }
}

/* =========================
   Hero
========================= */

.hero{ position:relative; }
.hero__img{ width:100%; height:auto; display:block; aspect-ratio: 2000/700; object-fit:cover; }
.hero__overlay{
  position:absolute; inset:0; display:grid; place-content:center;
  text-align:center; padding:clamp(20px,4vw,40px);
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35));
}
.hero__title{ color:#fff; margin:0 0 8px; font-size:clamp(22px,3vw,36px); font-weight:900; line-height:1.25}
.hero__lead{ color:#fff; margin:0 0 14px; font-size:clamp(14px,2vw,18px)}
.hero__actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }

/* 画像だけのヒーローを常に全幅に */
.hero--image-only{ padding:0; background:#fff; }

/* ヒーロー内では container の最大幅/左右パディングを外す */
.hero--image-only .container{
  width: 100% !important;   /* これが効けば左右の余白が消えます */
  max-width:none;
  padding-inline:0;
}

/* 画像を親幅いっぱいに */
.hero--image-only .hero__image img{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
}

/* =========================
   Notice
========================= */
.notice{ background:#FAFAFE; border-block:1px solid var(--line); padding:16px 0 }
.notice p{ margin:0; font-size:.98rem }

/* =========================
   Feature blocks
========================= */
.feature__grid{
  display:grid; gap:24px; align-items:center;
  grid-template-columns: 1.05fr .95fr; /* 画像(左) : 本文(右) の標準 */
}

/* 画像 → 右 / 本文 → 左 のレイアウト用 */
.feature--img-right .feature__grid{
  grid-template-columns: .95fr 1.05fr; /* 本文(左) : 画像(右) */
}
.feature--img-right .feature__img{ order:2; }
.feature--img-right .feature__body{
  order:1;
  padding-left: 0rem;   /* ← 数値はお好みで調整（1.5rem〜3rem） */
  margin-left: 0;       /* 念のためリセット */
}

/* 画像の最大幅を抑えて中央寄せ（空白の偏りを防ぐ） */
.feature__img{ display:flex; justify-content:center; }
.feature__img img{
  width:100%; height:auto; display:block; object-fit:cover; border-radius:14px;
  max-width:520px;
}
.circle img{ border-radius:50%; aspect-ratio: 1 / 1; object-fit:cover }
.feature__body p{ margin:0 0 10px }
.feature__body .note{ color:var(--muted); font-size:.95rem }

@media (max-width: 768px){
  .feature__grid{ grid-template-columns:1fr }
  .feature--img-right .feature__grid{ grid-template-columns:1fr } /* SPは縦並び */
  .feature--img-right .feature__img,
  .feature--img-right .feature__body{ order:initial; }
  .feature__img img{ max-width:420px; }
}
/* feature--img-left のSP最適化を追加 */
@media (max-width: 768px){
  /* 左右問わず1カラム化 */
  .feature--img-left .feature__grid,
  .feature--img-right .feature__grid {
    grid-template-columns: 1fr !important;
  }

  /* 両方のパターンで画像→本文の順に */
  .feature__img,
  .feature__body {
    order: initial !important;
  }

  /* 画像の表示を中央寄せ＋サイズ制限 */
  .feature__img {
    justify-content: center;
    margin-bottom: 20px;
  }
  .feature__img img {
    max-width: 420px;
    width: 100%;
    height: auto;
  }

  /* テキストの読みやすさ向上 */
  .feature__body {
    text-align: left;
    padding: 0 16px;
  }
}

/* =========================
   Lists
========================= */
.checklist{ list-style:none; padding:0; margin:12px 0 0; display:grid; gap:10px }
.checklist li{
  position:relative; padding-left:28px; border:2px solid var(--line);
  border-radius:12px; padding:12px 12px 12px 36px; background:#fff;
}
.checklist li:before{
  content:"✔"; position:absolute; left:12px; top:12px; font-weight:900; color:var(--brand);
}

.list{ list-style:none; padding:0; margin:12px 0 0; display:grid; gap:10px }
.list.dashed li{ border:3px dashed var(--line); border-radius:12px; padding:12px; background:#fff }

/* =====================================================
   Voices（2×2カード／画像＋本文）
===================================================== */
.voice--rect .cards{
  display:grid;
  grid-template-columns: repeat(2, 1fr);  /* ← デスクトップ時は2列 */
  gap:18px;
}

/* スマホでは1列に戻す */
@media (max-width: 900px){
  .voice--rect .cards{
    grid-template-columns: 1fr;  /* ← SP時のみ縦並び */
  }
}

.voice--rect .voice{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.voice--rect .voice__avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.voice--rect .voice__role{
  color:var(--muted);
  font-size:.95rem;
  margin-top:6px;
}

/* 画像:テキストの比率調整 */
.voice--rect{
  --img-col: 1fr;  /* 画像側 */
  --txt-col: 3fr;  /* テキスト側（例: 1:3） */
}
.voice--rect .voice{
  grid-template-columns: minmax(0, var(--img-col)) minmax(0, var(--txt-col));
  column-gap: 24px;
  align-items: start;
}

/* 丸型アバター */
.voice--rect .voice__avatar{
  width:120px;
  height:120px;
  border-radius:50%;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.voice--rect .voice__avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* テキスト折り返しの保険 */
.voice--rect .voice__body{ min-width:0; }

/* SP最適化 */
@media (max-width: 767px){
  .voice--rect .cards{ gap:16px; }

  .voice--rect .voice{
    grid-template-columns: 1fr;
    text-align:left;
    padding:18px;
    row-gap:12px;
  }

  .voice--rect .voice__avatar{
    width:96px;
    height:96px;
    border-radius:50%;
    overflow:hidden;
    margin-inline:auto; /* 画像を中央寄せ */
    box-shadow: var(--shadow);
  }

  .voice--rect .voice__body{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }

  .voice--rect .voice__body p{
    margin:0 0 10px 0;
    line-height:1.8;
  }

  .voice--rect .voice__role{
    color:var(--muted);
    font-size:.9rem;
    margin:0;
  }
}

/* =========================
   FAQ（details/summary）
========================= */
.faq{ background:#FAFAFE; padding:clamp(36px,6vw,72px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.faq__item{ border:1px solid var(--line); border-radius:14px; background:#fff; padding:0; margin:0 0 12px; overflow:hidden }
.faq__item > summary{
  list-style:none; cursor:pointer; padding:14px 16px; font-weight:700; position:relative; padding-right:40px;
}
.faq__item > summary::-webkit-details-marker{ display:none }
.faq__a{ padding:0 16px 16px; color:#444 }

/* 開閉インジケータ（▼ / ▲） */
.faq__item > summary::after{
  content:"▾"; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-weight:900; color:var(--brand);
}
.faq__item[open] > summary::after{ content:"▴"; }

/* =========================
   Pricing
========================= */

.pricing {
  padding: clamp(40px, 8vw, 80px) 0;
}

.pricing__list {
  /* 全体の幅を絞って、情報の密度を高める */
  max-width: 500px; 
  margin: 0 auto;
  background: #FAFAFE;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 40, 0.03);
  overflow: hidden;
  border: 1px solid var(--line);
}

.pricing__item {
  display: grid;
  /* 1列目を広めに、2列目をコンテンツ幅（auto）に設定 */
  grid-template-columns: 1fr auto; 
  align-items: center;
  /* カラム間の隙間を30pxに固定（広すぎず、狭すぎない） */
  gap: 30px; 
  padding: 1.5rem 2.5rem;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.3s ease;
}

.pricing__item:last-child {
  border-bottom: none;
}

.pricing__service {
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.1rem);
  display: flex;
  align-items: center;
  color: var(--text);
}

.pricing__dot {
  width: 8px;
  height: 8px;
  background-color: var(--brand);
  border-radius: 50%;
  margin-right: 15px;
  flex-shrink: 0;
}

.pricing__amount {
  text-align: right;
  white-space: nowrap;
}

.pricing__amount .num {
  font-size: 2rem;
  font-weight: 900;
  color: var(--brand);
  letter-spacing: -0.02em;
}

.pricing__amount .unit {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--brand);
}

.pricing__amount .tax {
  font-size: 0.85rem;
  color: #555;
  margin-left: 4px;
}

/* スマホ表示 */
@media (max-width: 580px) {
  .pricing__item {
    /* スマホでは縦並びにしつつ、左寄せで統一 */
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 1.2rem 1.5rem;
  }
  
  .pricing__amount {
    text-align: left;
    padding-left: 23px; /* ドット＋余白分ずらして整列 */
  }
}

/* =========================
   CTA（ご指定CSS）
========================= */
.cta{
  background:linear-gradient(180deg, var(--blue-100), #fff), url('./assets/img/bg-sky.jpg') center/cover no-repeat;
}
.cta__inner{ padding:clamp(40px,6vw,72px) 0; text-align:center }
.cta__title{ margin:0 0 6px; font-size:clamp(22px,2.8vw,28px); font-weight:900 }
.cta__text{ margin:0 0 14px }
.row{ display:flex; align-items:center } /* inline styleを補完するため */

/* =========================
   Company（ご指定CSS＋微調整）
========================= */
#company .company-grid{
  display:grid; grid-template-columns: 1fr 350px; grid-template-rows:auto auto;
  gap:24px; align-items:start;
}
#company .company-image{ grid-row:1; grid-column:2; align-self:start; }
#company .company-image img{ width:100%; height:auto; object-fit:contain }
#company .metrics{
  grid-column:1 / -1; display:grid; grid-template-columns:repeat(2, 1fr);
  gap:18px; margin-top:10px;
}
#company .kpi{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  border:1px solid var(--line); border-radius:16px; padding:18px; background:#fff;
}
#company .kpi .num{ font-size:28px; font-weight:700; color:var(--brand) }
#company .kpi .cap{ color:var(--muted); font-size:.95rem; font-weight:500 }
#company{ margin-bottom:60px }
.card.company-info{ border:1px solid var(--line); border-radius:16px; background:#fff; padding:clamp(18px,2.6vw,28px) }
@media (max-width:720px){
  #company .company-grid{ grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  #company .company-image{ grid-column:1; grid-row:2; justify-self:center; }
  #company .metrics{ grid-template-columns:1fr; grid-row:3; }
}

/* =========================
   Footer（ご指定CSS）
========================= */
.footer{ background:var(--footer); color:#fff; text-align:center; padding:28px 0; margin-top:20px }

/* =========================
   Accessibility：フォーカス可視化
========================= */
a, button, .btn, summary{ outline:none; }
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible{
  box-shadow:0 0 0 3px rgba(0,0,205,.25);
  border-radius:8px;
}