/* =========================================================
   belog chez vousの軌跡（story.html）
   トップと同じ色・文字（luxe.css の変数）で、読み物として静かに組む
   ========================================================= */
.story-page { background: var(--g-ivory); }
.story-header { position: sticky; top: 0; z-index: 20; background: rgba(247, 243, 236, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(198, 170, 120, .45); }
.story-header .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.story-back { font-size: 12.5px; letter-spacing: .1em; color: var(--g-deep); white-space: nowrap; }
.story-back:hover { color: var(--g-char); }

.story { padding: clamp(56px, 9vw, 120px) max(20px, env(safe-area-inset-left, 0px)) clamp(64px, 9vw, 120px) max(20px, env(safe-area-inset-right, 0px)); }
.story__hero { max-width: 40em; margin: 0 auto clamp(48px, 7vw, 84px); text-align: center; }
.story__hero::after { content: ""; display: block; width: 36px; height: 36px; margin: clamp(28px, 4vw, 40px) auto 0; background: var(--an-star) center / contain no-repeat; }
.story__en { font-family: var(--f-latin); font-size: clamp(12px, 1.3vw, 14px); letter-spacing: .24em; color: var(--g-deep); margin-bottom: 18px; }
.story__title { font-family: var(--f-mincho); font-weight: 500; font-size: clamp(26px, 4.2vw, 42px); line-height: 1.5; letter-spacing: .08em; color: var(--g-char); text-wrap: balance; }
.story__title .brand-name { font-size: 1.12em !important; line-height: 1.2 !important; margin-right: .12em; color: var(--g-char); }
.story__lead { margin-top: 18px; font-family: var(--f-mincho); font-size: clamp(15px, 1.8vw, 18px); letter-spacing: .12em; line-height: 1.9; color: var(--g-deep); text-wrap: balance; }

.story__body { max-width: 34em; margin: 0 auto; font-size: 15.5px; line-height: 2.1; color: var(--ink-2); }
.story__body p { margin: 0; }
.story__body p + p, .story__body ul + p, .story__body p + ul { margin-top: .9em; }
.story__body .gap { margin-top: 2.2em; }

.story__chapter { margin-top: clamp(64px, 9vw, 104px); padding-top: clamp(36px, 5vw, 52px); border-top: 1px solid rgba(198, 170, 120, .5); }
.story__chapter h2 { display: grid; gap: 6px; margin: 0 0 clamp(24px, 3.4vw, 34px); font-weight: 400; }
.story__num { font-family: var(--f-latin); font-style: italic; font-size: clamp(30px, 4vw, 40px); line-height: 1; color: var(--g-antique); }
.story__ch { font-family: var(--f-mincho); font-weight: 500; font-size: clamp(19px, 2.4vw, 23px); line-height: 1.6; letter-spacing: .08em; color: var(--g-char); text-wrap: balance; }

.story__list { list-style: none; margin: 1.2em 0; padding: 18px 0 18px 22px; border-left: 2px solid var(--g-light); display: grid; gap: .3em; font-family: var(--f-mincho); color: var(--g-char); }
.story__quote { margin: 1.6em 0 !important; font-family: var(--f-mincho); font-size: clamp(17px, 2.1vw, 20px); line-height: 1.9; letter-spacing: .08em; color: var(--g-deep); }

.story__closing { margin-top: clamp(72px, 10vw, 112px); padding: clamp(36px, 5vw, 52px) 0 0; border-top: 1px solid rgba(198, 170, 120, .5); text-align: center; font-family: var(--f-mincho); color: var(--g-char); }
.story__closing p + p { margin-top: .4em; }
.story__sign { margin-top: 2.4em !important; display: grid; gap: 8px; justify-items: center; }
.story__sign .brand-name { font-size: clamp(30px, 4vw, 40px) !important; color: var(--g-char); }
.story__since { font-family: var(--f-latin); font-size: 13px; letter-spacing: .2em; color: var(--g-deep); }
.story__backlink { margin-top: clamp(48px, 7vw, 72px) !important; text-align: center; }

@media (max-width: 767px) {
  .story__body { font-size: 15px; line-height: 2.05; }
}

/* トップの Concept の下：「belog chez vousの軌跡」へのリンク */
.concept-story { margin-top: 2em !important; }
.concept-story a { display: inline-flex; align-items: center; gap: 12px; padding: 10px 2px 9px; font-family: var(--f-mincho); font-size: 15px; letter-spacing: .1em; color: var(--g-deep);
  background: linear-gradient(var(--g-antique), var(--g-antique)) left bottom / 100% 1px no-repeat; transition: color .3s; }
.concept-story a:hover { color: var(--g-char); }
.concept-story small { font-family: var(--f-latin); font-size: 11.5px; letter-spacing: .18em; color: var(--g-antique); }
.concept-story span[aria-hidden] { transition: transform .3s; }
.concept-story a:hover span[aria-hidden] { transform: translateX(3px); }
.story__lead span { display: inline-block; }
/* スマホで折り返さないよう、英字の小さなラベルは上の行に */
.concept-story a { display: inline-grid; grid-template-columns: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; white-space: nowrap; font-size: 16px; }
.concept-story small { grid-column: 1 / -1; }