:root{
  --ink:#111;
  --paper:#f3efe4;
  --accent:#f7e600;
  --accent2:#e4212b;
  --blue:#0d91c8;
  --line:rgba(17,17,17,.22);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans JP",sans-serif;overflow-x:hidden}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
.noise{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}
.site-header{position:fixed;top:0;left:0;width:100%;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:20px 24px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;line-height:.9;font-size:12px;letter-spacing:.08em}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;background:var(--ink);color:var(--accent);font-family:Anton,sans-serif;font-size:30px;transform:rotate(-6deg)}
.menu-button{width:54px;height:54px;border:0;background:var(--accent);display:grid;place-content:center;gap:8px;transform:rotate(3deg);cursor:pointer}
.menu-button span{display:block;width:25px;height:3px;background:var(--ink)}
.hero{position:relative;min-height:100svh;padding:110px 0 80px;display:flex;flex-direction:column;justify-content:center}
.hero-copy{/*width:min(92%,var(--max));margin:0 auto 28px;position:relative;*/ position: absolute; right: 5vw; z-index:3}
.eyebrow,.mini-label,.section-kicker{font-family:Anton,sans-serif;letter-spacing:.12em}
.hero h1{margin:0;font-family:Anton,sans-serif;font-size:clamp(68px,12vw,180px);line-height:.72;letter-spacing:-.02em;text-transform:uppercase;display:flex;flex-direction:column;width:max-content}
.hero h1 span{display:inline-block;background:var(--ink);color:#fff;padding:.04em .09em .09em;transform:skew(-8deg) rotate(-1deg);margin-top:.05em}
.hero h1 span:nth-child(2){margin-left:.65em;background:var(--accent);color:var(--ink);transform:skew(7deg) rotate(1deg)}
.hero h1 span:nth-child(3){margin-left:.18em;background:var(--accent2);transform:skew(-4deg) rotate(-2deg)}
.hero-lead{max-width:620px;margin:24px 0 0;font-weight:700;line-height:2}
.hero-grid{display:grid;grid-template-columns:1fr 1.25fr;*/width:100%;min-height:44vw;max-height:720px;/*margin-top:-4vw*/}
.hero-image,.hero-movie{position:relative;overflow:hidden;margin:0;/*background:#111*/}
/*.hero-image{clip-path:polygon(0 8%,94% 0,100% 86%,3% 100%)}*/
.hero-image {top: 1vw;}
.hero-image img{width:100%;height:100%;object-fit:cover;/*filter:grayscale(1) contrast(1.05)*/}
.hero-movie{clip-path:polygon(3% 0,100% 4%,96% 100%,0 88%)}
.hero-movie iframe{position:absolute;top:50%;left:50%;width:177.78vh;height:56.25vw;min-width:100%;min-height:100%;transform:translate(-50%,-50%);border:0;pointer-events:none}
.movie-shade{position:absolute;inset:0;background:linear-gradient(135deg,transparent 20%,rgba(0,0,0,.38))}
.movie-label{position:absolute;right:4%;bottom:7%;display:flex;align-items:end;gap:10px;color:#fff;font-family:Anton,sans-serif;transform:rotate(-3deg)}
.movie-label span{font-size:clamp(32px,5vw,72px)}.movie-label b{font-size:20px;color:var(--accent)}
.scroll-cue{position:absolute;right:24px;bottom:16px;display:flex;align-items:center;gap:10px;font:16px Anton,sans-serif;letter-spacing:.15em;transform:rotate(90deg);transform-origin:right bottom}
.scroll-cue i{display:block;width:70px;height:2px;background:var(--ink);position:relative;overflow:hidden}
.scroll-cue i:after{content:"";position:absolute;inset:0;background:var(--accent2);animation:scan 1.7s ease-in-out infinite}
@keyframes scan{0%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
.section{width:min(92%,var(--max));margin:0 auto;padding:140px 0}
.section-head{display:flex;align-items:center;gap:20px;margin-bottom:50px;transform:rotate(-1deg)}
.section-head h2{margin:0;font:clamp(54px,9vw,124px)/.85 Anton,sans-serif;letter-spacing:.02em}
.section-no{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--accent2);color:#fff;font:28px Anton,sans-serif;flex:none}
.intro-copy{width:min(780px,84%);margin:0 auto 120px;font-size:clamp(18px,2vw,27px);font-weight:700;line-height:2}
.feature{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:clamp(30px,7vw,100px);margin:100px 0}
.feature-left{grid-template-columns:1.2fr 1fr}
.feature-copy h3,.story-copy h3{font-size:clamp(28px,4vw,56px);line-height:1.35;margin:.15em 0 .45em;font-weight:900}
.feature-copy p:last-child,.story-copy p:last-child{line-height:2}
.feature-image{position:relative;filter:drop-shadow(18px 18px 0 var(--ink))}
.feature-image:before{content:"";position:absolute;inset:-12px;background: var(--accent2);z-index:-1;transform:rotate(-2deg)}
.feature-left .feature-image:before{background:var(--accent2);transform:rotate(2deg)}
.feature-image img{aspect-ratio:4/3;object-fit:cover;/*filter:grayscale(1)*/}
.section-kicker{font-size:clamp(20px,3vw,38px);margin:-24px 0 80px;padding-left:90px}
.story-list{border-top:2px solid var(--ink)}
.story-row{display:grid;grid-template-columns:.9fr 1.45fr;gap:8vw;padding:90px 0;border-bottom:2px solid var(--ink);align-items:center}
.story-row:nth-child(even){grid-template-columns:1.45fr .9fr}.story-row:nth-child(even) .story-copy{order:2}.story-row:nth-child(even) .story-media{order:1}
.story-copy{position:relative}.story-index{font:100px/.7 Anton,sans-serif;color:var(--accent);margin:0 0 18px; }
.story-media{position:relative}.story-media img{aspect-ratio:16/10;object-fit:cover;/*filter:grayscale(1) contrast(1.1);*/clip-path:polygon(2% 2%,100% 0,96% 100%,0 94%)}
.story-media:after{content:"";position:absolute;z-index:-1;inset:16px -16px -16px 18px;background:var(--accent);clip-path:polygon(2% 2%,100% 0,96% 100%,0 94%)}
.story-media p{margin:18px 0 0;font-size:13px;font-weight:700}
.notice{padding-top:80px}
.notice-inner{position:relative;background:#fff;border:4px solid var(--ink);padding:clamp(30px,6vw,80px);box-shadow:18px 18px 0 var(--accent2);transform:rotate(-1deg)}
.notice h2{font-size:clamp(32px,5vw,64px);margin:.2em 0}.notice li,.notice p{line-height:1.9}.notice ul{padding-left:1.5em}
.tape{position:absolute;width:130px;height:34px;background:var(--accent);opacity:.85}.tape-a{left:-45px;top:12px;transform:rotate(-28deg)}.tape-b{right:-48px;bottom:8px;transform:rotate(26deg)}
.back-wrap{display:flex;justify-content:center;padding:0 20px 130px}.back-button{display:flex;justify-content:space-between;align-items:center;width:min(420px,90vw);padding:18px 24px;background:var(--ink);color:#fff;font-weight:900;letter-spacing:.08em;box-shadow:10px 10px 0 var(--accent)}.back-button b{font-size:26px;color:var(--accent)}
.site-footer{background:var(--ink);color:#fff;text-align:center;padding:25px;font:12px Anton,sans-serif;letter-spacing:.16em}
/* reveal */
.reveal-up,.reveal-left,.reveal-right,.reveal-pop,.reveal-tilt{opacity:0;will-change:transform,opacity;transition:opacity .85s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.reveal-up{transform:translateY(70px)}.reveal-left{transform:translateX(-90px) rotate(-3deg)}.reveal-right{transform:translateX(90px) rotate(3deg)}.reveal-pop{transform:translateY(50px) scale(.82) rotate(-4deg)}.reveal-tilt{transform:translateY(80px) rotate(-7deg) scale(.94)}
.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal-up,.reveal-left,.reveal-right,.reveal-pop,.reveal-tilt{opacity:1;transform:none;transition:none}.scroll-cue i:after{animation:none}}
@media (max-width:767px){
  .site-header{padding:14px}/*.brand-text{display:none}*/.menu-button{width:46px;height:46px}
  .hero{padding-top:86px;justify-content:flex-start}.hero-copy{margin-bottom:20px}.hero h1{font-size:clamp(60px,20vw,96px)}.hero-lead{font-size:13px;line-height:1.8;max-width:85%}
  .hero-grid{grid-template-columns:1fr;min-height:0;margin-top:0}.hero-movie{height:60vw;min-height:230px;clip-path:none}/*.hero-image{clip-path:polygon(0 4%,100% 0,96% 100%,0 94%)}*/.hero-movie{clip-path:polygon(3% 0,100% 5%,100% 100%,0 94%);margin-top:-4vw}.hero-movie iframe{width:177.78vh;height:56.25vw;min-width:100%;min-height:100%}.movie-label{bottom:10%}.scroll-cue{display:none}
  .section{padding:90px 0}.section-head{gap:10px;margin-bottom:34px}.section-no{width:42px;height:42px;font-size:20px}.section-head h2{font-size:clamp(50px,17vw,76px)}
  .intro-copy{width:100%;margin-bottom:70px;font-size:17px;line-height:1.95}.feature,.feature-left{grid-template-columns:1fr;gap:35px;margin:80px 0}.feature-left .feature-copy{order:1}.feature-left .feature-image{order:2}.feature-copy h3{font-size:34px}.feature-image{filter:drop-shadow(10px 10px 0 var(--ink))}
  .section-kicker{padding-left:0;margin:-15px 0 50px;font-size:18px}.story-row,.story-row:nth-child(even){grid-template-columns:1fr;gap:28px;padding:65px 0}.story-row:nth-child(even) .story-copy,.story-row:nth-child(even) .story-media{order:initial}.story-index{font-size:72px}.story-copy h3{font-size:32px}.story-media:after{inset:10px -8px -10px 10px}
  .notice-inner{box-shadow:10px 10px 0 var(--accent2);border-width:3px}.tape{width:90px;height:26px}.back-wrap{padding-bottom:90px}
}

/* global menu */
body.menu-open{overflow:hidden}
.menu-button{position:relative;z-index:70;transition:transform .35s ease,background .35s ease}
.menu-button:hover{transform:rotate(-3deg) scale(1.05)}
.menu-button span{position:absolute;left:50%;top:50%;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .3s ease;width:25px;height:3px;background:var(--ink)}
.menu-button span:first-child{transform:translate(-50%,-6px)}
.menu-button span:last-child{transform:translate(-50%,5px)}
.menu-button.is-open{background:#fff;transform:rotate(-3deg)}
.menu-button.is-open span:first-child{transform:translate(-50%,-1px) rotate(45deg)}
.menu-button.is-open span:last-child{transform:translate(-50%,-1px) rotate(-45deg)}
.global-menu{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none;overflow:hidden}
.global-menu__bg{position:absolute;inset:-10%;background:var(--ink);transform:translateX(110%) skewX(-8deg);transition:transform .75s cubic-bezier(.16,1,.3,1)}
.global-menu__inner{position:relative;z-index:2;width:min(92%,var(--max));height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:center;color:#fff;opacity:0;transform:translateX(70px);transition:opacity .35s ease .12s,transform .6s cubic-bezier(.16,1,.3,1) .12s}
.global-menu.is-open{visibility:visible;pointer-events:auto}
.global-menu.is-open .global-menu__bg{transform:translateX(0) skewX(-8deg)}
.global-menu.is-open .global-menu__inner{opacity:1;transform:none}

.global-menu__close{position:absolute;top:24px;right:0;width:92px;height:54px;border:0;background:var(--accent);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font:14px Anton,sans-serif;letter-spacing:.08em;transition:transform .25s ease,background .25s ease}
.global-menu__close:hover{transform:rotate(-2deg) scale(1.04);background:#fff}
.global-menu__close span{position:absolute;left:18px;top:26px;width:20px;height:2px;background:var(--ink)}
.global-menu__close span:first-child{transform:rotate(45deg)}
.global-menu__close span:nth-child(2){transform:rotate(-45deg)}
.global-menu__close b{margin-left:26px;font-weight:400}
.global-menu__label{margin:0 0 26px;color:var(--accent);font:18px Anton,sans-serif;letter-spacing:.18em}
.global-menu__nav{display:flex;flex-direction:column;width:min(760px,100%)}
.global-menu__nav a{display:grid;grid-template-columns:56px 1fr;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.22);transition:padding-left .25s ease,color .25s ease}
.global-menu__nav a:first-child{border-top:1px solid rgba(255,255,255,.22)}
.global-menu__nav a span{font:16px Anton,sans-serif;color:var(--accent2)}
.global-menu__nav a b{font:clamp(36px,6vw,76px)/1 Anton,sans-serif;letter-spacing:.04em;font-weight:400}
.global-menu__nav a:hover{padding-left:18px;color:var(--accent)}
.global-menu__foot{margin-top:28px;font-size:11px;line-height:1.8;color:rgba(255,255,255,.58)}
@media (max-width:767px){
  .global-menu__inner{width:calc(100% - 36px);padding-top:78px}
  .global-menu__close{top:16px;right:0;width:86px;height:46px}
  .global-menu__label{margin-bottom:18px;font-size:14px}
  .global-menu__nav a{grid-template-columns:42px 1fr;padding:10px 0}
  .global-menu__nav a b{font-size:clamp(34px,11vw,52px)}
  .global-menu__foot{margin-top:20px;font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .global-menu__bg,.global-menu__inner,.menu-button,.menu-button span{transition:none}
}

/* ========================================
   Scroll background color
   #fff300 -> #0069ff -> #ff0000
   JavaScript switches the color instantly at 33% / 66%.
======================================== */
body{
  --scroll-bg:#fff300;
  background:var(--scroll-bg);
}

/* CONTENTS: C以降のインデックス文字は赤背景と重なるため青に変更 */
.story-row:nth-child(n+4) .story-index {
  color: #0069ff;
}

/*** 追記 ***/
.hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}  

.feature-list {
    font-weight: bold;
    margin-top: 0px;
}

.feature-list li {
    margin-bottom: 10px;
}

.reveal-up {
    font-weight: bold;
}

.story-index span {
    font-size: 70%;
}

.story-media a {
    display: block;
    text-align: right;
    text-decoration: underline;
}

@media (max-width:767px){
    .hero {
       min-height: auto;
        position: relative;
    }
    
    .hero-grid {
        position: relative;
    }
    
    .hero-copy {
        position: absolute;
        top: 10vw;
        width: auto;
        right: 0;
        z-index: 10;
    }
    
    #intro {
        padding-top: 30px;
    }
    
    .hero h1 {
        font-size: 280%;
    }
    
    .hero-image {
        position: absolute;
        top: 5vw;
        left: 1vw;
    z-index: 9;
        max-width: 45vw;
    }
    
    .tape-b {
    right: -10px;
    bottom: -8px;
    }
}