:root{--bg:#f8fbff;--paper:#fff;--ink:#111827;--muted:#5c6b80;--blue:#1d5fd1;--blue2:#143e90;--green:#06b64f;--shadow:rgba(20,62,144,.15);--radius:14px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--bg);font-family:"Noto Sans JP",system-ui,sans-serif;letter-spacing:.02em;overflow-x:hidden}.pixel-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(29,95,209,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(29,95,209,.045) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,#000,transparent 86%)}.site-shell{width:min(1080px,calc(100% - 32px));margin:0 auto;padding:64px 0 100px}.rpg-window{position:relative;background:var(--paper);border:3px solid var(--blue);border-radius:var(--radius);box-shadow:0 0 0 4px #fff,0 0 0 6px rgba(29,95,209,.18),8px 9px 0 var(--shadow)}.rpg-window:before{content:"";position:absolute;inset:7px;border:2px dotted rgba(29,95,209,.25);border-radius:9px;pointer-events:none}.compact:before{inset:5px}.speaker{display:inline-block;margin-bottom:10px;padding:4px 10px;color:#fff;background:var(--blue);border-radius:4px;font-family:"DotGothic16",monospace;font-size:14px}.sound-toggle{position:fixed;right:18px;bottom:18px;z-index:30;border:2px solid var(--blue);background:#fff;color:var(--blue2);border-radius:999px;padding:10px 14px;font-family:"DotGothic16",monospace;box-shadow:5px 5px 0 rgba(29,95,209,.18);cursor:pointer}.status-window{position:fixed;top:22px;right:22px;z-index:20;width:164px;padding:14px;font-family:"DotGothic16",monospace;animation:float 4s ease-in-out infinite}.status-row{display:grid;gap:4px}.status-row span{font-size:12px;color:var(--muted)}.status-row strong{font-size:15px;line-height:1.2}.green{color:var(--green)}.dot-line{height:1px;border-top:2px dotted rgba(29,95,209,.38);margin:10px 0}.hero{min-height:70vh;display:grid;place-items:center;align-content:center;gap:28px;text-align:center}.brand-card{display:inline-flex;align-items:center;gap:24px;padding:22px 30px;text-align:left}.brand-sub{margin:0 0 4px;font-family:"DotGothic16",monospace;font-size:clamp(17px,3vw,25px)}.brand-copy h1{margin:0;font-family:"DotGothic16",monospace;font-size:clamp(34px,7vw,64px);line-height:1}.brand-copy h1 span{color:var(--blue)}.brand-note{margin:8px 0 0;color:var(--muted);font-family:"DotGothic16",monospace}.dialogue,.hero-dialogue,.support-card,.shop-talk,.section-talk,.cta-talk,.line-box{padding:24px}.hero-dialogue{width:min(760px,100%);text-align:left}.hero-dialogue p,.support-card p,.shop-talk p,.section-talk p,.cta-talk p,.line-box p{margin:0 0 8px;font-size:clamp(18px,3.4vw,28px);font-weight:700;line-height:1.65}.support{padding:16px 0 64px}.support-card{max-width:820px;margin:0 auto;background:linear-gradient(0deg,#fff 0%,#fff 60%,#fffdf3 100%)}.support-card h2{margin:0 0 16px;font-family:"DotGothic16",monospace;color:var(--blue2)}.caution{border-color:#d19b1d;box-shadow:0 0 0 4px #fff,0 0 0 6px rgba(209,155,29,.18),8px 9px 0 rgba(209,155,29,.14)}.caution .speaker{background:#d19b1d}.fade-section{opacity:0;transform:translateY(18px);animation:fadeUp .65s ease forwards}.shop,.repair,.guide,.record,.faq,.form-section,.line-section{padding:72px 0 0}.section-title{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 28px;text-align:center;font-family:"DotGothic16",monospace;color:var(--blue2)}.section-title span{font-size:clamp(25px,4vw,40px)}.section-title:before,.section-title:after{content:"";height:4px;flex:1;max-width:260px;background-image:radial-gradient(var(--blue) 32%,transparent 34%);background-size:10px 4px}.section-title.two-line{flex-wrap:wrap;gap:8px 14px}.section-title.two-line span,.section-title.two-line small{width:100%;display:block}.section-title.two-line small{color:var(--muted);font-size:clamp(18px,3vw,26px)}.section-title.two-line:before,.section-title.two-line:after{display:none}.shop-grid{display:grid;grid-template-columns:1fr minmax(300px,430px);gap:26px;align-items:start}.shop-talk{min-height:210px;display:flex;flex-direction:column;justify-content:center}#menuTalk{transition:opacity .12s ease,transform .12s ease}#menuTalk.changing{opacity:.35;transform:translateY(3px)}.shop-menu{padding:18px}.menu-link{position:relative;display:block;padding:12px 12px 12px 36px;color:var(--ink);text-decoration:none;border-radius:8px;font-family:"DotGothic16",monospace;font-size:20px}.menu-link:before{content:"▶";position:absolute;left:10px;top:12px;color:var(--blue);animation:cursor 1s steps(2) infinite}.menu-link:hover,.menu-link.active{color:var(--blue);background:rgba(29,95,209,.07)}.menu-link.primary{color:var(--blue2);font-weight:900}.menu-link.line{color:var(--green)}.menu-link.line:before{color:var(--green)}.menu-divider{display:block;height:1px;border-top:2px dotted rgba(29,95,209,.35);margin:9px 0}.section-talk{max-width:780px;margin:0 auto 28px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.cards.single{grid-template-columns:minmax(280px,460px);justify-content:center}.item-card{padding:22px;min-height:396px;transition:transform .16s ease,box-shadow .16s ease}.item-card:hover{transform:translateY(-6px);box-shadow:0 0 0 4px #fff,0 0 0 6px rgba(29,95,209,.18),12px 14px 0 rgba(20,62,144,.19)}.item-kind{margin:0 0 9px;color:var(--blue);font-family:"DotGothic16",monospace;font-size:14px}.item-card h3{margin:0 0 14px;font-size:22px;line-height:1.35}.item-card p{margin:0 0 10px;line-height:1.75}.item-card .target{margin-top:14px;color:var(--blue2);font-weight:800}.item-icon{position:relative;width:92px;height:92px;margin:0 auto 20px}.item-icon:before,.item-icon:after,.item-icon i{content:"";position:absolute;display:block}.pot:before{width:56px;height:44px;left:18px;top:32px;background:#18bfae;border:5px solid #18335e;box-shadow:inset 0 -10px 0 rgba(0,0,0,.15)}.pot i{width:36px;height:14px;left:28px;top:18px;background:#dbe4ef;border:5px solid #18335e}.analog:before{width:64px;height:44px;left:14px;top:38px;background:#dbe4ef;border:5px solid #18335e;box-shadow:inset 0 -10px 0 rgba(0,0,0,.12)}.analog:after{width:30px;height:30px;left:31px;top:10px;background:#6b7280;border:5px solid #18335e;border-radius:50%}.analog i{width:18px;height:25px;left:37px;top:31px;background:#9ca3af;border-left:5px solid #18335e;border-right:5px solid #18335e}.tmr:before{width:64px;height:44px;left:14px;top:34px;background:#2563eb;border:5px solid #18335e;box-shadow:inset 0 -10px 0 rgba(0,0,0,.18)}.tmr:after{width:30px;height:30px;left:31px;top:10px;background:#18bfae;border:5px solid #18335e;border-radius:50%}.tmr i{width:12px;height:38px;left:40px;top:38px;background:#fbbf24;border-left:4px solid #18335e;border-right:4px solid #18335e}.film:before{width:64px;height:54px;left:14px;top:20px;background:#f7e18b;border:5px solid #18335e}.film:after{width:12px;height:12px;left:29px;top:36px;background:#18335e;box-shadow:24px 0 0 #18335e,12px 16px 0 #18335e}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.guide-box{padding:24px}.guide-box h3{margin:0 0 14px;color:var(--blue2);font-family:"DotGothic16",monospace}.guide-box li,.guide-box p{line-height:1.85}.mini-note{margin-top:16px;padding:14px;background:rgba(29,95,209,.06);border:2px dotted rgba(29,95,209,.36);border-radius:10px}.cta-area{max-width:760px;margin:30px auto 0}.cta-buttons{display:flex;gap:14px;justify-content:flex-start;flex-wrap:wrap;margin-top:18px}.cta-buttons.center{justify-content:center}.rpg-command{position:relative;display:inline-flex;align-items:center;min-height:50px;padding:12px 23px 12px 40px;color:var(--blue2);background:#fff;border:3px solid var(--blue);border-radius:10px;font-family:"DotGothic16",monospace;text-decoration:none;box-shadow:5px 5px 0 rgba(29,95,209,.18);cursor:pointer;transition:transform .14s ease,box-shadow .14s ease}.rpg-command:before{content:"▶";position:absolute;left:14px;color:var(--blue)}.rpg-command:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(29,95,209,.18)}.rpg-command.line{color:#046b33;border-color:var(--green)}.rpg-command.line:before{color:var(--green)}.record-card{max-width:650px;margin:0 auto;padding:24px}.record-no{margin:0 0 8px;color:var(--blue);font-family:"DotGothic16",monospace}.record-card h3{margin-top:0}.record-card dl{display:grid;grid-template-columns:90px 1fr;gap:12px 18px}.record-card dt{color:var(--muted);font-weight:800}.faq-item{max-width:850px;margin:0 auto 16px;padding:18px 22px}.faq-item summary{cursor:pointer;font-size:18px;font-weight:900}.faq-item p{color:var(--muted);line-height:1.75}.repair-form{max-width:760px;margin:0 auto;padding:26px}.form-message{margin:0 0 18px;font-size:22px;font-weight:800}.repair-form label{display:grid;gap:8px;margin:17px 0;font-weight:800}.repair-form input,.repair-form select,.repair-form textarea{width:100%;padding:13px 14px;border:2px solid rgba(29,95,209,.38);border-radius:10px;background:#fff;font:inherit}.repair-form input:focus,.repair-form select:focus,.repair-form textarea:focus{outline:3px solid rgba(29,95,209,.17);border-color:var(--blue)}.check{grid-template-columns:22px 1fr!important;align-items:start;font-weight:500!important}.submit{margin-top:12px}.line-box{max-width:700px;margin:0 auto;text-align:center}.footer{padding:28px 16px 44px;text-align:center;color:var(--muted);font-family:"DotGothic16",monospace}.pons-mascot{position:relative;width:78px;height:108px;flex:0 0 auto}.pons-mascot.large{transform:scale(1.18);transform-origin:center}.antenna{position:absolute;width:6px;height:18px;left:36px;top:0;background:#18335e}.antenna:before{content:"";position:absolute;width:13px;height:13px;left:-4px;top:-10px;border:4px solid #18335e;background:var(--blue);border-radius:50%}.head{position:absolute;width:58px;height:50px;left:10px;top:18px;background:#f7fafc;border:5px solid #18335e;border-radius:8px;box-shadow:inset 0 -7px 0 #dbe4ef}.head i{position:absolute;top:20px;width:8px;height:8px;background:#18335e;border-radius:50%}.head i:first-child{left:15px}.head i:last-child{right:15px}.body{position:absolute;width:42px;height:34px;left:18px;top:68px;background:var(--blue);border:5px solid #18335e;border-radius:8px;box-shadow:inset 0 -8px 0 rgba(0,0,0,.12)}.arm{position:absolute;width:22px;height:8px;top:76px;background:#dbe4ef;border:4px solid #18335e;border-radius:6px}.arm.left{left:0;transform:rotate(-18deg)}.arm.right{right:0;transform:rotate(18deg)}.leg{position:absolute;width:12px;height:18px;top:98px;background:#dbe4ef;border:4px solid #18335e;border-radius:5px}.leg.left{left:22px}.leg.right{right:22px}.wrench{position:absolute;right:-2px;top:55px;color:#18335e;font-size:26px;font-weight:900;transform:rotate(36deg)}@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}@keyframes cursor{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}@media(max-width:900px){.site-shell{width:min(100% - 24px,680px);padding-top:96px}.status-window{position:absolute;width:150px;right:12px;top:14px;animation:none}.brand-card{flex-direction:column;text-align:center;gap:16px;padding:20px}.shop-grid,.guide-grid{grid-template-columns:1fr}.shop-grid{gap:18px}.cards,.cards.single{grid-template-columns:1fr}.item-card{min-height:auto}.hero{min-height:72vh}.section-title:before,.section-title:after{max-width:80px}}@media(max-width:460px){.site-shell{width:calc(100% - 22px)}.status-window{width:138px}.status-row strong{font-size:13px}.brand-copy h1{font-size:42px}.hero-dialogue p,.support-card p,.shop-talk p,.section-talk p,.cta-talk p,.line-box p{font-size:18px}.menu-link{font-size:18px}.rpg-window{box-shadow:0 0 0 4px #fff,0 0 0 6px rgba(29,95,209,.15),5px 6px 0 var(--shadow)}}

/* v0.2-2 drift note / price */
.drift-note{padding:72px 0 0}
.note-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.note-box{padding:24px}.note-box p{margin:0 0 14px;line-height:1.9;font-weight:600}
.choose-box h3{margin:0 0 18px;color:var(--blue2);font-family:"DotGothic16",monospace}
.choose-row{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:13px 0;border-top:2px dotted rgba(29,95,209,.28)}
.choose-row:first-of-type{border-top:0}.choose-row span{color:var(--blue);font-family:"DotGothic16",monospace;animation:cursor 1s steps(2) infinite}.choose-row strong{display:block;line-height:1.55}.choose-row small{display:block;margin-top:4px;color:var(--blue);font-family:"DotGothic16",monospace}
.price-box{margin:14px 0;padding:13px 14px;background:rgba(29,95,209,.06);border:2px dotted rgba(29,95,209,.36);border-radius:10px}.price-box strong{display:block;color:var(--blue2);font-family:"DotGothic16",monospace;font-size:30px;line-height:1.1}.price-box small{display:block;margin-top:6px;color:var(--muted);font-size:12px}
.durability{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;margin:14px 0 16px;padding:12px 13px;border:2px solid rgba(29,95,209,.18);border-radius:10px;background:#fff}.durability span{font-family:"DotGothic16",monospace;color:var(--muted)}.durability strong{color:#d19b1d;letter-spacing:.08em}.durability em{grid-column:1 / -1;font-style:normal;color:var(--blue2);font-weight:900}
.recommended{border-color:#d19b1d;box-shadow:0 0 0 4px #fff,0 0 0 6px rgba(209,155,29,.18),8px 9px 0 rgba(209,155,29,.14)}.recommended::before{border-color:rgba(209,155,29,.34)}.recommend-badge{position:absolute;top:14px;right:14px;z-index:2;padding:5px 10px;color:#fff;background:#d19b1d;border-radius:999px;font-family:"DotGothic16",monospace;font-size:13px;box-shadow:3px 3px 0 rgba(0,0,0,.12)}
.price-note{max-width:820px;margin:22px auto 0;color:var(--muted);line-height:1.8;font-size:13px}@media (max-width:900px){.note-grid{grid-template-columns:1fr}}


/* v0.2-3 adjustments */
#drift .drift-note{
  padding-top:56px;
}
#drift .drift-note .section-title{
  margin-top:10px;
}
.form-note{
  margin:10px 0 18px;
  padding:13px 14px;
  color:var(--blue2);
  background:rgba(29,95,209,.06);
  border:2px dotted rgba(29,95,209,.36);
  border-radius:10px;
  line-height:1.75;
  font-weight:700;
}


/* v0.2-4 definite repair memo */
.drift-note{padding-top:58px;scroll-margin-top:24px;}
.drift-note .section-title{margin-top:8px;}
.note-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.note-box{padding:24px;}
.note-box h3,.choose-box h3{margin:0 0 18px;color:var(--blue2);font-family:"DotGothic16",monospace;}
.note-box p{margin:0 0 14px;line-height:1.9;font-weight:600;}
.choose-row{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:13px 0;border-top:2px dotted rgba(29,95,209,.28);}
.choose-row:first-of-type{border-top:0;}
.choose-row span{color:var(--blue);font-family:"DotGothic16",monospace;animation:cursor 1s steps(2) infinite;}
.choose-row strong{display:block;line-height:1.55;}
.choose-row small{display:block;margin-top:4px;color:var(--blue);font-family:"DotGothic16",monospace;}
.form-note{margin:10px 0 18px;padding:13px 14px;color:var(--blue2);background:rgba(29,95,209,.06);border:2px dotted rgba(29,95,209,.36);border-radius:10px;line-height:1.75;font-weight:700;}
@media (max-width:900px){.note-grid{grid-template-columns:1fr;}}


/* v0.2-5 repair memo before drift */
.drift-note{
  padding:72px 0 0;
  scroll-margin-top:24px;
}
.memo-with-illustration{
  grid-template-columns:1.05fr .95fr;
  align-items:stretch;
}
.memo-illust{
  padding:24px;
  overflow:hidden;
}
.illust-title{
  display:inline-block;
  margin-bottom:14px;
  padding:4px 10px;
  color:#fff;
  background:var(--blue);
  border-radius:4px;
  font-family:"DotGothic16",monospace;
  font-size:14px;
}
.stick-diagram{
  position:relative;
  height:240px;
  margin:10px 0 18px;
  background:
    linear-gradient(rgba(29,95,209,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,95,209,.05) 1px, transparent 1px),
    #fff;
  background-size:18px 18px;
  border:2px dotted rgba(29,95,209,.35);
  border-radius:12px;
}
.stick-cap{
  position:absolute;
  left:50%;
  top:25px;
  width:76px;
  height:42px;
  transform:translateX(-50%);
  background:#6b7280;
  border:5px solid #18335e;
  border-radius:28px;
  box-shadow:inset 0 -9px 0 rgba(0,0,0,.16);
}
.stick-shaft{
  position:absolute;
  left:50%;
  top:62px;
  width:26px;
  height:96px;
  transform:translateX(-50%) rotate(-8deg);
  background:#dbe4ef;
  border:5px solid #18335e;
  border-radius:12px;
}
.sensor-box{
  position:absolute;
  bottom:44px;
  width:78px;
  height:48px;
  background:#18bfae;
  border:5px solid #18335e;
  border-radius:8px;
  box-shadow:inset 0 -9px 0 rgba(0,0,0,.13);
}
.left-sensor{left:48px}
.right-sensor{right:48px}
.dust{
  position:absolute;
  width:12px;
  height:12px;
  background:#d19b1d;
  border:3px solid #18335e;
  border-radius:50%;
}
.dust-a{left:105px;bottom:98px}
.dust-b{right:100px;bottom:116px}
.axis-label,
.sensor-label,
.wear-label{
  position:absolute;
  padding:4px 8px;
  color:#fff;
  background:var(--blue2);
  border-radius:5px;
  font-family:"DotGothic16",monospace;
  font-size:12px;
}
.axis-label{left:50%;top:142px;transform:translateX(-50%)}
.sensor-label{left:34px;bottom:12px}
.wear-label{right:28px;top:92px;background:#d19b1d}
.memo-illust p{
  margin:0 0 10px;
  line-height:1.75;
  color:var(--muted);
  font-weight:700;
}
.drift-note .choose-box{
  margin-top:24px;
  padding:24px;
}
@media (max-width:900px){
  .memo-with-illustration{grid-template-columns:1fr}
  .stick-diagram{height:220px}
  .left-sensor{left:32px}
  .right-sensor{right:32px}
}


/* v0.3 official image assets */
.pons-image{
  display:block;
  width:108px;
  height:108px;
  object-fit:contain;
  image-rendering:auto;
  flex:0 0 auto;
}
.hero-pons{
  transform:scale(1.06);
}
.old-hidden{
  display:none !important;
}
.item-image-wrap{
  width:132px;
  height:132px;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
}
.item-image{
  width:122px;
  height:122px;
  object-fit:contain;
  display:block;
}
.item-card.recommended .item-image-wrap{
  margin-top:8px;
}
@media (max-width:460px){
  .pons-image{width:96px;height:96px;}
  .item-image-wrap{width:116px;height:116px;}
  .item-image{width:108px;height:108px;}
}


/* v0.3-1 full-width drift repair images */
#drift .item-image-wrap{
  width:100%;
  height:auto;
  min-height:0;
  margin:0 0 18px;
  display:block;
}

#drift .item-image{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  display:block;
  border-radius:10px;
}

#drift .item-card{
  overflow:hidden;
}

#drift .item-card.recommended .item-image-wrap{
  margin-top:8px;
}

@media (max-width:900px){
  #drift .item-image{
    width:100%;
  }
}


/* v0.3-2 layout/text refinements */
.swipe-hint{
  display:none;
  margin:-6px 0 14px;
  color:var(--blue2);
  font-family:"DotGothic16",monospace;
  font-size:14px;
  text-align:left;
}

#drift .item-image-wrap{
  width:100%;
  max-width:260px;
  height:auto;
  margin:0 auto 18px;
  display:block;
}

#drift .item-image{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
  border-radius:10px;
}

#drift .item-card{
  overflow:hidden;
}

.shop-talk{
  position:relative;
  min-height:300px;
  padding-bottom:128px;
}

.shop-pons-image{
  position:absolute;
  right:22px;
  bottom:18px;
  width:118px;
  height:118px;
  object-fit:contain;
  display:block;
  pointer-events:none;
}

@media (max-width:900px){
  .swipe-hint{
    display:block;
  }

  #drift .cards{
    display:flex;
    gap:16px;
    overflow-x:auto;
    padding:4px 18px 22px 4px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }

  #drift .cards::-webkit-scrollbar{
    height:8px;
  }

  #drift .cards::-webkit-scrollbar-thumb{
    background:rgba(29,95,209,.35);
    border-radius:999px;
  }

  #drift .item-card{
    flex:0 0 86%;
    scroll-snap-align:start;
    min-height:auto;
  }

  #drift .item-image-wrap{
    max-width:290px;
  }

  .shop-talk{
    min-height:260px;
    padding-bottom:120px;
  }

  .shop-pons-image{
    width:108px;
    height:108px;
  }
}

@media (max-width:460px){
  #drift .item-card{
    flex-basis:88%;
  }

  #drift .item-image-wrap{
    max-width:260px;
  }

  .shop-pons-image{
    right:16px;
    bottom:14px;
    width:98px;
    height:98px;
  }
}


/* v0.3-3 drift image balance
   ポテンショメーター画像内のテキストフレーム幅を基準に、
   アナログ/TMRのテキストフレーム幅が同じ見え方になるよう拡大。
*/
#drift .item-image-wrap{
  width:100%;
  max-width:none;
  height:310px;
  margin:0 auto 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

#drift .item-image{
  height:auto;
  object-fit:contain;
  display:block;
  border-radius:10px;
}

/* 基準：ポテンショメーター */
#drift .item-card:nth-child(1) .item-image{
  width:92%;
  max-width:330px;
}

/* アナログ/TMRは画像内のテキスト枠が小さく見えるため大きめ */
#drift .item-card:nth-child(2) .item-image,
#drift .item-card:nth-child(3) .item-image{
  width:108%;
  max-width:390px;
}

/* カードから少しはみ出す分も自然に見せる */
#drift .item-card{
  overflow:visible;
}

@media (max-width:900px){
  #drift .item-image-wrap{
    height:330px;
    margin-bottom:20px;
  }

  #drift .item-card:nth-child(1) .item-image{
    width:94%;
    max-width:360px;
  }

  #drift .item-card:nth-child(2) .item-image,
  #drift .item-card:nth-child(3) .item-image{
    width:110%;
    max-width:420px;
  }
}

@media (max-width:460px){
  #drift .item-image-wrap{
    height:300px;
  }

  #drift .item-card:nth-child(1) .item-image{
    width:94%;
    max-width:330px;
  }

  #drift .item-card:nth-child(2) .item-image,
  #drift .item-card:nth-child(3) .item-image{
    width:111%;
    max-width:380px;
  }
}


/* v0.3-4 confirmed product card images */
#drift .item-image-wrap{
  width:100%;
  max-width:340px;
  height:auto;
  margin:0 auto 20px;
  display:block;
  overflow:visible;
}

#drift .item-image{
  width:100%;
  max-width:340px;
  height:auto;
  object-fit:contain;
  display:block;
  border-radius:10px;
}

/* 確定画像3枚は同一キャンバス前提なので個別拡大を解除 */
#drift .item-card:nth-child(1) .item-image,
#drift .item-card:nth-child(2) .item-image,
#drift .item-card:nth-child(3) .item-image{
  width:100%;
  max-width:340px;
}

#drift .item-card{
  overflow:visible;
}

@media (max-width:900px){
  #drift .item-image-wrap{
    max-width:360px;
    margin-bottom:20px;
  }

  #drift .item-image,
  #drift .item-card:nth-child(1) .item-image,
  #drift .item-card:nth-child(2) .item-image,
  #drift .item-card:nth-child(3) .item-image{
    width:100%;
    max-width:360px;
  }
}

@media (max-width:460px){
  #drift .item-image-wrap{
    max-width:320px;
  }

  #drift .item-image,
  #drift .item-card:nth-child(1) .item-image,
  #drift .item-card:nth-child(2) .item-image,
  #drift .item-card:nth-child(3) .item-image{
    max-width:320px;
  }
}


/* v0.3-5 official logo / wider product cards / Pons speaker icon */
.official-brand-card{
  padding:18px 28px;
  justify-content:center;
  text-align:center;
}

.official-logo{
  display:block;
  width:min(430px, 82vw);
  height:auto;
  object-fit:contain;
}

.speaker{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.speaker-pons-icon{
  width:24px;
  height:24px;
  object-fit:contain;
  display:inline-block;
  margin:-5px 0 -4px;
  border-radius:3px;
}

/* 商品カードを少し低く、画像は横幅いっぱい寄せ */
#drift .cards{
  align-items:start;
}

#drift .item-card{
  padding:16px;
  min-height:0;
}

#drift .item-image-wrap{
  width:calc(100% + 32px);
  max-width:none;
  height:auto;
  margin:-10px -16px 10px;
  display:block;
  overflow:hidden;
}

#drift .item-image,
#drift .item-card:nth-child(1) .item-image,
#drift .item-card:nth-child(2) .item-image,
#drift .item-card:nth-child(3) .item-image{
  width:100%;
  max-width:none;
  height:auto;
  object-fit:contain;
  display:block;
  border-radius:10px 10px 6px 6px;
}

#drift .item-kind{
  margin:0 0 6px;
  font-size:13px;
}

#drift .item-card h3{
  margin:0 0 10px;
  font-size:20px;
  line-height:1.28;
}

#drift .price-box{
  padding:12px 14px;
  margin:0 0 10px;
}

#drift .price-box strong{
  font-size:28px;
  line-height:1;
}

#drift .price-box small{
  margin-top:4px;
}

#drift .durability{
  padding:10px 12px;
  margin:0 0 10px;
}

#drift .item-card p{
  margin:0 0 6px;
  line-height:1.55;
  font-size:14.5px;
}

#drift .recommend-badge{
  top:10px;
  right:10px;
  z-index:3;
}

@media (max-width:900px){
  #drift .cards{
    padding:4px 16px 18px 4px;
  }

  #drift .item-card{
    flex:0 0 86%;
    padding:15px;
  }

  #drift .item-image-wrap{
    width:calc(100% + 30px);
    margin:-9px -15px 10px;
  }

  #drift .item-card h3{
    font-size:20px;
  }

  #drift .price-box strong{
    font-size:28px;
  }
}

@media (max-width:460px){
  .official-logo{
    width:min(360px, 88vw);
  }

  #drift .item-card{
    flex-basis:88%;
    padding:14px;
  }

  #drift .item-image-wrap{
    width:calc(100% + 28px);
    margin:-8px -14px 10px;
  }

  #drift .item-card h3{
    font-size:19px;
  }

  #drift .item-card p{
    font-size:14px;
    line-height:1.5;
  }

  #drift .price-box{
    padding:11px 13px;
  }

  #drift .durability{
    padding:9px 11px;
  }
}


/* v0.3-6 mobile overflow fix / trimmed product image layout */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

/* 商品画像は余白削除済み画像をカード内で素直に横幅いっぱい表示 */
#drift .item-image-wrap{
  width:100%;
  max-width:none;
  height:auto;
  margin:0 0 10px;
  display:block;
  overflow:visible;
}

#drift .item-image,
#drift .item-card:nth-child(1) .item-image,
#drift .item-card:nth-child(2) .item-image,
#drift .item-card:nth-child(3) .item-image{
  width:100%;
  max-width:none;
  height:auto;
  object-fit:contain;
  display:block;
  border-radius:8px;
}

/* カード自体は画面外にはみ出させない */
#drift .item-card{
  overflow:hidden;
  max-width:100%;
}

/* スマホ時：ページ全体ではなく、カード列だけを横スライド */
@media (max-width:900px){
  #drift{
    overflow:hidden;
  }

  #drift .cards{
    width:100%;
    max-width:100%;
    display:flex;
    flex-wrap:nowrap;
    gap:14px;
    overflow-x:auto;
    overflow-y:visible;
    padding:4px 16px 18px 4px;
    margin:0;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }

  #drift .item-card{
    flex:0 0 calc(88vw - 28px);
    width:calc(88vw - 28px);
    max-width:420px;
    min-width:0;
    scroll-snap-align:start;
    padding:14px;
  }

  #drift .item-image-wrap{
    width:100%;
    margin:0 0 8px;
  }

  #drift .item-card h3{
    margin-bottom:8px;
  }

  #drift .price-box{
    margin-bottom:8px;
  }

  #drift .durability{
    margin-bottom:8px;
  }
}

@media (max-width:460px){
  #drift .cards{
    gap:12px;
    padding-right:14px;
  }

  #drift .item-card{
    flex-basis:calc(88vw - 22px);
    width:calc(88vw - 22px);
    padding:13px;
  }

  #drift .item-image-wrap{
    margin-bottom:7px;
  }
}


/* v0.3-14 rebuild speech layout */

/* 古いポンス小アイコンと下部ポンスは使わない */
.speaker-pons-icon,
.shop-pons-image,
.swipe-hint{
  display:none !important;
}

/* ポンスのセリフは外枠なし。左にポンス、右に吹き出し */
.pons-speech{
  display:grid;
  grid-template-columns:92px minmax(0, 1fr);
  column-gap:14px;
  align-items:start;
  width:100%;
  max-width:100%;
  margin:0 0 18px;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
}

.pons-speech.no-pons-image{
  display:block;
}

.pons-talk-image{
  width:92px;
  height:92px;
  object-fit:contain;
  display:block;
  margin:0;
}

/* テキストだけを吹き出し枠にする */
.pons-bubble{
  position:relative;
  min-width:0;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  background:var(--paper, #fff);
  border:3px solid var(--blue, #1d5fd1);
  border-radius:10px;
  box-shadow:6px 6px 0 rgba(29,95,209,.15);
  padding:14px 16px;
  overflow-wrap:anywhere;
  word-break:normal;
  white-space:normal;
}

/* ポンス画像がある時だけ吹き出し口を出す */
.pons-speech:not(.no-pons-image) .pons-bubble::before{
  content:"";
  position:absolute;
  left:-13px;
  top:26px;
  width:18px;
  height:18px;
  background:var(--paper, #fff);
  border-left:3px solid var(--blue, #1d5fd1);
  border-bottom:3px solid var(--blue, #1d5fd1);
  transform:rotate(45deg);
}

.pons-bubble .speaker{
  display:inline-block !important;
  width:auto !important;
  max-width:max-content !important;
  min-width:0 !important;
  padding:3px 8px !important;
  margin:0 0 8px !important;
  border:2px solid var(--blue, #1d5fd1) !important;
  border-radius:6px !important;
  background:rgba(255,255,255,.95) !important;
  color:var(--blue2, #174ea6);
  line-height:1.1 !important;
}

.pons-bubble h2,
.pons-bubble h3{
  margin:2px 0 10px;
  line-height:1.35;
}

.pons-bubble p{
  margin:0 0 8px;
  max-width:100%;
  line-height:1.65;
  overflow-wrap:anywhere;
  word-break:normal;
  white-space:normal;
}

.pons-bubble p:last-child{
  margin-bottom:0;
}

/* 既存rpg-window指定の影響を受けないようにする */
.pons-speech.rpg-window,
.pons-speech .rpg-window{
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

/* 修理屋メニューの左カラムでも自然に収める */
.shop-talk.pons-speech{
  margin-bottom:0;
}

/* TMRおすすめバッジでカードが下がらないように固定 */
#drift .item-card{
  position:relative;
  overflow:hidden;
  min-height:0;
}

#drift .recommend-badge{
  position:absolute;
  top:10px;
  right:10px;
  z-index:5;
  margin:0;
}

#drift .item-card.recommended .item-image-wrap{
  margin-top:0 !important;
}

/* 商品カード画像は余白削除済み画像を横幅いっぱい表示 */
#drift .item-image-wrap{
  width:100%;
  max-width:none;
  height:auto;
  margin:0 0 8px;
  display:block;
  overflow:visible;
}

#drift .item-image{
  width:100%;
  max-width:none;
  height:auto;
  display:block;
  object-fit:contain;
}

/* スマホ版：ページ全体は横スクロールさせず、カード列だけ横スライド */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

@media (max-width:900px){
  #drift{
    overflow:hidden;
  }

  #drift .cards{
    width:100%;
    max-width:100%;
    display:flex;
    flex-wrap:nowrap;
    gap:10px;
    overflow-x:auto;
    overflow-y:visible;
    padding:4px 12px 18px 4px;
    margin:0;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }

  #drift .item-card{
    flex:0 0 calc(60vw - 8px);
    width:calc(60vw - 8px);
    max-width:320px;
    min-width:218px;
    scroll-snap-align:start;
    padding:11px;
  }

  #drift .item-card h3{
    font-size:17px;
    line-height:1.25;
    margin-bottom:7px;
  }

  #drift .item-kind{
    font-size:12px;
    margin-bottom:5px;
  }

  #drift .price-box{
    padding:9px 10px;
    margin-bottom:7px;
  }

  #drift .price-box strong{
    font-size:23px;
  }

  #drift .price-box small{
    font-size:11px;
  }

  #drift .durability{
    padding:8px 9px;
    margin-bottom:7px;
    font-size:13px;
  }

  #drift .item-card p{
    font-size:13px;
    line-height:1.42;
    margin-bottom:5px;
  }

  .pons-speech{
    grid-template-columns:72px minmax(0, 1fr);
    column-gap:10px;
  }

  .pons-talk-image{
    width:72px;
    height:72px;
  }

  .pons-bubble{
    padding:12px 12px;
  }

  .pons-speech:not(.no-pons-image) .pons-bubble::before{
    left:-12px;
    top:22px;
    width:16px;
    height:16px;
  }

  .pons-bubble p{
    line-height:1.58;
  }
}

@media (max-width:460px){
  #drift .cards{
    gap:10px;
    padding-right:12px;
  }

  #drift .item-card{
    flex-basis:calc(60vw - 8px);
    width:calc(60vw - 8px);
    min-width:218px;
    padding:11px;
  }

  .pons-speech{
    grid-template-columns:62px minmax(0, 1fr);
    column-gap:9px;
  }

  .pons-talk-image{
    width:62px;
    height:62px;
  }

  .pons-bubble{
    padding:11px 11px;
  }
}


/* v0.3-15 hero speech Pons image */
.hero-dialogue.pons-speech{
  display:grid !important;
  grid-template-columns:92px minmax(0, 1fr) !important;
  column-gap:14px !important;
  align-items:start !important;
}

.hero-dialogue.pons-speech .pons-talk-image{
  display:block !important;
  width:92px !important;
  height:92px !important;
  object-fit:contain;
  margin:0 !important;
}

/* TOPの吹き出しにもポンス側の吹き出し口を表示 */
.hero-dialogue.pons-speech .pons-bubble::before{
  content:"" !important;
  position:absolute !important;
  left:-13px !important;
  top:26px !important;
  width:18px !important;
  height:18px !important;
  background:var(--paper, #fff) !important;
  border-left:3px solid var(--blue, #1d5fd1) !important;
  border-bottom:3px solid var(--blue, #1d5fd1) !important;
  transform:rotate(45deg) !important;
  display:block !important;
}

/* ロゴ下に単体で置かれていたポンス画像だけは非表示維持 */
.hero > .pons-image.hero-pons,
.official-brand-card + .pons-image.hero-pons{
  display:none !important;
}

@media (max-width:900px){
  .hero-dialogue.pons-speech{
    grid-template-columns:72px minmax(0, 1fr) !important;
    column-gap:10px !important;
  }

  .hero-dialogue.pons-speech .pons-talk-image{
    width:72px !important;
    height:72px !important;
  }

  .hero-dialogue.pons-speech .pons-bubble::before{
    left:-12px !important;
    top:22px !important;
    width:16px !important;
    height:16px !important;
  }
}

@media (max-width:460px){
  .hero-dialogue.pons-speech{
    grid-template-columns:62px minmax(0, 1fr) !important;
    column-gap:9px !important;
  }

  .hero-dialogue.pons-speech .pons-talk-image{
    width:62px !important;
    height:62px !important;
  }
}


/* v0.3-16 正データ調整
   - 全ポンス吹き出しをレトロゲームの会話フレーム風に統一
   - ご依頼前の公式サポート案内はポンスのセリフではなく重要事項ボックス化
*/

.v03-16-retro-dialog .pons-speech{
  align-items:flex-end !important;
  gap:14px !important;
  margin:22px 0 !important;
}

.v03-16-retro-dialog .pons-talk-image,
.v03-16-retro-dialog .pons-speech img{
  filter:drop-shadow(5px 5px 0 rgba(22, 19, 14, .22)) !important;
}

/* レトロゲーム会話フレーム */
.v03-16-retro-dialog .pons-bubble{
  position:relative !important;
  background:#1e211b !important;
  color:#fff4d0 !important;
  border:4px solid #fff4d0 !important;
  border-radius:0 !important;
  box-shadow:
    inset 0 0 0 3px rgba(85, 126, 98, .65),
    6px 6px 0 rgba(22, 19, 14, .26) !important;
  padding:18px 18px 16px !important;
  line-height:1.8 !important;
}

/* 既存の丸い吹き出し三角をゲームUIっぽい接続に変更 */
.v03-16-retro-dialog .pons-bubble::before{
  content:"" !important;
  position:absolute !important;
  left:-14px !important;
  bottom:20px !important;
  width:18px !important;
  height:18px !important;
  background:#1e211b !important;
  border-left:4px solid #fff4d0 !important;
  border-bottom:4px solid #fff4d0 !important;
  border-top:0 !important;
  border-right:0 !important;
  transform:rotate(45deg) !important;
  box-shadow:none !important;
}

.v03-16-retro-dialog .pons-bubble::after{
  content:"ポンス" !important;
  position:absolute !important;
  top:-16px !important;
  left:14px !important;
  padding:2px 9px 3px !important;
  background:#fff4d0 !important;
  color:#1e211b !important;
  border:3px solid #1e211b !important;
  font-family:"DotGothic16","Noto Sans JP",sans-serif !important;
  font-size:12px !important;
  letter-spacing:.04em !important;
  line-height:1 !important;
}

/* 既存speakerは重複するのでゲームフレーム側では隠す */
.v03-16-retro-dialog .pons-bubble .speaker{
  display:none !important;
}

.v03-16-retro-dialog .pons-bubble p,
.v03-16-retro-dialog .pons-bubble h2,
.v03-16-retro-dialog .pons-bubble h3{
  color:#fff4d0 !important;
  margin-top:0 !important;
  font-family:"DotGothic16","Noto Sans JP",sans-serif !important;
  letter-spacing:.01em !important;
}

.v03-16-retro-dialog .pons-bubble p{
  margin-bottom:0 !important;
}

.v03-16-retro-dialog .pons-bubble strong{
  color:#ffe07a !important;
}

/* 重要事項ボックス：ポンスの会話ではなく、案内板として派手めに */
.v03-16-retro-dialog .important-notice{
  position:relative;
  margin:24px auto 28px;
  max-width:980px;
  padding:20px 20px 20px 22px;
  background:
    linear-gradient(180deg, #fff3c8 0%, #ffe19b 100%);
  border:5px solid #2a1b10;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.54),
    8px 8px 0 rgba(30,24,15,.22);
  color:#2a1b10;
}

.v03-16-retro-dialog .important-notice::before{
  content:"";
  position:absolute;
  inset:8px;
  border:2px dashed rgba(128,73,22,.38);
  pointer-events:none;
}

.v03-16-retro-dialog .notice-badge{
  display:inline-block;
  position:relative;
  z-index:1;
  margin:0 0 10px;
  padding:5px 10px;
  background:#a8382c;
  color:#fff7d6;
  border:3px solid #2a1b10;
  box-shadow:4px 4px 0 rgba(30,24,15,.18);
  font-family:"DotGothic16","Noto Sans JP",sans-serif;
  font-size:13px;
  letter-spacing:.06em;
}

.v03-16-retro-dialog .notice-content{
  position:relative;
  z-index:1;
}

.v03-16-retro-dialog .notice-content h2{
  margin:0 0 10px;
  color:#2a1b10;
  font-family:"DotGothic16","Noto Sans JP",sans-serif;
  font-size:clamp(22px, 3.2vw, 32px);
  line-height:1.35;
}

.v03-16-retro-dialog .notice-content p{
  margin:0 0 6px;
  color:#2a1b10;
  font-weight:800;
  line-height:1.75;
}

.v03-16-retro-dialog .notice-content p:last-child{
  margin-bottom:0;
}

@media (max-width:720px){
  .v03-16-retro-dialog .pons-speech{
    gap:10px !important;
    margin:18px 0 !important;
  }

  .v03-16-retro-dialog .pons-bubble{
    border-width:3px !important;
    padding:16px 14px 13px !important;
    box-shadow:
      inset 0 0 0 2px rgba(85, 126, 98, .65),
      4px 4px 0 rgba(22, 19, 14, .22) !important;
  }

  .v03-16-retro-dialog .pons-bubble::before{
    left:-10px !important;
    bottom:16px !important;
    width:14px !important;
    height:14px !important;
    border-left-width:3px !important;
    border-bottom-width:3px !important;
  }

  .v03-16-retro-dialog .pons-bubble::after{
    top:-13px !important;
    left:10px !important;
    border-width:2px !important;
    font-size:10px !important;
  }

  .v03-16-retro-dialog .pons-bubble p{
    font-size:13px !important;
    line-height:1.7 !important;
  }

  .v03-16-retro-dialog .important-notice{
    padding:16px 14px;
    border-width:4px;
    box-shadow:
      inset 0 0 0 2px rgba(255,255,255,.54),
      5px 5px 0 rgba(30,24,15,.2);
  }

  .v03-16-retro-dialog .important-notice::before{
    inset:6px;
  }
}


/* v0.3-19
   - 通常フレームは元のv0.3-16/v0.3-15系へ戻す
   - ポンスのセリフフレームだけ、好評だった緑系丸フレームへ変更
   - 通常フレームへのドット段差・外枠追加はなし
*/

/* ポンス吹き出し：黒ベタ廃止。通常フレームとは別色の緑系丸フレーム */
.v03-19-original-frames-pons-round .pons-bubble{
  position:relative !important;
  background:
    linear-gradient(180deg, #f0ffe3 0%, #d8f0c4 100%) !important;
  color:#24301f !important;
  border:4px solid #385432 !important;
  border-radius:18px !important;
  box-shadow:
    0 0 0 2px #fbfff4,
    0 0 0 5px #8caf73,
    6px 6px 0 rgba(35, 43, 27, .18) !important;
  padding:18px 20px 16px !important;
  line-height:1.75 !important;
}

.v03-19-original-frames-pons-round .pons-bubble::before{
  content:"" !important;
  position:absolute !important;
  left:-13px !important;
  bottom:22px !important;
  width:20px !important;
  height:20px !important;
  background:#d8f0c4 !important;
  border-left:4px solid #385432 !important;
  border-bottom:4px solid #385432 !important;
  border-top:0 !important;
  border-right:0 !important;
  border-radius:0 0 0 6px !important;
  transform:rotate(45deg) !important;
  box-shadow:
    -2px 2px 0 #fbfff4,
    -5px 5px 0 #8caf73 !important;
}

.v03-19-original-frames-pons-round .pons-bubble::after{
  content:"ポンス" !important;
  position:absolute !important;
  top:-17px !important;
  left:16px !important;
  padding:3px 10px 4px !important;
  background:#385432 !important;
  color:#f5ffe9 !important;
  border:3px solid #f5ffe9 !important;
  border-radius:999px !important;
  box-shadow:3px 3px 0 rgba(35, 43, 27, .16) !important;
  font-family:"DotGothic16","Noto Sans JP",sans-serif !important;
  font-size:12px !important;
  letter-spacing:.04em !important;
  line-height:1 !important;
}

.v03-19-original-frames-pons-round .pons-bubble .speaker{
  display:none !important;
}

.v03-19-original-frames-pons-round .pons-bubble p,
.v03-19-original-frames-pons-round .pons-bubble h2,
.v03-19-original-frames-pons-round .pons-bubble h3{
  color:#24301f !important;
  font-family:"DotGothic16","Noto Sans JP",sans-serif !important;
}

.v03-19-original-frames-pons-round .pons-bubble p{
  line-height:1.75 !important;
}

.v03-19-original-frames-pons-round .pons-speech{
  gap:16px !important;
}

@media (max-width:720px){
  .v03-19-original-frames-pons-round .pons-bubble{
    border-width:3px !important;
    border-radius:15px !important;
    padding:16px 15px 14px !important;
    box-shadow:
      0 0 0 2px #fbfff4,
      0 0 0 4px #8caf73,
      4px 4px 0 rgba(35, 43, 27, .16) !important;
  }

  .v03-19-original-frames-pons-round .pons-bubble::before{
    left:-10px !important;
    bottom:18px !important;
    width:15px !important;
    height:15px !important;
    border-left-width:3px !important;
    border-bottom-width:3px !important;
    box-shadow:
      -2px 2px 0 #fbfff4,
      -4px 4px 0 #8caf73 !important;
  }

  .v03-19-original-frames-pons-round .pons-bubble::after{
    top:-13px !important;
    left:12px !important;
    border-width:2px !important;
    font-size:10px !important;
  }

  .v03-19-original-frames-pons-round .pons-bubble p{
    font-size:13px !important;
    line-height:1.7 !important;
  }
}


/* v0.3-20
   - ポンス画像をセリフフレームの下段横から上段横へ配置
   - ポンスフレーム、通常フレーム、重要事項の見た目はv0.3-19を維持
*/

.v03-20-pons-top-align .pons-speech{
  align-items:flex-start !important;
}

/* ラベル分の高さに合わせて、画像を少し下げすぎない */
.v03-20-pons-top-align .pons-talk-image,
.v03-20-pons-top-align .pons-speech img{
  margin-top:2px !important;
}

/* PONSラベルが上にはみ出す分、吹き出し側の上余白を少しだけ確保 */
.v03-20-pons-top-align .pons-bubble{
  margin-top:10px !important;
}

@media (max-width:720px){
  .v03-20-pons-top-align .pons-speech{
    align-items:flex-start !important;
  }

  .v03-20-pons-top-align .pons-talk-image,
  .v03-20-pons-top-align .pons-speech img{
    margin-top:3px !important;
  }

  .v03-20-pons-top-align .pons-bubble{
    margin-top:8px !important;
  }
}


/* v0.3-28 スティック内部メモ画像差し替え
   - ポンス画像は触らない
   - memo-illust 内の簡易図解だけ、採用画像へ差し替え
*/

.stick-internal-memo-figure{
  margin:14px 0 0;
  padding:0;
}

.stick-internal-memo-image{
  display:block;
  width:100%;
  max-width:900px;
  height:auto;
  margin:0 auto;
  border-radius:14px;
  box-shadow:0 12px 26px rgba(20,35,60,.12);
}

@media (max-width:720px){
  .stick-internal-memo-figure{
    margin-top:10px;
  }

  .stick-internal-memo-image{
    border-radius:10px;
  }
}


/* v0.3-30
   - ポンスの全セリフのフォントサイズを少し上げる
   - 通常本文、通常フレームは変更しない
*/

.v03-30-pons-text-up .pons-bubble p,
.v03-30-pons-text-up .pons-bubble h2,
.v03-30-pons-text-up .pons-bubble h3{
  font-size:1.06em !important;
}

.v03-30-pons-text-up .pons-bubble p{
  line-height:1.78 !important;
}

@media (max-width:720px){
  .v03-30-pons-text-up .pons-bubble p,
  .v03-30-pons-text-up .pons-bubble h2,
  .v03-30-pons-text-up .pons-bubble h3{
    font-size:1.03em !important;
  }

  .v03-30-pons-text-up .pons-bubble p{
    line-height:1.72 !important;
  }
}


/* v0.3-31
   - 「なぜスティックは勝手に動くのか」を色変更、少し大きく、太字に
   - 修理メモ本文内の「ユニット」「ポテンショメーター」を太字に
*/

.v03-31-drift-note-emphasis .drift-note-heading{
  color:#2f6b3a !important;
  font-size:1.18em !important;
  font-weight:900 !important;
  line-height:1.45 !important;
  margin-bottom:12px !important;
}

.v03-31-drift-note-emphasis #drift-note .pons-bubble p strong{
  font-weight:900 !important;
  color:#1f5f34 !important;
}

@media (max-width:720px){
  .v03-31-drift-note-emphasis .drift-note-heading{
    font-size:1.12em !important;
  }
}


/* v0.3-32 強制修正
   - 「なぜスティックは勝手に動くのか」を確実に色変更・大型化・太字化
   - 「ユニット」「ポテンショメーター」を確実に太字化
*/

body.v03-32-force-drift-emphasis #drift-note .pons-bubble h3.drift-note-heading-force{
  display:block !important;
  color:#145f38 !important;
  font-size:clamp(20px, 2.8vw, 28px) !important;
  font-weight:900 !important;
  line-height:1.35 !important;
  margin:0 0 14px !important;
  padding:0 0 8px !important;
  border-bottom:3px solid rgba(20, 95, 56, .35) !important;
  letter-spacing:.02em !important;
}

body.v03-32-force-drift-emphasis #drift-note .pons-bubble .drift-keyword-force{
  display:inline !important;
  color:#145f38 !important;
  font-weight:900 !important;
  background:rgba(255, 244, 149, .72) !important;
  padding:0 .12em !important;
  border-radius:4px !important;
}

@media (max-width:720px){
  body.v03-32-force-drift-emphasis #drift-note .pons-bubble h3.drift-note-heading-force{
    font-size:20px !important;
    line-height:1.32 !important;
  }
}


/* v0.3-39
   - v0.3-33 から作り直し
   - JSなし、固定pxなし
   - 左の見えているポンス吹き出し .pons-bubble と
     右の「アナログスティックの構造」外フレーム .memo-illust を
     同じグリッド行で同じ高さにする
   - ズレの原因だった .note-box の余白をこの箇所だけ無効化
*/

body.v03-39-true-frame-equal #drift-note .memo-with-illustration{
  display:grid !important;
  grid-template-columns:1.05fr .95fr !important;
  gap:24px !important;
  align-items:stretch !important;
}

/* 左側の親余白を消す。見た目の比較対象は親ではなく緑の .pons-bubble */
body.v03-39-true-frame-equal #drift-note .memo-with-illustration > .note-box{
  padding:0 !important;
  margin:0 !important;
  display:grid !important;
  grid-template-columns:auto minmax(0, 1fr) !important;
  gap:16px !important;
  align-items:stretch !important;
  align-self:stretch !important;
  height:auto !important;
  min-height:0 !important;
  box-sizing:border-box !important;
}

/* ポンス画像は上寄せ。高さ合わせの対象にはしない */
body.v03-39-true-frame-equal #drift-note .memo-with-illustration > .note-box .pons-talk-image{
  align-self:start !important;
  margin-top:2px !important;
}

/* 左の見えているセリフフレームを行の高さいっぱいにする */
body.v03-39-true-frame-equal #drift-note .memo-with-illustration > .note-box .pons-bubble{
  align-self:stretch !important;
  height:100% !important;
  min-height:0 !important;
  margin-top:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

/* 右の外フレームも同じ行の高さいっぱいにする */
body.v03-39-true-frame-equal #drift-note .memo-with-illustration > .memo-illust{
  align-self:stretch !important;
  height:100% !important;
  min-height:0 !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

/* 右フレーム内は、タイトル固定 + 画像が残りスペースに収まる */
body.v03-39-true-frame-equal #drift-note .memo-illust .illust-title{
  flex:0 0 auto !important;
}

body.v03-39-true-frame-equal #drift-note .memo-illust .stick-internal-memo-figure{
  flex:1 1 auto !important;
  min-height:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:12px 0 0 !important;
  overflow:hidden !important;
}

body.v03-39-true-frame-equal #drift-note .memo-illust .stick-internal-memo-image{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
}

/* スマホは縦積みなので高さ合わせ解除 */
@media (max-width:900px){
  body.v03-39-true-frame-equal #drift-note .memo-with-illustration{
    grid-template-columns:1fr !important;
    align-items:start !important;
  }

  body.v03-39-true-frame-equal #drift-note .memo-with-illustration > .note-box{
    padding:0 !important;
    align-items:start !important;
    height:auto !important;
  }

  body.v03-39-true-frame-equal #drift-note .memo-with-illustration > .note-box .pons-bubble,
  body.v03-39-true-frame-equal #drift-note .memo-with-illustration > .memo-illust{
    height:auto !important;
    min-height:0 !important;
  }

  body.v03-39-true-frame-equal #drift-note .memo-with-illustration > .memo-illust{
    display:block !important;
    overflow:visible !important;
  }

  body.v03-39-true-frame-equal #drift-note .memo-illust .stick-internal-memo-figure{
    display:block !important;
    height:auto !important;
    overflow:visible !important;
    margin:12px 0 0 !important;
  }

  body.v03-39-true-frame-equal #drift-note .memo-illust .stick-internal-memo-image{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
  }
}


/* v0.3-41 受付前のご注意 */
.pre-acceptance-note{
  margin-top:24px;
  padding:18px 20px;
  border-left:6px solid #d88a21 !important;
}

.pre-acceptance-note h3{
  margin:0 0 10px;
  font-family:"DotGothic16","Noto Sans JP",sans-serif;
  color:#5b3414;
}

.pre-acceptance-note p{
  margin:0 0 8px;
  line-height:1.75;
  font-weight:700;
}

.pre-acceptance-note p:last-child{
  margin-bottom:0;
}

@media (max-width:720px){
  .pre-acceptance-note{
    margin-top:18px;
    padding:15px 14px;
  }
}


/* v0.3-44
   スマホ表示：修理屋メニュー内のポンスセリフ下の余白を削除
*/
@media (max-width:720px){
  #shop .pons-speech,
  #shop .pons-speech.shop-talk,
  #shop .shop-talk{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }

  #shop .pons-speech + *,
  #shop .shop-talk + *{
    margin-top:12px !important;
  }

  #shop .pons-bubble{
    margin-bottom:0 !important;
  }

  #shop .pons-bubble p:last-child{
    margin-bottom:0 !important;
  }
}


/* v0.3-45 修理受付フォーム */
.repair-form input:required,
.repair-form select:required,
.repair-form textarea:required{
  border-color:#8b5a2b;
}

.repair-form label:has(input:required)::after,
.repair-form label:has(select:required)::after,
.repair-form label:has(textarea:required)::after{
  content:" 必須";
  display:inline-block;
  margin-left:6px;
  padding:2px 6px;
  border-radius:999px;
  background:#ffe0b0;
  color:#5b3414;
  font-size:.72rem;
  font-weight:900;
  vertical-align:middle;
}

.repair-form label.check:has(input:required)::after{
  content:"";
  display:none;
}


/* v0.3-46 必須表示を赤いアスタリスクへ変更 */
.repair-form label:has(input:required)::after,
.repair-form label:has(select:required)::after,
.repair-form label:has(textarea:required)::after{
  content:none !important;
  display:none !important;
}

.required-mark{
  color:#d62828;
  font-weight:900;
  margin-left:4px;
}

.required-note{
  margin:6px 0 0 !important;
  font-size:.9rem;
  font-weight:900;
  color:#5b3414;
}

.required-note .required-mark{
  margin-left:0;
  margin-right:3px;
}

.repair-form input:required,
.repair-form select:required,
.repair-form textarea:required{
  border-color:#8b5a2b;
}

.repair-form input:required:invalid,
.repair-form select:required:invalid,
.repair-form textarea:required:invalid{
  border-color:#d62828;
}


/* v0.3-47 必須注記とアスタリスク位置調整 */
.repair-form .form-talk .required-note{
  display:none !important;
}

.required-note-outside{
  margin:8px 0 18px !important;
  padding-left:0;
  font-size:.9rem;
  font-weight:900;
  color:#5b3414;
}

.repair-form label{
  line-height:1.55;
}

.repair-form label > .required-mark{
  display:inline !important;
  vertical-align:baseline !important;
  margin-left:4px !important;
  margin-right:0 !important;
  position:static !important;
}

.repair-form label > input,
.repair-form label > select,
.repair-form label > textarea{
  display:block;
  width:100%;
  margin-top:8px;
}

.repair-form label.check > input{
  display:inline-block;
  width:auto;
  margin-top:0;
}


/* v0.3-48 項目名とアスタリスクを同じ行に固定 */
.repair-form label .field-title{
  display:inline-flex !important;
  align-items:baseline !important;
  gap:4px !important;
  width:auto !important;
  max-width:100% !important;
  line-height:1.4 !important;
  white-space:normal !important;
}

.repair-form label .field-title .required-mark{
  display:inline !important;
  margin:0 !important;
  position:static !important;
  transform:none !important;
  vertical-align:baseline !important;
  line-height:1 !important;
}

.repair-form label > input,
.repair-form label > select,
.repair-form label > textarea{
  display:block !important;
  width:100% !important;
  margin-top:8px !important;
}


/* v0.3-50 チェック項目の見出し */
.confirm-title{
  margin:18px 0 8px;
  font-weight:900;
  line-height:1.4;
  color:#3a2414;
}

.confirm-title .required-mark{
  margin-left:4px;
}


/* v0.3-51 フォーム送信後表示 */
.form-success-actions{
  margin:10px 0 18px;
  text-align:center;
}

.form-success-actions[hidden]{
  display:none !important;
}

.form-success-actions .rpg-command{
  display:inline-flex;
  justify-content:center;
  align-items:center;
}


/* v0.3-55 「相談だけでも大丈夫です。」を吹き出し内で左寄せ */
.consult-left{
  text-align:left !important;
  align-self:flex-start !important;
  width:100% !important;
}


/* v0.3-56 トップ挨拶吹き出しの色を他のポンス吹き出しと統一 */
.top-greeting-bubble{
  background:var(--pons-bubble-bg, #e9ffd8) !important;
  color:var(--pons-bubble-text, #24401f) !important;
  border-color:var(--pons-bubble-border, #4f8f3a) !important;
}

.top-greeting-bubble::before,
.top-greeting-bubble::after{
  background:var(--pons-bubble-bg, #e9ffd8) !important;
  border-color:var(--pons-bubble-border, #4f8f3a) !important;
}

.top-greeting-bubble .speaker,
.top-greeting-bubble p{
  color:inherit !important;
}


/* v0.3-60
   トップ挨拶吹き出しの色違い修正。
   原因：TOP専用 .hero-dialogue.pons-speech .pons-bubble::before が
   他のポンス緑フレームより高い詳細度で、吹き出し口だけ青/白の色指定を残していた。
   元々の script.js 効果音は触らない。
*/
body.v03-19-original-frames-pons-round .hero-dialogue.pons-speech .top-greeting-bubble.pons-bubble{
  background:linear-gradient(180deg, #f0ffe3 0%, #d8f0c4 100%) !important;
  color:#24301f !important;
  border-color:#385432 !important;
  box-shadow:
    0 0 0 2px #fbfff4,
    0 0 0 5px #8caf73,
    6px 6px 0 rgba(35, 43, 27, .18) !important;
}

body.v03-19-original-frames-pons-round .hero-dialogue.pons-speech .top-greeting-bubble.pons-bubble::before{
  background:#d8f0c4 !important;
  border-left:4px solid #385432 !important;
  border-bottom:4px solid #385432 !important;
  border-top:0 !important;
  border-right:0 !important;
  box-shadow:
    -2px 2px 0 #fbfff4,
    -5px 5px 0 #8caf73 !important;
}

body.v03-19-original-frames-pons-round .hero-dialogue.pons-speech .top-greeting-bubble.pons-bubble::after{
  background:#385432 !important;
  color:#f5ffe9 !important;
  border-color:#f5ffe9 !important;
  box-shadow:3px 3px 0 rgba(35, 43, 27, .16) !important;
}

body.v03-19-original-frames-pons-round .hero-dialogue.pons-speech .top-greeting-bubble.pons-bubble p,
body.v03-19-original-frames-pons-round .hero-dialogue.pons-speech .top-greeting-bubble.pons-bubble h2,
body.v03-19-original-frames-pons-round .hero-dialogue.pons-speech .top-greeting-bubble.pons-bubble h3{
  color:#24301f !important;
}

body.v03-19-original-frames-pons-round .hero-dialogue.pons-speech .top-greeting-bubble.pons-bubble .speaker{
  display:none !important;
}


/* v0.3-63 指定3点のみ修正 */

/* ボタン修理／導電フィルム交換カードの正画像を大きく表示 */
#button .item-image-wrap{
  min-height:210px !important;
  padding:10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#button .item-image-wrap .item-image[src$="conductive-film-buttons.png"]{
  width:min(100%, 360px) !important;
  max-width:360px !important;
  height:auto !important;
  object-fit:contain !important;
  transform:scale(1.18);
  transform-origin:center;
}

@media (max-width:720px){
  #button .item-image-wrap{
    min-height:190px !important;
    padding:6px !important;
    margin-bottom:10px !important;
  }

  #button .item-image-wrap .item-image[src$="conductive-film-buttons.png"]{
    width:100% !important;
    max-width:320px !important;
    transform:scale(1.22);
  }

  /* スマホ：修理屋メニューのポンスセリフ「メニューから選んでください。」下の余分な余白を削除 */
  #shop .shop-talk,
  #shop .section-talk,
  #shop .pons-speech.shop-talk,
  #shop .pons-speech.section-talk{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }

  #shop .shop-talk .pons-bubble,
  #shop .section-talk .pons-bubble{
    margin-bottom:0 !important;
  }

  #shop .shop-talk .pons-bubble p:last-child,
  #shop .section-talk .pons-bubble p:last-child,
  #shop #menuTalk{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }

  #shop .shop-talk + *,
  #shop .section-talk + *,
  #shop .pons-speech + .shop-menu,
  #shop .pons-speech + .cards{
    margin-top:8px !important;
  }
}


/* v0.3-64
   - ポンスのセリフをすべてピクセル文字フォントへ統一
   - ポンス吹き出しの横幅をテキスト量に合わせて可変にする
*/

/* ポンスセリフ全体のフォント統一 */
.pons-speech,
.pons-speech .pons-bubble,
.pons-speech .pons-bubble p,
.pons-speech .pons-bubble h2,
.pons-speech .pons-bubble h3,
.pons-speech .pons-bubble .speaker,
.pons-bubble::after{
  font-family:"DotGothic16","Noto Sans JP",sans-serif !important;
}

/* 吹き出しを親幅いっぱいに伸ばさず、文字量に合わせる */
.pons-speech .pons-bubble{
  width:fit-content !important;
  max-width:100% !important;
  justify-self:start !important;
}

/* 吹き出し内の本文も幅いっぱいに広げない */
.pons-speech .pons-bubble p,
.pons-speech .pons-bubble h2,
.pons-speech .pons-bubble h3{
  width:auto !important;
  max-width:100% !important;
}

/* ポンス画像なしの吹き出しも左寄せで自然幅 */
.pons-speech.no-pons-image .pons-bubble{
  display:block !important;
  margin-left:0 !important;
  margin-right:auto !important;
}

/* 長いセリフは画面幅内で折り返す */
@media (max-width:720px){
  .pons-speech .pons-bubble{
    width:fit-content !important;
    max-width:100% !important;
  }
}






/* v0.3-68
   画像入れ替え前のカード枠サイズへ戻す。
   枠サイズは変更しない。画像そのものだけ、既存の枠内で最大表示する。
*/
#button .item-image-wrap .item-image[src$="conductive-film-buttons.png"]{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  transform:none !important;
  image-rendering:pixelated;
}


/* v0.3-71
   導電フィルム画像を本当に大きく表示。
   画像枠サイズは画像差し替え前の通常カード枠へ固定で戻す。
   画像そのものだけ枠からはみ出して大きく表示する。
*/

/* 画像枠は元の通常カードサイズに戻す */
#button .item-image-wrap{
  width:132px !important;
  height:132px !important;
  min-height:0 !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 auto 18px !important;
  display:grid !important;
  place-items:center !important;
  overflow:visible !important;
}

/* 画像だけを大きくする。親枠の100%制限を解除 */
#button .item-image-wrap .item-image[src$="conductive-film-buttons.png"]{
  width:300px !important;
  max-width:none !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  transform:none !important;
  image-rendering:pixelated;
  position:relative;
  z-index:1;
}

@media (max-width:720px){
  #button .item-image-wrap{
    width:116px !important;
    height:116px !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 !important;
    margin:0 auto 16px !important;
    display:grid !important;
    place-items:center !important;
    overflow:visible !important;
  }

  #button .item-image-wrap .item-image[src$="conductive-film-buttons.png"]{
    width:260px !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;
    transform:none !important;
  }
}


/* v0.3-72
   導電フィルム画像の下だけ、1行分くらい余白を追加。
   画像枠サイズ・画像サイズは変更しない。
*/
#button .item-image-wrap{
  margin-bottom:34px !important;
}

@media (max-width:720px){
  #button .item-image-wrap{
    margin-bottom:30px !important;
  }
}


/* v0.3-83
   ドリフト修理3カードの横幅を全体的に少し広くする。
   スマホ表示は目安。PC/タブレット/スマホすべてで #drift の3カードのみ対象。
*/

/* PC・タブレット：3カードの並びを少しワイドに見せる */
#drift .cards{
  width:min(1120px, calc(100vw - 32px)) !important;
  max-width:none !important;
  margin-left:50% !important;
  transform:translateX(-50%) !important;
}

/* PCでは3枚それぞれの最小幅を少し確保 */
@media (min-width:721px){
  #drift .cards{
    grid-template-columns:repeat(3, minmax(300px, 1fr)) !important;
    gap:24px !important;
  }

  #drift .cards > .item-card{
    width:auto !important;
    max-width:none !important;
  }
}

/* スマホ：隣カードの見え方を「半分くらい」から「1/3くらい」へ */
@media (max-width:720px){
  #drift .cards{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    transform:none !important;
    gap:14px !important;
    scroll-padding-left:16px;
  }

  #drift .cards > .item-card{
    flex:0 0 76vw !important;
    width:76vw !important;
    max-width:76vw !important;
  }
}

@media (max-width:420px){
  #drift .cards > .item-card{
    flex-basis:78vw !important;
    width:78vw !important;
    max-width:78vw !important;
  }
}


/* v0.3-89 LINE公式アカウント導線
   PC表示：QRコード
   スマホ表示：LINE友だち追加ボタン
*/
.line-add-area{
  margin-top:18px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.line-qr-box{
  width:min(360px, 100%);
  text-align:center;
  padding:18px;
}

.line-add-title{
  margin:0 0 12px;
  font-family:"DotGothic16","Noto Sans JP",sans-serif;
  font-weight:700;
  line-height:1.5;
}

.line-qr-image{
  width:220px;
  max-width:100%;
  height:auto;
  image-rendering:auto;
  display:block;
  margin:0 auto;
}

.line-add-button-wrap{
  text-align:center;
}

.line-add-image-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.line-add-image-link img{
  display:block;
  height:36px;
  width:auto;
}

.line-sp-only,
.line-sp-only-inline{
  display:none !important;
}

.line-pc-only{
  display:block !important;
}

@media (max-width:720px){
  .line-pc-only{
    display:none !important;
  }

  .line-sp-only{
    display:block !important;
  }

  .line-sp-only-inline{
    display:inline-flex !important;
  }

  .line-add-area{
    margin-top:14px;
  }
}


/* v0.3-92 LINE in-app browser / narrow mobile viewport fixes */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

*{
  box-sizing:border-box;
}

img,
svg,
video,
canvas{
  max-width:100%;
  height:auto;
}

/* Avoid iOS/LINE WebView auto text inflation causing pixel UI overflow */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

@media (max-width:720px){
  body{
    width:100%;
    min-width:0;
    overflow-x:hidden;
  }

  .page,
  main,
  section,
  .section,
  .hero,
  .shop,
  .menu,
  .form-section,
  .line-section{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .hero{
    min-height:auto !important;
    padding-top:18px !important;
    padding-bottom:34px !important;
  }

  .hero-inner,
  .hero-layout,
  .hero-content,
  .container,
  .section-inner,
  .rpg-window,
  .shop-window,
  .menu-window{
    width:min(100%, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    min-width:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .hero-logo,
  .logo-card,
  .brand-card{
    width:min(100%, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    min-width:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .hero-logo img,
  .logo-card img,
  .brand-card img{
    display:block;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }

  .status-card,
  .status-panel,
  .hero-status{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    transform:none !important;
    width:min(300px, calc(100vw - 44px)) !important;
    max-width:calc(100vw - 44px) !important;
    margin:10px 14px 0 auto !important;
    z-index:2;
  }

  .sound-toggle,
  .sound-button,
  #soundToggle{
    right:14px !important;
    bottom:calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    max-width:calc(100vw - 28px) !important;
  }

  #shop,
  .shop,
  .menu-section{
    padding-top:28px !important;
    margin-top:0 !important;
  }

  #shop .section-title,
  .shop .section-title,
  .menu-section .section-title{
    margin-top:0 !important;
    margin-bottom:22px !important;
  }

  #shop .pons-row,
  #shop .guide-row,
  .shop .pons-row,
  .shop .guide-row,
  .menu-section .pons-row,
  .menu-section .guide-row{
    margin-top:0 !important;
    margin-bottom:24px !important;
  }

  #shop .shop-window,
  #shop .menu-window,
  .shop .shop-window,
  .menu-section .menu-window{
    margin-top:0 !important;
  }
}

@media (max-width:430px){
  .hero-inner,
  .hero-layout,
  .hero-content,
  .container,
  .section-inner,
  .rpg-window,
  .shop-window,
  .menu-window,
  .hero-logo,
  .logo-card,
  .brand-card{
    width:min(100%, calc(100vw - 18px)) !important;
    max-width:calc(100vw - 18px) !important;
  }

  .status-card,
  .status-panel,
  .hero-status{
    width:min(280px, calc(100vw - 34px)) !important;
    max-width:calc(100vw - 34px) !important;
    margin-right:9px !important;
  }
}


/* v0.3-93 LINE/SP layout fix
   - 受付状況フレームをスマホでは固定/絶対配置から通常表示へ
   - 修理屋メニューのポンスセリフ下の余白を削除
   - ポンスの修理メモ吹き出しを狭いWebViewでも読みやすく再調整
*/
@media (max-width:900px){
  .status-window{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    transform:none !important;
    width:min(320px, calc(100vw - 28px)) !important;
    max-width:calc(100vw - 28px) !important;
    margin:14px 14px 18px auto !important;
    padding:12px 14px !important;
    z-index:5 !important;
    animation:none !important;
  }

  .site-shell{
    padding-top:18px !important;
  }

  .hero{
    padding-top:0 !important;
  }

  .brand-card.official-brand-card{
    margin-top:0 !important;
  }

  .form-section{
    padding-top:30px !important;
  }
}

@media (max-width:720px){
  #shop .shop-grid{
    grid-template-columns:1fr !important;
    gap:8px !important;
    align-items:start !important;
  }

  #shop .shop-talk,
  #shop .pons-speech.shop-talk{
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    align-items:start !important;
  }

  #shop .shop-talk .pons-bubble,
  #shop .pons-speech.shop-talk .pons-bubble{
    margin:0 !important;
  }

  #shop .shop-menu{
    margin-top:0 !important;
  }

  body.v03-39-true-frame-equal #drift-note .memo-with-illustration{
    gap:16px !important;
  }

  body.v03-39-true-frame-equal #drift-note .memo-with-illustration > .note-box{
    grid-template-columns:58px minmax(0, 1fr) !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    align-items:start !important;
  }

  body.v03-39-true-frame-equal #drift-note .memo-with-illustration > .note-box .pons-talk-image{
    width:58px !important;
    height:58px !important;
    margin-top:4px !important;
  }

  body.v03-39-true-frame-equal #drift-note .memo-with-illustration > .note-box .pons-bubble{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-top:4px !important;
    padding:14px 13px 12px !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }

  body.v03-39-true-frame-equal #drift-note .memo-with-illustration > .note-box .pons-bubble::before{
    left:-9px !important;
    bottom:18px !important;
    width:14px !important;
    height:14px !important;
  }

  body.v03-39-true-frame-equal #drift-note .memo-with-illustration > .note-box .pons-bubble h3{
    font-size:18px !important;
    line-height:1.35 !important;
    margin-bottom:9px !important;
  }

  body.v03-39-true-frame-equal #drift-note .memo-with-illustration > .note-box .pons-bubble p{
    font-size:14px !important;
    line-height:1.72 !important;
    margin-bottom:7px !important;
  }

  .form-talk.pons-speech{
    grid-template-columns:58px minmax(0, 1fr) !important;
    gap:10px !important;
  }

  .form-talk.pons-speech .pons-talk-image{
    width:58px !important;
    height:58px !important;
  }

  .form-talk.pons-speech .pons-bubble{
    min-width:0 !important;
    padding:14px 13px 12px !important;
  }
}

@media (max-width:430px){
  .status-window{
    width:min(286px, calc(100vw - 20px)) !important;
    max-width:calc(100vw - 20px) !important;
    margin:10px 10px 16px auto !important;
  }

  body.v03-39-true-frame-equal #drift-note .memo-with-illustration > .note-box{
    grid-template-columns:50px minmax(0, 1fr) !important;
    gap:8px !important;
  }

  body.v03-39-true-frame-equal #drift-note .memo-with-illustration > .note-box .pons-talk-image{
    width:50px !important;
    height:50px !important;
  }

  body.v03-39-true-frame-equal #drift-note .memo-with-illustration > .note-box .pons-bubble{
    padding:13px 12px 11px !important;
  }

  body.v03-39-true-frame-equal #drift-note .memo-with-illustration > .note-box .pons-bubble h3{
    font-size:17px !important;
  }

  body.v03-39-true-frame-equal #drift-note .memo-with-illustration > .note-box .pons-bubble p{
    font-size:13.5px !important;
    line-height:1.7 !important;
  }

  .form-talk.pons-speech{
    grid-template-columns:50px minmax(0, 1fr) !important;
    gap:8px !important;
  }

  .form-talk.pons-speech .pons-talk-image{
    width:50px !important;
    height:50px !important;
  }
}


/* v0.3-94 fixed horizontal reception status header
   受付状況をLP/フォーム共通で画面上部に固定し、横並び表示にする。
*/
body > main{
  padding-top:96px !important;
}

.status-window.rpg-window.compact{
  position:fixed !important;
  top:calc(8px + env(safe-area-inset-top, 0px)) !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:min(760px, calc(100vw - 20px)) !important;
  max-width:calc(100vw - 20px) !important;
  min-width:0 !important;
  margin:0 !important;
  padding:10px 16px !important;
  z-index:1000 !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:0 !important;
  animation:none !important;
  text-align:center !important;
}

.status-window.rpg-window.compact .dot-line{
  display:none !important;
}

.status-window.rpg-window.compact .status-row{
  display:grid !important;
  grid-template-rows:auto auto !important;
  justify-items:center !important;
  align-items:center !important;
  gap:3px !important;
  min-width:0 !important;
  padding:0 12px !important;
  border-left:2px dotted rgba(29,95,209,.24) !important;
}

.status-window.rpg-window.compact .status-row:first-child{
  border-left:0 !important;
}

.status-window.rpg-window.compact .status-row span{
  display:block !important;
  max-width:100% !important;
  color:var(--muted) !important;
  font-size:12px !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.status-window.rpg-window.compact .status-row strong{
  display:block !important;
  max-width:100% !important;
  font-size:17px !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

@media (max-width:720px){
  body > main{
    padding-top:78px !important;
  }

  .status-window.rpg-window.compact{
    top:calc(7px + env(safe-area-inset-top, 0px)) !important;
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    padding:9px 8px !important;
  }

  .status-window.rpg-window.compact .status-row{
    padding:0 6px !important;
  }

  .status-window.rpg-window.compact .status-row span{
    font-size:10px !important;
    letter-spacing:0 !important;
  }

  .status-window.rpg-window.compact .status-row strong{
    font-size:14px !important;
    letter-spacing:0 !important;
  }

  .site-shell{
    padding-top:78px !important;
  }

  .hero{
    padding-top:0 !important;
  }

  .form-section{
    padding-top:20px !important;
  }
}

@media (max-width:390px){
  .status-window.rpg-window.compact{
    width:calc(100vw - 10px) !important;
    max-width:calc(100vw - 10px) !important;
    padding:8px 5px !important;
  }

  .status-window.rpg-window.compact .status-row{
    padding:0 4px !important;
  }

  .status-window.rpg-window.compact .status-row span{
    font-size:9.5px !important;
  }

  .status-window.rpg-window.compact .status-row strong{
    font-size:13px !important;
  }
}


/* v0.3-95 SEO / accessibility heading */
.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}


/* v0.3-96 postal-code address autofill */
.zip-lookup-message{
  min-height:1.6em;
  margin:-8px 0 8px;
  padding:0 2px;
  font-size:13px;
  line-height:1.6;
  font-weight:700;
  color:var(--muted);
}

.zip-lookup-message[data-type="loading"]{
  color:#1d5fd1;
}

.zip-lookup-message[data-type="success"]{
  color:#145f38;
}

.zip-lookup-message[data-type="error"]{
  color:#b03030;
}

@media (max-width:720px){
  .zip-lookup-message{
    margin:-6px 0 8px;
    font-size:12px;
    line-height:1.55;
  }
}


/* v0.3-97 reception header auto hide */
.status-window.rpg-window.compact{
  transition:transform .24s ease, opacity .18s ease !important;
  will-change:transform, opacity;
}

.status-window.rpg-window.compact.is-hidden{
  transform:translate(-50%, calc(-100% - 18px - env(safe-area-inset-top, 0px))) !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* v0.3-98 PC drift menu choice frame width */
@media (min-width:721px){
  #drift-note .choose-box.rpg-window{
    width:min(680px, 100%) !important;
    max-width:680px !important;
    margin:26px auto 0 !important;
    padding:24px 28px !important;
  }
}

@media (min-width:1080px){
  #drift-note .choose-box.rpg-window{
    max-width:720px !important;
    width:720px !important;
  }
}


/* v0.3-99 custom LINE pixel banners */
.line-banner-area{
  margin-top:20px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.line-banner-link{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:min(560px, 100%);
  max-width:100%;
  text-decoration:none;
  border:0;
  background:transparent;
  transition:transform .14s ease, filter .14s ease;
}

.line-banner-link:hover{
  transform:translate(-2px, -2px);
  filter:drop-shadow(4px 4px 0 rgba(0,0,0,.18));
}

.line-banner-image{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  image-rendering:auto;
}

.form-success-actions .line-banner-link{
  width:min(520px, 100%);
}

.form-success-actions .line-banner-image{
  width:100%;
  height:auto;
}

@media (max-width:720px){
  .line-banner-area{
    margin-top:16px;
  }

  .line-banner-link,
  .form-success-actions .line-banner-link{
    width:100%;
    max-width:100%;
  }
}


/* v0.3-100 CTA pixel buttons */
.cta-buttons.cta-pixel-buttons{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}

.cta-pixel-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:180px;
  max-width:calc(50% - 6px);
  text-decoration:none;
  background:transparent;
  border:0;
  transition:transform .14s ease, filter .14s ease;
}

.cta-pixel-button:hover{
  transform:translate(-2px, -2px);
  filter:drop-shadow(4px 4px 0 rgba(0,0,0,.18));
}

.cta-pixel-button img{
  display:block;
  width:100%;
  height:auto;
  image-rendering:auto;
}

@media (max-width:720px){
  .cta-buttons.cta-pixel-buttons{
    gap:10px;
    justify-content:center;
  }

  .cta-pixel-button{
    width:160px;
    max-width:calc(50% - 5px);
  }
}

@media (max-width:380px){
  .cta-pixel-button{
    width:148px;
  }
}


/* v0.3-101 payment method field */
.payment-fee-note{
  margin:-8px 0 10px;
  padding:9px 12px;
  border-left:4px solid #d88a21;
  background:rgba(255, 224, 176, .36);
  color:#5b3414;
  font-size:13px;
  line-height:1.65;
  font-weight:800;
  border-radius:8px;
}

@media (max-width:720px){
  .payment-fee-note{
    margin:-6px 0 8px;
    padding:8px 10px;
    font-size:12px;
    line-height:1.6;
  }
}

/* v0.3-102 LINEブラウザ/スマホ表示コンパクト調整 */
@media (max-width:720px){
  /* 修理屋メニュー：行間と縦余白を詰める */
  #shop .shop-menu{
    padding:12px 12px !important;
  }

  #shop .menu-link{
    padding:8px 10px 8px 32px !important;
    font-size:17px !important;
    line-height:1.22 !important;
    border-radius:7px !important;
  }

  #shop .menu-link::before{
    left:9px !important;
    top:8px !important;
  }

  #shop .menu-divider{
    margin:5px 0 !important;
  }

  /* ドリフト修理カード：横スクロール領域を画面端まで広げる */
  #drift .cards{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    transform:none !important;
    gap:10px !important;
    padding:4px 0 16px 0 !important;
    scroll-padding-left:0 !important;
    scroll-padding-right:0 !important;
  }

  /* ドリフト修理カード：隣カードが約1/4見える幅へ */
  #drift .cards > .item-card{
    flex:0 0 72vw !important;
    width:72vw !important;
    max-width:72vw !important;
    min-width:0 !important;
    padding:9px !important;
  }

  /* ドリフト修理カード：画像を少し小さくして縦サイズを圧縮 */
  #drift .item-image-wrap{
    width:78% !important;
    max-width:230px !important;
    margin:0 auto 6px !important;
  }

  #drift .item-image{
    width:100% !important;
    height:auto !important;
  }

  #drift .item-kind{
    margin-bottom:4px !important;
    font-size:11px !important;
    line-height:1.2 !important;
  }

  #drift .item-card h3{
    margin-bottom:6px !important;
    font-size:16px !important;
    line-height:1.22 !important;
  }

  #drift .price-box{
    margin-bottom:6px !important;
    padding:8px 9px !important;
  }

  #drift .price-box strong{
    font-size:22px !important;
    line-height:1.1 !important;
  }

  #drift .price-box small{
    font-size:10px !important;
    line-height:1.25 !important;
  }

  #drift .durability{
    margin-bottom:6px !important;
    padding:7px 8px !important;
    font-size:12px !important;
    line-height:1.25 !important;
  }

  #drift .item-card p{
    margin-bottom:4px !important;
    font-size:12px !important;
    line-height:1.36 !important;
  }

  #drift .item-card .target{
    margin-top:6px !important;
  }

  /* 発送・お支払い：行間と縦余白を詰める */
  #guide .guide-grid{
    gap:14px !important;
  }

  #guide .guide-box{
    padding:16px 16px !important;
  }

  #guide .guide-box h3{
    margin-bottom:10px !important;
    line-height:1.25 !important;
  }

  #guide .guide-box ol{
    margin:0 !important;
    padding-left:1.35em !important;
  }

  #guide .guide-box p,
  #guide .guide-box li{
    margin-top:0 !important;
    margin-bottom:6px !important;
    line-height:1.55 !important;
  }

  #guide .mini-note{
    margin-top:10px !important;
    padding:10px 11px !important;
    line-height:1.45 !important;
  }
}

@media (max-width:380px){
  #drift .cards > .item-card{
    flex-basis:74vw !important;
    width:74vw !important;
    max-width:74vw !important;
  }

  #drift .item-image-wrap{
    width:76% !important;
    max-width:214px !important;
  }
}

/* v0.3-103 スマホ横スクロール端・ポンス吹き出し見切れ修正 + タップ浮き */
@media (max-width:720px){
  /* ポンスのセリフ：右端の影・枠が切れないように内側へ少し逃がす */
  #drift .pons-speech.section-talk{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    padding-right:10px !important;
    margin-left:0 !important;
    margin-right:0 !important;
    overflow:visible !important;
  }

  #drift .pons-speech.section-talk .pons-bubble{
    box-sizing:border-box !important;
    max-width:100% !important;
    box-shadow:4px 4px 0 rgba(29,95,209,.15) !important;
  }

  /* 横スクロールカード：左右と上側に余白を持たせ、枠・影・浮き上がりを切らさない */
  #drift{
    overflow:visible !important;
  }

  #drift .cards{
    box-sizing:border-box !important;
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding:18px 12px 20px 12px !important;
    gap:10px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-padding-left:12px !important;
    scroll-padding-right:12px !important;
    -webkit-overflow-scrolling:touch !important;
  }

  #drift .cards > .item-card{
    flex:0 0 72vw !important;
    width:72vw !important;
    max-width:72vw !important;
    transform:translateY(0) !important;
    transition:transform .14s ease, box-shadow .14s ease, filter .14s ease !important;
    -webkit-tap-highlight-color:transparent !important;
    will-change:transform !important;
  }

  #drift .cards > .item-card:hover,
  #drift .cards > .item-card:active,
  #drift .cards > .item-card:focus-visible{
    transform:translateY(-5px) !important;
    box-shadow:
      0 0 0 4px #fff,
      0 0 0 6px rgba(29,95,209,.18),
      9px 11px 0 rgba(20,62,144,.18) !important;
    filter:brightness(1.015) !important;
  }
}

@media (max-width:380px){
  #drift .cards{
    padding:18px 10px 20px 10px !important;
    scroll-padding-left:10px !important;
    scroll-padding-right:10px !important;
  }

  #drift .cards > .item-card{
    flex-basis:74vw !important;
    width:74vw !important;
    max-width:74vw !important;
  }
}

/* v0.3-105 サウンドボタン：位置は既存のまま、変形だけ停止 */
.sound-toggle,
.sound-button,
#soundToggle{
  transform:none !important;
  animation:none !important;
}

/* v0.3-109 派生版
   - IMPORTANT案内フレームを、レトロピクセルゲームのお店の掲示板っぽい見た目へ変更
   - LP全体の背景を、レトロゲームのお店っぽい暖色系ピクセル背景へ変更
*/
body.v03-109-pixel-shop-derivative{
  --bg:#f6ebbf;
  --paper:#fffdf4;
  --shadow:rgba(110, 73, 26, .16);
  background:
    linear-gradient(180deg, #fbf3d3 0%, #f2e0aa 48%, #f7efcf 100%);
}

body.v03-109-pixel-shop-derivative .pixel-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:1;
  background:
    linear-gradient(rgba(126, 89, 35, .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 89, 35, .085) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.10) 24%, rgba(255,255,255,0) 44%),
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.28) 0 18%, transparent 19% 100%),
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.18) 0 16%, transparent 17% 100%),
    repeating-linear-gradient(
      180deg,
      rgba(192, 149, 76, .05) 0 22px,
      rgba(255,255,255,0) 22px 44px
    ),
    linear-gradient(180deg, rgba(231, 201, 139, .36) 0%, rgba(241, 222, 179, .22) 55%, rgba(250, 245, 229, .12) 100%);
  background-size:
    16px 16px,
    16px 16px,
    100% 100%,
    520px 220px,
    520px 220px,
    100% 44px,
    100% 100%;
  mask-image:none;
}

body.v03-109-pixel-shop-derivative .site-shell{
  position:relative;
}

body.v03-109-pixel-shop-derivative .site-shell::before{
  content:"";
  position:fixed;
  inset:10px;
  pointer-events:none;
  z-index:-1;
  border:4px solid rgba(109, 73, 25, .12);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.24),
    inset 0 0 0 10px rgba(255,249,234,.08);
}

body.v03-109-pixel-shop-derivative .important-notice{
  position:relative;
  margin:24px auto 28px;
  max-width:900px;
  padding:20px 22px 18px;
  background:
    linear-gradient(180deg, #fff5cf 0%, #ffe39a 100%);
  border:4px solid #5f3814;
  border-radius:10px;
  box-shadow:
    0 0 0 4px #c88842,
    0 0 0 8px #5f3814,
    11px 11px 0 rgba(95, 56, 20, .18);
  color:#3f220b;
  overflow:hidden;
}

body.v03-109-pixel-shop-derivative .important-notice::before{
  content:"";
  position:absolute;
  inset:9px;
  border:2px dotted rgba(95, 56, 20, .36);
  border-radius:4px;
  pointer-events:none;
}

body.v03-109-pixel-shop-derivative .important-notice::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(#5f3814,#5f3814) 12px 12px / 14px 4px no-repeat,
    linear-gradient(#5f3814,#5f3814) 12px 12px / 4px 14px no-repeat,
    linear-gradient(#5f3814,#5f3814) calc(100% - 26px) 12px / 14px 4px no-repeat,
    linear-gradient(#5f3814,#5f3814) calc(100% - 16px) 12px / 4px 14px no-repeat,
    linear-gradient(#5f3814,#5f3814) 12px calc(100% - 16px) / 14px 4px no-repeat,
    linear-gradient(#5f3814,#5f3814) 12px calc(100% - 26px) / 4px 14px no-repeat,
    linear-gradient(#5f3814,#5f3814) calc(100% - 26px) calc(100% - 16px) / 14px 4px no-repeat,
    linear-gradient(#5f3814,#5f3814) calc(100% - 16px) calc(100% - 26px) / 4px 14px no-repeat;
  opacity:.55;
}

body.v03-109-pixel-shop-derivative .notice-badge{
  display:inline-block;
  position:relative;
  z-index:1;
  margin:0 0 12px;
  padding:6px 11px 5px;
  background:#cf5734;
  color:#fff8de;
  border:3px solid #5f3814;
  border-radius:6px;
  box-shadow:
    0 0 0 2px rgba(255, 248, 222, .38) inset,
    4px 4px 0 rgba(95, 56, 20, .18);
  font-family:"DotGothic16","Noto Sans JP",sans-serif;
  font-size:13px;
  letter-spacing:.08em;
}

body.v03-109-pixel-shop-derivative .notice-content{
  position:relative;
  z-index:1;
}

body.v03-109-pixel-shop-derivative .notice-content h2{
  margin:0 0 12px;
  color:#4a260b;
  font-family:"DotGothic16","Noto Sans JP",sans-serif;
  font-size:clamp(22px, 3.1vw, 31px);
  line-height:1.35;
  text-shadow:1px 1px 0 rgba(255,255,255,.42);
}

body.v03-109-pixel-shop-derivative .notice-content p{
  margin:0 0 8px;
  color:#4a260b;
  font-weight:800;
  line-height:1.85;
}

body.v03-109-pixel-shop-derivative .notice-content p:last-child{
  margin-bottom:0;
}

@media (max-width:720px){
  body.v03-109-pixel-shop-derivative .site-shell::before{
    inset:8px;
    border-width:3px;
    box-shadow:
      inset 0 0 0 2px rgba(255,255,255,.22),
      inset 0 0 0 8px rgba(255,249,234,.08);
  }

  body.v03-109-pixel-shop-derivative .important-notice{
    padding:16px 15px 15px;
    border-width:4px;
    box-shadow:
      0 0 0 3px #c88842,
      0 0 0 6px #5f3814,
      6px 6px 0 rgba(95, 56, 20, .16);
  }

  body.v03-109-pixel-shop-derivative .important-notice::before{
    inset:7px;
  }

  body.v03-109-pixel-shop-derivative .notice-badge{
    margin-bottom:10px;
    font-size:12px;
  }

  body.v03-109-pixel-shop-derivative .notice-content h2{
    font-size:21px;
    line-height:1.4;
  }

  body.v03-109-pixel-shop-derivative .notice-content p{
    font-size:14px;
    line-height:1.75;
  }
}

/* v0.3-110 ランダムRPGマップ背景（v0.3-111 青フィルター調整）
   - 読み込みごとに4種類の縦長マップ背景からランダム表示
   - ページの一番上→背景の一番上、ページの一番下→背景の一番下へ同期
*/
body.v03-110-random-map-bg{
  background:#eaf3ff;
}

body.v03-110-random-map-bg .pixel-bg{
  --map-bg-image:url("./assets/images/bg-map-classic-town.webp");
  --map-bg-y:0%;
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.44;
  background-image:
    linear-gradient(180deg, rgba(238,245,255,.40), rgba(220,234,255,.24)),
    radial-gradient(circle at center, rgba(255,255,255,0) 0 42%, rgba(188,212,255,.28) 100%),
    var(--map-bg-image);
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-size:100% 100%, 100% 100%, 118vw auto;
  background-position:center center, center center, center var(--map-bg-y);
  image-rendering:auto;
  filter:saturate(.94) contrast(.97);
  mask-image:none;
}

body.v03-110-random-map-bg::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(rgba(202,220,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(202,220,255,.16) 1px, transparent 1px);
  background-size:24px 24px;
  opacity:.36;
}

@media (max-width:720px){
  body.v03-110-random-map-bg .pixel-bg{
    opacity:.50;
    background-size:100% 100%, 100% 100%, 138vw auto;
  }
}

@media (min-width:1180px){
  body.v03-110-random-map-bg .pixel-bg{
    opacity:.36;
    background-size:100% 100%, 100% 100%, 112vw auto;
  }
}

/* v0.3-112 フレーム背景を白に戻す
   - RPGマップ背景 + 青フィルターは維持
   - カード/フォーム/吹き出し/案内枠のクリーム色を白へ戻す
   - 商品画像の白背景とフレーム背景の差をなくす
*/
body.v03-109-pixel-shop-derivative,
body.v03-110-random-map-bg{
  --paper:#fff;
}

body.v03-109-pixel-shop-derivative .rpg-window,
body.v03-110-random-map-bg .rpg-window,
body.v03-109-pixel-shop-derivative .item-card,
body.v03-110-random-map-bg .item-card,
body.v03-109-pixel-shop-derivative .repair-form,
body.v03-110-random-map-bg .repair-form,
body.v03-109-pixel-shop-derivative .guide-box,
body.v03-110-random-map-bg .guide-box,
body.v03-109-pixel-shop-derivative .record-card,
body.v03-110-random-map-bg .record-card,
body.v03-109-pixel-shop-derivative .faq-item,
body.v03-110-random-map-bg .faq-item,
body.v03-109-pixel-shop-derivative .shop-menu,
body.v03-110-random-map-bg .shop-menu,
body.v03-109-pixel-shop-derivative .line-box,
body.v03-110-random-map-bg .line-box{
  background:#fff !important;
}

body.v03-109-pixel-shop-derivative .pons-bubble,
body.v03-110-random-map-bg .pons-bubble{
  background:linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
}

body.v03-109-pixel-shop-derivative .pons-speech:not(.no-pons-image) .pons-bubble::before,
body.v03-110-random-map-bg .pons-speech:not(.no-pons-image) .pons-bubble::before{
  background:#ffffff !important;
}

body.v03-109-pixel-shop-derivative .important-notice,
body.v03-110-random-map-bg .important-notice{
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
  color:#143e90 !important;
}

body.v03-109-pixel-shop-derivative .notice-content h2,
body.v03-110-random-map-bg .notice-content h2,
body.v03-109-pixel-shop-derivative .notice-content p,
body.v03-110-random-map-bg .notice-content p{
  color:#143e90 !important;
}

body.v03-109-pixel-shop-derivative .price-box,
body.v03-110-random-map-bg .price-box,
body.v03-109-pixel-shop-derivative .durability,
body.v03-110-random-map-bg .durability,
body.v03-109-pixel-shop-derivative .mini-note,
body.v03-110-random-map-bg .mini-note{
  background:rgba(29,95,209,.045) !important;
}

body.v03-109-pixel-shop-derivative .item-image-wrap,
body.v03-110-random-map-bg .item-image-wrap{
  background:#fff !important;
}

/* v0.3-113 スマホ表示：ロゴフレームを少し小さくして背景を見せる */
@media (max-width:720px){
  body.v03-110-random-map-bg .brand-card.official-brand-card,
  body.v03-109-pixel-shop-derivative .brand-card.official-brand-card{
    width:min(520px, 88vw) !important;
    max-width:88vw !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:14px 16px !important;
  }

  body.v03-110-random-map-bg .brand-card.official-brand-card .official-logo,
  body.v03-109-pixel-shop-derivative .brand-card.official-brand-card .official-logo{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }
}

@media (max-width:390px){
  body.v03-110-random-map-bg .brand-card.official-brand-card,
  body.v03-109-pixel-shop-derivative .brand-card.official-brand-card{
    width:86vw !important;
    max-width:86vw !important;
    padding:13px 14px !important;
  }
}

/* v0.3-114 スマホ表示：ドリフト修理の商品カード間隔を少し広げる */
@media (max-width:720px){
  #drift .cards{
    gap:14px !important;
    padding-left:14px !important;
    padding-right:14px !important;
    scroll-padding-left:14px !important;
    scroll-padding-right:14px !important;
  }

  #drift .cards > .item-card{
    flex-basis:70vw !important;
    width:70vw !important;
    max-width:70vw !important;
  }
}

@media (max-width:380px){
  #drift .cards{
    gap:12px !important;
    padding-left:12px !important;
    padding-right:12px !important;
    scroll-padding-left:12px !important;
    scroll-padding-right:12px !important;
  }

  #drift .cards > .item-card{
    flex-basis:72vw !important;
    width:72vw !important;
    max-width:72vw !important;
  }
}

/* v0.3-116 ポンス吹き出し：TOPセリフの色へ全統一
   対象TOPセリフ：
   「いらっしゃい。ここはPS5のコントローラーを修理するお店だよ...」
   既存のTOP吹き出し色＝淡い緑〜クリーム系の丸フレームに全ポンス吹き出しを統一
*/
body.v03-110-random-map-bg .pons-bubble,
body.v03-109-pixel-shop-derivative .pons-bubble,
body.v03-110-random-map-bg .top-greeting-bubble,
body.v03-109-pixel-shop-derivative .top-greeting-bubble{
  position:relative !important;
  background:
    linear-gradient(180deg, #f0ffe3 0%, #d8f0c4 100%) !important;
  color:#24301f !important;
  border:4px solid #385432 !important;
  border-radius:18px !important;
  box-shadow:
    0 0 0 2px #fbfff4,
    0 0 0 5px #8caf73,
    6px 6px 0 rgba(35, 43, 27, .18) !important;
}

body.v03-110-random-map-bg .pons-speech:not(.no-pons-image) .pons-bubble::before,
body.v03-109-pixel-shop-derivative .pons-speech:not(.no-pons-image) .pons-bubble::before,
body.v03-110-random-map-bg .hero-dialogue.pons-speech .pons-bubble::before,
body.v03-109-pixel-shop-derivative .hero-dialogue.pons-speech .pons-bubble::before{
  content:"" !important;
  position:absolute !important;
  left:-13px !important;
  top:26px !important;
  width:18px !important;
  height:18px !important;
  background:#d8f0c4 !important;
  border-left:4px solid #385432 !important;
  border-bottom:4px solid #385432 !important;
  border-top:0 !important;
  border-right:0 !important;
  transform:rotate(45deg) !important;
}

body.v03-110-random-map-bg .pons-bubble .speaker,
body.v03-109-pixel-shop-derivative .pons-bubble .speaker{
  display:inline-block !important;
  width:auto !important;
  max-width:max-content !important;
  min-width:0 !important;
  margin:0 0 8px !important;
  padding:3px 8px !important;
  background:#385432 !important;
  color:#fbfff4 !important;
  border:2px solid #8caf73 !important;
  border-radius:6px !important;
  line-height:1.1 !important;
}

body.v03-110-random-map-bg .pons-bubble p,
body.v03-109-pixel-shop-derivative .pons-bubble p,
body.v03-110-random-map-bg .pons-bubble h2,
body.v03-109-pixel-shop-derivative .pons-bubble h2,
body.v03-110-random-map-bg .pons-bubble h3,
body.v03-109-pixel-shop-derivative .pons-bubble h3,
body.v03-110-random-map-bg .pons-bubble strong,
body.v03-109-pixel-shop-derivative .pons-bubble strong{
  color:#24301f !important;
}

@media (max-width:720px){
  body.v03-110-random-map-bg .pons-bubble,
  body.v03-109-pixel-shop-derivative .pons-bubble{
    border-width:4px !important;
    padding:16px 14px 13px !important;
    box-shadow:
      0 0 0 2px #fbfff4,
      0 0 0 5px #8caf73,
      4px 4px 0 rgba(35, 43, 27, .18) !important;
  }

  body.v03-110-random-map-bg .pons-speech:not(.no-pons-image) .pons-bubble::before,
  body.v03-109-pixel-shop-derivative .pons-speech:not(.no-pons-image) .pons-bubble::before{
    left:-11px !important;
    top:22px !important;
    width:15px !important;
    height:15px !important;
    border-left-width:4px !important;
    border-bottom-width:4px !important;
  }
}

/* v0.3-117 ポンス吹き出し内の名前表示を非表示
   - 吹き出し内の「ポンス」ラベルだけ消す
   - 色・背景・配置・挙動は触らない
*/
.pons-bubble .speaker{
  display:none !important;
}

/* v0.3-118 背景画像軽量化
   - RPGマップ背景4枚をWebP化
   - レイアウト/色/デザインは変更しない
*/

/* v0.3-119 個人情報の取り扱い案内
   - 確認チェックは追加しない
   - フォーム直後に案内を表示
   - フッターに案内へのリンクを追加
*/
.privacy-section{
  margin-top:34px;
}

.privacy-box{
  max-width:880px;
  margin:0 auto;
  padding:22px 24px;
}

.privacy-box p{
  margin:0 0 14px;
  line-height:1.9;
}

.privacy-box p:last-child{
  margin-bottom:0;
}

.footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.footer-privacy-link{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:4px;
}

@media (max-width:720px){
  .privacy-section{
    margin-top:28px;
  }

  .privacy-box{
    padding:18px 16px;
  }

  .privacy-box p{
    font-size:.88rem;
    line-height:1.85;
  }
}

/* v0.3-120 指示反映：ポンス名/IMPORTANT角/個人情報/最後の白四角を修正 */
body.v03-110-random-map-bg .pons-bubble .speaker,
body.v03-109-pixel-shop-derivative .pons-bubble .speaker,
body.v03-19-original-frames-pons-round .pons-bubble .speaker,
.pons-bubble .speaker{
  display:none !important;
}

body.v03-110-random-map-bg .pons-bubble::after,
body.v03-109-pixel-shop-derivative .pons-bubble::after,
body.v03-19-original-frames-pons-round .pons-bubble::after,
.pons-bubble::after{
  content:none !important;
  display:none !important;
}

body.v03-110-random-map-bg .important-notice::after,
body.v03-109-pixel-shop-derivative .important-notice::after,
.important-notice::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

.privacy-link-under-form{
  max-width:880px;
  margin:18px auto 0;
  text-align:center;
  font-family:"DotGothic16","Noto Sans JP",sans-serif;
}

.privacy-link-under-form a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--blue2);
  text-decoration:underline;
  text-underline-offset:5px;
  font-weight:700;
}

.privacy-link-under-form a::before{
  content:"▶";
  color:var(--blue);
  text-decoration:none;
}

.privacy-section{
  margin-top:80px !important;
}

.privacy-box.rpg-window,
body.v03-110-random-map-bg .privacy-box.rpg-window,
body.v03-109-pixel-shop-derivative .privacy-box.rpg-window{
  height:8.2rem;
  max-width:880px;
  padding:14px 16px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:#fffdf7 !important;
  border:2px solid var(--blue) !important;
  border-left-width:8px !important;
  border-radius:8px 14px 14px 8px !important;
  box-shadow:5px 6px 0 rgba(20,62,144,.14) !important;
}

.privacy-box.rpg-window::before{
  display:none !important;
  content:none !important;
}

.privacy-box p{
  margin:0 0 10px !important;
  font-size:.92rem;
  line-height:1.65 !important;
}

.privacy-box::-webkit-scrollbar{
  width:9px;
}

.privacy-box::-webkit-scrollbar-thumb{
  background:rgba(29,95,209,.38);
  border-radius:999px;
}

body.v03-110-random-map-bg .line-box,
body.v03-109-pixel-shop-derivative .line-box,
.line-section .pons-speech.line-box,
.pons-speech.line-box{
  background:transparent !important;
}

.footer{
  padding-top:18px;
}

@media (max-width:720px){
  .privacy-link-under-form{
    margin-top:16px;
    padding:0 8px;
    font-size:.92rem;
  }

  .privacy-section{
    margin-top:64px !important;
  }

  .privacy-box.rpg-window,
  body.v03-110-random-map-bg .privacy-box.rpg-window,
  body.v03-109-pixel-shop-derivative .privacy-box.rpg-window{
    height:7.8rem;
    padding:12px 13px;
    border-left-width:7px !important;
  }

  .privacy-box p{
    font-size:.86rem !important;
    line-height:1.6 !important;
  }
}



/* v0.3-121 ポンス名の削除範囲を修正
   - 冒頭のポンスセリフは正として維持
   - 2個目以降の吹き出し内ラベルだけ非表示
   - 他の「ポンス」表記（ポンスの修理メモ等）は触らない
*/
body.v03-110-random-map-bg .hero-dialogue.pons-speech .top-greeting-bubble.pons-bubble::after,
body.v03-109-pixel-shop-derivative .hero-dialogue.pons-speech .top-greeting-bubble.pons-bubble::after,
body.v03-19-original-frames-pons-round .hero-dialogue.pons-speech .top-greeting-bubble.pons-bubble::after{
  content:"ポンス" !important;
  display:block !important;
  position:absolute !important;
  top:-17px !important;
  left:16px !important;
  padding:3px 10px 4px !important;
  background:#385432 !important;
  color:#f5ffe9 !important;
  border:3px solid #f5ffe9 !important;
  border-radius:999px !important;
  box-shadow:3px 3px 0 rgba(35, 43, 27, .16) !important;
  font-family:"DotGothic16","Noto Sans JP",sans-serif !important;
  font-size:12px !important;
  letter-spacing:.04em !important;
  line-height:1 !important;
}

body.v03-110-random-map-bg .hero-dialogue.pons-speech .top-greeting-bubble.pons-bubble .speaker,
body.v03-109-pixel-shop-derivative .hero-dialogue.pons-speech .top-greeting-bubble.pons-bubble .speaker,
body.v03-19-original-frames-pons-round .hero-dialogue.pons-speech .top-greeting-bubble.pons-bubble .speaker{
  display:none !important;
}


/* v0.3-122 ポンス吹き出しのラベル統一
   - 冒頭1個目の吹き出しが正
   - それ以外の全てのポンス吹き出しも同じ見た目に統一
   - フレーム上に「ポンス」ラベルを表示
   - 枠内の本文中には名前を入れない
*/
body.v03-110-random-map-bg .pons-speech .pons-bubble::after,
body.v03-109-pixel-shop-derivative .pons-speech .pons-bubble::after,
body.v03-19-original-frames-pons-round .pons-speech .pons-bubble::after,
.pons-speech .pons-bubble::after{
  content:"ポンス" !important;
  display:block !important;
  position:absolute !important;
  top:-17px !important;
  left:16px !important;
  padding:3px 10px 4px !important;
  background:#385432 !important;
  color:#f5ffe9 !important;
  border:3px solid #f5ffe9 !important;
  border-radius:999px !important;
  box-shadow:3px 3px 0 rgba(35, 43, 27, .16) !important;
  font-family:"DotGothic16","Noto Sans JP",sans-serif !important;
  font-size:12px !important;
  letter-spacing:.04em !important;
  line-height:1 !important;
}

body.v03-110-random-map-bg .pons-speech .pons-bubble .speaker,
body.v03-109-pixel-shop-derivative .pons-speech .pons-bubble .speaker,
body.v03-19-original-frames-pons-round .pons-speech .pons-bubble .speaker,
.pons-speech .pons-bubble .speaker{
  display:none !important;
}


/* v0.3-123 指示反映
   - ドリフト修理下の注記2行を「個人情報の取り扱いについて」リンクと同じフォント/サイズへ
   - スマホ表示のみ、トップのロゴフレームをもうひとまわり小さく
*/
.price-note{
  font-family:"DotGothic16","Noto Sans JP",sans-serif !important;
  font-size:1rem !important;
  line-height:1.75 !important;
  color:var(--blue2) !important;
}

@media (max-width:720px){
  body.v03-110-random-map-bg .brand-card.official-brand-card,
  body.v03-109-pixel-shop-derivative .brand-card.official-brand-card{
    width:min(480px, 82vw) !important;
    max-width:82vw !important;
    padding:12px 14px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  body.v03-110-random-map-bg .brand-card.official-brand-card .official-logo,
  body.v03-109-pixel-shop-derivative .brand-card.official-brand-card .official-logo{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }
}

@media (max-width:390px){
  body.v03-110-random-map-bg .brand-card.official-brand-card,
  body.v03-109-pixel-shop-derivative .brand-card.official-brand-card{
    width:80vw !important;
    max-width:80vw !important;
    padding:11px 13px !important;
  }
}


/* v0.3-124 指示反映
   - 注記2行はサイズだけ元に戻す
   - ロゴサイズ調整は維持
   - 白フィルターは注記2行のみに適用
*/
.price-note{
  font-size:13px !important;
  display:block;
  width:fit-content;
  max-width:min(820px, calc(100% - 24px));
  margin:22px auto 0;
  padding:8px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.82) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.35);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
}

/* v0.3-125 正式リリース調整
   - フレーム外テキストの白フィルターは注記2行以外元に戻す
*/
.section-title span,
.section-title small,
.privacy-link-under-form a,
.footer,
.footer a{
  position:static !important;
  z-index:auto !important;
  display:initial !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

@media (max-width:720px){
  .price-note{
    max-width:calc(100% - 16px);
    padding:7px 10px;
    border-radius:8px;
  }
}