@charset "UTF-8";

/* ===========================
   プロフィールページ専用CSS（about.css）
   philosophy.php と about.php を統合したページ用
   このファイルはaboutページにのみ適用されます
=========================== */

/* ===========================
   全セクション共通パーツ
=========================== */
section { padding: 96px 80px; }
/* 英語小見出し */
.section-label {
  font-size: var(--font-label);
  letter-spacing: 0.25em;
  color: var(--teal-dark);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--teal);
}
/* 日本語大見出し */
.section-title {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.5;
  margin-bottom: 16px;
  color: var(--navy);
}
/* メインボタン */
.btn-primary {
  background: var(--teal);
  color: var(--navy);
  padding: 16px 36px;
  font-size: var(--font-card);
  font-weight: 700;
  text-decoration: none;
  border-radius: 100px;
  display: inline-block;
  transition: all 0.2s;
  border: 2px solid var(--teal);
}
.btn-primary:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: var(--white);
}

/* ===========================
   1. ヒーローセクション（紺背景）
   ページ最上部のタイトルエリア
=========================== */
.hero {
  min-height: 50vh;
  background: var(--navy);
  display: flex;
  align-items: center;
  padding: 100px 80px 50px;
  position: relative;
  overflow: hidden;
}
/* 右上のグラデーション装飾 */
.hero::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(130,216,208,0.1) 0%, transparent 70%);
}
.hero-content { position: relative; z-index: 1; }
/* 英語ラベル */
.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-label);
  letter-spacing: 0.2em;
  color: var(--teal);
  margin-bottom: 28px;
}
.hero-label::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--teal);
}
/* ページタイトル */
.hero h1 {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(32px, 5vw, 56px);
  color: var(--white);
  line-height: 1.5;
  font-weight: 700;
  margin-bottom: 16px;
}
.hero h1 em { font-style: normal; color: var(--teal); }
/* サブテキスト */
.hero-sub {
  color: rgba(255,255,255,0.85);
  font-size: var(--font-card);
  line-height: 2.2;
  font-weight: 300;
}

/* ===========================
   2. OPENING：想い・導入テキスト（紺背景）
=========================== */
.opening {
  background: var(--bg2); /* HEROの紺と分離するため薄グレーに */
  padding: 96px 80px;
  text-align: center;
}
/* 引用テキスト（大きめ・ティール強調） */
.opening-quote {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(22px, 3vw, 34px);
  color: var(--navy); /* 背景が明るくなったので文字色を紺に */
  line-height: 2.0;
  margin-bottom: 48px;
}
.opening-quote em { font-style: normal; color: var(--teal-dark); }
/* 本文テキスト */
.opening-body {
  font-size: var(--font-card);
  color: var(--text-light); /* 背景が明るくなったので文字色を調整 */
  line-height: 2.4;
  font-weight: 300;
  max-width: 720px;
  margin: 0 auto;
}
.opening-body strong { color: var(--navy); font-weight: 700; }

/* ===========================
   3. プロフィールセクション（白背景）
   左：写真・名前 / 右：自己紹介・基本データ
=========================== */
.profile { background: var(--white); }
/* 左340px固定 / 右：テキスト */
.profile-inner {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 80px;
  align-items: start;
  margin-top: 56px;
}
/* 左列：写真エリア（スクロールしても固定） */
.profile-photo { position: sticky; top: 96px; }
/* 写真ボックス */
.profile-photo-box {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--bg2);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--border);
  color: var(--text-light);
  font-size: var(--font-label);
  gap: 12px;
  overflow: hidden; /* 写真がはみ出ないように */
}
.profile-photo-box span { font-size: 40px; }
/* 名前ブロック（写真下） */
.profile-name-block { margin-top: 24px; text-align: center; }
.profile-name-ja {
  font-family: 'Shippori Mincho', serif;
  font-size: 28px;
  color: var(--navy);
  font-weight: 700;
}
.profile-name-en {
  font-size: var(--font-label);
  color: var(--text-light);
  margin-top: 4px;
  letter-spacing: 0.1em;
}
.profile-title {
  font-size: var(--font-label);
  color: var(--teal-dark);
  font-weight: 700;
  margin-top: 8px;
}
/* 右列：自己紹介テキスト */
.profile-content h3 {
  font-family: 'Shippori Mincho', serif;
  font-size: 24px;
  color: var(--navy);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--teal-mid);
}
/* プロフィール：説明文 */
.profile-content p {
  color: var(--text-light);
  font-size: var(--font-card);
  line-height: 2.2;
  font-weight: 300;
  margin-bottom: 20px;
}
.profile-content strong { color: var(--navy); font-weight: 700; }
/* 基本データ表 */
.profile-data { margin-top: 40px; }
.profile-data-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--font-card);
}
/* データラベル（左列） */
.profile-data-label {
  color: var(--teal-dark);
  font-weight: 700;
  font-size: var(--font-label);
  padding-top: 2px;
}
/* データ値（右列） */
.profile-data-value { color: var(--text); font-weight: 300; }

/* ===========================
   4. STORY：詳細タイムラインセクション（薄グレー背景）
   ※philosophy.cssのタイムラインスタイルをそのまま使用
=========================== */
.story { background: var(--bg2); }
.story-inner { max-width: 800px; margin: 0 auto; }
.story-timeline { margin-top: 56px; }

/* タイムラインの1項目（左：年号 / 右：内容） */
.timeline-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 40px;
  margin-bottom: 56px;
  position: relative;
}
/* 項目間をつなぐ縦線 */
.timeline-item::before { content: ''; position: absolute; left: 58px; top: 40px; bottom: -56px; width: 2px; background: var(--border); }
.timeline-item:last-child::before { display: none; }

/* 年号エリア（左列） */
.timeline-year {
  text-align: center;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
/* タイムラインの見出しラベル（創業・転機など） */
.timeline-year span {
  font-family: 'Shippori Mincho', serif;
  font-size: var(--font-card);
  color: var(--teal-dark);
  font-weight: 700;
  letter-spacing: 0.05em;
  display: block;
  line-height: 1;
}
/* 年代ラベル（2010年代など） */
.timeline-year-label {
  font-size: var(--font-label);
  color: var(--text-light);
  font-weight: 300;
}
/* タイムラインの丸ポイント */
.timeline-dot {
  width: 14px;
  height: 14px;
  background: var(--teal);
  border-radius: 50%;
  border: 3px solid var(--white); /* philosophy.cssに合わせてwhite */
  box-shadow: 0 0 0 2px var(--teal);
  position: relative;
  left: auto;
  top: auto;
  flex-shrink: 0;
}

/* 右列のテキストエリア */
.timeline-content h3 { font-size: var(--font-card); font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.4; }
.timeline-content p { font-size: var(--font-card); color: var(--text-light); line-height: 2.2; font-weight: 300; }
.timeline-content strong { color: var(--navy); font-weight: 700; }
/* タイムライン内の強調ボックス */
.timeline-content .highlight { background: var(--teal-pale); border-left: 3px solid var(--teal); padding: 16px 20px; border-radius: 0 8px 8px 0; margin-top: 14px; font-size: var(--font-card); color: var(--navy); line-height: 2.2; font-weight: 300; }

/* ===========================
   5. 会社概要セクション（白背景）
   テーブル形式で会社情報を表示
=========================== */
.company { background: var(--white); }
.company-table {
  width: 100%;
  margin-top: 48px;
  border-collapse: collapse;
}
.company-table tr { border-bottom: 1px solid var(--border); }
.company-table tr:first-child { border-top: 1px solid var(--border); }
/* 左列（項目名・薄ティール背景） */
.company-table th {
  width: 200px;
  padding: 22px 24px;
  text-align: left;
  font-size: var(--font-label);
  font-weight: 700;
  color: var(--teal-dark);
  background: var(--teal-pale);
  vertical-align: top;
}
/* 右列（内容） */
.company-table td {
  padding: 22px 24px;
  font-size: var(--font-card);
  color: var(--text);
  line-height: 2;
  font-weight: 300;
}
/* 未入力のプレースホルダーテキスト */
.placeholder {
  color: var(--border);
  font-style: italic;
  border-bottom: 1px dashed var(--border);
  display: inline-block;
  min-width: 200px;
}

/* ===========================
   6. TREE：木の理論セクション（白背景）
=========================== */
.tree { background: var(--white); text-align: left; }
/* 副タイトル */
.tree-subtitle {
  font-size: var(--font-label);
  color: var(--teal-dark);
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-bottom: 40px;
}
/* 左：木の層 / 右：テキスト */
.tree-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  margin-top: 48px;
  text-align: left;
}
/* 木の層ボックス */
.tree-layer {
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 4px;
}
/* 根っこ：ダークネイビー */
.tree-layer-root { background: var(--navy); color: var(--white); }
/* 幹：ダークティール */
.tree-layer-trunk { background: var(--teal-dark); color: var(--white); }
/* 枝葉：薄ティール */
.tree-layer-leaves { background: var(--teal-pale); color: var(--navy); }
/* 層ラベル（ROOT etc） */
.tree-layer-label {
  font-size: var(--font-label);
  letter-spacing: 0.2em;
  opacity: 0.8;
  margin-bottom: 6px;
}
/* 層タイトル */
.tree-layer-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
/* 層説明文 */
.tree-layer-desc {
  font-size: var(--font-card);
  line-height: 1.9;
  font-weight: 300;
  opacity: 0.9;
}
/* 右側テキストエリア */
.tree-text p {
  font-size: var(--font-card);
  color: var(--text-light);
  line-height: 2.2;
  font-weight: 300;
  margin-bottom: 20px;
}
.tree-text strong { color: var(--navy); font-weight: 700; }

/* ===========================
   7. TOIRYOKU：問い力セクション（薄グレー背景）
=========================== */
.toiryoku { background: var(--bg2); }
.toiryoku .section-title { max-width: 700px; }
/* 左：テキスト / 右：4ステップ */
.toiryoku-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  margin-top: 56px;
}
/* 左列テキスト */
.toiryoku-left p {
  font-size: var(--font-card);
  color: var(--text-light);
  line-height: 2.2;
  font-weight: 300;
  margin-bottom: 20px;
}
.toiryoku-left strong { color: var(--navy); font-weight: 700; }
/* 右列：ステップリスト */
.toiryoku-steps { display: flex; flex-direction: column; gap: 20px; }
/* ステップ1項目（番号＋テキスト横並び） */
.toiryoku-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--white);
  border-radius: 14px;
  padding: 24px 28px;
  border: 1px solid var(--border);
}
/* 番号バッジ */
.step-num {
  width: 36px;
  height: 36px;
  background: var(--teal);
  color: var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
/* ステップ内容 */
.step-content h4 {
  font-size: var(--font-card);
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 6px;
}
.step-content p {
  font-size: var(--font-card);
  color: var(--text-light);
  line-height: 2.0;
  font-weight: 300;
  margin: 0;
}

/* ===========================
   8. VALUES：価値観セクション（紺背景）
   3列カードで価値観・こだわりを表示
=========================== */
.values { background: var(--navy); }
.values .section-label { color: var(--teal); }
.values .section-label::before { background: var(--teal); }
.values .section-title { color: var(--white); }
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.value-card {
  background: rgba(130,216,208,0.06);
  border: 1px solid rgba(130,216,208,0.2);
  border-radius: 16px;
  padding: 36px 28px;
  transition: all 0.3s;
}
.value-card:hover {
  background: rgba(130,216,208,0.12);
  border-color: rgba(130,216,208,0.4);
}
/* 価値観カード：アイコン＋見出しを横並び */
.value-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.value-card-header .value-icon {
  font-size: 28px;
  background: rgba(130,216,208,0.2);
  border-radius: 10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* 価値観カード：見出し */
.value-card-header h3 {
  font-size: var(--font-card);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0;
}
/* 価値観カード：説明文 */
.value-card p {
  font-size: var(--font-card);
  color: rgba(255,255,255,0.85);
  line-height: 2.0;
  font-weight: 300;
}

/* ===========================
   9. SHIGOTO：志事セクション（紺背景）
=========================== */
.shigoto { background: var(--navy); }
.shigoto-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.shigoto .section-label { justify-content: center; color: var(--teal); }
.shigoto .section-label::before { background: var(--teal); }
.shigoto .section-title { color: var(--white); }
/* 志事の大きな文字 */
.shigoto-word {
  margin: 48px 0 40px;
  padding: 40px;
  background: rgba(130,216,208,0.08);
  border: 1px solid rgba(130,216,208,0.25);
  border-radius: 20px;
}
.shigoto-word-main {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(48px, 8vw, 80px);
  color: var(--teal);
  line-height: 1;
  margin-bottom: 12px;
}
.shigoto-word-sub {
  font-size: var(--font-card);
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.1em;
}
/* 志事：本文 */
.shigoto-body p {
  font-size: var(--font-card);
  color: rgba(255,255,255,0.85);
  line-height: 2.4;
  font-weight: 300;
  margin-bottom: 20px;
  text-align: left;
}
.shigoto-body strong { color: var(--teal); font-weight: 700; }

/* ===========================
   10. TAGLINE：締めキャッチセクション（薄ティール背景）
=========================== */
.tagline-section {
  background: var(--teal-pale);
  padding: 96px 80px;
  text-align: center;
  border-top: 3px solid var(--teal);
  border-bottom: 3px solid var(--teal);
}
/* メインキャッチ */
.tagline-main {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(28px, 4vw, 48px);
  color: var(--navy);
  line-height: 1.6;
  margin-bottom: 24px;
}
.tagline-main em { font-style: normal; color: var(--teal-dark); }
/* サブテキスト */
.tagline-sub {
  font-size: var(--font-card);
  color: var(--text-light);
  line-height: 2.2;
  font-weight: 300;
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ===========================
   11. CTAセクション（薄ティール背景）
   お問合せ誘導エリア
=========================== */
.cta {
  background: var(--teal-pale);
  text-align: center;
  border-top: 3px solid var(--teal);
}
.cta h2 {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(26px, 4vw, 40px);
  color: var(--navy);
  line-height: 1.6;
  margin-bottom: 16px;
}
.cta h2 em { font-style: normal; color: var(--teal-dark); }
/* CTA：説明文 */
.cta p {
  color: var(--text-light);
  font-size: var(--font-card);
  line-height: 2.2;
  font-weight: 300;
  margin-bottom: 40px;
}

/* ===========================
   レスポンシブ：タブレット以下（900px以下）
=========================== */
@media (max-width: 900px) {
  section { padding: 64px 28px; }
  header { padding: 0 24px; }
  .hero { padding: 120px 28px 64px; }
  .opening { padding: 64px 28px; }
  .tagline-section { padding: 64px 28px; }

  /* プロフィール：写真・テキストを縦並びに */
  .profile-inner { grid-template-columns: 1fr; gap: 40px; }
  .profile-photo { position: static; } /* sticky解除 */
  .profile-photo-box { aspect-ratio: 1/1; max-width: 280px; margin: 0 auto; }

  /* タイムライン：列幅を縮小 */
  .timeline-item { grid-template-columns: 80px 1fr; gap: 20px; }
  .timeline-item::before { left: 38px; }

  /* 木の理論・問い力：縦並びに */
  .tree-inner { grid-template-columns: 1fr; gap: 32px; }
  .toiryoku-inner { grid-template-columns: 1fr; gap: 40px; }

  /* 価値観：縦並びに */
  .values-grid { grid-template-columns: 1fr; }

  /* 会社概要：ラベル列を縮小 */
  .company-table th { width: 120px; }

  /* ハンバーガーメニュー対応 */
  nav a:not(.nav-cta) { display: none; }
}

/* ===========================
   レスポンシブ：スマホ（600px以下）
=========================== */
@media (max-width: 600px) {
  p, li, td { font-size: 18px !important; line-height: 2.2 !important; }
  .shigoto-word { padding: 28px 20px; }
  .toiryoku-step { padding: 18px 20px; }
  .timeline-content { padding: 24px 20px; }
}