@charset "UTF-8";

/* ==========================================================================
   歴史（BRAND HISTORY）  ショップサイト用

   株式会社阿部養庵堂薬品
   コーポレートサイト https://corp.abeyoando.co.jp/history/ と同じ内容です。
   書き出し日：2026年9月3日

   --------------------------------------------------------------------------
   【使い方】

     1. このファイルを読み込みます
          <link rel="stylesheet" href="history.css">

     2. Googleフォントを読み込みます（先に読み込んでください）
          <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Shippori+Mincho:wght@500;600;700&display=swap">

     3. history.html の <div class="p-history"> ... </div> を貼り付けます

     4. ページの一番下に history.html の <script> を貼り付けます
          （スクロールで黒→白に切り替わる動きです。無くても表示はされます）

   --------------------------------------------------------------------------
   【画像のパス】

     すべて次のフォルダを見ています。

          /wp-content/themes/yoando-corp/assets/img/

     同梱の wp-content フォルダを、サイトのルート直下にそのまま置けば動きます。
     別の場所に置く場合は、このファイルと history.html の中の
     上記のパスを一括置換してください。20か所です。

   --------------------------------------------------------------------------
   【他のCSSとぶつからないように】

     ・すべての指定は .p-history の中だけに効きます
     ・下の「土台」は :where() で書いてあるため、詳細度は 0 です。
       ショップ側のCSSが優先されます。
     ・色は .p-history の中で --his-gold などとして定義しています。
       ショップ側の変数とは名前が衝突しません。
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. 変数（コーポレートサイトのデザイントークン）
   -------------------------------------------------------------------------- */

.p-history {

    /* ------------------------------------------------------------------
       色
       ※「仮」と書かれた値は、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以下  仮
       ------------------------------------------------------------------ */
   --header-h: 76px;
}


/* --------------------------------------------------------------------------
   2. 土台

   コーポレートサイトはブラウザの既定の余白を前提に組んであります。
   ショップ側にリセットCSSが入っていても同じ見た目になるよう、
   ここで明示しています。:where() を使っているので詳細度は 0 です。
   -------------------------------------------------------------------------- */

:where(.p-history) { font-family: var(--font-base); font-size: var(--size-body); line-height: var(--line-height); font-feature-settings: "palt"; text-align: left; }
:where(.p-history), :where(.p-history) *, :where(.p-history) *::before, :where(.p-history) *::after { box-sizing: border-box; }
:where(.p-history) :where(img, video) { max-width: 100%; height: auto; display: block; }
:where(.p-history) :where(p) { margin: 1em 0; }
:where(.p-history) :where(h1, h2, h3, h4) { font-family: var(--font-serif); line-height: 1.5; font-weight: 600; margin: 1em 0; }
:where(.p-history) :where(h3) { font-size: var(--size-h3); }
:where(.p-history) :where(ol, ul) { margin: 1em 0; padding-inline-start: 40px; }
:where(.p-history) :where(li) { margin: 0; }
:where(.p-history) :where(figure) { margin: 1em 40px; }
:where(.p-history) :where(figcaption) { margin: 0; }
:where(.p-history) :where(a) { color: inherit; }


/* --------------------------------------------------------------------------
   3. 歴史ページ本体

   コーポレートサイトの style.css から、歴史ページに関わる指定だけを
   書かれている順番のまま抜き出しています。順番を入れ替えないでください。
   後ろの指定が前の指定を上書きしている箇所が多くあります。
   -------------------------------------------------------------------------- */

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

.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;
}

@media (max-width: 767px) {
  .p-history th { width: auto; white-space: normal; padding-bottom: 0;
  }
  .p-history td { padding-top: .2em;
  }
}

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

.p-history {
  --his-gold: #C9A24B;   /* 見出しや年号の金色 */
  --his-line: rgba(201,162,75,.45);
  color: #fff;
  background-color: #0a0a0a;
  overflow-x: clip;      /* 画面の外にはみ出した装飾を隠します */
}

.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);
}

.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 > .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("https://shop.abeyoando.co.jp/Page/img/history/history_bk1.png");
  opacity: .5;
}

/* ---- 麻の葉（前半＝黒背景は茶色） ---- */

.p-era::after {
  width: 420px;
  height: 115px;
  background-image: url("https://shop.abeyoando.co.jp/Page/img/history/history_bk3.png");
  opacity: .9;
}

/* ---- 後半＝白背景は金色の麻の葉に ---- */

.p-history__light .p-era::after {
  background-image: url("https://shop.abeyoando.co.jp/Page/img/history/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;
  }
}

/* ---- 画像をヘッダーの下に潜り込ませる ---- */

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));
}

/* 年代の見出しを、年表の年号と同じ金色に */

.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);
  }
}

/* ==========================================================================
   修正：歴史ページの中身を 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;
  }
}

/* 黒文字のページは、画像の上端の白みを強めて読みやすくする */

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;
  }
}

/* ==========================================================================
   歴史ページ 配色変更（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: .3;
}

/* 金の筆 */

.p-era::after { background-image: url("https://shop.abeyoando.co.jp/Page/img/history/history_bk3.png");
}

/* 麻の葉（黒地用）*/

.p-history__light .p-era::after {
  background-image: url("https://shop.abeyoando.co.jp/Page/img/history/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;
  }
}

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

.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("https://shop.abeyoando.co.jp/Page/img/history/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;
  }
}

/* ==========================================================================
   歴史ページ 後半（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("https://shop.abeyoando.co.jp/Page/img/history/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("https://shop.abeyoando.co.jp/Page/img/history/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）

   切り替え部分に黒地用の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）

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

   2026-09-25：フェードの時間を .5s → 2s に伸ばし、より「徐々に」
   切り替わって見えるようにしています（ご依頼対応）。
   ========================================================================== */

.p-history {
  background-color: #000000;
  transition: background-color 2s ease;
}

.p-history.is-light { background-color: #FFFFFF;
}

/* 2026-09-25：文字色にもtransitionを追加。
   これが無いと、白→黒（is-light解除）のときだけ文字色が
   瞬時に切り替わってしまい、背景は2秒でふわっと変わるのに
   文字だけ先に切り替わって見える非対称が起きていました。 */
.p-history__en,
.p-history__lead,
.p-era__years,
.p-era__gen,
.p-era__rh,
.p-chrono__year,
.p-chrono__who,
.p-chrono__text,
.p-era__caption,
.p-fact__label,
.p-fact__title,
.p-fact__text {
  transition: color 2s ease;
}

/* グラデーションでの切り替えはやめます（灰色の板の原因でした）*/

.p-history__light,
.p-section + .p-history__light { background: none;
}

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

/* 2026-09-25：.p-history.is-light だけは他と切り離しています。
   ここに transition: color だけを書いてしまうと、.is-light が
   付いたときの .p-history に適用される transition 指定がこのルールに
   差し替わってしまい（.p-history 単体のルールより詳細度が高いため）、
   上のほうで指定している background-color の2秒フェードが
   打ち消されて、黒→白（.is-light を付ける方向）だけ背景が
   瞬時に切り替わってしまっていました。
   ここで background-color と color の両方を指定して、
   背景と文字色の両方が2秒でふわっと切り替わるようにしています。 */
.p-history.is-light {
  color: var(--his-gold2);
  transition: background-color 2s ease, color 2s ease;
}

.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 2s 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 2s ease;
}

.p-history.is-light .p-history__body::after { opacity: 0;
}

/* 黒地用DNAを消す */

.p-history__light::before,
.p-history__light::after { opacity: 0; transition: opacity 2s 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("https://shop.abeyoando.co.jp/Page/img/history/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;
  }
}

/*
 * 螺旋の画像は 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("https://shop.abeyoando.co.jp/Page/img/history/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 2s ease;
}

.p-history.is-light .p-history__light::after { opacity: .85;
}


/* ==========================================================================
   歴史ページ 修正（2026-09-27）
   コーポレートサイトと同じ内容に揃えています。

   ① 背景の螺旋を新しい画像に差し替え
        黒地  history_bg.png   mix-blend-mode: screen   … 黒が消えます
        白地  history_bg2.png  mix-blend-mode: multiply … 白が消えます
      画像は透過していませんが、重ね方で透過しているように見せています。

   ② 螺旋はページ全体に繰り返さず、枚数と位置を直接指定します
        黒地3枚 ／ 白地1枚

   ③ スクロールに合わせてゆっくり動かします（history.aspx のスクリプト）

   ④ 金の筆（history_bk1.png）と分子（history_bk5.png）は非表示にします

   ⑤ BRAND STORY の見た目

   --------------------------------------------------------------------------
   【注意】.p-history__light に z-index を付けないでください。

     mix-blend-mode: multiply は「背後にあるもの」と掛け合わせて白を消します。
     z-index を付けると重ね合わせがそこで区切られ、背後が無くなるため、
     白地の螺旋が白地に溶けて見えなくなります。
     中身（.p-era など）だけを前面に出してください。

   --------------------------------------------------------------------------
   【調整のしかた】
     螺旋の数   … background-position の行を増減（image と repeat も同数に）
     大きさ     … background-size の 700px
     濃さ       … opacity（黒地 .4 ／ 白地 .85）
     左右の位置 … background-position の 56%
     動きの強さ … history.aspx の MOVE = 240
   ========================================================================== */


/* ---- 重なりの整理（順番を変えないでください）---- */

.p-history__body > .p-era {
  position: relative;
  z-index: 1;
}

.p-history__light {
  position: relative;
  z-index: auto;
  isolation: auto;
}

.p-history__light > *,
.p-history__light .p-era {
  position: relative;
  z-index: 1;
}


/* ---- 黒地の螺旋（3枚）---- */

.p-history__body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image:
    url("https://shop.abeyoando.co.jp/Page/img/history/history_bg.png"),
    url("https://shop.abeyoando.co.jp/Page/img/history/history_bg.png"),
    url("https://shop.abeyoando.co.jp/Page/img/history/history_bg.png");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    56% calc(8%  + var(--spiral-y, 0px)),
    56% calc(34% + var(--spiral-y, 0px)),
    56% calc(62% + var(--spiral-y, 0px));
  background-size: 700px auto, 700px auto, 700px auto;

  opacity: .4;
  mix-blend-mode: screen;

  /* 白に切り替わるときは早めに消します。
     2秒かけると、白くなっていく途中で黒い画像が見えてしまうためです。 */
  transition: opacity .7s ease;
}

.p-history.is-light .p-history__body::after {
  opacity: 0;
  mix-blend-mode: screen;
}


/* ---- 白地の螺旋（1枚）---- */

.p-history__light::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image: url("https://shop.abeyoando.co.jp/Page/img/history/history_bg2.png");
  background-repeat: no-repeat;
  background-position: 56% calc(18% + var(--spiral-y, 0px));
  background-size: 700px auto;

  opacity: 0;
  mix-blend-mode: multiply;

  /* 黒地の画像が消えきってから出します（0.8秒待って1.5秒かけて表示） */
  transition: opacity 1.5s ease .8s;
}

/* ★白地用は「白地に淡い金」の画像です。multiply は掛け算のため
   淡い色ほど変化が小さく、黒地用と同じ数値では見えません。
   そのため黒地用（.4）より高めにしています。 */
.p-history.is-light .p-history__light::before {
  opacity: .85;
}


/* ---- 金の筆と分子を非表示に ---- */

.p-era::before { display: none; }
.p-history__light::after { display: none; }


/* ---- BRAND STORY ---- */

.p-brandstory {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, 900px);
  margin: 0 auto;
  padding-block: 90px 40px;
  text-align: center;
}
.p-brandstory p{text-align: center;}
.p-brandstory__en {
  margin: 0 0 40px;
  font-family: var(--font-serif);   /* しっぽり明朝 */
  font-size: 22px;
  letter-spacing: .28em;
  transition: color 2s ease;
}
.p-brandstory__text {
  margin: 0 0 2em;
  font-family: var(--font-serif);   /* しっぽり明朝 */
  font-size: 16px;
  line-height: 2.4;
  letter-spacing: .06em;
  transition: color 2s ease;
}
.p-brandstory__text:last-child { margin-bottom: 0; }

.p-history.is-light .p-brandstory__en,
.p-history.is-light .p-brandstory__text {
  color: var(--his-gold2);
  transition: color 2s ease;
}

@media (max-width: 767px) {
  .p-brandstory { padding-block: 60px 30px; text-align: left; }
  .p-brandstory__en { font-size: 18px; text-align: center; margin-bottom: 28px; }
  .p-brandstory__text { font-size: 15px; line-height: 2.2; }
  .p-brandstory__text .pc { display: none; }
  .p-brandstory p {
    text-align: left;
}


/* ---- スマートフォン（螺旋）---- */

@media (max-width: 767px) {
  .p-history__body::after {
    background-size: 380px auto, 380px auto, 380px auto;
    background-position:
      62% calc(8%  + var(--spiral-y, 0px)),
      62% calc(34% + var(--spiral-y, 0px)),
      62% calc(62% + var(--spiral-y, 0px));
  }
  .p-history__light::before {
    background-size: 380px auto;
    background-position: 62% calc(18% + var(--spiral-y, 0px));
  }
}

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