/* ============================================================
   下層ページ（About準拠）スタイル
   ・page-lower.php 用。全セレクタを .tp-page 配下に限定。
   ・cocoon-child 直下に置き、tp-global.css の後に読み込む
     （functions-global-header.php の enqueue に追記済み）。
   ============================================================ */

.tp-page{
  --p-fg:#1a1a1a; --p-muted:#8a8a8a; --p-line:#e2e2e2; --p-accent:#1a1a1a;
  width:80%;
  max-width:1100px;
  margin:0 auto;
  padding:72px 0 120px;
  color:var(--p-fg);
  font-feature-settings:"palt";
  line-height:1.95;
  letter-spacing:.02em;
}

/* ===== タイトル帯 ===== */
.tp-page__head{
  text-align:left;
  padding:24px 0 40px;
  margin-bottom:48px;
}
.tp-page__title{
  display:inline-block;
  font-size:clamp(26px,4.5vw,42px);
  font-weight:700;
  margin:0;
  line-height:0.9;
  border-bottom:1px solid var(--p-accent);
}
.tp-page__en{
  margin:14px 0 0;
  font-size:12px;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--p-muted);
}

/* ===== リード ===== */
.tp-page__lead{
  font-size:16px;
  color:#333;
  margin-bottom:56px;
}
.tp-page__lead p{ margin:0 0 1em; }

/* ===== 本文 共通 ===== */
.tp-page__body{ font-size:15px; }
.tp-page__body p{ margin:0 0 1.6em; }
.tp-page__body a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.tp-page__body a:hover{ opacity:.6; }

/* 大見出し（番号セクション） h2 */
.tp-page__body h2{
  counter-increment:tp-sec;
  font-size:21px;
  font-weight:700;
  margin:72px 0 28px;
  padding-bottom:18px;
  border-bottom:2px solid var(--p-accent);
  line-height:1.4;
}
.tp-page__body h2::before{
  content:counter(tp-sec) ". ";
}
.tp-page{ counter-reset:tp-sec; }

/* 小見出し（Q）h3 */
.tp-page__body h3{
  font-size:16.5px;
  font-weight:700;
  margin:48px 0 16px;
  padding-left:16px;
  border-left:3px solid var(--p-accent);
  line-height:1.6;
}

/* 引用・補足 */
.tp-page__body blockquote{
  margin:32px 0;
  padding:20px 24px;
  background:#f6f6f4;
  border:none;
  color:#444;
  font-size:14.5px;
}
.tp-page__body blockquote p:last-child{ margin-bottom:0; }

/* 画像・図版 */
.tp-page__body img,
.tp-page__body figure{
  display:block;
  max-width:100%;
  height:auto;
  margin:40px auto;
}
.tp-page__body figure img{ margin:0 auto; }
.tp-page__body figcaption{
  margin-top:10px;
  text-align:center;
  font-size:12px;
  color:var(--p-muted);
}

/* リスト */
.tp-page__body ul,
.tp-page__body ol{ margin:0 0 1.6em; padding-left:1.4em; }
.tp-page__body li{ margin:.4em 0; }

/* 署名（本文末尾で右寄せにしたい場合、エディタで <p class="tp-sign"> を使う） */
.tp-page__body .tp-sign{
  text-align:right;
  margin-top:48px;
  font-weight:700;
}

/* ===== スマホ ===== */
@media (max-width:768px){
  .tp-page{ width:88%; padding:48px 0 100px; line-height:1.9; }
  /* スマホは従来どおり中央寄せ */
  .tp-page__head{ text-align:center; padding:8px 0 36px; margin-bottom:36px; }
  .tp-page__body h2{ margin:56px 0 22px; font-size:19px; }
  .tp-page__body h3{ margin:36px 0 14px; }
}