/* =========================================================
   AIRS — 関電工業風 モノトーン＆シャープデザイン
   無骨でプロフェッショナルなコーポレートサイト
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700;800&family=Noto+Serif+JP:wght@400;700;900&display=swap');

html { scroll-behavior: smooth; }

/* =========================================================
   ベーススタイル (チープ感の排除)
   ========================================================= */
body {
  background-color: #ffffff !important;
  color: #1a1d1d;
  font-family: 'Noto Sans JP', sans-serif;
}

/* 全ての角丸を強制無効化してシャープに */
* {
  border-radius: 0 !important;
}

/* ポップな背景色の無効化 (白と極薄グレーのみにする) */
.bg-sand-beige,
.bg-surface,
.bg-surface-container,
.bg-surface-container-low,
.bg-surface-container-high,
.bg-surface-container-highest,
.bg-surface-bright,
.bg-background {
  background-color: #f8f9fa !important;
}

/* 影を非常に薄く、シャープに */
.shadow-lg, .shadow-xl, .shadow-2xl, .airs-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* =========================================================
   タイポグラフィの高級感化
   ========================================================= */
/* 日本語見出しを明朝体風または引き締まったゴシックに */
.font-headline-lg, .font-headline-md {
  font-family: 'Noto Serif JP', serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  color: #111827 !important;
}

/* 不要な巨大背景文字を非表示 */
.airs-bg-title { display: none !important; }

/* 装飾的な斜めカッティング、波ディバイダーなどを全非表示 */
.airs-angle-img { clip-path: none !important; }
.wave-divider { display: none !important; }
.airs-sun { display: none !important; }

/* 英語のプレタイトル（より小さく、スタイリッシュに）
   ※ span限定。a/button(CTA)に誤適用してボタンが潰れるのを防ぐ */
span.font-label-bold, span[class*="tracking-[0.2em]"], span.uppercase.tracking-widest {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.65rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  font-weight: 600 !important;
  color: #0E3A5F !important; /* ネイビーに統一 */
  background: none !important;
  border: none !important;
  padding: 0 !important;
  display: block !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid #0E3A5F !important;
  width: max-content;
  padding-bottom: 4px !important;
}

/* =========================================================
   アニメーション (動画ライクな洗練された動き)
   ========================================================= */
/* テキストやコンテナの下からのフェードイン（フッターは除外して常時表示） */
html.has-js section :where(h2, h3, h4, p, table, form, li, blockquote, .grid > *, .reveal-item) {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}
html.has-js footer :where(h2, h3, h4, p, table, form, li, blockquote, .grid > *, .reveal-item) {
  opacity: 1 !important;
  transform: none !important;
}
html.has-js .reveal-js {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}
html.has-js .is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 画像の高級なマスク出現 (クリップワイプの代替) */
html.has-js .airs-mask-wrap {
  overflow: hidden;
  position: relative;
  display: block;
}
html.has-js .airs-mask-wrap img {
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1), transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}
html.has-js .airs-mask-wrap.is-visible img {
  opacity: 1;
  transform: scale(1);
}

/* ヒーロー画像等のパララックスズーム (Ken Burns) */
@keyframes airs-kenburns {
  0%   { transform: scale(1.0) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1%, -1%); }
}
.airs-kenburns {
  animation: airs-kenburns 25s ease-out both; /* infiniteを外して1回のみゆっくり */
}

/* =========================================================
   ナビゲーションバーの関電工業風スタイル
   ========================================================= */
nav {
  transition: background-color 0.5s ease, padding 0.5s ease, box-shadow 0.5s ease;
  background-color: rgba(14, 58, 95, 0.7) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
nav.airs-scrolled {
  background-color: rgba(14, 58, 95, 0.95) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
/* スクロール後も白文字を維持してロゴと整合 */
nav, nav.airs-scrolled, nav.airs-scrolled * {
  color: #ffffff;
}
nav a[class*="bg-ocean-blue"], nav.airs-scrolled a[class*="bg-ocean-blue"] {
  color: #ffffff !important;
}

/* =========================================================
   ホバーエフェクトの整理
   ========================================================= */
.airs-zoom {
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.airs-zoom > img, .airs-zoom > picture > img, .airs-mask-wrap > img {
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.airs-zoom:hover > img, .airs-zoom:hover > picture > img, .airs-mask-wrap:hover > img {
  transform: scale(1.05);
}
/* ホバー時のオーバーレイを完全削除 (画像が見えなくなるバグ防止) */
.airs-ov, .airs-ovbtn { display: none !important; }

/* ボタンから過剰なエフェクト（shine等）を削除 */
.airs-shine::after { display: none !important; }
.airs-ripple { display: none !important; }

/* ボタンのソリッド化 */
a[class*="bg-ocean-blue"], button[class*="bg-ocean-blue"] {
  background-color: #0E3A5F !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  transition: background-color 0.3s ease;
}
a[class*="bg-ocean-blue"]:hover, button[class*="bg-ocean-blue"]:hover {
  background-color: #1a1d1d !important;
}

/* =========================================================
   トップへ戻るボタン
   ========================================================= */
#airsTop {
  position: fixed;
  right: 32px;
  bottom: 32px;
  width: 48px;
  height: 48px;
  background: #0E3A5F;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity .4s ease, transform .4s ease, background .3s ease;
  z-index: 60;
}
#airsTop.show { opacity: 1; visibility: visible; transform: translateY(0); }
#airsTop:hover { background: #1a1d1d; }

/* =========================================================
   Reduced Motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.has-js :where(section, footer) :where(h2,h3,h4,p,table,form,li,blockquote,.grid > *,.reveal-item),
  html.has-js .reveal-js, html.has-js .airs-mask-wrap img { opacity: 1 !important; transform: none !important; transition: none !important; }
  .airs-kenburns { animation: none; }
  .airs-zoom:hover > img { transform: none; }
}

/* =========================================================
   フッター
   ========================================================= */
footer {
  background-color: #0E3A5F !important;
}
footer * {
  border-color: rgba(255,255,255,0.1) !important;
}

/* =========================================================
   可読性フィックス（濃紺背景上の文字／最上部ナビ）
   ========================================================= */
/* 濃紺セクション・CTA帯・フッター上の見出しは白に */
.bg-deep-navy h1, .bg-deep-navy h2, .bg-deep-navy h3,
.bg-deep-navy .font-headline-lg, .bg-deep-navy .font-headline-md,
footer h2, footer h3, footer h4,
footer .font-headline-lg, footer .font-headline-md {
  color: #ffffff !important;
}
/* 濃紺上のプレタイトル(英字ラベル)は明るいティールに */
.bg-deep-navy .font-label-bold,
.bg-deep-navy span[class*="tracking-[0.2em]"],
footer .font-label-bold {
  color: #59dacc !important;
  border-bottom-color: rgba(255,255,255,0.25) !important;
}
/* 濃紺上の本文・リストは薄白に */
.bg-deep-navy p, .bg-deep-navy li,
footer p, footer li, footer a {
  color: rgba(255,255,255,0.85) !important;
}

/* 最上部(非スクロール)ナビも濃紺維持 + 白文字 (ロゴの視認性確保) */
nav:not(.airs-scrolled) * { color: #ffffff !important; }
nav:not(.airs-scrolled) a[class*="bg-ocean-blue"],
nav:not(.airs-scrolled) a[class*="bg-deep-navy"] { color: #ffffff !important; }
nav:not(.airs-scrolled) .text-ocean-blue { color: #59dacc !important; }

/* =========================================================
   ユーティリティ
   ========================================================= */
/* HTML内に直接書き込まれたアイコン枠などを非表示に */
.material-symbols-outlined[style*="construction"] {
  display: none !important;
}

/* =========================================================
   参考サイト風の追加演出（斜めクリップ出現／英字ウォーターマーク／パララックス）
   ========================================================= */

/* ① 画像の斜めクリップ・ワイプ出現（mask-wrapを強化） */
html.has-js .airs-mask-wrap img {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: opacity 1.3s cubic-bezier(0.25,1,0.5,1),
              transform 1.6s cubic-bezier(0.25,1,0.5,1),
              clip-path 1.3s cubic-bezier(0.25,1,0.5,1) !important;
}
html.has-js .airs-mask-wrap.is-visible img {
  clip-path: polygon(0 0, 135% 0, 100% 100%, 0 100%);
}

/* ② 大きな英字ウォーターマーク見出し */
.airs-watermark {
  position: absolute;
  top: 8px;
  left: 40px;
  z-index: -1;
  pointer-events: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  font-size: clamp(56px, 11vw, 150px);
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(14,58,95,0.10);
  text-stroke: 1.4px rgba(14,58,95,0.10);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease, transform 1s ease;
}
.airs-watermark.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 767px){ .airs-watermark{ left: 16px; } }

/* ③ パララックス用：画像にヘッドルームを持たせて translate で動かす */
.airs-parallax { height: 122% !important; top: -11%; position: relative; }

@media (prefers-reduced-motion: reduce) {
  html.has-js .airs-mask-wrap img { clip-path: none !important; }
  .airs-watermark { opacity: 1 !important; transform: none !important; }
  .airs-parallax { height: 100% !important; top: 0 !important; translate: none !important; }
}

/* =========================================================
   西海岸・サーフ アクセント（クリーンな土台を保ったまま）
   ========================================================= */
/* 1) 交互セクション/土台を 冷グレー → 温かいサンドへ */
.bg-sand-beige, .bg-surface, .bg-surface-container, .bg-surface-container-low,
.bg-surface-container-high, .bg-surface-container-highest, .bg-surface-bright, .bg-background {
  background-color: #f5f1e8 !important;
}
/* 白カードはサンド上で映えるよう純白を維持 */
.bg-surface-container-lowest, .bg-white { background-color: #ffffff !important; }

/* 2) プレタイトル英字を オーシャンティール に */
span.font-label-bold, span[class*="tracking-[0.2em]"], span.uppercase.tracking-widest {
  color: #0f8a7d !important;
  border-bottom-color: #1FB2A5 !important;
}

/* 3) 見出し下の手描き風 波ライン（サーフ看板風） */
.airs-wuline { display: block; width: 88px; height: 13px; margin-top: 16px; line-height: 0; }
.airs-wuline svg { display: block; width: 88px; height: 13px; overflow: visible; }
/* 中央寄せ見出しの直下は中央に */
.text-center .airs-wuline, [class*="text-center"] > .airs-wuline { margin-left: auto; margin-right: auto; }

/* 4) 英字ウォーターマークをティール寄りのアウトラインに */
.airs-watermark {
  -webkit-text-stroke: 1.4px rgba(31,178,165,0.14) !important;
  text-stroke: 1.4px rgba(31,178,165,0.14) !important;
}

/* 5) 濃紺セクションの上辺に細いティールの波ライン（コースタルな区切り） */
.bg-deep-navy.airs-wavetop { position: relative; }
.bg-deep-navy.airs-wavetop::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: repeat-x left top / 28px 8px
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='8'%3E%3Cpath%20d='M0%204%20Q7%200%2014%204%20T28%204'%20fill='none'%20stroke='%231FB2A5'%20stroke-width='2'/%3E%3C/svg%3E");
  opacity: .9;
}

/* =========================================================
   カーソル連動アニメーション（復活・ティール配色）
   ========================================================= */
/* 追従リング */
#airsCursor {
  position: fixed; top: 0; left: 0; width: 30px; height: 30px;
  margin: -15px 0 0 -15px; border-radius: 9999px !important;
  border: 2px solid rgba(31,178,165,0.7); background: rgba(31,178,165,0.06);
  pointer-events: none; z-index: 65; opacity: 0; will-change: transform;
  transition: width .25s ease, height .25s ease, border-color .25s ease, background .25s ease, opacity .35s ease;
}
#airsCursor.airs-on { opacity: 1; }
#airsCursor.airs-hot {
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-color: rgba(14,58,95,0.85); background: rgba(31,178,165,0.12);
}
@media (pointer: coarse) { #airsCursor, #airsWind { display: none !important; } }

/* クリック水紋（さざ波） — 旧 display:none を上書きして復活 */
.airs-ripple {
  display: block !important;
  position: fixed; border-radius: 9999px !important; pointer-events: none; z-index: 64;
  border: 2px solid rgba(31,178,165,0.7);
  transform: translate(-50%, -50%) scale(0);
  animation: airs-ripple .7s cubic-bezier(.22,.7,.2,1) forwards;
}
@keyframes airs-ripple {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: .85; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}

/* マグネットボタン */
.airs-magnet { transition: transform .25s cubic-bezier(.22,.7,.2,1); }

/* 風キャンバス */
/* 風は背景レイヤー(z-index:0)。コンテンツを z-index:1 で前面に上げることで
   文字・画像・カードの上には被らず、背景としてだけ流れる */
#airsWind { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 1; }
html { background-color: #f5f1e8; }
body, body.bg-background { background-color: transparent !important; }
body > header, body > main, body > section, body > footer { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  #airsCursor, #airsWind { display: none !important; }
  .airs-ripple { display: none !important; }
  .airs-magnet { transform: none !important; }
}

/* =========================================================
   作り込み演出：マーキー帯 ＋ ウォーターマークのスライドイン
   ========================================================= */
/* 流れるコースタル・マーキー */
.airs-marquee {
  background: #0E3A5F; color: #fff; overflow: hidden; white-space: nowrap;
  padding: 16px 0; border-top: 2px solid #1FB2A5; border-bottom: 2px solid #1FB2A5;
}
.airs-marquee-track {
  display: inline-flex; align-items: center;
  animation: airs-marq 32s linear infinite; will-change: transform;
}
.airs-marquee-track span {
  font-family: 'Outfit','Noto Sans JP',sans-serif; font-weight: 700;
  letter-spacing: .12em; font-size: 1.05rem; padding: 0 1.6rem; flex: none;
}
.airs-marquee-track .airs-dot { color: #1FB2A5; font-size: .9rem; padding: 0; }
.airs-marquee:hover .airs-marquee-track { animation-play-state: paused; }
@keyframes airs-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ウォーターマーク：横からスライドイン（より作り込んだ出現） */
.airs-watermark {
  transform: translateX(-7%);
  transition: opacity 1.1s cubic-bezier(.22,.7,.2,1), transform 1.3s cubic-bezier(.22,.7,.2,1) !important;
}
.airs-watermark.is-visible { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .airs-marquee-track { animation: none !important; }
  .airs-watermark { transform: none !important; }
}

/* =========================================================
   作り込み演出 第2弾：斜め区切り／縦書きラベル／ヒーロー登場／Before-After
   ========================================================= */
/* ① 斜めセクション区切り */
.airs-diagonal { clip-path: polygon(0 0, 100% 36px, 100% 100%, 0 calc(100% - 36px)); }
@media (max-width: 767px){ .airs-diagonal { clip-path: polygon(0 0, 100% 18px, 100% 100%, 0 calc(100% - 18px)); } }

/* ② 縦書き英字ラベル（セクション側面） */
.airs-vlabel {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .4em; text-transform: uppercase;
  color: rgba(14,58,95,0.22); pointer-events: none; z-index: 0; white-space: nowrap;
}
[class*="bg-deep-navy"] .airs-vlabel { color: rgba(255,255,255,0.3); }
@media (max-width: 980px){ .airs-vlabel { display: none; } }

/* ③ ヒーローの凝った登場（マスクからスライドアップ＋スタッガー） */
.airs-hero-mask { display: block; overflow: hidden; }
.airs-hero-mask > * { display: inline-block; transform: translateY(115%); transition: transform 1.05s cubic-bezier(.2,.8,.2,1); }
.airs-hero-fade { opacity: 0 !important; transform: translateY(24px) !important; transition: opacity 1s ease, transform 1s ease; }
.airs-hero-in .airs-hero-mask > * { transform: translateY(0) !important; }
.airs-hero-in .airs-hero-mask:nth-of-type(1) > * { transition-delay: .15s; }
.airs-hero-in .airs-hero-mask:nth-of-type(2) > * { transition-delay: .30s; }
.airs-hero-in .airs-hero-fade { opacity: 1 !important; transform: none !important; }
.airs-hero-in .airs-hero-fade.d1 { transition-delay: .55s; }
.airs-hero-in .airs-hero-fade.d2 { transition-delay: .70s; }

/* ④ Before / After スライダー */
.airs-ba { position: relative; overflow: hidden; user-select: none; aspect-ratio: 16/9; cursor: ew-resize; }
.airs-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.airs-ba .airs-ba-after { clip-path: inset(0 0 0 var(--airs-ba, 50%)); }
.airs-ba-handle { position: absolute; top: 0; bottom: 0; left: var(--airs-ba, 50%); width: 3px; background: #1FB2A5; transform: translateX(-50%); z-index: 3; }
.airs-ba-handle::after {
  content: "↔"; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px;
  transform: translate(-50%,-50%); background: #1FB2A5; color:#fff; border: 3px solid #fff;
  border-radius: 9999px !important; display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.airs-ba-label { position: absolute; bottom: 14px; padding: 6px 14px; font-family: 'Outfit',sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .1em; color: #fff; z-index: 2; }
.airs-ba-label.before { left: 14px; background: rgba(14,58,95,.85); }
.airs-ba-label.after { right: 14px; background: rgba(31,178,165,.92); }

@media (prefers-reduced-motion: reduce) {
  .airs-hero-mask > *, .airs-hero-fade { transform: none !important; opacity: 1 !important; }
}

/* =========================================================
   日本語の改行を文節単位に（site.js「13.」で <wbr> を挿入した後に有効）
   - keep-all: 文字の途中では改行せず、<wbr>（文節の区切り）でのみ改行
   - break-word: 1つの文節が行幅を超えるときだけ例外的に途中で折る（はみ出し防止）
   - 見出しは行の長さをそろえ、本文は最終行に1〜2文字だけ残るのを避ける
   ========================================================= */
html.airs-phrase body { word-break: keep-all; overflow-wrap: break-word; }
html.airs-phrase :where(input, textarea, select) { word-break: normal; }
html.airs-phrase :where(h1, h2, h3, h4) { text-wrap: balance; }
html.airs-phrase :where(p, li, dd, td, th, blockquote, figcaption) { text-wrap: pretty; }

/* トップのヒーロー：iPhone Safari の 100vh はアドレスバーが隠れた時の高さになり、
   最初の画面で下端（SCROLL 表示）がバーの裏に隠れるため、表示中の画面高さ 100svh を使う。
   svh 非対応の古いブラウザは 100vh のまま。 */
.airs-hero-full { height: 100vh; height: 100svh; }