@charset "UTF-8";

/* ======================================
   Design Tokens
====================================== */
:root {
  --c-primary: #0DC1CC;
  --c-primary-dark: #089EAA;
  --c-primary-light: rgba(13, 193, 204, 0.12);
  --c-primary-glow: rgba(13, 193, 204, 0.30);

  --c-dark: #0A0E14;
  --c-dark-2: #141C2A;
  --c-gray: #4A5568;
  --c-gray-2: #718096;
  --c-gray-3: #A0AEC0;

  --c-bg: #FFFFFF;
  --c-bg-alt: #F7F9FC;
  --c-border: #E2E8F0;

  --c-yellow: #FFE500;
  --c-pink: #F04D98;

  --font-en: 'Montserrat', sans-serif;
  --font-ja: 'Noto Sans JP', sans-serif;

  --shadow-sm: 0 2px 8px rgba(10, 14, 20, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 14, 20, 0.08);
  --shadow-lg: 0 16px 48px rgba(10, 14, 20, 0.10);
  --shadow-xl: 0 24px 64px rgba(10, 14, 20, 0.14);
  --shadow-primary: 0 8px 28px rgba(13, 193, 204, 0.30);
  --shadow-primary-lg: 0 16px 48px rgba(13, 193, 204, 0.35);

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 40px;
  --r-full: 9999px;

  --container: 1200px;
}

/* ======================================
   Reset & Base
====================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ======================================
   A11y：フォーカスリング（グローバル）
   ※ 円形の惑星ナビ/フォーム入力は専用の見せ方があるので outline:none で除外
====================================== */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ======================================
   A11y：prefers-reduced-motion 集約（全ページ共通・単一ブロック）
   個別の reduce 指定はここに集約済み。動き前提の装飾レイヤーは凍結でなく非表示に。
====================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  /* 動きが演出の本体である装飾は、静止させると不自然なため非表示 */
  .industry-parallax-layer,
  .mobile-nav-blob2 { display: none !important; }
  /* フェードイン前提の要素は確実に可視化 */
  .planet-item { opacity: 1 !important; }
  /* モバイルナビ背景スキャンラインの静止向き */
  .mobile-nav::before { transform: scaleX(-1) !important; }
}
/* 横スクロール抑止はルート(html)で行う。body に置くと body がスクロールコンテナ化し、
   サブページのサブナビ(position:sticky)が body 基準になって固定されない不具合が出る (2026-06-09) */
html { overflow-x: clip; }
body {
  font-family: var(--font-ja);
  color: var(--c-dark);
  background: var(--c-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }
ul { list-style: none; }

/* ======================================
   Loading
====================================== */
.loading {
  position: fixed; inset: 0;
  background: var(--c-primary);
  display: flex; justify-content: center; align-items: center;
  z-index: 9999;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
.loading.fade-out { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-inner { text-align: center; }
.loading-logo {
  width: 160px; max-width: 42vw;
  margin: 0 auto;
  animation: loading-pulse 1.5s ease-in-out infinite;
}
.loading-bar {
  width: 200px; height: 3px;
  background: rgba(255,255,255,0.3);
  border-radius: var(--r-full);
  margin: 24px auto 0; overflow: hidden;
}
.loading-bar-fill {
  height: 100%; width: 0;
  background: #fff; border-radius: var(--r-full);
  animation: loading-progress 1.5s ease-out forwards;
}
@keyframes loading-pulse { 0%,100% { transform: scale(0.97); opacity: 0.9; } 50% { transform: scale(1); opacity: 1; } }
@keyframes loading-progress { 0% { width: 0; } 100% { width: 100%; } }

/* ======================================
   カード → モーダル（プラン/オプション/3つの理由 共通）
====================================== */
.js-modal-card { cursor: pointer; }
.modal-detail[hidden] { display: none; }
/* 在グリッド時はコンパクト表示（詳細はモーダルで） */
.pricing-grid--entry .pricing-card .pricing-desc,
.pricing-grid--entry .pricing-card .pricing-eg-head,
.pricing-grid--entry .pricing-card .pricing-feature-list,
.pricing-grid--main .pricing-card .pricing-desc,
.pricing-grid--main .pricing-card .pricing-eg-head,
.pricing-grid--main .pricing-card .pricing-feature-list,
.pricing-grid--packs .pricing-card .pricing-desc,
.pricing-grid--packs .pricing-card .pricing-eg-head,
.pricing-grid--packs .pricing-card .pricing-feature-list { display: none; }
/* HP制作プランも同様にコンパクト化（特徴リスト・注記はモーダルで） */
.hp-plan-grid .pricing-card .pricing-feature-list,
.hp-plan-grid .pricing-card .hp-plan-note { display: none; }
.hp-plan-grid .pricing-card { padding: 28px 24px 26px; }
.site-modal-body .pricing-card .hp-plan-note { display: block; }
.pricing-more {
  margin-top: auto; padding-top: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--c-primary); font-weight: 700; font-size: .82rem; letter-spacing: .02em;
}
.pricing-more::after { content: '›'; font-size: 1.15em; line-height: 1; }
.js-modal-card:hover .pricing-more { gap: 10px; }

.site-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.site-modal.is-open { display: flex; align-items: center; justify-content: center; padding: 24px; }
.site-modal-overlay { position: absolute; inset: 0; background: rgba(10, 14, 20, 0.55); animation: modal-fade .2s ease; }
.site-modal-panel {
  position: relative; background: #fff; border-radius: 28px;
  box-shadow: var(--shadow-lg); max-width: 560px; width: 100%;
  max-height: 86vh; overflow-y: auto; padding: 34px 36px 30px;
  animation: modal-pop .22s cubic-bezier(.2,.8,.3,1);
}
.site-modal-close {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--c-border); background: #fff; color: var(--c-gray);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .2s ease;
}
.site-modal-close:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); transform: rotate(90deg); }
/* モーダル内ではカード装飾を外して中身だけ見せる */
.site-modal-body .pricing-card,
.site-modal-body .why-card { border: none; box-shadow: none; background: none; padding: 0; transform: none; overflow: visible; border-radius: 0; min-height: 0; }
.site-modal-body .pricing-card:hover,
.site-modal-body .why-card:hover { transform: none; box-shadow: none; }
.site-modal-body .pricing-more,
.site-modal-body .why-card-photo { display: none; }
.site-modal-body .pricing-card .pricing-desc,
.site-modal-body .pricing-card .pricing-eg-head,
.site-modal-body .pricing-card .pricing-feature-list { display: block; }
/* モーダル内：スペックは縦積みをやめてインラインのチップに（縦長を圧縮） */
.site-modal-body .pricing-spec {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 10px 0 4px; padding: 0; border: none; list-style: none;
}
.site-modal-body .pricing-spec li {
  display: inline-flex; align-items: baseline; gap: 6px; margin: 0; border: none;
  background: var(--c-primary-light); border-radius: 999px; padding: 6px 14px; font-size: .82rem;
}
.site-modal-body .pricing-spec li span { color: var(--c-gray); font-size: .76rem; }
/* TOP「選ばれる3つの理由」：在グリッドでは一覧アコーディオンを隠し（"開くと全部動く"を排除）、モーダルで全開して見せる */
#why .why-card .industry-accordion { display: none; }
@media (min-width: 769px) { #why .why-card { min-height: 0; } }
.site-modal-body .why-card-body { padding: 0; }
.site-modal-body .industry-accordion { display: block; margin-top: 18px; }
.site-modal-body .industry-accordion-btn { display: none; }
.site-modal-body .industry-accordion-body { max-height: none; overflow: visible; }
/* モーダル表示中は背景スクロールを固定（iOS Safari は overflow:hidden だけでは止まらないため position:fixed で固定し、閉じたら元位置へ戻す＝JS側で top/scroll を制御） */
body.modal-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 768px) {
  /* モバイルは内容高さのボトムシート（全画面固定をやめて無駄な余白を殺す） */
  .site-modal.is-open { padding: 0; align-items: flex-end; }
  .site-modal-panel { max-width: none; width: 100%; height: auto; max-height: 90vh; border-radius: 22px 22px 0 0; padding: 30px 20px 28px; }
}

/* ======================================
   料金プランのティア（案B：お試し / 本格運用）
====================================== */
.pricing-tier + .pricing-tier { margin-top: 36px; }
.pricing-tier-label {
  display: flex; align-items: center; gap: 10px;
  font-size: .82rem; font-weight: 800; letter-spacing: .08em; color: var(--c-gray);
  margin: 0 0 16px 4px;
}
.pricing-tier-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary); }
/* ※ services.css の .pricing-grid{repeat(3,1fr)} に勝つよう詳細度を上げる */
.pricing-grid.pricing-grid--entry { grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 720px; margin-inline: auto; align-items: start; }
.pricing-grid.pricing-grid--main { grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.pricing-grid--entry .pricing-card, .pricing-grid--main .pricing-card, .pricing-grid--packs .pricing-card { padding: 28px 24px 26px; }
@media (max-width: 768px) {
  .pricing-grid.pricing-grid--entry, .pricing-grid.pricing-grid--main { grid-template-columns: 1fr; max-width: 420px; }
}

/* ======================================
   法務ドキュメント（プライバシーポリシー等）
====================================== */
.legal-doc { max-width: 820px; margin: 0 auto; }
.legal-doc > p { font-size: .92rem; color: var(--c-gray); line-height: 1.95; margin: 0 0 8px; }
.legal-doc h2 { font-size: 1.1rem; font-weight: 800; color: var(--c-dark); margin: 36px 0 12px; padding-left: 12px; border-left: 3px solid var(--c-primary); }
.legal-doc ul { margin: 8px 0; padding-left: 1.4em; }
.legal-doc li { font-size: .92rem; color: var(--c-gray); line-height: 1.9; }
.legal-doc a { color: var(--c-primary); text-decoration: underline; }
.legal-updated { font-size: .85rem; color: var(--c-gray-3); margin-top: 44px; line-height: 1.85; }

/* ======================================
   Scroll Progress Bar
====================================== */

/* ======================================
   Container
====================================== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 40px; }

/* ======================================
   Header
====================================== */
.header {
  position: fixed; top: 0; left: 0; right: 0;
  height: 72px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  z-index: 1000;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.header.scrolled { border-color: var(--c-border); box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; height: 72px; }

.logo {
  display: flex; align-items: center;
  margin-right: auto;
}
.logo img { display: block; height: 32px; width: auto; }

.global-nav ul { display: flex; gap: 32px; align-items: center; }
.global-nav a {
  font-family: var(--font-en);
  font-size: 0.875rem; font-weight: 700;
  color: var(--c-gray); letter-spacing: 0.04em;
  transition: color 0.2s;
  position: relative; padding-bottom: 4px;
}
.global-nav a::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--c-primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.global-nav a:hover { color: var(--c-dark); }
.global-nav a:hover::after, .global-nav a.active::after { transform: scaleX(1); }
.global-nav a.active { color: var(--c-dark); }

/* ===== PCグローバルナビ: ホバー・ドロップダウン ===== */
.nav-has-dropdown { position: relative; }
.nav-has-dropdown::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 5px; height: 5px; margin-left: 7px; margin-top: -3px;
  border-right: 1.6px solid var(--c-gray); border-bottom: 1.6px solid var(--c-gray);
  transform: rotate(45deg);
  transition: transform 0.25s ease, border-color 0.2s ease;
}
.nav-has-dropdown:hover::after,
.nav-has-dropdown:focus-within::after { border-color: var(--c-primary); transform: rotate(225deg); }

.nav-dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  margin-top: 15px; min-width: 234px;
  background: #fff; border: 1px solid var(--c-border); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(10, 14, 20, 0.13);
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1200;
}
/* リンクとパネルの間の透明ブリッジ（li の子なので hover が途切れない） */
.nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -17px; height: 17px; }
.nav-has-dropdown:hover > .nav-dropdown,
.nav-has-dropdown:focus-within > .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown .nav-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 9px;
  font-size: 0.84rem; font-weight: 600; color: var(--c-dark);
  letter-spacing: 0.01em; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-dropdown .nav-dd-item::after { content: none; } /* グローバルナビの下線を無効化 */
.nav-dropdown .nav-dd-item::before {
  content: ""; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-primary); opacity: 0.3;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.nav-dropdown .nav-dd-item:hover { background: rgba(13, 193, 204, 0.08); color: var(--c-primary); }
.nav-dropdown .nav-dd-item:hover::before { opacity: 1; transform: scale(1.4); }

/* 別ページからのアンカー着地はヘッダー分オフセット */
section[id] { scroll-margin-top: 86px; }

.btn-header-cta {
  margin-left: 28px;
  background: var(--c-primary); color: #fff;
  font-size: 0.875rem; font-weight: 700;
  padding: 10px 24px; border-radius: var(--r-full);
  box-shadow: var(--shadow-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-header-cta:hover { background: var(--c-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-primary-lg); }

/* Hamburger */
.hamburger {
  display: none; background: none; border: none;
  padding: 8px; margin-left: 12px;
  flex-direction: column; gap: 5px; cursor: pointer; z-index: 1001; position: relative;
}
.hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--c-dark); border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Mobile Nav: Ocean Light ── */
/* ページ遷移のスライドはサブページ側（subpage.css の body スライドイン）に移行。
   クロスドキュメント View Transitions はブラウザの最善努力で「効いたり効かなかったり」
   になるため不採用。トップ(index)はローディング画面のままで slideは無し。 */

.mobile-nav {
  position: fixed; inset: 0; z-index: 1000;
  --scan-dur: 5.25s; /* scan travel (~4.2s) + ~1s pause before restarting */
  background: #ffffff;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity 0.38s ease, visibility 0.38s;
  overflow: hidden;
}
.mobile-nav.open { opacity: 1; visibility: visible; }

/* ======================================================
   Mobile nav — editorial light + teal scan-line motion
   (Cytus scan mechanic, re-skinned to the HP's brand)
====================================================== */
/* メニュー上部の空に TICKS（ティックス） */
.mobile-nav::before {
  content: ''; display: block; position: absolute;
  top: 13%; right: 7%; width: 92px; height: 92px;
  z-index: 0; pointer-events: none; opacity: .9;
  background: url("../img/common/nav-ticks.png") center / contain no-repeat;
  animation: mnav-ticks-float 8s ease-in-out infinite;
}
@keyframes mnav-ticks-float { 0%,100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-12px); } }
/* ambient teal wash + オービット同心円（Topの世界観） */
.mobile-nav::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 65% at 50% -8%, rgba(13,193,204,.07) 0%, transparent 55%),
    radial-gradient(circle at 80% 15%, transparent calc(112px - 1.2px), rgba(13,193,204,.20) 112px, transparent calc(112px + 1.2px)),
    radial-gradient(circle at 80% 15%, transparent calc(178px - 1.2px), rgba(13,193,204,.13) 178px, transparent calc(178px + 1.2px)),
    radial-gradient(circle at 80% 15%, transparent calc(252px - 1px), rgba(13,193,204,.08) 252px, transparent calc(252px + 1px)),
    radial-gradient(circle at 22% 72%, transparent calc(150px - 1px), rgba(240,77,152,.08) 150px, transparent calc(150px + 1px));
}
/* メニュー下部に山並み（山1＋山2、PNG中央の山を表示） */
.mobile-nav-blob3 {
  display: block; position: absolute; left: 0; right: 0; bottom: 0;
  height: 30%; z-index: 0; pointer-events: none; opacity: .85;
  background:
    url("../img/common/nav-mountain-02.png") center / 100% auto no-repeat,
    url("../img/common/nav-mountain-01.png") center / 100% auto no-repeat;
}

/* Scan line — teal light bar sweeping top → bottom */
.mobile-nav-blob2 {
  display: block; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, #0DC1CC 18%, #0DC1CC 82%, transparent);
  box-shadow: 0 0 16px 3px rgba(13,193,204,.40), 0 0 44px 10px rgba(13,193,204,.14);
  opacity: 0; pointer-events: none;
}
.mobile-nav.open .mobile-nav-blob2 {
  opacity: 1; animation: cytus-scan var(--scan-dur, 4.2s) linear infinite;
}
@keyframes cytus-scan {
  0%     { transform: translateY(0);                 opacity: 1; }
  80%    { transform: translateY(var(--scan-end, 100vh)); opacity: 1; }
  84%    { transform: translateY(var(--scan-end, 100vh)); opacity: 0; } /* fade out at the bottom */
  84.01% { transform: translateY(0);                 opacity: 0; }      /* return to top, hidden */
  100%   { transform: translateY(0);                 opacity: 0; }      /* ~1s pause before next sweep */
}

/* Inner layout */
.mobile-nav-inner {
  position: relative; z-index: 4;
  display: flex; flex-direction: column;
  height: 100%; padding: 0 26px 30px;
}

/* Header */
.mobile-nav-head {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; flex-shrink: 0;
  border-bottom: 1px solid rgba(10,14,20,.10);
}
.mobile-nav-brand { display: block; height: 26px; width: auto; }
.mobile-nav-close {
  width: 40px; height: 40px; cursor: pointer;
  background: none; border: 1px solid rgba(13,193,204,.35); color: var(--c-dark);
  display: flex; align-items: center; justify-content: center;
  transition: color .2s, border-color .2s, transform .25s cubic-bezier(.16,1,.3,1);
}
.mobile-nav-close:active { transform: rotate(90deg); color: var(--c-primary); border-color: var(--c-primary); }

/* Node list */
.planet-grid {
  counter-reset: navidx; position: relative;
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 0;
}
.planet-grid::before {
  content: "INDEX — 04"; align-self: flex-start;
  font-family: var(--font-en); font-size: .62rem; font-weight: 700;
  letter-spacing: .3em; color: var(--c-primary);
  margin: 0 0 18px 40px; opacity: 0;
}
.mobile-nav.open .planet-grid::before { animation: kin-fade .6s .1s ease forwards; }
/* vertical track the nodes sit on */
.planet-grid::after {
  content: ''; position: absolute; left: 12px; top: 44px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(13,193,204,.30) 12%, rgba(13,193,204,.30) 88%, transparent);
}

.planet-item {
  counter-increment: navidx;
  position: relative; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: 2px;
  padding: 22px 0 20px 40px; text-decoration: none; overflow: visible;
  opacity: 0;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
/* node on the track */
.planet-circle {
  display: flex; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: #ffffff; border: 2px solid var(--c-primary);
  z-index: 2;
}
.planet-circle svg { display: none; }
/* expanding hit ring synced to the scan line */
.planet-circle::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--c-primary); opacity: 0;
}
/* top hairline rule */
.planet-item::after {
  content: ''; position: absolute; top: 0; left: 40px; right: 0; height: 1px;
  background: rgba(10,14,20,.12);
}
/* index */
.planet-item::before {
  content: "0" counter(navidx);
  position: absolute; top: 18px; right: 2px;
  font-family: var(--font-en); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; color: var(--c-primary);
}
.planet-item:active { transform: translateX(10px); }

/* JP kicker */
.planet-label {
  font-size: .76rem; font-weight: 700; letter-spacing: .16em;
  color: rgba(10,14,20,.42);
}
/* English node name (big) */
.planet-sublabel {
  position: relative;
  font-family: var(--font-en);
  font-size: clamp(2rem, 12vw, 2.9rem); font-weight: 800;
  line-height: 1; letter-spacing: -.01em; text-transform: uppercase;
  color: var(--c-dark);
}

/* Entrance — quick opacity stagger */
.planet-item:nth-child(1) { --d: .12s; }
.planet-item:nth-child(2) { --d: .22s; }
.planet-item:nth-child(3) { --d: .32s; }
.planet-item:nth-child(4) { --d: .42s; }
.mobile-nav.open .planet-item {
  animation: kin-fade .5s var(--d) ease forwards,
             row-scan var(--scan-dur, 4.2s) linear var(--hit-delay, 0s) infinite;
}
@keyframes kin-fade { to { opacity: 1; } }

/* Scan-synced reactions — per-item --hit-delay set from JS */
.mobile-nav.open .planet-circle {
  animation: node-core var(--scan-dur, 4.2s) linear var(--hit-delay, 0s) infinite;
}
.mobile-nav.open .planet-circle::after {
  animation: node-hit var(--scan-dur, 4.2s) linear var(--hit-delay, 0s) infinite;
}
.mobile-nav.open .planet-sublabel {
  animation: label-hit var(--scan-dur, 4.2s) linear var(--hit-delay, 0s) infinite;
}
@keyframes row-scan {
  0%  { background: rgba(13,193,204,.10); }
  16% { background: transparent; }
  16.01%, 100% { background: transparent; }
}
@keyframes node-core {
  0% { background: var(--c-primary); box-shadow: 0 0 16px 4px rgba(13,193,204,.55); }
  12% { background: #ffffff; box-shadow: 0 0 0 0 rgba(13,193,204,0); }
  12.01%, 100% { background: #ffffff; box-shadow: none; }
}
@keyframes node-hit {
  0% { transform: scale(.55); opacity: .7; }
  14% { transform: scale(2.9); opacity: 0; }
  14.01%, 100% { opacity: 0; }
}
@keyframes label-hit {
  0% { color: var(--c-primary); }
  18% { color: var(--c-dark); }
  18.01%, 100% { color: var(--c-dark); }
}


/* ---- Click → cinematic "shadow converge" then navigate ---- */
.planet-item.is-target { z-index: 10; }
/* freeze node pulses; the scan line holds its position, then slides left with the menu */
.mobile-nav.is-leaving .planet-circle,
.mobile-nav.is-leaving .planet-circle::after { animation-play-state: paused; }
.mobile-nav.is-leaving .mobile-nav-blob2 {
  animation: line-leave .62s cubic-bezier(.5,0,.2,1) 1.85s both;
}
@keyframes line-leave {
  0%   { transform: translate(0,     var(--scan-frozen-y, 0px)); opacity: 1; }
  18%  { opacity: 1; }
  100% { transform: translate(-105%, var(--scan-frozen-y, 0px)); opacity: 0; }
}
/* after the converge + ~1s hold, the menu slides straight off to the left (no zoom) */
.mobile-nav.is-leaving .mobile-nav-inner {
  animation: leave-zoom .62s cubic-bezier(.5,0,.2,1) 1.85s forwards;
}
@keyframes leave-zoom {
  0%   { transform: translateX(0);     opacity: 1; }
  18%  { opacity: 1; }
  100% { transform: translateX(-105%); opacity: 0; }
}
/* the non-clicked items recede */
.mobile-nav.is-leaving .planet-item:not(.is-target) {
  animation: leave-fade .4s ease forwards;
}
@keyframes leave-fade { to { opacity: 0; transform: translateX(-10px); } }
/* clicked word: hold, pop and go teal */
.mobile-nav.is-leaving .planet-item.is-target { animation: none; opacity: 1; }
.mobile-nav.is-leaving .planet-item.is-target .planet-label { animation: none; }
.mobile-nav.is-leaving .planet-item.is-target .planet-sublabel {
  animation: target-pop .85s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes target-pop {
  0%   { transform: scale(1);    color: var(--c-dark);    text-shadow: 0 0 0 rgba(13,193,204,0); }
  33%  { transform: scale(1.06); color: var(--c-primary); }
  100% { transform: scale(1.16); color: var(--c-primary); text-shadow: 0 0 20px rgba(13,193,204,.38); }
}
/* big soft shadow that converges into the word */
.mobile-nav.is-leaving .planet-item.is-target .planet-sublabel::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; white-space: nowrap;
  transform-origin: left center; pointer-events: none;
  color: rgba(10,14,20,.55);
  animation: shadow-converge .85s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes shadow-converge {
  0%   { transform: scale(2.9); filter: blur(22px); opacity: .6; }
  72%  { opacity: .45; }
  100% { transform: scale(1);   filter: blur(0);    opacity: 0; }
}

/* CTA Footer */
.mobile-nav-footer {
  flex-shrink: 0; padding-top: 16px; border-top: 1px solid rgba(10,14,20,.10);
  opacity: 0;
}
.mobile-nav-footer::before {
  content: "CREATIVE DEVELOPMENT — TINEEDS";
  display: block; margin-bottom: 14px;
  font-family: var(--font-en); font-size: .56rem; font-weight: 700;
  letter-spacing: .26em; color: rgba(10,14,20,.4);
}
.mobile-nav.open .mobile-nav-footer { animation: kin-fade .5s .52s ease forwards; }

.mobile-nav-cta {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 18px 22px; border-radius: 12px;
  background: var(--c-primary);
  color: #fff !important; font-weight: 800; font-size: 1.05rem;
  text-decoration: none; letter-spacing: .03em;
  box-shadow: 0 8px 22px rgba(13,193,204,.28);
  transition: background .2s, box-shadow .2s, transform .15s;
}
.mobile-nav-cta:active { transform: scale(.98); background: var(--c-primary-dark, #0aabba); box-shadow: 0 4px 14px rgba(13,193,204,.3); }

/* ======================================
   Buttons
====================================== */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--c-primary); color: #fff;
  font-weight: 800; font-size: 1rem;
  padding: 16px 36px; border-radius: var(--r-full);
  box-shadow: var(--shadow-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary:hover { background: var(--c-primary-dark); transform: translateY(-3px); box-shadow: var(--shadow-primary-lg); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--c-dark);
  font-weight: 700; font-size: 1rem;
  padding: 15px 35px; border-radius: var(--r-full);
  border: 2px solid var(--c-border);
  transition: all 0.3s;
}
.btn-secondary:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* テキストリンク型CTA（詳細セクションの控えめな導線。塗りは1画面1つに集約） */
.btn-text {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--c-primary); font-weight: 700; font-size: 0.95rem;
  padding: 6px 2px; background: none; border: none;
  transition: gap 0.2s ease, color 0.2s ease;
}
.btn-text svg { transition: transform 0.2s ease; }
.btn-text:hover { color: var(--c-primary-dark); gap: 11px; }
.btn-text:hover svg { transform: translateX(3px); }

.btn-on-dark {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--c-dark);
  font-weight: 800; font-size: 1rem;
  padding: 16px 36px; border-radius: var(--r-full);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.btn-on-dark:hover { background: var(--c-yellow); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); }

/* ======================================
   Section Commons
====================================== */
section { padding: 100px 0; }
.section-bg-alt { background: var(--c-bg-alt); }
.section-bg-primary { background: linear-gradient(135deg, #0DC1CC 0%, #079AB5 100%); }

.section-header { text-align: center; margin-bottom: 64px; }

.label {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--c-primary); background: var(--c-primary-light);
  padding: 6px 16px; border-radius: var(--r-full);
  margin-bottom: 16px;
}
.label-white { background: rgba(255,255,255,0.2); color: #fff; }

.section-title {
  font-family: var(--font-en);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900; color: var(--c-dark);
  letter-spacing: 0.04em; line-height: 1.15;
  margin-bottom: 16px;
}
.title-white { color: #fff; }
.text-primary { color: var(--c-primary); }

.section-desc { font-size: 1.05rem; color: var(--c-gray); font-weight: 500; }
.desc-white { color: rgba(255,255,255,0.85); }

/* Reveal animation */
.reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.active { opacity: 1; transform: translateY(0); }

.scroll-hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-en); font-size: 0.65rem; font-weight: 700;
  color: var(--c-gray-3); letter-spacing: 0.12em;
  animation: fade-up 1s 1s ease-out both;
}
.scroll-line {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, var(--c-gray-3), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}

@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scroll-pulse {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.flow-step-num {
  font-family: var(--font-en); font-size: 3rem; font-weight: 900;
  color: rgba(255,255,255,0.25); line-height: 1; margin-bottom: 20px;
}
.flow-arrow {
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.35); font-size: 1.6rem;
  padding: 0 2px; flex-shrink: 0;
}

/* ======================================
   FAQ
====================================== */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--c-border); }
.faq-question {
  width: 100%; background: none; border: none;
  padding: 24px 0; display: flex; justify-content: space-between; align-items: center;
  font-size: 1rem; font-weight: 700; color: var(--c-dark);
  text-align: left; gap: 16px; transition: color 0.2s;
}
.faq-question:hover { color: var(--c-primary); }
.faq-icon {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-primary-light); color: var(--c-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
}
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--c-primary); color: #fff; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-answer p { padding-bottom: 24px; font-size: 0.95rem; color: var(--c-gray); font-weight: 500; line-height: 1.9; }
.faq-item.open .faq-answer { max-height: 400px; }

/* ======================================
   CONTACT
====================================== */
.contact-card {
  background: #fff; border-radius: var(--r-xl);
  padding: 60px 80px; box-shadow: var(--shadow-lg);
  max-width: 800px; margin: 0 auto;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { margin-bottom: 24px; }
.form-group label { display: block; font-weight: 700; font-size: 0.875rem; color: var(--c-dark); margin-bottom: 8px; }
.required {
  background: var(--c-pink); color: #fff;
  font-size: 0.68rem; font-weight: 700;
  padding: 2px 8px; border-radius: 4px; margin-left: 8px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: 14px 16px;
  border: 2px solid var(--c-border); border-radius: var(--r-md);
  font-size: 0.95rem; font-family: var(--font-ja);
  background: var(--c-bg-alt); color: var(--c-dark);
  transition: all 0.3s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none; border-color: var(--c-primary);
  background: #fff; box-shadow: 0 0 0 4px var(--c-primary-light);
}
.select-wrap { position: relative; }
.select-wrap::after {
  content: "▼"; position: absolute;
  right: 16px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--c-gray-3); font-size: 0.72rem;
}
.form-group select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.form-submit { text-align: center; margin-top: 8px; }
.btn-submit {
  background: var(--c-primary); color: #fff; border: none;
  padding: 18px 64px; border-radius: var(--r-full);
  font-size: 1.1rem; font-weight: 800;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-submit:hover { background: var(--c-dark); transform: translateY(-3px); box-shadow: var(--shadow-xl); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: var(--shadow-primary); }
.form-error { display: block; min-height: 1.1em; margin-top: 6px; font-size: 0.82rem; font-weight: 700; color: var(--c-pink); }
.form-group input.is-invalid,
.form-group textarea.is-invalid { border-color: var(--c-pink); background: #fff; }
.form-group input.is-invalid:focus,
.form-group textarea.is-invalid:focus { box-shadow: 0 0 0 4px rgba(240, 77, 152, 0.16); }
/* 送信成功＝ピンクの「送信済み」で固定（二重送信防止） */
.btn-submit--done, .btn-submit--done:disabled { background: var(--c-pink); color: #fff; opacity: 1; cursor: default; box-shadow: var(--shadow-primary); transform: none; }
.form-status {
  margin: 0 0 20px; padding: 14px 18px; border-radius: var(--r-md);
  font-weight: 700; font-size: 0.95rem; text-align: center;
  background: var(--c-primary-light); color: var(--c-primary-dark);
  border: 1px solid var(--c-primary);
}
.form-status[hidden] { display: none; }

/* 問い合わせ: 興味サービス選択・希望連絡方法・見積もり内容（aiteam議論#1） */
.contact-services, .contact-method { border: none; padding: 0; margin: 0 0 24px; min-width: 0; }
.contact-services legend, .contact-method legend { padding: 0; font-weight: 700; font-size: 0.875rem; color: var(--c-dark); margin-bottom: 8px; }
.form-optional { font-weight: 600; font-size: 0.72rem; color: var(--c-gray-3); margin-left: 6px; }
.contact-svc-opts, .contact-method-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-svc-opt, .contact-method-opt {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; min-height: 44px;
  border: 2px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-bg-alt); color: var(--c-dark);
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  position: relative;
}
.contact-svc-opt:hover, .contact-method-opt:hover { border-color: var(--c-primary); }
.contact-svc-opt input, .contact-method-opt input { accent-color: var(--c-primary); margin: 0; cursor: pointer; }
/* チェックボックス: teal箱に白チェックマーク（簡易見積もりと統一） */
.contact-svc-opt input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; flex: none; padding: 0; border: 2px solid var(--c-border); border-radius: 5px; background: #fff; position: relative; transition: background .15s, border-color .15s; }
.contact-svc-opt input[type="checkbox"]:checked { background: var(--c-primary); border-color: var(--c-primary); }
.contact-svc-opt input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* ラジオ: 中心の黒丸を消し、選択はチップ外枠で表現 */
.contact-method-opt input[type="radio"] { -webkit-appearance: none; appearance: none; width: 0; height: 0; padding: 0; border: 0; margin: 0; opacity: 0; position: absolute; pointer-events: none; }
.contact-svc-opt:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-light); color: var(--c-primary-dark); }
.contact-method-opt:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-light); color: var(--c-primary-dark); }
/* キーボード操作時にチップ単位でフォーカスを可視化（ゼロサイズのradio/checkboxに代わって） */
.contact-svc-opt:has(input:focus-visible), .contact-method-opt:has(input:focus-visible) { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.contact-estimate label { display: block; }
.contact-est-tag { font-weight: 600; font-size: 0.72rem; color: var(--c-primary-dark); background: var(--c-primary-light); padding: 2px 8px; border-radius: 4px; margin-left: 6px; }
.contact-estimate textarea[readonly] { background: var(--c-bg-alt); color: var(--c-gray-3); cursor: default; font-size: 0.9rem; line-height: 1.8; white-space: pre-wrap; }
.contact-estimate textarea[readonly]:focus { border-color: var(--c-border); background: var(--c-bg-alt); box-shadow: none; }
.contact-est-note { margin: 8px 0 0; font-size: 0.78rem; color: var(--c-gray-3); }
.contact-estimate[hidden] { display: none; }

/* ======================================
   FOOTER
====================================== */
/* ===== 共通フッター（全ページ統一・旧 index home-footer を全ページ共通化） ===== */
.home-footer { position: relative; overflow: hidden; background: var(--c-dark); color: rgba(255,255,255,.88); }
.home-footer::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(95% 60% at 50% -18%, rgba(13,193,204,.30), rgba(13,193,204,0) 62%), linear-gradient(118deg, transparent 30%, rgba(255,255,255,.07) 43%, transparent 50%), linear-gradient(128deg, transparent 56%, rgba(255,255,255,.05) 67%, transparent 73%); }
.home-footer-top, .home-footer-bottom { position: relative; z-index: 1; }
.home-footer-top { padding: 64px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.home-footer-top-inner { display: grid; grid-template-columns: 280px 1fr; gap: 64px; }
.home-footer-logo { display: block; height: 30px; width: auto; margin-bottom: 8px; }
.home-footer-tagline { font-size: .85rem; color: rgba(255,255,255,.95); margin-bottom: 14px; }
.home-footer-desc { font-size: .8rem; line-height: 1.8; color: rgba(255,255,255,.82); font-weight: 500; }
.home-footer-nav-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.home-footer-nav-col { display: flex; flex-direction: column; gap: 10px; }
.home-footer-nav-head { font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.75); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
/* メニュー(ドロップダウン)ホバー風: ●マーカー＋teal */
.home-footer-nav-col a { position: relative; padding-left: 14px; font-size: .85rem; color: rgba(255,255,255,.92); text-decoration: none; transition: color .2s; }
.home-footer-nav-col a::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.3); transform: translateY(-50%); transition: background .2s, transform .2s; }
.home-footer-nav-col a:hover { color: var(--c-primary); }
.home-footer-nav-col a:hover::before { background: var(--c-primary); transform: translateY(-50%) scale(1.5); }
.home-footer-bottom { padding: 20px 0; }
.home-footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; }
.home-footer-bottom p { font-size: .75rem; color: rgba(255,255,255,.62); }
.home-footer-bottom-links a { font-size: .75rem; color: rgba(255,255,255,.62); text-decoration: none; transition: color .2s; }
.home-footer-bottom-links a:hover { color: rgba(255,255,255,.85); }
@media (max-width: 1024px) { .home-footer-top-inner { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 768px) {
  .home-footer-nav-group { grid-template-columns: 1fr 1fr; gap: 24px; }
  .home-footer-logo { margin-inline: auto; }
  .home-footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* モダンな「トップへ戻る」ボタン */
.scroll-top-btn {
  position: fixed; bottom: 28px; right: 28px;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.82); color: var(--c-primary);
  border: 1px solid rgba(13,193,204,.25);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(10,14,20,.12), 0 2px 6px rgba(10,14,20,.06);
  z-index: 900; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), background .25s ease, color .25s ease, box-shadow .25s ease;
}
.scroll-top-btn svg { width: 20px; height: 20px; }
.scroll-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.scroll-top-btn:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); box-shadow: 0 12px 30px rgba(13,193,204,.4); transform: translateY(-3px) scale(1); }
.scroll-top-btn:active { transform: translateY(0) scale(.94); }

/* ======================================
   Responsive — Tablet
====================================== */
@media (max-width: 1024px) {
  .flow-arrow { display: none; }
  .contact-card { padding: 48px; }
}

/* ======================================
   Responsive — Mobile
====================================== */
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  section { padding: 72px 0; }

  .hamburger { display: flex; }
  .global-nav, .btn-header-cta { display: none; }

  .form-row { grid-template-columns: 1fr; }
  .contact-card { padding: 32px 20px; }


  .section-title { font-size: 1.8rem; }


  .scroll-top-btn { right: 18px; bottom: 20px; width: 44px; height: 44px; }
}
.industry-tag {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: #f0fafa;
  border: 1px solid #b2e8e8;
  color: #1a7a7a;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* FAQ新規問ハイライト */

.industry-parallax-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.industry-parallax-word {
  position: absolute;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  will-change: transform;
  /* transformはJSで管理するためrotateはstyle属性で設定 */
}

/* 業種アコーディオン（カード内） */
.industry-accordion {
  margin-top: 1rem;
  border-top: 1px solid var(--c-border);
  padding-top: 0.75rem;
}
.industry-accordion-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  padding: 0.5rem 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-primary);
  cursor: pointer;
  text-align: left;
  gap: 8px;
  transition: opacity 0.2s;
}
.industry-accordion-btn:hover { opacity: 0.75; }
.industry-accordion-icon {
  font-size: 1.1rem;
  font-weight: 900;
  flex-shrink: 0;
  transition: transform 0.3s;
}
.industry-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.industry-accordion-body.open {
  max-height: 1000px;
}
.industry-tags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.75rem 0 0.25rem;
}
.industry-tags-grid .industry-tag {
  background: #f0fafa;
  border: 1px solid #b2e8e8;
  color: #1a7a7a;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
}

/* WHYセクション：パララックス用 */
.section-why {
  position: relative;
  overflow: hidden;
}
.section-why .container {
  position: relative;
  z-index: 1;
}
.section-why .industry-parallax-layer {
  z-index: 0;
}

@media (max-width: 768px) {
}
@keyframes floatCircle {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(12px, -16px) scale(1.05); }
  66%       { transform: translate(-8px, 10px) scale(0.97); }
}

/* WHY：業種文字をセクション全体に均等配置 */
.industry-parallax-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
/* JS側で位置を再計算するので、CSS上は何もしない */

@media (max-width: 768px) {
}

/* ========================================
   言語切り替えドロップダウン
======================================== */
.lang-switcher {
  position: relative;
  margin-right: 8px;
}
.lang-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1.5px solid var(--c-border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--c-dark);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  white-space: nowrap;
}
.lang-btn:hover {
  border-color: var(--c-primary);
  background: rgba(13,193,204,.06);
}
.lang-icon { display: inline-flex; align-items: center; color: var(--c-gray-2, #4b5563); }
.lang-icon svg { width: 16px; height: 16px; display: block; }
.lang-flag { display: inline-block; width: 18px; height: 12px; vertical-align: -2px; margin-right: 5px; flex-shrink: 0; }
.lang-flag svg { width: 100%; height: 100%; display: block; border-radius: 2px; }
.lang-arrow {
  font-size: .65rem;
  opacity: .6;
  transition: transform .2s;
}
.lang-btn[aria-expanded="true"] .lang-arrow {
  transform: rotate(180deg);
}
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  list-style: none;
  padding: 6px;
  min-width: 130px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 200;
}
.lang-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-option {
  width: 100%;
  background: none;
  border: none;
  padding: 9px 14px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-gray);
  cursor: pointer;
  border-radius: var(--r-md);
  text-align: left;
  transition: background .15s, color .15s;
}
.lang-option:hover { background: var(--c-bg-alt); color: var(--c-dark); }
.lang-option.active { color: var(--c-primary); background: rgba(13,193,204,.08); }

@media (max-width: 768px) {
  .lang-switcher { margin-right: 4px; }
  .lang-btn { padding: 5px 10px; font-size: .72rem; }
  .lang-current { display: none; }
}

/* ページ遷移のスライドは subpage.css（サブページ専用CSS）の body スライドインに実装。
   旧JS方式（page-entering/page-leaving＋pageSlideIn/Out）とクロスドキュメントVTは
   いずれもチラつき/不安定のため撤去した。トップ(index)はローディング画面。 */

/* ========================================
   リッチアイコン：ふわっと浮遊＋ホバーで“ぽよん”
======================================== */
.rich-icon {
  transform-origin: center;
  animation: richFloat 4.5s ease-in-out infinite;
  will-change: transform;
}
/* カードごとに少しずらして自然に */
.home-srv-card:nth-child(2) .rich-icon { animation-delay: .6s; }
.home-srv-card:nth-child(3) .rich-icon { animation-delay: 1.2s; }
.home-srv-card:nth-child(4) .rich-icon { animation-delay: 1.8s; }
@keyframes richFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-5px) rotate(-1.5deg); }
}
/* ホバーで弾むように拡大 */
.home-srv-card:hover .rich-icon {
  animation: richPop .55s cubic-bezier(.34,1.8,.5,1) both;
}
@keyframes richPop {
  0%   { transform: scale(1) rotate(0deg); }
  35%  { transform: scale(1.18) rotate(-7deg); }
  65%  { transform: scale(1.12) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ======================================================
   フェーズ1: 未公開サービス（受託開発・DX伴走支援・補助金活用）の非活性表示
   ※フェーズ2で解除予定。クラスを外せば復帰。
====================================================== */
.is-phase1-off { opacity: .4 !important; filter: grayscale(1); pointer-events: none !important; cursor: default !important; }
.is-phase1-hidden { display: none !important; }