:root{
  --content-width:1150px;
  --design-width:2530px;
  --design-max:2530px;
  --red:#BC002D;
  --ink:#555;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:#000;
  color:var(--ink);
  font-family:"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{display:block;height:auto}
.page{
  width:min(100%,var(--design-max));
  margin:auto;
  background:#fff;
  overflow:hidden;
}

/* --- Common header: inherit finished CONSULTING/TOP geometry --- */
.site-header{height:70px;position:relative;z-index:20;background:#fff}
.site-header__inner{
  width:min(100%,var(--content-width));
  height:100%;
  margin:auto;
  padding:0 30px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  position:relative;
}
.site-logo{position:absolute;left:30px;top:13px;width:174.11px;overflow:visible}
.site-logo img{width:174.11px;height:30px;max-width:none}
.site-nav{margin-left:auto;position:relative;top:23px}
.site-nav ul{display:flex;align-items:center;gap:54px;list-style:none;margin:0;padding:0}
.site-nav a{display:block;white-space:nowrap;font-size:13px;line-height:1;letter-spacing:.08em}
.site-nav a:hover,.site-nav a.is-current{color:var(--red)}
.menu-toggle{display:none}

/* --- Top red area ---
   Calibrated against the supplied 1150px reference screenshot.
   Background remains fixed at 2530×883 and crops equally left/right.
*/
.hero{
  height:883px;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:2530px;
  height:883px;
  transform:translateX(-50%);
  background:#b9003d url("../img/zenbu-hero-bg.jpg") center top / 2530px 883px no-repeat;
  z-index:0;
}
.hero__content{
  position:relative;
  z-index:1;
  width:980px;
  margin:0 auto;
  padding-top:50px;
  transform:none;
}
.hero__logo{
  width:385px;
  max-width:none;
  margin:0 0 28px 0;
}
.hero__lead{
  margin:0 0 6px 0;
  font-size:20px;
  line-height:1.2;
  letter-spacing:.005em;
  font-weight:400;
}
.hero__main-grid{
  display:grid;
  grid-template-columns:400px 1fr;
  column-gap:22px;
  align-items:start;
}
.hero__headline{
  padding-top:0;
}
.hero__headline-line{
  margin:0;
  font-size:41px;
  line-height:1.16;
  font-weight:500;
  letter-spacing:.005em;
  white-space:nowrap;
}
.hero__right{
  padding-top:0;
}
.hero__all-row{
  display:flex;
  align-items:baseline;
  white-space:nowrap;
  margin:0 0 24px 0;
}
.hero-all{
  font-size:57px;
  line-height:.95;
  font-weight:800;
  letter-spacing:.01em;
}
.hero-do{
  margin-left:10px;
  font-size:38px;
  line-height:1;
  font-weight:400;
  letter-spacing:.005em;
}
.hero__items{
  width:600px;
  margin:0 0 0 36px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4, max-content);
  column-gap:21px;
  row-gap:9px;
  font-size:12px;
  line-height:1.15;
  font-weight:500;
}

.hero__notes{
  margin:16px 0 0 36px;
  font-size:10px;
  line-height:1.55;
  font-weight:400;
  letter-spacing:.005em;
}
/* --- Main area: solid white, no wa_dz背景_02 --- */
.body-bg{background:#fff;padding-top:58px}
.service,.workflow{
  position:relative;
  overflow:hidden;
}

/* Bars are a fixed 1710×90 element placed on a 2530px design canvas.
   At 2530px viewport: left edge=0.
   When viewport narrows: right endpoint remains at design x=1710, left is cropped.
*/
.bar{
  width:1710px;
  height:90px;
  max-width:none;
  position:relative;
  left:calc(50% - 1265px);
}
.bar-title{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:90px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  font-size:18px;
  line-height:1;
  font-weight:600;
  letter-spacing:.035em;
}

/* Intro copy: enlarged to match Illustrator layout */
.copy{
  width:600px;
  margin:48px auto 0;
  font-size:15px;
  line-height:1.82;
}
.copy p{margin:0}

/* Supplied illustrations are used at native pixel size (no downscaling). */
.illust-one{
  width:700px;
  max-width:none;
  margin:34px auto 26px;
}
.qa{
  width:600px;
  margin:0 auto;
  font-size:14px;
  line-height:1.58;
  padding-bottom:72px;
}
.qa p{margin:6px 0}
.qa span{display:inline-block;margin-left:31px}
.qa b{
  display:inline-flex;
  width:25px;
  height:18px;
  color:#fff;
  align-items:center;
  justify-content:center;
  margin-right:7px;
  font-size:12px;
}
.q{background:#c80042}
.a{background:#0876b8}
.qa .gap{margin-top:22px}

.workflow{padding-bottom:56px}
.workflow .bar-title{font-size:18px;font-weight:600}
.illust-two{
  width:780px;
  max-width:none;
  margin:36px auto 0;
}

.site-footer{
  height:50px;
  background:#000;
  color:#aaa;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  letter-spacing:.1em
}
.site-footer p{margin:0}

@media(max-width:1149px){
  .site-header__inner{padding-inline:24px}
  .site-logo{left:24px}
  .site-nav ul{gap:clamp(18px,4vw,44px)}
}

@media(max-width:900px){
  .site-nav ul{gap:18px}
  .site-nav a{font-size:11px}

  /* Keep design assets at fixed size; crop instead of scaling. */
  .hero__content{
    width:760px;
    margin-left:50%;
    transform:translateX(-50%);
  }
  .copy,.qa{width:600px}
  .illust-one{width:700px}
  .illust-two{width:780px}
}

@media(max-width:767px){
  .site-header{height:58px}
  .site-logo{left:16px;top:9px;width:139px}
  .site-logo img{width:139px;height:auto}
  .menu-toggle{
    display:block;
    margin-left:auto;
    border:0;
    background:transparent;
    position:relative;
    top:10px;
  }
  .site-nav{
    display:none;
    position:absolute;
    top:58px;
    left:0;
    right:0;
    background:#fff;
  }
  .site-nav.is-open{display:block}
  .site-nav ul{display:block;padding:10px 20px}
  .site-nav a{padding:12px 0;border-bottom:1px solid #eee}

  /* mobile still crops fixed design imagery instead of resizing */
  .hero{height:883px}
  .hero__content{
    width:760px;
    margin-left:50%;
    transform:translateX(-50%);
    padding-top:78px;
  }
  .body-bg{padding-top:42px}
  .bar-title{font-size:15px}
  .copy,.qa{
    width:600px;
    margin-left:50%;
    transform:translateX(-50%);
  }
  .illust-one{
    width:700px;
    margin-left:50%;
    transform:translateX(-50%);
  }
  .illust-two{
    width:780px;
    margin-left:50%;
    transform:translateX(-50%);
  }
}


@media(max-width:900px){
  .hero__items{
    width:470px;
    margin-left:258px;
    grid-template-columns:repeat(4,max-content);
  }
}
@media(max-width:767px){
  .hero__items{
    width:470px;
    margin-left:258px;
    grid-template-columns:repeat(4,max-content);
  }
}





/* Revision 08 hero responsive rules */
@media(max-width:1149px){
  .hero__content{
    width:980px;
    margin-left:50%;
    transform:translateX(-50%);
  }
}
@media(max-width:900px){
  .hero__content{
    width:980px;
    margin-left:50%;
    transform:translateX(-50%);
  }
}
@media(max-width:767px){
  .hero__content{
    width:980px;
    margin-left:50%;
    transform:translateX(-50%);
    padding-top:50px;
  }
}