/* =========================================================
   想いのページ（message.html）：style.css・theme.css の上に重ねる
   TOPと同じ緑の版。角の丸み・色・ボタンは theme.css のものをそのまま使う
   ========================================================= */

/* 本文の幅：長い文章を読むので細めに */
.page-message { --msg-w: 720px; --toc-w: 248px; }
.msg-wrap { width: min(100% - 2 * var(--gutter), var(--msg-w)); margin-inline: auto; position: relative; z-index: 1; }

/* ---------- 読み進み具合のバー ---------- */
.progress { display: none; }
html.js .progress { display: block; position: fixed; inset: 0 0 auto; height: 4px; z-index: 70; background: rgba(0, 33, 78, .08); pointer-events: none; }
.progress__bar { display: block; height: 100%; background: var(--jr-green); transform-origin: left; transform: scaleX(0); border-radius: 0 var(--r-pill) var(--r-pill) 0; }

/* ---------- ページの頭 ---------- */
.msg-hero { position: relative; background: #fff; padding: calc(var(--header-h) + 40px) 0 clamp(56px, 9vw, 104px); }
.msg-hero__panel {
  position: absolute; inset: 0 12px 0; background: var(--jr-hero); border-radius: 0 0 var(--r-hero) var(--r-hero);
}
.msg-hero__inner .eyebrow { margin-bottom: 12px; }
.msg-hero__title { margin-top: 20px; font-weight: 900; font-size: clamp(2rem, 1.2rem + 3.6vw, 3.5rem); line-height: 1.5; color: var(--ink); }
.msg-hero__by { font-weight: 700; color: var(--jr-green); letter-spacing: 0.08em; }
.msg-hero__who { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; }
.msg-hero__name { font-weight: 500; color: var(--jr-green); line-height: 1.6; font-size: clamp(0.8125rem, 0.7rem + 0.5vw, 1rem); }
.msg-hero__photo { flex: none; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; background: #E3E7EE; }
.msg-hero__photo img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 0; border-radius: 0; font-size: 0.75rem; padding: 0; }
@media (min-width: 900px) {
  /* PC：タイトルの右に写真、その下に肩書き */
  .msg-hero__inner { display: grid; grid-template-columns: 1fr auto; column-gap: 48px; align-items: end; }
  .msg-hero__inner > :not(.msg-hero__who) { grid-column: 1; }
  .msg-hero__who { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 0; }
  .msg-hero__photo { order: -1; width: 160px; height: 160px; border-width: 4px; box-shadow: var(--jr-soft); }
  .msg-hero__name { text-align: center; }
}
.msg-hero .floaties { overflow: hidden; }
.page-message .fl i { animation: none; }
@media (max-width: 899px) { .msg-hero .fl.c-purple, .msg-hero .fl.c-green, .chap--end .floaties { display: none; } }

/* ---------- 目次 ---------- */
.toc { background: #fff; padding: 28px 0 8px; }
.toc__box { width: min(100% - 2 * var(--gutter), var(--msg-w)); margin-inline: auto; background: var(--jr-gray); border-radius: var(--r-box); padding: 4px 20px 8px; }
.toc__summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 52px; cursor: pointer; list-style: none;
  font-weight: 900; font-size: 1.0625rem; color: var(--ink);
}
.toc__summary::-webkit-details-marker { display: none; }
.toc__summary::after {
  content: ""; width: 20px; height: 20px; background: var(--jr-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.toc__box[open] .toc__summary::after { rotate: 180deg; }
.toc__list { counter-reset: none; }
.toc__list li + li { border-top: 1px solid rgba(0, 33, 78, .1); }
.toc__list a {
  display: flex; align-items: baseline; gap: 12px; min-height: 48px; padding: 8px 2px;
  text-decoration: none; font-weight: 700; font-size: 0.9375rem; line-height: 1.6;
}
.toc__list a:hover { color: var(--jr-green); }
.toc__no { flex: none; min-width: 3.4em; font-size: 0.8125rem; color: var(--jr-green); letter-spacing: 0.04em; }
.toc__list a[aria-current="true"] { color: var(--jr-green); }
.toc__list a[aria-current="true"] .toc__no::before { content: "●"; font-size: .6em; margin-right: 4px; vertical-align: .15em; }

/* PC（幅が広いとき）：目次は左に固定。本文は中央のまま */
@media (min-width: 1280px) {
  .toc { padding: 0; background: none; position: static; }
  .toc__box {
    position: fixed; left: 28px; top: calc(var(--header-h) + 24px); z-index: 30;
    width: var(--toc-w); max-height: calc(100svh - var(--header-h) - 48px); overflow-y: auto;
    background: #fff; box-shadow: var(--jr-soft); padding: 4px 14px 8px; margin: 0;
  }
  .toc__summary { pointer-events: none; min-height: 36px; font-size: 0.875rem; }
  .toc__summary::after { display: none; }
  /* 高さ720pxの画面でも終章まで見えるよう、章番号の右に題名を並べて行を詰める */
  .toc__list a { min-height: 0; padding: 4px 2px; font-size: 0.75rem; line-height: 1.45; gap: 6px; }
  .toc__no { min-width: 3.6em; font-size: 0.6875rem; }
}

/* ---------- 章 ---------- */
.chap { position: relative; padding-block: clamp(64px, 10vw, 112px); color: var(--ink); overflow: hidden; }
.chap--white { background: #fff; }
.chap--pale { background: var(--jr-green-pale); }
.chap--gray { background: var(--jr-gray); }
.chap--green { background: var(--jr-brand); --focus: var(--navy); }
/* 章の頭は、目次や固定ヘッダーに隠れない位置まで */
.chap, .msg-hero { scroll-margin-top: 0; }

.chap__no {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-weight: 900; font-size: 1rem; letter-spacing: 0.08em; color: var(--jr-green);
}
.chap__no::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--jr-dot); flex: none; }
.chap--green .chap__no { color: var(--ink); }
.chap__title {
  font-weight: 900; font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.375rem); line-height: 1.55; letter-spacing: 0.03em;
  margin-bottom: clamp(24px, 4vw, 40px); text-wrap: balance;
}
.sub-title {
  margin-top: clamp(40px, 6vw, 64px); margin-bottom: 18px; padding-left: 16px; position: relative;
  font-weight: 900; font-size: clamp(1.1875rem, 1.05rem + .7vw, 1.5rem); line-height: 1.6;
}
.sub-title::before { content: ""; position: absolute; left: 0; top: .3em; bottom: .3em; width: 5px; border-radius: var(--r-pill); background: var(--jr-brand); }
.chap--green .sub-title::before { background: #fff; }
.page-message .prose { max-width: none; }
.page-message .prose > * + * { margin-top: 1.1em; }
.page-message .prose + .prose { margin-top: 1.1em; }
.page-message .prose, .page-message .prose p { line-height: 2; }
.lead-strong { font-weight: 900; font-size: clamp(1.1875rem, 1.05rem + .7vw, 1.4375rem); line-height: 1.8 !important; }
.closing { font-weight: 900; }

/* 序章：手紙 */
.letter { padding: clamp(22px, 4vw, 36px); background: var(--jr-green-pale); border-radius: var(--r-card); }
.letter__to { font-weight: 900; font-size: 1.1875rem; }

/* 第1章：3つの場面 */
.step { margin-top: clamp(36px, 5vw, 56px); }
.step:first-of-type { margin-top: 0; }
.step__title { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; font-weight: 900; font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); line-height: 1.6; }
.step__no, .tl__no, .produce__no {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--jr-green); color: #fff; font-family: var(--font-en); font-weight: 600; font-size: 1rem; line-height: 1;
}
.quote { margin: 24px 0 0; padding: clamp(20px, 3.5vw, 32px); background: #fff; border-radius: var(--r-card); box-shadow: var(--jr-soft); }
.quote p + p { margin-top: 1em; }
.quote__tag { display: inline-block; padding: 2px 14px; border-radius: var(--r-pill); background: var(--jr-green); color: #fff; font-weight: 700; font-size: 0.8125rem; line-height: 1.8; margin-bottom: 12px; }
.quote p { line-height: 2; }
.step .closing { margin-top: 24px; }

/* 第3章 */
.aside-note {
  display: inline-block; margin-top: 24px; padding: 14px 24px; background: #fff; border-radius: var(--r-box);
  font-weight: 900; line-height: 1.8; box-shadow: var(--jr-soft);
}
.bricks { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 24px; }
.bricks li {
  padding: 10px 22px; background: #fff; border-radius: var(--r-btn); box-shadow: var(--jr-soft);
  font-weight: 900; font-size: 1.0625rem; line-height: 1.5;
}
.bricks li:nth-child(even) { translate: 6px 0; }

/* 第4章 */
.equation { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 8px 0 24px; }
.equation__box { padding: 12px 20px; background: var(--jr-gray); border-radius: var(--r-box); font-weight: 900; line-height: 1.6; }
.equation__box--result { background: var(--jr-green); color: #fff; }
.equation__op { font-weight: 900; font-size: 1.5rem; color: var(--jr-green); line-height: 1; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 4px; margin: 8px 0; }
.flow li { display: flex; align-items: center; font-weight: 900; line-height: 1.5; }
.flow li + li::before {
  content: ""; width: 8px; height: 8px; margin: 0 10px 0 4px; border: solid var(--jr-green); border-width: 2.5px 2.5px 0 0; rotate: 45deg; flex: none;
}
.flow li:last-child span, .flow li:last-child { color: var(--ink); }
.rings { display: grid; gap: 12px; margin-bottom: 24px; }
.rings__item { background: var(--jr-gray); border-radius: var(--r-box); padding: 16px 20px; }
.rings__item dt { font-weight: 900; color: var(--jr-green); }
.rings__item dd { margin-top: 2px; line-height: 1.9; }
.rings__item:nth-child(2) { margin-inline: 12px 0; }
.rings__item:nth-child(3) { margin-inline: 24px 0; }

/* 第5章 */
.produce { display: grid; gap: 14px; margin-top: 24px; }
.produce li { display: flex; align-items: flex-start; gap: 16px; background: #fff; border-radius: var(--r-box); padding: 18px 22px; box-shadow: var(--jr-soft); }
.produce__no { margin-top: 2px; }
.produce__name { font-weight: 900; font-size: 1.125rem; line-height: 1.6; }
.produce p { line-height: 1.9; }

/* 第6章：年表 */
.timeline { position: relative; display: grid; gap: clamp(36px, 5vw, 56px); margin-top: 8px; padding-left: 0; }
.tl { position: relative; padding-left: 52px; }
.tl::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: calc(-1 * clamp(36px, 5vw, 56px) + 0px); width: 3px; background: var(--jr-brand); opacity: .45; border-radius: 2px; }
.tl--end::before { display: none; }
.tl__title { position: relative; font-weight: 900; font-size: clamp(1.0625rem, .98rem + .5vw, 1.3125rem); line-height: 1.6; margin-bottom: 14px; }
.tl__no { position: absolute; left: -52px; top: -3px; width: 36px; height: 36px; font-size: .9375rem; }
.tl--end .tl__title::before {
  content: ""; position: absolute; left: -43px; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--jr-dot);
}
.stamp {
  display: inline-block; padding: 6px 18px; border: 3px solid var(--jr-green); border-radius: var(--r-xs);
  color: var(--jr-green); font-weight: 900; rotate: -2deg; line-height: 1.7 !important;
}
.compare { margin-top: 24px; padding: clamp(18px, 3vw, 28px); background: #F1EEE8; border-radius: var(--r-card); }
.compare__label { font-size: 0.875rem; font-weight: 500; color: var(--orange-text); letter-spacing: 0.04em; }
.compare__title { margin-top: 6px; font-weight: 900; font-size: clamp(1.1875rem, 1.05rem + 0.8vw, 1.5rem); line-height: 1.6; }
.compare__pair { display: grid; gap: 14px; margin-top: 20px; }
.compare__item { background: #fff; border: 1.5px solid transparent; border-radius: var(--r-box); padding: 18px 20px; }
.compare__item--ksp { border-color: var(--jr-green); }
.compare__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.compare__name { font-weight: 500; color: var(--ink-soft); line-height: 1.5; }
.compare__item--ksp .compare__name { color: var(--jr-green); }
.compare__tag { flex: none; font-size: 0.8125rem; line-height: 1.4; padding: 3px 12px; border-radius: var(--r-pill); border: 1.5px solid #B7B1A6; color: var(--ink-soft); }
.compare__item--ksp .compare__tag { background: var(--jr-green); border-color: var(--jr-green); color: #fff; font-weight: 700; }
.compare__role { margin-top: 12px; font-weight: 700; font-size: clamp(1rem, 0.9rem + 0.6vw, 1.375rem); line-height: 1.6; }
.compare__text { margin-top: 8px; font-size: 0.9375rem; line-height: 1.9; color: var(--ink-soft); }
.compare__close { margin-top: 20px; font-weight: 500; text-align: center; line-height: 1.8; font-size: 1.0625rem; }

/* 第7章 */
.wishes { display: grid; gap: 12px; margin-bottom: 20px; }
.wishes__item { display: grid; gap: 4px; background: #fff; border-radius: var(--r-box); padding: 16px 20px; box-shadow: var(--jr-soft); }
.wishes__item dt { font-weight: 900; font-size: 1.125rem; color: var(--jr-green); }
.wishes__item dd { line-height: 1.9; }

/* 第8章 */
.results { display: grid; gap: 12px; margin: 24px 0; }
.results__item { background: var(--jr-green-pale); border-radius: var(--r-box); padding: 16px 22px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.results__item dt { font-weight: 700; line-height: 1.6; color: var(--jr-green); }
.results__item dt small { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--ink); }
.results__item dd { font-weight: 900; color: var(--jr-green); }
.results__num { font-family: var(--font-en); font-weight: 600; font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem); line-height: 1.1; margin-right: 2px; }

/* 第10章 */
.vision { padding: clamp(24px, 4vw, 40px); background: var(--jr-green); color: #fff; border-radius: var(--r-card); }
.vision__label { font-family: var(--font-en); font-weight: 600; letter-spacing: 0.14em; font-size: 0.9375rem; }
.vision__text { margin-top: 8px; font-weight: 900; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.625rem); line-height: 1.8; }
.creed { margin-top: 16px; padding: clamp(20px, 3vw, 28px) clamp(24px, 4vw, 40px); background: var(--jr-gray); border-radius: var(--r-card); }
.creed__label { font-weight: 900; color: var(--jr-green); }
.creed__text { margin-top: 4px; font-weight: 700; line-height: 1.9; font-size: 1.0625rem; }

/* 終章 */
.chap--end { padding-block: clamp(72px, 11vw, 128px); }
.chap--end .chap__title { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); }
.sign-img { margin-block: 44px 40px; text-align: right; }
.sign-img img { display: inline-block; width: min(60%, 280px); height: auto; }
.author { margin-top: 0; background: var(--jr-green-pale); border-radius: var(--r-card); padding: clamp(20px, 4vw, 32px); }
.author__label { font-weight: 700; color: var(--jr-green); letter-spacing: 0.04em; }
.author__org { margin-top: 14px; font-weight: 700; line-height: 1.7; }
.author__name { margin-top: 4px; font-weight: 700; font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); line-height: 1.5; }
.author__bio { margin-top: 14px; font-size: 0.9375rem; line-height: 1.9; }
.epilogue__actions { margin-top: 32px; }
@media (max-width: 767px) { .epilogue__actions { display: none; } } /* 固定バーが出る幅では重複するので隠す */
.chap--end .btn--accent { --btn-bg: var(--orange); }

/* 現在のページ */
.page-message .site-nav a[aria-current="page"] { color: var(--jr-green); }
.page-message .site-footer__nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }

/* 広い画面 */
@media (min-width: 768px) {
  .rings { grid-template-columns: repeat(3, 1fr); }
  .rings__item:nth-child(n) { margin-inline: 0; }
  .compare__pair { grid-template-columns: 1fr 1fr; }
  .produce li { padding: 22px 28px; }
  .tl { padding-left: 64px; }
  .tl__no { left: -64px; }
  .tl::before { left: 17px; }
}

/* 章の見出しのすぐ下に来る小見出しは、上の余白を詰める */
.chap__title + .sub-title.first { margin-top: 0; }