@import url('./fonts.css');

:root {
   color-scheme: light;
   --ink: #141316;
   --green: #62bbb5;
   --pink: #e9627d;
   --u: 0.2666666667cqw;
}

* {
   box-sizing: border-box;
}

html {
   background: #f4f3ef;
}

body {
   margin: 0;
   color: var(--ink);
   font-family: 'Zen Kaku Gothic New', sans-serif;
}

button,
a {
   -webkit-tap-highlight-color: transparent;
}

button {
   font: inherit;
   cursor: pointer;
}

a {
   color: inherit;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
   outline: 3px solid #164c81;
   outline-offset: 3px;
}

.lp {
   width: 100%;
   max-width: 375px;
   margin-inline: auto;
   container-type: inline-size;
   background: white;
   overflow: clip;
   padding-bottom: calc(var(--u)*86 + env(safe-area-inset-bottom));
}

.section {
   position: relative;
   width: 100%;
   margin: 0;
}

.section-image {
   display: block;
   width: 100%;
   height: auto;
   margin: 0;
}

.design-text {
   position: absolute;
   margin: 0;
   white-space: pre-wrap;
   overflow-wrap: normal;
   font-weight: 700;
}

.design-text .en {
   font-family: 'Jost', sans-serif;
}

.cta {
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   border: 0;
   border-radius: calc(var(--u)*104);
   color: white;
   background: var(--pink);
   font-weight: 700;
   text-decoration: none;
   padding: 0 calc(var(--u)*36);
   line-height: 1.5;
   white-space: nowrap;
}

.cta img {
   position: absolute;
   width: calc(var(--u)*26);
   height: calc(var(--u)*26);
   right: calc(var(--u)*18);
   object-fit: contain;
}

.inline-link {
   padding: 0;
   border: 0;
   background: none;
   color: #00baff;
   font: inherit;
}

.carousel {
   position: absolute;
   left: 4%;
   width: 92%;
   height: calc(var(--u)*350);
}

.carousel-track {
   position: relative;
   display: flex;
   gap: calc(var(--u)*20);
   width: 100%;
   height: calc(var(--u)*330);
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: none;
   scroll-snap-type: x mandatory;
   overscroll-behavior-x: contain;
   padding-right: calc(var(--u)*145);
   padding-bottom: calc(var(--u)*10);
}

.carousel-track::-webkit-scrollbar {
   display: none;
}

.slide {
   flex: 0 0 calc(var(--u)*200);
   width: calc(var(--u)*200);
   height: calc(var(--u)*320);
   scroll-snap-align: start;
   margin: 0;
}

.slide img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: fill;
   box-shadow: calc(var(--u)*5) calc(var(--u)*7) 0 var(--shadow, #c3d7e6);
   border: 1px solid #766a69;
}

.carousel-dots {
   position: absolute;
   top: calc(var(--u)*336);
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: calc(var(--u)*2);
}

.carousel-dot {
   position: relative;
   border: 0;
   padding: 0;
   width: calc(var(--u)*6);
   height: calc(var(--u)*20);
   background: transparent;
}

.carousel-dot::before {
   content: '';
   display: block;
   width: calc(var(--u)*4);
   height: calc(var(--u)*4);
   background: #c2aaaa;
   border-radius: 50%;
   margin: auto;
}

.carousel-dot[aria-current=true]::before {
   width: calc(var(--u)*6);
   height: calc(var(--u)*6);
   background: #795b59;
}

.carousel-arrow {
   position: absolute;
   z-index: 2;
   top: calc(var(--u)*142);
   width: calc(var(--u)*32);
   height: calc(var(--u)*36);
   border: 1px solid #766a69;
   border-radius: 50%;
   background: #fffffff0;
   color: #514344;
   font-size: calc(var(--u)*26);
   padding: 0;
   line-height: 1;
}

.previous {
   left: calc(var(--u)*4);
}

.next {
   right: calc(var(--u)*4);
}

.carousel-arrow:disabled {
   opacity: 0;
   pointer-events: none;
}

.sr-only {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
   margin: -1px !important;
   overflow: hidden !important;
   clip-path: inset(50%) !important;
   white-space: nowrap !important;
   border: 0 !important;
}

.shops {
   background: #fffff3;
   padding-bottom: calc(var(--u)*37);
}

.ticker {
   height: calc(var(--u)*21);
   border-block: 1px solid var(--green);
   overflow: hidden;
   white-space: nowrap;
   color: var(--green);
   font: italic calc(var(--u)*16)/1.2 'Jost', sans-serif;
   letter-spacing: calc(var(--u)*1.6);
   text-align: center;
}

.shop-heading {
   display: block;
   width: calc(var(--u)*303.496);
   height: auto;
   margin: calc(var(--u)*40) auto calc(var(--u)*24);
}

.tabs {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: calc(var(--u)*6);
   margin: 0 calc(var(--u)*24) calc(var(--u)*32);
}

[role=tab] {
   height: calc(var(--u)*40);
   border: 1px solid var(--green);
   background: white;
   color: var(--green);
   border-radius: calc(var(--u)*4);
   font-size: calc(var(--u)*14);
   font-weight: 700;
   padding: 0;
}

[role=tab][aria-selected=true] {
   background: var(--green);
   color: white;
}

[role=tabpanel] {
   margin: 0 calc(var(--u)*15);
}

[hidden] {
   display: none !important;
}

.area-title {
   display: flex;
   align-items: center;
   gap: calc(var(--u)*8);
   font-size: calc(var(--u)*20);
   line-height: 1.5;
   margin: 0 0 calc(var(--u)*16);
   text-align: center;
}

.area-title::before,
.area-title::after {
   content: '';
   flex: 1;
   height: 1px;
   background: var(--ink);
}

.prefecture {
   font-size: calc(var(--u)*16);
   margin: 0 0 calc(var(--u)*16);
   line-height: 1.3;
}

.shop-card {
   padding: calc(var(--u)*16) calc(var(--u)*10) calc(var(--u)*12);
   border: 1px solid var(--ink);
   background: white;
   margin: 0 0 calc(var(--u)*18);
}

.shop-card:last-child {
   margin-bottom: 0;
}

.shop-summary {
   display: flex;
   gap: calc(var(--u)*12);
   align-items: flex-start;
}

.shop-photo {
   width: calc(var(--u)*130);
   height: calc(var(--u)*130);
   flex: none;
   object-fit: cover;
}

.shop-info {
   min-width: 0;
   flex: 1;
   font-size: calc(var(--u)*12);
   line-height: 1.5;
   font-weight: 700;
}

.shop-info h4 {
   margin: 0;
   border-bottom: 1px solid;
   padding-bottom: calc(var(--u)*4);
   font-size: calc(var(--u)*16);
}

.shop-info p {
   margin: 0;
   padding-top: calc(var(--u)*4);
}

.shop-info .address {
   color: #5a5960;
}

.shop-info .station {
   padding-top: calc(var(--u)*8);
}

.parking {
   display: inline-block;
   margin-top: calc(var(--u)*4);
   border: 1px solid;
   padding: calc(var(--u)*2) calc(var(--u)*8);
}

.hours {
   display: flex;
   gap: calc(var(--u)*8);
   padding-top: calc(var(--u)*8);
   font: italic 500 calc(var(--u)*12)/1.5 'Jost', 'Zen Kaku Gothic New', sans-serif;
}

.hours span {
   flex: 1;
   min-width: 0;
   white-space: pre-line;
   overflow-wrap: anywhere;
}

.hours b {
   display: inline-block;
   margin-right: calc(var(--u)*3);
   padding: calc(var(--u)*2) calc(var(--u)*4);
   background: #5a5960;
   color: white;
   font-size: calc(var(--u)*10);
   font-weight: 500;
}

.shop-cta {
   position: relative;
   margin: calc(var(--u)*12) auto 0;
   width: calc(var(--u)*232);
   height: calc(var(--u)*39);
   font-size: calc(var(--u)*15);
   letter-spacing: calc(var(--u)*.45);
   padding: 0 calc(var(--u)*20) 0 calc(var(--u)*4);
}

.shop-cta img {
   width: calc(var(--u)*18);
   height: calc(var(--u)*18);
   right: calc(var(--u)*13);
}

.missing-stores {
   min-height: calc(var(--u)*180);
   border: 1px solid #b8b8ae;
   padding: calc(var(--u)*20);
   font-size: calc(var(--u)*14);
   line-height: 1.8;
   background: white;
}

.fixed-footer {
   position: fixed;
   z-index: 20;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
   max-width: 375px;
   container-type: inline-size;
   height: calc(var(--u)*76 + env(safe-area-inset-bottom));
   padding-bottom: env(safe-area-inset-bottom);
   background: #fffffff2;
}

.fixed-cta {
   position: absolute;
   left: 4%;
   top: calc(var(--u)*8);
   width: 92%;
   height: calc(var(--u)*60);
   color: white;
   background: #be2440;
   border: 0;
   border-radius: 0;
   text-decoration: none;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: calc(var(--u)*16);
}

.fixed-cta::before {
   content: '';
   position: absolute;
   inset: calc(var(--u)*4);
   border: 1px solid #fff;
}

.fixed-cta .illustration {
   position: absolute;
   width: calc(var(--u)*35);
   height: calc(var(--u)*41);
   left: calc(var(--u)*68);
   top: calc(var(--u)*8);
}

.fixed-cta .reserve-label {
   position: absolute;
   width: calc(var(--u)*69);
   height: auto;
   top: calc(var(--u)*-10);
   left: calc(var(--u)*6);
}

.fixed-cta .arrow {
   position: absolute;
   right: calc(var(--u)*9);
   font-size: calc(var(--u)*15);
}

dialog {
   max-width: min(90vw, 420px);
   padding: 24px;
   border: 1px solid #ddd;
   border-radius: 8px;
   color: var(--ink);
   font-size: 15px;
}

dialog::backdrop {
   background: #0007;
}

dialog button {
   border: 0;
   background: #be2440;
   color: white;
   padding: 10px 24px;
   border-radius: 4px;
}

@media (max-width:600px) {

   .lp,
   .fixed-footer {
      max-width: none;
   }
}

@media (prefers-reduced-motion:reduce) {
   * {
      scroll-behavior: auto !important;
   }
}

.slide img.effects {
   width: calc(var(--u)*210);
   height: calc(var(--u)*330);
   max-width: none;
   border: 0;
   box-shadow: none;
   transform: translate(calc(var(--u)*-1), calc(var(--u)*-1));
}

.slide img.plain {
   object-fit: cover;
}

/* cqw on a container itself resolves against its ancestor; use viewport-safe
   lengths for the outer containers, then cqw for their children. */
.lp {
   padding-bottom: calc(86px + env(safe-area-inset-bottom));
}

.fixed-footer {
   height: calc(76px + env(safe-area-inset-bottom));
}

@media(max-width:600px) {
   .lp {
      padding-bottom: calc(100vw * 86 / 375 + env(safe-area-inset-bottom));
   }

   .fixed-footer {
      height: calc(100vw * 76 / 375 + env(safe-area-inset-bottom));
   }
}

.hero-note {
   position: absolute;
   left: calc(var(--u)*41);
   top: calc(var(--u)*553);
   margin: 0;
   width: calc(var(--u)*294);
   font-size: calc(var(--u)*14);
   line-height: 1.5;
   font-weight: 500;
   text-align: center;
   white-space: nowrap;
}

.hero-note .inline-link {
   color: #e9627d;
   text-decoration: underline;
}

.shop-heading {
   position: relative;
   height: calc(var(--u)*71);
}

.shop-heading>img {
   position: absolute;
   left: 0;
   top: calc(var(--u)*6);
   display: block;
   width: 100%;
   height: calc(var(--u)*32);
}

.shop-heading h2 {
   position: absolute;
   inset: 0;
   margin: 0;
   text-align: center;
   color: var(--green);
   font: italic 700 calc(var(--u)*40)/1 'Jost', sans-serif;
   letter-spacing: calc(var(--u)*1.2);
}

.shop-heading p {
   position: absolute;
   top: calc(var(--u)*48);
   left: 0;
   right: 0;
   margin: 0;
   font-size: calc(var(--u)*18);
   line-height: 1.3;
   text-align: center;
   font-weight: 700;
}

.shop-links {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: calc(var(--u)*8);
   padding-top: calc(var(--u)*7);
   font-size: calc(var(--u)*11);
   line-height: 1.5;
}

.shop-links a {
   text-underline-offset: 3px;
   padding-block: calc(var(--u)*3);
}

.shop-links+.shop-cta {
   margin-top: calc(var(--u)*8);
}

/* Product codes below the original-size brand photographs. */
:is(#brand, #original, #selection) .carousel {
   height: calc(var(--u)*376);
}

:is(#brand, #original, #selection) .carousel-track {
   height: calc(var(--u)*354);
}

:is(#brand, #original, #selection) .slide {
   height: calc(var(--u)*350);
}

:is(#brand, #original, #selection) .slide img {
   height: calc(var(--u)*320);
}

:is(#brand, #original, #selection) .product-code {
   margin-top: calc(var(--u)*12);
   font-size: calc(var(--u)*14);
   line-height: 1.4;
   font-weight: 600;
   text-align: center;
   color: #141316;
}

:is(#brand, #original, #selection) .carousel-dots {
   top: calc(var(--u)*354);
}
/* Client revisions, 2026-09-18. */
.shop-heading { height:calc(var(--u)*101); }
.shop-heading .shop-instruction { top:calc(var(--u)*78); font-size:calc(var(--u)*12); line-height:1.5; margin:0; font-weight:500; }
.hours { font-style:normal; }
.hours b { white-space:nowrap; }
.rental-set-note { position:absolute; z-index:1; top:calc(var(--u)*218); left:23%; width:75%; margin:0; font-size:calc(var(--u)*9); line-height:1.4; font-weight:700; color:#141316; text-shadow:0 0 2px #fff,0 0 3px #fff; }