/* ==========================================================================
   株式会社山本商会 コーポレートサイト
   構成: リセット / 変数(トークン) / 基本要素 / レイアウト共通 / ヘッダー /
         セクション別 / フッター / レスポンシブ
   将来 WordPress オリジナルテーマ化する際、セクション単位のブロックは
   概ねそのまま template-parts/ の各パーツに移植できるように区切っている。
   ========================================================================== */

/* ---------- リセット ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body,
h1, h2, h3, h4, p, ul, ol, figure {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

/* ---------- ハニーポット欄（Formspreeスパム対策） ----------
   name="_gotcha" をこのクラスで隠す。人には見えず、
   フォーム自動入力するボットだけが埋めてしまう罠。 */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ---------- デザイントークン ---------- */
:root {
  /* カラー: 黒・チャコール・オフホワイト基調 + 深い錆色(テラコッタ)のアクセント1色 */
  --color-black: #0d0c0b;
  --color-dark: #1b1917;
  --color-gray-900: #242220;
  --color-gray-700: #524d48;
  --color-gray-400: #8f867e;
  --color-gray-200: #e7e2da;
  --color-gray-100: #f5f1ea;
  --color-white: #ffffff;
  --color-accent: #8a3a24;      /* 深い錆色・テラコッタ（差し色は1色に限定） */
  --color-accent-light: #b25036;

  --font-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;

  --container-width: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-padding: clamp(80px, 11vw, 160px);

  --transition-base: 0.3s ease;
}

body {
  font-family: var(--font-base);
  color: var(--color-dark);
  background-color: var(--color-white);
  line-height: 1.8;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}

/* ---------- 汎用レイアウト ---------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-padding);
}

/* 固定ヘッダーとアンカー移動の重なり防止 */
main section[id] {
  scroll-margin-top: 80px;
}

.section--dark {
  background-color: var(--color-black);
  color: var(--color-white);
}

.section--alt {
  background-color: var(--color-gray-100);
}

.section-heading {
  margin-bottom: clamp(40px, 7vw, 72px);
}

.section-heading__eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  color: var(--color-accent);
  margin-bottom: 16px;
  text-transform: uppercase;
}

.section--dark .section-heading__eyebrow {
  color: var(--color-accent-light);
}

.section-heading__title {
  font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.section-heading__lead {
  margin-top: 22px;
  max-width: 56ch;
  color: var(--color-gray-700);
  font-size: 0.98rem;
}

.section--dark .section-heading__lead {
  color: var(--color-gray-200);
}

/* 本文複数段落用の共通クラス（思想／WHY THE WORLD補足／採用本文で共用） */
.prose {
  max-width: 34em;
  color: var(--color-gray-700);
}

.section--dark .prose {
  color: var(--color-gray-200);
}

.prose p + p {
  margin-top: 1.2em;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  border: 1px solid currentColor;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.btn--primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.btn--primary:hover {
  background-color: var(--color-accent-light);
  border-color: var(--color-accent-light);
}

.btn--outline {
  background-color: transparent;
  color: inherit;
}

.btn--outline:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

.section--dark .btn--outline:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

/* 送信中の二重送信防止（フォーム送信ボタン共通） */
.btn[disabled] {
  opacity: 0.55;
  cursor: default;
}

.placeholder-note {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.72rem;
  color: var(--color-accent-light);
  letter-spacing: 0.03em;
}

/* ==========================================================================
   ヘッダー / ナビゲーション
   ========================================================================== */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter);
  height: 88px;
  color: var(--color-white);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
  transition: background-color var(--transition-base), height var(--transition-base);
}

.site-header.is-scrolled {
  background: rgba(12, 12, 12, 0.92);
  height: 72px;
  backdrop-filter: blur(6px);
}

.site-header__logo {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.site-header__logo-en {
  display: block;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--color-gray-400);
  margin-top: 2px;
}

.site-nav__list {
  display: flex;
  gap: clamp(16px, 2.4vw, 40px);
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}

.site-nav__list a {
  position: relative;
  padding-block: 6px;
}

.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-accent-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.site-nav__list a:hover::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  z-index: 110;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--color-white);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   ヒーロー（背景全面の写真 + グラデーションで黒へ溶け込むブランド広告構成）
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  min-height: calc(100svh + 100px);
  color: var(--color-white);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: var(--color-black);
}

.hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(13, 12, 11, 0) 46%,
    rgba(13, 12, 11, 0.4) 68%,
    rgba(13, 12, 11, 0.78) 86%,
    rgba(13, 12, 11, 0.85) 100%
  );
  pointer-events: none;
}

/* Hero下端 → OUR PURPOSE背景色へ溶け込む、ごく弱いつなぎのグラデーション（モバイル用の基本値）。
   帯や余白は作らず、既存のHero画像/オーバーレイの上に重ねるだけ。 */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(70px, 18vw, 100px);
  background: linear-gradient(
    to bottom,
    rgba(225, 212, 198, 0) 0%,
    rgba(225, 212, 198, 0) 35%,
    rgba(225, 212, 198, 0.55) 70%,
    #e1d4c6 100%
  );
  z-index: -1;
  pointer-events: none;
}

/* PC幅では、既存の暗いオーバーレイが終端付近で黒く沈み込むため、
   つなぎのグラデーション自体を大きく（160〜220px）取り、
   前半で写真がしっかり見える状態を確保する。 */
@media (min-width: 721px) {
  .hero::after {
    height: clamp(160px, 12vw, 220px);
  }
}

.hero__content {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-end;
}

.hero__content-inner {
  width: 100%;
  max-width: 760px;
  padding: clamp(16px, 3vh, 32px) clamp(20px, 4vw, 40px) clamp(36px, 6vh, 56px);
  margin-inline-start: clamp(16px, 3.5vw, 56px);
  margin-bottom: 100px;
  border-left: 3px solid var(--color-accent);
}

.hero__eyebrow {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  line-height: 1.9;
  color: var(--color-gray-400);
  margin-bottom: clamp(18px, 3vh, 28px);
}

.hero__title {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(2.1rem, 5.4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.03em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.hero__submessage {
  margin-top: clamp(20px, 3.5vh, 32px);
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--color-gray-200);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.hero__actions {
  margin-top: clamp(24px, 4vh, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ==========================================================================
   私たちは何者か（About）
   ========================================================================== */
#about {
  position: relative;
  background-color: #e1d4c6;
}

.about__grid {
  display: grid;
  grid-template-columns: 0.86fr 1fr 0.86fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}

.about__body {
  align-self: center;
  min-width: 0;
}

.about__title {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-weight: 900;
}

.purpose-title-line {
  display: block;
}

@media (min-width: 1025px) {
  .about__title {
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    letter-spacing: 0;
  }

  .purpose-title-line {
    white-space: nowrap;
  }
}

/* PC版（1200px以上）: セクション幅を広げ、左見出しの折り返しを防ぐ */
@media (min-width: 1200px) {
  #about .container {
    max-width: none;
    padding-inline: clamp(24px, 2.5vw, 48px);
  }

  #about .about__grid {
    width: 100%;
    grid-template-columns: minmax(0, 30fr) minmax(0, 36fr) minmax(0, 30fr);
    gap: clamp(24px, 2.5vw, 40px);
  }

  #about .about__grid > * {
    min-width: 0;
  }

  #about .about__body,
  #about .about__values {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  #about .about__prose {
    max-width: none;
  }

  #about .about__title {
    font-size: clamp(1.35rem, 1.8vw, 2.25rem);
  }

  #about .about__value + .about__value {
    margin-top: clamp(20px, 2.5vw, 32px);
    padding-top: clamp(20px, 2.5vw, 32px);
    border-top-color: rgba(74, 45, 24, 0.22);
  }

  #about .about__value-title {
    font-size: 1.08rem;
  }

  #about .about__value-desc {
    line-height: 1.75;
  }

  #about .about__value-icon {
    width: 22px;
    height: 22px;
  }
}

.about__emphasis {
  margin-top: 20px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-accent);
}

.about__actions .btn {
  white-space: normal;
}

.about__link {
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  background-color: #a23b27;
  border-color: #a23b27;
  color: #fff8f0;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

a.about__link:hover {
  background-color: #7f2e20;
  border-color: #7f2e20;
  color: #fff8f0;
}

.about__link-arrow {
  flex: none;
  transition: transform 0.25s ease;
}

a.about__link:hover .about__link-arrow {
  transform: translateX(4px);
}

.about__body p + p {
  margin-top: 1.2em;
}

.about__prose {
  margin-top: 20px;
}

.about__actions {
  margin-top: 32px;
}

.about__figure {
  position: relative;
  min-width: 0;
  height: 100%;
  min-height: 480px;
}

.about__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__figure figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 10px 16px;
  font-size: 0.76rem;
  color: var(--color-white);
  background: linear-gradient(to top, rgba(13, 12, 11, 0.75), transparent);
  width: 100%;
}

.about__values {
  display: flex;
  flex-direction: column;
  align-self: center;
  min-width: 0;
}

.about__value + .about__value {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid rgba(74, 45, 24, 0.14);
}

.about__value-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.about__value-icon {
  display: inline-flex;
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--color-accent);
}

.about__value-icon svg {
  width: 100%;
  height: 100%;
}

.about__value-title {
  font-size: 1.02rem;
  font-weight: 700;
}

.about__value-emphasis {
  margin-top: 14px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.7;
}

.about__value-desc {
  margin-top: 10px;
  font-size: 0.86rem;
  line-height: 1.9;
  color: var(--color-gray-700);
}

/* ==========================================================================
   セクション境界グラデーション（共通コンポーネント）
   使い方: <div class="section-transition" style="--transition-from:#XXXXXX; --transition-to:#XXXXXX;"></div>
   前後セクションの背景色が近しい色味の場合は、必要に応じて --transition-mid で
   中間色を明示指定すると、より自然な溶け込みになる（未指定時は自動で中間色を算出）。
   ========================================================================== */
.section-transition {
  width: 100%;
  max-width: none;
  height: clamp(160px, 12vw, 220px);
  padding: 0;
  background: linear-gradient(
    to bottom,
    var(--transition-from) 0%,
    var(--transition-from) 20%,
    var(--transition-mid, color-mix(in srgb, var(--transition-from) 65%, var(--transition-to))) 55%,
    var(--transition-to) 100%
  );
  pointer-events: none;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .section-transition {
    height: clamp(90px, 22vw, 130px);
  }
}

/* 近い色同士をつなぐ場合の短いバリエーション */
.section-transition--short {
  height: clamp(56px, 6vw, 96px);
}

@media (max-width: 720px) {
  .section-transition--short {
    height: clamp(40px, 10vw, 64px);
  }
}

/* ==========================================================================
   事業モデル（Business Model Steps）
   ========================================================================== */
.section--business {
  --biz-bg: #100c09;
  --biz-card-bg: rgba(27, 21, 17, 0.94);
  --biz-text: #f2e7da;
  --biz-text-soft: rgba(242, 231, 218, 0.72);
  --biz-border: rgba(181, 74, 44, 0.28);
  --biz-accent: #b54a2c;
  --biz-accent-emphasis: #c85535;
  --biz-number-bg: #a33d25;
  --biz-accent-future: var(--color-accent-light);

  background-color: var(--biz-bg);
  color: var(--biz-text);
}

.section--business .section-heading__eyebrow {
  color: var(--biz-accent);
}

.section--business .section-heading__title {
  color: var(--biz-text);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
}

.section--business .section-heading__lead {
  color: var(--biz-text-soft);
}

.business-model__container,
.business-model__intro-inner {
  max-width: 1560px;
  padding-inline: clamp(32px, 4vw, 48px);
}

/* ---------- 冒頭ビジュアル（背景写真＋前面テキスト） ---------- */
.business-model__intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.business-model__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--biz-bg);
}

.business-model__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  filter: contrast(1.03) brightness(0.98);
}

.business-model__photo-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(16, 12, 9, 0.18);
  pointer-events: none;
}

.business-model__photo-overlay-h {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(16, 12, 9, 1) 0%,
    rgba(16, 12, 9, 0.98) 27%,
    rgba(16, 12, 9, 0.9) 38%,
    rgba(16, 12, 9, 0.64) 50%,
    rgba(16, 12, 9, 0.28) 65%,
    rgba(16, 12, 9, 0.06) 82%,
    rgba(16, 12, 9, 0) 100%
  );
  pointer-events: none;
}

.business-model__photo-overlay-v {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(16, 12, 9, 0) 65%,
    rgba(16, 12, 9, 0.35) 82%,
    rgba(16, 12, 9, 0.92) 100%
  );
  pointer-events: none;
}

.business-model__photo-caption {
  position: absolute;
  right: clamp(20px, 3vw, 48px);
  bottom: clamp(20px, 3vw, 36px);
  z-index: 2;
  text-align: right;
  pointer-events: none;
}

.business-model__photo-caption::before {
  content: "";
  display: block;
  margin-left: auto;
  margin-bottom: 8px;
  width: 34px;
  height: 2px;
  background-color: var(--biz-accent);
}

.business-model__photo-caption-en {
  display: block;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: #f8f3ea;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.business-model__photo-caption-ja {
  display: block;
  margin-top: 5px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(248, 243, 234, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.business-model__intro-inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(64px, 8vw, 104px);
}

.business-model__text {
  max-width: min(46%, 640px);
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.step-card {
  display: flex;
  flex-direction: column;
  background-color: var(--biz-card-bg);
  border: 1px solid var(--biz-border);
  border-radius: 3px;
  padding: 20px 20px 24px;
}

.step-card__figure {
  position: relative;
  margin-top: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.04);
}

.step-card__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step-card__photo--truck {
  object-position: 50% 42%;
  filter: saturate(0.78) brightness(0.78) contrast(1.14) sepia(0.18) hue-rotate(-6deg);
}

.step-card__photo--container {
  object-position: 50% 38%;
  filter: saturate(0.8) brightness(0.86) contrast(1.1) sepia(0.16) hue-rotate(-6deg);
}

.step-card__photo--verify {
  object-position: 58% center;
  filter: brightness(0.96) contrast(1.04);
}

.step-card__photo--future {
  object-position: 35% center;
  filter: brightness(0.92) contrast(1.02);
}

.step-card__placeholder-tag {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 8px;
  background-color: rgba(16, 12, 9, 0.72);
  color: var(--biz-text-soft);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  border-radius: 2px;
}

.step-card__future-label {
  margin-top: 16px;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--biz-accent-future);
}

.step-card__title {
  margin-top: 16px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--biz-text);
}

.step-card--future .step-card__title {
  margin-top: 8px;
}

.step-card__emphasis {
  margin-top: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--biz-accent-emphasis);
}

.step-card__desc {
  margin-top: 10px;
  font-size: 0.86rem;
  line-height: 1.9;
  color: var(--biz-text-soft);
}

.step-card--future {
  border-color: rgba(178, 80, 54, 0.4);
}

/* ==========================================================================
   WHY THE WORLD（なぜ、私たちは海外へ挑戦するのか）
   ========================================================================== */
.why-world {
  --why-bg-dark: #342628;
  --why-bg: #3a2b2c;
  --why-bg-warm: #433133;
  --why-text: #fff3e9;
  --why-text-soft: rgba(255, 243, 233, 0.8);
  --why-label: #e58a68;
  --why-declare-1: #fff7ef;
  --why-declare-2: #ff936a;

  background: linear-gradient(135deg, var(--why-bg-dark) 0%, var(--why-bg) 48%, var(--why-bg-warm) 100%);
  color: var(--why-text);
  text-align: left;
}

.why-world__inner {
  max-width: 1560px;
  padding-inline: clamp(32px, 4vw, 56px);
}

.why-world .section-heading__eyebrow {
  color: var(--why-label);
}

.why-world__title {
  margin-top: 18px;
  color: var(--why-text);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(2.2rem, 1.6vw + 1.7rem, 3.15rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 0;
}

.why-world__title-line {
  display: block;
}

.why-world__list {
  font-weight: 600;
  color: var(--why-text);
}

.why-world .prose {
  color: var(--why-text-soft);
  font-size: clamp(1.15rem, 1.1vw + 0.7rem, 1.35rem);
  font-weight: 450;
  line-height: 1.9;
}

.why-world .prose p + p {
  margin-top: clamp(24px, 3vw, 36px);
}

/* ---------- WHY THE WORLD: ビジュアル（ラクダ写真1枚） ---------- */
.why-world__text {
  min-width: 0;
}

.why-world__visual {
  min-width: 0;
  margin-top: clamp(40px, 6vw, 56px);
}

.why-world__photo {
  position: relative;
  overflow: hidden;
  background-color: var(--why-bg);
}

.why-world__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why-world__photo--main {
  aspect-ratio: 4 / 3;
  min-height: 0;
}

.why-world__photo--main img {
  object-position: center 43%;
  filter: saturate(1.12) contrast(1.1) brightness(0.95);
}

.why-world__photo-edge {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--why-bg) 0%, rgba(58, 43, 44, 0.72) 7%, rgba(58, 43, 44, 0.3) 16%, rgba(58, 43, 44, 0) 28%),
    linear-gradient(to left, var(--why-bg-warm) 0%, rgba(67, 49, 51, 0.72) 7%, rgba(67, 49, 51, 0.3) 16%, rgba(67, 49, 51, 0) 28%),
    linear-gradient(to bottom, var(--why-bg-dark) 0%, rgba(52, 38, 40, 0.68) 6%, rgba(52, 38, 40, 0.26) 14%, rgba(52, 38, 40, 0) 26%),
    linear-gradient(to top, var(--why-bg-warm) 0%, rgba(67, 49, 51, 0.68) 6%, rgba(67, 49, 51, 0.26) 14%, rgba(67, 49, 51, 0) 26%);
  pointer-events: none;
}

.why-world__photo-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 62% 38%, rgba(255, 197, 140, 0.18), transparent 55%),
    radial-gradient(ellipse at center, transparent 52%, rgba(52, 38, 40, 0.4) 100%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.why-world__conclusion {
  margin-top: clamp(56px, 7vw, 88px);
  max-width: none;
}

.why-world__emphasis {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(1.85rem, 1.6vw + 1.4rem, 2.7rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--why-text);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.why-world__emphasis + .why-world__emphasis {
  margin-top: 10px;
}

.why-world__emphasis-lead {
  color: var(--why-declare-2);
}

.why-world__emphasis-strong {
  color: var(--why-declare-2);
}

.why-world__actions {
  margin-top: clamp(32px, 5vw, 48px);
}

.why-world__cta {
  background-color: #e76f51;
  border-color: #e76f51;
  color: #fff9f3;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

a.why-world__cta:hover {
  background-color: #f08363;
  border-color: #f08363;
  color: #fff9f3;
}

.why-world__cta-arrow {
  flex: none;
  color: #fff9f3;
  transition: transform 0.25s ease;
}

a.why-world__cta:hover .why-world__cta-arrow {
  transform: translateX(4px);
}

@media (min-width: 1200px) {
  .why-world__grid {
    display: grid;
    grid-template-columns: minmax(0, 41fr) minmax(0, 54fr);
    gap: clamp(64px, 6vw, 96px);
    align-items: stretch;
  }

  .why-world__body .prose {
    max-width: 820px;
  }

  .why-world__visual {
    position: relative;
    margin-top: 0;
    height: 100%;
  }

  .why-world__photo--main {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
  }
}

@media (max-width: 1199px) {
  .why-world__body {
    margin-top: clamp(32px, 5vw, 48px);
  }
}

/* ==========================================================================
   OUR NEXT CHAPTER
   ========================================================================== */
.next-chapter {
  --next-bg-a: #d8cec4;
  --next-bg-b: #d2c5b8;
  --next-bg-c: #c9b9aa;
  --next-text: #111111;
  --next-text-body: #514a45;
  --next-text-muted: rgba(17, 17, 17, 0.55);
  --next-accent: #963e2a;
  --next-accent-eyebrow: #9a412d;
  --next-number-color: rgba(150, 62, 43, 0.1);
  --next-divider: rgba(17, 17, 17, 0.14);
  --next-sans-jp: var(--font-base);
  --next-sans-en: "Inter", "Helvetica Neue", Arial, sans-serif;

  --next-dark-a: #14100e;
  --next-dark-b: #1d1512;
  --next-dark-c: #291a15;
  --next-dark-divider: rgba(255, 255, 255, 0.12);
  --next-dark-heading: #f6eee7;
  --next-dark-body: rgba(246, 238, 231, 0.72);
  --next-dark-label: #d66a45;
  --next-number-grad-a: rgba(224, 105, 67, 0.42);
  --next-number-grad-b: rgba(224, 105, 67, 0.1);
  --next-glow: rgba(214, 106, 69, 0.08);

  position: relative;
  background: linear-gradient(145deg, var(--next-bg-a) 0%, var(--next-bg-b) 52%, var(--next-bg-c) 100%);
  color: var(--next-text);
  overflow: hidden;
  /* セクション末尾は宣言の暗色バンドで終える（下の帯とGOATの暗部を連続させる） */
  padding-block: clamp(96px, 12vw, 168px) 0;
  scroll-margin-top: 88px;
}

/* 紙・石のようなごく弱い質感（画像ファイル不使用） */
.next-chapter::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 0;
}

.next-chapter .section-heading__eyebrow {
  font-family: var(--next-sans-en);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--next-accent-eyebrow);
}

.next-chapter__container {
  position: relative;
  z-index: 1;
  width: min(94vw, 1600px);
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 64px);
}

.next-chapter__eyebrow {
  margin-bottom: 0;
}

.next-chapter__title {
  margin-top: clamp(20px, 2.4vw, 32px);
  font-family: var(--next-sans-jp);
  color: var(--next-text);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.next-chapter__title-line {
  display: block;
}

.next-chapter__title-line--main {
  /* 「中古タイヤで終わらない」10文字が最小幅でも1行に収まるサイズ */
  font-size: clamp(27px, 8.4vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.next-chapter__title-line--sub {
  margin-top: clamp(10px, 1.4vw, 20px);
  /* 「世界に必要とされる事業を」12文字が最小幅でも収まるサイズ */
  font-size: clamp(22px, 7vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

@media (max-width: 767px) {
  .next-chapter__title-line--sub {
    white-space: nowrap;
  }
}

.next-chapter__title-break {
  display: none;
}

@media (max-width: 767px) {
  .next-chapter__title-break {
    display: inline;
  }
}

.next-chapter .next-chapter__lead.prose {
  margin-top: clamp(40px, 4.5vw, 64px);
  max-width: 700px;
  min-width: 0;
  width: 100%;
  font-family: var(--next-sans-jp);
  font-weight: 400;
  color: var(--next-text-body);
  font-size: clamp(16px, 1.1vw + 13px, 20px);
  line-height: 1.9;
}

.next-chapter .next-chapter__lead.prose p + p {
  margin-top: 1.4em;
}

.next-chapter__lead-emphasis {
  color: var(--next-accent);
  font-weight: 650;
}

.next-chapter__directions {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: clamp(72px, 9vw, 128px);
  padding-block: clamp(80px, 9vw, 110px);
  background: linear-gradient(135deg, var(--next-dark-a) 0%, var(--next-dark-b) 48%, var(--next-dark-c) 100%);
  overflow: hidden;
}

.next-chapter__directions::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(80px, 10vw, 120px);
  background: linear-gradient(180deg, var(--next-bg-c) 0%, #6b4634 45%, rgba(107, 70, 52, 0) 100%);
  pointer-events: none;
  z-index: 0;
}

/* バンド下端を次のGOATセクション背景色（#191310）へ溶け込ませる */
.next-chapter__directions::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(80px, 10vw, 140px);
  background: linear-gradient(180deg, rgba(25, 19, 16, 0) 0%, #191310 100%);
  pointer-events: none;
  z-index: 0;
}

.next-chapter__directions-inner {
  position: relative;
  z-index: 1;
  width: min(94vw, 1600px);
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 64px);
}

.next-chapter__direction {
  position: relative;
  padding-top: clamp(64px, 9vw, 80px);
  padding-bottom: clamp(64px, 9vw, 80px);
  border-top: 1px solid var(--next-dark-divider);
}

.next-chapter__direction:first-child {
  padding-top: 0;
  border-top: none;
}

.next-chapter__direction::before {
  content: "";
  position: absolute;
  top: -8%;
  left: 50%;
  width: 140%;
  height: 55%;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--next-glow) 0%, rgba(214, 106, 69, 0) 65%);
  pointer-events: none;
  z-index: 0;
}

.next-chapter__label {
  position: relative;
  z-index: 1;
  margin-top: 0;
  font-family: var(--next-sans-en);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--next-dark-label);
  text-transform: uppercase;
}

.next-chapter__direction-title {
  position: relative;
  z-index: 1;
  margin-top: clamp(20px, 2vw, 24px);
  font-family: var(--next-sans-jp);
  font-size: clamp(27px, 6.5vw, 31px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--next-dark-heading);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.next-chapter__direction-text {
  position: relative;
  z-index: 1;
  margin-top: clamp(22px, 2.2vw, 28px);
  font-family: var(--next-sans-jp);
  font-weight: 400;
  font-size: clamp(16px, 0.4vw + 15px, 18px);
  line-height: 1.85;
  color: var(--next-dark-body);
}

@media (min-width: 1200px) {
  .next-chapter__container {
    padding-inline: clamp(48px, 4vw, 64px);
  }

  .next-chapter__directions-inner {
    padding-inline: clamp(48px, 4vw, 64px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    gap: 0;
  }

  .next-chapter__direction {
    display: grid;
    grid-row: 1 / span 3;
    grid-template-rows: subgrid;
    min-width: 0;
    padding: 0 clamp(32px, 2.6vw, 48px);
    border-top: none;
  }

  .next-chapter__direction > * {
    min-width: 0;
  }

  .next-chapter__direction:first-child {
    padding-inline-start: 0;
  }

  .next-chapter__direction:last-child {
    padding-inline-end: 0;
  }

  .next-chapter__direction + .next-chapter__direction {
    border-inline-start: 1px solid var(--next-dark-divider);
  }

  .next-chapter__title-line--main {
    font-size: clamp(64px, 6vw, 104px);
  }

  .next-chapter__title-line--sub {
    font-size: clamp(40px, 3.8vw, 64px);
  }

  .next-chapter__direction-title {
    font-size: clamp(26px, 2vw, 33px);
  }

}


/* ==========================================================================
   GOAT PROJECT（新規事業への挑戦）
   明るい牧場の世界観。下層 goat-project.html とデザイン言語を共有し、
   CTAで詳細ページへ進んでも「同じ世界の奥へ入った」と感じさせる。
   ========================================================================== */
.goat {
  --goat-mist: #e7f0e1;      /* 淡い牧場グリーン */
  --goat-sage: #d8e8d1;      /* サブ */
  --goat-cream: #f5f2e8;     /* 生成り */
  --goat-accent: #6f8d67;    /* アクセントグリーン */
  --goat-forest: #35543a;    /* CTA・罫 */
  --goat-deep: #29412f;      /* 見出し */
  --goat-text: #2b352c;
  --goat-body: #4f5d50;      /* 本文 */
  --goat-earth: #c97a52;     /* テラコッタ（ごく小さく1箇所だけ） */

  --goat-mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --goat-latin: "Inter", "Helvetica Neue", Arial, sans-serif;
  --goat-pad: clamp(20px, 5vw, 64px);

  position: relative;
  color: var(--goat-text);
  overflow: hidden;
  /* 生成り → 淡いセージ → 明るい牧草グリーン。斜めの光はごく弱く重ねる。
     上下の端は前後の section-transition と同じ色へ揃え、継ぎ目を出さない。 */
  background:
    linear-gradient(to bottom, #f5f2e8 0%, rgba(245, 242, 232, 0) 10%),
    linear-gradient(to bottom, rgba(220, 234, 212, 0) 88%, #dcead4 100%),
    linear-gradient(
      145deg,
      rgba(245, 242, 232, 0.55) 0%,
      rgba(231, 240, 225, 0) 45%,
      rgba(216, 232, 209, 0.42) 100%
    ),
    linear-gradient(to bottom, #f5f2e8 0%, #e7f0e1 48%, #dcead4 100%);
}

.goat__inner {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  padding-inline: var(--goat-pad);
}

/* ---------- 見出しまわり ---------- */
.goat .section-heading__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--goat-latin);
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--goat-accent);
  margin-bottom: 0;
}

.goat__eyebrow::before {
  content: "";
  width: clamp(24px, 3vw, 40px);
  height: 2px;
  background-color: var(--goat-earth);
  flex: none;
}

.goat__title {
  margin-top: clamp(18px, 2.2vw, 28px);
  font-family: var(--goat-mincho);
  font-size: clamp(1.85rem, 1.9vw + 1.28rem, 3.2rem);
  font-weight: 600;
  line-height: 1.62;
  letter-spacing: 0.05em;
  color: var(--goat-deep);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.goat__title-line {
  display: block;
  color: #3e5843;
}

.goat__title-line--strong {
  color: var(--goat-deep);
}

/* ---------- 本文 ---------- */
.goat__prose {
  margin-top: clamp(26px, 3.2vw, 40px);
  max-width: 32em;
  font-family: var(--goat-mincho);
  color: var(--goat-body);
  font-size: clamp(1rem, 0.34vw + 0.93rem, 1.1rem);
  line-height: 2.2;
  letter-spacing: 0.035em;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.goat__prose p + p {
  margin-top: 1.5em;
}

/* ---------- 静かなステートメント ---------- */
.goat__statement {
  margin-top: clamp(30px, 3.6vw, 46px);
  max-width: 30em;
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px);
  border-left: 2px solid var(--goat-forest);
  background: linear-gradient(to right, rgba(248, 245, 236, 0.95), rgba(248, 245, 236, 0.45));
  font-family: var(--goat-mincho);
  font-size: clamp(1.12rem, 0.72vw + 0.98rem, 1.48rem);
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--goat-deep);
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ---------- CTA ---------- */
.goat__actions {
  margin-top: clamp(32px, 3.8vw, 50px);
}

.goat__cta {
  background-color: var(--goat-forest);
  border-color: var(--goat-forest);
  color: #f8f5ec;
  font-family: var(--goat-mincho);
  letter-spacing: 0.1em;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

a.goat__cta:hover {
  background-color: #29462f;
  border-color: #29462f;
  color: #f8f5ec;
}

.goat__cta-arrow {
  flex: none;
  transition: transform 0.25s ease;
}

a.goat__cta:hover .goat__cta-arrow {
  transform: translateX(4px);
}

/* ---------- メインビジュアル ---------- */
.goat__figure {
  margin: clamp(30px, 5vw, 46px) 0 0;
}

.goat__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* 有機的なトリミング。対角の2隅だけを大きく丸めて草の中に置いたような形にする */
  border-radius: clamp(40px, 8vw, 104px) clamp(14px, 2vw, 26px)
                 clamp(40px, 8vw, 104px) clamp(14px, 2vw, 26px);
  box-shadow: 0 48px 72px -58px rgba(43, 53, 44, 0.72);
}

.goat__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

/* 写真の縁を背景の生成り・セージへ溶かす、ごく薄い縁 */
.goat__media-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(248, 245, 236, 0.55);
  background:
    linear-gradient(to right, rgba(245, 242, 232, 0.34) 0%, rgba(245, 242, 232, 0) 9%),
    linear-gradient(to left, rgba(216, 232, 209, 0.3) 0%, rgba(216, 232, 209, 0) 9%),
    linear-gradient(to top, rgba(216, 232, 209, 0.34) 0%, rgba(216, 232, 209, 0) 11%),
    linear-gradient(to bottom, rgba(245, 242, 232, 0.28) 0%, rgba(245, 242, 232, 0) 8%);
}

.goat__media-caption {
  margin-top: 14px;
  padding-left: 2px;
}

.goat__media-caption-en {
  display: block;
  font-family: var(--goat-latin);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--goat-accent);
}

.goat__media-caption-ja {
  display: block;
  margin-top: 6px;
  font-family: var(--goat-mincho);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--goat-body);
}

/* ---------- PC: 左にコピー、右に大きな自然写真 ---------- */
@media (min-width: 1100px) {
  .goat__inner {
    display: grid;
    grid-template-columns: minmax(0, 44fr) minmax(0, 53fr);
    column-gap: clamp(48px, 5.5vw, 96px);
    align-items: start;
  }

  .goat__head {
    grid-column: 1;
    grid-row: 1;
  }

  .goat__body {
    grid-column: 1;
    grid-row: 2;
  }

  .goat__figure {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-top: 0;
  }

  .goat__media {
    width: min(100%, 660px);
    margin-inline-start: auto;
  }

  .goat__media-caption {
    width: min(100%, 660px);
    margin-inline-start: auto;
  }
}

/* ---------- スマホ: 写真を画面幅いっぱい近くまで使う ---------- */
@media (max-width: 720px) {
  .goat__figure {
    margin-inline: calc((var(--goat-pad) - 10px) * -1);
  }

  .goat__media {
    aspect-ratio: 4 / 5;
    border-radius: clamp(34px, 11vw, 60px) 14px clamp(34px, 11vw, 60px) 14px;
  }

  .goat__media-caption {
    padding-left: calc(var(--goat-pad) - 10px);
  }

  /* 1行目「市場があるから始めたのではない。」が折り返さない大きさに収める */
  .goat__statement {
    font-size: clamp(1.05rem, 3.6vw, 1.25rem);
    padding: clamp(18px, 5vw, 24px) clamp(16px, 4.4vw, 22px);
  }
}

/* ==========================================================================
   採用情報（RECRUIT）
   写真を使わず、タイポグラフィで完成させる明るいブランド採用セクション
   ========================================================================== */
.recruit {
  --recruit-bg: #e7dac8;
  --recruit-heading: #221910;
  --recruit-body: #55483a;
  --recruit-accent: #963e2a;
  --recruit-rule: rgba(34, 25, 16, 0.16);

  position: relative;
  background: linear-gradient(165deg, #ecdfce 0%, var(--recruit-bg) 55%, #ddccb6 100%);
  color: var(--recruit-heading);
}

.recruit .section-heading__eyebrow {
  color: var(--recruit-accent);
}

.recruit__title {
  margin-top: clamp(16px, 2vw, 24px);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(2.4rem, 3.4vw + 1.2rem, 4.4rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--recruit-heading);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.recruit__prose {
  margin-top: clamp(32px, 4vw, 48px);
  max-width: 36em;
  color: var(--recruit-body);
  font-size: clamp(0.98rem, 0.4vw + 0.85rem, 1.1rem);
  line-height: 2;
}

.recruit__prose p + p {
  margin-top: 1.5em;
}

.recruit__statement {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(1.25rem, 0.8vw + 1.05rem, 1.6rem);
  font-weight: 600;
  color: var(--recruit-accent);
}

.recruit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: clamp(32px, 5vw, 56px);
}

.recruit__actions--main {
  margin-top: clamp(36px, 4.5vw, 56px);
}

.recruit__cta {
  justify-content: space-between;
  min-width: min(100%, 320px);
  background-color: #a23b27;
  border-color: #a23b27;
  color: #fff8f0;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

a.recruit__cta:hover {
  background-color: #7f2e20;
  border-color: #7f2e20;
  color: #fff8f0;
}

.recruit__cta-arrow {
  flex: none;
  transition: transform 0.25s ease;
}

a.recruit__cta:hover .recruit__cta-arrow {
  transform: translateX(4px);
}

/* 募集職種: カードではなく編集的な罫線リスト */
.recruit__jobs-block {
  margin-top: clamp(64px, 8vw, 104px);
}

.recruit__jobs-label {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--recruit-accent);
}

.recruit__jobs-label-ja {
  margin-left: 14px;
  font-family: var(--font-base);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--recruit-body);
}

.recruit__jobs {
  margin-top: 20px;
  border-top: 1px solid var(--recruit-rule);
}

.recruit-job {
  padding-block: clamp(20px, 2.6vw, 30px);
  border-bottom: 1px solid var(--recruit-rule);
}

.recruit-job__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--recruit-heading);
}

.recruit-job__desc {
  margin-top: 6px;
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--recruit-body);
}

/* 4職種に共通の勤務地（職種ごとの繰り返し表示はしない） */
.recruit__locations {
  margin-top: clamp(26px, 3.2vw, 36px);
}

.recruit__locations-en {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--recruit-accent);
}

.recruit__locations-places {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(12px, 1.8vw, 22px);
}

.recruit__locations-places span {
  position: relative;
  font-size: clamp(1.15rem, 0.8vw + 0.95rem, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--recruit-heading);
  white-space: nowrap;
}

/* 拠点名のあいだに細い縦罫を入れる */
.recruit__locations-places span + span::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(6px, 0.9vw, 11px));
  top: 50%;
  width: 1px;
  height: 1em;
  transform: translateY(-50%);
  background-color: var(--recruit-rule);
}

.recruit__locations-note {
  margin-top: 12px;
  font-size: 0.86rem;
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--recruit-body);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.recruit__external-note {
  margin-top: 16px;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: rgba(85, 72, 58, 0.75);
}

/* 下層ページ（recruit.html）用: 明るい背景の職種カード */
.recruit__jobs--light {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: clamp(32px, 5vw, 56px);
  background-color: var(--color-gray-200);
  border-top: none;
}

.recruit__jobs--light .job-card {
  background-color: var(--color-white);
  color: var(--color-dark);
  padding: clamp(24px, 3vw, 36px);
}

.job-card__title {
  font-size: 1.1rem;
  font-weight: 700;
}

.job-card__location {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--color-accent);
  letter-spacing: 0.05em;
}

.job-card__desc {
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--color-gray-700);
}

@media (max-width: 720px) {
  .recruit__jobs--light {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 900px) {
  .recruit-job {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(20px, 3vw, 48px);
    align-items: baseline;
  }

  .recruit-job__desc {
    margin-top: 0;
  }
}

/* ==========================================================================
   お知らせ（NEWS）
   派手にせず、サイト全体の呼吸を整える静かで編集的なセクション
   ========================================================================== */
.news {
  background-color: #f6f1e8;
  color: var(--color-dark);
  padding-block: clamp(72px, 9vw, 128px);
}

.news__inner {
  max-width: 980px;
}

.news__heading {
  margin-bottom: clamp(32px, 4vw, 48px);
}

.news__title {
  margin-top: 10px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.news__list {
  border-top: 1px solid rgba(27, 25, 23, 0.16);
}

.news-item {
  border-bottom: 1px solid rgba(27, 25, 23, 0.16);
}

.news-item__link {
  display: grid;
  grid-template-columns: 106px 150px minmax(0, 1fr) auto;
  gap: clamp(16px, 2.5vw, 32px);
  align-items: baseline;
  padding-block: 24px;
}

.news-item__date {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--color-gray-400);
  font-variant-numeric: tabular-nums;
}

.news-item__cat {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.news-item__title {
  font-size: 0.94rem;
  line-height: 1.8;
  transition: color var(--transition-base);
}

.news-item__arrow {
  color: var(--color-accent);
  font-size: 0.9rem;
  transition: transform 0.25s ease;
}

.news-item__link:hover .news-item__title {
  color: var(--color-accent);
}

.news-item__link:hover .news-item__arrow {
  transform: translateX(4px);
}

/* 記事ページ未整備のあいだの非リンク表示（クリックできる見た目にしない） */
.news-item__link--static {
  cursor: default;
}

.news-item__link--static:hover .news-item__title {
  color: inherit;
}

.news__footer {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.news__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: var(--color-dark);
  border-bottom: 1px solid var(--color-gray-400);
  padding-bottom: 4px;
  transition: color var(--transition-base);
}

.news__more span {
  color: var(--color-accent);
  transition: transform 0.25s ease;
}

.news__more:hover {
  color: var(--color-accent);
}

.news__more:hover span {
  transform: translateX(4px);
}

.sns-links {
  display: flex;
  gap: 18px;
  font-size: 0.8rem;
  color: var(--color-gray-700);
}

.sns-links a {
  border-bottom: 1px solid var(--color-gray-400);
  padding-bottom: 2px;
}

@media (max-width: 720px) {
  .news-item__link {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 6px;
    padding-block: 20px;
  }

  .news-item__title {
    grid-column: 1 / -1;
  }

  .news-item__arrow {
    display: none;
  }
}

/* ==========================================================================
   事業問い合わせ CTA（CONTACT）
   サイトの最後を締めくくる暗色のブランドCTA
   ========================================================================== */
.contact-cta {
  --contact-bg: #141110;
  --contact-text: #f2e7da;
  --contact-text-soft: rgba(242, 231, 218, 0.72);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--contact-bg);
  color: var(--contact-text);
  text-align: center;
}

.contact-cta__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(178, 80, 54, 0.16), transparent 70%);
  pointer-events: none;
}

.contact-cta__eyebrow {
  color: var(--color-accent-light);
}

.contact-cta__title {
  margin-top: clamp(14px, 1.8vw, 22px);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(1.6rem, 1.6vw + 1.1rem, 2.5rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.contact-cta__lead {
  margin-top: clamp(24px, 3vw, 36px);
  font-size: 0.95rem;
  line-height: 2;
  color: var(--contact-text-soft);
}

.contact-cta__note {
  margin-top: 14px;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: rgba(242, 231, 218, 0.5);
}

.contact-cta__note-link {
  color: rgba(242, 231, 218, 0.78);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.contact-cta__note-link:hover {
  color: var(--color-accent-light);
}

.contact-cta__inner {
  max-width: 680px;
  margin-inline: auto;
}

@media (max-width: 720px) {
  .contact-cta__lead-break {
    display: none;
  }

  .contact-cta__lead {
    text-align: left;
  }
}

.contact-cta__actions {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---- 仮お問い合わせフォーム（見た目のみ／将来 Contact Form 7 に置換） ---- */
.contact-form {
  margin-top: clamp(40px, 5vw, 56px);
  text-align: left;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: clamp(24px, 4vw, 44px);
}

.form-submit .btn {
  width: min(100%, 320px);
  justify-content: center;
}

.form-row {
  margin-bottom: 22px;
}

.form-row:last-of-type {
  margin-bottom: 0;
}

.form-row label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 8px;
  color: var(--color-gray-200);
}

.form-row .required {
  color: var(--color-accent-light);
  margin-left: 6px;
  font-size: 0.72rem;
}

.form-row input,
.form-row textarea,
.form-row select {
  width: 100%;
  padding: 12px 14px;
  background-color: rgba(255, 255, 255, 0.92);
  border: 1px solid transparent;
  color: var(--color-dark);
  font: inherit;
}

.form-row textarea {
  resize: vertical;
  min-height: 120px;
}

/* 入力エラー時の枠線（暗色セクション上の明色入力欄） */
.form-row input.is-invalid,
.form-row select.is-invalid,
.form-row textarea.is-invalid {
  border-color: var(--color-accent-light);
  background-color: #fdf3ee;
}

/* 各項目の下に出るエラー文言。内容が入ったときだけ表示する */
.form-row__error {
  margin-top: 8px;
  font-size: 0.8rem;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: #e8a68f;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.form-row__error:empty {
  display: none;
}

.form-submit {
  margin-top: 28px;
  text-align: center;
}

.contact-form__status {
  margin-top: 16px;
  font-size: 0.88rem;
  line-height: 1.8;
  letter-spacing: 0.03em;
  text-align: center;
  color: #e8a68f;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.contact-form__status:empty {
  display: none;
}

.contact-form__status[data-kind="error"] {
  color: #e8a68f;
}

.contact-form__status[data-kind="pending"] {
  color: rgba(242, 231, 218, 0.6);
}

/* ==========================================================================
   GENERAL CONTACT THANK YOU（contact-thanks.html）
   index.html の CONTACT セクションと同じダーク配色（#141110 / 生成り / テラコッタ）で統一。
   goat-thanks.html / recruit-thanks.html と同じ構成（eyebrow → title → rule → message → actions）
   ========================================================================== */
.ct-thanks {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(88px + clamp(56px, 9vw, 120px));
  padding-bottom: clamp(80px, 11vw, 150px);
  background-color: #141110;
  color: #f2e7da;
  text-align: center;
}

.ct-thanks__inner {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.ct-thanks__eyebrow {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-accent-light);
}

.ct-thanks__title {
  margin-top: clamp(22px, 3vw, 32px);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-weight: 600;
  font-size: clamp(1.65rem, 2.6vw + 1.05rem, 2.9rem);
  line-height: 1.55;
  letter-spacing: 0.05em;
  color: #f2e7da;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.ct-thanks__rule {
  width: 48px;
  height: 1px;
  margin: clamp(40px, 5.4vw, 64px) auto 0;
  background-color: var(--color-accent);
}

.ct-thanks__message {
  margin-top: clamp(38px, 5vw, 60px);
  margin-inline: auto;
  max-width: 34em;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(1rem, 0.7vw + 0.88rem, 1.22rem);
  line-height: 2.15;
  letter-spacing: 0.05em;
  color: rgba(242, 231, 218, 0.92);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.ct-thanks__actions {
  margin-top: clamp(48px, 6.4vw, 84px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* ==========================================================================
   仮ページ（詳細ページ）共通
   ========================================================================== */
.page-hero {
  padding-top: calc(var(--section-padding) + 88px);
}

.page-hero__body {
  max-width: 46em;
}

.page-hero__lead {
  margin-top: 28px;
  font-size: 1.05rem;
}

.page-back {
  margin-top: 40px;
}

.page-notice {
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: clamp(24px, 4vw, 40px);
  border-top: 1px solid var(--color-gray-200);
  color: var(--color-gray-400);
  font-size: 0.85rem;
}

/* ==========================================================================
   フッター
   ========================================================================== */
.site-footer {
  background-color: var(--color-black);
  color: var(--color-gray-200);
  padding-block: clamp(48px, 6vw, 80px) 28px;
}

.footer__grid {
  display: grid;
  /* SNS・Language列の公開前撤去にともない2列構成 */
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer__logo {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.footer__logo-en {
  display: block;
  margin-top: 6px;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--color-gray-400);
}

.footer__address {
  margin-top: 20px;
  font-size: 0.82rem;
  color: var(--color-gray-400);
  line-height: 1.9;
}

.footer__heading {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--color-gray-400);
  margin-bottom: 16px;
}

.footer__list li + li {
  margin-top: 10px;
}

.footer__list a {
  font-size: 0.88rem;
}

.footer__lang {
  display: inline-flex;
  gap: 10px;
  margin-top: 4px;
  font-size: 0.82rem;
}

.footer__lang a {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.footer__bottom {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--color-gray-400);
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 1024px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 105;
    background-color: rgba(10, 10, 10, 0.98);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base);
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: center;
    gap: 28px;
    font-size: 1.15rem;
  }

  .nav-toggle {
    display: flex;
  }

  .hero__bg img {
    object-position: 78% center;
  }

  .hero__content-inner {
    margin-inline-start: clamp(16px, 6vw, 28px);
    padding-inline: clamp(16px, 5vw, 28px);
    padding-block: 16px clamp(40px, 8vh, 64px);
  }

  .about__grid {
    grid-template-columns: 1fr;
  }

  .news-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- OUR BUSINESS MODEL: 冒頭を縦積みへ（1023px以下） ---------- */
@media (max-width: 1023px) {
  .business-model__intro {
    display: flex;
    flex-direction: column;
  }

  .business-model__intro-inner {
    order: 1;
    padding-block: clamp(48px, 8vw, 72px) clamp(32px, 5vw, 48px);
  }

  .business-model__text {
    max-width: none;
  }

  .business-model__photo {
    position: static;
    order: 2;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .business-model__photo-overlay-h {
    display: none;
  }

  .business-model__photo-overlay-v {
    background: linear-gradient(
      180deg,
      rgba(16, 12, 9, 0.5) 0%,
      rgba(16, 12, 9, 0) 16%,
      rgba(16, 12, 9, 0) 65%,
      rgba(16, 12, 9, 0.35) 82%,
      rgba(16, 12, 9, 0.92) 100%
    );
  }
}

/* ---------- OUR BUSINESS MODEL: タブレット（768〜1279px） ---------- */
@media (max-width: 1279px) and (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* ---------- OUR BUSINESS MODEL: スマホ（767px以下） ---------- */
@media (max-width: 767px) {
  .business-model__container {
    padding-inline: 20px;
  }

  .business-model__intro-inner {
    padding-inline: 20px;
  }

  .section--business .section-heading__title {
    font-size: clamp(1.5rem, 7vw, 1.9rem);
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .step-card__figure {
    aspect-ratio: 4 / 3;
  }

  .step-card__photo--truck {
    object-position: 55% 42%;
  }

  .step-card__photo--container {
    object-position: 50% center;
  }

  .step-card__photo--verify {
    object-position: 62% center;
  }

  .step-card__photo--future {
    object-position: 30% center;
  }
}

/* ---------- WHY THE WORLD: 見出しの改行固定（767px以下） ---------- */
@media (max-width: 767px) {
  .why-world__inner {
    padding-inline: 20px;
  }

  .why-world__title {
    font-size: clamp(1.9rem, 8.5vw, 2.3rem);
    letter-spacing: 0;
  }

  .why-world__title-line {
    display: block;
    line-height: 1.4;
  }

  .why-world__conclusion {
    margin-top: clamp(40px, 10vw, 56px);
  }
}
/* ==========================================================================
   GOAT PROJECT 詳細ページ（goat-project.html 専用）
   一皿の料理から、生涯をかける事業へ ── 長編ブランドストーリー

   世界観: 明るい牧場 / 生成り / 柔らかな牧草グリーン / 自然光 / 余白。
   暗色は「宣言」の章だけに限定し、ページの大部分は明るく保つ。
   クラスは全て "gs-"（GOAT STORY）で名前空間を切り、他ページへ影響しない。
   ========================================================================== */
.gs-page {
  /* --- 牧場のカラーシステム --- */
  --gs-mist:    #e7f0e1;  /* PASTURE MIST  */
  --gs-sage:    #d4e4cc;  /* SOFT SAGE     */
  --gs-pasture: #afc8a4;  /* PASTURE GREEN */
  --gs-moss:    #728e68;  /* MOSS          */
  --gs-forest:  #36543a;  /* FOREST        */
  --gs-deep:    #203727;  /* DEEP FOREST   */
  --gs-cream:   #f6f3e9;  /* CREAM         */
  --gs-text:    #293229;  /* TEXT          */
  --gs-soft:    #566257;  /* SOFT TEXT     */
  --gs-earth:   #c77a52;  /* EARTH / TERRACOTTA（差し色は最小限） */

  --gs-mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "MS PMincho", serif;
  --gs-latin: "Inter", "Helvetica Neue", Arial, sans-serif;

  --gs-shell: 1180px;
  --gs-pad: clamp(22px, 6vw, 72px);
  --gs-chapter: clamp(84px, 12vw, 168px);

  background-color: var(--gs-cream);
  color: var(--gs-text);
  /* 全幅写真を安全に扱うため、横方向のはみ出しはページ側で断つ */
  overflow-x: clip;
}

/* ---------- 明るいページに合わせたヘッダー（このページ限定） ---------- */
.gs-page .site-header {
  color: var(--gs-deep);
  background: linear-gradient(to bottom, rgba(231, 240, 225, 0.9), rgba(231, 240, 225, 0));
}

.gs-page .site-header.is-scrolled {
  background: rgba(246, 243, 233, 0.94);
  color: var(--gs-deep);
}

.gs-page .site-header__logo-en {
  color: var(--gs-moss);
}

.gs-page .site-nav__list a::after {
  background-color: var(--gs-earth);
}

.gs-page .nav-toggle span {
  background-color: var(--gs-deep);
}

@media (max-width: 720px) {
  .gs-page .site-nav {
    background-color: rgba(246, 243, 233, 0.985);
  }

  .gs-page .site-nav__list a {
    color: var(--gs-deep);
  }
}

/* ==========================================================================
   共通パーツ
   ========================================================================== */
.gs-shell {
  width: 100%;
  max-width: var(--gs-shell);
  margin-inline: auto;
  padding-inline: var(--gs-pad);
}

.gs-shell--narrow {
  max-width: 820px;
}

.gs-chapter {
  position: relative;
  padding-block: var(--gs-chapter);
}

/* 章マーク（英語ラベル + 罫） */
.gs-mark {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 18px);
  margin-bottom: clamp(26px, 3.4vw, 44px);
}

.gs-mark__label {
  font-family: var(--gs-latin);
  white-space: nowrap;
}

.gs-mark__label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gs-moss);
}

.gs-mark::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  min-width: 20px;
  background-color: currentColor;
  color: var(--gs-moss);
  opacity: 0.32;
}

.gs-mark--light .gs-mark__label,
.gs-mark--light::after {
  color: rgba(231, 240, 225, 0.72);
}

/* 見出し */
.gs-h2 {
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.42rem, 4.6vw, 2.95rem);
  line-height: 1.6;
  letter-spacing: 0.045em;
  color: var(--gs-forest);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.gs-h2 > span {
  display: block;
}

.gs-h3 {
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--gs-forest);
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 本文の折り返し
   対応ブラウザでは word-break: auto-phrase により文節単位で改行され、
   「深く考えたこ / とはなかった」のような語中改行が起きにくくなる。
   未対応ブラウザでは標準の禁則処理にフォールバックする。 */
.gs-phrase,
.gs-body,
.gs-plate__opening,
.gs-lede,
.gs-hero__sub,
.gs-declare__sub,
.gs-note,
.gs-milk-note__body,
.gs-final__unfinished-body,
.gs-final__last p,
.gs-ai__lede,
.gs-ai__turn {
  word-break: auto-phrase;
  /* 最終行に1〜2文字だけ残る「泣き別れ」を避ける */
  text-wrap: pretty;
}

.gs-body {
  font-family: var(--gs-mincho);
  font-size: clamp(1rem, 0.36vw + 0.94rem, 1.12rem);
  line-height: 2.15;
  letter-spacing: 0.035em;
  color: var(--gs-text);
  max-width: 34em;
}

.gs-body p {
  margin: 0;
}

.gs-body p + p {
  margin-top: 1.5em;
}

.gs-body--wide {
  max-width: 40em;
}

/* 単語を並べる列挙（肉。ミルク。乳製品。…） */
.gs-list {
  color: var(--gs-forest);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 2;
}

/* 章のなかの強い一文 */
.gs-strong {
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  line-height: 1.95;
  letter-spacing: 0.05em;
  color: var(--gs-forest);
  font-weight: 600;
}

.gs-body p + .gs-strong,
.gs-body .gs-strong + p {
  margin-top: 1.8em;
}

/* 導入のリード文 */
.gs-lede {
  font-family: var(--gs-mincho);
  font-size: clamp(1.12rem, 2.5vw, 1.55rem);
  line-height: 2;
  letter-spacing: 0.06em;
  color: var(--gs-forest);
}

.gs-note {
  font-family: var(--gs-mincho);
  font-size: 0.78rem;
  line-height: 1.95;
  letter-spacing: 0.02em;
  color: var(--gs-soft);
  max-width: 46em;
}

/* 写真 */
.gs-fig {
  position: relative;
  margin: 0;
}

.gs-fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}

/* ごく薄い写真縁（自然光に溶けるくらいの強さ） */
.gs-fig::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 3px;
  pointer-events: none;
}

.gs-fig--bleed img,
.gs-fig--bleed::after {
  border-radius: 0;
}

.gs-fig--soft img {
  box-shadow: 0 26px 60px -42px rgba(32, 55, 39, 0.75);
}

/* 柔らかな有機マスク ── ページ内で2枚だけに限定して使う */
.gs-fig--arch img {
  border-radius: 999px 999px 4px 4px;
}

.gs-fig--arch::after {
  border-radius: 999px 999px 4px 4px;
}

.gs-cap {
  margin-top: 14px;
  font-family: var(--gs-latin);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gs-moss);
}

.gs-cap--ja {
  font-family: var(--gs-mincho);
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: none;
}

/* 生成りの面に置く、ごく弱い紙の質感 */
.gs-grain {
  position: relative;
}

.gs-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(114, 142, 104, 0.055), transparent 42%),
    radial-gradient(circle at 82% 74%, rgba(199, 122, 82, 0.04), transparent 46%);
}

.gs-grain > * {
  position: relative;
}

/* 章内の余白ユーティリティ */
.gs-mt-md { margin-top: clamp(26px, 3.4vw, 44px); }
.gs-mt-lg { margin-top: clamp(38px, 5vw, 72px); }
.gs-mt-xl { margin-top: clamp(56px, 7vw, 96px); }

/* 写真の下に置くキャプション（写真の高さに影響させない） */
.gs-cap--under {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 12px;
}

/* ==========================================================================
   01. HERO ── 一皿の料理から、生涯をかける事業へ。
   ========================================================================== */
.gs-hero {
  position: relative;
  padding-top: calc(88px + clamp(52px, 9vw, 120px));
  padding-bottom: clamp(52px, 8vw, 110px);
  background: linear-gradient(to bottom, var(--gs-mist) 0%, #eef2e6 46%, var(--gs-cream) 100%);
}

.gs-hero__lede {
  max-width: 880px;
}

.gs-hero__eyebrow {
  font-family: var(--gs-latin);
  font-size: clamp(0.72rem, 1.1vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gs-moss);
}

.gs-hero__title {
  margin-top: clamp(22px, 3vw, 34px);
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.82rem, 6.6vw, 4.15rem);
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--gs-deep);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.gs-hero__title span {
  display: block;
}

.gs-hero__sub {
  margin-top: clamp(24px, 3.4vw, 40px);
  font-family: var(--gs-mincho);
  font-size: clamp(0.98rem, 1.6vw, 1.15rem);
  line-height: 2.1;
  letter-spacing: 0.06em;
  color: var(--gs-soft);
}

.gs-hero__stage {
  margin-top: clamp(44px, 6vw, 84px);
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 28px);
}

.gs-hero__land,
.gs-hero__port {
  height: clamp(300px, 40vw, 560px);
}

/* ==========================================================================
   02. ONE PLATE ── 一皿の料理から
   ========================================================================== */
.gs-plate {
  background: linear-gradient(to bottom, var(--gs-cream) 0%, var(--gs-cream) 62%, #f1f2e7 100%);
}

.gs-plate__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(34px, 6vw, 96px);
  align-items: start;
}

.gs-plate__head {
  position: sticky;
  top: 130px;
}

.gs-plate__opening {
  font-family: var(--gs-mincho);
  font-size: clamp(1.2rem, 2.7vw, 1.62rem);
  line-height: 2;
  letter-spacing: 0.06em;
  color: var(--gs-forest);
  margin-bottom: 1.6em;
}

/* 次の世界へ入っていく空気 ── 全幅の風景 */
.gs-airband {
  background: linear-gradient(to bottom, #f1f2e7 0%, #f1f2e7 34%, var(--gs-mist) 100%);
  padding-block: clamp(10px, 2vw, 26px) 0;
}

.gs-airband__fig {
  height: clamp(210px, 34vw, 460px);
}

/* ==========================================================================
   03. FROM EATING TO LIVING ── 一緒に暮らすことになった
   ========================================================================== */
.gs-live {
  background: linear-gradient(to bottom, var(--gs-mist) 0%, #eaf1e4 40%, #edf2e6 100%);
}

.gs-live__top {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: start;
}

.gs-live__bed {
  height: clamp(240px, 34vw, 460px);
}

.gs-live__pair {
  margin-top: clamp(26px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
  gap: clamp(14px, 2.6vw, 34px);
  align-items: start;
}

.gs-live__car {
  height: clamp(240px, 33vw, 440px);
  margin-top: clamp(28px, 5vw, 88px);
}

.gs-live__basket {
  height: clamp(210px, 29vw, 388px);
}

/* ==========================================================================
   04. MORE THAN A HOBBY ── それだけなら趣味でいい
   ========================================================================== */
.gs-hobby {
  background: linear-gradient(to bottom, #edf2e6 0%, var(--gs-sage) 30%, var(--gs-sage) 74%, #e6f0df 100%);
}

.gs-hobby__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.66fr);
  gap: clamp(34px, 5vw, 80px);
  align-items: start;
}

.gs-hobby__fig {
  height: clamp(320px, 40vw, 560px);
}

.gs-hobby__close {
  margin-top: clamp(46px, 6vw, 84px);
  padding-top: clamp(30px, 4vw, 48px);
  border-top: 1px solid rgba(54, 84, 58, 0.22);
  font-family: var(--gs-mincho);
  font-size: clamp(1.3rem, 3.4vw, 2.05rem);
  line-height: 1.85;
  letter-spacing: 0.06em;
  color: var(--gs-deep);
  font-weight: 600;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.gs-hobby__close span {
  display: block;
}

.gs-hobby__close span + span {
  margin-top: 0.75em;
}

/* ==========================================================================
   05. FIVE INDUSTRIES, ONE ANIMAL ── 一頭のヤギから
   ========================================================================== */
.gs-ind {
  background: linear-gradient(
    to bottom,
    #e6f0df 0%,
    var(--gs-cream) 12%,
    var(--gs-cream) 34%,
    #eef4e8 50%,
    var(--gs-cream) 66%,
    var(--gs-cream) 88%,
    #eaf1e4 100%
  );
}

.gs-ind__intro {
  padding-bottom: 0;
}

.gs-ind__enum {
  margin-top: clamp(22px, 3vw, 34px);
  font-family: var(--gs-mincho);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 2.05;
  letter-spacing: 0.09em;
  color: var(--gs-moss);
  font-weight: 600;
}

/* ---- 5つの事業 ---- */
.gs-cat {
  padding-block: clamp(52px, 7vw, 104px);
}

.gs-cat__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 78px);
  align-items: center;
}

/* 写真のない章（MEAT / NUTRITION）はタイポグラフィ主役 */
.gs-cat--type .gs-cat__grid {
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  align-items: start;
}

.gs-cat--flip .gs-cat__media {
  order: 2;
}

.gs-cat__en {
  margin-top: 0;
  font-family: var(--gs-latin);
  font-weight: 700;
  font-size: clamp(2.9rem, 10vw, 7.2rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  color: var(--gs-pasture);
  word-break: normal;
  overflow-wrap: normal;
}

.gs-cat__en--long {
  font-size: clamp(1.9rem, 7.4vw, 5.3rem);
}

.gs-cat__ja {
  margin-top: 0.5em;
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  letter-spacing: 0.14em;
  color: var(--gs-forest);
}

.gs-cat__head {
  margin-bottom: clamp(22px, 3vw, 34px);
}

.gs-cat--type .gs-cat__head {
  margin-bottom: 0;
}

/* MEAT章専用: 左カラムの余白を埋める料理写真。柔らかい角丸+ごく薄い縁+弱い影（.gs-fig--soft）。 */
.gs-cat__dish {
  margin-top: clamp(28px, 4vw, 46px);
  width: 90%;
  aspect-ratio: 4 / 5;
  border-radius: 30px 12px 30px 12px;
  overflow: hidden;
}

.gs-cat__dish img {
  object-position: 50% 42%;
}

.gs-cat__dish::after {
  border-radius: inherit;
}

.gs-cat__media--milk {
  height: clamp(330px, 42vw, 580px);
}

.gs-cat__media--fiber {
  /* カシミヤ製品（セーター・マフラー・ニット帽・手袋）がすべて見えるよう、
     元画像とほぼ同じ4:3で高さを決め、コラム幅いっぱいに表示する */
  height: auto;
  aspect-ratio: 4 / 3;
}

/* ---- MILK: 研究ノート3項目（サプリ広告に見せない） ---- */
.gs-milk-notes {
  margin-top: clamp(46px, 6vw, 84px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 46px);
}

.gs-milk-note {
  padding-top: 20px;
  border-top: 1px solid rgba(54, 84, 58, 0.26);
}

.gs-milk-note__title {
  margin-top: 0;
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--gs-forest);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.gs-milk-note__body {
  margin-top: 16px;
  font-family: var(--gs-mincho);
  font-size: 0.92rem;
  line-height: 2.05;
  letter-spacing: 0.03em;
  color: var(--gs-soft);
}

.gs-milk-note__body p {
  margin: 0;
}

.gs-milk-note__body p + p {
  margin-top: 1.3em;
}

.gs-milk-disclaimer {
  margin-top: clamp(26px, 3.4vw, 40px);
}

/* ---- COMPANION ----
   頭から体までの流れが見える構図を活かすため、フルブリードの超横長バナーではなく
   4:3のシェル幅いっぱいの写真として見せる。aspect-ratio を使うことで
   PC・スマホどちらの幅でも上下が破綻しない。 */
.gs-comp__face {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
}

.gs-comp__face img {
  border-radius: inherit;
}

.gs-comp__face::after {
  border-radius: inherit;
}

.gs-comp__grid {
  margin-top: clamp(38px, 5vw, 70px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}

.gs-comp__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr);
  gap: clamp(12px, 2vw, 24px);
  align-items: start;
}

.gs-comp__pair .gs-fig:first-child {
  height: clamp(210px, 26vw, 340px);
  margin-top: clamp(22px, 4vw, 60px);
}

.gs-comp__pair .gs-fig:last-child {
  height: clamp(180px, 22vw, 290px);
}

/* ---- 章末の宣言（暗色バンドは短く） ---- */
.gs-declare {
  padding-block: clamp(150px, 18vw, 250px);
  background: linear-gradient(
    to bottom,
    #eaf1e4 0%,
    var(--gs-forest) clamp(90px, 12vw, 160px),
    var(--gs-forest) calc(100% - clamp(90px, 12vw, 160px)),
    var(--gs-mist) 100%
  );
  text-align: center;
}

.gs-declare__lines {
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.45rem, 5vw, 3rem);
  line-height: 1.85;
  letter-spacing: 0.09em;
  color: #f2f6ec;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.gs-declare__lines span {
  display: block;
}

.gs-declare__sub {
  margin-top: clamp(28px, 4vw, 46px);
  font-family: var(--gs-mincho);
  font-size: clamp(0.98rem, 1.7vw, 1.16rem);
  line-height: 2.1;
  letter-spacing: 0.08em;
  color: rgba(231, 240, 225, 0.82);
}

/* ==========================================================================
   06. NOT MARKET-IN ── 市場があるから始めたのではない
   ========================================================================== */
.gs-market {
  background: linear-gradient(to bottom, var(--gs-mist) 0%, var(--gs-sage) 34%, var(--gs-sage) 66%, #e9f1e3 100%);
}

.gs-market__display {
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.46rem, 5.2vw, 3.2rem);
  line-height: 1.72;
  letter-spacing: 0.06em;
  color: var(--gs-deep);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.gs-market__display span {
  display: block;
}

.gs-market__display span:nth-child(-n + 2) {
  font-size: 0.8em;
  color: var(--gs-forest);
}

.gs-market__display em {
  font-style: normal;
}

.gs-market__display span:nth-child(3) {
  margin-top: 0.6em;
}

.gs-market__fig {
  margin-top: clamp(46px, 6vw, 88px);
  height: clamp(180px, 28vw, 400px);
}

.gs-market__body {
  margin-top: clamp(46px, 6vw, 88px);
  margin-inline: auto;
}

/* ==========================================================================
   07. WAGOAT ── 和山羊
   ========================================================================== */
.gs-wagoat {
  background: linear-gradient(to bottom, #e9f1e3 0%, var(--gs-cream) 26%, var(--gs-cream) 100%);
}

.gs-wagoat__valley {
  height: clamp(180px, 26vw, 380px);
  margin-bottom: clamp(48px, 7vw, 96px);
}

.gs-wagoat__head {
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.42rem, 4.4vw, 2.5rem);
  line-height: 1.65;
  letter-spacing: 0.05em;
  color: var(--gs-forest);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.gs-wagoat__head span {
  display: block;
}

/* 見出し → 大きな和牛写真 → 本文、の単一カラムの縦の流れ */
.gs-wagoat__lead {
  display: block;
}

/* 和牛を「すでに世界的ブランドとなった前例」として示す比較写真。
   和山羊の完成商品ではないため、控えめなカード状に留める。 */
.gs-wagoat__ref {
  /* 見出し直下の、和牛という「完成されたブランド価値」を象徴するメインビジュアル */
  width: 78%;
  margin-block: clamp(40px, 5vw, 64px) clamp(48px, 6vw, 72px);
  margin-inline: auto;
  aspect-ratio: 4 / 3;
}

.gs-wagoat__ref img {
  border-radius: 8px;
  object-position: 50% 46%;
  /* 影は最小限に留める */
  box-shadow: 0 16px 34px -28px rgba(32, 55, 39, 0.45);
}

.gs-wagoat__ref::after {
  border-radius: 8px;
}

.gs-wagoat__ref-cap {
  margin-top: 14px;
}

.gs-wagoat__ref-cap span {
  display: block;
}

.gs-wagoat__ref-cap span + span {
  margin-top: 4px;
}

.gs-wagoat__stage {
  position: relative;
  margin-top: clamp(56px, 8vw, 110px);
  min-height: clamp(360px, 52vw, 640px);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.gs-wagoat__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-wagoat__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--gs-cream) 0%, rgba(246, 243, 233, 0.58) 22%, rgba(246, 243, 233, 0.58) 78%, var(--gs-cream) 100%);
}

.gs-wagoat__display {
  position: relative;
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(4.4rem, 21vw, 14rem);
  line-height: 1.06;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  color: var(--gs-deep);
  text-align: center;
}

.gs-wagoat__display-en {
  display: block;
  margin-top: clamp(14px, 2vw, 26px);
  font-family: var(--gs-latin);
  font-size: clamp(0.66rem, 1.1vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--gs-moss);
}

.gs-wagoat__after {
  margin-top: clamp(52px, 7vw, 96px);
}

/* ==========================================================================
   07. AI & PRIMARY INDUSTRY ── AIの時代だからこそ、一次産業へ
   「AI・テクノロジー」（モダンなゴシック）と「生命・一次産業」（明朝）を
   書体そのもので対比させる。淡いグリーン〜生成りの世界観は維持しつつ、
   見出し／導入／転換／価値／結論／宣言の6段階を余白で明確に分ける。
   ========================================================================== */
.gs-ai {
  --ai-bg-top: #f4f5ea;
  --ai-bg-mid: #e9f1e3;
  --ai-bg-bottom: #d8e7d1;
  --ai-forest: #294a32;
  --ai-deep: #1f3d29;
  --ai-body: #465447;
  --ai-muted: #6c806d;
  --ai-accent: #c97752;
  --ai-finale-bg: #bfd2b7;

  padding-block: clamp(96px, 12vw, 160px) 0;
  background: linear-gradient(to bottom, var(--ai-bg-top) 0%, var(--ai-bg-mid) 55%, var(--ai-bg-bottom) 100%);
}

/* ---- 見出し：AI＝ゴシック／一次産業＝明朝、という書体の対比 ---- */
.gs-ai__heading {
  margin-top: clamp(26px, 3.4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 0.18em;
}

.gs-ai__heading-line {
  display: block;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.gs-ai__heading-line--ai {
  font-family: var(--font-base);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: clamp(1.875rem, 4vw, 4.25rem);
  line-height: 1.2;
  color: var(--ai-forest);
}

.gs-ai__accent {
  color: var(--ai-accent);
}

.gs-ai__heading-line--primary {
  font-family: var(--gs-mincho);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: clamp(3rem, 6vw, 6.25rem);
  line-height: 1.15;
  color: var(--ai-deep);
}

/* ---- 導入文 ---- */
.gs-ai__lede {
  margin-top: clamp(28px, 3.6vw, 44px);
  font-family: var(--gs-mincho);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--ai-body);
}

/* ---- AIによって変わる4つの仕事：独立したタイポグラフィ要素として ---- */
.gs-ai__jobs {
  margin-top: clamp(28px, 3.6vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.6vw, 34px) clamp(28px, 4vw, 56px);
  list-style: none;
}

.gs-ai__jobs li {
  font-family: var(--font-base);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.1vw, 1.85rem);
  letter-spacing: 0.12em;
  color: var(--ai-muted);
}

/* ---- 転換コピー：本文から分離し、上下に大きな余白を取る ---- */
.gs-ai__turn {
  margin-block: clamp(56px, 8vw, 96px);
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--ai-forest);
}

/* ---- 変わらない4つの価値：この章の中心 ---- */
.gs-ai__values {
  list-style: none;
}

.gs-ai__values-item {
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--ai-forest);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.gs-ai__values-item + .gs-ai__values-item {
  margin-top: 0.5em;
}

.gs-ai__values-item--short {
  font-size: clamp(1.75rem, 3.6vw, 2.25rem);
}

/* ---- 結論：本文より明確に強く。カード状にはせず、左の細い線で示す ---- */
.gs-ai__conclusion {
  margin-top: clamp(56px, 8vw, 96px);
  padding-left: clamp(18px, 2.4vw, 28px);
  border-left: 3px solid var(--ai-forest);
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.5625rem, 3.4vw, 2.5rem);
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--ai-deep);
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* ---- AIへの投資 × 一次産業への挑戦。二つを書体・色で対比する ---- */
.gs-ai__bet {
  margin-top: clamp(48px, 6vw, 72px);
}

.gs-ai__bet-lead {
  font-family: var(--gs-mincho);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--ai-body);
}

.gs-ai__bet-pair {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(14px, 2vw, 26px);
}

.gs-ai__bet-ai {
  font-family: var(--font-base);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  letter-spacing: 0.05em;
  color: var(--ai-accent);
}

.gs-ai__bet-x {
  font-family: var(--gs-latin);
  font-size: clamp(0.85rem, 1.3vw, 1.05rem);
  color: rgba(41, 74, 50, 0.32);
}

.gs-ai__bet-primary {
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  letter-spacing: 0.03em;
  color: var(--ai-forest);
}

/* ---- 章末の宣言バンド：この章でもっとも強いメッセージ ---- */
.gs-ai__finale-band {
  margin-top: clamp(72px, 9vw, 120px);
  padding-block: clamp(64px, 9vw, 120px);
  background: linear-gradient(to bottom, var(--ai-finale-bg) 0%, var(--ai-finale-bg) 82%, var(--gs-mist) 100%);
  text-align: center;
}

.gs-ai__finale {
  padding-inline: var(--gs-pad);
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(2.125rem, 6vw, 4.375rem);
  line-height: 1.35;
  letter-spacing: 0.05em;
  color: var(--ai-deep);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.gs-ai__finale span {
  display: block;
}

/* 「業」だけが孤立して折り返らないよう、狭い画面でだけ意図した位置で改行する */
.gs-ai__finale-break {
  display: inline;
}

@media (min-width: 640px) {
  .gs-ai__finale-break {
    display: none;
  }
}

.gs-ai__finale span + span {
  margin-top: 0.45em;
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(31, 61, 41, 0.78);
}

/* ==========================================================================
   09. NO LONGER A HOBBY ── 趣味では終わらせない
   ========================================================================== */
.gs-commit {
  background: linear-gradient(to bottom, var(--gs-mist) 0%, #eef3e7 42%, var(--gs-cream) 100%);
}

.gs-commit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 86px);
  align-items: start;
}

.gs-commit__statement {
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.28rem, 3.6vw, 2.15rem);
  line-height: 1.85;
  letter-spacing: 0.07em;
  color: var(--gs-deep);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.gs-commit__statement span {
  display: block;
}

.gs-commit__fig {
  margin-top: clamp(50px, 7vw, 96px);
  height: clamp(210px, 32vw, 470px);
}

.gs-commit__fig img {
  /* ヤギの横向き全身と足もとの小道が収まるよう、やや上寄りに配置する */
  object-position: 40% 46%;
}

/* ==========================================================================
   FINAL ── GOAT PROJECTの最後の宣言
   1: GOAT PROJECT / 2: 主見出し / 3: 未完成であることを語る本文 /
   4: 写真＋だから面白い / 5: 最終宣言、の5段階を余白で明確に分ける。
   ========================================================================== */
.gs-final {
  /* 終盤（だから面白い〜最後の本文）にかけては、指定の生成り〜牧草グリーンへ
     さらに一段軽く抜けるようにする。暗くしない。 */
  background: linear-gradient(to bottom, #edf3e8 0%, #dfebdd 45%, #e9f1e4 72%, #dce9d7 100%);
}

/* ---- 1. GOAT PROJECT：小さな章ラベル ---- */
.gs-final__eyebrow {
  font-family: var(--font-base);
  font-size: clamp(0.6875rem, 0.3vw + 0.62rem, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6e8a69;
}

/* ---- 2. 主見出し ---- */
.gs-final__head {
  margin-top: clamp(18px, 2.4vw, 28px);
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(2.375rem, 5vw, 5.375rem);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: #294a32;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.gs-final__head span {
  display: block;
}

.gs-final__head-strong {
  color: #1f3d29;
}

/* ---- 3. 未完成であることを語る本文：リズムを作る ---- */
.gs-final__unfinished {
  margin-top: clamp(56px, 7vw, 96px);
}

.gs-final__unfinished > * + * {
  margin-top: clamp(24px, 3vw, 36px);
}

.gs-final__unfinished-lead {
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.3125rem, 1.2vw + 1.05rem, 1.875rem);
  line-height: 1.6;
  color: #3b563f;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.gs-final__unfinished-body {
  max-width: 42em;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: clamp(1rem, 0.3vw + 0.95rem, 1.25rem);
  line-height: 2;
  color: #536255;
}

.gs-final__options {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2.4vw, 26px) clamp(24px, 3.4vw, 44px);
  list-style: none;
}

.gs-final__options li {
  font-family: var(--gs-mincho);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.2vw + 1.1rem, 1.75rem);
  line-height: 1.6;
  color: #426149;
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* ---- 「答えは、まだない。」：独立した宣言 ---- */
.gs-final__answer {
  margin-block: clamp(56px, 8vw, 96px);
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.875rem, 2.6vw + 1rem, 3rem);
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: #294a32;
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* ---- 4. 写真 ＋ だから面白い ---- */
.gs-final__fig {
  width: 78%;
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  border-radius: 28px 12px 28px 12px;
}

.gs-final__fig img {
  border-radius: inherit;
  object-position: 50% 40%;
}

.gs-final__fig::after {
  border-radius: inherit;
}

/* ---- 5. 最終宣言：写真のあとに続く、一つの縦長のまとまり ----
   PCでも2カラムに割らず、760〜900px幅の1カラムに集約する。
   カード化・装飾は行わず、文章の強さと余白だけで締める。 */
.gs-final__epilogue {
  margin-top: clamp(40px, 5vw, 64px);
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

.gs-final__display {
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.875rem, 1.8vw + 1.2rem, 2.875rem);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #294a32;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.gs-final__closing {
  margin-top: clamp(48px, 5vw, 64px);
}

.gs-final__closing-primary {
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(2.125rem, 2.3vw + 1.6rem, 3.75rem);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: #1f3d29;
  margin: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.gs-final__closing-secondary {
  margin-top: clamp(56px, 5.5vw, 72px);
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.5625rem, 1.4vw + 1.15rem, 2.375rem);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: #4a654d;
  margin: 0;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.gs-final__last {
  margin-top: clamp(48px, 5vw, 64px);
  max-width: 720px;
}

.gs-final__last p {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.5rem);
  line-height: 1.9;
  color: #3e5141;
  margin: 0;
}

.gs-final__sign {
  margin-top: clamp(60px, 8vw, 110px);
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid rgba(54, 84, 58, 0.22);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.gs-final__wordmark {
  font-family: var(--gs-latin);
  font-size: clamp(0.6rem, 2.4vw, 0.72rem);
  font-weight: 600;
  letter-spacing: clamp(0.16em, 0.8vw, 0.28em);
  text-transform: uppercase;
  color: var(--gs-moss);
}

.gs-page .gs-final__back {
  color: var(--gs-forest);
  border-color: rgba(54, 84, 58, 0.45);
  font-family: var(--gs-mincho);
  letter-spacing: 0.1em;
}

.gs-page .gs-final__back:hover {
  background-color: var(--gs-forest);
  border-color: var(--gs-forest);
  color: var(--gs-cream);
}

/* ==========================================================================
   レスポンシブ ── スマートフォンを最優先で組み直す
   ========================================================================== */
@media (max-width: 1023px) {
  .gs-plate__grid,
  .gs-live__top,
  .gs-hobby__grid,
  .gs-comp__grid,
  .gs-commit__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 5vw, 44px);
  }

  .gs-plate__head {
    position: static;
  }

  .gs-milk-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gs-hobby__fig {
    height: clamp(300px, 62vw, 460px);
  }

  .gs-body,
  .gs-body--wide {
    max-width: none;
  }
}

/* タブレット幅では縦位置の写真を全幅に伸ばさず、縦構図のまま右へ寄せる */
@media (min-width: 768px) and (max-width: 1023px) {
  .gs-hobby__fig,
  .gs-cat__media--milk {
    height: clamp(400px, 56vw, 560px);
    width: min(100%, 460px);
    margin-inline-start: auto;
  }

  .gs-final__fig {
    width: min(100%, 460px);
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .gs-page {
    --gs-chapter: clamp(64px, 15vw, 96px);
  }

  /* --- HERO --- */
  .gs-hero {
    padding-top: calc(72px + clamp(40px, 12vw, 64px));
  }

  .gs-hero__stage {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(14px, 4vw, 20px);
    /* 風景は画面いっぱいに、ポートレートは余白を残して非対称に置く */
    margin-inline: calc(var(--gs-pad) * -1);
  }

  .gs-hero__land {
    height: clamp(210px, 52vw, 300px);
  }

  .gs-hero__port {
    height: clamp(300px, 84vw, 430px);
    width: 76%;
    margin-inline-start: auto;
    margin-inline-end: var(--gs-pad);
  }

  .gs-hero__land img,
  .gs-hero__land::after {
    border-radius: 0;
  }

  /* --- 02 一皿 --- */
  .gs-airband__fig {
    height: clamp(190px, 46vw, 260px);
  }

  /* --- 03 一緒に暮らす --- */
  .gs-live__bed {
    height: clamp(220px, 56vw, 300px);
  }

  .gs-live__pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 12px;
  }

  .gs-live__car {
    height: clamp(190px, 48vw, 260px);
    margin-top: 26px;
  }

  .gs-live__basket {
    height: clamp(165px, 42vw, 230px);
  }

  /* --- 05 事業 --- */
  .gs-cat__grid,
  .gs-cat--type .gs-cat__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(22px, 6vw, 34px);
  }

  .gs-cat--flip .gs-cat__media {
    order: 0;
  }

  .gs-cat--type .gs-cat__head {
    margin-bottom: clamp(6px, 2vw, 12px);
  }

  .gs-cat__dish {
    width: 100%;
    margin-top: clamp(20px, 6vw, 28px);
  }

  .gs-cat__media--milk {
    height: clamp(300px, 78vw, 400px);
  }

  .gs-cat__media--fiber {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .gs-milk-notes {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .gs-comp__pair {
    gap: 12px;
  }

  .gs-comp__pair .gs-fig:first-child {
    height: clamp(190px, 48vw, 260px);
    margin-top: 22px;
  }

  .gs-comp__pair .gs-fig:last-child {
    height: clamp(160px, 40vw, 220px);
  }

  .gs-declare {
    padding-block: clamp(120px, 30vw, 170px);
  }

  /* --- 06 市場 --- */
  .gs-market__fig {
    height: clamp(160px, 40vw, 220px);
  }

  /* --- 07 和山羊 --- */
  .gs-wagoat__valley {
    height: clamp(160px, 40vw, 220px);
  }

  .gs-wagoat__ref {
    width: 100%;
  }

  .gs-wagoat__stage {
    min-height: clamp(300px, 76vw, 400px);
  }

  /* --- 07 AI --- */
  .gs-ai__jobs {
    flex-direction: column;
    gap: clamp(16px, 5vw, 22px);
  }

  /* --- 09 / FINAL --- */
  .gs-commit__fig {
    height: clamp(190px, 48vw, 260px);
  }

  .gs-final__options {
    flex-direction: column;
    gap: clamp(14px, 4vw, 20px);
  }

  .gs-final__fig {
    width: 100%;
  }

  .gs-final__sign {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ごく小さな画面: 巨大英語・巨大和文が画面外へ出ないよう最終的に抑える */
@media (max-width: 380px) {
  .gs-cat__en {
    font-size: 2.5rem;
  }

  .gs-cat__en--long {
    font-size: 1.72rem;
  }

  .gs-wagoat__display {
    font-size: 4rem;
  }

  .gs-final__head {
    font-size: 1.9rem;
  }
}

/* ==========================================================================
   RECRUIT 詳細ページ（recruit.html 専用）
   「世界を相手に働く。」── 求人票ではなく、採用ブランドページとして。
   山本商会本体のトーン（黒・チャコール・生成り・テラコッタ）で構成し、
   GOAT PROJECTの牧場的な配色は用いない。
   クラスは全て "rec-" で名前空間を切り、他ページへ影響しない。
   ========================================================================== */
.rec-page {
  --rec-black: #0d0c0b;
  --rec-dark: #1b1917;
  --rec-charcoal: #242220;
  --rec-cream: #f5f1ea;
  --rec-cream-deep: #ebe5db;
  --rec-text: #1b1917;
  --rec-text-soft: #524d48;
  --rec-text-mute: rgba(82, 77, 72, 0.66);
  --rec-accent: #8a3a24;
  --rec-accent-light: #b25036;
  --rec-rule: rgba(27, 25, 23, 0.15);
  --rec-rule-dark: rgba(245, 241, 234, 0.16);

  --rec-mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --rec-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --rec-shell: 1240px;
  --rec-pad: clamp(20px, 5vw, 68px);

  background-color: var(--rec-cream);
}

.rec-shell {
  width: 100%;
  max-width: var(--rec-shell);
  margin-inline: auto;
  padding-inline: var(--rec-pad);
}

/* 章ラベル（英字 + 罫） */
.rec-mark {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 20px);
  margin-bottom: clamp(22px, 3vw, 36px);
}

.rec-mark__label {
  font-family: var(--rec-en);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rec-accent);
  white-space: nowrap;
}

.rec-mark::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  min-width: 20px;
  background-color: var(--rec-rule);
}

.rec-mark--on-dark .rec-mark__label {
  color: var(--rec-accent-light);
}

.rec-mark--on-dark::after {
  background-color: var(--rec-rule-dark);
}

/* 日本語の折り返しを文節単位に寄せる */
.rec-phrase {
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* ==========================================================================
   01. HERO
   ========================================================================== */
.rec-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(94svh, 860px);
  color: var(--rec-cream);
  overflow: hidden;
  background-color: var(--rec-black);
}

.rec-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.rec-hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 44%;
  filter: saturate(0.92) contrast(1.05);
}

.rec-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(13, 12, 11, 0.42) 0%, rgba(13, 12, 11, 0.16) 34%, rgba(13, 12, 11, 0.66) 80%, rgba(13, 12, 11, 0.92) 100%),
    linear-gradient(to right, rgba(13, 12, 11, 0.62) 0%, rgba(13, 12, 11, 0.06) 52%);
}

.rec-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(130px, 17vw, 190px) clamp(60px, 8vw, 92px);
}

.rec-hero__inner {
  max-width: 880px;
  border-left: 3px solid var(--rec-accent-light);
  padding-left: clamp(18px, 2.4vw, 30px);
}

.rec-hero__eyebrow {
  font-family: var(--rec-en);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.8);
}

.rec-hero__title {
  margin-top: clamp(18px, 2.6vw, 30px);
  font-family: var(--rec-mincho);
  font-weight: 600;
  font-size: clamp(2.6rem, 3.8vw + 1.6rem, 5.8rem);
  line-height: 1.28;
  letter-spacing: 0.03em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.rec-hero__title span {
  display: block;
}

.rec-hero__caption {
  margin-top: clamp(26px, 3.6vw, 42px);
  font-family: var(--rec-en);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(245, 241, 234, 0.6);
}

/* ==========================================================================
   02. MESSAGE ── 仕事の流れ
   ========================================================================== */
.rec-message {
  background-color: var(--rec-cream);
  color: var(--rec-text);
  padding-block: clamp(84px, 10vw, 148px);
}

.rec-message__lead {
  font-family: var(--rec-mincho);
  font-weight: 600;
  font-size: clamp(1.65rem, 2.4vw + 1rem, 2.85rem);
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--rec-dark);
  max-width: 24em;
}

.rec-message__body {
  margin-top: clamp(32px, 4vw, 52px);
  max-width: 40em;
  font-family: var(--font-base);
  font-size: clamp(1rem, 0.3vw + 0.94rem, 1.1rem);
  line-height: 2.05;
  color: var(--rec-text-soft);
}

.rec-message__body p + p {
  margin-top: 1.4em;
}

/* ---- 仕事の流れ COLLECT → MANAGE ---- */
.rec-flow {
  margin-top: clamp(56px, 7vw, 92px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.rec-flow__step {
  position: relative;
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--rec-rule);
}

.rec-flow__step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 32px;
  height: 1px;
  background-color: var(--rec-accent-light);
}

.rec-flow__en {
  display: block;
  font-family: var(--rec-en);
  font-weight: 700;
  font-size: clamp(0.95rem, 0.6vw + 0.8rem, 1.2rem);
  letter-spacing: 0.04em;
  color: var(--rec-dark);
}

.rec-flow__ja {
  display: block;
  margin-top: clamp(10px, 1.2vw, 14px);
  font-family: var(--rec-mincho);
  font-size: clamp(0.88rem, 0.35vw + 0.8rem, 1rem);
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--rec-text-soft);
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* ---- 現場の写真 ---- */
.rec-message__photos {
  margin-top: clamp(56px, 7vw, 92px);
  display: grid;
  /* 幅は非対称、高さは揃える。編集的な2枚組にする */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
  height: clamp(240px, 27vw, 400px);
}

.rec-fig {
  position: relative;
  margin: 0;
  overflow: hidden;
  height: 100%;
}

.rec-fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rec-fig__caption {
  position: absolute;
  left: clamp(14px, 1.6vw, 20px);
  bottom: clamp(12px, 1.4vw, 16px);
  font-family: var(--rec-en);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f5f1ea;
  text-shadow: 0 2px 12px rgba(13, 12, 11, 0.7);
}

/* ==========================================================================
   03. WHO WE WANT
   ========================================================================== */
.rec-values {
  background-color: var(--rec-dark);
  color: var(--rec-cream);
  padding-block: clamp(84px, 10vw, 148px);
}

.rec-values__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 88px);
  align-items: start;
}

.rec-values__heading {
  font-family: var(--rec-mincho);
  font-weight: 600;
  font-size: clamp(2.1rem, 2.8vw + 1.3rem, 3.7rem);
  line-height: 1.38;
  letter-spacing: 0.03em;
  color: var(--rec-cream);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.rec-values__heading span {
  display: block;
}

.rec-values__lead {
  font-family: var(--font-base);
  font-size: clamp(1rem, 0.32vw + 0.93rem, 1.12rem);
  line-height: 2.05;
  color: rgba(245, 241, 234, 0.76);
  max-width: 30em;
}

.rec-values__list {
  margin-top: clamp(36px, 4.6vw, 60px);
  list-style: none;
}

.rec-values__list li {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 32px);
  align-items: baseline;
  padding-block: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--rec-rule-dark);
}

.rec-values__en {
  font-family: var(--rec-en);
  font-size: clamp(0.95rem, 0.5vw + 0.82rem, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--rec-accent-light);
}

.rec-values__ja {
  font-family: var(--rec-mincho);
  font-size: clamp(0.98rem, 0.4vw + 0.88rem, 1.15rem);
  letter-spacing: 0.05em;
  color: rgba(245, 241, 234, 0.9);
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ==========================================================================
   04. OPEN POSITIONS ── 横方向へ情報を整理した編集的な一覧
   ========================================================================== */
.rec-jobs {
  background-color: var(--rec-cream);
  color: var(--rec-text);
  padding-block: clamp(84px, 10vw, 148px);
}

.rec-jobs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.rec-jobs__heading {
  font-family: var(--rec-mincho);
  font-weight: 600;
  font-size: clamp(1.9rem, 2.4vw + 1.2rem, 3.1rem);
  letter-spacing: 0.04em;
  color: var(--rec-dark);
}

/* ---- 4職種に共通の勤務地（職種ごとの繰り返し表示はしない） ---- */
.rec-locations {
  margin-top: clamp(56px, 7vw, 92px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--rec-rule);
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: baseline;
}

.rec-locations__en {
  font-family: var(--rec-en);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rec-accent);
}

.rec-locations__places {
  margin-top: clamp(14px, 1.8vw, 20px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(14px, 2.4vw, 32px);
}

.rec-locations__places span {
  position: relative;
  font-family: var(--rec-mincho);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.9vw + 1rem, 2.4rem);
  letter-spacing: 0.12em;
  color: var(--rec-dark);
  white-space: nowrap;
}

/* 拠点名のあいだに細い縦罫を入れる */
.rec-locations__places span + span::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(7px, 1.2vw, 16px));
  top: 50%;
  width: 1px;
  height: 1em;
  transform: translateY(-50%);
  background-color: rgba(27, 25, 23, 0.24);
}

.rec-locations__note {
  font-family: var(--font-base);
  font-size: clamp(0.86rem, 0.3vw + 0.8rem, 0.95rem);
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--rec-text-soft);
  max-width: 34em;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.rec-jobs__list {
  margin-top: clamp(36px, 4.6vw, 60px);
  border-top: 1px solid var(--rec-rule);
}

.rec-job {
  display: grid;
  /* 左カラムは、最長の英字職種名「WAREHOUSE MANAGEMENT」が1行に収まる幅 */
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr) auto;
  align-items: start;
  column-gap: clamp(24px, 3.2vw, 52px);
  padding-block: clamp(26px, 2.9vw, 38px);
  border-bottom: 1px solid var(--rec-rule);
}

.rec-job__id {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.4vw, 18px);
}

.rec-job__num {
  font-family: var(--rec-en);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--rec-accent-light);
  flex: none;
}

.rec-job__en {
  display: block;
  font-family: var(--rec-en);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.8vw + 0.86rem, 1.35rem);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--rec-dark);
}

.rec-job__ja {
  display: block;
  margin-top: 6px;
  font-family: var(--rec-mincho);
  font-size: clamp(0.94rem, 0.32vw + 0.86rem, 1.06rem);
  letter-spacing: 0.06em;
  color: var(--rec-text-soft);
}

.rec-job__desc {
  font-family: var(--font-base);
  font-size: clamp(0.9rem, 0.24vw + 0.85rem, 0.98rem);
  line-height: 1.95;
  color: var(--rec-text-soft);
  max-width: 34em;
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* クリック対象は DETAIL のみ。説明文や職種名はリンクにしない。 */
.rec-page a.rec-job__detail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--rec-en);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--rec-accent);
  padding-top: 4px;
  transition: color 0.25s ease;
}

.rec-page a.rec-job__detail:hover {
  color: var(--rec-accent-light);
}

.rec-job__detail-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

.rec-page a.rec-job__detail:hover .rec-job__detail-arrow {
  transform: translateX(4px);
}

/* ---- 求人一覧の末尾 CTA ---- */
.rec-interest {
  margin-top: clamp(56px, 7vw, 92px);
  padding-top: clamp(36px, 4.4vw, 56px);
  border-top: 1px solid var(--rec-rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}

.rec-interest__en {
  font-family: var(--rec-en);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rec-accent);
}

.rec-interest__lead {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-family: var(--rec-mincho);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.3vw + 1rem, 1.9rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--rec-dark);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.rec-page .rec-interest__cta {
  background-color: var(--rec-accent);
  border-color: var(--rec-accent);
  color: #fff8f0;
  white-space: nowrap;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.rec-page .rec-interest__cta:hover {
  background-color: var(--rec-accent-light);
  border-color: var(--rec-accent-light);
}

/* ==========================================================================
   05. FUTURE
   ========================================================================== */
.rec-future {
  position: relative;
  background-color: var(--rec-black);
  color: var(--rec-cream);
  overflow: hidden;
}

.rec-future__fig {
  position: relative;
  margin: 0;
  height: clamp(220px, 30vw, 400px);
}

.rec-future__fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: saturate(0.9) brightness(0.92);
}

.rec-future__fig::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13, 12, 11, 0.1) 40%, rgba(13, 12, 11, 0.94) 100%);
}

.rec-future__body {
  padding-block: clamp(64px, 8vw, 110px);
}

.rec-future__grid {
  display: grid;
  /* 「あなたが入る会社は」が1行に収まる幅を見出し側へ確保する */
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(32px, 4.6vw, 80px);
  align-items: start;
}

.rec-future__heading {
  font-family: var(--rec-mincho);
  font-weight: 600;
  font-size: clamp(2.1rem, 2.8vw + 1.3rem, 3.7rem);
  line-height: 1.42;
  letter-spacing: 0.03em;
  color: var(--rec-cream);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.rec-future__heading span {
  display: block;
}

.rec-future__text {
  font-family: var(--font-base);
  font-size: clamp(1rem, 0.32vw + 0.93rem, 1.1rem);
  line-height: 2.05;
  color: rgba(245, 241, 234, 0.76);
}

.rec-future__tags {
  margin-top: clamp(30px, 3.6vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.6vw, 18px) clamp(22px, 2.6vw, 34px);
  list-style: none;
}

.rec-future__tags li {
  font-family: var(--rec-en);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(245, 241, 234, 0.88);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--rec-accent-light);
}

/* ==========================================================================
   06. FINAL CTA
   ========================================================================== */
.rec-final {
  background: linear-gradient(165deg, var(--rec-black) 0%, var(--rec-charcoal) 100%);
  color: var(--rec-cream);
  padding-block: clamp(100px, 13vw, 170px);
  text-align: center;
}

.rec-final__eyebrow {
  font-family: var(--rec-en);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.58);
}

.rec-final__title {
  margin-top: clamp(20px, 2.6vw, 32px);
  font-family: var(--rec-mincho);
  font-weight: 600;
  font-size: clamp(2.2rem, 3.2vw + 1.3rem, 4.1rem);
  letter-spacing: 0.04em;
  color: var(--rec-cream);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.rec-final__sub {
  margin-top: clamp(20px, 2.4vw, 30px);
  font-family: var(--rec-mincho);
  font-size: clamp(1rem, 0.5vw + 0.86rem, 1.2rem);
  line-height: 1.95;
  color: rgba(245, 241, 234, 0.72);
}

.rec-final__actions {
  margin-top: clamp(40px, 5vw, 62px);
  display: flex;
  justify-content: center;
}

.rec-page .rec-final__cta {
  background-color: var(--rec-accent);
  border-color: var(--rec-accent);
  color: #fff8f0;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.rec-page .rec-final__cta:hover {
  background-color: var(--rec-accent-light);
  border-color: var(--rec-accent-light);
}

/* ==========================================================================
   07. ENTRY ── 採用専用フォーム
   FINAL CTA（黒→チャコール）から続けてフッターの黒へ落とすため暗色で組む。
   中古タイヤ問い合わせ・ヤギ予約フォームとは完全に独立。
   ========================================================================== */
.rec-entry {
  background: linear-gradient(to bottom, var(--rec-charcoal) 0%, var(--rec-black) 100%);
  color: var(--rec-cream);
  padding-block: clamp(80px, 11vw, 140px);
}

.rec-entry__heading {
  font-family: var(--rec-mincho);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.4vw + 1rem, 2.8rem);
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--rec-cream);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.rec-entry__lede {
  margin-top: clamp(20px, 2.6vw, 30px);
  max-width: 44em;
  font-family: var(--rec-mincho);
  font-size: clamp(0.95rem, 0.4vw + 0.86rem, 1.08rem);
  line-height: 2.05;
  letter-spacing: 0.04em;
  color: rgba(245, 241, 234, 0.78);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.rec-form {
  margin-top: clamp(44px, 5.6vw, 72px);
  max-width: 900px;
}

/* 短い項目は2列、自由記入は全幅 */
.rec-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 40px);
}

.rec-form__row--wide {
  grid-column: 1 / -1;
}

.rec-form__row label {
  display: block;
  margin-bottom: 9px;
  font-family: var(--rec-mincho);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: rgba(245, 241, 234, 0.9);
}

.rec-page .rec-form__required {
  margin-left: 8px;
  font-family: var(--rec-en);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--rec-accent-light);
}

.rec-form__row input,
.rec-form__row select,
.rec-form__row textarea {
  width: 100%;
  padding: 13px 16px;
  background-color: rgba(245, 241, 234, 0.94);
  border: 1px solid transparent;
  border-radius: 2px;
  font: inherit;
  font-family: var(--rec-mincho);
  color: var(--rec-text);
}

.rec-form__row input:focus,
.rec-form__row select:focus,
.rec-form__row textarea:focus {
  outline: none;
  border-color: var(--rec-accent-light);
  background-color: #fffdf9;
}

.rec-form__row textarea {
  resize: vertical;
  min-height: 108px;
}

/* 入力エラー */
.rec-form__row input.is-invalid,
.rec-form__row select.is-invalid,
.rec-form__row textarea.is-invalid {
  border-color: var(--rec-accent-light);
  background-color: #fdf1ec;
}

.rec-form__error {
  margin-top: 8px;
  font-family: var(--rec-mincho);
  font-size: 0.84rem;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: #e8a68f;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.rec-form__error:empty {
  display: none;
}

.rec-form__submit {
  margin-top: clamp(34px, 4.4vw, 48px);
}

.rec-page .rec-form__btn {
  width: min(100%, 380px);
  justify-content: center;
  padding: 18px 36px;
  background-color: var(--rec-accent);
  border-color: var(--rec-accent);
  color: #fff8f0;
  font-family: var(--rec-mincho);
  font-size: 1rem;
  letter-spacing: 0.08em;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.rec-page .rec-form__btn:hover {
  background-color: var(--rec-accent-light);
  border-color: var(--rec-accent-light);
}

.rec-page .rec-form__btn[disabled] {
  opacity: 0.55;
  cursor: default;
}

.rec-form__status {
  margin-top: 16px;
  font-family: var(--rec-mincho);
  font-size: 0.9rem;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: #e8a68f;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.rec-form__status:empty {
  display: none;
}

.rec-form__status[data-kind="pending"] {
  color: rgba(245, 241, 234, 0.65);
}

/* ==========================================================================
   RECRUIT THANK YOU（recruit-thanks.html）
   ========================================================================== */
.rec-thanks {
  /* 内容が短くてもフッターまで暗色でつなぐ */
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(88px + clamp(56px, 9vw, 120px));
  padding-bottom: clamp(80px, 11vw, 150px);
  background: linear-gradient(165deg, var(--rec-black) 0%, var(--rec-charcoal) 100%);
  color: var(--rec-cream);
}

.rec-thanks__inner {
  width: 100%;
  max-width: 820px;
  text-align: center;
}

.rec-thanks__eyebrow {
  font-family: var(--rec-en);
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--rec-accent-light);
}

.rec-thanks__title {
  margin-top: clamp(22px, 3vw, 32px);
  font-family: var(--rec-mincho);
  font-weight: 600;
  font-size: clamp(1.65rem, 2.6vw + 1.05rem, 2.9rem);
  line-height: 1.55;
  letter-spacing: 0.05em;
  color: var(--rec-cream);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.rec-thanks__rule {
  width: 48px;
  height: 1px;
  margin: clamp(40px, 5.4vw, 64px) auto 0;
  background-color: var(--rec-accent);
}

.rec-thanks__message {
  margin-top: clamp(38px, 5vw, 60px);
  margin-inline: auto;
  max-width: 34em;
  font-family: var(--rec-mincho);
  font-size: clamp(1rem, 0.7vw + 0.88rem, 1.22rem);
  line-height: 2.15;
  letter-spacing: 0.05em;
  color: rgba(245, 241, 234, 0.92);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.rec-thanks__message--soft {
  margin-top: clamp(32px, 4vw, 44px);
  font-size: clamp(0.95rem, 0.4vw + 0.86rem, 1.08rem);
  color: rgba(245, 241, 234, 0.7);
}

.rec-thanks__actions {
  margin-top: clamp(48px, 6.4vw, 84px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.rec-page .rec-thanks__btn {
  background-color: var(--rec-accent);
  border-color: var(--rec-accent);
  color: #fff8f0;
  font-family: var(--rec-mincho);
  letter-spacing: 0.08em;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.rec-page .rec-thanks__btn:hover {
  background-color: var(--rec-accent-light);
  border-color: var(--rec-accent-light);
}

.rec-page .rec-thanks__ghost {
  background-color: transparent;
  color: rgba(245, 241, 234, 0.9);
  border-color: rgba(245, 241, 234, 0.42);
  font-family: var(--rec-mincho);
  letter-spacing: 0.08em;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.rec-page .rec-thanks__ghost:hover {
  background-color: rgba(245, 241, 234, 0.12);
  color: var(--rec-cream);
  border-color: var(--rec-cream);
}

/* ==========================================================================
   職種詳細ページ（recruit-warehouse / field / sales / office）
   RECRUIT本体と同じ黒・チャコール・生成り・テラコッタで組む。
   求人票ではなく採用ブランドページ。クラスは "rjd-"（Recruit Job Detail）。
   英字=Inter / 大見出し=明朝 / 本文=ゴシック
   ========================================================================== */
.rjd-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(84svh, 780px);
  color: var(--rec-cream);
  overflow: hidden;
  background-color: var(--rec-black);
}

.rjd-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.rjd-hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
}

.rjd-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(13, 12, 11, 0.5) 0%, rgba(13, 12, 11, 0.22) 34%, rgba(13, 12, 11, 0.7) 78%, rgba(13, 12, 11, 0.94) 100%),
    linear-gradient(to right, rgba(13, 12, 11, 0.6) 0%, rgba(13, 12, 11, 0.08) 55%);
}

.rjd-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(130px, 17vw, 190px) clamp(56px, 8vw, 88px);
}

.rjd-hero__inner {
  max-width: 900px;
  border-left: 3px solid var(--rec-accent-light);
  padding-left: clamp(18px, 2.4vw, 30px);
}

.rjd-hero__eyebrow {
  font-family: var(--rec-en);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.78);
}

.rjd-hero__en {
  margin-top: clamp(16px, 2.2vw, 24px);
  font-family: var(--rec-en);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw + 0.8rem, 3.1rem);
  letter-spacing: 0.05em;
  line-height: 1.12;
  color: var(--rec-cream);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.rjd-hero__ja {
  margin-top: clamp(10px, 1.4vw, 16px);
  font-family: var(--rec-mincho);
  font-weight: 600;
  font-size: clamp(1rem, 0.8vw + 0.85rem, 1.3rem);
  letter-spacing: 0.14em;
  color: rgba(245, 241, 234, 0.85);
}

.rjd-hero__copy {
  margin-top: clamp(30px, 4.4vw, 56px);
  font-family: var(--rec-mincho);
  font-weight: 600;
  font-size: clamp(1.85rem, 3.2vw + 1.1rem, 4.4rem);
  line-height: 1.4;
  letter-spacing: 0.04em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.rjd-hero__copy span {
  display: block;
}

/* 勤務地は4職種共通のため、簡潔に一行で示す */
.rjd-hero__location {
  margin-top: clamp(28px, 3.6vw, 44px);
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid rgba(245, 241, 234, 0.24);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(12px, 1.8vw, 22px);
  font-family: var(--rec-mincho);
  font-size: clamp(0.95rem, 0.4vw + 0.86rem, 1.1rem);
  letter-spacing: 0.1em;
  color: rgba(245, 241, 234, 0.92);
}

.rjd-hero__location-label {
  font-family: var(--rec-en);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rec-accent-light);
}

/* ---- 明るいセクション共通 ---- */
.rjd-sec {
  padding-block: clamp(76px, 10vw, 136px);
}

.rjd-sec--cream {
  background-color: var(--rec-cream);
}

.rjd-sec--deep {
  background-color: var(--rec-cream-deep);
}

.rjd-lead {
  font-family: var(--rec-mincho);
  font-weight: 600;
  font-size: clamp(1.45rem, 1.9vw + 0.95rem, 2.4rem);
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--rec-dark);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.rjd-lead span {
  display: block;
}

/* 本文は読みやすいゴシック */
.rjd-body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: clamp(0.92rem, 0.3vw + 0.86rem, 1.02rem);
  line-height: 2.1;
  letter-spacing: 0.04em;
  color: var(--rec-text-soft);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.rjd-body p + p {
  margin-top: 1.4em;
}

.rjd-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 4.6vw, 80px);
  align-items: start;
}

/* ---- WHAT YOU DO ── 仕事内容 ---- */
.rjd-duties__list {
  margin-top: clamp(40px, 5vw, 60px);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(36px, 5vw, 72px);
}

.rjd-duties__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  align-items: baseline;
  padding-block: clamp(15px, 1.9vw, 21px);
  border-bottom: 1px solid var(--rec-rule);
}

.rjd-duties__num {
  font-family: var(--rec-en);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--rec-accent);
}

.rjd-duties__text {
  font-family: var(--rec-mincho);
  font-weight: 600;
  font-size: clamp(0.98rem, 0.4vw + 0.9rem, 1.15rem);
  letter-spacing: 0.05em;
  color: var(--rec-dark);
}

/* 補足ノート（未経験・実績など） */
.rjd-note {
  margin-top: clamp(36px, 4.6vw, 56px);
  max-width: 640px;
  padding: clamp(20px, 2.6vw, 28px) clamp(22px, 3vw, 32px);
  border-left: 3px solid var(--rec-accent);
  background-color: rgba(138, 58, 36, 0.06);
}

.rjd-note p {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: 0.92rem;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--rec-text-soft);
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* ---- WHY IT MATTERS ── 暗色・写真つき ---- */
.rjd-why {
  background: linear-gradient(to bottom, var(--rec-dark) 0%, var(--rec-charcoal) 100%);
  color: var(--rec-cream);
  padding-bottom: clamp(76px, 10vw, 136px);
}

.rjd-why__fig {
  margin: 0;
  height: clamp(240px, 34vw, 460px);
  overflow: hidden;
}

.rjd-why__fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
}

.rjd-why__body {
  padding-top: clamp(56px, 7.4vw, 96px);
}

.rjd-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 4.6vw, 80px);
  align-items: start;
}

.rjd-why .rjd-lead {
  color: var(--rec-cream);
}

.rjd-why .rjd-body {
  color: rgba(245, 241, 234, 0.78);
}

/* ---- WHO FITS ── こんな人に向いています ---- */
.rjd-fit__list {
  margin-top: clamp(40px, 5vw, 60px);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(36px, 5vw, 72px);
}

.rjd-fit__item {
  position: relative;
  padding-block: clamp(15px, 1.9vw, 21px);
  padding-left: 26px;
  border-bottom: 1px solid var(--rec-rule);
  font-family: var(--rec-mincho);
  font-weight: 600;
  font-size: clamp(0.98rem, 0.4vw + 0.9rem, 1.15rem);
  letter-spacing: 0.05em;
  color: var(--rec-dark);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.rjd-fit__item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(50% - 1px);
  width: 12px;
  height: 1px;
  background-color: var(--rec-accent);
}

/* ---- CAREER ── 成長の道筋 ---- */
.rjd-career__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 4.6vw, 80px);
  align-items: start;
}

.rjd-career__steps {
  margin-top: clamp(48px, 6vw, 72px);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 36px);
}

.rjd-career__step {
  position: relative;
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--rec-rule);
}

.rjd-career__step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 32px;
  height: 1px;
  background-color: var(--rec-accent-light);
}

.rjd-career__step-en {
  display: block;
  font-family: var(--rec-en);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rec-accent);
}

.rjd-career__step-ja {
  display: block;
  margin-top: clamp(10px, 1.2vw, 14px);
  font-family: var(--rec-mincho);
  font-weight: 600;
  font-size: clamp(1.05rem, 0.6vw + 0.92rem, 1.3rem);
  letter-spacing: 0.05em;
  color: var(--rec-dark);
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* ---- ENTRY CTA ---- */
.rjd-cta {
  background: linear-gradient(165deg, var(--rec-black) 0%, var(--rec-charcoal) 100%);
  color: var(--rec-cream);
  padding-block: clamp(90px, 12vw, 150px);
  text-align: center;
}

.rjd-cta__eyebrow {
  font-family: var(--rec-en);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--rec-accent-light);
}

.rjd-cta__title {
  margin-top: clamp(18px, 2.4vw, 28px);
  font-family: var(--rec-mincho);
  font-weight: 600;
  font-size: clamp(1.55rem, 2.3vw + 1rem, 2.7rem);
  line-height: 1.55;
  letter-spacing: 0.05em;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.rjd-cta__sub {
  margin-top: clamp(16px, 2vw, 24px);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: clamp(0.9rem, 0.3vw + 0.84rem, 1rem);
  line-height: 2;
  letter-spacing: 0.04em;
  color: rgba(245, 241, 234, 0.75);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.rjd-cta__actions {
  margin-top: clamp(38px, 4.8vw, 56px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.rec-page .rjd-cta__btn {
  background-color: var(--rec-accent);
  border-color: var(--rec-accent);
  color: #fff8f0;
  font-family: var(--rec-mincho);
  letter-spacing: 0.08em;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.rec-page .rjd-cta__btn:hover {
  background-color: var(--rec-accent-light);
  border-color: var(--rec-accent-light);
}

.rec-page .rjd-cta__ghost {
  background-color: transparent;
  color: rgba(245, 241, 234, 0.9);
  border-color: rgba(245, 241, 234, 0.42);
  font-family: var(--rec-mincho);
  letter-spacing: 0.08em;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.rec-page .rjd-cta__ghost:hover {
  background-color: rgba(245, 241, 234, 0.12);
  color: var(--rec-cream);
  border-color: var(--rec-cream);
}

/* ---- 職種詳細レスポンシブ ---- */
@media (max-width: 1023px) {
  .rjd-about__grid,
  .rjd-why__grid,
  .rjd-career__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 4vw, 40px);
  }
}

@media (max-width: 767px) {
  .rjd-hero {
    min-height: min(78svh, 640px);
  }

  .rjd-duties__list,
  .rjd-fit__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .rjd-career__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(18px, 4.6vw, 26px);
  }

  .rjd-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .rjd-cta__actions .btn {
    justify-content: center;
  }
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 1023px) {
  .rec-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: clamp(26px, 3.4vw, 36px);
  }

  .rec-values__grid,
  .rec-future__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 44px);
  }

  /* タブレット幅でも英字職種名を1行に保ちつつ、説明文の幅を確保する */
  .rec-job {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr) auto;
    column-gap: clamp(20px, 2.4vw, 32px);
  }

  .rec-job__en {
    font-size: 1.16rem;
  }
}

@media (max-width: 767px) {
  .rec-hero {
    min-height: 88svh;
  }

  /* 採用フォームはスマホでは1列に積む */
  .rec-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rec-page .rec-form__btn {
    width: 100%;
  }

  .rec-thanks {
    padding-top: calc(72px + clamp(40px, 12vw, 72px));
  }

  .rec-thanks__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .rec-thanks__actions .btn {
    justify-content: center;
  }

  .rec-hero__bg img {
    object-position: 66% 44%;
  }

  .rec-hero__inner {
    max-width: none;
  }

  .rec-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .rec-flow__step {
    padding-block: clamp(16px, 4vw, 22px);
  }

  .rec-flow__step:last-child {
    border-bottom: 1px solid var(--rec-rule);
  }

  .rec-flow__ja {
    margin-top: 6px;
  }

  /* スマホでは縦積みにするため、band固定高さを解除して1枚ずつ4:3で見せる */
  .rec-message__photos {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .rec-fig {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .rec-values__list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  /* 求人: 英字 → 日本語 → 説明 → DETAIL の順に縦へ */
  .rec-job {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(14px, 3.4vw, 18px);
    padding-block: clamp(26px, 6vw, 34px);
  }

  .rec-jobs__head {
    display: block;
  }

  .rec-locations {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 5vw, 28px);
  }

  .rec-interest {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .rec-page .rec-interest__cta {
    justify-content: center;
    white-space: normal;
  }

  .rec-future__tags {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(12px, 3.4vw, 16px);
  }

  .rec-final__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 380px) {
  .rec-hero__title {
    font-size: 2.2rem;
  }

  /* 極小幅で「す。」だけが最終行に残らない大きさへ落とす */
  .rec-message__lead {
    font-size: 1.45rem;
  }

  .rec-values__heading,
  .rec-future__heading {
    font-size: 1.85rem;
  }

  .rec-final__title {
    font-size: 1.95rem;
  }
}

/* ==========================================================================
   GOAT FOR SALE（goat-sale.html 専用）
   GOAT PROJECTの派生ページ。body に .gs-page を付けて配色・書体・ヘッダーを
   本編と共有しつつ、販売案内として本編より実用的・可読性優先に組む。
   販売固有のクラスは "gsale-" で名前空間を切る。
   ========================================================================== */
.gsale-lede {
  font-family: var(--gs-mincho);
  font-size: clamp(1.08rem, 1.6vw + 0.75rem, 1.45rem);
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--gs-forest);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.gsale-note {
  font-family: var(--gs-mincho);
  font-size: 0.86rem;
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--gs-soft);
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* ==========================================================================
   01. HERO
   ========================================================================== */
.gsale-hero {
  padding-top: calc(88px + clamp(48px, 8vw, 104px));
  padding-bottom: clamp(56px, 8vw, 104px);
  background: linear-gradient(to bottom, var(--gs-mist) 0%, #eef2e6 52%, var(--gs-cream) 100%);
}

.gsale-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(34px, 5vw, 80px);
  align-items: center;
}

.gsale-hero__eyebrow {
  font-family: var(--gs-latin);
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gs-moss);
}

.gsale-hero__title {
  margin-top: clamp(20px, 2.8vw, 30px);
  font-family: var(--gs-mincho);
  font-weight: 600;
  /* 「ヤギを迎えたい方へ」が1行に収まる上限に抑える */
  font-size: clamp(1.95rem, 2.6vw + 1.2rem, 3.4rem);
  line-height: 1.42;
  letter-spacing: 0.04em;
  color: var(--gs-deep);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.gsale-hero__sub {
  margin-top: clamp(26px, 3.4vw, 40px);
}

.gsale-hero__fig {
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 6px 6px;
  overflow: hidden;
}

.gsale-hero__fig img {
  object-position: 50% 42%;
}

/* ==========================================================================
   02. ABOUT ── 迎え方は一つではない
   ========================================================================== */
.gsale-about {
  background: linear-gradient(to bottom, var(--gs-cream) 0%, var(--gs-cream) 66%, #eff3e8 100%);
}

.gsale-purpose {
  margin-top: clamp(44px, 5.5vw, 72px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 48px);
}

.gsale-purpose__item {
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid rgba(54, 84, 58, 0.24);
}

.gsale-purpose__en {
  display: block;
  font-family: var(--gs-latin);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gs-earth);
}

.gsale-purpose__ja {
  display: block;
  margin-top: clamp(12px, 1.4vw, 16px);
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.05rem, 0.8vw + 0.85rem, 1.28rem);
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--gs-forest);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.gsale-about__close {
  margin-top: clamp(44px, 5.5vw, 72px);
}

/* ==========================================================================
   03. AVAILABLE GOATS
   ========================================================================== */
.gsale-goats {
  background: linear-gradient(to bottom, #eff3e8 0%, var(--gs-mist) 40%, var(--gs-mist) 100%);
}

/* 販売個体が未登録のときの状態表示 */
.gsale-goats__status {
  margin-top: clamp(36px, 4.6vw, 60px);
  padding: clamp(28px, 3.6vw, 44px) clamp(24px, 3.4vw, 44px);
  border-left: 3px solid var(--gs-forest);
  background: linear-gradient(to right, rgba(246, 243, 233, 0.92), rgba(246, 243, 233, 0.4));
}

.gsale-goats__status-title {
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.1vw + 0.9rem, 1.5rem);
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--gs-deep);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.gsale-goats__status-body {
  margin-top: clamp(14px, 1.8vw, 20px);
  max-width: 40em;
}

/* 個体カード（登録後に表示する構造） */
.gsale-list {
  margin-top: clamp(36px, 4.6vw, 60px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 3vw, 40px);
}

.gsale-goat {
  background-color: var(--gs-cream);
  border: 1px solid rgba(54, 84, 58, 0.16);
  border-radius: 4px;
  overflow: hidden;
}

.gsale-goat__fig {
  aspect-ratio: 4 / 3;
  background-color: var(--gs-sage);
}

.gsale-goat__fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gsale-goat__body {
  padding: clamp(20px, 2.4vw, 28px);
}

.gsale-goat__status {
  display: inline-block;
  font-family: var(--gs-latin);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gs-earth);
}

.gsale-goat__name {
  margin-top: 10px;
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.15rem, 0.7vw + 1rem, 1.4rem);
  letter-spacing: 0.06em;
  color: var(--gs-forest);
}

.gsale-goat__specs {
  margin-top: clamp(16px, 2vw, 22px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px clamp(14px, 1.8vw, 20px);
  font-family: var(--gs-mincho);
  font-size: 0.9rem;
  line-height: 1.7;
}

.gsale-goat__specs dt {
  font-family: var(--gs-latin);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gs-moss);
  padding-top: 3px;
  white-space: nowrap;
}

.gsale-goat__specs dd {
  margin: 0;
  color: var(--gs-text);
  letter-spacing: 0.03em;
}

/* ==========================================================================
   04. RESERVATION
   ========================================================================== */
.gsale-reserve {
  background: linear-gradient(to bottom, var(--gs-mist) 0%, var(--gs-sage) 34%, var(--gs-sage) 70%, #e6f0df 100%);
}

.gsale-reserve__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 4.6vw, 80px);
  align-items: start;
}

.gsale-reserve__statement {
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.2vw + 1rem, 2.5rem);
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--gs-deep);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.gsale-reserve__statement span {
  display: block;
}

.gs-page a.gsale-reserve__cta {
  margin-top: clamp(28px, 3.6vw, 44px);
  padding: 18px 40px;
  background-color: #294a32;
  border-color: #294a32;
  color: #f7f4ea;
  font-family: var(--gs-mincho);
  font-size: 1rem;
  letter-spacing: 0.08em;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.gs-page a.gsale-reserve__cta:hover {
  background-color: #203a28;
  border-color: #203a28;
  color: #f7f4ea;
}

/* ==========================================================================
   05. BEFORE YOU WELCOME A GOAT
   ========================================================================== */
.gsale-prep {
  background: linear-gradient(to bottom, #e6f0df 0%, var(--gs-cream) 22%, var(--gs-cream) 100%);
}

.gsale-prep__fig {
  margin-top: clamp(40px, 5vw, 64px);
  height: clamp(200px, 26vw, 380px);
}

.gsale-prep__list {
  margin-top: clamp(44px, 5.5vw, 72px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3.2vw, 48px);
  list-style: none;
}

.gsale-prep__item {
  padding-top: clamp(18px, 2.2vw, 24px);
  border-top: 1px solid rgba(54, 84, 58, 0.22);
}

.gsale-prep__num {
  display: block;
  font-family: var(--gs-latin);
  font-size: clamp(0.78rem, 0.3vw + 0.72rem, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #7a9274;
}

.gsale-prep__title {
  margin-top: clamp(12px, 1.5vw, 18px);
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.6vw + 1.1rem, 2.1rem);
  letter-spacing: 0.06em;
  color: #294a32;
}

.gsale-prep__text {
  margin-top: clamp(10px, 1.2vw, 14px);
  font-family: var(--gs-mincho);
  font-size: 0.92rem;
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--gs-soft);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.gsale-prep__close {
  margin-top: clamp(44px, 5.5vw, 72px);
}

/* ==========================================================================
   06. FLOW
   ========================================================================== */
.gsale-flow-sec {
  background: linear-gradient(to bottom, var(--gs-cream) 0%, var(--gs-mist) 100%);
}

.gsale-flow {
  margin-top: clamp(44px, 5.6vw, 72px);
  list-style: none;
  position: relative;
  padding-left: clamp(26px, 3.4vw, 44px);
}

.gsale-flow::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 1px;
  background-color: rgba(41, 74, 50, 0.25);
}

.gsale-flow__step {
  position: relative;
  padding-block: clamp(22px, 2.8vw, 32px);
  border-bottom: 1px solid rgba(54, 84, 58, 0.16);
}

.gsale-flow__step:first-child {
  padding-top: 0;
}

.gsale-flow__step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.gsale-flow__step::before {
  content: "";
  position: absolute;
  top: clamp(28px, 3.2vw, 38px);
  left: calc(-1 * clamp(26px, 3.4vw, 44px));
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #294a32;
}

.gsale-flow__step:first-child::before {
  top: 6px;
}

.gsale-flow__num {
  display: block;
  font-family: var(--gs-latin);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #294a32;
}

.gsale-flow__title {
  margin-top: clamp(10px, 1.2vw, 14px);
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.15rem, 0.7vw + 1rem, 1.4rem);
  letter-spacing: 0.06em;
  color: #294a32;
}

.gsale-flow__text {
  margin-top: clamp(8px, 1vw, 12px);
  max-width: 44em;
  font-family: var(--gs-mincho);
  font-size: 0.92rem;
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--gs-soft);
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* ==========================================================================
   07. RESERVATION FORM ── ヤギの予約・ご相談
   入力検証まで実装済み。送信処理は公開環境で外部フォームサービス／
   Contact Form 7 に接続する（詳細は js/main.js を参照）
   ========================================================================== */
.gsale-form-sec {
  background: linear-gradient(to bottom, var(--gs-mist) 0%, var(--gs-cream) 22%, var(--gs-cream) 100%);
}

.gsale-form__lede {
  margin-top: clamp(22px, 2.8vw, 32px);
  max-width: 42em;
}

.gsale-form {
  margin-top: clamp(40px, 5vw, 64px);
  max-width: 720px;
}

.gsale-form__row {
  margin-bottom: 24px;
}

.gsale-form__row:last-of-type {
  margin-bottom: 0;
}

.gsale-form__row label {
  display: block;
  margin-bottom: 9px;
  font-family: var(--gs-mincho);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: #294a32;
}

.gs-page .gsale-form__row .required,
.gs-page .gsale-form__checkbox .required {
  margin-left: 6px;
  font-family: var(--gs-latin);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: #c77a52;
}

.gsale-form__row input,
.gsale-form__row select,
.gsale-form__row textarea {
  width: 100%;
  padding: 13px 16px;
  background-color: #fff;
  border: 1px solid rgba(41, 74, 50, 0.28);
  border-radius: 2px;
  font: inherit;
  font-family: var(--gs-mincho);
  color: var(--gs-text);
}

.gsale-form__row input:focus,
.gsale-form__row select:focus,
.gsale-form__row textarea:focus {
  outline: none;
  border-color: #294a32;
}

/* 入力エラー時の枠線 */
.gsale-form__row input.is-invalid,
.gsale-form__row select.is-invalid,
.gsale-form__row textarea.is-invalid {
  border-color: #a8492a;
  background-color: #fffaf7;
}

/* 各項目の下に出るエラー文言。内容が入ったときだけ表示する */
.gsale-form__error {
  margin-top: 8px;
  font-family: var(--gs-mincho);
  font-size: 0.84rem;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: #a8492a;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.gsale-form__error:empty {
  display: none;
}

.gsale-form__row textarea {
  resize: vertical;
  min-height: 110px;
}

.gsale-form__confirm {
  margin-top: 32px;
  padding: clamp(20px, 2.6vw, 28px);
  background-color: rgba(213, 227, 207, 0.5);
  border: 1px solid rgba(41, 74, 50, 0.25);
  border-radius: 2px;
}

.gsale-form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.gsale-form__checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: #294a32;
}

/* 未チェックのまま送信されたときは確認ボックス全体を強調する */
.gsale-form__confirm.is-invalid {
  border-color: #a8492a;
  background-color: #fdf1eb;
}

.gsale-form__checkbox span {
  font-family: var(--gs-mincho);
  font-size: 0.96rem;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: #294a32;
}

.gsale-form__confirm-note {
  margin-top: 12px;
  padding-left: 32px;
  font-family: var(--gs-mincho);
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--gs-soft);
}

.gsale-form__submit {
  margin-top: 36px;
}

.gs-page .gsale-form__btn {
  width: 100%;
  justify-content: center;
  padding: 18px 36px;
  background-color: #294a32;
  border-color: #294a32;
  color: #f7f4ea;
  font-family: var(--gs-mincho);
  font-size: 1rem;
  letter-spacing: 0.08em;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.gs-page .gsale-form__btn:hover {
  background-color: #203a28;
  border-color: #203a28;
}

.gs-page .gsale-form__btn[disabled] {
  opacity: 0.55;
  cursor: default;
}

/* 送信結果の表示欄。内容が入ったときだけ出す（初期表示では存在しない） */
.gsale-form__status {
  margin-top: 18px;
  font-family: var(--gs-mincho);
  font-size: 0.92rem;
  line-height: 1.9;
  letter-spacing: 0.03em;
  text-align: center;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.gsale-form__status:empty {
  display: none;
}

.gsale-form__status[data-kind="error"] {
  color: #a8492a;
}

.gsale-form__status[data-kind="pending"] {
  color: var(--gs-soft);
}

/* ==========================================================================
   08. CTA
   ========================================================================== */
.gsale-cta {
  padding-block: clamp(90px, 12vw, 150px);
  background: linear-gradient(to bottom, var(--gs-cream) 0%, #eef2e6 55%, var(--gs-mist) 100%);
  text-align: center;
}

.gsale-cta__eyebrow {
  font-family: var(--gs-latin);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: #7a9274;
}

.gsale-cta__title {
  margin-top: clamp(18px, 2.4vw, 28px);
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.4vw + 1rem, 2.9rem);
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #294a32;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.gsale-cta__sub {
  margin-top: clamp(18px, 2.2vw, 26px);
  font-family: var(--gs-mincho);
  font-size: clamp(0.95rem, 0.4vw + 0.86rem, 1.1rem);
  line-height: 2;
  color: var(--gs-soft);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.gsale-cta__actions {
  margin-top: clamp(36px, 4.6vw, 58px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.gs-page .gsale-cta__btn {
  background-color: #294a32;
  border-color: #294a32;
  color: #f7f4ea;
  font-family: var(--gs-mincho);
  letter-spacing: 0.08em;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.gs-page .gsale-cta__btn:hover {
  background-color: #203a28;
  border-color: #203a28;
  color: #f7f4ea;
}

.gs-page .gsale-cta__ghost {
  background-color: transparent;
  color: #294a32;
  border-color: #294a32;
  font-family: var(--gs-mincho);
  letter-spacing: 0.08em;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.gs-page .gsale-cta__ghost:hover {
  background-color: rgba(41, 74, 50, 0.08);
  color: #203a28;
  border-color: #203a28;
}

/* ==========================================================================
   GOAT PROJECT本編に置く、GOAT FOR SALE（派生ページ）への案内
   ========================================================================== */
.gs-sale-link {
  margin-top: clamp(56px, 7vw, 92px);
  padding: clamp(30px, 4vw, 52px) clamp(26px, 4vw, 56px);
  background-color: #d5e3cf;
  border-radius: 4px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(22px, 3vw, 40px);
  align-items: center;
}

.gs-sale-link__en {
  font-family: var(--gs-latin);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #294a32;
  opacity: 0.72;
}

.gs-sale-link__ja {
  margin-top: 10px;
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.15rem, 0.8vw + 0.98rem, 1.4rem);
  letter-spacing: 0.06em;
  color: #294a32;
}

.gs-sale-link__note {
  margin-top: 10px;
  font-family: var(--gs-mincho);
  font-size: 0.9rem;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: #294a32;
  opacity: 0.82;
}

.gs-page a.gs-sale-link__cta {
  flex-shrink: 0;
  white-space: nowrap;
  background-color: #294a32;
  border-color: #294a32;
  color: #f7f4ea;
  font-family: var(--gs-mincho);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.gs-page a.gs-sale-link__cta:hover {
  background-color: #203a28;
  border-color: #203a28;
  color: #f7f4ea;
}

.gs-sale-link__arrow {
  transition: transform 0.25s ease;
}

.gs-page a.gs-sale-link__cta:hover .gs-sale-link__arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   THANK YOU（goat-thanks.html）
   ヤギ予約フォームの送信完了ページ。事務的にせず、牧場ブランドのまま静かに締める
   ========================================================================== */
.gthx {
  padding-top: calc(88px + clamp(56px, 9vw, 120px));
  padding-bottom: clamp(80px, 11vw, 150px);
  background: linear-gradient(to bottom, var(--gs-mist) 0%, #eef2e6 46%, var(--gs-cream) 100%);
}

.gthx__inner {
  max-width: 880px;
  text-align: center;
}

.gthx__eyebrow {
  font-family: var(--gs-latin);
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #7a9274;
}

.gthx__title {
  margin-top: clamp(20px, 2.8vw, 30px);
  font-family: var(--gs-mincho);
  font-weight: 600;
  font-size: clamp(1.75rem, 2.8vw + 1.1rem, 3.1rem);
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #294a32;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.gthx__fig {
  width: clamp(170px, 30vw, 280px);
  margin: clamp(40px, 5.4vw, 68px) auto 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 30px 64px -44px rgba(32, 55, 39, 0.8);
}

.gthx__fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gthx__message {
  margin-top: clamp(40px, 5.4vw, 68px);
  margin-inline: auto;
  max-width: 34em;
  font-family: var(--gs-mincho);
  font-size: clamp(1.05rem, 0.9vw + 0.88rem, 1.32rem);
  line-height: 2.15;
  letter-spacing: 0.05em;
  color: #294a32;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.gthx__message p + p {
  margin-top: 1.5em;
}

.gthx__message--soft {
  margin-top: clamp(32px, 4vw, 48px);
  font-size: clamp(0.98rem, 0.6vw + 0.86rem, 1.15rem);
  color: var(--gs-soft);
}

.gthx__rule {
  width: 48px;
  height: 1px;
  margin: clamp(40px, 5.4vw, 64px) auto 0;
  background-color: rgba(41, 74, 50, 0.32);
}

.gthx__actions {
  margin-top: clamp(48px, 6.4vw, 84px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.gs-page .gthx__btn {
  background-color: #294a32;
  border-color: #294a32;
  color: #f7f4ea;
  font-family: var(--gs-mincho);
  letter-spacing: 0.08em;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.gs-page .gthx__btn:hover {
  background-color: #203a28;
  border-color: #203a28;
  color: #f7f4ea;
}

.gs-page .gthx__ghost {
  background-color: transparent;
  color: #294a32;
  border-color: #294a32;
  font-family: var(--gs-mincho);
  letter-spacing: 0.08em;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.gs-page .gthx__ghost:hover {
  background-color: rgba(41, 74, 50, 0.08);
  color: #203a28;
  border-color: #203a28;
}

/* 3つ目の導線は一段静かに。ただしボタンとして輪郭は保つ */
.gs-page .gthx__ghost--quiet {
  color: #5c7358;
  border-color: rgba(41, 74, 50, 0.42);
}

.gs-page .gthx__ghost--quiet:hover {
  color: #294a32;
  border-color: #294a32;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 1023px) {
  .gsale-hero__grid,
  .gsale-reserve__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(30px, 5vw, 48px);
  }

  .gsale-hero__fig {
    width: min(100%, 420px);
    margin-inline: auto;
  }

  .gsale-prep__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .gsale-hero {
    padding-top: calc(72px + clamp(36px, 11vw, 60px));
  }

  /* 極小幅でも「ヤギを迎えたい方へ」を1行に保つ */
  .gsale-hero__title {
    font-size: clamp(1.6rem, 8.2vw, 1.95rem);
  }

  .gsale-hero__fig {
    width: 100%;
    border-radius: 999px 999px 4px 4px;
  }

  .gsale-purpose,
  .gsale-prep__list {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 5vw, 28px);
  }

  .gsale-prep__fig {
    height: clamp(180px, 46vw, 240px);
  }

  .gsale-flow {
    padding-left: 20px;
  }

  .gs-sale-link {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .gs-page a.gs-sale-link__cta {
    width: 100%;
    justify-content: center;
  }

  .gsale-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .gsale-cta__actions .btn {
    justify-content: center;
  }

  .gthx {
    padding-top: calc(72px + clamp(40px, 12vw, 72px));
  }

  .gthx__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .gthx__actions .btn {
    justify-content: center;
  }
}

/* ==========================================================================
   WHY THE WORLD 詳細ページ（why-the-world.html 専用）
   トップページ WHY THE WORLD の夕暮れ（ダスクブラウン×ドバイ夕景）を継承した
   ブランドマニフェストページ。クラスは全て "ww-" で名前空間を切り、
   他ページへ影響しない。
   英字=Inter / 哲学コピー=明朝 / 本文=ゴシック
   ========================================================================== */
.ww-page {
  --ww-dusk: #3a2b2c;      /* DUSK BROWN  */
  --ww-deep: #2c2022;      /* DEEP DUSK   */
  --ww-warm: #433133;      /* WARM DUSK   */
  --ww-cream: #fff3e9;     /* WARM CREAM  */
  --ww-terra: #e76f51;     /* TERRACOTTA  */
  --ww-sunset: #ff936a;    /* SUNSET      */
  --ww-soft: rgba(255, 243, 233, 0.8);
  --ww-mute: rgba(255, 243, 233, 0.56);
  --ww-rule: rgba(255, 243, 233, 0.18);

  --ww-mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --ww-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --ww-gothic: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;

  --ww-shell: 1200px;
  --ww-pad: clamp(22px, 5vw, 64px);

  background-color: var(--ww-dusk);
  color: var(--ww-cream);
}

.ww-shell {
  width: 100%;
  max-width: var(--ww-shell);
  margin-inline: auto;
  padding-inline: var(--ww-pad);
}

/* ---- 共通タイポグラフィ（4段階） ---- */

/* LEVEL 4: 英字ラベル */
.ww-label {
  font-family: var(--ww-en);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ww-sunset);
}

.ww-label--on-light {
  color: #b8492f;
}

/* LEVEL 2: 各章の思想コピー */
.ww-copy {
  font-family: var(--ww-mincho);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.9vw + 1rem, 2.5rem);
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: var(--ww-cream);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.ww-copy span {
  display: block;
}

.ww-copy--large {
  font-size: clamp(1.6rem, 2.4vw + 1rem, 3rem);
}

.ww-copy--accent span:last-child {
  color: var(--ww-sunset);
}

.ww-copy--on-light {
  color: var(--ww-dusk);
}

.ww-copy__strong {
  margin-top: clamp(26px, 3.4vw, 44px);
  color: var(--ww-sunset);
}

/* LEVEL 3: 本文（ゴシック） */
.ww-body {
  font-family: var(--ww-gothic);
  font-size: clamp(0.92rem, 0.3vw + 0.86rem, 1.02rem);
  line-height: 2.15;
  letter-spacing: 0.05em;
  color: var(--ww-soft);
  max-width: 36em;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.ww-body p + p {
  margin-top: 1.5em;
}

.ww-body--on-light {
  color: #5c4a45;
}

/* ---- スクロールに合わせた静かなフェード（JS有効時のみ） ---- */
@media (prefers-reduced-motion: no-preference) {
  .ww-js .ww-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 1s ease, transform 1s ease;
  }

  .ww-js .ww-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   01. HERO
   ========================================================================== */
.ww-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(96svh, 900px);
  overflow: hidden;
  background-color: var(--ww-deep);
}

.ww-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ww-hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}

.ww-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(44, 32, 34, 0.5) 0%, rgba(44, 32, 34, 0.06) 30%, rgba(44, 32, 34, 0.1) 58%, rgba(44, 32, 34, 0.86) 92%, #2c2022 100%),
    linear-gradient(to right, rgba(44, 32, 34, 0.42) 0%, rgba(44, 32, 34, 0) 55%);
}

.ww-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(120px, 16vw, 180px) clamp(64px, 9vw, 110px);
}

.ww-hero__eyebrow {
  font-family: var(--ww-en);
  font-size: clamp(0.72rem, 1vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--ww-sunset);
  text-shadow: 0 1px 18px rgba(44, 32, 34, 0.6);
}

.ww-hero__title {
  margin-top: clamp(18px, 2.6vw, 30px);
  font-family: var(--ww-mincho);
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw + 1.2rem, 4.6rem);
  line-height: 1.42;
  letter-spacing: 0.05em;
  color: #fff7ef;
  text-shadow: 0 2px 30px rgba(44, 32, 34, 0.55);
  word-break: keep-all;
}

.ww-hero__title span {
  display: block;
}

.ww-hero__place {
  position: absolute;
  z-index: 2;
  right: clamp(20px, 3vw, 40px);
  bottom: clamp(18px, 2.6vw, 30px);
  font-family: var(--ww-en);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: rgba(255, 243, 233, 0.45);
}

/* ==========================================================================
   02. THE THESIS ── 最重要宣言
   ========================================================================== */
.ww-thesis {
  background: linear-gradient(to bottom, #2c2022 0%, var(--ww-dusk) 34%, var(--ww-warm) 100%);
  padding-block: clamp(110px, 15vw, 210px);
  text-align: center;
}

/* LEVEL 1: ページを代表する宣言 */
.ww-thesis__copy {
  margin-top: clamp(36px, 5vw, 64px);
  font-family: var(--ww-mincho);
  font-weight: 600;
  font-size: clamp(1.55rem, 2.6vw + 0.9rem, 3.4rem);
  line-height: 2;
  letter-spacing: 0.08em;
  color: #fff7ef;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.ww-thesis__copy span {
  display: block;
}

.ww-thesis__rule {
  width: 1px;
  height: clamp(48px, 7vw, 88px);
  margin: clamp(48px, 7vw, 88px) auto 0;
  background: linear-gradient(to bottom, var(--ww-sunset), rgba(255, 147, 106, 0));
}

/* ==========================================================================
   03. THE AWAKENING
   ========================================================================== */
.ww-awakening {
  background: linear-gradient(to bottom, var(--ww-warm) 0%, var(--ww-dusk) 55%, #352728 100%);
  padding-block: clamp(90px, 12vw, 170px);
}

.ww-awakening__grid {
  margin-top: clamp(30px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}

/* 静かな箇条の連なり（約束を守る…） */
.ww-litany {
  list-style: none;
  margin-top: clamp(56px, 7.5vw, 100px);
  margin-inline: auto;
  max-width: 620px;
}

.ww-litany li {
  font-family: var(--ww-mincho);
  font-weight: 600;
  font-size: clamp(1.12rem, 0.9vw + 0.92rem, 1.55rem);
  letter-spacing: 0.08em;
  color: var(--ww-cream);
  text-align: center;
  padding-block: clamp(17px, 2.2vw, 24px);
  border-bottom: 1px solid var(--ww-rule);
  word-break: keep-all;
}

.ww-litany li:first-child {
  border-top: 1px solid var(--ww-rule);
}

.ww-awakening__close {
  margin-top: clamp(56px, 7.5vw, 100px);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(40px, 5.5vw, 72px);
}

.ww-awakening__close .ww-body {
  text-align: center;
}

/* ==========================================================================
   04. JAPANESE VALUE
   ========================================================================== */
.ww-values-sec {
  background: linear-gradient(to bottom, #352728 0%, var(--ww-deep) 26%, var(--ww-deep) 100%);
  padding-block: clamp(90px, 12vw, 170px);
}

.ww-values-sec__intro {
  margin-top: clamp(30px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}

/* 4枚カード禁止 ── 雑誌の目次のような大組みの行 */
.ww-values {
  list-style: none;
  margin-top: clamp(64px, 8.5vw, 120px);
}

.ww-values__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: clamp(18px, 3vw, 44px);
  padding-block: clamp(26px, 3.6vw, 44px);
  border-bottom: 1px solid var(--ww-rule);
}

.ww-values__row:first-child {
  border-top: 1px solid var(--ww-rule);
}

.ww-values__num {
  font-family: var(--ww-en);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ww-sunset);
}

.ww-values__en {
  font-family: var(--ww-en);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw + 0.6rem, 4.9rem);
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: #fff7ef;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.ww-values__ja {
  font-family: var(--ww-mincho);
  font-weight: 600;
  font-size: clamp(0.98rem, 0.7vw + 0.82rem, 1.3rem);
  letter-spacing: 0.12em;
  color: var(--ww-soft);
  white-space: nowrap;
}

/* ==========================================================================
   05. BEYOND SUCCESS
   ========================================================================== */
.ww-beyond {
  background: linear-gradient(to bottom, var(--ww-deep) 0%, var(--ww-dusk) 70%, var(--ww-dusk) 100%);
  padding-block: clamp(90px, 12vw, 170px);
}

.ww-beyond .ww-copy--large {
  margin-top: clamp(30px, 4vw, 48px);
}

.ww-beyond__body {
  margin-top: clamp(56px, 7.5vw, 100px);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(40px, 5.5vw, 64px);
}

.ww-beyond__body .ww-body {
  text-align: center;
}

/* 営業。現場。物流。事務。── 職種の連なり */
.ww-roles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: clamp(18px, 3.6vw, 56px);
}

.ww-roles span {
  position: relative;
  font-family: var(--ww-mincho);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.2vw + 0.9rem, 2.7rem);
  letter-spacing: 0.1em;
  color: #fff7ef;
}

.ww-roles span + span::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(10px, 1.9vw, 29px));
  top: 50%;
  width: 1px;
  height: 1.1em;
  transform: translateY(-50%);
  background-color: var(--ww-rule);
}

/* ==========================================================================
   06. BEYOND EXPORT ── 写真の章
   ========================================================================== */
.ww-flow-sec {
  background-color: var(--ww-dusk);
  padding-bottom: clamp(90px, 12vw, 170px);
}

.ww-flow-sec__fig {
  position: relative;
  margin: 0;
  height: clamp(260px, 38vw, 520px);
  overflow: hidden;
}

.ww-flow-sec__fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  filter: saturate(0.94);
}

/* 写真をダスクブラウンへ溶かす */
.ww-flow-sec__fig-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(58, 43, 44, 0.42) 0%, rgba(58, 43, 44, 0.05) 40%, rgba(58, 43, 44, 0.9) 88%, #3a2b2c 100%);
}

.ww-flow-sec__body {
  padding-top: clamp(64px, 8.5vw, 110px);
}

.ww-flow-sec__grid {
  margin-top: clamp(30px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}

.ww-flow-sec__grid .ww-body {
  margin-top: clamp(24px, 3.2vw, 40px);
}

.ww-litany--flow {
  margin-top: 0;
  margin-inline: 0;
  max-width: 26em;
}

.ww-litany--flow li {
  text-align: left;
  padding-left: clamp(18px, 2.4vw, 28px);
  position: relative;
}

.ww-litany--flow li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 1px;
  background-color: var(--ww-sunset);
}

.ww-flow-sec .ww-copy--accent {
  margin-top: clamp(64px, 8.5vw, 110px);
  text-align: center;
}

/* ==========================================================================
   07. BACK TO JAPAN
   ========================================================================== */
.ww-return {
  background: linear-gradient(to bottom, var(--ww-dusk) 0%, var(--ww-warm) 62%, var(--ww-dusk) 100%);
  padding-block: clamp(90px, 12vw, 170px);
}

.ww-return .ww-copy--large {
  margin-top: clamp(30px, 4vw, 48px);
}

.ww-return__grid {
  margin-top: clamp(48px, 6.5vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(36px, 5vw, 88px);
  align-items: start;
}

.ww-return__grid > .ww-body:last-child {
  grid-column: 2;
}

.ww-litany--future {
  margin: 0;
  max-width: none;
}

.ww-litany--future li {
  text-align: left;
  font-size: clamp(1.3rem, 1.3vw + 0.95rem, 1.95rem);
  color: #fff7ef;
}

.ww-litany--future li:nth-child(2) {
  padding-left: clamp(28px, 4vw, 64px);
}

.ww-litany--future li:nth-child(3) {
  padding-left: clamp(56px, 8vw, 128px);
}

/* ==========================================================================
   08. THE CHALLENGE ── 生成りの章
   ========================================================================== */
.ww-challenge {
  background-color: var(--ww-cream);
  color: var(--ww-dusk);
  padding-block: clamp(90px, 12vw, 170px);
}

.ww-challenge .ww-copy--on-light {
  margin-top: clamp(30px, 4vw, 48px);
}

.ww-challenge__grid {
  margin-top: clamp(56px, 7.5vw, 100px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(44px, 6vw, 100px);
  align-items: start;
}

/* 旅程 ── 一歩ずつ世界へ進んでいく足あと */
.ww-journey {
  list-style: none;
}

.ww-journey li {
  font-family: var(--ww-mincho);
  font-weight: 600;
  font-size: clamp(1.18rem, 1vw + 0.95rem, 1.7rem);
  letter-spacing: 0.08em;
  color: var(--ww-dusk);
  padding-block: clamp(13px, 1.8vw, 19px);
  word-break: keep-all;
}

.ww-journey li:nth-child(2) { padding-left: clamp(20px, 2.6vw, 44px); }
.ww-journey li:nth-child(3) { padding-left: clamp(40px, 5.2vw, 88px); }
.ww-journey li:nth-child(4) { padding-left: clamp(60px, 7.8vw, 132px); }
.ww-journey li:nth-child(5) { padding-left: clamp(80px, 10.4vw, 176px); }
.ww-journey li:nth-child(6) { padding-left: clamp(100px, 13vw, 220px); }

.ww-journey li:last-child {
  margin-top: clamp(14px, 2vw, 22px);
  padding-left: 0;
  color: #b8492f;
  border-top: 1px solid rgba(58, 43, 44, 0.22);
  padding-top: clamp(24px, 3.2vw, 36px);
}

.ww-challenge__text {
  padding-top: clamp(6px, 1vw, 12px);
}

.ww-page a.ww-challenge__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(32px, 4.2vw, 48px);
  font-family: var(--ww-mincho);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.1em;
  color: #b8492f;
  border-bottom: 1px solid rgba(184, 73, 47, 0.5);
  padding-bottom: 7px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.ww-page a.ww-challenge__link:hover {
  color: var(--ww-dusk);
  border-color: var(--ww-dusk);
}

/* ==========================================================================
   09. FINAL DECLARATION ── エンドカード
   ========================================================================== */
.ww-final {
  position: relative;
  overflow: hidden;
  background-color: #251a1b;
  padding-block: clamp(110px, 15vw, 210px);
  text-align: center;
}

.ww-final__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ww-final__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
}

/* 写真を深い夕闇へ沈め、コピーを主役にする */
.ww-final__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, #251a1b 0%, rgba(37, 26, 27, 0.72) 30%, rgba(37, 26, 27, 0.72) 70%, #251a1b 100%),
    rgba(37, 26, 27, 0.14);
}

.ww-final__content {
  position: relative;
  z-index: 2;
}

.ww-final__lead {
  font-family: var(--ww-mincho);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.3vw + 0.9rem, 1.85rem);
  line-height: 2;
  letter-spacing: 0.08em;
  color: var(--ww-soft);
  word-break: keep-all;
}

.ww-final__lead span {
  display: block;
}

/* LEVEL 1: 最後の宣言 */
.ww-final__declaration {
  margin-top: clamp(44px, 6vw, 76px);
  font-family: var(--ww-mincho);
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw + 1.1rem, 4.4rem);
  line-height: 1.7;
  letter-spacing: 0.08em;
  color: #fff7ef;
  word-break: keep-all;
}

.ww-final__declaration span {
  display: block;
}

.ww-final__declaration span:last-child {
  color: var(--ww-sunset);
}

.ww-final__rule {
  width: 1px;
  height: clamp(44px, 6vw, 72px);
  margin: clamp(48px, 7vw, 88px) auto 0;
  background: linear-gradient(to bottom, rgba(255, 147, 106, 0), var(--ww-sunset));
}

/* 冒頭の思想への静かな回帰 */
.ww-final__echo {
  margin-top: clamp(40px, 5.5vw, 64px);
  margin-inline: auto;
  max-width: 34em;
  font-family: var(--ww-mincho);
  font-size: clamp(0.92rem, 0.4vw + 0.84rem, 1.08rem);
  line-height: 2.3;
  letter-spacing: 0.1em;
  color: var(--ww-mute);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.ww-final__sign {
  margin-top: clamp(72px, 10vw, 130px);
  display: grid;
  justify-items: center;
  gap: clamp(26px, 3.6vw, 40px);
}

.ww-final__wordmark {
  font-family: var(--ww-en);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: rgba(255, 243, 233, 0.4);
}

.ww-page .ww-final__back {
  color: var(--ww-cream);
  border-color: rgba(255, 243, 233, 0.42);
  font-family: var(--ww-mincho);
  letter-spacing: 0.08em;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.ww-page .ww-final__back:hover {
  background-color: var(--ww-cream);
  color: var(--ww-deep);
  border-color: var(--ww-cream);
}

/* ==========================================================================
   WHY THE WORLD レスポンシブ
   ========================================================================== */
@media (max-width: 1023px) {
  .ww-awakening__grid,
  .ww-values-sec__intro,
  .ww-flow-sec__grid,
  .ww-challenge__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 4.6vw, 44px);
  }

  .ww-return__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(32px, 5vw, 48px);
  }

  .ww-return__grid > .ww-body:last-child {
    grid-column: auto;
  }
}

@media (max-width: 767px) {
  .ww-hero {
    min-height: min(88svh, 720px);
  }

  /* ラクダの一行が画面に残るように寄せる */
  .ww-hero__bg img {
    object-position: 58% 42%;
  }

  .ww-hero__overlay {
    background:
      linear-gradient(to bottom, rgba(44, 32, 34, 0.52) 0%, rgba(44, 32, 34, 0.12) 32%, rgba(44, 32, 34, 0.32) 60%, rgba(44, 32, 34, 0.9) 90%, #2c2022 100%);
  }

  .ww-thesis__copy {
    line-height: 2.05;
    letter-spacing: 0.06em;
  }

  .ww-litany {
    max-width: none;
  }

  .ww-values__row {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 8px;
  }

  .ww-values__ja {
    grid-column: 2;
    white-space: normal;
  }

  .ww-roles {
    gap: clamp(14px, 5vw, 24px);
  }

  .ww-litany--future li:nth-child(2) { padding-left: clamp(20px, 6vw, 36px); }
  .ww-litany--future li:nth-child(3) { padding-left: clamp(40px, 12vw, 72px); }

  .ww-journey li:nth-child(2) { padding-left: 16px; }
  .ww-journey li:nth-child(3) { padding-left: 32px; }
  .ww-journey li:nth-child(4) { padding-left: 48px; }
  .ww-journey li:nth-child(5) { padding-left: 64px; }
  .ww-journey li:nth-child(6) { padding-left: 80px; }

  .ww-final__echo {
    max-width: none;
  }
}

/* ==========================================================================
   THANK YOU ページ共通（contact-thanks / recruit-thanks / goat-thanks）
   3枚とも同じ骨格（英字ラベル → 小さめの日本語タイトル → 静かな装飾 →
   本文 → CTA）で組み、ブランドごとの配色だけを変数で切り替える。
   クラスは "thx-" で名前空間を切り、他ページへ影響しない。
   ========================================================================== */

/* 明るい背景ページ用のヘッダー配色（contact-thanks / recruit-thanks）。
   goat-thanks は既存の gs-page が同等の処理を持つためそちらを使う */
.thx-page {
  background-color: #f6f1e8;
}

.thx-page .site-header {
  color: var(--color-dark);
  background: linear-gradient(to bottom, rgba(246, 241, 232, 0.92), rgba(246, 241, 232, 0));
}

.thx-page .site-header.is-scrolled {
  background: rgba(246, 241, 232, 0.94);
  color: var(--color-dark);
}

.thx-page .site-header__logo-en {
  color: rgba(27, 25, 23, 0.55);
}

.thx-page .site-nav__list a::after {
  background-color: var(--color-accent);
}

.thx-page .nav-toggle span {
  background-color: var(--color-dark);
}

@media (max-width: 720px) {
  .thx-page .site-nav {
    background-color: rgba(246, 241, 232, 0.985);
  }

  .thx-page .site-nav__list a {
    color: var(--color-dark);
  }
}

/* ---- 本体 ---- */
.thx {
  /* ブランド既定値（GENERAL CONTACT: 生成り × チャコール × テラコッタ） */
  --thx-bg: #f6f1e8;
  --thx-fg: #1b1917;
  --thx-soft: rgba(27, 25, 23, 0.66);
  --thx-accent: #8a3a24;
  --thx-accent-hover: #b25036;
  --thx-oncolor: #fff8f0;
  --thx-mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --thx-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --thx-gothic: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;

  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* ヘッダー(88px)に食い込ませない。上下とも大きく余白を取る */
  padding: calc(88px + clamp(72px, 11vw, 150px)) var(--gutter) clamp(110px, 14vw, 190px);
  background-color: var(--thx-bg);
  color: var(--thx-fg);
  text-align: center;
}

.thx--recruit {
  --thx-bg: #f5f1ea;
}

.thx--goat {
  --thx-bg: #f6f3e9;
  --thx-fg: #294a32;
  --thx-soft: rgba(41, 74, 50, 0.72);
  --thx-accent: #294a32;
  --thx-accent-hover: #203a28;
  --thx-oncolor: #f7f4ea;
  background: linear-gradient(to bottom, #e7f0e1 0%, #f6f3e9 62%, #f6f3e9 100%);
}

.thx__inner {
  width: 100%;
  max-width: 640px;
}

/* LEVEL 4 → 1 → 3 の順に視線が流れる階層 */
.thx__eyebrow {
  font-family: var(--thx-en);
  font-size: clamp(0.68rem, 0.9vw, 0.76rem);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--thx-accent);
}

.thx__title {
  margin-top: clamp(20px, 2.6vw, 30px);
  font-family: var(--thx-mincho);
  font-weight: 600;
  /* 巨大化させない。余白の中で静かに立つサイズ */
  font-size: clamp(1.38rem, 0.9vw + 1.08rem, 1.8rem);
  line-height: 1.9;
  letter-spacing: 0.12em;
  color: var(--thx-fg);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.thx__rule {
  width: 44px;
  height: 1px;
  margin: clamp(34px, 4.6vw, 54px) auto 0;
  background-color: var(--thx-accent);
  opacity: 0.85;
}

/* GOATのみ: 罫線の代わりに小さな円形写真を静かな装飾として使う */
.thx__fig {
  width: clamp(116px, 15vw, 148px);
  aspect-ratio: 1 / 1;
  margin: clamp(34px, 4.6vw, 54px) auto 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 22px 44px -30px rgba(32, 55, 39, 0.7);
}

.thx__fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thx__body {
  margin: clamp(34px, 4.6vw, 54px) auto 0;
  max-width: 30em;
  font-family: var(--thx-gothic);
  font-size: clamp(0.92rem, 0.3vw + 0.86rem, 1rem);
  line-height: 2.2;
  letter-spacing: 0.05em;
  color: var(--thx-soft);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.thx__body p + p {
  margin-top: 1.5em;
}

.thx__body--soft {
  margin-top: clamp(22px, 3vw, 32px);
  font-size: clamp(0.86rem, 0.24vw + 0.8rem, 0.92rem);
  color: color-mix(in srgb, var(--thx-soft) 78%, transparent);
}

.thx__actions {
  margin-top: clamp(48px, 6.4vw, 78px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* Primary: 塗り。押せることが一目で分かるが過度に大きくしない */
.thx__actions .thx__btn {
  min-width: 220px;
  justify-content: center;
  padding: 15px 34px;
  background-color: var(--thx-accent);
  border-color: var(--thx-accent);
  color: var(--thx-oncolor);
  font-family: var(--thx-mincho);
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.thx__actions .thx__btn:hover,
.thx__actions .thx__btn:focus-visible {
  background-color: var(--thx-accent-hover);
  border-color: var(--thx-accent-hover);
  color: var(--thx-oncolor);
}

/* Secondary: 枠線 */
.thx__actions .thx__ghost {
  min-width: 220px;
  justify-content: center;
  padding: 15px 34px;
  background-color: transparent;
  border-color: color-mix(in srgb, var(--thx-fg) 38%, transparent);
  color: var(--thx-fg);
  font-family: var(--thx-mincho);
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.thx__actions .thx__ghost:hover,
.thx__actions .thx__ghost:focus-visible {
  background-color: color-mix(in srgb, var(--thx-fg) 7%, transparent);
  border-color: var(--thx-fg);
  color: var(--thx-fg);
}

.thx__actions .btn:focus-visible {
  outline: 2px solid var(--thx-accent-hover);
  outline-offset: 3px;
}

@media (max-width: 520px) {
  .thx {
    padding-top: calc(72px + clamp(76px, 18vw, 104px));
    padding-bottom: clamp(96px, 20vw, 140px);
  }

  .thx__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .thx__actions .thx__btn,
  .thx__actions .thx__ghost {
    width: 100%;
    min-width: 0;
  }
}