@charset "UTF-8";
/* ==========================================================================
   voice (Producers' Voices)  design canvas: 1500 × 3576
   ========================================================================== */

/* ---------------------------------------------------------------- hero --- */
/* デザイン: 1500 × 901 (60.07vw) / タイトルは右寄り */
.page-hero {
  position: relative;
  height: clamp(480px, 60.07vw, 901px);
  overflow: hidden;
  background: #000;
  color: var(--c-white);
}
.page-hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.page-hero-title {
  position: absolute;
  top: 24.5%;
  left: 59.27%; /* 889 / 1500 */
  margin: 0;
  font-weight: 400;
  font-size: clamp(2.25rem, 4.33vw, 4.0625rem); /* 65px */
  line-height: 1.23; /* 80 / 65 */
}

/* ------------------------------------------------------- article head --- */
/* デザイン: 写真 683–1363 / テキスト 250– */
.article-head {
  padding-top: 48px;
}
.article-head-inner {
  display: grid;
  grid-template-columns: 16.67% 28.87% 45.33% 9.13%;
  /* 左余白250 / テキスト433 / 写真683–1363 / 右余白137 */
  align-items: start;
}
.article-head-txt {
  grid-column: 2;
  padding-top: 85px;
}
.article-head-photo {
  grid-column: 3;
  margin: 0;
}
.article-head-photo img {
  width: 100%;
  height: auto;
  display: block;
}
.article-company {
  font-size: 1.25rem; /* 20px */
  font-weight: 500;
  line-height: 1.4;
}
.article-name {
  max-width: 77.3%; /* デザイン: 下線 334.5px */
  margin-top: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-black);
  font-weight: 400;
  font-size: 2.5rem; /* 40px */
  line-height: 1.3;
}
.article-intro {
  max-width: 82%;
  margin-top: 20px;
  font-size: 1rem;
  line-height: 1.75;
}

/* ------------------------------------------------------- article body --- */
/* デザイン: グレー地 #EDEDED */
.article-body {
  margin-top: 52px;
  padding-top: 90px;
  background: var(--c-gray);
}
.v-row {
  display: grid;
  align-items: start;
}
/* 上段: 写真 0–776 / gap 46 / テキスト 822–1250 / 右余白 250 */
.v-row-01 {
  grid-template-columns: 51.73% 3.07% 28.53% 16.67%;
}
.v-row-01 .v-photo {
  grid-column: 1;
}
.v-row-01 .v-txt {
  grid-column: 3;
  padding-top: 25px;
}
/* 下段: 左余白 250 / テキスト 250–680 / gap 36 / 写真 716–1500 */
.v-row-02 {
  grid-template-columns: 16.67% 28.67% 2.4% 52.26%;
  margin-top: 53px;
}
.v-row-02 .v-txt {
  grid-column: 2;
  padding-top: 27px;
}
.v-row-02 .v-photo {
  grid-column: 4;
}
.v-photo {
  margin: 0;
}
.v-photo img {
  width: 100%;
  height: auto;
  display: block;
}
.v-title {
  font-weight: 400;
  font-size: 1.875rem; /* 30px */
  line-height: 1.5; /* 45 / 30 */
}
.v-body {
  margin-top: 22px;
  font-size: 1rem;
  line-height: 1.75;
}
.v-row-02 .v-body {
  margin-top: 26px;
}

/* 全幅ビジュアル（グレー地の上に重なる） */
.article-visual {
  margin: 31px 0 0;
}
.article-visual img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------------------------------------------------------- responsive --- */
@media (max-width: 991.98px) {
  .page-hero {
    height: clamp(400px, 78vw, 700px);
  }
  .page-hero-title {
    left: auto;
    right: var(--gutter);
    top: 22%;
    text-align: right;
  }

  .article-head {
    padding-top: 36px;
  }
  .article-head-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* PC 用の align-items: start を打ち消す */
    padding-inline: var(--gutter);
    max-width: calc(var(--content-w) + var(--gutter) * 2);
    margin-inline: auto;
  }
  .article-head-photo {
    order: -1; /* SP は写真を先頭に */
    margin-bottom: 24px;
  }
  .article-name,
  .article-intro {
    max-width: none;
  }
  .article-head-txt {
    padding-top: 0;
  }
  .article-name {
    font-size: 1.75rem;
  }

  .article-body {
    margin-top: 36px;
    padding-top: 40px;
  }
  .v-row,
  .v-row-01,
  .v-row-02 {
    display: block;
    margin-top: 0;
  }
  .v-row + .v-row {
    margin-top: 50px;
  }
  .v-txt {
    padding: 24px var(--gutter) 0;
    max-width: calc(var(--content-w) + var(--gutter) * 2);
    margin-inline: auto;
  }
  .v-row-01 .v-txt,
  .v-row-02 .v-txt {
    padding-top: 24px;
  }
  /* 左右振り分けをやめ、本文と同じコンテンツ幅で中央寄せにする */
  .v-photo {
    width: 100%;
    max-width: calc(var(--content-w) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .v-row-02 .v-photo {
    margin-top: 24px;
  }
  .v-title {
    font-size: 1.375rem;
  }
  .article-visual {
    margin-top: 40px;
  }
}

@media (max-width: 575.98px) {
  .article-company {
    font-size: 1rem;
  }
  .article-name {
    font-size: 1.5rem;
  }
}

/* --------------------------------------------------------------- SP --- */
/* SP デザイン（375 × 3209）に合わせた調整 */
@media (max-width: 767.98px) {
  /* ヒーロー: 375 × 528。タイトルは中央寄せ */
  .page-hero {
    height: auto;
    aspect-ratio: 375 / 528;
    max-height: 600px;
  }
  .page-hero-bg {
    position: absolute;
    inset: 0;
    height: 100%;
  }
  .page-hero-title {
    top: auto;
    bottom: 10%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 2.4375rem; /* 39px */
    line-height: 1.21;
  }

  .article-name {
    font-size: 1.875rem; /* 30px */
  }
  .article-company {
    font-size: 1rem;
  }
  .v-title {
    font-size: 1.375rem; /* 22px */
  }
}