@charset "UTF-8";
/* ==========================================================================
   エアー看板 特集ページ 専用CSS
   CUVIC SAITAMA / theme: tenjiku_tcd091
   --------------------------------------------------------------------------
   ・すべてのスタイルは .air-lp の中だけに適用されます（テーマ側に影響しません）
   ・クラス名はすべて als- で始まります（既存クラスと衝突しません）
   ・固定ヘッダーの高さを考慮したい場合は下の --als-header-offset を指定
   ========================================================================== */

.air-lp{
  /* ---- 配色 ---- */
  --als-ivory:      #F6F1E7;   /* ベースのアイボリー */
  --als-ivory-deep: #EFE8DA;   /* セクション切替の薄い段差 */
  --als-paper:      #FDFCF8;   /* カード面 */
  --als-sky-pale:   #DCE9F0;   /* 淡いブルー面 */
  --als-sky:        #A9C9DA;   /* アクセントの空色 */
  --als-sky-line:   #C4DAE5;
  --als-slate:      #3C5A6B;   /* 深いスレートブルー */
  --als-slate-ink:  #2A4150;
  --als-ink:        #24313A;   /* 本文 */
  --als-muted:      #6E7F89;   /* 補足テキスト */
  --als-line:       #E3DCCD;

  /* ---- 書体 ----
     Adobe Fonts を契約している場合は "futura-pt" が適用され、
     未契約なら自動的に Jost（Futura系の無償フォント）にフォールバックします */
  --als-display: "futura-pt", "Futura PT", "Jost", "Century Gothic", sans-serif;
  --als-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

  /* ---- レイアウト ---- */
  --als-wrap: 1080px;
  --als-shadow: 0 18px 40px -22px rgba(41,65,80,.28);

  /* ---- 固定ヘッダー分のスクロール余白 ----
     ヘッダーに隠れる場合はこの値を実際のヘッダー高さに変更してください */
  --als-header-offset: 80px;

  /* ---- ページ全体の基本設定 ---- */
  font-family: var(--als-jp);
  color: var(--als-ink);
  background: var(--als-ivory);
  line-height: 1.9;
  font-weight: 400;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;

  /* ---- 全画面表示 ----
     functions.php でテーマの親コンテナ（#container/#main_col など）の
     width・padding・margin をすべて無効化しているので、
     ここは 100% を指定するだけで画面いっぱいに広がります。 */
  width: 100%;
  max-width: none;
}

/* テーマ側の余白をリセット（この中だけ） */
.air-lp *,
.air-lp *::before,
.air-lp *::after{ box-sizing: border-box; }

.air-lp h1,
.air-lp h2,
.air-lp h3,
.air-lp p,
.air-lp figure{ margin: 0; padding: 0; }

.air-lp img{ max-width: 100%; height: auto; }

.air-lp section{ position: relative; }

/* --------------------------------------------------------------------------
   wpautop 対策（CSS側の保険）
   --------------------------------------------------------------------------
   WordPressが自動挿入する空の <p> や <br> が Grid / Flex コンテナの
   子要素に混ざるとレイアウトが崩壊するため、それらを非表示にします。
   functions.php 側でも wpautop を無効にしていますが、
   キャッシュやプラグインが再挿入した場合の保険として残しています。
   -------------------------------------------------------------------------- */
.air-lp > br,
.air-lp > p:empty,
.air-lp .als-hero .als-wrap > br,
.air-lp .als-hero .als-wrap > p:empty,
.air-lp .als-spec > br,
.air-lp .als-spec > p:empty,
.air-lp .als-spec-grid > br,
.air-lp .als-spec-grid > p:empty,
.air-lp .als-scene-list > br,
.air-lp .als-scene-list > p:empty,
.air-lp .als-scene-gallery > br,
.air-lp .als-scene-gallery > p:empty,
.air-lp .als-case-cards > br,
.air-lp .als-case-cards > p:empty,
.air-lp .als-gal-mix > br,
.air-lp .als-gal-mix > p:empty,
.air-lp .als-gal-lead > br,
.air-lp .als-gal-lead > p:empty,
.air-lp .als-gal-hero > br,
.air-lp .als-gal-hero > p:empty,
.air-lp .als-size-row > br,
.air-lp .als-size-row > p:empty,
.air-lp .als-size-figbox > br,
.air-lp .als-size-figbox > p:empty,
.air-lp .als-faq-list > br,
.air-lp .als-faq-list > p:empty,
.air-lp .als-channels > br,
.air-lp .als-channels > p:empty,
.air-lp .als-hero-cta > br,
.air-lp .als-hero-cta > p:empty,
.air-lp .als-sec-head > br,
.air-lp .als-sec-head > p:empty,
.air-lp .als-point > br,
.air-lp .als-point > p:empty,
.air-lp .als-case-header > br,
.air-lp .als-case-header > p:empty,
.air-lp .als-scene-head > br,
.air-lp .als-scene-head > p:empty{
  display: none !important;
}

.als-wrap{
  width: 100%;
  max-width: var(--als-wrap);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* 共通の小見出しラベル（英字） */
.als-eyebrow{
  display: block;
  font-family: var(--als-display);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--als-slate);
}

/* セクション見出し */
.als-sec-title{
  font-family: var(--als-jp);
  font-weight: 900 !important;
  font-size: clamp(20px, 2.8vw, 30px) !important;
  color: var(--als-slate-ink);
  line-height: 1.45 !important;
  margin: 8px 0 6px !important;
}
.als-sec-note{ color: var(--als-muted); font-size: 14.5px; }

.als-block{ padding: 78px 0; }
/* 背景の濃淡は als-tint を付けたセクションだけ。順番に依存しないので
   後からセクションを増やしても交互の並びが崩れません */
.air-lp .als-tint{ background: var(--als-ivory-deep); }

.als-prose p{ margin-bottom: 18px; color: var(--als-ink); }
.als-prose p:last-child{ margin-bottom: 0; }
.als-small{ color: var(--als-muted); font-size: 14.5px; }


/* ==========================================================================
   1. ヒーロー
   ========================================================================== */
.als-hero{
  position: relative;
  min-height: 100vh;           /* 画面全体の高さ */
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 100px 0 80px;
}

/* ── 背景画像 ── */
.als-hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.als-hero-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── グラデーションオーバーレイ ──
   左側（テキスト側）を読みやすく、右側は薄めにして看板を際立たせる */
.als-hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      105deg,
      rgba(246,241,231,.90) 0%,
      rgba(246,241,231,.82) 40%,
      rgba(220,233,240,.50) 70%,
      rgba(220,233,240,.20) 100%
    );
}

/* ── コンテンツ（テキスト＋看板）── */
.als-hero .als-wrap{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;
  width: 100%;
}

.als-hero-eyebrow{ display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.als-hero-eyebrow .als-line{ width: 46px; height: 1px; background: var(--als-sky); }

.als-hero h1{
  font-family: var(--als-jp);
  font-weight: 700;
  font-size: 40px !important;
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--als-slate-ink);
}
.als-hero h1 .als-en{
  display: block;
  font-family: var(--als-display);
  font-weight: 300;
  font-size: clamp(13px, 1.4vw, 16px) !important;
  letter-spacing: .34em;
  color: #fff;
  margin-top: 16px;
  text-transform: uppercase;
}
.als-hero-lead{ margin-top: 26px !important; color: var(--als-slate); font-size: 15.5px; max-width: 30em; }
.als-hero-cta{ margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ── 看板ビジュアルエリア ── */
.als-hero-visual{
  position: relative;
  height: 480px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* als-air-figure はそのまま維持 */
.als-air-figure{ width: 170px; height: 300px; position: relative; animation: alsBob 5.5s ease-in-out infinite; }
.als-air-body{
  position: absolute; inset: 0 auto 26px 0;
  width: 100%; height: 270px;
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(220,233,240,.85) 100%);
  border: 2px solid var(--als-sky);
  border-radius: 80px 80px 34px 34px;
  box-shadow: 0 24px 60px -18px rgba(41,65,80,.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--als-display); font-weight: 500; letter-spacing: .2em;
  color: var(--als-slate); font-size: 13px;
  writing-mode: vertical-rl; text-orientation: upright;
}
.als-air-base{
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 120px; height: 26px; background: var(--als-slate); border-radius: 8px;
}
.als-air-shadow{
  position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
  width: 150px; height: 20px;
  background: radial-gradient(closest-side, rgba(60,90,107,.22), transparent);
  animation: alsShadow 5.5s ease-in-out infinite;
}
@keyframes alsBob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-14px); } }
@keyframes alsShadow{
  0%,100%{ transform: translateX(-50%) scale(1); opacity: .9; }
  50%{ transform: translateX(-50%) scale(.82); opacity: .55; }
}

/* ボタン */
.air-lp .als-btn{
  font-family: var(--als-jp);
  font-weight: 700;
  font-size: 14.5px;
  padding: 15px 30px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  transition: background .25s, transform .25s, color .25s;
}
.air-lp .als-btn-primary{ background: var(--als-slate); color: #fff; box-shadow: var(--als-shadow); }
.air-lp .als-btn-primary:hover{ background: var(--als-slate-ink); color: #fff; transform: translateY(-2px); }
.air-lp .als-btn-ghost{ background: transparent; color: var(--als-slate); border-color: #fff; }
.air-lp .als-btn-ghost:hover{ background: var(--als-sky-pale); color: var(--als-slate-ink); }


/* ==========================================================================
   2. セクション見出し（旧：番号バー → 数字なし・淡いブルー帯）
   ========================================================================== */
.als-sec-head{
  background: var(--als-sky-pale);
  border-radius: 12px;
  padding: 22px 28px;
  margin-bottom: 28px;
}
.als-sec-head .als-sub{
  font-family: var(--als-display);
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--als-slate);
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}
.als-sec-head h2{
  font-family: var(--als-jp);
  font-weight: 900 !important;
  font-size: clamp(18px, 2.4vw, 24px) !important;
  color: var(--als-slate-ink);
  line-height: 1.4;
  margin: 0 !important;
  padding-bottom: 40px;
}

/* ==========================================================================
   3. POINT帯（旧：黒タグ＋アイボリー背景 → 横罫線・中央寄せ）
   ========================================================================== */
.als-point{
  border-top: 1px solid var(--als-sky-line);
  border-bottom: 1px solid var(--als-sky-line);
  padding: 20px 0;
  text-align: center;
  margin: 24px 0;
}
.als-point-tag{
  display: block;
  font-family: var(--als-display);
  font-size: 10px;
  letter-spacing: .26em;
  color: var(--als-sky);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.als-point-body{
  font-family: var(--als-jp);
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--als-slate-ink);
  line-height: 1.55 !important;
}


/* ==========================================================================
   3. 仕様
   ========================================================================== */
.als-spec{ display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; margin-top: 14px; }
.als-spec-figure{ border-radius: 18px; overflow: hidden; box-shadow: var(--als-shadow); min-height: 320px; }
.als-spec-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.als-spec-item{
  background: var(--als-paper); border: 1px solid var(--als-line);
  border-radius: 14px; padding: 18px 20px;
}
.als-spec-item .als-k{
  font-family: var(--als-display); font-size: 11px; letter-spacing: .2em;
  color: var(--als-sky); text-transform: uppercase;
}
.als-spec-item .als-v{ font-weight: 700; margin-top: 4px; font-size: 15px; color: var(--als-slate-ink); }
.als-spec-item .als-d{ font-size: 13px; color: var(--als-muted); margin-top: 4px; line-height: 1.7; }


/* ==========================================================================
   4. 使用シーン
   ========================================================================== */
.als-scene-list{ display: flex; flex-direction: column; gap: 38px; margin-top: 26px; }
.als-scene-head{ display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.als-scene-head .als-sno{
  font-family: var(--als-display); font-weight: 300;
  font-size: clamp(30px, 4vw, 52px); color: var(--als-sky); line-height: 1;
}
.als-scene-head .als-stxt .als-lab{
  font-family: var(--als-display); letter-spacing: .24em; font-size: 11px;
  color: var(--als-slate); text-transform: uppercase;
}
.als-scene-head .als-stxt h3{
  font-family: var(--als-jp); font-weight: 900;
  font-size: clamp(19px, 2.4vw, 26px); color: var(--als-slate-ink); margin-top: 4px;
}
.als-scene-head .als-stxt p{ color: var(--als-muted); font-size: 14px; margin-top: 6px; max-width: 44em; }

.als-scene-gallery{ display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.als-scene-gallery .als-ph{ aspect-ratio: 9/10; }


/* ==========================================================================
   5. 事例ナビ（01〜04 / クリックで各事例へスクロール）
   ========================================================================== */
.als-cases-nav{
  padding: 72px 0;
  background: linear-gradient(180deg, var(--als-sky-pale), var(--als-ivory));
}
.als-cases-head{ text-align: center; margin-bottom: 44px; }
.als-cases-head h2{
  font-family: var(--als-jp); font-weight: 900 !important;
  font-size: clamp(22px, 3vw, 30px) !important; color: var(--als-slate-ink); margin-top: 10px !important;
}
.als-case-cards{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.air-lp .als-case-card{
  text-decoration: none; color: inherit; display: block; text-align: center;
  background: var(--als-paper); border: 1px solid var(--als-line);
  border-radius: 20px 20px 16px 16px;
  padding: 22px 16px 24px;
  box-shadow: var(--als-shadow);
  transition: transform .3s, border-color .3s;
}
.air-lp .als-case-card:hover{ transform: translateY(-8px); border-color: var(--als-sky); }
.als-case-thumb{
  aspect-ratio: 1/1; border-radius: 14px; margin-bottom: 16px; overflow: hidden;
  background:
    repeating-linear-gradient(-45deg, rgba(169,201,218,.16) 0 12px, rgba(169,201,218,.06) 12px 24px),
    linear-gradient(180deg, #fff, var(--als-sky-pale));
  border: 1px dashed var(--als-sky-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--als-muted); font-size: 12.5px; letter-spacing: .06em;
}
.als-case-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.als-case-card .als-cno{
  font-family: var(--als-display); font-weight: 600; font-size: 13px;
  letter-spacing: .24em; color: var(--als-sky);
}
.als-case-card .als-cttl{
  font-weight: 700; font-size: 15px; margin-top: 6px;
  color: var(--als-slate-ink); line-height: 1.55;
}
.als-case-card .als-arrow{
  margin-top: 14px; font-family: var(--als-display);
  font-size: 12px; letter-spacing: .15em; color: var(--als-slate);
}


/* ==========================================================================
   6. 事例セクション
   ========================================================================== */
.als-case{ padding: 82px 0; scroll-margin-top: var(--als-header-offset); }

.als-case-header{ display: flex; align-items: baseline; gap: 18px; margin-bottom: 8px; }
.als-case-header .als-case-no{
  font-family: var(--als-display); font-weight: 300;
  font-size: clamp(46px, 7vw, 86px) !important; color: var(--als-sky); line-height: 1;
}
.als-case-header .als-labels .als-lab{
  font-family: var(--als-display); letter-spacing: .24em; font-size: 11px;
  color: var(--als-slate); text-transform: uppercase;
}
.als-case-header .als-labels h3{
  font-family: var(--als-jp); font-weight: 900;
  font-size: clamp(21px, 2.8vw, 30px); color: var(--als-slate-ink);
  line-height: 1.35; margin-top: 6px;
}
.als-case-desc{ max-width: 52em; color: var(--als-ink); margin: 16px 0 26px; }
.als-case-desc p{ margin-bottom: 10px; }
.als-case-desc p:last-child{ margin-bottom: 0; }

/* --- 写真枠の共通スタイル --- */
.als-ph{
  position: relative; overflow: hidden;
  border-radius: 14px; box-shadow: var(--als-shadow);
  background:
    repeating-linear-gradient(-45deg, rgba(60,90,107,.06) 0 14px, rgba(60,90,107,.02) 14px 28px),
    linear-gradient(180deg, #fff, var(--als-sky-pale));
  border: 1px dashed var(--als-sky-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--als-muted); font-size: 12.5px; letter-spacing: .08em;
  text-align: center; padding: 10px;
}
/* 画像を入れたら破線枠は消える */
.als-ph:has(img){ border-color: transparent; padding: 0; }
.als-ph img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* 事例1・3：横長×1 ＋ 縦長×2
   flex-grow を縦横比に比例させると3枚の高さが自動でそろう */
.als-gal-mix{ display: flex; gap: 16px; }
.als-gal-mix .als-ph{ min-width: 0; }
.als-gal-mix .als-land{ aspect-ratio: 3/2; flex: 1.5 1 0; }
.als-gal-mix .als-port{ aspect-ratio: 3/4; flex: .75 1 0; }

/* 事例2：横長×3（1枚目をメインに） */
.als-gal-lead{ display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.als-gal-lead .als-ph{ aspect-ratio: 1/1; }
.als-gal-lead .als-main{ grid-column: 1 / -1; aspect-ratio: 22/7; }

/* 事例4：大画像×1 ＋ 正方形×2 */
.als-gal-hero{ display: grid; gap: 16px; grid-template-columns: 1.4fr 1.4fr 1fr; }
.als-gal-hero .als-big{ grid-column: 1 / 3; grid-row: 1 / 3; }
.als-gal-hero .als-sq{ aspect-ratio: 5/6; }

.air-lp .als-backtop{
  display: inline-flex; align-items: center; gap: 8px; margin-top: 26px;
  font-family: var(--als-display); font-size: 12px; letter-spacing: .15em;
  color: var(--als-slate); text-decoration: none;
}
.air-lp .als-backtop:hover{ color: var(--als-slate-ink); }


/* ==========================================================================
   7. サイズ比較
   --als-mpx = 1mあたりのpx。看板の高さ・幅・人物の身長をすべてこの値から
   算出しているため、この数値を変えるだけで比率を保ったまま拡大縮小できる
   ========================================================================== */
.als-size-legend{ color: var(--als-muted); font-size: 13px; margin-bottom: 28px; }

.als-size-row{
  --als-mpx: 50px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: end; margin-top: 20px;
}
.air-lp .als-size-card{
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  background: var(--als-paper); border: 1px solid var(--als-line);
  border-radius: 16px; padding: 16px 12px 18px;
  box-shadow: var(--als-shadow);
  transition: transform .3s, border-color .3s;
}
.air-lp .als-size-card:hover{ transform: translateY(-6px); border-color: var(--als-sky); }

/* 人物と看板を同じ床ラインに並べる */
.als-size-figbox{
  width: 100%;
  height: calc(var(--als-mpx) * 5);
  display: flex; align-items: flex-end; justify-content: center; gap: 9px;
  border-bottom: 1px solid var(--als-sky-line);
}
.als-size-fig{
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, #fff 0%, var(--als-sky-pale) 100%);
  border: 2px solid var(--als-sky);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--als-display); font-weight: 500;
  color: var(--als-slate); font-size: 10px; letter-spacing: .08em;
  writing-mode: vertical-rl;
}
/* 土台（送風機部） */
.als-size-fig::after{
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 120%; height: calc(var(--als-mpx) * .15);
  background: var(--als-slate); border-radius: 3px;
}

/* 各サイズの実寸（高さ／幅）
   5m・4m・3m → 幅800mm ／ 2m・1.5m → 幅500mm */
.als-s5 { height: calc(var(--als-mpx) * 5);   width: calc(var(--als-mpx) * .8); }
.als-s4 { height: calc(var(--als-mpx) * 4);   width: calc(var(--als-mpx) * .8); }
.als-s3 { height: calc(var(--als-mpx) * 3);   width: calc(var(--als-mpx) * .8); }
.als-s2 { height: calc(var(--als-mpx) * 2);   width: calc(var(--als-mpx) * .5); }
.als-s15{ height: calc(var(--als-mpx) * 1.5); width: calc(var(--als-mpx) * .5); }

/* 身長170cmの人物シルエット */
.als-human{
  height: calc(var(--als-mpx) * 1.7);
  width: auto; flex: none;
  fill: var(--als-slate); opacity: .3;
}

.als-size-card .als-size-val{
  font-family: var(--als-display); font-weight: 600; font-size: 24px;
  color: var(--als-slate-ink); margin-top: 20px;
}
.als-size-card .als-size-lab{ font-size: 12.5px; color: var(--als-muted); margin-top: 2px; }
.als-size-card .als-size-go{
  font-family: var(--als-display); font-size: 11px; letter-spacing: .16em;
  color: var(--als-sky); margin-top: 10px; transition: color .3s;
}
.air-lp .als-size-card:hover .als-size-go{ color: var(--als-slate); }


/* ==========================================================================
   8. よくあるご質問（JS不要 / details・summary で開閉）
   ========================================================================== */
.als-faq-list{ display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }

.als-faq-item{
  background: var(--als-paper);
  border: 1px solid var(--als-line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .25s;
}
.als-faq-item[open]{ border-color: var(--als-sky); }

.als-faq-item summary{
  display: flex; align-items: center; gap: 18px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
  font-weight: 700; font-size: 15.5px;
  color: var(--als-slate-ink); line-height: 1.6;
  transition: background .25s;
}
.als-faq-item summary::-webkit-details-marker{ display: none; }
.als-faq-item summary::marker{ content: ""; }
.als-faq-item summary:hover{ background: var(--als-sky-pale); }
.als-faq-item summary:focus-visible{ outline: 2px solid var(--als-slate); outline-offset: -3px; }

/* ＋ / − のマーク */
.als-faq-mark{ position: relative; width: 15px; height: 15px; flex: none; }
.als-faq-mark::before,
.als-faq-mark::after{ content: ""; position: absolute; background: var(--als-sky); border-radius: 1px; }
.als-faq-mark::before{ top: 50%; left: 0; width: 15px; height: 2px; transform: translateY(-50%); }
.als-faq-mark::after{ left: 50%; top: 0; width: 2px; height: 15px; transform: translateX(-50%); transition: transform .3s ease; }
.als-faq-item[open] .als-faq-mark::after{ transform: translateX(-50%) scaleY(0); }
.als-faq-item[open] .als-faq-mark::before{ background: var(--als-slate); }

.als-faq-answer{
  padding: 0 26px 24px 59px;
  color: var(--als-ink); font-size: 14.5px; line-height: 1.95;
  animation: alsFaqIn .3s ease;
}
.als-faq-answer p + p{ margin-top: 12px; }
@keyframes alsFaqIn{
  from{ opacity: 0; transform: translateY(-4px); }
  to{ opacity: 1; transform: none; }
}


/* ==========================================================================
   9. まとめ / お問い合わせ
   ========================================================================== */
.als-cta{
  padding: 86px 0;
  background: linear-gradient(180deg, var(--als-ivory), var(--als-sky-pale));
  text-align: center;
  scroll-margin-top: var(--als-header-offset);
}
.als-cta h2{
  font-family: var(--als-jp); font-weight: 900;
  font-size: clamp(24px, 3.4vw, 36px); color: var(--als-slate-ink);
}
.als-cta .als-en{
  display: block; font-family: var(--als-display);
  letter-spacing: .3em; font-size: 12px;
  color: var(--als-sky); text-transform: uppercase;
}
.als-cta > .als-wrap > p{ max-width: 40em; margin: 22px auto 0; color: var(--als-muted); }

.als-contact-card{
  margin: 44px auto 0; max-width: 760px;
  background: var(--als-paper); border: 1px solid var(--als-line);
  border-radius: 24px; box-shadow: var(--als-shadow);
  padding: 40px 34px;
}
.als-contact-card .als-contact-lead{ font-weight: 700; font-size: 19px; color: var(--als-slate-ink); }
.als-channels{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* チャネルカード（クリッカブル） */
.air-lp .als-chan{
  flex: 1 1 200px;
  background: var(--als-sky-pale); border: 1px solid var(--als-sky-line);
  border-radius: 14px; padding: 20px 24px;
}
.air-lp .als-chan-link{
  text-decoration: none;
  display: flex; flex-direction: column; gap: 4px;
  transition: background .25s, border-color .25s, transform .25s;
  position: relative;
}
.air-lp .als-chan-link:hover{
  background: var(--als-sky);
  border-color: var(--als-sky);
  transform: translateY(-4px);
}
.air-lp .als-chan-link:hover .als-k,
.air-lp .als-chan-link:hover .als-v,
.air-lp .als-chan-link:hover .als-chan-arrow{ color: #fff; }

.als-chan .als-k{
  font-family: var(--als-display); letter-spacing: .2em; font-size: 11px;
  color: var(--als-slate); text-transform: uppercase;
  transition: color .25s;
}
.als-chan .als-v{
  font-weight: 700; font-size: 17px; color: var(--als-slate-ink);
  transition: color .25s;
}
.als-chan-arrow{
  font-family: var(--als-display); font-size: 13px; color: var(--als-sky);
  margin-top: 8px; transition: color .25s;
}

/* 電話番号 */
.als-contact-tel{
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--als-line);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.als-tel-label{
  font-size: 13px; color: var(--als-muted);
  font-family: var(--als-jp); letter-spacing: .04em;
}
.air-lp .als-tel-num{
  font-family: var(--als-display); font-weight: 500;
  font-size: clamp(26px, 4vw, 38px); letter-spacing: .06em;
  color: var(--als-slate-ink); text-decoration: none;
  transition: color .25s;
}
.air-lp .als-tel-num:hover{ color: var(--als-slate); }


/* ==========================================================================
   10. スクロール表示アニメーション（air-sign.js と連動）
   ========================================================================== */
/* 初期状態は「表示」。HTML冒頭の1行スクリプトが html に als-js-ready を
   付けたときだけ隠れるため、JSが無効でも消えたままになりません。
   描画前にクラスが付くので、一瞬見えてから消えるちらつきも起きません */
.als-js-ready .air-lp .als-reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.als-js-ready .air-lp .als-reveal.als-in{ opacity: 1; transform: none; }


/* ==========================================================================
   11. レスポンシブ
   ========================================================================== */
@media (max-width: 860px){
  .als-hero{ min-height: 100svh; padding: 80px 0 60px; }
  .als-hero .als-wrap{ grid-template-columns: 1fr; }
  .als-hero-visual{ height: 280px; order: -1; }
  /* オーバーレイをスマホ用に調整（全体を少し暗めに） */
  .als-hero-overlay{
    background: linear-gradient(
      180deg,
      rgba(246,241,231,.82) 0%,
      rgba(246,241,231,.70) 100%
    );
  }

  .als-block{ padding: 60px 0; }
  .als-case{ padding: 62px 0; }

  .als-spec{ grid-template-columns: 1fr; }
  .als-case-cards{ grid-template-columns: 1fr 1fr; }
  .als-scene-gallery{ grid-template-columns: 1fr 1fr; }

  .als-gal-mix{ flex-wrap: wrap; }
  .als-gal-mix .als-land{ flex: 0 0 100%; }
  .als-gal-mix .als-port{ flex: 1 1 calc(50% - 8px); }

  .als-gal-hero{ grid-template-columns: 1fr 1fr; }
  .als-gal-hero .als-big{ grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3/2; }

  .als-size-row{ grid-template-columns: repeat(3, 1fr); gap: 12px; --als-mpx: 40px; }
}

@media (max-width: 480px){
  .als-hero h1{ font-size: 28px !important; }
  .als-case-cards{ grid-template-columns: 1fr; }
  .als-scene-gallery{ grid-template-columns: 1fr; }
  .als-gal-lead{ grid-template-columns: 1fr; }
  .als-gal-hero{ grid-template-columns: 1fr; }
  .als-channels{ flex-direction: column; }
  .als-chan{ flex: none; }

  .als-faq-item summary{ padding: 18px; gap: 14px; font-size: 14.5px; }
  .als-faq-answer{ padding: 0 18px 20px 46px; }

  .als-size-row{ grid-template-columns: repeat(2, 1fr); --als-mpx: 36px; }
}


/* ==========================================================================
   12. アニメーションを減らす設定への配慮
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .air-lp *,
  .air-lp *::before,
  .air-lp *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .air-lp .als-reveal{ opacity: 1 !important; transform: none !important; }
}