/* ==========================================================================
   社員インタビューページ
   ========================================================================== */

.iv {
  padding-top: var(--header-height);
}

/* ---- メイン写真 ---- */
/* 横幅を抑えて、写真の上下が切れすぎないようにする（引きの構図を保つ） */
.iv-hero {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #DADADA;
}
.iv-hero.placeholder { display: flex; position: relative; }
.iv-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
/* 写真の下側を少し暗くして、重ねた文字を読みやすくする */
.iv-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to left, rgba(10, 18, 22, 0.55) 0%, rgba(10, 18, 22, 0) 38%);
  pointer-events: none;
}
/* 顔が右寄りの写真用：一言を左に置く */
.iv-hero--quote-left img { object-position: 50% 30%; }
.iv-hero--quote-left::after {
  background: linear-gradient(to right, rgba(10, 18, 22, 0.55) 0%, rgba(10, 18, 22, 0) 38%);
}
.iv-hero--quote-left .iv-hero__quote { right: auto; left: 7%; }

/* 本人の一言：PCは右側に縦書き、スマホは下に横書き */
.iv-hero__quote {
  position: absolute;
  z-index: 3;
  /* 縦書きの列の長さを確保するため、上端から下端までの範囲で配置 */
  top: 12%;
  right: 7%;
  max-height: 80%;
  writing-mode: vertical-rl;
  font-family: var(--font-mincho);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

/* ---- タイトル・リード ---- */
.iv-head {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 0;
}
.iv-eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--color-accent-dark);
  margin-bottom: 14px;
}
.iv-title {
  font-size: clamp(1.7rem, 4.2vw, 2.5rem);
  line-height: 1.45;
  font-weight: 700;
  text-wrap: balance;
  margin-bottom: 18px;
}
.nw { display: inline-block; }
/* 質問・リード・案内文は、対応ブラウザでは文節で改行する（非対応でも表示は崩れない） */
.iv-ask, .iv-day__ask, .iv-intro-lead, .iv-recruit, .iv-photo figcaption { word-break: auto-phrase; text-wrap: pretty; }
.iv-name {
  font-family: var(--font-mincho);
  font-size: 1.05rem;
  color: var(--color-text-soft);
  margin-bottom: 32px;
}
.iv-name strong {
  font-size: 1.35rem;
  color: var(--color-text);
  font-weight: 700;
  margin-right: 10px;
  letter-spacing: 0.08em;
}
.iv-lead {
  font-size: 1.08rem;
  line-height: 1.95;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--color-border);
}

/* ---- プロフィール ---- */
.iv-profile {
  max-width: 760px;
  margin: 36px auto 0;
  padding: 0 24px;
}
.iv-profile__box {
  background: var(--color-accent-light);
  border-radius: 6px;
  padding: 24px 28px;
}
.iv-profile__label {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: var(--color-accent-dark);
  margin-bottom: 10px;
}
.iv-profile__name {
  font-family: var(--font-mincho);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.iv-profile__name span {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text-soft);
  margin-left: 12px;
  letter-spacing: 0.1em;
}
.iv-profile__note {
  font-size: 0.9rem;
  color: var(--color-text-soft);
  margin: 4px 0 18px;
}
.iv-profile__note .tbd { display: block; margin-top: 8px; }

/* 経歴の年表 */
.iv-career {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.iv-career::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--color-accent);
}
.iv-career li {
  position: relative;
  display: grid;
  grid-template-columns: 4.5em 1fr;
  gap: 12px;
  padding: 6px 0 6px 26px;
  font-size: 0.95rem;
  line-height: 1.7;
}
.iv-career li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-accent-light);
  border: 2px solid var(--color-accent);
  box-sizing: border-box;
}
.iv-career li:last-child::before { background: var(--color-accent); }
.iv-career__year {
  font-family: var(--font-mincho);
  font-weight: 700;
  color: var(--color-accent-dark);
  font-variant-numeric: tabular-nums;
}

/* ---- 本文 ---- */
.iv-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 24px 0;
}
.iv-section {
  margin-top: 88px;
}
/* 見出し：上に小さく「問い」、下に大きく「本人の言葉」 */
.iv-section h2 {
  margin-bottom: 28px;
}
.iv-q {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-accent-dark);
  margin-bottom: 14px;
}
.iv-q__num {
  font-family: var(--font-mincho);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding-right: 12px;
  border-right: 1px solid var(--color-accent);
  line-height: 1;
}
.iv-a {
  display: block;
  font-family: var(--font-mincho);
  font-size: clamp(1.4rem, 3.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-wrap: balance;
}
.iv-section p {
  font-size: 1.02rem;
  line-height: 2.05;
  margin-bottom: 1.2em;
}

/* ---- 経歴の語り（本文の前） ---- */
.iv-intro {
  margin-top: 48px;
}

/* ---- タイトル上のリード文 ---- */
.iv-intro-lead {
  font-size: 1rem;
  line-height: 1.95;
  color: var(--color-text-soft);
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}
.iv-head .iv-name { margin-bottom: 20px; }

/* ---- 写真の縦横比をそのまま見せる（切り抜かない） ---- */
.iv-photo--natural .placeholder { aspect-ratio: auto !important; display: block; background: none; }
.iv-photo--natural .placeholder img { position: static; height: auto; }
.iv-photo--natural .placeholder__label { display: none; }

/* ---- 見出しのすぐ下に置く写真 ---- */
.iv-photo--top { margin: 0 0 24px; }

/* ---- 文末の募集案内 ---- */
.iv-recruit {
  margin-top: 40px !important;
  padding: 20px 4px 0;
  border-top: 1px solid var(--color-border);
  font-size: 1rem !important;
  line-height: 1.9 !important;
  text-align: center;
  color: var(--color-text);
}

/* ---- 各問いの見出し（本人の言葉） ---- */
.iv-section h2.iv-h {
  font-family: var(--font-mincho);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.03em;
  padding-left: 16px;
  border-left: 3px solid var(--color-accent);
  margin-bottom: 22px;
  text-wrap: balance;
}
.iv-section--first { margin-top: 64px; }
.iv-qa p.iv-gap { margin-top: 1em; }

/* ---- 問いと答え：1組ずつ薄い色の面で区切る ---- */
.iv-qa {
  background: #F7F5F0;
  border-radius: 6px;
  padding: 24px 28px;
  margin-top: 20px;
}
.iv-section h2 + .iv-qa,
.iv-section > .iv-qa:first-child { margin-top: 0; }
.iv-qa .iv-ask,
.iv-day .iv-ask {
  font-weight: 600;
  color: var(--color-accent-dark);
  margin: 0 0 0.8em;
  line-height: 1.8;
}
.iv-qa p.iv-link { margin-top: 0.8em; }
/* 答えは行間を詰めて、ひと続きの話として読めるように */
.iv-qa p:not(.iv-ask) {
  font-size: 1.02rem;
  line-height: 1.95;
  margin: 0 0 0.3em;
}
.iv-qa p:last-child { margin-bottom: 0; }
.iv-qa p.iv-note { margin: 0.1em 0 0.4em; }
.iv-note {
  font-size: 0.85rem !important;
  font-weight: 400;
  color: var(--color-text-soft);
}
.iv-note a {
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* ---- 1日の流れ（A案：上下の罫線で区切る時刻表） ---- */
.iv-day {
  margin: 32px 0 0;
  padding: 18px 0 6px;
  border-top: 2px solid var(--color-text);
  border-bottom: 1px solid var(--color-text);
}
.iv-day__ask {
  font-family: var(--font-mincho);
  font-size: 1.1rem !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6 !important;
  margin: 0 0 4px !important;
}
.iv-sched { list-style: none; margin: 0; padding: 0; }
.iv-sched li {
  display: grid;
  grid-template-columns: 9.5em 1fr;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.98rem;
  line-height: 1.7;
}
.iv-sched li:first-child { border-top: 0; }
.iv-sched__note {
  font-size: 0.85rem !important;
  color: var(--color-text-soft);
  text-align: right;
  margin: 0 !important;
  padding: 8px 0 6px;
  border-top: 1px solid var(--color-border);
}
.iv-sched__t {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--color-accent-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.iv-day__title {
  font-family: var(--font-mincho);
  font-size: 1.15rem !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 18px !important;
}
.iv-day__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.iv-day__list li {
  display: grid;
  grid-template-columns: 4.2em 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid #E3DED3;
  font-size: 0.98rem;
  line-height: 1.7;
}
.iv-day__list li:last-child { border-bottom: 1px solid #E3DED3; }
.iv-day__line { grid-column: 1 / -1; }

/* 一日の流れ：縦の線に沿って時系列で並べる */
.iv-time {
  list-style: none;
  margin: 6px 0 4px;
  padding: 0;
  position: relative;
}
.iv-time::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--color-accent);
}
.iv-time li {
  position: relative;
  padding: 7px 0 7px 30px;
  font-size: 0.98rem;
  line-height: 1.75;
}
.iv-time li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #F7F5F0;
  border: 1px solid var(--color-accent);
}
.iv-time li.is-time::before {
  left: 0;
  top: 13px;
  width: 13px;
  height: 13px;
  background: var(--color-accent);
  border: 3px solid #F7F5F0;
  box-shadow: 0 0 0 1px var(--color-accent);
}
.iv-time li:not(.is-time) { color: var(--color-text-soft); font-size: 0.93rem; padding-top: 3px; padding-bottom: 3px; }
.iv-time li:not(.is-time)::before { top: 12px; }
.iv-time__t {
  font-family: var(--font-mincho);
  font-weight: 700;
  color: var(--color-accent-dark);
  font-variant-numeric: tabular-nums;
  margin-right: 0.8em;
}
.iv-day__time {
  font-family: var(--font-mincho);
  font-weight: 700;
  color: var(--color-accent-dark);
  font-variant-numeric: tabular-nums;
}

/* ---- 本文中の写真 ---- */
.iv-photo {
  margin: 56px 0 0;
}
.iv-photo .placeholder {
  aspect-ratio: 3 / 2;
  border-radius: 4px;
}
.iv-photo img { object-fit: cover; }
.iv-photo figcaption {
  font-size: 0.85rem;
  color: var(--color-text-soft);
  margin-top: 8px;
  line-height: 1.6;
  text-align: center;
}
/* 本文より広く見せる写真（スマホでは画面いっぱい） */
.iv-photo--wide {
  margin-left: -24px;
  margin-right: -24px;
}
.iv-photo--wide .placeholder { border-radius: 0; aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
  .iv-photo--wide {
    --wide: min(1080px, calc(100vw - 64px));
    width: var(--wide);
    margin-left: calc((100% - var(--wide)) / 2);
    margin-right: 0;
  }
}

/* ---- 引用（本人の言葉） ---- */
.iv-pull {
  margin: 48px 0 0;
  padding: 28px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mincho);
  font-size: clamp(1.2rem, 2.8vw, 1.45rem);
  font-weight: 600;
  line-height: 1.8;
  color: var(--color-accent-dark);
  text-align: center;
  text-wrap: balance;
}

/* ---- 割烹と丸 ---- */
.iv-info {
  margin-top: 28px;
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  padding: 20px 24px;
}
.iv-info__title {
  font-family: var(--font-mincho);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.iv-info p {
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 0.3em;
}

/* ---- 締め ---- */
.iv-closing {
  max-width: 760px;
  margin: 64px auto 0;
  padding: 0 24px;
  text-align: center;
}
.iv-closing__quote {
  font-family: var(--font-mincho);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 700;
  line-height: 1.8;
  text-wrap: balance;
}
.iv-closing__sig {
  margin-top: 14px;
  font-family: var(--font-mincho);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ---- 応募導線 ---- */
.iv-cta {
  margin-top: 72px;
}
.iv-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.btn--ghost-light {
  border: 1px solid #fff;
  color: #fff;
  background: transparent;
}
.btn--ghost-light:hover { background: rgba(255,255,255,0.12); }

.iv-back {
  text-align: center;
  padding: 40px 24px 56px;
}
.iv-back a {
  color: var(--color-accent-dark);
  border-bottom: 1px solid currentColor;
}

/* ---- インタビュー前の仮テキスト（公開前に必ず差し替え） ---- */
.tbd {
  background: #FFF8E1;
  border: 1px dashed #D9B44A;
  border-radius: 4px;
  padding: 10px 14px;
  color: #7A6420;
  font-size: 0.95rem !important;
  line-height: 1.8 !important;
}
/* 写真の上に置く仮テキスト */
.tbd--dark {
  display: inline-block;
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
  letter-spacing: 0.1em;
}

@media (max-width: 767px) {
  /* スマホ：一言は写真の下側に横書き */
  .iv-hero::after {
    background: linear-gradient(to top, rgba(10, 18, 22, 0.6) 0%, rgba(10, 18, 22, 0) 50%);
  }
  .iv-hero__quote {
    writing-mode: horizontal-tb;
    top: auto;
    bottom: 20px;
    left: 20px;
    right: 20px;
    transform: none;
    max-height: none;
    font-size: 1.25rem;
    line-height: 1.7;
    letter-spacing: 0.06em;
  }
  .iv-hero--quote-left .iv-hero__quote { left: 20px; right: 20px; }
  .iv-hero__quote .nw { display: inline-block; }
  .pc-only { display: none; }
}

@media (max-width: 600px) {
  .iv-hero { aspect-ratio: 4 / 3; }
  .iv-hero--quote-left img { object-position: 68% 30%; }   /* 顔が画面の中に収まるよう右寄りに */
  .iv-head { padding: 28px 18px 0; }
  .iv-title { font-size: 1.55rem; line-height: 1.5; }
  .iv-profile { padding: 0 16px; }
  /* 読む幅を広げる：外側の余白16px＋面の内側16px */
  .iv-body { padding: 16px 16px 0; }
  .iv-photo--wide { margin-left: -16px; margin-right: -16px; }
  .iv-section h2.iv-h { font-size: 1.3rem; line-height: 1.55; padding-left: 12px; margin-bottom: 16px; }
  /* スマホの見出し：言葉の区切り（.nw）でだけ改行し、1行目はできるだけ長く取る */
  .iv-section h2.iv-h, .iv-title { text-wrap: wrap; }
  .iv-qa { padding: 18px 16px; border-radius: 4px; }
  .iv-qa .iv-ask, .iv-day .iv-ask { font-size: 0.95rem; line-height: 1.7; }
  .iv-qa p:not(.iv-ask) { font-size: 0.97rem; line-height: 1.85; margin-bottom: 0.35em; }
  .iv-day__list li { font-size: 0.93rem; padding: 10px 0; }
  .iv-photo { margin-top: 36px; }
  .iv-photo figcaption { font-size: 0.8rem; padding: 0 8px; }
  .iv-pull { font-size: 1.15rem; padding: 22px 4px; }
  .iv-closing { margin-top: 48px; padding: 0 18px; }
  .iv-intro-lead { font-size: 0.95rem; line-height: 1.85; }
  .iv-intro-lead br { display: none; }
  .iv-recruit { font-size: 0.95rem !important; text-align: left; }
  .iv-photo--top { margin-bottom: 18px; }
  /* 応募ボタンは2つとも横幅いっぱいにそろえて、押しやすく */
  .iv-cta__buttons { flex-direction: column; align-items: stretch; }
  .iv-cta__buttons .btn { width: 100%; text-align: center; padding-left: 16px; padding-right: 16px; }
  .iv-profile__box { padding: 20px; }
  .iv-section { margin-top: 64px; }
  .iv-day { padding: 16px 0 4px; }
  .iv-sched li { grid-template-columns: 7.4em 1fr; gap: 10px; font-size: 0.93rem; }
  .iv-sched__t { font-size: 1.08rem; }
  .iv-day__list li { gap: 10px; }
}