/* =============================================================================
   article-backstory-prototype.css — BACK STORY 記事 PC/SP共通・完成版
   適用: BACK STORY 実記事と article-template.html
   ・PCは 2026-09-04 の2カラムを維持
   ・SP共通は 2026-10-06、WANKOMANIA実機確認値を正本に統一
   ・Startup Costs SP余白（2026-10-06c）: margin-top 130px / inner padding-top 90px / padding-bottom 50px
   ・SP通常本文（2026-10-06e）: 導入とセクション本文は font-weight 500。.bsa-emphasis の 600 は維持
   ・本文SECTION：PCは非対称2カラム、SPは見出し → 本文 → 画像
   ・固定ルール: .cursor/rules/bsa-pc-baseline.mdc / bsa-info-vertical-rule.mdc
   ============================================================================= */

body.page-backstory.page-legacy-article:has(.bsa-article) {
  --bsa-article-max: 1080px;
  --bsa-article-gutter: clamp(22px, 4vw, 48px);
  --bsa-ink: #1a1816;
  --bsa-ink-soft: #2c2926;
  --bsa-paper: #faf8f5;
  --bsa-paper-deep: #f3efe9;
  /* 落ち着いたブルーグレー（編集ラベル用） */
  --bsa-accent: #8a9bab;
  --bsa-accent-quiet: #6e7f8c;
  /* overflow-x は body では掛けない（100vw 全幅背景を切るため）。横はみ出しは HERO で封じる */
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--bsa-ink);
  background: var(--bsa-paper);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-figure {
  margin: 0;
  width: 100%;
}

/* =============================================================================
   HERO — エディトリアル2カラム（本試作記事のみ / article-backstory-prototype.css）
   ============================================================================= */
body.page-backstory.page-legacy-article:has(.bsa-article) .bg-switcher.bs-hero.bsa-hero {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
  background: var(--bsa-paper);
  background-image: none;
  background-size: auto;
  background-position: initial;
  background-repeat: no-repeat;
  /* 右bleedはセクション内で見せ、document 横スクロールは出さない */
  overflow-x: clip;
  overflow-y: visible;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-inner {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 35fr 65fr;
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: clamp(560px, 72vh, 780px);
  transform: none;
  text-align: left;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-copy {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  padding:
    clamp(52px, 5.5vw, 80px)
    clamp(28px, 3vw, 48px)
    clamp(48px, 5vw, 72px)
    clamp(48px, 5.5vw, 88px);
  color: var(--bsa-ink);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-center {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-since {
  margin: 0;
}

/* 2008 / WANKOMANIA / トリミングサロン — グループYのみ */
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-brand {
  margin: 0;
  transform: translateY(20px);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-since-label,
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-since-year,
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-shop-name,
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-shop-role {
  margin: 0;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-since-label {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: clamp(17px, 1.35vw, 22px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: rgba(26, 24, 22, 0.55);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-since-year {
  margin-top: 0.04em;
  font-family: "Bodoni Moda", "Didot", "Bodoni MT", "Times New Roman", serif;
  font-size: clamp(120px, 12.5vw, 186px);
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "opsz" 96;
  line-height: 0.86;
  letter-spacing: -0.01em;
  color: var(--bsa-ink);
  white-space: nowrap;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-shop {
  margin-top: clamp(28px, 3.2vh, 44px);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-shop-name {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--bsa-ink-soft);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-shop-role {
  margin-top: 0.5em;
  font-family: "Noto Serif JP", "Shippori Mincho", serif;
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.14em;
  color: rgba(26, 24, 22, 0.66);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-media {
  position: relative;
  min-width: 0;
  min-height: clamp(560px, 72vh, 780px);
  overflow: hidden;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-media::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 22%;
  pointer-events: none;
  background: linear-gradient(
    to right,
    #faf8f5 0%,
    rgba(250, 248, 245, 0.72) 28%,
    rgba(250, 248, 245, 0.18) 62%,
    rgba(250, 248, 245, 0) 100%
  );
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-media::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 12%;
  pointer-events: none;
  background: linear-gradient(
    to left,
    #faf8f5 0%,
    rgba(250, 248, 245, 0.42) 28%,
    rgba(250, 248, 245, 0.12) 62%,
    rgba(250, 248, 245, 0) 100%
  );
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(560px, 72vh, 780px);
  object-fit: cover;
  object-position: 50% center;
  filter: none;
  opacity: 1;
  mix-blend-mode: normal;
}

@media screen and (min-width: 1024px) {
  /* Header overlays HERO: transparent so the photo reaches the top-right edge */
  body.page-backstory.page-legacy-article:has(.bsa-article) .header {
    position: relative;
    z-index: 20;
    border-bottom: none;
    box-shadow: none;
    background: transparent;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .header .header-inner {
    background: transparent;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .header::before,
  body.page-backstory.page-legacy-article:has(.bsa-article) .header::after {
    content: none;
    display: none;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .header .nav a {
    color: #fff;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .header .logo-img {
    height: clamp(64.17px, 2.7738vw + 49.68px, 71.415px);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bg-switcher.bs-hero.bsa-hero {
    position: relative;
    z-index: 1;
    /* Match header height (padding 25+16 + logo) so the photo meets the viewport top */
    --bsa-hero-underlap: calc(41px + clamp(64.17px, 2.7738vw + 49.68px, 71.415px));
    margin-top: calc(-1 * var(--bsa-hero-underlap));
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-inner {
    /* 右抜けは残す。gutter全額+余白だと過大になりやすいので、gutterの約65%+小さな余白に抑制 */
    --bsa-hero-bleed-right: calc(
      calc(var(--home-editorial-gutter) * 0.65) + clamp(4px, 0.3vw, 8px) +
      max(0px, (100vw - var(--home-editorial-max)) / 2)
    );
    max-width: var(--home-editorial-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--home-editorial-gutter);
    padding-right: 0;
    min-height: calc(clamp(620px, 76vh, 840px) + var(--bsa-hero-underlap));
    overflow: visible;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-copy {
    padding:
      clamp(28px, 3vw, 44px)
      clamp(20px, 2vw, 32px)
      clamp(52px, 5vw, 72px)
      0;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-center {
    padding-top: clamp(12px, 1.5vw, 24px);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-media {
    width: calc(100% + var(--bsa-hero-bleed-right));
    margin-right: calc(-1 * var(--bsa-hero-bleed-right));
    min-height: calc(clamp(620px, 76vh, 840px) + var(--bsa-hero-underlap));
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-media::before {
    width: 14%;
    background: linear-gradient(
      to right,
      #faf8f5 0%,
      rgba(255, 255, 255, 0.7) 18%,
      rgba(255, 255, 255, 0.22) 42%,
      rgba(255, 255, 255, 0.04) 62%,
      rgba(255, 255, 255, 0) 82%
    );
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-media::after {
    width: clamp(56px, 10%, 110px);
    background: linear-gradient(
      to left,
      #faf8f5 0%,
      rgba(255, 255, 255, 0.48) 20%,
      rgba(255, 255, 255, 0.12) 48%,
      rgba(255, 255, 255, 0.02) 68%,
      rgba(255, 255, 255, 0) 88%
    );
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-since-label {
    font-size: clamp(20px, 1.59vw, 26.3px);
    font-style: normal;
    font-weight: 700;
    color: rgba(26, 24, 22, 0.78);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-brand {
    transform: translateY(40px);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-since-year {
    margin-top: calc(0.04em + clamp(12px, 1.4vw, 20px));
    letter-spacing: 0.02em;
    font-size: clamp(134px, 14vw, 208px);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-shop {
    margin-top: calc(clamp(28px, 3.2vh, 44px) + clamp(16px, 1.5vw, 24px));
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-shop-name {
    font-size: clamp(22.6px, 1.76vw, 28px);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-shop-role {
    font-size: clamp(19.7px, 1.4vw, 23.5px);
    letter-spacing: 0.13em;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-photo {
    min-height: calc(clamp(620px, 76vh, 840px) + var(--bsa-hero-underlap));
    object-position: 54% 20%;
    filter: brightness(1.12) contrast(1.03);
  }
}

/* =============================================================================
   THOUGHT — HERO直下「今、想うこと」導入
   ============================================================================= */
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-thought {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding:
    clamp(52px, 5.8vw, 84px)
    var(--bsa-article-gutter)
    clamp(64px, 6.8vw, 92px);
  background: var(--bsa-paper);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-thought-inner {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  column-gap: 0;
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-thought-label {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 0.2em;
  margin-right: clamp(22px, 2.6vw, 36px);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-thought-label-col {
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "Noto Sans JP", "IBM Plex Sans", sans-serif;
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.16em;
  color: var(--bsa-accent);
  white-space: nowrap;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-thought-rule {
  width: 1px;
  min-height: 3.8em;
  align-self: stretch;
  margin-right: clamp(44px, 5.2vw, 84px);
  background: rgba(138, 155, 171, 0.5);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-thought-heading {
  margin: 0;
  max-width: 15em;
  font-family: "Noto Serif JP", "Shippori Mincho", serif;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 500;
  line-height: 1.78;
  letter-spacing: 0.05em;
  color: var(--bsa-ink);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-thought-heading-line {
  display: inline-block;
  white-space: nowrap;
}

@media screen and (min-width: 1024px) {
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-thought {
    padding-top: clamp(81px, 8.1vw, 117px);
    padding-bottom: clamp(94px, 9.4vw, 135px);
    padding-left: 0;
    padding-right: 0;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-thought-inner {
    width: calc(88% + 0.24 * var(--home-editorial-gutter));
    max-width: calc(var(--home-editorial-max) * 0.88 + 0.24 * var(--home-editorial-gutter));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--home-editorial-gutter);
    padding-right: var(--home-editorial-gutter);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-thought-label {
    gap: 0.26em;
    margin-right: 100px;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-thought-label-col {
    font-family: "Noto Serif JP", "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-weight: 400;
    font-size: clamp(22.6px, 1.82vw, 27.9px);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-thought-rule {
    width: 1.4px;
    min-height: 4.9em;
    margin-left: 0;
    margin-right: 100px;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-thought-heading {
    max-width: none;
    font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-size: clamp(48px, 4.83vw, 62px);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.005em;
  }
}

/* =============================================================================
   INTRO — プロローグ（lede：縦見出し｜本文｜写真）
   ============================================================================= */
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-intro {
  width: 100%;
  max-width: none;
  margin: -30px 0 0;
  padding: clamp(48px, 7vw, 96px) var(--bsa-article-gutter) clamp(72px, 9vw, 120px);
  background: var(--bsa-paper);
  border-bottom: none;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-intro-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--bsa-article-max);
  margin: 0 auto;
}

/* --- LEDE（プロローグ：PCは縦見出し｜本文｜写真） --- */
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede {
  display: block;
  max-width: 42em;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede-title {
  margin: 0 0 0.6em;
  font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--bsa-ink);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede-body {
  margin-top: 0.35em;
  font-family: var(--bs-font-mincho, "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif);
  font-size: clamp(14px, 0.35vw + 13px, 16px);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--bsa-ink-soft);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede-body p {
  margin: 0;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede-media {
  margin-top: 1.5em;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede-media .bsa-article-figure {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e8e2da;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede-media .bsa-article-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (min-width: 1024px) {
  /* イントロ外枠 = HOME本文 .home-container と同基準 */
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-intro {
    padding-left: 0;
    padding-right: 0;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-intro-inner {
    box-sizing: border-box;
    width: calc(88% + 0.24 * var(--home-editorial-gutter));
    max-width: calc(var(--home-editorial-max) * 0.88 + 0.24 * var(--home-editorial-gutter));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--home-editorial-gutter);
    padding-right: var(--home-editorial-gutter);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede {
    /* 画像列幅は旧gap前提の0.44frを固定。gap増分は中央本文で吸収 */
    --bsa-lede-gap-prev: clamp(20px, 2.2vw, 32px);
    --bsa-lede-media-col: calc((100% - 2 * var(--bsa-lede-gap-prev)) * 0.44);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) var(--bsa-lede-media-col);
    grid-template-areas: "title body media";
    gap: clamp(36px, 3.8vw, 56px);
    align-items: start;
    max-width: none;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede-title {
    grid-area: title;
    margin: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: clamp(28px, 2.6vw, 40px);
    font-weight: 400;
    line-height: 1.78;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede-body {
    grid-area: body;
    margin-top: 0;
    max-width: none;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede-media {
    grid-area: media;
    margin-top: 0;
    min-width: 0;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede-media .bsa-article-figure {
    aspect-ratio: 4 / 5;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede-media .bsa-article-media {
    object-fit: cover;
    object-position: 78% 42%;
  }
}

/* =============================================================================
   STORIES FROM THE FIELD — 記事群入口の編集ラベル（囲みCTAではない）
   ============================================================================= */
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-field {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 var(--bsa-article-gutter);
  background: var(--bsa-paper-deep);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-field-inner {
  max-width: var(--bsa-article-max);
  margin: 0 auto;
  padding-top: clamp(40px, 5vw, 68px);
  padding-bottom: clamp(28px, 3.2vw, 44px);
  border-bottom: 1px solid rgba(138, 155, 171, 0.28);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-field-label {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  margin: -70px 0 0;
  /* 横線〜文字: 13.31+14 / 縦線〜英字は維持 */
  padding: 19.31px 0 2.42px 26.68px;
  border: none;
  font-family: "IBM Plex Sans", "Noto Sans JP", sans-serif;
  font-size: 10.89px;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0.2em;
  color: var(--bsa-accent);
}

/* 短い横線（縦線より上・非接続）。太さは描画上のウェイト合わせ（数値一致ではない） */
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-field-label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 29.11px;
  width: 34.61px;
  height: 1.21px; /* PC: 縦棒 width と視覚ウェイト揃え */
  background: rgba(138, 155, 171, 0.72);
}

/* 縦線：全長の上下各10%を短縮し中心を維持（太さ・左位置は維持） */
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-field-label::after {
  content: "";
  position: absolute;
  top: 21.94px;
  left: 0;
  width: 1.21px;
  height: 35.78px;
  background: rgba(138, 155, 171, 0.72);
}

/* =============================================================================
   本文SECTION — PC: 雑誌的非対称 / SP: 1カラム
   共通グリッド + .bsa-article-section--reverse で左右反転
   ============================================================================= */
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 var(--bsa-article-gutter);
  background: var(--bsa-paper-deep);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.43fr) minmax(0, 0.57fr);
  grid-template-areas: "body media";
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  max-width: var(--bsa-article-max);
  margin: 0 auto;
  padding-top: clamp(48px, 5.5vw, 80px);
  padding-bottom: clamp(48px, 5.5vw, 80px);
  border-bottom: 1px solid rgba(138, 155, 171, 0.28);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section--reverse .bsa-article-section-inner {
  grid-template-columns: minmax(0, 0.57fr) minmax(0, 0.43fr);
  grid-template-areas: "media body";
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-body {
  grid-area: body;
  min-width: 0;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-image {
  grid-area: media;
  min-width: 0;
  margin-top: 0;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-heading {
  margin-top: 0;
  margin-bottom: clamp(28px, 3.2vw, 44px);
  margin-left: 0;
  margin-right: 0;
  font-family: "Noto Serif JP", "Shippori Mincho", serif;
  font-size: clamp(20px, 1.4vw + 14px, 28px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--bsa-ink);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-text {
  font-family: var(--bs-font-mincho, "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif);
  font-size: clamp(14px, 0.25vw + 13px, 15.5px);
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--bsa-ink-soft);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-text p {
  margin: 0;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-text p + p {
  margin-top: 1.25em;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-emphasis {
  display: inline;
  color: var(--bsa-accent-quiet);
  font-weight: 600;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-image .bsa-article-figure {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #e8e2da;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-image .bsa-article-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (min-width: 1024px) {
  /* 記事群 = ヘッダーと同じ editorial 幅基準 */
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-field,
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section {
    padding-left: 0;
    padding-right: 0;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-field-inner,
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-inner {
    box-sizing: border-box;
    width: calc(88% + 0.24 * var(--home-editorial-gutter));
    max-width: calc(var(--home-editorial-max) * 0.88 + 0.24 * var(--home-editorial-gutter));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--home-editorial-gutter);
    padding-right: var(--home-editorial-gutter);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-inner {
    gap: clamp(48px, 5.5vw, 80px);
    padding-top: clamp(64px, 6.5vw, 96px);
    padding-bottom: clamp(64px, 6.5vw, 96px);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-field-inner {
    padding-top: clamp(56px, 6vw, 88px);
    padding-bottom: clamp(36px, 3.8vw, 52px);
  }
}

/* =============================================================================
   SECTION005 → Gallery
   白帯の正体: .bs-photo-strip の padding-top（--bs-page-bg の露出）
   margin / 空要素ではなく、ギャラリー側の上padding。
   → 同量を SECTION005 の beige（--bsa-paper-deep）padding-bottom へ吸収し、
     ストリップの padding-top を 0 にする（下padding・画像サイズは維持）
   ============================================================================= */
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-005 {
  padding-bottom: clamp(80px, 10vw, 127px);
}

body.page-backstory.page-legacy-article:has(.bsa-article) main .bs-photo-strip {
  padding-top: 0;
  padding-bottom: clamp(80px, 10vw, 127px);
}

/* =============================================================================
   Startup Costs / Information — 編集誌面型レイアウト（この試作記事のみ）
   横幅・左軸は SECTION001〜005 と同一の editorial 88% 基準
   ============================================================================= */
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs,
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--bsa-paper);
  border: none;
  box-shadow: none;
}

/* article-template の旧カード／見出し装飾を無効化 */
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs::before,
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs::after,
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info::before,
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info::after {
  content: none;
  display: none;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-inner,
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--bsa-article-max);
  margin: 0 auto;
  padding-left: var(--bsa-article-gutter);
  padding-right: var(--bsa-article-gutter);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-inner {
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(28px, 3.6vw, 40px);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-inner {
  padding-top: clamp(28px, 3.6vw, 40px);
  padding-bottom: clamp(48px, 6vw, 72px);
}

@media screen and (min-width: 1024px) {
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-inner,
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-inner {
    width: calc(88% + 0.24 * var(--home-editorial-gutter));
    max-width: calc(var(--home-editorial-max) * 0.88 + 0.24 * var(--home-editorial-gutter));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--home-editorial-gutter);
    padding-right: var(--home-editorial-gutter);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-inner {
    padding-top: clamp(64px, 6.5vw, 96px);
    padding-bottom: clamp(28px, 3vw, 44px);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-inner {
    padding-top: clamp(28px, 3vw, 44px);
    padding-bottom: clamp(64px, 6.5vw, 96px);
  }
}

/* --- Startup Costs --- */
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 56px);
  align-items: start;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-head {
  margin: 0;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-rule {
  display: none;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-label {
  margin: 0 0 calc(clamp(4px, 0.55vw, 8px) + 10px);
  font-family: "IBM Plex Sans", "Noto Sans JP", sans-serif;
  font-size: clamp(14.8px, 0.94vw + 12.1px, 17.5px);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  color: #68492f;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-heading {
  margin: 0 0 calc(clamp(10px, 1.2vw, 14px) + 10px);
  font-family: var(--bs-font-mincho, "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif);
  font-size: clamp(26px, 2.4vw + 14px, 40px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--bsa-ink);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-note {
  margin: 0;
  max-width: 28em;
  font-family: var(--bs-font-mincho, "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif);
  font-size: clamp(15px, 0.4vw + 13.5px, 17px);
  font-weight: 400;
  line-height: 1.9; /* PC完成値（2026-09-07） */
  letter-spacing: 0.03em;
  color: var(--bsa-ink-soft);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.72em;
  width: max-content;
  max-width: 100%;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-list li::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-top: 0.4em;
  align-self: flex-start;
  background: #c9b39a;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-item {
  flex: 0 0 auto;
  font-family: var(--bs-font-mincho, "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif);
  font-size: clamp(15px, 0.35vw + 13.5px, 17px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--bsa-ink);
  white-space: nowrap;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-dots {
  flex: 1 1 auto;
  width: auto;
  min-width: 2.75em;
  height: 0;
  margin: 0 2px;
  border-bottom: 1px dotted rgba(26, 24, 22, 0.28);
  transform: translateY(-0.35em);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-amount {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--bs-font-mincho, "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif);
  font-size: clamp(15px, 0.35vw + 13.5px, 17px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--bsa-ink);
  text-align: right;
  white-space: nowrap;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  padding-top: 0;
  width: 100%;
  min-width: 0;
}

/* leaf-frame-001.png: 1278×1230 ≒ 1.039 — 比率維持・円装飾は画像側に任せる */
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total-frame {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(248px, 72vw);
  aspect-ratio: 1278 / 1230;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: transparent;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total-frame-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}

/* dog-frame は SP 専用。PC では leaf-frame のみ */
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total-frame-img--dog {
  display: none;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: auto;
  max-width: none;
  /* 葉が左下のため、見た目の円中心へわずかに寄せる */
  transform: translate(1px, -3px);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total-label,
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total-figure {
  margin: 0;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total-label {
  font-family: var(--bs-font-mincho, "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif);
  font-size: clamp(15px, 1.21vw, 17.4px);
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.2;
  color: var(--bsa-ink-soft);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total-figure {
  position: relative;
  margin-top: 0.18em;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  color: #2a221c;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total-num {
  flex: 0 0 auto;
  font-family: var(--bs-font-mincho, "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif);
  font-size: clamp(52px, 5.6vw, 74px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0.01em;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total-unit {
  /* 880の右外へ添える（ラベル中央＝880中央を崩さない） */
  position: absolute;
  left: 100%;
  bottom: 0.12em;
  margin-left: 0.1em;
  font-family: var(--bs-font-mincho, "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif);
  font-size: clamp(12px, 0.95vw, 14.5px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

@media screen and (min-width: 1024px) {
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-grid {
    grid-template-columns: minmax(0, 1.15fr) 1px minmax(0, 1fr) minmax(200px, 0.7fr);
    grid-template-rows: auto auto;
    column-gap: clamp(28px, 3.2vw, 48px);
    row-gap: 0;
    align-items: start;
  }

  /* 見出しは左上段、本文・内訳・総額は下段で上端揃え */
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-intro {
    display: contents;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-head {
    grid-column: 1;
    grid-row: 1;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-note {
    grid-column: 1;
    grid-row: 2;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-rule {
    display: block;
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    width: 1px;
    margin: 0;
    background: rgba(26, 24, 22, 0.14);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-breakdown {
    grid-column: 3;
    grid-row: 2;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total {
    grid-column: 4;
    grid-row: 2;
    margin-top: -20px;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total-frame {
    width: min(268px, 100%);
  }
}

/* --- Information --- */
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info {
  border-top: 1px solid rgba(26, 24, 22, 0.14);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-head {
  margin: 0 0 clamp(14px, 1.8vw, 22px);
  padding: 0;
  border: none;
  background: transparent;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-label {
  margin: 0 0 clamp(4px, 0.55vw, 8px);
  font-family: "IBM Plex Sans", "Noto Sans JP", sans-serif;
  font-size: clamp(14.8px, 0.94vw + 12.1px, 17.5px);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  color: #5a7184;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-heading {
  margin: 0;
  font-family: var(--bs-font-mincho, "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif);
  font-size: clamp(26px, 2.4vw + 14px, 40px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--bsa-ink);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-figure {
  margin: 0;
  width: 100%;
  overflow: hidden;
  background: #e8e2da;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 52% 38%;
  border-radius: 0;
  box-shadow: none;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 32px);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-rule {
  display: none;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-col {
  margin: 0;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-row {
  /* FROZEN: 行内は max-content auto（1fr禁止＝dd箱の幽霊余白で縦線が右寄りに見えるため） */
  display: grid;
  grid-template-columns: max-content auto;
  column-gap: 0.55em;
  align-items: start;
  margin: 0 0 0.95em;
  font-family: var(--bs-font-mincho, "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif);
  font-size: clamp(14.1px, 0.33vw + 12.7px, 16px);
  line-height: 2.1;
  color: var(--bsa-ink);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-row:last-child {
  margin-bottom: 0;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-row dt {
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-row dt::after {
  content: "：";
  letter-spacing: 0;
  margin-left: 0.15em;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-row dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-row--business dd {
  overflow-wrap: normal;
  word-break: keep-all;
  line-break: strict;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-row--company dd {
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-row--address dd {
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-row a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 24, 22, 0.22);
  white-space: nowrap;
  font-size: 0.88em;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-row a:hover {
  border-bottom-color: rgba(26, 24, 22, 0.5);
}

@media screen and (min-width: 1024px) {
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-grid {
    grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.94fr);
    column-gap: clamp(36px, 4vw, 64px);
    align-items: start;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-photo {
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 1;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-figure {
    height: auto;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-facts {
    /*
     * FROZEN — Information 縦棒線の基準構造（2026-09-04）
     * - 中央カラム: max-content（中身幅。1frで箱だけ伸ばさない）
     * - 縦棒線: grid の 1px 列（独立オフセット禁止）
     * - 右カラム: minmax(0, 1fr)
     * - column-gap: clamp(28px, 3.2vw, 48px) — Startup Costs と同系統で左右均等
     * - 縦棒線を transform / margin-left / absolute / left / right で動かさない
     * - 幅調整は grid-template-columns / gap / padding の構造側のみ
     * 維持: 商号1行 / 事業内容2行 / 住所1行 / URL1行 / 写真 1:1
     */
    grid-template-columns: max-content 1px minmax(0, 1fr);
    column-gap: clamp(28px, 3.2vw, 48px);
    align-items: start;
    padding-top: 0;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-rule {
    /* FROZEN: 個別位置補正なし。gap で左右均等を保つ */
    display: block;
    width: 1px;
    align-self: stretch;
    margin: 0;
    padding: 0;
    border: none;
    transform: none;
    position: static;
    inset: auto;
    background: rgba(26, 24, 22, 0.14);
  }
}

@media screen and (max-width: 768px) {
  /* スライド直後から背景。外部余白は 0 */
  body.page-backstory.page-legacy-article:has(.bsa-article) main .bs-photo-strip {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  /*
    Startup Costs 背景: startup-costs-012.png（BACK STORY全記事のSP版共通）
    幅に合わせて比率のまま置き、セクションを 954×1649 相当以上にして下端を切らない。
  */
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs {
    margin-top: 130px;
    min-height: calc(100vw * 1649 / 954);
    background-image: url("assets/img/background/startup-costs-012.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-inner {
    padding-top: 90px;
    padding-bottom: 50px;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info {
    border-top: none;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-inner {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  body.page-backstory.page-legacy-article.page-article:has(.bsa-article) .bsa-info-figure {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  body.page-backstory.page-legacy-article.page-article:has(.bsa-article) .bsa-info-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center center;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-facts {
    gap: 0;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-col + .bsa-info-col {
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid rgba(26, 24, 22, 0.12);
  }
}

/* =============================================================================
   SP — 縦読みの1カラム記事（max-width: 768px）
   PC（min-width: 1024px）確定値は変更しない。
   ============================================================================= */
@media screen and (max-width: 768px) {
  body.page-backstory.page-legacy-article:has(.bsa-article) {
    --bsa-article-gutter: 22px;
  }

  /* --- HERO: 写真 → Since / 2008 / 店名（1カラム） --- */
  body.page-backstory.page-legacy-article:has(.bsa-article) .bg-switcher.bs-hero.bsa-hero {
    margin-top: 0;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-inner {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    align-items: stretch;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-media {
    order: -1;
    width: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-media::before,
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-media::after {
    display: none;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-photo {
    width: 100%;
    height: auto;
    min-height: 0;
    /* 4/5 の高さ × 0.80。横幅と cover は維持。 */
    aspect-ratio: calc(4 / (5 * 0.8));
    object-fit: cover;
    object-position: 54% 18%;
    filter: brightness(1.08) contrast(1.02);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-copy {
    min-height: 0;
    padding: 36px var(--bsa-article-gutter) 48px;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-center {
    flex: 0 0 auto;
    justify-content: flex-start;
    padding-top: 0;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-brand {
    transform: none;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-since-label {
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    color: rgba(26, 24, 22, 0.55);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-since-year {
    margin-top: 0.06em;
    font-size: calc(0.7 * clamp(88px, 26vw, 112px));
    letter-spacing: -0.01em;
    line-height: 0.88;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-shop {
    margin-top: calc(28px - 20px);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-shop-name {
    font-size: calc(15.5px * 0.8 * 0.9);
    letter-spacing: 0.28em;
    text-indent: 0.28em;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-shop-role {
    margin-top: 0.45em;
    font-size: calc(12.9px * 0.8 * 0.9);
    letter-spacing: 0.12em;
  }

  /* --- THOUGHT: SPは「今、想うこと」非表示。大見出しのみ --- */
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-thought {
    padding: 40px var(--bsa-article-gutter) 48px;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-thought-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-template-columns: none;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-thought-label,
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-thought-rule {
    display: none;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-thought-heading {
    max-width: none;
    font-family: "Noto Serif JP", "Shippori Mincho", serif;
    font-size: clamp(26px, 6.8vw, 30px);
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: 0.04em;
    transform: translateY(-30px);
    margin-top: 8px;
    margin-bottom: -3px;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-thought-heading-line {
    display: inline;
    white-space: normal;
  }

  /* --- INTRO: 見出し → 本文 → 写真 --- */
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-intro {
    margin-top: 0;
    padding: 8px var(--bsa-article-gutter) 64px;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-intro-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: none;
    gap: 0;
  }

  /* SPのみ INTRO大見出しを非表示（PCは維持） */
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede-title {
    display: none;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede-body {
    display: block;
    margin: 0 0 36px;
    max-width: none;
    font-size: 13.95px;
    line-height: 1.95;
    letter-spacing: 0.03em;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede-media {
    display: block;
    margin: 0;
    width: 100%;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede-media .bsa-article-figure {
    width: 100%;
    /* 4/5 の高さ × 0.76。横幅と cover は維持。 */
    aspect-ratio: calc(4 / (5 * 0.76));
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede-media .bsa-article-media {
    object-fit: cover;
    object-position: 70% 40%;
  }

  /* --- STORIES FROM THE FIELD --- */
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-field {
    padding: 0 var(--bsa-article-gutter);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-field-inner {
    max-width: none;
    margin: 0;
    padding-top: 48px;
    padding-bottom: 8px;
    border-bottom: 0;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-field-label {
    margin: 0;
    padding: 18px 0 4px 24px;
    font-size: 11px;
    letter-spacing: 0.18em;
    line-height: 1.7;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-field-label::before {
    top: 0;
    left: 26px;
    width: 32px;
    height: 1px; /* SP: サブピクセルYで1/2device pxが揺れない安定値。縦棒1.2pxとは数値一致ではない */
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-field-label::after {
    top: 20px;
    left: 0;
    width: 1.2px;
    height: 34px;
  }

  /* --- SECTION 共通: 1カラム（見出し→本文→写真） --- */
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section {
    padding: 0 var(--bsa-article-gutter);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: none;
    margin: 0;
    padding-top: 0;
    padding-bottom: 56px;
    border-bottom: 0;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section--reverse .bsa-article-section-inner {
    grid-template-columns: none;
    grid-template-areas: none;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-body {
    order: 1;
    padding: 0;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-image {
    order: 2;
    /* 直前コンテンツ → 画像の間だけ。下余白は触らない */
    margin-top: 50px;
    width: 100%;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-heading {
    margin-top: calc(36px + 12px);
    margin-bottom: calc(22px + 12px);
    font-size: calc(clamp(20px, 5.2vw, 23px) + 1px);
    line-height: 1.6;
    letter-spacing: 0.04em;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-text,
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-text .bsa-emphasis,
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-text strong,
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-text b {
    color: #222;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-text {
    font-size: 13.95px;
    line-height: 1.95;
    letter-spacing: 0.03em;
  }

  /* 通常本文の太さだけ。強調 .bsa-emphasis の 600 は対象外。 */
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede-body,
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-lede-body p,
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-text,
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-text p {
    font-weight: 500;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-image .bsa-article-figure {
    width: 100%;
    /* 4/5 の高さ × 0.76。横幅と cover は維持。 */
    aspect-ratio: calc(4 / (5 * 0.76));
  }

  /* 001: 画像上余白は .bsa-article-section-image の margin-top に一元化 */
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-001 .bsa-article-section-body {
    padding-bottom: 0;
  }

  /* 002: 見出し → 本文 → 画像。画像下 28px は確定済みの下余白。 */
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-002 .bsa-article-section-image {
    margin-bottom: 28px;
  }

  /* --- Startup Costs / Information 見出し（SP） --- */
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-label,
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-label {
    margin: 0 0 14px;
    /* 英字ラベルのみ約10％縮小（日本語見出しは触らない） */
    font-size: calc(0.9 * clamp(14.8px, 0.94vw + 12.1px, 17.5px));
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-heading,
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-heading {
    /* 日本語見出しのみ約10％拡大（31px → 34.1px）。英字ラベルは対象外 */
    font-size: 34.1px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0.04em;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-label {
    margin-bottom: calc(14px * 1.2);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-heading {
    margin-top: calc(6px * 1.2);
    margin-bottom: calc((clamp(10px, 1.2vw, 14px) + 26px) * 0.7 * 1.2);
    font-size: 28.985px;
  }

  /* 注記：行間1.7。390pxの文字サイズは WANKOMANIA 正本 11.7769px（0.85 × 0.92 × clamp） */
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-note {
    max-width: none;
    line-height: 1.7;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs .bsa-costs-note {
    font-size: calc(0.85 * 0.92 * clamp(15px, 0.4vw + 13.5px, 17px));
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-grid {
    gap: calc(clamp(36px, 5vw, 56px) * 1.2);
  }

  /* 点線の箱幅は維持。見た目の長さは 63.75% */
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-dots {
    position: relative;
    border-bottom-color: transparent;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-dots::after {
    content: "";
    position: absolute;
    left: 18.125%;
    width: 63.75%;
    bottom: -1px;
    border-bottom: 1px dotted rgba(26, 24, 22, 0.28);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-list {
    /* 右端〜領域右端: 60px → さらに+40px = 100px */
    width: calc(100% - 100px);
    max-width: calc(100% - 100px);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-item,
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-amount {
    font-size: 11.9213px;
  }

  /* 総額は費用内訳の直下・左寄り。犬＋植物＋横線は出さない */
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total {
    margin-top: 0;
    justify-content: flex-start;
    align-items: flex-start;
    align-self: flex-start;
    width: auto;
    max-width: none;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total-frame {
    aspect-ratio: auto;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    overflow: visible;
    justify-content: flex-start;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total-frame-img,
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total-frame-img--leaf,
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total-frame-img--dog {
    display: none;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total-copy {
    position: static;
    left: auto;
    top: auto;
    z-index: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.55em;
    width: auto;
    max-width: none;
    transform: none;
    text-align: left;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total-label {
    margin: 0;
    /* 比率維持のまま全体 ≈90%（20.4 / 52.8 / 15.6 → ×0.9） */
    font-size: 15.606px;
    letter-spacing: 0.12em;
    line-height: 1.2;
    white-space: nowrap;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total-figure {
    margin: 0;
    position: relative;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total-num {
    font-size: 35.54496px;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-costs-total-unit {
    position: static;
    left: auto;
    bottom: auto;
    margin-left: 1.6848px;
    font-size: 11.934px;
  }

  /*
   * Information（SP）行間:
   * 2つの .bsa-info-col が縦積みされるため、1列目末尾（代表）が
   * .bsa-info-row:last-child { margin-bottom: 0 } に当たり、
   * かつ列間の .bsa-info-col + .bsa-info-col は間の .bsa-info-rule で
   * 隣接セレクタが不成立 → 代表→住所だけ gap 0 になる。
   * 先頭列の末尾行だけ通常行と同じ margin-bottom を戻す（個別補正禁止）。
   */
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-col:not(:last-child) .bsa-info-row:last-child {
    margin-bottom: 0.72em;
  }

  /* --- Information 詳細（SP）: 沙早studio確定（390pxで 12.1288px）。短いラベルは 8.25em、長いラベルだけ内容幅まで広げる --- */
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-row {
    grid-template-columns: minmax(8.25em, max-content) minmax(0, 1fr);
    column-gap: 0.7em;
    font-size: calc(0.85 * 1.1 * clamp(14.1px, 0.33vw + 12.7px, 16px) * 0.8 * 1.15);
    line-height: 1.85;
    margin: 0 0 0.72em;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-row dt {
    letter-spacing: 0.08em;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-row dd {
    overflow-wrap: break-word;
    word-break: normal;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-row--company dd,
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-row--address dd {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-row--business dd {
    overflow-wrap: normal;
    word-break: keep-all;
    line-height: 1.85;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-info-row a {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 0.84em;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-005 {
    /* Gallery接続用 — 理由なく削除しない */
    padding-bottom: calc(64px + clamp(80px, 10vw, 127px));
  }

  /* 005: 画像上余白は共通 margin-top に一元化（下余白・Gallery接続は維持） */
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-article-section-005 .bsa-article-section-body {
    padding-bottom: 0;
  }
}

@media screen and (max-width: 375px) {
  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-since-year {
    font-size: calc(84px * 0.7);
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-thought-heading {
    font-size: 24px;
  }
}

/* =============================================================================
   Related Stories（試作のみ）
   ============================================================================= */
body.page-backstory.page-legacy-article:has(.bsa-article) .bs-curious-card-desc {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: rgba(255, 250, 246, 0.72);
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bs-curious-card-desc-primary,
body.page-backstory.page-legacy-article:has(.bsa-article) .bs-curious-card-desc-secondary {
  display: inline;
  font-weight: 400;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bs-curious-card-desc-primary {
  font-size: 15px;
}

body.page-backstory.page-legacy-article:has(.bsa-article) .bs-curious-card-desc-secondary {
  font-size: 13.5px;
  color: rgba(255, 250, 246, 0.64);
}

@media screen and (max-width: 768px) {
  body.page-backstory.page-legacy-article:has(.bsa-article) .bs-curious-card-link {
    aspect-ratio: calc(600 / (560 * 0.75));
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bs-curious-card-desc {
    font-size: 12.5px;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bs-curious-card-desc-primary {
    font-size: 13.5px;
  }

  body.page-backstory.page-legacy-article:has(.bsa-article) .bs-curious-card-desc-secondary {
    font-size: 12.5px;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1199px) {
  body.page-backstory.page-legacy-article:has(.bsa-article) .bs-curious-inner {
    max-width: min(100%, calc((var(--bs-section-max-lg) + 78px) * 1.045));
  }
}

@media screen and (min-width: 1200px) and (max-width: 1399px) {
  body.page-backstory.page-legacy-article:has(.bsa-article) .bs-curious-inner {
    max-width: min(100%, calc((var(--bs-section-max-xl) + 78px) * 1.045));
  }
}

@media screen and (min-width: 1400px) {
  body.page-backstory.page-legacy-article:has(.bsa-article) .bs-curious-inner {
    max-width: min(100%, calc((var(--bs-section-max-xxl) + 78px) * 1.045));
  }
}

/*
  Related Stories → footer の白帯解消
  原因: .site-footer.home-footer の margin-top（body/main の紙色が露出）
  対応: その分を .bs-curious の padding-bottom（既存ベージュ #eee7dd）へ吸収し、
        footer の margin-top のみ 0（高さ・内部は変更しない）
*/
body.page-backstory.page-legacy-article:has(.bsa-article) main .bs-curious {
  background-color: #eee7dd;
  padding-bottom: calc(130px + clamp(48px, 5vw, 72px));
}

body.page-backstory.page-legacy-article:has(.bsa-article) .site-footer.home-footer {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   HERO — 開業準備中（.bsa-hero-since--preparing）
   ・大きな西暦は .bsa-hero-since-year（WANKOMANIA の創業年と同サイズ）を流用
   ・補助表記は PREPARING（Since は使わない）
   ・年号の意味: 記事制作／開業準備時点（創業年ではない）
   ・既存 Since 付き記事には影響しない
   -------------------------------------------------------------------------- */
body.page-backstory.page-legacy-article:has(.bsa-article) .bsa-hero-since--preparing .bsa-hero-since-label {
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* WANKOMANIA 2026-06-30-001 のみ。PCの大見出しは2行のまま。 */
@media screen and (min-width: 769px) {
  body.page-backstory.page-legacy-article.page-bsa-wanko-20260630:has(.bsa-article) .bsa-thought-heading-line {
    display: block;
  }
}