@charset "UTF-8";
/* ==========================================================================
   tools/_shared/layout.css
   Roboma tools 共通レイアウト（ヘッダー / フッター / CTAブロック / ボタン / カード）
   前提: tokens.css を先に読み込むこと
   命名規則: すべて .rm- プレフィックス。本体 LP のクラス名とは衝突させない
   ========================================================================== */

/* --- 最小リセット（本体 LP の reset.css は読まない） ------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--rm-font);
  font-size: var(--rm-fs-base);
  line-height: var(--rm-lh);
  letter-spacing: var(--rm-ls);
  color: var(--rm-text);
  background: var(--rm-bg);
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; text-decoration: none; transition: 0.25s; }
button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
table { border-collapse: collapse; }

/* --- コンテナ ---------------------------------------------------------- */
.rm-container {
  width: 100%;
  max-width: var(--rm-container-tool);   /* 診断本文は LP より狭い 880px */
  margin: 0 auto;
  padding: 0 var(--rm-space-4);
}
.rm-container--wide { max-width: var(--rm-container); }  /* 規約の 1200px */

/* --- ヘッダー（本体 LP のロゴ + 最小ナビ） ------------------------------ */
.rm-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--rm-header-h);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--rm-border);
}
.rm-header__inner {
  height: 100%;
  max-width: var(--rm-container-wide);
  margin: 0 auto;
  padding: 0 var(--rm-space-4);
  display: flex;
  align-items: center;
  gap: var(--rm-space-4);
}
.rm-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.rm-header__logo img { width: 108px; }
.rm-header__nav {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: var(--rm-space-5);
  font-size: var(--rm-fs-sm);
  font-weight: 700;
}
.rm-header__nav a:hover { color: var(--rm-blue); }
.rm-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--rm-space-3); }
.rm-header__nav + .rm-header__actions { margin-left: 0; }

@media (min-width: 900px) {
  .rm-header__nav { display: flex; }
  .rm-header__logo img { width: 128px; }
}

/* --- ボタン（brand-tokens.md の .rm-btn 系に準拠） --------------------- */
.rm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rm-space-2);
  min-height: 48px;            /* タップ領域の確保（規約の padding に加えて指定） */
  padding: 14px var(--rm-space-6);
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
}
.rm-btn--sm { min-height: 38px; padding: 8px var(--rm-space-4); font-size: var(--rm-fs-sm); border-width: 1px; }
.rm-btn--block { width: 100%; }

/* 強CTA（プライマリ）— 無料トライアル等
   配色のみ規約の --rm-gradient-cta ではなく LP の CTA 配色を使う（tokens.css § 2 参照） */
.rm-btn-primary {
  background: var(--rm-cta-gradient);
  color: var(--rm-text-invert);
  box-shadow: 0 8px 24px rgba(255, 90, 80, 0.30);
}
.rm-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 90, 80, 0.40);
}

/* 弱CTA（セカンダリ）— 資料DL・相談等 */
.rm-btn-secondary {
  background: var(--rm-bg-white);
  color: var(--rm-blue);
  border-color: var(--rm-blue);
}
.rm-btn-secondary:hover { background: var(--rm-bg-active); }

/* 以下はツール内の操作系ボタン（CTA ではない）。CTA と混同させないため塗りを変える */
.rm-btn--blue { background: var(--rm-blue); color: var(--rm-text-invert); }
.rm-btn--blue:hover { background: var(--rm-blue-dark); }

.rm-btn--ghost { background: transparent; border-color: var(--rm-border-strong); color: var(--rm-text-sub); }
.rm-btn--ghost:hover { border-color: var(--rm-blue); color: var(--rm-blue); }

.rm-btn[disabled] { opacity: 0.45; pointer-events: none; }

/* --- カード ------------------------------------------------------------ */
.rm-card {
  background: #fff;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  padding: var(--rm-space-5);
  box-shadow: var(--rm-shadow-sm);
}
.rm-card--soft { background: var(--rm-bg-soft); border-color: transparent; box-shadow: none; }
.rm-card--navy { background: var(--rm-bg-navy); border-color: transparent; color: var(--rm-text-invert); }

/* --- セクション見出し -------------------------------------------------- */
.rm-section { padding: var(--rm-space-7) 0; }
.rm-section--soft { background: var(--rm-bg-soft); }
.rm-eyebrow {
  display: inline-block;
  font-size: var(--rm-fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--rm-blue);
  margin-bottom: var(--rm-space-2);
}
.rm-h2 { font-size: var(--rm-fs-xl); font-weight: 700; line-height: 1.4; }
.rm-h3 { font-size: var(--rm-fs-md); font-weight: 700; line-height: 1.5; }
.rm-lead { color: var(--rm-text-sub); font-size: var(--rm-fs-base); }
.rm-note { color: var(--rm-text-mute); font-size: var(--rm-fs-xs); line-height: 1.7; }

/* --- 共通CTAブロック（結果画面下部 / 各ツール末尾で使う） ---------------- */
.rm-ctablock {
  background: var(--rm-bg-navy);
  color: var(--rm-text-invert);
  border-radius: var(--rm-radius-lg);
  padding: var(--rm-space-6) var(--rm-space-5);
  text-align: center;
}
.rm-ctablock__title { font-size: var(--rm-fs-lg); font-weight: 700; line-height: 1.5; }
.rm-ctablock__desc { margin-top: var(--rm-space-3); font-size: var(--rm-fs-sm); color: rgba(255, 255, 255, 0.78); }
.rm-ctablock__btns {
  margin-top: var(--rm-space-5);
  display: grid;
  gap: var(--rm-space-3);
}
.rm-ctablock__note { margin-top: var(--rm-space-4); font-size: var(--rm-fs-xs); color: rgba(255, 255, 255, 0.6); }
@media (min-width: 640px) {
  .rm-ctablock { padding: var(--rm-space-7) var(--rm-space-6); }
  .rm-ctablock__btns { grid-template-columns: 1fr 1fr; }
}

/* --- 「Roboma とは」ブロック（単独着地対策） --------------------------- */
.rm-about { display: grid; gap: var(--rm-space-4); }
.rm-about__points { display: grid; gap: var(--rm-space-3); }
.rm-about__point {
  display: flex;
  gap: var(--rm-space-3);
  font-size: var(--rm-fs-sm);
  line-height: 1.7;
}
.rm-about__point::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-top: 0.7em;
  border-radius: 50%;
  background: var(--rm-cyan);
}
@media (min-width: 720px) {
  .rm-about__points { grid-template-columns: repeat(3, 1fr); }
}

/* --- フッター（本体 LP のリンク構成に準拠） ----------------------------- */
.rm-footer {
  margin-top: var(--rm-space-8);
  padding: var(--rm-space-7) 0 var(--rm-space-6);
  background: var(--rm-bg-navy);
  color: var(--rm-text-invert);
}
/* 本体 LP のロゴは濃色地では読めないため、白地の板に載せる
   （白版ロゴが用意されたら background / padding を外す） */
.rm-footer__logo img {
  width: 132px;
  background: #fff;
  padding: 8px 12px;
  border-radius: var(--rm-radius-sm);
  box-sizing: content-box;
}
.rm-footer__desc {
  margin-top: var(--rm-space-3);
  font-size: var(--rm-fs-xs);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
}
.rm-footer__nav {
  margin-top: var(--rm-space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--rm-space-3) var(--rm-space-5);
  font-size: var(--rm-fs-xs);
}
.rm-footer__nav a { color: rgba(255, 255, 255, 0.82); }
.rm-footer__nav a:hover { color: var(--rm-cyan); }
.rm-footer__legal {
  margin-top: var(--rm-space-6);
  padding-top: var(--rm-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--rm-fs-xs);
  color: rgba(255, 255, 255, 0.55);
}

/* --- ユーティリティ ---------------------------------------------------- */
.rm-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.rm-stack > * + * { margin-top: var(--rm-space-4); }
.rm-center { text-align: center; }
.rm-num {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* --- 印刷（PDF 化）共通 ------------------------------------------------
   結果ページをそのまま印刷する方針。紙で意味を持たない要素だけを外す。
   （ヘッダー/フッター/CTA/フォーム/シェア/再診断は .rm-no-print と併せて非表示） */
@media print {
  .rm-header, .rm-footer, .rm-ctablock, .rm-no-print { display: none !important; }
  body { background: #fff; }
  /* 画面幅に依存した中央寄せ・余白を印刷幅に合わせる（左右に少し余白を残す） */
  .rm-container, .rm-container--wide { max-width: none; padding: 0; }
  .rm-card { border-color: #D8DCE6; }
}