@charset "UTF-8";
/**
 * oto-productions プロフィールページ 2026 — Dark Editorial
 * page-profile.php 専用。front-2026.css（トークン・リセット・ナビ・フッター・共通部品）を
 * 先に読み込んだうえで、このファイルを重ねる。
 *
 * 見出しの組みはトップページに揃えている:
 *   - 見出し … Noto Serif JP Light(300)
 *   - 数値・欧文ディスプレイ（実績数値、hirobiro）… Cormorant Garamond Light(300) イタリック
 *
 * トップページと異なる点:
 *   - 本文       … Noto Serif JP（トップは Noto Sans JP）
 *   - CTAボタン  … アクセント色地に濃色文字（トップはクリーム地）
 *   - フッター   … #080808（トップは #0A0909）
 */

.lp2026 {
  --card: #161414;
  --chip: rgba(255, 255, 255, .03);
}

/* 現在地のナビ項目を明示する */
.lp-nav__links a[aria-current="page"],
.lp-footer__links a[aria-current="page"] { color: var(--fg); }

/* ---------- 共通（プロフィール側） ---------- */

.pf-label {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--accent);
}

.pf-body {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 28px;
  color: var(--muted);
}

.pf-rule {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.pf-section {
  padding: 100px var(--gutter);
  border-bottom: 1px solid var(--line);
}

.pf-section--alt { background: var(--bg-alt); }
.pf-section--base { background: var(--bg); }

/* ---------- hero ---------- */

.pf-hero {
  position: relative;
  min-height: 680px;
  display: flex;
  align-items: flex-start;
  background: var(--bg);
  overflow: hidden;
}

.pf-hero__bg,
.pf-hero__overlay { position: absolute; inset: 0; }

.pf-hero__bg { overflow: hidden; }

/* 見出しが上部に載るので、上を濃くして下へ抜けるグラデーションにしている */
.pf-hero__overlay {
  background:
    linear-gradient(180deg, rgba(10, 9, 9, .85) 0%, rgba(10, 9, 9, .55) 55%, rgba(10, 9, 9, .80) 100%),
    linear-gradient(90deg, rgba(10, 9, 9, .70) 0%, rgba(10, 9, 9, .10) 100%);
}

/* max-width はパディングを持つこの要素ではなく、中の文字列側に付ける。
   ここで幅を絞ると gutter の分だけ内容幅が二重に削られ、見出しが崩れる。 */
.pf-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 120px var(--gutter) 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.pf-hero__title {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--fg);
  max-width: 760px;
}

.pf-hero__sub {
  font-family: var(--display);
  font-size: 15px;
  line-height: 27px;
  color: var(--muted);
  max-width: 560px;
}

/* ---------- origin story ---------- */

.pf-origin__inner {
  display: flex;
  gap: 80px;
  align-items: flex-start;
  margin-top: 24px;
}

.pf-origin__left {
  flex: 0 1 580px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pf-origin__title {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--fg);
}

.pf-origin__right {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pf-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.pf-card__label {
  font-family: var(--display);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--muted);
}

.pf-card__text {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 27px;
  color: var(--fg);
}

.pf-card__text--muted { color: var(--muted); }

/* 屋号の変遷チップ */
.pf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pf-chip {
  padding: 4px 12px;
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--display);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.pf-chip--current {
  background: rgba(200, 184, 154, .13);
  border-color: var(--accent);
  color: var(--accent);
}

.pf-chips__arrow {
  font-family: var(--display);
  font-size: 11px;
  color: var(--muted);
}

/* ---------- values ---------- */

.pf-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.pf-head__left { display: flex; flex-direction: column; gap: 12px; }

.pf-title {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--fg);
}

.pf-values__list { margin-top: 64px; }

.pf-values__row {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  padding: 48px 0;
  border-top: 1px solid var(--line);
}

.pf-values__num {
  flex: 0 0 32px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--accent);
  padding-top: 6px;
}

.pf-values__col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pf-values__title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--fg);
}

/* ---------- experience ---------- */

.pf-exp__inner {
  display: flex;
  gap: 80px;
  align-items: flex-start;
  margin-top: 64px;
}

.pf-exp__stats { flex: 0 0 380px; }

.pf-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 40px 0;
  border-top: 1px solid var(--line);
}

.pf-stat__num {
  font-family: var(--num);
  font-size: 48px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 1px;
  line-height: 1.1;
  color: var(--fg);
}

.pf-stat__label {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 23px;
  color: var(--muted);
}

.pf-exp__skills {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pf-skills__title {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--muted);
  margin-bottom: 4px;
}

.pf-skill {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.pf-skill__dot {
  flex: 0 0 4px;
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
}

.pf-skill__label {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg);
}

/* ---------- bio ---------- */

.pf-bio {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

.pf-bio__photo {
  flex: 0 0 400px;
  height: 480px;
  overflow: hidden;
  border-radius: var(--radius);
}

.pf-bio__text {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.pf-bio__name {
  font-family: var(--num);
  font-size: 64px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 1px;
  line-height: 1.1;
  color: var(--fg);
}

.pf-bio__role {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--muted);
}

.pf-bio__desc {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 30px;
  color: var(--muted);
}

.pf-bio__rule { width: 40px; }

.pf-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.pf-tag {
  padding: 6px 14px;
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--display);
  font-size: 11px;
  color: var(--muted);
}

/* ---------- cta ---------- */

.pf-cta {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px var(--gutter);
  overflow: hidden;
}

.pf-cta__bg,
.pf-cta__overlay { position: absolute; inset: 0; }

.pf-cta__bg { overflow: hidden; }

.pf-cta__overlay {
  background: linear-gradient(180deg, rgba(10, 9, 9, .88) 0%, rgba(10, 9, 9, .82) 100%);
}

.pf-cta__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
}

.pf-cta__headline {
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--fg);
  max-width: 720px;
}

.pf-cta__sub {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 28px;
  color: var(--muted);
  max-width: 560px;
}

/* アクセント色地のボタン。トップページの .lp-btn（クリーム地）とは別物 */
.pf-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 16px 40px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 4px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: background-color .2s ease, transform .2s ease;
}
.pf-btn:hover { background: #d8c9ad; transform: translateY(-1px); }

/* ---------- footer（プロフィール側はさらに暗い） ---------- */

.pf-footer { background: #080808; }

/* ---------- responsive ---------- */

@media (max-width: 1200px) {
  .pf-hero__title { font-size: 42px; }
  .pf-origin__title,
  .pf-title { font-size: 44px; }
  .pf-bio__name { font-size: 52px; }
  .pf-cta__headline { font-size: 48px; }

  .pf-origin__inner,
  .pf-exp__inner,
  .pf-bio { gap: 48px; }

  .pf-exp__stats { flex-basis: 300px; }
  .pf-bio__photo { flex-basis: 320px; height: 400px; }
}

@media (max-width: 900px) {
  .pf-section { padding-top: 72px; padding-bottom: 72px; }

  .pf-hero { min-height: 0; }
  .pf-hero__inner { padding: 96px var(--gutter) 72px; }
  .pf-hero__sub { font-size: 14px; }

  /* PC向けの強制改行を外し、balance で行長を揃える。
     そのままだと「…よかった / と / 言って…」と助詞だけが行に取り残される。 */
  .pf-hero__title,
  .pf-cta__headline {
    text-wrap: balance;
  }
  .pf-hero__title br,
  .pf-cta__headline br { display: none; }

  .pf-hero__title { font-size: 32px; line-height: 1.6; }

  /* モバイルは本文が全幅に伸びるため、横グラデーションをやめて均一に暗くする */
  .pf-hero__overlay {
    background: linear-gradient(180deg, rgba(10, 9, 9, .82) 0%, rgba(10, 9, 9, .72) 50%, rgba(10, 9, 9, .88) 100%);
  }

  .pf-origin__inner,
  .pf-exp__inner,
  .pf-bio { flex-direction: column; gap: 40px; }

  .pf-origin__left,
  .pf-exp__stats,
  .pf-bio__photo { flex: 1 1 auto; width: 100%; }

  .pf-bio__photo { height: 320px; }

  .pf-origin__title,
  .pf-title { font-size: 34px; }
  .pf-bio__name { font-size: 44px; }

  .pf-head { flex-direction: column; align-items: flex-start; gap: 20px; }

  .pf-values__list,
  .pf-exp__inner { margin-top: 40px; }

  .pf-values__row { flex-wrap: wrap; gap: 12px 24px; padding: 32px 0; }
  .pf-values__num { flex: 0 0 auto; padding-top: 0; }
  .pf-values__col { flex: 1 1 100%; }

  .pf-cta { min-height: 0; padding: 88px var(--gutter); }
  .pf-cta__headline { font-size: 34px; }
}

@media (max-width: 560px) {
  .pf-hero__title { font-size: 27px; }
  .pf-origin__title,
  .pf-title { font-size: 28px; }
  .pf-bio__name { font-size: 36px; }
  .pf-cta__headline { font-size: 27px; text-wrap: balance; }
  .pf-stat__num { font-size: 40px; }
}

/* フッターはこのページだけさらに暗い。共通フッターに統一したためページ側で指定する */
body.page-id-6470 .lp-footer { background: #080808; }