/* herstories editorial
   INDEX: five Figma-cropped 280 x 538 WebP images, shared by PC and SP.
   Keep the approved intro heading and body copy unchanged. */

html:has(.herstories-editorial){scroll-behavior:smooth}
.herstories-editorial{
  --lp-en:"Marcellus","Times New Roman",Times,serif;
  --lp-jp:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --lp-q:"EB Garamond","Times New Roman",Times,serif;
  --lp-ink:#303030;
  font-family:var(--lp-jp);font-weight:400;color:var(--lp-ink);background:#fff;
}
.herstories-editorial,.herstories-editorial *{box-sizing:border-box}
.herstories-editorial img{display:block;width:100%;height:100%;object-fit:cover}
.herstories-editorial a{color:inherit;text-decoration:none}
.herstories-editorial h1,.herstories-editorial h2,.herstories-editorial h3,.herstories-editorial p,.herstories-editorial ul{margin:0;padding:0;font-weight:400}
.herstories-editorial ul{list-style:none}
.herstories-editorial .sp-only{display:none}

/* ---------- Hero / second-draft PC design: one composite image + a separate title ---------- */
@keyframes lp-focus{from{opacity:0;filter:blur(12px)}to{opacity:1;filter:blur(0)}}
.herstories-editorial .lp-hero{
  position:relative;
  width:100%;
  aspect-ratio:740 / 365;
  background:#fff;
  overflow:hidden;
}
.herstories-editorial .lp-hero__art{
  position:absolute;inset:0;z-index:1;display:block;
  animation:lp-focus 1.5s ease 0.9s both;
}
.herstories-editorial .lp-hero__art img{object-fit:contain}
.herstories-editorial .lp-hero__title{
  position:absolute;z-index:2;
  left:24.32%;top:75.6%;
  width:44%;
  font-family:var(--lp-en);
  font-weight:400;
  font-size:clamp(22px,4.43vw,69px);
  line-height:1.2;
  letter-spacing:0;
  color:#686868;
  white-space:nowrap;
  animation:lp-focus 1.15s ease both;
}
.herstories-editorial .lp-hero__title span{display:block}

/* ---------- Intro + INDEX: second-draft PC/SP design ---------- */
.herstories-editorial .lp-intro{
  background:#ECECEA;
  padding:clamp(76px,10vw,144px) 0;
}
.herstories-editorial .lp-intro__inner{
  width:min(1080px,86%);
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,346fr) minmax(0,700fr);
  column-gap:clamp(25px,2.3611112vw,34px);
  align-items:center;
}
.herstories-editorial .lp-intro__copy{
  min-width:0;
  padding-top:0;
  font-family:var(--lp-jp);
  font-weight:400;
}
.herstories-editorial .lp-intro__copy h2{
  font-family:var(--lp-jp);
  font-weight:400;
  font-size:24px;
  line-height:1.75;
  margin-bottom:40px;
  letter-spacing:0;
}
.herstories-editorial .lp-intro__copy p{
  font-family:var(--lp-jp);
  font-weight:400;
  font-size:14px;
  line-height:1.9;
  letter-spacing:0;
  text-align:justify;
  overflow-wrap:break-word;
}
.herstories-editorial .lp-index{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  min-width:0;
}

.herstories-editorial .lp-index__item{
  position:relative;
  display:block;
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  color:#fff;
}
.herstories-editorial .lp-index__item img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
}
.herstories-editorial .lp-index__item::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:none;
  transition:background .3s ease,box-shadow .3s ease;
}
.herstories-editorial .lp-index__label{
  position:absolute;
  z-index:2;
  top:12px;right:12px;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  display:flex;
  align-items:center;
  gap:12px;
  font:400 20px/1.2 var(--lp-en);
  letter-spacing:0;
  color:#fff;
  pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.22);
}
.herstories-editorial .lp-index__number{font-family:var(--lp-jp);font-size:20px;font-weight:400;line-height:1;font-variant-numeric:lining-nums}
.herstories-editorial .lp-index__name{font-family:var(--lp-en);font-size:20px;font-weight:400;line-height:1.1}
.herstories-editorial .lp-index__item:hover::after,
.herstories-editorial .lp-index__item:focus-visible::after{
  background:rgba(0,0,0,.13);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.9);
}
.herstories-editorial .lp-index__item:focus-visible{
  outline:3px solid #303030;
  outline-offset:3px;
  z-index:4;
}

/* ---------- Person sections ---------- */
.herstories-editorial .lp-person{position:relative;isolation:isolate;clip-path:inset(0);scroll-margin-top:60px;padding:100px 0 110px;background:#fff}
.herstories-editorial .lp-person--gray{background:#ECECEA}

/* Giant numeral: fixed to the viewport, clipped to its own section (clip-path above),
   so articles scroll over it. No scroll JS. */
.herstories-editorial .lp-person__number-track{position:fixed;top:clamp(70px,11vh,140px);left:0;width:100%;height:min(55vh,500px);z-index:0;pointer-events:none}
.herstories-editorial .lp-person__number-text{
  display:block;position:relative;left:-90px;width:max-content;margin-left:0;
  font:400 clamp(160px,32vw,400px)/.9 var(--lp-q);
  letter-spacing:.01em;color:#f7f6f6;white-space:nowrap;
}
.herstories-editorial .lp-person--gray .lp-person__number-text{color:#FFFFFF;letter-spacing:0.01em}
.herstories-editorial .lp-person__inner{position:relative;z-index:1;width:min(1080px,76%);margin:auto}

/* Head: lead photo + credits | number, name, headline */
.herstories-editorial .lp-person__head,
.herstories-editorial .lp-person__content,
.herstories-editorial .lp-person__bottom{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6%;
}
.herstories-editorial .lp-person__head{
  align-items:center;margin-bottom:90px;
}
.herstories-editorial .lp-person__lead{position:relative;z-index:2;width:100%;max-width:500px;margin-inline:auto}
.herstories-editorial .lp-person__title{position:relative;z-index:2;align-self:start;padding-top:clamp(45px,6vw,105px)}
.herstories-editorial .lp-person__smallnum{
  display:block;font:400 clamp(60px,5.58vw,80px)/1 var(--lp-q);
  color:#c6c6c6;margin-bottom:20px;
}
.herstories-editorial .lp-person__name-row{display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:29px}
.herstories-editorial .lp-person__title h2{
  font:400 clamp(21px,1.95vw,28px)/1.3 var(--lp-en);
  overflow-wrap:anywhere;
}
/* Instagram icon: real link element next to the person name (the old CSS-drawn icon was removed to avoid duplicates). */
.herstories-editorial .lp-person__instagram{display:inline-flex;align-items:flex-start;justify-content:center;flex:none;box-sizing:border-box;width:16px;height:17.72px;padding:2.5px 0 0;overflow:visible;color:inherit;line-height:1;transition:opacity .25s}
.herstories-editorial .lp-person__instagram svg{display:block;width:14.72px;height:14.72px;overflow:visible}
.herstories-editorial .lp-person__instagram:hover,.herstories-editorial .lp-person__instagram:focus-visible{opacity:.55}
.herstories-editorial .lp-person__headline{
  font-size:18px;line-height:1.9;letter-spacing:.045em;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px;text-decoration-color:#bdbdbd;
}

/* Credits (EB Garamond Medium) + ONLINE button (Marcellus) */
.herstories-editorial .lp-credit{margin-top:14px;font-family:var(--lp-q);font-weight:500;font-size:13px;letter-spacing:.04em;line-height:1.5}
.herstories-editorial .lp-credit li{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;margin-top:6px}
.herstories-editorial .lp-credit__name{min-width:3em}
.herstories-editorial .lp-online{font:400 10px/1.6 var(--lp-en);letter-spacing:.12em;border:1px solid currentColor;padding:2px 10px 1px;transition:background .25s,color .25s}
.herstories-editorial .lp-online:hover,.herstories-editorial .lp-online:focus-visible{background:var(--lp-ink);color:#fff}

/* Interview rows */
.herstories-editorial .lp-person__content{align-items:start;margin-bottom:75px}
.herstories-editorial .lp-person__bottom{align-items:start}
.herstories-editorial .lp-person__text{
  position:relative;z-index:2;width:84%;min-width:0;
  font-size:14px;line-height:2.08;letter-spacing:0;overflow-wrap:break-word;
}
.herstories-editorial .lp-person__text h3{
  font-size:18px;line-height:1.75;letter-spacing:.012em;margin-bottom:25px;
}
.herstories-editorial .lp-q{
  display:inline-block;vertical-align:-.08em;
  font-family:var(--lp-q);font-weight:400;font-size:24px;line-height:1;
  margin-right:.65em;
}
.herstories-editorial .lp-person__text p{margin-bottom:30px;text-align:justify}
.herstories-editorial .lp-person__text p:last-child{margin-bottom:0}
.herstories-editorial .lp-person__text .lp-person__profile{
  font-size:14px;line-height:2.0;
  margin-top:42px;margin-bottom:0;
  padding:20px 0;
  border-top:1px solid #c6c6c6;
  border-bottom:1px solid #c6c6c6;
}
.herstories-editorial .lp-person__profile-name{display:block;font-size:14px;margin-bottom:12px}
.herstories-editorial .lp-person__profile-name b{font-family:var(--lp-en);font-weight:400;margin-right:.5em}
.herstories-editorial .lp-person__pair{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:100%}
.herstories-editorial .lp-person__photo{position:relative;z-index:2;width:100%;min-width:0}
/* ===== 共通: 人物セクションの写真はトリミングしない（元の比率で表示）=====
   対象: .lp-person__lead / __image-frame / __pair(-frame) / __photo
   除外: .lp-person__photo--slide（スライダー。枠で切る動きが前提） */
.herstories-editorial .lp-person :is(.lp-person__lead,.lp-person__image-frame,.lp-person__pair,.lp-person__pair-frame,.lp-person__photo:not(.lp-person__photo--slide)){height:auto;aspect-ratio:auto;overflow:visible}
.herstories-editorial .lp-person :is(.lp-person__lead,.lp-person__image-frame,.lp-person__pair,.lp-person__pair-frame,.lp-person__photo:not(.lp-person__photo--slide)) img{position:static;display:block;width:100%;height:auto;max-width:100%;aspect-ratio:auto;object-fit:contain}

/* Even (gray) sections: mirrored reading order */
.herstories-editorial .lp-person--gray .lp-person__content .lp-person__pair{grid-column:1;grid-row:1;display:block;width:59%;margin-left:12%}
.herstories-editorial .lp-person--gray .lp-person__content .lp-person__text{grid-column:2;grid-row:1}
.herstories-editorial .lp-person--gray .lp-person__bottom .lp-person__text{grid-column:1;grid-row:1}
.herstories-editorial .lp-person--gray .lp-person__bottom .lp-person__photo{grid-column:2;grid-row:1}
/* Both gray blocks use the dedicated slide frame (width:100% from .lp-person__photo). */


/* ---------- 02 Kilala Inori — Figma PC, 1440px design ---------- */
.herstories-editorial #lp-02 .lp-credit{font-family:var(--lp-q);font-size:14px;font-weight:400;line-height:1.75;letter-spacing:0;margin-top:12px}
.herstories-editorial #lp-02 .lp-credit li{gap:8px;margin:0}
.herstories-editorial #lp-02 .lp-credit li+li{margin-top:6px}
.herstories-editorial #lp-02 .lp-credit__name{min-width:0}
.herstories-editorial #lp-02 .lp-online{font-size:12px;line-height:1.2;letter-spacing:0;padding:2px 8px;border:1px solid rgba(51,51,51,.25)}
.herstories-editorial #lp-02 .lp-person__text{width:min(420px,100%);font-size:14px;line-height:1.9;letter-spacing:0}
.herstories-editorial #lp-02 .lp-person__text h3{margin-bottom:16px;line-height:1.75;letter-spacing:0}
.herstories-editorial #lp-02 .lp-person__text p{line-height:1.9;letter-spacing:0}
.herstories-editorial #lp-02 .lp-person__profile{margin:0;padding:16px;border:0;border-top:1px solid rgba(51,51,51,.25);border-bottom:1px solid rgba(51,51,51,.25)}
.herstories-editorial #lp-02 .lp-person__profile-name{line-height:1.75;margin-bottom:12px}
.herstories-editorial #lp-02 .lp-person__profile-name b{font-family:var(--lp-jp);font-weight:400}
.herstories-editorial #lp-02 .lp-person__image-frame{position:relative;width:100%}
/* Two equal-size photos; the other one always remains partially visible. */
/* 02: A → B → cloned A; both photos move left and reset invisibly. */
.herstories-editorial #lp-02 .lp-person__photo--slide,
.herstories-editorial #lp-04 .lp-person__photo--slide{
  --lp-slide-img-left:0px;
  --lp-slide-img-width:82.283%;
  --lp-slide-img-gap:8px;
  --lp-slide-img-step:calc(var(--lp-slide-img-width) + var(--lp-slide-img-gap));
  aspect-ratio:508/558;
}
.herstories-editorial #lp-02 .lp-person__photo--slide img,
.herstories-editorial #lp-04 .lp-person__photo--slide img{
  inset:auto;top:0;left:var(--lp-slide-img-left);
  width:var(--lp-slide-img-width);height:100%;object-fit:cover;
}
.herstories-editorial #lp-02 .lp-person__photo--slide img:nth-child(2),
.herstories-editorial #lp-04 .lp-person__photo--slide img:nth-child(2){left:calc(var(--lp-slide-img-left) + var(--lp-slide-img-step));transform:none}
.herstories-editorial #lp-02 .lp-person__photo--slide img:nth-child(3),
.herstories-editorial #lp-04 .lp-person__photo--slide img:nth-child(3){left:calc(var(--lp-slide-img-left) + var(--lp-slide-img-step) + var(--lp-slide-img-step))}
.herstories-editorial #lp-02 .lp-person__photo--slide img:nth-child(4),
.herstories-editorial #lp-04 .lp-person__photo--slide img:nth-child(4){left:calc(var(--lp-slide-img-left) + var(--lp-slide-img-step) + var(--lp-slide-img-step) + var(--lp-slide-img-step))}
@keyframes lp-slide-loop{
  /* hold -> slow glide -> hold -> slow glide. 0% and 100% look identical (A = A clone), so the loop never jumps. */
  0%,36%{transform:translateX(0);animation-timing-function:cubic-bezier(.76,0,.24,1)}
  50%,86%{transform:translateX(calc(-100% - var(--lp-slide-img-gap)));animation-timing-function:cubic-bezier(.76,0,.24,1)}
  100%{transform:translateX(calc(-200% - var(--lp-slide-img-gap) - var(--lp-slide-img-gap)))}
}
/* 02 / 04 share one motion: A -> B -> A clone, 12s loop, ~1.7s eased glide, ~4.3s still. */
.herstories-editorial.is-js :is(#lp-02,#lp-04) .lp-person__photo--slide.is-visible img{
  animation:lp-slide-loop 12s linear .8s infinite both;
  will-change:transform;backface-visibility:hidden;
}

.herstories-editorial #lp-02 .lp-person__photo--slide{--lp-02-img-gap:var(--lp-slide-img-gap)}
@media (prefers-reduced-motion:reduce){
  .herstories-editorial.is-js :is(#lp-02,#lp-04) .lp-person__photo--slide.is-visible img{animation:none}
}
@media(min-width:1200px){
  .herstories-editorial #lp-02{padding:0}
  .herstories-editorial #lp-02 .lp-person__inner{position:relative;width:1080px;height:2281px}
  .herstories-editorial #lp-02 .lp-person__head,
  .herstories-editorial #lp-02 .lp-person__content,
  .herstories-editorial #lp-02 .lp-person__bottom{position:relative;display:block;width:100%;margin:0;gap:0}
  .herstories-editorial #lp-02 .lp-person__head{height:1038px}
  .herstories-editorial #lp-02 .lp-person__content{height:505px}
  .herstories-editorial #lp-02 .lp-person__bottom{height:558px}
  .herstories-editorial #lp-02 .lp-person__lead{position:absolute;left:286px;top:180px;width:508px;max-width:none;margin:0}
  .herstories-editorial #lp-02 .lp-person__title{position:absolute;top:270px;left:846px;width:234px;padding:0}
  .herstories-editorial #lp-02 .lp-person__smallnum{font:400 88px/1.2 var(--lp-q);margin-bottom:13px}
  .herstories-editorial #lp-02 .lp-person__name-row{gap:10px;margin-bottom:32px}
  .herstories-editorial #lp-02 .lp-person__headline{font-size:18px;line-height:1.8;letter-spacing:0}
  .herstories-editorial #lp-02 .lp-person__content .lp-person__pair{position:absolute;left:60px;top:0;width:300px;margin:0;display:block}
  .herstories-editorial #lp-02 .lp-person__content .lp-person__text{position:absolute;left:570px;top:89px}
  .herstories-editorial #lp-02 .lp-person__bottom .lp-person__text{position:absolute;top:0;left:0}
  .herstories-editorial #lp-02 .lp-person__bottom .lp-person__photo{position:absolute;top:0;left:572px;width:508px;height:558px;margin:0}
}


/* ---------- 04 Chiyuki Arita — Figma PC / SP ---------- */
.herstories-editorial #lp-04 .lp-credit{font:400 14px/1.75 var(--lp-q);letter-spacing:0;margin-top:12px}
.herstories-editorial #lp-04 .lp-credit li{gap:8px;margin:0}
.herstories-editorial #lp-04 .lp-credit__name{min-width:0}
.herstories-editorial #lp-04 .lp-person__text{width:min(420px,100%);font-size:14px;line-height:1.9;letter-spacing:0}
.herstories-editorial #lp-04 .lp-person__text h3{font-size:18px;line-height:1.75;margin-bottom:16px;letter-spacing:0}
.herstories-editorial #lp-04 .lp-person__text p{font-size:14px;line-height:1.9;letter-spacing:0}
.herstories-editorial #lp-04 .lp-person__profile{margin:0;padding:16px;border:0;border-top:1px solid rgba(51,51,51,.25);border-bottom:1px solid rgba(51,51,51,.25)}
.herstories-editorial #lp-04 .lp-person__profile-name{line-height:1.75;margin-bottom:12px}
.herstories-editorial #lp-04 .lp-person__profile-name b{font-family:var(--lp-jp);font-weight:400}
@media (min-width:1200px){
  .herstories-editorial #lp-04{padding:0}
  .herstories-editorial #lp-04 .lp-person__inner{position:relative;width:1080px;height:2313px}
  .herstories-editorial #lp-04 .lp-person__head,
  .herstories-editorial #lp-04 .lp-person__content,
  .herstories-editorial #lp-04 .lp-person__bottom{position:relative;display:block;width:100%;margin:0;gap:0}
  .herstories-editorial #lp-04 .lp-person__head{height:1070px}
  .herstories-editorial #lp-04 .lp-person__content{height:505px}
  .herstories-editorial #lp-04 .lp-person__bottom{height:558px}
  .herstories-editorial #lp-04 .lp-person__lead{position:absolute;left:286px;top:212px;width:508px;max-width:none;margin:0}
  .herstories-editorial #lp-04 .lp-person__title{position:absolute;top:302px;left:847px;width:233px;padding:0}
  .herstories-editorial #lp-04 .lp-person__smallnum{font:400 88px/1.2 var(--lp-q);margin-bottom:13px}
  .herstories-editorial #lp-04 .lp-person__name-row{gap:10px;margin-bottom:32px}
  .herstories-editorial #lp-04 .lp-person__headline{font-size:18px;line-height:1.8;letter-spacing:0}
  .herstories-editorial #lp-04 .lp-person__content .lp-person__pair{position:absolute;left:60px;top:0;width:300px;margin:0;display:block}
  .herstories-editorial #lp-04 .lp-person__content .lp-person__text{position:absolute;left:570px;top:89px}
  .herstories-editorial #lp-04 .lp-person__bottom .lp-person__text{position:absolute;left:0;top:0}
  .herstories-editorial #lp-04 .lp-person__bottom .lp-person__photo{position:absolute;left:572px;top:0;width:508px;height:558px;margin:0}
  .herstories-editorial #lp-04 .lp-person__bottom .lp-person__profile{position:absolute;left:0;top:381px;width:421px}
}


/* ---------- Follow button: appears after INDEX, returns to INDEX ---------- */
.herstories-editorial .lp-to-top{
  position:fixed;z-index:8;right:22px;bottom:22px;width:50px;height:50px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:0;background:#d9d9d9;color:#333;font-family:var(--lp-en);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .4s ease,transform .4s ease,visibility 0s linear .4s;
}
.herstories-editorial .lp-to-top span{
  position:relative;display:block;width:17.13px;height:17.13px;
  font-size:0;line-height:1;
}
.herstories-editorial .lp-to-top span::before{
  content:"";position:absolute;left:3px;top:5px;width:11px;height:11px;
  border-top:1px solid currentColor;border-left:1px solid currentColor;
  transform:rotate(45deg);
}
.herstories-editorial .lp-to-top small{display:none}
.herstories-editorial .lp-to-top.is-shown{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.herstories-editorial .lp-to-top:focus-visible,.herstories-editorial .lp-index a:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* 02 / 04: looping slide — photo 2 starts with a 20% preview on the right.
   The first photo remains in the background. CSS-only loop starts when
   IntersectionObserver adds .is-visible. No extra JS or image assets. */
.herstories-editorial .lp-person__photo--slide{
  position:relative;
  aspect-ratio:508 / 590;
  overflow:hidden;
  isolation:isolate;
}
.herstories-editorial .lp-person__photo--slide img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  max-width:none;
  aspect-ratio:auto;
  object-fit:cover;
}
.herstories-editorial .lp-person__photo--slide img:first-child{
  z-index:1;
}
.herstories-editorial .lp-person__photo--slide img:nth-child(2){
  z-index:2;
  transform:translateX(80%); /* 20% of photo 2 remains visible */
}
@keyframes lp-photo-slide-loop{
  0%,19%   {transform:translateX(80%)}
  38%,63%  {transform:translateX(0)}
  82%,100% {transform:translateX(80%)}
}
.herstories-editorial.is-js .lp-person__photo--slide.is-visible img:nth-child(2){
  animation:lp-photo-slide-loop 7s ease-in-out .8s infinite both;
}

/* ---------- Scroll reveal (only when JS is running) ---------- */
.herstories-editorial.is-js .lp-reveal{opacity:0;transform:translateY(30px);transition:opacity .85s ease,transform .85s ease}
.herstories-editorial.is-js .lp-reveal.is-visible{opacity:1;transform:none}
.herstories-editorial.is-js .lp-reveal--slide{opacity:1;transform:none;transition:none}

/* ---------- SP ---------- */
@media(max-width:767px){
  .herstories-editorial .sp-only{display:inline}
  /* SP hero: Figma TOP banner_SP.png (400x711). Composite photos + separate HTML title. */
  .herstories-editorial .lp-hero { height:auto; aspect-ratio:400 / 711; }
  .herstories-editorial .lp-hero__title {
    left:3%; top:41.2%; width:65%;
    font-size:clamp(28px,9vw,36px);
    text-align:center; color:#6a6a6a;
    white-space:nowrap; writing-mode:horizontal-tb;
    transform:none; text-shadow:none;
  }
  .herstories-editorial .lp-hero__title span { display:block; }
  .herstories-editorial .lp-hero__title span:first-child::after { content:none; }

  /* INDEX: 3 cards then 2 centered; captions horizontal at the photo bottom. */
  .herstories-editorial .lp-intro{
    background:#ECECEA;
    padding:120px 0 clamp(115px,30vw,150px);
  }
  .herstories-editorial .lp-intro__copy{padding-top:0}
  .herstories-editorial .lp-intro__inner{
    width:calc(100% - 72px);
    display:block;
  }
  .herstories-editorial .lp-intro__copy h2{
    font-size:20px;
    line-height:1.75;
    letter-spacing:0;
    color:#333333;
    margin-bottom:16px;
  }
  .herstories-editorial .lp-intro__copy p{
    font-size:14px;
    line-height:1.9;
    letter-spacing:0;
    text-align:justify;
    overflow-wrap:break-word;
  }
  .herstories-editorial .lp-index{
    margin-top:60px;
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    column-gap:clamp(8px,2.65vw,16px);
    row-gap:clamp(18px,5.7vw,36px);
  }
  .herstories-editorial .lp-index__item{grid-column:span 2}
  .herstories-editorial .lp-index__item:nth-of-type(4){grid-column:2 / span 2}
  .herstories-editorial .lp-index__item:nth-of-type(5){grid-column:4 / span 2}
  .herstories-editorial .lp-index__item::after{
    background:linear-gradient(0deg,rgba(0,0,0,.48) 0%,transparent 39%);
  }
  .herstories-editorial .lp-index__label{
    writing-mode:horizontal-tb;
    text-orientation:mixed;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
    top:auto;
    right:4px;
    bottom:5px;
    left:6px;
    font-size:clamp(10px,2.5vw,17px);
    line-height:1.35;
    letter-spacing:0;
  }
  .herstories-editorial .lp-index__number{
    font-size:clamp(15px,4vw,26px);
    line-height:1;
  }
  .herstories-editorial .lp-index__name{font-size:12px;line-height:1.2}

  .herstories-editorial .lp-person{padding:65px 0 75px}

  .herstories-editorial .lp-person__number-track{top:80px;height:48vh}
  .herstories-editorial .lp-person__number-text{left:-55px;margin-left:0;font-size:clamp(135px,39vw,190px)}
  .herstories-editorial .lp-person__inner{width:86%}
  .herstories-editorial .lp-person__head{display:flex;flex-direction:column-reverse;align-items:stretch;gap:26px;margin-bottom:0}
  .herstories-editorial .lp-person__lead{width:82%;max-width:none;margin:0 auto}
  .herstories-editorial .lp-person__title{padding:0 0 0 8%}
  .herstories-editorial .lp-person__name-row{gap:8px;margin-bottom:14px}
  .herstories-editorial .lp-person__smallnum{font-size:clamp(40px,11vw,58px);margin-bottom:10px}
  .herstories-editorial .lp-person__title h2{font-size:clamp(22px,6vw,28px)}
  .herstories-editorial .lp-person__headline{font-size:16px;line-height:1.85;letter-spacing:.025em}
  .herstories-editorial .lp-person__content,.herstories-editorial .lp-person__bottom{
    display:flex;flex-direction:column;gap:28px;
  }
  .herstories-editorial .lp-person__content{margin:30px 0 45px}
  .herstories-editorial .lp-person__text{font-size:14px;line-height:2}
  .herstories-editorial .lp-person__pair{gap:6px;order:-1}
  .herstories-editorial .lp-person__photo{width:76%;margin:0 auto}
  .herstories-editorial .lp-person--gray .lp-person__content .lp-person__pair{display:block;width:68%;margin:0 auto}
  .herstories-editorial .lp-person--gray .lp-person__bottom .lp-person__photo{grid-column:1;grid-row:3;width:84%;max-width:100%;margin:0 auto}
  /* SP reading order: Q2, interview text, fashion photo, profile. */
  .herstories-editorial .lp-person__bottom{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
  .herstories-editorial .lp-person__bottom .lp-person__text{display:contents}
  .herstories-editorial .lp-person__bottom .lp-person__text h3{grid-row:1;margin-bottom:0}
  .herstories-editorial .lp-person__bottom .lp-person__text>p:not(.lp-person__profile){grid-row:2;width:84%;margin:0;font-size:14px;line-height:2;text-align:justify}
  .herstories-editorial .lp-person__bottom .lp-person__photo{grid-row:3}
  .herstories-editorial .lp-person__bottom .lp-person__text .lp-person__profile{grid-row:4;width:84%;margin-top:8px}
  .herstories-editorial .lp-person__photo--slide{aspect-ratio:4 / 5}

  /* 02 Kilala — Figma SP 400px: all positions are within the 02 section. */
  .herstories-editorial #lp-02{padding:0 0 120px}
  .herstories-editorial #lp-02 .lp-person__inner{display:flex;flex-direction:column;width:100%}
  .herstories-editorial #lp-02 .lp-person__head,
  .herstories-editorial #lp-02 .lp-person__content,
  .herstories-editorial #lp-02 .lp-person__bottom,
  .herstories-editorial #lp-02 .lp-person__bottom .lp-person__text{display:contents}
  .herstories-editorial #lp-02 .lp-person__title{order:1;width:100%;padding:0 9%;margin-bottom:24px}
  .herstories-editorial #lp-02 .lp-person__smallnum,
  .herstories-editorial #lp-02 .lp-person__number-track{display:none}
  .herstories-editorial #lp-02 .lp-person__name-row{margin:0 0 24px;gap:8px}
  .herstories-editorial #lp-02 .lp-person__title h2{font-size:24px;line-height:1.2}
  .herstories-editorial #lp-02 .lp-person__headline{font-size:16px;line-height:1.8;letter-spacing:0}
  .herstories-editorial #lp-02 .lp-person__lead{order:2;width:82%;max-width:none;margin:0 auto 60px}
  .herstories-editorial #lp-02 .lp-credit{margin-top:12px}
  .herstories-editorial #lp-02 .lp-credit li:first-child{width:100%;justify-content:flex-start}
  .herstories-editorial #lp-02 .lp-credit li:first-child .lp-online{margin-left:auto}
  .herstories-editorial #lp-02 .lp-credit li+li{margin-top:4px}
  .herstories-editorial #lp-02 .lp-person__content .lp-person__pair{order:3;position:relative;display:block;width:47%;margin:0 auto 60px}
  .herstories-editorial #lp-02 .lp-person__content .lp-person__text{order:4;width:100%;padding:0 9%;margin:0 0 60px}
  .herstories-editorial #lp-02 .lp-person__text h3{font-size:16px;line-height:1.75;margin-bottom:16px;letter-spacing:0}
  .herstories-editorial #lp-02 .lp-person__text p{font-size:14px;line-height:1.9;letter-spacing:0;margin:0}
  .herstories-editorial #lp-02 .lp-person__bottom .lp-person__text h3{order:5;width:82%;margin:0 auto 10px}
  .herstories-editorial #lp-02 .lp-person__bottom .lp-person__text>p:not(.lp-person__profile){order:6;width:82%;margin:0 auto 60px}
  .herstories-editorial #lp-02 .lp-person__bottom .lp-person__photo{order:7;width:100%;height:auto;aspect-ratio:400/388;margin:0 0 60px}
  .herstories-editorial #lp-02 .lp-person__photo--slide{--lp-slide-img-left:14%;--lp-slide-img-width:72.75%;--lp-slide-img-gap:17px}
  .herstories-editorial #lp-04 .lp-person__photo--slide{--lp-slide-img-left:14%;--lp-slide-img-width:72.75%;--lp-slide-img-gap:17px}
  .herstories-editorial #lp-02 .lp-person__bottom .lp-person__text .lp-person__profile{order:8;display:block;width:82%;margin:0 auto;min-height:204.5px}


  /* 04 Chiyuki — Figma SP 400px frame, 2590.5px tall. */
  .herstories-editorial #lp-04{padding:0 0 120px}
  .herstories-editorial #lp-04 .lp-person__inner{display:flex;flex-direction:column;width:100%}
  .herstories-editorial #lp-04 .lp-person__head,
  .herstories-editorial #lp-04 .lp-person__content,
  .herstories-editorial #lp-04 .lp-person__bottom,
  .herstories-editorial #lp-04 .lp-person__bottom .lp-person__text{display:contents}
  .herstories-editorial #lp-04 .lp-person__title{order:1;width:100%;padding:0 9%;margin-bottom:24px}
  .herstories-editorial #lp-04 .lp-person__smallnum,
  .herstories-editorial #lp-04 .lp-person__number-track{display:none}
  .herstories-editorial #lp-04 .lp-person__name-row{margin:0 0 24px;gap:8px}
  .herstories-editorial #lp-04 .lp-person__title h2{font-size:24px;line-height:1.2}
  .herstories-editorial #lp-04 .lp-person__headline{font-size:16px;line-height:1.8;letter-spacing:0}
  .herstories-editorial #lp-04 .lp-person__lead{order:2;width:82%;max-width:none;margin:0 auto}
  .herstories-editorial #lp-04 .lp-credit{margin-top:12px}
  .herstories-editorial #lp-04 .lp-person__content .lp-person__pair{order:3;position:relative;display:block;width:47%;margin:60px auto}
  .herstories-editorial #lp-04 .lp-person__content .lp-person__text{order:4;width:100%;padding:0 9%;margin:0 0 60px}
  .herstories-editorial #lp-04 .lp-person__text h3{font-size:16px;line-height:1.75;margin-bottom:16px;letter-spacing:0}
  .herstories-editorial #lp-04 .lp-person__text p{font-size:14px;line-height:1.9;letter-spacing:0;margin:0}
  .herstories-editorial #lp-04 .lp-person__bottom .lp-person__text h3{order:5;width:82%;margin:0 auto 10px}
  .herstories-editorial #lp-04 .lp-person__bottom .lp-person__text>p:not(.lp-person__profile){order:6;width:82%;margin:0 auto 60px}
  .herstories-editorial #lp-04 .lp-person__bottom .lp-person__photo{order:7;width:100%;height:auto;aspect-ratio:400/388;margin:0 0 60px}
  .herstories-editorial #lp-04 .lp-person__bottom .lp-person__text .lp-person__profile{order:8;display:block;width:82%;margin:0 auto;min-height:204.5px}


  /* SP / Figma: INDEX return button */
  .herstories-editorial .lp-to-top{
    right:8px;
    bottom:8px;
    width:35px;
    height:35px;
    border:0;
    border-radius:50%;
    background:#e5e5e5;
    color:#666;
    gap:0;
    box-shadow:none;
  }
  .herstories-editorial .lp-to-top span{
    font-size:0;
    line-height:1;
    position:relative;
    width:16px;
    height:16px;
  }
  .herstories-editorial .lp-to-top span::before{
    content:"";
    position:absolute;
    left:2px;
    top:3px;
    width:12px;
    height:12px;
    border-top:1px solid currentColor;
    border-left:1px solid currentColor;
    transform:rotate(45deg);
  }
  .herstories-editorial .lp-to-top small{display:none}
}

@media(prefers-reduced-motion:reduce){
  html:has(.herstories-editorial){scroll-behavior:auto}
  .herstories-editorial .lp-hero__art,.herstories-editorial .lp-hero__title{animation:none}
  .herstories-editorial.is-js .lp-reveal{opacity:1;transform:none;transition:none}
  .herstories-editorial.is-js .lp-person__photo--slide.is-visible img:nth-child(2){animation:none;transform:translateX(80%)}
  .herstories-editorial.is-js #lp-04 .lp-person__photo--slide.is-visible img{animation:none;transform:none}
  .herstories-editorial .lp-to-top{transition:none}
}

@media(hover:none){
  .herstories-editorial .lp-index__item:hover::after{box-shadow:none}
}

/* SP / Figma LPdesign_SP: shared 01–05 numeral header, 400 x 319 */
@media (max-width:767px){
  .herstories-editorial .lp-person,
  .herstories-editorial #lp-01,
  .herstories-editorial #lp-02,
  .herstories-editorial #lp-03,
  .herstories-editorial #lp-04,
  .herstories-editorial #lp-05{
    padding-top:319px;
  }
  .herstories-editorial .lp-person .lp-person__number-track,
  .herstories-editorial #lp-01 .lp-person__number-track,
  .herstories-editorial #lp-02 .lp-person__number-track,
  .herstories-editorial #lp-03 .lp-person__number-track,
  .herstories-editorial #lp-04 .lp-person__number-track,
  .herstories-editorial #lp-05 .lp-person__number-track{
    display:block;
    position:absolute;
    top:0;left:0;
    width:100%;height:319px;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
  }
  .herstories-editorial .lp-person .lp-person__number-text{
    position:absolute;
    top:91px;
    left:auto;right:-15px;
    width:auto;margin:0;
    font-family:var(--lp-q);
    font-size:190px;
    line-height:1.2;
    font-weight:400;
    letter-spacing:0;
    color:#f7f6f6;
  }
  .herstories-editorial .lp-person--gray .lp-person__number-text{color:#F6F6F6}
}

/* SP: keep question text aligned below itself, not under the Q marker */
@media (max-width:767px){
  .herstories-editorial .lp-person__text h3{
    position:relative;
    padding-left:30px;
  }
  .herstories-editorial .lp-person__text h3 .lp-q{
    position:absolute;
    top:0;
    left:0;
    margin-right:0;
  }
}

/* =====================================================================
   01 / 03 / 05  共通レイアウト（左写真タイプ）
   ---------------------------------------------------------------------
   ・絶対配置・固定高さは使わず、すべて通常フロー＋グリッドで組んでいます。
     → 納品後に本文・プロフィール・クレジットが増減しても重なりません。
   ・01 / 03 / 05 は同じルールを共有（セクション別の上書きは作らない）。
   ・調整したい値は下の変数だけ触ればOKです。
   ===================================================================== */
.herstories-editorial :is(#lp-01,#lp-03,#lp-05){
  --lp-pair-lift:240px;        /* 2枚コラージュを持ち上げる量（PC/タブレット） */
  --lp-head-gap:60px;          /* 見出しブロック〜Q&Aの間 */
  --lp-text-w:420px;           /* 本文カラム幅 */
}
@media (min-width:1200px){
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05){--lp-pair-lift:290px}
}

/* 文字まわり：3セクション完全共通 */
.herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-credit{font:400 14px/1.75 var(--lp-q);letter-spacing:0;margin-top:12px}
.herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-credit li{gap:8px;margin:0}
.herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-credit li+li{margin-top:6px}
.herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-credit__name{min-width:0}
.herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__text{width:min(var(--lp-text-w),100%);font-size:14px;line-height:1.9;letter-spacing:0}
.herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__text h3{font-size:18px;line-height:1.75;margin-bottom:16px;letter-spacing:0}
.herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__text p{font-size:14px;line-height:1.9;letter-spacing:0}
.herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__profile{
  margin:0;padding:16px;border:0;
  border-top:1px solid rgba(51,51,51,.25);
  border-bottom:1px solid rgba(51,51,51,.25);
}
.herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__profile-name{line-height:1.75;margin-bottom:12px}
.herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__profile-name b{font-family:var(--lp-jp);font-weight:400}

/* PC / タブレット（768px〜）：左写真 → 右に見出し／コラージュ → 下段は写真＋本文 */
@media (min-width:768px){
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05){padding:180px 0}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__head{align-items:start;margin-bottom:var(--lp-head-gap)}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__lead{max-width:none;margin-inline:0}
  /* クレジットが1行でも2行でも、写真の下の高さを揃える（コラージュ位置がブレない） */
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-credit{min-height:55px}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__title{padding-top:113px}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__smallnum{font:400 88px/1.2 var(--lp-q);margin-bottom:13px}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__name-row{gap:10px;margin-bottom:32px}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__headline{font-size:18px;line-height:1.8;letter-spacing:0}

  /* 中段：左＝Q&A（高さは本文なり）／右＝2枚コラージュ（見た目だけ上へ。行の高さには影響しない） */
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__content{margin-bottom:75px}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__content .lp-person__pair{
    top:calc(var(--lp-pair-lift) * -1);margin:0 0 calc(var(--lp-pair-lift) * -1);gap:8px;
  }
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__pair-frame{position:relative;min-width:0}

  /* 下段：左＝写真／右＝Q&A＋プロフィール。プロフィールは写真の下端に揃え、
     本文が写真より長ければ行ごと伸びる（重ならない） */
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__bottom{align-items:stretch}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__bottom .lp-person__photo{width:min(var(--lp-text-w),100%);margin:0;align-self:start}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__bottom .lp-person__text{display:flex;flex-direction:column;align-self:stretch;min-height:0}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__bottom .lp-person__text .lp-person__profile{
    position:static;inset:auto;width:100%;max-width:100%;margin-top:auto;flex:0 0 auto;
  }
}
@media (min-width:1200px){
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__inner{width:1080px}
}

/* SP（〜767px）：01 / 03 / 05 共通 */
@media (max-width:767px){
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05){padding-bottom:120px}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__inner{display:flex;flex-direction:column;width:100%}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__head,
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__content,
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__bottom,
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__bottom .lp-person__text{display:contents}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__title{order:1;width:100%;padding:0 9%;margin-bottom:24px}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__smallnum{display:none}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__name-row{margin:0 0 24px;gap:8px}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__title h2{font-size:24px;line-height:1.2}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__headline{font-size:16px;line-height:1.8;letter-spacing:0}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__lead{order:2;width:82%;max-width:none;margin:0 auto}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-credit{margin-top:12px}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-credit li+li{margin-top:4px}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__content .lp-person__pair{order:3;position:relative;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;margin:60px 0}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__content .lp-person__text{order:4;width:100%;padding:0 9%;margin:0 0 60px}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__text h3{font-size:16px;line-height:1.75;margin-bottom:16px;letter-spacing:0}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__text p{font-size:14px;line-height:1.9;letter-spacing:0;margin:0}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__bottom .lp-person__text h3{order:5;width:82%;margin:0 auto 10px}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__bottom .lp-person__text>p:not(.lp-person__profile){order:6;width:82%;margin:0 auto 60px}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__bottom .lp-person__photo{order:7;position:relative;width:69.5%;margin:0 0 60px}
  .herstories-editorial :is(#lp-01,#lp-03,#lp-05) .lp-person__bottom .lp-person__text .lp-person__profile{order:8;display:block;width:82%;margin:0 auto}
}

/* =====================================================================
   02 / 04  PC（1200px〜）：本文が増えても切れないよう、固定高さを「最低高さ」に変更
   写真・見出しの位置は従来どおり。今の文章量なら見た目は変わりません。
   ===================================================================== */
@media (min-width:1200px){
  .herstories-editorial :is(#lp-02,#lp-04) .lp-person__inner{height:auto;padding-bottom:180px}
  .herstories-editorial :is(#lp-02,#lp-04) .lp-person__content{height:auto;min-height:505px;padding-top:89px}
  .herstories-editorial :is(#lp-02,#lp-04) .lp-person__bottom{height:auto;min-height:558px}
  .herstories-editorial :is(#lp-02,#lp-04) .lp-person__content .lp-person__text{position:relative;left:auto;top:auto;margin:0 0 0 570px}
  .herstories-editorial :is(#lp-02,#lp-04) .lp-person__bottom .lp-person__text{position:relative;left:auto;top:auto;display:flex;flex-direction:column;min-height:558px}
  .herstories-editorial :is(#lp-02,#lp-04) .lp-person__bottom .lp-person__text .lp-person__profile{position:static;inset:auto;width:100%;max-width:100%;margin-top:auto;flex:0 0 auto}
}

/* =====================================================================
   #main_column の上余白（SP）
   sp.css(16行目) の @media (max-width:480px){#main_column{padding-top:0}} が
   aspesi-style-v2.css の padding-top:50px を打ち消しているため、LP側で50pxを復活。
   ※ herstories.css は最後に読み込まれるので、body を付けて詳細度を上げれば !important 不要
   ===================================================================== */
@media screen and (max-width:480px){
  body:has(.herstories-editorial) #main_column{padding-top:50px}
}

/* =====================================================================
   SP：背景数字 01〜05 を PC 同様に画面固定
   ・トラックを position:fixed にし、各セクション(clip-path)の範囲内だけ表示 → 記事が数字の上をスクロール
   ・数字の位置は従来デザイン（右寄せ・190px）のまま。固定位置は上から80px（ヘッダー下）
   ===================================================================== */
@media (max-width:767px){
  .herstories-editorial :is(#lp-01,#lp-02,#lp-03,#lp-04,#lp-05) .lp-person__number-track{
    position:fixed;top:80px;left:0;width:100%;height:228px;overflow:hidden;z-index:0;pointer-events:none;
  }
  .herstories-editorial .lp-person .lp-person__number-text{top:0}
}