/* ==========================================================
   MeCloud LP① — amzigo.com 準拠スタイル
   クリーム→ラベンダーのグラデ帯／鮮やかバイオレット／
   モノスペースeyebrow／浮遊カード(パララックス)／紫メガパネル
   ========================================================== */

:root{
  --vio:#6C3BF4;          /* 主役の紫（見出し・CTA・リンク） */
  --vio-deep:#5527E8;
  --panel:#7A4DF6;        /* メガパネル背景 */
  --lav:#C8B5F8;          /* 料金カード等のライトパープル */
  --lav-soft:#E6DDFB;
  --cream:#F3EDE6;        /* ベースのクリーム */
  --navy:#14162E;         /* ダークUIカード */
  --ink:#221E3A;          /* 本文 */
  --pc-gutter:#EAE6DF;    /* PC左右余白 */
  --r-lg:8px; --r-md:6px;
  --pad:22px;
  --shadow-soft:0 30px 30px rgba(34,30,58,.03),0 14px 16px rgba(34,30,58,.05),0 4px 10px rgba(34,30,58,.07);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  font-family:"Noto Sans JP",sans-serif;
  color:var(--ink);
  background:var(--pc-gutter);
  font-size:16px;line-height:1.9;
  -webkit-font-smoothing:antialiased;
}

/* モバイル基準1カラム。PCは中央固定＋左右グレー */
.page{
  max-width:430px;margin:0 auto;position:relative;
  min-height:100dvh;
  /* 背景メッシュ(::before)や浮遊カードのはみ出しをクリップ。
     overflow:clip はスクロールコンテナにならないため、ページ内アンカー
     (#preorder等)で .page が内部スクロールして二重スクロール/空白/先頭に
     戻れない不具合を防ぐ（hidden はフォールバック）。 */
  overflow:hidden;overflow:clip;
  background:var(--cream);
}

/* 共通ルール: 日本語の折り返しを単語・ひらがな連続・句読点の途中で割らない。
   keep-all=文節/単語の途中で改行しない／line-break:strict=句読点を行頭に落とさない／
   overflow-wrap:anywhere=どうしても収まらない長い連続だけ緊急改行を許可（横はみ出し防止）。
   ①②共通で適用（全LP共通ルール）。 */
.page h1,.page h2,.page h3,.page p,.page a,.page li,
.page .h1,.page .h2,.page .eyebrow{
  word-break:keep-all;
  overflow-wrap:anywhere;
  line-break:strict;
}
/* amzigo風: にじむメッシュグラデーションが濃淡を保ったままゆっくりうねる
   （本家はWebGLキャンバス。ここではJSなしのCSS代替で近似） */
.page::before{
  content:"";position:absolute;inset:-40%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 34% at 22% 14%, #C1AAF7 0%, rgba(193,170,247,0) 60%),
    radial-gradient(42% 38% at 80% 20%, #D6C7FB 0%, rgba(214,199,251,0) 62%),
    radial-gradient(48% 44% at 52% 50%, #E7DEFB 0%, rgba(231,222,251,0) 64%),
    radial-gradient(55% 50% at 26% 84%, #F3EDE6 0%, rgba(243,237,230,0) 60%),
    radial-gradient(60% 54% at 86% 88%, #F1E8DE 0%, rgba(241,232,222,0) 62%),
    var(--cream);
  filter:blur(38px);
  will-change:transform;
  animation:meshDrift 26s ease-in-out infinite alternate;
}
@keyframes meshDrift{
  0%  {transform:translate(-3%,-2%) scale(1.10) rotate(0deg);}
  50% {transform:translate(3%,2%)  scale(1.24) rotate(7deg);}
  100%{transform:translate(-2%,4%) scale(1.14) rotate(-6deg);}
}
@media (prefers-reduced-motion:reduce){.page::before{animation:none;}}
@media (min-width:768px){.page{box-shadow:0 0 60px rgba(34,30,58,.16);}}

/* ---- 浮遊ロゴピル ---- */
.topbar{position:sticky;top:0;z-index:40;display:flex;justify-content:center;pointer-events:none;}
.logo-pill{
  margin-top:0;background:rgba(255,255,255,.92);
  padding:13px 22px;border-radius:0 0 10px 10px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(34,30,58,.10);
  backdrop-filter:blur(6px);
}
.logo-pill__img{display:block;height:26px;width:auto;}

/* ---- セクション共通 ---- */
.sec{padding:56px var(--pad) 64px;position:relative;}

/* eyebrow: モノスペース＋薄紫ドット */
.eyebrow{
  font-family:"Space Mono",monospace;
  font-size:12.5px;letter-spacing:.08em;
  color:var(--ink);margin-bottom:18px;
}
.eyebrow::first-letter{color:var(--lav);}

/* ---- タイポ ---- */
.h1{
  font-family:"Manrope","Noto Sans JP",sans-serif;
  font-weight:800;font-size:26px;line-height:1.4;
  color:var(--vio);text-align:center;letter-spacing:.01em;
  margin:48px 0 16px;
}
.h2{
  font-family:"Manrope","Noto Sans JP",sans-serif;
  font-weight:800;font-size:27px;line-height:1.45;
  text-align:center;color:var(--ink);
}
.h2--left{text-align:left;margin-bottom:22px;}
.h2--compact{font-size:22px;}
.h2--purple{color:var(--vio);text-align:center;font-size:34px;margin-bottom:26px;}
.lead{text-align:center;font-size:15px;margin-bottom:0;}
.note{text-align:center;font-size:12px;color:#6D6890;margin-top:12px;}
.arr{font-style:normal;font-weight:700;}

/* ---- CTA ---- */
.cta{
  display:block;width:100%;text-align:center;text-decoration:none;
  background:var(--vio);color:#fff;font-weight:700;font-size:17px;
  padding:16px 0;border-radius:6px;
  transition:transform .15s ease,filter .15s ease;
}
.cta:active{transform:scale(.98);filter:brightness(.94);}
.cta .arr{margin-left:6px;}
.cta--wide{max-width:320px;margin:0 auto;}
.cta--inCard{margin-top:18px;}

.tlink{
  display:inline-block;margin-top:8px;
  padding:12px 10px; /* 44px以上のタップ領域を確保（P2対応） */
  color:var(--vio);font-weight:700;font-size:15.5px;text-decoration:none;
}
.tlink .arr{margin-left:4px;}

/* ---- FV ---- */
.sec--hero{padding-top:52px;padding-bottom:16px;text-align:center;}
.stage{position:relative;}
.ph--hero{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-lg);box-shadow:var(--shadow-soft);
}

/* 浮遊カード（パララックス対象 .fl） */
.fl{position:absolute;will-change:transform;}
.fl--stat1{
  right:-6px;top:-14px;
  background:var(--vio);color:#fff;border-radius:8px;
  padding:12px 16px;text-align:left;line-height:1.35;
  box-shadow:var(--shadow-soft);
}
.statcard__label{display:block;font-size:11px;opacity:.9;}
.statcard__label .arr{float:right;margin-left:10px;}
.statcard__num{display:block;font-family:"Manrope",sans-serif;font-weight:800;font-size:30px;letter-spacing:.01em;}
.statcard__sub{display:block;font-size:10px;opacity:.85;}

.pillcard{
  background:var(--lav);color:var(--ink);
  border-radius:8px;padding:9px 14px;
  font-size:12.5px;font-weight:500;white-space:nowrap;
  display:flex;align-items:center;
  box-shadow:var(--shadow-soft);
}
.pillcard__dot{width:6px;height:6px;border-radius:50%;background:var(--vio);margin-right:8px;flex:none;}

.pillcard--makuake{gap:8px;padding:2px 8px;}
.pillcard__logo{height:30px;width:auto;flex:none;display:block;}
.pillcard__stat{display:flex;flex-direction:column;line-height:1.3;}
.pillcard__stat b{font-size:12.5px;font-weight:700;color:var(--ink);}
.pillcard__stat small{font-size:9px;font-weight:500;color:#4A4270;}
.fl--stat2{left:-4px;bottom:12px;}

/* ---- 紫メガパネル ---- */
.megapanel{
  background:linear-gradient(160deg,#8A5CF7 0%,var(--panel) 45%,#6A38F0 100%);
  border-radius:var(--r-lg);
  padding:26px 18px 22px;color:#fff;
  box-shadow:var(--shadow-soft);
}
.megapanel__copy{font-size:15.5px;line-height:2.0;font-weight:500;margin-bottom:22px;}

.darkcard{
  background:var(--navy);border-radius:var(--r-md);
  padding:16px;color:#EDEAF8;
}
.darkcard__title{font-size:13px;font-weight:700;margin-bottom:10px;}
.darkcard__big{font-family:"Manrope",sans-serif;font-weight:800;font-size:34px;color:#CDBBFA;line-height:1.1;}
.darkcard__big small{font-size:13px;margin-left:3px;color:#EDEAF8;}
.darkcard__sub{font-size:11px;line-height:1.7;opacity:.75;margin-top:8px;}
.darkgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}

/* LINEトークのダークモック */
.linechat{padding-bottom:20px;}
.linechat__tab{
  font-size:10px;font-weight:500;color:#9AA0C3;
  border-bottom:2px solid var(--lav);padding-bottom:2px;margin-left:12px;
}
.linechat__body{display:flex;flex-direction:column;gap:10px;margin-top:4px;}
.lbubble{max-width:85%;padding:9px 13px;border-radius:10px;font-size:13.5px;line-height:1.6;}
.lbubble--me{align-self:flex-end;background:#06C755;color:#07230F;border-bottom-right-radius:4px;}
.lbubble--kura{align-self:flex-start;background:#232748;color:#EDEAF8;border-bottom-left-radius:4px;}
.lbubble__thumbs{display:flex;gap:6px;margin-top:8px;}
.chat-step{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease;}
.chat-step.is-shown{opacity:1;transform:none;}
.chat-step:nth-child(2){transition-delay:.55s;}
.chat-step:nth-child(3){transition-delay:.85s;}
.chat-step:nth-child(4){transition-delay:1.05s;}
@media (prefers-reduced-motion:reduce){.chat-step{opacity:1;transform:none;transition:none;}}

/* ---- 利用シーン（浮遊ステージ） ---- */
.sec--feature{padding-top:44px;padding-bottom:44px;}
.stage--tall{min-height:460px;display:flex;align-items:center;justify-content:center;margin-bottom:52px;}
.feature__center{position:relative;z-index:2;text-align:center;}
.feature__body{font-size:14.5px;text-align:center;margin-top:0;}
.ph--sq{width:120px;height:120px;border-radius:8px;box-shadow:var(--shadow-soft);}

/* ---- 浮遊コラージュ（amzigo準拠）----
   コンセプト: 「散らばった写真」。写真4枚を fg(前景=くっきり＋影) /
   mid(中景=軽いぼかし) / far(遠景=強ぼかし・薄い) の3層で大小を変えて散らし、
   互いに少し重ね、左右の端から溢れさせる。ブロックごとに構図を変えて規則性を消す。
   ぼかし等の実値はスクロールに応じてJSが上書き（reduced-motion時はこのCSS値で静止）。 */
.flph{display:block;height:auto;border-radius:8px;} /* 実画像は自然な縦横比（正方形強制しない） */
.flph--fg{z-index:1;box-shadow:var(--shadow-soft);}
.flph--mid{z-index:0;filter:blur(2px);opacity:.6;box-shadow:none;}
.flph--far{z-index:0;filter:blur(4px);opacity:.4;box-shadow:none;}
.flpill{white-space:normal;max-width:180px;z-index:3;}
.flpill--1{border-radius:16px 16px 16px 4px;}
.flpill--2{border-radius:16px 16px 4px 16px;}
.pillcard--msg{padding:10px 14px;line-height:1.4;}

/* ① 主役: 左上に大きな前景、対角に中景2枚＋遠景1枚（画像は自然な縦横比・幅のみ指定） */
.feat--1 .flph--a{width:152px;left:-14px;top:-10px;}
.feat--1 .flph--b{width:120px;right:-12px;top:56px;}
.feat--1 .flph--c{width:92px;left:40px;bottom:64px;}   /* 1-3は縦長 */
.feat--1 .flph--d{width:130px;right:-8px;bottom:-6px;}
.feat--1 .flpill--1{right:-2px;top:-16px;}
.feat--1 .flpill--2{left:-6px;bottom:24px;}

/* ② 支え1: 右上に前景、左列に中景2枚＋中央下に遠景 */
.feat--2 .flph--a{width:140px;right:-14px;top:-8px;}
.feat--2 .flph--b{width:112px;left:-10px;top:30px;}
.feat--2 .flph--c{width:96px;right:52px;bottom:64px;}
.feat--2 .flph--d{width:122px;left:-8px;bottom:-8px;}
.feat--2 .flpill--1{left:-6px;top:-14px;}
.feat--2 .flpill--2{right:-4px;bottom:34px;}

/* ③ 支え3 じいじ共有: 左下に前景、右上に中景、中間に遠景＋中景（画像は自然な縦横比・幅のみ） */
.feat--3 .flph--a{width:104px;left:-14px;bottom:-8px;}   /* 4-1は縦長→幅控えめ */
.feat--3 .flph--b{width:124px;right:-12px;top:-8px;}
.feat--3 .flph--c{width:92px;left:34px;top:48px;}
.feat--3 .flph--d{width:120px;right:-6px;bottom:6px;}
.feat--3 .flpill--1{right:-2px;top:36px;}
.feat--3 .flpill--2{left:-4px;bottom:40px;}

/* ④ 支え2 レシート家計: 他ブロックと同じ浮遊ステージ（背景写真は少なめ=3枚・自然な縦横比） */
.feat--4 .flph--a{width:128px;left:-12px;top:-4px;}
.feat--4 .flph--b{width:112px;right:-10px;top:96px;}
.feat--4 .flph--c{width:76px;right:-6px;bottom:-8px;}   /* 3-3は縦長→幅控えめ */
.feat--4 .flpill--1{right:-2px;top:-12px;}
.feat--4 .flpill--2{left:-6px;bottom:28px;}

.plan-note{
  font-size:11.5px;color:#6D6890;line-height:1.8;
  border-top:1px solid rgba(34,30,58,.14);
  padding-top:14px;margin-top:22px;
}

/* ---- 不安軽減 ---- */
.qa{display:flex;flex-direction:column;gap:12px;}
.qa__item{
  background:#fff;border-radius:8px;padding:16px 18px;
  box-shadow:var(--shadow-soft);
}
.qa__item b{display:block;color:var(--vio);font-size:15px;margin-bottom:6px;}
.qa__item b::before{content:"Q. ";}
.qa__item span{font-size:14px;}

/* ---- 料金（本体＋くらちゃんプランの2ボックス縦積み） ---- */
.pricing__intro{font-size:15px;margin-bottom:22px;}

.planbox{
  background:var(--lav);border-radius:var(--r-lg);
  padding:22px 20px;margin-bottom:16px;
  box-shadow:var(--shadow-soft);
}
.planbox--kura{background:var(--lav-soft);} /* 本体ボックスと区別する薄紫トーン */
.planbox__img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;
  transform:scale(1.12);
  background:#fff;border-radius:var(--r-md);margin-bottom:16px;
  box-shadow:var(--shadow-soft);
}
.planbox__imgwrap{
  overflow:hidden;border-radius:var(--r-md);margin-bottom:16px;
  box-shadow:var(--shadow-soft);
}
.planbox__imgwrap .planbox__img{margin-bottom:0;box-shadow:none;border-radius:0;}
.planbox__label{
  font-family:"Space Mono",monospace;font-size:12.5px;font-weight:700;
  color:var(--vio);letter-spacing:.03em;margin-bottom:6px;
}
.planbox__label span{color:#4A4270;font-weight:400;}
.planlist{display:flex;flex-direction:column;}
.planrow{padding:14px 2px;border-top:1px solid rgba(34,30,58,.16);}
.planrow:first-child{border-top:0;}
.planrow__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.planrow__name{
  font-family:"Manrope","Noto Sans JP",sans-serif;font-weight:800;font-size:20px;
  display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.planrow--pick .planrow__name{color:var(--vio);}
.planrow__badge{
  font-family:"Noto Sans JP",sans-serif;font-size:10px;font-weight:700;letter-spacing:0;
  background:var(--vio);color:#fff;border-radius:6px;padding:2px 8px;
}
.planrow__price{
  font-family:"Manrope","Noto Sans JP",sans-serif;font-weight:800;font-size:18px;white-space:nowrap;
}
.planrow__desc{font-size:12.5px;color:#4A4270;margin-top:5px;line-height:1.6;}
.planbox__note{font-size:11.5px;color:#6D6890;line-height:1.7;margin-top:16px;}

/* 10年コスト比較パネル */
.costpanel{
  margin-top:36px;background:#fff;border-radius:var(--r-lg);
  padding:22px 20px;box-shadow:var(--shadow-soft);
}
.costpanel__eyebrow{font-family:"Space Mono",monospace;font-size:11.5px;color:var(--vio);margin-bottom:10px;}
.costpanel__title{font-family:"Manrope","Noto Sans JP",sans-serif;font-weight:800;font-size:22px;line-height:1.5;margin-bottom:16px;}
.costrow{
  display:flex;flex-direction:column;
  padding:14px 16px;border-radius:10px;background:var(--lav-soft);
  margin-bottom:10px;
}
.costrow__label{font-size:12.5px;color:#4A4270;}
.costrow__value{
  font-family:"Manrope","Noto Sans JP",sans-serif;font-weight:800;font-size:19px;
  margin-top:3px;line-height:1.3;
}
.costrow__sub{font-size:11.5px;margin-top:6px;opacity:.72;line-height:1.6;}
.costrow--me{background:var(--vio);color:#fff;}
.costrow--me .costrow__label{color:rgba(255,255,255,.82);}
.costrow--me .costrow__sub{opacity:.85;}
.costpanel__sub{font-size:12px;color:#6D6890;line-height:1.7;margin-top:2px;}

.pricing__cta{margin-top:28px;text-align:center;}
.pricing__ctanote{font-size:12px;color:#4A4270;margin-top:12px;}

/* ---- 社会的証明（KOLレビュー動画） ---- */
.social__lead{text-align:center;font-size:14px;color:#4A4270;line-height:1.8;margin-bottom:22px;}
.ytlite{
  position:relative;aspect-ratio:16/9;width:100%;
  border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  background:var(--navy);box-shadow:var(--shadow-soft);
}
.ytlite__thumb{width:100%;height:100%;object-fit:cover;display:block;}
.ytlite__play{
  position:absolute;inset:0;margin:auto;width:64px;height:64px;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(20,22,46,.72);backdrop-filter:blur(2px);
  transition:transform .15s ease,background .15s ease;
}
.ytlite__play::before{
  content:"";position:absolute;left:50%;top:50%;
  transform:translate(-38%,-50%);
  border-style:solid;border-width:11px 0 11px 19px;
  border-color:transparent transparent transparent #fff;
}
.ytlite:hover .ytlite__play{transform:scale(1.06);background:var(--vio);}
.ytlite iframe{width:100%;height:100%;border:0;display:block;}
.ytlite.is-playing{cursor:default;}
.video-note{font-size:11.5px;color:#6D6890;line-height:1.7;margin-top:12px;}

/* ---- クロージング＋フッター ---- */
.sec--closing{padding-bottom:40px;}
.closepanel{
  background:linear-gradient(165deg,#D3C2FA,var(--lav));
  border-radius:var(--r-lg);padding:34px 22px;text-align:center;
}
.closepanel__title{
  font-family:"Manrope","Noto Sans JP",sans-serif;font-weight:800;
  font-size:24px;line-height:1.5;margin-bottom:20px;
}
.closepanel__note{font-size:12px;color:#4A4270;margin-top:12px;}

.footer{margin-top:46px;}
.footer__ask{text-align:center;margin-bottom:34px;}
.footer__lead{font-family:"Manrope","Noto Sans JP",sans-serif;font-weight:800;font-size:22px;line-height:1.35;margin-bottom:8px;}
.footer__sub{font-size:14px;color:var(--ink);margin-bottom:18px;}
.cta--line{background:#06C755;max-width:320px;}
.footer__linenote{font-size:11.5px;color:#6D6890;margin-top:10px;}
.footer__follow{text-align:center;margin-bottom:34px;}
.footer__h{display:block;font-family:"Space Mono",monospace;font-size:11.5px;color:#6D6890;margin-bottom:10px;}
.footer__social{display:flex;justify-content:center;align-items:center;gap:6px;}
/* SNSアイコンリンク: 44px以上のタップ領域・単色（インク）→ホバー/フォーカスでアクセント */
.footer__social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;color:var(--ink);text-decoration:none;
  transition:color .15s ease;
}
.footer__social a:hover,.footer__social a:focus-visible{color:var(--vio);}
.footer__social a svg{width:24px;height:24px;display:block;}
.footer__wordmark{
  font-family:"Manrope",sans-serif;font-weight:800;
  font-size:56px;letter-spacing:.03em;text-align:center;
  color:var(--lav);line-height:1;
}
.footer__copy{text-align:center;font-size:11px;color:#6D6890;margin-top:10px;}
.footer__legal{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px;margin-top:18px;}
.footer__legal a{font-size:10.5px;color:#8A86A6;text-decoration:none;}

/* ---- 画像プレースホルダー（実画像に差し替えたら削除） ---- */
.ph{
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#E3DAF3,#E3DAF3 10px,#EFE9FA 10px,#EFE9FA 20px);
  color:#6D6890;font-size:12px;font-weight:500;border-radius:var(--r-md);
}
.ph--thumb{width:56px;height:56px;border-radius:5px;flex:none;object-fit:cover;display:block;}

/* ---- リビール ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.is-shown{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ---- 見出しのラインリビール（amzigoのline-mask方式）----
   各行をoverflow:hiddenのマスクで包み、下からせり上がって現れる。行ごとに時間差。 */
.line-mask{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding:.08em 0 .14em;margin:-.08em 0 -.14em;
}
.line{display:inline-block;}
.js .line{
  transform:translateY(115%);
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.lines.is-shown .line{transform:none;}
.lines .line-mask:nth-of-type(2) .line{transition-delay:.12s;}
.lines--after .line{transition-delay:.22s;}
.lines--after .line-mask:nth-of-type(2) .line{transition-delay:.34s;}
@media (prefers-reduced-motion:reduce){.js .line{transform:none;transition:none;}}

a:focus-visible{outline:3px solid var(--vio);outline-offset:3px;border-radius:6px;}

/* ==========================================================
   構成を9ブロックに戻した際の追加スタイル（2026-08-01）
   ========================================================== */

/* ②課題共感 — 白カードのペインリスト */
.pains{display:flex;flex-direction:column;gap:10px;margin:18px 0 16px;}
.paincard{
  background:#fff;border-radius:8px;padding:14px 16px;
  font-size:14px;font-weight:500;
  box-shadow:var(--shadow-soft);
}
.paincard::before{content:"— ";color:var(--vio);font-weight:700;}
.empathy{font-size:14.5px;}

/* ③MeCloudとは — 紫パネル内の見出しと本体写真 */
.megapanel__title{
  font-family:"Manrope","Noto Sans JP",sans-serif;
  font-weight:800;font-size:25px;line-height:1.5;
  color:#fff;margin-bottom:16px;
}
.ph--panelimg{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  margin-top:20px;border-radius:var(--r-md);box-shadow:var(--shadow-soft);
}

/* ④くらちゃんデモ — 見出し下のダークモックと補足 */
.demo__body{font-size:14.5px;margin-top:18px;}

/* ==========================================================
   FV作り直し（2026-08-01）: 意味の通る浮遊カード＋スクロール誘導
   ========================================================== */

/* 浮遊: 所有のかたちタグ */
.fl--tag{left:8px;bottom:-24px;}
.sec--hero .stage{margin-bottom:34px;} /* 下端にかかる実績バッジ分の余白を確保 */



/* ==================================================================
   ==== ②シニア差分（senior.html 専用。①のクラスは一切変更しない）====
   すべて body.senior または②固有クラスにスコープ。
   方針: 可読性優先で本文を一段大きく・行間widerに／薄いグレー文字を
   濃いめにしてコントラスト確保／浮遊カードの動きは data-speed を1.0近傍
   にして小さめに（movement = (speed-1)×delta のため、1.0付近＝小さい動き）。
   ================================================================== */

/* --- 本文サイズ・行間（①=16px基準を一段引き上げ） --- */
body.senior{font-size:17.5px;}
.senior .h1{line-height:1.5;}
.senior .h2{line-height:1.55;}
.senior .lead{font-size:17px;line-height:2.05;}
.senior .megapanel__title{line-height:1.55;}
.senior .megapanel__copy{font-size:16.5px;line-height:2.1;}
.senior .paincard{font-size:16px;line-height:1.85;}
.senior .empathy{font-size:16px;line-height:1.9;}
.senior .demo__body,
.senior .social__lead,
.senior .pricing__intro,
.senior .feature__body{font-size:16px;line-height:1.95;}
.senior .tlink{font-size:16px;line-height:1.9;}
.senior .qa__item b{font-size:16.5px;}
.senior .qa__item span{font-size:15.5px;line-height:1.9;}
.senior .planrow__desc{font-size:14px;color:#3B3560;}
.senior .darkcard__sub{font-size:12.5px;opacity:.92;}

/* --- 薄グレー文字のコントラスト底上げ（①#6D6890 → 濃いめ） --- */
.senior .plan-note,
.senior .planbox__note,
.senior .video-note,
.senior .costpanel__sub,
.senior .pricing__ctanote,
.senior .closepanel__note,
.senior .footer__sub,
.senior .footer__linenote{color:#453F63;}

/* --- FV: 浮遊はMakuakeバッジのみ（共通ルール1）。バッジの下端はみ出し分の余白 --- */
.senior .sec--hero .stage{margin-bottom:44px;}

/* --- ④デモ: 説明書サムネのプレースホルダー（②用・未支給） --- */
.ph--label{
  width:56px;height:56px;border-radius:5px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#4A4270;text-align:center;line-height:1.2;
}

/* --- ⑥-a 安心カード: 大文字ラベルを1行に（はみ出す場合は自動縮小） --- */
.senior .darkcard{container-type:inline-size;}
.senior .darkcard__big{white-space:nowrap;font-size:clamp(22px,19cqi,34px);}

/* --- ⑧.5 家族に残す（濃色パネルで特別感） --- */
.legacypanel{
  background:linear-gradient(165deg,#1B1D3A,var(--navy));
  border-radius:var(--r-lg);padding:34px 24px;color:#EDEAF8;
  box-shadow:var(--shadow-soft);text-align:center;
}
.legacypanel__eyebrow{font-family:"Space Mono",monospace;font-size:12px;color:var(--lav);margin-bottom:14px;}
.legacypanel__eyebrow::first-letter{color:var(--lav);}
.legacypanel__title{
  font-family:"Manrope","Noto Sans JP",sans-serif;font-weight:800;
  font-size:24px;line-height:1.55;margin-bottom:18px;
}
.legacypanel__body{font-size:16px;line-height:2.05;margin-bottom:16px;}
.legacypanel__note{font-size:12.5px;color:#B9B2E0;line-height:1.8;}

/* --- 先行登録セクション: 特典の強調枠＋副導線（①で使用。legacypanel内に配置） --- */
.presale__perk{
  background:linear-gradient(160deg,#8A5CF7,#6A38F0);
  border:1px solid rgba(200,181,248,.6);
  border-radius:var(--r-md);padding:18px;margin:4px auto 22px;max-width:344px;
  font-size:15px;line-height:1.85;font-weight:600;color:#fff;
  box-shadow:0 12px 28px rgba(106,56,240,.38);
}
.presale__perk-label{
  display:table;margin:0 auto 12px;background:var(--lav);color:#241E45;
  font-family:"Space Mono",monospace;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  padding:4px 12px;border-radius:999px;
}
.presale__perk-em{
  font-weight:800;font-size:1.24em;color:#fff;white-space:nowrap;
  background:linear-gradient(transparent 58%, rgba(200,181,248,.85) 58%); /* 紫マーカー風ハイライト */
  padding:0 3px;border-radius:2px;
}
.presale__alt{margin-top:14px;font-size:12.5px;color:#B9B2E0;}
.presale__alt a{color:#CDBBFA;text-decoration:underline;display:inline-block;padding:12px 6px;}

/* --- ⑦直後: キャンペーン告知バナー（紫系。#preorderへ誘導＝登録実行ではない） --- */
.promobanner{
  margin-top:28px;background:linear-gradient(160deg,var(--lav-soft),#DCCFFA);
  border:1px solid rgba(108,59,244,.28);border-radius:var(--r-lg);
  padding:24px 20px;text-align:center;
}
.promobanner__label{font-family:"Space Mono",monospace;font-size:11.5px;color:var(--vio);margin-bottom:10px;}
.promobanner__label::first-letter{color:var(--lav);}
.promobanner__title{font-family:"Manrope","Noto Sans JP",sans-serif;font-weight:800;font-size:20px;line-height:1.5;color:var(--ink);margin-bottom:10px;}
.promobanner__sub{font-size:13.5px;line-height:1.9;color:#3B3560;margin-bottom:18px;}
/* 先行登録セクションへのアンカー: 上部固定ロゴピル分のオフセット */
#preorder{scroll-margin-top:72px;}

/* --- ⑨ クロージング: リード文（②固有） --- */
.senior .closepanel__lead{font-size:15.5px;line-height:1.95;margin-bottom:20px;color:#2C2650;}

/* --- ⑨ フッター: シニア向けにタップ領域を44px以上に確保（文字サイズは維持） --- */
.senior .footer__social a{width:48px;height:48px;}            /* シニア: タップ領域拡大 */
.senior .footer__legal a{padding:12px 6px;display:inline-block;} /* 微小リンクも当たり判定44px */
.senior .footer__legal{gap:0 14px;}


/* ==================================================================
   ==== ③店舗・個人経営差分（shop.html 専用。①②のクラスは変更しない）====
   すべて body.shop または③固有クラスにスコープ。③は①と同じ本文サイズを
   使うためフォント拡大は行わない。共通ルール（⑥-a大文字ラベル1行・
   ④レシート画像バブル・⑤名刺の浮遊プレースホルダー）に必要な分だけ追加。
   ================================================================== */

/* --- FV: 浮遊はMakuakeバッジのみ。バッジ下端はみ出し分の余白 --- */
.shop .sec--hero .stage{margin-bottom:44px;}

/* --- ⑤ 名刺シーンの浮遊プレースホルダー（③用・未支給）--- */
.ph--card{aspect-ratio:4/3;font-size:12px;color:#6D6890;}

/* --- ④デモ: 見積書のPDFファイルアイコン（インラインSVG） --- */
.pdficon{
  width:56px;height:56px;flex:none;border-radius:5px;
  background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-soft);overflow:hidden;
}
.pdficon svg{display:block;width:52px;height:52px;}

/* --- ⑥-a 安心カード: 大文字ラベルを1行に（はみ出す場合は自動縮小） --- */
.shop .darkcard{container-type:inline-size;}
.shop .darkcard__big{white-space:nowrap;font-size:clamp(22px,19cqi,34px);}

/* --- ⑨ フッター: タップ領域を44px以上に確保（文字サイズは維持） --- */
.shop .footer__social a{width:44px;height:44px;}
.shop .footer__legal a{padding:12px 6px;display:inline-block;}
.shop .footer__legal{gap:0 14px;}


/* ==================================================================
   ==== ④フリーランス差分（freelance.html 専用。①②③のクラスは変更しない）====
   すべて body.freelance または④固有クラスにスコープ。④は①と同じ本文サイズ。
   多くの部品（.promobanner/.presale/.legacypanel/.costpanel/.pdficon/.ph--card）は
   既存を流用し、④固有の調整のみここに追記。
   ================================================================== */

/* --- FV: 浮遊はMakuakeバッジのみ。バッジ下端はみ出し分の余白 --- */
.freelance .sec--hero .stage{margin-bottom:44px;}

/* --- ⑥-a 安心カード: 大文字ラベルを1行に（M.2×4 / SMB3対応 / 上がらない 等） --- */
.freelance .darkcard{container-type:inline-size;}
.freelance .darkcard__big{white-space:nowrap;font-size:clamp(20px,17cqi,34px);}

/* --- ⑧.5 数字ブロック直下: mykura「蔵」の一言（他LPと統一トーン） --- */
.mykura-note{text-align:center;font-size:12px;color:#6D6890;line-height:1.85;margin-top:16px;}

/* --- ⑨ クロージング: リード文 --- */
.freelance .closepanel__lead{font-size:15px;line-height:1.95;margin-top:14px;color:#2C2650;}

/* --- ⑨ フッター: タップ領域を44px以上に確保（文字サイズは維持） --- */
.freelance .footer__social a{width:44px;height:44px;}
.freelance .footer__legal a{padding:12px 6px;display:inline-block;}
.freelance .footer__legal{gap:0 14px;}

/* --- 改行制御ユーティリティ: 引用句『』・語句を途中で割らせない --- */
.freelance .nb{white-space:nowrap;}

/* --- ⑥.5 くらちゃんにできること（秘書の機能範囲・軽量カード2列×3行） --- */
.freelance .skill__lead{font-size:15px;line-height:1.9;margin:6px 0 18px;color:#2C2650;}
.freelance .skillgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.freelance .skillcard{
  background:var(--lav-soft);border-radius:var(--r-lg);
  padding:16px 16px 18px;box-shadow:var(--shadow-soft);
}
.freelance .skillcard__title{
  font-family:"Manrope","Noto Sans JP",sans-serif;font-weight:800;
  font-size:19px;color:var(--vio);line-height:1.25;margin-bottom:7px;
}
.freelance .skillcard__sub{font-size:12.5px;line-height:1.7;color:#453F63;}
.freelance .skill__note{font-size:11.5px;line-height:1.8;color:#6D6890;margin-top:16px;}
@media (max-width:340px){.freelance .skillgrid{grid-template-columns:1fr;}}


/* ==================================================================
   ==== ⑤アーリーアダプター差分（early.html 専用。①②③④のクラスは変更しない）====
   すべて body.early にスコープ。⑤は①と同じ本文サイズ。骨格・部品は共通流用。
   ================================================================== */

/* --- 改行制御ユーティリティ: 引用句『』を途中で割らせない --- */
.early .nb{white-space:nowrap;}

/* --- ⑥-a スペックカード: 大文字ラベルを1行に（M.2×4 / SMB3対応 / 上がらない 等） --- */
.early .darkcard{container-type:inline-size;}
.early .darkcard__big{white-space:nowrap;font-size:clamp(20px,17cqi,34px);}

/* --- ⑨ クロージング: リード文 --- */
.early .closepanel__lead{font-size:15px;line-height:1.95;margin-top:14px;color:#2C2650;}

/* --- ⑨ フッター: タップ領域確保（アイコン44px・法務リンク） --- */
.early .footer__social a{width:44px;height:44px;}
.early .footer__legal a{padding:12px 6px;display:inline-block;}
.early .footer__legal{gap:0 14px;}