@charset "UTF-8";
/* ============================================================
   style.css — スターター基盤
   構成: 1.トークン → 2.リセット/ベース → 3.レイアウト
        → 4.コンポーネント → 5.モーション → 6.停止ポリシー
   触り方は TEMPLATE-GUIDE.md 参照。トークン以外の削除は慎重に。
   ============================================================ */

/* ---------- 1. トークン(案件ごとに必ず引き直す) ---------- */
/* 未来ビジネス村(うるま市石川伊波): 2.スイス/グリッド × 5.クラフト/温もり 混成
   「区画が並ぶ村」を罫線グリッドで、地域の温もりをテラコッタで表現する */
:root {
  /* 色 */
  --color-bg: #FAF7F0;          /* 地: ウォームな生成り */
  --color-surface: #ffffff;     /* 面(カード・フォーム) */
  --color-text: #1A2333;        /* 本文: 紺墨(信頼) */
  --color-muted: #5B6472;       /* 補助テキスト */
  --color-accent: #24582F;      /* 主張色: 公式ロゴと同じ緑 */
  --color-accent-ink: #ffffff;  /* accent上の文字色 */
  --color-navy: #17301E;        /* 第2アクセント(深緑): バナー・バッジ。公式サイトの濃緑帯に合わせる */
  --color-line: #CFDDCC;        /* 罫線(緑がかったグレー) */
  --color-line-strong: #1A2333; /* グリッド罫線(強) */

  /* タイポ */
  --font-display: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  /* 型: 8px系。値を変えても系は守る */
  --space: 8px;
  --section-pad: clamp(40px, 5vw, 64px);
  --hero-pad: clamp(69px, 12vw, 145px); /* ヒーローのみ元の空間バランスを維持(section-padとは独立) */
  --container: 1120px;
  --container-narrow: 760px;
  --radius: 3px;

  /* 階層: z-indexは必ずこの変数経由 */
  --z-header: 100;
  --z-nav: 200;
  --z-modal: 1000;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.8s;
}

/* ---------- 2. リセット/ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.9;                 /* 日本語本文の床 */
  font-size: 19px;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;          /* 長いURL・英単語のはみ出し事故防止 */
}

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

a { color: inherit; }
a:hover { opacity: 0.7; transition: opacity 0.3s; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.4;                 /* 見出しは本文より詰める */
  letter-spacing: 0.02em;
}

/* ---------- 3. レイアウト ---------- */
.container { width: min(var(--container), 100% - 48px); margin-inline: auto; }
.container--narrow { width: min(var(--container-narrow), 100% - 48px); margin-inline: auto; }

.section { padding-block: var(--section-pad); }
.section--tight { padding-block: calc(var(--section-pad) * 0.6); }

/* セクション見出しの型(シグネチャーに差し替える前提の仮デザイン) */
.section-head { margin-bottom: calc(var(--space) * 7); }
.section-head__en {
  display: block;
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: calc(var(--space) * 2);
}
.section-head__title { font-size: clamp(31px, 4.5vw, 48px); }
.br-sp { display: none; }  /* スマホでだけ改行したい箇所に付ける(PC/タブレットでは無視) */
@media (max-width: 767px) {
  /* SPは327px前後しか横幅がなく、28pxだと13〜14字の見出しが中途半端な位置で折り返すため縮小する */
  .section-head__title { font-size: 27px; }
  .br-sp { display: inline; }
}

/* ---------- 4. コンポーネント ---------- */

/* ヘッダー */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px clamp(23px, 4vw, 52px);
  transition: background 0.4s, box-shadow 0.4s;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--color-line);
}
/* ブランドロックアップ(画像に頼らずテキスト+印で組む。「貸」は円で囲まず大判の朱印文字として左に置く) */
/* 「貸」を3行(一般社団法人/未来ビジネス村/仕事に遊びに)の縦中央に、他2行はテキスト列と左端を揃える */
.brand-lockup { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; text-decoration: none; }
.brand-lockup__row { display: contents; }
.brand-lockup__text { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; }
.brand-lockup__sub { font-size: 13px; letter-spacing: 0.08em; opacity: 0.85; }
.brand-lockup__stamp {
  grid-column: 1; grid-row: 1 / 3; align-self: center;
  flex-shrink: 0; display: block;
  color: red; font-weight: 700; font-family: var(--font-display); line-height: 0.85;
}
.brand-lockup__main { font-family: var(--font-display); font-weight: 700; white-space: nowrap; line-height: 1; }
.brand-lockup__tagline { grid-column: 2; grid-row: 2; margin-top: 3px; font-size: 14px; }
.brand-lockup__tagline .accent-red { color: red; }

.site-header__logo { text-decoration: none; }
.site-header__logo .brand-lockup__sub { color: var(--color-text); }
.site-header__logo .brand-lockup__stamp { font-size: 42px; }
.site-header__logo .brand-lockup__main { font-size: 23px; color: var(--color-text); }
.site-header__logo .brand-lockup__tagline { color: var(--color-muted); }
.has-hero-video .site-header:not(.is-scrolled) .site-header__logo .brand-lockup__sub,
.has-hero-video .site-header:not(.is-scrolled) .site-header__logo .brand-lockup__main {
  color: #fff;
}
.has-hero-video .site-header:not(.is-scrolled) .site-header__logo .brand-lockup__tagline {
  color: #E4E8F0;
}

.global-nav ul { display: flex; gap: calc(var(--space) * 4); list-style: none; padding: 0; }
.global-nav a { text-decoration: none; font-size: 17px; letter-spacing: 0.08em; }
.global-nav a[aria-current="page"] {
  color: var(--color-accent);
  border-bottom: 1px solid currentColor;
}

/* ハンバーガー(SP) */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;           /* タップ領域44px確保 */
  background: none; border: none; cursor: pointer;
  position: relative; z-index: calc(var(--z-nav) + 1);
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; margin: 5px auto;
  background: var(--color-text); transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 767px) {
  .nav-toggle { display: block; }
  .global-nav {
    position: fixed; inset: 0; z-index: var(--z-nav);
    background: var(--color-bg);
    display: grid; place-content: center;
    opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s;
  }
  .global-nav.is-open { opacity: 1; visibility: visible; }
  /* チャットの吹き出しボタンがz-index: var(--z-modal)でナビより上に浮いてしまうため、メニュー表示中は隠す */
  body.nav-open .ai-chat__toggle, body.nav-open .ai-chat__panel, body.nav-open .motion-stop { display: none; }
  .global-nav ul { flex-direction: column; text-align: center; gap: calc(var(--space) * 4); }
  .global-nav a { font-size: 23px; }
  /* ヒーロー動画ページでメニューを開いた時、白文字ルールが勝ってクリーム背景に白文字で見えなくなるのを防ぐ */
  .global-nav.is-open a { color: var(--color-text) !important; }
  .nav-toggle[aria-expanded="true"] span { background: var(--color-text) !important; }
}

/* ヒーロー(トップ・即答型×動画背景): 村の俯瞰CGループを全面表示し、文字は明色で重ねる */
.hero--video {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--hero-pad) * 1.1) 0 calc(var(--space) * 10);
  overflow: hidden;
  background: var(--color-navy); /* 動画読み込み前のフォールバック地色 */
}
@media (max-width: 767px) {
  /* SPは固定ヘッダーの高さがsection-padの最小値(64px)を超えるため、見出しと重ならないよう別途確保する */
  .hero--video { padding-top: 130px; }
}
.hero__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* AI動画生成ツールの透かしマーク(右下)対策: 左を軸に拡大して右側を画面外に切り落とす */
.hero__video--crop-right { transform: scale(1.15); transform-origin: left center; }
.hero__scrim {
  /* 動画本来の色を保つため、緑ブランドカラー(--color-navy)ではなくニュートラルな黒で暗幕をかける */
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 16%),
    linear-gradient(100deg,
      rgba(0,0,0,0.80) 0%,
      rgba(0,0,0,0.52) 42%,
      rgba(0,0,0,0.12) 75%);
}
/* ヘッダーがスクロール前は動画に重なるため、明色(白ロゴ)に切り替える(スクロール後は通常配色に戻る) */
.has-hero-video .site-header:not(.is-scrolled) .global-nav a {
  color: #fff;
}
.has-hero-video .site-header:not(.is-scrolled) .nav-toggle span {
  background: #fff;
}
.hero--video .container { position: relative; z-index: 2; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; margin-bottom: calc(var(--space) * 3);
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.5);
  backdrop-filter: blur(4px);
  border-radius: 999px; font-size: 15px; letter-spacing: 0.1em; color: #fff;
}
.hero__badge::before { content: "📍"; font-size: 15px; }
.hero__title {
  font-weight: 800;
  font-size: clamp(44px, 6.4vw, 81px);
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.hero__title .accent { color: #8FE0B0; }
.hero__lead {
  margin-top: calc(var(--space) * 4); max-width: 38em; font-size: 19px;
  color: #E4E8F0;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: calc(var(--space) * 5); }
/* ghost系ボタン: 既定は明るい背景(白カード等)向け。ヒーロー(動画背景)だけ別途白ベースに上書き */
.button.button--ghost {
  background: transparent; color: var(--color-accent); border-color: var(--color-accent);
}
.button.button--ghost:hover { background: var(--color-accent); color: var(--color-accent-ink); opacity: 1; }
.hero__ctas .button.button--ghost {
  background: transparent; color: #fff; border-color: rgba(255,255,255,0.6);
}
.hero__ctas .button.button--ghost:hover { background: #fff; color: var(--color-navy); opacity: 1; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: calc(var(--space) * 6);
  font-size: 16px; color: #C4CBDA;
}
.hero__meta strong { color: #fff; font-family: var(--font-display); }

/* 共感カード(お悩み) */
.pain-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--color-line); border: 1px solid var(--color-line);
}
.pain-card { background: var(--color-bg); padding: 28px 20px; }
.pain-card__mark { font-family: var(--font-display); font-weight: 800; color: var(--color-accent); font-size: 16px; }
.pain-card p { margin-top: 10px; font-size: 18px; }
@media (max-width: 900px) { .pain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pain-grid { grid-template-columns: 1fr; } }

/* 理念 */
.philosophy__catch {
  text-align: center; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 25px); margin-top: calc(var(--space) * 4);
}
.philosophy__body {
  margin-top: calc(var(--space) * 6); text-align: center;
  color: var(--color-muted); line-height: 1.9;
}
.philosophy__body p { margin-top: calc(var(--space) * 4); }
.philosophy__body p:first-child { margin-top: 0; }

/* トップ: アクセスマップ画像(PC/SPで出し分け) */
.access-map-hero {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); border: 1px solid var(--color-line);
  aspect-ratio: 1690 / 941;
}
@media (max-width: 680px) {
  .access-map-hero { aspect-ratio: 941 / 1512; }
}

/* アクセスマップ下: 石川ICから未来ビジネス村までのルートが一筆書きで描かれる演出
   labels(上段: 左右に文言)→svg(中段: 直線)→badge(下段: 中央のバッジ)を縦に積む。
   絶対配置でSVG座標と文字位置を手動で合わせない(ズレ・重なりの元)ことで崩れを防ぐ */
.route-strip { margin-top: calc(var(--space) * 4); }
.route-strip__labels { display: flex; justify-content: space-between; gap: 12px; padding-right: 2%; }
.route-strip__label { font-size: 14px; font-weight: 700; color: var(--color-text); white-space: nowrap; }
.route-strip__svg { display: block; width: 100%; height: 32px; overflow: visible; margin-top: 6px; }
.route-strip__path { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.route-strip__pin { transform-origin: 780px 20px; transform: scale(0); transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1) 1.5s; }
.route-strip.is-drawn .route-strip__pin { transform: scale(1); }
.route-strip__badge {
  display: table; margin: 10px auto 0;
  background: var(--color-surface); border: 1px solid var(--color-line-strong);
  border-radius: 999px; padding: 4px 14px; font-size: 13px; font-weight: 700; color: var(--color-accent);
  opacity: 0; transition: opacity 0.4s ease 1.4s;
}
.route-strip.is-drawn .route-strip__badge { opacity: 1; }
@media (max-width: 600px) {
  .route-strip__label { font-size: 12px; }
}

/* 交互2カラム(サービス紹介) */
.feature-row {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(27px, 5vw, 69px);
  align-items: center;
  padding-block: calc(var(--space) * 6);
  border-top: 1px solid var(--color-line);
}
.feature-row:last-child { border-bottom: 1px solid var(--color-line); }
.feature-row__num {
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  color: var(--color-navy); letter-spacing: 0.05em;
}
.feature-row__title { font-size: clamp(25px, 3vw, 33px); margin-top: 8px; }
.feature-row__body { order: 2; }
.feature-row__visual {
  order: 1;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius); aspect-ratio: 4/3; overflow: hidden;
}
.feature-row__visual img, .feature-row__visual video { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-row.is-reverse .feature-row__body { order: 1; }
.feature-row.is-reverse .feature-row__visual { order: 2; }
.feature-row ul { margin-top: 16px; padding-left: 1.2em; color: var(--color-muted); font-size: 17px; line-height: 1.9; }
@media (max-width: 767px) {
  .feature-row { grid-template-columns: 1fr; }
  .feature-row__body, .feature-row.is-reverse .feature-row__body { order: 2; }
  .feature-row__visual, .feature-row.is-reverse .feature-row__visual { order: 1; }
}

/* CTAバンド */
.cta-band { background: var(--color-navy); color: #EDEFF3; }
.cta-band .section-head__en { color: #8FA0C2; }
.cta-band .button { border-color: var(--color-accent); }
.cta-band p { color: #C4CBDA; }

/* 選ばれる理由: カードで区切らず、編集的な横並びリストで見せる */
.reason-list { margin-top: calc(var(--space) * 6); max-width: var(--container-narrow); margin-inline: auto; }
.reason-item {
  display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: start;
  padding-block: calc(var(--space) * 4); border-top: 1px solid var(--color-line);
}
.reason-item:last-child { border-bottom: 1px solid var(--color-line); }
.reason-item__no {
  font-family: var(--font-display); font-weight: 800; font-size: 33px;
  color: var(--color-line-strong); opacity: 0.25; line-height: 1;
}
.reason-item__body h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; }
.reason-item__body p { margin-top: 8px; font-size: 17px; color: var(--color-muted); line-height: 1.9; }
@media (max-width: 600px) {
  .reason-item { grid-template-columns: 36px 1fr; gap: 14px; padding-block: calc(var(--space) * 3); }
  .reason-item__no { font-size: 25px; }
}

/* シグネチャー: 入居企業の業種内訳(実データの棒グラフ) */
.industry-bars { display: grid; gap: 14px; margin-top: calc(var(--space) * 6); text-align: left; }
.industry-bar { display: grid; grid-template-columns: 9.5em 1fr 3em; align-items: center; gap: 14px; }
.industry-bar__label { font-size: 16px; }
.industry-bar__track { height: 10px; background: var(--color-line); border-radius: 999px; overflow: hidden; }
.industry-bar__fill {
  display: block; height: 100%; width: var(--pct); background: var(--color-accent);
  border-radius: 999px; transform-origin: left; transform: scaleX(0);
  transition: transform 0.9s var(--ease-out);
}
.is-inview .industry-bar__fill { transform: scaleX(1); }
.industry-bar__n { font-family: var(--font-display); font-weight: 700; font-size: 16px; text-align: right; }
.plot-map__note { margin-top: 20px; font-size: 15px; color: var(--color-muted); }
@media (max-width: 600px) {
  .industry-bar { grid-template-columns: 7.5em 1fr 2.6em; gap: 10px; }
  .industry-bar__label { font-size: 15px; }
}

/* その他の活用法: タグリンク */
.tag-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: calc(var(--space) * 4); }
.tag-card {
  display: inline-block; padding: 10px 18px;
  background: var(--color-bg); border: 1px solid var(--color-line-strong);
  border-radius: 999px; font-size: 16px; font-weight: 700; text-decoration: none;
  color: var(--tag-c, var(--color-text));
  transition: background 0.25s, border-color 0.25s, transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s;
}
.tag-card:hover, .tag-card:focus-visible {
  background: color-mix(in srgb, var(--tag-c, var(--color-navy)) 10%, var(--color-surface));
  border-color: var(--tag-c, var(--color-navy));
  opacity: 1; transform: translateY(-3px);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--tag-c, var(--color-navy)) 25%, transparent);
}

/* コラム一覧: 施設カードと同じ枠組みで統一感を出す */
.column-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: calc(var(--space) * 6); }
@media (max-width: 900px) { .column-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .column-grid { grid-template-columns: 1fr; } }
.column-card {
  display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid rgba(26,35,51,0.16); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit; padding: 24px;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.column-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,0.1); opacity: 1; }
.column-card__cat { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; color: var(--color-accent); }
.column-card__title { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.5; margin-top: 10px; }
.column-card__desc { margin-top: 10px; font-size: 16px; color: var(--color-muted); line-height: 1.8; flex-grow: 1; }
.column-card__date { margin-top: 16px; font-size: 15px; color: var(--color-muted); }

/* コラム記事本文: 可読性優先の縦組み */
.article { max-width: var(--container-narrow); margin-inline: auto; }
/* 空室一覧の表(PC表示)は6列あり760px幅の通常記事カラムに収まらないため、このページだけ広いカラム幅を使う */
.article--wide { max-width: var(--container); }
.article__lead { font-size: 19px; color: var(--color-muted); line-height: 1.9; margin-bottom: calc(var(--space) * 5); }
.article__body { font-size: 19px; line-height: 2; color: var(--color-text); }
.article__body h2 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(25px, 3vw, 31px);
  margin-top: calc(var(--space) * 8); padding-top: calc(var(--space) * 3);
  border-top: 1px solid var(--color-line);
  text-wrap: balance; /* 折り返し時に1文字だけ孤立しないよう行の文字数を均等化(対応ブラウザのみ) */
}
.article__body h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.article__body h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; margin-top: calc(var(--space) * 5); }
.article__body p { margin-top: calc(var(--space) * 3); }
.article__body ul, .article__body ol { margin-top: calc(var(--space) * 3); padding-left: 1.4em; display: grid; gap: 8px; }
.article__body li { line-height: 1.8; }
.article__body strong { color: var(--color-accent); }
.article__table { width: 100%; border-collapse: collapse; margin-top: calc(var(--space) * 3); font-size: 17px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* JSで.article__tableを.table-scrollでラップした場合の見た目(main.jsのinitTableScroll参照)。
   ページ全体ではなく表の中だけが横スクロールするようにする */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-scroll .article__table { min-width: max-content; }
.table-scroll .article__table--plans, .table-scroll .article__table--info, .table-scroll .article__table--long-label { min-width: 0; } /* これらは折り返し表示なのでスクロール不要 */
.article__table th, .article__table td { border: 1px solid var(--color-line); padding: 10px 14px; text-align: left; overflow-wrap: anywhere; line-break: strict; }
.article__table th { background: var(--color-bg); font-family: var(--font-display); font-weight: 700; }
/* 料金列(常に2列目)は数字が桁の途中で折り返さないようnowrapにする。auto layoutなのでこの列を最小幅として他列(備考等)が縮んで収まる。3列目以降は対象外で通常どおり折り返す */
.article__table th:nth-child(2), .article__table td:nth-child(2) { white-space: nowrap; }
/* 1列目(プラン名等)は単語の途中で折り返さないようnowrapにする。はみ出す場合はテーブル自体が横スクロールする(上のoverflow-x:auto) */
.article__table th:first-child, .article__table td:first-child { white-space: nowrap; min-width: 6em; }
@media (max-width: 480px) {
  .article__table { font-size: 15px; }
  .article__table th, .article__table td { padding: 8px 10px; }
}
/* 「項目/内容」形式の汎用情報テーブル: 2列目は価格ではなく文章が入るためnowrapを解除し、
   スマホでも横はみ出しせずPCと同じ2列表組みの見た目のまま折り返す */
.article__table--info th:nth-child(2), .article__table--info td:nth-child(2) { white-space: normal; }
.article__table--info th, .article__table--info td { vertical-align: top; }

/* 1列目(区画タイプ名等)が長文になる表: 1列目だけnowrapを解除してスマホで横はみ出ししないようにする。
   2列目(価格)は短い数値のままなのでnowrap維持でよい */
.article__table--long-label th:first-child, .article__table--long-label td:first-child { white-space: normal; min-width: 0; }

/* プランごとの説明が入る表(内容列が長文)はnowrapを解除し、上揃えで読みやすくする */
.article__table--plans th, .article__table--plans td { vertical-align: top; }
.article__table--plans th:nth-child(2), .article__table--plans td:nth-child(2) { white-space: normal; }
/* スマホ幅では3列が窮屈で文字が折り返しすぎるため、1行=1カードの縦積み表示に切り替える */
@media (max-width: 640px) {
  .article__table--plans, .article__table--plans tbody, .article__table--plans tr, .article__table--plans td { display: block; width: auto; }
  .article__table--plans tr:first-child { display: none; }
  .article__table--plans tr { border: 1px solid var(--color-line); border-radius: 10px; margin-top: 16px; overflow: hidden; }
  .article__table--plans tr:first-of-type { margin-top: 0; }
  .article__table--plans td { border: none; border-bottom: 1px solid var(--color-line); min-width: 0; white-space: normal; }
  .article__table--plans td:last-child { border-bottom: none; }
  .article__table--plans td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; color: var(--color-muted); margin-bottom: 4px; }
}
.article__meta { display: flex; gap: 16px; align-items: center; font-size: 16px; color: var(--color-muted); margin-top: 12px; }
.article__cta {
  margin-top: calc(var(--space) * 8); padding: clamp(27px, 4vw, 44px);
  background: var(--color-surface); border: 1px solid rgba(26,35,51,0.16); border-radius: var(--radius);
  text-align: center;
}
.article__cta p { margin-top: 8px; font-size: 17px; color: var(--color-muted); }
.article__related { margin-top: calc(var(--space) * 8); padding-top: calc(var(--space) * 4); border-top: 1px solid var(--color-line); }
.article__related h2 { font-family: var(--font-display); font-weight: 700; font-size: 21px; margin-bottom: 16px; }
.article__related ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.article__related a { font-weight: 700; }

/* 料金カード: 施設ごとの内訳(賃料・共益費・お預かり金・初回費用)を1枚のカードで見せる */
.price-card { margin-top: calc(var(--space) * 4); border: 1px solid var(--color-line-strong); border-radius: var(--radius); overflow: hidden; background: var(--color-surface); }
.price-card__head {
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px 20px;
  padding: 18px 22px; background: var(--price-accent, var(--color-navy)); color: #fff;
}
.price-card__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 3vw, 22px); }
.price-card__price { text-align: right; }
.price-card__price strong { font-family: var(--font-display); font-weight: 900; font-size: clamp(18px, 3vw, 22px); line-height: 1; color: #fff; }
.price-card__price span { display: block; margin-top: 4px; font-size: 13px; color: #fff; opacity: 0.85; }
.price-card__table { width: 100%; border-collapse: collapse; font-size: 16px; }
.price-card__table th, .price-card__table td { border: 1px solid var(--color-line); padding: 10px 14px; text-align: left; }
.price-card__table th { background: var(--color-bg); font-family: var(--font-display); font-weight: 700; width: 30%; }
.price-card__table tr.is-total th, .price-card__table tr.is-total td { background: color-mix(in srgb, var(--price-accent, var(--color-accent)) 14%, var(--color-surface)); font-weight: 700; color: var(--price-accent, var(--color-accent)); }
.price-card__points { padding: 16px 22px 4px; display: grid; gap: 8px; }
.price-card__points li { list-style: none; padding-left: 1.5em; position: relative; font-size: 16px; line-height: 1.8; color: var(--color-text); }
.price-card__points li::before { content: "✓"; position: absolute; left: 0; color: var(--price-accent, var(--color-accent)); font-weight: 700; }
.price-card__badges { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 22px 20px; }
.price-card__badge { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.price-card__badge--ok { background: color-mix(in srgb, var(--price-accent, var(--color-accent)) 12%, #fff); color: var(--price-accent, var(--color-accent)); border: 1px solid var(--price-accent, var(--color-accent)); }
.price-card__badge--note { background: #FDEDEC; color: #B3261E; border: 1px solid #B3261E; }
.price-card__vacancy {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; background: #E10600; color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 16px; text-align: center;
  animation: price-card-pulse 1.8s ease-in-out infinite;
}
@keyframes price-card-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } }
@media (prefers-reduced-motion: reduce) { .price-card__vacancy { animation: none; } }

/* 区画タイプ別カード: 写真は全て同じ比率で統一表示。名称・価格はテキストなので改定時は文字を直すだけでよい */
.room-type-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: calc(var(--space) * 3);
}
.room-type-card {
  border: 1px solid var(--color-line); border-radius: 14px; overflow: hidden; background: var(--color-surface);
  box-shadow: 0 2px 8px rgba(26,35,51,0.06);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.room-type-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(26,35,51,0.12); }
.room-type-card__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--color-line); }
.room-type-card__noimg {
  width: 100%; aspect-ratio: 4/3; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--price-accent, var(--color-accent)) 12%, var(--color-surface));
  color: var(--price-accent, var(--color-accent)); font-family: var(--font-display); font-weight: 700;
  font-size: 15px; text-align: center; padding: 12px; line-height: 1.6;
}
.room-type-card__noimg small { display: block; font-weight: 500; font-size: 12px; opacity: .75; margin-top: 2px; }
.room-type-card__body { padding: 14px 14px 16px; }
.room-type-card__name { font-size: 13px; font-weight: 600; color: var(--color-text); opacity: 0.65; letter-spacing: .02em; }
.room-type-card__price { margin-top: 6px; font-family: var(--font-display); font-weight: 800; color: var(--price-accent, var(--color-accent)); font-size: 20px; line-height: 1.2; }
.room-type-card__price small { font-weight: 500; color: var(--color-text); opacity: .6; margin-left: 2px; font-size: 12px; }
.room-type-card__price--contact {
  display: inline-flex; align-items: center; margin-top: 8px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--price-accent, var(--color-accent)); color: var(--price-accent, var(--color-accent));
  font-size: 12px; font-weight: 700;
}
@media (max-width: 900px) { .room-type-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .room-type-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* 料金一覧ページ: セクションごとにカテゴリカラーを持たせて見分けやすくする */
.price-section {
  --cat-office: #2E5C8A; --cat-storage: #7A5C3E; --cat-parking: #46525E;
  --cat-house: #BA5713; --cat-diving: #146178; --cat-food: #C1443C;
  --cat-common: #256257; --cat-farm: #2F602F; --cat-kids: #8C6108;
  margin-top: calc(var(--space) * 8); padding-left: 20px; border-left: 4px solid var(--price-accent, var(--color-accent));
}
.price-section--office { --price-accent: var(--cat-office); }
.price-section--storage { --price-accent: var(--cat-storage); }
.price-section--parking { --price-accent: var(--cat-parking); }
.price-section--house { --price-accent: var(--cat-house); }
.price-section--diving { --price-accent: var(--cat-diving); }
.price-section--food { --price-accent: var(--cat-food); }
.price-section--common { --price-accent: var(--cat-common); }
.price-section--farm { --price-accent: var(--cat-farm); }
.price-section--kids { --price-accent: var(--cat-kids); }
.price-section h2 { color: var(--price-accent, var(--color-text)); margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; }
.price-section .article__table th { background: color-mix(in srgb, var(--price-accent, var(--color-accent)) 10%, var(--color-bg)); }

/* 貸施設一覧ページ: カード画像は縦横比を揃えてobject-fitでカットし、元画像サイズがバラバラでも統一表示する */
.facility-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: calc(var(--space) * 6); }
@media (max-width: 900px) { .facility-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .facility-grid { grid-template-columns: 1fr; } }
.facility-card {
  display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.facility-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,0.1); opacity: 1; }
.facility-card__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-line); }
.facility-card__ribbon {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  background: #E10600; color: #fff; font-weight: 800; font-size: 13px;
  padding: 5px 12px; border-radius: 999px; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.facility-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facility-card__body { padding: 16px 18px 20px; }
.facility-card__title { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.5; }
.facility-card__desc { margin-top: 6px; font-size: 16px; color: var(--color-muted); line-height: 1.8; }
.facility-card__more { display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--color-accent); }

/* 料金一覧ページ: セクションへのジャンプナビ */
.price-jump {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: calc(var(--space) * 4); margin-bottom: calc(var(--space) * 2);
  padding: 16px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius);
}
.price-jump a {
  font-size: 15px; font-weight: 700; padding: 6px 12px;
  border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-text);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.price-jump a:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* ご入居者様 企業情報ページ */
.tenant-summary {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  margin-top: calc(var(--space) * 3); padding: 18px 22px;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius);
}
.tenant-summary strong { font-family: var(--font-display); color: var(--color-accent); font-size: 22px; }
.tenant-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; margin-top: calc(var(--space) * 5);
}
.tenant-card {
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius);
  padding: 20px 22px;
}
.tenant-card__title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--color-accent);
  padding-bottom: 12px; border-bottom: 1px solid var(--color-line);
}
.tenant-card__count { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--color-muted); white-space: nowrap; }
.tenant-card__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 0; list-style: none; }
.tenant-card__list li {
  font-size: 14px; padding: 6px 13px; background: var(--color-bg);
  border: 1px solid var(--color-line); border-radius: 999px; line-height: 1.4;
}

/* 施設詳細ページ: カード一覧と同じ画像を大きく使い回す */
.facility-detail__hero {
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--color-line); margin-bottom: calc(var(--space) * 5);
}
.facility-detail__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 施設詳細ページ: 冒頭の自動ループ動画(16:9で統一、スライドショーと同じ見た目) */
.facility-detail__video-wrap {
  aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--color-line);
  margin-bottom: calc(var(--space) * 5); background: var(--color-line);
}
.facility-detail__video {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
/* AI動画生成ツールの透かしマーク(右下)がある素材にだけ付与: 左を軸に拡大して右側を画面外に切り落とす */
.facility-detail__video--crop-right {
  transform: scale(1.3); transform-origin: left center;
}

/* 施設詳細ページ: 2秒間隔の自動スライドショー(画像サイズは常に16:9で統一) */
.facility-slideshow {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--color-line);
  margin-bottom: calc(var(--space) * 5); background: var(--color-line);
}
.facility-slideshow__track { position: relative; width: 100%; height: 100%; }
.facility-slideshow__slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}
.facility-slideshow__slide.is-active { opacity: 1; z-index: 1; }
.facility-slideshow__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facility-slideshow::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 64px; z-index: 1;
  background: linear-gradient(transparent, rgba(0,0,0,0.4)); pointer-events: none;
}
.facility-slideshow__dots {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2;
  display: flex; gap: 8px;
}
.facility-slideshow__dots button {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.55); cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.facility-slideshow__dots button.is-active { background: #fff; transform: scale(1.3); }
.article__body .facility-detail__points { margin-top: calc(var(--space) * 3); display: grid; gap: 10px; list-style: none; padding-left: 0; }
.facility-detail__points li { line-height: 1.8; padding-left: 1.2em; position: relative; }
.facility-detail__points li::before { content: "○"; position: absolute; left: 0; color: var(--color-accent); font-size: 16px; top: 3px; }
.facility-detail__gallery {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin-top: 12px;
}
.facility-detail__gallery img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius);
  border: 1px solid var(--color-line); display: block;
}
.facility-detail__gallery--wide img { aspect-ratio: 16/9; }
.facility-detail__infographic {
  display: block; width: 100%; height: auto; margin-top: 12px;
  border-radius: var(--radius); border: 1px solid var(--color-line);
}
.facility-detail__gallery-stat {
  aspect-ratio: 4/3; border-radius: var(--radius);
  background: var(--color-accent); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 16px; gap: 6px;
}
.facility-detail__gallery-stat strong {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(24px, 3.2vw, 34px); line-height: 1.2;
}
.facility-detail__gallery-stat span { font-size: 14px; opacity: 0.92; line-height: 1.5; }
@media (max-width: 600px) { .facility-detail__gallery { grid-template-columns: 1fr; } }

/* 料金カード(3プラン比較) */
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  align-items: stretch;
}
.pricing-card {
  position: relative;
  background: var(--color-surface); border: 1px solid rgba(26,35,51,0.16);
  border-radius: var(--radius); padding: clamp(27px, 3vw, 40px);
  text-align: center; display: flex; flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s;
}
.pricing-card:not(.pricing-card--featured):hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 20px 36px rgba(26,35,51,0.12); }
.pricing-card--featured:hover { transform: translateY(-4px); box-shadow: 0 16px 0 0 color-mix(in srgb, var(--color-accent) 10%, transparent); }
.pricing-card--featured {
  border: 2px solid var(--color-accent);
  box-shadow: 0 12px 0 0 color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.pricing-card__badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--color-accent); color: #fff; font-size: 15px; font-weight: 700;
  padding: 5px 16px; border-radius: 999px; letter-spacing: 0.08em;
}
.pricing-card__name { font-size: 16px; letter-spacing: 0.1em; color: var(--color-accent); }
.pricing-card__price { font-family: var(--font-display); font-weight: 800; font-size: clamp(31px, 4vw, 42px); margin-top: 8px; }
.pricing-card__price small { font-size: 16px; font-weight: 400; color: var(--color-muted); }
.pricing-card__sub { margin-top: 6px; font-size: 15px; color: var(--color-muted); min-height: 2.4em; }
.pricing-card__list { list-style: none; padding: 0; margin: 20px 0; text-align: left; display: grid; gap: 10px; font-size: 16px; flex-grow: 1; }
.pricing-card__list li { display: flex; gap: 8px; }
.pricing-card__list li::before { content: "✓"; color: var(--color-accent); font-weight: 700; }
.pricing-card__note { margin-top: 18px; font-size: 15px; color: var(--color-muted); }
.pricing-card .button { padding-inline: 12px; font-size: clamp(14px, 3.2vw, 18px); letter-spacing: 0.02em; white-space: nowrap; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* 施設・周辺案内: PCは元の1枚合成画像、スマホ/タブレットは地図+実HTMLリストに分割 */
.map-original { position: relative; }
@media (max-width: 900px) { .map-original { display: none; } }
.map-original.is-inview .map-pin-arrow__line { stroke-dashoffset: 0; }
.map-original.is-inview .map-pin-arrow__head { stroke-dashoffset: 0; opacity: 1; }

.map-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .map-layout { grid-template-columns: 1fr; } }
@media (min-width: 901px) { .map-layout { display: none; } }
.map-image-wrap { display: flex; align-items: center; justify-content: center; }
.map-image-inner { position: relative; width: 100%; }
.map-facility-list {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius); padding: 22px 24px;
}
.facility-list { list-style: none; margin: 0; padding: 0; }
.facility-list li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--color-line); }
.facility-list li:first-child { padding-top: 0; }
.facility-list li:last-child { border-bottom: none; padding-bottom: 0; }
.facility-list__num {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background: var(--color-navy); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.facility-list__item--accent .facility-list__num { background: #E10600; }
.facility-list__label { font-weight: 700; font-size: 16px; line-height: 1.4; }
.facility-list__label small { display: block; font-weight: 500; font-size: 12.5px; color: var(--color-muted); margin-top: 2px; }
.facility-list__foot { margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--color-line); }
.facility-list__foot-main { font-size: 14px; font-weight: 700; line-height: 1.7; }
.facility-list__foot-main strong { font-size: 21px; color: var(--color-accent); margin-left: 4px; }
.facility-list__foot-note { font-size: 11.5px; color: var(--color-muted); margin-top: 6px; }
.map-extra-card__pointer { width: 100%; margin: 0 auto 16px; text-align: center; }
.map-extra-card__pointer img { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--color-line); }
.map-extra-card__pointer-label { margin-top: 6px; color: #E10600; font-weight: 800; font-size: 19px; line-height: 1.6; }
.pointer-bounce { display: inline-block; margin-bottom: 10px; animation: pointer-bounce 1.4s ease-in-out infinite; }
.pointer-badge svg { display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.3)); }
@keyframes pointer-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@media (min-width: 901px) { .map-extra-card__pointer { display: none; } }
.map-extra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.map-extra-card {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius); padding: clamp(20px, 3vw, 28px);
}
.map-extra-card__title { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.map-extra-card__desc { font-size: 14px; color: var(--color-muted); margin-bottom: 14px; }
.map-extra-card__link { display: block; margin-top: 16px; font-weight: 700; text-align: center; }
.map-extra-card__note { text-align: center; margin-top: 8px; font-size: 12px; color: var(--color-muted); }
@media (max-width: 900px) { .map-extra-grid { grid-template-columns: 1fr; } }
.map-image-wrap { position: relative; }
.map-pin-arrow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 0 3px rgba(255,255,255,0.9)) drop-shadow(0 0 3px rgba(255,255,255,0.9)); }
.map-pin-arrow__line { stroke-dasharray: 500; stroke-dashoffset: 500; transition: stroke-dashoffset 1s cubic-bezier(0.22,1,0.36,1); }
.map-pin-arrow__head { stroke-dasharray: 120; stroke-dashoffset: 120; opacity: 0; transition: stroke-dashoffset 0.4s ease, opacity 0.1s ease; transition-delay: 0.9s; }
.map-layout.is-inview .map-pin-arrow__line { stroke-dashoffset: 0; }
.map-layout.is-inview .map-pin-arrow__head { stroke-dashoffset: 0; opacity: 1; }

/* 利用の流れ: 矢印でつなぐ */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: start;
  gap: 0; counter-reset: step;
}
.step { position: relative; padding: 0 20px; text-align: center; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 31px; color: var(--color-accent); margin-bottom: 10px;
}
.step:not(:last-child)::after {
  content: "→"; position: absolute; top: 4px; right: -8px;
  font-size: 25px; color: var(--color-line-strong); opacity: 0.35;
  animation: step-arrow-flow-x 2.6s ease-in-out infinite;
}
@keyframes step-arrow-flow-x {
  0%, 65% { transform: translateX(0); opacity: 0.35; }
  85% { transform: translateX(7px); opacity: 0.7; }
  100% { transform: translateX(0); opacity: 0.35; }
}
.step:nth-child(1)::after { animation-delay: 0s; }
.step:nth-child(2)::after { animation-delay: 0.3s; }
.step:nth-child(3)::after { animation-delay: 0.6s; }
.step__title { font-size: 18px; font-weight: 700; }
.step p { margin-top: 6px; font-size: 16px; color: var(--color-muted); }
@media (max-width: 767px) {
  .steps { grid-template-columns: 1fr; gap: 48px; }
  .step { padding: 0; }
  .step:not(:last-child)::after {
    content: "↓"; top: 100%; right: auto; left: 50%; bottom: auto;
    margin-top: 10px; animation: step-arrow-flow-y 2.6s ease-in-out infinite;
  }
  @keyframes step-arrow-flow-y {
    0%, 65% { transform: translateX(-50%) translateY(0); opacity: 0.35; }
    85% { transform: translateX(-50%) translateY(7px); opacity: 0.7; }
    100% { transform: translateX(-50%) translateY(0); opacity: 0.35; }
  }
}

/* FAQ */
.faq { display: grid; gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); }
.faq details { background: var(--color-surface); padding: 20px 24px; }
.faq summary {
  cursor: pointer; list-style: none; display: flex; gap: 14px; align-items: baseline;
  font-weight: 700; font-size: 18px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; font-family: var(--font-display); color: var(--color-accent); font-weight: 800; }
.faq summary::after { content: "+"; margin-left: auto; font-weight: 400; color: var(--color-muted); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin-top: 12px; padding-left: 28px; font-size: 17px; color: var(--color-muted); }

/* アクセス */
.access-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(27px, 5vw, 61px); align-items: start; }
.access-info dt { font-size: 15px; color: var(--color-muted); margin-top: 18px; }
.access-info dt:first-child { margin-top: 0; }
.access-info dd { font-size: 18px; margin: 4px 0 0; }
.access-map { border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; }
.access-map iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 767px) { .access-grid { grid-template-columns: 1fr; } }

/* SP固定CTA */
.fixed-cta {
  display: none;
  /* z-indexは.site-header(fixed, z=--z-header)より必ず低くする。
     同値だとheader配下.global-nav(z=--z-nav)のstacking contextが
     headerの--z-headerに閉じ込められ、DOM順で後にあるfixed-ctaが
     開いたナビの上に透けて表示される事故になる */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--color-surface); border-top: 1px solid var(--color-line);
}
.fixed-cta .button { display: block; width: 100%; text-align: center; padding-block: 14px; }
@media (max-width: 767px) { .fixed-cta { display: block; } main { padding-bottom: 72px; } }

/* 下層ページヘッダー(固定ヘッダーは透明で下層ページのタイトルと重なるため、ヘッダー実測高さ分の余白を確保) */
.page-header { padding: calc(120px + var(--section-pad) * 0.4) 0 calc(var(--section-pad) * 0.5); }
.page-header__en {
  font-size: 16px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--color-accent);
}
.page-header__title { font-size: clamp(36px, 5vw, 61px); margin-top: calc(var(--space) * 1); }

.breadcrumb { padding-block: calc(var(--space) * 2); font-size: 15px; color: var(--color-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.6em; list-style: none; padding: 0; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 0.6em; }
.breadcrumb a { text-decoration: none; }

/* ボタン */
.button {
  display: inline-block;
  position: relative; overflow: hidden;
  padding: 16px 44px;
  background: var(--color-accent); color: var(--color-accent-ink);
  border: 1px solid var(--color-accent); border-radius: var(--radius);
  font-size: 18px; letter-spacing: 0.08em; text-decoration: none;
  cursor: pointer; transition: background 0.3s, color 0.3s;
}
.button:hover { background: transparent; color: var(--color-accent); opacity: 1; }
.button:disabled { opacity: 0.5; cursor: wait; }
/* クリック時の波紋(押した実感) */
.button .ripple {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: 0.35; transform: translate(-50%, -50%);
  animation: btn-ripple 0.55s ease-out forwards; pointer-events: none;
}
@keyframes btn-ripple { to { width: 220px; height: 220px; opacity: 0; } }

/* フォーム */
.form { display: grid; gap: calc(var(--space) * 4); min-width: 0; }
.form__field { display: grid; gap: calc(var(--space) * 1); min-width: 0; }
.form__field label { font-size: 17px; font-weight: 600; }
.form__field .required { color: var(--color-accent); font-size: 15px; margin-left: 0.5em; }
.form input, .form textarea, .form select {
  font: inherit; padding: 14px 16px; width: 100%; min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-line); border-radius: var(--radius);
}
.form input:focus, .form textarea:focus { border-color: var(--color-accent); outline: none; }
.form [aria-invalid="true"] { border-color: #c0392b; }
.form__error { color: #c0392b; font-size: 16px; min-height: 1.2em; }
.form__hp { position: absolute; left: -9999px; }  /* ハニーポット: 削除禁止 */

/* フッター */
.site-footer {
  padding: calc(var(--space) * 8) 0 calc(var(--space) * 4);
  border-top: 1px solid var(--color-line);
  font-size: 16px; color: var(--color-muted);
}
.footer-brand { align-items: flex-start; }
.footer-brand .brand-lockup__sub { color: var(--color-muted); font-size: 15px; }
.footer-brand .brand-lockup__stamp { font-size: 54px; }
.footer-brand .brand-lockup__main { font-size: 29px; color: var(--color-text); }
.footer-brand .brand-lockup__tagline { color: var(--color-muted); font-size: 15px; }

/* ---------- 5. モーション基盤 ---------- */
/* JSが .is-inview を付ける。演出を変えるならこのクラスのtransform/opacityだけ触る */
.js-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
.js-reveal.is-inview { opacity: 1; transform: none; }
.js-reveal[data-delay="1"] { transition-delay: 0.1s; }
.js-reveal[data-delay="2"] { transition-delay: 0.2s; }
.js-reveal[data-delay="3"] { transition-delay: 0.3s; }

/* 「下を見て」の矢印バウンド(控えめに縦揺れ) */
.bounce-arrow { display: inline-block; animation: bounce-arrow 1.6s ease-in-out infinite; }
@keyframes bounce-arrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .bounce-arrow { animation: none; } }

/* ---------- 6. モーション停止(SKILL.mdのポリシー実装。削除禁止) ---------- */
.motion-stop {
  display: none;
  position: fixed; right: 16px; bottom: 16px; z-index: var(--z-modal);
  padding: 10px 16px; font-size: 15px;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: 999px; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .motion-stop { display: block; }     /* reduced-motion環境にだけボタンを出す */
}
html.is-motion-off .js-reveal,
html.is-motion-off *[class] {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
}
html.is-motion-off .js-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ai-chat__toggle { bottom: 76px; }   /* motion-stopボタン(16px)と重ならないよう上にずらす */
}

/* ---------- 7. AIチャットボット ---------- */
.ai-chat__toggle {
  position: fixed; right: 20px; bottom: 20px; z-index: var(--z-modal);
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--color-accent); color: #fff; border: none;
  font-size: 27px; cursor: pointer;
  display: grid; place-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.22);
  transition: transform 0.25s;
}
.ai-chat__toggle:hover { transform: scale(1.06); opacity: 1; }
.ai-chat__toggle[aria-expanded="true"] .ai-chat__toggle-icon::before { content: "×"; font-size: 31px; }
@media (max-width: 767px) { .ai-chat__toggle { bottom: calc(72px + 16px + env(safe-area-inset-bottom)); right: 16px; } }

.ai-chat__panel {
  position: fixed; right: 20px; bottom: 90px; z-index: var(--z-modal);
  width: min(360px, calc(100vw - 32px)); height: min(520px, calc(100vh - 140px));
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  display: flex; flex-direction: column; overflow: hidden;
}
.ai-chat__panel[hidden] { display: none; }
@media (max-width: 767px) { .ai-chat__panel { bottom: calc(72px + 16px + 58px + 24px + env(safe-area-inset-bottom)); right: 16px; } }

.ai-chat__header {
  background: var(--color-navy); color: #fff;
  padding: 14px 16px; font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display);
}
.ai-chat__close {
  background: none; border: none; color: #fff; font-size: 23px; line-height: 1;
  cursor: pointer; padding: 4px 8px;
}
.ai-chat__messages {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  background: var(--color-bg);
}
.ai-chat__msg {
  max-width: 84%; padding: 10px 14px; border-radius: 14px; font-size: 15.5px; line-height: 1.7;
  white-space: pre-wrap;
}
.ai-chat__msg--bot { align-self: flex-start; background: var(--color-surface); border: 1px solid var(--color-line); border-bottom-left-radius: 4px; }
.ai-chat__msg--user { align-self: flex-end; background: var(--color-accent); color: #fff; border-bottom-right-radius: 4px; }
.ai-chat__msg--typing { align-self: flex-start; color: var(--color-muted); font-style: italic; }
.ai-chat__suggestions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 16px 12px; background: var(--color-bg);
}
.ai-chat__suggestions[hidden] { display: none; }
.ai-chat__chip {
  font: inherit; font-size: 15px; cursor: pointer;
  padding: 7px 12px; border-radius: 999px;
  background: var(--color-surface); border: 1px solid var(--color-line-strong);
  color: var(--color-text); text-align: left;
  transition: background 0.2s, color 0.2s;
}
.ai-chat__chip:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); opacity: 1; }
.ai-chat__chip:disabled { opacity: 0.5; cursor: wait; }
.ai-chat__form {
  display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--color-line); background: var(--color-surface);
}
.ai-chat__form input {
  flex: 1; font: inherit; font-size: 15.5px; padding: 10px 12px;
  border: 1px solid var(--color-line); border-radius: 999px; background: var(--color-bg);
}
.ai-chat__form input:focus { outline: none; border-color: var(--color-accent); }
.ai-chat__form button {
  background: var(--color-accent); color: #fff; border: none; border-radius: 999px;
  padding: 0 18px; font-size: 16px; font-weight: 700; cursor: pointer;
}
.ai-chat__form button:disabled { opacity: 0.5; cursor: wait; }

/* ---------- サイト内動画(元Instagram投稿。外部に逃さずネイティブ再生) ---------- */
.instagram-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
@media (max-width: 900px) { .instagram-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .instagram-grid { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; } }
.ig-video-card { display: block; }
.ig-video-card__frame { aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden; background: var(--color-line); border: 1px solid var(--color-line); }
.ig-video-card__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-video-card__caption { margin-top: 8px; font-size: 13px; color: var(--color-muted); text-align: center; }
.ig-video-single { max-width: 320px; margin: 20px auto 0; }

/* ---------- フォトギャラリーページ ---------- */
.gallery-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: calc(var(--space) * 3);
}
.gallery-filters__btn {
  font: inherit; font-size: 14px; cursor: pointer;
  padding: 8px 16px; border-radius: 999px;
  background: var(--color-surface); border: 1px solid var(--color-line-strong);
  color: var(--color-text); transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.gallery-filters__btn:hover { border-color: var(--color-accent); opacity: 1; }
.gallery-filters__btn.is-active {
  background: var(--color-accent); color: #fff; border-color: var(--color-accent); opacity: 1;
}
.gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-top: calc(var(--space) * 4);
}
.gallery-grid__item {
  display: block; padding: 0; border: none; background: var(--color-line);
  aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius);
  cursor: pointer; position: relative;
}
.gallery-grid__item[hidden] { display: none; }
.gallery-grid__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s var(--ease-out);
}
.gallery-grid__item:hover img { transform: scale(1.06); opacity: 1; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .gallery-filters__btn { font-size: 13px; padding: 6px 12px; } }

.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(10,14,10,0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: min(1000px, 92vw); max-height: 78vh; object-fit: contain;
  border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  touch-action: none; will-change: transform;
}
.lightbox__caption { color: #EDEFF3; font-size: 16px; margin-top: 16px; text-align: center; max-width: 90vw; }
.lightbox__close {
  position: absolute; top: 18px; right: 20px; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 27px; line-height: 1;
  cursor: pointer; transition: background 0.2s;
}
.lightbox__close:hover { background: rgba(255,255,255,0.25); opacity: 1; }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 33px; line-height: 1;
  cursor: pointer; transition: background 0.2s;
}
.lightbox__nav:hover { background: rgba(255,255,255,0.25); opacity: 1; }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
@media (max-width: 600px) {
  .lightbox__nav { width: 40px; height: 40px; font-size: 25px; }
  .lightbox__close { width: 38px; height: 38px; font-size: 23px; }
}

/* ---- 画像拡大ビューア(main内のimg用・ピンチズーム対応) ---- */
.img-zoomable { cursor: zoom-in; }
.img-lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal, 9999);
  background: rgba(10,14,10,0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  touch-action: none;
}
.img-lightbox.is-open { opacity: 1; pointer-events: auto; }
.img-lightbox__img {
  max-width: 92vw; max-height: 92vh; object-fit: contain;
  touch-action: none; will-change: transform;
}
.img-lightbox__close {
  position: absolute; top: 16px; right: 20px; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 28px; line-height: 1;
  cursor: pointer; transition: background 0.2s;
}
.img-lightbox__close:hover { background: rgba(255,255,255,0.25); }
@media (max-width: 600px) {
  .img-lightbox__close { width: 38px; height: 38px; font-size: 23px; }
}

/* 空室状況・全区画料金一覧ページ */
.vacancy-summary { display:flex; gap:12px; flex-wrap:wrap; margin:24px 0; }
.vacancy-badge {
  display:inline-block; padding:6px 16px; border-radius:999px;
  font-size:14px; font-weight:700; white-space:nowrap;
}
.vacancy-badge--open { background:var(--color-accent); color:var(--color-accent-ink); }
.vacancy-badge--filled { background:var(--color-line); color:var(--color-muted); }
.vacancy-badge--planned { background:#8C6108; color:#fff; }
.vacancy-table tr.is-vacant td { background:rgba(36,88,47,0.06); }
.vacancy-table tr.is-vacant td:first-child { font-weight:700; }
/* スマホでもPCと同じ表形式で表示する。金額列は改行させず、収まりきらない時は親のoverflow-x:autoで横スクロールさせる */
.vacancy-table { display: table; width: auto; }
.vacancy-table tbody { display: table-row-group; }
.vacancy-table tr { display: table-row; border: none; border-radius: 0; margin-top: 0; max-width: none; overflow: visible; }
.vacancy-table tr:first-child { display: table-row; }
.vacancy-table tr.is-vacant { border: none; }
.vacancy-table td {
  display: table-cell; border: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line);
  white-space: nowrap; padding: 10px 14px; min-width: 0;
}
.vacancy-table td::before { content: none; }
.vacancy-table td:first-child { background: transparent; font-family: inherit; font-weight: 400; font-size: inherit; white-space: nowrap; min-width: 6em; }
.vacancy-table tr.is-vacant td:first-child { font-weight: 700; }
.vacancy-badge--link { cursor: pointer; text-decoration: none; transition: filter 0.15s ease, transform 0.15s ease; }
.vacancy-badge--link:hover, .vacancy-badge--link:focus-visible { filter: brightness(0.94); transform: translateY(-1px); }