/* 体験談を続けて読みたくなるかを比べるための記事デザイン案。 */
.page.article.editorial { max-width: none; padding: 0; }
.editorial article { padding: 0 0 80px; }
.editorial .story-hero { position: relative; overflow: hidden; background: #eee6e1; margin: 0 0 76px; }
.editorial .story-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr .93fr; max-width: 1200px; min-height: 610px; margin: auto; }
.editorial .story-hero__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 72px clamp(28px, 6vw, 92px); }
.editorial .story-crumb { color: #915265; font: 700 13px/1.4 var(--maru); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 5px; }
.editorial .story-issue { margin: 52px 0 18px; color: #915265; font: 700 11px/1.4 Georgia, serif; letter-spacing: .28em; }
.editorial .story-issue span { margin-left: 16px; color: #675456; }
.editorial .story-hero h1 { margin: 0; color: #342629; font: 700 clamp(35px, 4.3vw, 58px)/1.46 var(--mincho); letter-spacing: -.035em; text-wrap: balance; }
.editorial .story-hero h1 em { color: #9c4e65; font-style: normal; }
.editorial .story-dek { margin: 35px 0 0; color: #55464a; font: 500 clamp(18px, 1.9vw, 22px)/1.8 var(--mincho); }
.editorial .story-byline { margin: 37px 0 0; color: #6d5e5e; font-size: 12px; letter-spacing: .08em; }
.editorial .story-byline span { color: #8a7b78; }
.editorial .story-hero__visual { position: relative; min-height: 610px; margin: 0; }
.editorial .story-hero__visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 53% 48%; }
.editorial .story-hero__visual figcaption { position: absolute; right: 15px; bottom: 14px; padding: 4px 7px; background: rgb(255 253 251 / .85); color: #473b3b; font-size: 11px; }
.editorial .story-hero__number { position: absolute; z-index: 0; left: 3%; bottom: -35px; color: rgb(130 76 91 / .11); font: 700 clamp(100px, 17vw, 245px)/1 Georgia, serif; white-space: nowrap; pointer-events: none; }

.editorial article > p, .editorial article > h2, .editorial article > h3, .editorial article > .said,
.editorial article > .story-then-now, .editorial article > .steps, .editorial article > .balloon,
.editorial article > .sources, .editorial article > .related, .editorial article > .fig {
  width: min(100% - 42px, 690px); box-sizing: border-box; margin-left: auto; margin-right: auto;
}
.editorial article > p { font-size: 17px; line-height: 2.06; margin-bottom: 20px; color: #3d3434; }
.editorial article > p.story-opening { margin-top: 0; color: #553b42; font: 500 clamp(22px, 3vw, 29px)/1.76 var(--mincho); }
.editorial .mk { background: none; color: #8f3f56; box-shadow: inset 0 -.28em #f3dde3; padding-inline: .08em; }
.editorial article > h2 { margin-top: 120px; margin-bottom: 30px; padding: 0 0 18px; color: #3c2c30; border-bottom: 1px solid #c7a6ad; font: 700 clamp(27px, 3.5vw, 36px)/1.48 var(--mincho); letter-spacing: -.025em; }
.editorial article > h2::before { display: none; }
.editorial article > h3 { margin-top: 44px; color: #8e4f62; font: 700 clamp(19px, 2.2vw, 23px)/1.6 var(--mincho); }
.editorial article > .said { margin-top: 34px; margin-bottom: 30px; padding: 21px 30px; background: #eee5df; color: #543e45; border: 0; font: 700 clamp(19px, 2.3vw, 24px)/1.8 var(--mincho); }
.editorial .story-then-now { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 45px; margin-bottom: 45px; border-top: 1px solid #b69a9e; border-bottom: 1px solid #b69a9e; }
.editorial .story-then-now > div { padding: 30px 26px 28px; }
.editorial .story-then-now > div:first-child { border-right: 1px solid #d4c2c1; }
.editorial .story-then-now__age { color: #a35e70; font: 700 33px/1 Georgia, serif; }
.editorial .story-then-now h3 { margin: 15px 0; color: #3f3033; font: 700 23px/1.5 var(--mincho); }
.editorial .story-then-now p { margin: 0; font-size: 15px; line-height: 1.95; }
.editorial .steps { display: block; margin-top: 34px; padding: 0; }
.editorial .steps li { min-height: 90px; padding: 25px 0 25px 64px; border: 0; border-top: 1px solid #d9c9c5; border-radius: 0; background: none; font-size: 15px; }
.editorial .steps li:last-child { border-bottom: 1px solid #d9c9c5; }
.editorial .steps li::before { top: 25px; left: 0; width: 44px; height: 44px; border-radius: 0; background: none; color: #a35e70; font: 700 27px/44px Georgia, serif; }
.editorial .steps__t { font-family: var(--mincho); font-size: 18px; }
.editorial .balloon { background: #f3ece8; border: 0; border-radius: 0; padding: 20px; }
.editorial .sources-heading { margin-top: 100px; font-size: 22px !important; }
.editorial .sources { margin-top: 10px; font-size: 12px; }
.editorial .related { margin-top: 85px; }
.editorial .related a { border-radius: 0; background: #f4ede9; }

@media (max-width: 760px) {
  .editorial .story-hero { margin-bottom: 48px; }
  .editorial .story-hero__inner { display: block; min-height: 0; }
  .editorial .story-hero__copy { padding: 42px 22px 39px; }
  .editorial .story-issue { margin-top: 46px; }
  .editorial .story-hero h1 { font-size: clamp(35px, 9vw, 50px); }
  .editorial .story-dek { margin-top: 25px; font-size: 18px; }
  .editorial .story-byline { margin-top: 25px; }
  .editorial .story-hero__visual { height: 290px; min-height: 0; }
  .editorial .story-hero__visual img { object-position: 50% 45%; }
  .editorial .story-hero__number { right: 2%; left: auto; bottom: 240px; font-size: 95px; }
  .editorial article > h2 { margin-top: 90px; }
  .editorial .story-then-now { grid-template-columns: 1fr; }
  .editorial .story-then-now > div { padding: 25px 8px; }
  .editorial .story-then-now > div:first-child { border-right: 0; border-bottom: 1px solid #d4c2c1; }
}

/* ベリーを主役に残し、深いセージグリーンを補助色として試す。 */
.editorial .story-crumb,
.editorial .story-issue,
.editorial .story-then-now > div:last-child .story-then-now__age,
.editorial .steps li::before { color: #536b5c; }
.editorial .story-then-now > div:last-child { background: #e8ede8; }
.editorial .story-then-now > div:last-child h3 { color: #354b3e; }
.editorial .story-then-now { border-color: #aebbad; }

/* 同じ連載の調査記事では、表とFAQも本文と同じ読み幅に収める。 */
.editorial article > .table-wrap, .editorial article > .checklist,
.editorial article > .faq { width: min(100% - 42px, 690px); box-sizing: border-box; margin-left: auto; margin-right: auto; }
.editorial article > .table-wrap { margin-top: 38px; margin-bottom: 38px; }
.editorial .cmp { min-width: 560px; }
.editorial .checklist { border: 0; border-top: 1px solid #aebbad; border-bottom: 1px solid #aebbad; border-radius: 0; background: #e8ede8; padding: 28px; }
.editorial .checklist li::before { border-color: #536b5c; }
.editorial .checklist li::after { border-color: #536b5c; }
.editorial .faq { gap: 0; }
.editorial .faq__item { border: 0; border-top: 1px solid #d9c9c5; border-radius: 0; background: transparent; padding: 24px 0; }
.editorial .faq__item:last-child { border-bottom: 1px solid #d9c9c5; }
.editorial .faq__item h3::before { background: #536b5c; }
.editorial .faq__a::before { background: #3a2629; }