/* ==========================================================================
 sections.css ― 庭生ししくら デモサイト

 v1.0（CSSファイル分割契約）
 役割：<main> 内の全コンテンツセクション（hero〜contactの12ブロック）と、
 その中でのみ使う部品（.card・trust__badge・works__gallery・
 faqのアコーディオン各要素・contactのフォーム各要素）、および
 .u-reveal／.is-visible（フェードイン）。
 厳守：tokens.css のカスタムプロパティは参照のみ。再定義しない。
 .btn 自体の色・形は layout.css の担当（本ファイルでは位置調整のみ）。
 ========================================================================== */

/* --------------------------------------------------------------------------
 0. 共通：センタリング用の左右パディング「使用箇所ごと」の原則）。が指定するセクションごとの最大幅に合わせて3グループに分ける。
 -------------------------------------------------------------------------- */

/* グループA：コンテンツ最大幅 1080px（--content-max） */
.hero__content,
.services,
.works,
.reasons,
.flow,
.company {
  padding-inline: var(--sp-3);
}

@media (min-width: 600px) {
  .hero__content,

  .services,
  .works,
  .reasons,
  .flow,
  .company {
    padding-inline: var(--sp-4);
  }
}

@media (min-width: 900px) {
  .hero__content,

  .services,
  .works,
  .reasons,
  .flow,
  .company {
    padding-inline: max(var(--sp-5), calc((100% - var(--content-max)) / 2));
  }
}

/* グループB：最大幅 720px（concept） */
.concept {
  padding-inline: var(--sp-3);
}

@media (min-width: 600px) {
  .concept {
    padding-inline: max(var(--sp-4), calc((100% - 720px) / 2));
  }
}

@media (min-width: 900px) {
  .concept {
    padding-inline: max(var(--sp-5), calc((100% - 720px) / 2));
  }
}

/* グループC：faq＝800px、contact＝640px */
.faq {
  padding-inline: var(--sp-3);
}

@media (min-width: 600px) {
  .faq {
    padding-inline: max(var(--sp-4), calc((100% - 800px) / 2));
  }
}

@media (min-width: 900px) {
  .faq {
    padding-inline: max(var(--sp-5), calc((100% - 800px) / 2));
  }
}

.contact {
  padding-inline: var(--sp-3);
}

@media (min-width: 600px) {
  .contact {
    padding-inline: max(var(--sp-4), calc((100% - 640px) / 2));
  }
}

@media (min-width: 900px) {
  .contact {
    padding-inline: max(var(--sp-5), calc((100% - 640px) / 2));
  }
}

/* セクションの上下余白。900px以上でしか指定していなかったため、
   スマホ・タブレットでは 0 になり、セクションどうしが密着していた
   （2026-09-10 依頼者指摘「SP表示の際に各セクションが近すぎる」・実測0px） */
.concept,
.services,
.works,
.reasons,
.flow,
.faq,
.company,
.contact {
  padding-block: var(--sp-6);
}

@media (min-width: 600px) {
  .concept,
  .services,
  .works,
  .reasons,
  .flow,
  .faq,
  .company,
  .contact {
    padding-block: var(--sp-7);
  }
}

@media (min-width: 900px) {

  .concept,
  .services,
  .works,
  .reasons,
  .flow,

  .faq,
  .company,
  .contact {
    padding-block: var(--sp-8);
  }
}

/* --------------------------------------------------------------------------
 0-2. 共通：交互背景
 -------------------------------------------------------------------------- */
.concept,
.works,

.services,
.reasons,
.flow,
.faq,
.contact {
  background-color: var(--c-bg-dim);
}

/* --------------------------------------------------------------------------
 0-2-B. セクションの区切り線【2026-09-11 依頼者指示】

 「交互背景」としていたが、実際には concept〜faq と contact の6つが
 すべて同じ #EFE7D5 で、隣り合うセクションの境目が見えていなかった（実測）。
 そこで境目に罫を引く。

 意匠は、このサイトで既に使っている「菱（回転した小さな正方形）」を流用する。
 竹垣の結び目の印・カードの箇条書きの印と同じ形で、和の骨格から外れない。
 罫は両端に向かって薄れさせ、中央を菱のぶんだけ空ける。

 色は差し色 --c-accent（土色）。パレットの「罫線・アイコン・図版の線のみ」
 という決まりの範囲内で、面にも文字にも使っていない。

 2026-09-11 是正：当初 罫を --c-line にしていたが、背景 #EFE7D5 との比が
 **1.25:1** しかなく、ほぼ見えていなかった（依頼者指摘・実測）。
 罫を --c-accent（4.02:1）、中央の菱を --c-accent-deep（6.35:1）に変更し、
 菱は 7px→9px・線 1px→1.5px に上げた。
 罫の端の薄れも 14%→8% に詰め、実線として見える範囲を広げている。

 concept には引かない。ファーストビューの写真の直下に罫が来ると、
 写真を切り落としたように見えるため。
 -------------------------------------------------------------------------- */
.services,
.works,
.reasons,
.flow,
.faq,
.company,
.contact {
  position: relative;
}

.services::before,
.works::before,
.reasons::before,
.flow::before,
.faq::before,
.company::before,
.contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - var(--sp-6), var(--content-max));
  height: 1px;
  background-image: linear-gradient(
    to right,
    transparent 0,
    var(--c-accent) 8%,
    var(--c-accent) calc(50% - 16px),
    transparent calc(50% - 16px),
    transparent calc(50% + 16px),
    var(--c-accent) calc(50% + 16px),
    var(--c-accent) 92%,
    transparent 100%
  );
}

/* 罫の切れ目に置く菱。塗らず、線だけで描く */
.services::after,
.works::after,
.reasons::after,
.flow::after,
.faq::after,
.company::after,
.contact::after {
  content: "";
  position: absolute;
  top: -4.5px;
  left: 50%;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  border: 1.5px solid var(--c-accent-deep);
}

/* --------------------------------------------------------------------------
 0-3. 共通：セクション見出し（h2）の下端余白。「見出しとカード群の間：16px→24px」を各セクションの見出しに一律適用する。
 色・書体・サイズは`tokens.css`のh2既定1.4に済み）をそのまま使う。
 意図的な非上書き（`concept__title`のみ後述で個別値を上書きする）。
 -------------------------------------------------------------------------- */
.services__title,
.works__title,
.reasons__title,
.flow__title,
.faq__title,
.company__title,
.contact__title {
  margin-bottom: var(--sp-3);
}

@media (min-width: 900px) {
  .services__title,
  .works__title,
  .reasons__title,
  .flow__title,
  .faq__title,
  .company__title,
  .contact__title {
    margin-bottom: var(--sp-4);
  }
}

/* ==========================================================================
 1. hero・
 ========================================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
 color: var(--c-bg); /* 暗い面の既定文字色 */
  padding-block: var(--sp-6);
 /* ：sticky要素（demo-bar・header）の占有高さを差し引く */
  min-height: calc(100vh - var(--offset-top));
  min-height: max(calc(100dvh - var(--offset-top)), 480px);
}

@media (min-width: 900px) {
  .hero {
    /* 上下 96px ずつだと、縦書きの見出しを入れた内容が画面に収まらない。
       画面高に連動させ、上限を 48px に抑える */
    padding-block: clamp(var(--sp-4), 4vh, var(--sp-6));
  }
}

/*
 FV の高さ（2026-09-11 依頼者指示）
 - スマホ・PC：画面の高さいっぱい。下のセクションの地色を覗かせない
 - タブレットだけは例外。縦長で画面が大きいぶん、いっぱいにすると
 写真だけの帯が延々と続いて冗長になるため、高さに上限を設ける

 タブレットの範囲＝幅 600〜1099px かつ 画面高 1000px 以上。
 ・iPad 11" 縦（834×1194）・iPad Pro 12.9" 縦（1024×1366）→ 該当
 ・iPad 横（1194×834 等）→ 幅が 1100px 以上なので PC と同じ扱い
 ・スマホ（390×844 等）→ 高さが 1000px 未満なので該当しない
*/
@media (min-width: 600px) and (max-width: 1099px) and (min-height: 1000px) {
  .hero {
    min-height: min(
      max(calc(100dvh - var(--offset-top)), 480px),
      900px
    );
  }
}

.hero:focus-visible,
.hero :focus-visible {
  outline-color: var(--c-surface);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

.hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* スクリム：`--c-green-deep`（#16261D→rgb(22,38,29)）のグラデーション不透明度。
 下部（文字を置く側）を濃く、上部を薄くして写真を潰しすぎないF・ */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
 /* 2026-09-10 是正：写真のピクセルを実測したところ、キャッチ背後の最明部が
 1.05:1 しかなかった。縦グラデを強めたうえで、縦書きキャッチが載る左側に
 横グラデを重ねる。写真の見せ場（右側）は暗くしすぎない */
  background-image:
    linear-gradient(
      180deg,
      rgba(22, 38, 29, 0.50) 0%,
      rgba(22, 38, 29, 0.68) 55%,
      rgba(22, 38, 29, 0.86) 100%
    ),
    linear-gradient(
      90deg,
      rgba(22, 38, 29, 0.74) 0%,
      rgba(22, 38, 29, 0.52) 22%,
      rgba(22, 38, 29, 0.22) 45%,
      rgba(22, 38, 29, 0) 70%
    );
}

.hero__content {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
 /* 2026-09-10 依頼者指示：スマホでもキャッチは左に置く。
 900px以上の構成（左にキャッチ・右下にボタン）と見え方を揃える。
 写真のスクリムも左側が最も濃いため、文字の読みやすさにも都合がよい */
  align-items: flex-start;
  text-align: left;
 /* 2026-09-10：低い画面でも収まるよう、間隔をビューポート高に連動させる */
  gap: clamp(6px, 1.2vh, var(--sp-3));
}

.hero__catch {
 color: var(--c-bg); /*hero見出しは暗い面のためbg色 */
 /* 2026-09-10：縦書きは文字数×字送りが「高さ」になる。12文字が画面に収まるよう
 vw だけでなく vh でも上限を掛ける。
 2026-09-10 追記：タブレット縦（834×1194 等）で vh 側の係数が小さすぎ、
 写真の上に 500px 前後の空白が残っていた。係数と上限を引き上げる。
 スマホ（375px 幅）は vw 側が効くため、この変更の影響を受けない */
  font-size: clamp(1.75rem, min(11vw, 5.2vh), 3.25rem);
 /* 縦組みを2列に折り返させない。tokens.css の word-break: auto-phrase と
 text-wrap: balance が効くと、読点で改行して列がずれ、雁木状に見える
 （2026-09-10 依頼者指摘・是正） */
  white-space: nowrap;
  text-wrap: nowrap;
 /* 写真の明るい部分が透けても文字が読めるようにする（実測で最明部1.05:1だった） */
  /* 写真の明るい部分が透ける箇所でも輪郭を保つ。
     写真の上の文字はコントラスト計算式で保証できないため、影で局所的に補う */
  text-shadow:
    0 1px 12px rgba(22, 38, 29, 0.92),
    0 0 4px rgba(22, 38, 29, 0.85),
    0 0 1px rgba(22, 38, 29, 0.9);
}

.hero__cta-group {
  display: flex;
  flex-direction: column;
 /* ボタンだけは右下にまとめる。キャッチ（左）と役割で場所を分ける */
  align-self: flex-end;
  align-items: flex-end;
  text-align: right;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.hero__sentinel {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 1px;
}

/* ==========================================================================
 3. concept
 ========================================================================== */
.concept__title {
  margin-bottom: var(--sp-4);
}

.concept__quote {
  margin: 0;
  padding-left: var(--sp-4);
 border-left: 3px solid var(--c-accent); /* 罫線としての差し色使用のみ */
}

.concept__quote-line {
  margin-bottom: var(--sp-2);
  font-size: 1.0625rem;
  line-height: 1.9;
}

.concept__quote-line:last-child {
  margin-bottom: 0;
}

.concept__cite {
  display: block;
  margin-top: var(--sp-2);
  padding-left: var(--sp-4);
  color: var(--c-text-muted);
  font-size: 0.8125rem;
  font-style: normal;
}

.concept__body {
  margin-top: var(--sp-5);
  display: flex;
  flex-direction: column;
}

.concept__text {
  margin-bottom: var(--sp-3);
}

.concept__text:last-of-type {
  margin-bottom: 0;
}

.concept__image {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--sp-4);
  border-radius: 4px;
}

/* ==========================================================================
 4. services・
 ========================================================================== */
.services__lead {
  margin-top: var(--sp-2);
  max-width: 42em;
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  /* 3枚とも「写真＋見出し＋短い本文＋項目」の同じ構成に揃えたので、
 高さも揃える。1枚だけ縦に長いという見え方をなくす（2026-09-10 依頼者指示） */
  align-items: stretch;
  gap: var(--sp-3);
 margin-top: var(--sp-3); /* 「見出しとカード群の間」16px */
}

@media (min-width: 600px) {
  .services__grid {
    gap: var(--sp-4);
  }
}

/*
 2026-09-11 是正：600〜899px で 2 列にしていたため、
 カードが3枚のこのグリッドでは最後の1枚が必ず余っていた
 （iPad mini 768px で [2, 1] になることを実測）。
 3枚に対して 2 列は成立しないので、この幅では 2 列を使わない。
 700px 未満は1列、700px 以上は 3 列だけにする。
 700px を境にしたのは、それ未満だと1枚あたり 200px を割り込み、
 見出し・本文・項目が入るカードとして窮屈になるため。
*/
@media (min-width: 700px) {
  .services__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .services__grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 margin-top: var(--sp-4); /* 24px */
  }
}

/* --------------------------------------------------------------------------
 4-B. サービス3枚で「菱の項目」の開始位置を揃える【2026-09-11 依頼者指示】

 項目は本文の直下に置いているため、本文の行数の差だけ上下にずれていた。
 実測（文章量を揃えたあとでも）：
 700px → 6/6/6 行、768px → 4/5/5 行、1024px → 3/4/3 行、1440px → 3/3/3 行。
 折り返しは文節の切れ目に左右されるので、文章量を合わせるだけでは
 幅によって1行ぶん（768px で 26px、1024px で 28px）ずれが残る。

 そこで subgrid を使い、カードの中の行そのものをグリッド側で共有する。
 〈写真／見出し／本文／項目／注記〉の5行を3枚で揃えるため、
 本文が何行になっても項目の開始位置が一致する。

 subgrid 非対応のブラウザ（対応下限の iOS Safari 15.4 など）では
 この @supports の塊ごと無視され、従来どおり本文の直下に付く。
 読めなくなる要素は無いので、そのまま劣化させてよい。
 -------------------------------------------------------------------------- */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    .services__grid {
      grid-template-rows: repeat(5, auto);
      row-gap: 0;
    }

    .services__grid .card {
      grid-row: span 5;
      display: grid;
      grid-template-rows: subgrid;
    }

    .services__grid .card__body {
      grid-row: 2 / span 4;
      display: grid;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    /* 行の間隔は gap ではなく margin で作る。
       subgrid では gap が親から降りるため、gap に頼ると
       写真と見出しの間まで同じだけ空いてしまう */
    .services__grid .card__text {
      margin-top: var(--sp-2);
    }

    /* 行に余りが出ても、項目と注記は行の上端から始める */
    .services__grid .card__list,
    .services__grid .card__note {
      align-self: start;
    }
  }
}

/* ==========================================================================
 5. .card（共通部品／services・reasonsで共通利用
 ========================================================================== */
.card {
  display: flex;
  flex-direction: column;
 overflow: hidden; /* card__imageを角丸に沿って切り抜く */
  background-color: var(--c-surface);
 border: 1px solid var(--c-line); /* 装飾罫線（の例外運用どおり非必須境界） */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(34, 31, 28, 0.08);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

/* 主役のカードも枠色で差をつけない。3枚の体裁を揃える */
.card--primary {
  border-color: var(--c-line);
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(34, 31, 28, 0.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition-duration: 0ms;
  }

  .card:hover {
    transform: none;
  }
}

.card__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  flex: 1;
}

@media (min-width: 900px) {
  .card__body {
    padding: var(--sp-5);
  }
}

.card__title {
 color: var(--c-green); /*カード見出しはgreenのまま（用途別でよい） */
}

.card__text {
 color: var(--c-text); /* body既定を明示（意図的な非上書き） */
  line-height: 1.7;
 /* 2026-09-11 依頼者指摘「SP の本文の改行位置」への是正。
 tokens.css の p 既定は text-wrap: pretty だが、狭いカード幅では
 行長が 14/19/9 字のように大きくばらつき、
 「手が／けています」のように語の途中で切れる行も出ていた（375px で実測）。
 balance は各行の長さを揃えるため、この2つが同時に解消する。
 対象は4行以内の短い本文に限る（Chrome の balance には行数上限がある）。 */
  text-wrap: balance;
}

.card__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.card__list-item {
  position: relative;
  padding-left: 1.4em;
}

.card__list-item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 6px;
  height: 6px;
 border: 1.5px solid var(--c-accent); /* 枠線のみ＝罫線用途（。面にしない） */
  transform: translateY(-50%) rotate(45deg);
}

/* ==========================================================================
 6. works・
 ========================================================================== */
.works__note {
  margin-top: var(--sp-2);
  color: var(--c-text-muted);
  font-size: 0.8125rem;
}

.works__gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
 margin-top: var(--sp-3); /* 「見出しとカード群の間」16px */
}

/*
 2026-09-11 是正：写真が9枚なので、2 列だと必ず1枚余る
 （iPad mini 768px で [2,2,2,2,1] になることを実測）。
 9 は 3 の倍数なので、2 列の段を置かず 1 列から 3 列へ移る。
 600px で1枚あたり約173px。ギャラリーの縮小版としては十分な大きさ。
*/
@media (min-width: 600px) {
  .works__gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .works__gallery {
    gap: var(--sp-4);
 margin-top: var(--sp-4); /* 24px */
  }
}

.works__item {
 height: 100%; /* グリッドセルいっぱいにfigure/imageを伸ばす */
}

.works__figure {
  margin: 0;
  height: 100%;
}

.works__image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
}

/* ==========================================================================
 7. reasons・※カードは.cardを再利用
 ========================================================================== */
.reasons__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
 margin-top: var(--sp-3); /* 「見出しとカード群の間」16px */
}

@media (min-width: 600px) {
  .reasons__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }
}

@media (min-width: 900px) {
  .reasons__grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
 margin-top: var(--sp-4); /* 24px */
  }
}

/* ==========================================================================
 9. flow・
 ========================================================================== */
.flow__steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}

.flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-left: 56px;
}

/* SP：縦に積むため、番号を繋ぐ線も縦にする */
.flow__step::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: calc(var(--sp-5) * -1);
  width: 2px;
  background-color: var(--c-line);
}

.flow__step:last-child::before {
  display: none;
}

.flow__step-index {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--c-green);
  border: 2px solid var(--c-bg);
  border-radius: 50%;
  color: var(--c-surface);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}

.flow__step-title {
 color: var(--c-text); /* 非カードのh3はtext既定のまま考え方をFAQ以外にも適用） */
}

.flow__step-text {
  color: var(--c-text);
  line-height: 1.7;
 /* 横並びの列は幅が狭く、カード本文と同じ理由で行長がばらつく */
  text-wrap: balance;
}

/* `flow`は交互背景で--c-bg-dim。--c-accent-deepは6.35:1でAAA未達のため
 （実測・下記報告参照）、hoverは--c-green-deepを使う（12.84:1・合格） */
/* ==========================================================================
 11. faq・
 ========================================================================== */
/*
 2026-09-11 依頼者指示：白い枠カードをやめ、罫線と余白だけで見せる。
 面を減らすことで、和モダンの落ち着いた見え方に寄せる。
 「開いた後の本文が読みづらい」（2026-09-10）への是正は、
 地色ではなく〈文字サイズ・A の記号・字下げ〉で引き続き担保する。
*/
.faq__list {
  display: flex;
  flex-direction: column;
 /* 項目どうしは離さず、1本の罫で区切る */
  gap: 0;
  border-top: 1px solid var(--c-line);
 margin-top: var(--sp-3); /* 「見出しとカード群の間」16px */
}

@media (min-width: 900px) {
  .faq__list {
 margin-top: var(--sp-4); /* 24px */
  }
}

.faq__item {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  transition: border-color 200ms ease;
}

.faq__question-title {
  margin: 0;
}

.faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: 56px;
 /* 左右の余白は取らない。罫の端と文字の頭をそろえる */
  padding: var(--sp-4) 0;
  transition: color 200ms ease;
  background-color: transparent;
  border: none;
 color: var(--c-text); /*FAQ質問文はtextのまま */
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.faq__question:hover {
  color: var(--c-green);
}

.faq__question-text {
  /* ボタン内の span は親の text-wrap を継承しないため、個別に指定する */
  word-break: auto-phrase;
  text-wrap: balance;
  flex: 1;
}

/* 質問であることが一目で分かるよう、頭に Q を立てる */
.faq__question-text {
  position: relative;
  padding-left: 28px;
  line-height: 1.7;
}

.faq__question-text::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-green);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.faq__question:hover {
  color: var(--c-green);
}

.faq__question-icon {
  margin-top: 4px;
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.faq__question-icon::before {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 12px;
  height: 12px;
 /* 罫だけの作りに合わせ、線は細いまま寸法だけ上げる（9px→12px） */
  border-right: 1.5px solid var(--c-accent);
  border-bottom: 1.5px solid var(--c-accent);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 200ms ease;
}

.faq__item.is-open .faq__question-icon::before {
  transform: translate(-50%, -50%) rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
  .faq__question-icon::before {
    transition-duration: 0ms;
  }
}

/* 開いたときの答えは、質問（20px 明朝）に対して 16px ゴシックだったため
   小さく沈んで見えた。加えて地色 --c-bg がセクション地 --c-bg-dim とほぼ同じで、
   開いた面が面として見えなかった。地色を白に変え、文字を1段大きくする
   （2026-09-10 依頼者指摘「開いた後の本文が読みづらい」への是正） */
.faq__answer {
 /* 質問の Q と頭をそろえて字下げし、左に細い罫を立てて答えだと示す。
 面（背景色）は使わない */
  margin: 0 0 var(--sp-4) 28px;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);
  border-left: 2px solid var(--c-line);
  background-color: transparent;
  color: var(--c-text);
  line-height: 1.9;
}

/* 回答であることが分かるよう、頭に A を立てる */
.faq__answer > *:first-child {
  position: relative;
  padding-left: 24px;
}

.faq__answer > *:first-child::before {
  content: "A";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-accent-deep);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.9;
}

/* 開いている項目は、質問の文字色だけで示す。面は使わない */
.faq__item.is-open .faq__question {
  color: var(--c-green);
}

.faq__item.is-open .faq__answer {
  border-left-color: var(--c-accent);
}

@media (prefers-reduced-motion: reduce) {
  .faq__question {
    transition: none;
  }
}

.faq__answer[hidden] {
  display: none;
}

.faq__answer-text {
  color: var(--c-text);
  /* 質問 20px に対して 17px。本文の 16px より1段上げて読みやすくしつつ、
 質問より小さいという上下関係は保つ */
  font-size: 1.0625rem;
}

/* ==========================================================================
 12. company・
 ========================================================================== */
.company__info {
  display: flex;
  flex-direction: column;
 margin-top: var(--sp-3); /* 「見出しとカード群の間」16px。900px以上は下記grid内でsp-4に上書き */
 /* dl のブラウザ既定の下マージン（1em＝16px）を消す。
 これが残っていると、900px以上でグリッドの行が16px高くなり、
 右列の地図の下端が表の最終行より16px下にずれる（2026-09-10 実測・是正） */
  margin-bottom: 0;
}

.company__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--c-line);
}

@media (min-width: 600px) {
  .company__row {
    flex-direction: row;
    align-items: baseline;
    gap: var(--sp-4);
  }
}

.company__label {
  flex-shrink: 0;
  color: var(--c-text);
  font-weight: 700;
}

@media (min-width: 600px) {
  .company__label {
    width: 7em;
  }
}

.company__value {
  margin: 0;
  color: var(--c-text);
  /* リンクは括弧で囲まず単独で置く。44px の inline-flex は分割不可の塊になり、
 直前の開き括弧だけが行末に取り残されるため */
}

/* 社会活動は2件の事実を並べるだけ。文章で続けると冗長になるため箇条書きにする
 （2026-09-10 依頼者指示「もう少し端的に」） */
.company__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.company__list-item {
  position: relative;
  padding-left: 14px;
  color: var(--c-text);
  line-height: 1.8;
}

/* 記号は自前の図形。card__list-item と同じ意匠に揃える */
.company__list-item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.68em;
  width: 5px;
  height: 5px;
  background-color: var(--c-green);
  transform: rotate(45deg);
}

.company__phone-link {
  /* 電話は主導線であり、押しやすさが問い合わせに直結する。
 文中リンクだが、他の同種リンクと同じ 44px のタップ領域に揃える。
 2026-09-11 依頼者指示：下線と太字はやめ、色だけで示す（フッターと同じ扱い）。
 表の中で1行だけ強調が浮いて見えるため */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  width: fit-content;
  color: var(--c-green);
  font-weight: 400;
  text-decoration: none;
}

.company__phone-link:hover {
 color: var(--c-accent-deep); /* on --c-bg = 7.00:1（実測・合格） */
}

.company__map {
  margin-top: var(--sp-4);
}

.company__map-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: none;
  border-radius: 4px;
}

.company__note {
  margin-top: var(--sp-3);
  color: var(--c-text-muted);
  font-size: 0.8125rem;
}

@media (min-width: 900px) {
  .company {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-6);
    row-gap: 0;
  }

  .company__title {
    grid-column: 1 / -1;
  }

  .company__info {
    grid-column: 1 / 2;
    margin-top: var(--sp-4);
  }

  /* 地図の下端を、左列（会社概要の表）の最終行の下端に合わせる
     （2026-09-10 依頼者指示）。16:10 の比率をやめ、行の高さいっぱいに伸ばす */
  .company__map {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    align-self: stretch;
    margin-top: var(--sp-4);
    /* iframe が高さ100%を取れるよう、包む側にも高さの基準を与える */
    display: flex;
  }

  .company__map-frame {
    aspect-ratio: auto;
    /* 表が短い画面でも地図が潰れないように下限だけ決めておく */
    min-height: 320px;
    height: 100%;
  }

  .company__note {
    grid-column: 1 / -1;
  }

}

/* ==========================================================================
 13. contact・
 ========================================================================== */
/*
 デモ表記（`00`§6-3 の3箇所のうちの1つ）。位置は「フォーム直上」で確定。
 見え方は 2026-09-11 依頼者指示により変更：
 白地＋左罫4px の「箱」をやめ、他の注釈と同じ〈※・小さく・背景なし〉に揃える。
 依頼者は以前から「注釈は※小さく背景なし」と決めており、
 この規則だけがその扱いから外れていた。
 長らく CSS の構文エラー（セレクタ行頭の余分な二重引用符）で規則ごと
 破棄されていたため、箱が画面に出ておらず、ずれに気づけていなかった。

 `00`§13 の「デモ表記は確実に浮かせる／左罫だけに依存させない」という
 以前の裁定は、この指示で上書きされている。
 代わりに、見落とされないよう次の2つで支える：
 ・文字色は他の注釈（--c-text-muted）より濃い --c-text を使う
 ・細い左罫（2px）を残して、本文とは別の一行だと分かるようにする
*/
.contact__notice {
  margin-top: var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--c-green);
  color: var(--c-text);
  font-size: 0.8125rem;
  line-height: 1.8;
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.contact__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.contact__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-text);
  font-weight: 700;
}

/* 必須と任意が同じ淡い緑の丸バッジで、見分けがつかなかった。
   必須＝塗り／任意＝枠線だけ、と地と文字の両方で差をつける
   （2026-09-10 依頼者指摘「必須と任意の差が分かりにくい」） */
.contact__required,
.contact__optional {
  display: inline-flex;
  align-items: center;
  margin-left: var(--sp-2);
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* 必須：塗りつぶし。
 2026-09-11 是正：地を --c-accent-deep（土色）にしていたが、
 差し色は「罫線・アイコン・図版の線のみ。面・文字にしない」という
 パレットの決まりに反していた（tokens.css の --c-accent の注記）。
 面に使ってよい主色 --c-green へ変更する。
 白文字とのコントラストは 11.35:1（AAA） */
.contact__required {
  background-color: var(--c-green);
  border: 1px solid var(--c-green);
  color: var(--c-surface);
}

/* 任意：地を持たせず、細い枠と控えめな文字色だけにする */
.contact__optional {
  background-color: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-text-muted);
  font-weight: 400;
}

.contact__input,
.contact__textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-2) var(--sp-3);
  background-color: var(--c-surface);
  border: 1px solid var(--c-text-muted);
  border-radius: 4px;
  color: var(--c-text);
  font-family: var(--font-body);
 font-size: 1rem; /* iOS自動ズーム防止 */
}

.contact__textarea {
  min-height: 120px;
  resize: vertical;
}

.contact__input:focus-visible,
.contact__textarea:focus-visible {
  border-color: var(--c-green);
}

.contact__field.is-error .contact__input,
.contact__field.is-error .contact__textarea {
  border-width: 2px;
  border-color: var(--c-error);
}

.contact__error {
  margin: 0;
  color: var(--c-error);
  font-size: 0.8125rem;
}

.contact__submit {
  width: 100%;
  margin-top: var(--sp-2);
}

.contact__result {
  margin-top: var(--sp-2);
  padding: var(--sp-4);
  background-color: var(--c-surface);
 border-left: 4px solid var(--c-accent); /* 罫線としての差し色使用のみ */
  border-radius: 4px;
}

.contact__result-text {
  margin: 0 0 var(--sp-2);
  color: var(--c-text);
}

.contact__result-phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-green);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

.contact__result-phone:hover {
 color: var(--c-accent-deep); /* on --c-surface = 7.82:1（実測・合格） */
}

/* ==========================================================================
 14. .u-reveal（共通・フェードイン／・
 ========================================================================== */
/* JS が読み込まれた場合にのみ初期状態を非表示にする。
 スクリプトが落ちた・ブロックされた・無効化された環境で本文が永久に
 消えることを防ぐため、無条件の opacity:0 は使わない */
.js-reveal-ready .u-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1), transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

@media (min-width: 900px) {
  .js-reveal-ready .u-reveal {
    transform: translateY(20px);
  }
}

.js-reveal-ready .u-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal-ready .u-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
 ファーストビュー：900px以上の構成
 縦書きの見出しを左半分に大きく置き、ボタンを右下にまとめる。
 縦組みの見出しは「高さ」が文字数で決まるため、字送りを画面高にも連動させる。
 --------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .hero__content {
    display: grid;
    grid-template-columns: min-content minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: var(--sp-8);
    row-gap: var(--sp-2);
    width: 100%;
  }

  /* 左列：縦書きの見出しを大きく、上下の中央に据える */
  .hero__catch {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    /* 縦組みの高さ = 文字数(12) x 字送り(1 + 0.1em)。
       上下の余白を差し引くと、vh 係数は 5.4 が上限になる。
       vw 側は 5 → 6.5 に引き上げる。縦書きの寸法を決めるのは高さであり、
       1024px 幅のタブレットでは vw 側が先に頭打ちして、
       写真の上に 466px の空白が残っていたため（2026-09-10 実測・是正） */
    font-size: clamp(2.25rem, min(6.5vw, 5.4vh), 4rem);
    letter-spacing: 0.1em;
  }

  /* ボタンは右下にまとめる。縦2段だと高さを取りすぎるため横並びにする */
  .hero__cta-group {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: end;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-3);
  }
}

/* 選ばれる理由は4つ。3列だと1つ余って浮くため、2列×2行にする */
@media (min-width: 600px) {
  .reasons__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 注釈は ※ を頭に置き、小さく、背景色を敷かない */
.company__annotation,
.works__note,
.company__note,
.footer__notice {
  color: var(--c-text-muted);
  font-size: 0.8125rem;
  line-height: 1.8;
}

.company__annotation {
  display: inline-block;
  margin-left: var(--sp-2);
}

.footer__notice {
  color: var(--c-bg-dim);
}

/* カード内のリストは名称だけを並べる。縦に伸びないよう横に流す */
.card__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}

.card__list-item {
  position: relative;
  padding-left: 14px;
  color: var(--c-text);
  font-size: 0.9375rem;
}

/* 記号は自作の図形にする。外部のアイコン素材を持ち込まない */
.card__list-item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background-color: var(--c-green);
  transform: rotate(45deg);
}

.card__note {
  text-wrap: balance;
  margin-top: var(--sp-3);
  color: var(--c-text-muted);
  font-size: 0.8125rem;
  line-height: 1.8;
}

/* PC：横一列に並べ、番号を1本の横線で繋ぐ */
@media (min-width: 900px) {
  .flow__steps {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  .flow__step {
    flex: 1 1 0;
 /* flex 項目の min-width は既定が auto（＝中身の最小幅）。
 これがあると、見出しの長い項目だけが他より広くなる。
 実測：4番目だけ 212px、他は 183px（2026-09-11 是正）。
 0 にして 5列を本当に等分する。番号を結ぶ横線の長さもこれで揃う */
    min-width: 0;
    padding-left: 0;
    padding-top: 56px;
    text-align: center;
  }

  /* 本文も番号・見出しと同じく中央に揃える（2026-09-10 依頼者指示）。
     中央寄せで行の頭がそろわなくなる分は、text-wrap: pretty と
     word-break: auto-phrase（tokens.css）が文節で折り返して補う */
  .flow__step-text {
    text-align: center;
    padding-inline: var(--sp-2);
  }

  /* 最後の項目には線を引かない（SP用の指定を PC でも効かせる） */
  .flow__step:last-child::before {
    display: none;
  }

  /* 番号どうしを結ぶ横線。次の番号の中心まで伸ばす */
  .flow__step::before {
    left: 50%;
    right: auto;
    top: 19px;
    bottom: auto;
    width: calc(100% + var(--sp-4));
    height: 2px;
  }

  /* 番号は各項目の上端中央に置く */
  .flow__step-index {
    left: 50%;
    transform: translateX(-50%);
  }
}