/* 知夏さん 誕生日特設サイト：見た目（担当A）
   HWGの型：ローズ・ピンク・ピーチ／Abril Fatface／丸ゴシック／チェキ／波／小物 */

:root{
  --rose:#D93E54;
  --rose-deep:#B92F45;
  --pink:#FB9AAA;
  --pink-soft:#F3B6BF;
  --peach:#FEE4C3;
  --peach2:#FFDDC6;
  --tape-orange:#F7C59B;
  --ground:#FBEEEE;
  --ink:#5A3A36;
  --ink-soft:#8A6862;
  --paper:#FFFDF9;
  --u:min(1vw,5.2px);            /* 画面幅に合わせて伸び縮みする単位（上限は幅520px相当） */
  --maru:"Zen Maru Gothic","M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --hand:"Kiwi Maru","Zen Maru Gothic",serif;
  --abril:"Abril Fatface",Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--maru);font-weight:500;font-size:16px;line-height:2;
  word-break:keep-all;overflow-wrap:anywhere;line-break:strict;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important}
h1,h2,h3,p,figure,dl,dd{margin:0}
h1,h2,h3{text-wrap:balance}
img{display:block;max-width:100%}
.defs{position:absolute;width:0;height:0}

.wrap{
  max-width:520px;margin:0 auto;background:#fff;overflow:hidden;position:relative;
  min-height:100vh;min-height:100svh;
  box-shadow:0 0 40px rgba(217,62,84,.08);
}

/* 画面の切り替え（担当Bが body の data-view と hidden を付け外しする） */
body[data-view="done"] #top,
body[data-view="done"] #menu{display:none}
body[data-view="top"] #done{display:none}

/* 小物 */
.deco{width:32px;height:32px;display:inline-block;vertical-align:middle;overflow:visible;pointer-events:none;flex:none}

/* 波の帯 */
.wave{position:absolute;left:0;bottom:-1px;width:100%;height:40px;display:block}
.wave--top{top:-1px;bottom:auto}

/* ================= 題字 ================= */
.hero{
  position:relative;text-align:center;
  padding:calc(13 * var(--u)) 0 86px;
  background:linear-gradient(#FFF7F1 0%,#FFEDE2 70%,#FFE4D6 100%);
}
.hero__wash{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.title{position:relative;font-weight:400}
.title__en{
  display:block;font-family:var(--abril);color:var(--rose);
  font-size:calc(21 * var(--u));line-height:.9;letter-spacing:-.005em;
  rotate:-4deg;
}
.title__en span{display:block;white-space:nowrap}
.title__en span:first-child{margin-right:1.35em}
.title__en span:last-child{margin-left:.12em}
.title__name{
  display:block;font-family:var(--maru);font-weight:900;color:var(--ink);
  font-size:calc(24 * var(--u));line-height:1.15;letter-spacing:.16em;padding-left:.16em;
  margin-top:calc(5 * var(--u));
}
.badge{
  position:relative;width:calc(19 * var(--u));height:calc(19 * var(--u));border-radius:50%;
  margin:calc(-25 * var(--u)) 6% calc(6 * var(--u)) auto;
  background:#fff;color:var(--rose);display:flex;align-items:center;justify-content:center;
  rotate:10deg;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--pink-soft),0 4px 10px rgba(217,62,84,.16);
}
.badge b{font-family:var(--abril);font-weight:400;font-size:calc(10.5 * var(--u));line-height:1;padding-bottom:.04em}
.hero__date{
  position:relative;display:flex;justify-content:center;align-items:center;gap:12px;
  margin-top:calc(2 * var(--u));line-height:1.2;
  font-family:var(--abril);color:var(--rose);font-size:26px;letter-spacing:.06em;
}
.hero__date i{display:block;width:44px;border-top:2px dotted #E58C9B}
.hero__pill{position:relative;margin-top:12px;line-height:1.4}
.hero__pill span{
  display:inline-block;background:#fff;border:1.5px solid #EDA3AF;border-radius:999px;
  padding:5px 20px 6px;color:var(--rose);font-weight:900;font-size:16px;letter-spacing:.08em;
}

.hero .deco{position:absolute}
.hero__d1{left:5%;top:14px;width:58px;height:58px;rotate:-10deg}
.hero__d2{right:27%;top:20px;width:22px;height:22px}
.hero__d3{right:6%;top:22px;width:46px;height:46px;rotate:12deg}
.hero__d4{left:6%;top:calc(52 * var(--u));width:20px;height:20px}
.hero__d5{left:5%;bottom:58px;width:54px;height:54px;rotate:-8deg}
.hero__d6{right:8%;bottom:70px;width:30px;height:30px;rotate:14deg}

/* 紙ふぶき（開いたときに一度だけ舞う） */
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti i{
  position:absolute;top:-16px;left:var(--x);width:8px;height:13px;border-radius:2px;
  background:var(--c);opacity:0;
  animation:fall var(--t) var(--d) cubic-bezier(.3,.2,.6,1) 1 both;
}
.confetti i.dot{width:9px;height:9px;border-radius:50%}
@keyframes fall{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}
  8%{opacity:.95}
  50%{transform:translate3d(14px,260px,0) rotate(calc(var(--r) * 4))}
  82%{opacity:.9}
  100%{opacity:0;transform:translate3d(-8px,540px,0) rotate(calc(var(--r) * 8))}
}

/* ================= お祝い・御礼 ================= */
.letter{padding:22px 24px 6px;text-align:center}
.letter p{margin-bottom:.5em}
.letter__lead{font-size:19px;font-weight:700;line-height:1.8}
.letter--thanks{padding-top:34px}
.hd{
  font-weight:900;color:var(--rose);font-size:23px;line-height:1.5;letter-spacing:.06em;
  margin-bottom:12px;
}
.hd .deco{width:26px;height:26px;margin:-4px 6px 0 0}
.hd--big{font-size:27px;letter-spacing:.04em}

/* ================= チェキ ================= */
.album{position:relative;padding:34px 20px 8px}
.album .deco{position:absolute}
.album__d1{right:12px;top:4px;width:30px;height:30px;rotate:18deg}
.album__d2{left:10px;bottom:38%;width:34px;height:34px;rotate:-24deg;opacity:.9}
.album__d3{right:14px;bottom:6px;width:24px;height:24px;rotate:-14deg}

.cheki{
  position:relative;background:#fff;padding:10px 10px 0;
  box-shadow:0 3px 9px rgba(120,60,50,.26),0 0 1px rgba(120,60,50,.4);
  animation:pop .9s .25s ease-out both;
}
.cheki__im{overflow:hidden;background:#F8E6E0;aspect-ratio:1/1}
.cheki__im img{width:100%;height:100%;object-fit:cover;object-position:center}
.cheki figcaption{
  font-family:var(--hand);font-weight:500;color:#6A4A47;text-align:center;
  font-size:13.5px;line-height:1.35;padding:8px 0 10px;
}
.cheki__name{
  display:block;margin-top:3px;font-family:var(--maru);font-weight:700;font-size:11.5px;
  color:var(--rose);letter-spacing:.12em;
}
.tape{
  position:absolute;z-index:2;left:50%;top:-10px;width:58px;height:19px;margin-left:-29px;
  background:var(--pink);opacity:.86;rotate:-4deg;
}

/* 主役の1枚 */
.cheki--main{rotate:-1.6deg;padding:12px 12px 0;z-index:1}
.cheki--main .cheki__im{aspect-ratio:630/561}
.cheki--main figcaption{font-size:19px;text-align:left;padding:11px 6px 14px}
.cheki--main .tape{width:92px;height:23px;margin:0}
.cheki--main .tape--l{left:-30px;top:6px;rotate:-38deg}
.cheki--main .tape--r{left:auto;right:-30px;top:6px;rotate:40deg;background:var(--tape-orange)}

/* 小さい3枚（1枚1ブロックの繰り返し。傾きとずらしは順番で決まる） */
.album__small{
  position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;
  margin-top:14px;
}
.album__small .cheki{width:47%;padding:7px 7px 0}
.album__small .cheki:nth-child(3n+1){rotate:3deg;margin-right:2%}
.album__small .cheki:nth-child(3n+2){rotate:-2.5deg;margin-top:40px}
.album__small .cheki:nth-child(3n+2) .tape{background:var(--tape-orange);rotate:5deg}
.album__small .cheki:nth-child(3n){rotate:1.8deg;margin-top:-16px}
.album__small .cheki:nth-child(3n) .tape{background:#F3B8C4;rotate:-6deg}

@keyframes pop{
  from{opacity:0;translate:0 26px;scale:.95}
  to{opacity:1;translate:0 0;scale:1}
}
/* 画面に入ってきたときにふわっと出す（対応ブラウザのみ） */
@supports (animation-timeline:view()){
  .cheki{
    animation:pop linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 55%;
  }
}

/* ================= 署名 ================= */
.sign{padding:30px 24px 66px;text-align:center;line-height:1.7}
.sign__dogs{display:flex;justify-content:center;gap:6px;margin-bottom:6px}
.sign__dogs .deco{width:44px;height:44px}
.sign__dogs .deco:nth-child(2){margin-top:-8px}
.sign__txt{font-family:var(--hand);font-size:17px;color:var(--ink)}

/* ================= 入力欄（注文票の見立て） ================= */
#menu{
  position:relative;padding:58px 0 84px;
  background:linear-gradient(#FFEFE4 0%,#FFE6D8 55%,#FDE3E0 100%);
}
.menu__head{text-align:center;padding:0 24px}
.menu__head p{line-height:1.9}
.menu__hat{width:60px;height:60px;display:block;margin:0 auto 4px;rotate:-6deg}

.slip{
  position:relative;display:block;margin:38px 16px 0;padding:36px 20px 30px;
  background:var(--paper);border-radius:3px 3px 0 0;
  filter:drop-shadow(0 3px 7px rgba(120,60,50,.2));
}
/* 下の端は伝票のような波形の切り口 */
.slip::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:9px;
  background:radial-gradient(circle at 8px 0,var(--paper) 7.4px,transparent 8px) 0 0/16px 9px repeat-x;
}
.slip__tape{width:96px;height:24px;margin-left:-48px;top:-12px;rotate:-2.5deg}
.slip__pot{position:absolute;right:8px;top:-22px;width:50px;height:50px;rotate:9deg}
.slip__title{
  font-weight:900;font-size:21px;line-height:1.5;letter-spacing:.06em;text-align:center;color:var(--ink);
  padding-bottom:13px;border-bottom:4px double var(--pink-soft);
}
.slip__title .deco{width:28px;height:28px;margin:-4px 6px 0 0}

.field{margin-top:22px}
.field label{display:block;font-weight:700;font-size:15px;line-height:1.5;color:var(--ink)}
.field label .deco{width:24px;height:24px;margin:-4px 4px 0 -2px}
.field--main label{font-weight:900;font-size:17px;color:var(--rose)}
.must{
  display:inline-block;margin-left:8px;padding:0 9px 1px;border:1.5px solid #EDA3AF;border-radius:999px;
  font-size:11.5px;font-weight:700;color:var(--rose);vertical-align:2px;letter-spacing:.1em;
}
.field input,.field textarea{
  display:block;width:100%;margin:0;padding:6px 2px 0;border:0;border-radius:0;outline:0;
  -webkit-appearance:none;appearance:none;resize:none;
  font-family:var(--hand);font-weight:500;font-size:18px;line-height:38px;color:var(--ink);
  /* 罫線：点線を1行ごとに引く（紙に書き込む見立て） */
  background-color:transparent;
  background-image:radial-gradient(circle,#E4909E 1.1px,transparent 1.5px);
  background-size:7px 38px;background-position:0 23px;background-attachment:local;
}
.field input{height:44px}
.field--main input{font-size:21px}
.field input::placeholder,.field textarea::placeholder{color:#CDB1AC;opacity:1}
.field input:focus,.field textarea:focus{background-color:rgba(254,228,195,.4)}
.field input:focus-visible,.field textarea:focus-visible{box-shadow:0 2px 0 var(--rose)}

.slip__error{
  margin-top:18px;padding:8px 12px;border-radius:8px;background:#FFF0F1;
  color:var(--rose-deep);font-size:14.5px;font-weight:700;line-height:1.6;
}

.btn{
  display:block;width:100%;min-height:58px;margin:28px 0 0;padding:6px 20px 8px;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--rose);color:#fff;
  font-family:var(--maru);font-weight:900;font-size:19px;line-height:1.3;letter-spacing:.1em;
  box-shadow:0 4px 0 var(--rose-deep),0 10px 18px rgba(217,62,84,.24);
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s,box-shadow .12s;
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--rose-deep),0 4px 8px rgba(217,62,84,.2)}
.btn:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.btn:disabled,#menuSubmit:disabled{opacity:.55;cursor:default;transform:none;box-shadow:0 4px 0 var(--rose-deep)}
.btn--sub{
  width:auto;min-height:50px;margin:44px auto 0;padding:4px 32px 6px;
  background:#fff;color:var(--rose);border:2px solid var(--pink);
  font-size:16px;font-weight:700;box-shadow:none;
}
.btn--sub:active{box-shadow:none}

/* ================= できあがり画面 ================= */
.done__head{
  position:relative;text-align:center;padding:56px 0 78px;
  background:linear-gradient(#FFF7F1 0%,#FFEDE2 70%,#FFE4D6 100%);
}
.done__head .deco{position:absolute}
.done__head .done__hat{position:relative;display:block;width:76px;height:76px;margin:0 auto 6px;rotate:-6deg}
.done__d1{left:12%;top:36px;width:24px;height:24px}
.done__d2{right:9%;top:44px;width:44px;height:44px;rotate:10deg}
.done__title{
  position:relative;font-weight:900;color:var(--rose);font-size:calc(9.2 * var(--u));
  line-height:1.35;letter-spacing:.06em;outline:0;padding:0 16px;
}
.letter--done{position:relative;padding-top:14px}

.done__body{padding:26px 0 80px;text-align:center}
.cheki--tall{width:88%;margin:0 auto;rotate:2.4deg;padding:11px 11px 0}
.cheki--tall .cheki__im{aspect-ratio:654/441}
.cheki--tall figcaption{font-size:17px;padding:10px 0 13px}
.cheki--tall .tape{left:-26px;top:10px;width:84px;height:22px;margin:0;rotate:-36deg}

.slip--done{margin-top:54px;text-align:left}
.order__row{padding:13px 2px 12px;border-bottom:2px dotted #EBA9B3}
.order dt{font-weight:700;font-size:13.5px;line-height:1.5;color:var(--rose);letter-spacing:.04em}
.order dd{
  font-family:var(--hand);font-size:18px;line-height:1.7;color:var(--ink);
  white-space:pre-wrap;margin-top:2px;
}
#doneOthers,#doneNote{white-space:pre-wrap}
.order__row--main dd{font-size:25px;line-height:1.5}
.slip__chef{margin-top:20px;text-align:right;font-family:var(--hand);font-size:16px;line-height:1.5}

/* ================= 幅の広い画面 ================= */
@media (min-width:521px){
  .letter{padding-left:40px;padding-right:40px}
  .album{padding-left:40px;padding-right:40px}
  .slip{margin-left:36px;margin-right:36px;padding-left:32px;padding-right:32px}
}

/* ================= 動きを減らす設定 ================= */
@media (prefers-reduced-motion:reduce){
  .confetti{display:none}
  .cheki{animation:none !important}
  .btn{transition:none}
}

/* ===== 写真をちりばめる（2枚組・1枚もの） ===== */
.cheki.r43 .cheki__im{aspect-ratio:4/3}
.cheki.r34 .cheki__im{aspect-ratio:3/4}
.album__small--tall .cheki .cheki__im{aspect-ratio:3/4}
.album--first{padding-bottom:6px}
.duo{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:3%;padding:22px 14px 30px}
.duo .cheki{padding:7px 7px 0}
.duo .cheki:nth-child(1){width:52%;rotate:-3.2deg}
.duo .cheki:nth-child(2){width:46%;rotate:2.6deg;margin-top:46px;margin-left:-5%}
.duo .cheki:nth-child(2) .tape{background:var(--tape-orange);rotate:6deg}
.duo--b .cheki:nth-child(1){width:44%;rotate:2.4deg}
.duo--b .cheki:nth-child(2){width:50%;rotate:-3deg;margin-top:58px}
.cheki--mada{width:54%;margin:6px auto 30px;rotate:-2.6deg;padding:9px 9px 0;z-index:1}
.cheki--mada figcaption{font-size:16px}
.album__small--tall .cheki:nth-child(3n){margin-top:18px}
.album__small{align-items:flex-start}
.field--main textarea{font-size:20px}
#doneMain{white-space:pre-wrap}
.order__row--main dd{font-size:22px}
.cheki--solo{width:62%;margin:26px auto 8px;rotate:2.2deg;padding:9px 9px 0;z-index:1}
.cheki--solo figcaption{font-size:16px}
.cheki--solo .tape{background:#F3B8C4}
.done__btns{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:40px}
.done__btns .btn{margin:0}

/* ===== 動き ===== */
/* 題字の下で、3匹の顔がふわふわ浮かぶ */
.faces{position:relative;display:flex;justify-content:center;gap:18px;margin-top:26px}
.face{width:84px;animation:bob 3.6s ease-in-out infinite alternate}
.face:nth-child(2){margin-top:16px;animation-duration:4.3s;animation-delay:-1.2s}
.face:nth-child(3){animation-duration:3.9s;animation-delay:-2.4s}
.face img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:4px solid #fff;
  box-shadow:0 0 0 2px var(--pink),0 5px 10px rgba(120,60,50,.22)}
.face figcaption{margin-top:7px;font-size:12px;font-weight:700;color:var(--rose);letter-spacing:.1em;line-height:1.2}
@keyframes bob{from{transform:translateY(-7px) rotate(-4deg)}to{transform:translateY(7px) rotate(4deg)}}
/* 紙ふぶきは降りつづける */
.confetti i{animation-iteration-count:infinite}
/* チェキ：画面に入るとふわっと出て、テープを支点にゆらゆら揺れる（motion.js が .js と .in を付ける） */
.js .cheki{
  opacity:0;translate:0 34px;scale:.93;
  transition:opacity .8s ease-out,translate .8s cubic-bezier(.2,.9,.3,1.2),scale .8s cubic-bezier(.2,.9,.3,1.2);
  animation:sway var(--sd,5s) var(--sdl,0s) ease-in-out infinite alternate;animation-timeline:auto;
  transform-origin:50% 0;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.js .cheki.in{opacity:1;translate:0 0;scale:1}
.js .cheki.boing{animation:boing .6s ease-out;animation-timeline:auto}
@keyframes sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
@keyframes boing{0%{transform:scale(1)}30%{transform:scale(1.07) rotate(-3deg)}60%{transform:scale(.98) rotate(2deg)}100%{transform:scale(1)}}
/* 写真を押すとハートが飛ぶ */
.pop-heart{position:fixed;z-index:50;width:22px;height:22px;pointer-events:none;opacity:0;
  animation:heartup 1.1s ease-out forwards}
@keyframes heartup{
  0%{opacity:0;transform:translate(0,0) scale(.4)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),-110px) scale(1.25) rotate(var(--dr))}
}
/* 肉球の足あとが、とことこ歩く */
.pawwalk{display:flex;justify-content:center;gap:16px;padding:8px 0 26px}
.pawwalk .deco{width:22px;height:22px;opacity:0;scale:.5;rotate:18deg;
  transition:opacity .35s ease-out,scale .35s cubic-bezier(.2,.9,.3,1.5);transition-delay:calc(var(--i) * .22s)}
.pawwalk .deco:nth-child(2n){translate:0 12px;rotate:-12deg}
.pawwalk.in .deco{opacity:.85;scale:1}
/* 送信後の画面に降る紙ふぶき */
.burst{position:fixed;z-index:40;top:-20px;width:9px;height:14px;border-radius:2px;pointer-events:none;
  animation:burstfall var(--t) var(--d) cubic-bezier(.3,.2,.6,1) forwards;opacity:0}
@keyframes burstfall{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}
  8%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--dx),92vh,0) rotate(var(--r))}
}
@media (prefers-reduced-motion:reduce){
  .face{animation:none !important}
  .pawwalk .deco{opacity:.85;scale:1;transition:none}
}