/* MANEKU LP. 元没入版CSSを .maneku 配下に閉じたもの。 */
html:has(.maneku){
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}
@media (prefers-reduced-motion: reduce){
  html:has(.maneku){ scroll-behavior:auto; }
}

/* === tokens.css === */
.maneku{
  --ink: #192548;
  --navy: #313B90;
  --plum: #734E7F;
  --lav: #8482BA;
  --lav-100: #EEEDF6;
  --coral: #DE988D;
  --coral-100: #FBEDEA;
  --muted: #5A6080;
  --line: #E4E3EE;
  --bg: #FFFFFF;
  --bg-soft: #FFF6EE;
  --screen: #2A2B4A;
  --grad-surface: linear-gradient(120deg, #E9E7F4 0%, #F4E6EE 52%, #F9E2DC 100%);
  --grad-mark: linear-gradient(120deg, #8482BA 0%, #DE988D 100%);
  --grad-deep: linear-gradient(120deg, #313B90 0%, #734E7F 100%); /* 白文字・小さい数字を載せる面。コントラスト確保用 */
  --night: #1C1E4A;
  --night-2: #2B2560;
  --night-3: #4A2D5E;
  --grad-night: linear-gradient(160deg, var(--night) 0%, var(--night-2) 55%, var(--night-3) 100%);
  --r-panel: 32px;
  --r-card: 28px;
  --r-pill: 999px;
  --shadow: 0 30px 80px -40px rgba(115, 78, 127, .24);
  --font-jp: "Zen Maru Gothic", system-ui, sans-serif;
  --font-en: "Outfit", "Zen Maru Gothic", sans-serif;
  --maxw: 1160px;
  --gutter: clamp(20px, 5vw, 56px);
}

/* === style.css === */
.maneku *, .maneku *::before, .maneku *::after{ box-sizing:border-box; }
.maneku{ scroll-behavior:smooth; scroll-padding-top:88px; }
.maneku{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-jp); font-size:16px;
  line-height:1.8; letter-spacing:.04em;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  overflow-x:clip; /* hidden だとルートがスクロール容器になり、張り付き（sticky）が効かない */
  min-height:100dvh;
}
.maneku img, .maneku svg{ max-width:100%; }
.maneku h1, .maneku h2, .maneku h3, .maneku p, .maneku ol, .maneku ul, .maneku dl, .maneku dd{ margin:0; }
.maneku ol, .maneku ul{ padding:0; list-style:none; }
.maneku a{ color:inherit; text-decoration:none; }
.maneku :focus-visible{ outline:3px solid var(--lav); outline-offset:3px; }

.maneku .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;
}
.maneku .wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.maneku .sec{ padding-block:clamp(80px, 10vw, 128px); position:relative; }
.maneku .sec__title{
  font-size:clamp(28px, 2.4vw + 18px, 40px); font-weight:700;
  color:var(--navy); line-height:1.4;
}
.maneku .hl{
  background:linear-gradient(transparent 64%, rgba(222,152,141,.38) 64%, rgba(222,152,141,.38) 92%, transparent 92%) no-repeat left / 100% 100%;
  padding:0 .12em; -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.maneku.is-js .hl{ background-size:0% 100%; transition:background-size .9s cubic-bezier(.16,1,.3,1) .25s; }
.maneku.is-js .is-in .hl, .maneku.is-js .hl.is-in{ background-size:100% 100%; }
.maneku .sec__sub{ font-size:20px; font-weight:700; color:var(--ink); margin-top:16px; }
.maneku .en{ font-family:var(--font-en); }

/* ボタン・バッジ */
.maneku .btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--navy); color:#fff; font-weight:700; font-size:14px;
  padding:12px 28px; border-radius:var(--r-pill);
  transition:background-color .25s, transform .15s; white-space:nowrap;
}
.maneku .btn:hover{ background:#4551a8; }
.maneku .btn:active{ transform:translateY(1px); }
.maneku .btn--lg{ font-size:17px; padding:18px 48px; }
.maneku .pill{
  display:inline-block; background:#fff; color:var(--navy); font-weight:700;
  font-size:14px; padding:6px 18px; border-radius:var(--r-pill);
}
.maneku .pill--soft{
  display:inline-block; background:var(--lav-100); color:var(--navy);
  font-size:13px; font-weight:700; padding:4px 14px; border-radius:var(--r-pill); line-height:1.6;
}

/* ヘッダー */
.maneku .hdr{
  position:fixed; top:0; left:0; right:0; z-index:50; height:72px;
  background:transparent; border-bottom:1px solid transparent;
  transition:background-color .3s, border-color .3s;
}
.maneku .hdr__in{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.maneku .hdr__logo{ display:block; flex:none; }
.maneku .hdr__logo img{ height:28px; width:auto; display:block; }

/* FV */
.maneku .fv{
  position:relative; min-height:min(100dvh, 860px);
  display:flex; align-items:center; overflow-x:clip;
  padding-top:96px; padding-bottom:96px; background:var(--grad-night);
}
.maneku .fv .wrap{ position:relative; z-index:1; width:100%; }
.maneku .fv__grid{ display:grid; grid-template-columns:7fr 5fr; gap:32px; align-items:center; }
.maneku .fv__title{ margin-top:20px; color:#FFFFFF; line-height:1.2; }
.maneku .fv__l1{ display:block; font-size:clamp(24px, 2.6vw + 14px, 48px); font-weight:700; }
.maneku .fv__l2{
  display:block; font-family:var(--font-en); font-weight:600;
  font-size:clamp(56px, 8vw, 112px); letter-spacing:.06em; line-height:1.1;
}
.maneku .fv__lead{ font-size:clamp(16px, .3vw + 15px, 18px); max-width:34em; margin-top:24px; }
.maneku .fv__cta{ margin-top:32px; }
.maneku .fv__visual{ position:relative; display:flex; justify-content:center; }
.maneku .device--phone{
  width:min(300px, 100%); aspect-ratio:9/19.5; padding:10px; background:#3A3B5C;
  border-radius:40px; box-shadow:var(--shadow);
}
.maneku .device--phone .screen{ width:100%; height:100%; border-radius:30px; }
.maneku .seal{
  position:absolute; top:-12px; right:0; width:132px; height:132px; border-radius:50%;
  background:#fff; border:2px solid var(--line); box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; line-height:1.4; z-index:2;
}
.maneku .seal__a{ font-family:var(--font-en); font-weight:600; font-size:15px; color:var(--plum); }
.maneku .seal__b{ font-weight:700; font-size:13px; color:var(--navy); }

@media (max-width:767px){
  .maneku .fv{ padding-top:56px; align-items:flex-start; }
  .maneku .fv__grid{ grid-template-columns:1fr; gap:48px; }
  .maneku .device--phone{ width:180px; border-radius:32px; }
  .maneku .device--phone .screen{ border-radius:24px; }
  .maneku .seal{ right:auto; left:calc(50% - 90px - 76px); top:34%; width:104px; height:104px; }
}
@media (min-width:768px) and (max-width:1023px){
  .maneku .seal{ right:auto; left:-56px; top:40%; }
}
@media (min-width:1024px){
  .maneku .seal{ right:auto; left:calc(50% - 150px - 84px); top:40%; }
}

/* ぼかし円 */
.maneku .blob{ position:absolute; border-radius:50%; filter:blur(48px); opacity:.5; pointer-events:none; z-index:0; }
.maneku .blob--lav{ background:var(--lav); }
.maneku .blob--coral{ background:var(--coral); }
@keyframes blob-float{
  from{ transform:translate(0,0); }
  to{ transform:translate(var(--bx,24px), var(--by,-18px)); }
}
.maneku .blob{ animation:blob-float 16s ease-in-out infinite alternate; }
.maneku .fv__blob2{ --bx:-20px; --by:16px; animation-delay:-5s; }
.maneku .cta__blob1{ --bx:18px; --by:22px; animation-delay:-9s; }
.maneku .cta__blob2{ --bx:-26px; --by:-14px; animation-delay:-13s; }
.maneku .fv__blob1{ width:360px; height:360px; right:6%; top:80px; }
.maneku .fv__blob2{ width:260px; height:260px; left:3%; bottom:260px; }
@media (max-width:767px){
  .maneku .fv__blob1{ width:216px; height:216px; right:-4%; top:300px; }
  .maneku .fv__blob2{ width:156px; height:156px; left:-2%; bottom:300px; }
}

/* 動き */
.maneku.is-js .reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i, 0) * 60ms);
}
.maneku.is-js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .maneku{ scroll-behavior:auto; }
  .maneku.is-js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .maneku.is-js .hl{ background-size:100% 100% !important; }
  .maneku *, .maneku *::before, .maneku *::after{ transition:none !important; animation:none !important; }
}

/* 日本語の改行を文節で揃える（1文字だけ次の行に落ちるのを防ぐ） */
.maneku h1, .maneku h2, .maneku h3, .maneku h4, .maneku .client, .maneku .bubble, .maneku .problem__punch{ word-break:auto-phrase; text-wrap:balance; }

/* reduced motion: 動きの最終状態を最初から見せる */
@media (prefers-reduced-motion: reduce){
  .maneku .step .step__img{ opacity:1; transform:none; }
  .maneku.is-js .steps__arrow{ opacity:1; transform:none; }
}

/* === sections.css === */
/* 2. 導入企業 */
.maneku .clients{ position:relative; overflow:hidden; padding-block:72px; }
.maneku .clients__list{
  position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px; text-align:center; align-items:center;
}
.maneku .client{ font-size:clamp(15px, 1vw + 8px, 18px); font-weight:700; color:var(--navy); line-height:1.5; }
@media (max-width:767px){ .maneku .clients{ padding-block:56px; } .maneku .clients__list{ grid-template-columns:minmax(0,1fr); gap:14px; text-align:center; } }

/* 3. 背景 */
.maneku .problem{ background:var(--bg-soft); }
.maneku .problem .sec__title{ text-align:center; }
.maneku .problem__grid{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:center; margin-top:56px;
}
.maneku .problem__img{ width:100%; max-width:460px; height:auto; border-radius:var(--r-card); mix-blend-mode:multiply; justify-self:center; }
.maneku .bubbles{ display:grid; gap:56px; }
.maneku .bubble{
  background:#fff; border-radius:var(--r-card); box-shadow:var(--shadow);
  font-size:16px; font-weight:700; padding:28px 32px; line-height:1.7;
}
.maneku .bubble{ position:relative; }
.maneku .bubble::before, .maneku .bubble::after{
  content:""; position:absolute; background:#fff; border-radius:50%;
  box-shadow:0 8px 20px -10px rgba(115,78,127,.18);
}
.maneku .bubble::before{ width:18px; height:18px; left:48px; bottom:-24px; }
.maneku .bubble::after{ width:10px; height:10px; left:38px; bottom:-40px; }
.maneku .bubble:nth-child(2){ margin-left:48px; }
.maneku .bubble:nth-child(3){ margin-left:96px; }
.maneku .problem__punch{
  text-align:center; margin-top:64px; font-weight:700; color:var(--navy);
  font-size:clamp(22px, 1.6vw + 14px, 32px); line-height:1.6;
}
.maneku .problem__punch span{
  background:linear-gradient(transparent 62%, rgba(222,152,141,.35) 62%);
  padding-inline:.2em;
}
@media (max-width:767px){
  .maneku .problem__grid{ grid-template-columns:minmax(0,1fr); gap:40px; margin-top:40px; }
  .maneku .problem__img{ max-width:320px; }
  .maneku .bubble:nth-child(n){ margin-left:0; }
}

/* 4. 仕組み */
.maneku .how .sec__title{ text-align:center; }
.maneku .how .sec__sub{ text-align:center; }
.maneku .steps{
  margin-top:48px; background:var(--grad-surface); border-radius:var(--r-panel);
  padding:48px; display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
}
.maneku .step{ flex:1; text-align:center; display:flex; flex-direction:column; align-items:center; min-width:0; }
.maneku .step__no{
  font-family:var(--font-en); font-weight:700; font-size:40px; line-height:1.2;
  background:var(--grad-deep); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.maneku .step__img{
  width:140px; height:140px; border-radius:24px; margin-top:12px; mix-blend-mode:multiply;
  object-fit:cover; opacity:.5; transform:scale(.9);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.maneku .step__title{ font-size:18px; font-weight:700; margin-top:16px; line-height:1.5; }
.maneku.is-js .steps__arrow{ opacity:.3; transform:translateX(-4px); transition:opacity .4s, transform .4s; }
.maneku.is-js .step.is-on + .steps__arrow{ opacity:1; transform:none; }
.maneku .step.is-on .step__img{ opacity:1; transform:none; }
.maneku .step__desc{ font-size:14px; color:var(--muted); margin-top:8px; line-height:1.7; }
.maneku .steps__arrow{ flex:none; align-self:center; font-size:22px; color:var(--navy); }
.maneku .steps__arrow .ph-caret-down{ display:none; }
@media (max-width:767px){
  .maneku .steps{ flex-direction:column; align-items:stretch; padding:32px 20px; gap:16px; }
  .maneku .steps__arrow .ph-caret-right{ display:none; }
  .maneku .steps__arrow .ph-caret-down{ display:inline-block; }
}

/* 5. 可視化機能 */
.maneku .features .sec__title{ text-align:center; }
.maneku .fphones{
  position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); justify-items:center;
  align-items:start; margin-top:72px; padding:56px 0;
}
.maneku .fphones::before{
  content:""; position:absolute; left:0; top:15%; width:100%; height:70%;
  background:var(--grad-surface); border-radius:var(--r-panel);
}
.maneku .fphone{ position:relative; z-index:1; text-align:center; max-width:420px; }
.maneku .fphone--2{ margin-top:40px; }
.maneku .fphone .device--phone{ width:260px; margin-inline:auto; }
.maneku .fphone__dev--1{ transform:rotate(-3deg); }
.maneku .fphone__dev--2{ transform:rotate(3deg); }
.maneku .fphone__no{ font-family:var(--font-en); font-weight:600; font-size:14px; color:var(--plum); margin-top:32px; }
.maneku .fphone__title{ font-size:20px; font-weight:700; color:var(--navy); line-height:1.5; margin-top:4px; }
@media (max-width:767px){
  .maneku .fphones{ grid-template-columns:minmax(0,1fr); gap:56px; margin-top:48px; padding:40px 0; }
  .maneku .fphone--2{ margin-top:0; }
  .maneku .fphone .device--phone{ width:220px; }
}

.maneku .tiles{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:72px;
  grid-template-areas:"a a b" "a a c" "d d d";
}
.maneku .tile--a{ grid-area:a; } .maneku .tile--b{ grid-area:b; } .maneku .tile--c{ grid-area:c; } .maneku .tile--d{ grid-area:d; }
.maneku.is-js .tile.reveal{ transition-delay:calc(var(--i, 0) * 80ms); }
.maneku .tile__in{
  height:100%; border-radius:var(--r-card); padding:32px; display:flex; flex-direction:column;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.maneku .tile:hover .tile__in{ transform:translateY(-4px); box-shadow:var(--shadow); }
.maneku .tile--a .tile__in{ background:var(--grad-surface); }
.maneku .tile--b .tile__in{ background:#fff; border:1px solid var(--line); }
.maneku .tile--c .tile__in{ background:var(--grad-deep); color:#fff; }
.maneku .tile--d .tile__in{ background:var(--coral-100); }
.maneku .tile__ic{
  flex:none; width:48px; height:48px; border-radius:50%; background:var(--lav-100); color:var(--navy);
  font-size:24px; display:flex; align-items:center; justify-content:center;
}
.maneku .tile__title{ font-size:20px; font-weight:700; color:var(--navy); line-height:1.5; margin-top:16px; }
.maneku .tile--c .tile__title{ color:#fff; }
.maneku .tile__body{ font-size:15px; margin-top:12px; line-height:1.8; }
.maneku .tile__body + .tile__body{ margin-top:8px; }
.maneku .chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.maneku .chip{ background:#fff; color:var(--navy); font-size:14px; font-weight:700; line-height:1.4; padding:8px 16px; border-radius:var(--r-pill); }
.maneku .tile__spark{ display:flex; align-items:flex-end; gap:8px; height:72px; margin-top:auto; padding-top:28px; box-sizing:content-box; }
.maneku .tile__spark i{ flex:1; max-width:28px; height:calc(var(--v) / 7 * 100%); background:var(--grad-deep); border-radius:6px 6px 0 0; }
.maneku .tile__row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.maneku .swatches{ display:flex; gap:8px; flex:none; }
.maneku .sw{ display:block; width:24px; height:24px; border-radius:50%; }
.maneku .sw--lav{ background:var(--lav); } .maneku .sw--coral{ background:var(--coral); } .maneku .sw--navy{ background:var(--navy); }
@media (max-width:1023px){
  .maneku .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:"a a" "b c" "d d"; }
}
@media (max-width:767px){
  .maneku .tiles{ grid-template-columns:minmax(0,1fr); grid-template-areas:"a" "b" "c" "d"; margin-top:48px; }
  .maneku .tile__in{ padding:28px 24px; }
  .maneku .tile__row{ flex-direction:column; align-items:flex-start; }
}

/* 6. メリット */
.maneku .merit{ background:var(--bg-soft); }
.maneku .merit .sec__title{ text-align:center; }
.maneku .bento{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:56px;
}
.maneku .cell{
  position:relative; background:#fff; border-radius:var(--r-card);
  padding:40px; overflow:hidden;
}
.maneku .cell--1{ grid-row:1 / 3; background:var(--grad-surface); min-height:420px; display:flex; flex-direction:column; }
.maneku .cell__no{ font-family:var(--font-en); font-weight:600; font-size:14px; color:var(--plum); }
.maneku .cell__title{ font-size:22px; font-weight:700; color:var(--navy); line-height:1.5; margin-top:8px; }
.maneku .cell__body{ font-size:15px; margin-top:16px; }
.maneku .cell__img{ display:block; height:auto; mix-blend-mode:multiply; flex:none; }
.maneku .cell__img--1{ width:300px; max-width:100%; margin-top:auto; align-self:flex-end; }
.maneku .cell__img--s{ width:120px; border-radius:20px; }
.maneku .cell__row{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.maneku .cell__main{ min-width:0; }
.maneku .cell--1 .cell__body{ max-width:22em; }
.maneku .cell__cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:20px; }
.maneku .cell__cols p{ font-size:15px; margin-top:10px; }
@media (max-width:767px){
  .maneku .bento{ grid-template-columns:1fr; margin-top:40px; }
  .maneku .cell.cell--1{ grid-row:auto; min-height:0; }
  .maneku .cell--1 .cell__img--1{ order:-1; width:160px; margin:0 0 16px; align-self:flex-start; }
  .maneku .cell__row{ flex-direction:column-reverse; }
  .maneku .cell__img--s{ width:160px; }
  .maneku .cell{ padding:32px 24px; }
  .maneku .cell__cols{ grid-template-columns:1fr; }
}

/* 7. 導入事例（ストーリーズ風） */
.maneku .case .sec__title{ text-align:center; }
.maneku .case .sec__sub{ text-align:center; }
.maneku .stories{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:48px; }
.maneku .story{
  position:relative; aspect-ratio:9/14; border-radius:var(--r-card); overflow:hidden;
  display:flex; flex-direction:column; padding:16px 18px 24px;
}
.maneku .story--1{ background:var(--lav-100); color:var(--navy); }
.maneku .story--2{ background:var(--grad-mark); color:#0E1530; } /* --ink は ラベンダー端で 4.20:1 のため、この面だけ少し濃く */
.maneku .story--3{ background:var(--grad-deep); color:#fff; }
.maneku .story--4{ background:var(--coral-100); color:var(--navy); }
.maneku .story__bars{ display:flex; gap:4px; flex:none; }
.maneku .story__bar{ position:relative; flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.4); overflow:hidden; }
.maneku .story__bar.on::after{ content:""; position:absolute; inset:0; background:#fff; transform-origin:left; }
.maneku .story__body{ flex:1; min-height:0; display:grid; grid-template-rows:auto 1fr auto; padding-top:24px; }
.maneku .story__label{ font-size:15px; font-weight:700; }
.maneku .story__num{
  align-self:center; font-family:var(--font-en); font-weight:700; white-space:nowrap;
  font-size:clamp(48px, 1.2vw + 34px, 64px); line-height:1.15;
}
.maneku .story__num small{ font-size:.45em; font-weight:700; font-family:var(--font-jp); }
.maneku .story__note{ font-size:14px; line-height:1.6; opacity:.85; }
.maneku .story--2 .story__note{ opacity:1; }
.maneku.is-js .story.reveal{
  transform:translateY(24px) scale(.96);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.34,1.4,.64,1);
  transition-delay:calc(var(--i, 0) * 180ms);
}
.maneku.is-js .story.reveal.is-in{ transform:none; }
.maneku.is-js .story__bar.on::after{ transform:scaleX(0); transition:transform .8s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i, 0) * 180ms + 300ms); }
.maneku.is-js .story.is-in .story__bar.on::after{ transform:scaleX(1); }
@media (min-width:1120px){
  .maneku .stories{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:767px){
  .maneku .stories{
    display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin-inline:calc(var(--gutter) * -1); padding:0 var(--gutter) 8px; scroll-padding-inline:var(--gutter);
  }
  .maneku .story{ flex:0 0 72vw; scroll-snap-align:start; }
}
@media (prefers-reduced-motion: reduce){
  .maneku.is-js .story.reveal{ transform:none !important; }
  .maneku.is-js .story__bar.on::after{ transform:none !important; }
}

/* 8. 活用方法 */
.maneku .usage{ background:var(--bg-soft); }
.maneku .usage .sec__title{ text-align:center; }
.maneku .usage__groups{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,3fr); gap:32px; margin-top:56px; }
.maneku .usage__cards{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:16px; }
.maneku .usage__group--shop .usage__cards{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.maneku .usage__cards > li{ display:grid; grid-template-columns:minmax(0,1fr); }
.maneku .ucard{
  background:#fff; border-radius:var(--r-card); padding:28px 24px;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.maneku .ucard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.maneku .ucard__icon{ font-size:40px; color:var(--navy); line-height:1; display:block; }
.maneku .ucard__title{ word-break:normal; font-size:17px; font-weight:700; margin-top:16px; line-height:1.6; }
.maneku .ucard__cond{ font-size:13px; color:var(--muted); margin-top:8px; line-height:1.7; }
@media (max-width:1023px){
  .maneku .usage__group--shop .usage__cards{ grid-template-columns:1fr; }
}
@media (max-width:767px){
  .maneku .usage__groups{ grid-template-columns:1fr; margin-top:40px; }
}

/* 9. 導入までの流れ（ステッカー風） */
.maneku .flow .sec__title{ text-align:center; }
.maneku .flow__list{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 24px;
  margin-top:56px; padding:8px 6px 10px;
}
.maneku .flow__item{
  --r:0deg; --sg:1;
  display:flex; flex-direction:column; gap:10px; background:#fff; border:2px solid var(--navy);
  border-radius:18px; box-shadow:4px 4px 0 var(--lav); padding:18px;
}
.maneku .flow__item:nth-child(even){ box-shadow:4px 4px 0 var(--coral); }
.maneku .flow__item:nth-child(1){ --r:-2deg; --sg:-1; }
.maneku .flow__item:nth-child(2){ --r:1.5deg; }
.maneku .flow__item:nth-child(3){ --r:-1deg; --sg:-1; }
.maneku .flow__item:nth-child(4){ --r:2deg; }
.maneku .flow__item:nth-child(5){ --r:1.5deg; }
.maneku .flow__item:nth-child(6){ --r:-2deg; --sg:-1; }
.maneku .flow__item:nth-child(7){ --r:2deg; }
.maneku .flow__item:nth-child(8){ --r:-1deg; --sg:-1; }
.maneku .flow__no{
  align-self:flex-start; font-family:var(--font-en); font-weight:700; font-size:28px; line-height:1.1;
  background:var(--grad-deep); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.maneku .flow__text{ font-size:15px; font-weight:700; line-height:1.6; }
.maneku.is-js .flow__item.reveal{
  opacity:1; transform:rotate(var(--r));
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; transition-delay:0s;
}
.maneku.is-js .flow__item.reveal:hover{ transform:rotate(0deg) translateY(-4px); }
.maneku.is-js .flow__item.reveal:not(.is-in){ opacity:0; }
.maneku.is-js .flow__item.reveal.is-in{ animation:stick .5s cubic-bezier(.34,1.56,.64,1) calc(var(--i, 0) * 70ms) backwards; }
@keyframes stick{
  from{ opacity:0; transform:scale(.8) rotate(calc(var(--sg) * 8deg)); }
  to{ opacity:1; transform:rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce){
  .maneku.is-js .flow__item.reveal{ transform:rotate(var(--r)) !important; }
}
@media (max-width:1023px){
  .maneku .flow__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px){
  .maneku .flow__list{ margin-top:40px; gap:24px 16px; }
}

/* 10. よくある質問（DM 風） */
.maneku .faq{ background:var(--bg-soft); }
.maneku .faq .sec__title{ text-align:center; }
.maneku .dm{ max-width:760px; margin:56px auto 0; background:#fff; border-radius:var(--r-panel); box-shadow:var(--shadow); overflow:hidden; }
.maneku .dm__bar{ display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line); }
.maneku .dm__ic, .maneku .qa__av{
  flex:none; border-radius:50%; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.maneku .dm__ic{ width:36px; height:36px; }
.maneku .dm__ic img{ width:22px; height:auto; }
.maneku .dm__name{ font-family:var(--font-en); font-weight:600; color:var(--navy); }
.maneku .dm__body{ padding:24px 20px; display:grid; gap:20px; }
.maneku .qa{ display:grid; gap:10px; }
.maneku .qa summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.maneku .qa summary::-webkit-details-marker{ display:none; }
.maneku .qa__plus{ flex:none; font-size:16px; color:var(--muted); transition:transform .3s cubic-bezier(.16,1,.3,1); }
.maneku .qa[open] .qa__plus{ transform:rotate(45deg); }
.maneku .qa__text{
  max-width:78%; background:var(--grad-deep); color:#fff; font-size:15px; font-weight:700; line-height:1.7;
  padding:12px 18px; border-radius:20px 20px 6px 20px;
}
.maneku .qa__body{ position:relative; display:flex; align-items:flex-end; gap:8px; }
.maneku .qa__av{ width:28px; height:28px; }
.maneku .qa__av img{ width:16px; height:auto; }
.maneku .qa__bub{
  max-width:82%; background:var(--bg-soft); color:var(--ink); font-size:15px; line-height:1.8;
  padding:12px 18px; border-radius:20px 20px 20px 6px;
}
.maneku .qa__bub p{ margin:0; }
.maneku .qa__typing{
  position:absolute; left:36px; bottom:0; display:flex; align-items:center; gap:5px; padding:13px 16px;
  background:var(--bg-soft); border-radius:20px 20px 20px 6px; opacity:0; pointer-events:none;
}
.maneku .qa__typing i{ display:block; width:6px; height:6px; border-radius:50%; background:var(--muted); animation:qa-dot .3s ease-in-out 2; }
.maneku .qa__typing i:nth-child(2){ animation-delay:.08s; }
.maneku .qa__typing i:nth-child(3){ animation-delay:.16s; }
.maneku .qa[open] .qa__bub{ animation:qa-in .25s ease-out .6s backwards; }
.maneku .qa[open] .qa__typing{ animation:qa-typing .6s linear both; }
@keyframes qa-in{ from{ opacity:0; transform:translateY(6px); } }
@keyframes qa-typing{ 0%,90%{ opacity:1; } 100%{ opacity:0; } }
@keyframes qa-dot{ 50%{ transform:translateY(-3px); } }
@media (prefers-reduced-motion: reduce){ .maneku .qa__typing{ display:none; } }
.maneku .dm__input{
  display:flex; align-items:center; gap:12px; padding:12px 20px 16px; border-top:1px solid var(--line);
  color:var(--muted); font-size:22px;
}
.maneku .dm__field{ flex:1; height:38px; border:1px solid var(--line); border-radius:var(--r-pill); }
@media (max-width:767px){
  .maneku .dm__body{ padding:20px 14px; }
  .maneku .qa__text{ max-width:86%; }
  .maneku .qa__bub{ max-width:88%; }
}

/* 11. お問い合わせ */
.maneku .cta{ padding-block:clamp(80px, 10vw, 128px); }
.maneku .cta__panel{
  position:relative; overflow:hidden; background:var(--grad-mark); border-radius:var(--r-panel);
  padding:clamp(56px, 8vw, 96px); display:flex; align-items:center; justify-content:center;
  gap:clamp(32px, 6vw, 80px);
}
.maneku .cta__img{ width:280px; height:auto; border-radius:var(--r-card); background:#fff; flex:none; }
.maneku .cta__img, .maneku .cta__body{ position:relative; z-index:2; }
.maneku .cta__blob1{ width:220px; height:220px; left:-60px; top:-60px; }
.maneku .cta__blob2{ width:260px; height:260px; right:-70px; bottom:-90px; }
.maneku .cta__body{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.maneku .cta__title{ font-size:clamp(28px, 2.4vw + 18px, 40px); font-weight:700; color:var(--navy); line-height:1.4; }
@media (max-width:767px){
  .maneku .cta__panel{ flex-direction:column; text-align:center; }
  .maneku .cta__body{ align-items:center; }
  .maneku .cta__img{ width:200px; }
  .maneku .cta__blob1{ width:132px; height:132px; left:-36px; top:-36px; }
  .maneku .cta__blob2{ width:156px; height:156px; right:-42px; bottom:-54px; }
}

/* フッター */
.maneku .ftr{ background:var(--grad-surface); color:var(--navy); padding-block:32px 96px; }
.maneku .ftr__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.maneku .ftr__logo{ display:inline-flex; }
.maneku .ftr__logo img{ height:24px; width:auto; display:block; }
.maneku .ftr small{ font-size:13px; }

/* 明るい地のカード（1枚目・4枚目）は白い進捗バーが見えないので紺にする */
.maneku .story--1 .story__bar, .maneku .story--4 .story__bar{ background:rgba(49,59,144,.18); }
.maneku .story--1 .story__bar.on::after, .maneku .story--4 .story__bar.on::after{ background:var(--navy); }

/* === mock.css === */
/* 端末の中身（サンプル表示）。サイズは .screen 基準の cqw */
.maneku .screen{
  position:relative; background:#fff; color:var(--ink); overflow:hidden;
  container-type:size; box-shadow:0 0 0 3px var(--screen);
  letter-spacing:.02em; word-break:auto-phrase;
}
.maneku .device--phone .screen{ width:100%; height:100%; }

/* ---- スマホ ---- */
.maneku .ph-root{ width:100cqw; height:100cqh; display:flex; flex-direction:column; font-size:3cqw; line-height:1.4; }
.maneku .ph-status{
  flex:none; height:6cqw; display:flex; align-items:center; justify-content:space-between;
  padding-inline:7cqw; font-family:var(--font-en); font-weight:600; font-size:3.2cqw;
}
.maneku .ph-status__ic{ display:flex; gap:1cqw; font-size:3.6cqw; }
.maneku .ph-prog{ flex:none; display:flex; gap:1.2cqw; padding:1cqw 4cqw 1.6cqw; }
.maneku .ph-prog__b{
  flex:1; height:.9cqw; border-radius:1cqw; background:var(--line);
  animation:ph-bar 12s linear infinite;
}
.maneku .ph-prog__b:nth-child(2){ animation-delay:3s; }
.maneku .ph-prog__b:nth-child(3){ animation-delay:6s; }
.maneku .ph-prog__b:nth-child(4){ animation-delay:9s; }
@keyframes ph-bar{ 0%,24.9%{ background:var(--navy); } 25%,100%{ background:var(--line); } }
.maneku .ph-stage{ position:relative; flex:1; min-height:0; overflow:hidden; }
.maneku .ph-scene{ position:absolute; inset:0; opacity:0; animation:ph-scene 12s infinite; }
.maneku .ph-scene--comment{ animation-delay:3s; }
.maneku .ph-scene--dm{ animation-delay:6s; }
.maneku .ph-scene--done{ animation-delay:9s; }
@keyframes ph-scene{
  0%{ opacity:0; transform:translateX(6cqw); }
  3.5%{ opacity:1; transform:none; }
  21.5%{ opacity:1; transform:none; }
  25%{ opacity:0; transform:translateX(-6cqw); }
  25.01%,100%{ opacity:0; transform:translateX(6cqw); }
}
.maneku .ph-late{ opacity:0; transform:translateY(4cqw); animation:ph-late 12s infinite; }
.maneku .ph-late--c{ animation-delay:3.8s; }
.maneku .ph-late--d{ animation-delay:6.4s; }
@keyframes ph-late{
  0%{ opacity:0; transform:translateY(4cqw); }
  4%,85%{ opacity:1; transform:none; }
  90%,100%{ opacity:0; transform:translateY(4cqw); }
}
.maneku .ph-av{ flex:none; width:8cqw; height:8cqw; border-radius:50%; background:var(--grad-mark); }
.maneku .ph-post__head, .maneku .ph-dm__head{ display:flex; align-items:center; gap:2.4cqw; padding:1.6cqw 4cqw; }
.maneku .ph-post__name{ font-size:3.4cqw; font-weight:700; }
.maneku .ph-post__img{
  aspect-ratio:1; background:var(--grad-surface); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3cqw; text-align:center; padding-inline:8cqw;
}
.maneku .ph-post__t{ font-size:6.6cqw; font-weight:700; color:var(--navy); line-height:1.3; }
.maneku .ph-pill{ background:#fff; color:var(--navy); font-size:3cqw; font-weight:700; padding:.8cqw 3cqw; border-radius:var(--r-pill); }
.maneku .ph-post__act{ display:flex; gap:3.6cqw; padding:2.4cqw 4cqw 0; font-size:6.4cqw; line-height:1; }
.maneku .ph-post__cap{ padding:2cqw 4cqw; font-size:3.2cqw; line-height:1.6; margin:0; }
.maneku .ph-cm__h{ text-align:center; font-size:4cqw; font-weight:700; padding:2cqw 0 3cqw; border-bottom:.3cqw solid var(--line); margin:0; }
.maneku .ph-cm{ display:flex; align-items:center; gap:3cqw; padding:3cqw 4cqw; }
.maneku .ph-cm__n{ font-size:3.2cqw; font-weight:700; margin:0; }
.maneku .ph-cm__t{ font-size:3.4cqw; margin:0; }
.maneku .ph-dm__head{ border-bottom:.3cqw solid var(--line); padding-block:2.4cqw; font-size:5cqw; }
.maneku .ph-dm__head .ph-av{ width:7cqw; height:7cqw; }
.maneku .ph-dm__bubble{ margin:5cqw 4cqw 0; width:80cqw; background:var(--bg-soft); border-radius:4cqw 4cqw 4cqw 1cqw; padding:3cqw; }
.maneku .ph-coupon{ background:#fff; border:.3cqw solid var(--line); border-radius:3cqw; padding:3.4cqw; }
.maneku .ph-coupon p{ margin:0; }
.maneku .ph-coupon__t{ font-size:4cqw; font-weight:700; color:var(--navy); line-height:1.4; }
.maneku .ph-coupon__d{ font-size:2.8cqw; color:var(--muted); margin-top:1.4cqw !important; }
.maneku .ph-coupon__b{
  margin-top:3cqw !important; background:var(--navy); color:#fff; text-align:center;
  font-size:3cqw; font-weight:700; padding:2cqw 0; border-radius:var(--r-pill);
}
.maneku .ph-done__top{
  height:50%; background:var(--grad-deep); color:#fff; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2cqw; text-align:center;
}
.maneku .ph-done__top p{ margin:0; }
.maneku .ph-done__ck{
  width:18cqw; height:18cqw; border-radius:50%; border:.9cqw solid #fff; font-size:9cqw;
  display:flex; align-items:center; justify-content:center; margin-bottom:2cqw;
  animation:ph-pop 12s infinite; animation-delay:9s;
}
@keyframes ph-pop{
  0%{ transform:scale(.6); animation-timing-function:cubic-bezier(.34,1.56,.64,1); }
  4.2%,100%{ transform:scale(1); }
}
.maneku .ph-done__t{ font-size:5cqw; font-weight:700; }
.maneku .ph-done__s{ font-size:3.2cqw; }
.maneku .ph-done__bot{ padding:5cqw 6cqw 0; }
.maneku .ph-bar{
  height:14cqw;
  background:
    repeating-linear-gradient(90deg, #111 0 .5cqw, #fff .5cqw 1.1cqw, #111 1.1cqw 2.1cqw, #fff 2.1cqw 2.6cqw, #111 2.6cqw 3.0cqw, #fff 3.0cqw 4.2cqw);
}
.maneku .ph-tbl{ margin:4cqw 0 0; font-size:3cqw; }
.maneku .ph-tbl > div{ display:flex; justify-content:space-between; gap:3cqw; padding:1.8cqw 0; border-bottom:.3cqw solid var(--line); }
.maneku .ph-tbl dt{ color:var(--muted); }
.maneku .ph-tbl dd{ margin:0; font-weight:700; text-align:right; }

/* ---- 機能紹介のスマホ ---- */
.maneku .pa{ width:100cqw; height:100cqh; display:flex; flex-direction:column; font-size:3.4cqw; line-height:1.3; }
.maneku .pa__top{ flex:none; display:flex; align-items:center; justify-content:space-between; padding:7cqw 5cqw 3cqw; border-bottom:.4cqw solid var(--line); }
.maneku .pa__brand{ font-family:var(--font-en); font-weight:600; color:var(--navy); font-size:4.6cqw; letter-spacing:.06em; }
.maneku .pa__store{ display:flex; align-items:center; gap:1.2cqw; font-size:3.2cqw; }
.maneku .pa__body{ flex:1; min-height:0; overflow:hidden; padding:5cqw; }
.maneku .pa__h{ margin:0 0 4cqw; font-size:5.6cqw; font-weight:700; color:var(--navy); line-height:1.3; }
.maneku .pa__list{ margin:0; padding:0; display:grid; gap:3.4cqw; }
.maneku .prow{
  display:grid; grid-template-columns:10cqw minmax(0,1fr) auto; grid-template-areas:"ic name badge" "ic no badge";
  column-gap:3.4cqw; align-items:center; background:var(--bg-soft); border-radius:3.6cqw; padding:4.4cqw 4cqw;
}
.maneku .prow__ic{ grid-area:ic; width:10cqw; height:10cqw; border-radius:50%; background:#fff; color:var(--navy); font-size:5.4cqw; display:flex; align-items:center; justify-content:center; }
.maneku .prow__name{ grid-area:name; font-size:4.2cqw; font-weight:700; }
.maneku .prow__no{ grid-area:no; font-family:var(--font-en); font-size:3.4cqw; color:var(--muted); letter-spacing:.04em; }
.maneku .prow .badge{ grid-area:badge; }
.maneku .badge{ justify-self:start; background:var(--lav-100); color:var(--navy); font-size:3cqw; font-weight:700; padding:.8cqw 2.8cqw; border-radius:var(--r-pill); }
.maneku .pkpis{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3cqw; }
.maneku .pkpi{ background:var(--bg-soft); border-radius:3.4cqw; padding:3.6cqw 3.4cqw; min-width:0; }
.maneku .pkpi__l{ display:block; font-size:3cqw; color:var(--muted); letter-spacing:0; line-height:1.3; }
.maneku .pkpi__n{ display:block; margin-top:1.4cqw; font-family:var(--font-en); font-weight:700; color:var(--navy); font-size:8.6cqw; line-height:1.1; white-space:nowrap; }
.maneku .pkpi__n small{ font-size:4.4cqw; margin-left:.4cqw; }
.maneku [data-count]{ display:inline-block; text-align:right; }
.maneku .pchart{ margin-top:4cqw; border:.4cqw solid var(--line); border-radius:3.4cqw; padding:3.6cqw 3.4cqw; --max:8; }
.maneku .pchart__t{ margin:0 0 3cqw; font-size:3.6cqw; font-weight:700; line-height:1.3; }
.maneku .cols{ display:flex; gap:1.6cqw; }
.maneku .col{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; }
.maneku .col__plot{ width:100%; height:52cqw; display:flex; align-items:flex-end; justify-content:center; }
.maneku .bar{
  display:block; width:100%; max-width:7cqw; height:calc(var(--v) / var(--max) * 100%);
  background:linear-gradient(180deg, var(--navy), var(--plum)); border-radius:1.4cqw 1.4cqw 0 0;
  transform-origin:bottom;
}
.maneku .bar--0{ height:.8cqw; background:var(--line); border-radius:0; }
.maneku .col__l{ margin-top:1.6cqw; font-size:3cqw; color:var(--muted); letter-spacing:0; line-height:1.3; }
.maneku .pa__tab{ flex:none; margin-top:auto; display:flex; justify-content:space-around; padding:3.4cqw 2cqw 4.6cqw; border-top:.4cqw solid var(--line); font-size:6.4cqw; color:var(--muted); }
.maneku .pa__tab .is-sel{ color:var(--navy); }

/* 動き: 入ったとき */
.maneku.is-js .prow{
  opacity:0; transform:translateY(4cqw);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--n) * 120ms);
}
.maneku.is-js .fphone.is-in .prow{ opacity:1; transform:none; }
.maneku.is-js .bar{ transform:scaleY(0); transition:transform .9s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--n) * 40ms); }
.maneku.is-js .fphone.is-in .bar{ transform:scaleY(1); }

@media (prefers-reduced-motion: reduce){
  .maneku .ph-scene{ opacity:0; transform:none; }
  .maneku .ph-scene--dm{ opacity:1; }
  .maneku .ph-late{ opacity:1; transform:none; }
  .maneku .ph-prog__b:nth-child(-n+3){ background:var(--navy); }
  .maneku.is-js .prow{ opacity:1; transform:none; }
  .maneku.is-js .bar{ transform:scaleY(1); }
}

/* 画面の下半分が空かないよう、実際のアプリと同じく下に寄せる */
.maneku .ph-scene{ display:flex; flex-direction:column; }
.maneku .ph-post__img{ aspect-ratio:4/5; }
.maneku .ph-cm--first{ margin-top:auto; }
.maneku .ph-dm__bubble{ margin-top:auto; margin-bottom:4cqw; }
.maneku .ph-tab, .maneku .ph-input{ display:flex; align-items:center; flex:none; }
.maneku .ph-tab{ margin-top:auto; justify-content:space-around; padding:3cqw 2cqw 4cqw; border-top:.3cqw solid var(--line); font-size:6.4cqw; color:var(--ink); }
.maneku .ph-scene--comment .ph-tab{ margin-top:2cqw; }
.maneku .ph-input{ gap:3cqw; margin:0 4cqw 4cqw; padding:2cqw 3.6cqw; border:.3cqw solid var(--line); border-radius:999px; font-size:5.4cqw; color:var(--muted); }
.maneku .ph-input__f{ flex:1; }

/* === fv.css === */
/* FV（ページで唯一の濃い面）・Orb・ヘッダー切替 */
.maneku .fv{ isolation:isolate; }
.maneku .fv .pill{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); color:#fff; }
.maneku .fv__l1, .maneku .fv__l2{ color:#FFFFFF; }
.maneku .fv__lead{ color:rgba(255,255,255,.86); }
.maneku .fv .blob{ opacity:.35; }

/* ボタン（白地・紺文字） */
.maneku .btn--light{ background:#fff; color:var(--navy); }
.maneku .btn--light:hover{ background:#F1EFFA; }

/* 粒状ノイズ（FV と CTA 共通） */
.maneku .fv::after, .maneku .cta__panel::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Orb（スマホの背後） */
.maneku .fv__orb, .maneku .fv__orb-fallback{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(600px, 46vw); height:min(600px, 46vw); pointer-events:none; z-index:0;
}
.maneku .fv__orb{ display:block; -webkit-mask-image:radial-gradient(closest-side, #000 72%, transparent 100%); mask-image:radial-gradient(closest-side, #000 72%, transparent 100%); }
.maneku .fv__orb-fallback{
  background:radial-gradient(circle, rgba(132,130,186,.55), rgba(222,152,141,.25) 45%, transparent 70%);
  filter:blur(20px);
}
.maneku .fv__orb-fallback[hidden]{ display:none; }
.maneku .fv__visual .device--phone{ position:relative; z-index:1; animation:float 6s ease-in-out infinite; }
.maneku .fv__visual .seal{ z-index:2; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* 切替の目印（これを画面上端が過ぎたらヘッダー・Dock が切り替わる） */
.maneku .fv__sentinel{
  position:absolute; left:0; width:100%; height:1px; pointer-events:none;
  bottom:72px;
}

/* ヘッダー切替 */
.maneku .hdr__logo{ position:relative; }
.maneku .hdr__logo-white{ position:absolute; left:0; top:0; height:28px; width:auto; transition:opacity .3s; }
.maneku .hdr__logo-color{ transition:opacity .3s; opacity:0; }
.maneku .hdr .btn{ transition:background-color .3s, color .3s, transform .15s; }
.maneku .hdr.is-solid{
  background:rgba(255,255,255,.92); border-bottom-color:var(--line);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.maneku .hdr.is-solid .hdr__logo-color{ opacity:1; }
.maneku .hdr.is-solid .hdr__logo-white{ opacity:0; }
.maneku .hdr.is-solid .btn--light{ background:var(--coral); color:var(--ink); }
.maneku .hdr.is-solid .btn--light:hover{ background:#E7ADA4; }

@media (max-width:767px){
  .maneku .fv__orb, .maneku .fv__orb-fallback{ width:min(520px, 120vw); height:min(520px, 120vw); }
}
@media (prefers-reduced-motion: reduce){
  .maneku .fv__visual .device--phone{ animation:none !important; }
}
.maneku .fv__text{ position:relative; z-index:2; }

/* === widgets.css === */
/* Dock */
.maneku .dock{
  position:fixed; bottom:20px; left:0; right:0; margin-inline:auto; width:max-content; max-width:calc(100vw - 24px);
  z-index:40; display:flex; gap:6px; padding:8px 10px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%);
  box-shadow:var(--shadow);
  transition:opacity .3s, transform .4s cubic-bezier(.16,1,.3,1);
}
.maneku.is-js .dock{ opacity:0; transform:translateY(16px); pointer-events:none; }
.maneku.is-js .dock.is-show{ opacity:1; transform:none; pointer-events:auto; }
.maneku .dock__item{ position:relative; display:block; --s:1; border-radius:14px; }
.maneku .dock__item i{
  display:flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:14px; background:var(--lav-100); color:var(--navy); font-size:22px;
  transform:scale(var(--s)); transform-origin:bottom center; transition:background-color .25s, color .25s;
}
.maneku .dock__item.is-current i{ background:var(--navy); color:#fff; }
.maneku .dock__tip{
  position:absolute; left:50%; bottom:calc(100% + 10px + (var(--s) - 1) * 44px);
  transform:translate(-50%, 4px); background:var(--navy); color:#fff; font-size:12px; font-weight:700;
  line-height:1; padding:8px 12px; border-radius:var(--r-pill); white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.maneku .dock__item:hover .dock__tip, .maneku .dock__item:focus-visible .dock__tip{ opacity:1; transform:translate(-50%, 0); }
@media (max-width:767px){
  .maneku .dock{ gap:4px; overflow-x:auto; }
  .maneku .dock__item i{ width:36px; height:36px; font-size:18px; border-radius:12px; transform:none; }
  .maneku .dock__tip{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .maneku .dock{ transition:none !important; }
}

.maneku .usage__group:not(.usage__group--shop) .usage__cards{ grid-template-columns:minmax(0,1fr); }

/* === im.css === */
/* 没入版（immersive.html）。全部 body.im 配下。部品 -> FV -> 各節 */
.maneku{
  --im-bg:#FBF3F1;
  --im-line:rgba(25,37,72,.12);
  --im-padx:max(var(--gutter), calc((100vw - 1360px) / 2));
  background:var(--im-bg);
}

/* ---- 共通の飾り ---- */
.maneku .im-glow{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; pointer-events:none; animation:im-drift 18s ease-in-out infinite alternate; }
.maneku .im-glow--lav{ background:var(--lav); }
.maneku .im-glow--lav{ background:var(--coral); opacity:.28; }
.maneku .im-glow--coral{ background:var(--coral); }
.maneku .im-glow--coral{ opacity:.7; }
.maneku .im-glow--navy{ background:var(--coral); opacity:.3; }
.maneku .im-ring{ position:absolute; border:1px solid var(--im-line); border-radius:50%; pointer-events:none; }
.maneku .im-dots{ display:block; width:120px; height:72px; background:radial-gradient(var(--im-line) 1.2px, transparent 1.3px) 0 0/14px 14px; }
.maneku .im-plus{ position:absolute; font-size:16px; color:var(--ink); opacity:.5; line-height:1; }
.maneku .im-rule{ display:block; width:120px; height:4px; border-radius:2px; background:linear-gradient(90deg, var(--lav) 0%, var(--coral) 45%, var(--coral) 100%); }
.maneku .im-panel{ background:#fff; border:1px solid var(--im-line); border-radius:var(--r-panel); }
@keyframes im-drift{ from{ transform:translate(0,0); } to{ transform:translate(36px,-26px); } }

.maneku .sec, .maneku .problem, .maneku .usage, .maneku .faq, .maneku .merit, .maneku .features, .maneku .how, .maneku .case, .maneku .flow, .maneku .clients{ background:var(--im-bg); }
.maneku .sec{ overflow-x:clip; }
.maneku .sec__title{
  font-family:var(--font-jp); font-weight:700; font-size:clamp(28px, 2.4vw + 14px, 48px);
  line-height:1.3; text-align:left; color:var(--ink);
}
.maneku .how .sec__title, .maneku .how .sec__sub,
.maneku .problem .sec__title, .maneku .features .sec__title,
.maneku .merit .sec__title, .maneku .case .sec__title, .maneku .case .sec__sub{
  text-align:left;
}
.maneku .hl, .maneku.is-js .hl{ background:none; padding:0; }
.maneku .sec__title + .im-rule{ margin-top:20px; }
.maneku .sec__sub{ text-align:left; }
.maneku .wrap{ max-width:1360px; }

/* ---- ヘッダー・Dock ---- */
.maneku .hdr, .maneku .hdr.is-solid{
  background:rgba(251,243,241,.8); border-bottom-color:transparent;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.maneku .hdr .hdr__logo-color{ opacity:1; }
.maneku .hdr .hdr__logo-white{ opacity:0; }
.maneku .hdr .btn--light{ background:var(--coral); color:var(--ink); }
.maneku .hdr.is-dark{ background:rgba(25,37,72,.35); }
.maneku .hdr.is-dark .hdr__logo-color{ opacity:0; }
.maneku .hdr.is-dark .hdr__logo-white{ opacity:1; }
.maneku .hdr.is-dark .btn--light{ background:var(--coral); color:var(--ink); }
.maneku .hdr .btn--light:hover, .maneku .hdr.is-dark .btn--light:hover{ background:#E7ADA4; }
.maneku .dock{ background:rgba(255,255,255,.85); border:1px solid var(--im-line); }
.maneku .dock__item i{ background:#F9ECEA; }
.maneku .dock__item.is-current i{ background:var(--coral); color:var(--ink); }
.maneku .qa__text{ background:var(--coral); color:var(--ink); }
.maneku .qa__plus{ color:var(--ink); }
.maneku .tile__spark i{ background:var(--coral); }

/* ---- 2. FV ---- */
.maneku .fv{
  background:var(--im-bg); color:var(--ink); min-height:100dvh; padding-block:104px 72px;
  display:flex; align-items:center; position:relative; overflow:hidden;
}
.maneku .fv::after{ display:none; }
.maneku .fv__grid{ display:block; }
.maneku .fv .pill{ background:none; border:0; padding:0; font-size:13px; font-weight:700; letter-spacing:.24em; color:color-mix(in srgb, var(--ink) 70%, transparent); }
.maneku .fv__title{ display:flex; flex-direction:column; margin-top:24px; color:var(--ink); line-height:.95; animation:im-rise 1.1s cubic-bezier(.16,1,.3,1) both; }
.maneku .fv__l2{
  font-family:var(--font-en); font-weight:700; font-size:clamp(72px, 11vw, 184px);
  letter-spacing:-.045em; line-height:.95; color:var(--ink);
}
.maneku .fv__l1{ font-size:clamp(18px, 1vw + 12px, 26px); font-weight:700; line-height:1.4; color:var(--ink); margin-top:20px; }
.maneku .fv__l2{ order:1; align-self:flex-start; } .maneku .fv__l1{ order:2; } .maneku .fv__title .im-rule{ order:3; margin-top:24px; }
.maneku .fv__title .im-rule{ width:clamp(160px, 21vw, 300px); height:5px; border-radius:3px; }
.maneku .fv__lead{ color:color-mix(in srgb, var(--ink) 72%, transparent); margin-top:24px; max-width:30em; }
.maneku .fv__text{ min-width:0; position:relative; z-index:2; max-width:min(46vw, 660px); }
.maneku .btn--light{ background:var(--coral); color:var(--ink); }
.maneku .btn--light:hover{ background:#E7ADA4; }
.maneku .fv__dots{ position:absolute; left:var(--im-padx); bottom:40px; }

.maneku .fv__visual{
  --pw:clamp(200px, 16vw, 250px);
  position:absolute; inset:0; z-index:auto; pointer-events:none; height:auto;
}
.maneku .fv__aura{
  position:absolute; z-index:0; right:24vw; top:16%; width:34vw; height:72%; border-radius:50%; filter:blur(48px); opacity:.9;
  background:radial-gradient(circle at 35% 25%, rgba(222,152,141,.85), transparent 58%), radial-gradient(circle at 25% 78%, rgba(240,190,180,.5), transparent 55%), radial-gradient(circle at 78% 58%, rgba(240,190,180,.8), transparent 58%);
  animation:fvp-aura 18s ease-in-out infinite alternate;
}
@keyframes fvp-aura{ to{ transform:translate3d(-2vw, 2%, 0) scale(1.06); } }
.maneku .fv__visual .fv__r1{
  position:absolute; left:48%; top:13%; width:clamp(220px, 19vw, 300px); height:clamp(220px, 19vw, 300px); translate:none;
  border:1px solid rgba(25,37,72,.55); border-radius:50%; background:none; box-shadow:none; z-index:2;
}
.maneku .fv__star{ position:absolute; z-index:3; color:var(--ink); line-height:1; }
.maneku .fv__star--a{ left:55%; top:58%; font-size:30px; }
.maneku .fv__star--b{ right:4%; top:16%; font-size:22px; }
.maneku .im-person{
  position:absolute; right:-4vw; bottom:0; left:auto; z-index:1; height:min(90%, 980px); width:auto; max-width:none;
  animation:im-photo 1.1s cubic-bezier(.16,1,.3,1) .15s both;
}
.maneku .im-fvphone{
  position:absolute; left:47%; top:36%; right:auto; bottom:auto; z-index:3; width:var(--pw);
  transform:rotate(-9deg); animation:im-phone 1.1s cubic-bezier(.16,1,.3,1) .3s both;
}
.maneku .fv__visual .device--phone{ width:100%; }
.maneku .fv__visual .seal{ left:calc(47% + var(--pw) - 64px); top:calc(36% - 56px); right:auto; z-index:4; width:112px; height:112px; }
@keyframes im-rise{ from{ opacity:0; transform:translateY(24px); } }
@keyframes im-photo{ from{ opacity:0; transform:scale(1.06); } }
@keyframes im-phone{ from{ opacity:0; transform:translateY(40px) rotate(-12deg); } }

@media (min-width:1024px) and (max-width:1439px){
  .maneku .fv__lead{ max-width:26em; }
}
@media (min-width:1024px) and (max-width:1279px){
  .maneku .im-fvphone{ left:52%; }
  .maneku .fv__visual .seal{ left:calc(52% + var(--pw) - 64px); }
}
@media (min-width:1440px){
  .maneku .im-fvphone{ left:50%; }
  .maneku .fv__visual .seal{ left:calc(50% + var(--pw) - 64px); }
}
@media (min-width:1024px) and (max-width:1279px){
  .maneku .im-person{ height:min(80%, 640px); right:-12vw; }
}
@media (min-width:768px) and (max-width:1023px){
  .maneku .fv__visual{ --pw:clamp(170px, 20vw, 210px); }
  .maneku .im-fvphone{ left:40%; top:64%; }
  .maneku .fv__visual .seal{ left:calc(40% + var(--pw) - 64px); top:calc(64% - 56px); }
  .maneku .im-person{ height:min(52%, 540px); right:-8vw; }
  .maneku .fv__text{ max-width:46vw; }
}
@media (max-width:767px){
  .maneku .fv{ padding-top:96px; padding-bottom:64px; flex-direction:column; align-items:stretch; }
  .maneku .fv__grid{ display:block; }
  .maneku .fv__text{ display:block; max-width:none; }
  .maneku .fv__visual{ position:relative; inset:auto; height:118vw; margin-top:32px; --pw:40vw; }
  .maneku .im-person{ right:-6vw; bottom:0; height:100%; }
  .maneku .fv__aura{ right:18vw; top:6%; width:70vw; height:80%; filter:blur(32px); }
  .maneku .fv__visual .fv__r1{ left:8vw; top:4%; width:56vw; height:56vw; }
  .maneku .fv__star--a{ left:46vw; top:62%; font-size:22px; }
  .maneku .fv__star--b{ right:4vw; top:4%; font-size:18px; }
  .maneku .im-fvphone{ left:6vw; top:22%; }
  .maneku .fv__visual .seal{ width:88px; height:88px; left:calc(6vw - 16px); top:calc(22% - 40px); }
  .maneku .fv__visual .seal__a{ font-size:13px; }
  .maneku .fv__visual .seal__b{ font-size:11px; }
  .maneku .fv__dots{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .maneku .fv__aura{ animation:none !important; } }

/* ---- 3. 導入企業 ---- */
.maneku .clients{ border-block:1px solid var(--im-line); }

/* ---- 4. 悩み ---- */
.maneku .problem__grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:56px; align-items:center; margin-top:0; }
.maneku .im-prob__art{ position:relative; display:grid; place-items:center; min-height:440px; }
.maneku .im-prob__panel{ position:relative; z-index:1; width:min(100%, 420px); background:none; border:0; }
.maneku .problem__img{ display:block; width:100%; max-width:none; mix-blend-mode:normal; }
.maneku .im-prob__main .bubbles{ margin-top:48px; }
.maneku .problem__punch{ margin-top:72px; text-align:left; color:var(--ink); }
.maneku .problem__punch span{ background:none; padding:0; }
@media (max-width:767px){
  .maneku .problem__grid{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .maneku .im-prob__art{ min-height:0; padding-block:24px; }
  .maneku .im-prob__art .im-ring{ width:min(88vw, 440px) !important; height:min(88vw, 440px) !important; margin:0 !important; translate:-50% -50%; }
  .maneku .im-prob__art .im-glow{ width:260px !important; height:260px !important; margin:0 !important; translate:-50% -50%; }
  .maneku .problem__punch{ margin-top:48px; }
}

/* ---- 5. 仕組み（張り付き 400dvh） ---- */
.maneku .im-how{ height:400dvh; padding:0; position:relative; }
.maneku .im-how__sticky{
  position:sticky; top:0; height:100dvh; overflow:clip; padding-inline:var(--im-padx);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:center;
}
.maneku .im-how__text{ position:relative; z-index:2; padding-top:56px; }
.maneku .im-how__steps{ margin-top:32px; display:grid; gap:22px; }
.maneku .im-step{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:20px; align-items:start; opacity:.35; transition:opacity .5s; }
.maneku .im-step__no{ font-family:var(--font-en); font-weight:700; font-size:clamp(28px, 2.4vw, 40px); line-height:1.1; color:var(--ink); transition:color .5s; min-width:2.1em; }
.maneku .im-how[data-step="1"] .im-step[data-s="1"], .maneku .im-how[data-step="2"] .im-step[data-s="2"], .maneku .im-how[data-step="3"] .im-step[data-s="3"], .maneku .im-how[data-step="4"] .im-step[data-s="4"]{ opacity:1; }
.maneku .im-how[data-step="1"] .im-step[data-s="1"] .im-step__no, .maneku .im-how[data-step="2"] .im-step[data-s="2"] .im-step__no, .maneku .im-how[data-step="3"] .im-step[data-s="3"] .im-step__no, .maneku .im-how[data-step="4"] .im-step[data-s="4"] .im-step__no{ color:var(--navy); }
.maneku .im-step .step__title{ margin-top:0; font-size:clamp(18px, .6vw + 14px, 24px); }
.maneku .im-how__track{ position:absolute; inset:0; display:grid; grid-template-rows:repeat(4,1fr); pointer-events:none; }
.maneku .im-how__stage{ position:relative; height:100%; display:grid; place-items:center; min-width:0; }
.maneku .im-how__stage .im-glow{ width:420px; height:420px; transition:opacity 1.2s, translate 1.4s cubic-bezier(.16,1,.3,1); }
.maneku .im-how__ga{ left:50%; top:6%; background:var(--coral); }
.maneku .im-how__gb{ left:8%; bottom:4%; background:var(--coral); animation-delay:-6s; }
.maneku .im-how[data-step="1"] .im-how__ga{ opacity:.6; } .maneku .im-how[data-step="1"] .im-how__gb{ opacity:.35; }
.maneku .im-how[data-step="2"] .im-how__ga{ opacity:.35; translate:-40px 50px; } .maneku .im-how[data-step="2"] .im-how__gb{ opacity:.6; translate:40px -30px; }
.maneku .im-how[data-step="3"] .im-how__ga{ opacity:.6; translate:20px 90px; } .maneku .im-how[data-step="3"] .im-how__gb{ opacity:.4; translate:80px -60px; }
.maneku .im-how[data-step="4"] .im-how__ga{ opacity:.3; translate:-60px 120px; } .maneku .im-how[data-step="4"] .im-how__gb{ opacity:.65; translate:20px -90px; }
.maneku .im-how__r1, .maneku .im-how__r2{ left:50%; top:50%; translate:-50% -50%; }
.maneku .im-how__r1{ width:min(560px, 46vw); height:min(560px, 46vw); }
.maneku .im-how__r2{ width:min(380px, 32vw); height:min(380px, 32vw); }
.maneku .im-how__phone{
  --pw:min(300px, 34dvh, 30vw); position:relative; z-index:2; width:var(--pw);
  transform:rotate(-8deg); transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.maneku .im-how[data-step="2"] .im-how__phone{ transform:rotate(4deg) translateX(-2%); }
.maneku .im-how[data-step="3"] .im-how__phone{ transform:rotate(-3deg); }
.maneku .im-how[data-step="4"] .im-how__phone{ transform:rotate(6deg) scale(1.03); }
.maneku .im-how .device--phone{ width:100%; }
.maneku .im-how .ph-scene{ animation:none; opacity:0; transform:translateX(6cqw); transition:opacity .5s, transform .6s cubic-bezier(.16,1,.3,1); }
.maneku .im-how[data-step="1"] .ph-scene--post, .maneku .im-how[data-step="2"] .ph-scene--comment, .maneku .im-how[data-step="3"] .ph-scene--dm, .maneku .im-how[data-step="4"] .ph-scene--done{ opacity:1; transform:none; }
.maneku .im-how .ph-prog__b{ animation:none; }
.maneku .im-how[data-step="1"] .ph-prog__b:nth-child(1), .maneku .im-how[data-step="2"] .ph-prog__b:nth-child(2), .maneku .im-how[data-step="3"] .ph-prog__b:nth-child(3), .maneku .im-how[data-step="4"] .ph-prog__b:nth-child(4){ background:var(--coral); }
.maneku .im-how .ph-late{ animation:none; opacity:0; transform:translateY(4cqw); transition:opacity .5s .4s, transform .5s .4s; }
.maneku .im-how[data-step="2"] .ph-late--c, .maneku .im-how[data-step="3"] .ph-late--d{ opacity:1; transform:none; }
.maneku .im-how .ph-done__ck{ animation:none; transform:scale(.6); opacity:0; transition:transform .6s cubic-bezier(.34,1.56,.64,1) .4s, opacity .4s .4s; }
.maneku .im-how[data-step="4"] .ph-done__ck{ transform:none; opacity:1; }
@media (max-width:767px){
  .maneku .im-how__sticky{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); gap:0; align-items:start; }
  .maneku .im-how__text{ padding-top:80px; }
  .maneku .im-how .sec__title{ font-size:clamp(20px, 5.4vw, 26px); }
  .maneku .im-how .sec__title + .im-rule{ margin-top:12px; }
  .maneku .im-how .sec__sub{ font-size:15px; margin-top:10px; }
  .maneku .im-how__steps{ margin-top:16px; gap:0; grid-template-columns:minmax(0,1fr); }
  .maneku .im-step{ grid-area:1 / 1; opacity:0; }
  .maneku .im-how__phone{ --pw:min(52vw, 23dvh); }
  .maneku .im-how__r1{ width:88vw; height:88vw; }
  .maneku .im-how__r2{ width:60vw; height:60vw; }
  .maneku .im-how__stage .im-glow{ width:260px; height:260px; }
}
@media (prefers-reduced-motion: reduce){
  .maneku .im-how{ height:auto; padding-block:96px; }
  .maneku .im-how__sticky{ position:static; height:auto; overflow:clip; padding-block:0; align-items:center; }
  .maneku .im-how__track{ display:none; }
  .maneku .im-how__text{ padding-top:0; }
  .maneku .im-step{ opacity:1 !important; grid-area:auto !important; }
  .maneku .im-how__stage{ height:auto; min-height:560px; }
  .maneku .im-how__phone{ transform:rotate(-3deg) !important; --pw:min(280px, 60vw); }
  .maneku .im-how .ph-scene{ opacity:0 !important; transform:none !important; }
  .maneku .im-how .ph-scene--dm{ opacity:1 !important; }
  .maneku .im-how .ph-late{ opacity:1 !important; transform:none !important; }
  .maneku .im-how .ph-prog__b:nth-child(-n+3){ background:var(--coral) !important; }
  .maneku .im-glow{ animation:none !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width:767px){
  .maneku .im-how__sticky{ grid-template-rows:none; }
  .maneku .im-how__stage{ min-height:480px; margin-top:32px; }
}

/* ---- 6. 可視化機能（張り付き 300dvh） ---- */
.maneku .im-feat{ height:300dvh; padding:0; position:relative; }
.maneku .im-feat__sticky{ position:sticky; top:0; height:100dvh; overflow:clip; }
.maneku .im-feat__text{ position:absolute; left:var(--im-padx); top:50%; transform:translateY(-50%); width:36%; z-index:3; padding-top:40px; }
.maneku .im-feat__text .sec__title{ font-size:clamp(28px, 1.8vw + 14px, 40px); }
.maneku .im-feat__list{ margin-top:36px; display:grid; gap:28px; }
.maneku .im-fi{ opacity:.35; transition:opacity .5s; }
.maneku .im-feat[data-step="1"] .im-fi[data-s="1"], .maneku .im-feat[data-step="2"] .im-fi[data-s="2"], .maneku .im-feat[data-step="3"] .im-fi[data-s="2"]{ opacity:1; }
.maneku .im-fi .fphone__no{ margin-top:0; color:var(--ink); }
.maneku .im-feat[data-step="1"] .im-fi[data-s="1"] .fphone__no, .maneku .im-feat[data-step="2"] .im-fi[data-s="2"] .fphone__no, .maneku .im-feat[data-step="3"] .im-fi[data-s="2"] .fphone__no{ color:var(--navy); }
.maneku .im-fi .fphone__title{ color:var(--ink); }
.maneku .im-feat__track{ position:absolute; inset:0; display:grid; grid-template-rows:repeat(3,1fr); pointer-events:none; }
.maneku .im-feat__stage{ position:absolute; left:var(--im-padx); right:var(--im-padx); top:0; bottom:0; }
.maneku .im-feat__m{ display:none; }
.maneku .im-feat__pw{
  --pw:min(280px, 34dvh, 22vw); position:absolute; left:66%; top:50%; width:var(--pw);
  transform:translate(-50%,-50%); transition:left 1s cubic-bezier(.65,0,.35,1), transform 1s cubic-bezier(.65,0,.35,1);
}
.maneku .im-feat[data-step="3"] .im-feat__pw{ left:48%; transform:translate(-68%,-50%) scale(.86); }
.maneku .im-feat__dev{ position:relative; z-index:2; width:100%; }
.maneku .im-feat__pw .im-glow{ width:380px; height:380px; z-index:0; }
.maneku .im-feat__ga{ left:40%; top:-14%; }
.maneku .im-feat__gb{ left:-70%; top:46%; animation-delay:-8s; }
.maneku .im-feat__pw .im-ring{ z-index:0; left:50%; top:50%; translate:-50% -50%; }
.maneku .im-feat__r1{ width:560px; height:560px; }
.maneku .im-feat__r2{ width:380px; height:380px; }
.maneku .im-pa1{ background:#fff; }
.maneku .im-pa2{
  position:absolute; inset:0; background:#fff; clip-path:circle(0% at 50% 55%);
  transition:clip-path 1s cubic-bezier(.65,0,.35,1);
}
.maneku .im-feat[data-step="2"] .im-pa2, .maneku .im-feat[data-step="3"] .im-pa2{ clip-path:circle(150% at 50% 55%); }
.maneku .im-pa2 [data-c]{ display:inline-block; text-align:right; }
.maneku.is-js .im-pa1.is-in .prow{ opacity:1; transform:none; }
.maneku.is-js .im-pa2.is-in .bar{ transform:scaleY(1); }
.maneku .im-lens{
  position:absolute; left:50%; top:55%; z-index:3; width:160%; aspect-ratio:1; border-radius:50%; pointer-events:none;
  translate:-50% -50%; scale:0; opacity:0;
  background:conic-gradient(var(--coral), #F0BEB4, var(--coral));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
.maneku .im-feat[data-step="2"] .im-lens{ animation:im-lens 1s cubic-bezier(.65,0,.35,1) both; }
@keyframes im-lens{ 0%{ scale:0; opacity:1; } 80%{ scale:1; opacity:1; } 100%{ scale:1; opacity:0; } }
.maneku .im-feat__tiles{
  position:absolute; right:0; top:50%; transform:translateY(-50%); width:46%;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; z-index:2;
}
.maneku .im-tile{ display:grid; opacity:0; transform:translateY(28px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.maneku .im-feat[data-step="3"] .im-tile{ opacity:1; transform:none; }
.maneku .im-feat[data-step="3"] .im-tile--b{ transition-delay:80ms; } .maneku .im-feat[data-step="3"] .im-tile--c{ transition-delay:160ms; } .maneku .im-feat[data-step="3"] .im-tile--d{ transition-delay:240ms; }
.maneku .im-tile__in{ background:#fff; border:1px solid var(--im-line); border-radius:20px; padding:22px; display:flex; flex-direction:column; min-width:0; }
.maneku .im-tile .tile__ic{ width:40px; height:40px; font-size:20px; }
.maneku .im-tile .tile__title{ font-size:17px; margin-top:12px; color:var(--ink); }
.maneku .im-tile .tile__body{ font-size:13px; margin-top:8px; line-height:1.7; }
.maneku .im-tile .chips{ margin-top:12px; gap:6px; }
.maneku .im-tile .chip{ font-size:12px; padding:5px 10px; background:var(--im-bg); }
.maneku .im-tile .tile__spark{ height:40px; padding-top:12px; }
.maneku .im-tile .tile__row{ flex-direction:column; align-items:flex-start; gap:10px; }
@media (max-width:1023px){
  .maneku .im-feat__text{ width:34%; }
  .maneku .im-tile__in{ padding:16px; }
}
/* スマホ幅・reduced motion は張り付きなし */
@media (max-width:767px), (prefers-reduced-motion: reduce){
  .maneku .im-feat{ height:auto; padding-block:clamp(80px, 10vw, 128px); }
  .maneku .im-feat__sticky{ position:static; height:auto; overflow:clip; padding-inline:var(--im-padx); }
  .maneku .im-feat__track, .maneku .im-feat__pw, .maneku .im-feat__list{ display:none; }
  .maneku .im-feat__text{ position:static; transform:none; width:auto; padding-top:0; }
  .maneku .im-feat__stage{ position:static; margin-top:24px; }
  .maneku .im-feat__m{ display:block; }
  .maneku .fphones{ margin-top:24px; }
  .maneku .fphones::before{ background:#fff; border:1px solid var(--im-line); border-radius:var(--r-panel); }
  .maneku .im-feat__tiles{ position:static; transform:none; width:auto; margin-top:32px; }
  .maneku .im-tile{ opacity:1; transform:none; }
  .maneku .fphone__no{ color:var(--plum); }
}
@media (max-width:767px){
  .maneku .im-feat__tiles{ gap:12px; }
  .maneku .im-tile__in{ padding:14px; }
  .maneku .im-tile .chip{ font-size:11px; }
}
@media (prefers-reduced-motion: reduce) and (min-width:768px){
  .maneku .im-feat__tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---- 7. メリット ---- */
.maneku .im-merit{ position:relative; }
.maneku .im-merit__grid{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:48px; align-items:start; position:relative; z-index:1; }
.maneku .im-merit__head{ position:sticky; top:104px; }
.maneku .im-merit__cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.maneku .im-card{ background:#fff; border:1px solid var(--im-line); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; min-width:0; }
.maneku.is-js .im-card.reveal{ transition-delay:calc(var(--i, 0) * 100ms); }
.maneku .im-card__img{ display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; }
.maneku .im-card__txt{ padding:20px 20px 24px; }
.maneku .im-card .cell__title{ font-size:18px; margin-top:6px; color:var(--ink); }
.maneku .im-card .cell__body{ font-size:14px; margin-top:10px; line-height:1.8; }
.maneku .im-card .cell__cols{ grid-template-columns:minmax(0,1fr); gap:14px; margin-top:12px; }
.maneku .im-card .cell__cols p{ font-size:13px; margin-top:6px; line-height:1.7; }
@media (max-width:1023px){
  .maneku .im-merit__grid{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .maneku .im-merit__head{ position:static; }
}
@media (max-width:767px){
  .maneku .im-merit__cards{ grid-template-columns:minmax(0,1fr); }
}
/* 見出しを意味の切れ目でだけ折り返す */
.maneku .im-nb{ display:inline-block; }
.maneku .im-merit__head .sec__title{ font-size:clamp(26px, 1.6vw + 12px, 36px); }

/* === im-2.css === */
/* 没入版 その2: 事例・活用方法・流れ・FAQ・お問い合わせ（im.css の後に読む） */

/* ---- 8. 導入事例 ---- */
.maneku .im-case .sec__sub{ margin-top:20px; }
.maneku .im-case__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,28%); gap:56px; margin-top:40px; align-items:start; }
.maneku .im-case__rows{ display:grid; }
.maneku .im-crow{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:32px; align-items:center;
  padding-block:32px; border-top:1px solid var(--im-line);
}
.maneku .im-crow:last-child{ border-bottom:1px solid var(--im-line); }
.maneku .im-num{
  font-family:var(--font-en); font-weight:700; font-size:clamp(72px, 9vw, 152px);
  letter-spacing:-.04em; line-height:1; color:var(--ink); white-space:nowrap;
}
.maneku .im-num small{ font-size:.32em; color:var(--plum); letter-spacing:0; font-weight:700; margin-inline:.06em; }
.maneku .im-crow__l{ font-size:clamp(20px, .8vw + 14px, 28px); font-weight:700; color:var(--ink); line-height:1.4; }
.maneku .im-crow__n{ font-size:15px; color:var(--muted); margin-top:8px; line-height:1.7; }
.maneku .im-crow__txt .im-rule{ margin-top:20px; }
.maneku .im-case__photo{ position:sticky; top:96px; margin:0; align-self:start; }
.maneku .im-case__photo img{ position:relative; z-index:1; display:block; width:100%; height:auto; border-radius:var(--r-panel); }
.maneku .im-case__photo .im-glow{ width:300px; height:300px; left:-30%; top:30%; z-index:0; }
.maneku .im-dig{ display:inline-block; height:1em; overflow:hidden; vertical-align:-.18em; text-align:center; line-height:1; }
.maneku .im-dig__s{ display:block; transition-property:transform; transition-timing-function:cubic-bezier(.16,1,.3,1); will-change:transform; }
.maneku .im-dig__s i{ display:block; height:1em; line-height:1; font-style:normal; }
@media (max-width:1023px){
  .maneku .im-case__grid{ grid-template-columns:minmax(0,1fr); }
  .maneku .im-case__photo{ display:none; }
}
@media (max-width:767px){
  .maneku .im-crow{ grid-template-columns:minmax(0,1fr); gap:12px; padding-block:24px; }
}

/* ---- 9. 活用方法 ---- */
.maneku .usage .sec__title{ text-align:left; }
.maneku .usage__groups{ margin-top:56px; gap:32px 48px; }
.maneku .usage__group--shop .usage__cards{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.maneku .usage__group:not(.usage__group--shop) .usage__cards{ grid-template-columns:minmax(0,1fr); }
.maneku .usage__cards{ margin-top:24px; gap:24px; }
.maneku .ucard{ background:none; border-radius:0; padding:0; text-align:center; box-shadow:none; }
.maneku .ucard:hover{ transform:none; box-shadow:none; }
.maneku .im-orb{ position:relative; width:240px; height:240px; margin:0 auto 24px; display:grid; place-items:center; }
.maneku .im-orb .im-ring{ inset:0; transition:transform .5s cubic-bezier(.16,1,.3,1); }
.maneku .im-orb .im-glow{ width:170px; height:170px; left:50%; top:50%; translate:-50% -50%; transition:opacity .4s; }
.maneku .im-orb .ucard__icon{ position:relative; z-index:1; font-size:56px; color:var(--navy); }
.maneku .ucard:hover .im-ring{ transform:scale(1.04); }
.maneku .ucard:hover .im-glow{ opacity:.85; }
.maneku .ucard:hover .im-glow--navy{ opacity:.45; }
.maneku .ucard__title{ font-size:17px; margin-top:0; }
@media (max-width:1023px){
  .maneku .usage__group--shop .usage__cards{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:767px){
  .maneku .usage__groups{ grid-template-columns:minmax(0,1fr); }
}

/* ---- 10. 流れ・FAQ ---- */
.maneku .flow .sec__title, .maneku .faq .sec__title{ text-align:left; }
.maneku .im-flow__panel{ position:relative; margin-top:48px; padding:clamp(8px, 2vw, 24px) clamp(56px, 8vw, 104px) clamp(8px, 2vw, 24px) clamp(20px, 4vw, 48px); --lx:clamp(28px, 4vw, 48px); }
.maneku .flow__list{ display:block; margin:0; padding:0; }
.maneku .im-row{ display:grid; grid-template-columns:clamp(40px, 6vw, 72px) minmax(0,1fr); align-items:center; gap:20px; padding-block:18px; border-bottom:1px solid var(--im-line); }
.maneku .im-row:last-child{ border-bottom:0; }
.maneku .im-row__no{ font-family:var(--font-en); font-weight:600; font-size:20px; color:var(--plum); line-height:1.2; }
.maneku .im-row__t{ font-size:clamp(15px, .4vw + 13px, 18px); font-weight:700; color:var(--ink); line-height:1.6; }
.maneku.is-js .im-row.reveal{ transform:translateX(-24px); transition-delay:calc(var(--i, 0) * 60ms); }
.maneku.is-js .im-row.reveal.is-in{ transform:none; }
.maneku .im-flow__line{ position:absolute; top:28px; bottom:28px; right:var(--lx); width:1px; background:var(--im-line); }
.maneku .im-flow__p1, .maneku .im-flow__p2{ right:calc(var(--lx) - 8px); }
.maneku .im-flow__p1{ top:20px; } .maneku .im-flow__p2{ bottom:20px; }
.maneku .im-faq__panel{ margin-top:48px; padding:clamp(12px, 3vw, 32px); }
.maneku .im-faq__panel .dm{ margin:0; max-width:none; box-shadow:none; border:1px solid var(--im-line); border-radius:20px; }

/* ---- 11. お問い合わせ（暗い全面写真） ---- */
.maneku .im-cta{
  position:relative; isolation:isolate; min-height:100dvh; padding:0; display:flex; align-items:flex-end;
  overflow:hidden; color:#fff; background:var(--night);
}
.maneku .im-cta__bg{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.maneku .im-cta__shade{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(25,37,72,.35), rgba(25,37,72,.75)); }
.maneku .im-cta__ph{ position:absolute; inset:0; pointer-events:none; }
.maneku .im-cta__ph .im-glow{ z-index:0; }
.maneku .im-cta__ga{ width:380px; height:380px; right:calc(max(var(--gutter), 9vw) - 80px); top:max(72px, 8dvh); }
.maneku .im-cta__gb{ width:320px; height:320px; right:calc(max(var(--gutter), 9vw) + 140px); top:max(220px, 30dvh); animation-delay:-8s; }
.maneku .im-cta__phone{
  --pw:min(260px, 30dvh); position:absolute; right:max(var(--gutter), 9vw); top:max(96px, 12dvh);
  width:var(--pw); z-index:1; transform:rotate(10deg);
}
.maneku .im-cta .device--phone{ width:100%; animation:im-bob 8s ease-in-out infinite; }
@keyframes im-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
.maneku .im-cta .ph-scene{ animation:none; opacity:0; transform:none; }
.maneku .im-cta .ph-scene--dm{ opacity:1; }
.maneku .im-cta .ph-late{ animation:none; opacity:1; transform:none; }
.maneku .im-cta .ph-prog__b{ animation:none; }
.maneku .im-cta .ph-prog__b:nth-child(3){ background:var(--coral); }
.maneku .im-cta__in{ position:relative; z-index:2; width:100%; padding-block:120px clamp(48px, 8vw, 96px); }
.maneku .im-cta .btn--light{ background:var(--coral); color:var(--ink); }
.maneku .im-cta .btn--light:hover{ background:#E7ADA4; }
.maneku .im-cta .cta__title{ font-size:clamp(48px, 7vw, 112px); font-weight:700; line-height:1.1; color:#fff; margin:20px 0 36px; }
@media (max-width:767px){
  .maneku .im-cta__phone{ --pw:min(190px, 26dvh); right:6vw; top:92px; }
  .maneku .im-cta__ga{ width:240px; height:240px; right:-30px; }
  .maneku .im-cta__gb{ width:200px; height:200px; right:80px; top:240px; }
  .maneku .im-cta__in{ padding-top:380px; }
}
@media (prefers-reduced-motion: reduce){
  .maneku .im-glow{ animation:none !important; }
}


/* お問い合わせフォーム */
.maneku .mk-form{
  min-height:100dvh;
  padding:120px 0 80px;
  background:var(--im-bg, var(--bg-soft));
}
.maneku .mk-form__card{
  max-width:640px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:clamp(28px, 4vw, 48px);
  box-shadow:var(--shadow);
}
.maneku .mk-form h1{
  font-size:clamp(28px, 3vw, 40px);
  font-weight:700;
  color:var(--navy);
  line-height:1.4;
}
.maneku .mk-form__intro{ margin-top:16px; color:var(--muted); }
.maneku .mk-form__lead{ margin:28px 0 20px; font-weight:700; }
.maneku .mk-field{ margin-bottom:18px; }
.maneku .mk-field label{ display:block; font-weight:700; font-size:14px; margin-bottom:6px; }
.maneku .mk-req{ color:var(--coral); margin-left:4px; }
.maneku .mk-field input,
.maneku .mk-field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  font:inherit;
  color:var(--ink);
  background:#fff;
}
.maneku .mk-field input:focus-visible,
.maneku .mk-field textarea:focus-visible{
  outline:3px solid var(--lav);
  outline-offset:2px;
}
.maneku .mk-error{ color:#b42318; font-size:13px; margin-top:6px; }
.maneku .mk-hp{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.maneku .mk-form__foot{ margin-top:28px; }
.maneku .mk-form button.btn{ border:0; cursor:pointer; font:inherit; }
.maneku .mk-form button.btn:disabled{ opacity:.6; cursor:not-allowed; }
.maneku .mk-agree{ margin-top:12px; font-size:13px; color:var(--muted); }
.maneku .mk-agree a{ text-decoration:underline; }
.maneku .mk-result{ margin-top:20px; font-weight:700; }
.maneku .mk-result.is-ok{ color:var(--navy); }
.maneku .mk-result.is-repeat{ color:var(--ink); }
.maneku .mk-result.is-err{ color:#b42318; }
.maneku .mk-back{ margin-top:28px; font-weight:700; }
.maneku .mk-back a{ text-decoration:underline; }