/* Section 03 rebuild — static alignment first */
.comp-access{position:relative;background:#f7f8fa;overflow:hidden}
.s03-pc{display:block}
.s03-sp{display:none}
.s03-stage{position:relative;isolation:isolate;width:100%;max-width:1200px;aspect-ratio:1672/941;margin:0 auto;overflow:hidden;background:
linear-gradient(180deg,#f9fafb 0%,#f3f5f7 62%,#f7f8fa 100%)}
.s03-stage:before{content:"";position:absolute;inset:0;z-index:0;background:url("./assets/section03-rebuild/03_texture.png") center/100% 100% no-repeat;opacity:.95;pointer-events:none}
.s03-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.s03-headline{z-index:2}
.s03-card-a{z-index:3}
.s03-center{z-index:4}
.s03-card-b{z-index:3}
.s03-stage:after{content:"";position:absolute;left:0;right:0;top:0;height:34px;z-index:6;pointer-events:none;background:linear-gradient(to bottom,rgba(5,8,12,.75),rgba(5,8,12,0))}
.s03-mobile-card{position:relative;max-width:520px;margin:0 auto;padding:26px 14px 38px;background:linear-gradient(180deg,#fbfcfd,#f3f6f9);overflow:hidden;color:#07101b}
.s03-mobile-title{display:block;width:100%;height:auto;margin:0 auto 12px}
.s03-mobile-piece{display:block;width:100%;height:auto;margin:10px auto 0}
.s03-vs{margin:18px auto;text-align:center;font-size:clamp(48px,16vw,78px);font-weight:900;line-height:1;color:#112238;letter-spacing:-.08em}
.s03-vs span{font-size:.42em;color:#576578;vertical-align:middle;margin:0 .12em}
.s03-mobile-copy{margin:18px auto 0;padding:12px 14px;text-align:center;font-size:clamp(22px,7.4vw,32px);font-weight:900;line-height:1.15;background:#fff200;color:#050505;transform:rotate(-2deg)}
@media(max-width:767px){.s03-pc{display:none!important}.s03-sp{display:block}}
/* reveal motion */
@media(min-width:768px){
.s03-stage .s03-layer{opacity:0;will-change:opacity,transform}
.s03-stage .s03-headline{transform:translateY(12px)}
.s03-stage .s03-card-a{transform:translateX(-12px)}
.s03-stage .s03-center{transform:translateY(10px)}
.s03-stage .s03-card-b{transform:translateX(12px)}
.s03-stage.in-view .s03-headline{animation:reveal-up .62s .04s ease forwards}
.s03-stage.in-view .s03-card-a{animation:reveal-left .66s .15s ease forwards}
.s03-stage.in-view .s03-center{animation:reveal-up .58s .24s ease forwards}
.s03-stage.in-view .s03-card-b{animation:reveal-right .66s .20s ease forwards}
}
/* seamless transition tuning */
@media(min-width:768px){
  .comp-access{margin-top:-54px;position:relative;z-index:3;background:transparent}
  .s03-stage{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 54px,#000 calc(100% - 42px),transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 54px,#000 calc(100% - 42px),transparent 100%);
  }
  .s03-stage:after{height:22px;background:linear-gradient(to bottom,rgba(5,8,12,0),rgba(5,8,12,.06),rgba(5,8,12,.24))}
}

/* common breathing-space join: 2026-09-20 */
@media(min-width:768px){
  .comp-access{
    margin-top:0!important;
    padding-top:64px;
    background:#f7f8fa;
    overflow:hidden;
    position:relative;
    z-index:2;
  }
  .comp-access::before{
    content:"";
    position:absolute;
    left:0;right:0;top:0;height:64px;
    background:linear-gradient(to bottom,#05080c 0%,#15191d 34%,#d9dde1 76%,#f7f8fa 100%);
    pointer-events:none;
    z-index:1;
  }
  .s03-stage{
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
}