/* =========================================
   Tiny lens / style_me.css（整理版）
   - 重複していたSP調整 @media を統合
   - 同じ定義の上書きを整理して読みやすく
   - コメント（意図説明）は残す
========================================= */


/* =========================================================
   0) 変数 / ベース
========================================================= */
:root{
  --yellow:#f3c400;
  --beige:#e9eadb;
  --phone-w: 620px;

  /* 入場アニメ */
  --enter-delay: 2.4s;
  --enter-dur: .6s;
  --enter-ease: cubic-bezier(.2,1.2,.2,1);

  /* 小さな常時アニメ */
  --idle-spin: 4s;

  /* タイトルの “ゆっくり跳ね” */
  --title-idle-start: 2.9s;
  --title-idle-span: 4s;

  /* 左右湖 */
  --lakeH: 250px;
  --lakeSink: -2px;
  --lakeW: 110%;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; scroll-behavior:smooth; }

/* スマホの上下（オーバースクロール等）で地色が見える端末対策 */
html{ background: var(--beige); }

body{
  background: var(--beige);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

/* JS有効フラグ（JSで付与される） */
html.js-enabled{}



/* =========================================================
   1) レイアウト：SP（〜859px）
   - PC左右は消して、中央のみ表示
========================================================= */
.pcShell{ display:block; }
.pcLeft,.pcRight{ display:none; }
.pcCenter{ display:block; min-width:0; }

.phoneFrame{
  width:100%;
  border:0;
  background:transparent;
  overflow:visible;
}
.phoneScroll{ overflow:visible; }

.page{
  width:100%;
  max-width: 860px;
  margin:0 auto;
  background-color: var(--beige);
  min-height:100vh;
  overflow-x:hidden;
}



/* =========================================================
   2) レイアウト：PC（860px〜）
   - 3カラム固定
   - 左右は sticky
========================================================= */
@media (min-width:860px){
  body{
    background: var(--beige);
    overflow-y:auto;
  }

  .pcShell{
    display:grid;
    grid-template-columns: 1fr var(--phone-w) 1fr;
    gap: 0;
    min-height: 100vh;
    align-items:start;
  }

  .pcLeft,
  .pcRight{
    display:block;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow:hidden;
    z-index: 10;
    background: var(--beige);
  }

  .pcCenter{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    min-width:0;
  }

  .phoneFrame{
    width: var(--phone-w);
    min-height: 100vh;
    border-left:1px solid var(--yellow);
    border-right:1px solid var(--yellow);
    background: rgba(255,255,255,.35);
    overflow:hidden;
  }
  .phoneScroll{ overflow: visible; background:#fff; }

  .phoneScroll .page{
    max-width:none;
    margin:0;
    background-color: var(--beige);
  }

  /* ===== 左右の湖：下固定＆高さ統一 ===== */
  .pcBgBottom{
    position:absolute;
    left:50%;
    bottom: var(--lakeSink);
    transform: translateX(-50%);
    width: var(--lakeW);
    height: var(--lakeH);
    max-width:none;
    object-fit: cover;
    pointer-events:none;
    user-select:none;
    z-index: 1;
    object-position: center 0%;
  }

  /* 入場時：湖がポンと出る */
  .pcShell.is-enter .pcBgBottom{
    animation: sidePopIn var(--enter-dur) var(--enter-ease) both;
    animation-delay: var(--enter-delay);
  }
}


/* =========================================================
   3) 共通アニメ：ぽこっと出る（複数箇所で使う）
========================================================= */
@keyframes pcPopIn{
  0%{ opacity:0; transform: translateY(14px) scale(.96); }
  60%{ opacity:1; transform: translateY(-4px) scale(1.02); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}

@keyframes sidePopIn{
  0%{ opacity:0; transform: translateX(-50%) translateY(14px) scale(.96); }
  60%{ opacity:1; transform: translateX(-50%) translateY(-4px) scale(1.02); }
  100%{ opacity:1; transform: translateX(-50%) translateY(0) scale(1); }
}



/* =========================================================
   4) HERO（Tiny lens トップ）
========================================================= */
.hero{
  position:relative;
  overflow:hidden;
  background: var(--beige);
}

.hero--tinylens{
  min-height:100vh;
  padding:100px 18px 0;
  position:relative;
  overflow:hidden;
}

.heroTL__fg{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

/* 背景白円 */
.heroTL__bg{ position:absolute; inset:0; pointer-events:none; z-index: 25; }
.heroTL__circle{ margin:180px auto 0; width:400px; max-width: 92vw; }
.hero--tinylens.is-enter .heroTL__circle{
  animation: tlPopIn .7s var(--enter-ease) both;
  animation-delay: 1.7s;
}

/* ロゴタイトル（1文字ずつ） */
.heroTL__title{
  width:360px;
  max-width:95%;
  margin:0;
  display:flex;
  justify-content:center;
  align-items:flex-end;
}
.heroTL__sp{ width:20px; height:1px; }
.heroTL__ch{ display:inline-block; transform-origin:50% 90%; }
.heroTL__ch img{ height: clamp(40px, 8vw, 70px); width:auto; }

.hero--tinylens.is-enter .heroTL__ch{
  animation-name: tlCharBounce, tlCharIdle;
  animation-duration: .7s, var(--title-idle-span);
  animation-timing-function: cubic-bezier(.2,1.25,.2,1), cubic-bezier(.2,1.25,.2,1);
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, both;
  animation-delay:
    calc(var(--i) * 90ms + 150ms),
    calc(var(--title-idle-start) + (var(--i) * 0.18s));
}

@keyframes tlCharBounce{
  0%{ transform: translateY(10px) scale(.98); opacity:0; }
  60%{ transform: translateY(-10px) scale(1.02); opacity:1; }
  100%{ transform: translateY(0) scale(1); opacity:1; }
}
@keyframes tlCharIdle{
  0%,100%{ transform: translateY(0) scale(1); }
  35%{ transform: translateY(-10px) scale(1.02); }
  65%{ transform: translateY(0) scale(1); }
}

/* サブコピー */
.heroTL__copy{ width:280px; max-width:85%; display:flex; justify-content:center; }
.heroTL__copy img{ width:100%; }
.hero--tinylens.is-enter .heroTL__copy{
  animation: tlPopIn .5s cubic-bezier(.2,2,.2,1) both;
  animation-delay: 1.7s;
}

/* キャラ3体 */
.heroTL__chars{ position:relative; width:340px; max-width: 92vw; height:280px; z-index: 105; }
.heroTL__char{ position:absolute; left:50%; bottom:0; will-change: transform; }

.heroTL__char--left{
  width:80px;
  transform: translateX(calc(-50% - 110px));
  animation: tlFloatA 5.6s ease-in-out infinite;
}
.heroTL__char--center{
  width:180px;
  transform: translateX(-50%);
  animation: tlFloatB 6.4s ease-in-out infinite;
}
.heroTL__char--right{
  width:150px;
  transform: translateX(calc(-50% + 130px));
  animation: tlFloatC 5.9s ease-in-out infinite;
}

.hero--tinylens.is-enter .heroTL__chars{
  animation: tlPopIn .5s cubic-bezier(.2,2,.2,1) both;
  animation-delay: 1.7s;
}

@keyframes tlPopIn{
  0%{ opacity:0; transform: translateY(14px) scale(.96); }
  60%{ opacity:1; transform: translateY(-4px) scale(1.02); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes tlFloatA{
  0%,70%,100%{ transform: translateX(calc(-50% - 110px)) translateY(0); }
  78%{ transform: translateX(calc(-50% - 110px)) translateY(-10px); }
  86%{ transform: translateX(calc(-50% - 110px)) translateY(0); }
}
@keyframes tlFloatB{
  0%,62%,100%{ transform: translateX(-50%) translateY(0); }
  70%{ transform: translateX(-50%) translateY(-12px); }
  78%{ transform: translateX(-50%) translateY(0); }
}
@keyframes tlFloatC{
  0%,74%,100%{ transform: translateX(calc(-50% + 130px)) translateY(0); }
  82%{ transform: translateX(calc(-50% + 130px)) translateY(-9px); }
  90%{ transform: translateX(calc(-50% + 130px)) translateY(0); }
}

/* 説明文 */
.heroIntro{
  max-width: 420px;
  margin: 80px auto 0;
  padding: 0 22px;
  text-align: center;
  line-height: 1.9;

  color: #333;
}
.heroIntro p{
  margin: 0 0 14px;
  letter-spacing: 0.1em;
  line-height: 2em;
  font-size: 13px;
}

/* SPでも説明文の入場を効かせる */
html.js-enabled .heroIntro{
  opacity: 0;
  transform: translateY(14px) scale(.96);
  will-change: transform, opacity;
}
html.js-enabled .hero--tinylens.is-enter .heroIntro{
  animation: pcPopIn var(--enter-dur) var(--enter-ease) both;
  animation-delay: var(--enter-delay);
}



/* =========================================================
   5) PC Left UI（左ナビ & 左キャラ）
========================================================= */
@media (min-width:860px){
  .pcNav{
    position:absolute;
    top: 220px;
    left:50%;
    transform: translateX(-50%);
    display:flex;
    flex-direction:column;
    gap: 30px;
    z-index: 30;
  }
  .pcNavBtn{ display:block; width:130px; }
  .pcNavBtn img{
    width:110px;
    transform-origin:50% 50%;
    will-change: transform;
    animation: navIdleSpin var(--idle-spin) linear infinite;
  }

  .pcShell.is-enter .pcNavBtn img{
    animation-name: navPopIn, navIdleSpin;
    animation-duration: var(--enter-dur), var(--idle-spin);
    animation-timing-function: var(--enter-ease), linear;
    animation-delay: var(--enter-delay), calc(var(--enter-delay) + var(--enter-dur));
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
  }

  .pcNavBtn:hover img{ animation: navHoverSpin .8s ease-out both !important; }

  @keyframes navPopIn{
    0%{ transform: scale(.8) rotate(-20deg); opacity:0; }
    60%{ transform: scale(1.1) rotate(5deg); opacity:1; }
    100%{ transform: scale(1) rotate(0deg); opacity:1; }
  }
  @keyframes navIdleSpin{
    0%,85%{ transform: rotate(0deg); }
    90%,100%{ transform: rotate(360deg); }
  }
  @keyframes navHoverSpin{
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(-360deg); }
  }

  .pcLeftChars{
    position:relative;
    left:50%;
    top:320px;
    transform: translateX(-50%);
    width: min(520px, 92%);
    height: 600px;
    pointer-events:none;
    z-index: 25; /* 湖より前 */
  }

  .pcShell.is-enter .pcLeftChars{
    animation: sidePopIn var(--enter-dur) var(--enter-ease) both;
    animation-delay: var(--enter-delay);
  }

  .pcChar{ position:absolute; z-index:2; will-change: transform; }
  .pcChar--suyasuya{
    left:50%;
    bottom:90px;
    width:280px;
    transform: translateX(-50%);
    animation: pcFloat 5s ease-in-out infinite;
  }
  @keyframes pcFloat{
    0%,100%{ transform: translateX(-50%) translateY(0) rotate(-1deg); }
    50%{ transform: translateX(-50%) translateY(-10px) rotate(1deg); }
  }
}



/* =========================================================
   6) PC Right UI（吊り下げ / ロゴ / links）
========================================================= */
@media (min-width:860px){
  .pcRight{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    justify-content:flex-start;
    z-index: 20; /* 湖より前 */
  }

  .pcHanging{
    width:120px;
    margin-top:230px;
    margin-left:34px;
    transform-origin:50% 0%;
    z-index: 30;
  }

  /* 入場 → その後揺れ */
  .pcShell.is-enter .pcHanging{
    animation: pcPopIn var(--enter-dur) var(--enter-ease) both;
    animation-delay: var(--enter-delay);
  }
  .pcHanging{
    animation: hangSway 3.8s ease-in-out infinite;
    animation-delay: calc(var(--enter-delay) + var(--enter-dur));
  }
  @keyframes hangSway{
    0%,100%{ transform: rotate(4deg); }
    50%{ transform: rotate(-4deg); }
  }

  .pcBrand{
    width: min(320px, calc(100% - 40px));
    margin: 0 auto 0;
    text-align:center;
    z-index: 30;
  }

  .pcShell.is-enter .pcBrand{
    animation: pcPopIn var(--enter-dur) var(--enter-ease) both;
    animation-delay: var(--enter-delay);
  }

  .pcLogo_wrap{ position: relative; display:inline-block; }
  .pcLogo{ width:200px; margin:50px auto 0; }

  /* ロゴ右上のキラキラ */
  .pcSpark{ position:absolute; pointer-events:none; user-select:none; }
  .pcSpark--1{ top: 50px; right: -26px; width: 22px; }
  .pcSpark--2{ top: 45px; right: -40px; width: 16px; }

  .pcSpark img{
    width:100%;
    opacity:.35;
    transform: scale(.9);
    will-change: transform, opacity;
    animation: sparkleImg 6.5s ease-in-out infinite;
  }
  .pcSpark--1 img{ animation-delay: 1.2s; }
  .pcSpark--2 img{ animation-delay: 2.0s; }

  @keyframes sparkleImg{
    0%,70%{ opacity:.35; transform: scale(.9) rotate(0deg); }
    74%{ opacity:1; transform: scale(1.15) rotate(8deg); }
    78%{ opacity:.85; transform: scale(.98) rotate(-6deg); }
    84%,100%{ opacity:.35; transform: scale(.9) rotate(0deg); }
  }

  .pcCopyWrap{ margin: 14px 0 16px; }
  .pcCopyImg{ width:170px; margin:20px auto 0; }
  .pcLinks img{ height:33px; margin:20px auto 17px; }
  .pcFooter{ font-size:11px; opacity:.75; }

  /* ロゴ & contact ホバー */
  .pcLogo,
  .pcLinks img{
    transition: transform .25s cubic-bezier(.2,1.2,.2,1), filter .25s ease;
    will-change: transform;
  }
  .pcLogo_wrap:hover .pcLogo{ transform: translateY(-8px); }
  .pcLinks a:hover img{ transform: translateY(-6px); }
}



/* =========================================================
   7) GOODS
   - 見出しが隠れる問題：goodsThumbに高さを持たせて解消
   - スタンプ位置が潰れる問題：absoluteの基準とサイズ整理
========================================================= */
.goods{
  position: relative;
  overflow: hidden;
  padding: 110px 18px 200px;
  background: url("../img/kaso_bg.svg") center top / cover no-repeat;
  background-color: var(--beige);
}

/* 背景レイヤ */
.goods__bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 0;
  background-color:#abd4d6;
}

/* goods内は前面へ */
.goods > *{ position: relative; z-index: 5; }

/* 見出しは最前 */
.goods__header{
  display:flex;
  justify-content:center;
  margin: 0 0 26px;
  position: relative;
  z-index: 50;
}
.goods__title{
  width: min(180px, 56vw);
  height:auto;
  margin-top: 30px;
  margin-bottom: 20px;
  transition-delay: var(--reveal-delay, 0.3s);
}

/* カード共通 */
.goodsCard{
  position: relative;
  margin: 0 auto;
  width: min(350px, 92vw);
  z-index: 25;
}
.goodsCard--line{ margin-top: 8px; }
.goodsCard--idea{ margin-top: 14px; }

/* NEWバッジ */
.goodsNewBadge{
  position:absolute;
  left:-50px;
  top: 35px;
  width: 70px;
  z-index: 60;
  pointer-events:none;
}
.goodsNewBadge:not(.is-on){ display:none; }

/* ★崩れの根源：サムネに“高さ”を作る（重要） */
.goodsThumb{
  --thumbSize: clamp(320px, 86vw, 420px);
  position: relative;
  width: 100%;
  height: var(--thumbSize);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: visible;
}
.goodsThumb__item{
  position:absolute;
  width: var(--thumbSize);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(5px 5px 7px rgba(0,0,0,.30));
}

/* スタンプ共通 */
.goodsStamp{
  position:absolute;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 80;

  /* “強制センター”系の残骸を無効化 */
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
}
.goodsStamp img{
  width: 190px;
  max-width: 68vw;
  filter: drop-shadow(3px 3px 5px rgba(0,0,0,.30));
  transition: transform .25s cubic-bezier(.2,1.2,.2,1);
}
@media (hover:hover){
  .goodsStamp:hover img{
    transform: translateY(-6px) rotate(2deg);
    filter: drop-shadow(0 18px 28px rgba(0,0,0,.28));
  }
}

/* holo / mimi */
.goodsChar{
  position:absolute;
  z-index: 70;
  pointer-events:none;
  user-select:none;
}

/* たまに3回揺れる（キャラ用） */
.js-wiggle{ animation: wiggle3 4s ease-in-out infinite; }
@keyframes wiggle3{
  0%, 76%, 100% { transform: translateY(0) rotate(0deg); }
  80% { transform: translateY(-2px) rotate(-3deg); }
  82% { transform: translateY(0)  rotate(3deg); }
  84% { transform: translateY(-2px) rotate(-3deg); }
  86% { transform: translateY(0)  rotate(3deg); }
  88% { transform: translateY(-2px) rotate(-3deg); }
  90% { transform: translateY(0)  rotate(0deg); }
}

/* ---------- 1枚目（LINE） ---------- */
.goodsCard--line .goodsThumb{ justify-content:flex-start; }
.goodsCard--line .goodsThumb__item{
  left: calc(50% - 80px); /* 左寄せ */
  transform: translate(-50%, -50%) rotate(-1.2deg);
}

/* CHECK!：右下に被せる */
.goodsCard--line .goodsStamp{
  right: 80px;
  bottom: 28px;
  transform: rotate(-9deg);
}
.goodsCard--line .goodsStamp img{ width: 180px; }

/* holo/mimi：わちゃ感 */
.goodsCard--line .goodsChar--holo{ width: 78px; right: -50px; top: 58px; }
.goodsCard--line .goodsChar--mimi{ width: 250px; left: -100px; bottom: -160px; }

/* ---------- 2枚目（構想中） ---------- */
.goodsCard--idea .goodsThumb{ justify-content:flex-end; }
.goodsCard--idea .goodsThumb__item{
  left: calc(50% + 60px); /* 右寄せ */
  transform: translate(-50%, -50%) rotate(1.5deg);
}

/* 構想中！：丸の外に貼る */
.goodsCard--idea .goodsStamp{
  left:250px;
  bottom: 20px;
  transform: translateX(-50%) rotate(-8deg);
}
.goodsCard--idea .goodsStamp img{
  width:180px;
  max-width: 72vw;
}



/* =========================================================
   8) reveal（スクロールでふわっと出る）
========================================================= */
.js-reveal{ opacity:1; transform:none; }
html.js-enabled .js-reveal{
  opacity:0;
  transform: translateY(14px) scale(.96);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
html.js-enabled .js-reveal.is-in{
  opacity:1;
  transform: translateY(0) scale(1);
  transition: opacity .55s var(--enter-ease), transform .55s var(--enter-ease);
  transition-delay: var(--reveal-delay, 0.5s);
}



/* =========================================================
   9) MODAL（LINEスタンプ詳細）
========================================================= */
.goodsModal{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
}
.goodsModal.is-open{ display:block; }

.goodsModal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
}

.goodsModal__panel{
  position: relative;
  width: min(580px, 90vw);
  margin: 10vh auto 0;
  background: #fff;
  border-radius: 18px;
  padding: 32px 28px 26px;
  box-shadow: 0 30px 70px rgba(0,0,0,.25);
  animation: modalPop .35s var(--enter-ease) both;
}
@keyframes modalPop{
  0%{ opacity:0; transform: translateY(12px) scale(.98); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}

.goodsModal__close{
  position:absolute;
  right: 10px;
  top: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: #f3f3f3;
  cursor: pointer;
  font-size: 18px;
  line-height: 34px;
}

.goodsModal__title{ margin: 6px 0 25px; font-size: 18px; }
.goodsModal__text{
  margin: 0 0 14px;
  line-height: 1.9;
  font-size: 14px;
  color: #555;
  letter-spacing: .08em;
}

.goodsModal__panel img{
  display:block;
  margin: 0 auto 28px; /* サムネの下余白 */
}
.goodsModal__panel .pcLogo{ margin-bottom: 28px; }

.goodsModal__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  width: min(260px, 70vw);
  margin: 22px auto 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: #2f88a3;
  color: #fff;
  font-weight: 700;
  letter-spacing: .13em;
  text-align:center;
  transition: transform .2s ease, filter .2s ease;
}
@media (hover:hover){
  .goodsModal__cta:hover{
    transform: translateY(-3px);
    filter: drop-shadow(0 5px 5px rgba(0,0,0,.18));
  }
}



/* =========================================================
   10) ABOUT slider
========================================================= */
.about{
  background: var(--beige);
  padding: 0px 18px 100px;
  overflow: hidden;
}

.about__header{
  display:flex;
  justify-content:center;
  margin: 20px 0 18px;
}

.aboutSlider{
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  z-index: 50;
}

.aboutViewport{
  position: relative;
  border-radius: 18px;
  touch-action: pan-y;
  overflow-x: hidden;
  overflow-y: visible;
  padding-bottom: 26px; /* 影の余白 */
}

.aboutTrack{
  display:flex;
  gap: 24px;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.aboutCard{
  flex: 0 0 100%;
  display:flex;
  justify-content:center;
  padding: 18px 0 8px;
  transform-origin: 50% 50%;
}

.aboutCard__frame{
  width: min(400px, 80vw);
  background: #fff;
  border-radius: 0px;
  position: relative;
  box-shadow: 0 5px 7px rgba(0,0,0,.1);
  padding: 5px 36px 10px;
  box-sizing: border-box;
}

/* outline → border */
.aboutCard__frame--yellow{ border: 16px solid #f3c400; outline: none; transform: rotate(-1.2deg); }
.aboutCard__frame--blue  { border: 16px solid #2f88a3; outline: none; transform: rotate(-0.8deg); }
.aboutCard__frame--orange{ border: 16px solid #d96a2c; outline: none; transform: rotate( 1.0deg); }

/* キャラ */
.aboutChar{
  height: 200px;
  margin: 30px auto 0px;
  display:block;
  animation: aboutFloat 6.2s ease-in-out infinite;
}
@keyframes aboutFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

/* 名前 */
.aboutName{
  display: block;
  text-align:center;
  height: 40px;
  margin:20px auto 40px;
  font-weight: 900;
  letter-spacing: .02em;
}
.aboutName img{
  height: 100%;
  display: block;
  margin: 0 auto;
}

/* 本文 */
.aboutText{
  margin: 0 auto;
  max-width: 420px;
  text-align:center;
  line-height: 1.9;
  font-size: 13px;
  letter-spacing: .08em;
  color:#111;
  padding-bottom: 30px;
}

/* ナビ */
.aboutNav{
  position:absolute;
  top: 48%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: #111;
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index: 25;
  box-shadow: 0 5px 5px rgba(0,0,0,.18);
  transition: transform .18s cubic-bezier(.2,1.2,.2,1), opacity .18s ease;
}
.aboutNav:active{ transform: translateY(-50%) scale(.95); }
.aboutNav--prev{ left: 70px; }
.aboutNav--next{ right: 70px; }

/* ドット */
.aboutDots{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin-top: 0px;
}
.aboutDot{
  width: 10px;
  height:5px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.18);
  cursor:pointer;
  transition: transform .2s cubic-bezier(.2,1.2,.2,1), background .2s ease;
}
.aboutDot.is-active{
  background: rgba(0,0,0,.65);
  transform: scale(1.35);
}



/* =========================================================
   11) FOOTER
========================================================= */
footer{ background-color: var(--beige); }

.tlFooter{
  position: relative;
  background: var(--beige);
  overflow: hidden;
  padding: 0;
  will-change: transform;
  transform: translate3d(0,0,0);
  animation: footerFloat 2s ease-in-out infinite;
  margin-bottom: 50px; /* PCでは浮遊分の逃げ。SPでは0にする */
}

@keyframes footerFloat{
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,-20px,0); }
}

.tlFooter__bg{
  width: 80%;
  height: auto;
  display:block;
  margin: 0 auto;
  z-index: 100;
}

.tlFooter__inner{
  position:absolute;
  inset: 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap: 14px;
  color:#fff;
}

.tlFooter__logo{
  width: min(150px, 78vw);
  height:auto;
  margin-top:120px;
}
.tlFooter__mark{
  width: 50px;
  height:auto;
  margin-top: 5px;
  margin-bottom: 50px;
}
.tlFooter__copy{
  display:block;
  font-size: 12px;
}



/* =========================================================
   12) キラキラ雨（確実に見える版）
========================================================= */
.sparkRain{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 20;
}

.spark{
  position: absolute;
  top: -80px;
  left: 70%;
  width: 26px;
  height: 26px;
  opacity: 0;
  will-change: transform, opacity;
  animation: sparkFall 10s linear infinite;
}

.spark img{
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.12));
}

/* 4つをバラす（出る場所/サイズ/間隔） */
.sparkRain .spark:nth-child(1){
  left: 80%;
  animation-duration: 10s;
  animation-delay: 0s;
}
.sparkRain .spark:nth-child(2){
  left: 90%;
  width: 20px;
  height: 20px;
  animation-duration: 12s;
  animation-delay: 3s;
}
.sparkRain .spark:nth-child(3){
  left: 65%;
  width: 18px;
  height: 18px;
  animation-duration: 11s;
  animation-delay: 6s;
}
.sparkRain .spark:nth-child(4){
  left: 75%;
  width: 22px;
  height: 22px;
  animation-duration: 13s;
  animation-delay: 8s;
}

@keyframes sparkFall{
  0%{
    transform: translate3d(180px, 0, 0);
    opacity: 0;
  }
  12%{ opacity: .9; }
  100%{
    transform: translate3d(-60vw, 130vh, 0);
    opacity: 0;
  }
}



/* =========================================================
   13) Preloader（上→下に開くシャッター）
========================================================= */
html:not(.is-ready) .pcShell{
  opacity: 0;
}

.preloader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--beige);
  display: grid;
  place-items: center;
  transform-origin: top;
  transform: scaleY(1);
}

.preloader.is-open{
  animation: curtainOpen .7s cubic-bezier(.2,1.2,.2,1) forwards;
}

@keyframes curtainOpen{
  0%{ transform: scaleY(1); }
  100%{ transform: scaleY(0); }
}

.preloader__inner{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.preloader__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#111;
  opacity:.2;
  animation: preloadDot 1.1s ease-in-out infinite;
}
.preloader__dot:nth-child(2){ animation-delay: .15s; }
.preloader__dot:nth-child(3){ animation-delay: .30s; }
@keyframes preloadDot{
  0%,100%{ transform: translateY(0); opacity:.2; }
  50%{ transform: translateY(-6px); opacity:.75; }
}



/* =========================================================
   14) モーション軽減（OS設定）
========================================================= */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}



/* =========================================================
   15) SP調整パック（〜859px）※ここに統合
   - TOPの余白調整
   - goodsはみ出し対策
   - about/ footerのコンパクト化
========================================================= */
@media (max-width:859px){

  /* ページ下の白い余白の原因になりやすいところを潰す */
  html, body { height: 100%; }
  body { margin: 0; }
  .page { min-height: auto; }
  .pcShell { overflow-x: hidden; }

  /* HERO */
  .hero--tinylens{
    min-height: auto;
    padding: 60px 18px 0;
  }

  .heroTL__copy{
    width: 220px;
    max-width: 80%;
  }

  .heroTL__circle{
    margin: 120px auto 0;
    width: min(400px, 85vw);
  }

  .heroTL__chars{
    height: 200px;
    margin-top: 20px; /* キャラ塊を少し下げる。10〜30で微調整OK */
  }

  /* キャラ3体を少し小さく */
  .heroTL__char--left  { width: 72px; }
  .heroTL__char--center{ width: 160px; }
  .heroTL__char--right { width: 130px; }

  .heroIntro{
    margin: 50px auto 0;
    padding: 0 14px;
    font-size: 13px;
    line-height: 1.85;
    margin-bottom: 40px;
  }
  .heroIntro p{ margin-bottom: 12px; }

  /* GOODS */
  .goods{
    padding: 90px 14px 140px;
  }

  .goods__header{ margin: 0 0 18px; }
  .goods__title{
    width: min(160px, 54vw);
    margin-top: 18px;
    margin-bottom: 30px;
  }

  /* 丸（thumb）を小さくして、絶対に横に溢れないように */
  .goodsThumb{
    --thumbSize: min(86vw, 330px);
    height: var(--thumbSize);
  }

  .goodsCard{
    width: min(270px, 94vw);
  }

  /* 1枚目（LINE）：左寄せを弱めて画面内へ */
  .goodsCard--line .goodsThumb__item{
    left: 38%;
  }

  /* NEW：はみ出ない位置へ */
  .goodsNewBadge{
    left: -10px;
    top:20px;
    width: 58px;
  }

  /* holo/mimi：SPは“逃がし過ぎ”を戻す */
  .goodsCard--line .goodsChar--holo{
    right: -12px;
    top: -40px;
    width: 60px;
  }
  .goodsCard--line .goodsChar--mimi{
    left: -30px;
    bottom: -90px;
    width: 170px;
  }

  /* CHECK!：押しやすい位置 */
  .goodsCard--line .goodsStamp{
    right: 50px;
    bottom: 30px;
    transform: rotate(-8deg);
  }
  .goodsCard--line .goodsStamp img{
    width: 120px;
    max-width: 46vw;
  }

  /* 2枚目（構想中）：右寄せを弱めて画面内へ */
  .goodsCard--idea .goodsThumb__item{
    left: 62%;
    transform: translate(-50%, -50%) rotate(1.2deg);
  }
  .goodsCard--idea .goodsStamp{
    left: 62%;
    bottom: 20px;
    transform: translateX(-50%) rotate(-8deg);
  }
  .goodsCard--idea .goodsStamp img{
    width: 120px;
    max-width: 48vw;
  }

  /* ABOUT：枠を少し小さく */
  .about{
    padding: 0 12px 70px;
  }

  .aboutCard{
    padding: 10px 0 6px;
  }

  .aboutCard__frame{
    width: min(280px, 85vw);
    padding: 10px 24px 24px;
    box-shadow: 0 4px 10px rgba(0,0,0,.10);
  }

  .aboutCard__frame--yellow,
  .aboutCard__frame--orange,
  .aboutCard__frame--blue{
    border-width: 12px;
  }

  .aboutChar{
    height: 130px;
    margin-top: 20px;
  }

  .aboutName{
    width: 110px;
    height: 30px;
    margin: 14px auto 24px;
  }

  .aboutText{
    font-size: 12px;
    line-height: 1.7;
    padding-bottom: 16px;
  }

  /* ナビボタンは内側へ */
  .aboutNav{ width: 34px; height: 34px; }
  .aboutNav--prev{ left: 20px; }
  .aboutNav--next{ right: 20px; }

  /* FOOTER：SPでは最下部の白マージンが出やすいので0に */
  .tlFooter{
    margin-bottom: 0;
    padding-bottom: 50px; /* 下スペース確保 */
    animation: footerFloat 2.4s ease-in-out infinite;
  }

  .tlFooter__bg{
    width: 76%;
    margin: 0 auto;
    transform: translateY(0);
  }

  .tlFooter__inner{
    inset: 0;
    transform: translateY(-38px); /* ロゴ類を少し上げる */
  }

  .tlFooter__logo{
    width: min(100px, 50vw);
    margin-top: 90px;
  }

  .tlFooter__mark{
    width: 40px;
    margin-top: 0px;
    margin-bottom: 30px;
  }

  .tlFooter__copy{
    font-size: 9px;
    margin-top: -15px;
    padding-bottom: 20px;
    letter-spacing: 0em;
  }

  /* iOSの謎余白対策（保険） */
  body::after{
    content:"";
    display:block;
    height: 0;
  }
}