/* ============================================================
   BISTRO AOKI — page-concept.css（コンセプトページ専用）
   ============================================================ */

/* ---------- 導入ステートメント ---------- */
.concept-statement__side { grid-column: 1 / 4; }
.concept-statement__side .ja-sub { margin-top: .5em; }
.concept-statement__main { grid-column: 5 / 12; }
.concept-statement__title {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 2;
  letter-spacing: .16em;
}
.concept-statement__lead { margin-top: 2.2em; }

/* ---------- 三本柱（非対称・巨大連番） ---------- */
.pillar { overflow: hidden; }
.pillar__grid { position: relative; align-items: center; }
.pillar__num {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(6rem, 14vw, 13rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 169, 110, .4);
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.band--cream .pillar__num { -webkit-text-stroke-color: rgba(107, 29, 42, .35); }
.pillar__photo { position: relative; z-index: 1; margin: 0; }
.pillar__photo img { width: 100%; object-fit: cover; }
.pillar__text { position: relative; z-index: 1; }
.pillar__ja { display: block; margin-bottom: 1em; }
.pillar__title { margin-bottom: .6em; }
.pillar__body { max-width: 34em; color: var(--ink-2); line-height: 2.1; }
.band--cream .pillar__body { color: var(--cream-ink-2); }

/* 柱01: 写真左大きく・連番右上 */
.pillar--01 .pillar__photo { grid-column: 1 / 8; }
.pillar--01 .pillar__photo img { aspect-ratio: 4 / 3; }
.pillar--01 .pillar__num { top: -0.08em; right: 0; }
.pillar--01 .pillar__text { grid-column: 9 / 13; }

/* 柱02: 明帯・テキスト左・写真右縦長・連番左上 */
.pillar--02 .pillar__num { top: -0.08em; left: 0; }
.pillar--02 .pillar__text { grid-column: 2 / 6; }
.pillar--02 .pillar__photo { grid-column: 7 / 13; }
.pillar--02 .pillar__photo img { aspect-ratio: 4 / 3; }

/* 柱03: パノラマ写真＋テキストを写真下右へ・連番中央上 */
.pillar--03 .pillar__num { top: -0.08em; left: 38%; }
/* 連番03が写真に埋没しないよう、写真の下げ幅を連番の背丈に合わせる */
.pillar--03 .pillar__photo { grid-column: 1 / 11; margin-top: clamp(3.5rem, 9vw, 8rem); }
.pillar--03 .pillar__photo img { aspect-ratio: 21 / 9; }
.pillar--03 .pillar__text {
  grid-column: 7 / 13;
  margin-top: clamp(-5rem, -6vw, -3rem);
  background: var(--bg-alt);
  padding: clamp(1.75rem, 3vw, 3rem);
  border-top: 1px solid var(--hairline);
}

/* ---------- シェフ ---------- */
.chef__grid { align-items: start; }
.chef__left {
  grid-column: 1 / 7;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.chef__photo { grid-column: 8 / 13; margin: 0; }
.chef__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.chef__name { margin-block: .3em .4em; }
.chef__role { display: block; margin-bottom: 1.6em; }
.chef__bio { max-width: 36em; }
.chef__detail { margin: 0; max-width: 420px; }
.chef__detail img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* 引用 */
.chef__quote {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--hairline);
  align-items: start;
}
.chef__quote-side { grid-column: 1 / 4; }
.chef__message {
  grid-column: 4 / 13;
  font-family: var(--font-ja-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.875rem);
  font-weight: 500;
  line-height: 2;
  letter-spacing: .12em;
  color: var(--head);
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 1023px) {
  .concept-statement__side { grid-column: 1 / 13; margin-bottom: 1.5rem; }
  .concept-statement__main { grid-column: 1 / 13; }
  .pillar--01 .pillar__photo, .pillar--02 .pillar__photo, .pillar--03 .pillar__photo { grid-column: 1 / 13; }
  .pillar--01 .pillar__text, .pillar--02 .pillar__text { grid-column: 1 / 13; margin-top: 2rem; }
  .pillar--03 .pillar__text { grid-column: 2 / 13; margin-top: -2.5rem; }
  .pillar__num { font-size: clamp(5rem, 18vw, 9rem); }
  .chef__left, .chef__photo { grid-column: 1 / 13; }
  .chef__photo { max-width: 480px; margin-top: 2rem; }
  .chef__quote-side { grid-column: 1 / 13; margin-bottom: 1rem; }
  .chef__message { grid-column: 1 / 13; }
}
@media (max-width: 767px) {
  .pillar--02 .pillar__text { margin-top: 0; }
  .pillar--03 .pillar__text { margin-top: -1.5rem; }
}