:root { --pink:#f7b8c9; --deep:#a95872; --ink:#633b4a; --cream:#fffaf9; --lav:#f7e8f2; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff7fa; font-family:"Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif; overflow-x:hidden; }
body::before, body::after { content:""; position:fixed; z-index:-2; width:34rem; height:34rem; border-radius:50%; opacity:.38; }
body::before { background:#fbd4e1; top:-14rem; left:-12rem; } body::after { background:#f7e6c9; bottom:-14rem; right:-14rem; }
.section-shell { position:relative; max-width:640px; margin:0 auto; padding:70px 28px; overflow:hidden; }
.sparkles { position:fixed; inset:0; pointer-events:none; z-index:-1; background-image:radial-gradient(#eaa8bd 1.2px,transparent 1.8px),radial-gradient(#fff 1px,transparent 1.5px); background-size:33px 33px,47px 47px; background-position:4px 7px,20px 24px; opacity:.42; }
.hero { min-height:780px; padding-top:30px; overflow:hidden; isolation:isolate; text-align:center; background:linear-gradient(165deg,#fff 4%,#ffe6ed 60%,#f7c9d6); border-radius:0 0 50% 50% / 0 0 4% 4%; }
.hero::after { content:""; position:absolute; z-index:1; width:480px; height:480px; left:50%; bottom:-58px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle at 50% 50%,#fffdfc 0 32%,#fbd8e3 33% 45%,transparent 46%); opacity:.85; }
.hero-flash { position:absolute; z-index:2; inset:-9% -7%; pointer-events:none; opacity:0; background-position:center; background-size:cover; transform:translateY(115%) scale(1.08); }
.hero-flash::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,247,250,.58),rgba(255,221,232,.22) 44%,rgba(255,246,249,.62)); }
.motion-enhanced .hero-flash { animation:hero-photo-rise 3.15s cubic-bezier(.18,.77,.22,1) both; }
.motion-enhanced .hero-flash--kabukicho { background-image:url("assets/optimized/kabukicho-photo.jpg"); animation-delay:.2s; }
.motion-enhanced .hero-flash--champagne { background-image:url("assets/optimized/story.jpg"); animation-delay:3.35s; }
.hero-topline { position:relative; z-index:3; display:flex; gap:10px; align-items:center; justify-content:center; color:#b87187; font-family:"DM Serif Display",serif; font-size:11px; letter-spacing:.2em; animation:fade-down .8s both; } .hero-topline i { width:23px; height:1px; background:#dba2b4; }
.eyebrow { position:relative; z-index:3; margin:28px 0 15px; color:#ae6079; font-size:12px; font-weight:700; letter-spacing:.08em; }
h1,h2,p { margin-top:0; } h1 { position:relative; z-index:3; margin-bottom:13px; line-height:1.18; animation:fade-up .85s .12s both; } h1 small { display:block; font-size:22px; font-weight:700; } h1 em { display:block; color:#c25c80; font-size:42px; font-style:normal; font-weight:900; letter-spacing:-.06em; text-shadow:2px 3px #fff; }
.hero-copy { position:relative; z-index:3; font-size:13px; line-height:2; animation:fade-up .85s .27s both; } .hero-copy b { color:#bb5e7d; } .quote-mark { color:#c45d80; font-size:1.12em; font-weight:900; }
.hero-mochitan { position:absolute; z-index:2; width:min(590px,110%); height:auto; left:50%; bottom:57px; transform:translateX(-50%); filter:drop-shadow(0 14px 16px rgba(157,72,103,.17)); }
.hero-sticker { position:absolute; z-index:4; display:grid; place-content:center; width:70px; height:70px; border-radius:50%; color:#a95872; background:#fffdfb; box-shadow:0 6px 13px rgba(145,72,95,.14); line-height:1.1; transform:rotate(-11deg); animation:soft-float 3.2s ease-in-out infinite; } .hero-sticker span { font-size:9px; font-family:"Hiragino Maru Gothic ProN","Yu Gothic",cursive; } .sticker-one { top:300px; left:8%; font-size:23px; } .sticker-two { right:9%; top:448px; font-size:22px; transform:rotate(10deg); animation-delay:-1.1s; } .hero-polaroid { position:absolute; z-index:4; top:382px; left:7%; width:106px; margin:0; padding:6px; background:#fff; box-shadow:0 7px 16px rgba(117,48,71,.2); transform:rotate(-7deg); animation:polaroid-in .9s .52s both, soft-float 4.1s 1.5s ease-in-out infinite; } .hero-polaroid img { display:block; width:100%; aspect-ratio:.91; object-fit:cover; object-position:top; } .hero-polaroid span { position:absolute; z-index:1; top:-19px; right:-18px; font-size:32px; transform:rotate(13deg); filter:drop-shadow(0 2px 2px rgba(117,48,71,.2)); } .hero-polaroid--right { top:310px; right:7%; left:auto; transform:rotate(7deg); animation-delay:.65s,1.7s; } .hero-polaroid--right img { object-position:center; }
.cta { position:relative; z-index:5; display:flex; align-items:center; justify-content:center; gap:18px; width:min(390px,100%); margin:0 auto; padding:15px 19px; overflow:hidden; isolation:isolate; border:2px solid #fff; border-radius:999px; color:#fff; background:linear-gradient(100deg,#ed9db7,#c46282); box-shadow:0 10px 0 #af5271,0 16px 23px rgba(137,51,78,.22); text-decoration:none; font-weight:900; transition:.2s ease; } .cta::after { content:""; position:absolute; z-index:-1; top:-45%; left:0; width:18%; height:190%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent); transform:translateX(-220%) rotate(22deg); animation:cta-shine 2.8s 1s ease-in-out infinite; } .cta:hover { transform:translateY(-3px); box-shadow:0 13px 0 #af5271,0 20px 25px rgba(137,51,78,.22); } .cta strong { font-size:20px; } .hero-cta { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); } .hero-cta:hover { transform:translateX(-50%) translateY(-3px); } .cta-note { position:absolute; z-index:4; bottom:2px; left:0; right:0; color:#ad6d80; font-size:10px; }
.intro { text-align:center; background:#fffdfc; } .script { margin-bottom:6px; color:#c9869c; font:25px "Hiragino Maru Gothic ProN","Yu Gothic",cursive; transform:rotate(-4deg); } h2 { margin-bottom:28px; font-size:28px; line-height:1.45; letter-spacing:-.05em; } h2 span { color:#c45d80; } .choice-game { position:relative; overflow:hidden; margin:28px auto 30px; padding:47px 18px 21px; border:2px solid #fff; border-radius:25px; background:radial-gradient(circle at 12% 13%,rgba(255,255,255,.95) 0 2px,transparent 3px),radial-gradient(circle at 89% 78%,rgba(255,255,255,.8) 0 3px,transparent 4px),linear-gradient(145deg,#ffdce7,#f6b8cb 52%,#f9d1de); box-shadow:0 0 0 2px #eaa4ba,0 12px 0 #d77b99,0 21px 27px rgba(170,91,117,.2); } .choice-game::before { content:"✦  もちたん診断  ✦"; position:absolute; top:0; left:50%; width:215px; padding:7px 0; color:#fff; background:linear-gradient(90deg,#ca6386,#ec9fba,#ca6386); font:13px "Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; font-weight:900; letter-spacing:.08em; transform:translateX(-50%); box-shadow:0 3px 7px rgba(145,61,90,.18); } .choice-game::after { content:"🎀"; position:absolute; right:9px; bottom:7px; font-size:24px; rotate:-12deg; opacity:.85; } .choice-kicker { position:relative; z-index:1; display:inline-block; margin:0 0 16px; padding:4px 17px 5px; border:1px solid rgba(213,111,144,.42); border-radius:999px; color:#ad4569; background:rgba(255,255,255,.76); box-shadow:0 3px 7px rgba(173,80,112,.1); font:19px "Hiragino Maru Gothic ProN","Yu Gothic",cursive; } .choice-step { position:relative; z-index:1; display:none; min-height:99px; } .choice-step.is-active { display:block; animation:choice-pop .38s cubic-bezier(.2,.8,.2,1) both; } .choice-question { margin:0 0 15px; color:#763f51; font-size:17px; font-weight:900; text-shadow:1px 1px rgba(255,255,255,.75); } .choice-buttons { display:flex; justify-content:center; gap:10px; } .choice-buttons button { min-width:110px; padding:10px 13px; border:2px solid #fff; border-radius:999px; color:#fff; background:linear-gradient(120deg,#f28daf,#b94d76); box-shadow:0 5px 0 #a64066,0 7px 9px rgba(142,52,84,.15); font:700 13px "Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; cursor:pointer; transition:.18s; } .choice-buttons button:hover { translate:0 -2px; box-shadow:0 7px 0 #a64066,0 9px 11px rgba(142,52,84,.18); } .choice-finish { padding:4px 0; color:#83485b; font-size:12px; line-height:1.75; } .choice-finish p { margin-bottom:10px; } .choice-answer { color:#ae3e67; font-size:18px; font-weight:900; } .choice-line { display:inline-block; padding:10px 22px; border:2px solid #fff; border-radius:999px; color:#fff; background:linear-gradient(120deg,#ec89ac,#b84970); box-shadow:0 4px 0 #a03d62; font-size:13px; font-weight:900; text-decoration:none; } .profile-card { display:flex; text-align:left; align-items:center; gap:17px; padding:13px; border:1px solid #f5cbd7; border-radius:24px; background:#fff; box-shadow:0 9px 25px rgba(170,91,117,.1); } .profile-card img { width:39%; border-radius:17px; } .profile-text { flex:1; font-size:12px; line-height:1.78; } .profile-text p:last-child { margin-bottom:0; } .profile-text b { color:#c45d80; font-size:14px; }
.story { padding-top:78px; padding-bottom:84px; background:linear-gradient(#fdf4f6,#f7e5ed); } .ribbon-title { margin:0 auto 20px; width:max-content; padding:7px 24px; color:#fff; background:#cc7691; font:14px "DM Serif Display",serif; letter-spacing:.16em; } .ribbon-title::before,.ribbon-title::after { content:""; display:inline-block; width:10px; height:10px; vertical-align:middle; margin:0 9px; background:#fff; transform:rotate(45deg); } .story h2 { text-align:center; } .story h2 em { color:#c45d80; font-family:"Yomogi",cursive; font-size:42px; } .story-layout { display:grid; grid-template-columns:42% 1fr; gap:20px; align-items:center; } .story-photo-wrap { position:relative; transform:rotate(-4deg); padding:7px; background:#fff; box-shadow:0 8px 19px rgba(126,50,73,.18); animation:photo-float 4.2s .4s ease-in-out infinite; } .story-photo-wrap img { display:block; width:100%; aspect-ratio:.64; object-fit:cover; object-position:center; } .story-photo-wrap span { position:absolute; right:-11px; bottom:-18px; font-size:36px; transform:rotate(15deg); } .story-copy { font-size:12px; line-height:1.9; } .story-copy p:last-child { margin-bottom:0; } .quote { position:relative; margin-top:38px; padding:22px 24px; border-radius:18px; color:#9f4f6b; background:#fff; text-align:center; font-size:14px; line-height:1.8; box-shadow:0 8px 18px rgba(170,91,117,.09); } .quote::before { content:"“"; position:absolute; left:11px; top:-13px; color:#f1b5c7; font:52px "DM Serif Display",serif; } .quote span { position:absolute; right:8px; bottom:-20px; font-size:27px; }
.moments { padding-top:74px; padding-bottom:42px; text-align:center; background:#fffdfc; } .moments h2 { margin-bottom:11px; } .moments-lead { color:#936575; font-size:12px; line-height:1.9; }
.collage-cta { margin-top:29px; } .collage-note { margin:15px 0 0; color:#ae7084; font-size:11px; }
.photo-wall { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,105px); gap:8px; margin:28px auto 0; max-width:480px; padding:11px; border:1px solid #f4c5d3; border-radius:22px; background:#fff7fa; box-shadow:0 10px 24px rgba(170,91,117,.1); } .photo-wall img { display:block; width:100%; height:100%; border-radius:10px; object-fit:cover; object-position:center; box-shadow:0 2px 5px rgba(127,66,86,.14); } .photo-wall img:nth-child(3),.photo-wall img:nth-child(8) { object-position:top; }
.credibility-collage { position:relative; margin:27px auto 0; padding:8px 8px 31px; max-width:390px; background:#fff; box-shadow:0 11px 25px rgba(170,91,117,.16); transform:rotate(-1.4deg); } .credibility-collage::before { content:"🎀"; position:absolute; z-index:1; right:-17px; top:-23px; font-size:43px; transform:rotate(15deg); filter:drop-shadow(0 2px 2px rgba(143,62,87,.17)); } .credibility-collage img { display:block; width:100%; aspect-ratio:.75; object-fit:cover; } .credibility-collage figcaption { position:absolute; bottom:8px; left:0; right:0; color:#bb6683; font:17px "Yomogi",cursive; }
.reveal { text-align:center; padding-top:45px; padding-bottom:82px; background:#fffdfc; } .reveal h2 { font-size:25px; } .secret-box { position:relative; padding:31px 25px; border:1px dashed #db9ab0; border-radius:24px; background:linear-gradient(135deg,#fff5f8,#fff); box-shadow:inset 0 0 0 7px #fff,0 11px 25px rgba(159,70,98,.09); font-size:14px; line-height:1.9; } .secret-box .small { margin-bottom:13px; color:#946574; font-size:11px; line-height:1.8; } .secret-box .small:last-of-type { margin-bottom:0; } .secret-line { position:relative; width:87%; height:11px; margin:12px auto 20px; overflow:hidden; border-radius:99px; background:#f7cbd7; } .secret-line::after { content:""; position:absolute; inset:0 -18px; background:repeating-linear-gradient(-45deg,#eaa9bd 0 6px,#f7cbd7 6px 12px); animation:secret-wave 1.25s linear infinite; } .secret-seal { position:absolute; right:-8px; top:-21px; display:grid; place-content:center; width:77px; height:77px; color:#fff; border:3px solid #fff; border-radius:50%; background:#d57895; font:12px/1.3 "DM Serif Display",serif; letter-spacing:.08em; transform:rotate(13deg); box-shadow:0 4px 9px rgba(126,50,73,.17); }
.line-section { padding:77px 28px 92px; text-align:center; background:linear-gradient(145deg,#fbdce6,#f5bfd0 56%,#f6d6de); } .line-section::before { content:"🎀  ♡  🎀"; position:absolute; top:21px; left:0; right:0; color:#fff8fa; font-size:28px; letter-spacing:19px; white-space:nowrap; } .line-section h2 { color:#704350; font-size:25px; } .final-photo-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; max-width:340px; margin:0 auto 27px; padding:7px; border-radius:16px; background:rgba(255,255,255,.46); box-shadow:0 5px 13px rgba(154,70,100,.1); } .final-photo-strip img { display:block; width:100%; aspect-ratio:1; border:3px solid #fff; border-radius:7px; object-fit:cover; box-shadow:0 2px 4px rgba(116,48,70,.14); } .final-photo-strip img:nth-child(1) { transform:rotate(-2deg); } .final-photo-strip img:nth-child(3) { transform:rotate(2deg); } .line-copy { margin-bottom:30px; font-size:12px; line-height:2; } .final-cta { background:linear-gradient(100deg,#ea91ae,#b54f74); }
.privacy { padding-top:52px; padding-bottom:54px; background:#fffdfc; text-align:center; } .privacy .script { margin-bottom:15px; } .privacy-card { overflow:hidden; border:1px solid #f0bfd0; border-radius:20px; background:#fff6f9; box-shadow:0 8px 18px rgba(170,91,117,.08); text-align:left; } .privacy-card summary { display:flex; align-items:center; justify-content:space-between; padding:17px 19px; color:#9f506a; cursor:pointer; font-size:13px; font-weight:900; list-style:none; } .privacy-card summary::-webkit-details-marker { display:none; } .privacy-card summary span { font-size:21px; line-height:1; transition:transform .2s ease; } .privacy-card[open] summary { border-bottom:1px dashed #e7b0c1; } .privacy-card[open] summary span { transform:rotate(45deg); } .privacy-copy { padding:4px 19px 13px; color:#86626e; font-size:10px; line-height:1.85; } .privacy-copy p { margin:10px 0; } .privacy-copy a,footer a { color:#b55a78; font-weight:700; text-underline-offset:3px; }
footer { padding:30px 20px 36px; color:#9b7782; background:#fff; text-align:center; font-size:9px; line-height:1.85; } footer p:last-child { margin:14px 0 0; color:#c78b9e; font-family:"DM Serif Display",serif; letter-spacing:.1em; }
@keyframes fade-down { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } } @keyframes fade-up { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } } @keyframes soft-float { 50% { translate:0 -7px; } } @keyframes photo-float { 50% { translate:0 -9px; } } @keyframes polaroid-in { from { opacity:0; scale:.75; } to { opacity:1; scale:1; } } @keyframes choice-pop { from { opacity:0; scale:.92; translate:0 8px; } to { opacity:1; scale:1; translate:0 0; } } @keyframes cta-shine { 0% { transform:translateX(-220%) rotate(22deg); } 20%,100% { transform:translateX(800%) rotate(22deg); } } @keyframes secret-wave { to { transform:translateX(18px); } } .motion-ready .section-shell:not(.hero) h2, .motion-ready .section-shell:not(.hero) .script, .motion-ready .section-shell:not(.hero) .eyebrow, .motion-ready .story-copy p, .motion-ready .quote, .motion-ready .secret-box, .motion-ready .profile-card, .motion-ready .credibility-collage, .motion-ready .photo-wall, .motion-ready .final-photo-strip { opacity:0; transform:translateY(22px); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1); } .motion-ready .section-shell:not(.hero) .script { transition-delay:.07s; } .motion-ready .section-shell:not(.hero) h2 { transition-delay:.13s; } .motion-ready .section-shell:not(.hero) .is-visible { opacity:1; transform:translateY(0); } .motion-ready .section-shell:not(.hero) .script.is-visible { animation:soft-float 3.6s 1s ease-in-out infinite; } .motion-ready .credibility-collage.is-visible { animation:photo-float 4.4s .7s ease-in-out infinite; } .motion-ready .final-photo-strip.is-visible img { animation:photo-float 3.9s ease-in-out infinite; } .motion-ready .final-photo-strip.is-visible img:nth-child(2) { animation-delay:-1.3s; } .motion-ready .final-photo-strip.is-visible img:nth-child(3) { animation-delay:-2.5s; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }
@media (max-width:600px) {
  body::before, body::after, .sparkles { display:none; }
  .hero { min-height:790px; overflow:visible; z-index:2; }
  h1 em { font-size:36px; }
  .hero-mochitan { bottom:57px; }
  .hero-sticker { display:none; }
  .hero-polaroid { top:405px; left:6%; width:96px; }
  .hero-polaroid--right { top:375px; right:6%; left:auto; }
  .hero-cta { bottom:-24px; }
  .hero .cta-note { display:none; }
  .intro { padding-top:106px; }
}

/* Meta広告からのスマホ流入を想定したCVR版ファーストビュー */
.ad-lp .hero { min-height:830px; }
.hero-benefit { position:relative; z-index:5; width:min(360px,94%); margin:17px auto 0; padding:11px 14px; border:1px solid rgba(195,91,126,.24); border-radius:16px; background:rgba(255,255,255,.82); box-shadow:0 7px 15px rgba(170,91,117,.1); }
.hero-benefit span,.hero-benefit b,.hero-benefit small { display:block; }
.hero-benefit span { margin-bottom:3px; color:#b05a78; font-size:10px; font-weight:900; letter-spacing:.06em; }
.hero-benefit b { color:#8d405b; font-size:14px; }
.hero-benefit small { margin-top:3px; color:#9d6879; font-size:10px; line-height:1.55; }
.ad-lp .hero-cta { position:relative; bottom:auto; left:auto; transform:none; margin:15px auto 0; background:linear-gradient(105deg,#df7b9e 0%,#a73d60 100%); box-shadow:0 9px 0 #8c3152,0 18px 28px rgba(181,67,108,.24); }
.ad-lp .hero-cta:hover { transform:translateY(-3px); }
.hero-cta-note { position:relative; z-index:5; margin:12px 0 0; color:#a76379; font-size:10px; }
@media (max-width:600px) {
  .ad-lp .hero { min-height:850px; overflow:hidden; }
  .ad-lp .hero::after { bottom:-106px; }
  .ad-lp .hero-mochitan { bottom:38px; }
  .ad-lp .hero-polaroid { top:545px; }
  .ad-lp .hero-polaroid--right { top:510px; }
  .ad-lp .hero-sticker { display:none; }
  .ad-lp .hero-cta { bottom:auto; }
  .ad-lp .hero .cta-note { display:none; }
}
@media (min-width:641px) { body { background:linear-gradient(90deg,#f8e2ea,#fff6fa 25%,#fff6fa 75%,#f8e2ea); } main { box-shadow:0 0 45px rgba(140,62,89,.14); } }

/* もちたんだけの小さなリアクション */
.hero-character { position:absolute; z-index:2; width:min(590px,110%); height:auto; left:50%; bottom:57px; transform:translateX(-50%); filter:drop-shadow(0 14px 16px rgba(157,72,103,.17)); }
.hero-character .hero-mochitan { position:relative; display:block; width:100%; height:auto; left:auto; bottom:auto; transform:none; filter:none; }

/* スワイプでめくる、もちたんの日常アルバム */
.gallery-hint { margin:24px 0 8px; color:#bf6683; font:15px "Yomogi",cursive; text-align:center; animation:soft-float 3.3s ease-in-out infinite; }
.photo-gallery { position:relative; }
.photo-wall { display:flex; grid-template-columns:none; grid-template-rows:none; gap:12px; max-width:none; margin:0; padding:12px 16px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.photo-wall::-webkit-scrollbar { display:none; }
.photo-wall img { flex:0 0 clamp(128px,38vw,170px); height:auto; aspect-ratio:.76; scroll-snap-align:center; border:3px solid #fff; border-radius:9px; box-shadow:0 5px 13px rgba(127,66,86,.18); transform:rotate(-1.5deg); }
.photo-wall img:nth-child(even) { transform:rotate(1.5deg) translateY(8px); }
.gallery-control { position:absolute; z-index:3; top:50%; display:grid; place-content:center; width:38px; height:38px; margin-top:-19px; border:2px solid #fff; border-radius:50%; color:#a74b6c; background:rgba(255,253,253,.91); box-shadow:0 3px 9px rgba(136,52,82,.18); font:700 20px/1 sans-serif; cursor:pointer; }
.gallery-control--prev { left:-7px; }.gallery-control--next { right:-7px; }
.gallery-control:hover { scale:1.08; }
@media (max-width:600px) { .hero-character { bottom:57px; } .ad-lp .hero-character { bottom:38px; } .gallery-control { display:none; } .photo-wall { gap:10px; padding:11px 8px; } }

/* トップを通り過ぎる、歌舞伎町とシャンパンの半透明ムービー */
@keyframes hero-photo-rise {
  0% { opacity:0; transform:translateY(112%) scale(1.08); }
  18% { opacity:.5; }
  52% { opacity:.43; transform:translateY(0) scale(1.04); }
  77% { opacity:.27; transform:translateY(-21%) scale(1); }
  100% { opacity:0; transform:translateY(-47%) scale(.98); }
}

/* 段落のすき間をお散歩する、ちいさなもちたん */
.mochitan-walk { position:relative; height:94px; max-width:640px; margin:0 auto; overflow:hidden; background:linear-gradient(90deg,#fffdfc,#fce9f0 48%,#fffdfc); }
.mochitan-walk::before { content:""; position:absolute; left:7%; right:7%; bottom:16px; border-bottom:2px dashed #edb6c7; opacity:.85; }
.mochitan-walk img { position:absolute; z-index:1; bottom:5px; right:-86px; width:78px; height:88px; object-fit:contain; filter:drop-shadow(0 4px 5px rgba(151,69,99,.2)); animation:mochitan-stroll 11.5s linear infinite; }
.mochitan-walk img:not(.is-chroma-ready) { opacity:0; }
.mochitan-walk img.is-chroma-ready { opacity:1; transition:opacity .18s ease; }
.walk-trail { position:absolute; z-index:1; right:10%; bottom:29px; color:#e7a1b6; font:13px/1 "Yomogi",cursive; letter-spacing:8px; opacity:0; animation:walk-hearts 11.5s linear infinite; }
.mochitan-walk--one img,.mochitan-walk--one .walk-trail { animation-delay:-3.8s; }
.mochitan-walk--hero img,.mochitan-walk--hero .walk-trail { animation-delay:-1.7s; }
.mochitan-walk--three img,.mochitan-walk--three .walk-trail { animation-delay:-7.1s; }

/* モバイルでは画面外の描画を抑え、見えている演出をなめらかに保つ。 */
.hero-flash,.mochitan-walk img,.cta::after { will-change:transform,opacity; }
.mochitan-walk { content-visibility:auto; contain-intrinsic-size:auto 94px; }
.photo-wall { contain:layout paint; }
.story,.moments,.reveal,.line-section,.privacy { content-visibility:auto; contain-intrinsic-size:auto 780px; }
/* 外部フォントを使わず、端末内の丸ゴシックで可愛さを保ちながら初期描画を軽くする。 */
.hero-topline,.ribbon-title,.quote::before,.secret-seal,footer p:last-child { font-family:Georgia,serif; }
.story h2 em,.credibility-collage figcaption,.gallery-hint,.walk-trail { font-family:"Hiragino Maru Gothic ProN","Yu Gothic",cursive; }
@keyframes mochitan-stroll { 0% { transform:translateX(0) translateY(0) rotate(5deg); } 8% { transform:translateX(-8vw) translateY(-5px) rotate(-4deg); } 16% { transform:translateX(-16vw) translateY(0) rotate(5deg); } 24% { transform:translateX(-24vw) translateY(-5px) rotate(-4deg); } 32% { transform:translateX(-32vw) translateY(0) rotate(5deg); } 40% { transform:translateX(-40vw) translateY(-5px) rotate(-4deg); } 48% { transform:translateX(-48vw) translateY(0) rotate(5deg); } 56% { transform:translateX(-56vw) translateY(-5px) rotate(-4deg); } 64% { transform:translateX(-64vw) translateY(0) rotate(5deg); } 72% { transform:translateX(-72vw) translateY(-5px) rotate(-4deg); } 80% { transform:translateX(-80vw) translateY(0) rotate(5deg); } 100% { transform:translateX(-110vw) translateY(0) rotate(-4deg); } }
@keyframes walk-hearts { 0%,8% { opacity:0; transform:translateX(18px); } 18%,75% { opacity:.86; transform:translateX(0); } 100% { opacity:0; transform:translateX(-30px); } }