/* ============================================
   折原ガラス コーポレートサイト
   Static HTML/CSS — Canonet FTP deploy
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
  /* Colors */
  --color-primary: #1a3a5c;
  --color-primary-light: #2a4f73;
  --color-accent: #4a90a4;
  --color-accent-dark: #3a7a8e;
  --color-text: #333;
  --color-text-light: #666;
  --color-text-muted: #999;
  --color-bg: #fff;
  --color-bg-light: #f0f4f7;
  --color-bg-dark: #1a3a5c;
  --color-border: #e0e0e0;
  --color-danger: #c0392b;

  /* Typography */
  --font-base: 'Noto Sans JP', sans-serif;
  --font-heading: 'Shippori Mincho B1', serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Layout */
  --max-width: 1100px;
  --header-height: 80px;

  /* Transition */
  --transition: 0.3s ease;

  /* --- 導入（映像 → 本体）のスクロール量 --- */
  /* 本体が画面下端に来るまで＝「ため」。.site-content の上マージンでもある */
  --rise-start: 60vh;
  --rise-start: 60svh;
  /* 上がりきったあと、動かさずに留めるスクロール量＝「余韻」 */
  --hold-span: 55vh;
  --hold-span: 55svh;
  /* せり上がる速さ。0.35 なら「スクロール量の 35% しか上がらない」。1 で等速 */
  --rise-speed: 0.35;

  /* 以下は上の 3 つから決まる。触るのは上の 3 つだけでよい */
  /* 実際に上がる距離＝写真面の上端がヘッダーの下端に着くまで */
  --rise-base: calc(100vh - var(--header-height));
  --rise-base: calc(100svh - var(--header-height));
  /* その距離を上がりきるのに要するスクロール量 */
  --rise-span: calc(var(--rise-base) / var(--rise-speed));
  /* 上がりきった時点のずらし量（要したスクロール量 − 実際に上がった距離） */
  --rise-shift: calc(var(--rise-span) - var(--rise-base));
}

/* --- Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* 上端・下端の引っ張り（ゴムバンド）を止める。引っ張るとスクロール位置が
     一瞬行き過ぎて戻るため、その値で位置を計算している導入部分が揺れる。 */
  overscroll-behavior-y: none;
}

body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  font-weight: 300;
  line-height: 1.8;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-accent-dark);
}

ul, ol {
  list-style: none;
}

/* --- Utility --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* --- 12-Column Grid --- */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* タブレット以上で12カラム化 */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-lg);
  }
}

/* モバイル: 全幅（col-* / col-md-* / col-lg-* すべて12カラムに） */
[class*="col-"] {
  grid-column: span 1;
}

@media (min-width: 768px) {
  [class*="col-"] {
    grid-column: span 12;
  }
}

/* タブレット (768px+) */
@media (min-width: 768px) {
  .col-md-1  { grid-column: span 1; }
  .col-md-2  { grid-column: span 2; }
  .col-md-3  { grid-column: span 3; }
  .col-md-4  { grid-column: span 4; }
  .col-md-5  { grid-column: span 5; }
  .col-md-6  { grid-column: span 6; }
  .col-md-7  { grid-column: span 7; }
  .col-md-8  { grid-column: span 8; }
  .col-md-9  { grid-column: span 9; }
  .col-md-10 { grid-column: span 10; }
  .col-md-11 { grid-column: span 11; }
  .col-md-12 { grid-column: span 12; }
  .col-md-start-2 { grid-column-start: 2; }
  .col-md-start-3 { grid-column-start: 3; }
  .col-md-start-4 { grid-column-start: 4; }
}

/* デスクトップ (1024px+) */
@media (min-width: 1024px) {
  .col-lg-1  { grid-column: span 1; }
  .col-lg-2  { grid-column: span 2; }
  .col-lg-3  { grid-column: span 3; }
  .col-lg-4  { grid-column: span 4; }
  .col-lg-5  { grid-column: span 5; }
  .col-lg-6  { grid-column: span 6; }
  .col-lg-7  { grid-column: span 7; }
  .col-lg-8  { grid-column: span 8; }
  .col-lg-9  { grid-column: span 9; }
  .col-lg-10 { grid-column: span 10; }
  .col-lg-11 { grid-column: span 11; }
  .col-lg-12 { grid-column: span 12; }
  .col-lg-start-2 { grid-column-start: 2; }
  .col-lg-start-3 { grid-column-start: 3; }
  .col-lg-start-4 { grid-column-start: 4; }
  .col-lg-start-5 { grid-column-start: 5; }
}

.grid--align-center { align-items: center; }

.section {
  padding: var(--space-3xl) 0;
}

.section--gray {
  background: var(--color-bg-light);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  word-break: keep-all;
}

.section__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
  letter-spacing: 0.05em;
}

.section__title::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--color-accent);
  margin-top: var(--space-xs);
}

.text-center {
  text-align: center;
}

.text-center.section__title::after,
.text-center .section__title::after {
  margin-left: auto;
  margin-right: auto;
}

/* --- Benefit Grid --- */
.benefit {
  text-align: center;
  padding: var(--space-sm);
}

.benefit__img {
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0 auto var(--space-sm);
  border-radius: 8px;
}

/* モバイルの1カラム積みではイラストをフル幅にせず、ほどよい大きさで中央に */
@media (max-width: 767px) {
  .benefit__img {
    max-width: 280px;
  }
}

.benefit__number {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
  letter-spacing: 0.02em;
}

.benefit__label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.benefit__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: 1.8;
}

/* --- Benefits Grid: フラット配置（背景・区切り線なし） --- */
.benefits-grid .benefit {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: var(--space-lg) var(--space-md);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.benefits-grid .benefit:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

/* --- Product Block --- */
.product-block {
  padding-bottom: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
}

.product-block img {
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0 auto;
}

.product-block__maker {
  display: inline-block;
  font-size: var(--font-size-xs);
  color: var(--color-accent);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.product-block__name {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.product-block__tagline {
  font-size: var(--font-size-base);
  color: var(--color-text);
  font-weight: 500;
  margin-bottom: var(--space-md);
}

.product-block__features {
  list-style: none;
  margin-bottom: var(--space-md);
}

.product-block__features li {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  padding: var(--space-xs) 0;
  padding-left: 1.5em;
  position: relative;
  line-height: 1.6;
}

.product-block__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.product-block__target {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-light);
  border-radius: 4px;
  border-left: 3px solid var(--color-accent);
}

.product-block .card__text {
  color: var(--color-text);
}

/* --- Flow (施工の流れ) --- */
.flow__step {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  margin-bottom: var(--space-lg);
}

.flow__step:last-child {
  margin-bottom: 0;
}

.flow__number {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--font-size-xl);
  font-weight: 700;
  border-radius: 50%;
}

.flow__body {
  flex: 1;
  min-width: 0;
}

.flow__title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.flow__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: 1.8;
}

/* --- Header --- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(224, 224, 224, 0.5);
  z-index: 100;
  display: flex;
  align-items: center;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 var(--space-lg);
}

@media (max-width: 767px) {
  .header__inner {
    padding: 0 var(--space-md);
  }
}

.header__logo {
  display: flex;
  align-items: center;
}

.header__logo a {
  display: flex;
  align-items: center;
}

.header__logo a:hover {
  opacity: 0.8;
}

.header__logo-img {
  height: 28px;
  width: auto;
  /* インライン配置だとベースライン分の端数が出て、映像面のロゴと 0.5px ずれる */
  display: block;
}

.header__contact {
  display: none;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.header__phone {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.05em;
}

/* --- Navigation --- */
.nav {
  display: none;
}

.nav--open {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  padding: var(--space-lg);
  z-index: 99;
}

/* メニュー展開時、ヘッダー背景を不透明に */
.header:has(~ .nav--open),
.header:has(.nav--open) {
  background: var(--color-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.nav__link {
  display: block;
  padding: var(--space-sm) 0;
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition);
}

.nav__link:hover,
.nav__link--active {
  color: var(--color-accent);
}

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  /* タッチターゲット 44×44px を確保（アイコンの見た目は 28px のまま）。
     箱が広がった分、右端の見た目位置を -8px で従来に合わせる */
  width: 44px;
  height: 44px;
  margin-right: -8px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.hamburger__line {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--color-primary);
  transition: var(--transition);
}

.hamburger--open .hamburger__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger--open .hamburger__line:nth-child(2) {
  opacity: 0;
}

.hamburger--open .hamburger__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Hero: シネマCM --- */
/* 素材は 3996×2160（DAR 37:20）、Web 配信は 1920×1038。
   本編にテロップ（6s「7年後」/ 12s「いつも 暮らしのそばに」/ 13s「見守って 70年 折原ガラス」）が
   焼き込まれているため、枠を映像と同比率に固定し contain で収める（cover で上下を切らない）。 */
/* 映像は画面に貼り付いたまま。本体（.site-content）が下から重なって上がってくる。 */
.hero--film {
  /* ロゴ用の帯。レターボックスはウィンドウ比率で消えることがあるので、
     帯を固定で確保して映像に社名が重ならないようにする。
     高さはヘッダーと同一にする（スクロールでヘッダーが出たとき、ロゴが同じ位置に重なる）。 */
  --film-mark-h: var(--header-height);
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  margin-top: 0;
  padding: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
  background: #0d0f11;
}

/* 左位置・高さ・上下中心をヘッダーのロゴ（.header__inner の padding と
   .header__logo-img の 28px）に完全に合わせる。値を変えるときは両方直すこと。 */
.hero__mark {
  flex: none;
  height: var(--film-mark-h);
  display: flex;
  align-items: center;
  padding-inline: var(--space-lg);
  /* ヘッダーは border-bottom 1px を持ち、box-sizing: border-box なので中身は 79px。
     同じ 1px を透明で持たせないとロゴの上下中心が 0.5px ずれる。 */
  border-bottom: 1px solid transparent;
}

.hero__mark-img {
  height: 28px;
  width: auto;
  display: block;
  /* ロゴは単色 #767676 が SVG 内に焼かれている。img 参照では外から色を変えられないので
     フィルタで白へ転換する（黒地で読ませるため） */
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

/* 導入中（映像だけを見せている間）はガラスのぼかし層より前面に出して映像を素のまま見せる。
   本体が被さる位置までスクロールしたら z-index 1 に戻り、通常のレイヤー順に従う。 */
body.film-intro .hero--film {
  z-index: 60;
}

.hero__frame {
  position: relative;
  /* ロゴ帯を差し引いた高さに収める */
  width: min(100%, calc((100vh - var(--film-mark-h)) * 1920 / 1038));
  width: min(100%, calc((100svh - var(--film-mark-h)) * 1920 / 1038));
  aspect-ratio: 1920 / 1038;
  margin: auto; /* 帯を除いた残り空間の中央へ */
}

/* 本体。映像の上に重なる面として、必ず不透明な背景を持たせる。
   上マージンが「動き出すまでのため」。このぶん本体の登場が後ろへずれ、
   スクロールしても映像が貼り付いたままの区間ができる（マージンは映像の裏で見えない）。 */
.site-content {
  /* 写真面が吸着したまま留まる量（余韻）。空きブロックと次セクションの引き上げで共用する */
  position: relative;
  z-index: 2;
  /* この上マージンがそのまま「ため」の長さになる（--rise-start と同一） */
  margin-top: var(--rise-start);
  background: var(--color-bg);
  /* 導入でこの面をずらす。毎回レイヤーを作り直すと位置が 1px 単位でぶれるので、
     あらかじめ独立したレイヤーに固定しておく。 */
  will-change: transform;
}

/* --- 導入のずらしをブラウザ側に任せる --- */
/* JS でスクロール位置を読んでずらすと、スクロールは合成側で先に進み JS が後追いに
   なるため、止めている場面が必ず揺れる（2026-07-30 に実機で確認）。
   スクロール駆動アニメーションなら合成側で完結するので原理的に揺れない。
   translate と transform に分けているのは、1 要素で「上がる」と「留まる」の
   2 区間を独立に動かすため（同じプロパティでは後勝ちになって合成できない）。 */
@keyframes site-rise {
  from { translate: 0 0; }
  to   { translate: 0 var(--rise-shift); }
}

@keyframes site-hold {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--hold-span)); }
}

@supports (animation-timeline: scroll()) {
  @media (min-width: 769px) {
    .site-content {
      animation: site-rise linear both, site-hold linear both;
      animation-timeline: scroll(root block), scroll(root block);
      animation-range:
        var(--rise-start) calc(var(--rise-start) + var(--rise-span)),
        calc(var(--rise-start) + var(--rise-span))
          calc(var(--rise-start) + var(--rise-span) + var(--hold-span));
    }

    /* 下へずらしたぶん、ページ末尾に足りなくなる高さを補う。
       映像から始まるトップページ限定。下層ページに効かせると、ただの白い余白になる */
    body:has(.hero--film) {
      padding-bottom: calc(var(--rise-shift) + var(--hold-span));
    }
  }
}

/* スクロール誘導（映像だけの画面で「下がある」ことを示す最小限の合図） */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 3vh, 2.25rem);
  transform: translateX(-50%);
  z-index: 2;
  width: 1px;
  height: clamp(28px, 5vh, 44px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}

.hero__cue span {
  display: block;
  width: 100%;
  height: 45%;
  background: rgba(255, 255, 255, 0.8);
  animation: hero-cue 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes hero-cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(220%); }
  100% { transform: translateY(220%); }
}

/* 導入中はヘッダーもガラスの操作 UI も伏せる。最初の画面は映像だけにする。
   トップでは JS が --header-reveal を 0/1 で切り替える。写真面の上端がヘッダーの
   下端に到達した瞬間にカチッと出す（フェードさせないので transition は持たせない）。
   他ページは変数が未定義なので既定の 1（＝常に表示）。 */
.header {
  opacity: var(--header-reveal, 1);
}

body.header-locked .header {
  pointer-events: none;
}

body.film-intro .glass-toggle-wrap,
body.film-intro .glass-size-wrap {
  opacity: 0;
  pointer-events: none;
}

/* 動きを抑える設定では誘導の点滅を止める */
@media (prefers-reduced-motion: reduce) {
  .hero__cue span { animation: none; }
}

/* モバイルは縦長で、1.85:1 の映像を全画面にすると上下が黒帯だらけになる。
   貼り付けと導入モードをやめ、映像を上部の帯として通常フローで流す。 */
@media (max-width: 768px) {
  /* sticky は解除するが static にはしない。
     static にすると .hero__sound（absolute）の基準が body に落ちて、
     ボタンがヒーローの外まで飛ぶ（2026-07-30 に実際に起きた）。 */
  /* モバイルは貼り付けないので「ため」も「余韻」も作らない（縦に間延びするだけ） */
  .site-content {
    margin-top: 0;
  }

  /* .lead の打ち消しは .lead 本体より後ろ（798行付近）で行う。
     ここに書くと定義順で後の .lead に上書きされて効かない。 */

  .hero--film {
    position: relative;
    height: auto;
    display: block;
    margin-top: var(--header-height);
  }

  .hero__frame {
    width: 100%;
    max-height: none;
    margin: 0;
  }

  /* モバイルはヘッダーを出しているので、ロゴの名乗りは重複させない */
  .hero__mark { display: none; }

  .hero__cue { display: none; }

  /* モバイルは導入モードを使わない。JS が --header-reveal を 1 に据える。
     JS が動かなくても変数の既定値が 1 なのでヘッダーは出たままになる。 */
}

.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0d0f11;
}

.hero__sound {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 44px;
  padding: 0 1.1em;
  font-family: var(--font-base);
  font-size: var(--font-size-sm);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(13, 15, 17, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.hero__sound:hover {
  background: rgba(13, 15, 17, 0.72);
  border-color: rgba(255, 255, 255, 0.55);
}

.hero__sound:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.hero__sound-icon {
  width: 17px;
  height: 17px;
  flex: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 消音中は音波の弧を伏せる（状態の正はボタン文言。アイコンは補助） */
.hero__sound[aria-pressed="false"] .hero__sound-icon path:nth-child(n+2) {
  opacity: 0.3;
}


/* --- Lead（CM 直下・h1 を担う帯。旧ヒーローの写真背景を継承） --- */
/* 高さは中身なり（元のまま）。1 画面に引き伸ばすほど強い写真ではない。 */
.lead {
  padding: 4.5rem 0 5rem;
  background: linear-gradient(135deg, rgba(26, 58, 92, 0.75) 0%, rgba(42, 79, 115, 0.65) 100%),
              url('../img/hero.png') center/cover no-repeat;
  color: #fff;
}

/* 場面2 の中身は、面が定位置に来てから時間差で立ち上げる。
   全部が同時に出ると板が差し替わっただけに見えて、動きが安っぽくなる。 */
.lead__badge,
.lead__title,
.lead__text,
.lead .btn {
  opacity: 0;
  transform: translateY(20px);
  /* 終盤で粘るイージング。立ち上がりが速く、着地でゆっくり止まる */
  transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.lead--in .lead__badge,
.lead--in .lead__title,
.lead--in .lead__text,
.lead--in .btn {
  opacity: 1;
  transform: none;
}

.lead--in .lead__badge { transition-delay: 0s; }
.lead--in .lead__title { transition-delay: 0.25s; }
.lead--in .lead__text  { transition-delay: 0.5s; }
.lead--in .btn         { transition-delay: 0.75s; }

@media (prefers-reduced-motion: reduce) {
  .lead__badge,
  .lead__title,
  .lead__text,
  .lead .btn {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.lead__badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(26, 58, 92, 0.6);
  padding: 0.3em 1em;
  margin-bottom: var(--space-md);
}

.lead__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin-bottom: var(--space-md);
}

.lead__text {
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-lg);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* 狭い画面では原稿の改行位置が効かず「たり」等の孤立行が出る。自然改行に任せる */
@media (max-width: 768px) {
  .lead__text br { display: none; }
}

/* --- Page Header (subpages) --- */
.page-header {
  margin-top: var(--header-height);
  padding: var(--space-2xl) 0;
  background: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
}

.page-header__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.05em;
}

.page-header__breadcrumb {
  font-size: var(--font-size-sm);
  /* #999 は薄灰背景で 2.6:1 しかなく WCAG AA (4.5:1) を割る。#666 で 5.2:1 */
  color: var(--color-text-light);
  margin-top: var(--space-xs);
}

.page-header__breadcrumb a {
  color: var(--color-text-light);
}

.page-header__breadcrumb a:hover {
  color: var(--color-accent);
}

/* --- Cards --- */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: var(--space-lg);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-sm);
  color: var(--color-accent);
}

.card__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.card__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: 1.8;
}

/* 文書ページ用リスト（プライバシーポリシー等）。グローバルの list-style:none を上書き */
.doc-list {
  list-style: disc;
  padding-left: 1.4em;
  margin: var(--space-sm) 0 var(--space-md);
}

.doc-list li {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: 1.8;
  padding-left: 0.25em;
  margin-bottom: var(--space-xs);
}

/* --- Table --- */
.info-table {
  width: 100%;
  border-collapse: collapse;
}

.info-table th,
.info-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-size: var(--font-size-sm);
  vertical-align: top;
}

.info-table th {
  width: 140px;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-bg-light);
  white-space: nowrap;
}

/* --- Service Block --- */
.service-block {
  padding-bottom: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
}

.service-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* --- Photo Grid --- */
.photo-grid__item {
  margin: 0;
}

.photo-grid__item img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}

.photo-grid__item figcaption {
  font-size: var(--font-size-xs);
  /* #999 は白背景で 2.9:1。施工前後の判別ラベルなので #666 (5.7:1) まで上げる */
  color: var(--color-text-light);
  text-align: center;
  margin-top: var(--space-xs);
}

/* --- Button --- */
.btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 2px;
  transition: all var(--transition);
  cursor: pointer;
  border: none;
  font-family: var(--font-base);
}

.btn--primary {
  background: var(--color-accent);
  color: #fff;
}

.btn--primary:hover {
  background: var(--color-accent-dark);
  color: #fff;
}

.btn--outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.btn--outline:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* --- Form --- */
/* スパム対策ハニーポット: 画面・支援技術・タブ移動から完全に隠す */
.form__hp {
  display: none;
}

/* AJAX 送信のエラー表示（ページ遷移なし） */
.form__error {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-danger);
  border-radius: 4px;
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

/* AJAX 送信の完了メッセージ（サイト内で完結・外部ページに飛ばない） */
.form__success {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-light);
  padding: var(--space-xl);
  text-align: center;
}

.form__success-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.form__group {
  margin-bottom: var(--space-md);
}

.form__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.form__required {
  font-size: var(--font-size-xs);
  color: #e74c3c;
  margin-left: 0.25em;
}

.form__input,
.form__textarea,
.form__select {
  width: 100%;
  padding: var(--space-sm);
  font-size: var(--font-size-base);
  font-family: var(--font-base);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-bg);
  transition: border-color var(--transition);
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--color-accent);
}

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

/* --- CTA Section --- */
.cta {
  padding: 6rem 0 5rem;
  background: var(--color-bg-dark);
  color: #fff;
  text-align: center;
}

.cta__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  letter-spacing: 0.05em;
}

.cta__text {
  font-size: var(--font-size-sm);
  opacity: 0.8;
  margin-bottom: var(--space-lg);
}

.cta__phone {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin-bottom: var(--space-xs);
  letter-spacing: 0.05em;
}

/* 電話番号は tel: リンク（モバイルでタップ発信）。見た目は地の文字と同じに保つ */
.cta__phone a {
  color: inherit;
}

.cta__note {
  font-size: var(--font-size-xs);
  opacity: 0.6;
  margin-bottom: var(--space-lg);
}

/* --- Map --- */
.map-embed {
  width: 100%;
  height: 400px;
  border: none;
  border-radius: 4px;
}

/* --- Footer --- */
.footer {
  padding: var(--space-2xl) 0 var(--space-lg);
  background: var(--color-bg-dark);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--font-size-sm);
}

.footer > .container {
  max-width: none;
  padding: 0 var(--space-lg);
}

@media (max-width: 767px) {
  .footer > .container {
    padding: 0 var(--space-md);
  }
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.footer__company {
  font-size: var(--font-size-sm);
  line-height: 2;
}

.footer__company-name {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-xs);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}

.footer__nav a {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--font-size-sm);
}

.footer__nav a:hover {
  color: #fff;
}

.footer__copy {
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--font-size-xs);
  /* 0.4 だと紺地で 3.2:1。0.6 で 5.3:1 (AA) */
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

/* --- Responsive: Tablet (768px+) --- */
@media (min-width: 768px) {
  .info-table th {
    width: 180px;
  }
}

/* --- Responsive: Desktop (1024px+) --- */
@media (min-width: 1024px) {
  .hamburger {
    display: none;
  }

  .nav {
    display: flex;
  }

  .nav__list {
    flex-direction: row;
    gap: 0;
  }

  .nav__link {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
    border-bottom: none;
  }

  .header__contact {
    display: flex;
  }
}

/* --- Animations --- */

/* スクロールフェードイン */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in--visible {
  opacity: 1;
  transform: translateY(0);
}

/* 動きを抑える設定ではスクロール連動の演出を止める（コンテンツは常に見せる） */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Grid Variants --- */
.grid--gap-sm {
  gap: var(--space-sm);
}

.grid--gap-md {
  gap: var(--space-md);
}

.grid--gap-lg {
  gap: var(--space-lg);
}

/* --- Mobile Column (no breakpoint) --- */
.col-6 { grid-column: span 6; }

/* --- Centered columns (start / end 指定) --- */
@media (min-width: 1024px) {
  .col-lg-center-8 { grid-column: 3 / 11; }
}

/* --- Scope-B: Utility Spacing --- */
.mt-lg {
  margin-top: var(--space-lg);
}
.mt-2xl {
  margin-top: var(--space-2xl);
}
.mb-md {
  margin-bottom: var(--space-md);
}
.mb-lg {
  margin-bottom: var(--space-lg);
}

/* --- Scope-B: Section Lead / Intro --- */
.section__lead {
  text-align: center;
  color: var(--color-text-light);
  max-width: 600px;
  margin: 0 auto var(--space-2xl);
}
.section__lead--left {
  color: var(--color-text-light);
  line-height: 2;
  margin-bottom: var(--space-2xl);
}
.section__body {
  max-width: 720px;
  margin: 0 auto var(--space-lg);
  color: var(--color-text-light);
  line-height: 2;
  text-align: center;
}
.section__intro {
  max-width: 680px;
  color: var(--color-text-light);
  line-height: 2;
  margin-bottom: var(--space-md);
}
.section__intro--last {
  margin-bottom: var(--space-2xl);
}
.section__intro--wide {
  max-width: 720px;
  color: var(--color-text-light);
  line-height: 2;
  margin-bottom: var(--space-2xl);
}

/* --- Scope-B: Reason (Why Orihara) --- */
.reason {
  text-align: center;
  padding: var(--space-lg);
}
.reason__number {
  display: block;
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}
.reason__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

/* --- Scope-B: Prose (代表挨拶) --- */
.prose {
  color: var(--color-text-light);
  line-height: 2.2;
  margin-bottom: var(--space-md);
}
.prose--last {
  margin-bottom: var(--space-lg);
}
.prose__signature {
  color: var(--color-primary);
  font-weight: 600;
}

/* --- Scope-B: Layout Modifiers --- */
.container--narrow {
  max-width: 720px;
}
.btn--block {
  width: 100%;
  padding: var(--space-md);
}
.product-block--last {
  border-bottom: none;
}

/* --- Grid Layout: Section Spacing Variants --- */
.section--space-lg {
  padding: var(--space-3xl) 0;
}

.section--space-xl {
  padding: 6rem 0;
}

/* --- Grid Layout: Product Zigzag --- */
.product-block--reverse {
  /* DOM順序入れ替えによる反転のセマンティックマーカー */
}

/* --- Grid Layout: Photo Grid Hierarchy --- */
.photo-grid__item--main img {
  height: 300px;
}

.photo-grid__item--sub img {
  height: 300px;
}

/* 施工前後の実写: 固定高さでなく枠比を写真の向きに合わせて全体を見せる */
.photo-grid__item--fit img {
  height: auto;
  aspect-ratio: 4 / 3;      /* 横長写真（窓など） */
}

.photo-grid__item--fit.photo-grid__item--portrait img {
  aspect-ratio: 3 / 4;      /* 縦長写真（玄関ドアなど） */
}

/* --- Grid Layout: Reason 3+9 --- */
.reason--row {
  margin-bottom: var(--space-lg);
}

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

.reason__number-col {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.reason__body-col {
  /* テキスト自然配置 */
}

/* ============================================
   Glass Effects
   ============================================ */

/* --- section--glass 背景（事業内容セクション） --- */
.section--glass {
  background: var(--color-bg-light);
}

/* --- Glass Lens: ぼかしオーバーレイ + カーソルで穴を開ける --- */

/* ブラーオーバーレイ（ページ全体をぼかす。カーソル位置だけ四角い穴） */
.glass-overlay {
  position: fixed;
  inset: 0;
  z-index: 49;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  backdrop-filter: blur(3px) brightness(0.75) contrast(0.95);
  -webkit-backdrop-filter: blur(3px) brightness(0.75) contrast(0.95);
  background: rgba(30, 40, 50, 0.15);
  /* 角丸の穴 */
  --_rx: var(--glass-mask-x, -999px);
  --_ry: var(--glass-mask-y, -999px);
  --_rw: var(--glass-w, 560px);
  --_rh: var(--glass-h, 420px);
  -webkit-mask:
    linear-gradient(#000, #000),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='420'%3E%3Crect width='560' height='420' fill='%23000'/%3E%3C/svg%3E") var(--_rx) var(--_ry) / var(--_rw) var(--_rh) no-repeat;
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000, #000),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='420'%3E%3Crect width='560' height='420' fill='%23000'/%3E%3C/svg%3E") var(--_rx) var(--_ry) / var(--_rw) var(--_rh) no-repeat;
  mask-composite: exclude;
}

.glass-mode .glass-overlay {
  opacity: 1;
}

/* ノイズテクスチャ（曇りガラスの質感） */
.glass-noise {
  position: fixed;
  inset: 0;
  z-index: 48;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

.glass-mode .glass-noise {
  opacity: 1;
}

/* 窓のエッジぼかし（四角い枠の縁だけblur） */
.glass-edge {
  position: fixed;
  width: var(--glass-w, 560px);
  height: var(--glass-h, 420px);
  z-index: 49;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  border-radius: 0;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  /* 中央を透明、四辺だけ表示（＝四辺だけblurがかかる） */
  -webkit-mask-image:
    linear-gradient(to right, #000 0px, transparent 60px, transparent calc(100% - 60px), #000 100%),
    linear-gradient(to bottom, #000 0px, transparent 60px, transparent calc(100% - 60px), #000 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    linear-gradient(to right, #000 0px, transparent 60px, transparent calc(100% - 60px), #000 100%),
    linear-gradient(to bottom, #000 0px, transparent 60px, transparent calc(100% - 60px), #000 100%);
  mask-composite: add;
}

.glass-mode .glass-edge {
  opacity: 1;
}

/* 古ガラスの歪み（窓内だけ波打つ。中心はクリア、端に向けて屈折が強まる＝ラジアル焦点） */
.glass-warp {
  position: fixed;
  width: var(--glass-w, 560px);
  height: var(--glass-h, 420px);
  z-index: 49;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  border-radius: 0;
  backdrop-filter: url(#old-glass-warp);
  -webkit-backdrop-filter: url(#old-glass-warp);
  /* ラジアル焦点: 中心は歪み弱め、端は強め。全面に歪みを残す */
  -webkit-mask: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4) 0%, #000 100%);
  mask: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4) 0%, #000 100%);
  transition: opacity 0.5s ease;
}

.glass-mode .glass-warp {
  opacity: 1;
}

/* 窓枠（サッシ） */
.glass-lens {
  position: fixed;
  width: var(--glass-w, 320px);
  height: var(--glass-h, 240px);
  border-radius: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    /* 全体のグロウ（控えめに） */
    0 0 30px 20px rgba(255, 255, 255, 0.06),
    0 0 60px 40px rgba(255, 255, 255, 0.04),
    0 0 100px 60px rgba(255, 255, 255, 0.02),
    /* 右辺: ガラス断面の反射光 */
    1px 0 0 0 rgba(255, 255, 255, 0.15),
    4px 0 10px 0 rgba(200, 220, 240, 0.08),
    /* 下辺: ガラスの落ち影 */
    0 4px 0 0 rgba(0, 0, 0, 0.08),
    2px 6px 16px 0 rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

/* 反射（斜めに走る光の帯） */
.glass-lens::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    125deg,
    transparent 40%,
    rgba(255, 255, 255, 0.025) 44%,
    rgba(255, 255, 255, 0.045) 46%,
    rgba(255, 255, 255, 0.025) 48%,
    transparent 52%,
    transparent 64%,
    rgba(255, 255, 255, 0.015) 66%,
    rgba(255, 255, 255, 0.025) 67%,
    rgba(255, 255, 255, 0.015) 68%,
    transparent 70%
  );
  pointer-events: none;
}

/* エッジの屈折光（上と左が明るい） */
.glass-lens::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.03);
  pointer-events: none;
}


.glass-mode .glass-lens--visible {
  opacity: 1;
}

/* トグルボタン + ラベル */
.glass-toggle-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  /* ヒーロー（.hero--film / z-index 53）の背後に隠れないよう 51 → 54 */
  z-index: 54;
  display: flex;
  align-items: center;
  gap: 10px;
}

.glass-toggle-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-primary);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.glass-mode .glass-toggle-label {
  color: var(--color-primary);
}

.glass-toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent);
  background: var(--color-bg);
  color: var(--color-primary);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  box-shadow: 0 0 0 4px rgba(74, 144, 164, 0.18), 0 4px 14px rgba(0, 0, 0, 0.14);
  font-family: var(--font-base);
}

.glass-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: scale(1.06);
  box-shadow: 0 0 0 8px rgba(74, 144, 164, 0.22), 0 6px 20px rgba(0, 0, 0, 0.18);
}

.glass-mode .glass-toggle {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(26, 58, 92, 0.22), 0 4px 14px rgba(0, 0, 0, 0.16);
  cursor: pointer;
}

.glass-mode .glass-toggle:hover {
  box-shadow: 0 0 0 8px rgba(26, 58, 92, 0.28), 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* 初回のパルス誘導（3秒ほど注意を引く。glass-modeでもOFFでも回る） */
@keyframes glass-toggle-pulse {
  0%   { box-shadow: 0 0 0 4px rgba(74, 144, 164, 0.35), 0 4px 14px rgba(0, 0, 0, 0.14); }
  70%  { box-shadow: 0 0 0 14px rgba(74, 144, 164, 0),    0 4px 14px rgba(0, 0, 0, 0.14); }
  100% { box-shadow: 0 0 0 4px rgba(74, 144, 164, 0),     0 4px 14px rgba(0, 0, 0, 0.14); }
}

.glass-toggle {
  animation: glass-toggle-pulse 2.4s ease-out 0s 3;
}
.glass-toggle:hover { animation: none; }

/* 窓サイズスライダー（ON/OFFトグルの上に配置） */
.glass-size-wrap {
  position: fixed;
  bottom: 84px;
  right: 24px;
  /* 同上（.hero--film より前面） */
  z-index: 54;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.glass-mode .glass-size-wrap {
  opacity: 1;
  pointer-events: auto;
}

/* 48px幅のコンテナに縦スライダーをセンタリング */
.glass-size-slider-box {
  width: 48px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glass-size-slider {
  -webkit-appearance: none;
  appearance: none;
  /* 縦向き（下=最小, 上=最大） */
  writing-mode: vertical-lr;
  direction: rtl;
  width: 4px;
  height: 70px;
  background: var(--color-border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.glass-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1.5px solid var(--color-primary);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease;
}

.glass-size-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  border-color: var(--color-accent);
}

.glass-size-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1.5px solid var(--color-primary);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease;
}

.glass-size-slider::-moz-range-thumb:hover {
  transform: scale(1.15);
  border-color: var(--color-accent);
}

.glass-mode .glass-size-slider {
  background: rgba(26, 58, 92, 0.25);
}

.glass-mode .glass-size-slider::-webkit-slider-thumb {
  background: var(--color-primary);
  border-color: #fff;
}

.glass-mode .glass-size-slider::-moz-range-thumb {
  background: var(--color-primary);
  border-color: #fff;
}

/* 全面モード: 窓枠・エッジは不要なので隠す */
.glass-fullsize .glass-lens,
.glass-fullsize .glass-edge {
  opacity: 0 !important;
}

/* 初回ガイダンス */
.glass-hint {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 同上（.hero--film より前面） */
  z-index: 55;
  pointer-events: none;
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  letter-spacing: 0.1em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  padding: var(--space-xl) var(--space-2xl);
  background: rgba(26, 58, 92, 0.4);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  opacity: 0;
  animation: hint-fade 8s ease 1s forwards;
}

.glass-hint span {
  display: block;
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  margin-top: var(--space-sm);
  letter-spacing: 0.02em;
}

@keyframes hint-fade {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.97); }
  10% { opacity: 0.3; }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  65% { opacity: 1; }
  100% { opacity: 0; }
}

/* モバイルでは非表示 */
@media (max-width: 768px) {
  .glass-lens,
  .glass-overlay,
  .glass-noise,
  .glass-hint,
  .glass-toggle-wrap,
  .glass-size-wrap { display: none; }
}


/* --- Reason 数字のグラデーション --- */
.reason__number {
  font-family: var(--font-heading);
  font-weight: 400;
  background: linear-gradient(
    180deg,
    var(--color-primary) 0%,
    var(--color-primary-light) 60%,
    var(--color-accent) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================
   Section Spacing — 役割別余白
   ============================================ */

.section--intro {
  padding: 4rem 0 5rem;
}

.section--detail {
  padding: 5rem 0 6rem;
}

.section--process {
  padding: 5rem 0;
}

.section--trust {
  padding: 7rem 0 8rem;
}

.section--space-md {
  padding: var(--space-2xl) 0;
}

.section--summary {
  padding: 4rem 0 5rem;
}

/* ============================================
   Layout — 非対称グリッド・施工写真
   ============================================ */

/* --- メインカード（事業内容上段） --- */
.card--main {
  padding: var(--space-xl) var(--space-lg);
}

.card--main .card__icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-md);
}

.card--main .card__title {
  font-size: var(--font-size-xl);
}

/* --- 施工写真グリッド（施工後の実写3枚・枠比=元画像のネイティブ比） --- */
/* 等高で並ぶ幅比: 4:3 は 16/12、3:4 は 9/12 → 16fr 9fr 9fr で3枚の高さが揃う */
.showcase-strip {
  display: grid;
  grid-template-columns: 16fr 9fr 9fr;
  gap: var(--space-sm);
}

.showcase-strip__item {
  margin: 0;
}

.showcase-strip__item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}

.showcase-strip__item--landscape img { aspect-ratio: 4 / 3; }
.showcase-strip__item--portrait img { aspect-ratio: 3 / 4; }

@media (max-width: 767px) {
  .showcase-strip {
    grid-template-columns: 1fr 1fr;
  }
  .showcase-strip__item--landscape {
    grid-column: 1 / -1;
  }
}

/* ヒーローのテキストアニメーション（body.opening-active）は 2026-07-30 に撤去。
   ファーストビューのクライマックスは CM 本編そのものが担う。 */

/* ============================================
   Why Orihara — 数字巨大化（desktop）
   ============================================ */
@media (min-width: 1024px) {
  .section--trust .reason__number {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .section--trust .reason__number-col {
    align-items: center;
  }

  .section--trust .reason__body-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .section--trust .reason__title {
    font-size: var(--font-size-xl);
  }

  .section--trust .reason--row {
    margin-bottom: var(--space-2xl);
  }
}