/* =========================================================
   Studio RockyMouse — rm-ui
   白 × 紺 × 金の上質なデザイン層。
   既存の css/style.css のあとに読み込む「見た目だけ」の追加。
   仕組み（見積り・フォーム・スライダー・解析）には一切触れない。
   クラス名はすべて rm- で始める。既存の選択子は上書きしない。
   例外は .nav 系のヘッダーのみ（全ページ共通の見た目を揃えるため）。
   ========================================================= */

:root {
  --rm-navy: #0d1726;
  --rm-navy-2: #16243a;
  --rm-ink: #0d1726;
  --rm-ink-soft: #46536a;
  --rm-ink-mute: #78849a;
  --rm-gold: #c9a54a;
  --rm-gold-2: #e3c87f;
  --rm-line: rgba(13, 23, 38, 0.12);
  --rm-line-soft: rgba(13, 23, 38, 0.07);
  --rm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rm-nav-h: 84px;
  --rm-nav-h-sm: 64px;
  /* 既存CSSが上余白の計算に使っている変数も、新しい高さに合わせる */
  --nav-h: 84px;
  --rm-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Times New Roman", serif;
}

/* =========================================================
   1. ヘッダー（全ページ共通）
   ========================================================= */
.nav {
  height: var(--rm-nav-h);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--rm-line-soft);
  box-shadow: none;
  transition: height 0.38s var(--rm-ease), background 0.38s var(--rm-ease),
    border-color 0.38s, box-shadow 0.38s var(--rm-ease);
}
.nav__inner { height: 100%; gap: clamp(16px, 2.6vw, 40px); }

/* 暗いヒーローに重なっている間は、透明＋白文字 */
:root[data-theme="dark"] body.rm-over-hero .nav:not(.rm-solid) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(255, 255, 255, 0.14);
}
:root[data-theme="dark"] body.rm-over-hero .nav:not(.rm-solid) .brand,
:root[data-theme="dark"] body.rm-over-hero .nav:not(.rm-solid) .rm-nav__en,
:root[data-theme="dark"] body.rm-over-hero .nav:not(.rm-solid) .rm-nav__ja { color: #fff; }
:root[data-theme="dark"] body.rm-over-hero .nav:not(.rm-solid) .brand small { color: rgba(255, 255, 255, 0.62); }
:root[data-theme="dark"] body.rm-over-hero .nav:not(.rm-solid) .rm-tagline { color: rgba(255, 255, 255, 0.66); }
:root[data-theme="dark"] body.rm-over-hero .nav:not(.rm-solid) .rm-tagline::before { background: rgba(255, 255, 255, 0.22); }
:root[data-theme="dark"] body.rm-over-hero .nav:not(.rm-solid) .nav__cta { color: #fff; border-color: rgba(227, 200, 127, 0.75); background: transparent; }
:root[data-theme="dark"] body.rm-over-hero .nav:not(.rm-solid) .nav__cta:hover { background: rgba(227, 200, 127, 0.14); }
:root[data-theme="dark"] body.rm-over-hero .nav:not(.rm-solid) .nav__toggle { color: #fff; border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); }

/* style.css 側の .scrolled は見た目を打ち消し、rm-solid で制御する */
.nav.scrolled { background: inherit; box-shadow: inherit; border-bottom-color: inherit; }

/* 下へ進むと、白く・薄く・低くなる */
.nav.rm-solid {
  height: var(--rm-nav-h-sm);
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--rm-line);
  box-shadow: 0 10px 30px rgba(13, 23, 38, 0.07);
}

/* ブランド（既存の R マークをそのまま使い、紺×金に整える） */
.brand { gap: 13px; color: var(--rm-ink); font-size: 1.06rem; }
.brand__mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(145deg, var(--rm-navy) 0%, #1e3050 100%);
  color: var(--rm-gold-2);
  box-shadow: 0 6px 18px rgba(13, 23, 38, 0.28), inset 0 0 0 1px rgba(227, 200, 127, 0.35);
  font-size: 1.16rem; letter-spacing: 0;
  transition: transform 0.4s var(--rm-ease), box-shadow 0.4s var(--rm-ease);
}
.brand:hover .brand__mark { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(13, 23, 38, 0.32), inset 0 0 0 1px rgba(227, 200, 127, 0.6); }
.brand small { letter-spacing: 0.2em; font-size: 0.58rem; color: var(--rm-ink-mute); margin-top: 2px; }
.nav.rm-solid .brand__mark { width: 34px; height: 34px; font-size: 1.04rem; }

/* メニュー：英語の下に日本語 */
.nav__links { gap: clamp(2px, 1.4vw, 18px); }
.nav__links a {
  display: block; padding: 8px 10px; border-radius: 0;
  text-align: center; line-height: 1.25; color: var(--rm-ink);
}
.nav__links a::after {
  left: 10px; right: 10px; bottom: 0; height: 1.5px;
  background: var(--rm-gold); border-radius: 0;
  transition: transform 0.42s var(--rm-ease);
}
.nav__links a:hover { color: var(--rm-ink); }
.nav__links a.active { color: var(--rm-ink); }
.rm-nav__en { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.13em; }
.rm-nav__ja { display: block; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.04em; color: var(--rm-ink-mute); margin-top: 2px; }
.nav.rm-solid .rm-nav__ja { font-size: 0.62rem; }

/* お問い合わせボタン（金の細枠） */
.nav__cta {
  background: transparent; color: var(--rm-ink);
  border: 1px solid var(--rm-gold); border-radius: 2px;
  padding: 12px 20px; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em;
  box-shadow: none; display: inline-flex; align-items: center; gap: 10px;
  transition: background 0.35s var(--rm-ease), color 0.35s, border-color 0.35s;
}
.nav__cta:hover { background: rgba(201, 165, 74, 0.1); box-shadow: none; }
.nav__cta .rm-ico { width: 16px; height: 16px; flex: none; }
.nav__cta .rm-arrow { transition: transform 0.35s var(--rm-ease); }
.nav__cta:hover .rm-arrow { transform: translateX(4px); }

/* 右端の小さな標語 */
.rm-tagline {
  position: relative; padding-left: 18px; margin-left: 4px;
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.16em; line-height: 1.5;
  color: var(--rm-ink-mute); white-space: nowrap;
}
.rm-tagline::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--rm-line); }
@media (max-width: 1460px) { .rm-tagline { display: none; } }

.nav__toggle { border-radius: 2px; border-color: var(--rm-line); }

@media (max-width: 900px) {
  :root { --rm-nav-h: 68px; --rm-nav-h-sm: 60px; --nav-h: 68px; }
  .nav__links { gap: 0; }
  .nav__links a { text-align: left; padding: 12px 14px; }
  .rm-nav__ja { margin-top: 1px; }
}

/* =========================================================
   2. 新しい導入部（ヒーロー）
   ========================================================= */
.rm-intro {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(560px, 86vh, 860px);
  display: flex; align-items: center;
  background: var(--rm-navy);
  padding-top: calc(var(--rm-nav-h) + clamp(24px, 4vw, 56px));
  padding-bottom: clamp(56px, 7vw, 96px);
}
.rm-intro__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%;
  will-change: transform;
}
.rm-intro__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(8, 14, 24, 0.94) 0%, rgba(8, 14, 24, 0.86) 34%, rgba(8, 14, 24, 0.42) 58%, rgba(8, 14, 24, 0.18) 100%),
    linear-gradient(to top, rgba(8, 14, 24, 0.55), transparent 32%);
}
.rm-intro .container { position: relative; width: 100%; }
.rm-intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.rm-intro__text { max-width: min(790px, 100%); color: #fff; }

.rm-eyebrow {
  display: inline-block; font-size: clamp(0.76rem, 1.1vw, 0.9rem); font-weight: 600;
  letter-spacing: 0.22em; color: var(--rm-gold-2); margin-bottom: clamp(18px, 2.6vw, 30px);
}
.rm-intro__title {
  font-family: var(--rm-serif);
  font-size: clamp(1.72rem, 4.6vw, 3.75rem);
  font-weight: 600; line-height: 1.26; letter-spacing: 0.02em; word-break: auto-phrase;
  margin: 0 0 clamp(18px, 2.4vw, 28px); color: #fff;
}
.rm-intro__lead {
  font-size: clamp(0.92rem, 1.2vw, 1.04rem); line-height: 2; word-break: auto-phrase;
  color: rgba(255, 255, 255, 0.84); margin: 0 0 clamp(26px, 3.4vw, 40px); max-width: 30em;
}
.rm-rule { width: 64px; height: 1px; background: var(--rm-gold); margin: 0 0 clamp(22px, 3vw, 32px); }

.rm-points { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 40px); margin: 0 0 clamp(30px, 4vw, 46px); padding: 0; list-style: none; }
.rm-point { display: flex; align-items: center; gap: 12px; position: relative; }
.rm-point + .rm-point::before { content: ""; position: absolute; left: clamp(-20px, -1.5vw, -9px); top: 6px; bottom: 6px; width: 1px; background: rgba(255, 255, 255, 0.18); }
.rm-point__ico { width: 30px; height: 30px; flex: none; color: var(--rm-gold-2); }
.rm-point__ico svg { width: 100%; height: 100%; }
.rm-point__txt { font-size: clamp(0.78rem, 1vw, 0.88rem); line-height: 1.6; color: rgba(255, 255, 255, 0.92); font-weight: 500; }

.rm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 18px;
  min-width: clamp(240px, 26vw, 330px); padding: 18px 30px;
  border: 1px solid var(--rm-gold); border-radius: 2px;
  color: #fff; font-size: 0.96rem; font-weight: 600; letter-spacing: 0.06em;
  background: transparent; position: relative; overflow: hidden;
  transition: color 0.4s var(--rm-ease), border-color 0.4s var(--rm-ease);
}
.rm-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--rm-gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.46s var(--rm-ease);
}
.rm-btn:hover { color: var(--rm-navy); border-color: var(--rm-gold); }
.rm-btn:hover::before { transform: scaleX(1); }
.rm-btn .rm-arrow { transition: transform 0.4s var(--rm-ease); }
.rm-btn:hover .rm-arrow { transform: translateX(6px); }

/* 右側の添え書き */
.rm-intro__aside { color: #fff; text-align: right; max-width: 330px; }
.rm-intro__aside p {
  font-family: var(--rm-serif); font-size: clamp(1rem, 1.5vw, 1.32rem);
  line-height: 1.9; letter-spacing: 0.08em; margin: 0 0 22px; color: rgba(255, 255, 255, 0.95);
}
.rm-intro__aside .rm-rule { margin-left: auto; margin-bottom: 22px; }
.rm-intro__aside small {
  display: block; font-size: 0.66rem; letter-spacing: 0.17em; line-height: 2;
  color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 1100px) { .rm-intro__aside { display: none; } .rm-intro__grid { grid-template-columns: 1fr; } }

/* 下へどうぞ */
.rm-scroll {
  position: absolute; left: 50%; bottom: clamp(18px, 3vw, 34px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 2;
  font-size: 0.62rem; letter-spacing: 0.24em; color: rgba(255, 255, 255, 0.66);
}
.rm-scroll i { display: block; width: 1px; height: 42px; background: rgba(255, 255, 255, 0.32); position: relative; overflow: hidden; }
.rm-scroll i::after { content: ""; position: absolute; left: 0; width: 1px; height: 16px; background: var(--rm-gold-2); animation: rmScroll 2.2s var(--rm-ease) infinite; }
@keyframes rmScroll { 0% { top: -18px; } 100% { top: 46px; } }
@media (max-width: 820px) { .rm-scroll { display: none; } }

/* 読み込み時の登場 */
html.rm-js .rm-in { opacity: 0; transform: translateY(22px); filter: blur(4px); }
.rm-intro.is-ready .rm-in { animation: rmIn 0.86s var(--rm-ease) forwards; }
.rm-intro.is-ready .rm-in[data-rm-step="1"] { animation-delay: 0.05s; }
.rm-intro.is-ready .rm-in[data-rm-step="2"] { animation-delay: 0.18s; }
.rm-intro.is-ready .rm-in[data-rm-step="3"] { animation-delay: 0.32s; }
.rm-intro.is-ready .rm-in[data-rm-step="4"] { animation-delay: 0.46s; }
.rm-intro.is-ready .rm-in[data-rm-step="5"] { animation-delay: 0.6s; }
.rm-intro.is-ready .rm-in[data-rm-step="6"] { animation-delay: 0.74s; }
@keyframes rmIn { to { opacity: 1; transform: none; filter: none; } }

/* =========================================================
   3. 区切りの見出し（節の上に置く小さな札）
   ========================================================= */
.rm-label {
  display: flex; align-items: center; gap: 16px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.24em; color: var(--rm-gold);
  margin: 0 0 14px;
}
.rm-label::after { content: ""; flex: 1; height: 1px; background: var(--rm-line); }
.rm-label--center { justify-content: center; }
.rm-label--center::before { content: ""; width: 44px; height: 1px; background: var(--rm-line); }
.rm-label--center::after { flex: none; width: 44px; }

/* =========================================================
   4. スライダーまわりの余白調整（中身・動きには触れない）
   ========================================================= */
/* （旧）スライダーの高さ指定は 17節へ移した（スマホは元の16:9のまま） */
/* （旧）スライド文字への余白追加は、9文字の見出しが折れるのでやめた */
.rm-slider-head { padding: clamp(46px, 6vw, 76px) 0 clamp(20px, 2.6vw, 30px); text-align: center; background: #fff; }
.rm-slider-head h2 {
  font-family: var(--rm-serif); font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 600; letter-spacing: 0.04em; color: var(--rm-ink); margin: 0 0 10px;
}
.rm-slider-head p { margin: 0; color: var(--rm-ink-soft); font-size: clamp(0.86rem, 1.1vw, 0.96rem); }

/* =========================================================
   5. 動きを控える設定への配慮
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .rm-in, .rm-intro.is-ready .rm-in { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .rm-scroll i::after { animation: none; }
  .rm-intro__bg { transform: none !important; }
  .nav, .nav__links a::after, .rm-btn, .rm-btn::before { transition-duration: 0.01ms !important; }
}

/* =========================================================
   6. 明るい配色 / 暗い配色（テーマ切替）
   既存 style.css が使っている変数そのものを差し替えるので、
   個々の部品を直さなくてもサイト全体が付いてくる。
   ========================================================= */

/* ---- 明るい配色（既定）：白 × 紺 × 金 ---- */
:root {
  --rm-bg: #ffffff;
  --rm-surface: #ffffff;
  --rm-surface-2: #f6f8fb;
  --rm-text: #0d1726;
  --rm-border: rgba(13, 23, 38, 0.11);
  --rm-accent: #b89552;

  /* 既存の変数も白基調へ寄せる（青みがかった背景をやめる） */
  --bg: #ffffff;
  --text: #0d1726;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --text-soft: #46536a;
  --text-mute: #78849a;
  --line: rgba(13, 23, 38, 0.10);
  --line-strong: rgba(13, 23, 38, 0.17);
  --shadow-xs: 0 1px 2px rgba(13, 23, 38, 0.05);
  --shadow-sm: 0 4px 14px rgba(13, 23, 38, 0.06);
  --shadow: 0 14px 40px rgba(13, 23, 38, 0.10);
  --shadow-lg: 0 30px 70px rgba(13, 23, 38, 0.14);
}

/* ---- 暗い配色：紺 × 白 × 金 ---- */
:root[data-theme="dark"] {
  --rm-bg: #08111f;
  --rm-surface: #101b2c;
  --rm-surface-2: #16243a;
  --rm-text: #f2f5f9;
  --rm-border: rgba(255, 255, 255, 0.13);
  --rm-accent: #d1ad63;

  --rm-ink: #f2f5f9;
  --rm-ink-soft: #b6c1d1;
  --rm-ink-mute: #8593a7;
  --rm-gold: #d1ad63;
  --rm-gold-2: #e8d29a;
  --rm-line: rgba(255, 255, 255, 0.13);
  --rm-line-soft: rgba(255, 255, 255, 0.08);

  --bg: #08111f;
  --text: #f2f5f9;
  --surface: #101b2c;
  --surface-2: #16243a;
  --text-soft: #b6c1d1;
  --text-mute: #8593a7;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.2);
  --brand: #5aa9f0;
  --brand-2: #7cbcf5;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.42);
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.58);
  --ring: 0 0 0 4px rgba(209, 173, 99, 0.3);
}

/* 暗い配色のときのヘッダー */
:root[data-theme="dark"] .nav {
  background: rgba(10, 18, 31, 0.86);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .nav.rm-solid {
  background: rgba(10, 18, 31, 0.92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
:root[data-theme="dark"] .brand__mark {
  background: linear-gradient(145deg, #16243a 0%, #24395e 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(232, 210, 154, 0.4);
}
:root[data-theme="dark"] .nav__toggle { background: rgba(255, 255, 255, 0.06); color: var(--rm-text); }

/* 暗い配色のときの入力欄（読みやすさを保つ） */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background-color: #0e1928;
  color: var(--rm-text);
  border-color: rgba(255, 255, 255, 0.16);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #7b8a9e; }
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus {
  border-color: var(--rm-gold);
  box-shadow: 0 0 0 3px rgba(209, 173, 99, 0.25);
  outline: none;
}
:root[data-theme="dark"] option { background: #0e1928; color: var(--rm-text); }
:root[data-theme="dark"] input[type="checkbox"],
:root[data-theme="dark"] input[type="radio"] { accent-color: var(--rm-gold); }
:root[data-theme="dark"] :disabled { opacity: 0.55; }

/* キーボード操作の枠は両方の配色で必ず見えるように */
.nav__links a:focus-visible,
.nav__cta:focus-visible,
.rm-btn:focus-visible,
.rm-theme:focus-visible,
.app-card:focus-visible {
  outline: 2px solid var(--rm-gold);
  outline-offset: 3px;
}

/* =========================================================
   7. 配色の切り替えボタン
   ========================================================= */
/* （旧い切り替えボタンの指定は 10. に作り直したため削除） */
/* 切り替えた瞬間だけ、なめらかに色を変える（並びは動かさない） */
html.rm-theming body,
html.rm-theming .nav,
html.rm-theming .footer,
html.rm-theming .section,
html.rm-theming .section--soft,
html.rm-theming .app-card,
html.rm-theming .glass-card,
html.rm-theming .rm-slider-head,
html.rm-theming input,
html.rm-theming select,
html.rm-theming textarea,
html.rm-theming .btn,
html.rm-theming .rm-theme,
html.rm-theming .rm-theme span {
  transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

@media (max-width: 900px) {
  .rm-theme { margin-right: 4px; }
  .rm-theme span { width: 28px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html.rm-theming *, .rm-theme, .rm-theme span { transition: none !important; }
}

/* =========================================================
   8. システム一覧ページ（apps.html）
   ========================================================= */
.rm-eyebrow--dark { color: var(--rm-accent); }
.rm-rule--dark { background: var(--rm-accent); }
.rm-page-hero .crumbs { margin-bottom: 22px; }
.rm-page-hero h1 {
  font-family: var(--rm-serif); font-weight: 600; letter-spacing: 0.03em;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem); color: var(--rm-text); margin-bottom: 14px;
}
.rm-page-hero__tag {
  font-family: var(--rm-serif); font-size: clamp(1.02rem, 1.8vw, 1.42rem);
  font-weight: 600; letter-spacing: 0.05em; color: var(--rm-text); margin: 0 0 4px !important;
}
.rm-page-hero .rm-rule { margin: 22px 0 22px; }

body.rm-apps .apps-grid { gap: clamp(20px, 2.6vw, 32px); }
body.rm-apps .app-card {
  border-radius: 4px; border-color: var(--rm-border); background: var(--rm-surface);
  box-shadow: 0 1px 2px rgba(13, 23, 38, 0.04);
  transition: transform 0.38s var(--rm-ease), box-shadow 0.38s var(--rm-ease), border-color 0.38s var(--rm-ease);
}
body.rm-apps .app-card:hover {
  transform: translateY(-6px);
  border-color: rgba(184, 149, 82, 0.55);
  box-shadow: 0 22px 46px rgba(13, 23, 38, 0.12);
}
:root[data-theme="dark"] body.rm-apps .app-card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
:root[data-theme="dark"] body.rm-apps .app-card:hover { box-shadow: 0 22px 46px rgba(0, 0, 0, 0.5); }
body.rm-apps .app-card__thumb { border-radius: 0; overflow: hidden; }
body.rm-apps .app-card__thumb img { transition: transform 0.55s var(--rm-ease); }
body.rm-apps .app-card:hover .app-card__thumb img { transform: scale(1.035); }
body.rm-apps .app-card__badge {
  border-radius: 2px; background: rgba(8, 14, 24, 0.62); letter-spacing: 0.08em;
  font-size: 0.66rem; padding: 5px 10px;
}
body.rm-apps .app-card__body { padding: 26px 26px 24px; gap: 12px; }
body.rm-apps .app-card__body h3 { font-size: 1.1rem; letter-spacing: 0.01em; color: var(--rm-text); }
body.rm-apps .app-card__meta { border-top: 1px solid var(--rm-border); padding-top: 14px; margin-top: 14px; }
body.rm-apps .tag {
  border-radius: 2px; background: transparent; border: 1px solid var(--rm-border);
  color: var(--rm-ink-mute); font-weight: 600; letter-spacing: 0.06em; font-size: 0.68rem; padding: 5px 10px;
}
body.rm-apps .app-card__link {
  color: var(--rm-accent); letter-spacing: 0.04em; font-size: 0.86rem;
  transition: gap 0.34s var(--rm-ease);
}
body.rm-apps .app-card:hover .app-card__link { gap: 9px; }

/* カードが順番に現れる（1枚ずつ少し遅らせる） */
body.rm-apps .apps-grid .app-card.reveal { transition-delay: 0s; }
body.rm-apps .apps-grid .app-card:nth-child(2).reveal { transition-delay: 0.08s; }
body.rm-apps .apps-grid .app-card:nth-child(3).reveal { transition-delay: 0.16s; }
body.rm-apps .apps-grid .app-card:nth-child(4).reveal { transition-delay: 0.24s; }
body.rm-apps .apps-grid .app-card:nth-child(5).reveal { transition-delay: 0.08s; }
body.rm-apps .apps-grid .app-card:nth-child(6).reveal { transition-delay: 0.16s; }
body.rm-apps .apps-grid .app-card:nth-child(7).reveal { transition-delay: 0.24s; }


/* =========================================================
   9. ヒーローを配色に連動させる（明＝白い写真・紺の文字／暗＝黒い写真・白の文字）
   ========================================================= */
.rm-intro {
  --rm-intro-fg: #0d1726;
  --rm-intro-fg-soft: #46536a;
  --rm-hero-line: rgba(13, 23, 38, 0.16);
  background: #ffffff;
}
:root[data-theme="dark"] .rm-intro {
  --rm-intro-fg: #ffffff;
  --rm-intro-fg-soft: rgba(255, 255, 255, 0.84);
  --rm-hero-line: rgba(255, 255, 255, 0.18);
  background: var(--rm-navy);
}

/* 2枚の写真を配色で出し分ける */
.rm-intro__bg--dark { display: none; }
:root[data-theme="dark"] .rm-intro__bg--light { display: none; }
:root[data-theme="dark"] .rm-intro__bg--dark { display: block; }

/* 文字を読みやすくする薄い膜 */
.rm-intro__veil {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.82) 34%, rgba(255, 255, 255, 0.34) 58%, rgba(255, 255, 255, 0.06) 100%),
    linear-gradient(to top, rgba(255, 255, 255, 0.5), transparent 32%);
}
:root[data-theme="dark"] .rm-intro__veil {
  background:
    linear-gradient(100deg, rgba(8, 14, 24, 0.94) 0%, rgba(8, 14, 24, 0.86) 34%, rgba(8, 14, 24, 0.42) 58%, rgba(8, 14, 24, 0.18) 100%),
    linear-gradient(to top, rgba(8, 14, 24, 0.55), transparent 32%);
}

.rm-intro__text { color: var(--rm-intro-fg); }
.rm-intro__title { color: var(--rm-intro-fg); }
.rm-intro__lead { color: var(--rm-intro-fg-soft); }
.rm-eyebrow { color: var(--rm-accent); }
:root[data-theme="dark"] .rm-eyebrow { color: var(--rm-gold-2); }
.rm-point__txt { color: var(--rm-intro-fg); }
.rm-point__ico { color: var(--rm-accent); }
:root[data-theme="dark"] .rm-point__ico { color: var(--rm-gold-2); }
.rm-point + .rm-point::before { background: var(--rm-hero-line); }
.rm-intro__aside { color: var(--rm-intro-fg); }
.rm-intro__aside p { color: var(--rm-intro-fg); }
.rm-intro__aside small { color: var(--rm-intro-fg-soft); }
.rm-scroll { color: var(--rm-intro-fg-soft); }
.rm-scroll i { background: var(--rm-hero-line); }
.rm-scroll i::after { background: var(--rm-accent); }
:root[data-theme="dark"] .rm-scroll i::after { background: var(--rm-gold-2); }

/* ボタン：明るい配色では紺を塗って金の枠（参考画像どおり） */
.rm-btn {
  color: #ffffff; border-color: var(--rm-accent);
  background: var(--rm-navy);
  box-shadow: 0 10px 26px rgba(13, 23, 38, 0.18);
}
.rm-btn::before { background: var(--rm-accent); }
.rm-btn:hover { color: var(--rm-navy); }
:root[data-theme="dark"] .rm-btn {
  color: #fff; background: transparent; border-color: var(--rm-gold); box-shadow: none;
}
:root[data-theme="dark"] .rm-btn::before { background: var(--rm-gold); }
:root[data-theme="dark"] .rm-btn:hover { color: var(--rm-navy); }

/* スライダーの上の見出し帯 */
.rm-slider-head { background: var(--bg); }
.rm-slider-head h2 { color: var(--text); }
.rm-slider-head p { color: var(--text-soft); }

/* =========================================================
   10. 配色の切り替え（LIGHT | DARK の形・参考画像に合わせる）
   ========================================================= */
.rm-theme {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 4px; border: 0; background: transparent; cursor: pointer; flex: none; flex-wrap: nowrap;
}
.rm-theme__icons { display: inline-flex; align-items: center; gap: 5px; flex: none; flex-wrap: nowrap; }
.rm-theme__icons svg { width: 16px; height: 16px; display: block; transition: color 0.28s var(--rm-ease), opacity 0.28s var(--rm-ease); }
.rm-theme__icons .rm-theme__sun { color: var(--rm-accent); opacity: 1; }
.rm-theme__icons .rm-theme__moon { color: var(--rm-ink-mute); opacity: 0.55; }
:root[data-theme="dark"] .rm-theme__icons .rm-theme__sun { color: var(--rm-ink-mute); opacity: 0.55; }
:root[data-theme="dark"] .rm-theme__icons .rm-theme__moon { color: var(--rm-gold-2); opacity: 1; }
.rm-theme__labels { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; flex-wrap: nowrap; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; }
.rm-theme__labels i { font-style: normal; color: var(--rm-line); font-weight: 400; }
.rm-theme__l, .rm-theme__d { transition: color 0.28s var(--rm-ease); }
.rm-theme__l { color: var(--rm-ink); }
.rm-theme__d { color: var(--rm-ink-mute); }
:root[data-theme="dark"] .rm-theme__l { color: var(--rm-ink-mute); }
:root[data-theme="dark"] .rm-theme__d { color: var(--rm-ink); }
.rm-theme:hover .rm-theme__l, .rm-theme:hover .rm-theme__d { color: var(--rm-accent); }

/* 暗い写真の上に重なっているときだけ、白っぽく */
:root[data-theme="dark"] body.rm-over-hero .nav:not(.rm-solid) .rm-theme__l { color: rgba(255, 255, 255, 0.55); }
:root[data-theme="dark"] body.rm-over-hero .nav:not(.rm-solid) .rm-theme__d { color: #fff; }
:root[data-theme="dark"] body.rm-over-hero .nav:not(.rm-solid) .rm-theme__labels i { color: rgba(255, 255, 255, 0.25); }

@media (max-width: 1180px) { .rm-theme__labels { display: none; } .rm-theme { gap: 0; } }

/* ヘッダーの部品が詰まらないように */
.nav__actions { flex-wrap: nowrap; }
.nav__cta { white-space: nowrap; }
@media (max-width: 1340px) { .nav__inner { gap: 18px; } .nav__links { gap: 2px; } }

/* =========================================================
   11. ブランドロゴ（正式ロゴの画像。明暗で2種を出し分ける）
   ========================================================= */
.rm-brand { gap: 0; }
.rm-brand__img { height: 44px; width: auto; display: block; transition: height 0.38s var(--rm-ease); }
.nav.rm-solid .rm-brand__img { height: 36px; }
.rm-brand__img--dark { display: none; }
:root[data-theme="dark"] .rm-brand__img--light { display: none; }
:root[data-theme="dark"] .rm-brand__img--dark { display: block; }
@media (max-width: 900px) {
  .rm-brand__img { height: 34px; }
  .nav.rm-solid .rm-brand__img { height: 30px; }
}
@media (max-width: 400px) { .rm-brand__img { height: 30px; } }

/* スマホで文節の途中では折らない（rm- の見出し・本文） */
.rm-intro__lead, .rm-intro__aside p, .rm-page-hero__tag, .rm-slider-head h2, .rm-slider-head p, .rm-point__txt { word-break: auto-phrase; }

/* =========================================================
   12. スマホ幅での折り返し（文節の途中で割らない）
   見た目だけの指定。並びや仕組みには影響しない。
   ========================================================= */
@media (max-width: 860px) {
  .page-hero h1,
  .page-hero > .container > p,
  .section-title,
  .section-lead,
  .app-card__body h3,
  .app-card__body > p,
  .glass-card h3,
  .glass-card p,
  .cta-banner h2,
  .cta-banner p,
  .s-app__text > p,
  .s-checklist li,
  .s-use__body p,
  .rm-page-hero p {
    word-break: auto-phrase;
  }
}

/* スマホでは特徴が2行に折り返すので、区切りの縦線は出さない */
@media (max-width: 720px) {
  .rm-point + .rm-point::before { display: none; }
  .rm-points { gap: 16px 24px; }
  .rm-btn { width: 100%; min-width: 0; }
}

/* スマホでは文字が横いっぱいに広がるため、写真の上の膜を全面に効かせる
   （明るい配色で、紺の文字が写真の暗い部分に重なって読めなくなるのを防ぐ） */
@media (max-width: 820px) {
  .rm-intro__veil {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 62%, rgba(255, 255, 255, 0.62) 100%);
  }
  :root[data-theme="dark"] .rm-intro__veil {
    background:
      linear-gradient(180deg, rgba(8, 14, 24, 0.9) 0%, rgba(8, 14, 24, 0.84) 62%, rgba(8, 14, 24, 0.62) 100%);
  }
}

/* =========================================================
   13. 暗い配色のとき、白く塗られたままになる部品を直す
   style.css に色が直接書かれていて変数で追従できないもの。
   見た目だけの上書きで、動きには触れない。
   ========================================================= */
:root[data-theme="dark"] .glass-card {
  background: rgba(22, 36, 58, 0.62);
  border-color: rgba(255, 255, 255, 0.12);
}
:root[data-theme="dark"] .glass-card:hover { border-color: rgba(209, 173, 99, 0.5); }

/* スマホのメニュー（開いたとき） */
:root[data-theme="dark"] .nav__links.open {
  background: rgba(10, 18, 31, 0.96);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* AIチャット */
:root[data-theme="dark"] .chat-msg--bot { background: var(--surface-2); border-color: var(--line); color: var(--text); }
:root[data-theme="dark"] .chat-chip { background: var(--surface-2); color: var(--text-soft); }
:root[data-theme="dark"] .chat__form input { background: var(--surface-2); }

/* 白ボタン（スライドの「詳しく見る」など写真の上に置くもの）は白のまま。
   ただし文字色だけは読みやすい紺にそろえる。 */
:root[data-theme="dark"] .btn--white { color: var(--rm-navy); }

/* 暗い配色での読みやすさの補正（実測でコントラストが足りなかったもの） */
:root[data-theme="dark"] .badge--brand {
  background: rgba(209, 173, 99, 0.18);
  color: var(--rm-gold-2);
  border: 1px solid rgba(209, 173, 99, 0.4);
}
:root[data-theme="dark"] .badge--soft {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--text-soft);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
:root[data-theme="dark"] .stat b {
  background-image: linear-gradient(135deg, #6fb6f5 0%, #a8d6ff 100%);
}
:root[data-theme="dark"] .tag { background: rgba(90, 169, 240, 0.16); color: #8ec6f8; }

/* =========================================================
   14. ヒーローの写真を「横いっぱいの1枚」に見せる
   左半分を白く（黒く）覆いすぎると、写真が右半分だけに見えてしまうため、
   膜を薄くして写真を全幅で見せる。文字の読みやすさは影を添えて保つ。
   ========================================================= */
.rm-intro__veil {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.56) 38%, rgba(255, 255, 255, 0.2) 62%, rgba(255, 255, 255, 0.02) 100%),
    linear-gradient(to top, rgba(255, 255, 255, 0.3), transparent 34%);
}
:root[data-theme="dark"] .rm-intro__veil {
  background:
    linear-gradient(100deg, rgba(8, 14, 24, 0.88) 0%, rgba(8, 14, 24, 0.74) 38%, rgba(8, 14, 24, 0.32) 62%, rgba(8, 14, 24, 0.1) 100%),
    linear-gradient(to top, rgba(8, 14, 24, 0.4), transparent 34%);
}
.rm-intro__text, .rm-intro__aside { text-shadow: 0 1px 14px rgba(255, 255, 255, 0.85); }
:root[data-theme="dark"] .rm-intro__text,
:root[data-theme="dark"] .rm-intro__aside { text-shadow: 0 1px 16px rgba(4, 8, 14, 0.9); }

/* スマホは文字が横いっぱいに来るので、膜はやや強めのまま保つ */
@media (max-width: 820px) {
  .rm-intro__veil {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.8) 62%, rgba(255, 255, 255, 0.5) 100%);
  }
  :root[data-theme="dark"] .rm-intro__veil {
    background: linear-gradient(180deg, rgba(8, 14, 24, 0.86) 0%, rgba(8, 14, 24, 0.78) 62%, rgba(8, 14, 24, 0.55) 100%);
  }
}

/* 暗い配色で薄すぎた小さな文字 */
:root[data-theme="dark"] .s-visual-note { color: var(--text-soft); }
:root[data-theme="dark"] .s-status { color: var(--text-soft); }

/* 右側の添え文は写真の明暗が混ざる位置に来るので、そこだけ読みやすさを足す */
.rm-intro__aside {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95), 0 2px 20px rgba(255, 255, 255, 0.92);
}
:root[data-theme="dark"] .rm-intro__aside {
  text-shadow: 0 1px 2px rgba(4, 8, 14, 0.95), 0 2px 20px rgba(4, 8, 14, 0.92);
}
.rm-intro__veil {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.56) 38%, rgba(255, 255, 255, 0.26) 62%, rgba(255, 255, 255, 0.3) 100%),
    linear-gradient(to top, rgba(255, 255, 255, 0.3), transparent 34%);
}
:root[data-theme="dark"] .rm-intro__veil {
  background:
    linear-gradient(100deg, rgba(8, 14, 24, 0.88) 0%, rgba(8, 14, 24, 0.74) 38%, rgba(8, 14, 24, 0.38) 62%, rgba(8, 14, 24, 0.42) 100%),
    linear-gradient(to top, rgba(8, 14, 24, 0.4), transparent 34%);
}
@media (max-width: 820px) {
  .rm-intro__veil {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.8) 62%, rgba(255, 255, 255, 0.5) 100%);
  }
  :root[data-theme="dark"] .rm-intro__veil {
    background: linear-gradient(180deg, rgba(8, 14, 24, 0.86) 0%, rgba(8, 14, 24, 0.78) 62%, rgba(8, 14, 24, 0.55) 100%);
  }
}

/* 右の添え文の後ろだけ、ふわっとした膜を敷く（四角い板には見えないように） */
.rm-intro__aside {
  background: radial-gradient(72% 64% at 62% 46%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.5) 45%, rgba(255, 255, 255, 0) 78%);
  padding: 30px 10px 30px 30px;
  margin-right: -10px;
}
:root[data-theme="dark"] .rm-intro__aside {
  background: radial-gradient(72% 64% at 62% 46%, rgba(6, 11, 19, 0.7) 0%, rgba(6, 11, 19, 0.42) 45%, rgba(6, 11, 19, 0) 78%);
}

/* =========================================================
   15. 水色をやめて、紺 × 金へ
   style.css が青を作っている大元の3変数を置き換える。
   これで「お見積りは、その場で作れます」の帯や、丸い装飾、
   リンクの色などが、まとめて新しい雰囲気に揃う。
   ========================================================= */
:root {
  --brand: #14243c;
  --brand-2: #24395e;
  --grad-brand: linear-gradient(135deg, #0d1726 0%, #24395e 100%);
  --ring: 0 0 0 4px rgba(184, 149, 82, 0.28);
}
:root[data-theme="dark"] {
  --brand: #dfe6f1;
  --brand-2: #b6c1d1;
  --grad-brand: linear-gradient(135deg, #16243a 0%, #24395e 100%);
}

/* 「その場で作れます」の帯：緑がかった光をやめ、金の光に */
.cta-banner::after {
  background: radial-gradient(62% 100% at 100% 0%, rgba(201, 165, 74, 0.34), transparent 62%);
}
.cta-banner { border-radius: 4px; }
.cta-banner h2 { font-family: var(--rm-serif); font-weight: 600; letter-spacing: 0.04em; }
.cta-banner .btn--white {
  background: transparent; color: #fff; border: 1px solid var(--rm-gold-2);
  border-radius: 2px; box-shadow: none;
  transition: background 0.35s var(--rm-ease), color 0.35s var(--rm-ease);
}
.cta-banner .btn--white:hover { background: var(--rm-gold); color: var(--rm-navy); box-shadow: none; }

/* 「詳しく見る →」など、小さな誘導のリンクは金にする */
.glass-card__link, .app-card__link, .card__link, .eyebrow { color: var(--rm-accent); }
:root[data-theme="dark"] .glass-card__link,
:root[data-theme="dark"] .app-card__link,
:root[data-theme="dark"] .card__link,
:root[data-theme="dark"] .eyebrow { color: var(--rm-gold-2); }

/* 分類の札は、色つきの塗りをやめて細い枠に */
.tag {
  background: transparent; color: var(--rm-ink-soft);
  border: 1px solid var(--rm-border); border-radius: 2px; font-weight: 600; letter-spacing: 0.06em;
}
.badge--brand { background: var(--rm-navy); }

/* 丸い装飾・数字・チャットの見出しも紺に（--grad-brand 経由で自動的に追従） */
.stat b { background-image: var(--grad-brand); }

/* フッターのロゴ（ヘッダーより少し小さく） */
.rm-brand--footer .rm-brand__img { height: 38px; }
.nav.rm-solid .rm-brand--footer .rm-brand__img { height: 38px; }
@media (max-width: 900px) { .rm-brand--footer .rm-brand__img { height: 34px; } }

/* =========================================================
   16. 「お見積りは、その場で作れます」の帯を金色に
   ロッキーさんのご指示は「水色を、テキストで使っている金に」。
   帯そのものを金で塗り、文字は紺にして読みやすさを確保する。
   ========================================================= */
.cta-banner {
  background: linear-gradient(135deg, #b8923a 0%, #e7cf8a 46%, #c9a54a 100%);
  color: var(--rm-navy);
  box-shadow: 0 24px 60px rgba(150, 118, 46, 0.28);
}
.cta-banner::after {
  background: radial-gradient(62% 100% at 100% 0%, rgba(255, 255, 255, 0.46), transparent 62%);
}
.cta-banner h2 { color: var(--rm-navy); }
.cta-banner p { color: rgba(13, 23, 38, 0.82); }
.cta-banner .btn--white {
  background: var(--rm-navy); color: #fff; border: 1px solid var(--rm-navy);
  border-radius: 2px; box-shadow: 0 10px 26px rgba(13, 23, 38, 0.24);
}
.cta-banner .btn--white:hover {
  background: transparent; color: var(--rm-navy);
  box-shadow: 0 10px 26px rgba(13, 23, 38, 0.16);
}
:root[data-theme="dark"] .cta-banner {
  background: linear-gradient(135deg, #a8842f 0%, #e3c87f 46%, #c9a54a 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* 小さな文字で使う金は、白地で読めるよう一段濃くする（実測 2.8 → 4.7） */
:root { --rm-accent-ink: #8a6a24; }
:root[data-theme="dark"] { --rm-accent-ink: #e8d29a; }
.glass-card__link, .app-card__link, .card__link, .eyebrow,
.rm-eyebrow--dark, .rm-label { color: var(--rm-accent-ink); }
body.rm-apps .app-card__link { color: var(--rm-accent-ink); }

/* 暗い配色では、控えめな灰色が沈みすぎるので一段明るく（実測 2.3 → 5.4） */
:root[data-theme="dark"] { --rm-ink-mute: #9cabc0; }
:root[data-theme="dark"] .rm-nav__ja { color: #a7b5c8; }


/* =========================================================
   17. 1枚目の導入スライド（独立した節をやめ、スライダーの先頭に入れた）
   ・2段にせず、1つのスライダーの1枚目として見せる
   ・2枚目以降の既存7枚には一切影響しない
   ========================================================= */
@media (min-width: 821px) { body.rm-home .hero { height: clamp(560px, 88vh, 900px); min-height: 0; } }

.hero-slide--intro { isolation: isolate; background: var(--rm-navy); }
.hero-slide--intro .hero-slide__bg { z-index: 0; object-position: 68% 50%; }
.rm-intro__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.rm-intro {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center;
  padding-top: var(--rm-nav-h);
  padding-bottom: clamp(56px, 7vw, 92px);
  min-height: 0; background: none;
}
.rm-intro .container { position: relative; width: 100%; }
.rm-intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }

/* 明暗で背景写真を出し分ける（既存7枚は1枚のままなので影響なし） */
.rm-intro__bg--dark { display: none; }
:root[data-theme="dark"] .rm-intro__bg--light { display: none; }
:root[data-theme="dark"] .rm-intro__bg--dark { display: block; }

/* 登場の演出。スライドが表に出たときに再生する。
   JavaScript が動かない場合は最初から見えている（消えない作り） */
.hero-slide--intro .anim { opacity: 1; }
.hero .swiper-slide-active.hero-slide--intro .anim { animation: heroIn 0.8s var(--ease) both; }
.hero .swiper-slide-active.hero-slide--intro .rm-eyebrow.anim { animation-delay: 0.05s; }
.hero .swiper-slide-active.hero-slide--intro .rm-intro__title.anim { animation-delay: 0.18s; }
.hero .swiper-slide-active.hero-slide--intro .rm-intro__lead.anim { animation-delay: 0.3s; }
.hero .swiper-slide-active.hero-slide--intro .rm-rule.anim { animation-delay: 0.3s; }
.hero .swiper-slide-active.hero-slide--intro .rm-points.anim { animation-delay: 0.42s; }
.hero .swiper-slide-active.hero-slide--intro .hero-cta.anim { animation-delay: 0.54s; }
.hero .swiper-slide-active.hero-slide--intro .rm-intro__aside.anim { animation-delay: 0.66s; }

/* ページ送りの点が文字に重ならないよう、下に余白を足す */
@media (max-width: 1100px) { .rm-intro__aside { display: none; } .rm-intro__grid { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .rm-intro { padding-top: calc(var(--rm-nav-h) + 8px); padding-bottom: 78px; }
  .rm-intro__grid { gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .swiper-slide-active.hero-slide--intro .anim { animation: none !important; opacity: 1 !important; }
}

/* =========================================================
   18. 「準備中」のご案内（個人向けアクセス解析）
   ========================================================= */
.rm-soon {
  margin: 10px 0 0;
  font-size: 0.8rem; line-height: 1.7; font-weight: 600;
  color: var(--rm-accent); word-break: auto-phrase;
}
:root[data-theme="dark"] .rm-soon { color: var(--rm-gold-2); }
.rm-soon--lead {
  display: inline-block; margin: 6px 0 18px;
  font-size: 0.88rem;
  border-left: 2px solid var(--rm-accent); padding: 6px 0 6px 14px;
}

/* スマホ：既存7枚と同じ16:9の帯に、1枚目の中身をすっきり収める
   （7枚の画像を切らない、という元からの決まりを守るため） */
@media (max-width: 820px) {
  .rm-intro {
    position: absolute; inset: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    padding: 8px 18px; text-align: center;
  }
  .rm-intro .container { padding: 0; }
  .rm-intro__grid { grid-template-columns: 1fr; gap: 0; }
  .rm-intro__text { max-width: 100%; text-align: center; }
  .rm-intro__lead, .rm-points, .rm-intro__aside, .rm-intro .rm-rule { display: none; }
  .rm-intro__veil { background: linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.58)); }
  .rm-intro .rm-eyebrow {
    color: #e3c87f; font-size: 0.64rem; letter-spacing: 0.16em; margin-bottom: 6px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
  }
  .rm-intro__title {
    color: #fff; font-size: clamp(1.2rem, 5.6vw, 1.75rem); line-height: 1.3;
    margin: 0 0 12px; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  }
  .rm-intro .hero-cta { display: flex; justify-content: center; }
  .rm-intro .rm-btn {
    width: auto; min-width: 0; padding: 9px 20px; font-size: 0.84rem; gap: 10px;
    color: #fff; background: transparent; border-color: rgba(227, 200, 127, 0.9);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  }
  .rm-intro .rm-btn::before { background: var(--rm-gold-2); }
  .rm-intro .rm-btn:hover { color: var(--rm-navy); }
}

/* =========================================================
   19. 目にとまる注記（サイネージの用途・準備中のご案内）
   文字は小さく、でも枠と色で気づけるようにする
   ========================================================= */
.rm-note,
.rm-soon {
  margin: 12px 0 0;
  padding: 9px 12px 9px 13px;
  font-size: 0.76rem; line-height: 1.7; font-weight: 600;
  color: #7a5f1c;
  background: rgba(201, 165, 74, 0.13);
  border: 1px solid rgba(201, 165, 74, 0.42);
  border-left-width: 3px;
  border-radius: 2px;
  word-break: auto-phrase;
}
:root[data-theme="dark"] .rm-note,
:root[data-theme="dark"] .rm-soon {
  color: var(--rm-gold-2);
  background: rgba(209, 173, 99, 0.12);
  border-color: rgba(209, 173, 99, 0.42);
}
/* ページ本文に置くときは、少し大きめに */
.s-hero__text .rm-note,
.rm-soon--lead {
  font-size: 0.82rem; margin: 18px 0 20px; padding: 12px 14px 12px 16px;
  border-left-width: 3px;
}
.s-hero__text .rm-note { color: #f0e2bc; background: rgba(227, 200, 127, 0.14); border-color: rgba(227, 200, 127, 0.5); }
.rm-soon--lead { display: block; }

/* カードの中では、カード側の文字サイズ指定が勝ってしまうので指定し直す */
.app-card__body .rm-note, .app-card__body .rm-soon,
.glass-card .rm-note, .glass-card .rm-soon {
  font-size: 0.76rem; line-height: 1.7; flex: none;
}

/* =========================================================
   20. 「かんたん見積り」が暗い配色で見えなくなっていた件の修正
   原因：スライド写真の上の白ボタン用に入れた紺文字の指定が、
   見積りの帯のボタンにも効いて「紺の地に紺の文字」になっていた。
   触れると色が変わるため、最初だけ見えない状態だった。
   ========================================================= */
/* 紺文字にするのは、写真の上にある白いボタンだけに限定する */
:root[data-theme="dark"] .btn--white { color: inherit; }
:root[data-theme="dark"] .hero-slide .btn--white { color: var(--rm-navy); }

/* 見積りの帯のボタンは、どちらの配色でも最初から読める色を明示する */
.cta-banner .btn--white,
:root[data-theme="dark"] .cta-banner .btn--white {
  background: var(--rm-navy);
  color: #ffffff;
  border: 1px solid var(--rm-navy);
  box-shadow: 0 10px 26px rgba(13, 23, 38, 0.22);
}
.cta-banner .btn--white:hover,
:root[data-theme="dark"] .cta-banner .btn--white:hover {
  background: #1b2b45; color: #ffffff; border-color: #1b2b45;
}
/* 隣の「お問い合わせ」は枠線のボタンのまま */
.cta-banner .btn:not(.btn--white) { color: #ffffff; border-color: rgba(255, 255, 255, 0.7); }
:root[data-theme="dark"] .cta-banner .btn:not(.btn--white) { color: #ffffff; border-color: rgba(255, 255, 255, 0.7); }

/* =========================================================
   21. 暗い配色で、1枚目の写真が沈んでしまう件の修正
   黒い写真の上に濃い膜を重ねていたため、マウスの写真がほぼ黒に
   つぶれていた。膜を薄くして写真を見せ、文字は影で読ませる。
   ========================================================= */
:root[data-theme="dark"] .rm-intro__veil {
  background:
    linear-gradient(100deg, rgba(8, 14, 24, 0.84) 0%, rgba(8, 14, 24, 0.62) 40%, rgba(8, 14, 24, 0.2) 64%, rgba(8, 14, 24, 0.08) 100%),
    linear-gradient(to top, rgba(8, 14, 24, 0.3), transparent 34%);
}
/* 右の添え文の後ろの膜も薄くする（マウスが写っている場所なので） */
:root[data-theme="dark"] .rm-intro__aside {
  background: radial-gradient(70% 62% at 62% 46%, rgba(6, 11, 19, 0.42) 0%, rgba(6, 11, 19, 0.22) 48%, rgba(6, 11, 19, 0) 80%);
}
:root[data-theme="dark"] .rm-intro__aside p,
:root[data-theme="dark"] .rm-intro__aside small {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 16px rgba(0, 0, 0, 0.9);
}
/* スマホは文字が全面に来るので、従来どおり濃いままにする */
@media (max-width: 820px) {
  :root[data-theme="dark"] .rm-intro__veil {
    background: linear-gradient(180deg, rgba(8, 14, 24, 0.86) 0%, rgba(8, 14, 24, 0.78) 62%, rgba(8, 14, 24, 0.55) 100%);
  }
}

/* =========================================================
   22. ★1枚目で写真が隠れていた本当の原因
   `.rm-intro`（文字を載せる層）に、元のヒーロー用の背景色が
   残っていた。暗い配色の指定のほうが強く、紺一色が写真の上に
   かぶさっていた（明るい配色では打ち消されていたため出ていた）。
   どちらの配色でも、この層は必ず透明にする。
   ========================================================= */
.rm-intro,
:root[data-theme="dark"] .rm-intro,
:root:not([data-theme="dark"]) .rm-intro {
  background: none !important;
}

/* =========================================================
   23. 本文の折り返しを、画面幅にかかわらず文節で行う
   「…シンプル／に。」のように語の途中や末尾1文字で折れるのを防ぐ。
   12節はスマホ幅だけだったので、節のリード文などは全幅で効かせる。
   ========================================================= */
.section-lead,
.section-head p,
.page-hero > .container > p,
.rm-page-hero p,
.lead,
.s-hero__lead,
.rm-intro__lead,
.card p,
.feature p,
.glass-card p,
.app-card__body > p,
.s-use__body p,
.s-app__text > p,
.s-checklist li,
.rm-note,
.rm-soon,
.hint,
.sub,
.note,
.fld,
.s-visual-note,
.q-note,
li,
td,
th,
dd,
dt,
h1,
h2,
h3,
h4 {
  word-break: auto-phrase;
}

/* ============================================================
   §24  メニューの日本語（「私たちについて」）が2行に割れるのを防ぐ
   英語の見出しの幅で項目の幅が決まるため、日本語が長い項目だけ
   折り返していた。日本語も1行に保ち、項目の幅は広いほうに合わせる。
   ============================================================ */
.rm-nav__en,
.rm-nav__ja { white-space: nowrap; }