@charset "UTF-8";
/* ------------------------------------------------------------------
   v3「高級感」上書き層（2026-09-16）

   Inspo（実在サイトの設計資料）で「高級感のあるシステム販売ページ」を
   調べ、次の3つを手本にした。
     - Arcway（不動産向けSaaS）: 中央揃えの細い明朝、広い余白、
       薄い暖色のもやの上に浮かぶ製品画像の額縁
     - HUMAHOME（不動産）: 全面写真の上に白い細い明朝を左下に置く。
       写真の上に小さな「タグ」を1本
     - Tana（SaaS）: 紺の面に細い明朝、要素を減らして静かに見せる
   共通していたのは「紙の色は中間の明るさ」「金は罫線と小さな文字だけ」
   「見出しは細く大きく」「余白は 80〜160px」。

   top.css の後に読み込む。戻すときは index.html からこのファイルの
   読み込みを外し、_backup/2026-09-16_v2/ の2ファイルを戻す。
   ------------------------------------------------------------------ */

:root {
  --paper: #f6f2eb;
  --ivory: #fbf9f4;
  --sand: #ece6da;
  --navy: #0b1626;
  --navy-600: #14233a;
  --navy-500: #22334d;
  --ink: #141c27;
  --ink-soft: #5d6572;
  --rule: #d9d1c3;
  --gold: #c9a84c;
  --gold-700: #8f7030;
  --wrap: 1120px;
  --rhythm: clamp(5rem, 10vw, 8.5rem);   /* セクションの間隔。全部これで揃える */
}

body { background: var(--paper); }

/* ---- 書体：見出しは細く大きく ---------------------------------------- */
h1, h2, h3 { font-weight: 500; }
h2 {
  font-weight: 400;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  letter-spacing: .01em;
  line-height: 1.35;
}
h3 { font-size: 1.1rem; }
.lead { font-size: 1rem; line-height: 2; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .32em;
  color: var(--gold-700);
  margin-bottom: 1.2rem;
}
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: var(--gold); }
.head.center { text-align: center; max-width: 46em; margin-inline: auto; }
.head.center .eyebrow { justify-content: center; }
.head.center .measure, .head.center .lead { margin-inline: auto; }
.head-sub { margin-top: 1rem; font-family: var(--mincho); font-size: 1.05rem; color: var(--ink-soft); }

.band { padding: var(--rhythm) 0; }
.band.paper { background: var(--paper); }
.band.sand { background: var(--sand); }

/* ---- ボタン：丸く、控えめに ------------------------------------------ */
.btn {
  border-radius: 999px;
  padding: .95em 2.3em;
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .06em;
}
.btn-line { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-line:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* ---- ヘッダー：写真の上では透明、送ると紺に ---------------------------- */
.site-head {
  position: fixed;
  left: 0; right: 0; top: 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  transition: background .35s ease, border-color .35s ease;
}
.site-head.scrolled {
  background: rgba(11,22,38,.84);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom-color: rgba(255,255,255,.08);
}
.site-head .inner { height: 74px; }
.site-head img { height: 28px; }
.site-nav { font-size: .78rem; letter-spacing: .14em; }
.site-links { gap: 1.8rem; }
.site-nav .btn { padding: .65em 1.5em; font-size: .74rem; }

/* ---- ヒーロー：全面写真、左下に白い明朝 ------------------------------- */
.hero {
  min-height: 100svh;
  padding: 7rem 0 0;
  justify-content: flex-end;
}
.hero-bg img { animation-duration: 150s; }
.hero-bg::after {
  background:
    linear-gradient(180deg, rgba(11,22,38,.38) 0%, rgba(11,22,38,.06) 32%, rgba(11,22,38,.50) 72%, rgba(11,22,38,.94) 100%),
    linear-gradient(90deg, rgba(11,22,38,.50) 0%, rgba(11,22,38,.14) 48%, rgba(11,22,38,0) 100%);
}
.hero-grid { padding-bottom: clamp(2.2rem, 5vh, 3.6rem); }
.hero-copy { max-width: 760px; }

.hero-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 2rem;
  padding: .5em 1.2em;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: rgba(11,22,38,.28);
  backdrop-filter: blur(8px);
  font-size: .64rem;
  letter-spacing: .22em;
  color: #fff;
}
.hero-chip span + span::before { content: "·"; margin: 0 .9em; color: var(--gold); }

.hero-h1 { gap: .12em; line-height: 1.1; }
.h1-lead {
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  letter-spacing: .08em;
  color: #fff;
}
.h1-price {
  font-weight: 400;
  font-size: clamp(3.6rem, 9vw, 7.4rem);
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 2px 40px rgba(0,0,0,.35);
}
.h1-yen, .h1-unit { font-size: .38em; font-weight: 400; }
.hero .sub {
  margin-top: 1.4rem;
  font-size: clamp(.95rem, 1.4vw, 1.06rem);
  line-height: 2;
  color: rgba(255,255,255,.88);
}
.hero .cta-row { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.hero .btn { font-size: .9rem; padding: 1em 2.5em; }
.btn-note { color: rgba(255,255,255,.6); font-size: .76rem; }

/* 下端の細い帯に3つの約束 */
.hero-foot {
  position: relative;
  z-index: 1;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,.18);
  padding-top: 1.2rem;
  padding-bottom: 1.6rem;
}
.hero-marks {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .5rem 2.6rem;
  font-size: .8rem; letter-spacing: .06em; color: rgba(255,255,255,.86);
}
.hero-marks li { padding: 0; margin: 0; display: flex; align-items: center; gap: .7em; }
.hero-marks li::before {
  content: ""; position: static; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); flex: none;
}
.hero-scroll, .arc.horizon, .arc.gold { display: none; }

@media (max-width: 760px) {
  .hero { padding-top: 6rem; }
  .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(11,22,38,.55) 0%, rgba(11,22,38,.25) 30%, rgba(11,22,38,.62) 60%, rgba(11,22,38,.96) 100%);
  }
  .hero-chip { font-size: .58rem; letter-spacing: .16em; }
  .hero-marks { gap: .4rem 1.4rem; font-size: .74rem; }
}

/* ---- 問題提起：番号つきの3段組、罫だけで区切る --------------------------- */
.excess {
  margin-top: 3rem;
  padding: 0;
  list-style: none;
  counter-reset: ex;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 720px) { .excess { grid-template-columns: repeat(3, 1fr); gap: 0; } }
.excess li {
  counter-increment: ex;
  display: block;
  padding: 2rem 1.8rem 2.2rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}
@media (min-width: 720px) {
  .excess li { padding: 2.4rem 2rem; border-bottom: 1px solid var(--rule); }
  .excess li:first-child { padding-left: 0; }
  .excess li + li { border-left: 1px solid var(--rule); }
}
.excess li::before {
  content: "0" counter(ex);
  display: block;
  margin-bottom: 1.1rem;
  font-family: var(--mincho);
  font-size: .8rem;
  letter-spacing: .24em;
  color: var(--gold-700);
}
.excess b {
  display: block;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: .04em;
  margin-bottom: .7rem;
  color: var(--ink);
}
.excess span { display: block; font-size: .92rem; line-height: 1.9; color: var(--ink-soft); }
.risk-close { margin-top: 2.6rem; text-align: center; margin-inline: auto; }

/* ---- 360°の1枚：薄いもやの上に額縁で置く（Arcway の手法） ------------- */
.shot {
  padding: var(--rhythm) 0;
  background:
    radial-gradient(120% 90% at 50% 0%, #ffffff 0%, var(--paper) 50%, #eadfc9 100%);
}
.frame {
  position: relative;
  margin: 3.2rem auto 0;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 50px 100px -50px rgba(11,22,38,.55),
    0 0 0 1px rgba(11,22,38,.06);
}
.frame img {
  display: block;
  width: 100%;
  aspect-ratio: 2.35 / 1;
  object-fit: cover;
  object-position: 50% 42%;
}
.frame figcaption {
  position: absolute;
  left: 1.2rem; bottom: 1.2rem;
  padding: .55em 1.2em;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--ink);
}
@media (max-width: 640px) {
  .frame { border-radius: 12px; }
  .frame img { aspect-ratio: 16 / 10; }
}

/* ---- 機能：枠を外し、写真とタイトルだけで並べる -------------------------- */
.promise-head { margin-bottom: 3rem; }
.rail { gap: 1.8rem 1.6rem; }
@media (max-width: 640px) { .rail { gap: 1.2rem .9rem; } }
.pcard {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.pcard img {
  border-radius: 12px;
  border: 1px solid rgba(11,22,38,.08);
  background: #fff;
  transition: transform .35s ease, box-shadow .35s ease;
}
.pcard .body { padding: 1.05rem .15rem 1rem; }
.pcard .ttl { font-weight: 500; font-size: 1.04rem; }
.pcard.wide .ttl { font-size: 1.2rem; }
.pcard .ln { font-size: .86rem; }
.pcard .more { font-weight: 500; font-size: .66rem; letter-spacing: .16em; opacity: .8; }
.pcard .ba-wrap { border-radius: 12px; overflow: hidden; border: 1px solid rgba(11,22,38,.08); }
.pcard .ba-wrap img { border: 0; border-radius: 0; }
@media (hover: hover) and (pointer: fine) {
  .pcard:hover, .pcard:focus-visible { transform: none; box-shadow: none; border-color: transparent; }
  .pcard:hover img, .pcard:hover .ba-wrap {
    transform: translateY(-4px);
    box-shadow: 0 28px 48px -28px rgba(11,22,38,.55);
  }
  .pcard:hover .ba-wrap img { transform: none; }
}

/* ---- 作り手：紺の面に細い明朝。大きさは前回の指示のまま小さく --------------- */
.founder-band { background: var(--navy); }
.founder-band .head h2 { font-weight: 400; }
.founder-band .founder-photo img { border: 0; border-radius: 10px; }
.founder-band .founder-body { color: rgba(255,255,255,.8); }

/* ---- 3ステップ：大きな番号と罫だけ ----------------------------------------- */
.steps { margin-top: 3rem; gap: 0; border-top: 1px solid var(--rule); }
.steps li {
  display: block;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 2rem 0 2.2rem;
}
@media (min-width: 780px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .steps li { padding: 2.4rem 2rem; }
  .steps li:first-child { padding-left: 0; }
  .steps li + li { border-left: 1px solid var(--rule); }
  .steps li + li::before { content: none; }
}
.steps .step-no {
  display: block;
  width: auto; height: auto;
  margin-bottom: 1rem;
  background: transparent;
  color: var(--gold-700);
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: .06em;
}
.steps .step-no::before { content: "0"; }
.steps h3 { font-weight: 500; margin-bottom: .5rem; }
.steps-cta { margin-top: 2.6rem; }
.steps-cta .btn { background: var(--navy); border-color: var(--navy); color: #fff; }
.steps-cta .btn:hover { background: var(--navy-600); }

/* ---- 料金：象牙色の角丸カード。おすすめだけ紺で塗る ------------------------- */
.cards { gap: 1.2rem; margin-top: 3rem; }
.card {
  border-radius: 18px;
  border: 1px solid var(--rule);
  background: var(--ivory);
  padding: 2.2rem 1.8rem 2rem;
}
.card .tier {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .76rem;
  letter-spacing: .26em;
  color: var(--ink-soft);
}
.card .price { font-weight: 400; font-size: 2.7rem; letter-spacing: .01em; }
.card .pick-mark { border-radius: 999px; font-weight: 500; letter-spacing: .22em; }
.card .btn-line { color: var(--navy); border-color: var(--rule); background: transparent; }
.card .btn-line:hover { background: rgba(11,22,38,.05); border-color: var(--navy); color: var(--navy); }
.card.pick {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  border-top: 1px solid var(--navy);
  box-shadow: 0 50px 90px -46px rgba(11,22,38,.7);
}
.card.pick .tier, .card.pick .price small, .card.pick .yearly, .card.pick li.off { color: rgba(255,255,255,.6); }
.card.pick ul { border-top-color: rgba(255,255,255,.15); }
.card.pick li::before { border-color: var(--gold); }
.card.pick li.off::before { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.2); }
@media (min-width: 860px) { .card.pick { transform: scale(1.03); } }

.more-plans { margin-top: 2.2rem; }
.fine.notes { margin-top: 2.4rem; }

/* ---- FAQ ------------------------------------------------------------------ */
.faq { margin-top: 2.6rem; }
.faq summary { font-weight: 500; font-size: 1.02rem; padding: 1.45rem 2.5rem 1.45rem 0; }

/* ---- 末尾のCTA：写真の上に細い明朝を中央に -------------------------------- */
.tail {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  padding: calc(var(--rhythm) * 1.15) 0;
}
.tail-bg { position: absolute; inset: 0; }
.tail-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: .6; }
.tail-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,22,38,.55) 0%, rgba(11,22,38,.82) 100%);
}
.tail .wrap { position: relative; z-index: 1; }
.tail h2 { font-weight: 400; font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.tail p { font-size: .92rem; line-height: 2; }
.tail .ai-note {
  position: absolute;
  right: 1rem; bottom: .7rem;
  z-index: 1;
  margin: 0;
  font-size: .62rem;
  letter-spacing: .08em;
  color: rgba(255,255,255,.45);
}

/* ---- フッター ---------------------------------------------------------------- */
.site-foot { background: #070e1a; }

/* top.css 側の金の太い上罫（.excess li）を消す。区切りは細い罫だけにする */
.excess li { border-top: 0; }
.excess b::before { content: none; }

/* ---- 360°の1枚：本物のパノラマを額縁の中で動かす ---------------------------- */
.frame { aspect-ratio: 2.35 / 1; }
@media (max-width: 640px) { .frame { aspect-ratio: 16 / 10; } }
.frame .pano-poster { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; transition: opacity .6s ease; }
.frame .pano { position: absolute; inset: 0; cursor: grab; }
.frame .pano:active { cursor: grabbing; }
.frame.pano-ready .pano-poster { opacity: 0; pointer-events: none; }
.frame .pano-hint {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: .6em 1.3em;
  border-radius: 999px;
  background: rgba(11,22,38,.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .74rem;
  letter-spacing: .12em;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}
.frame.pano-ready .pano-hint { opacity: 1; }
.frame.pano-ready .pano-hint.off { opacity: 0; }
.frame figcaption { z-index: 2; }
/* Pannellum の読み込み表示と自前の影は使わない */
.frame .pnlm-load-box { display: none; }
.frame .pnlm-container { background: transparent; }