/* スリジェ AIコース LP 仕上げ版 v014(2026-10-04・Opus 5.5)。
   A2 の見た目(生成り・桜色1色・明朝・作品の壁)を継承し、戦略 v004 の「これ、私も作ってみたい。」を運ぶ見せ場と大きな言葉を足す。
   どの幅でも480pxの1列(FB-607)。PC・タブレットは列の外に、ぼかした花の舞台を敷く。 */

/* PC・タブレットの舞台(列の外) */
@media (min-width:701px){
  body{background:#EDE3DA}
  body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(250,246,240,.55),rgba(239,231,222,.82)),url(p/stage_bg.webp) center/cover no-repeat}
  .col{box-shadow:0 0 0 1px rgba(42,35,38,.04),0 30px 80px rgba(110,42,61,.12)}
}

/* 大きな言葉(Apple の発表ページのように、1画面に1つの言い切り) */
.say{padding:64px 0 8px}
.say-big{font-family:var(--serif);font-weight:600;font-size:clamp(31px,9.6vw,40px);line-height:1.42;letter-spacing:.04em;margin:0 22px;word-break:keep-all}
.say-big em{font-style:normal;color:var(--sakura-d)}
.say-sub{margin:16px 22px 0;font-size:16px;line-height:1.85;color:var(--sub);word-break:auto-phrase}
.kicker{margin:0 22px 10px;font-size:12px;letter-spacing:.2em;color:var(--sakura-d);font-weight:700}

/* ===== 見せ場: 一枚の写真から、ここまで。 ===== */
.make{background:var(--paper);padding:0 0 40px;position:relative}
.make .ttl.mk-ttl{margin-top:44px}
.mk-list{list-style:none;margin:8px 0 0;padding:0 22px;display:grid;gap:40px}
.mk-list li{display:grid;justify-items:center;gap:14px;text-align:center}
.mk-list .mk-n{font-size:12px;letter-spacing:.2em;color:var(--sakura-d);font-weight:700}
.mk-list .mk-t{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.5;word-break:keep-all}

/* スマホの本体(CSSで描く。画面の中身だけが作品) */
.mk-phone{position:relative;width:min(232px,60vw);aspect-ratio:9/18.6;border-radius:38px;background:#231d20;padding:9px;
  box-shadow:0 1px 0 1px #4a4044 inset,0 28px 60px rgba(42,35,38,.26),0 6px 16px rgba(42,35,38,.16);margin:0}
.mk-phone::before{content:"";position:absolute;top:15px;left:50%;width:30%;height:17px;border-radius:999px;background:#0e0b0c;transform:translateX(-50%);z-index:3}
.mk-screen{position:relative;width:100%;height:100%;border-radius:29px;overflow:hidden;background:#f6f1ea;isolation:isolate}
.mk-shot{position:absolute;inset:0;display:flex;flex-direction:column;background:#f6f1ea}
.mk-shot>img,.mk-shot>video{width:100%;height:100%;object-fit:cover;display:block}
/* ストーリーズ: 縦2:3を、ぼかした同じ絵の上に収める */
.k-story{justify-content:center}
.k-story .blur{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(18px) saturate(110%);opacity:.9}
.k-story .main{position:relative;width:100%;height:auto;object-fit:contain}
.k-story .bars{position:absolute;top:34px;left:12px;right:12px;display:flex;gap:4px;z-index:2}
.k-story .bars i{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.55)}
.k-story .bars i:first-child{background:#fff}
/* 投稿・広告: 見本のアカウントの頭と、正方形の作品 */
.k-feed{background:#fff;padding-top:38px}
.k-feed .hd{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px;line-height:1.3;color:#2A2326}
.k-feed .av{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f4c9d1,#c98a98);flex:none}
.k-feed .hd small{display:block;font-size:12px;color:#7a6c70}
.k-feed>img{height:auto;aspect-ratio:1/1}
.k-feed .ic{display:flex;gap:14px;padding:10px 12px}
.k-feed .ic i{width:20px;height:20px;border:1.6px solid #2A2326;border-radius:50%}
.k-feed .ic i:nth-child(2){border-radius:50% 50% 50% 4px}
.k-feed .ic i:nth-child(3){border-radius:3px;transform:rotate(45deg) scale(.8)}
.k-feed .ln{margin:4px 12px;height:8px;border-radius:4px;background:#efe9e3}
.k-feed .ln.s{width:58%}
/* LP: 画面の中でページが流れる */
.k-lp{background:#fff;padding-top:36px}
.k-lp .url{margin:4px 10px 6px;height:24px;border-radius:999px;background:#f1ece6;display:flex;align-items:center;justify-content:center;font-size:12px;color:#7a6c70;flex:none}
.k-lp .lpvp{position:relative;flex:1;overflow:hidden}
.k-lp .lpvp img{width:100%;height:auto;display:block;will-change:transform}

/* 動く版(JSあり・動きを減らす設定でない時): 1台のスマホを画面に固定し、スクロールで中身を切り替える */
.mk-stage{display:none}
.make.mk-on .mk-list{display:none}
.make.mk-on .mk-track{position:relative;height:calc(var(--n,6) * 68svh + 100svh)}
.make.mk-on .mk-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;position:sticky;top:56px;height:calc(100svh - 56px);padding:8px 0 76px}
.mk-stage .mk-phone{height:min(calc(100svh - 56px - 76px - 150px),540px);width:auto;aspect-ratio:9/18.6;flex:none}
.mk-stage .mk-shot{opacity:0;transform:scale(1.035);transition:opacity .55s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.mk-stage .mk-shot.on{opacity:1;transform:none;z-index:1}
.mk-prog{display:flex;gap:4px;width:min(300px,80%);margin:0;padding:0;list-style:none}
.mk-prog li{flex:1}
.mk-prog button{display:block;width:100%;height:28px;padding:12px 0;border:0;background:none;cursor:pointer}
.mk-prog button::before{content:"";display:block;height:3px;border-radius:3px;background:var(--line);transition:background .3s ease}
.mk-prog button[aria-current="step"]::before,.mk-prog button.done::before{background:var(--sakura-d)}
.mk-cap{min-height:4.4em;text-align:center;padding:0 18px}
.mk-cap .mk-n{display:block;font-size:12px;letter-spacing:.2em;color:var(--sakura-d);font-weight:700}
.mk-cap .mk-t{display:block;font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.5;word-break:keep-all;margin-top:2px}
.mk-cap.swap .mk-t{animation:mkcap .5s ease}
@keyframes mkcap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mk-out{padding:20px 0 0}
.mk-out .note{margin-top:18px}

/* ===== 使い道(その先に) ===== */
.uses{list-style:none;margin:26px 16px 0;padding:0;display:grid;gap:12px}
.uses li{display:grid;grid-template-columns:38% 1fr;align-items:center;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(42,35,38,.06)}
.uses img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover}
.uses .t{padding:14px 16px}
.uses .n{display:block;font-family:var(--serif);font-size:13px;color:var(--sakura-d);letter-spacing:.08em}
.uses b{display:block;font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.45;margin:2px 0 4px}
.uses span.d{display:block;font-size:14px;line-height:1.7;color:var(--sub);word-break:auto-phrase}

/* 実績カードを横に流す(既存スクールの実績・安心の根拠。先頭に置かない) */
.cards.strip{display:flex;grid-template-columns:none;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0;padding:2px 16px 10px;scrollbar-width:none}
.cards.strip::-webkit-scrollbar{display:none}
.cards.strip button{flex:none;width:72%;scroll-snap-align:center}
.strip-hint{margin:2px 22px 0;font-size:12px;color:var(--sub);text-align:right}

/* 面談の節の見出し */
.meet-lead{padding:0 22px 22px;font-size:15.5px}

/* 結び */
.close{padding:56px 0 18px;text-align:center}
.close .say-big{margin:0 18px}
.close .say-sub{margin:14px 22px 0}
.close .vwrap.closing-v{margin:26px auto 0}

/* 7段目: あなたの1枚(まだ何も写っていないカメラの画面) */
.k-you{background:linear-gradient(180deg,#fbf4f1,#f2e5e2);align-items:center;justify-content:center}
.k-you .vf{position:absolute;inset:20% 13% 26%;border:1.5px dashed rgba(140,66,86,.45);border-radius:18px}
.k-you .plus{position:relative;width:56px;height:56px;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(140,66,86,.18);display:grid;place-items:center;color:var(--sakura-d);font-size:30px;line-height:1;font-family:var(--serif);margin-top:-12%}
.k-you .sh{position:absolute;bottom:8%;left:50%;width:44px;height:44px;margin-left:-22px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #f2e5e2,0 0 0 5px rgba(140,66,86,.4)}
.mk-shot.k-you.on .plus{animation:youpulse 2.4s ease-in-out 1}
@keyframes youpulse{0%,100%{transform:none}50%{transform:scale(1.08)}}

/* 未確認の印(確認版だけ) */
.pend{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;border:1px solid #c98a98;color:#6E2A3D;font-size:12px;line-height:1.6;vertical-align:1px;white-space:nowrap}

/* これまでのスリジェ: 数字5つを2段で */
.nums.nums5{flex-wrap:wrap;row-gap:16px}
.nums.nums5 div{flex:0 0 33.33%}
.nums.nums5 div.big{flex:0 0 50%}
.nums.nums5 div.big b{font-size:34px;color:var(--sakura-d)}
.eyebrow.mt{margin-top:30px}

/* リールの段: アプリの形だけ(文字なし)を重ねて、写真の段と見分ける */
.k-reel .rl-ui{position:absolute;inset:0;pointer-events:none}
.k-reel .rl-ui::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,transparent,rgba(20,14,16,.42))}
.k-reel .rl-ui i{position:absolute;right:10px;width:22px;height:22px;z-index:1}
.k-reel .rl-ui i.h{bottom:31%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.8 4.5c2.2 0 3.6 1.2 5.2 3 1.6-1.8 3-3 5.2-3 3.8 0 5.9 3.9 4.4 7.3C19.5 16.4 12 21 12 21z' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
.k-reel .rl-ui i.c{bottom:22%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5c5 0 8.5 3.4 8.5 7.6S17 18.7 12 18.7c-1.2 0-2.3-.2-3.3-.5L4 20.5l1.4-4C4.2 15 3.5 13.2 3.5 11.1 3.5 6.9 7 3.5 12 3.5z' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.k-reel .rl-ui i.s{bottom:13%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3 3 10.5l7 2.5 2.5 7L21 3zM10 13l5-5' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.k-reel .rl-ui .acc{position:absolute;left:12px;bottom:12%;display:flex;align-items:center;gap:7px;z-index:1}
.k-reel .rl-ui .acc b{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f4c9d1,#c98a98);border:1.5px solid #fff}
.k-reel .rl-ui .acc em{width:68px;height:7px;border-radius:4px;background:rgba(255,255,255,.85)}
.k-reel .rl-ui .pg{position:absolute;left:10px;right:10px;bottom:6%;height:2px;border-radius:2px;background:rgba(255,255,255,.35);z-index:1;overflow:hidden}
.k-reel .rl-ui .pg::before{content:"";position:absolute;inset:0;width:40%;background:#fff;border-radius:2px}
.mk-stage .k-reel.on .rl-ui .pg::before{animation:rlpg 4.7s linear infinite}
@keyframes rlpg{from{width:0}to{width:100%}}

/* 冒頭のりかこの欄は真ん中に */
.hero .fvmeta{justify-content:center}

/* 使い道の作品は切り抜かずに全体を見せる(作品の文字を欠けさせない) */
.uses li{align-items:stretch}
.uses .ph{display:flex;align-items:center;justify-content:center;background:var(--paper2);padding:10px}
.uses .ph img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:6px;box-shadow:0 4px 12px rgba(42,35,38,.12)}
.uses .t{align-self:center}
.mk-list video[controls]~.rl-ui{display:none}

/* 総点検 r1 の直し: 進み具合の線は押せる範囲を44×44px以上に / 小さな文字を濃く */
.mk-prog{width:min(364px,calc(100% - 8px));gap:0}
.mk-prog button{height:44px;padding:20px 3px;min-width:44px}
.uses .n{color:#7A3449}
.review-note{color:#5E2232}
.say{padding-top:48px}
.review-note{color:#4A1B28;background:#fff}
/* 独立レビュー: 320×640 で説明が2行の段が下の固定ボタンの帯に2px食い込む → 下の余白を広げる */
.make.mk-on .mk-stage{padding-bottom:92px}
.mk-stage .mk-phone{height:min(calc(100svh - 56px - 92px - 150px),540px)}

/* 先輩の声(受講生のインタビュー動画・押した時だけ再生) */
.voice-v{margin:26px 0 0;text-align:center}
.voice-v .eyebrow{text-align:left}
.voice-v .vv{width:min(62%,280px);margin:0 auto;border-radius:16px;overflow:hidden;box-shadow:0 10px 28px rgba(42,35,38,.16);background:#ddd}
.voice-v video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.voice-v figcaption{margin:10px 22px 0;font-family:var(--serif);font-size:15px;line-height:1.6}
.voice-v figcaption small{display:block;font-family:var(--sans);font-size:12px;color:var(--sub)}

/* ===== あれも、これも、つくれる。(10/5・雑誌のスクラップ風のギャラリー) ===== */
.gal{position:relative;margin:28px 0 0;padding:58px 0 34px;
  background:radial-gradient(circle,rgba(140,66,86,.07) 1px,transparent 1.2px) 0 0/18px 18px,linear-gradient(180deg,#FBEFF1 0%,#FAF3EE 55%,#FAF6F0 100%)}
.gdeco{position:absolute;top:14px;right:16px;margin:0;font-family:"Pinyon Script",cursive;font-size:30px;line-height:1;color:rgba(140,66,86,.42);transform:rotate(-6deg);pointer-events:none}
.gal .say-big em{font-style:normal}
.gcount{margin:18px 22px 0;font-family:"Zen Maru Gothic",var(--sans);font-size:13px;color:var(--sub)}
.gcount b{font-family:var(--serif);font-size:22px;color:var(--sakura-d);font-weight:600;margin:0 2px}
.gchips{display:flex;gap:8px;overflow-x:auto;padding:14px 16px 6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.gchips::-webkit-scrollbar{display:none}
.gchip{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(140,66,86,.28);background:rgba(255,255,255,.75);color:var(--ink);font-family:"Zen Maru Gothic",var(--sans);font-size:14px;font-weight:500;cursor:pointer;transition:background .2s,color .2s,transform .15s}
.gchip small{font-size:11px;color:var(--sub);font-weight:400}
.gchip[aria-pressed="true"]{background:var(--sakura-d);border-color:var(--sakura-d);color:#fff}
.gchip[aria-pressed="true"] small{color:rgba(255,255,255,.85)}
.gchip:active{transform:scale(.97)}
.gwall{list-style:none;margin:14px 0 0;padding:0 14px;column-count:2;column-gap:14px}
.gcard{position:relative;break-inside:avoid;margin:0 0 18px;padding:7px 7px 0;background:#fff;border-radius:3px;box-shadow:0 1px 2px rgba(42,35,38,.06),0 10px 22px rgba(110,42,61,.10);transform:rotate(var(--tilt,-1.1deg));transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,opacity .35s}
.gcard:nth-child(3n+2){--tilt:1deg}.gcard:nth-child(3n){--tilt:-.4deg}.gcard:nth-child(4n){--tilt:1.4deg}
.gcard:hover{transform:rotate(0) translateY(-3px);box-shadow:0 2px 4px rgba(42,35,38,.06),0 16px 30px rgba(110,42,61,.16)}
.gcard.gmore{display:none}
.gwall.open .gcard.gmore{display:block}
.gcard.gout{display:none!important}
.gph{display:block;width:100%;padding:0;border:0;background:#f4eee9;cursor:zoom-in;border-radius:2px;overflow:hidden}
.gph img{width:100%;height:auto;display:block}
.gph.gv{cursor:default}
.gph video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.gcap{margin:0;padding:8px 2px 10px;font-family:"Zen Maru Gothic",var(--sans);font-size:13px;line-height:1.45;color:var(--ink);text-align:center;word-break:auto-phrase}
.gcap .pend{margin-left:4px}
.tape{position:absolute;top:-9px;left:50%;z-index:2;transform:translateX(-50%) rotate(-3deg);padding:3px 12px;font-family:"Zen Maru Gothic",var(--sans);font-size:12px;font-weight:700;line-height:1.4;color:#6E2A3D;white-space:nowrap;
  background:repeating-linear-gradient(135deg,rgba(247,214,221,.92) 0 6px,rgba(242,200,210,.92) 6px 12px);box-shadow:0 1px 2px rgba(110,42,61,.12);clip-path:polygon(3% 0,97% 4%,100% 50%,97% 100%,2% 96%,0 50%)}
.gcard:nth-child(3n+2) .tape{transform:translateX(-50%) rotate(2.5deg);background:repeating-linear-gradient(135deg,rgba(226,236,222,.95) 0 6px,rgba(214,228,210,.95) 6px 12px);color:#3F5A3A}
.gcard:nth-child(3n) .tape{transform:translateX(-50%) rotate(-1deg);background:repeating-linear-gradient(135deg,rgba(246,232,208,.95) 0 6px,rgba(240,222,192,.95) 6px 12px);color:#6B4A1F}
.gopen{text-align:center;margin:6px 0 0}
.gmore-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;min-width:220px;padding:6px 26px;border-radius:999px;border:1.5px solid var(--sakura-d);background:#fff;color:var(--sakura-d);font-family:"Zen Maru Gothic",var(--sans);font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(110,42,61,.12)}
.gmore-btn small{font-size:11.5px;font-weight:500;opacity:.8}
.gmore-btn[hidden]{display:none}
.ghow{margin:26px 22px 0;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.8);font-family:var(--serif);font-size:16.5px;line-height:1.8;text-align:center;box-shadow:inset 0 0 0 1px rgba(140,66,86,.14)}
.gal .note{margin-top:14px}
@media (prefers-reduced-motion:reduce){.gcard,.gcard:hover{transform:none;transition:none}}

/* ほかの節にも、同じ筆記体の飾りを少しだけ */
.sdeco{display:block;margin:0 22px -4px;font-family:"Pinyon Script",cursive;font-size:24px;line-height:1.1;color:rgba(140,66,86,.45)}

/* 段組みの境目でテープが前の列へはみ出さないよう、札を割れない1つの箱にする */
.gwall{padding-top:12px}
.gcard{display:inline-block;width:100%;vertical-align:top}
.gcard.gmore{display:none}
.gwall.open .gcard.gmore{display:inline-block}
.ghow{word-break:keep-all}