/* =====================================================================
   CircleReuse 本体サイト (circle-reuse.jp) — 共有スタイルシート
   Leadpages版の忠実再現 / Cloudflare Pages 移行用
   Brand: ディープグリーン #235C3B / ゴールド #C8963E / オフホワイト #FAF8F3
   Fonts: 見出し Shippori Mincho / 本文・UI Zen Kaku Gothic New
   ===================================================================== */

:root {
  --cr-green-900: #12271A;  /* フッター背景 */
  --cr-green-800: #16321F;  /* ヒーロー濃 */
  --cr-green-700: #235C3B;  /* ブランドグリーン */
  --cr-green-500: #2E7D4F;  /* アクセントグリーン */
  --cr-gold:      #C8963E;  /* ゴールド */
  --cr-gold-soft: #E8C77E;  /* ゴールド（淡） */
  --cr-cream:     #FAF8F3;  /* 背景オフホワイト */
  --cr-cream-2:   #F1F4EF;  /* 背景（淡グリーン） */
  --cr-ink:       #1A2420;  /* 本文 */
  --cr-ink-2:     #5E6B62;  /* 補足テキスト */
  --cr-line:      #ECE8DC;  /* 罫線 */
  --cr-wrap:      1120px;   /* コンテンツ幅 */
  --cr-r:         16px;     /* カード角丸（共通デザインシステムに合わせる） */
  --cr-r-sm:      12px;     /* 小要素の角丸 */
  --cr-shadow:    0 18px 40px -26px rgba(18,53,36,.35);   /* カードの浮遊感 */
  --cr-shadow-lg: 0 26px 54px -30px rgba(18,53,36,.45);
  --cr-font-head: 'Shippori Mincho', serif;
  --cr-font-body: 'Zen Kaku Gothic New', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background:
    radial-gradient(1100px 520px at 92% -6%, rgba(46,125,79,.06), transparent 60%),
    radial-gradient(900px 460px at -4% 8%, rgba(200,150,62,.06), transparent 60%),
    var(--cr-cream);
  background-attachment: fixed;
  color: var(--cr-ink);
  font-family: var(--cr-font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.8;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
::selection { background: var(--cr-gold); color: #fff; }

/* ---------- レイアウト共通 ---------- */
.cr-wrap { max-width: var(--cr-wrap); margin: 0 auto; padding: 0 24px; }
.cr-section { padding: 76px 0; }

/* ---------- ヘッダー ---------- */
.cr-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 248, 243, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #E5E2D8;
}
.cr-header__inner {
  max-width: var(--cr-wrap); margin: 0 auto;
  padding: 12px 24px; display: flex; align-items: center; gap: 20px;
}
.cr-header__logo { display: flex; align-items: center; gap: 10px; flex: none; }
.cr-header__logo img { height: 44px; width: auto; display: block; }
@media (max-width: 860px) { .cr-header__logo img { height: 38px; } }
.cr-nav {
  margin-left: auto; display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  justify-content: flex-end; row-gap: 8px;
}
.cr-nav a {
  font-size: 12.5px; font-weight: 500; color: #3C4A41; white-space: nowrap;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.cr-nav a:hover { color: var(--cr-green-700); border-bottom-color: var(--cr-green-500); }
.cr-nav__cta {
  font-size: 13px !important; font-weight: 700 !important; color: #fff !important;
  background: var(--cr-green-500); padding: 9px 18px; border-radius: 999px;
  box-shadow: 0 8px 18px -8px rgba(35,92,59,.7); border-bottom: none !important;
  transition: background .18s ease, transform .18s ease;
}
.cr-nav__cta:hover { background: var(--cr-green-700); }
/* モバイル: 折りたたみ（詳細メニュー） */
.cr-nav-toggle { display: none; }
@media (max-width: 1080px) {
  .cr-nav { gap: 12px; }
  .cr-nav a:not(.cr-nav__cta) { font-size: 12.5px; }
}
@media (max-width: 860px) {
  .cr-header__inner { flex-wrap: wrap; }
  .cr-nav-toggle {
    display: inline-flex; margin-left: auto; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; color: var(--cr-green-700);
    background: none; border: 1px solid #D3D8CC; border-radius: 4px;
    padding: 7px 13px; cursor: pointer; font-family: inherit;
  }
  .cr-nav {
    width: 100%; margin-left: 0; display: none; flex-direction: column;
    align-items: flex-start; gap: 2px; padding: 10px 0 6px;
  }
  .cr-nav.open { display: flex; }
  .cr-nav a { width: 100%; padding: 9px 4px; font-size: 14px; }
  .cr-nav__cta { width: 100%; text-align: center; margin-top: 6px; }
}

/* ---------- パンくず ---------- */
.cr-breadcrumb {
  background: var(--cr-cream); border-bottom: 1px solid var(--cr-line);
  font-size: 12px; color: #8A9286;
}
.cr-breadcrumb .cr-wrap { padding-top: 11px; padding-bottom: 11px; }
.cr-breadcrumb a { color: #8A9286; }
.cr-breadcrumb a:hover { color: var(--cr-green-700); }

/* ---------- ヒーロー ---------- */
.cr-hero { background: linear-gradient(180deg, #16321F 0%, #235C3B 100%); color: #F4F1E8; }
.cr-hero__eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .22em;
  color: var(--cr-gold-soft); border: 1px solid rgba(232,199,126,.4);
  padding: 6px 14px; border-radius: 99px; margin-bottom: 22px;
}
.cr-hero h1 {
  font-family: var(--cr-font-head); font-weight: 700;
  font-size: clamp(28px, 5vw, 44px); line-height: 1.42; color: #FCFAF3;
}
.cr-hero p.lead { font-size: 16px; line-height: 2.0; color: #D6DCCF; }
/* ヒーロー2カラム（左テキスト／右 紹介動画）— 本番忠実再現 */
.cr-hero__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 980px) { .cr-hero__grid { grid-template-columns: 1.05fr .95fr; gap: 56px; } }
.cr-player { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(18,53,36,.5); border: 1px solid rgba(18,53,36,.12); background: #0b1410; }
.cr-player::before { content: ""; display: block; padding-top: 56.25%; }
.cr-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cr-player-tag { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 14px; font-size: 13px; color: #D6DCCF; }
.cr-player-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cr-gold); flex: none; }

/* ---------- 見出し ---------- */
.cr-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .24em; color: var(--cr-green-500); }
.cr-eyebrow--en { letter-spacing: .1em; color: #9BB0A2; text-transform: none; }
.cr-h2 {
  font-family: var(--cr-font-head); font-weight: 700;
  font-size: clamp(23px, 4.2vw, 31px); line-height: 1.5; color: var(--cr-ink);
}
.cr-h3 { font-size: 18px; font-weight: 700; color: var(--cr-ink); }
.cr-lead { font-size: 15px; color: var(--cr-ink-2); line-height: 2.0; }

/* ---------- ボタン ---------- */
.cr-btn {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700;
  font-size: 15px; padding: 15px 30px; border-radius: 999px; cursor: pointer;
  border: none; font-family: inherit; text-align: center; justify-content: center;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.cr-btn:hover { transform: translateY(-3px) scale(1.015); }
.cr-btn--gold { background: var(--cr-gold); color: #1A1407; box-shadow: 0 12px 26px -10px rgba(200,150,62,.7); }
.cr-btn--gold:hover { background: #D3A24A; box-shadow: 0 16px 30px -10px rgba(200,150,62,.75); }
.cr-btn--green { background: var(--cr-green-500); color: #fff; box-shadow: 0 12px 26px -12px rgba(35,92,59,.7); }
.cr-btn--green:hover { background: var(--cr-green-700); }
.cr-btn--ghost { background: transparent; color: #F4F1E8; border: 1.5px solid rgba(244,241,232,.5); }
.cr-btn--ghost:hover { border-color: var(--cr-gold-soft); background: rgba(244,241,232,.06); }
.cr-btn--ghost-green { background: transparent; color: var(--cr-green-700); border: 1.5px solid rgba(35,92,59,.35); }
.cr-btn--ghost-green:hover { border-color: var(--cr-green-700); background: rgba(46,125,79,.06); }
/* 本番 .step-link 相当：淡ゴールドの丸ピル（FLOW各カードの導線ボタン） */
.cr-btn--step { background: var(--cr-gold-soft); color: var(--cr-green-800); border-radius: 999px; padding: 11px 20px; font-size: 14px; box-shadow: 0 6px 16px rgba(200,150,62,.28); }
.cr-btn--step:hover { background: #fff; color: var(--cr-green-800); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.14); }
.cr-btn--wide { width: 100%; }

/* ---------- カード ---------- */
.cr-card {
  background: #fff; border: 1px solid var(--cr-line); border-radius: var(--cr-r);
  padding: 28px 26px; box-shadow: var(--cr-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cr-card:hover { transform: translateY(-3px); box-shadow: var(--cr-shadow-lg); }
.cr-card img { border-radius: var(--cr-r-sm); }
/* ダーク（ヒーロー/機会損失）背景のカードは浮遊感を抑える */
.cr-hero .cr-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); box-shadow: none; }
.cr-hero .cr-card:hover { transform: none; box-shadow: none; }
.cr-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.cr-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.cr-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
@media (max-width: 960px) { .cr-grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 720px) {
  .cr-grid-2, .cr-grid-3, .cr-grid-4 { grid-template-columns: 1fr; }
}

/* 数値バッジ */
.cr-stat { }
.cr-stat__num {
  font-family: var(--cr-font-head); font-weight: 700; font-size: 40px;
  line-height: 1.1; color: #fff;
}
.cr-stat__num small { font-size: 20px; }
.cr-stat__label { font-size: 13px; margin-top: 8px; }

/* リスト（チェック） */
.cr-check { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cr-check li { position: relative; padding-left: 26px; font-size: 14px; color: var(--cr-ink-2); line-height: 1.85; }
.cr-check li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--cr-green-500); font-weight: 900;
}

/* バッジ */
.cr-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 99px; }
.cr-badge--gold { background: var(--cr-gold); color: #1A1407; }
.cr-badge--soft { background: var(--cr-gold-soft); color: var(--cr-green-800); }
.cr-badge--green { background: #EAF2EC; color: var(--cr-green-700); }
.cr-badge--muted { background: #F3ECDB; color: #9A8B5E; border: 1px solid #E7DCC0; }

/* 注記 */
.cr-note { font-size: 12px; color: #8A9286; line-height: 1.85; }

/* ---------- FAQ アコーディオン ---------- */
.faq-item { background: #fff; border: 1px solid #E2E5DC; border-radius: var(--cr-r-sm); overflow: hidden; box-shadow: var(--cr-shadow); }
.faq-q {
  width: 100%; display: flex; align-items: center; gap: 16px; text-align: left;
  padding: 18px 22px; background: none; border: none; cursor: pointer; font-family: inherit;
}
.faq-q .q-text { font-size: 15px; font-weight: 700; color: var(--cr-ink); flex: 1; }
.faq-q .q-icon { font-size: 20px; color: var(--cr-green-500); flex: none; transition: transform .2s; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.faq-a p { padding: 0 22px 20px; font-size: 14px; color: var(--cr-ink-2); line-height: 1.95; }
.faq-item.open .faq-a { max-height: 640px; }
.faq-item.open .q-icon { transform: rotate(45deg); }

/* ---------- フォーム ---------- */
.cr-form { background: #fff; border: 1px solid var(--cr-line); border-radius: var(--cr-r); padding: 34px 32px; box-shadow: var(--cr-shadow); }
.cr-form label.field { display: block; font-size: 13px; font-weight: 700; color: #3C4A41; margin-bottom: 16px; }
.cr-form input[type=text], .cr-form input[type=email], .cr-form input[type=tel], .cr-form select, .cr-form textarea {
  margin-top: 7px; width: 100%; padding: 12px 14px; border: 1px solid #DDE2D6;
  border-radius: 5px; background: #fff; font-family: inherit; font-size: 14px; color: var(--cr-ink);
}
.cr-form textarea { resize: vertical; line-height: 1.7; }
.cr-form .req { color: var(--cr-gold); font-size: 12px; }
.cr-form .opt { color: #9AA495; font-size: 12px; font-weight: 500; }
.cr-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .cr-form-grid-2 { grid-template-columns: 1fr; } }
.cr-form input::placeholder, .cr-form textarea::placeholder { color: #A7AFA2; }

/* 法的文書 */
.cr-legal h2 { font-family: var(--cr-font-head); font-size: 19px; color: var(--cr-green-700); margin: 34px 0 12px; padding-top: 8px; }
.cr-legal h3 { font-size: 15px; font-weight: 700; margin: 20px 0 8px; color: var(--cr-ink); }
.cr-legal p { font-size: 14px; color: #3C4A41; line-height: 1.95; margin-bottom: 12px; }
.cr-legal ol, .cr-legal ul { margin: 0 0 14px 1.4em; }
.cr-legal li { font-size: 14px; color: #3C4A41; line-height: 1.9; margin-bottom: 6px; }
.cr-legal .toc { background: #fff; border: 1px solid var(--cr-line); border-radius: 6px; padding: 22px 26px; }
.cr-legal .toc a { color: var(--cr-green-700); text-decoration: none; }
.cr-legal .toc a:hover { text-decoration: underline; }

/* ---------- 比較テーブル（料金プラン） ---------- */
.cr-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--cr-line); border-radius: var(--cr-r-sm); overflow: hidden; font-size: 14px; box-shadow: var(--cr-shadow); }
.cr-table th, .cr-table td { padding: 13px 16px; text-align: center; border-bottom: 1px solid var(--cr-line); }
.cr-table thead th { background: var(--cr-green-700); color: #fff; font-weight: 700; }
.cr-table tbody th { text-align: left; font-weight: 700; color: var(--cr-ink); background: var(--cr-cream-2); }
.cr-table tbody tr:last-child th, .cr-table tbody tr:last-child td { border-bottom: none; }
.cr-table td.yes { color: var(--cr-green-500); font-weight: 900; }
.cr-table td.no { color: #B9C0B4; }
.cr-table-wrap { overflow-x: auto; }

/* ---------- フッター ---------- */
.cr-footer { background: var(--cr-green-900); color: #AEB8A8; padding: 54px 0 30px; line-height: 1.75; }
.cr-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.08); }
.cr-footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cr-footer__brand img { height: 40px; width: auto; display: block; }
.cr-footer .lead { font-size: 12.5px; line-height: 1.9; color: #94A08F; max-width: 320px; }
.cr-footer .addr { font-size: 12px; color: #7E8B79; margin-top: 14px; line-height: 1.85; }
.cr-footer h4 { font-size: 12px; font-weight: 700; color: var(--cr-gold-soft); letter-spacing: .08em; margin-bottom: 14px; }
.cr-footer ul { list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.cr-footer a { color: #BDC6B6; }
.cr-footer a:hover { color: #fff; }
.cr-footer__legal { font-size: 11.5px; color: #74806F; margin-top: 22px; line-height: 1.8; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cr-footer__legal a { color: #8B9686; }
@media (max-width: 860px) { .cr-footer__grid { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 560px) { .cr-footer__grid { grid-template-columns: 1fr; } }

/* ============================================================
   ホバー強化（全ページ共通・2026-07-23）
   既存: nav / ボタン / カード / フッターリンク / パンくず は対応済。
   以下は未対応だった 要素にホバーの手応えを追加。
   ============================================================ */
/* ロゴ */
.cr-header__logo img { transition: opacity .18s ease; }
.cr-header__logo:hover img { opacity: .78; }

/* 画像・図版（循環図/スクショ等）を軽く持ち上げる。ロゴには効かせない */
.cr-flow-visual img, .cr-media { transition: transform .3s ease, box-shadow .3s ease; }
.cr-flow-visual:hover img, .cr-media:hover { transform: translateY(-3px) scale(1.025); box-shadow: var(--cr-shadow-lg); }

/* 統計/STEPカード */
.cr-stat { transition: transform .2s ease, box-shadow .2s ease; }
.cr-stat:hover { transform: translateY(-3px); box-shadow: var(--cr-shadow-lg); }

/* チェックリスト項目 */
.cr-check li { transition: color .18s ease; }
.cr-check li:hover { color: var(--cr-green-700); }

/* 本文中のテキストリンク（ボタン以外） */
.cr-lead a:not([class*="cr-btn"]), .lead a:not([class*="cr-btn"]), .cr-card p a:not([class*="cr-btn"]) { transition: color .18s ease; }
.cr-lead a:not([class*="cr-btn"]):hover, .lead a:not([class*="cr-btn"]):hover { color: var(--cr-green-700); text-decoration: underline; }

/* ============================================================
   アイコン（機能一覧・2026-07-23）
   カード見出し前・セクション見出し前に置く円形アイコンチップ。
   中に 24px の inline SVG（stroke=currentColor）を入れる。
   ============================================================ */
.cr-ficon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px;
  background: #EAF2EC; color: var(--cr-green-700);
  flex: none; transition: transform .2s ease, background .2s ease;
}
.cr-ficon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cr-card:hover .cr-ficon { transform: translateY(-2px); background: #DDECE1; }
.cr-ficon--gold { background: var(--cr-gold-soft); color: #7A5A16; }
/* 見出しにアイコンを添える行 */
.cr-h3-icon { display: flex; align-items: center; gap: 12px; }

/* ============================================================
   スマホ・モックアップ（機能一覧・2026-07-23）
   スクショ画像をブラウザchrome付きの端末フレームで包む。
   ============================================================ */
.cr-phone {
  width: 300px; max-width: 82%; margin: 0 auto;
  background: #12271A; border-radius: 44px; padding: 12px;
  box-shadow: var(--cr-shadow-lg);
  transition: transform .3s ease, box-shadow .3s ease;
}
.cr-phone:hover { transform: translateY(-4px); box-shadow: 0 34px 66px -28px rgba(18,53,36,.5); }
.cr-phone__screen { background: #fff; border-radius: 33px; overflow: hidden; position: relative; }
.cr-phone__notch {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 116px; height: 22px; background: #12271A; border-radius: 99px; z-index: 3;
}
.cr-phone__screen img { display: block; width: 100%; border: 0; border-radius: 0; }

/* ============================================================
   仕様テーブル（CSV出力・プラン別／機能一覧・2026-07-23）
   ============================================================ */
.cr-spec { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border-radius: var(--cr-r-sm); overflow: hidden; box-shadow: var(--cr-shadow); }
.cr-spec th, .cr-spec td { padding: 13px 16px; text-align: center; border-bottom: 1px solid var(--cr-line); }
.cr-spec thead th { background: var(--cr-green-700); color: #fff; font-weight: 700; font-size: 13px; }
.cr-spec tbody th { text-align: left; color: var(--cr-ink); font-weight: 700; background: var(--cr-cream-2); }
.cr-spec td.yes { color: var(--cr-green-500); font-weight: 900; }
.cr-spec td.no { color: #B9B09A; }
.cr-spec tbody tr:last-child th, .cr-spec tbody tr:last-child td { border-bottom: 0; }
.cr-spec-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }