@charset "UTF-8";

/* =============================================================
   nibi LP - style.css
   - 素のHTML + CSS
   ============================================================= */

/* =============================================================
   CSS変数（デザイントークン）
   ============================================================= */
:root {
  /* color */
  --c-main: #6a825a;        /* メインカラー（オリーブグリーン） */
  --c-main-light: #c1d0a3;  /* アクセント（薄）：ボーダー等 */
  --c-main-dark: #425a32;   /* hover時のアイコン線色 */
  --c-white: #fff;
  --c-text: #333;           /* 本文の基本色 */

  /* font-family */
  --ff-mincho: "Shippori Mincho", serif;
  --ff-cinzel: "Cinzel", serif;

  /* layout */
  --header-h: 6rem;

  /* motion（ヘッダーのスクロール変化用） */
  --dur-header: 0.6s;
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =============================================================
   リセット
   ============================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* SPで意図しない横スクロールを防止 */
body {
  overflow-x: hidden;
}

body,
h1, h2, h3, h4, p,
ul, ol, li,
figure, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* =============================================================
   base
   ============================================================= */
body {
  color: var(--c-text);
  font-family: var(--ff-mincho);
  font-weight: 400;
  line-height: 1.7;

  /* Figmaに近づける（Macのブラウザは初期設定だと太めに描画されるため） */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =============================================================
   utility（社内PJ HOLIDAYS/KULABO の命名に準拠。本PJはレイアウト境界の
   1024pxに合わせてある＝モバイル域:1024px以下 / PC域:1025px以上）
   - pcNone : PC（1025px以上）で非表示 ＝ SP・タブレットだけ改行／表示
   - spNone : SP・タブレット（1024px以下）で非表示 ＝ PCだけ改行／表示
   改行・要素の出し分け共通で使用。例: <br class="pcNone">
   ============================================================= */
@media screen and (min-width: 1025px) {
  .pcNone {
    display: none !important;
  }
}

@media screen and (max-width: 1024px) {
  .spNone {
    display: none !important;
  }
}

/* =============================================================
   header（透明・固定。FVに重なる。スクロール変化は header.js で is-scrolled を付与）
   ============================================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color var(--dur-header) var(--ease-soft);
}

/* スクロール後：クリーム背景に変化 */
.header.is-scrolled {
  background: rgba(239, 240, 231, 0.6);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 1.8vw, 1.625rem) clamp(1.25rem, 2.78vw, 2.5rem) 1rem;
  transition: padding var(--dur-header) var(--ease-soft);
}

/* スクロール後：上下余白を16pxに縮めてヘッダーをコンパクトに */
.header.is-scrolled .header__inner {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.header__logo {
  flex-shrink: 0;
  display: block;
  position: relative;
  width: clamp(70px, 6vw, 87px);
  height: clamp(43px, 3.73vw, 54px);
  transition: width var(--dur-header) var(--ease-soft), height var(--dur-header) var(--ease-soft);
}

/* ロゴ：白（通常）と緑（スクロール後）を重ねてクロスフェード。
   高さ100%で枠に追従し、枠サイズの切替でロゴの大小を変える */
.header__logo-img {
  height: 100%;
  width: auto;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity var(--dur-header) var(--ease-soft);
}

.header__logo-img--green {
  opacity: 0;
}

/* スクロール後：ロゴ枠を65×40に縮小（→ヘッダーも低くなる） */
.header.is-scrolled .header__logo {
  width: 65px;
  height: 40px;
}

.header.is-scrolled .header__logo-img--white {
  opacity: 0;
}

.header.is-scrolled .header__logo-img--green {
  opacity: 1;
}

/* アンカーリンク（ナビ）で各セクションへ飛んだ時、固定ヘッダーに
   上部が隠れないよう、ヘッダー高さ分だけ着地位置を下げる */
.facade,
.about,
.works,
.style,
.works-area,
.merit,
.flow,
.comment {
  scroll-margin-top: 4rem; /* スクロール後の縮んだヘッダー(約72px)＋セクション余白に合わせた実機調整値。--header-h はスクロール前の高さで過大なため不採用 */
}

.header__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}

.header__nav-link {
  color: var(--c-white);
  font-size: 0.875rem;
  letter-spacing: 0.14px;
  transition: color var(--dur-header) var(--ease-soft), opacity 0.2s ease;
}

.header__nav-link:hover {
  opacity: 0.7;
}

/* スクロール後：ナビ文字を濃緑に */
.header.is-scrolled .header__nav-link {
  color: var(--c-main-dark);
}

.header__buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 1rem;

  background: var(--c-main);
  border-radius: 3px;
  color: var(--c-white);
  font-size: 0.875rem;
  letter-spacing: 0.14px;
  transition: opacity 0.2s ease;
}

.header__btn:hover {
  opacity: 0.85;
}

/* ハンバーガー（PCでは非表示。SP/タブレットで表示） */
.header__hamburger {
  display: none;
  width: 1.75rem;
  height: 1.25rem;
  position: relative;
  z-index: 1001;
}

.header__hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--c-white);
  transition: top 0.3s ease, opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.header__hamburger span:nth-child(1) { top: 0; }
.header__hamburger span:nth-child(2) { top: 0.5625rem; }
.header__hamburger span:nth-child(3) { top: 1.125rem; }

/* スクロール後・ドロワー開時：線を濃緑に */
.header.is-scrolled .header__hamburger span {
  background: var(--c-main-dark);
}

/* ドロワー開：×印に変形 */
.header__hamburger.is-open span:nth-child(1) {
  top: 0.5625rem;
  transform: rotate(45deg);
}

.header__hamburger.is-open span:nth-child(2) {
  opacity: 0;
}

.header__hamburger.is-open span:nth-child(3) {
  top: 0.5625rem;
  transform: rotate(-45deg);
}

/* =============================================================
   drawer（SP/タブレットのナビメニュー）
   ============================================================= */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 900;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.drawer.is-open {
  visibility: visible;
  opacity: 1;
}

/* ドロワー表示中は背面スクロールを固定 */
body.is-drawer-open {
  overflow: hidden;
}

.drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.drawer__panel {
  width: 20.9375rem;
  max-width: calc(100% - 40px);
  max-height: calc(100vh - 174px);   /* svh非対応の端末用フォールバック */
  max-height: calc(100svh - 174px);  /* 対応端末はこちらを優先（top90 + cta-bar逃げ84） */
  position: absolute;
  top: 5.625rem;
  right: 1.25rem;

  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(20px, calc(5.22vh - 14.96px), 32px) 2rem;
  overflow-y: auto;

  background: var(--c-main);
  border-radius: 5px;

  /* スクロール可能なことが分かる細いバー */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
}

.drawer__panel::-webkit-scrollbar {
  width: 4px;
}

.drawer__panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 2px;
}

.drawer__panel::-webkit-scrollbar-track {
  background: transparent;
}

/* SPは下部cta-barと幅を揃える：左右余白を空けて横いっぱいに広げる。
   余白はセクション共通の値に揃える（cta-barとも一致） */
@media (max-width: 767px) {
  .drawer__panel {
    width: auto;
    max-width: none;
    right: clamp(20px, calc(13.52vw - 30.7px), 164px);
    left: clamp(20px, calc(13.52vw - 30.7px), 164px);
  }
}

.drawer__list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
}

.drawer__item {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.drawer__item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.drawer__link {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.drawer__ja {
  color: #e5e9d4;
  font-size: 0.75rem;
  letter-spacing: 0.12px;
}

.drawer__en {
  color: var(--c-white);
  font-family: var(--ff-cinzel);
  font-size: 1.125rem;
  line-height: 1.5;
}

/* =============================================================
   cta-bar（SP/タブレットの下部固定CTA。常時表示）
   ============================================================= */
.cta-bar {
  display: none;
}

/* フッター表示中は隠す（フッターに同じCTAがあるため。JSで is-hidden を付与） */
.cta-bar.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(150%);
}

.cta-bar__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.75rem 1rem;

  background: var(--c-main);
  border-radius: 5px;
  color: var(--c-white);
}

.cta-bar__icon {
  flex-shrink: 0;
  width: 20px;
  height: auto;
  color: var(--c-white);
}

.cta-bar__label {
  font-size: 0.875rem;
  letter-spacing: 0.14px;
  white-space: nowrap;
}

.cta-bar__arrow {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  position: relative;

  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

.cta-bar__arrow::before {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: 50%;
  left: 50%;

  border-top: 1.5px solid var(--c-white);
  border-right: 1.5px solid var(--c-white);
  transform: translate(-65%, -50%) rotate(45deg);
}

/* =============================================================
   footer
   ============================================================= */
.footer {
  position: relative;
  overflow: hidden;
  background: var(--c-main);
  color: var(--c-white);
}

.footer::after {
  content: "";
  width: 60%;
  height: auto;
  aspect-ratio: 1800 / 982;
  position: absolute;
  top: 0;
  right: 0;

  background: url("../images/dappled-light.webp") center / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.16;
  pointer-events: none;
}

/* footer CTA */
.footer__cta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 2.2vw, 2rem);
  padding: clamp(2.5rem, 4vw, 3.75rem) 2.5rem;

  border-bottom: 1px solid var(--c-main-light);
}

.footer__cta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.footer__cta-lead {
  font-size: 1rem;
  letter-spacing: 0.16px;
}

.footer__cta-divider {
  width: 1px;
  height: 1.25rem;
  position: relative;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.3);
}

/* 区切り線：上からスーッと引かれ下へ抜けるループ（スクロール線と共通） */
.footer__cta-divider::after {
  content: "";
  position: absolute;
  inset: 0;

  background: var(--c-white);
  transform: scaleY(0);
  transform-origin: top center;
  animation: line-draw 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .footer__cta-divider::after {
    animation: none;
    transform: scaleY(1);
  }
}

.footer__cta-btn {
  display: flex;
  align-items: center;
  gap: 1.875rem;
  padding: 1rem clamp(20px, calc(1.88vw + 12.96px), 40px);

  background: var(--c-main);
  border: 1px solid var(--c-white);
  border-radius: 5px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.footer__cta-btn:hover {
  background: var(--c-white);
  color: var(--c-main);
}

/* CTAアイコン（インラインSVGの線色をcolorで制御。通常=白／hover=濃い緑） */
.footer__cta-btn-icon {
  flex-shrink: 0;
  width: 36px;
  height: auto;

  color: var(--c-white);
  transition: color 0.3s ease;
}

.footer__cta-btn:hover .footer__cta-btn-icon {
  color: var(--c-main-dark);
}

.footer__cta-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.footer__cta-btn-en {
  font-family: var(--ff-cinzel);
  font-size: 0.75rem;
  letter-spacing: 0.12px;
}

.footer__cta-btn-ja {
  font-size: 1.125rem;
  letter-spacing: 0.18px;
}

/* 矢印（円＋V字をCSSで描画。SVG不使用） */
.footer__cta-btn-arrow {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  position: relative;

  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* V字（右向きシェブロン） */
.footer__cta-btn-arrow::before {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: 50%;
  left: 50%;

  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translate(-65%, -50%) rotate(45deg);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

/* hover：丸を塗りつぶし、矢印を白へ、右へスライド */
.footer__cta-btn:hover .footer__cta-btn-arrow {
  background: var(--c-main);
  border-color: var(--c-main);
}

.footer__cta-btn:hover .footer__cta-btn-arrow::before {
  border-color: var(--c-white);
}

/* footer bottom */
.footer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: clamp(2.5rem, 4vw, 3.75rem) 1.25rem;

  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.footer__bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  width: 25.25rem;
  max-width: 100%;
}

.footer__nav {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.875rem);
  width: 100%;
}

.footer__nav-link {
  font-size: clamp(12px, calc(0.19vw + 11.3px), 14px);
  transition: opacity 0.2s ease;
}

.footer__nav-link:hover {
  opacity: 0.7;
}

.footer__logo {
  width: 162px;
  max-width: 100%;
}

.footer__copyright {
  font-family: var(--ff-cinzel);
  font-size: clamp(10px, calc(0.19vw + 9.3px), 12px);
}

/* =============================================================
   レスポンシブ
   ============================================================= */
@media (max-width: 1024px) {
  .header__nav-list,
  .header__buttons {
    display: none;
  }

  .header__hamburger {
    display: block;
  }

  /* 下部固定CTAバー（タブレット：中央寄せ） */
  .cta-bar {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    position: fixed;
    bottom: 1.25rem;
    left: 0;
    z-index: 950;
    /* 左右余白はセクション共通の余白に揃える（ドロワーとも一致） */
    padding: 0 clamp(20px, calc(13.52vw - 30.7px), 164px);

    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease;
  }
}

@media (max-width: 767px) {
  .footer__cta {
    flex-direction: column;
    align-items: center;
    /* 透明な cta__card 相当：CTAセクションと同じ内側幅にするため
       「セクション余白 + カード余白」を左右に確保（同じ式なのでSP全域で幅一致） */
    padding-left: calc(clamp(20px, calc(13.52vw - 30.7px), 164px) + clamp(24px, 2.78vw, 40px));
    padding-right: calc(clamp(20px, calc(13.52vw - 30.7px), 164px) + clamp(24px, 2.78vw, 40px));
  }

  /* SPはボタンをCTAセクションの .cta__btn と同じ幅・サイズ・デザインに */
  .footer__cta-item {
    width: 100%;
  }

  .footer__cta-btn {
    width: 100%;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1rem clamp(20px, 2.78vw, 40px);
  }

  .footer__cta-btn-ja {
    font-size: clamp(16px, calc(0.19vw + 15.3px), 18px);
  }

  /* SPは木漏れ日を全幅・画像本来の比率に（facadeと同じ・ズームさせない） */
  .footer::after {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1800 / 982;
  }

  /* 下部固定CTAバー（SP：横幅いっぱいに2分割） */
  .cta-bar__btn {
    flex: 1 0 0;
    min-width: 0;
  }
}

/* =============================================================
   fv（ファーストビュー）
   ============================================================= */
.fv {
  width: 100%;
  height: 100vh;   /* svh非対応の端末用フォールバック */
  height: 100svh;  /* 対応端末はこちらを優先（アドレスバー出現時も収まる） */
  min-height: 37.5rem;
  position: relative;
  overflow: hidden;
}

/* 背景のヒーロー写真（全画面cover） */
.fv__bg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 0;

  object-fit: cover;
  object-position: center;
}

/* SPは横長写真が見切れるため、控えめに右へゆっくりパンし、右端で停止 */
@keyframes fv-bg-pan {
  from { object-position: 40% center; }
  to   { object-position: 60% center; }
}

@media (max-width: 1024px) {
  .fv__bg {
    animation: fv-bg-pan 14s ease-in-out forwards;
  }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .fv__bg {
    animation: none;
  }
}

/* 左を暗くするグラデーション（文字の視認性確保） */
.fv__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* テキストブロック（PCは左下にまとめる） */
.fv__inner {
  position: absolute;
  left: clamp(20px, calc(13.52vw - 30.7px), 164px);
  bottom: clamp(2.5rem, 8.33vw, 7.5rem);
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.5rem, 2.22vw, 2rem);
  padding: clamp(1rem, 2.08vw, 1.875rem) clamp(1rem, 2.36vw, 2.125rem);

  color: var(--c-white);
  text-shadow: 0 4px 1.5625rem rgba(0, 0, 0, 0.6);
}

/* 見出しブロック（SPではここをコーナー枠で囲む） */
.fv__heading {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.11vw, 1rem);
}

/* コーナー枠（「」状の角マーク。CSSで実装） */
.fv__corner {
  width: clamp(16px, 2.78vw, 40px);
  height: clamp(16px, 2.78vw, 40px);
  position: absolute;

  border: 0 solid rgba(229, 233, 212, 0.6);
  opacity: 0;
  /* 中央寄り（内向き）から本来の角位置へ広がる入場アニメーション */
  transform: translate(var(--corner-x), var(--corner-y));
  animation: fv-corner-spread 1s ease-out 0.3s forwards;
}

/* 各角の内向き開始オフセット（中央方向） */
.fv__corner--tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; --corner-x: 18px; --corner-y: 18px; }
.fv__corner--tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; --corner-x: -18px; --corner-y: 18px; }
.fv__corner--bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; --corner-x: 18px; --corner-y: -18px; }
.fv__corner--br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; --corner-x: -18px; --corner-y: -18px; }

/* 「」が内側からふわっと外側へ広がる */
@keyframes fv-corner-spread {
  from { opacity: 0; transform: translate(var(--corner-x), var(--corner-y)); }
  to   { opacity: 1; transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .fv__corner {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ===== オープニング演出（FV要素がじんわり表示） ===== */
/* 「」コーナー枠以外を、ほぼ動きなしでゆっくり静かにフェードイン */
.fv__en,
.fv__title,
.fv__lead,
.fv__scroll {
  opacity: 0;
  animation: fv-fade-in 2s ease forwards;
}

.fv__en     { animation-delay: 0.5s; }
.fv__title  { animation-delay: 0.5s; }
.fv__lead   { animation-delay: 1.3s; }
.fv__scroll { animation-delay: 1.7s; }

@keyframes fv-fade-in {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fv__en,
  .fv__title,
  .fv__lead,
  .fv__scroll {
    opacity: 1;
    animation: none;
  }
}

/* ===== スクロール連動：各セクションのコンテンツがじんわり表示 ===== */
/* JS有効時のみ初期非表示（背景＝aria-hidden の要素は対象外） */
.js-reveal-ready .js-reveal > *:not([aria-hidden="true"]) {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.js-reveal-ready .js-reveal.is-visible > *:not([aria-hidden="true"]) {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal-ready .js-reveal > *:not([aria-hidden="true"]) {
    opacity: 1;
    transition: none;
  }
}

/* style セクションだけは「見出し → item1 → item2」の順にフェード（スタッガー）。
   リスト自体はフェード対象から外し（常に表示）、中の item を個別に遅延表示する。
   見出し（style__heading-group）は汎用ルールで先頭に出る。 */
.js-reveal-ready .style.js-reveal > .style__list {
  opacity: 1;
  transition: none;
}

.js-reveal-ready .style__list > .style__item {
  opacity: 0;
  transition: opacity 1s ease;
}

.js-reveal-ready .style.is-visible .style__list > .style__item:nth-child(1) {
  opacity: 1;
  transition-delay: 0.5s;
}

.js-reveal-ready .style.is-visible .style__list > .style__item:nth-child(2) {
  opacity: 1;
  transition-delay: 1s;
}

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

/* merit セクションも「見出し → 01 → 02 → 03」の順にフェード（スタッガー）。
   リスト自体はフェード対象から外し、中の item を個別に遅延表示する。 */
.js-reveal-ready .merit.js-reveal > .merit__list {
  opacity: 1;
  transition: none;
}

.js-reveal-ready .merit__list > .merit__item {
  opacity: 0;
  transition: opacity 1s ease;
}

.js-reveal-ready .merit.is-visible .merit__list > .merit__item:nth-child(1) {
  opacity: 1;
  transition-delay: 0.5s;
}

.js-reveal-ready .merit.is-visible .merit__list > .merit__item:nth-child(2) {
  opacity: 1;
  transition-delay: 1s;
}

.js-reveal-ready .merit.is-visible .merit__list > .merit__item:nth-child(3) {
  opacity: 1;
  transition-delay: 1.5s;
}

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

/* flow セクションも「見出し → STEP01 → STEP02 → STEP03」の順にフェード（スタッガー）。
   ステップ群（flow__steps）はフェード対象から外し、中の step を個別に遅延表示する。 */
.js-reveal-ready .flow.js-reveal > .flow__steps {
  opacity: 1;
  transition: none;
}

.js-reveal-ready .flow__steps > .flow__step {
  opacity: 0;
  transition: opacity 1s ease;
}

.js-reveal-ready .flow.is-visible .flow__steps > .flow__step:nth-of-type(1) {
  opacity: 1;
  transition-delay: 0.3s;
}

.js-reveal-ready .flow.is-visible .flow__steps > .flow__step:nth-of-type(2) {
  opacity: 1;
  transition-delay: 0.6s;
}

.js-reveal-ready .flow.is-visible .flow__steps > .flow__step:nth-of-type(3) {
  opacity: 1;
  transition-delay: 0.9s;
}

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

/* comment セクションも「見出し → 01 → 02 → 03 → 04」の順にフェード（スタッガー）。
   スピードは merit と同じ（フェード1秒・間隔0.5秒刻み）。 */
.js-reveal-ready .comment.js-reveal > .comment__list {
  opacity: 1;
  transition: none;
}

.js-reveal-ready .comment__list > .comment__item {
  opacity: 0;
  transition: opacity 1s ease;
}

.js-reveal-ready .comment.is-visible .comment__list > .comment__item:nth-of-type(1) {
  opacity: 1;
  transition-delay: 0.5s;
}

.js-reveal-ready .comment.is-visible .comment__list > .comment__item:nth-of-type(2) {
  opacity: 1;
  transition-delay: 1s;
}

.js-reveal-ready .comment.is-visible .comment__list > .comment__item:nth-of-type(3) {
  opacity: 1;
  transition-delay: 1.5s;
}

.js-reveal-ready .comment.is-visible .comment__list > .comment__item:nth-of-type(4) {
  opacity: 1;
  transition-delay: 2s;
}

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

/* コーナー枠の出し分け：PCはinner全体（見出し＋リード文）を囲む */
.fv__inner > .fv__corner { display: block; }
.fv__heading > .fv__corner { display: none; }

.fv__en {
  display: flex;
  align-items: flex-start;
  gap: clamp(6.4px, calc(0.34vw + 5.13px), 10px);

  font-size: clamp(10px, 0.97vw, 14px);
  letter-spacing: clamp(2px, 0.194vw, 2.8px);
}

/* "nibi"：明朝・小文字 */
.fv__en-mark {
  font-family: var(--ff-mincho);
  line-height: 1.7;
  text-transform: lowercase;
}

/* "EXTERIOR DESIGN"：Cinzel */
.fv__en-sub {
  font-family: var(--ff-cinzel);
  line-height: 2;
}

.fv__title {
  font-family: var(--ff-mincho);
  font-size: clamp(32px, 4.17vw, 60px);
  font-weight: 500;
  letter-spacing: 0.6px;
  line-height: 1.4;
}

.fv__lead {
  font-size: clamp(12px, 1.11vw, 16px);
  letter-spacing: 0.16px;
  line-height: 2;
}

/* SCROLLインジケーター（右下） */
.fv__scroll {
  position: absolute;
  right: clamp(14px, 2.78vw, 40px);
  bottom: 2.5rem;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;

  color: var(--c-white);
}

.fv__scroll-text {
  font-family: var(--ff-cinzel);
  font-size: clamp(10px, calc(0.19vw + 9.3px), 12px);
  letter-spacing: 0.12em;
  writing-mode: vertical-rl;
}

.fv__scroll-line {
  width: 1px;
  height: 5rem;
  position: relative;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.25);
}

/* スクロール線：上から線がスーッと引かれ、下へ抜けるループ */
.fv__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(255, 255, 255, 0.9);
  transform: scaleY(0);
  transform-origin: top center;
  animation: line-draw 2.2s ease-in-out infinite;
}

@keyframes line-draw {
  0% { transform: scaleY(0); transform-origin: top center; }
  45% { transform: scaleY(1); transform-origin: top center; }
  55% { transform: scaleY(1); transform-origin: bottom center; }
  100% { transform: scaleY(0); transform-origin: bottom center; }
}

/* 視差を減らす設定では停止 */
@media (prefers-reduced-motion: reduce) {
  .fv__scroll-line::after {
    animation: none;
    transform: scaleY(1);
  }
}

/* SP：見出しは上、リード文は下に振り分け */
@media (max-width: 767px) {
  .fv__inner {
    top: 6.875rem;
    bottom: 6.75rem;

    justify-content: space-between;
    gap: 0;
    padding: 0;
  }

  /* SPは見出し（英字＋タイトル）だけを枠で囲む */
  .fv__heading {
    padding: 0.875rem 1rem;
  }

  .fv__inner > .fv__corner { display: none; }
  .fv__heading > .fv__corner { display: block; }

  .fv__title {
    font-weight: 400;
  }

  .fv__scroll {
    bottom: 6.75rem;
  }
}

/* タブレット：テキストブロックを上部に配置（Figma準拠） */
@media (min-width: 768px) and (max-width: 1024px) {
  .fv__inner {
    top: 6.875rem;
    bottom: auto;
  }
}

/* =============================================================
   facade（外観・昼夜比較スライダー）
   ============================================================= */
.facade {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(5rem, 13.9vw, 12.5rem);
  padding: clamp(7.5rem, 13.9vw, 12.5rem) 0 clamp(3.75rem, 8.33vw, 7.5rem);

  /* クリーム地（ノイズは ::before で重ねる） */
  background-color: #eff0e7;
}

/* ノイズタイル200×200（不透明度80%） */
.facade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background: url("../images/noise.png") repeat;
  background-size: 200px 200px;
  opacity: 0.8;
  pointer-events: none;
}

/* 木漏れ日（静止画。将来 facade のみ動画に差し替え予定） */
.facade__komorebi {
  width: 60%;
  height: auto;
  aspect-ratio: 1800 / 982;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;

  background: url("../images/dappled-light.webp") center / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.16;
  pointer-events: none;
}

/* 見出し部（PCは2カラム） */
.facade__head {
  width: 100%;
  max-width: 90rem;
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 4vw, 4rem);
  padding: 0 clamp(20px, calc(13.52vw - 30.7px), 164px);

  color: var(--c-main-dark);
}

.facade__title {
  font-weight: 500;
  font-size: clamp(26px, 2.5vw, 36px);
  letter-spacing: 0.36px;
  line-height: 1.5;
}

.facade__desc {
  font-size: clamp(13px, 1.11vw, 16px);
  letter-spacing: 0.16px;
  line-height: 2;
}

/* 比較スライダー */
.facade__slider {
  width: 100%;
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.facade__compare {
  --pos: 50%;
  width: 100%;
  aspect-ratio: 1440 / 640;
  position: relative;
  overflow: hidden;

  touch-action: pan-y;
  user-select: none;
}

.facade__img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;

  object-fit: cover;
  object-position: center 70%;
  pointer-events: none;
}

/* 昼画像を上に重ね、左から --pos までを表示 */
.facade__img--day {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.facade__handle {
  width: 2.5rem;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;

  transform: translateX(-50%);
  cursor: ew-resize;
}

/* 縦の境界線 */
.facade__handle::before {
  content: "";
  width: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;

  background: #eff0e7;
  transform: translateX(-50%);
}

.facade__handle-circle {
  width: clamp(30px, 2.78vw, 40px);
  height: clamp(30px, 2.78vw, 40px);
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #eff0e7;
  border-radius: 50%;
}

/* <> シェブロン（左右） */
.facade__chevrons {
  width: clamp(16px, 1.53vw, 22px);
  height: 0.75rem;
  position: relative;
  display: block;
}

.facade__chevrons::before,
.facade__chevrons::after {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  top: 50%;

  border-top: 1.5px solid var(--c-main-dark);
  border-right: 1.5px solid var(--c-main-dark);
}

.facade__chevrons::before {
  left: 2px;
  transform: translateY(-50%) rotate(-135deg);
}

.facade__chevrons::after {
  right: 2px;
  transform: translateY(-50%) rotate(45deg);
}

/* キャプション */
.facade__caption {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  color: var(--c-main-dark);
  font-size: clamp(12px, 0.97vw, 14px);
  letter-spacing: 0.14px;
}

.facade__caption-icon {
  width: clamp(26px, calc(0.376vw + 24.6px), 30px);
  height: clamp(26px, calc(0.376vw + 24.6px), 30px);
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--c-main-dark);
  border-radius: 50%;
}

.facade__chevrons--sm {
  width: 0.9375rem;
  height: 0.625rem;
}

/* facade レスポンシブ */
@media (max-width: 1024px) {
  .facade__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
  }
}

@media (max-width: 767px) {
  /* SPは木漏れ日を全幅・上部の帯に（画像本来の比率＝ズームさせない） */
  .facade__komorebi {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1800 / 982;
  }

  /* SPは画像を縦に少し長く表示 */
  .facade__compare {
    aspect-ratio: 2880 / 1600;
  }

  /* 縦長で見切れが減るため中央表示に戻す */
  .facade__img {
    object-position: center;
  }
}

/* =============================================================
   about（nibiとは）
   ============================================================= */
.about {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(3.75rem, 5.56vw, 5rem) clamp(20px, calc(13.52vw - 30.7px), 164px);

  background: #e5e9d4;
  color: var(--c-main-dark);
}

/* 右下の「nibi」透かしロゴ */
.about__watermark {
  width: clamp(220px, 29vw, 420px);
  height: auto;
  position: absolute;
  right: 0;
  bottom: -8px;
  z-index: 0;

  pointer-events: none;
}

.about__body {
  width: 100%;
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 4.17vw, 3.75rem);

  text-align: center;
}

.about__heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.about__label {
  font-size: 0.875rem;
}

.about__heading {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.625rem;

  font-size: clamp(38px, 3.06vw, 44px);
  font-weight: 400;
}

.about__heading-en {
  font-family: var(--ff-cinzel);
  line-height: 1.5;
}

.about__heading-mark {
  font-family: var(--ff-mincho);
  line-height: 1.2;
  text-transform: lowercase;

  /* 背景色で輪郭を0.2px削り、わずかに細く見せる（背景が単色のため可能） */
  -webkit-text-stroke: 0.2px #e5e9d4;
}

.about__desc {
  font-size: clamp(13px, 1.11vw, 16px);
  letter-spacing: 0.16px;
  line-height: 2;
}

/* =============================================================
   works（提案事例・タブ＋ギャラリー＋ライトボックス）
   ============================================================= */
.works {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 2.78vw, 2.5rem);
  padding: clamp(3.75rem, 5.56vw, 5rem) clamp(20px, calc(13.52vw - 30.7px), 164px);

  background-color: #eff0e7;
}

/* facadeと同じノイズ地 */
.works::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background: url("../images/noise.png") repeat;
  background-size: 200px 200px;
  opacity: 0.8;
  pointer-events: none;
}

.works__head {
  width: 100%;
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 4.17vw, 3.75rem);
}

.works__heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;

  color: var(--c-main-dark);
}

.works__label {
  font-size: 0.875rem;
}

.works__heading {
  font-family: var(--ff-cinzel);
  font-size: clamp(38px, 3.06vw, 44px);
  font-weight: 400;
  line-height: 1.5;
}

/* タブ */
.works__tabs {
  display: flex;
  width: 100%;
}

.works__tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 1.5rem 1.25rem;

  border-top: 1px solid var(--c-main-light);
  border-bottom: 1px solid var(--c-main-light);
  background: transparent;
  color: var(--c-main-dark);
  font-family: var(--ff-cinzel);
  font-size: clamp(16px, 1.53vw, 22px);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* タブ切替スイッチ（radioハック）：視覚的に隠すがキーボード操作は可能。
   position:fixed でビューポートに固定し、ラベルクリック時にフォーカスが
   移ってもページが上へスクロール（ジャンプ）しないようにする */
.works__tab-radio {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* 選択中タブの見た目（チェックされたradioに対応するラベル） */
#works-radio-modern:checked ~ .works__head .works__tab--modern,
#works-radio-luxury:checked ~ .works__head .works__tab--luxury {
  background: var(--c-main);
  border-color: var(--c-main);
  color: var(--c-white);
}

/* キーボードフォーカス時、見えるタブにフォーカスリング */
#works-radio-modern:focus-visible ~ .works__head .works__tab--modern,
#works-radio-luxury:focus-visible ~ .works__head .works__tab--luxury {
  outline: 2px solid var(--c-main-dark);
  outline-offset: -2px;
}

/* ▽キャレット（下向き・CSS） */
.works__tab-caret {
  width: 0.75rem;
  height: 7px;
  position: relative;
  flex-shrink: 0;
}

.works__tab-caret::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  top: -2px;
  left: 50%;

  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}

/* タブの内容パネル（表示切替はCSS-onlyの:checkedで） */
.works__panel {
  display: none;
  width: 100%;
  max-width: 69.5rem;
  gap: clamp(2rem, 7.64vw, 6.875rem);
  align-items: center;
  position: relative;
  z-index: 1;
}

#works-radio-modern:checked ~ #works-panel-modern,
#works-radio-luxury:checked ~ #works-panel-luxury {
  display: flex;
}

/* タブ切替時：画像側はぼかしが晴れる／テキスト側はフェードイン */
#works-radio-modern:checked ~ #works-panel-modern .works__gallery,
#works-radio-luxury:checked ~ #works-panel-luxury .works__gallery {
  animation: works-panel-blur 0.9s ease;
}

#works-radio-modern:checked ~ #works-panel-modern .works__text,
#works-radio-luxury:checked ~ #works-panel-luxury .works__text {
  animation: works-panel-fade 0.9s ease;
}

@keyframes works-panel-blur {
  from { filter: blur(3px); }
  to   { filter: blur(0); }
}

@keyframes works-panel-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .works__panel .works__gallery,
  .works__panel .works__text {
    animation: none;
  }
}

/* ギャラリー */
.works__gallery {
  width: clamp(280px, 50%, 557px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.works__fig {
  width: 100%;
  position: relative;
  margin: 0;
  cursor: pointer;
}

.works__img {
  width: 100%;
  display: block;

  object-fit: cover;
  cursor: pointer;
}

.works__fig--main .works__img {
  aspect-ratio: 557 / 314;
}

.works__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.works__row .works__img {
  aspect-ratio: 276 / 155;
}

/* IMAGEタグ */
.works__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0 4px;

  background: #e5e9d4;
  color: var(--c-main-dark);
  font-family: var(--ff-cinzel);
  font-size: clamp(10px, calc(0.188vw + 9.3px), 12px);
  letter-spacing: 0.12px;
  line-height: 1.5;
}

.works__note {
  color: var(--c-main-dark);
  font-size: clamp(10px, calc(0.188vw + 9.3px), 12px);
  letter-spacing: 0.12px;
}

/* テキスト */
.works__text {
  flex: 1;
  min-width: 0;
  position: relative;

  display: flex;
  flex-direction: column;
  gap: 1.25rem;

  color: var(--c-main-dark);
}

.works__text-title {
  font-family: var(--ff-mincho);
  font-size: clamp(24px, 1.94vw, 28px);
  font-weight: 500;
  line-height: 1.5;
}

.works__text-desc {
  font-size: clamp(13px, 1.11vw, 16px);
  letter-spacing: 0.16px;
  line-height: 2;
}

/* コーナー枠（左上・右下の2隅） */
.works__corner {
  width: 1.875rem;
  height: 1.875rem;
  position: absolute;

  border: 0 solid var(--c-main-light);
}

.works__corner--tl {
  top: clamp(-30px, calc(-1.88vw - 3px), -10px);
  left: -1.875rem;
  border-top-width: 1px;
  border-left-width: 1px;
}

.works__corner--br {
  bottom: clamp(-30px, calc(-1.88vw - 3px), -10px);
  right: -1.875rem;
  border-bottom-width: 1px;
  border-right-width: 1px;
}

/* 図面のカメラマーカー＋ラベル（画像比率に追従＝cqwで拡縮） */
.works__fig--plan {
  container-type: inline-size;
}

/* 図面は切り抜かず自然な比率で表示（マーカー位置を合わせるため） */
.works__fig--plan .works__img {
  height: auto;
  aspect-ratio: auto;
}

.works__cam {
  width: 9.6cqw;
  position: absolute;

  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  pointer-events: none;
}

.works__cam img {
  display: block;
  width: 100%;
  height: auto;
}

.works__cam-label {
  position: absolute;
  padding: 0 0.4cqw;

  background: #e5e9d4;
  color: #0d5900;
  font-family: var(--ff-cinzel);
  font-size: 1.6cqw;
  line-height: 1.5;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
}

/* MODERN 図面のマーカー位置（Figma座標→画像%） */
.works__cam--m1 { left: 50%; top: 89.5%; }
.works__cam--m2 { left: 66%; top: 9.3%; --rot: -135deg; }
.works__cam-label--m1 { left: 51.9%; top: 93.5%; }
.works__cam-label--m2 { left: 70.9%; top: 2%; }

/* LUXURY 図面のマーカー位置 */
.works__cam--l1 { left: 50%; top: 88%; }
.works__cam--l2 { left: 45.2%; top: 42.8%; --rot: 135deg; }
.works__cam-label--l1 { left: 51.9%; top: 90.5%; }
.works__cam-label--l2 { left: 32.6%; top: 35.4%; }

/* works レスポンシブ */
@media (max-width: 767px) {
  .works__panel {
    flex-direction: column;
    gap: clamp(2.5rem, 8vw, 3.5rem);
  }

  .works__gallery {
    width: 100%;
  }

  .works__text {
    width: 100%;
    padding: 0 0.625rem;
  }

  .works__corner--br {
    right: 0;
  }

  .works__corner--tl {
    left: 0;
  }
}

/* =============================================================
   lightbox（works / works-area 共通の画像拡大）
   ============================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;

  display: flex;
  align-items: center;
  justify-content: center;

  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.is-open {
  visibility: visible;
  opacity: 1;
}

body.is-lightbox-open {
  overflow: hidden;
}

.lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.lightbox__stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 拡大表示される figure（写真・図面共通） */
.lightbox__stage .works__fig {
  margin: 0;
  cursor: default;
}

.lightbox__stage .works__img {
  display: block;
  max-width: 85vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  cursor: default;
}

/* SPは拡大画像を横幅いっぱいに */
@media (max-width: 767px) {
  .lightbox__stage .works__img {
    max-width: 95vw;
  }
}

/* 図面（オーバーレイ付き）の拡大：画像比率で最大サイズに収める */
.lightbox__stage .works__fig--plan {
  width: min(85vw, calc(85vh * 1.798));
  max-width: 85vw;
}

/* SPは図面も横幅いっぱいに */
@media (max-width: 767px) {
  .lightbox__stage .works__fig--plan {
    width: min(95vw, calc(85vh * 1.798));
    max-width: 95vw;
  }
}

.lightbox__stage .works__fig--plan .works__img {
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
}

.lightbox__close {
  width: 2.5rem;
  height: 2.5rem;
  position: fixed;
  right: clamp(16px, 2.78vw, 40px);
  bottom: clamp(16px, 2.78vw, 40px);
  z-index: 2;

  background: none;
  border: none;
  cursor: pointer;
}

.lightbox__close::before,
.lightbox__close::after {
  content: "";
  width: 1.625rem;
  height: 1.5px;
  position: absolute;
  top: 50%;
  left: 50%;

  background: var(--c-white);
}

.lightbox__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.lightbox__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* =============================================================
   style（外構スタイル・Swiperスライダー）
   ============================================================= */
.style {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 4.17vw, 3.75rem);
  padding: clamp(3.75rem, 5.56vw, 5rem) 0;

  background: #e5e9d4;
}

.style__heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;

  color: var(--c-main-dark);
}

.style__label {
  font-size: 0.875rem;
}

.style__heading {
  font-family: var(--ff-cinzel);
  font-size: clamp(38px, 3.06vw, 44px);
  font-weight: 400;
  line-height: 1.5;
}

.style__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 5.56vw, 5rem);
}

.style__item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 0 clamp(20px, calc(13.52vw - 30.7px), 164px);
}

/* 見出し部 */
.style__item-head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;

  color: var(--c-main-dark);
}

.style__item-label-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.style__no {
  padding: 0 0.5rem;
  background: #eff0e7;
  font-family: var(--ff-cinzel);
  font-size: 0.875rem;
}

.style__divider {
  width: 1px;
  height: 1.25rem;
  background: var(--c-main-light);
}

.style__en {
  font-family: var(--ff-cinzel);
  font-size: 0.875rem;
}

.style__item-title {
  font-family: var(--ff-mincho);
  font-size: clamp(24px, 1.94vw, 28px);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

/* スライダー */
.style__body {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.style__slider-wrap {
  position: relative;
  width: 100%;
}

.style__swiper {
  width: 100%;
}

.style__img {
  width: 100%;
  aspect-ratio: 1112 / 626;
  display: block;
  object-fit: cover;
}

/* 矢印（円＋シェブロン・CSS） */
.style__arrow {
  width: clamp(32px, 2.78vw, 40px);
  height: clamp(32px, 2.78vw, 40px);
  position: absolute;
  top: 50%;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;

  background: var(--c-main);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: background-color 0.2s ease;
}

/* ホバーできるデバイス（PC等）のみ。タッチ端末でのホバー残りを防ぐ */
@media (hover: hover) {
  .style__arrow:hover {
    background: var(--c-main-dark);
  }
}

.style__arrow--prev {
  left: -3.75rem;
}

.style__arrow--next {
  right: -3.75rem;
}

.style__arrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;

  border-top: 1.5px solid var(--c-white);
  border-right: 1.5px solid var(--c-white);
}

.style__arrow--prev::before {
  transform: translateX(2px) rotate(-135deg);
}

.style__arrow--next::before {
  transform: translateX(-2px) rotate(45deg);
}

/* キャプション帯 */
.style__caption {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(20px, calc(0.94vw + 16.5px), 30px) clamp(20px, calc(1.88vw + 13px), 40px) clamp(20px, calc(1.88vw + 13px), 40px);

  background: #eff0e7;
}

.style__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  width: auto;
}

.style__dots .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin: 0 !important;

  background: var(--c-main-light);
  opacity: 1;
}

.style__dots .swiper-pagination-bullet-active {
  background: var(--c-main-dark);
}

.style__caption-text {
  display: none;

  color: var(--c-main-dark);
  font-size: clamp(13px, 1.11vw, 16px);
  letter-spacing: 0.16px;
  line-height: 2;
  text-align: center;
}

/* 表示中のスライドに対応するキャプションのみ表示 */
.style__caption-text.is-active {
  display: block;
}

/* style レスポンシブ（矢印を内側に） */
@media (max-width: 1024px) {
  .style__arrow--prev { left: 0.5rem; }
  .style__arrow--next { right: 0.5rem; }
}

/* SPはキャプションを左寄せに */
@media (max-width: 767px) {
  .style__caption-text {
    text-align: left;
  }

  /* SPは前後ボタンの背景を半透明のオリーブグリーンに */
  .style__arrow {
    background: rgba(106, 130, 90, 0.4);
  }
}

/* =============================================================
   works-area（施工箇所・タブ＋カテゴリ別スライダー）
   ============================================================= */
.works-area {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 4.17vw, 3.75rem);
  padding: clamp(3.75rem, 5.56vw, 5rem) clamp(20px, calc(13.52vw - 30.7px), 164px);

  background-color: #eff0e7;
}

/* facadeと同じノイズ地 */
.works-area::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background: url("../images/noise.png") repeat;
  background-size: 200px 200px;
  opacity: 0.8;
  pointer-events: none;
}

.works-area > * {
  position: relative;
  z-index: 1;
}

.wa__heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;

  color: var(--c-main-dark);
}

.wa__label {
  font-size: 0.875rem;
}

.wa__heading {
  font-family: var(--ff-cinzel);
  font-size: clamp(38px, 3.06vw, 44px);
  font-weight: 400;
  line-height: 1.5;
}

/* 上部イラスト */
.wa__map {
  width: 100%;
  max-width: 69.5rem;
}

.wa__map img {
  width: 100%;
  height: auto;
  display: block;
}

/* タブ群 */
.wa__tabs-wrap {
  width: 100%;
  max-width: 69.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wa__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  width: 100%;
}

.wa__tab {
  position: relative;
  aspect-ratio: 272 / 110;
  overflow: hidden;
  padding: 0;
  border: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

.wa__tab-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wa__tab-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s ease;
}

.wa__tab.is-active .wa__tab-overlay {
  background: rgba(66, 90, 50, 0.8);
}

.wa__tab-label {
  position: relative;
  z-index: 1;

  color: var(--c-white);
  font-family: var(--ff-mincho);
  font-weight: 600;
  font-size: clamp(14px, 1.25vw, 18px);
}

.wa__tab-caret {
  width: 1.375rem;
  height: 1.375rem;
  position: absolute;
  right: clamp(12px, 1.5vw, 16px);
  top: 50%;
  z-index: 1;

  border-radius: 50%;
  background: rgba(106, 130, 90, 0.4);
  transform: translateY(-50%);
}

.wa__tab-caret::before {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  top: 50%;
  left: 50%;

  border-right: 1.5px solid var(--c-white);
  border-bottom: 1.5px solid var(--c-white);
  transform: translate(-50%, -65%) rotate(45deg);
}

/* アクティブタブ：丸の背景色だけ変更（矢印は白のまま） */
.wa__tab.is-active .wa__tab-caret {
  background: rgba(239, 240, 231, 0.3);
}

.wa__note {
  color: var(--c-main-dark);
  font-size: clamp(10px, calc(0.188vw + 9.3px), 12px);
  letter-spacing: 0.12px;
}

/* フィーチャー（カテゴリ別コンテンツ） */
.wa__features {
  width: 100%;
  max-width: 69.5rem;
}

.wa__feature {
  display: none;
  width: 100%;
}

.wa__feature.is-active {
  display: flex;
  gap: clamp(2rem, 7.64vw, 6.875rem);
  align-items: center;
}

/* タブ切替時：画像側はぼかしが晴れる／テキスト側はフェードイン（worksと共通） */
.wa__feature.is-active .wa__feature-slider {
  animation: works-panel-blur 0.9s ease;
}

.wa__feature.is-active .wa__feature-text {
  animation: works-panel-fade 0.9s ease;
}

@media (prefers-reduced-motion: reduce) {
  .wa__feature.is-active .wa__feature-slider,
  .wa__feature.is-active .wa__feature-text {
    animation: none;
  }
}

/* スライダー（左） */
.wa__feature-slider {
  width: clamp(280px, 50%, 557px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wa__swiper {
  width: 100%;
}

.wa__img {
  width: 100%;
  aspect-ratio: 557 / 348;
  display: block;
  object-fit: cover;
  cursor: pointer;
}

/* 縦長画像：高さをコンテナに合わせ全体表示（左右の余白は淡い緑で） */
.wa__img--contain {
  object-fit: contain;
  background: #e5e9d4;
}

.wa__feature-caption {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.625rem;
}

.wa__feature-note {
  color: var(--c-main-dark);
  font-size: clamp(10px, calc(0.188vw + 9.3px), 12px);
  letter-spacing: 0.12px;
}

.wa__feature-controls {
  display: flex;
  align-items: center;
  gap: clamp(12px, calc(0.75vw + 9.18px), 20px);
  padding-top: 5px;
}

.wa__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  width: auto;
}

.wa__dots .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin: 0 !important;

  background: var(--c-main-light);
  opacity: 1;
}

.wa__dots .swiper-pagination-bullet-active {
  background: var(--c-main-dark);
}

.wa__arrows {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wa__arrow {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;

  background: var(--c-main);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* ホバーできるデバイス（PC等）のみ。タッチ端末でのホバー残りを防ぐ */
@media (hover: hover) {
  .wa__arrow:hover {
    background: var(--c-main-dark);
  }
}

.wa__arrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;

  border-top: 1.5px solid var(--c-white);
  border-right: 1.5px solid var(--c-white);
}

.wa__arrow--prev::before {
  transform: translateX(2px) rotate(-135deg);
}

.wa__arrow--next::before {
  transform: translateX(-2px) rotate(45deg);
}

/* テキスト（右） */
.wa__feature-text {
  flex: 1;
  min-width: 0;
  position: relative;

  display: flex;
  flex-direction: column;
  gap: clamp(20px, calc(1.88vw + 12.96px), 40px);

  color: var(--c-main-dark);
}

.wa__feature-heading-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.wa__feature-title {
  font-family: var(--ff-mincho);
  font-size: clamp(24px, 1.94vw, 28px);
  font-weight: 500;
  line-height: 1.5;
}

.wa__feature-chip {
  padding: 4px 0.75rem;

  background: var(--c-main);
  color: #eff0e7;
  font-family: var(--ff-mincho);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.5;
}

.wa__feature-desc {
  font-size: clamp(13px, 1.11vw, 16px);
  letter-spacing: 0.16px;
  line-height: 2;
}

/* コーナー枠（左上・右下） */
.wa__corner {
  width: 1.875rem;
  height: 1.875rem;
  position: absolute;

  border: 0 solid var(--c-main-light);
}

.wa__corner--tl {
  top: -1.875rem;
  left: -1.875rem;
  border-top-width: 1px;
  border-left-width: 1px;
}

.wa__corner--br {
  bottom: -1.875rem;
  right: -1.875rem;
  border-bottom-width: 1px;
  border-right-width: 1px;
}

/* works-area レスポンシブ */
@media (max-width: 1024px) {
  .wa__tabs {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .wa__feature.is-active {
    flex-direction: column;
    gap: clamp(2rem, 8vw, 3rem);
  }

  .wa__feature-slider {
    width: 100%;
  }

  .wa__feature-text {
    width: 100%;
    padding: 0 0.625rem;
  }

  .wa__corner--tl {
    left: 0;
  }

  .wa__corner--br {
    right: 0;
  }
}

/* =============================================================
   cta（資料請求・来店予約）
   ============================================================= */
.cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 4vw, 4rem);
  padding: clamp(3.75rem, 5.56vw, 5rem) clamp(20px, calc(13.52vw - 30.7px), 164px);

  background: var(--c-main-dark);
}

/* 背景：施工写真が縦に流れる無限ループ（うっすら） */
.cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;

  display: flex;
  gap: 1.3125rem;
  justify-content: center;

  opacity: 0.1;
  pointer-events: none;
}

.cta__bg-col {
  flex: 1 1 0;
  max-width: 16.1875rem;
}

.cta__bg-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.cta__bg-img {
  width: 100%;
  aspect-ratio: 259 / 338;
  display: block;
  margin-bottom: 21px;
  object-fit: cover;
}

/* 列ごとに上下交互。2セット複製済み（JS）なので translateY -50% でシームレス */
.cta__bg-col--up .cta__bg-track {
  animation: cta-bg-up 55s linear infinite;
}

.cta__bg-col--down .cta__bg-track {
  animation: cta-bg-down 55s linear infinite;
}

@keyframes cta-bg-up {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@keyframes cta-bg-down {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

/* 視差を減らす設定では停止 */
@media (prefers-reduced-motion: reduce) {
  .cta__bg-track {
    animation: none;
  }
}

.cta__heading {
  min-width: 0;
  position: relative;
  z-index: 1;

  color: var(--c-white);
  font-size: clamp(24px, calc(0.38vw + 22.59px), 28px);
  letter-spacing: 0.28px;
  line-height: 1.5;
}

.cta__card {
  min-width: 0;
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 2.78vw, 2.5rem);
  padding: clamp(1.5rem, 2.78vw, 2.5rem);

  background: #eff0e7;
}

.cta__buttons {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cta__btn {
  min-width: 18.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1rem clamp(20px, 2.78vw, 40px);

  background: var(--c-main);
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--c-white);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cta__btn:hover {
  background: var(--c-white);
  border-color: var(--c-main-dark);
  color: var(--c-main);
}

.cta__btn-icon {
  flex-shrink: 0;
  width: 36px;
  height: auto;
  color: var(--c-white);
  transition: color 0.2s ease;
}

.cta__btn:hover .cta__btn-icon {
  color: var(--c-main-dark);
}

.cta__btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.cta__btn-en {
  font-family: var(--ff-cinzel);
  font-size: 0.75rem;
  letter-spacing: 0.12px;
  line-height: 1.3;
}

.cta__btn-ja {
  font-size: clamp(16px, calc(0.19vw + 15.3px), 18px);
  letter-spacing: 0.18px;
}

.cta__btn-arrow {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  position: relative;

  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.cta__btn:hover .cta__btn-arrow {
  background: var(--c-main);
}

.cta__btn-arrow::before {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: 50%;
  left: 50%;

  border-top: 1.5px solid var(--c-white);
  border-right: 1.5px solid var(--c-white);
  transform: translate(-65%, -50%) rotate(45deg);
}

.cta__phone {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;

  color: var(--c-main-dark);
}

.cta__phone-label {
  font-size: 0.875rem;
}

.cta__phone-num {
  font-family: var(--ff-cinzel);
  font-size: clamp(22px, 1.94vw, 28px);
}

/* cta レスポンシブ */
@media (max-width: 767px) {
  .cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .cta__card {
    align-items: center;
  }

  .cta__buttons {
    width: 100%;
  }

  .cta__btn {
    width: 100%;
    min-width: 0;
  }

  /* SPは電話番号ブロックを縦並びに */
  .cta__phone {
    flex-direction: column;
    gap: 0;
  }

  /* SPは電話番号を28px固定に */
  .cta__phone-num {
    font-size: 1.75rem;
  }

  /* SPは背景の流れる列を横2列だけに（3列目以降は非表示） */
  .cta__bg-col:nth-child(n + 3) {
    display: none;
  }
}

/* =============================================================
   merit（nibiの強み）
   ============================================================= */
.merit {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 4.17vw, 3.75rem);
  padding: clamp(3.75rem, 5.56vw, 5rem) clamp(20px, calc(13.52vw - 30.7px), 164px);

  background-color: #eff0e7;
}

.merit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background: url("../images/noise.png") repeat;
  background-size: 200px 200px;
  opacity: 0.8;
  pointer-events: none;
}

.merit > * {
  position: relative;
  z-index: 1;
}

.merit__heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;

  color: var(--c-main-dark);
}

.merit__label {
  font-size: 0.875rem;
}

.merit__heading {
  font-family: var(--ff-cinzel);
  font-size: clamp(38px, 3.06vw, 44px);
  font-weight: 400;
  line-height: 1.5;
}

.merit__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, calc(-1.88vw + 67.04px), 60px);
}

.merit__item {
  width: 100%;
  max-width: 69.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.merit__item--reverse {
  flex-direction: row-reverse;
}

.merit__text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.merit__no {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: clamp(8px, calc(0.56vw + 5.89px), 14px);
  padding: 2px 4px;

  background: #e5e9d4;
  color: var(--c-main-dark);
  font-family: var(--ff-cinzel);
  font-size: clamp(14px, calc(0.19vw + 13.3px), 16px);
  line-height: 1;
}

.merit__no-line {
  width: 0.5rem;
  height: 1px;
  background: var(--c-main-dark);
}

.merit__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;

  color: var(--c-main-dark);
}

.merit__title {
  font-family: var(--ff-mincho);
  font-size: clamp(20px, 1.94vw, 28px);
  font-weight: 500;
  line-height: 1.5;
}

.merit__desc {
  font-size: clamp(13px, 1.11vw, 16px);
  letter-spacing: 0.16px;
  line-height: 2;
}

.merit__img-wrap {
  width: clamp(280px, 40%, 445px);
  flex-shrink: 0;
}

.merit__img {
  width: 100%;
  aspect-ratio: 445 / 250;
  display: block;
  object-fit: cover;
}

/* merit レスポンシブ */
@media (max-width: 767px) {
  .merit__item,
  .merit__item--reverse {
    flex-direction: column;
    gap: 1.25rem;
  }

  .merit__img-wrap {
    width: 100%;
    order: -1;
  }
}

/* =============================================================
   flow（施工の流れ・アコーディオン）
   ============================================================= */
.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 4.17vw, 3.75rem);
  padding: clamp(3.75rem, 5.56vw, 5rem) clamp(20px, calc(13.52vw - 30.7px), 164px);

  background: #e5e9d4;
}

.flow__heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;

  color: var(--c-main-dark);
}

.flow__label {
  font-size: 0.875rem;
}

.flow__heading {
  font-family: var(--ff-cinzel);
  font-size: clamp(38px, 3.06vw, 44px);
  font-weight: 400;
  line-height: 1.5;
}

.flow__steps {
  width: 100%;
  max-width: 69.5rem;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.5rem;
}

/* ステップ間の矢印（PCは右向き） */
.flow__arrow {
  flex-shrink: 0;
  align-self: center;
  width: 0;
  height: 0;

  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
  border-left: 0.875rem solid var(--c-main);
}

.flow__step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: 2rem;

  background: #eff0e7;
}

.flow__step-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;

  color: var(--c-main-dark);
}

.flow__step-no {
  padding: 0 4px;
  background: #e5e9d4;
  font-family: var(--ff-cinzel);
  font-size: 0.75rem;
  letter-spacing: 0.12px;
  line-height: 1.5;
}

.flow__step-title {
  font-family: var(--ff-mincho);
  font-size: clamp(20px, 1.94vw, 28px);
  font-weight: 500;
  line-height: 1.5;
}

.flow__items {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.flow__item {
  width: 100%;
  position: relative;
}

/* 開閉スイッチ（checkboxハック）：視覚的に隠すがキーボード操作は可能 */
.flow__item-check {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.flow__item-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px 4px;

  border-bottom: 1px solid var(--c-main-light);
  color: var(--c-main-dark);
  text-align: left;
  cursor: pointer;
}

/* キーボードフォーカス時は、見えるラベルにフォーカスリングを表示 */
.flow__item-check:focus-visible ~ .flow__item-head {
  outline: 2px solid var(--c-main-dark);
  outline-offset: 2px;
}

.flow__item-no {
  flex-shrink: 0;
  font-family: var(--ff-cinzel);
  font-size: 0.75rem;
  letter-spacing: 0.12px;
}

.flow__item-label {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  letter-spacing: 0.16px;
  line-height: 2;
}

/* +／− トグル */
.flow__item-toggle {
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  position: relative;
}

.flow__item-toggle::before,
.flow__item-toggle::after {
  content: "";
  position: absolute;
  background: var(--c-main-dark);
}

.flow__item-toggle::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

.flow__item-toggle::after {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
  transition: opacity 0.3s ease;
}

.flow__item-check:checked ~ .flow__item-head .flow__item-toggle::after {
  opacity: 0;
}

/* 開閉アニメーション（高さ自動） */
.flow__item-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.flow__item-check:checked ~ .flow__item-body {
  grid-template-rows: 1fr;
}

.flow__item-body-inner {
  overflow: hidden;
}

.flow__item-detail {
  padding-top: 0.5rem;

  color: var(--c-main-dark);
  font-size: clamp(14px, calc(0.19vw + 13.3px), 16px);
  letter-spacing: 0.16px;
  line-height: 1.8;
}

/* flow レスポンシブ（縦積み・矢印は下向き） */
@media (max-width: 1024px) {
  .flow__steps {
    flex-direction: column;
    align-items: stretch;
  }

  .flow__arrow {
    align-self: center;
    border-top: 0.875rem solid var(--c-main);
    border-bottom: 0;
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
  }
}

/* =============================================================
   comment（担当者の想い）
   ============================================================= */
.comment {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, calc(3.76vw + 5.92px), 60px);
  padding: clamp(3.75rem, 5.56vw, 5rem) 0;

  background-color: #eff0e7;
}

.comment::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background: url("../images/noise.png") repeat;
  background-size: 200px 200px;
  opacity: 0.8;
  pointer-events: none;
}

.comment > * {
  position: relative;
  z-index: 1;
}

.comment__heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;

  color: var(--c-main-dark);
}

.comment__label {
  font-size: 0.875rem;
}

.comment__heading {
  font-family: var(--ff-cinzel);
  font-size: clamp(38px, 3.06vw, 44px);
  font-weight: 400;
  line-height: 1.5;
}

.comment__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4.17vw, 3.75rem);
}

.comment__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 clamp(20px, calc(13.52vw - 30.7px), 164px);
}

.comment__item--reverse {
  flex-direction: row-reverse;
}

.comment__img-wrap {
  flex-shrink: 0;
  width: clamp(240px, 31vw, 349px);
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
}

.comment__img {
  width: 100%;
  aspect-ratio: 349 / 250;
  display: block;
  object-fit: cover;
}

.comment__body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 1.6875rem;
}

.comment__quote {
  flex-shrink: 0;
  width: clamp(31px, calc(0.56vw + 28.89px), 37px);
  height: auto;
  display: block;
}

.comment__text-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.25rem;
}

.comment__text {
  width: 100%;
  color: var(--c-main-dark);
  font-size: 0.875rem;
  letter-spacing: 0.14px;
  line-height: 2;
}

.comment__author {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.comment__author-title {
  padding: 0 4px;
  background: #e5e9d4;
  color: var(--c-main-dark);
  font-size: 0.75rem;
  letter-spacing: 0.12px;
}

.comment__author-name {
  color: var(--c-main-dark);
  font-family: var(--ff-mincho);
  font-size: clamp(16px, calc(0.19vw + 15.3px), 18px);
  letter-spacing: 0.18px;
}

/* タブレット時のみ上端揃え（PCはセンターのまま） */
@media (min-width: 768px) and (max-width: 1024px) {
  .comment__item,
  .comment__item--reverse {
    align-items: flex-start;
  }
}

/* comment レスポンシブ */
@media (max-width: 767px) {
  /* 本文を上、「担当者名＋写真」の行を下に（反転含め全項目同じ並び） */
  .comment__item,
  .comment__item--reverse {
    flex-direction: column-reverse;
    gap: 1.25rem;
  }

  /* 引用符は自由配置（本文の左上に重ねる） */
  .comment__body {
    position: relative;
    padding-top: 2.5rem;
  }

  .comment__quote {
    position: absolute;
    top: 10px;
    left: 0;
  }

  /* img-wrapを「担当者名（左）＋写真（右）」の横並びに */
  .comment__img-wrap {
    width: 100%;
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
  }

  .comment__author {
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-end;
  }

  .comment__img-wrap .comment__img {
    flex-shrink: 0;
    width: 45%;
  }
}