/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Noto Sans JP",sans-serif;
  font-weight:500;
  line-height:1.7;
  color:#0f1d3a;
  background:#0a1224;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}

/* ============ THEME ============ */
:root{
  --green:#00a248;       /* main vibrant green */
  --green-2:#008a3c;
  --green-deep:#006d2f;
  --navy:#0f1d3a;        /* deep navy */
  --navy-2:#1a2855;
  --navy-3:#0a1224;
  --white:#ffffff;
  --off-white:#f4f6fa;
  --text:#0f1d3a;
  --text-muted:#5a6388;
  --accent-red:#e63946;
  --accent-red-deep:#c1121f;
  --accent-yellow:#ffd400;
  --accent-yellow-deep:#e6b800;
  --line:#e2e6ee;
}

/* ============ PC SIDE BACKGROUND ============ */
body{background:#0a1224}

.pc-deco{
  position:fixed;
  top:0;bottom:0;
  width:calc((100vw - 480px) / 2);
  pointer-events:none;
  overflow:hidden;
  /*z-index:0;*/
  display:none;
}
.pc-deco-bg {
	background:url(images/deco-bg.png) no-repeat center / cover;
	width: 100vw;
}
.pc-deco-overlay {
	background:url(images/deco-overlay.png) no-repeat center / cover;
	width: 100vw;
	z-index: 2;
}
.pc-deco--left{
	left:0;
	z-index: 2;
}
.pc-deco--right{
	right:0;
	z-index: 2;
}

/* ---- Diagonal green band with subtle moving stripes ---- */
.pc-deco__band{
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(-45deg,
      rgba(0,0,0,0) 0 22px,
      rgba(0,0,0,.12) 22px 23px),
    linear-gradient(135deg, var(--green-2), var(--green));
  background-size:auto, 200% 200%;
  animation:bandFlow 24s linear infinite;
}
.pc-deco--left .pc-deco__band{
  clip-path:polygon(0 100%, 0 70%, 80% 30%, 80% 60%);
}
.pc-deco--right .pc-deco__band{
  clip-path:polygon(100% 100%, 100% 70%, 20% 30%, 20% 60%);
  animation-direction:reverse;
}
@keyframes bandFlow{
  from{background-position:0 0, 0% 0%}
  to{background-position:60px 60px, 100% 100%}
}

/* ---- Second diagonal navy band ---- */
.pc-deco__band2{
  position:absolute;
  inset:0;
  background:var(--navy-2);
}
.pc-deco--left .pc-deco__band2{
  clip-path:polygon(0 50%, 0 35%, 60% 5%, 60% 20%);
}
.pc-deco--right .pc-deco__band2{
  clip-path:polygon(100% 50%, 100% 35%, 40% 5%, 40% 20%);
}

/* ---- Big watermark number (static) ---- */
.pc-deco__num{
  position:absolute;
  font-family:"Anton",sans-serif;
  font-size:clamp(160px,15vw,260px);
  line-height:.85;
  color:rgba(255,255,255,.18);
  font-weight:400;
  letter-spacing:-.04em;
  pointer-events:none;
  mix-blend-mode:overlay;
}
.pc-deco--left .pc-deco__num{top:8%;left:6%}
.pc-deco--right .pc-deco__num{bottom:8%;right:6%}

/* ---- Vertical scrolling text (replaces static vtext) ---- */
.pc-deco__vtext{
  position:absolute;
  top:0;bottom:0;
  width:84px;
  overflow:hidden;
}
.pc-deco--left .pc-deco__vtext{left:50%;transform:translateX(-50%)}
.pc-deco--right .pc-deco__vtext{left:50%;transform:translateX(-50%)}
.pc-deco__vtext-track{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(-90deg);
  white-space:nowrap;
  font-family:"Anton",sans-serif;
  font-size:clamp(80px,9vw,140px);
  letter-spacing:.04em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.18);
  font-weight:400;
}
.pc-deco--right .pc-deco__vtext-track{
  transform:translate(-50%,-50%) rotate(90deg);
  -webkit-text-stroke-color:rgba(255,255,255,.18);
}

/* ---- Corner blocks ---- */
.pc-deco__square{
  position:absolute;
  width:18px;height:18px;
  background:var(--green);
}
.pc-deco--left .pc-deco__square--tl{top:32px;left:32px}
.pc-deco--left .pc-deco__square--bl{bottom:32px;left:32px;background:var(--accent-yellow)}
.pc-deco--right .pc-deco__square--tr{top:32px;right:32px}
.pc-deco--right .pc-deco__square--br{bottom:32px;right:32px;background:var(--accent-yellow)}

/* ---- Horizontal lines ---- */
.pc-deco__line{
  position:absolute;
  height:2px;
  background:var(--green);
}
.pc-deco--left .pc-deco__line{top:32px;left:60px;width:80px}
.pc-deco--right .pc-deco__line{top:32px;right:60px;width:80px}

/* ---- Slow horizontal scan line ---- */
.pc-deco__scan{
  position:absolute;
  left:0;right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  opacity:.6;
  animation:scanY 9s ease-in-out infinite;
  pointer-events:none;
}
.pc-deco--right .pc-deco__scan{animation-delay:-4.5s}
@keyframes scanY{
  0%,100%{top:5%;opacity:0}
  10%,90%{opacity:.6}
  50%{top:95%;opacity:.6}
}

/* ---- Vertical scrolling marquee (identical L/R) ---- */
.pc-deco__marquee{
  position:absolute;
  top:0;bottom:0;
  width:36px;
  overflow:hidden;
  display:flex;
  justify-content:center;
}
.pc-deco--left .pc-deco__marquee{right:0}
.pc-deco--right .pc-deco__marquee{left:0}
.pc-deco__marquee-track{
  position:absolute;
  top:0;
  white-space:nowrap;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:.4em;
  color:rgba(255,255,255,.4);
  animation:marqueeY 50s linear infinite;
  line-height:36px;
}
.pc-deco--right .pc-deco__marquee-track{animation-direction:reverse}
.pc-deco__marquee-track span{
  padding:0 18px;
  display:inline-block;
}
@keyframes marqueeY{
  from{transform:translateY(0)}
  to{transform:translateY(-50%)}
}

.pc-deco__rotate-text {
  position:absolute;
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:clamp(54px,4vw,88px);
  font-style: italic;
  color:#fff;
  transform:rotate(-15deg);
}

.pc-deco--left .pc-deco__rotate-text{left:45px; bottom: 25vh;}
.pc-deco--right .pc-deco__rotate-text{right:25px; top: 25vh;}

/* ---- Tag bottom label ---- */
.pc-deco__tag{
  position:absolute;
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:13px;
  font-style: italic;
  letter-spacing:.1em;
  color:#fff;
}
.pc-deco__tag strong {
	color: #FFD400;
	font-size: 1.5em;
}
.pc-deco--left .pc-deco__tag{left:15px; top: 20px;}
.pc-deco--right .pc-deco__tag{right:15px; bottom: 20px;}
.pc-deco__tag::before{
  content:"";
  width:24px;height:1px;background:var(--green);
}

/* ============ MAIN WRAPPER ============ */
.lp{
  position:relative;
  /*z-index:1;*/
  max-width:480px;
  margin:0 auto;
  background:var(--white);
  color:var(--text);
  overflow:hidden;
}

/* ============ SECTION COMMON ============ */
section{
  position:relative;
  padding:72px 24px;
}

section:not(.hero) {
	z-index: 2;
}

/* color variants */
.sec--green{background:var(--green);color:var(--white)}
.sec--green-deep{background:var(--green-2);color:var(--white)}
.sec--navy{background:var(--navy);color:var(--white)}
.sec--navy-2{background:var(--navy-2);color:var(--white)}
.sec--white{background:var(--white);color:var(--text)}
.sec--off{background:var(--off-white);color:var(--text)}

/* DIAGONAL TRANSITIONS - each non-hero section has angled top */
section.sec--cut-top{
  margin-top:-30px;
  padding-top:100px;
  clip-path:polygon(0 30px, 100% 0, 100% 100%, 0 100%);
}
section.sec--cut-top-rev{
  margin-top:-30px;
  padding-top:100px;
  clip-path:polygon(0 0, 100% 30px, 100% 100%, 0 100%);
}
section.sec--cut-bot{
  padding-bottom:100px;
  margin-bottom:-30px;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 30px));
}
section.sec--cut-both{
  margin-top:-30px;
  margin-bottom:-30px;
  padding-top:100px;
  padding-bottom:100px;
  clip-path:polygon(0 30px, 100% 0, 100% calc(100% - 30px), 0 100%);
}

/* ============ TYPOGRAPHY HELPERS ============ */
.eng{
  font-family:"Anton","Oswald",sans-serif;
  font-weight:400;
  letter-spacing:.04em;
}
.osw{
  font-family:"Oswald",sans-serif;
  font-weight:700;
}

/* ============ SECTION TITLE (Yakult-style) ============ */
.sec-title{
  text-align:center;
  margin-bottom:40px;
  position:relative;
}
.sec-title__en{
  display:block;
  font-family:"Anton",sans-serif;
  font-size:48px;
  letter-spacing:.04em;
  line-height:1;
  margin-bottom:8px;
}
.sec-title__jp{
  display:block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.4em;
  opacity:.85;
}
.sec-title__line{
  display:block;
  width:60px;
  height:3px;
  margin:18px auto 0;
  background:currentColor;
  opacity:.4;
}
.sec--white .sec-title{color:var(--green-deep)}
.sec--off .sec-title{color:var(--green-deep)}
.sec--green .sec-title{color:var(--white)}
.sec--navy .sec-title{color:var(--white)}
.sec--green .sec-title__en{color:var(--white)}
.sec--navy .sec-title__en{color:var(--accent-yellow)}

/* ============ KICKER / CHIP ============ */
.chip{
  display:inline-block;
  padding:6px 14px;
  font-family:"Oswald",sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.25em;
  margin-bottom:14px;
}
.chip--green{background:var(--green);color:#fff}
.chip--navy{background:var(--navy);color:#fff}
.chip--yellow{background:var(--accent-yellow);color:var(--navy)}
.chip--red{background:var(--accent-red);color:#fff}
.chip--outline{background:transparent;border:2px solid currentColor}

/* ============ HEADLINES ============ */
.h-mega{
  font-size:32px;
  font-weight:900;
  line-height:1.4;
  margin-bottom:20px;
  letter-spacing:.005em;
}
.h-large{
  font-size:24px;
  font-weight:900;
  line-height:1.5;
  margin-bottom:18px;
}

.sec--white .h-mega,.sec--off .h-mega,
.sec--white .h-large,.sec--off .h-large{color:var(--navy)}

/* highlight word styles */
.hl-y{
  background:linear-gradient(transparent 60%, var(--accent-yellow) 60%);
  padding:0 4px;
}
.hl-g{color:var(--green-deep)}
.hl-r{color:var(--accent-red-deep)}
.sec--green .hl-y,.sec--navy .hl-y{
  background:none;color:var(--accent-yellow);padding:0;
}
.sec--green .hl-g,.sec--navy .hl-g{color:var(--accent-yellow)}
.sec--green .hl-r,.sec--navy .hl-r{color:var(--accent-yellow)}

/* big number style */
.numbox{
  font-family:"Anton",sans-serif;
  font-weight:400;
  display:inline-block;
  letter-spacing:-.02em;
}

/* ============ LEAD TEXT ============ */
.lead{
  font-size:16px;
  line-height:1.95;
  color:#3a4366;
  margin-bottom:18px;
}
.lead strong{color:var(--navy);font-weight:900}
.lead .em{color:var(--green-deep);font-weight:900}
.lead .em-y{
  background:linear-gradient(transparent 60%, var(--accent-yellow) 60%);
  font-weight:900;
  color:var(--navy);
  padding:0 2px;
}
.sec--green .lead,.sec--navy .lead{color:rgba(255,255,255,.92)}
.sec--green .lead strong,.sec--navy .lead strong{color:var(--white)}
.sec--green .lead .em,.sec--navy .lead .em{color:var(--accent-yellow);background:none;padding:0}
.sec--green .lead .em-y,.sec--navy .lead .em-y{
  background:none;color:var(--accent-yellow);padding:0;
}

/* ============ HERO ============ */
.hero{
  padding:0;
  background:#0a1224;
  color:var(--white);
  position:relative;
  overflow:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* full hero background image (slow zoom for cinematic feel) */
.hero__bg-image{
  position:absolute;
  inset:0;
  background:url('images/hero-bg.png') center bottom / cover no-repeat;
  z-index:0;
  animation:heroZoom 18s ease-in-out infinite alternate;
}
@keyframes heroZoom{
  from{transform:scale(1)}
  to{transform:scale(1.08)}
}

/* dark + green overlay for text legibility & brand consistency */
.hero__overlay{
    position: absolute;
    inset: 0;
    z-index: 3;
    background: url(images/hero-overlay.png) no-repeat center bottom / cover;
    pointer-events: none;
}

/* subtle diagonal stripes overlay */
.hero__pattern{
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(135deg, transparent 0 28px, rgba(0,0,0,.06) 28px 29px);
  pointer-events:none;
  z-index:2;
  mix-blend-mode:multiply;
}

/* big watermark text */
.hero__watermark{
  position:absolute;
  bottom:-30px;
  right:-20px;
  font-family:"Anton",sans-serif;
  font-size:200px;
  line-height:.85;
  letter-spacing:-.04em;
  color:rgba(255,255,255,.06);
  pointer-events:none;
  z-index:2;
}

.hero__top{
  position:relative;
  padding:20px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:5;
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:.25em;
  border-bottom:1px solid rgba(255,255,255,.2);
  background:linear-gradient(180deg, rgba(0,0,0,.3), transparent);
}
.hero__top-tag{display:flex;align-items:center;gap:8px}
.hero__top-tag::before{
  content:"";
  width:24px;height:2px;background:var(--accent-yellow);
}
.hero__top-meta{color:rgba(255,255,255,.7)}

.hero__inner{
  position:relative;
  flex:1;
  padding:0 0 56px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  z-index:3;
}

.hero__alert{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 16px;
  background:var(--navy);
  color:var(--accent-yellow);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  margin-bottom:22px;
  align-self:flex-start;
}
.hero__alert::before{
  content:"!";
  font-family:"Anton",sans-serif;
  width:20px;height:20px;
  background:var(--accent-yellow);
  color:var(--navy);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;
}

/* ============================================ */
/* HERO CATCH ─ REMAKE */
/* ============================================ */
.hero__title {
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .1em;
  padding-left: 32px;
  position: absolute;
  left: 15px;
  top: 15px;
}

.hero__title:before {
	content: "";
	background: #FFD400;
	height: 2px;
	width: 25px;
	position: absolute;
	left: 0;
	top: 7px;
}

.hero__catch{
  font-family:"Noto Sans JP",sans-serif;
  font-weight:900;
  color:#fff;
  margin:0;
  letter-spacing:.02em;
  position:relative;
  font-size:0;
}

.hero__headline {
	margin: -56px -20px auto;
}

.hero__catch-line{
  display:block;
  font-size:42px;
  line-height:1.15;
  font-weight:900;
  text-shadow:
    0 2px 10px rgba(0,0,0,.85),
    0 0 30px rgba(0,0,0,.5);
  opacity:0;
  transform:translateX(-30px);
  animation:catchSlideIn .7s cubic-bezier(.2,.85,.25,1) forwards;
}
.hero__catch-line:nth-child(1){ animation-delay:.15s; }
.hero__catch-line:nth-child(2){ animation-delay:.35s; }
.hero__catch-line:nth-child(3){ animation-delay:.55s; }

.hero__catch-line--small{
  font-size:28px;
  font-weight:700;
  color:rgba(255,255,255,.88);
  margin-top:4px;
  letter-spacing:.08em;
}

@keyframes catchSlideIn{
  to{ opacity:1; transform:translateX(0); }
}

.hero__mark{
  position:relative;
  color:var(--accent-yellow);
  display:inline-block;
  font-weight:900;
  z-index:1;
  padding:0 2px;
}
.hero__mark::after{
  content:"";
  position:absolute;
  left:-2px; right:-2px;
  bottom:4px;
  height:16px;
  background:linear-gradient(90deg, rgba(255,212,0,.55), rgba(255,212,0,.15));
  z-index:-1;
  transform:scaleX(0);
  transform-origin:left center;
  animation:markSweep .55s ease-out forwards;
}
.hero__catch-line:nth-child(1) .hero__mark::after{ animation-delay:.6s; }
.hero__catch-line:nth-child(2) .hero__mark::after{ animation-delay:.85s; }
@keyframes markSweep{
  to{ transform:scaleX(1); }
}

.hero__catch-dot{
  color:var(--accent-yellow);
  display:inline-block;
  margin-left:-2px;
}

.hero__catch-em{
  display:inline-block;
  position:relative;
  margin-top:12px;
  padding:10px 16px 12px;
  background:var(--accent-yellow);
  color:var(--navy);
  font-family:"Noto Sans JP",sans-serif;
  font-size:clamp(22px, 7vw, 32px);
  font-weight:900;
  letter-spacing:.01em;
  line-height:1.2;
  white-space:nowrap;
  transform:skewX(-7deg) translateY(20px);
  opacity:0;
  box-shadow:
    0 6px 0 var(--accent-yellow-deep),
    0 14px 30px rgba(0,0,0,.45);
  animation:emSlam .55s cubic-bezier(.2,1.3,.4,1) .85s forwards;
  overflow:hidden;
}
.hero__catch-em-text{
  display:inline-block;
  transform:skewX(7deg);
  position:relative;
  z-index:2;
}
.hero__catch-em::before{
  content:"";
  position:absolute;
  top:-7px; left:-7px;
  right:-3px; bottom:-3px;
  border:2.5px solid var(--accent-red);
  z-index:0;
  pointer-events:none;
}
.hero__catch-em::after{
  content:"";
  position:absolute;
  top:-50%; left:-30%;
  width:40%; height:200%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform:rotate(20deg);
  animation:emShine 3.2s ease-in-out 1.6s infinite;
  z-index:1;
}
@keyframes emShine{
  0%{ left:-30%; opacity:0; }
  20%{ opacity:1; }
  60%{ left:120%; opacity:0; }
  100%{ left:120%; opacity:0; }
}
@keyframes emSlam{
  0%{ transform:skewX(-7deg) translateY(20px) scale(1.08); opacity:0; }
  60%{ transform:skewX(-7deg) translateY(-4px) scale(.98); opacity:1; }
  100%{ transform:skewX(-7deg) translateY(0) scale(1); opacity:1; }
}

/* ============================================ */
/* HERO LEADLINE ─ REMAKE */
/* ============================================ */
.hero__leadline{
  display: flex;
  justify-content: flex-end;
  margin:0;
  padding:20px 20px 0px;
  position:relative;
  opacity:0;
  transform:translateY(20px);
  animation:leadlineIn .6s ease-out 1.3s forwards;
}

.hero__leadline img {
	width: 155px;
}

@keyframes leadlineIn{
  to{ opacity:1; transform:translateY(0); }
}

.hero__leadline-row{
  display:flex;
  align-items:baseline;
  gap:4px;
  flex-wrap:wrap;
  margin-bottom:10px;
  line-height:1.15;
}
.hero__leadline-num{
  font-family:"Anton",sans-serif;
  font-size:42px;
  color:var(--accent-yellow);
  letter-spacing:.02em;
  line-height:1;
  text-shadow:
    0 0 1px var(--accent-yellow),
    0 4px 14px rgba(255,212,0,.3);
  display:inline-flex;
  align-items:baseline;
}
.hero__leadline-unit{
  font-family:"Noto Sans JP",sans-serif;
  font-size:22px;
  font-weight:900;
  margin-left:2px;
  letter-spacing:.01em;
  color:var(--accent-yellow);
}
.hero__leadline-txt{
  font-size:18px;
  font-weight:700;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}

.hero__leadline-row--accent{
  padding-bottom:12px;
  margin-bottom:12px;
  border-bottom:1px dashed rgba(255,255,255,.22);
}

.hero__leadline-foot{
  font-size:16px;
  font-weight:700;
  line-height:1.55;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.hero__leadline-foot strong{
  color:var(--accent-yellow);
  font-weight:900;
  font-size:22px;
}

/* scroll cue */
.hero__scroll-cue{
  text-align:center;
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:.4em;
  color:rgba(255,255,255,.7);
  position:relative;
  padding-top:38px;
}
.hero__scroll-cue::before{
  content:"";
  position:absolute;
  top:0;left:50%;
  width:1px;height:26px;
  background:var(--accent-yellow);
  transform-origin:top;
  animation:scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ============ CTA BUTTON (FLAT, NO GLOW) ============ */
.cta{
  position:relative;
  display:block;
  margin:32px 0 12px;
  padding:20px 24px;
  background:var(--accent-yellow);
  color:var(--navy);
  font-weight:900;
  font-size:16px;
  text-align:center;
  letter-spacing:.02em;
  line-height:1.5;
  border:3px solid var(--navy);
  box-shadow:6px 6px 0 0 var(--navy);
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
  z-index:1;
}
.cta:hover{
  background:#ffea4c;
  transform:translate(-3px,-3px);
  box-shadow:9px 9px 0 0 var(--navy);
}
.cta:active{
  transform:translate(3px,3px);
  box-shadow:0 0 0 0 var(--navy);
}

.cta__sub{
  display:block;
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:.25em;
  color:var(--navy);
  margin-bottom:6px;
  opacity:.7;
}
.cta__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;height:22px;
  background:var(--navy);
  color:var(--accent-yellow);
  margin-right:8px;
  font-size:11px;
  vertical-align:middle;
  font-weight:900;
}
.cta__arrow{
  display:inline-block;
  margin-left:8px;
  transition:transform .2s ease;
}
.cta:hover .cta__arrow{transform:translateX(4px)}

/* CTA on green section / hero */
.sec--green .cta,.hero .cta{
  background:var(--accent-yellow);
  color:var(--navy);
  border-color:var(--navy);
  box-shadow:6px 6px 0 0 var(--navy-3);
}
.sec--green .cta:hover,.hero .cta:hover{
  box-shadow:9px 9px 0 0 var(--navy-3);
}

/* CTA on navy section */
.sec--navy .cta,.sec--navy-2 .cta{
  background:var(--accent-yellow);
  color:var(--navy);
  border-color:var(--white);
  box-shadow:6px 6px 0 0 var(--green);
}
.sec--navy .cta:hover,.sec--navy-2 .cta:hover{
  box-shadow:9px 9px 0 0 var(--green);
}

/* CTA on white section */
.sec--white .cta,.sec--off .cta{
  background:var(--green);
  color:var(--white);
  border-color:var(--navy);
  box-shadow:6px 6px 0 0 var(--navy);
}
.sec--white .cta .cta__sub,.sec--off .cta .cta__sub{color:rgba(255,255,255,.85)}
.sec--white .cta .cta__icon,.sec--off .cta .cta__icon{
  background:var(--white);color:var(--green-deep);
}
.sec--white .cta:hover,.sec--off .cta:hover{
  background:var(--green-2);
  box-shadow:9px 9px 0 0 var(--navy);
}

/* CTA inside .ps (postscript dark) */
.ps .cta{
  background:var(--accent-yellow);
  color:var(--navy);
  border-color:var(--white);
  box-shadow:6px 6px 0 0 var(--accent-red);
}
.ps .cta:hover{box-shadow:9px 9px 0 0 var(--accent-red)}

/* main highlight CTA (yellow) */
.cta--main{
  font-size:18px;
  padding:24px;
}

/* ============ RECORD STATS GRID ============ */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:6px;
  margin:30px 0;
}
.stats-cell{
  background:var(--navy);
  color:var(--white);
  padding:24px 8px 18px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.stats-cell--y{background:var(--accent-yellow);color:var(--navy)}
.stats-cell--g{background:var(--green);color:var(--white)}
.stats-cell::after{
  content:"";
  position:absolute;
  top:0;left:0;
  width:28px;height:3px;
  background:var(--accent-yellow);
}
.stats-cell--y::after{background:var(--navy)}
.stats-cell--g::after{background:var(--accent-yellow)}
.stats-num{
  font-family:"Anton",sans-serif;
  font-size:54px;
  line-height:.9;
  display:block;
  letter-spacing:-.02em;
}
.stats-num--small{font-size:32px;margin-top:14px}
.stats-suffix{
  font-family:"Noto Sans JP",sans-serif;
  font-weight:900;
  font-size:13px;
  display:inline-block;
}
.stats-label{
  display:block;
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:9px;
  letter-spacing:.22em;
  margin-top:8px;
  opacity:.85;
}

/* ============ DUMMY IMAGE PLACEHOLDER ============ */
.dummy-img{
  position:relative;
  width:100%;
  background:
    repeating-linear-gradient(
      45deg,
      #cfd3dc 0 14px,
      #c2c6d0 14px 15px
    );
  border:2px solid #8b94a8;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:24px 0;
  overflow:hidden;
  aspect-ratio:4/3;
  text-align:center;
  padding:24px 16px;
  color:#2d3458;
  box-sizing:border-box;
}
.dummy-img--wide{aspect-ratio:16/9}
.dummy-img--square{aspect-ratio:1/1}
.dummy-img--tall{aspect-ratio:3/4}
.dummy-img--full{
  margin-left:-24px;
  margin-right:-24px;
  width:calc(100% + 48px);
  border-left:none;
  border-right:none;
}
.dummy-img__icon{
  font-size:36px;
  opacity:.5;
  line-height:1;
  margin-bottom:10px;
}
.dummy-img__lbl{
  display:inline-block;
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:10px;
  letter-spacing:.3em;
  color:#3a4366;
  margin-bottom:10px;
  padding:4px 10px;
  background:#fff;
  border:1px solid #8b94a8;
}
.dummy-img__txt{
  font-size:13px;
  font-weight:700;
  color:#1a2855;
  letter-spacing:.05em;
  line-height:1.55;
  max-width:280px;
  background:rgba(255,255,255,.7);
  padding:6px 12px;
  border-radius:2px;
}
.dummy-img__size{
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:10px;
  color:#5a6388;
  margin-top:8px;
  letter-spacing:.2em;
}
/* dark section variant - gray still visible */
.sec--green .dummy-img,.sec--navy .sec--green-deep .dummy-img{
  border-color:rgba(255,255,255,.4);
}

/* multi-image grid */
.dummy-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:24px 0;
}
.dummy-grid .dummy-img{margin:0;aspect-ratio:1/1}

/* ============ FRAME / LIST BLOCK ============ */
.frame{
  position:relative;
  background:var(--white);
  border:2px solid var(--navy);
  padding:32px 22px 28px;
  margin:30px 0;
}
.frame__label{
  position:absolute;
  top:-14px;left:18px;
  background:var(--navy);
  color:var(--white);
  padding:5px 14px;
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:.2em;
}
.frame ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.frame li{
  position:relative;
  padding-left:32px;
  font-size:14.5px;
  line-height:1.75;
  color:#3a4366;
}
.frame li::before{
  content:"";
  position:absolute;
  left:0;top:9px;
  width:18px;height:6px;
  background:var(--green);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}
.frame li strong{color:var(--navy)}

.frame--good{border-color:var(--green-deep)}
.frame--good .frame__label{background:var(--green-deep);color:var(--white)}

.frame--bad{border-color:var(--accent-red)}
.frame--bad .frame__label{background:var(--accent-red);color:var(--white)}
.frame--bad li::before{background:var(--accent-red)}

.frame--yellow{
  background:#fffbe6;
  border-color:var(--accent-yellow-deep);
}
.frame--yellow .frame__label{background:var(--accent-yellow-deep);color:var(--navy)}
.frame--yellow li::before{background:var(--accent-yellow-deep)}

/* on dark sections */
.sec--green .frame,.sec--navy .frame{
  background:rgba(255,255,255,.06);
  border-color:var(--white);
  color:var(--white);
}
.sec--green .frame__label,.sec--navy .frame__label{
  background:var(--white);color:var(--navy);
}
.sec--green .frame li,.sec--navy .frame li{color:rgba(255,255,255,.92)}
.sec--green .frame li strong,.sec--navy .frame li strong{color:var(--white)}
.sec--green .frame li::before,.sec--navy .frame li::before{background:var(--accent-yellow)}

/* ============ THE WALL ============ */
.wall{
  position:relative;
  text-align:center;
  padding:50px 24px;
  margin:24px 0;
  background:var(--navy);
  color:var(--white);
  border-top:6px solid var(--accent-red);
  border-bottom:6px solid var(--accent-red);
}
.wall__warn{
  display:inline-block;
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.3em;
  color:var(--accent-red);
  margin-bottom:14px;
  padding:4px 12px;
  border:1px solid var(--accent-red);
}
.wall__text{
  font-size:26px;
  font-weight:900;
  line-height:1.4;
  margin-bottom:6px;
  color:var(--white);
}
.wall__num{
  font-family:"Anton",sans-serif;
  font-weight:400;
  font-size:120px;
  color:var(--accent-red);
  line-height:.9;
  display:block;
  margin:14px 0;
  letter-spacing:-.04em;
}
.wall__num small{font-size:32px;margin-left:4px;color:var(--white);font-family:"Noto Sans JP",sans-serif;font-weight:900}
.wall__sub{
  font-size:13px;
  color:rgba(255,255,255,.7);
  letter-spacing:.05em;
}

/* ============ COMPARE BAR ============ */
.compare{
  margin:30px 0;
  padding:24px;
  background:var(--white);
  border:2px solid var(--navy);
}
.sec--green .compare,.sec--navy .compare{
  background:rgba(255,255,255,.05);
  border-color:var(--white);
}
.compare__cap{
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:12px;letter-spacing:.2em;
  color:var(--navy);
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.sec--green .compare__cap,.sec--navy .compare__cap{
  color:var(--accent-yellow);border-color:rgba(255,255,255,.15);
}
.compare__row{
  display:flex;
  align-items:center;
  gap:12px;
  margin:14px 0;
}
.compare__lbl{
  flex:0 0 84px;
  font-size:11px;
  letter-spacing:.1em;
  color:var(--navy);
  font-weight:900;
}
.sec--green .compare__lbl,.sec--navy .compare__lbl{color:var(--white)}
.compare__bar{
  flex:1;
  height:14px;
  background:var(--off-white);
  position:relative;
  overflow:hidden;
}
.sec--green .compare__bar,.sec--navy .compare__bar{background:rgba(255,255,255,.1)}
.compare__bar-fill{
  position:absolute;
  top:0;left:0;
  height:100%;
  background:var(--accent-red);
  width:0;
  transition:width 1.6s cubic-bezier(.2,.8,.2,1);
}
.compare__row--good .compare__bar-fill{background:var(--green)}
.compare__num{
  flex:0 0 70px;
  text-align:right;
  font-family:"Anton",sans-serif;
  font-size:20px;
  color:var(--accent-red);
}
.compare__row--good .compare__num{color:var(--green-deep)}
.sec--green .compare__row--good .compare__num,
.sec--navy .compare__row--good .compare__num{color:var(--accent-yellow)}
.compare__note{
  font-size:12px;color:var(--text-muted);
  margin-top:14px;line-height:1.7;
  padding-top:12px;border-top:1px solid var(--line);
}
.sec--green .compare__note,.sec--navy .compare__note{
  color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.15);
}

/* ============ BIG STAT ============ */
.bigstat{
  text-align:center;
  margin:30px 0;
  padding:40px 20px;
  background:var(--white);
  border:2px solid var(--navy);
  position:relative;
}
.sec--green .bigstat,.sec--navy .bigstat{
  background:rgba(255,255,255,.06);
  border-color:var(--accent-yellow);
}
.bigstat__lbl{
  display:inline-block;
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:.3em;
  color:var(--white);
  background:var(--navy);
  padding:5px 14px;
  margin-bottom:18px;
}
.sec--green .bigstat__lbl,.sec--navy .bigstat__lbl{
  background:var(--accent-yellow);color:var(--navy);
}
.bigstat__num{
  font-family:"Anton",sans-serif;
  font-weight:400;
  font-size:96px;
  color:var(--green-deep);
  line-height:.95;
  letter-spacing:-.03em;
  margin-bottom:12px;
}
.sec--green .bigstat__num,.sec--navy .bigstat__num{color:var(--accent-yellow)}
.bigstat__num small{font-size:24px;color:var(--navy);margin-left:4px;font-family:"Noto Sans JP",sans-serif;font-weight:900;letter-spacing:0}
.sec--green .bigstat__num small,.sec--navy .bigstat__num small{color:var(--white)}
.bigstat__plus{font-size:36px;vertical-align:top;color:var(--accent-red)}
.sec--green .bigstat__plus,.sec--navy .bigstat__plus{color:var(--white)}
.bigstat__cap{
  font-size:13px;
  color:var(--text-muted);
  letter-spacing:.05em;
}
.sec--green .bigstat__cap,.sec--navy .bigstat__cap{color:rgba(255,255,255,.85)}

.bigstats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:24px 0;
}
.bigstats__cell{
  padding:24px 12px;
  text-align:center;
  background:var(--navy);
  color:var(--white);
}
.sec--white .bigstats__cell,.sec--off .bigstats__cell{background:var(--navy)}
.sec--green .bigstats__cell{background:rgba(0,0,0,.18)}
.sec--navy .bigstats__cell{background:rgba(255,255,255,.08)}
.bigstats__num{
  font-family:"Anton",sans-serif;
  font-size:48px;
  color:var(--accent-yellow);
  line-height:.95;
}
.bigstats__num small{font-size:14px;color:var(--white);margin-left:2px;font-family:"Noto Sans JP",sans-serif;font-weight:900}
.bigstats__lbl{
  display:block;
  margin-top:8px;
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:.2em;
  color:rgba(255,255,255,.85);
}

/* ============ DIVIDER ============ */
.div-line{
  display:flex;
  align-items:center;
  gap:14px;
  margin:32px 0;
}
.div-line::before,.div-line::after{
  content:"";
  flex:1;
  height:2px;
  background:var(--navy);
}
.div-line span{
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.3em;
  color:var(--navy);
}
.sec--green .div-line::before,.sec--green .div-line::after,
.sec--navy .div-line::before,.sec--navy .div-line::after{background:var(--accent-yellow)}
.sec--green .div-line span,.sec--navy .div-line span{color:var(--accent-yellow)}

/* ============ PROFILE CARD ============ */
.profile{
  margin:30px 0;
  padding:0;
  background:var(--white);
  border:2px solid var(--navy);
}
.profile__pic{
  width:100%;
  aspect-ratio:1/1;
  background:var(--navy);
  position:relative;
  overflow:hidden;
}
.profile__pic img{width:100%;height:100%;object-fit:cover}
.profile__pic::after{
  content:"COACH";
  position:absolute;
  top:14px;right:14px;
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:.25em;
  color:var(--navy);
  background:var(--accent-yellow);
  padding:5px 10px;
}
.profile__body{padding:24px 22px}
.profile__name{
  font-size:24px;
  font-weight:900;
  margin-bottom:4px;
  color:var(--navy);
}
.profile__name .en{
  display:block;
  font-family:"Anton",sans-serif;
  font-weight:400;
  font-size:14px;
  letter-spacing:.2em;
  color:var(--green-deep);
  margin-bottom:4px;
}
.profile__role{
  font-size:12px;
  color:var(--text-muted);
  margin-bottom:14px;
  letter-spacing:.05em;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.profile__txt{
  font-size:14px;
  line-height:1.85;
  color:#3a4366;
}
.profile__txt strong{color:var(--navy)}
.profile__txt + .profile__txt{margin-top:14px}

/* ============ KNOWLEDGE LIST ============ */
.knowledge{
  margin:24px 0;
  display:grid;
  gap:6px;
}
.knowledge__item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  background:var(--white);
  border-left:4px solid var(--green);
  font-size:14.5px;
  font-weight:700;
  color:var(--navy);
  transition:transform .2s ease;
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.sec--green .knowledge__item,.sec--navy .knowledge__item{
  background:rgba(255,255,255,.06);
  border-color:var(--accent-yellow);
  border-top-color:rgba(255,255,255,.1);
  border-right-color:rgba(255,255,255,.1);
  border-bottom-color:rgba(255,255,255,.1);
  color:var(--white);
}
.knowledge__num{
  font-family:"Anton",sans-serif;
  font-size:22px;
  color:var(--green-deep);
  flex:0 0 32px;
  text-align:center;
  line-height:1;
}
.sec--green .knowledge__num,.sec--navy .knowledge__num{color:var(--accent-yellow)}

/* ============ QUOTE ============ */
.quote{
  position:relative;
  margin:30px 0;
  padding:30px 24px 26px;
  background:var(--off-white);
  border-left:6px solid var(--green);
}
.sec--green .quote,.sec--navy .quote{
  background:rgba(0,0,0,.15);
  border-left-color:var(--accent-yellow);
}
.quote::before{
  content:"\201C";
  position:absolute;
  top:-6px;left:14px;
  font-family:Georgia,serif;
  font-size:64px;
  line-height:1;
  color:var(--green);
  opacity:.4;
}
.sec--green .quote::before,.sec--navy .quote::before{color:var(--accent-yellow)}
.quote__text{
  font-size:17px;
  font-weight:700;
  line-height:1.85;
  color:var(--navy);
  margin-bottom:14px;
}
.sec--green .quote__text,.sec--navy .quote__text{color:var(--white)}
.quote__cite{
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:.2em;
  color:var(--green-deep);
}
.sec--green .quote__cite,.sec--navy .quote__cite{color:var(--accent-yellow)}

/* ============ HIGHLIGHT BOX ============ */
.highlight{
  margin:28px 0;
  padding:24px;
  background:var(--accent-yellow);
  border:2px solid var(--navy);
  position:relative;
  color:var(--navy);
}
.highlight::before{
  content:"!";
  position:absolute;
  top:-16px;left:18px;
  width:32px;height:32px;
  background:var(--navy);
  color:var(--accent-yellow);
  font-family:"Anton",sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}
.highlight__text{
  font-size:16px;
  font-weight:900;
  line-height:1.75;
  color:var(--navy);
}
.highlight__text .em{color:var(--accent-red-deep)}

/* ============ PROCESS / SHORTCUT ============ */
.process{
  margin:28px 0;
  display:grid;
  gap:10px;
}
.process__item{
  position:relative;
  padding:20px 20px 20px 64px;
  background:var(--white);
  border:2px solid var(--navy);
}
.sec--green .process__item,.sec--navy .process__item{
  background:rgba(255,255,255,.05);
  border-color:var(--accent-yellow);
  color:var(--white);
}
.process__num{
  position:absolute;
  top:50%;left:14px;
  transform:translateY(-50%);
  width:34px;height:34px;
  background:var(--green);
  color:var(--white);
  font-family:"Anton",sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.sec--green .process__num,.sec--navy .process__num{
  background:var(--accent-yellow);
  color:var(--navy);
}
.process__txt{
  font-size:14px;
  font-weight:700;
  line-height:1.6;
  color:var(--navy);
}
.process__txt strong{color:var(--green-deep)}
.sec--green .process__txt,.sec--navy .process__txt{color:var(--white)}
.sec--green .process__txt strong,.sec--navy .process__txt strong{color:var(--accent-yellow)}

/* ============ FUTURE / LIFESTYLE ============ */
.future{
  margin:28px 0;
  padding:28px 22px;
  background:var(--white);
  border:2px solid var(--green);
}
.sec--green .future,.sec--navy .future{
  background:rgba(255,255,255,.06);
  border-color:var(--accent-yellow);
}
.future__title{
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:.25em;
  margin-bottom:18px;
  color:var(--green-deep);
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.future__title::before{
  content:"";
  width:8px;height:24px;background:var(--green);
}
.sec--green .future__title,.sec--navy .future__title{color:var(--accent-yellow);border-bottom-color:rgba(255,255,255,.15)}
.sec--green .future__title::before,.sec--navy .future__title::before{background:var(--accent-yellow)}
.future__text{
  font-size:14.5px;
  line-height:1.95;
  color:#3a4366;
}
.sec--green .future__text,.sec--navy .future__text{color:rgba(255,255,255,.92)}
.future__text + .future__text{margin-top:14px}
.future__text strong{color:var(--navy)}
.sec--green .future__text strong,.sec--navy .future__text strong{color:var(--white)}

/* future yellow variant */
.future--yellow{border-color:var(--accent-yellow-deep);background:#fffbe6}
.future--yellow .future__title{color:var(--accent-yellow-deep)}
.future--yellow .future__title::before{background:var(--accent-yellow-deep)}

/* ============ POSTSCRIPT ============ */
.ps{
  position:relative;
  padding:64px 24px;
  background:var(--navy);
  color:var(--white);
  border-top:6px solid var(--accent-red);
  overflow:hidden;
  z-index: 2;
}
.ps::before{
  content:"P.S.";
  position:absolute;
  top:30px;right:-10px;
  font-family:"Anton",sans-serif;
  font-size:140px;
  line-height:.85;
  color:rgba(255,255,255,.05);
  letter-spacing:-.05em;
  pointer-events:none;
}
.ps > *{position:relative;z-index:1}
.ps__label{
  display:inline-block;
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.3em;
  color:var(--navy);
  background:var(--accent-yellow);
  padding:6px 14px;
  margin-bottom:20px;
}
.ps__title{
  font-size:22px;
  font-weight:900;
  line-height:1.55;
  margin-bottom:18px;
  color:var(--white);
}
.ps__text{
  font-size:14.5px;
  line-height:1.95;
  color:rgba(255,255,255,.92);
}
.ps__text + .ps__text{margin-top:14px}
.ps__text strong{color:var(--white)}
.ps__text .em{color:var(--accent-yellow);font-weight:900}
.ps__warn{
  margin:20px 0;
  padding:18px 20px;
  background:var(--accent-red);
  color:var(--white);
  font-size:14px;
  font-weight:900;
  line-height:1.7;
}

/* ============ FOOTER ============ */
.footer{
  padding:40px 24px 110px;
  text-align:center;
  font-size:11px;
  color:rgba(255,255,255,.5);
  letter-spacing:.05em;
  background:var(--navy-3);
  position: relative;
  z-index: 2;
}
.footer__logo{
  font-family:"Anton",sans-serif;
  font-size:22px;
  letter-spacing:.15em;
  color:var(--accent-yellow);
  margin-bottom:8px;
}

/* ============ STICKY CTA ============ */
.sticky-cta{
  position:fixed;
  bottom:0;left:0;right:0;
  padding:10px 14px;
  background:var(--navy);
  z-index:100;
  pointer-events:none;
  transform:translateY(120%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  max-width:480px;
  margin:0 auto;
  border-top:3px solid var(--accent-yellow);
}
.sticky-cta.is-visible{transform:translateY(0)}
.sticky-cta a{
  pointer-events:auto;
  display:block;
  padding:14px;
  background:var(--accent-yellow);
  color:var(--navy);
  text-align:center;
  font-weight:900;
  font-size:14px;
  border:2px solid var(--white);
}
.sticky-cta a span{
  display:inline-block;margin-left:6px;
}

/* ============ ANIMATIONS ON SCROLL ============ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.is-in{opacity:1;transform:translateY(0)}
.reveal-l{opacity:0;transform:translateX(-24px);transition:opacity .8s ease,transform .8s ease}
.reveal-l.is-in{opacity:1;transform:translateX(0)}
.reveal-r{opacity:0;transform:translateX(24px);transition:opacity .8s ease,transform .8s ease}
.reveal-r.is-in{opacity:1;transform:translateX(0)}
.reveal-stagger > *{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal-stagger.is-in > *{opacity:1;transform:translateY(0)}
.reveal-stagger.is-in > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.is-in > *:nth-child(2){transition-delay:.12s}
.reveal-stagger.is-in > *:nth-child(3){transition-delay:.19s}
.reveal-stagger.is-in > *:nth-child(4){transition-delay:.26s}
.reveal-stagger.is-in > *:nth-child(5){transition-delay:.33s}
.reveal-stagger.is-in > *:nth-child(6){transition-delay:.40s}
.reveal-stagger.is-in > *:nth-child(7){transition-delay:.47s}
.reveal-stagger.is-in > *:nth-child(8){transition-delay:.54s}

.counter{display:inline-block}

/* ============ PC RESPONSIVE ============ */
@media (min-width: 900px){
  .pc-deco{display:block}
  .lp{
    margin:0 auto;
  }
}

/* small phones */
@media (max-width:380px){
  .hero__h1{font-size:38px}
  .hero__h1 .num-big{font-size:74px}
  .h-mega{font-size:26px}
  .h-large{font-size:21px}
  .wall__num{font-size:96px}
  .bigstat__num{font-size:80px}
  .sec-title__en{font-size:38px}
}