@charset "UTF-8";

/* ==========================================================================
   デザイントークン
   2026年10月のリブランディングでは、原則この :root の値だけを差し替えます。
   個別セレクタに色やサイズを直書きしないでください。
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     色
     ※「仮」と書かれた値は、XDに指定がなかったため補完したものです。
        指定が判明したら差し替えてください。
     ------------------------------------------------------------------ */
  --color-text:        #333333;
  --color-text-muted:  #666666;   /* 仮：本文より薄い文字（日付・キャプション） */
  --color-bg:          #ffffff;
  --color-bg-subtle:   #f7f7f7;   /* 仮：セクション背景・引用・監修者枠 */
  --color-accent:      #9E7528;   /* ブランドの金色 */
  --color-border:      #333333;   /* ボタン枠など、はっきり見せる線 */
  --color-rule:        #d6d6d6;   /* 仮：一覧の区切り線など、控えめな線 */

  /* ------------------------------------------------------------------
     フォント
     ------------------------------------------------------------------ */
  --font-base:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* ------------------------------------------------------------------
     文字サイズ
     ------------------------------------------------------------------ */
  --size-body:    15px;
  --size-small:   13px;   /* 仮 */
  --size-h1:      30px;
  --size-h2:      30px;
  --size-h3:      20px;   /* 仮 */
  --line-height:  1.9;    /* 仮 */

  /* ------------------------------------------------------------------
     余白
     指定のあった「要素間25px」「セクション間140px」を基準に組み立てています。
     ------------------------------------------------------------------ */
  --space-xs:   8px;    /* 仮 */
  --space-sm:  16px;    /* 仮 */
  --space-md:  25px;    /* 要素間（標準） */
  --space-lg:  60px;    /* 仮：中見出しブロック間 */
  --space-xl: 140px;    /* セクション間 */

  /* ------------------------------------------------------------------
     レイアウト
     ------------------------------------------------------------------ */
  --width-wide:    1200px;  /* 画像を含むコンテンツの最大幅 */
  --width-content:  750px;  /* 本文テキストの幅（中央配置） */
  --gutter:        20px;    /* 仮：左右の余白 */

  /* ------------------------------------------------------------------
     その他
     ------------------------------------------------------------------ */
  --radius: 0;        /* 仮：明朝＋直線基調のため角丸なし */
  --btn-height: 42px;

  /* ------------------------------------------------------------------
     ブレークポイント（CSS変数はメディアクエリに使えないため参考値）
       タブレット: 1024px以下  仮
       スマートフォン: 767px以下  仮
     ------------------------------------------------------------------ */
}

/* ==========================================================================
   ベース
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--size-body);
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-bg);
  font-feature-settings: "palt";
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
a:hover { color: var(--color-accent); }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  line-height: 1.5;
  font-weight: 600;
}
h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }

/* ==========================================================================
   レイアウト
   ========================================================================== */

.l-container {
  width: min(100% - (var(--gutter) * 2), var(--width-wide));
  margin-inline: auto;
}

.l-container--narrow {
  width: min(100% - (var(--gutter) * 2), var(--width-content));
}

.l-main { padding-block: var(--space-lg) var(--space-xl); }

/* ヘッダー */
.l-header {
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-sm);
}
.l-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.l-header__logo { font-size: 1.125rem; font-weight: 600; text-decoration: none; }
.l-header nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--size-small);
}
.l-header nav a { text-decoration: none; }

/* フッター */
.l-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  padding-block: var(--space-lg);
  font-size: var(--size-small);
}
.l-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
}
.l-footer nav a { text-decoration: none; }
.l-footer__copyright { color: var(--color-text-muted); }

/* ==========================================================================
   コンポーネント
   ========================================================================== */

/* パンくず */
.c-breadcrumb {
  font-size: var(--size-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.c-breadcrumb a { text-decoration: none; }

/* ページ見出し */
.c-page-header { margin-bottom: var(--space-lg); }
.c-page-header__title { margin: 0 0 var(--space-xs); }
.c-page-header__lead { color: var(--color-text-muted); margin: 0; }

/* 記事カード一覧 */
.c-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-card { display: flex; flex-direction: column; }
.c-card__thumb {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  background: var(--color-bg-subtle);
  border-radius: var(--radius);
}
.c-card__meta {
  display: flex;
  gap: var(--space-xs);
  align-items: baseline;
  font-size: var(--size-small);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}
.c-card__category { color: var(--color-accent); }
.c-card__title { font-size: 1rem; margin: 0.25rem 0 0; line-height: 1.6; }
.c-card__title a { text-decoration: none; }

/* お知らせ（テキストリスト） */
.c-news-list { list-style: none; margin: 0; padding: 0; }
.c-news-list li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}
.c-news-list time { color: var(--color-text-muted); font-size: var(--size-small); min-width: 7em; }
.c-news-list a { text-decoration: none; }

/* カテゴリ絞り込み */
.c-category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  font-size: var(--size-small);
}
.c-category-nav a {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
}
.c-category-nav a:hover,
.c-category-nav .is-current a {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* ページネーション */
.c-pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  font-size: var(--size-small);
}
.c-pagination .page-numbers {
  display: inline-block;
  min-width: 2.25rem;
  padding: 0.4rem;
  text-align: center;
  border: 1px solid var(--color-border);
  text-decoration: none;
}
.c-pagination .current { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* ==========================================================================
   記事本文
   ========================================================================== */

.p-entry__header { margin-bottom: var(--space-md); }
.p-entry__title { margin: 0 0 var(--space-xs); }
.p-entry__meta {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--size-small);
  color: var(--color-text-muted);
}
.p-entry__hero { margin-bottom: var(--space-md); border-radius: var(--radius); }

.p-entry__body > * + * { margin-top: 1.5em; }
.p-entry__body h2 {
  margin-top: 2.5em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--color-border);
}
.p-entry__body h3 { margin-top: 2em; }
.p-entry__body img { margin-inline: auto; border-radius: var(--radius); }
.p-entry__body figcaption {
  font-size: var(--size-small);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-xs);
}
.p-entry__body blockquote {
  margin-inline: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-subtle);
  border-left: 3px solid var(--color-accent);
}
.p-entry__body table { width: 100%; border-collapse: collapse; font-size: var(--size-small); }
.p-entry__body th, .p-entry__body td {
  border: 1px solid var(--color-border);
  padding: 0.6em 0.8em;
  text-align: left;
}
.p-entry__body th { background: var(--color-bg-subtle); }

/* 前後記事 */
.p-entry-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: var(--size-small);
}
.p-entry-nav a { text-decoration: none; }

/* 関連記事 */
.p-related { margin-top: var(--space-xl); }
.p-related__title { font-size: var(--size-h3); margin-bottom: var(--space-md); }

/* ==========================================================================
   ユーティリティ
   ========================================================================== */

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* スキップリンク（アクセシビリティ） */
.u-skip-link {
  position: absolute;
  left: -9999px;
}
.u-skip-link:focus {
  left: var(--space-sm);
  top: var(--space-sm);
  z-index: 100;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-text);
  color: #fff;
}

/* ==========================================================================
   Webflowから引き継いだ記事本文のスタイル
   Webflowのリッチテキストが出力するクラスに対応させています。
   画像の配置指定（fullwidth など）の情報がクラス名に入っているため、
   本文HTMLを書き換えずにここで再現します。
   ========================================================================== */

.p-entry__body figure {
  margin-inline: 0;
  margin-block: 2em;
}
.p-entry__body figure > div { display: block; }
.p-entry__body figure img { width: 100%; height: auto; }

.p-entry__body .w-richtext-align-fullwidth {
  width: 100%;
  max-width: 100% !important;
  clear: both;
}
.p-entry__body .w-richtext-align-center {
  clear: both;
  margin-inline: auto;
  text-align: center;
}
.p-entry__body .w-richtext-align-normal { clear: both; }
.p-entry__body .w-richtext-align-floatleft {
  float: left;
  clear: none;
  margin-right: var(--space-sm);
  max-width: 50%;
}
.p-entry__body .w-richtext-align-floatright {
  float: right;
  clear: none;
  margin-left: var(--space-sm);
  max-width: 50%;
}
.p-entry__body .w-richtext-figcaption-placeholder { display: none; }

/* ==========================================================================
   監修者・執筆者プロフィール
   Webflowの埋め込みブロック（.superviser-*）に対応します。
   写真は背景画像として指定されているため、URLが判明した分だけ下部で定義します。
   ========================================================================== */

.superviser-wrapper { margin-top: var(--space-lg); }

.superviser-content {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.superviser-content .paragraph-92 {
  margin: 0 0 var(--space-sm);
  font-size: var(--size-small);
  letter-spacing: .08em;
  color: var(--color-text-muted);
}

.superviser-photo-text {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

/* .superviser-photo / .superviser-photo-uchimoto など表記ゆれをまとめて拾う */
.superviser-photo-text [class*="superviser-photo"] {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-color: var(--color-border);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.superviser-text { flex: 1 1 auto; }
.superviser-text p { margin: 0 0 .6em; }
.superviser-text .paragraph-93 {
  font-size: var(--size-small);
  line-height: 1.8;
  color: var(--color-text-muted);
}
.superviser-text a { color: var(--color-accent); }

@media (max-width: 600px) {
  .superviser-photo-text { flex-direction: column; }
  .superviser-photo-text [class*="superviser-photo"] { flex-basis: 80px; width: 80px; height: 80px; }
}

/* --------------------------------------------------------------------------
   監修者の顔写真
   記事本文に <style> が埋め込まれている監修者（山本・田中・上村）は
   そちらが優先されるため、ここでの指定は不要です。
   下記3名は Webflow 側のCSSに写真URLがあり、まだ取得できていません。
   URLが判明したら background-image を追記してください。
   -------------------------------------------------------------------------- */

/*
.superviser-photo-text .superviser-photo          { background-image: url(); }  ← 井林雄太
.superviser-photo-text .superviser-photo.hisano   { background-image: url(); }  ← 久野伸夫
.superviser-photo-text .superviser-photo-uchimoto { background-image: url(); }  ← 内本菜穂
*/


/* ==========================================================================
   トップページ／下層ページ共通のセクション部品
   XDのトップページ構成に合わせた部品群です。
   ========================================================================== */

/* セクション ------------------------------------------------------------ */

.p-section { padding-block: var(--space-xl); }
.p-section + .p-section { padding-top: 0; }

.p-section__title {
  font-family: var(--font-serif);
  font-size: var(--size-h2);
  font-weight: 500;
  text-align: center;
  letter-spacing: .1em;
  margin: 0 0 var(--space-lg);
}

.p-section__title--en {
  font-size: 26px;
  letter-spacing: .12em;
}

.p-section__more {
  margin-top: var(--space-lg);
  text-align: center;
}

/* ボタン ---------------------------------------------------------------- */

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height);
  padding: 0 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  font-size: 14px;
  letter-spacing: .08em;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.c-button:hover { background: var(--color-text); color: #fff; }

.c-button--fill { background: var(--color-text); color: #fff; }
.c-button--fill:hover { opacity: .8; color: #fff; }

/* 画像＋テキストの2カラム ------------------------------------------------ */

.p-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.p-media--reverse .p-media__figure { order: 2; }

.p-media__figure { margin: 0; }
.p-media__figure img { width: 100%; height: auto; }

.p-media__body { max-width: 480px; }
.p-media__title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 var(--space-md);
}
.p-media__text { margin: 0 0 var(--space-md); }

/* 3カラムのカード -------------------------------------------------------- */

.p-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-cards__item figure { margin: 0 0 var(--space-sm); }
.p-cards__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.p-cards__label {
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: .1em;
  margin: 0 0 var(--space-xs);
}
.p-cards__text { font-size: var(--size-small); color: var(--color-text-muted); margin: 0; }

/* ヒーロー ---------------------------------------------------------------- */

.p-hero { position: relative; }
.p-hero img { width: 100%; height: auto; }
.p-hero__copy {
  position: absolute;
  inset-inline: 0;
  top: 12%;
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: .18em;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
}

/* ==========================================================================
   フッター（濃色）
   ========================================================================== */

.l-footer {
  border-top: 0;
  background: #1a1a1a;
  color: #fff;
  padding-block: var(--space-lg);
  font-size: var(--size-small);
}
.l-footer a { color: #fff; }
.l-footer a:hover { color: #fff; opacity: .65; }
.l-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
}
.l-footer__copyright { color: rgba(255,255,255,.6); margin: 0; }

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

@media (max-width: 1024px) {
  :root { --space-xl: 90px; --space-lg: 40px; }
  .p-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  :root { --space-xl: 64px; --gutter: 16px; }
  .p-media { grid-template-columns: 1fr; gap: var(--space-md); }
  .p-media--reverse .p-media__figure { order: 0; }
  .p-media__body { max-width: none; }
  .p-cards { grid-template-columns: 1fr; }
  .c-card-list { grid-template-columns: 1fr; }
  .l-header__inner { flex-direction: column; align-items: flex-start; }
}


/* ==========================================================================
   セクション見出し（日本語＋英語＋区切り線）
   ========================================================================== */

.p-section__head {
  text-align: center;
  margin-bottom: var(--space-lg);
}
.p-section__head .p-section__title {
  color: var(--color-accent);
  font-size: 22px;
  letter-spacing: .12em;
  margin: 0;
}
.p-section__head .p-section__title-en {
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: .3em;
  color: var(--color-text);
  margin: 10px 0 0;
}
.p-section__head::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--color-rule);
  margin-top: var(--space-md);
}

/* ==========================================================================
   最新情報リスト（日付を上、タイトルを下に置く形）
   ========================================================================== */

.c-news-list li {
  display: block;
  padding-block: 20px;
  border-bottom: 1px solid var(--color-rule);
}
.c-news-list time {
  display: block;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 8px;
}
.c-news-list a {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.7;
  padding-left: 1em;
}

/* ==========================================================================
   固定ヘッダー
   トップページではヒーロー画像に重ねて白文字、
   スクロールすると白背景・黒文字に切り替わります。
   ========================================================================== */

.l-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--color-rule);
  transition: background-color .3s ease, box-shadow .3s ease;
}

body.home .l-header {
  position: fixed;
  inset-inline: 0;
  background: transparent;
  border-bottom: 0;
  color: #fff;
}
body.home .l-header a { color: #fff; }

body.home .l-header.is-scrolled {
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
}
body.home .l-header.is-scrolled a { color: var(--color-text); }

/* トップページは本文がヘッダーの下に潜るため、上余白を消す */
body.home .l-main { padding-top: 0; }

/* ==========================================================================
   金色のお知らせ帯（最新の1件を表示。固定はしない）
   ========================================================================== */

.p-newsbar {
  background: linear-gradient(90deg, #c9b483 0%, var(--color-accent) 50%, #c9b483 100%);
  color: #fff;
}
.p-newsbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 52px;
  padding-block: 10px;
}
.p-newsbar__label {
  flex: 0 0 auto;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: .18em;
}
.p-newsbar__body {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  min-width: 0;
}
.p-newsbar time { font-size: 13px; opacity: .9; flex: 0 0 auto; }
.p-newsbar a {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p-newsbar a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 767px) {
  .p-newsbar__inner { flex-direction: column; align-items: flex-start; gap: 4px; }
  .p-newsbar a { white-space: normal; }
  .c-news-list a { padding-left: 0; font-size: 15px; }
}


/* ==========================================================================
   一覧ページ（ジャーナル記事・最新情報）
   ========================================================================== */

.p-archive__title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: .12em;
  text-align: center;
  margin: 0 0 var(--space-lg);
}

/* 絞り込み（カテゴリ／年） */
.c-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  font-size: 15px;
}
.c-filter a {
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}
.c-filter a:hover { color: var(--color-accent); }
.c-filter .is-current a {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* 4カラムのカード一覧 */
.c-card-list { grid-template-columns: repeat(4, 1fr); gap: var(--space-lg) var(--space-md); }
.c-card__thumb { aspect-ratio: 16 / 10; border-radius: 0; }
.c-card__meta { margin-top: 12px; font-size: 13px; }
.c-card__title {
  font-size: 14px;
  line-height: 1.9;
  margin-top: 4px;
  font-weight: 400;
}

/* ページネーション */
.c-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: var(--space-xl);
  font-size: 14px;
}
.c-pagination .page-numbers {
  min-width: auto;
  padding: 0 2px 4px;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--color-text-muted);
}
.c-pagination .page-numbers:hover { color: var(--color-accent); }
.c-pagination .current {
  background: transparent;
  color: var(--color-text);
  border-bottom-color: var(--color-text);
}
.c-pagination .prev,
.c-pagination .next {
  position: relative;
  width: 64px;
  height: 1px;
  background: var(--color-text);
  text-indent: -9999px;
  overflow: hidden;
  margin-inline: var(--space-sm);
}
.c-pagination .prev::before,
.c-pagination .next::before {
  content: "";
  position: absolute;
  top: -4px;
  width: 10px;
  height: 1px;
  background: var(--color-text);
}
.c-pagination .prev::before { left: 0; transform: rotate(-30deg); transform-origin: left center; }
.c-pagination .next::before { right: 0; transform: rotate(30deg); transform-origin: right center; }

/* ==========================================================================
   フッター（多段組み＋連絡先）
   ========================================================================== */

.l-footer__inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-lg);
  align-items: start;
}
.l-footer__contact-title {
  font-size: 13px;
  letter-spacing: .12em;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.35);
  margin: 0 0 var(--space-sm);
}
.l-footer__address { font-size: 12px; line-height: 2; color: rgba(255,255,255,.85); margin: 0 0 var(--space-sm); }
.l-footer__address b { display: block; font-weight: 500; color: #fff; }
.l-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  font-size: 12px;
  color: rgba(255,255,255,.6);
}

@media (max-width: 1024px) {
  .c-card-list { grid-template-columns: repeat(3, 1fr); }
  .l-footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .c-card-list { grid-template-columns: 1fr; }
  .p-archive__title { font-size: 22px; }
  .c-filter { gap: var(--space-sm); font-size: 14px; }
  .c-pagination .prev, .c-pagination .next { width: 36px; }
  .l-footer__bottom { flex-direction: column; gap: 6px; }
}


/* ==========================================================================
   記事詳細（最新情報）
   ========================================================================== */

.p-entry--news { margin-top: var(--space-lg); }

.p-entry__date {
  width: min(100%, var(--width-content));
  margin: 0 auto var(--space-sm);
  font-size: 13px;
}

.p-entry__media {
  width: min(100%, 1000px);
  margin: 0 auto var(--space-md);
}
.p-entry__media img { width: 100%; height: auto; }

.p-entry__body--narrow {
  width: min(100%, var(--width-content));
  margin-inline: auto;
}

/* 記事下の共通ブロック（お問い合わせ・LINE） ------------------------------ */

.p-contact {
  width: min(100%, var(--width-content));
  margin: var(--space-xl) auto 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}
.p-contact__title {
  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 var(--space-sm);
}
.p-contact__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
}
.p-contact__note {
  font-size: 13px;
  line-height: 2;
  margin: 0 0 var(--space-md);
}
.p-contact__line-lead { font-size: 14px; margin: 0 0 var(--space-sm); }

.c-line-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 24px;
  background: #06c755;
  color: #fff;
  border-radius: 26px;
  text-decoration: none;
  font-size: 15px;
}
.c-line-button::after { content: "\203A"; font-size: 20px; margin-left: 8px; }
.c-line-button:hover { color: #fff; opacity: .85; }
.c-line-button.is-disabled { background: #b7b7b7; cursor: not-allowed; }

/* その他の記事 ------------------------------------------------------------ */

.p-other { margin-top: var(--space-xl); }
.p-other__title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .08em;
  margin: 0 0 var(--space-md);
}
.c-card-list--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 767px) {
  .c-card-list--3 { grid-template-columns: 1fr; }
  .p-contact__buttons { flex-direction: column; }
  .p-contact__buttons .c-button { width: 100%; }
}


/* ==========================================================================
   タブ（技術・研究）
   ========================================================================== */

.c-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  margin: var(--space-lg) 0 var(--space-xl);
  padding: 0;
}
.c-tabs__btn {
  appearance: none;
  min-width: 180px;
  min-height: var(--btn-height);
  padding: 0 24px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: 14px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.c-tabs__btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.c-tabs__btn.is-current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.c-tabs__panel { display: none; }
.c-tabs__panel.is-current { display: block; }

.c-tabs__panel-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .12em;
  text-align: center;
  margin: 0 0 var(--space-lg);
}

@media (max-width: 767px) {
  .c-tabs { gap: 8px; }
  .c-tabs__btn { min-width: 0; flex: 1 1 30%; padding: 0 8px; font-size: 12px; }
}


/* ==========================================================================
   ロゴ
   logo.svg は白抜きのため、明るい背景では filter で黒に反転させます。
   ========================================================================== */

.l-header__logo { display: inline-flex; line-height: 0; }
.l-header__logo img { width: 140px; height: auto; }

/* 通常ページ（白背景のヘッダー）＝ 黒 */
.l-header__logo img { filter: brightness(0); }

/* トップページのヒーロー上 ＝ 白のまま */
body.home .l-header:not(.is-scrolled) .l-header__logo img { filter: none; }

.l-footer__logo img { width: 140px; height: auto; }

/* ==========================================================================
   ヒーロー
   ========================================================================== */

.p-hero { position: relative; line-height: 0; }
.p-hero img { width: 100%; height: auto; }
.p-hero__copy {
  position: absolute;
  inset-inline: 0;
  top: 14%;
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.1vw, 30px);
  letter-spacing: .2em;
  line-height: 1.8;
  color: #fff;
  text-shadow: 0 1px 16px rgba(0,0,0,.35);
  margin: 0;
}

/* ==========================================================================
   メッセージ（トップの理念文）
   背景に銀色のリング（top_bk_1.png）を重ねます。
   ========================================================================== */

.p-message {
  position: relative;
  padding-block: var(--space-xl);
  overflow: hidden;
}
.p-message::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(90vw, 1000px);
  aspect-ratio: 1400 / 934;
  transform: translate(-50%, -50%);
  background: url("/wp-content/themes/yoando-corp/assets/img/top_bk_1.png") no-repeat center / contain;
  opacity: .9;
  pointer-events: none;
}
.p-message__body {
  position: relative;
  text-align: center;
  line-height: 2.4;
  font-size: 15px;
}
.p-message__body p { margin: 0 0 2em; }

/* ==========================================================================
   背景の金色装飾
   ページ全体の左右に、うっすらと曲線を敷きます。
   ========================================================================== */

body.home::before,
body.home::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
}
body.home::before {
  top: 8vh;
  left: -8vw;
  width: 34vw;
  aspect-ratio: 1786 / 2043;
  background: url("/wp-content/themes/yoando-corp/assets/img/top_bk_3.png") no-repeat left top / contain;
}
body.home::after {
  bottom: 6vh;
  right: -6vw;
  width: 32vw;
  aspect-ratio: 2014 / 1842;
  background: url("/wp-content/themes/yoando-corp/assets/img/top_bk_4.png") no-repeat right bottom / contain;
}

/* 3カラムカードの画像リンク */
.p-cards__item a { display: block; line-height: 0; }
.p-cards__item figure img { width: 100%; height: auto; aspect-ratio: 380 / 260; object-fit: cover; }

@media (max-width: 767px) {
  body.home::before, body.home::after { display: none; }
  .p-hero__copy { top: 10%; letter-spacing: .12em; }
  .l-header__logo img { width: 110px; }
}


/* ==========================================================================
   ハンバーガーメニュー（スマートフォン・タブレット）
   ========================================================================== */

.l-header__toggle {
  display: none;
  position: relative;
  z-index: 120;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.l-header__toggle span {
  display: block;
  position: absolute;
  left: 10px;
  width: 24px;
  height: 1.5px;
  background: currentColor;
  transition: transform .3s ease, opacity .2s ease;
}
.l-header__toggle span:nth-child(1) { top: 15px; }
.l-header__toggle span:nth-child(2) { top: 21px; }
.l-header__toggle span:nth-child(3) { top: 27px; }

/* 開いているとき ＝ ×印 */
body.is-nav-open .l-header__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.is-nav-open .l-header__toggle span:nth-child(2) { opacity: 0; }
body.is-nav-open .l-header__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1024px) {

  .l-header__toggle { display: block; }

  /* メニュー本体：全画面のオーバーレイ */
  .l-nav {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  body.is-nav-open .l-nav { opacity: 1; visibility: visible; }

  .l-header nav ul {
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    font-family: var(--font-serif);
    font-size: 17px;
    letter-spacing: .1em;
  }
  .l-header nav a { color: var(--color-text); }

  /* 開いている間は背面をスクロールさせない */
  body.is-nav-open { overflow: hidden; }

  /* トップページでも、開いたらボタンは黒にする */
  body.home.is-nav-open .l-header__toggle { color: var(--color-text); }
  body.home.is-nav-open .l-header__logo img { filter: brightness(0); }
}


/* ==========================================================================
   フッターナビ（2階層・多段組み）
   ========================================================================== */

.l-footer nav > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-md) var(--space-lg);
  margin: 0 0 var(--space-lg);
}
.l-footer nav > ul > li { min-width: 7em; }
.l-footer nav > ul > li > a { font-size: 13px; letter-spacing: .06em; }

.l-footer .sub-menu {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.l-footer .sub-menu a { font-size: 12px; color: rgba(255,255,255,.8); }
.l-footer .sub-menu a:hover { color: #fff; }

@media (max-width: 767px) {
  .l-footer nav > ul { gap: var(--space-md); }
  .l-footer nav > ul > li { min-width: 45%; }
}


/* ==========================================================================
   XDに合わせた調整（2026-08-21）
   ========================================================================== */

:root { --header-h: 76px; }

/* ---- ヘッダー：ナビを中央寄りに ---- */

.l-header { padding-block: 18px; }
.l-header__inner {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  align-items: center;
  gap: 0;
}
.l-header__logo { justify-self: start; }
.l-header .l-nav { justify-self: center; }
.l-header nav > ul {
  justify-content: center;
  gap: var(--space-sm) 26px;
  font-size: 13px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.l-header__toggle { justify-self: end; grid-column: 3; }

/* トップページ：ヘッダーはお知らせ帯の下に重ねる */
body.home .l-header {
  position: sticky;
  top: 0;
  inset-inline: auto;
}
body.home .p-hero { margin-top: calc(-1 * var(--header-h)); }

/* ---- お知らせ帯（ラベルなし・FVの上） ---- */

.p-newsbar__inner { justify-content: center; min-height: 44px; }
.p-newsbar__body { justify-content: center; }

/* ---- ヒーロー ---- */

.p-hero__copy { top: 18%; }

/* ---- ブランドストーリー ---- */

.p-message__more { display: none; text-align: center; margin-top: var(--space-md); }

/* ---- セクション見出し（1行・下線なし） ---- */

.p-section__head::after { display: none; }
.p-section__head .p-section__title {
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .14em;
}

/* ---- 背景の金色装飾（固定せず、ページの流れに沿って敷く） ---- */

body.home::before, body.home::after { display: none; }

.p-deco {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  opacity: .85;
}
.p-deco--l1 { top: 4%;  left: -6%;  width: 46vw; aspect-ratio: 1786/2043;
  background: url("/wp-content/themes/yoando-corp/assets/img/top_bk_3.png") no-repeat left top / contain; }
.p-deco--r1 { top: 26%; right: -8%; width: 44vw; aspect-ratio: 2014/1842;
  background: url("/wp-content/themes/yoando-corp/assets/img/top_bk_4.png") no-repeat right top / contain; }
.p-deco--l2 { top: 52%; left: -10%; width: 52vw; aspect-ratio: 2233/2073;
  background: url("/wp-content/themes/yoando-corp/assets/img/top_bk_2.png") no-repeat left top / contain; }
.p-deco--r2 { top: 76%; right: -6%; width: 46vw; aspect-ratio: 1400/700;
  background: url("/wp-content/themes/yoando-corp/assets/img/top_bk_5.png") no-repeat right top / contain; }

body.home .l-main { position: relative; overflow-x: clip; }

/* ---- フッター：XDの並びに ---- */

.l-footer__inner { grid-template-columns: 1fr 300px; gap: var(--space-lg); }
.l-footer nav > ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--space-md);
  margin: 0;
}
.l-footer nav > ul > li { flex: 0 1 auto; min-width: 0; }
.l-footer nav > ul > li > a { font-size: 12px; white-space: nowrap; }
.l-footer .sub-menu { gap: 8px; margin-top: 14px; }
.l-footer .sub-menu a { white-space: nowrap; }
.l-footer__bottom { justify-content: flex-start; gap: var(--space-lg); }

/* ==========================================================================
   タブレット・スマートフォン
   ========================================================================== */

.u-sp-only { display: none; }

@media (max-width: 1024px) {

  /* ヘッダー：ロゴ中央・ハンバーガー右 */
  .l-header__inner { grid-template-columns: 44px 1fr 44px; }
  .l-header__logo { justify-self: center; grid-column: 2; }
  .l-header__toggle { grid-column: 3; }

  .l-footer nav > ul { flex-wrap: wrap; }
}

@media (max-width: 767px) {

  .u-sp-only { display: inline; }

  /* FVを縦長に */
  .p-hero img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 60% center; }
  .p-hero__copy { top: 22%; font-size: 20px; letter-spacing: .16em; }

  /* ブランドストーリーは一部だけ見せる */
  .p-message__body {
    position: relative;
    max-height: 15em;
    overflow: hidden;
  }
  .p-message__body::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 6em;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%);
  }
  .p-message__body.is-open { max-height: none; }
  .p-message__body.is-open::after { display: none; }
  .p-message__more { display: block; }

  /* 背景装飾は控えめに */
  .p-deco { opacity: .5; width: 80vw !important; }
  .p-deco--r1, .p-deco--r2 { right: -20%; }
  .p-deco--l1, .p-deco--l2 { left: -20%; }

  /* フッター：下層はクリックで開く */
  .l-footer nav > ul { flex-direction: column; gap: 0; width: 100%; }
  .l-footer nav > ul > li { width: 100%; border-bottom: 1px solid rgba(255,255,255,.18); }
  .l-footer nav > ul > li > a { display: block; padding: 16px 0; font-size: 14px; }

  .l-footer .menu-item-has-children { position: relative; }
  .l-footer__acc {
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 52px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }
  .l-footer__acc::before { content: "＋"; }
  .l-footer .is-open > .l-footer__acc::before { content: "－"; }

  .l-footer .sub-menu { display: none; padding: 0 0 16px 1em; margin: 0; }
  .l-footer .is-open > .sub-menu { display: flex; }
  .l-footer .sub-menu a { font-size: 13px; padding: 6px 0; display: block; }

  .l-footer__inner { grid-template-columns: 1fr; }
  .l-footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}


/* ==========================================================================
   修正（2026-08-21）
   ・ヘッダーをFVに重ねる方式をやめ、通常の白いバーにする
     → お知らせ帯がヘッダーに隠れる問題／ナビが画像に重なる問題を解消
   ・スマートフォンのメニューが白文字のままで見えなかった問題を修正
   ========================================================================== */

/* ---- ヘッダーは常に白背景・通常の位置 ---- */

.l-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--color-rule);
}

body.home .l-header {
  position: sticky;
  top: 0;
  background: #fff;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-rule);
}
body.home .l-header a { color: var(--color-text); }
body.home .l-header.is-scrolled { box-shadow: 0 1px 6px rgba(0,0,0,.06); }

/* ロゴは常に黒 */
.l-header__logo img,
body.home .l-header:not(.is-scrolled) .l-header__logo img { filter: brightness(0); }

/* FVを引き上げない（お知らせ帯が隠れないように） */
body.home .p-hero { margin-top: 0; }

/* ---- スマートフォンのメニュー ---- */

@media (max-width: 1024px) {

  .l-nav {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  body.is-nav-open .l-nav { opacity: 1; visibility: visible; }

  /* 文字が白のままにならないよう、ここで明示する */
  .l-header .l-nav a,
  body.home .l-header .l-nav a { color: var(--color-text); }

  .l-header .l-nav ul {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    font-family: var(--font-serif);
    font-size: 16px;
    letter-spacing: .1em;
    white-space: normal;
    text-align: center;
    padding: 0 24px;
  }

  /* ハンバーガーとロゴは常に黒 */
  .l-header__toggle { color: var(--color-text); }
  body.home.is-nav-open .l-header__logo img { filter: brightness(0); }
}


/* ==========================================================================
   トップページ本文まわり（2026-08-21）
   ========================================================================== */

.p-media__lead {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .08em;
  margin: 0 0 var(--space-md);
}

.p-cards__more { margin-top: var(--space-sm); }

.c-button--sm {
  min-height: 34px;
  padding: 0 20px;
  font-size: 13px;
}

.p-company-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
}
.p-company-links .c-button { width: 100%; }

/* ブランドストーリー */
.p-message__body { text-align: center; }

@media (max-width: 767px) {
  /* ヘッダーを薄く */
  .l-header { padding-block: 5px; }

  /* ブランドストーリーはスマホでは左寄せ・強制改行なし */
  .p-message__body { text-align: left; }
  .p-message__body br { display: none; }

  .p-media__lead { font-size: 18px; }
  .p-company-links { grid-template-columns: 1fr; }
}


/* ==========================================================================
   修正：カード内のボタン崩れ
   画像リンク用の指定（display:block / line-height:0）が
   カード内のすべてのリンクに効いていたため、直下の <a> だけに限定します。
   ========================================================================== */

.p-cards__item a { display: inline; line-height: inherit; }
.p-cards__item > a { display: block; line-height: 0; }

.c-button {
  line-height: 1;
  white-space: nowrap;
}
.p-cards__more .c-button { display: inline-flex; }


/* ==========================================================================
   下層ページ共通：ページ上部の画像
   ヘッダーは画像に重なります（お知らせ帯はその上）。
   ========================================================================== */

.p-pagehero {
  line-height: 0;
  margin-top: calc(-1 * var(--header-h));
}
.p-pagehero img {
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 600;
  object-fit: cover;
}

/* ヘッダーを画像に重ねる（トップと下層で共通） */
.l-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 0;
  color: #fff;
}
.l-header a { color: #fff; }
.l-header__logo img { filter: none; }

.l-header.is-scrolled {
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.l-header.is-scrolled a { color: var(--color-text); }
.l-header.is-scrolled .l-header__logo img { filter: brightness(0); }

/* 画像を持たないページでは、白背景のヘッダーにする */
body:not(.home) .l-header:not(.has-hero) {}

/* ==========================================================================
   パートナー
   ========================================================================== */

.p-partner {
  position: relative;
  padding-block: var(--space-xl);
  background: linear-gradient(160deg, #ffffff 0%, #eef5fb 38%, #dfeaf6 100%);
}

.p-partner .c-breadcrumb { margin-bottom: var(--space-lg); }

.p-partner__lead {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 2.2;
  letter-spacing: .08em;
  margin: 0 0 var(--space-xl);
}
.p-partner__lead p { margin: 0; }

.p-partner__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-partner__name {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .1em;
  text-align: center;
  margin: 0 0 var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-text);
}

.p-partner__detail { margin: 0; font-size: 14px; line-height: 1.9; }
.p-partner__detail dt { font-weight: 700; margin-top: 12px; }
.p-partner__detail dt:first-child { margin-top: 0; }
.p-partner__detail dd { margin: 2px 0 0; }

.p-partner__interview {
  text-align: center;
  margin: var(--space-md) 0 0;
  font-size: 13px;
  letter-spacing: .1em;
}
.p-partner__interview a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}

/* タブ（パートナー用は2行の文字） */
.p-partner .c-tabs__btn { line-height: 1.5; padding: 8px 20px; min-height: 52px; }

@media (max-width: 767px) {
  .p-pagehero img { aspect-ratio: 4 / 3; }
  .p-partner__lead { font-size: 16px; line-height: 2; }
  .p-partner__lead br { display: none; }
  .p-partner__list { grid-template-columns: 1fr; gap: var(--space-lg); }
  .p-partner .c-tabs__btn { font-size: 11px; min-height: 48px; padding: 6px 8px; }
}


/* ==========================================================================
   修正：ヘッダーの文字色（2026-08-21）
   画像が上部にあるページだけ、ヘッダーを透過＋白文字にします。
   それ以外のページでは白背景＋黒文字（文字が消える問題への対処）。
   ========================================================================== */

.l-header {
  background: #fff;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-rule);
}
.l-header a { color: var(--color-text); }
.l-header__logo img { filter: brightness(0); }

body.has-hero .l-header:not(.is-scrolled) {
  background: transparent;
  border-bottom: 0;
  color: #fff;
}
body.has-hero .l-header:not(.is-scrolled) a { color: #fff; }
body.has-hero .l-header:not(.is-scrolled) .l-header__logo img { filter: none; }
body.has-hero .l-header:not(.is-scrolled) .l-header__inner {
  text-shadow: 0 1px 8px rgba(0,0,0,.28);
}

/* 画像が無いページでは、上に詰めない */
body:not(.has-hero) .p-pagehero { margin-top: 0; }

/* ==========================================================================
   パートナー：支給いただいた画像に差し替え
   ========================================================================== */

.p-partner {
  background: #fff;
  overflow: hidden;
}
.p-partner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("/wp-content/themes/yoando-corp/assets/img/partner_bk_1.png") no-repeat left top / cover;
  pointer-events: none;
}
.p-partner::after {
  content: "";
  position: absolute;
  right: 2%;
  bottom: 6%;
  width: min(38vw, 460px);
  aspect-ratio: 928 / 618;
  background: url("/wp-content/themes/yoando-corp/assets/img/partner_bk_2.png") no-repeat center / contain;
  mix-blend-mode: multiply;   /* 白地を透かして重ねる */
  pointer-events: none;
  z-index: 0;
}
.p-partner > .l-container { position: relative; z-index: 1; }

@media (max-width: 767px) {
  .p-partner::after { width: 70vw; right: -6%; bottom: 2%; opacity: .8; }
}


/* ==========================================================================
   ヘッダーの最終仕様（2026-08-21）
   画像への重ね表示は取りやめ、常に白背景＋黒文字にします。
   XDでは画像に重なる表現でしたが、重ね位置がずれると文字が読めなくなるため、
   まず確実に読める形を優先します。重ね表示に戻す場合は、
   ヒーロー側に暗いグラデーションを敷いたうえで再実装します。
   ========================================================================== */

.l-header,
body.has-hero .l-header,
body.has-hero .l-header:not(.is-scrolled),
body.home .l-header,
body.home .l-header:not(.is-scrolled) {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-rule);
}

.l-header a,
body.has-hero .l-header a,
body.has-hero .l-header:not(.is-scrolled) a,
body.home .l-header a,
body.home .l-header:not(.is-scrolled) a {
  color: var(--color-text);
}

.l-header__logo img,
body.has-hero .l-header:not(.is-scrolled) .l-header__logo img,
body.home .l-header:not(.is-scrolled) .l-header__logo img {
  filter: brightness(0);
}

body.has-hero .l-header:not(.is-scrolled) .l-header__inner { text-shadow: none; }

.l-header.is-scrolled { box-shadow: 0 1px 6px rgba(0,0,0,.06); }

/* 画像はヘッダーの下から始める（引き上げない） */
.p-pagehero,
body.has-hero .p-pagehero,
body.home .p-hero {
  margin-top: 0;
}


/* ==========================================================================
   修正：ページ画像の上に余白が入る問題
   ========================================================================== */

body.has-hero .l-main { padding-top: 0; }
.p-pagehero + * { margin-top: 0; }

/* ==========================================================================
   下層ページ共通（プライバシーポリシー・個人情報の取扱いなど）
   ========================================================================== */

.p-page { padding-block: var(--space-lg) var(--space-xl); }

.p-page__title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: .12em;
  text-align: center;
  margin: 0 0 var(--space-lg);
}
.p-page__title-en {
  display: block;
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--color-accent);
  margin-top: 12px;
}

.p-page__body { font-size: 15px; line-height: 2.1; }
.p-page__body > * + * { margin-top: 1.6em; }

.p-page__body h2 {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .06em;
  margin-top: 2.6em;
  padding-bottom: .5em;
  border-bottom: 1px solid var(--color-rule);
}
.p-page__body h3 {
  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 700;
  margin-top: 2em;
}

.p-page__body ol,
.p-page__body ul { padding-left: 1.4em; margin-block: 1em; }
.p-page__body li { margin-bottom: .6em; }
.p-page__body ol > li { list-style: decimal; }
.p-page__body ul > li { list-style: disc; }

.p-page__body a { color: var(--color-accent); }

.p-page__body table { width: 100%; border-collapse: collapse; font-size: 14px; }
.p-page__body th,
.p-page__body td { border: 1px solid var(--color-rule); padding: .8em 1em; text-align: left; vertical-align: top; }
.p-page__body th { background: var(--color-bg-subtle); white-space: nowrap; width: 12em; font-weight: 500; }

/* 署名・制定日など */
.p-page__sign {
  margin-top: var(--space-lg);
  font-size: 14px;
  line-height: 2;
  text-align: right;
}

/* 問い合わせ窓口の枠 */
.p-page__contactbox {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--color-rule);
  background: var(--color-bg-subtle);
  font-size: 14px;
  line-height: 2;
}
.p-page__contactbox p { margin: 0; }
.p-page__contactbox .note { font-size: 13px; color: var(--color-text-muted); }

@media (max-width: 767px) {
  .p-page__title { font-size: 22px; }
  .p-page__body th { width: auto; white-space: normal; display: block; border-bottom: 0; }
  .p-page__body td { display: block; }
}


/* ==========================================================================
   企業情報：ハブページの入口一覧
   ========================================================================== */

.p-page__body--center { text-align: center; }

.p-hub {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
}
.p-hub__item a {
  display: block;
  height: 100%;
  padding: var(--space-md);
  border: 1px solid var(--color-rule);
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.p-hub__item a:hover { border-color: var(--color-accent); background: var(--color-bg-subtle); }
.p-hub__label {
  display: block;
  font-family: var(--font-serif);
  font-size: 17px;
  letter-spacing: .08em;
  margin-bottom: 10px;
}
.p-hub__text { display: block; font-size: 13px; line-height: 1.9; color: var(--color-text-muted); }

/* ==========================================================================
   役員紹介
   ========================================================================== */

.p-officer + .p-officer {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}
.p-officer h2 { margin-top: 0; border-bottom: 0; padding-bottom: 0; }
.p-officer__meta { font-size: 13px; color: var(--color-text-muted); margin-top: .4em !important; }
.p-officer__note { font-size: 13px; color: var(--color-text-muted); }

/* ==========================================================================
   沿革
   ========================================================================== */

.p-history th {
  width: 14em;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-weight: 500;
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}
.p-history td { border-left: 0; border-right: 0; border-top: 0; }

/* 引用（企業理念の養生訓など） */
.p-page__body blockquote {
  margin: 1.6em 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-subtle);
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-serif);
}
.p-page__body blockquote p { margin: 0; }

@media (max-width: 1024px) {
  .p-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .p-hub { grid-template-columns: 1fr; }
  .p-history th { width: auto; white-space: normal; padding-bottom: 0; }
  .p-history td { padding-top: .2em; }
}


/* ==========================================================================
   お問い合わせフォーム
   ========================================================================== */

.p-contactinfo {
  margin: var(--space-lg) 0;
  padding: var(--space-md);
  border: 1px solid var(--color-rule);
  background: var(--color-bg-subtle);
}
.p-contactinfo dl { display: grid; grid-template-columns: 6em 1fr; gap: 10px 0; margin: 0; font-size: 14px; }
.p-contactinfo dt { font-weight: 700; }
.p-contactinfo dd { margin: 0; }
.p-contactinfo .note { display: block; font-size: 12px; color: var(--color-text-muted); }
.p-contactinfo a { color: var(--color-accent); }

.c-form { margin-top: var(--space-xl); }

.c-form__row {
  display: grid;
  grid-template-columns: 14em 1fr;
  gap: var(--space-md);
  align-items: start;
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-rule);
}
.c-form__row:first-of-type { border-top: 1px solid var(--color-rule); }

.c-form__label {
  font-size: 14px;
  font-weight: 500;
  padding-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.c-form__label .req {
  font-size: 11px;
  color: #fff;
  background: var(--color-accent);
  padding: 2px 8px;
  letter-spacing: .06em;
}

.c-form__field input[type="text"],
.c-form__field input[type="tel"],
.c-form__field input[type="email"],
.c-form__field select,
.c-form__field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-rule);
  border-radius: 0;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
}
.c-form__field textarea { resize: vertical; }
.c-form__field input:focus,
.c-form__field select:focus,
.c-form__field textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.c-form__consent { margin-top: var(--space-lg); text-align: center; font-size: 14px; }
.c-form__consent label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.c-form__consent a { color: var(--color-accent); }

.c-form__submit { margin-top: var(--space-lg); text-align: center; }
.c-form__submit .c-button { min-width: 240px; min-height: 52px; }

.c-form .field-err { display: block; margin-top: 6px; color: #a61b29; font-size: 13px; }
.c-form .invalid input,
.c-form .invalid select,
.c-form .invalid textarea { border-color: #a61b29; }

/* reCAPTCHAのバッジ */
.grecaptcha-badge { visibility: hidden !important; }

@media (max-width: 767px) {
  .c-form__row { grid-template-columns: 1fr; gap: 8px; padding-block: var(--space-sm); }
  .c-form__label { padding-top: 0; }
  .p-contactinfo dl { grid-template-columns: 1fr; }
  .p-contactinfo dt { margin-top: 8px; }
}


/* ==========================================================================
   役員紹介（写真つき）
   ========================================================================== */

.p-officer {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-lg);
  align-items: start;
}
.p-officer__photo { margin: 0; }
.p-officer__photo img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.p-officer__body > * + * { margin-top: 1em; }
.p-officer__body h2 { font-size: 18px; }

/* タブの中の本文は中央に寄せず、読みやすい幅に */
.p-page__body--tab { width: min(100%, 900px); margin-inline: auto; }

@media (max-width: 767px) {
  .p-officer { grid-template-columns: 1fr; gap: var(--space-md); }
  .p-officer__photo { width: 60%; margin-inline: auto; }
}


/* ==========================================================================
   技術・研究（NMN LABO / 漢方LABO / 処方LABO）
   ここで定義した class は、ページ本文（HTML）の中でも使えます。
   ========================================================================== */

/* リード文（タイトルの下・タブの上） */
.p-research__lead {
  margin-top: var(--space-md);
  text-align: center;
  line-height: 2;
}
.p-research__lead p + p { margin-top: 1em; }

/* --------------------------------------------------------------------------
   英字のセクション見出し（Research contents / Research results / Others）
   -------------------------------------------------------------------------- */

.p-sechead {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
  text-align: center;
  font-family: var(--font-base);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: .16em;
}

/* --------------------------------------------------------------------------
   SPECIAL INTERVIEW（開閉できるブロック）
   -------------------------------------------------------------------------- */

.c-interview { margin-top: var(--space-lg); }

.c-interview__label {
  text-align: center;
  color: var(--color-accent);
  font-size: 15px;
  letter-spacing: .16em;
  margin-bottom: var(--space-sm, 12px);
}
.c-interview__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: 10px;
}
.c-interview__name {
  margin: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-accent);
  grid-column: 1 / -1;
  grid-row: 1;
}
.c-interview__toggle {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-base);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--color-text);
}
.c-interview__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height .4s ease;
}
.c-interview.is-open .c-interview__body { max-height: 4000px; }
.c-interview__body > * { margin-top: var(--space-md); }
.c-interview__body img { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   画像＋テキストの横並び（Research contents など）
   -------------------------------------------------------------------------- */

.p-mediarow {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 50px;
  align-items: start;
}
.p-mediarow + .p-mediarow { margin-top: var(--space-lg); }
.p-mediarow--rev { grid-template-columns: 1fr 460px; }
.p-mediarow--rev .p-mediarow__media { order: 2; }

.p-mediarow__media { margin: 0; line-height: 0; }
.p-mediarow__media img { width: 100%; height: auto; }

.p-mediarow__title {
  margin: 0 0 1em;
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.6;
}
.p-mediarow__lead {
  margin: 0 0 1em;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.8;
}
.p-mediarow__text {
  margin: 0;
  font-size: 13px;
  line-height: 2;
}
.p-mediarow__text + .p-mediarow__text { margin-top: 1em; }

/* 注釈 */
.p-note {
  margin-top: var(--space-md);
  font-size: 11px;
  line-height: 1.9;
  color: #666;
}

/* リンク（XPRIZE 特設サイトはこちら など） */
.p-morelink {
  margin-top: var(--space-md);
  text-align: center;
}
.p-morelink a {
  font-size: 13px;
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 3px;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   中央寄せの本文ブロック（NMNの最先端がここにある など）
   -------------------------------------------------------------------------- */

.p-textblock { margin-top: var(--space-xl); }
.p-textblock__title {
  margin: 0 0 var(--space-md);
  text-align: center;
  font-family: var(--font-base);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .12em;
}
.p-textblock p {
  font-size: 13px;
  line-height: 2.2;
}

/* --------------------------------------------------------------------------
   丸写真の3カラム（気・血・水）
   -------------------------------------------------------------------------- */

.p-circles {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.p-circles__item { margin: 0; }
.p-circles__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}
.p-circles__title {
  margin: var(--space-md) 0 12px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
}
.p-circles__text {
  margin: 0;
  font-size: 13px;
  line-height: 2;
}

/* --------------------------------------------------------------------------
   2カラムのテキスト（Others）
   -------------------------------------------------------------------------- */

.p-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}
.p-2col__title {
  margin: 0 0 var(--space-md);
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
}
.p-2col h4 {
  margin: var(--space-md) 0 6px;
  font-size: 13px;
  font-weight: 500;
}
.p-2col p {
  margin: 0;
  font-size: 13px;
  line-height: 2;
}
.p-2col img { width: 100%; max-width: 340px; height: auto; }

/* --------------------------------------------------------------------------
   スマートフォン
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .p-sechead { font-size: 19px; }
  .p-mediarow,
  .p-mediarow--rev { grid-template-columns: 1fr; gap: var(--space-md); }
  .p-mediarow--rev .p-mediarow__media { order: 0; }
  .p-mediarow__title { font-size: 20px; }
  .p-mediarow__lead { font-size: 15px; }
  .p-circles { grid-template-columns: 1fr; gap: var(--space-lg); }
  .p-circles__item img { width: 70%; margin-inline: auto; display: block; }
  .p-2col { grid-template-columns: 1fr; gap: var(--space-lg); }
  .p-textblock__title { font-size: 17px; }
  .c-interview__name { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   ページ上部の画像をタブに合わせて切り替える（技術・研究）
   -------------------------------------------------------------------------- */

.p-pagehero--switch .p-pagehero__item { display: none; }
.p-pagehero--switch .p-pagehero__item.is-current { display: block; }

/* 本文ブロックの中の画像（NMNの最先端がここにある など） */
.p-textblock__media {
  margin: 0 0 var(--space-md);
  line-height: 0;
}
.p-textblock__media img { width: 100%; height: auto; }

/* 中身が空のときの開閉ブロック（原稿待ち） */
.c-interview__body:empty { display: none; }

/* 画像の縦横比を揃える（差し替え時に崩れないための保険）
   自然な比率のまま出したい行には .p-mediarow--free を付けます */
.p-mediarow__media img {
  aspect-ratio: 46 / 30;
  object-fit: cover;
}
.p-mediarow--free .p-mediarow__media img { aspect-ratio: auto; }

/* --------------------------------------------------------------------------
   フッターの開閉ボタンはスマートフォンだけに出す
   （PCではボタンの中身が空のため、白い丸として見えていました）
   -------------------------------------------------------------------------- */

.l-footer__acc { display: none; }

@media (max-width: 767px) {
  .l-footer__acc { display: block; }
}


/* ==========================================================================
   阿部養庵堂薬品の若返り（対談ページ）
   ========================================================================== */

/* --------------------------------------------------------------------------
   ページ上部（写真の上に文字をのせます）
   文字は画像に焼き込まず、HTMLで書いています。
   こうしておくと Weglot の翻訳が効き、文字も鮮明なままです。
   -------------------------------------------------------------------------- */

.p-talkhero {
  position: relative;
  line-height: 0;
}
.p-talkhero__bg {
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 880;
  object-fit: cover;
}
/* 文字を読みやすくするための、うっすらとした暗がり */
.p-talkhero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,.30) 100%);
  pointer-events: none;
}

.p-talkhero__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  color: #fff;
  line-height: 1.6;
  text-align: center;
  padding: 40px 20px;
}

.p-talkhero__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: .12em;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}

.p-talkhero__people {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.p-talkhero__person {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.p-talkhero__org  { font-size: 13px; letter-spacing: .08em; }
.p-talkhero__name {
  font-family: var(--font-serif);
  font-size: 28px;
  letter-spacing: .1em;
}

/* 中央の細い ✕ */
.p-talkhero__cross {
  position: relative;
  width: 150px;
  height: 150px;
  flex: none;
}
.p-talkhero__cross::before,
.p-talkhero__cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,.65);
}
.p-talkhero__cross::before { transform: rotate(45deg); }
.p-talkhero__cross::after  { transform: rotate(-45deg); }

.p-talkhero__mark { margin: 0; }
.p-talkhero__mark img { width: 260px; height: auto; }

/* --------------------------------------------------------------------------
   対談の本文（画像と文章の横並び）
   .p-talk        … 画像が左
   .p-talk--rev   … 画像が右
   -------------------------------------------------------------------------- */

.p-talk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  text-align: left;
}
.p-talk + .p-talk { margin-top: var(--space-xl); }
.p-talk--rev .p-talk__media { order: 2; }

.p-talk__media { margin: 0; line-height: 0; }
.p-talk__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 46 / 30;
  object-fit: cover;
}

.p-talk__title {
  margin: 0 0 1.2em;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1.6;
}
.p-talk__body p {
  margin: 0;
  font-size: 13px;
  line-height: 2.1;
}
.p-talk__body p + p { margin-top: 1.2em; }

/* --------------------------------------------------------------------------
   スマートフォン
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .p-talkhero__bg { aspect-ratio: 3 / 4; }
  .p-talkhero__inner { gap: 24px; }
  .p-talkhero__title { font-size: 19px; }
  .p-talkhero__people { flex-direction: column; gap: 0; }
  .p-talkhero__name { font-size: 22px; }
  .p-talkhero__cross { width: 60px; height: 60px; }
  .p-talkhero__mark img { width: 180px; }

  .p-talk,
  .p-talk--rev { grid-template-columns: 1fr; gap: var(--space-md); }
  .p-talk--rev .p-talk__media { order: 0; }
  .p-talk + .p-talk { margin-top: var(--space-lg); }
  .p-talk__title { font-size: 19px; }
}

/* 日本語のセクション見出し（英字版 .p-sechead の日本語用） */
.p-sechead--ja {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: .1em;
}
@media (max-width: 767px) {
  .p-sechead--ja { font-size: 18px; }
}


/* ==========================================================================
   歴史（BRAND HISTORY）
   前半は黒背景、後半（1984年〜）は白背景に切り替わります。
   ========================================================================== */

.p-history {
  --his-gold: #C9A24B;   /* 見出しや年号の金色 */
  --his-line: rgba(201,162,75,.45);
  color: #fff;
  background-color: #0a0a0a;
  overflow-x: clip;      /* 画面の外にはみ出した装飾を隠します */
}
/* このページだけ、上下の余白をテンプレート側で持ちます */
body.page-slug-history .l-main { padding-block: 0; }
body.page-slug-rejuvenation .l-main { padding-top: 0; }
body.page-slug-research .l-main { padding-top: 0; }

.p-history__hero { line-height: 0; }
.p-history__hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 805;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   BRAND HISTORY のリード
   -------------------------------------------------------------------------- */

.p-history__intro {
  text-align: center;
  padding-block: 90px 110px;
}
.p-history__en {
  margin: 0 0 34px;
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: .28em;
}
.p-history__lead {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 2.1;
  letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   年表の本体（左端に縦の軸が通ります）
   -------------------------------------------------------------------------- */

.p-history__body {
  position: relative;
  width: min(100% - 40px, var(--width-wide));
  margin-inline: auto;
  padding-bottom: 140px;
}
.p-history__body::before {              /* 縦の軸 */
  content: "";
  position: absolute;
  top: 0;
  bottom: 140px;
  left: 8px;
  width: 1px;
  background: rgba(255,255,255,.22);
}

/* 白背景に切り替わる部分 */
.p-history__light {
  position: relative;
  color: var(--color-text);
  margin-inline: calc(50% - 50vw);       /* 画面いっぱいに広げる */
  padding-inline: calc(50vw - 50%);
  padding-top: 120px;

  background: linear-gradient(180deg, #0a0a0a 0%, #fff 14%, #fff 100%);
}
.p-history__light .p-era__big { color: rgba(0,0,0,.07); }
.p-history__light .c-circle   { border-color: rgba(201,162,75,.55); }
.p-history__light .p-era__gen,
.p-history__light .p-chrono__text,
.p-history__light .p-era__caption { color: #555; }

/* --------------------------------------------------------------------------
   ひとつの時代
   -------------------------------------------------------------------------- */

.p-era {
  position: relative;
  padding-top: 120px;
}
.p-era + .p-era { padding-top: 160px; }

/* 背景に薄く入る大きな年代 */
.p-era__big {
  position: absolute;
  top: 60px;
  right: 0;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 58px;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
  color: rgba(255,255,255,.16);
  pointer-events: none;
  user-select: none;
}

.p-era__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: start;
}

/* ---- 左側：見出しと年表 ---- */

.p-era__head { margin: 0 0 30px; padding-left: 44px; position: relative; }
.p-era__head::before {                   /* 軸の上の丸 */
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--his-gold);
}
.p-era__years {
  display: block;
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: .08em;
}
.p-era__gen {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.7);
}

.p-era__rh {
  display: inline-block;
  margin: 0 0 34px 44px;
  padding: 7px 18px;
  background: linear-gradient(90deg, #C9A24B 0%, #E4CE95 55%, #C9A24B 100%);
  color: #1a1a1a;
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: .14em;
}

.p-chrono { margin: 0; padding: 0 0 0 44px; list-style: none; }
.p-chrono__item { position: relative; }
.p-chrono__item + .p-chrono__item { margin-top: 28px; }
.p-chrono__item::before {                /* 年号の左の短い横線 */
  content: "";
  position: absolute;
  left: -30px;
  top: 13px;
  width: 20px;
  height: 1px;
  background: var(--his-line);
}
.p-chrono__year {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--his-gold);
  letter-spacing: .06em;
}
.p-chrono__who {
  margin-left: .8em;
  font-size: 14px;
}
.p-chrono__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: rgba(255,255,255,.85);
}

/* ---- 右側：写真 ---- */

.p-era__photos { display: grid; gap: 30px; }
.p-era__photo { margin: 0; }
.p-era__photo img { width: 100%; height: auto; }
.p-era__caption {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255,255,255,.72);
}

/* --------------------------------------------------------------------------
   円形の3ブロック（技術／人／時代）
   並び順は 技術 → 人 → 時代 です。
   -------------------------------------------------------------------------- */

.p-circles3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 30px;
  margin-top: 80px;
}
.p-circles3 > .c-circle:nth-child(1) { grid-column: 1; grid-row: 1; }
.p-circles3 > .c-circle:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.p-circles3 > .c-circle:nth-child(3) { grid-column: 1; grid-row: 2; margin-top: 40px; }

.c-circle {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  padding: 60px 72px;
  border: 1px solid var(--his-line);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.c-circle__label {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--his-gold);
  letter-spacing: .14em;
}
.c-circle__title {
  margin: 0 0 20px;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .04em;
}
.c-circle__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.95;
  text-align: justify;
}

/* --------------------------------------------------------------------------
   スマートフォン
   XDのスマホ版に合わせ、1カラムに積み直します。
   円は画面より大きくして、左右のふちを画面の外に逃がします。
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  .p-history__hero img { aspect-ratio: 3 / 4; }


  .p-history__intro { padding-block: 60px 70px; }
  .p-history__en   { font-size: 18px; margin-bottom: 26px; }
  .p-history__lead { font-size: 16px; line-height: 2.2; }

  .p-history__body { width: min(100% - 32px, 100%); padding-bottom: 90px; }
  .p-history__body::before { left: 2px; bottom: 90px; }

  .p-era { padding-top: 70px; }
  .p-era + .p-era { padding-top: 90px; }

  .p-era__grid { grid-template-columns: 1fr; gap: 40px; }

  /* 大きな年代は、年表と写真のあいだに置きます */
  .p-era__big {
    position: static;
    order: 2;
    margin: 40px 0 -10px;
    font-size: 34px;
    text-align: center;
  }
  .p-era__grid { display: flex; flex-direction: column; }
  .p-era__left   { order: 1; }
  .p-era__photos { order: 3; }

  .p-era__head { padding-left: 26px; margin-bottom: 22px; }
  .p-era__head::before { left: -2px; top: 6px; width: 9px; height: 9px; }
  .p-era__years { font-size: 17px; }

  /* Remarkable History は画面いっぱいの帯に */
  .p-era__rh {
    display: block;
    margin: 0 0 28px;
    text-align: center;
    font-size: 13px;
  }

  .p-chrono { padding-left: 26px; }
  .p-chrono__item::before { left: -20px; width: 14px; }
  .p-chrono__year { font-size: 16px; }
  .p-chrono__who { display: inline; font-size: 13px; }
  .p-chrono__text { font-size: 13px; }

  .p-era__photos { gap: 24px; }

  /* 円は画面幅より大きくして、ふちを外に逃がします */
  .p-circles3 { display: block; margin-top: 60px; }
  .p-circles3 > .c-circle { margin-top: 44px; }
  /* 円は画面より少しだけ大きくして、左右のふちを画面の外へ逃がします。
     padding の % は「自分の幅」ではなく「親の幅」が基準になる点に注意。
     幅118% に対して左右 21% ずつ → 中身は親の 76% に収まります。 */
  .c-circle {
    width: 118%;
    max-width: none;
    margin-left: -9%;
    padding: 10% 21%;
  }
  .c-circle__label { font-size: 17px; }
  .c-circle__title { font-size: 17px; }
  .c-circle__text  { font-size: 13px; text-align: left; }

  .p-history__light { padding-top: 80px; }
}


/* ==========================================================================
   歴史ページの背景装飾（金の筆・麻の葉模様）
   時代ごとに1組ずつ置いています。繰り返しではないので、途中で切れません。
   ・history_bk1.png … 金の筆（不透明度50%。時代ごとに角度を変えています）
   ・history_bk2.png … 麻の葉（金色）  白背景の後半で使用
   ・history_bk3.png … 麻の葉（茶色）  黒背景の前半で使用
   ========================================================================== */

.p-era { position: relative; }

/* 中身は装飾より前面に */
.p-era__grid,
.p-circles3 { position: relative; z-index: 1; }

.p-era::before,
.p-era::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ---- 金の筆 ---- */
.p-era::before {
  width: 620px;
  height: 445px;
  background-image: url("/wp-content/themes/yoando-corp/assets/img/history_bk1.png");
  opacity: .5;
}

/* ---- 麻の葉（前半＝黒背景は茶色） ---- */
.p-era::after {
  width: 420px;
  height: 115px;
  background-image: url("/wp-content/themes/yoando-corp/assets/img/history_bk3.png");
  opacity: .9;
}

/* ---- 後半＝白背景は金色の麻の葉に ---- */
.p-history__light .p-era::after {
  background-image: url("/wp-content/themes/yoando-corp/assets/img/history_bk2.png");
  width: 400px;
  height: 190px;
  opacity: .55;
}

/* ---- 時代ごとに位置と角度を変える ---- */

.p-era:nth-of-type(1)::before { right: -300px; top:  60px; transform: rotate(-18deg); }
.p-era:nth-of-type(1)::after  { right:  -40px; top: 520px; }

.p-era:nth-of-type(2)::before { left: -330px; top: 300px; transform: rotate(152deg); }
.p-era:nth-of-type(2)::after  { right:  20px; top: 760px; width: 340px; }

.p-era:nth-of-type(3)::before { left: -300px; top: 520px; transform: rotate(168deg) scaleY(-1); }
.p-era:nth-of-type(3)::after  { right: -80px; top: 240px; width: 460px; }

.p-era:nth-of-type(4)::before { right: -320px; top: 420px; transform: rotate(-160deg); }
.p-era:nth-of-type(4)::after  { left:   -60px; top: 880px; width: 320px; }

.p-era:nth-of-type(5)::before { left: -280px; top: 180px; transform: rotate(140deg); }
.p-era:nth-of-type(5)::after  { right: -60px; top: 700px; }

.p-era:nth-of-type(6)::before { right: -300px; top: 640px; transform: rotate(-150deg); }
.p-era:nth-of-type(6)::after  { left:  -40px; top: 300px; }

/* 白背景セクションの中では番号が振り直されます（1つ目＝1984-2016年） */
.p-history__light .p-era:nth-of-type(1)::before { right: -320px; top: 260px; transform: rotate(-22deg); }
.p-history__light .p-era:nth-of-type(1)::after  { left:   -80px; top: 820px; }
.p-history__light .p-era:nth-of-type(2)::before { left:  -340px; top: 520px; transform: rotate(155deg); }
.p-history__light .p-era:nth-of-type(2)::after  { right:  -60px; top: 260px; }

@media (max-width: 767px) {
  .p-era::before { width: 300px; height: 215px; opacity: .4; }
  .p-era::after  { width: 220px; height: 60px; }
  .p-history__light .p-era::after { width: 210px; height: 100px; }

  .p-era:nth-of-type(1)::before { right: -140px; top:  40px; }
  .p-era:nth-of-type(1)::after  { right:  -40px; top: 320px; }
  .p-era:nth-of-type(2)::before { left:  -150px; top: 220px; }
  .p-era:nth-of-type(2)::after  { right: -30px; top: 520px; width: 190px; }
  .p-era:nth-of-type(3)::before { left:  -140px; top: 380px; }
  .p-era:nth-of-type(3)::after  { right: -50px; top: 160px; width: 230px; }
  .p-era:nth-of-type(4)::before { right: -150px; top: 300px; }
  .p-era:nth-of-type(4)::after  { left:  -40px; top: 620px; width: 180px; }
  .p-era:nth-of-type(5)::before { left:  -130px; top: 140px; }
  .p-era:nth-of-type(5)::after  { right: -40px; top: 500px; }
  .p-era:nth-of-type(6)::before { right: -140px; top: 460px; }
  .p-era:nth-of-type(6)::after  { left:  -30px; top: 220px; }

  .p-history__light .p-era:nth-of-type(1)::before { right: -150px; top: 180px; }
  .p-history__light .p-era:nth-of-type(1)::after  { left:  -50px; top: 560px; }
  .p-history__light .p-era:nth-of-type(2)::before { left:  -150px; top: 360px; }
  .p-history__light .p-era:nth-of-type(2)::after  { right: -40px; top: 180px; }
}


/* ==========================================================================
   処方LABO の背景装飾（青い分子）
   ========================================================================== */

.p-research { overflow-x: clip; }

.c-tabs__panel#shoho-labo { position: relative; }
.c-tabs__panel#shoho-labo > * { position: relative; z-index: 1; }

.c-tabs__panel#shoho-labo::before,
.c-tabs__panel#shoho-labo::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 460px;
  height: 306px;
  background: url("/wp-content/themes/yoando-corp/assets/img/prlab_bk.png") no-repeat center / contain;
  opacity: .55;
}
.c-tabs__panel#shoho-labo::before { left: -280px; top: -30px; }
.c-tabs__panel#shoho-labo::after  { right: -260px; bottom: 40px; transform: rotate(24deg); }

@media (max-width: 767px) {
  .c-tabs__panel#shoho-labo::before,
  .c-tabs__panel#shoho-labo::after { width: 240px; height: 160px; opacity: .4; }
  .c-tabs__panel#shoho-labo::before { left: -130px; top: -20px; }
  .c-tabs__panel#shoho-labo::after  { right: -120px; bottom: 20px; }
}


/* ==========================================================================
   修正（2026-08-21 その2）
   ヘッダーをXDと同じ「画像の上に重ねる」方式に戻します。
   文字とロゴの色は、そのページの上部画像の明るさで切り替えます。
     body.is-header-light … 画像が暗い  → 白文字・白ロゴ
     （指定なし）          … 画像が明るい → 黒文字・黒ロゴ
   スクロールすると、どちらの場合も白背景＋黒文字になります。
   ========================================================================== */

.l-header,
body.has-hero .l-header,
body.has-hero .l-header:not(.is-scrolled),
body.home .l-header,
body.home .l-header:not(.is-scrolled) {
  background: transparent;
  border-bottom: 0;
  color: var(--color-text);
}

.l-header a,
body.has-hero .l-header a,
body.has-hero .l-header:not(.is-scrolled) a,
body.home .l-header a,
body.home .l-header:not(.is-scrolled) a {
  color: var(--color-text);
}

.l-header__logo img,
body.has-hero .l-header:not(.is-scrolled) .l-header__logo img,
body.home .l-header:not(.is-scrolled) .l-header__logo img {
  filter: brightness(0);
}

/* ---- 画像が暗いページ：白文字・白ロゴ ---- */
body.is-header-light .l-header:not(.is-scrolled),
body.is-header-light .l-header:not(.is-scrolled) a {
  color: #fff;
}
body.is-header-light .l-header:not(.is-scrolled) .l-header__logo img { filter: none; }
body.is-header-light .l-header:not(.is-scrolled) .l-header__toggle span { background: #fff; }

/* ---- スクロール後は共通で白背景＋黒文字 ---- */
.l-header.is-scrolled,
body.is-header-light .l-header.is-scrolled {
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.l-header.is-scrolled a,
body.is-header-light .l-header.is-scrolled a { color: var(--color-text); }
.l-header.is-scrolled .l-header__logo img,
body.is-header-light .l-header.is-scrolled .l-header__logo img { filter: brightness(0); }

/* ---- 画像をヘッダーの下に潜り込ませる ---- */
body.has-hero .p-pagehero,
body.has-hero .p-talkhero,
body.has-hero .p-history__hero,
body.home .p-hero {
  margin-top: calc(-1 * var(--header-h));
}

/* 文字の可読性を少しだけ助ける、ごく薄い明暗（気になる場合は消せます） */
.p-pagehero,
.p-talkhero,
.p-history__hero,
.p-hero { position: relative; }

body.has-hero .p-pagehero::after,
body.has-hero .p-history__hero::after,
body.home .p-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--header-h) + 40px);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
}
body.is-header-light.has-hero .p-pagehero::after,
body.is-header-light.has-hero .p-history__hero::after,
body.is-header-light.home .p-hero::after {
  background: linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,0));
}
/* 若返りページは、もともと全面に暗がりを敷いているので追加しません */


/* ==========================================================================
   お知らせ帯の色（XD指定）
   左から #BDAC87 → #FFFFFF → #BDAC87 → #BDAC87 → #FFFFFF
   ========================================================================== */

.p-newsbar {
  background: linear-gradient(90deg,
    #BDAC87   0%,
    #FFFFFF  32%,
    #BDAC87  59%,
    #BDAC87  74%,
    #FFFFFF 100%);
  color: var(--color-text);
}
.p-newsbar a,
.p-newsbar a:hover { color: var(--color-text); }
.p-newsbar__label { color: var(--color-text); }


/* ==========================================================================
   トップページ下部の背景（top_bk_6.jpg）
   ========================================================================== */

body.home .l-main {
  background-image: url("/wp-content/themes/yoando-corp/assets/img/top_bk_6.jpg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}

@media (max-width: 767px) {
  body.home .l-main { background-size: 180% auto; }
}


/* ==========================================================================
   スマートフォンのヘッダーロゴを大きく
   ========================================================================== */

@media (max-width: 767px) {
  .l-header__logo img { width: 152px; }
}


/* ==========================================================================
   歴史ページの調整
   ・PC：写真と円の並びをXDに合わせる（左＝年表＋技術・時代／右＝写真＋人）
   ・SP：画像の上の西暦を大きく・濃く。年代の見出しを年号と同じ金色に
   ========================================================================== */

/* 年代の見出しを、年表の年号と同じ金色に */
.p-era__years { color: var(--his-gold); }
.p-era__gen   { color: var(--his-gold); opacity: .85; }
.p-history__light .p-era__gen { color: var(--his-gold); opacity: .9; }

/* ---- PC：左右のカラムの中に円を置く ---- */
@media (min-width: 768px) {

  .p-era__right { display: block; }

  .p-era__left .c-circle {
    margin-top: 90px;
    margin-left: -70px;
  }
  .p-era__left .c-circle--age { margin-top: 40px; margin-left: 30px; }

  .p-era__right .c-circle--person {
    margin-top: 70px;
    margin-left: -150px;   /* 写真の列より左に張り出させます */
    width: 520px;
  }
}

/* ---- SP：XDと同じ順番（年表 → 大きな西暦 → 写真 → 円）に並べ替える ---- */
@media (max-width: 767px) {

  .p-era { display: flex; flex-direction: column; }
  .p-era__grid,
  .p-era__left,
  .p-era__right { display: contents; }

  .p-era__head,
  .p-era__rh,
  .p-chrono      { order: 1; }
  .p-era__big    { order: 2; }
  .p-era__photos { order: 3; }
  .p-era .c-circle { order: 4; margin-top: 44px; }

  .p-era__big {
    position: static;
    margin: 34px 0 18px;
    font-size: 46px;              /* 大きく */
    color: rgba(255,255,255,.42); /* 濃く */
    text-align: center;
    letter-spacing: .02em;
  }
  .p-history__light .p-era__big { color: rgba(0,0,0,.26); }
}


/* ==========================================================================
   修正：PCのグローバルナビが2段に折り返してしまう
   ・ロゴの列を実寸に合わせ、ナビに使える幅を広げる
   ・ヘッダーだけ横幅の上限を外す（中身は画面いっぱいに近い幅で使う）
   ・折り返しを禁止し、文字間と間隔を詰める
   ========================================================================== */

@media (min-width: 1025px) {

  .l-header__inner {
    width: min(100% - 48px, 1600px);
    grid-template-columns: auto 1fr auto;
    column-gap: 32px;
  }

  .l-header nav > ul {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 22px;
    font-size: 13px;
    letter-spacing: .02em;
    white-space: nowrap;
  }
  .l-header nav > ul > li { flex: 0 0 auto; }

  .l-header__logo img { width: 150px; }
}

/* 画面幅が足りないときは、さらに詰める */
@media (min-width: 1025px) and (max-width: 1300px) {
  .l-header nav > ul { gap: 16px; font-size: 12px; }
  .l-header__logo img { width: 128px; }
  .l-header__inner { column-gap: 20px; }
}


/* ==========================================================================
   修正：歴史ページの中身を 1200px の中に収める
   （背景の装飾は今までどおり画面いっぱいまで広がります）
   ========================================================================== */

@media (min-width: 768px) {

  /* 左カラムの円は、はみ出さずに中に置く */
  .p-era__left .c-circle {
    margin-top: 80px;
    margin-left: 0;
  }
  .p-era__left .c-circle--age {
    margin-top: 40px;
    margin-left: auto;
    margin-right: 0;
  }

  /* 右カラムの円は、列より左に張り出しますが 1200px の内側に収まります */
  .p-era__right .c-circle--person {
    margin-top: 70px;
    margin-left: -120px;
    margin-right: 0;
    width: 520px;
    max-width: none;
  }
}


/* ==========================================================================
   修正（2026-08-21 その3）
   ========================================================================== */

/* ---- ナビが右に寄る問題 ----
   ロゴの幅ぶんだけナビの中心がずれていました。
   左右に同じ幅の列を置いて、ナビをページの中央に揃えます。 */

@media (min-width: 1025px) {

  .l-header__inner {
    width: min(100% - 48px, 1600px);
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 24px;
  }
  .l-header__logo  { grid-column: 1; justify-self: start; }
  .l-header .l-nav { grid-column: 2; justify-self: center; }
  .l-header__toggle { grid-column: 3; justify-self: end; }

  .l-header nav > ul {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 22px;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
  }
  .l-header__logo img { width: 150px; }
}

@media (min-width: 1025px) and (max-width: 1300px) {
  .l-header nav > ul { gap: 15px; font-size: 12px; }
  .l-header__logo img { width: 124px; }
  .l-header__inner { column-gap: 16px; }
}


/* ---- スクロール後のヘッダーは、どのページでも必ず白い帯にする ---- */

.l-header.is-scrolled,
body.home .l-header.is-scrolled,
body.has-hero .l-header.is-scrolled,
body.is-header-light .l-header.is-scrolled,
body.is-header-light.home .l-header.is-scrolled,
body.is-header-light.has-hero .l-header.is-scrolled {
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 1px 8px rgba(0,0,0,.10);
}
.l-header.is-scrolled a,
body.home .l-header.is-scrolled a,
body.has-hero .l-header.is-scrolled a,
body.is-header-light .l-header.is-scrolled a {
  color: var(--color-text);
}
.l-header.is-scrolled .l-header__logo img,
body.is-header-light .l-header.is-scrolled .l-header__logo img {
  filter: brightness(0);
}

/* 黒文字のページは、画像の上端の白みを強めて読みやすくする */
body.has-hero:not(.is-header-light) .p-pagehero::after,
body.has-hero:not(.is-header-light) .p-history__hero::after,
body.home:not(.is-header-light) .p-hero::after {
  background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,0));
}


/* ==========================================================================
   歴史ページのコンテンツ幅を 900px にそろえる
   （背景の装飾は今までどおり画面いっぱいまで広がります）
   ========================================================================== */

.p-history__body { width: min(100% - 40px, 900px); }

@media (min-width: 768px) {

  .p-era__grid {
    grid-template-columns: 1fr 300px;
    gap: 44px;
  }

  .p-era__big { font-size: 46px; }

  .p-era .c-circle {
    max-width: 440px;
    padding: 46px 58px;
  }
  .p-era .c-circle__label { font-size: 17px; }
  .p-era .c-circle__title { font-size: 17px; margin-bottom: 16px; }
  .p-era .c-circle__text  { font-size: 11.5px; line-height: 1.9; }

  .p-era__left .c-circle { margin-top: 70px; margin-left: 0; }
  .p-era__left .c-circle--age { margin-top: 36px; margin-left: auto; margin-right: 0; }

  .p-era__right .c-circle--person {
    margin-top: 60px;
    margin-left: -120px;   /* 900px の右端でちょうど止まります */
    margin-right: 0;
    width: 420px;
    max-width: none;
  }

  .p-era__photos { gap: 24px; }
  .p-era__caption { font-size: 11px; }
}


/* ==========================================================================
   修正：歴史ページで「時代」と「人」の円が重なる
   900px の中で、左の円と右の円が触れないように位置をずらします。
   ・技術  左端から  0px  （幅440）→   0〜440
   ・時代  左端から 40px  （幅440）→  40〜480
   ・人    右端で止める   （幅400）→ 500〜900
   ========================================================================== */

@media (min-width: 768px) {

  .p-era__left .c-circle--tech {
    margin-top: 70px;
    margin-left: 0;
    margin-right: auto;
  }
  .p-era__left .c-circle--age {
    margin-top: 150px;     /* 「人」の円と縦にもずらします */
    margin-left: 40px;
    margin-right: auto;
  }
  .p-era__right .c-circle--person {
    margin-top: 60px;
    margin-left: -100px;
    margin-right: 0;
    width: 400px;
    max-width: none;
  }
}


/* ==========================================================================
   トップページの仕上げ（XDに合わせる）
   ========================================================================== */

/* ---- 「一覧はこちら」の下線リンク ---- */

.p-section__morelink {
  margin-top: var(--space-lg);
  text-align: center;
}
.p-section__morelink a {
  font-size: 13px;
  text-decoration: none;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 3px;
}

@media (max-width: 767px) {
}


/* ---- Longevity journal（トップページ用のカード） ----
   XDに合わせて、日付とカテゴリは出さず、写真・タイトル・説明文の3段にします。 */

.c-card--top { text-align: center; }
.c-card--top .c-card__thumb {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  height: auto;
}
.c-card--top .c-card__title {
  margin: 18px 0 10px;
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}
.c-card--top .c-card__title a { text-decoration: none; color: var(--color-text); }
.c-card--top .c-card__title a:hover { text-decoration: underline; }
.c-card--top .c-card__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.9;
  color: #666;
  text-align: left;
}

.c-card-list--top { row-gap: var(--space-lg); }

@media (max-width: 767px) {
  .c-card--top .c-card__title { font-size: 14px; }
  .c-card--top .c-card__text  { font-size: 12px; }
}


/* ==========================================================================
   NEWS（罫線と矢印つきのリスト）
   ========================================================================== */

.c-news-list li {
  padding: 0;
  border-bottom: 1px solid var(--color-rule);
}
.c-news-list li:first-child { border-top: 1px solid var(--color-rule); }

.c-news-list__link {
  display: grid;
  grid-template-columns: 8em 1fr 24px;
  align-items: center;
  gap: 0 24px;
  padding-block: 22px;
  text-decoration: none;
  color: var(--color-text);
}
.c-news-list__link time {
  display: block;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--color-text);
}
.c-news-list__title {
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1.8;
}
.c-news-list__link:hover .c-news-list__title { text-decoration: underline; }




/* ==========================================================================
   Press Releases（サムネイル付きのリスト）
   ========================================================================== */

.c-press-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-press-list li { border-bottom: 1px solid var(--color-rule); }
.c-press-list li:first-child { border-top: 1px solid var(--color-rule); }

.c-press-list__link {
  display: grid;
  grid-template-columns: 8em 1fr 120px;
  align-items: center;
  gap: 0 24px;
  padding-block: 18px;
  text-decoration: none;
  color: var(--color-text);
}
.c-press-list__link time {
  font-family: var(--font-serif);
  font-size: 14px;
}
.c-press-list__title {
  font-size: 14px;
  line-height: 1.8;
}
.c-press-list__link:hover .c-press-list__title { text-decoration: underline; }

.c-press-list__thumb {
  display: block;
  justify-self: end;
  width: 120px;
  line-height: 0;
}
.c-press-list__thumb img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   スマートフォン
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  .c-news-list__link {
    grid-template-columns: 1fr 20px;
    gap: 4px 12px;
    padding-block: 18px;
  }
  .c-news-list__link time { grid-column: 1; grid-row: 1; font-size: 13px; }
  .c-news-list__title    { grid-column: 1; grid-row: 2; font-size: 14px; }
  .c-news-list__arrow    { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 20px; }

  .c-press-list__link {
    grid-template-columns: 1fr 88px;
    gap: 4px 14px;
    padding-block: 16px;
  }
  .c-press-list__link time  { grid-column: 1; grid-row: 1; font-size: 13px; }
  .c-press-list__title      { grid-column: 1; grid-row: 2; font-size: 14px; }
  .c-press-list__thumb      { grid-column: 2; grid-row: 1 / 3; width: 88px; align-self: center; }
}


/* ==========================================================================
   矢印（NEWS・プレスリリース共通）
   CSSで線を組み合わせると環境によって崩れるため、SVGで描いています。
   ========================================================================== */

.c-arrow {
  display: block;
  width: 34px;
  height: 10px;
  justify-self: end;
  flex: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10'%3E%3Cpath d='M0 8H32M25.5 2.5L32 8' fill='none' stroke='%23333333' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  transition: transform .2s ease;
}
a:hover > .c-arrow { transform: translateX(4px); }


/* ==========================================================================
   Press Releases（背景色つき・画像の右に矢印）
   ========================================================================== */

/* セクションが連続すると .p-section + .p-section で上パディングが0になるため、
   プレスリリースだけは明示的に指定し直します。
   さらに、前のセクションの下パディングぶんだけ背景を上に伸ばして、
   見出しの上下の余白が揃うようにしています。 */
.p-section--press,
.p-section + .p-section--press {
  background: #FAF9F7;
  margin-top: -40px;   /* 前のセクションの下パディングを少しだけ食う。0に近いほど間が空きます */
  margin-bottom: 0;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.c-press-list__link {
  grid-template-columns: 8em 1fr 140px 34px;
  gap: 0 24px;
}
.c-press-list__thumb { width: 140px; }

@media (max-width: 767px) {

  .p-section--press,
  .p-section + .p-section--press {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    margin-top: -20px;
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .c-press-list__link {
    grid-template-columns: 1fr 88px 22px;
    gap: 4px 12px;
  }
  .c-press-list__link time { grid-column: 1; grid-row: 1; }
  .c-press-list__title     { grid-column: 1; grid-row: 2; }
  .c-press-list__thumb     { grid-column: 2; grid-row: 1 / 3; width: 88px; align-self: center; }
  .c-press-list__link .c-arrow { grid-column: 3; grid-row: 1 / 3; align-self: center; width: 22px; }

  .c-news-list__link .c-arrow { width: 22px; }
}


/* ==========================================================================
   選考の流れ（採用情報）
   ========================================================================== */

.p-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(100%, 700px);
  margin-inline: auto;
  text-align: left;
}
.p-steps__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
  padding-block: 26px;
  border-bottom: 1px solid var(--color-rule);
}
.p-steps__item:first-child { border-top: 1px solid var(--color-rule); }

.p-steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--color-accent);
}
.p-steps__body { font-size: 13px; line-height: 2; }
.p-steps__body b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
}

@media (max-width: 767px) {
  .p-steps__item { grid-template-columns: 44px 1fr; gap: 16px; padding-block: 20px; }
  .p-steps__num  { width: 44px; height: 44px; font-size: 16px; }
  .p-steps__body b { font-size: 15px; }
}


/* ==========================================================================
   修正：選考の流れ（採用情報）とボタン
   ・.p-page__body の ol/li 用の指定（インデント・番号）を打ち消す
   ・要素が増えても崩れないよう、grid ではなく flex にする
   ・塗りボタンの文字色を確実に白にする
   ========================================================================== */

.p-page__body .p-steps,
.p-steps {
  padding-left: 0;
  margin-block: 0;
  list-style: none;
}
.p-page__body .p-steps > li,
.p-steps > li {
  list-style: none;
  margin-bottom: 0;
}

.p-steps__item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.p-steps__num { flex: 0 0 56px; }
.p-steps__body { flex: 1 1 auto; min-width: 0; }
.p-steps__body br { display: none; }   /* 自動で入る改行を無視する */

/* 塗りボタン（本文中でもリンク色に負けないようにする） */
.p-page__body a.c-button--fill,
a.c-button--fill,
.c-button--fill {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}
.p-page__body a.c-button--fill:hover,
a.c-button--fill:hover { color: #fff; opacity: .82; }

/* 本文中のボタン（2026-08-24 お客様にて金色の塗りに変更） */
.p-page__body a.c-button,
.p-section__more a.c-button {
  text-decoration: none;
  color: #fff;
  background: var(--color-accent);
  border: none;
}
.p-page__body a.c-button:hover,
.p-section__more a.c-button:hover { color: #fff; opacity: .85; }

/* パートナー：まだ登録がないグループ */
.p-partner__empty {
  text-align: center;
  color: #777;
  font-size: 14px;
  padding-block: var(--space-xl);
}


/* ==========================================================================
   歴史ページ 配色変更（2026-08-25 デザイン戻り）

   前半（1731年〜1983年）… 背景 #000000 ／ 文字 #B58C38
   後半（1984年〜）        … 背景 #FFFFFF ／ 文字 #86611C

   縦の軸は上から下へ薄くなっていきます。
   装飾は金の筆（history_bk1.png）と麻の葉（history_bk3.png）を使います。
   ========================================================================== */

.p-history {
  --his-gold:  #B58C38;   /* 前半の文字・年号・ラベル・罫線 */
  --his-line:  rgba(181,140,56,.45);
  --his-gold2: #86611C;   /* 後半（明るい地）の文字 */

  color: var(--his-gold);
  background-color: #000000;
  background-image: none;
}

/* ---- 見出し・リード ---- */
.p-history__en,
.p-history__lead { color: var(--his-gold); }

/* ---- 年代の見出し ---- */
.p-era__years { color: var(--his-gold); }
.p-era__gen   { color: var(--his-gold); opacity: .9; }

/* ---- 背景に薄く入る大きな年代 ---- */
.p-era__big { color: rgba(181,140,56,.16); }

/* ---- 縦の軸：上から下へ薄くなる ---- */
.p-history__body::before {
  background: linear-gradient(180deg,
    rgba(181,140,56,.85) 0%,
    rgba(181,140,56,.45) 45%,
    rgba(181,140,56,.10) 100%);
}

/* ---- 年表 ---- */
.p-chrono__year { color: var(--his-gold); }
.p-chrono__who  { color: var(--his-gold); }
.p-chrono__text { color: var(--his-gold); opacity: .88; }
.p-chrono__item::before { background: var(--his-gold); }

/* ---- 写真のキャプション ---- */
.p-era__caption { color: var(--his-gold); opacity: .8; }

/* ---- Remarkable History（塗りの帯をやめ、金の文字に）---- */
.p-era__rh {
  background: none;
  color: var(--his-gold);
  padding: 0 0 8px;
  border-bottom: 1px solid var(--his-line);
}

/* ---- 円（人 / 技術 / 時代）---- */
.c-circle        { border-color: var(--his-line); }
.c-circle__label { color: var(--his-gold); }
.c-circle__title { color: var(--his-gold); }
.c-circle__text  { color: var(--his-gold); opacity: .88; }

/* ---- 後半（1984年〜）は白背景に切り替え ---- */
.p-history__light,
.p-section + .p-history__light {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 12%, #fff 100%);
  color: var(--his-gold2);
}
.p-history__light .p-era__years,
.p-history__light .p-era__gen,
.p-history__light .p-chrono__year,
.p-history__light .p-chrono__who,
.p-history__light .p-chrono__text,
.p-history__light .p-era__caption,
.p-history__light .c-circle__label,
.p-history__light .c-circle__title,
.p-history__light .c-circle__text,
.p-history__light .p-era__rh { color: var(--his-gold2); }

.p-history__light .p-era__gen,
.p-history__light .p-chrono__text,
.p-history__light .c-circle__text,
.p-history__light .p-era__caption { opacity: .9; }

.p-history__light .p-era__big  { color: rgba(134,97,28,.12); }
.p-history__light .c-circle    { border-color: rgba(134,97,28,.45); }
.p-history__light .p-era__rh   { border-bottom-color: rgba(134,97,28,.45); }
.p-history__light .p-chrono__item::before { background: var(--his-gold2); }

/* ---- 装飾（金の筆・麻の葉）---- */
.p-era::before { opacity: .55; }                                   /* 金の筆 */
.p-era::after  { background-image: url("/wp-content/themes/yoando-corp/assets/img/history_bk3.png"); } /* 麻の葉（黒地用）*/
.p-history__light .p-era::after {
  background-image: url("/wp-content/themes/yoando-corp/assets/img/history_bk2.png");                 /* 麻の葉（白地用）*/
}



/* ==========================================================================
   歴史ページ スマートフォン版（2026-08-25）

   XDのスマホ版が旧デザインのままのため、PC版の新デザインを
   1カラムに組み直しています。

   PCの読み順
     左列：年代見出し → Remarkable History → 年表 → 円[技術] → 円[時代]
     右列：写真 → 円[人]
   これを1列にすると 年代見出し → 年表 → 写真 → 技術 → 人 → 時代 です。

   HTMLの並びは 技術 → 時代 → 人 なので、ここで 技術 → 人 → 時代 に
   並べ替えます（PCと読む順番をそろえるため）。
   ========================================================================== */

@media (max-width: 767px) {

  /* ---- 並び順 ---- */
  .p-era__head   { order: 1; }
  .p-era__rh     { order: 2; }
  .p-chrono      { order: 3; }
  .p-era__big    { order: 4; }
  .p-era__photos { order: 5; }

  .p-era .c-circle--tech   { order: 6; }
  .p-era .c-circle--person { order: 7; }
  .p-era .c-circle--age    { order: 8; }

  /* ---- 年代の見出し ---- */
  .p-era__years { font-size: 19px; }
  .p-era__gen   { font-size: 12px; margin-top: 6px; }

  /* ---- Remarkable History：PCと同じ「金の文字＋下罫線」に ---- */
  .p-era__rh {
    display: block;
    margin: 0 0 24px 26px;
    padding: 0 0 8px;
    text-align: left;
    font-size: 13px;
    border-bottom: 1px solid var(--his-line);
  }
  .p-history__light .p-era__rh { border-bottom-color: rgba(134,97,28,.45); }

  /* ---- 大きな西暦：写真の上の区切りとして残します ---- */
  .p-era__big {
    position: static;
    margin: 36px 0 20px;
    font-size: 46px;
    color: rgba(181,140,56,.46);
    text-align: center;
    letter-spacing: .02em;
  }
  .p-history__light .p-era__big { color: rgba(134,97,28,.34); }

  /* ---- 写真 ---- */
  .p-era__photos  { gap: 28px; }
  .p-era__caption { font-size: 11px; line-height: 1.85; }

  /* ---- 円（人／技術／時代）---- */
  .p-era .c-circle { margin-top: 40px; }
  .p-era__photos + .c-circle,
  .p-era .c-circle--tech { margin-top: 48px; }
}


/* ==========================================================================
   記事本文のCSSが、ページ全体に影響しないようにする（防御）

   旧サイト（Webflow）から取り込んだ記事の中には、本文に <style> が
   書かれているものがあり、その中に

       li { list-style: disc; display: list-item; margin-left: 30px; }

   のような、ページ全体に効いてしまう指定が含まれていました。
   これによりヘッダーとフッターのナビに黒丸が付いていました。

   本文のCSSは fix-entry-css.php で本文の中だけに限定していますが、
   万一の取りこぼしに備えて、共通部分はここで明示的に戻します。
   ========================================================================== */

.l-header nav ul,
.l-header nav li,
.l-footer nav ul,
.l-footer nav li,
.c-news-list,
.c-news-list li,
.c-card-list,
.c-card-list li,
.c-breadcrumb,
.c-breadcrumb li,
.c-tabs,
.c-tabs li {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.l-header nav li,
.l-footer nav li,
.c-news-list li,
.c-breadcrumb li {
  list-style-type: none;
}


/* ==========================================================================
   歴史ページ 新レイアウト（2026-08-25）

   円（c-circle）をやめ、見出し＋罫線のテキストブロック（p-fact）にしました。
   本文の組み替えは restructure-history.php で行います。

   ┌──────────────────┬─┬────────────────────┐
   │ 1731-1845        │●│ Remarkable History │
   │ 初代〜四代目       │ │ ├ 1731年 …          │
   │ ［写真］           │ │ └ 1844年 …          │
   │ 技術              │ │ 人                  │
   │ ────              │ │ ────                │
   │ 本文              │ │ 本文                │
   │                  │ │ 時代                │
   └──────────────────┴─┴────────────────────┘
        左＝p-era__col--main    ↑金の縦軸    右＝p-era__col--sub

   左右を入れ替えたいときは、下の「■ 左右の割り当て」だけ直してください。
   ========================================================================== */

/* ---- 全体 ---- */

.p-era { position: relative; padding-top: 130px; }
.p-era + .p-era { padding-top: 170px; }

.p-era__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  column-gap: 90px;
  align-items: start;
}

/* ■ 左右の割り当て */
.p-era__col--main { grid-column: 1; }
.p-era__col--sub  { grid-column: 2; position: relative; }

/* ---- 金の縦軸（左右カラムの間）---- */

.p-era__col--sub::before {
  content: "";
  position: absolute;
  left: -45px;
  top: 12px;
  bottom: -170px;               /* 次の時代までつなげます */
  width: 1px;
  background: linear-gradient(180deg,
    rgba(181,140,56,.9) 0%,
    rgba(181,140,56,.3) 100%);
}
.p-era__col--sub::after {       /* 時代の起点の丸 */
  content: "";
  position: absolute;
  left: -50px;
  top: 7px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--his-gold);
}
.p-era:last-of-type .p-era__col--sub::before { bottom: 0; }

/* ---- 左：年号・世代 ---- */

.p-era__head { padding-left: 0; margin: 0 0 46px; }
.p-era__head::before { display: none; }   /* 旧レイアウトの丸 */

.p-era__years {
  display: block;
  font-size: 54px;
  line-height: 1.12;
  letter-spacing: .02em;
}
.p-era__gen {
  display: block;
  margin-top: 16px;
  font-size: 15px;
  letter-spacing: .12em;
  opacity: 1;
}

/* ---- 左：写真 ---- */

.p-era__photos { gap: 40px; }

/* ---- 右：Remarkable History ---- */

.p-era__rh {
  position: relative;
  display: block;
  margin: 0 0 36px;
  padding: 0;
  border: none;
  background: none;
  font-size: 15px;
  letter-spacing: .12em;
}
.p-era__rh::before {            /* 丸から見出しへ伸びる横線 */
  content: "";
  position: absolute;
  left: -45px;
  top: .72em;
  width: 32px;
  height: 1px;
  background: var(--his-gold);
}

/* ---- 右：年表 ---- */

.p-chrono { padding-left: 0; }
.p-chrono__item::before { left: -45px; width: 26px; top: 12px; }

/* ---- 人・技術・時代（円をやめたテキストブロック）---- */

.p-fact { margin-top: 84px; }

.p-fact__label {
  margin: 0 0 24px;
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: .18em;
  color: var(--his-gold);
}
.p-fact__label::after {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  margin-top: 14px;
  background: var(--his-gold);
}
.p-fact__title {
  margin: 0 0 20px;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .04em;
}
.p-fact__text {
  margin: 0;
  font-size: 13px;
  line-height: 2.05;
}

.p-history__light .p-fact__label,
.p-history__light .p-fact__title { color: var(--his-gold2); }
.p-history__light .p-fact__label::after { background: var(--his-gold2); }
.p-history__light .p-fact__text { color: var(--his-gold2); opacity: .9; }
.p-history__light .p-era__col--sub::before {
  background: linear-gradient(180deg, rgba(134,97,28,.7) 0%, rgba(134,97,28,.2) 100%);
}
.p-history__light .p-era__col--sub::after,
.p-history__light .p-era__rh::before { background: var(--his-gold2); }

/* ---- 背景：DNAの螺旋（ページ全体に縦に流します）---- */

.p-history__body::before { display: none; }   /* 旧：左端の軸 */

.p-history__body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("/wp-content/themes/yoando-corp/assets/img/history_spiral.png");
  background-repeat: repeat-y;
  background-position: 56% top;
  background-size: 1100px auto;
}

/* --------------------------------------------------------------------------
   スマートフォン：1カラムに積み直します
   並び順は 年号 → Remarkable History → 年表 → 写真 → 技術 → 人 → 時代
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  .p-era { padding-top: 80px; }
  .p-era + .p-era { padding-top: 100px; }

  .p-era__grid {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: 26px;
    column-gap: 0;
  }
  .p-era__col { display: contents; }

  .p-era__head    { order: 1; }
  .p-era__rh      { order: 2; }
  .p-chrono       { order: 3; }
  .p-era__photos  { order: 4; }
  .p-fact--tech   { order: 5; }
  .p-fact--person { order: 6; }
  .p-fact--age    { order: 7; }

  /* 軸は grid 側に描きます（display:contents の要素には描けないため）*/
  .p-era__grid::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 12px;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg,
      rgba(181,140,56,.85) 0%,
      rgba(181,140,56,.20) 100%);
  }
  .p-history__light .p-era__grid::before {
    background: linear-gradient(180deg, rgba(134,97,28,.7) 0%, rgba(134,97,28,.2) 100%);
  }

  .p-era__years { font-size: 34px; }
  .p-era__gen   { font-size: 13px; margin-top: 10px; }
  .p-era__head  { margin-bottom: 30px; }

  .p-era__rh { margin-bottom: 26px; font-size: 13px; }
  .p-era__rh::before { left: -24px; width: 16px; }
  .p-chrono__item::before { left: -24px; width: 16px; }

  .p-era__photos { gap: 26px; margin-top: 40px; }

  .p-fact { margin-top: 52px; }
  .p-fact__label { font-size: 18px; margin-bottom: 18px; }
  .p-fact__title { font-size: 17px; }
  .p-fact__text  { font-size: 13px; text-align: left; }

  .p-history__body::after { background-size: 760px auto; background-position: 60% top; }
}


/* ==========================================================================
   サイトマップ（/sitemap/）
   ========================================================================== */

.p-sitemap__body { margin-top: var(--space-lg); }

.p-sitemap__group + .p-sitemap__group { margin-top: var(--space-xl); }

.p-sitemap__head {
  margin: 0 0 var(--space-md);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .08em;
}
.p-sitemap__head a { text-decoration: none; color: inherit; }
.p-sitemap__head a:hover { color: var(--color-accent); }

.p-sitemap__year {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: var(--space-md) 0 12px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .06em;
}
.p-sitemap__year a { text-decoration: none; color: inherit; }
.p-sitemap__year a:hover { color: var(--color-accent); }
.p-sitemap__count { font-family: var(--font-base); font-size: 12px; color: #888; }

.p-sitemap__list { list-style: none; margin: 0; padding: 0; }
.p-sitemap__item { border-bottom: 1px solid #ededed; }
.p-sitemap__item > a {
  display: block;
  padding: 14px 30px 14px 16px;
  position: relative;
  text-decoration: none;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.7;
}
.p-sitemap__item > a::before {          /* 行頭の点 */
  content: "";
  position: absolute;
  left: 2px;
  top: 21px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
}
.p-sitemap__item > a::after {           /* 右の矢印 */
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-top: 1px solid #bbb;
  border-right: 1px solid #bbb;
  transform: rotate(45deg);
}
.p-sitemap__item > a:hover { color: var(--color-accent); background: #faf9f7; }

/* 記事の行は「日付＋タイトル」の2カラム */
.p-sitemap__list--entry .p-sitemap__item > a {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 4px 18px;
  align-items: baseline;
}
.p-sitemap__date  { font-size: 13px; color: #8b8b8b; letter-spacing: .04em; }
.p-sitemap__title { font-size: 14px; }

.p-sitemap__ext {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  font-size: 11px;
  color: #888;
  vertical-align: 1px;
}

/* 子ページ（タブ）*/
.p-sitemap__sub { list-style: none; margin: 0; padding: 0 0 10px 30px; }
.p-sitemap__sub li { border-top: 1px dotted #e6e6e6; }
.p-sitemap__sub a {
  display: block;
  position: relative;
  padding: 11px 0 11px 18px;
  text-decoration: none;
  color: #555;
  font-size: 13px;
}
.p-sitemap__sub a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 9px;
  height: 1px;
  background: #c9c9c9;
}
.p-sitemap__sub a:hover { color: var(--color-accent); }

@media (max-width: 767px) {
  .p-sitemap__head { font-size: 17px; }
  .p-sitemap__list--entry .p-sitemap__item > a {
    grid-template-columns: 1fr;
    padding-right: 24px;
  }
  .p-sitemap__date { font-size: 12px; }
  .p-sitemap__title { font-size: 13px; }
  .p-sitemap__sub { padding-left: 16px; }
}


/* reCAPTCHA の表示文言（バッジを隠す場合はGoogleの規約で表示が必要）*/
.c-form__recaptcha {
  margin: 18px 0 0;
  font-size: 11px;
  line-height: 1.8;
  color: #8b8b8b;
  text-align: center;
}
.c-form__recaptcha a { color: #8b8b8b; }


/* ==========================================================================
   歴史ページ 後半（1984年〜）の背景（2026-09-01）

   背景装飾は「黒地用」と「白地用」で別の画像です。
   ・history_dna.png … 黒地用。白地に重ねると灰色の四角に見えます
   ・history_bk4.png … 白地用のDNA
   ・history_bk5.png … 白地用の分子

   黒地用のDNAが後半の白い部分まで伸びていたため、
   後半に重なり順を持たせて覆い、専用の装飾を敷き直します。
   ========================================================================== */

.p-history__light {
  position: relative;
  z-index: 1;                 /* 前半のDNAを覆います */
  isolation: isolate;
}

/* 白地用のDNA（縦に流します）*/
.p-history__light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("/wp-content/themes/yoando-corp/assets/img/history_spiral.png");
  background-repeat: repeat-y;
  background-position: 54% 180px;
  background-size: 1000px auto;
}

/* 白地用の分子 */
.p-history__light::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  right: -40px;
  top: 420px;
  width: 620px;
  height: 417px;
  background: url("/wp-content/themes/yoando-corp/assets/img/history_bk5.png") no-repeat center / contain;
  opacity: .85;
}

/* 中身は装飾より前に出します */
.p-history__light > *,
.p-history__light .p-era { position: relative; z-index: 1; }

@media (max-width: 767px) {
  .p-history__light::before {
    background-size: 680px auto;
    background-position: 60% 120px;
  }
  .p-history__light::after {
    right: -80px;
    top: 260px;
    width: 340px;
    height: 229px;
    opacity: .7;
  }
}


/* ==========================================================================
   お問い合わせフォームの幅（2026-09-01）
   本文（750px）より広くして、入力欄を大きく見せます。
   ========================================================================== */

.l-container--form {
  width: min(100% - (var(--gutter) * 2), 940px);
}

.c-form__row { grid-template-columns: 13em 1fr; }

.c-form__field input[type="text"],
.c-form__field input[type="tel"],
.c-form__field input[type="email"],
.c-form__field select {
  max-width: 560px;
}
.c-form__field textarea { min-height: 200px; }

@media (max-width: 767px) {
  .c-form__row { grid-template-columns: 1fr; }
  .c-form__field input[type="text"],
  .c-form__field input[type="tel"],
  .c-form__field input[type="email"],
  .c-form__field select { max-width: none; }
  .c-form__field textarea { min-height: 160px; }
}


/* ==========================================================================
   歴史ページ 白と黒の切り替え（2026-09-01）

   切り替え部分に黒地用のDNAが透けて、灰色の板に見えていました。
   切り替えは黒→白のグラデーションだけにして、
   白地用の装飾は切り替えが終わったあとから始めます。
   ========================================================================== */

.p-history__light,
.p-section + .p-history__light {
  background: linear-gradient(180deg,
    #000000 0%,
    #000000 4%,
    #FFFFFF 22%,
    #FFFFFF 100%);
}

/* 白地用の装飾は、切り替えが終わってから出します */
.p-history__light::before { background-position: 54% 560px; }
.p-history__light::after  { top: 760px; }

@media (max-width: 767px) {
  .p-history__light,
  .p-section + .p-history__light {
    background: linear-gradient(180deg,
      #000000 0%,
      #000000 3%,
      #FFFFFF 16%,
      #FFFFFF 100%);
  }
  .p-history__light::before { background-position: 60% 360px; }
  .p-history__light::after  { top: 520px; }
}


/* ==========================================================================
   サイトマップ 調整（2026-09-01）
   記事1本ずつの掲載をやめ、一覧へのリンクにしました。
   ========================================================================== */

.p-sitemap__note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #8b8b8b;
  line-height: 1.7;
}

.p-sitemap__item > a .p-sitemap__count,
.p-sitemap__sub a .p-sitemap__count {
  margin-left: 10px;
  font-size: 12px;
  color: #8b8b8b;
}

.p-sitemap__sub a {
  display: flex;
  align-items: baseline;
  gap: 0;
}


/* ==========================================================================
   歴史ページ スクロールで黒→白に切り替える（2026-09-01）

   グラデーションでつなぐのをやめ、1984-2016年のブロックが
   画面に入ったところで背景と文字色を一斉に切り替えます。
   切り替えは footer.php のスクリプトが .is-light を付け外しして行います。
   ========================================================================== */

.p-history {
  background-color: #000000;
  transition: background-color .5s ease;
}
.p-history.is-light { background-color: #FFFFFF; }

/* グラデーションでの切り替えはやめます（灰色の板の原因でした）*/
.p-history__light,
.p-section + .p-history__light { background: none; }

/* ---- 文字色 ---- */

.p-history.is-light,
.p-history.is-light .p-history__en,
.p-history.is-light .p-history__lead,
.p-history.is-light .p-era__years,
.p-history.is-light .p-era__gen,
.p-history.is-light .p-era__rh,
.p-history.is-light .p-chrono__year,
.p-history.is-light .p-chrono__who,
.p-history.is-light .p-chrono__text,
.p-history.is-light .p-era__caption,
.p-history.is-light .p-fact__label,
.p-history.is-light .p-fact__title,
.p-history.is-light .p-fact__text {
  color: var(--his-gold2);
  transition: color .5s ease;
}

/* ---- 罫線・丸・軸 ---- */

.p-history.is-light .p-fact__label::after,
.p-history.is-light .p-chrono__item::before,
.p-history.is-light .p-era__col--sub::after,
.p-history.is-light .p-era__rh::before { background: var(--his-gold2); }

.p-history.is-light .p-era__col--sub::before,
.p-history.is-light .p-era__grid::before {
  background: linear-gradient(180deg, rgba(134,97,28,.7) 0%, rgba(134,97,28,.2) 100%);
}

.p-history.is-light .p-era__big { color: rgba(134,97,28,.12); }

/* ---- 背景の装飾を入れ替える ---- */

.p-history__body::after { transition: opacity .5s ease; }
.p-history.is-light .p-history__body::after { opacity: 0; }   /* 黒地用DNAを消す */

.p-history__light::before,
.p-history__light::after { opacity: 0; transition: opacity .5s ease; }
.p-history.is-light .p-history__light::before { opacity: 1; }
.p-history.is-light .p-history__light::after  { opacity: .85; }

/* 白地用の装飾は、切り替え直後から出します */
.p-history__light::before { background-position: 54% 60px; }
.p-history__light::after  { top: 240px; }

/* 麻の葉は明るい地に合う金色に */
.p-history.is-light .p-era::after { background-image: url("/wp-content/themes/yoando-corp/assets/img/history_bk2.png"); }

@media (max-width: 767px) {
  .p-history__light::before { background-position: 60% 40px; }
  .p-history__light::after  { top: 160px; }
}

/* 動きを減らす設定の方には切り替えのアニメーションを出しません */
@media (prefers-reduced-motion: reduce) {
  .p-history,
  .p-history *,
  .p-history *::before,
  .p-history *::after { transition: none !important; }
}


/* ==========================================================================
   歴史ページ 螺旋の装飾を1枚に統一（2026-09-01）

   これまでは黒地用（history_dna.png）と白地用（history_bk4.png）を
   切り替えていましたが、切り替わる瞬間に黒地用が一瞬見えてしまいました。

   黒でも白でも使える1枚（history_spiral.png）を不透明度20%で敷き、
   切り替え時も出し入れしません。これで一瞬写る現象がなくなります。
   ========================================================================== */

/*
 * 螺旋の画像は 560 x 2400px です。
 * 螺旋そのものは上から120pxの位置に置き、下は透明の余白にしてあります。
 * この余白が「繰り返しの間隔」になります。
 *
 * 【調整のしかた】
 *   大きさ  … background-size の 560px を変える（例 700px で大きく）
 *   間隔    … 画像の縦幅で決まります。変えたいときはご連絡ください
 *   左右位置… background-position の 56% を変える
 *   濃さ    … opacity の数値を変える（.2 が既定／お客様設定 2026-09-01）
 *              .15 で薄く／.4 で濃く／1 が最大
 *
 * 【黒地と白地で重ね方を変えています（お客様設定 2026-09-01）】
 *
 *   黒地（前半）  mix-blend-mode: hard-light
 *                 螺旋の明るい部分だけが黒に浮かび、暗い部分は沈みます。
 *                 金の粒子が発光しているような見え方になります。
 *
 *   白地（後半）  mix-blend-mode: unset（重ね方の指定なし）
 *                 白地に hard-light をかけると白飛びして消えてしまうため、
 *                 通常の重ね方に戻し、不透明度20%で薄く敷きます。
 */
.p-history__body::after {
  background-image: url("/wp-content/themes/yoando-corp/assets/img/history_spiral.png");
  background-size: 560px auto;
  background-position: 56% top;
  opacity: .2;
  mix-blend-mode: hard-light;
}

/* 白に切り替わったら、通常の重ね方に戻します */
.p-history.is-light .p-history__body::after {
  opacity: .2;
  mix-blend-mode: unset;
}

/* 白地用の螺旋（history_bk4.png）は使いません */
.p-history__light::before { display: none; }

/* 分子（history_bk5.png）は白のときだけ出します */
.p-history__light::after { opacity: 0; transition: opacity .5s ease; }
.p-history.is-light .p-history__light::after { opacity: .85; }

@media (max-width: 767px) {
  .p-history__body::after {
    background-size: 340px auto;
    background-position: 62% top;
  }
}