/* =========================================================
   卒業プレゼントキャンペーン LP
   色・フォントは :root の変数で管理（CLAUDE.md 参照）
   ========================================================= */
:root{
  --navy:#1D3F8F;
  --pink:#E4007F;
  --pink-dark:#C2006B;
  --pink-pale:#FFE9F3;
  --yellow:#FFE14D;
  --yellow-pale:#FFF4AE;
  --cyan:#5FD3EC;
  --cyan-pale:#E6F8FC;
  --lime:#B5E061;
  --orange:#FFB238;
  --white:#FFFFFF;
  --bg:#FFF7FB;
  --sub:#4a5a80;
  --font-body:'Noto Sans JP',sans-serif;
  --font-pop:'M PLUS Rounded 1c',sans-serif;
  --header-h:68px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--navy);font-family:var(--font-body);line-height:1.7}
img{max-width:100%;height:auto}
h1,h2,h3,p{margin:0}
a{color:var(--navy)}
a:hover{color:#122a63}
section[id]{scroll-margin-top:var(--header-h)}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.wrap--narrow{max-width:820px}

/* ---------- 柄 ---------- */
.pt-ydot{background-color:var(--yellow-pale);background-image:radial-gradient(var(--yellow) 3px,transparent 3.5px);background-size:24px 24px}
.pt-grid{background-color:var(--bg);background-image:linear-gradient(rgba(228,0,127,.09) 2px,transparent 2px),linear-gradient(90deg,rgba(228,0,127,.09) 2px,transparent 2px);background-size:28px 28px}
.pt-pdot{background-color:var(--white);background-image:radial-gradient(rgba(228,0,127,.13) 2.5px,transparent 3px),radial-gradient(rgba(95,211,236,.22) 2.5px,transparent 3px);background-size:32px 32px;background-position:0 0,16px 16px}
.pt-stripe{background-color:var(--cyan-pale);background-image:repeating-linear-gradient(-45deg,rgba(95,211,236,.28) 0 12px,transparent 12px 24px)}
.dots-w{background-image:radial-gradient(rgba(255,255,255,.2) 2px,transparent 2.3px);background-size:16px 16px}

/* ---------- 共通パーツ ---------- */
.card{background:var(--white);border:3px solid var(--navy);box-shadow:6px 6px 0 var(--navy);border-radius:20px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 32px;border-radius:999px;border:3px solid var(--navy);font-weight:900;font-size:1.1rem;text-decoration:none;box-shadow:0 5px 0 var(--navy);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--navy)}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--navy)}
.btn--sm{min-height:44px;padding:0 22px;font-size:1rem;box-shadow:0 4px 0 var(--navy)}
.btn--pink{background:var(--pink);color:var(--white)}
.btn--pink:hover{color:var(--white)}
.btn--yellow{background:var(--yellow);color:var(--navy)}
.btn--white{background:var(--white);color:var(--navy)}

.pop{display:block;white-space:nowrap;-webkit-text-stroke:.14em var(--navy);paint-order:stroke fill;filter:drop-shadow(5px 5px 0 var(--navy))}
.pop>span{display:inline-block}
.c-w{color:var(--white)}.c-p{color:var(--pink)}.c-c{color:var(--cyan)}.c-g{color:var(--lime)}.c-o{color:var(--orange)}
.r1{transform:rotate(-6deg)}.r2{transform:translateY(.08em) rotate(4deg)}.r3{transform:rotate(-3deg)}.r4{transform:translateY(.1em)}.r5{transform:rotate(5deg)}
.r6{transform:rotate(-5deg)}.r7{transform:translateY(-.06em) rotate(3deg)}.r8{transform:rotate(-4deg)}.r9{transform:rotate(10deg)}

.burst{clip-path:polygon(50% 0%,58% 9.8%,69.1% 3.8%,72.8% 15.9%,85.4% 14.6%,84.1% 27.2%,96.2% 30.9%,90.2% 42%,100% 50%,90.2% 58%,96.2% 69.1%,84.1% 72.8%,85.4% 85.4%,72.8% 84.1%,69.1% 96.2%,58% 90.2%,50% 100%,42% 90.2%,30.9% 96.2%,27.2% 84.1%,14.6% 85.4%,15.9% 72.8%,3.8% 69.1%,9.8% 58%,0% 50%,9.8% 42%,3.8% 30.9%,15.9% 27.2%,14.6% 14.6%,27.2% 15.9%,30.9% 3.8%,42% 9.8%)}

.deco{position:absolute;transform:rotate(var(--r,0deg));pointer-events:none}

/* ---------- ヘッダー ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--white);transition:box-shadow .2s}
.site-header.is-scrolled{box-shadow:0 3px 0 var(--navy)}
.site-header__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;min-height:var(--header-h);padding-top:10px;padding-bottom:10px}
.site-header__logo{font-weight:700;font-size:18px;text-decoration:none} /* 本体サイトの .ttl_campany と同じ文字ロゴ */
.site-header__logo img{display:block;height:36px;width:auto}

/* ---------- FV ---------- */
.hero{position:relative;overflow:hidden;background-color:var(--yellow);background-image:radial-gradient(rgba(228,0,127,.16) 2px,transparent 2.3px);background-size:16px 16px}
.hero__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:32px;padding-top:56px;padding-bottom:96px}
.hero__text{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.ribbon{font-size:clamp(.78rem,3.6vw,1rem);white-space:nowrap;transform:rotate(-3deg);background:var(--pink);color:var(--white);font-weight:900;padding:6px 16px;border-radius:4px;box-shadow:4px 4px 0 var(--navy)}
.hero__title{width:100%;text-align:center;font-family:var(--font-pop);font-weight:900;line-height:1.15;letter-spacing:.02em}
.pop--l1{font-size:clamp(2rem,11vw,4.6rem)}
.pop--l2{font-size:clamp(2.3rem,12.5vw,5.8rem)}
.hero__lead{font-weight:700;font-size:1.15rem}
.period{border-radius:12px;padding:10px 18px;line-height:1.5}
.period__label{font-size:.85rem;font-weight:700;color:var(--pink-dark)}
.period__date{font-size:1.3rem;font-weight:900}
.period__date time{display:inline-block}
.hero__visual{position:relative;flex:0 1 400px;width:400px;max-width:100%;aspect-ratio:2/3}
.hero__plush{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;transform:translateX(-50%) rotate(6deg);transform-origin:50% 8%}
.hero__badge{position:absolute;top:12%;left:0;width:141px;height:141px;background:var(--navy);transform:rotate(-8deg)}
.burst__in{position:absolute;inset:5px;background:var(--pink);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--white);font-weight:900;font-size:17px;line-height:1.3;white-space:nowrap}
.burst__in span{color:var(--yellow);font-size:21px}

/* ---------- セクション共通 ---------- */
.sec{padding:64px 0}
.sec-en{text-align:center;font-weight:900;font-size:.85rem;letter-spacing:.2em;color:var(--pink-dark);margin-bottom:4px}
.sec-title{font-family:var(--font-pop);font-weight:900;font-size:clamp(1.6rem,3.4vw,2.4rem);text-align:center;margin-bottom:8px;line-height:1.4;word-break:auto-phrase}
.sec-en--left,.sec-title--left{text-align:left}
.sec-lead{text-align:center;word-break:auto-phrase}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:28px}

/* メリット */
.merit{padding:24px;display:flex;flex-direction:column;gap:8px}
.merit__num{font-family:var(--font-pop);font-weight:900;font-size:2.4rem;line-height:1}
.merit h3,.school h3{font-size:1.3rem}
.merit p:not(.merit__num),.school p{font-size:.95rem}

/* 概要 */
.spec{margin:28px 0 0;overflow:hidden}
.spec__row{display:flex;flex-wrap:wrap}
.spec dt{flex:1 1 160px;background:var(--pink-pale);padding:16px 20px;font-weight:900}
.spec dd{flex:999 1 300px;margin:0;padding:16px 20px}

/* プレゼント */
.present{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:40px}
.present__visual{flex:0 1 320px;display:flex;justify-content:center;padding-top:170px}
.sec--traffic{padding-bottom:56px}
.present{position:relative;z-index:1}
.present__stage{position:relative;width:300px;max-width:100%;height:280px;margin-bottom:-50px}
.present__stage img{position:absolute;left:50%;bottom:12px;height:160%;width:auto;max-width:none;transform:translateX(-50%) rotate(3deg);transform-origin:50% 8%}
.present__text{flex:1 1 420px;min-width:0}
.present__text>p:last-child{margin-top:12px}

/* 教習所 */
.school{background:var(--sbg,var(--white));padding:24px;display:flex;flex-direction:column;gap:10px;transform:rotate(var(--tilt,0deg));transition:transform .2s}
.school:hover{transform:rotate(0deg) translateY(-4px)}
.tag{align-self:flex-start;background:var(--white);font-weight:900;font-size:.85rem;padding:2px 12px;border-radius:999px}
.school__link{margin-top:auto;font-weight:700}

/* 流れ */
.flow{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.flow li{background:var(--bg);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:8px}
.flow li strong{font-size:1.1rem}
.flow li span:last-child{font-size:.95rem}
.flow__num{width:44px;height:44px;border-radius:50%;background:var(--pink);color:var(--white);font-weight:900;font-size:1.3rem;display:flex;align-items:center;justify-content:center}
.flow .flow__goal{background:var(--yellow)}
.flow__goal .flow__num{background:var(--navy);color:var(--yellow)}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.faq__item{background:var(--white);border:3px solid var(--navy);border-radius:14px;padding:16px 20px}
.faq__item summary{cursor:pointer;font-weight:900;list-style:none;position:relative;padding-right:28px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"";position:absolute;right:4px;top:.45em;width:10px;height:10px;border-right:3px solid var(--pink);border-bottom:3px solid var(--pink);transform:rotate(45deg);transition:transform .25s}
.faq__item[open] summary::after{transform:translateY(4px) rotate(-135deg)}
.faq__a{overflow:hidden}
.faq__a p{padding-top:10px}
.notes{margin-top:32px;font-size:.85rem;color:var(--sub)}
.notes>p{font-weight:700;margin-bottom:4px}
.notes ul{margin:0;padding-left:1.2em}

/* CTA */
.cta{background-color:var(--pink);padding:56px 0}
.cta__inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.cta__title{font-family:var(--font-pop);font-weight:900;color:var(--white);font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.4}
.cta__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.cta__info{color:var(--white);font-size:.9rem}

/* スマホ */
@media (max-width:600px){
  .hero__inner{padding-top:40px;padding-bottom:40px;gap:16px}
  .hero__visual{width:280px}
  .hero__badge{width:120px;height:120px}
  .burst__in{font-size:15px}.burst__in span{font-size:18px}
  .sec{padding:48px 0}
  .present__visual{padding-top:150px}
  .present__stage{margin-bottom:0}
  .car:nth-child(even){display:none}
}

/* ---------- 道路と車 ---------- */
/* 道路：グレーのアスファルト＋白線（上下の実線・中央の破線） */
.asphalt{background-color:#5B6068;border-top:3px solid var(--navy);border-bottom:3px solid var(--navy);background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),repeating-linear-gradient(90deg,#fff 0 36px,transparent 36px 72px);background-size:100% 4px,100% 4px,100% 4px;background-position:0 7px,0 calc(100% - 7px),0 50%;background-repeat:no-repeat}
.road{position:absolute;left:0;right:0;bottom:0;height:84px;overflow:hidden;pointer-events:none}
.traffic{position:relative;height:88px;overflow:hidden;margin-top:24px}
/* 車：左→右にまっすぐ走る。--dl（マイナス値）で開始位置をずらす */
.car{position:absolute;top:50%;left:-120px;width:100px;height:auto;max-width:none;margin-top:-30px;animation:drive var(--d,12s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes drive{from{left:-120px}to{left:100%}}

/* トップへ戻る */
.to-top{position:fixed;right:16px;bottom:16px;z-index:40;width:48px;height:48px;border-radius:50%;background:var(--pink);color:var(--white);border:3px solid var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 var(--navy);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility .25s}
.to-top.is-show{opacity:1;visibility:visible;transform:none}
.to-top:hover{color:var(--white)}

/* =========================================================
   動き
   ========================================================= */
/* スクロールで出現（JSが有効なときだけ隠す） */
.js .js-in{opacity:0;translate:0 24px;transition:opacity .6s ease,translate .6s cubic-bezier(.2,.8,.3,1.2)}
.js .js-in.is-in{opacity:1;translate:0 0}

/* シール：ぴょこぴょこ */
.bounce{animation:bounce 2.4s ease-in-out infinite}
@keyframes bounce{
  0%,70%,100%{transform:rotate(-8deg) scale(1)}
  78%{transform:rotate(-12deg) scale(1.08)}
  86%{transform:rotate(-5deg) scale(.97)}
}
/* ぬいぐるみ（FV・プレゼント）：ストラップを支点にゆらゆら */
.sway{animation:sway 3.6s ease-in-out infinite}
@keyframes sway{
  0%,100%{transform:translateX(-50%) rotate(6deg)}
  50%{transform:translateX(-50%) rotate(-3deg)}
}
/* 飾り：チカチカ */
.twinkle{animation:twinkle 2.2s ease-in-out infinite}
@keyframes twinkle{
  0%,100%{transform:rotate(var(--r,0deg)) scale(1);opacity:1}
  50%{transform:rotate(calc(var(--r,0deg) + 20deg)) scale(.75);opacity:.6}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .js-in{opacity:1;translate:none}
  .car:nth-child(1){left:6%}.car:nth-child(2){left:30%}.car:nth-child(3){left:54%}.car:nth-child(4){left:78%}.car:nth-child(5){display:none}
}