*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#07070a;}
html{scroll-behavior:smooth;}
body{font-family:'Noto Sans JP',sans-serif;color:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{display:block;}
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;}
@keyframes heroMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* ===== 共通トークン的ユーティリティ ===== */
.container{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,48px);}
.section{position:relative;}
/* ===== スクロールで「ふわっと」出現 ===== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform;}
.reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important;}}
.hero-br{display:none;}
.br-sp{display:none;}
.br-pc{display:inline;}
/* ヘッダー背景バー: 上部では透明、スクロールで薄い背景＋ぼかしが出現 */
.site-header-bg{position:fixed;top:0;left:0;right:0;height:64px;z-index:130;pointer-events:none;background:rgba(7,7,7,0);border-bottom:1px solid transparent;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);transition:background .3s ease,backdrop-filter .3s ease,-webkit-backdrop-filter .3s ease,border-color .3s ease;}
.site-header-bg.is-scrolled{background:rgba(7,7,7,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:rgba(255,255,255,.07);}
/* ===== ハンバーガーメニュー（本番と同構成・renewalデザイン）===== */
.hb-toggle{position:fixed;top:16px;right:24px;z-index:200;width:40px;height:40px;background:transparent;border:none;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:0;transition:opacity .2s;}
.hb-toggle:hover .hb-bar{background:#b49cff;}
.hb-bar{display:block;width:28px;height:2px;background:#fff;border-radius:1px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.7));transition:transform .25s,opacity .15s,background .2s;}
.hb-toggle.is-open .hb-bar{filter:none;}
.hb-toggle.is-open .hb-bar:nth-child(1){transform:translateY(8px) rotate(45deg);}
.hb-toggle.is-open .hb-bar:nth-child(2){opacity:0;}
.hb-toggle.is-open .hb-bar:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
.hb-backdrop{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;}
.hb-backdrop.is-open{opacity:1;visibility:visible;}
.hb-menu{position:fixed;top:0;right:0;bottom:0;z-index:180;width:320px;max-width:88vw;background:#07070a;border-left:1px solid rgba(139,99,240,.22);transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;}
.hb-menu.is-open{transform:translateX(0);}
.hb-menu-inner{display:flex;flex-direction:column;padding:90px 28px 40px;gap:4px;}
.hb-menu a{display:block;padding:14px 12px;color:#fff;font-family:'Noto Sans JP',sans-serif;font-size:15px;font-weight:700;letter-spacing:.04em;border-radius:8px;transition:background .15s,color .15s;text-decoration:none;}
.hb-menu a:hover{background:rgba(139,99,240,.16);color:#cdbcff;}
.hb-menu-divider{height:1px;background:rgba(255,255,255,.12);margin:14px 12px;}
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.eyebrow-blob{width:24px;height:24px;border-radius:48% 56% 58% 44%/56% 46% 56% 48%;background:conic-gradient(from 200deg,#9b6bff,#6e8bff,#b06ef0);box-shadow:0 0 14px rgba(139,99,240,.6);flex:0 0 auto;}
.eyebrow-text{font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;letter-spacing:.24em;color:#cdbcff;text-transform:uppercase;}
.h2-center{font-family:'Noto Sans JP',sans-serif;font-weight:800;font-size:var(--fs-h2);line-height:1.4;color:#fff;text-align:center;margin:0;}
.feat-title{margin:0 0 22px;font-family:'Noto Sans JP',sans-serif;font-weight:800;font-size:var(--fs-h2);line-height:1.4;white-space:pre-line;}
.feat-sub{margin:0 0 22px;font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:var(--fs-sub);line-height:1.7;color:#fff;white-space:pre-line;}
.feat-body{margin:0;font-family:'Noto Sans JP',sans-serif;font-weight:400;font-size:16px;line-height:2;color:#fff;text-align:justify;}
/* ===== FEATURES レイアウト: バッジ→大見出し→小見出し→画像→本文 =====
PC: 画像を左右どちらかに置く2カラム（ジグザグ）
スマホ/タブレット(<=768px): 1カラム縦並び */
.feat-grid{display:grid;column-gap:clamp(32px,5vw,72px);align-items:center;position:relative;}
.feat-grid > .feat-badge-img{grid-area:badge;}
.feat-grid > .feat-title{grid-area:title;}
.feat-grid > .feat-sub{grid-area:sub;}
.feat-grid > .feat-media{grid-area:media;align-self:center;position:relative;z-index:1;}
.feat-grid > .feat-body{grid-area:body;}
.feat-grid--media-left{grid-template-columns:minmax(0,440px) 1fr;grid-template-areas:"media badge" "media title" "media sub" "media body";}
.feat-grid--media-right{grid-template-columns:1fr minmax(0,460px);grid-template-areas:"badge media" "title media" "sub media" "body media";}
@media (max-width:768px){
.feat-grid,
.feat-grid--media-left,
.feat-grid--media-right{grid-template-columns:1fr;grid-template-areas:"badge" "title" "sub" "media" "body";}
/* バッジ画像: 約63%縮小(80→50px) ＋ Fの頭を見出しと揃える負マージン */
.feat-grid > .feat-badge-img{height:50px !important;margin-left:-15px !important;margin-bottom:11px !important;}
.feat-grid > .feat-media{margin:4px 0 22px;}
.feat-grid > .feat-body{text-align:left;font-size:15px;}
/* 大見出し: スマホでは36px・下マージン詰める */
.feat-grid > .feat-title{font-size:36px;margin-bottom:14px;}
/* 小見出し: スマホでは20px・下マージン詰める */
.feat-grid > .feat-sub{font-size:20px;margin-bottom:14px;}
}
/* ===== WEB/BENEFITS レイアウト =====
PC: 左カラム(テキスト＋BENEFITS) + 右カラム(スマホ画面)
スマホ: テキスト→スマホ画面→BENEFITS の順 */
.web-grid{
display:grid;
grid-template-columns:minmax(0,560px) auto;
grid-template-areas:"text phone" "benefits phone";
column-gap:clamp(32px,4vw,56px);
row-gap:40px;
align-items:start;
justify-content:center;
}
.web-text{grid-area:text;}
.web-benefits{grid-area:benefits;}
.web-phone{grid-area:phone;align-self:center;display:flex;justify-content:center;min-width:260px;}
/* BENEFITS各項目: チェックを中央ではなく1行目に揃える（インラインのcenterを上書き） */
.web-benefits > div > div{ align-items:flex-start !important; }
@media (max-width:768px){
.web-grid{
grid-template-columns:1fr;
grid-template-areas:"text" "phone" "benefits";
row-gap:28px;
}
.web-phone{align-self:auto;}
/* BENEFITS: 左右余白とチェック-テキスト間隔を詰めて、テキスト領域を広げる */
.web-benefits{ padding-left:14px !important; padding-right:14px !important; }
.web-benefits > div > div{ gap:10px !important; }
/* チェックマークを小さく（22→18px）＋1行目の中心に合わせる微調整 */
.web-benefits > div > div > span:first-child{ width:18px !important; height:18px !important; font-size:11px !important; margin-top:6px !important; }
}
/* Feature3: ビフォーアフター左右分割（写っているのは、ちゃんと自分） */
.split-compare{position:relative;width:100%;aspect-ratio:3/4;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.5);}
.split-compare-half{position:relative;overflow:hidden;}
.split-compare-half + .split-compare-half{border-left:2px solid #fff;}
.split-compare-half img{width:100%;height:100%;object-fit:cover;display:block;}
.split-compare-label{position:absolute;bottom:12px;z-index:3;font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.2em;color:#fff;background:rgba(0,0,0,.5);padding:4px 9px;border-radius:5px;pointer-events:none;}
.split-compare-label.is-before{left:12px;}
.split-compare-label.is-after{right:12px;}
.ghost-num{position:absolute;font-family:'Oswald',sans-serif;font-weight:700;color:rgba(255,255,255,.045);line-height:1;user-select:none;z-index:0;}
.cta-btn{display:inline-flex;align-items:center;justify-content:center;padding:20px 52px;border-radius:999px;background:linear-gradient(100deg,#4f86f0,#7b6ef0 55%,#b86ef0);color:#fff;font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:17px;letter-spacing:.04em;box-shadow:0 16px 40px rgba(110,90,240,.4);transition:transform .2s ease,box-shadow .2s ease;}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 22px 50px rgba(110,90,240,.55);}
/* ===== スマホ最適化 ===== */
@media (max-width: 600px){
/* ヒーロー: 絶対配置ベースのまま viewport 高さに合わせる */
.hero{
min-height:100svh !important;
min-height:100vh !important;
display:block !important;
padding:0 !important;
}
.hero-marquee-wrap{ top:100px !important; }
.hero-kiosk{
position:absolute !important;
top:64px !important;
left:50% !important;
transform:translateX(-50%) !important;
width:156px !important;
margin:0 !important;
}
.hero-headline{
position:absolute !important;
left:20px !important;
top:auto !important;
bottom:36px !important;
width:calc(100% - 40px) !important;
text-align:left !important;
margin:0 !important;
}
.hero-headline h1{ font-size:40px !important; line-height:1.4 !important; }
/* スマホでは全セクション見出し(h2)を32pxに統一（インライン指定も上書き） */
h2{ font-size:32px !important; }
/* ただし筐体スペック・他のフォト体験との違い・導入相談は28px */
#specs h2, #compare h2, #contact h2{ font-size:28px !important; }
/* 筐体スペック: 写真をセンター寄せ＋詳細を1カラム(ラベルの下に値) */
.spec-row{ justify-content:center !important; }
.spec-list > div{ grid-template-columns:1fr !important; gap:4px !important; }
/* イベント一覧: 左の丸アイコンをスマホでは小さく（52→40px） */
.event-hub span{ width:40px !important; height:40px !important; font-size:17px !important; }
/* 右のテキスト領域を広げる: アイコン-テキスト間隔とブロック左右余白を詰める */
.event-hub > div{ gap:10px !important; }
.event-hub-box{ padding-left:12px !important; padding-right:12px !important; }
.hero-br{ display:block !important; }
.br-sp{ display:inline !important; }
.br-pc{ display:none !important; }
/* 狭い幅では両端揃えの間延びを防ぐ */
.feat-body{ text-align:left !important; }
/* CTAボタン: 幅いっぱいに */
.cta-btn{
display:block !important;
width:100% !important;
box-sizing:border-box !important;
padding:18px 24px !important;
text-align:center !important;
}
/* セクションのゴーストナンバーを小さく */
.ghost-num{ font-size:clamp(60px,30vw,100px) !important; }
/* スマホ背景 */
.page-bg{ background-image:url('/images/renewal/bg_sp.png') !important; background-position:center top !important; }
}
/* ポラロイド共通部品 */
.polaroid{background:#f3efe6;padding:9px 9px 12px;box-shadow:0 22px 46px rgba(0,0,0,.55);width:100%;box-sizing:border-box;}
.polaroid-photo{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;}
.polaroid-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.polaroid-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:11px;padding:0 3px;}
.polaroid-meta span{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.12em;color:#2b2b2b;text-transform:uppercase;white-space:nowrap;}
.polaroid-meta .brand{letter-spacing:.06em;font-weight:600;}
/* flow-mock で使うデザイントークン */
:root {
--bg-page: #07070a;
--bg-deep: #070707;
--warm-white: #f6f5f4;
--warm-gray-500: #615d59;
--warm-gray-300: #a39e98;
--red: #C12424;
--red-deep: #82181a;
--font-jp: 'Noto Sans JP', sans-serif;
--font-display: 'Oswald', 'Bebas Neue', sans-serif;
--font-num: 'Oswald', sans-serif;
/* ---- Type scale (renewal) ---- */
--fs-hero: clamp(32px, 4.2vw, 54px); /* ヒーロー特大コピー */
--fs-h2: clamp(28px, 3.6vw, 46px); /* セクション見出し */
--fs-sub: clamp(15px, 1.4vw, 18px); /* 見出し下サブ */
--fs-card: 20px; /* カード見出し */
--fs-body: 16px; /* 本文 */
/* ---- Spacing ---- */
--section-pad: clamp(72px, 9vw, 130px); /* 各セクションの上下余白 */
}
Flow Mock — 筐体体験フローのインタラクティブミニチュア
元: scene-fit/apps/kiosk features/{top,caution,scene-selection,
processing,selection,final-confirm,output} 全フェーズ移植
==================================================================== */
.flow-mock {
position: relative;
overflow: hidden;
padding: var(--section-pad) 0;
}
.flow-mock-head {
margin-bottom: 72px;
}
.flow-mock > .container { position: relative; z-index: 1; }
.flow-mock-head {
text-align: center;
margin-bottom: 56px;
}
.flow-mock-head .section-eyebrow {
font-family: 'Bebas Neue', sans-serif;
font-size: 13px;
letter-spacing: 0.3em;
color: #8b7ef0;
margin-bottom: 14px;
}
.flow-mock-head h2 {
font-size: clamp(28px, 4vw, 48px);
font-weight: 900;
line-height: 1.2;
margin-bottom: 16px;
}
.flow-mock-head p {
color: var(--warm-gray-300);
font-size: clamp(14px, 1.4vw, 16px);
line-height: 1.7;
}
.flow-mock-stage {
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
max-width: 960px;
margin: 0 auto;
}
@media (max-width: 880px) {
.flow-mock-stage { gap: 32px; }
.flow-mock-frame { max-width: 280px; }
}
/* === 体験フローエリア (筐体ディスプレイ風シンプル長方形) ===
スマホ風のノッチ等は使わず、業務筐体のディスプレイ感で。 */
.flow-mock-frame {
position: relative;
width: 100%;
max-width: 360px;
margin: 0 auto;
aspect-ratio: 9 / 16;
padding: 6px;
background: #1a1a1c;
border-radius: 16px;
box-shadow:
0 30px 60px rgba(0,0,0,0.7),
0 60px 120px rgba(193,36,36,0.16),
0 0 0 1px rgba(255,255,255,0.06);
}
.flow-mock-screen {
position: absolute;
inset: 6px;
/* 全画面共通の背景 (筐体スタート画面と同じグランジ) */
background:
linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.72) 100%),
url('/images/figma/rrr_grunge_bg.webp') center/cover no-repeat,
var(--bg-page);
border-radius: 12px;
overflow: hidden;
/* 実機 (1080×1920) と同じスケール基準。子要素は calc(N * var(--px)) で実機の絶対値を使える */
container-type: size;
--px: calc(100cqw / 1080);
}
/* スクリーン上のグレア（画面感UP） */
.flow-mock-screen::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(255,255,255,0.08) 0%,
rgba(255,255,255,0) 35%,
rgba(255,255,255,0) 100%);
pointer-events: none;
z-index: 100;
}
/* 「フルスクリーンで体験」CTA — 筐体下に配置 */
.flow-mock-launch {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-top: 24px;
}
.flow-mock-launch-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: #7b6ef0;
color: var(--warm-white);
font-weight: 700;
font-size: 14px;
padding: 14px 28px;
border-radius: 999px;
border: none;
cursor: pointer;
box-shadow: 0 8px 24px rgba(193,36,36,0.5);
transition: background .2s, transform .2s, box-shadow .2s;
letter-spacing: 0.04em;
}
.flow-mock-launch-btn:hover {
background: #d32a2a;
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(193,36,36,0.65);
}
.flow-mock-launch-btn svg { width: 16px; height: 16px; }
.flow-mock-launch-hint {
font-size: 11px;
color: var(--warm-gray-300);
letter-spacing: 0.04em;
}
/* === Fullscreen モーダル === */
.fm-modal {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0,0,0,0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
display: none;
align-items: center;
justify-content: center;
padding: 32px 16px;
overflow-y: auto;
}
.fm-modal.is-open { display: flex; }
body.fm-modal-open { overflow: hidden; }
.fm-modal-inner {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
max-width: 100%;
}
.fm-modal-frame {
position: relative;
width: auto;
height: min(86vh, calc((100vw - 64px) * 16 / 9));
max-width: min(560px, calc(100vw - 32px));
aspect-ratio: 9 / 16;
background: var(--bg-page);
border-radius: 28px;
overflow: hidden;
box-shadow:
0 40px 80px rgba(0,0,0,0.7),
0 0 0 1px rgba(255,255,255,0.08),
inset 0 0 0 1px rgba(255,255,255,0.05);
}
.fm-modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
color: var(--warm-white);
font-size: 22px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s, transform .2s;
z-index: 10001;
}
.fm-modal-close:hover {
background: rgba(255,255,255,0.2);
transform: rotate(90deg);
}
.fm-modal-meta {
display: flex;
gap: 32px;
align-items: center;
color: var(--warm-gray-300);
font-size: 13px;
letter-spacing: 0.04em;
}
.fm-modal-step-name {
color: var(--warm-white);
font-weight: 700;
font-size: 15px;
}
.fm-modal-controls {
display: flex;
gap: 12px;
}
.fm-modal-controls button {
padding: 10px 18px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.16);
border-radius: 999px;
color: var(--warm-white);
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: background .2s;
}
.fm-modal-controls button:hover { background: rgba(255,255,255,0.16); }
.fm-modal-controls button:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 768px) {
.fm-modal { padding: 16px 8px; }
.fm-modal-frame { height: 78vh; }
.fm-modal-meta { flex-direction: column; gap: 8px; text-align: center; }
}
/* 各フェーズ: 全画面を absolute で重ね、is-active のみ表示
個別フェーズ (.fm-caution など) で display:flex を指定するので
非表示は !important + visibility で確実に切る */
.flow-mock-phase {
position: absolute;
inset: 0;
visibility: hidden;
opacity: 0;
pointer-events: none;
animation: fm-fade-in .35s ease-out;
}
.flow-mock-phase.is-active {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
@keyframes fm-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* === 共通: グラデーション === */
.fm-grad-top {
position: absolute; top: 0; left: 0; right: 0;
height: 18%;
background: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%);
z-index: 2;
pointer-events: none;
}
.fm-grad-bottom {
position: absolute; bottom: 0; left: 0; right: 0;
height: 30%;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 100%);
z-index: 2;
pointer-events: none;
}
.fm-screen-bg {
position: absolute; inset: 0;
background-image: url('/images/figma/rrr_grunge_bg.webp');
background-size: cover; background-position: center;
opacity: 0.85;
}
/* === Phase 1: TOP === */
.fm-top { background: transparent; }
.fm-top-header {
position: absolute;
top: 5%;
left: 6%; right: 6%;
text-align: center;
z-index: 3;
pointer-events: none;
}
.fm-top-copy {
width: 100%;
max-width: 100%;
height: auto;
filter: drop-shadow(0 0 14px rgba(0,0,0,0.6));
}
.fm-top-title {
font-size: calc(72 * var(--px));
font-weight: 900;
line-height: 1.25;
color: var(--warm-white);
text-shadow: 0 0 14px rgba(0,0,0,0.6);
margin: 0 0 6px;
}
.fm-top-title em {
font-style: normal;
color: #8b7ef0;
}
.fm-top-sub {
font-size: calc(40 * var(--px));
font-weight: 700;
color: var(--warm-white);
text-shadow: 0 0 12px rgba(0,0,0,0.6);
margin: 0;
letter-spacing: 0.02em;
}
.fm-top-mainlogo {
position: absolute;
bottom: 22%;
left: 50%;
transform: translateX(-50%);
width: 56%;
z-index: 3;
pointer-events: none;
}
.fm-top-mainlogo img {
width: 100%;
filter: drop-shadow(0 4px 16px rgba(0,0,0,0.55));
}
.fm-top-stack {
position: absolute;
top: 14%;
left: 50%;
transform: translateX(-50%);
width: 92%;
aspect-ratio: 1080/1500;
z-index: 1;
isolation: isolate;
}
.fm-card {
position: absolute;
top: 50%; left: 50%;
width: 92%;
aspect-ratio: 29/36;
background: var(--warm-white);
box-shadow: 0 6px 22px rgba(0,0,0,0.6);
overflow: hidden;
transform-origin: center center;
will-change: transform, opacity;
transform:
translate(-50%, -50%)
translateX(var(--mx, 0))
translateY(var(--my, 0))
rotate(var(--mr, 0deg));
transition:
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.5s ease;
}
.fm-card img { width: 100%; height: 100%; object-fit: cover; }
.fm-card.is-mid { border: 1px solid #000; }
.fm-top-cta {
position: absolute;
bottom: 14%;
left: 0; right: 0;
text-align: center;
z-index: 4;
font-size: calc(40 * var(--px));
font-weight: 700;
color: var(--warm-white);
margin: 0;
animation: fm-pulse 2.4s ease-in-out infinite;
pointer-events: none;
}
@keyframes fm-pulse {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
.fm-top-poweredby {
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
z-index: 4;
display: flex;
gap: calc(14 * var(--px));
align-items: center;
font-size: calc(14 * var(--px));
color: var(--warm-white);
white-space: nowrap;
pointer-events: none;
}
.fm-top-poweredby span { font-weight: 700; letter-spacing: 0.04em; }
.fm-top-poweredby img {
height: calc(26 * var(--px));
width: auto;
display: block;
}
/* タップ受け取り */
.fm-tap-cover {
position: absolute;
inset: 0;
z-index: 6;
cursor: pointer;
background: transparent;
border: none;
padding: 0;
}
/* === Phase 2: CAUTION === */
.fm-caution {
background: transparent;
padding: 8% 6% 6%;
display: flex;
flex-direction: column;
}
.fm-caution-title {
font-size: calc(60 * var(--px));
font-weight: 900;
color: var(--warm-white);
text-align: center;
margin: 0 0 calc(28 * var(--px));
line-height: 1;
}
.fm-caution-sub {
font-size: calc(40 * var(--px));
font-weight: 500;
color: var(--warm-gray-300);
text-align: center;
margin: 0 0 5%;
line-height: 1.5;
}
.fm-caution-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: calc(28 * var(--px));
flex: 1;
}
.fm-caution-list li {
display: flex;
align-items: center;
gap: calc(36 * var(--px));
background: rgba(255,255,255,0.08);
border-radius: calc(24 * var(--px));
padding: calc(28 * var(--px)) calc(36 * var(--px));
}
.fm-caution-list li .fm-icon {
flex-shrink: 0;
width: calc(110 * var(--px));
height: calc(110 * var(--px));
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.fm-caution-list li .fm-icon::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 100%);
}
.fm-caution-list li .fm-icon img {
position: relative;
width: 65%;
height: 65%;
object-fit: contain;
}
.fm-caution-list li .fm-cau-text {
flex: 1;
min-width: 0;
}
.fm-caution-list li .fm-cau-title {
margin: 0 0 calc(6 * var(--px));
font-size: calc(40 * var(--px));
font-weight: 700;
color: var(--warm-white);
line-height: 1.3;
letter-spacing: -0.01em;
white-space: nowrap;
}
.fm-caution-list li .fm-cau-desc {
margin: 0;
font-size: calc(30 * var(--px));
font-weight: 500;
color: var(--warm-gray-300);
line-height: 1.4;
}
.fm-cta-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: calc(16 * var(--px));
background: var(--red-deep);
color: var(--warm-white);
font-weight: 700;
font-size: calc(36 * var(--px));
padding: calc(28 * var(--px)) calc(60 * var(--px));
border-radius: 999px;
border: none;
cursor: pointer;
box-shadow: 0 8px 24px rgba(130,24,26,0.5);
transition: background .2s, transform .2s;
letter-spacing: 0.04em;
align-self: center;
margin-top: auto;
}
.fm-cta-pill:hover { background: #6e1416; transform: translateY(-1px); }
.fm-cta-pill.outline {
background: transparent;
border: 1px solid var(--warm-white);
box-shadow: none;
margin-top: 8px;
}
.fm-cta-pill.outline:hover { background: var(--warm-white); color: var(--bg-page); }
/* === Phase 5: PAYMENT (実機 PayPayScreen.tsx と完全に揃える / 1080×1920 基準) === */
.fm-payment {
background: transparent;
padding: calc(80 * var(--px)) 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(80 * var(--px));
}
.fm-payment-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(56 * var(--px));
width: calc(686 * var(--px));
}
.fm-payment-title {
/* 実機 text-screen-title: 60px / 900 / lh 1.2 */
font-size: calc(60 * var(--px));
font-weight: 900;
line-height: 1.2;
color: var(--warm-white);
text-align: center;
margin: 0;
white-space: nowrap;
}
.fm-payment-sub {
/* 実機 text-section-lead: 32px / 700 / lh 1.2 / ls 0.44 */
font-size: calc(32 * var(--px));
font-weight: 700;
line-height: 1.2;
letter-spacing: calc(0.44 * var(--px));
color: var(--warm-white);
text-align: center;
margin: calc(20 * var(--px)) 0 0;
}
.fm-payment-amount {
/* 実機: 140px / 900 / lh 1 */
font-size: calc(140 * var(--px));
font-weight: 900;
line-height: 1;
color: var(--warm-white);
margin: 0;
font-family: var(--font-num);
}
.fm-payment-qr {
/* 実機: width 680 / paddingBlock 60 / paddingInline 119 / radius 18 / gap 8 */
position: relative;
width: calc(680 * var(--px));
aspect-ratio: auto;
background: #fff;
border-radius: calc(18 * var(--px));
padding: calc(60 * var(--px)) calc(119 * var(--px));
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-card, 0 4px 18px rgba(0,0,0,0.18));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(20 * var(--px));
margin: 0;
cursor: pointer;
}
.fm-payment-qr-pp-logo {
/* PayPay ロゴ風 (実機は画像。LP は絶対サイズで再現) */
position: static;
background: #ff0033;
color: white;
font-weight: 900;
font-size: calc(48 * var(--px));
padding: calc(8 * var(--px)) calc(20 * var(--px));
border-radius: calc(6 * var(--px));
letter-spacing: -0.02em;
line-height: 1;
}
.fm-payment-qr svg,
.fm-payment-qr img {
width: 100%;
aspect-ratio: 1 / 1;
height: auto;
object-fit: contain;
border-radius: calc(6 * var(--px));
}
.fm-payment-cancel {
/* 実機 Button variant secondary: 大きめpill, 白文字, 透過 */
display: inline-flex;
align-items: center;
justify-content: center;
padding: calc(28 * var(--px)) calc(64 * var(--px));
background: transparent;
color: var(--warm-white);
border: calc(2 * var(--px)) solid rgba(255,255,255,0.7);
border-radius: 999px;
font-size: calc(36 * var(--px));
font-weight: 700;
letter-spacing: calc(0.44 * var(--px));
line-height: 1;
cursor: pointer;
transition: background .2s, color .2s;
}
.fm-payment-cancel:hover {
background: rgba(255,255,255,0.1);
color: var(--warm-white);
}
/* === Phase 4: SHOOTING (Figma 355:126 「撮影」) ===
カメラビュー風モック + 楕円顔ガイド + 4隅マーカー + 撮影ボタン */
.fm-shooting {
background: #000;
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.fm-shooting-camera {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: saturate(0.95);
}
.fm-shooting-hint {
position: absolute;
top: 5%;
left: 50%;
transform: translateX(-50%);
width: 78%;
max-width: 320px;
pointer-events: none;
z-index: 3;
filter: drop-shadow(0 4px 16px rgba(0,0,0,0.55));
}
.fm-shooting-hint img {
display: block;
width: 100%;
height: auto;
}
.fm-shooting-guide {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 78%;
aspect-ratio: 1736 / 2156;
pointer-events: none;
z-index: 2;
filter: drop-shadow(0 0 14px rgba(255,255,255,0.18));
}
.fm-shooting-guide img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0.95;
}
.fm-shooting-cta {
position: absolute;
bottom: 6%;
left: 50%;
transform: translateX(-50%);
width: 32%;
max-width: 140px;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
z-index: 4;
transition: transform .2s;
filter: drop-shadow(0 8px 22px rgba(120,180,255,0.45));
}
.fm-shooting-cta img {
display: block;
width: 100%;
height: auto;
}
.fm-shooting-cta:hover {
transform: translateX(-50%) translateY(-3px) scale(1.04);
}
/* シャッターフラッシュ演出 */
.fm-shooting-flash {
position: absolute;
inset: 0;
background: var(--warm-white);
opacity: 0;
pointer-events: none;
z-index: 5;
}
.fm-shooting.is-flashing .fm-shooting-flash {
animation: fm-flash 0.5s ease-out;
}
@keyframes fm-flash {
0% { opacity: 1; }
100% { opacity: 0; }
}
/* カウントダウン (3-2-1) */
.fm-shooting-countdown {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: calc(240 * var(--px));
font-weight: 900;
color: var(--warm-white);
text-shadow: 0 4px 20px rgba(0,0,0,0.8);
pointer-events: none;
z-index: 6;
display: none;
font-family: var(--font-num, 'Momo Trust Display', sans-serif);
}
.fm-shooting.is-countdown .fm-shooting-countdown { display: block; }
/* === Phase 3: SCENE SELECTION (Figma node 81:1044 「スタイル選択」) === */
.fm-scene {
background: transparent;
padding: calc(120 * var(--px)) 0 calc(80 * var(--px));
display: flex;
flex-direction: column;
align-items: center;
gap: calc(40 * var(--px));
}
.fm-scene-title {
font-size: calc(60 * var(--px));
font-weight: 900;
color: var(--warm-white);
text-align: center;
margin: 0 0 calc(20 * var(--px));
line-height: 1;
}
.fm-scene-sub {
font-size: calc(32 * var(--px));
font-weight: 700;
color: var(--warm-white);
text-align: center;
margin: 0;
letter-spacing: 0.04em;
line-height: 1;
}
.fm-scene-carousel {
position: relative;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 4%;
}
/* カルーセル: 3枚（prev/main/next）。中央メイン+両脇は薄く部分表示 */
.fm-scene-carousel {
position: relative;
width: 100%;
flex: 1; /* 残り縦領域を全部使う */
min-height: 0;
display: flex;
justify-content: center;
align-items: center;
}
.fm-scene-track {
position: relative;
width: 100%;
height: 100%;
}
/* Style Frame カード共通 */
.fm-scene-card {
position: absolute;
top: 50%;
background: rgba(255,255,255,0);
border: 1px solid var(--warm-white);
border-radius: calc(18 * var(--px));
overflow: hidden;
box-shadow:
0 calc(2 * var(--px)) calc(8 * var(--px)) 0 rgba(0,0,0,0.04);
padding: 0;
cursor: pointer;
}
.fm-scene-card-main {
left: 50%;
transform: translate(-50%, -50%);
width: auto;
height: 100%;
aspect-ratio: 800 / 1150;
box-shadow: 0 0 calc(30 * var(--px)) calc(10 * var(--px)) rgba(255,255,255,0.2);
z-index: 2;
}
.fm-scene-card-prev,
.fm-scene-card-next {
transform: translateY(-50%);
width: auto;
height: 88%;
aspect-ratio: 720 / 1050;
opacity: 0.45;
z-index: 1;
}
.fm-scene-card-prev { right: calc(50% + 320 * var(--px)); }
.fm-scene-card-next { left: calc(50% + 320 * var(--px)); }
/* カード内：写真エリア + 半透明黒帯メタ */
.fm-scene-card-img {
position: absolute;
inset: 0 0 13% 0;
background: #111;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.fm-scene-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* === スライド演出（矢印タップ時）=== */
/* track 全体をガッと横にスライドして、中盤で src を切り替えて自然に新シーンへ */
.fm-scene-track {
will-change: transform;
}
.fm-scene-track.is-sliding-next {
animation: fmTrackSlideNext .52s cubic-bezier(0.65, 0, 0.35, 1) both;
}
.fm-scene-track.is-sliding-prev {
animation: fmTrackSlidePrev .52s cubic-bezier(0.65, 0, 0.35, 1) both;
}
@keyframes fmTrackSlideNext {
0% { transform: translateX(0); opacity: 1; }
35% { transform: translateX(-22%); opacity: 0.4; }
50% { transform: translateX(-22%); opacity: 0; }
55% { transform: translateX(22%); opacity: 0; }
75% { transform: translateX(22%); opacity: 0.4; }
100% { transform: translateX(0); opacity: 1; }
}
@keyframes fmTrackSlidePrev {
0% { transform: translateX(0); opacity: 1; }
35% { transform: translateX(22%); opacity: 0.4; }
50% { transform: translateX(22%); opacity: 0; }
55% { transform: translateX(-22%); opacity: 0; }
75% { transform: translateX(-22%); opacity: 0.4; }
100% { transform: translateX(0); opacity: 1; }
}
/* 矢印タップ時のリップル感 */
.fm-scene-arrow:active { transform: translateY(-50%) scale(0.92); }
.fm-scene-card-meta {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 13%;
background: rgba(0,0,0,0.5);
padding: 2.2% 3%;
display: flex;
flex-direction: column;
gap: calc(12 * var(--px));
align-items: center;
justify-content: center;
}
.fm-scene-card-title {
font-size: calc(36 * var(--px));
font-weight: 700;
color: var(--warm-white);
text-align: center;
margin: 0;
line-height: 1;
width: 100%;
}
.fm-scene-card-desc {
font-size: calc(24 * var(--px));
font-weight: 700;
color: var(--warm-white);
text-align: center;
margin: 0;
line-height: 1;
width: 100%;
}
/* Carousel Buttons (赤円形) */
.fm-scene-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: calc(108 * var(--px));
height: calc(108 * var(--px));
background: var(--red-deep);
border: none;
border-radius: 50%;
color: var(--warm-white);
font-size: calc(72 * var(--px));
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 5;
filter: drop-shadow(0 0 calc(4 * var(--px)) rgba(0,0,0,0.4));
padding: 0;
transition: transform .15s, background .15s;
}
.fm-scene-arrow:hover {
background: #6e1416;
transform: translateY(-50%) scale(1.05);
}
.fm-scene-arrow.prev { left: calc(24 * var(--px)); }
.fm-scene-arrow.next { right: calc(24 * var(--px)); }
.fm-scene-dots {
display: flex;
gap: calc(14 * var(--px));
justify-content: center;
margin: 0 0 4%;
}
.fm-scene-dot {
width: calc(14 * var(--px)); height: calc(14 * var(--px));
border-radius: 50%;
background: rgba(255,255,255,0.3);
transition: background .2s, transform .2s;
}
.fm-scene-dot.is-active {
background: #7b6ef0;
transform: scale(1.4);
}
/* === Phase 4: PROCESSING === */
.fm-processing {
background: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6%;
}
.fm-spinner {
position: relative;
width: 36%;
aspect-ratio: 1/1;
border: 4px solid rgba(255,255,255,0.2);
border-top-color: var(--warm-white);
border-radius: 50%;
animation: fm-spin 1s linear infinite;
}
.fm-spinner-pct {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(56 * var(--px));
font-weight: 700;
color: var(--warm-white);
animation: fm-spin-cancel 1s linear infinite;
}
@keyframes fm-spin { to { transform: rotate(360deg); } }
@keyframes fm-spin-cancel { to { transform: rotate(-360deg); } }
.fm-processing-title {
font-size: calc(60 * var(--px));
font-weight: 900;
color: var(--warm-white);
text-align: center;
margin: 0;
}
.fm-processing-sub {
font-size: calc(28 * var(--px));
font-weight: 500;
color: var(--warm-gray-300);
text-align: center;
margin: 0;
}
/* === Phase 5: SELECTION (Figma node 2185:976 「バリエーション選択」) === */
.fm-selection {
background: transparent;
padding: 6% 4% 4%;
display: flex;
flex-direction: column;
align-items: center;
gap: calc(48 * var(--px));
position: relative;
}
.fm-selection-title {
font-size: calc(60 * var(--px));
font-weight: 900;
color: var(--warm-white);
text-align: center;
margin: 0 0 calc(20 * var(--px));
line-height: 1;
}
.fm-selection-sub {
font-size: calc(32 * var(--px));
font-weight: 700;
color: var(--warm-white);
text-align: center;
margin: 0;
letter-spacing: 0.04em;
line-height: 1;
}
/* メインカード+サムネを抱える縦カラム + 左右矢印 */
.fm-selection-carousel {
position: relative;
width: 100%;
display: flex;
justify-content: center;
}
.fm-main-card-wrap {
width: 67.6%;
display: flex;
flex-direction: column;
gap: calc(27 * var(--px));
align-items: center;
}
/* バリエーションカード（メイン） */
.fm-main-card {
width: 100%;
aspect-ratio: 730 / 1041;
position: relative;
background: var(--warm-white);
border: calc(1.6 * var(--px)) solid var(--warm-white);
overflow: hidden;
box-shadow: 0 calc(8 * var(--px)) calc(24 * var(--px)) rgba(0,0,0,0.6);
border-radius: 0;
}
.fm-main-card .fm-main-img {
position: absolute;
inset: 0 0 12.5% 0;
width: 100%;
height: 87.5%;
object-fit: cover;
display: block;
}
.fm-main-card-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 12.5%;
background: #070707;
overflow: hidden;
z-index: 1;
}
.fm-main-card-footer img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.fm-main-card-num {
position: absolute;
top: 0;
left: 0;
width: calc(104 * var(--px));
height: calc(104 * var(--px));
background: var(--warm-white);
color: #000;
font-family: var(--font-num, 'Source Han Sans JP', sans-serif);
font-size: calc(72 * var(--px));
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
border-bottom-right-radius: calc(13 * var(--px));
z-index: 2;
line-height: 1;
}
/* サムネイルストリップ */
.fm-thumb-strip {
display: flex;
gap: calc(16 * var(--px));
justify-content: center;
width: 100%;
}
.fm-thumb {
position: relative;
flex: 0 0 auto;
width: calc(158 * var(--px));
aspect-ratio: 158 / 224;
background: var(--warm-white);
border: calc(2 * var(--px)) solid var(--warm-white);
cursor: pointer;
padding: 0;
overflow: hidden;
transition: border-width .15s, transform .15s;
border-radius: 0;
}
.fm-thumb.is-selected {
border-width: calc(10 * var(--px));
transform: scale(1);
}
.fm-thumb .fm-thumb-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 87.5%;
object-fit: cover;
display: block;
}
.fm-thumb-footer {
position: absolute;
bottom: 0;
left: 0; right: 0;
height: 12.5%;
background: #070707;
overflow: hidden;
}
.fm-thumb-footer img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.fm-thumb-num {
position: absolute;
top: 0;
left: 0;
width: calc(28 * var(--px));
height: calc(28 * var(--px));
background: var(--warm-white);
color: #000;
font-size: calc(16.5 * var(--px));
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border-bottom-right-radius: calc(6 * var(--px));
z-index: 2;
line-height: 1;
}
/* 左右の Carousel Button */
.fm-selection-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: calc(88 * var(--px));
height: calc(88 * var(--px));
border-radius: 50%;
background: rgba(24,8,8,0.6);
border: calc(2 * var(--px)) solid var(--warm-white);
color: var(--warm-white);
font-size: calc(48 * var(--px));
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 calc(8 * var(--px)) rgba(0,0,0,0.4);
z-index: 4;
transition: background .2s, transform .2s;
}
.fm-selection-arrow:hover { background: rgba(24,8,8,0.85); }
.fm-selection-arrow.prev { left: calc(20 * var(--px)); }
.fm-selection-arrow.next { right: calc(20 * var(--px)); }
/* 再生成リンク (Selection phase) */
.fm-regen-link {
display: inline-block;
margin: calc(16 * var(--px)) auto 0;
padding: calc(12 * var(--px)) calc(24 * var(--px));
font-size: calc(26 * var(--px));
font-weight: 700;
color: var(--warm-gray-300);
background: none;
border: none;
border-bottom: 1px dashed rgba(255,255,255,0.3);
cursor: pointer;
transition: color .2s, border-color .2s;
align-self: center;
}
.fm-regen-link:hover {
color: var(--warm-white);
border-bottom-color: rgba(255,255,255,0.6);
}
/* 再生成確認モーダル (画面内オーバーレイ) */
.fm-regen-modal {
position: absolute;
inset: 0;
z-index: 50;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: none;
align-items: center;
justify-content: center;
padding: 8%;
}
.fm-regen-modal.is-open { display: flex; }
.fm-regen-modal-card {
background: var(--warm-white);
color: #000;
border-radius: 16px;
padding: 24px 20px;
text-align: center;
max-width: 90%;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.fm-regen-modal-title {
font-size: calc(40 * var(--px));
font-weight: 900;
margin: 0 0 calc(16 * var(--px));
}
.fm-regen-modal-desc {
font-size: calc(26 * var(--px));
font-weight: 500;
color: #666;
margin: 0 0 calc(28 * var(--px));
line-height: 1.5;
}
.fm-regen-modal-actions {
display: flex;
gap: calc(16 * var(--px));
justify-content: center;
}
.fm-regen-modal-actions button {
padding: calc(20 * var(--px)) calc(36 * var(--px));
border-radius: 999px;
border: none;
font-size: calc(28 * var(--px));
font-weight: 700;
cursor: pointer;
transition: background .2s;
}
.fm-regen-modal-confirm {
background: var(--red-deep);
color: var(--warm-white);
}
.fm-regen-modal-confirm:hover { background: #6e1416; }
.fm-regen-modal-cancel {
background: rgba(0,0,0,0.08);
color: #000;
}
.fm-regen-modal-cancel:hover { background: rgba(0,0,0,0.15); }
/* === Phase 6: FINAL CONFIRM === */
.fm-final {
background: transparent;
padding: calc(80 * var(--px)) calc(80 * var(--px));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(40 * var(--px));
}
.fm-final-head {
text-align: center;
}
.fm-final-title {
font-size: calc(60 * var(--px));
font-weight: 900;
color: var(--warm-white);
margin: 0 0 calc(20 * var(--px));
line-height: 1;
}
.fm-final-sub {
font-size: calc(28 * var(--px));
font-weight: 500;
color: var(--warm-gray-300);
margin: 0;
line-height: 1.5;
}
.fm-final-card {
width: auto;
flex: 1;
max-height: calc(1150 * var(--px));
aspect-ratio: 800 / 1150;
border-radius: 0;
overflow: hidden;
background: var(--warm-white);
border: calc(1.6 * var(--px)) solid var(--warm-white);
box-shadow: 0 calc(8 * var(--px)) calc(24 * var(--px)) rgba(0,0,0,0.6);
min-height: 0;
}
.fm-final-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-final-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(16 * var(--px));
}
.fm-final-actions .fm-cta-pill { margin-top: 0; }
.fm-final-actions .fm-cta-pill.outline { margin-top: 0; }
/* === Phase 7: PRINTING === */
.fm-printing {
background: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 25% 8% 12%;
}
.fm-printing-title-area { text-align: center; }
.fm-printing-title {
font-size: calc(60 * var(--px));
font-weight: 900;
color: var(--warm-white);
margin: 0 0 calc(24 * var(--px));
}
.fm-printing-sub {
font-size: calc(28 * var(--px));
font-weight: 500;
color: var(--warm-gray-300);
line-height: 1.6;
margin: 0;
}
.fm-printer-area {
text-align: center;
animation: fm-pulse 1.5s ease-in-out infinite;
}
.fm-printer-arrow {
font-size: calc(120 * var(--px));
color: var(--warm-white);
line-height: 1;
margin-bottom: calc(8 * var(--px));
}
.fm-printer-label {
font-size: calc(48 * var(--px));
font-weight: 900;
color: var(--warm-white);
}
/* === Phase 8: COMPLETION === */
.fm-completion {
background: transparent;
display: flex;
flex-direction: column;
align-items: center;
padding: 6% 6% 5%;
gap: 3%;
}
.fm-completion-title {
font-size: calc(80 * var(--px));
font-weight: 900;
color: var(--warm-white);
margin: 0;
text-align: center;
}
.fm-completion-sub {
font-size: calc(28 * var(--px));
font-weight: 700;
color: var(--warm-white);
margin: 0;
text-align: center;
}
.fm-qr-card {
position: relative;
width: 70%;
aspect-ratio: 1/1;
background: var(--warm-white);
border-radius: 8px;
padding: 12px;
box-shadow: 0 0 20px rgba(255,255,255,0.15);
}
.fm-qr-card svg, .fm-qr-card img {
width: 100%; height: 100%;
}
.fm-completion-msg {
text-align: center;
color: var(--warm-white);
}
.fm-completion-msg-big {
font-size: calc(36 * var(--px));
font-weight: 900;
margin: 0 0 calc(4 * var(--px));
}
.fm-completion-msg-sm {
font-size: calc(26 * var(--px));
font-weight: 700;
margin: 0;
}
.fm-countdown {
display: flex;
align-items: baseline;
gap: calc(12 * var(--px));
color: var(--warm-white);
}
.fm-countdown-num {
font-size: calc(80 * var(--px));
font-weight: 700;
line-height: 1;
}
.fm-countdown-text {
font-size: calc(28 * var(--px));
font-weight: 500;
}
/* === ステップガイド: 中央集約 + 水平タイムライン === */
.flow-mock-side {
width: 100%;
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.flow-mock-side-title {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.3em;
color: #8b7ef0;
margin-bottom: 10px;
}
.flow-mock-side-heading {
font-size: clamp(16px, 1.8vw, 20px);
font-weight: 900;
color: var(--warm-white);
margin-bottom: 4px;
letter-spacing: 0.02em;
}
.flow-mock-side-subhead {
font-size: 12px;
color: var(--warm-gray-300);
margin-bottom: 24px;
line-height: 1.7;
}
.flow-mock-steps {
position: relative;
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 0;
align-items: start;
}
.flow-mock-steps::before {
/* 横タイムライン線 (バッジの中央を貫く) */
content: '';
position: absolute;
top: 14px;
left: calc(100% / 10 / 2);
right: calc(100% / 10 / 2);
height: 2px;
background: linear-gradient(to right,
rgba(255,255,255,0.04) 0%,
rgba(255,255,255,0.12) 10%,
rgba(255,255,255,0.12) 90%,
rgba(255,255,255,0.04) 100%);
z-index: 0;
}
.flow-mock-steps li {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 0 4px;
font-size: 11px;
font-weight: 500;
color: var(--warm-gray-500);
transition: color .25s, transform .25s;
cursor: pointer;
text-align: center;
line-height: 1.3;
z-index: 1;
}
.flow-mock-steps li:hover {
color: var(--warm-white);
transform: translateY(-2px);
}
.flow-mock-steps li.is-active {
color: var(--warm-white);
font-weight: 800;
}
.flow-mock-steps li.is-done {
color: var(--warm-gray-500);
}
.flow-mock-steps li .step-num {
position: relative;
z-index: 2;
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(20,20,22,0.95);
border: 1.5px solid rgba(255,255,255,0.12);
color: var(--warm-gray-300);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 12px;
transition: all .3s;
}
.flow-mock-steps li:hover .step-num {
border-color: rgba(255,255,255,0.25);
color: var(--warm-white);
}
.flow-mock-steps li.is-active .step-num {
background: linear-gradient(135deg, #4f86f0 0%, #9b6bff 100%);
border-color: rgba(255,255,255,0.25);
color: var(--warm-white);
box-shadow:
0 0 0 4px rgba(110,90,240,0.25),
0 4px 16px rgba(110,90,240,0.5);
transform: scale(1.1);
}
.flow-mock-steps li.is-done .step-num {
background: rgba(46, 173, 121, 0.18);
border-color: rgba(46, 173, 121, 0.45);
color: rgba(120, 220, 170, 0.95);
font-size: 0;
}
.flow-mock-steps li.is-done .step-num::after {
content: '✓';
font-size: 14px;
font-weight: 900;
font-family: var(--font-jp);
color: rgba(120, 220, 170, 0.95);
}
@media (max-width: 720px) {
/* スマホでは体験フロー画面直下のステップガイド(進捗バー)を非表示。
モーダル(フルスクリーン)側には影響させないため #flow-mock 配下に限定 */
#flow-mock .flow-mock-side { display: none; }
/* スマホは縦リスト + 大きめタップ */
.flow-mock-steps {
grid-template-columns: 1fr;
gap: 6px;
max-width: 320px;
margin: 0 auto;
}
.flow-mock-steps::before {
/* 縦線にスイッチ */
top: 22px;
bottom: 22px;
left: 22px;
right: auto;
width: 2px;
height: auto;
background: linear-gradient(to bottom,
rgba(255,255,255,0.04) 0%,
rgba(255,255,255,0.12) 30%,
rgba(255,255,255,0.12) 70%,
rgba(255,255,255,0.04) 100%);
}
.flow-mock-steps li {
flex-direction: row;
align-items: center;
gap: 14px;
padding: 12px 14px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
font-size: 14px;
text-align: left;
line-height: 1.4;
}
.flow-mock-steps li:hover {
transform: none;
background: rgba(255,255,255,0.06);
}
.flow-mock-steps li.is-active {
background: linear-gradient(90deg, rgba(193,36,36,0.22) 0%, rgba(193,36,36,0.04) 100%);
border-color: rgba(193,36,36,0.45);
}
.flow-mock-steps li.is-active::before {
content: '';
position: absolute;
left: -1px;
top: 10px;
bottom: 10px;
width: 3px;
border-radius: 2px;
background: #7b6ef0;
box-shadow: 0 0 12px rgba(110,90,240,0.6);
}
.flow-mock-steps li .step-num {
width: 32px;
height: 32px;
font-size: 13px;
}
.flow-mock-steps li.is-active .step-num {
transform: none; /* 横レイアウトでは scaleしない */
}
}
.flow-mock-controls {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.flow-mock-controls .ctrl-btn {
flex: 1;
min-width: 90px;
padding: 10px 14px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px;
color: var(--warm-white);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background .2s, border-color .2s;
}
.flow-mock-controls .ctrl-btn:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.2);
}
.flow-mock-controls .ctrl-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.flow-mock-hint {
font-size: 12px;
color: var(--warm-gray-300);
margin-top: 16px;
line-height: 1.6;
padding: 14px 16px;
background: rgba(255,255,255,0.03);
border-left: 3px solid #4f86f0;
border-radius: 4px;
}
.flow-mock-hint strong {
color: var(--warm-white);
font-weight: 700;
}
/* ============================================
Before/After Slider — Section 02 (AIに触らせない)
ハンドルを掴んでドラッグすると、左に元の人物写真、
右にAI生成後のキービジュアルが現れる
============================================ */
.ba {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
cursor: grab;
touch-action: none;
user-select: none;
isolation: isolate;
z-index: 1;
--ba-pos: 50%;
}
.ba:active { cursor: grabbing; }
.ba.is-dragging { cursor: grabbing; }
.ba.is-dragging .ba-handle,
.ba.is-dragging .ba-before {
transition: none !important;
}
.ba > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
.ba .ba-before {
z-index: 2;
clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ba-label,
.split-compare-label {
position: absolute;
z-index: 3;
bottom: 16px;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.28em;
color: var(--warm-white);
padding: 6px 14px;
min-width: 88px;
text-align: center;
background: rgba(7,7,7,0.7);
border: 1px solid rgba(246,245,244,0.22);
backdrop-filter: blur(6px);
pointer-events: none;
box-sizing: border-box;
}
/* BEFORE は左下、AFTER は右下 */
.ba-label.is-before { left: 16px; }
.ba-label.is-after { right: 16px; }
.split-compare-label.is-before { left: 16px; right: auto; }
.split-compare-label.is-after { right: 16px; left: auto; }
.ba-handle {
position: absolute;
z-index: 4;
top: 0;
bottom: 0;
left: var(--ba-pos);
width: 2px;
background: var(--warm-white);
transform: translateX(-50%);
box-shadow: 0 0 12px rgba(0,0,0,0.6);
pointer-events: none;
transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ba-handle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--warm-white);
box-shadow:
0 6px 24px rgba(0,0,0,0.55),
0 0 0 0 rgba(255,255,255,0.4);
animation: ba-handle-pulse 2.4s ease-in-out infinite;
}
.ba-handle-icon {
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
color: var(--bg-page);
animation: ba-handle-bob 1.6s ease-in-out infinite;
}
@keyframes ba-handle-pulse {
0%, 100% {
box-shadow:
0 6px 24px rgba(0,0,0,0.55),
0 0 0 0 rgba(255,255,255,0.45);
}
50% {
box-shadow:
0 6px 24px rgba(0,0,0,0.55),
0 0 0 14px rgba(255,255,255,0);
}
}
@keyframes ba-handle-bob {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.12); }
}
.ba.is-touched .ba-handle::after,
.ba.is-touched .ba-handle-icon {
animation-play-state: paused;
}
.ba-hint {
position: absolute;
z-index: 6; /* handle・label・画像 全部より前 */
top: 16px;
bottom: auto;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-jp);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--warm-white);
padding: 8px 16px;
background: rgba(7,7,7,0.85);
border: 1px solid rgba(246,245,244,0.32);
border-radius: 999px;
backdrop-filter: blur(8px);
box-shadow: 0 6px 20px rgba(0,0,0,0.4);
pointer-events: none;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 8px;
animation: ba-hint-breath 2.4s ease-in-out infinite;
}
.ba-hint-arrow {
display: inline-block;
animation: ba-hint-arrow 1.6s ease-in-out infinite;
}
.ba-hint-arrow.is-left { animation-delay: 0s; }
.ba-hint-arrow.is-right { animation-delay: 0.8s; }
@keyframes ba-hint-breath {
0%, 100% { opacity: 0.95; transform: translateX(-50%) translateY(0); }
50% { opacity: 1; transform: translateX(-50%) translateY(2px); }
}
@keyframes ba-hint-arrow {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(4px); }
}
.ba-hint-arrow.is-left {
animation-name: ba-hint-arrow-l;
}
@keyframes ba-hint-arrow-l {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-4px); }
}
.ba.is-touched .ba-hint,
.ba.is-hint-faded .ba-hint {
opacity: 0;
transform: translateX(-50%) translateY(-8px); /* 上にふわっと消える */
transition: opacity 0.7s ease-out, transform 0.7s ease-out;
animation: none;
pointer-events: none;
}
/* ============================================
Scroll Reveal — セクション内コンテンツのみふわっと表示（背景は固定）
============================================ */
html.js section:not(.hero) > * {
opacity: 0;
transform: translateY(28px);
transition:
opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
will-change: opacity, transform;
}
html.js section.is-revealed > * {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
html.js section:not(.hero) > * {
opacity: 1;
transform: none;
transition: none;
}
}
/* ============================================
Split Compare — Section 03 (ちゃんと自分)
BEFORE / AFTER を半分ずつ並べる（スライダーなし）
============================================ */
.split-compare {
position: relative;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
overflow: hidden;
isolation: isolate;
z-index: 1;
}
.split-compare-half {
position: relative;
overflow: hidden;
}
.split-compare-half + .split-compare-half {
border-left: 2px solid var(--warm-white);
}
.split-compare-half img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* .split-compare-label のベーススタイルは .ba-label と統合済み（min-width:88px・center揃え） */
/* ===== CASE STUDY / 導入実績（旧 body内