/* ===== CSS Variables ===== */
:root{
  --brand:#0080CC;
  --accent:#FF9800;
  --text:#242424;
  --muted:#4d4d4d;
  --line:#e6e6e6;
  --bg:#FFFFFF;
  --soft:#F5FAFE;
  --radius:16px;
  --radius-lg:24px;
  --shadow:0 6px 18px rgba(0,0,0,.06);
  --container:1100px;
  --container-sm:780px;
  --container-md:920px;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic","Meiryo",sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.8;
  letter-spacing:.02em;
  font-size: clamp(16px, 1.2vw, 20px);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:underline}
a.btn{ text-decoration:none }

/* ===== Layout ===== */
.section{padding:48px 20px}
.section--center .container{display:flex;justify-content:center}
.section--alt{background:#fff}
.section--soft{background:var(--soft)}
.container{max-width:var(--container);margin:0 auto}
.container--sm{max-width:var(--container-sm)}
.container--md{max-width:var(--container-md)}
.center{text-align:center}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-24{margin-top:24px}

/* メッセージ枠付きセクションの下だけ余白を減らす */
.section.message-section{
  padding-bottom: 24px;  /* 通常48px → 半分に */
}
/* 注意書きセクションの上だけ余白を減らす */
.section.note-section {
  padding-top: 48px;     /* 通常48px → 半分に */
}

.sp-only{display:none}
@media (max-width: 767px){ .sp-only{display:inline} }

/* =========================
   Header (topbar)  -- MECE版
   ========================= */
/* ヘッダーの土台 */
.topbar{
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid #E3E7EF; /* var(--line) */
}
.topbar__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px; /* SP/タブレット基準高さ */
}

/* ロゴ＋サイトタイトル */
.topbar .logo{
  display: flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
}
.topbar .logo:hover{ text-decoration: none; }

/* 画像と2行タイトルの高さの基準（必要に応じて微調整） */
:root{
  --logo-h: 44px;       /* SP基準 */
}
@media (min-width: 720px){
  :root{ --logo-h: 48px; } /* タブレット目安 */
}
@media (min-width: 1024px){
  :root{ --logo-h: 52px; } /* PC目安 */
}

.topbar .logo__img{
  height: var(--logo-h);
  width: auto;
}

/* 2行タイトル（上：大／下：小） */
.topbar .sitetitle{
  display: flex;
  flex-direction: column;
  gap: 2px;                /* ← 行間はgapで管理 */
  margin: 0;
  padding-right: 12px;
  font-weight: 700;
  line-height: 1.05;        /* タイトル行をやや詰める */
  font-size: clamp(18px, 4.2vw, 24px);
  color: #093A95;
}
.topbar .sitetitle .sitesubtitle{
  font-size: 0.8em;
  color: #333;
  font-weight:500;
  margin-top:0; 
  line-height: 1.2;
          /* gapで管理するので0 */
}

/* 右側：電話番号＋ボタン */
.topbar__right{
  display: flex;
  align-items: center;
  gap: 14px; /* 電話とボタンの間隔 */
}
.topbar .tel{
  font-weight: 800;
  color: #111;
  text-decoration: none;
}
.topbar .tel:hover{ text-decoration: underline; }

/* ヘッダー内のボタン（必要最低限のみ） */
.topbar .btn{
  display: inline-block;
  background: #0080CC;   /* 青 */
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.4em 1.2em;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  transition: background .2s ease, transform .2s ease;
  text-decoration: none;
}
.topbar .btn:hover{
  background: #006ba6;
  transform: translateY(-1px);
  text-decoration: none;
}

/* 〜767px：右側（電話＋ボタン）を非表示 */
@media (max-width: 767px){
  .topbar__right{ display: none; }
}

/* 〜480px：ヘッダーレイアウトを詰める */
@media (max-width: 480px){
  .topbar__inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .topbar .tel{
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
  }
  .topbar .btn{
    padding: .4em .6em;
    font-size: .85rem;
    white-space: nowrap;
  }
}


/* （任意）アクセントクラスを残したい場合だけ有効化
.topbar .btn.btn--accent{ background:#0080CC; }
*/


/* ===== Hero ===== */
/* 画像だけのヒーローを常に全幅に */
.hero--image-only{ padding:0; background:#fff; }
/* ヒーロー内では container の最大幅/左右パディングを外す */
.hero--image-only .container{
  max-width:none;
  padding-inline:0;
}
/* 画像を親幅いっぱいに */
.hero--image-only .hero__image img{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
}

/* ===== Heading ===== */
.heading{
  font-weight:800;
  font-size:clamp(22px,4vw,32px);
  line-height:1.3;
  color:#00178c;
  margin:0 0 24px;
}
.heading--center{text-align:center}

/* ===== Buttons ===== */
.btn{
  display:inline-block;
  border:none;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  padding:14px 24px;
  box-shadow:var(--shadow);
  transition:transform .06s ease, filter .2s ease;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn--accent{background:var(--accent)}
.btn--lg{font-size:20px;padding:16px 28px}
.btn--round{border-radius:999px}
.btn--full{display:block;width:100%;text-align:center}

/* スマホ時のボタンサイズ調整 */
@media (max-width: 767px) {
  .btn--lg {
    font-size: clamp(15px, 2.2vw, 18px);
    padding: 0.6em 1.2em; /* 上下の余白を少し狭める */
    border-radius: 10px;   /* 少し丸みを抑える */
  }
}

/* ===== 大きなCTAボタン（オレンジの丸いボタン） ===== */
.btn--cta{
  /* レイアウト */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;

  /* 見た目 */
  background:#FF9800;               /* グラデなしのオレンジ */
  color:#fff;
  border-radius:9999px;
  padding:16px 64px 16px 28px;      /* 右を広めにして矢印用の余白 */
  font-weight:800;
  font-size:clamp(16px, 2.2vw, 20px);
  line-height:1;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  position:relative;
  -webkit-tap-highlight-color: transparent;
}

/* 右端の白い丸（矢印の背景） */
.btn--cta::after{
  content:"";
  position:absolute;
  right:12px;
  width:38px;
  height:38px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.08) inset;
}

/* 白丸の中の矢印（CSSだけで描画） */
.btn--cta::before{
  content:"";
  position:absolute;
  right:26px;           /* ::after の中で中央寄せに近づける */
  width:10px;
  height:10px;
  border-right:3px solid #FF9800;
  border-bottom:3px solid #FF9800;
  transform:rotate(-45deg);
  z-index:1;
}

/* ホバー/フォーカス */
.btn--cta:hover,
.btn--cta:focus-visible{
  background:#F47E00;                /* 少し濃く */
  text-decoration:none;
  transform:translateY(-1px);
}
.btn--cta:active{
  transform:translateY(0);
  filter:brightness(.98);
}

/* 幅いっぱいにしたい時はクラスを追加で */
.btn--cta.btn--full{ display:flex; width:100%; }

/* ヘッダーの小ボタンは従来通り（保護のための限定ルール） */
.topbar .btn:not(.btn--cta){
  font-size:.95rem;
  padding:.4em 1.2em;
  border-radius:12px;
}

/* ===== Cards / Blocks ===== */
.card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
}
.card--border{
  border:1px solid var(--line)
}
@media (max-width: 767px) {
  .card.card--border.center {
    text-align: left;
  }
}
.icon-wrap{
  width:72px;
  height:72px;
  margin:0 auto 12px
}

/* ===== Grid ===== */
.grid{display:grid;gap:28px}
.grid--2{grid-template-columns:1.1fr 1fr}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width: 991px){
  .grid--2{grid-template-columns:1fr}
  .grid--3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 600px){
  .grid--3{grid-template-columns:1fr}
}

/* Media aspect helper (no JS) */
.media-aspect{
  aspect-ratio:4/3;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.media-aspect img{width:100%;height:100%;object-fit:cover}

/* ===== Checklist ===== */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checklist__item{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff
}
.checklist__icon{
  flex:0 0 24px;height:24px;margin-top:2px;
  background:conic-gradient(from 0deg,#2ecc71,#2ecc71) border-box;
  -webkit-mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="%23fff" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center/cover no-repeat;
  mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="%23fff" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center/cover no-repeat;
}

/* ===== Steps ===== */
.lead{color:var(--muted);margin:0 0 16px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.steps__item{
  display:grid;grid-template-columns:120px 1fr;gap:14px;
  padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff
}
.steps__num{color:var(--brand);font-weight:900;font-size:20px}
.steps__body h3{margin:0;font-size:18px}
@media (max-width:640px){
  .steps__item{grid-template-columns:1fr}
}

/* ===== FAQ (details/summary) ===== */
.faq{
  display: grid;
  gap: 12px;
}
.faq__item{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

/* 質問見出し（<summary>想定） */
.faq__q{
  list-style: none;
  margin: 0;
  /* 右端アイコンが大きくなるため余白を拡張（56px） */
  padding: 16px 56px 16px 18px;
  cursor: pointer;
  font-weight: 700;
  position: relative;
  line-height: 1.6;
}
/* ブラウザ既定のマーカーを消す（Safari/Chrome/Firefox） */
.faq__q::-webkit-details-marker{ display: none; }
.faq__q::marker{ content: ""; }

/* 開閉ボーダー */
.faq__item[open] .faq__q{
  border-bottom: 1px solid var(--line);
}

/* 回答本文 */
.faq__a{
  padding: 14px 18px;
  color: var(--muted);
}

/* 右端の▼（閉時）。視認性アップ：サイズ拡大＆縦中央揃え */
.faq__q::after{
  /* ▼: \25BC（塗りつぶし三角）。薄い「▾」より視認性が高い */
  content: "\25BC";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;           /* ← 大きくして見やすく */
  color: var(--muted);
  transition: transform .2s ease;
}

/* 開いたときは▲相当（180度回転） */
.faq__item[open] .faq__q::after{
  transform: translateY(-50%) rotate(180deg);
}

/* クリック感（任意） */
.faq__q:hover{ background: #f9fbff; }
.faq__q:focus-visible{
  outline: 2px solid #cfe3ff;
  border-radius: 8px;
}

/* --- スマホ最適化（～720px）--- */
@media (max-width: 720px){
  .faq__q{
    /* モバイルはやや詰めるがアイコンと重ならない余白を確保 */
    padding-right: 52px;
  }
  .faq__q::after{
    font-size: 18px;  /* 端末でも確実に見えるサイズ */
    right: 12px;      /* 端に詰まりすぎないよう微調整 */
  }
}

/* ===== CTA (Contact section) ===== */
/* 背景：上から淡いブルー → 白のグラデ＋任意の背景画像 */
.cta{
  background:
    linear-gradient(180deg, #EEF3FF, #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{  /* .cta__text を使う場合。今回のHTMLは <p class="responsive-text"> なので任意 */
  margin: 0 0 14px;
}

/* ===== CTA内テキストの整列（段落で使用中の .responsive-text） ===== */
.responsive-text{
  text-align: center;
}
@media (max-width: 720px){
  .responsive-text{ text-align: left; }
}

/* ===== フォーム埋め込みラッパー（id="form-wrapper"） =====
   スマホ時の横スクロール防止のため左右パディングを確保 */
#form-wrapper{
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}
@media (min-width: 768px){
  #form-wrapper{
    padding-left: 0;
    padding-right: 0;
  }
}

/* ===== Contact ===== */
.contact__grid{
  align-items:center
}
.contact__big{
  font-size:clamp(26px,4.6vw,36px);
  font-weight:900;margin:0 0 6px;
}
.contact__small{
  margin:0;
  color:var(--muted)
}
@media (max-width: 767px) {
  .contact__cell,
  .contact__big,
  .contact__small {
    text-align: center;
  }
}
/* ========== Company section（運営者情報） ========== */
/* 2カラム：左テキスト / 右ロゴ。下段はKPIを横並び */
#company .company-grid{
  display:grid;
  grid-template-columns: 1fr 350px;   /* 左テキスト＋右ロゴ */
  grid-template-rows: auto auto;      /* 上段:会社情報, 下段:KPI */
  gap:24px;
  align-items:start;
}

/* ロゴは右上に固定 */
#company .company-image{
  grid-row:1; 
  grid-column:2;
}

/* KPIは全幅で配置（2カラム） */
#company .metrics{
  grid-column:1 / -1;    /* 左右カラムをまたいで全幅 */
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:18px;
  margin-top:10px;
}

/* KPIカード */
#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:500;
  color:var(--brand);
}
#company .kpi .cap{
  color:var(--muted);
  font-size:.95rem;
  font-weight:500;
}

/* セクション下の余白（フッターとの間隔） */
#company {
  margin-bottom: 60px; /* お好みで 20〜60px で調整 */
}

/* --- スマホ最適化（1カラム化 & KPI縦並び） --- */
@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; /* KPIを縦並び */
    grid-row:3;
  }
}

/* ===== Notes ===== */
.note{color:var(--muted);margin:.4em 0}

/* ===== Footer ===== */
.footer{
  padding:24px 20px;
  border-top:1px solid var(--line);
  text-align:center;
  color:#FFFFFF;
  background:#093A95;
  display: block;
  unicode-bidi: isolate;
}