/* ============================================================
   common.css — 全ページ共通
   ポスティングサービス宮崎 コーポレートサイト
   CSS変数 / リセット / l-header / l-footer / l-container / c-heading / c-btn 等
   命名規則: l- 骨組み / c- 共通部品 / p-top- トップ専用 / is- 状態
   ============================================================ */

/* ---------- 1. CSS変数（DESIGN.md 1章の実測値） ---------- */
:root {
  --c-text: #333333;
  --c-blue: #265ea8;
  --c-blue-pale: #eef4ff;
  --c-dark: #353535;
  --c-gold: #d89d12;
  --c-red: #a94040;
  --c-line: #c8c8c8;
  --c-line-2: #d5d5d5; /* ヘッダー区切り線・理由カードの縦罫線 */
  --c-bg: #f9f9f9;
  --c-gray-1: #dedede;
  --c-gray-2: #ededed;
  --c-gray-3: #707070; /* パンくずの文字色（会社案内で追加） */
  --c-white: #ffffff;
  --c-link: var(--c-blue); /* お問い合わせ同意チェックのリンク色。Figmaは明るい水色 #2cbcff だったが、白地で読みにくい（約2.2:1）ため 2026-09-22 社長指示でブランドの青に */

  --font-serif: 'Noto Serif JP', serif;
  --font-sans: 'Noto Sans JP', sans-serif;
  --font-num: 'Roboto', sans-serif;

  --container-max: 1440px;
  /* 本文エリア＝1180px。1440px時は左右130px。画面が狭いときは本文幅1180pxを優先して余白から縮める */
  --container-pad: clamp(24px, calc((100vw - 1180px) / 2), 130px);
  --header-pad: 50px;       /* ヘッダー・メイン写真だけ左右50px（右端・ロゴ以外の左端） */
  --header-pad-logo: 40px; /* ロゴだけ左40px（会社案内Figmaで実測。他要素の左右50pxとは別値） */
}

/* ---------- 2. リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd {
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }
img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 0;
}
picture {
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
/* 電話番号リンク（tel:）はPCでクリックしても電話がかからないため、
   マウスで操作する端末ではふつうの文字として扱う（タブレット・スマホは従来どおりタップで発信）。
   画面幅ではなく「マウスで細かく指せる端末か」で判定する（横向きiPad等を幅で誤判定しないため） */
@media (hover: hover) and (pointer: fine) {
  a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
  }
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
address { font-style: normal; }

/* フォーカスは必ず見えるようにする */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 2px;
}

.c-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-white);
  color: var(--c-blue);
  padding: 12px 20px;
  z-index: 1000;
  border: 2px solid var(--c-blue);
}
.c-skip-link:focus {
  left: 10px;
  top: 10px;
}

/* !important は使わない方針のため、実際に動きがある箇所（ボタンのhover・
   ハンバーガーの開閉アニメーション）だけを個別に無効化する */
@media (prefers-reduced-motion: reduce) {
  .c-btn,
  .l-header,
  .l-header__hamburger span,
  .c-acc__panel,
  .c-acc__inner,
  .c-acc__icon::before,
  .c-acc__icon::after {
    transition-duration: 0.001ms;
  }
}

/* 画面には出さず、読み上げソフトにだけ伝える文字（例：「別のタブで開きます」） */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 3. l-container（本文エリア＝最大1180px） ---------- */
.l-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ---------- 4. c-heading（セクション見出し：28px明朝＋青下線） ---------- */
/* 下線は文字幅と同じにする（コンテナ幅いっぱいにしない）ため、
   .c-heading 自体を fit-content にして中央寄せする。
   width:100%の子(.c-heading__line)は fit-content の計算に含まれないため、
   結果として「文字幅ぴったりの下線」になる。 */
.c-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  margin: 0 auto 40px;
}
.c-heading__text {
  font: 700 28px/1.4 var(--font-serif);
  color: var(--c-text);
  white-space: nowrap;
}
.c-heading__line {
  width: 100%;
  height: 5px;
  margin-top: 10px;
  background: var(--c-blue);
}
.c-heading.is-left {
  align-items: flex-start;
  margin-left: 0;
  margin-right: 0;
}
/* 対応エリアの様な「小見出し」（22px・下線なし） */
.c-heading--sm .c-heading__text {
  font-size: 22px;
  color: var(--c-blue);
}
/* 公共・選挙関連実績の様な「下線なし・青文字」の見出し */
.c-heading--blue .c-heading__text {
  color: var(--c-blue);
}

/* ---------- 5. c-btn（丸い両端のボタン） ---------- */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: 700 16px/1 var(--font-serif);
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
/* hidden属性はdisplay:inline-flexより先に定義されているUA既定のdisplay:noneだが、
   同じ詳細度（クラス1つぶん）だと後勝ちでinline-flexに負けてしまうため明示する
   （お問い合わせフォームの「修正する」ボタンをhiddenにしても消えなかった不具合の対策）。 */
.c-btn[hidden] {
  display: none;
}
.c-btn:hover {
  opacity: 0.8;
}
.c-btn img {
  flex: none;
  width: 15px;
  height: 15px;
}

.c-btn--sm {
  height: 44px;
  padding: 0 20px;
  border-radius: 22px;
}
.c-btn--lg {
  height: 60px;
  padding: 0 30px;
  border-radius: 30px;
}
.c-btn--gold {
  background: var(--c-gold);
  color: var(--c-white);
}
.c-btn--red {
  background: var(--c-red);
  color: var(--c-white);
}
.c-btn--white {
  /* Figma：白ボタンだけゴシックBold・文字は中央・矢印は右端から15px */
  position: relative;
  background: var(--c-white);
  color: var(--c-blue);
  font-family: var(--font-sans);
}
.c-btn--white img {
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -7.5px;
}
.c-btn--blue {
  /* お問い合わせフォーム「確認画面へ／送信する」（Figma実測：高さ60・幅270・角丸30＝c-btn--lgと同じ） */
  background: var(--c-blue);
  color: var(--c-white);
}
.c-btn--outline {
  /* お問い合わせフォーム「修正する」（Figma未デザイン。確認画面はFigmaに無いため実装で決定） */
  background: var(--c-white);
  color: var(--c-blue);
  border: 2px solid var(--c-blue);
}
/* c-btn共通の矢印（画像を使わずCSSで描く。currentColorなのでボタンの文字色にそのまま追従する） */
.c-btn__chevron {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

/* ---------- 6. l-header ---------- */
.l-header {
  /* PCでは画面の上部に追従する（2026-09 社長指示）。見た目は料金ページのFigma（node 57:299）の
     ヘッダー面＝白地＋影 0 0 14px 1px rgba(0,0,0,.25)。1013px以下（スマホ型ヘッダー）は
     下のメディアクエリで position:relative に戻るので追従しない。 */
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--c-white);
  transition: box-shadow 0.2s ease;
}
/* デザイン「ヘッダーメニュー（PC）」：追従し、**スクロール中だけ影を出す**（一番上では影なし）。
   main.js が scrollY>0 のとき is-scrolled を付ける。 */
.l-header.is-scrolled {
  box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.25);
}
/* 追従ヘッダー（高さ146px）の下にページ内リンクの行き先が隠れないようにする */
@media (min-width: 1014px) {
  html {
    scroll-padding-top: 166px;
  }
}
.l-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 20px var(--header-pad) 28px var(--header-pad-logo);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.l-header__logo {
  display: block;
  margin-top: 12px; /* 上32px（=inner padding-top 20px + 12px）。会社案内Figmaで実測：left40/top32/w451/h79 */
}
.l-header__logo img {
  display: block;
  height: 79px;
  width: auto;
}

.l-header__right {
  display: flex;
  flex-direction: column;
  width: 624px; /* Figma：左766〜右1390 */
  max-width: 100%;
  margin-left: auto; /* 画面が狭くて2段目に回っても右寄せを保つ */
}
.l-header__row1 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px; /* 電話ブロックは左端766px、ボタンは右端1390pxにそろう */
}
.l-header__contact {
  text-align: left;
}
.l-header__tel {
  font: 700 24px/23px var(--font-serif);
}
.l-header__tel a {
  color: var(--c-text);
}
.l-header__hours {
  font: 700 14px/23px var(--font-serif);
  color: var(--c-text);
}
.l-header__buttons {
  display: flex;
  gap: 10px;
  margin-top: 7px; /* ボタン上端27px（電話番号の上端20pxより7px下） */
}
.l-header__divider {
  width: 100%;
  height: 1px;
  background: var(--c-line-2);
  border: 0;
  margin: 10px 0 0; /* 罫線の上端81px */
}

.l-nav__list {
  display: flex;
  justify-content: flex-end; /* 右端1390pxにそろえる（ホームの左端＝790px） */
  gap: 0 40px;
  flex-wrap: wrap;
}
.l-nav__list a {
  display: block;
  padding: 9px 0 1px; /* 文字上端91px／下線115〜118px */
  font: 700 16px/23px var(--font-serif);
  color: var(--c-text);
  border-bottom: 3px solid transparent;
}
.l-nav__list a:hover {
  color: var(--c-blue);
}
.l-nav__list a[aria-current="page"] {
  color: var(--c-blue);
  border-bottom-color: var(--c-blue);
}

.l-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 60px;
  height: 60px;
  flex: none;
  background: var(--c-blue);
}
.l-header__hamburger span {
  display: block;
  width: 30px;
  height: 3px;
  background: var(--c-white);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* 開いた状態＝3本線を×に変形（Figma未デザインのため実装で決定） */
.l-header__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}
.l-header__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.l-header__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}

/* ハンバーガーの中身に入れるボタン2つ（Figma未デザイン。PC版と同じc-btnを流用）。
   PC・タブレット横並びのナビには出さないので既定は非表示。 */
.l-nav__actions {
  display: none;
}

/* ---------- 7. l-footer（CTA2分割＋コピーライト） ---------- */
.l-footer__cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.l-footer__cta-block {
  /* グリッドの子は既定でmin-widthが内容依存になり、狭い画面で右列が
     はみ出す原因になるため0にする（1fr 1frが正しく縮むように） */
  min-width: 0;
  box-sizing: border-box;
  min-height: 180px;
  text-align: center;
  /* 左右の余白：見出し「メールでのお見積もり・お問い合わせ」（17文字・約475px）が1440px幅で1行に収まる値
     （720−475＝245 → 片側最大120px）。表記統一で1文字増えた分、130pxから縮めた（2026-09-22） */
  padding: 25px clamp(24px, 8.3vw, 120px) 25px; /* 見出し上端＝フッター上端から25px */
}
.l-footer__cta-block--tel {
  background: var(--c-dark);
  color: var(--c-white);
}
.l-footer__cta-block--mail {
  background: var(--c-blue);
  color: var(--c-white);
}
.l-footer__cta-heading {
  margin: 0;
  font: 700 28px/40px var(--font-serif);
}
/* 見出し下の白い細線（文字幅ではなく固定幅。Figma実測） */
.l-footer__cta-line {
  display: block;
  margin: 10px auto 19px;
  height: 1px;
  /* 固定幅だが、狭い画面で列からはみ出さないよう上限も付ける */
  max-width: 100%;
  background: rgba(255, 255, 255, 0.7);
}
.l-footer__cta-line--tel { width: 420px; }
.l-footer__cta-line--mail { width: 448px; }

/* 行の高さぶんの余白が入らないよう、pをflexにして電話番号の箱(29px)だけの高さにする */
.l-footer__tel {
  display: flex;
  justify-content: center;
}
.l-footer__tel-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 29px;
  font: 500 28px/29px var(--font-sans);
  color: var(--c-white);
}
.l-footer__tel-link img {
  flex: none;
  width: 29px;
  height: 29px;
}
.l-footer__hours {
  margin-top: 7px; /* 受付時間の上端＝フッター上端から131px */
  font: 500 16px/23px var(--font-sans);
}
.l-footer__cta-block--mail .c-btn {
  width: 270px;
}
.l-footer__copyright {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 50px;
  padding: 0 20px;
  background: var(--c-gray-1);
  text-align: center;
}
.l-footer__copyright p {
  font: 700 14px/20px var(--font-serif);
  color: var(--c-text);
}

/* PC版の意図的な改行（Figmaの⏎位置）。スマホでは幅が変わり不自然な
   改行になるため、SPブレークポイントで非表示にして自然な折り返しに戻す。 */
.c-br-sp {
  display: inline;
}
/* .c-br-sp とは逆＝PCでは非表示（自然な折返しのまま）、SPでだけ改行を出す
   （フッターのCTA見出し。Figma SPは明示的に2行だが、PCは1440px幅で
   自然に1行に収まっており、そちらは変えない）。 */
.c-br-only-sp {
  display: none;
}

/* ---------- 8. 下層ページ共通部品（会社案内で新規追加・c-接頭辞） ----------
   タイトル帯 / パンくず / 左揃えの青い見出し＋罫線 / 項目表（th/td）。
   下層ページ（service/price/info/recruit/contact）共通で使う。 */

/* 8-1. c-page-title：ページタイトル帯（青地・白文字・中央揃え） */
.c-page-title {
  width: 100%;
  height: 200px;
  box-sizing: border-box;
  background: var(--c-blue);
  padding-top: 78px; /* Figma実測：帯の上端から文字上端まで78px */
  text-align: center;
}
.c-page-title__text {
  margin: 0;
  font: 700 38px/1.4 var(--font-serif);
  color: var(--c-white);
  text-align: center;
}

/* 8-2. c-breadcrumb：パンくず（タイトル帯の下・本文コンテナ内） */
.c-breadcrumb-wrap {
  margin-top: 10px;
}
.c-breadcrumb {
  margin: 0;
  font: 400 14px/1.4 var(--font-sans);
  color: var(--c-gray-3);
}
.c-breadcrumb a {
  color: var(--c-gray-3);
}
.c-breadcrumb a:hover {
  text-decoration: underline;
}

/* 8-3. c-blue-heading：左揃えの青い見出し＋下に全幅の灰色の罫線（2px・--c-line）。
   本文上端から罫線上端まで50px（28px/1.4の行高39.2px＋margin-top10px）。
   罫線が要らない場合（アクセス見出し等）は __rule を省略する。 */
.c-blue-heading {
  margin: 0;
}
.c-blue-heading__text {
  display: block;
  font: 700 28px/1.4 var(--font-serif);
  color: var(--c-blue);
}
.c-blue-heading__rule {
  display: block;
  margin-top: 10px;
  height: 2px;
  background: var(--c-line); /* Figma実測：罫線は青ではなく灰色 #c8c8c8（2px） */
}

/* 8-4. c-table：項目表（th=項目名／td=内容）。会社概要・実績許認可情報で使用。
   列幅は th=295px固定（左130〜値の開始425pxに一致）／td=残り。
   行の高さは「th=行の中央揃え」「td=上端から20pxで開始」の組み合わせで、
   Figma実測の行高（63/78/63px 等）に一致する。 */
.c-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--c-line);
  table-layout: fixed;
}
.c-table__row {
  border-bottom: 1px solid var(--c-line);
}
.c-table__th {
  width: 295px;
  padding: 0 20px 0 0;
  vertical-align: middle;
  text-align: left;
  font: 700 16px/23px var(--font-sans);
  color: var(--c-text);
}
.c-table__td {
  padding: 20px 0;
  vertical-align: top;
  text-align: left;
  font: 400 16px/23px var(--font-sans);
  color: var(--c-text);
}
/* 所在地（2行の住所）：Figma実測で行高78pxに収まるよう下側だけ詰める */
.c-table__td--address {
  padding-bottom: 12px;
}
/* 沿革：1行31pxで積む（会社案内は4行のため、Figmaの3行行より31px高くなる） */
.c-table__td--history p {
  /* 年月と内容を横並びにし、内容が折り返しても年月の下に回り込まないようにする。
     間隔1em＝Figmaの全角スペース1つぶん（PCでの開始位置は変わらない） */
  display: flex;
  gap: 1em;
  margin: 0;
  font: 400 16px/31px var(--font-sans);
}
.c-table__date {
  flex: none;
}
/* 配布実績：「・」を文字で打たず<ul>のリストにして見た目だけ揃える */
.c-table__td--list {
  padding-bottom: 8px;
}
.c-table__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-table__list li {
  position: relative;
  padding-left: 1.1em;
  font: 400 16px/23px var(--font-sans);
}
.c-table__list li::before {
  content: "・";
  position: absolute;
  left: 0;
}
/* 許可・加盟団体：団体名2行＋ロゴ2点（横並び） */
.c-table__td--license .p-info-license__orgs {
  margin: 0;
  font: 400 16px/31px var(--font-sans);
}
.p-info-license__logos {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  margin-top: 21px;
}
.p-info-license__logo {
  display: block;
}
/* Figmaの画像をそのまま使用（無加工）のため、実ファイルの解像度と表示サイズが
   異なる。表示サイズはFigma実測どおりCSSで固定する。 */
.p-info-license__logo--shinsho {
  width: 66px;
  height: 66px;
}
.p-info-license__logo--kyokai {
  width: 97px;
  height: 67px;
}

@media (max-width: 767px) {
  .c-page-title {
    height: 97px; /* サービスSP版Figma実測（帯高さ）。会社案内にも適用される */
    padding-top: 30px; /* 帯上端から文字上端まで（Figma実測） */
  }
  .c-page-title__text {
    font-size: 26px; /* Figma実測（旧22pxは仮値） */
  }
  /* スマホ版Figmaにパンくずが無いため非表示（サービス・会社案内共通） */
  .c-breadcrumb-wrap {
    display: none;
  }
  .c-breadcrumb {
    font-size: 12px;
  }
  .c-blue-heading__text {
    font-size: 20px; /* サービスSP版Figma実測（旧22pxは仮値） */
  }
  /* 項目表：1行を縦積み（項目名＝太字14px・上、内容＝16px・下、行の間は1px罫線） */
  .c-table,
  .c-table tbody,
  .c-table__row,
  .c-table__th,
  .c-table__td {
    display: block;
    width: auto;
  }
  .c-table__row {
    padding: 16px 0;
  }
  .c-table__th {
    padding: 0 0 6px;
    font-size: 14px;
  }
  .c-table__td,
  .c-table__td--address,
  .c-table__td--list {
    padding: 0;
  }
  .p-info-license__logos {
    margin-top: 16px;
  }
}

/* ---------- 9. c-flow（共通部品：ご依頼の流れカード。トップ・サービスで共用） ----------
   見出し（c-heading／c-blue-headingなどページごとに異なる）とセクションの
   上下余白はページ側（p-top-flow／p-service-flow）が持つ。ここはカード
   グリッド・カード本体・丸アイコン・STEPラベル・見出し・本文だけを持つ。
   2026-09-21 サービスページ追加にあわせて top.css の p-top-flow* から移設。 */
.c-flow__grid {
  display: grid;
  /* 280px幅×4列＋20pxギャップ×3 = 1180px（本文コンテナ幅ぴったり） */
  grid-template-columns: repeat(4, 1fr);
  column-gap: 20px;
}
.c-flow__item {
  position: relative;
  box-sizing: border-box;
  min-height: 311px; /* Figma：カード面 280×311（PC）。本文が短くても高さを保つ */
  background: var(--c-blue-pale);
  /* 本文の折り返し幅は01_仮文案の想定(260px)に合わせ、左右10pxにする */
  padding: 79px 10px 32px;
  text-align: center;
}
.c-flow__badge {
  position: absolute;
  top: -53px;
  left: 50%;
  transform: translateX(-50%);
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--c-blue);
  color: var(--c-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.c-flow__step-label {
  font: 700 14px/1.2 var(--font-num);
}
.c-flow__icon {
  width: auto;
  height: 40px;
}
/* 1行の見出し（打ち合わせ／ポスティング配布）と2行の見出し（お見積り・<br>お問い合わせ 等）で
   見出しブロックの中心が同じ高さに揃うよう、固定の高さ＋中央揃えにする
   （Figma実測：2行はtop4247、1行はtop4263＝どちらも中心はtop4279で揃う） */
.c-flow__heading {
  margin-top: 0;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 22px/1.45 var(--font-serif);
  color: var(--c-blue);
}
.c-flow__text {
  margin-top: 20px;
  text-align: center;
  font: 400 14px/1.7 var(--font-sans);
  color: var(--c-text);
}
.c-flow__text p { margin: 0; }
.c-flow__text p + p { margin-top: 16px; }

@media (max-width: 1199px) {
  .c-flow__grid { column-gap: 16px; }
}
/* 768〜1013px（タブレット）は4列だとカード幅が約200pxになり見出しが詰まるので2列にする。
   行間80px＝丸アイコンが上に53pxはみ出す分＋27px */
@media (max-width: 1013px) and (min-width: 768px) {
  .c-flow__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 80px;
  }
}

/* ---------- 9b. c-acc（開閉式の質問一覧。料金案内・求人の「よくあるご質問」で共用） ----------
   見た目（Q/Aの帯・色・余白）はページ側の p-*-faq__* が持つ。ここは開閉の仕組みだけ。
   JSが動かない環境では全部開いた状態で表示される（.is-ready が付いたときだけ閉じる）。
   高さのアニメーションは grid-template-rows 0fr→1fr（JSで高さを測らない方式）。 */
.c-acc__btn {
  display: flex;
  align-items: flex-start;
  gap: inherit;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.c-acc__label {
  flex: 1 1 auto;
  min-width: 0;
}
.c-acc__icon {
  position: relative;
  flex: none;
  align-self: center;
  width: 16px;
  height: 16px;
  margin-left: 8px;
}
.c-acc__icon::before,
.c-acc__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 2px;
  margin-top: -1px;
  background: var(--c-blue, #265ea8);
  transition: transform 0.3s ease;
}
.c-acc__icon::after {
  transform: rotate(90deg); /* 縦棒＝閉じているときは「＋」 */
}
.c-acc__btn[aria-expanded="true"] .c-acc__icon::after {
  transform: rotate(0deg); /* 開いたら「－」 */
}
.c-acc__panel {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr;
}
.c-acc__inner {
  min-height: 0;
  overflow: hidden;
}
/* アニメーションは .is-animated が付いてから有効（読み込み直後に「開→閉」が走るのを防ぐ） */
.c-acc.is-animated .c-acc__panel {
  transition: grid-template-rows 0.3s ease;
}
.c-acc.is-animated .c-acc__inner {
  transition: visibility 0.3s;
}
.c-acc.is-ready .c-acc__panel {
  grid-template-rows: 0fr;
}
.c-acc.is-ready .c-acc__inner {
  visibility: hidden;
}
.c-acc.is-ready .c-acc__panel.is-open {
  grid-template-rows: 1fr;
}
.c-acc.is-ready .c-acc__panel.is-open .c-acc__inner {
  visibility: visible;
}

/* ---------- 10. c-form（共通部品：フォームの表組み・入力欄・同意チェック・送信ボタン） ----------
   お問い合わせページで新規追加。他ページのフォーム（求人応募等）でも再利用できるよう
   c-form-接頭辞にする。Figma実測（contact_pc, 1440px）：
   ・行の高さ＝75px（罫線から罫線）。入力欄は上下15pxずつの余白で中央寄り＝height:44pxのボックス。
   ・ラベル列の幅＝313px（本文コンテナ左端から入力欄の左端まで）。
   ・入力欄は「短い欄（337px）」「長い欄（852px）」の2種類＋テキストエリア（852×279px）。
     どちらも `max-width:100%` を付け、1440pxちょうどではFigmaの固定幅、画面が狭くなると
     自然に縮む（768〜1115pxで「長い欄は100%」に見えるのはこのため。短い欄はまだ縮む
     必要がないので337pxを保つ＝「短い欄は最大幅を保つ」）。
   ・必須マークの赤は既存の --c-red と完全に同じ色（Figma実測169,64,64）だったため、
     新しい変数は追加せず --c-red をそのまま使う。 */
.c-form__table {
  border-top: 1px solid var(--c-line);
}
.c-form__row {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid var(--c-line);
}
.c-form__label {
  flex: none;
  box-sizing: border-box;
  width: 313px;
  /* 下側は付けない：行の高さは入力欄側（15+44+15=74px）が基準。
     ラベル側は上端23pxから2行ぶん自然な高さで収まる（textareaの行のように
     行の高さが大きいときも、ラベルは上寄せのまま＝Figma実測どおり）。 */
  padding: 23px 24px 0 0;
}
.c-form__required {
  display: block;
  font: 400 14px/19px var(--font-sans);
  color: var(--c-red);
}
.c-form__label-text {
  display: block;
  font: 700 16px/1.4 var(--font-sans);
  color: var(--c-text);
  cursor: pointer;
}
/* 必須マークが無い項目（ご希望時期・ご相談・ご要望）は、ラベルが1行だけになる分
   Figma実測で10px下がって見える（マーク行の高さぶん）。 */
.c-form__label-text:first-child {
  margin-top: 10px;
}
.c-form__control {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 15px 0;
}
.c-form__input,
.c-form__textarea {
  display: block;
  box-sizing: border-box;
  width: 852px; /* 既定＝長い欄。短い欄は --short 修飾クラスで上書き */
  max-width: 100%;
  padding: 0 16px;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  background: var(--c-bg);
  font: 400 16px/1.4 var(--font-sans);
  color: var(--c-text);
}
.c-form__input {
  height: 44px;
}
.c-form__input--short {
  width: 337px;
}
.c-form__textarea {
  height: 279px;
  padding-top: 12px;
  resize: vertical;
  font-family: var(--font-sans);
}
.c-form__input:focus-visible,
.c-form__textarea:focus-visible,
.c-form__checkbox:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 2px;
}
.c-form__error {
  margin: 8px 0 0;
  font: 700 14px/1.5 var(--font-sans);
  color: var(--c-red);
}
/* c-btn[hidden]と同じ理由（97行目付近のコメント参照）：hidden属性のdisplay:noneが
   同じ詳細度のdisplay:blockに負けて消えない不具合の対策。求人ページからの応募のとき
   contact.jsがこの要素にhiddenを付けて「※必須」表示を消すために必要（2026-09-22 追加）。 */
.c-form__required[hidden] {
  display: none;
}
/* お客様の区分（法人・団体／個人）のラジオボタン（2026-10-13 社長指示で追加）。
   静的版の span 入れ子と CF7 の出力（.wpcf7-list-item > label > input + span）の両方に
   効くよう、構造に依らない「.c-form__radio-group 配下の label／input」で指定する。 */
.c-form__radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding: 11px 0;
}
.c-form__radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 16px/1.4 var(--font-sans);
  color: var(--c-text);
  cursor: pointer;
}
.c-form__radio-group input[type="radio"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--c-blue);
  cursor: pointer;
}
.c-form__radio-group input[type="radio"]:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 2px;
}
/* 求人応募のとき contact.js が「お客様の区分」の行ごと隠す（display:flex との詳細度タイ対策） */
.c-form__row[hidden] {
  display: none;
}
/* 確認画面：入力欄のかわりに文字で表示する（textContentのみで書き込む） */
.c-form__value {
  display: none;
  margin: 0;
  padding: 10px 0;
  font: 400 16px/1.6 var(--font-sans);
  color: var(--c-text);
  white-space: pre-wrap;
  word-break: break-word;
}
.c-form__table.is-confirm .c-form__input,
.c-form__table.is-confirm .c-form__textarea,
.c-form__table.is-confirm .c-form__radio-group,
.c-form__table.is-confirm .c-form__error {
  display: none;
}
.c-form__table.is-confirm .c-form__value {
  display: block;
}

/* ---------- 同意チェック ---------- */
.c-form__agree {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 70px;
  text-align: center;
}
.c-form__agree[hidden] {
  display: none; /* 理由はc-btn[hidden]と同じ（display:flexとの詳細度タイ対策） */
}
.c-form__checkbox {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--c-blue);
  cursor: pointer;
}
.c-form__agree-link {
  color: var(--c-link);
  text-decoration: underline;
}
.c-form__agree-label {
  font: 400 16px/1.5 var(--font-sans);
  color: var(--c-text);
  cursor: pointer;
}
.c-form__agree .c-form__error {
  flex-basis: 100%;
  text-align: center;
}

/* ---------- ボタン列・送信後の注記 ---------- */
.c-form__actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 22px;
}
.c-form__actions .c-btn {
  width: 270px; /* Figma実測：確認画面へボタンの幅270（c-btn--lgは高さ・角丸のみで幅は個別指定が必要） */
}
.c-form__notice {
  margin-top: 20px;
  text-align: center;
  font: 400 14px/1.7 var(--font-sans);
  color: var(--c-gray-3);
}

@media (max-width: 767px) {
  .c-form__row {
    flex-direction: column;
    padding: 20px 0;
  }
  .c-form__label {
    width: auto;
    padding: 0 0 8px;
  }
  .c-form__label-text:first-child {
    margin-top: 4px;
  }
  .c-form__control {
    width: 100%;
    padding: 0;
  }
  .c-form__input,
  .c-form__textarea {
    width: 100%;
  }
  .c-form__input {
    height: 48px;
  }
  .c-form__textarea {
    height: 200px;
  }
  .c-form__agree {
    margin-top: 30px;
  }
  .c-form__actions {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .c-form__actions .c-btn {
    width: 100%;
    max-width: 270px;
  }
}

/* ============================================================
   ===== タブレット幅のヘッダー（1014〜1185px・ロゴだけ縮小）=====
   PC構成のまま変えず、ロゴの高さだけ縮めて1段に収める
   （767px以下で高さが238pxの2段になっていた問題の対策）。
   2026-09-20 会社案内Figmaでロゴが大きくなった（63→79px、幅359→451px）ため、
   境界を1115→1185pxに広げ、高さも46→48pxに調整（右ブロック幅624px＋隙間16px＋
   ロゴ幅と、左40px+右50pxの余白との合計が画面幅に収まる条件で算出。最も厳しい
   1014px幅でも収まる上限は約49.7px→安全マージンを見て48pxに設定）。
   ============================================================ */
@media (max-width: 1185px) {
  .l-header__logo img {
    height: 48px;
  }
}

/* ============================================================
   ===== ヘッダーのスマホ型切替（1013px以下）=====
   本文のスマホ切替（767px以下）とは別のメディアクエリにする
   （768〜1013pxはヘッダーだけこの型・本文はPC構成のまま）。
   Figma SP node 159:375（幅440px基準）実測。440px超は下記
   clamp()の上限で頭打ちになり、440px時の値のまま拡大しない。
   ============================================================ */
@media (max-width: 1013px) {
  /* スマホ型ヘッダーも追従（2026-09-22 社長指示）。sticky は基本ルール（PC）と同じ。
     スマホ版Figma（サービス・料金）のヘッダーにも同じ影が付いている。 */
  .l-header {
    position: sticky;
    top: 0;
  }
  html {
    scroll-padding-top: 80px; /* ヘッダー（最大60px）＋余白。ページ内リンクの行き先が隠れないように */
  }
  .l-header__inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    /* 高さは固定せず、いちばん背が高いハンバーガー(48〜60pxで比例)に
       そろえる（Chromeの最小フォント10px制約で受付時間が2行になっても
       ハンバーガーとの間に隙間ができないように） */
    padding: 0 0 0 10px;
    gap: 0;
  }
  .l-header__logo {
    margin-top: 0;
    flex: none;
  }
  .l-header__logo img {
    height: auto;
    width: clamp(118px, 37.73vw, 166px); /* 下限118px＝320px幅でもヘッダーが画面に収まる */
  }

  .l-header__right {
    display: flex;
    align-items: center;
    width: auto;
    max-width: none;
    margin-left: 0;
  }
  .l-header__row1 {
    align-items: center;
    justify-content: flex-start;
    gap: 0;
  }
  .l-header__contact {
    display: block;
    text-align: left;
    flex: none;
    /* 190px(基準440px時)を右端(ハンバーガー)にぴったり付ける。他の
       ヘッダー要素と同じ比率で縮む＝電話番号側の左端が動かない */
    width: clamp(132px, 43.18vw, 190px); /* 下限132px。320px幅：10＋121＋138＋48＝317px */
  }
  .l-header__tel {
    font: 700 clamp(15px, 4.09vw, 18px) / 18px var(--font-serif);
  }
  /* Chrome(日本語環境)は最小フォントが10pxのため、これ未満には縮められない。
     10px固定にした上で、2つの語のかたまりをそれぞれinline-blockにし、
     幅が足りない画面では自然に2行へ折り返せるようにする。 */
  .l-header__hours {
    font: 700 10px/13px var(--font-serif);
  }
  .l-header__hours span {
    display: inline-block;
  }
  .l-header__buttons {
    display: none; /* PCの金・赤ボタンはハンバーガーの中(.l-nav__actions)に集約 */
  }
  .l-header__divider {
    display: none;
  }
  .l-header__hamburger {
    display: flex;
    width: clamp(48px, 13.64vw, 60px);
    height: clamp(48px, 13.64vw, 60px);
  }

  /* ナビ本体：デザイン「ヘッダーメニュー（SP）」（幅440px）を画像から実測。
     ヘッダー直下に青い全幅パネル（y60〜583）。項目＝白・明朝Bold 20px、白い下線1px（x20〜419）が
     59pxごと（y128/187/…/423）。その50px下に金・赤の丸ボタン（各195×60・間10px）、下余白50px。 */
  .l-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 10px 20px 50px;
    background: var(--c-blue);
    z-index: 100;
  }
  .l-nav.is-open {
    display: block;
    /* 追従ヘッダーの中にあるので、画面が低い端末（例：320×568）では下のボタンまで届かない
       → メニューの中だけスクロールできるようにする */
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }
  .l-nav__list {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
  }
  .l-nav__list a {
    display: block;
    padding: 20px 0 8px; /* 1行＝20＋30＋8＋線1＝59px */
    font: 700 20px/30px var(--font-serif);
    color: var(--c-white);
    border-bottom: 1px solid var(--c-white);
  }
  .l-nav__list a:hover {
    color: var(--c-white);
    opacity: 0.8;
  }
  .l-nav__list a[aria-current="page"] {
    color: var(--c-white);
    border-bottom: 1px solid var(--c-white);
  }
  .l-nav__list a:focus-visible,
  .l-nav__actions .c-btn:focus-visible {
    outline: 3px solid var(--c-white);
    outline-offset: 2px;
  }
  .l-nav__actions {
    display: flex;
    gap: 10px;
    max-width: 400px;
    margin-top: 50px;
    padding: 0;
  }
  .l-nav__actions .c-btn {
    flex: 1 1 0;
    width: auto;
    height: 60px;
    padding: 0 6px;
    border-radius: 30px;
    font-size: clamp(14px, 4.09vw, 18px); /* 440px→18px。360pxでも1行 */
  }
}

/* ---------- 下固定ボタン：デザイン「SP_下固定ボタン」（幅440px）を画像から実測 ----------
   画面の下端に常に表示。金（x0〜217）と赤（x222〜439）、高さ60px、間4px、上の角だけ半径20px。
   ヘッダーの金・赤ボタンが隠れる幅（1013px以下）で表示する。 */
.l-fixed-cta {
  display: none;
}
@media (max-width: 1013px) {
  body {
    /* 下固定ボタンにコピーライトが隠れないよう、同じ高さぶん余白を足す */
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
  .l-fixed-cta {
    display: flex;
    gap: 4px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
  }
  .l-fixed-cta__btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    min-width: 0; /* これが無いと320px幅で文字が縮まず横スクロールが出る */
    border-radius: 20px 20px 0 0;
    font: 700 16px/1 var(--font-serif);
    font-size: clamp(13px, 3.64vw, 16px); /* 440px→16px、320px→13px */
    color: var(--c-white);
    text-decoration: none;
    white-space: nowrap;
  }
  .l-fixed-cta__btn--gold {
    background: var(--c-gold);
  }
  .l-fixed-cta__btn--red {
    background: var(--c-red);
  }
  .l-fixed-cta__btn:focus-visible {
    outline: 3px solid var(--c-blue);
    outline-offset: -3px;
  }
}

/* ============================================================
   ===== 本文のスマホ切替（767px以下）=====
   Figma SP node 159:375（幅440px基準）実測。
   ============================================================ */
@media (max-width: 767px) {
  .c-br-sp {
    display: none;
  }
  .c-br-only-sp {
    display: inline;
  }
  :root {
    --container-pad: 20px;
  }

  .c-heading {
    /* PCは見出し下40pxマージンだが、SPは各セクション側で下線からの間隔
       （30pxパターン）を個別に持たせるため、ここで一旦0にする */
    margin-bottom: 0;
  }
  .c-heading__text {
    font-size: 22px;
    line-height: 1.3;
  }
  .c-heading--sm .c-heading__text {
    font-size: 18px;
  }
  .c-heading--blue .c-heading__text {
    font-size: 18px;
  }

  /* ---------- フッター（縦積み。電話85px＋メール85px＋コピーライト30px） ----------
     グリッドの列幅がブロックごとの見出し文字数で変わり、縦線の位置が
     電話側とメール側でずれてしまったため、絶対配置に変更（レビュー第2ラウンド）。
     440px未満は表示崩れを防ぐため縦線位置・文字サイズを比例縮小する。 */
  .l-footer__cta {
    grid-template-columns: 1fr;
  }
  .l-footer__cta-block {
    position: relative;
    min-height: 85px;
    padding: 0;
    text-align: left;
  }
  .l-footer__cta-heading {
    position: absolute;
    left: 20px;
    /* 縦線(39.8vw)の2px手前で必ず折り返す幅にする（440px時は約153px）。
       表記統一で「メールでのお見積もり・」が11文字になったため、14px→最大13.2pxに下げて
       360〜440pxで2行（デザインどおり）に収める。320pxだけ3行になる（高さ85pxの中に収まる） */
    right: calc(100% - 39.8vw + 2px);
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    font-size: clamp(10.5px, 3vw, 13.2px);
    line-height: 1.45;
  }
  .l-footer__cta-line {
    position: absolute;
    left: 39.8vw; /* 440px時=175px。電話・メール両ブロックで同じ位置にそろえる */
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 65px;
    margin: 0;
  }
  .l-footer__tel {
    position: absolute;
    left: calc(39.8vw + 11px); /* 440px時=186px */
    right: 0;
    top: 16px;
    justify-content: center;
    margin: 0;
  }
  .l-footer__tel-link {
    font-size: clamp(19px, 5.45vw, 24px);
  }
  .l-footer__tel-link img {
    width: 26px;
    height: 26px;
  }
  .l-footer__hours {
    position: absolute;
    left: calc(39.8vw + 11px);
    right: 0;
    top: 52px;
    margin: 0;
    text-align: center;
    font-size: clamp(10px, 2.73vw, 12px); /* 440px→12px。375pxで12pxのままだと3pxはみ出す */
    white-space: nowrap;
  }
  .l-footer__cta-action {
    position: absolute;
    left: calc(39.8vw + 25px); /* 縦線(39.8vw)の25px右。440px時＝200px → 右端420・上下中央(top15) */
    right: 20px;
    top: 15px;
    max-width: 220px;
    margin: 0;
  }
  .l-footer__cta-block--mail .c-btn {
    width: 100%; /* .l-footer__cta-action の幅(min(220px,100%)相当)に追従 */
    height: 55px;
    padding: 0 8px;
    font-size: clamp(11px, 3.18vw, 14px);
  }
  .l-footer__cta-block--mail .c-btn img {
    width: 14px;
    height: 14px;
    right: 10px;
  }
  /* 400px未満はボタンが狭く、矢印と文字が重なるので矢印を出さない（文字を読めることを優先） */
  @media (max-width: 399px) {
    .l-footer__cta-block--mail .c-btn img {
      display: none;
    }
  }
  .l-footer__copyright {
    min-height: 30px;
    padding: 4px 20px;
  }

  /* ---------- c-flow（共通部品のSP値。カード357x190・丸アイコン87x87がカード左端に半分重なる配置） ---------- */
  .c-flow__grid {
    /* 1frだけだと子(.c-flow__item)の width:357px が自動最小値になり、
       横スクロールが出る（グリッドの既知の落とし穴）。minmax(0,1fr)で回避。 */
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
    /* 画面が広いとき（400〜767px）、丸アイコン＋カード（計400px）の組を中央に置く。
       （margin-left:43pxを含めた外枠ごと中央寄せになる）2026-09-30 */
    justify-items: center;
  }
  .c-flow__item {
    width: 357px;
    max-width: calc(100% - 43px); /* 43px=丸アイコン87pxの左半分 */
    min-width: 0; /* grid track が357pxを最小値にして横スクロールする不具合を防ぐ */
    margin-left: 43px;
    min-height: 190px;
    box-sizing: border-box;
    padding: 15px 20px 20px 62px;
    text-align: left;
  }
  .c-flow__badge {
    top: 51px;
    left: -43px;
    transform: none;
    width: 87px;
    height: 87px;
  }
  /* アイコンはFigma実測でSTEPごとに大きさが違う。丸の中で左右中央・
     上端は丸の上端から個別のpxにするため絶対配置にする */
  .c-flow__icon {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
  }
  .c-flow__item:nth-child(1) .c-flow__icon { height: 42px; top: 33px; }
  .c-flow__item:nth-child(2) .c-flow__icon { height: 42px; top: 33px; }
  .c-flow__item:nth-child(3) .c-flow__icon { height: 58px; top: 25px; }
  .c-flow__item:nth-child(4) .c-flow__icon { height: 46px; top: 32px; }
  /* アイコンが絶対配置になったので、STEPラベルも絶対配置にして固定の
     上端に置く（丸の中で一番浅い位置(STEP3のtop25px)より確実に上へ）。 */
  .c-flow__badge {
    display: block;
  }
  .c-flow__step-label {
    position: absolute;
    left: 0;
    right: 0;
    top: 8px;
    text-align: center;
    white-space: nowrap;
  }
  .c-flow__heading {
    min-height: 0;
    display: block;
    text-align: left; /* Figma1枚目だけ中央寄せなのは揃え漏れのため左揃えに統一 */
    font-size: 18px;
    line-height: 32px;
    margin-top: 0;
  }
  .c-flow__text {
    margin-top: 10px;
    text-align: left;
  }
  .c-flow__text p {
    font-size: 16px;
    line-height: 27px;
  }
  .c-flow__text p + p {
    margin-top: 5px;
  }
}