/* 広告LP lp3：公式サイト四季版のテイスト（10/4）。元の LP の CSS の後に読み、色の変数と見た目を季節に付け替える。
   登録ボタン（赤 #f44336）は CV 率を見て調整した色なのでそのまま */
:root{--bg:#fbf7f4;--ink:#2b1f2a;--sub:#8a7480;--rose:#c8406f;--rose2:#e889a9;--line:rgba(43,31,42,.14);
  --serif:'Shippori Mincho B1','Hiragino Mincho ProN',serif;--en:'Bodoni Moda',serif;--mont:Montserrat,sans-serif}
/* 元の LP の色の変数 → 季節の色 */
html[data-season]{--pink:color-mix(in srgb,var(--rose2) 55%,#fff);--pink-deep:var(--rose);--cream:var(--bg);--text:var(--ink);--text-light:var(--sub);
  --heart:var(--rose);--lavender:var(--rose2);--baby-blue:color-mix(in srgb,var(--rose2) 30%,#fff);--gradient:linear-gradient(135deg,var(--rose2),var(--rose))}
body{background:var(--bg)}
/* 見出しは明朝に */
.hero h1,.section-title,.feature-card h3,.step-text h4,.regist-modal h3,.chara-name{font-family:var(--serif);font-weight:800;letter-spacing:.06em}
.section-label{font-family:var(--en);font-style:italic;font-size:15px;letter-spacing:.2em;color:var(--rose)}
.section-title{position:relative;padding-bottom:14px}
.section-title::after{content:"";display:block;width:44px;height:2px;margin:12px auto 0;background:linear-gradient(90deg,var(--rose),var(--rose2))}
.divider{display:none}
/* ハートの浮遊 → 季節の舞うもの（#petals） */
.hearts-container{display:none!important}
#petals{position:fixed;inset:0;width:100%;height:100%;z-index:40;pointer-events:none}

/* ===== ファーストビュー：季節の背景＋カレ（公式サイトと同じ揃え方） ===== */
.hero{min-height:100vh;min-height:100svh;justify-content:flex-start;padding:0 20px;background:none!important;isolation:isolate;overflow:hidden}
.hero::before,.hero::after{display:none!important}
.hero-bg-chara,.hero-characters-wrap,.hero .scroll-hint{display:none!important}   /* 元の部品は JS が参照するので消さずに隠す */
.lp-sky{position:absolute;inset:0;z-index:-3;background:var(--sky-img) center 30%/cover;transform:scale(1.05)}
.hero .lp-veil{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 92%,transparent) 0%,color-mix(in srgb,var(--bg) 55%,transparent) 30%,transparent 55%,color-mix(in srgb,var(--bg) 70%,transparent) 88%,var(--bg) 100%)}
.lp-solo{position:absolute;left:0;right:0;bottom:0;top:30%;z-index:-1;overflow:visible;--base:122%;--eye:15%}
.lp-solo img{position:absolute;left:50%;height:calc(var(--base) * var(--hr,1) * var(--fs,1));top:calc(var(--eye) - var(--eyr,.145) * var(--base) * var(--hr,1) * var(--fs,1));width:auto;max-width:none;opacity:0;
  transform:translateX(calc(var(--cx,.5) * -100% + 6%));filter:blur(6px);transition:opacity .35s ease,transform .5s cubic-bezier(.2,.7,.2,1),filter .35s ease;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 82%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 82%)}
.lp-solo img.on{opacity:1;transform:translateX(calc(var(--cx,.5) * -100%));filter:blur(0)}
.lp-solo img.off{opacity:0;transform:translateX(calc(var(--cx,.5) * -100% - 8%));filter:blur(5px)}
.hero-content{position:static;z-index:2;flex:0 0 auto;margin-top:clamp(70px,9vh,110px)}
.hero-badge{background:rgba(255,255,255,.75);border-color:color-mix(in srgb,var(--rose) 35%,transparent);color:var(--rose);backdrop-filter:blur(4px)}
.hero h1{font-size:clamp(28px,7vw,46px);text-shadow:0 0 8px #fff,0 0 18px #fff,0 0 30px rgba(255,255,255,.9)}
.hero .sub{color:var(--ink);text-shadow:0 0 6px #fff,0 0 14px #fff}
/* 登録ボタンはカレに被らないよう下に（色はそのまま） */
.hero .cta-btn{position:absolute;left:50%;bottom:clamp(64px,10vh,96px);transform:translateX(-50%);margin:0;white-space:nowrap;z-index:3}
@keyframes pulseX{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}
.hero .cta-btn{animation:pulseX 2s ease-in-out infinite}
.lp-plate{position:absolute;left:16px;bottom:clamp(136px,19vh,180px);z-index:3;background:rgba(255,255,255,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:8px 14px 6px;border-left:3px solid var(--rose);text-align:left;transition:opacity .25s,transform .25s}
.lp-plate.swap{opacity:0;transform:translateY(6px)}
.lp-plate b{display:block;font-family:var(--serif);font-size:11px;color:var(--rose);letter-spacing:.06em}
.lp-plate span{font-family:var(--serif);font-weight:800;font-size:18px;letter-spacing:.14em;color:var(--ink)}

/* ===== 推しカレ：顔アイコン（今の立ち絵） ===== */
.chara-icon{border-color:#fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--rose) 45%,transparent),0 8px 18px rgba(0,0,0,.1)}
.chara-icon img{object-position:center}
.chara-card{background:#fff;border:1px solid var(--line)}
.chara-type{font-family:var(--serif);font-weight:700;color:var(--rose)}

/* ===== 各段の色合い ===== */
.about,.characters,.steps{background:#fff}
.final-cta{background:linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--rose2) 20%,#fff) 100%)}
.feature-card,.stat-item,.review-card{border:1px solid var(--line);box-shadow:0 10px 26px rgba(0,0,0,.05)}
.stat-item .num{font-family:var(--serif);color:var(--rose)}
.step-icon{background:linear-gradient(135deg,var(--rose2),var(--rose));color:#fff}
.chat-msg.him .chat-avatar{background:linear-gradient(135deg,var(--rose),var(--rose2))}
.fixed-cta{background:color-mix(in srgb,var(--bg) 92%,transparent)}
footer a{color:var(--rose)}

/* ===== アイコン：絵文字 → 線画 SVG（10/4） ===== */
.ico{display:inline-block;vertical-align:-.2em;flex-shrink:0}
.section-label{display:inline-flex;align-items:center;gap:10px}
.section-label::before,.section-label::after{content:"";width:22px;height:1px;background:currentColor;opacity:.55}
.feature-icon{width:76px;height:76px;margin:0 auto 14px;border-radius:50%;font-size:0;color:var(--rose);
  background:color-mix(in srgb,var(--rose2) 14%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rose) 28%,transparent)}
.step-icon{color:#fff;font-size:0;box-shadow:0 6px 16px color-mix(in srgb,var(--rose) 30%,transparent)}
.step-arrow{color:var(--rose2);font-size:0;line-height:0}
.chat-msg.you .chat-avatar{color:#fff}
.chat-header .ico{color:var(--rose);vertical-align:-.15em}
.ticket-shake .ico{color:var(--rose);margin-right:2px}
.regist-badge .ico{vertical-align:-.15em;margin-right:3px}
.chara-card::after,.review-stars::before{content:none!important}

/* ===== ファーストビューのスクロール矢印（公式サイトと同じ形・右下で点滅） ===== */
.lp-scroll{position:absolute;right:clamp(10px,3vw,40px);bottom:clamp(10px,2vh,20px);z-index:4;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:6px;color:var(--hint-t,var(--rose));cursor:pointer;transition:opacity .4s}
.lp-scroll span{font:600 10px var(--mont);letter-spacing:.3em;writing-mode:vertical-rl;text-shadow:0 0 6px #fff,0 0 12px #fff;animation:lpBlink 1.4s ease-in-out infinite}
.lp-scroll i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,var(--hint-a,var(--rose2)),var(--hint-b,var(--rose)));color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--rose) 40%,transparent);animation:lpBounce 1.4s ease-in-out infinite}
.lp-scroll.gone{opacity:0;pointer-events:none}
@keyframes lpBlink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes lpBounce{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(7px);opacity:.45}}
@media (max-width:600px){.lp-scroll{right:4px;bottom:6px;gap:4px;padding:4px}.lp-scroll span{font-size:9px;letter-spacing:.24em}.lp-scroll i{width:26px;height:26px}}
@media (prefers-reduced-motion:reduce){.lp-scroll span,.lp-scroll i{animation:none}}