*{box-sizing:border-box}
:root{--teal:#19a59d;--mint:#d1f5ef;--ink:#202020}
html,body{margin:0;padding:0;background:#FFF;font-family:"Noto Sans JP",sans-serif;color:var(--ink)}
body{overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

#site-scale{position:relative;width:100%;overflow:hidden}
#site-canvas{position:absolute;top:0;left:0;width:390px;background:#fff;transform-origin:0 0}

.site-header{position:absolute;z-index:20;top:0;left:0;width:390px;height:68px;padding:14px 18px;color:#fff;pointer-events:none}
.page-name{font:700 27px/1 Roboto,sans-serif;letter-spacing:.02em;pointer-events:auto}
.menu-button{position:absolute;top:10px;right:14px;width:34px;height:34px;background:none;border:0;padding:5px;pointer-events:auto;z-index:22}
.menu-button span{display:block;height:2px;background:#fff;margin:5px 0;transition:.25s}
.menu-button.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-button.is-open span:nth-child(2){opacity:0}
.menu-button.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.global-nav{position:fixed;z-index:21;inset:0 auto auto 0;width:390px;height:100vh;background:rgba(25,165,157,.97);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;opacity:0;visibility:hidden;pointer-events:none;transition:.25s}
.global-nav.is-open{opacity:1;visibility:visible;pointer-events:auto}
.global-nav a{font:700 24px Roboto,sans-serif;color:#fff}

.hero{width:390px;height:auto;overflow:hidden;}
.hero img{width:390px;height:auto;object-fit:cover;object-position:center top}

.section{padding:68px 21px}
.section h2{margin:0 0 30px;text-align:center;font-size:18px;line-height:1.35;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.section p{font-size:10px;line-height:1.85;margin:0}
.intro{text-align:center}

.brands{padding-top:74px;padding-bottom:62px}
.brand-item{margin-bottom:26px}
.brand-item:last-child{margin-bottom:0}
.brand-item img{width:100%;height:306px;object-fit:cover}
.brand-item:nth-of-type(1) img{object-position:center 48%}
.brand-item:nth-of-type(2) img{object-position:center}
.brand-item:nth-of-type(3) img{object-position:center 48%}
.brand-item h3{font-size:11px;margin:12px 0 6px;font-weight:700}
.brand-item p{font-size:8.5px;line-height:1.75}

.mint{background:var(--mint)}
.achievements{padding-top:62px;padding-bottom:65px}
.achievements h2,.media h2,.recruit h2{color:#007f79}
.achievements .intro{margin-top:-15px;margin-bottom:25px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.stats>div{height:95px;background:#4d5555;color:#fff;text-align:center;display:flex;flex-direction:column;justify-content:center}
.stats strong{font-size:23px;line-height:1.05;font-weight:500}
.stats span{font-size:8px;line-height:1.45;margin-top:8px}

.stores{padding-top:65px;padding-bottom:62px}
.stores .intro{margin-top:-12px;margin-bottom:22px}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 10px}
.logos img{width:49px;height:38px;object-fit:contain}

.media{padding-top:62px;padding-bottom:61px}
.media h2{line-height:1.3}
.media .intro{margin-top:-15px;margin-bottom:28px}
.media figure{margin:0 0 12px}
.media figure img{width:100%;height:224px;object-fit:cover}
.media figure:nth-of-type(1) img{object-position:center 50%}
.media figure:nth-of-type(2) img{object-position:center 35%}
.media figure:nth-of-type(3) img{object-position:center 42%}
.media figcaption{background:#fff;padding:10px 8px;font-size:8px;text-align:center}

.brandsite{padding-top:69px;padding-bottom:72px}
.brandsite .intro{margin-top:-14px;margin-bottom:27px}
.site-card{display:flex;align-items:center;gap:14px;border-top:1px solid #eee;border-bottom:1px solid #eee;padding:12px 2px}
.site-card img{width:160px;height:77px;object-fit:cover}
.site-card div{display:flex;flex-direction:column;gap:5px}
.site-card b{font-size:9px}
.site-card span{font-size:7px;color:#777}

.recruit{text-align:center;padding-top:64px;padding-bottom:67px}
.recruit p{margin-top:-12px;margin-bottom:26px}
.btn{display:inline-flex;min-width:185px;justify-content:center;background:#199e98;color:#fff;padding:12px 20px;border-radius:2px;font-size:8px;font-weight:600}

.site-footer{position:relative;background:#eee;text-align:center;padding:34px 20px 25px;font-size:7px}
.accent{position:absolute;left:0;right:0;top:0;height:13px;background:url("../images/footer-accent.jpg") center/cover}
.footer-nav{display:flex;justify-content:center;gap:20px;margin:3px 0 18px}
.footer-nav a{font-size:6px}
.footer-logo{width:48px;margin:0 auto 8px}
.site-footer p{font-size:6.5px;line-height:1.7;margin:0 0 12px}
.site-footer small{font-size:6px}


/* --- v2: reference screenshot corrections --- */
.hero{position:relative}
.hero-copy{
  position:absolute;
  z-index:3;
  top:72px;
  left:18px;
  color:#fff;
}
.hero-copy h1{
  margin:0 0 12px;
  font:700 27px/1 Roboto,sans-serif;
  letter-spacing:.02em;
}
.hero-copy p{
  margin:0;
  font-size:8px;
  line-height:1.55;
  font-weight:500;
}
.logos{
  max-width:255px;
  margin:0 auto;
}
.logos img{
  width:48px;
  height:38px;
  object-fit:contain;
}

@media (min-width:1px) and (max-width:850px) { 
.site-footer{position:relative;background:#eee;text-align:center;padding:34px 20px 25px;font-size:10px}
.footer-nav a{font-size:9px}
.footer-logo{width:100px;margin:0 auto 8px}
.site-footer p{font-size:9.5px;line-height:1.7;margin:0 0 12px}
.site-footer small{font-size:9px}
}

@media (min-width: 0px) and (max-width: 640px) {
.hero-copy h1{
  margin:0 0 12px;
  font:700 35px/1 Roboto,sans-serif;
  letter-spacing:.2em;
}
.hero-copy p{
  margin:0;
  font-size:12px;
  line-height:1.75;
  font-weight:500;
}
.brand-item h3{font-size:16px;margin:12px 0 6px;font-weight:700}
.brand-item p{font-size:12px;line-height:1.75}
.section p{font-size:12px;line-height:1.85;margin:0}
.media figcaption{background:#fff;padding:10px 8px;font-size:12px;text-align:center}
.btn{display:inline-flex;min-width:200px;justify-content:center;background:#199e98;color:#fff;padding:12px 20px;border-radius:2px;font-size:12px;font-weight:600;margin-top: 40px}
}