/*
  components.css
  複数セクションで再利用される部品のみ（ボタン・カード・バッジ・注記・
  セクション見出し・スキップリンク・フォーム部品）。
  数値はデザイン定義の確定値。
*/

/* =========================================================
   1. ボタン
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  border-radius: var(--radius-md);
  padding: 16px 24px;
  border: 2px solid transparent;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: var(--fw-bold);
  font-size: 0.9375rem; /* 15px */
  line-height: 1;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap; /* ラベル折り返しによる高さ超過（44px/ヘッダー高との矛盾）を防ぐ */
  cursor: pointer;
}

@media (min-width: 900px) {
  .btn {
    padding: 16px 32px;
    font-size: 1rem; /* 16px */
  }
}

@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease,
      border-color var(--dur-fast) ease;
  }
}

.btn__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ---- 主ボタン（電話専用） ---- */
.btn--primary {
  background: var(--c-green);
  color: var(--c-surface);
  border-color: var(--c-green);
}

.btn--primary:hover {
  background: var(--c-green-deep);
  color: var(--c-surface); /* 文字色を明示（2026-09-08 修正。省略すると状態によって緑地に緑文字になりうる） */
  border-color: var(--c-green-deep);
}

.btn--primary:active {
  background: var(--c-green-deep);
  border-color: var(--c-green-deep);
}

@media (prefers-reduced-motion: no-preference) {
  .btn--primary:active {
    transform: scale(0.98);
  }
}

.btn--primary:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ---- 副ボタン（ナビゲーション・アンカー遷移全般） ---- */
.btn--secondary {
  background: transparent;
  color: var(--c-green);
  border-color: var(--c-green);
}

.btn--secondary:hover {
  background: var(--c-green-soft);
  color: var(--c-green); /* 文字色を明示（2026-09-08 修正） */
}

.btn--secondary:active {
  background: var(--c-green-soft);
}

@media (prefers-reduced-motion: no-preference) {
  .btn--secondary:active {
    transform: scale(0.98);
  }
}

.btn--secondary:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ---- 送信ボタン（フォーム。配色は主ボタンと同一） ---- */
.btn--submit {
  background: var(--c-green);
  color: var(--c-surface);
  border-color: var(--c-green);
}

.btn--submit:hover {
  background: var(--c-green-deep);
  color: var(--c-surface); /* 文字色を明示（2026-09-08 修正） */
  border-color: var(--c-green-deep);
}

.btn--submit:active {
  background: var(--c-green-deep);
  border-color: var(--c-green-deep);
}

@media (prefers-reduced-motion: no-preference) {
  .btn--submit:active {
    transform: scale(0.98);
  }
}

.btn--submit:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/*
  ---- is-on-dark面のボタン配色----
  is-on-darkが祖先要素の場合（hero__cta-group・cta-bar内のボタン）と、
  要素自身に付与される場合の両方に対応する。
  header内の電話ボタン（.hdr__phone）はheader自体がis-on-darkを持たない設計のため、
  sections.cssで同じ配色を個別に適用する。
*/
.is-on-dark .btn--primary,
.is-on-dark.btn--primary {
  background: var(--c-surface);
  color: var(--c-green);
  border-color: var(--c-surface);
}

.is-on-dark .btn--primary:hover,
.is-on-dark.btn--primary:hover,
.is-on-dark .btn--primary:active,
.is-on-dark.btn--primary:active {
  background: var(--c-bg-dim);
  color: var(--c-green); /* 文字色を明示（2026-09-08 修正） */
  border-color: var(--c-bg-dim);
}

.is-on-dark .btn--secondary,
.is-on-dark.btn--secondary {
  background: transparent;
  color: var(--c-bg);
  border-color: var(--c-bg);
}

.is-on-dark .btn--secondary:hover,
.is-on-dark.btn--secondary:hover,
.is-on-dark .btn--secondary:active,
.is-on-dark.btn--secondary:active {
  background: var(--c-green-deep);
  color: var(--c-bg);
  border-color: var(--c-bg);
}

/* =========================================================
   2. カード
   base: .card。variant: .item-card（items）
   services・items・reasonsの3セクションで共有する。
   ========================================================= */

.card,
.item-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4); /* 24px */
}

@media (min-width: 900px) {
  .card,
  .item-card {
    padding: var(--sp-5); /* 32px */
  }
}

/* ホバー演出はマウス操作可能なPCのみ。タッチデバイスでは無効化する */
@media (hover: hover) and (pointer: fine) {
  .card,
  .item-card {
    transition: box-shadow 200ms ease;
  }
  .card:hover,
  .item-card:hover {
    box-shadow: var(--shadow-card-hover);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card,
  .item-card {
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .card:hover,
  .item-card:hover {
    transform: translateY(-4px);
  }
}

/*
  スクロール到達時のフェードイン（カード群が対象）。

  重要：初期状態の opacity:0 は `.is-reveal-ready`（scroll-reveal.js が <html> に付ける）
  が付いているときだけ適用する。JS が読み込めなかった場合・エラーで落ちた場合でも
  カードが透明のまま消えないようにするための保険である。
  （2026-09-08：type="module" が file:// でブロックされ、全カードが不可視になる事故が発生したため導入）
*/
@media (prefers-reduced-motion: no-preference) {
  .is-reveal-ready .card,
  .is-reveal-ready .item-card {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-fade) var(--ease-out), transform var(--dur-fade) var(--ease-out);
  }

  .card.is-visible,
  .item-card.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .is-reveal-ready .card,
  .is-reveal-ready .item-card {
    transform: translateY(20px);
  }
  .card.is-visible,
  .item-card.is-visible {
    transform: translateY(0);
  }
}

/* ---- .card（services／reasons） ---- */
.card__icon {
  width: 48px;
  height: 48px;
  color: var(--c-leaf); /* light面専用。dark面のcardは存在しない */
}

@media (min-width: 900px) {
  .card__icon {
    width: 56px;
    height: 56px;
  }
}

.card__title {
  margin-top: var(--sp-3); /* アイコンとの間隔 */
  color: var(--c-text);
}

.card__text {
  margin-top: var(--sp-2); /* 8px */
}

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

.card__list-item {
  position: relative;
  padding-left: 20px;
}

.card__list-item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-leaf);
}

.card__link {
  margin-top: var(--sp-3); /* 16px */
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1); /* 4px */
  font-weight: var(--fw-bold);
  color: var(--c-green);
  text-decoration: none;
}

.card__link:hover {
  text-decoration: underline;
}

/* ---- .item-card ---- */
.item-card {
  /* base.css で svg{display:block} のため text-align では中央に寄らない。
     縦積みの中央揃えを flex で明示する（2026-09-08 オーケストレーター修正）。 */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 上揃えにする。中央揃えだとラベルが2行になるカード（ガラスくず等）だけ
     アイコンの高さがずれるため（2026-09-08 修正）。 */
  justify-content: flex-start;
  gap: var(--sp-3); /* 16px */
  text-align: center;
}

.item-card__icon {
  width: 40px;
  height: 40px;
  color: var(--c-leaf);
  flex: none;
}

@media (min-width: 900px) {
  .item-card__icon {
    width: 48px;
    height: 48px;
  }
}

.item-card__label {
  /* h3要素だが視覚サイズは「h4」スケールを個別指定する */
  margin-top: var(--sp-3); /* 16px */
  font-family: "Noto Sans JP", sans-serif;
  font-weight: var(--fw-bold);
  font-size: 1rem; /* 16px */
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--c-text);
}

@media (min-width: 900px) {
  .item-card__label {
    font-size: 1.125rem; /* 18px */
  }
}

/* =========================================================
   3. バッジ
   ========================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2); /* 8px */
  padding: var(--sp-2) var(--sp-3); /* 8px 16px */
  border-radius: var(--radius-full);
  background: var(--c-surface);
  border: 1px solid var(--c-green);
  color: var(--c-green);
}

.badge__icon {
  width: 20px;
  height: 20px;
}

.badge__label {
  font-weight: var(--fw-bold);
}

/* =========================================================
   4. 注記テキスト
   ========================================================= */

.note {
  margin-top: var(--sp-2); /* 8px */
  color: var(--c-text-muted);
  font-size: 0.8125rem; /* 13px。PCでも拡大しない */
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.is-on-dark .note {
  color: var(--c-bg-dim);
}

/* =========================================================
   5. セクション見出し
   ========================================================= */

.section-heading {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--sp-3); /* 16px */
}

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

.section-heading__title {
  color: var(--c-green);
}

.section-heading__lead {
  margin-top: var(--sp-2); /* 8px */
  color: var(--c-text-muted);
}

/* =========================================================
   6. スキップリンク
   ========================================================= */

.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-nav);
  transform: translateY(-100%);
  background: var(--c-green);
  color: var(--c-bg);
  padding: 12px 20px;
  text-decoration: none;
  font-weight: var(--fw-bold);
}

@media (prefers-reduced-motion: no-preference) {
  .skip-link {
    transition: transform var(--dur-fast) ease;
  }
}

.skip-link:focus {
  transform: translateY(0);
}

/* .skip-linkは.is-on-darkの外にあるため、暗背景上のフォーカスリング色を個別に指定する */
.skip-link:focus-visible {
  outline-color: var(--c-bg);
}

/* =========================================================
   7. フォーム部品
   ========================================================= */

.form {
  max-width: 640px;
  margin-inline: auto;
}

.form__notice {
  background: var(--c-bg-dim);
  border-left: 4px solid var(--c-green);
  padding: var(--sp-3); /* 16px */
  border-radius: var(--radius-sm);
}

.form__notice + p {
  margin-top: var(--sp-3); /* 16px */
  margin-bottom: var(--sp-4); /* 24px */
}

.form__group {
  margin-bottom: var(--sp-4); /* 24px */
}

.form__label {
  display: block;
  margin-bottom: var(--sp-2); /* 8px */
  font-weight: var(--fw-bold);
}

.form__required {
  margin-left: var(--sp-1); /* 4px */
  color: var(--c-green);
  font-size: 0.75rem; /* 12px */
  font-weight: var(--fw-bold);
}

.form__input,
.form__textarea {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--c-text-muted);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  font-size: 1rem; /* 16px固定。iOS自動ズーム防止 */
}

.form__input {
  height: 48px;
}

@media (min-width: 900px) {
  .form__input {
    height: 52px;
  }
}

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

@media (prefers-reduced-motion: no-preference) {
  .form__input,
  .form__textarea {
    transition: border-color var(--dur-fast) ease;
  }
}

.form__input:focus,
.form__textarea:focus {
  border-color: var(--c-green);
}

/*
  バリデーションエラー状態。
  エラー専用の警告色は `--c-error`（#B3261E）を用いる。
  --c-bg 上で 6.00:1、--c-surface 上で 6.51:1 で、いずれも本文の 4.5:1 を満たす。
  2026-09-08 オーケストレーターが ・ に追加したトークン。
*/
.form__group.is-invalid .form__input,
.form__group.is-invalid .form__textarea {
  border-color: var(--c-error);
  border-width: 2px;
}

.form__error {
  margin-top: var(--sp-2); /* 8px */
  color: var(--c-error);
  font-size: 0.8125rem; /* 13px。.note仕様 */
  line-height: 1.7;
  letter-spacing: 0.02em;
  font-weight: var(--fw-bold);
}

.form__submit-message {
  margin-top: var(--sp-4); /* 24px */
  background: var(--c-bg-dim);
  padding: var(--sp-3); /* 16px */
  border-radius: var(--radius-sm);
}

.form__submit-message .btn {
  margin-top: var(--sp-3); /* 16px */
}


/* =========================================================
   JS 連携ルール（2026-09-08 オーケストレーター追加）
   js/nav.js と js/map-facade.js は BEM 要素クラスを生成しない契約のため、
   次の2つは CSS 側で受け止める。
   ========================================================= */

/* nav.js がナビ展開中に <body> へ付ける。背面のスクロールを止める */
body.is-nav-open {
  overflow: hidden;
}

/*
  社名をトップへ戻るリンクにしたことに伴う調整（2026-09-08 追加）。
  `display` と `align-items` はここで指定しない（2026-09-09 修正）。
  `a.hdr__brand`（詳細度 0-1-1）が sections.css の `.hdr__brand`（0-1-0）に競り勝ち、
  段組みの揃え方を中央に固定してしまい、社名が左端に寄らなくなっていたため。
  ヘッダー内の並びは sections.css 側だけで決める。
*/
a.hdr__brand {
  color: var(--c-bg);
  text-decoration: none;
  min-height: 44px; /* タップターゲット 44px 以上（視覚サイズ） */
}

/* ホバー時の下線は付けない（2026-09-08 依頼により削除）。
   代わりに明度をわずかに落として押せることを示す。 */
a.hdr__brand:hover {
  text-decoration: none;
  color: var(--c-bg-dim);
}


/* 送信ボタンを中央に配置する（2026-09-08 修正） */
.form .btn--submit {
  display: flex;
  margin-inline: auto;
  min-width: 260px;
}


/* =========================================================
   お問い合わせの選択バー（WAI-ARIA タブ）
   2026-09-08 追加。JS が動かない場合は 2つのフォームが縦に並んで表示される
   （.is-enhanced が付かないため、タブは並びの見出しとして機能する）。
   ========================================================= */

.formtabs {
  margin-top: var(--sp-4); /* 24px */
}

.formtabs__bar {
  display: flex;
  gap: var(--sp-2); /* 8px */
  padding: var(--sp-1); /* 4px */
  background: var(--c-bg-dim);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-full);
}

.formtabs__tab {
  flex: 1 1 50%;
  min-height: 52px; /* タップターゲット 44px 以上 */
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--c-text-muted);
  /* 未定義の --ff-heading を参照しており見出し書体が当たっていなかった（2026-09-09 修正）。
     書体トークンは存在しないため、他の見出しと同じ実名で指定する。 */
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: var(--fw-bold);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.4;
  cursor: pointer;
}

@media (min-width: 900px) {
  .formtabs__tab {
    font-size: 1rem; /* 16px */
  }
}

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

.formtabs__tab:focus-visible {
  outline: 3px solid var(--c-green);
  outline-offset: 2px;
}

.formtabs__tab[aria-selected="true"] {
  background: var(--c-green);
  color: var(--c-surface);
}

@media (prefers-reduced-motion: no-preference) {
  .formtabs__tab {
    transition: background var(--dur-fade) var(--ease-out), color var(--dur-fade) var(--ease-out);
  }
}

.formtabs__panel {
  margin-top: var(--sp-4); /* 24px */
}

.formtabs__panel:focus-visible {
  outline: 3px solid var(--c-green);
  outline-offset: 4px;
}

/* 注釈はパネル最下部に置く（依頼者のルール）。上ではなく下に余白を取る */
.formtabs__hint {
  margin-top: var(--sp-4); /* 24px */
  color: var(--c-text-muted);
  font-size: 0.8125rem; /* 13px */
  line-height: 1.7;
}

/*
  JS が動かなかった場合の見え方。
  タブは押しても切り替わらないため、選択状態の塗りを消して
  2つのフォームが順に並んでいるだけの状態にする。
*/
.formtabs:not(.is-enhanced) .formtabs__bar {
  display: none;
}

.formtabs:not(.is-enhanced) .formtabs__panel + .formtabs__panel {
  margin-top: var(--sp-7); /* 64px。2つのフォームの区切りを明確にする */
}


/* =========================================================
   2026-09-08 の調整（第3回）
   ========================================================= */

/*
  品目カードのラベル高さを、最も長い「ガラスくず・コンクリートくず・陶磁器くず」の
  行数に合わせて固定する。固定しないとそのカードだけ背が高くなり、
  他3枚の直下にデッドスペースが生まれる。
  カード幅は列数で変わるため、必要な行数も幅ごとに変える。
*/
.item-card__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(1.6em * 2); /* 〜1199px：2行分 */
}

@media (min-width: 1200px) {
  /* 4列になり1枚あたりの幅が狭くなるため3行分を確保する */
  .item-card__label {
    min-height: calc(1.6em * 3);
  }
}

/* ハンバーガー展開時の背景グレーアウト。
   nav 自身の擬似要素として敷くので、nav を閉じれば自動的に消える。 */
.hdr__nav::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(20, 64, 42, 0.6); /* --c-green-deep の半透明 */
}

@media (min-width: 900px) {
  /* PCではドロワーではないので背景を敷かない */
  .hdr__nav::before {
    content: none;
  }
}


/* =========================================================
   2026-09-08 SP（〜599px）の詰め直し
   1列のとき、アイコンとラベルを縦に積むとカード1枚あたり約180pxを占め、
   4枚で 700px 以上の空白の多い塊になっていた。横並びに変えて高さを詰める。
   ========================================================= */

@media (max-width: 599px) {
  .items__grid {
    gap: var(--sp-2); /* 8px */
  }

  .item-card {
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: var(--sp-3); /* 16px */
    row-gap: var(--sp-1); /* 4px */
    align-items: center;
    text-align: left;
    padding: var(--sp-3) var(--sp-4); /* 16px 24px */
  }

  .item-card__icon {
    width: 36px;
    height: 36px;
    grid-row: 1 / -1;
    align-self: center;
  }

  .item-card__label {
    grid-column: 2;
    min-height: 0; /* 1列では行数を予約しない（空白の原因になるため） */
    justify-content: flex-start;
    align-items: center;
  }

  /* 品目の説明文が入る場合（コピー増強で追加されうる） */
  .item-card__text {
    grid-column: 2;
  }
}