:root {
  --h-pickup: 328px;
  --pickup-x: 180px;
  --pickup-top: 20px;
  --pickup-card-top: 47px;
  --sp-about-top: 150px;
  --h-about: 1793.5px;
  --about-x: 180px;
  --about-col-w: 494.5px;
  --about-col-gap: 90px;
  --about-photo-h: 370.9px;
  --about-photo-gap: 20px;
}

.pickup {
  height: var(--h-pickup);
  background: var(--c-bg);
}

.pickup__inner {
  width: 1079px;
  margin-left: var(--pickup-x);
  padding-top: var(--pickup-top);
}

.pickup__eyebrow {
  color: #828282;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 17.4px;
  letter-spacing: 0.6px;
}

.pickup__cards {
  display: grid;
  grid-template-columns: repeat(2, 499.5px);
  gap: 80px;
  margin-top: calc(var(--pickup-card-top) - var(--pickup-top) - 17.4px);
}

.pickup-card {
  height: 281px;
  background: #9D9D9D;
}

.about {
  height: var(--h-about);
  background: var(--c-bg);
}

.about__grid {
  display: grid;
  grid-template-columns: var(--about-col-w) var(--about-col-w);
  gap: var(--about-col-gap);
  width: calc(var(--about-col-w) * 2 + var(--about-col-gap));
  margin-left: var(--about-x);
  padding-top: var(--sp-about-top);
}

.about__copy {
  width: var(--about-col-w);
}

.about__lead {
  width: 393px;
  color: var(--c-accent);
  font-family: var(--font-serif);
  font-size: var(--fs-30);
  font-weight: 500;
  line-height: 43.5px;
  letter-spacing: 3px;
  text-align: center;
  white-space: nowrap;
  font-feature-settings: "palt";
}

.about__body {
  margin-top: 50px;
  color: var(--c-accent);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 1.6px;
}

.about__photos {
  display: flex;
  flex-direction: column;
  gap: var(--about-photo-gap);
}

.about__photos img {
  width: var(--about-col-w);
  height: var(--about-photo-h);
  object-fit: cover;
  background: var(--c-bg-alt);
}

/* ===== Tablet 561–1024（Figma 1:432 ABOUT / 1:448 Feature card 実測） ===== */
@media (max-width: 1024px) {
  :root {
    --h-pickup: 1px;
    --sp-about-top: 50px;          /* ABOUT padT */
    --h-about: auto;
    --about-x: 5%;                 /* 40/800 */
    --about-col-w: 43.75%;         /* 315/720（コンテナ=800-40-40 基準） */
    --about-col-gap: 12.5%;        /* 90/720 */
    --about-photo-h: 236.9px;
    --about-photo-gap: 20px;
    --about-head-top: 150px;       /* Frame28/Frame31 padT */
  }

  .about {
    height: auto;
    padding-bottom: 200px;         /* ABOUT padB */
  }

  .about__grid {
    grid-template-columns: var(--about-col-w) var(--about-col-w);
    gap: var(--about-col-gap);
    width: auto;
    margin-left: var(--about-x);
    margin-right: var(--about-x);
  }

  .about__copy {
    width: auto;
  }

  .about__lead {
    /* Figma tablet実測: 341/720幅（col-w 315だけでは1行に収まらず折返す）。
       左端は col-w と同じ about-x のまま、右方向へ col-gap の半分だけ広げて1行化（px転記なし） */
    width: calc(var(--about-col-w) + var(--about-col-gap) * 0.5);
    margin-top: var(--about-head-top);
    font-size: var(--fs-26);
    line-height: 37.7px;
    letter-spacing: 2.6px;
    text-align: center;
    white-space: nowrap;
  }

  .about__body {
    margin-top: 50px;
    font-family: var(--font-serif); /* Figma: mobile/tablet 本文は Ryumin */
    font-size: var(--fs-16);
    line-height: 32px;
    letter-spacing: 1.6px;
  }

  .about__photos {
    margin-top: var(--about-head-top);
  }

  .about__photos img {
    width: 100%;
    height: var(--about-photo-h);
  }

  /* Feature card 1（tablet では ABOUT/倉一覧 に重なる帯。高さ1px扱い） */
  .pickup {
    position: relative;
    height: var(--h-pickup, 1px);
    overflow: visible;
    background: none;
  }

  .pickup__inner {
    position: static;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .pickup__eyebrow {
    display: none;
  }

  .pickup__renewal {
    /* 縦書き「WEBサイトをリニューアルしました。」中央 */
    display: block;
    position: absolute;
    top: var(--pickup-renewal-top, -268px);
    left: 50%;
    height: 414px;
    transform: translateX(-50%);
    color: #000;
    font-family: var(--font-sans);
    font-size: var(--fs-16);
    font-weight: 400;
    letter-spacing: 8.4px;         /* 字送り 24.4px 相当 */
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
  }

  .pickup__cards {
    position: absolute;
    top: var(--pickup-band-top, -27.5px);
    right: 8%;                     /* 64/800 */
    left: 8%;
    display: block;
    height: 90px;
    margin: 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
  }

  .pickup-card {
    display: none;
  }
}

/* ===== Mobile ≤560（Figma 1:669 ABOUT / 1:685 Feature card 実測） ===== */
@media (max-width: 560px) {
  :root {
    --sp-about-top: 50px;
    --about-x: 8%;                 /* 30/375 */
    --about-col-w: 35.714%;        /* 112.5/315（コンテナ=375-30-30 基準） */
    --about-col-gap: 28.572%;      /* 90/315 */
    --about-photo-h: 170.7px;
    --about-photo-gap: 20px;
    --about-head-top: 35px;        /* 左カラム Frame28 padT */
    --h-pickup: 632px;
    --pickup-renewal-top: 48px;
    --pickup-band-top: 494px;
  }

  .about__grid {
    align-items: start;
  }

  .about__lead {
    /* 4字/行 ×3行（倉をひら/く、人と/つながる）。112.5px 幅に 4字を収める。
       tablet(≤1024)の nowrap/fs-26 継承を打ち消し、Figma の大きな3行見出しへ戻す */
    /* 4字/行=3行にするため、隣の col-gap 内へ少しだけ張り出す（右の写真列 64%手前まで安全） */
    width: calc(100% + 22px);
    margin-left: -3px;
    white-space: normal;
    font-size: var(--fs-30);
    line-height: 43.5px;
    letter-spacing: 3px;
  }

  .about__body {
    margin-top: 50px;
  }

  .about__photos {
    /* 右カラムは左カラムより 321.6px 下から始まる（773.6 - 452） */
    margin-top: 321.6px;
  }

  .pickup__cards {
    right: 6.4%;                   /* 24/375 */
    left: 6.4%;
  }
}