/* ===== base ===== */
:root{
  --content-w: 335px; /* 375px基準デザインを89.33%(335/375)に縮小した新しい基準幅 */
  --scale: 0.893333; /* 335/375。以下のpx値は元のデザイン値 * var(--scale) で統一縮小 */
  --beige: #ece0d1;
  --beige-light: #f4ebe3;
  --hero-scale: .85; /* ファーストビュー(タイトルロゴ+hero-stage)のみ追加で85%に縮小 */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(66px * var(--scale)); }
body{
  margin:0;
  background:#ffffff;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
}

img{ display:block; max-width:100%; height:auto; }

/* 視覚的には非表示だが、検索エンジン・スクリーンリーダーには読める見出し用(SEO対策) */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Center content column; PC beyond content width gets white background(2026-08-13: beige→whiteに変更) */
body{ background:#ffffff; }
main, footer.footer{
  width:100%;
  max-width:var(--content-w);
  margin:0 auto;
  background:#ffffff;
  overflow:hidden;
}
main{ padding-top:calc(66px * var(--scale)); }

/* ===== nav (fixed header) ===== */
.nav-wrap{
  position:fixed;
  top:0; left:0; right:0;
  width:100%;
  max-width:var(--content-w);
  margin:0 auto;
  background:var(--beige-light);
  padding:calc(12px * var(--scale)) 0;
  z-index:200;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.nav-row{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(14px * var(--scale));
  margin-bottom:calc(8px * var(--scale));
}
.nav-row:last-child{ margin-bottom:0; }
.nav-row li a{ display:block; }
.nav-sep{ width:1px; height:calc(14px * var(--scale)); background:#3a2a1e; opacity:.4; }
.nav-row img{ height:calc(11px * var(--scale)); width:auto; }

/* ===== generic section ===== */
.section{ position:relative; padding:calc(28px * var(--scale)) calc(20px * var(--scale)) calc(36px * var(--scale)); text-align:center; }
.section .head{ margin:0 auto calc(18px * var(--scale)); }

/* セクション見出し画像: 80%に縮小し、左寄せに統一 */
.about .head,
.products .head,
.linestamp .head,
.present .head{
  margin-left:0;
  margin-right:auto;
}
.about .head{ width:calc(194px * .8); }
.products .head{ width:calc(292px * .8); }
.linestamp .head{ width:calc(262px * .8); margin-left:15px; }
.present .head{ width:calc(292px * .8); }
.full-img{ margin:0 auto calc(14px * var(--scale)); }
.full-img.caption{ opacity:.85; }

/* full-bleed images (edge to edge of content width) */
.about .about-stage img.about-back,
.about img[src*="2007desk"],
.about img[src*="himekuri1"]{
  width:100%;
  margin-left:0; margin-right:0;
}

/* ===== hero ===== */
.hero{ padding-top:calc(24px * var(--scale)); }
.title-logo{ width:calc(256px * var(--scale) * var(--hero-scale)); margin:0 auto calc(10px * var(--scale) * var(--hero-scale)); }

.hero-stage{
  position:relative;
  width:100%;
  max-width:calc(280px * var(--scale) * var(--hero-scale));
  height:calc(280px * var(--scale) * var(--hero-scale));
  aspect-ratio:1/1;
  margin:0 auto calc(10px * var(--scale) * var(--hero-scale));
}
.anniv-badge{
  position:absolute;
  top:50%; left:50%;
  width:calc(227px * var(--scale) * var(--hero-scale));
  transform:translate(-50%,-50%);
  transform-origin:center center;
}
.confetti{ position:absolute; }
.f1{ top:5%;  left:22%;  width:calc(16px * var(--scale) * var(--hero-scale)); }
.f2{ top:18%; left:93%;  width:calc(18px * var(--scale) * var(--hero-scale)); }
.f3{ top:3%;  left:74%;  width:calc(17.5px * var(--scale) * var(--hero-scale)); }
.f4{ top:58%; left:4%;  width:calc(16px * var(--scale) * var(--hero-scale)); }
.f5{ top:82%; left:-9%;  width:calc(17.5px * var(--scale) * var(--hero-scale)); }
.f6{ top:25%; left:-12%; width:calc(15.5px * var(--scale) * var(--hero-scale)); }
.f7{ top:40%; left:92%;  width:calc(17px * var(--scale) * var(--hero-scale)); }
.f8{ top:68%; left:95%;  width:calc(16px * var(--scale) * var(--hero-scale)); }

.okagesama{ width:calc(227px * var(--scale)); margin:calc(6px * var(--scale)) auto calc(20px * var(--scale)); }

.btn-stack{ display:flex; flex-direction:column; gap:calc(10px * var(--scale)); align-items:center; }
.btn-row{ display:flex; gap:calc(10px * var(--scale)); width:100%; max-width:calc(313px * var(--scale)); margin:0 auto; justify-content:center; }
.btn-link{ display:block; width:100%; max-width:calc(313px * var(--scale)); }
.btn-link img{ width:100%; }
.btn-row .btn-link{ width:calc(50% - (5px * var(--scale))); }
.btn-link.disabled{ pointer-events:none; opacity:.55; }

/* 2xテキストバナーの実寸(半分)に合わせた個別上限。共有の max-width を上書き */
.btn-shop{ max-width:calc(230px * var(--scale)); margin:0 auto; }
.btn-linestore{ max-width:calc(232px * var(--scale)); margin:0 auto; }
.btn-anketo{ max-width:calc(218px * var(--scale)); margin:0 auto; }

/* ===== about ===== */
.about-stage{
  position:relative;
  width:100%;
  height:calc(176px * var(--scale)); /* GIF重ね合わせ確認で下端に約10.7%の不足を確認し補正した176pxを同率縮小 */
  margin:0 auto calc(16px * var(--scale));
  overflow:hidden;
}
.about-back{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center bottom; }
.about-sun{
  position:absolute;
  top:6%; right:3%;
  width:calc(44px * var(--scale));
  z-index:2;
  transform-origin:center center;
}
.about-k{
  position:absolute;
  z-index:3;
}
.about-k.k1{ left:9.5%;  width:calc(28px * var(--scale));  bottom:calc(38% - 11px); }
.about-k.k2{ left:25.3%; width:calc(32px * var(--scale)); bottom:23%; }
.about-k.k3{ left:41.1%; width:calc(28px * var(--scale));  bottom:23%; }
.about-k.k4{ left:56.9%; width:calc(32px * var(--scale)); bottom:23%; }

/* キャプションは直上の画像の補足のため、画像とは近く(8px)、
   次の画像との間は20pxで統一する */
.about-stage{ margin-bottom:-15px; } /* イラスト下方が余白のため、キャプションとの間隔は詰める */
.about img[src*="2007desk"],
.about img[src*="himekuri1"]{ margin-bottom:calc(8px * var(--scale)); }
.about .caption{
  margin-top:0;
  margin-left:0;
  margin-right:auto;
  margin-bottom:calc(35px * var(--scale));
}
.about img[src*="22-about2"]{ width:calc(216px * .8); }
.about img[src*="24-2007txt"]{ width:calc(226px * .8); }
.about img[src*="26-20th-txt"]{ width:calc(320px * .8); }

/* ===== products ===== */
.product-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:calc(16px * var(--scale)) calc(14px * var(--scale));
  margin-bottom:calc(20px * var(--scale));
}
.product-item img:first-child{ width:100%; margin-bottom:calc(8px * var(--scale)); }

/* 商品キャプション: 80%縮小し、画像の左端に揃えて左寄せ */
.product-label{ margin-left:0; margin-right:auto; }
.products img[src*="33-kabekake-txt"]{ width:calc(102px * .8); }
.products img[src*="34-takujo-txt"]{ width:calc(90px * .8); }
.products img[src*="35-a6d1-txt"]{ width:calc(104px * .8); }
.products img[src*="36-a6d2-txt"]{ width:calc(85px * .8); }
.products img[src*="37-himekuri-txt"]{ width:calc(216px * .8); margin-left:0; margin-right:auto; }

/* 発売日キャプションを15px下げる */
.products img[src*="39-karenda9gatsu"]{ margin-top:15px; }

.himekuri-block{ position:relative; margin-bottom:calc(18px * var(--scale)); }
.himekuri-block img:first-child{ width:100%; }
.himekuri-block .full-img{ margin-top:calc(8px * var(--scale)); }

/* ===== line stamp / present shared ===== */
.linestamp .full-img,
.present .full-img{ width:100%; max-width:calc(315px * var(--scale)); }

/* 写真とテキストで上限を共有していたため、テキスト系だけ実寸(半分)で個別上書き */
.linestamp .full-img.stamp-photo{ max-width:calc(301px * var(--scale)); }
.linestamp .full-img.stamp-desc{ max-width:calc(208px * var(--scale)); }
.present .full-img.present-desc{ max-width:calc(300px * var(--scale)); }
.present .full-img.present-note{ max-width:calc(260px * var(--scale)); margin-top:15px; }

/* ===== footer ===== */
.footer{ padding:calc(30px * var(--scale)) 0 0; text-align:center; }
.parade-stage{
  position:relative;
  width:100%;
  height:calc(100px * var(--scale));
  overflow:hidden;
  margin-bottom:calc(14px * var(--scale));
}
.parade{
  position:absolute;
  top:0;
  width:calc(274px * var(--scale));
}
.insta-block{ margin:calc(50px + 20px * var(--scale)) 0 calc(26px * var(--scale)); }
.insta-block a{ display:inline-block; margin-top:calc(8px * var(--scale)); }
.insta-block img{ margin-left:auto; margin-right:auto; }

.footer-band{
  background:var(--beige-light);
  padding:calc(22px * var(--scale)) calc(20px * var(--scale)) calc(26px * var(--scale));
}
.footer-band img{ margin:0 auto calc(8px * var(--scale)); }
.footer-band img:last-child{ margin-bottom:0; }

/* ===== animations ===== */
@keyframes sway{
  0%,100%{ transform:translate(-50%,-50%) rotate(-3deg); }
  50%{ transform:translate(-50%,-50%) rotate(3deg); }
}
.anniv-badge.sway{ animation:sway 2s ease-in-out infinite; }

@keyframes sway-simple{
  0%,100%{ transform:rotate(-3deg); }
  50%{ transform:rotate(3deg); }
}
.about-sun.sway{ animation:sway-simple 2s ease-in-out infinite; }

@keyframes bob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(calc(-8px * var(--scale))); }
}
.about-k.bob{ animation:bob 2s ease-in-out infinite; }
.about-k.k1.bob{ animation-delay:0s; }
.about-k.k2.bob{ animation-delay:.4s; }
.about-k.k3.bob{ animation-delay:.9s; }
.about-k.k4.bob{ animation-delay:1.3s; }

@keyframes flicker{
  0%,100%{ opacity:.35; transform:scale(.85) rotate(0deg); }
  50%{ opacity:1; transform:scale(1) rotate(12deg); }
}
.confetti{ animation:flicker 3s ease-in-out infinite; }
.f1{ animation-delay:0s; }
.f2{ animation-delay:.3s; }
.f3{ animation-delay:.6s; }
.f4{ animation-delay:.9s; }
.f5{ animation-delay:1.2s; }
.f6{ animation-delay:1.5s; }
.f7{ animation-delay:1.8s; }
.f8{ animation-delay:2.1s; }

/* 49-kaeru-ilast3: right edge -> left edge of content width over 7s, then 2s pause, repeat (9s cycle) */
@keyframes cross{
  0%{ left:100%; opacity:1; }
  77.8%{ left:calc(-274px * var(--scale)); opacity:1; }   /* 7s of 9s total */
  77.9%{ opacity:0; }
  100%{ left:calc(-274px * var(--scale)); opacity:0; }
}
.parade.cross{ animation:cross 9s linear infinite; }

/* ===== back to top ===== */
/* UI操作ボタンのためキャンバス縮小の対象外(タップ領域確保のため44px角を維持) */
.back-to-top{
  position:fixed;
  right:20px; bottom:20px;
  width:44px; height:44px;
  border-radius:50%;
  background:#3a2a1e;
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  z-index:150;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

/* ===== PC / wider viewport ===== */
@media (min-width:336px){
  body{ background:#ffffff; }
}