/* ========================================
   志灯 プロフィールページ専用スタイル
   共通スタイル（style.css）を継承した上で
   プロフィールページ固有のデザインを定義
======================================== */



/* ========================================
   代表者基本情報
   写真（左）＋ 名前・データ（右）
======================================== */
.pf-intro {
  /* ヒーロー削除後、ヘッダー（固定）の高さ分を上に確保 */
  padding: 120px 0 100px;
  background: var(--color-white);
}

.pf-intro__body {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 80px;
  align-items: start;
}

/* 写真エリア */
.pf-intro__image-wrap {
  position: relative;
}
.pf-intro__image {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.pf-intro__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
/* 装飾フレーム（写真の右下にオフセット） */
.pf-intro__image-deco {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(60, 179, 113, 0.3);
  border-radius: var(--radius);
  z-index: -1;
}

/* 情報エリア */
.pf-intro__label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.5em;
  color: var(--color-gold);
  margin-bottom: 10px;
}
.pf-intro__name {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 400;
  color: var(--color-brown);
  letter-spacing: 0.15em;
  line-height: 1.2;
  margin-bottom: 6px;
}
/* 英文名ルビ */
.pf-intro__ruby {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--color-gold);
  letter-spacing: 0.3em;
  margin-bottom: 24px;
}
.pf-intro__divider {
  width: 44px;
  height: 1px;
  background: var(--color-gold);
  margin-bottom: 32px;
}

/* データリスト（肩書き・経歴・専門） */
.pf-intro__data {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 40px;
}
.pf-intro__data-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: baseline;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(60, 179, 113, 0.12);
}
.pf-intro__data-row:last-child {
  border-bottom: none;
}
.pf-intro__data-row dt {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-gold);
  letter-spacing: 0.1em;
  padding-top: 3px;
}
.pf-intro__data-row dd {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.9;
}

/* キャッチコピー引用ブロック */
.pf-intro__catch {
  font-family: var(--font-serif);
  font-size: 0.93rem;
  font-weight: 400;
  color: var(--color-brown);
  line-height: 2.1;
  padding: 22px 28px;
  border-left: 3px solid var(--color-gold);
  background: var(--color-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0;
}


/* ========================================
   ストーリーセクション（左右交互レイアウト）
======================================== */
.pf-story {
  padding: 100px 0;
}
.pf-story--light {
  background: var(--color-bg);
}
.pf-story--dark {
  background: var(--color-white);
}

/* 通常：テキスト左・ビジュアル右 */
.pf-story__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
/* 逆：ビジュアル左・テキスト右 */
.pf-story__body--reverse {
  direction: rtl;
}
.pf-story__body--reverse > * {
  direction: ltr;
}

/* ストーリーテキスト */
.pf-story__num {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.45em;
  color: var(--color-gold);
  margin-bottom: 12px;
}
.pf-story__title {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 400;
  color: var(--color-brown);
  line-height: 1.65;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
}
.pf-story__divider {
  width: 36px;
  height: 1px;
  background: var(--color-gold);
  margin-bottom: 28px;
}
.pf-story__desc {
  font-size: 0.93rem;
  color: var(--color-text-sub);
  line-height: 2.3;
  margin-bottom: 18px;
}
.pf-story__desc:last-child {
  margin-bottom: 0;
}

/* ストーリー画像エリア */
.pf-story__image-inner {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* 実写真 */
.pf-story__image-inner--main {
  box-shadow: var(--shadow-lg);
}
.pf-story__image-inner--main img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 装飾ビジュアルボックス（写真がない場合） */
.pf-story__image-deco-box {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-bg-sub) 0%, #c8e6d4 100%);
}
/* 緑バージョン（ストーリー02） */
.pf-story__image-deco-box--green {
  background: linear-gradient(135deg, #1a4a2e 0%, #2E8B57 60%, #3CB371 100%);
}

/* 装飾ボックス内コンテンツ */
.pf-story__deco-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.pf-story__deco-icon {
  width: 100px;
  height: 100px;
  opacity: 0.9;
}
.pf-story__deco-icon svg {
  width: 100%;
  height: 100%;
}
.pf-story__deco-year {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--color-gold);
}
.pf-story__deco-label {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--color-brown);
  letter-spacing: 0.06em;
}
.pf-story__deco-sublabel {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.06em;
  margin-top: -8px;
}


/* ========================================
   経歴タイムライン
======================================== */
.pf-timeline {
  padding: 100px 0;
  background: var(--color-bg-sub);
}

.pf-timeline__list {
  position: relative;
  max-width: 740px;
  margin: 0 auto;
  padding-left: 48px;
}

/* 縦の連結線 */
.pf-timeline__list::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 128px;
  width: 1px;
  height: calc(100% - 8px);
  background: linear-gradient(to bottom, var(--color-gold) 0%, rgba(60,179,113,0.1) 100%);
}

/* 各タイムラインアイテム */
.pf-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 80px 24px 1fr;
  gap: 0 24px;
  align-items: start;
  padding-bottom: 56px;
}
.pf-timeline__item:last-child {
  padding-bottom: 0;
}

/* 年号 */
.pf-timeline__year {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--color-gold);
  letter-spacing: 0.05em;
  text-align: right;
  padding-top: 3px;
}

/* ドット */
.pf-timeline__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-gold);
  margin-top: 6px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(60, 179, 113, 0.12);
}

/* コンテンツ */
.pf-timeline__content {
  padding-top: 0;
}
.pf-timeline__title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-brown);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  line-height: 1.5;
}
.pf-timeline__desc {
  font-size: 0.88rem;
  color: var(--color-text-sub);
  line-height: 2.2;
}


/* ========================================
   ミッション・想い
======================================== */
.pf-mission {
  padding: 100px 0;
  background: var(--color-white);
}

.pf-mission__inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.pf-mission__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 400;
  color: var(--color-brown);
  letter-spacing: 0.1em;
  margin-bottom: 48px;
}

/* 引用ブロック */
.pf-mission__quote {
  position: relative;
  margin: 0 auto 52px;
  padding: 40px 52px;
  background: var(--color-bg);
  border-radius: var(--radius);
  border-top: 3px solid var(--color-gold);
}
.pf-mission__quote::before {
  content: '\201C';
  position: absolute;
  top: -8px;
  left: 28px;
  font-family: Georgia, serif;
  font-size: 7rem;
  color: rgba(60, 179, 113, 0.1);
  line-height: 1;
}
.pf-mission__quote-text {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 400;
  color: var(--color-brown);
  line-height: 2;
  letter-spacing: 0.06em;
  position: relative;
  z-index: 1;
}

/* 本文 */
.pf-mission__body {
  text-align: left;
  max-width: 680px;
  margin: 0 auto 48px;
}
.pf-mission__body p {
  font-size: 0.95rem;
  color: var(--color-text-sub);
  line-height: 2.4;
  margin-bottom: 20px;
}
.pf-mission__body p:last-child {
  margin-bottom: 0;
}
.pf-mission__body strong {
  color: var(--color-brown);
  font-weight: 500;
}

/* ミッションの締めの言葉 */
.pf-mission__accent {
  display: inline-block;
  padding: 14px 36px;
  border: 1px solid rgba(60, 179, 113, 0.35);
  border-radius: 50px;
  background: var(--color-bg);
}
.pf-mission__accent span {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: var(--color-gold);
  letter-spacing: 0.12em;
}


/* ========================================
   ヘッダー：プロフィールページのアクティブ表示
======================================== */
.header__nav-link--active {
  color: var(--color-gold) !important;
}
.header__nav-link--active::after {
  width: 100% !important;
}


/* ========================================
   レスポンシブ：タブレット（768px以下）
======================================== */
@media (max-width: 768px) {

  /* ページヒーロー */
  .pg-hero {
    min-height: 380px;
    padding: 60px 20px;
  }
  .pg-hero__name {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
  }

  /* 基本情報 */
  .pf-intro {
    padding: 96px 0 64px;
  }
  .pf-intro__body {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pf-intro__image-wrap {
    max-width: 280px;
    margin: 0 auto;
  }

  /* ストーリー */
  .pf-story {
    padding: 64px 0;
  }
  .pf-story__body {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pf-story__body--reverse {
    direction: ltr;
  }
  .pf-story__body--reverse .pf-story__image {
    order: -1;
  }

  /* タイムライン */
  .pf-timeline {
    padding: 64px 0;
  }
  .pf-timeline__list {
    padding-left: 0;
  }
  .pf-timeline__list::before {
    left: 76px;
  }
  .pf-timeline__item {
    grid-template-columns: 56px 20px 1fr;
    gap: 0 14px;
  }
  .pf-timeline__year {
    font-size: 0.88rem;
  }

  /* ミッション */
  .pf-mission {
    padding: 64px 0;
  }
  .pf-mission__quote {
    padding: 28px 24px;
  }
  /* スマホ：引用・本文を左揃えにして折り返しを自然に */
  .pf-mission__inner {
    text-align: left;
  }
  .pf-mission__title {
    text-align: center; /* タイトルは中央維持 */
  }
  .pf-mission__quote-text {
    text-align: left;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .pf-mission__body p {
    font-size: 0.9rem;
    line-height: 2.1;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  /* キャッチコピー引用ブロック */
  .pf-intro__catch {
    font-size: 0.88rem;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  /* ミッションアクセントを中央維持 */
  .pf-mission__accent {
    display: block;
    text-align: center;
  }

}


/* ========================================
   レスポンシブ：スマートフォン（480px以下）
======================================== */
@media (max-width: 480px) {

  /* ヒーロー */
  .pg-hero__catch {
    font-size: 0.82rem;
    padding: 12px 16px;
  }

  /* 基本情報データ */
  .pf-intro__data-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding-bottom: 14px;
  }

  /* タイムライン：縦線を非表示 */
  .pf-timeline__list::before {
    display: none;
  }
  .pf-timeline__item {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-bottom: 36px;
  }
  .pf-timeline__dot {
    display: none;
  }
  .pf-timeline__year {
    text-align: left;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-gold);
  }

  /* ミッション accent */
  .pf-mission__accent {
    padding: 12px 20px;
  }
  .pf-mission__accent span {
    font-size: 0.8rem;
  }

}