/* 記事は画面幅にかかわらず1カラム。目次も本文と同じ読み順に置く。 */
.article-header,.article-layout.learning-article,.learning-related{max-width:880px}
.article-layout.learning-article{display:block}
.learning-article .article-toc{position:static;top:auto;margin:0 0 32px;padding:0;background:#edf4f1;border:1px solid #c9dcd5;border-radius:12px;font-size:15px}
.article-toc summary{cursor:pointer;padding:18px 22px;font-size:18px;font-weight:700}
.article-toc summary>span{display:inline-block;margin-left:16px;font-size:13px;font-weight:400;color:#49646a}
.article-toc nav{padding:0 22px 16px}
.article-toc nav>a{display:block;padding:12px 0;border-top:1px solid #d0e0da;line-height:1.8}
.article-toc nav>a:hover{text-decoration:underline;text-underline-offset:5px}
.learning-article :is(section,li[id]){scroll-margin-top:28px}
.learning-start>h2{font-size:30px;line-height:1.65;margin:10px 0 24px}
.learning-notice{padding:18px 22px;background:#f3eee0;border-radius:12px;font-size:17px;line-height:1.9;margin-bottom:22px}
.learning-notice>span,.learning-focus>span,.learning-answer>span{display:block;font-size:12px;letter-spacing:.07em;font-weight:700;margin-bottom:8px;color:#526a64}
.learning-article .lesson-section{margin:0 0 56px;padding-top:26px;border-top:1px solid #d4e0da}
.learning-article .lesson-title h2{font-size:26px;line-height:1.65}
.learning-article .lesson-section>p.learning-focus{font-size:20px;color:#174859;background:#fff;border-left:4px solid #aabd9a;padding:15px 20px;margin:20px 0;line-height:1.8}
.learning-answer{padding:19px 22px;margin:22px 0!important;background:#e9f3ee;border-radius:12px}
.learning-answer strong{font-size:19px;line-height:1.85;font-weight:700}
.learning-article .lesson-section>p{font-size:17px;line-height:2.05}
.learning-article .lesson-deeper{margin:20px 0;background:#f4f4ec;border:1px solid #dcdfce;border-radius:10px;padding:18px 22px}
.learning-article .lesson-deeper summary{font-size:16px;line-height:1.85;padding-right:4px}
.learning-article .lesson-deeper p{font-size:16px;line-height:2;margin-top:16px}
.learning-article .lesson-references{font-size:12px!important;color:#586c74}
.learning-figure{margin:22px 0;background:#fff;border:1px solid #d4e2dc;border-radius:16px;padding:25px}
.learning-figure h3{font-size:20px;line-height:1.7;margin-bottom:22px}
.learning-figure svg{display:block;width:100%;max-width:430px;height:auto;margin:0 auto;background:#fbfaf4;border-radius:12px}
.learning-figure svg text,html[lang=en] .learning-figure svg text{font-family:Arial,"Noto Sans JP",sans-serif;font-size:24px;font-weight:600;fill:#254f5c}
.learning-figure svg text.svg-small,html[lang=en] .learning-figure svg text.svg-small{font-size:20px}
.learning-figure figcaption{font-size:14px;line-height:1.9;margin-top:21px;color:#49646a}
.learning-article .diagram-wave text.wave-part{font-size:24px;font-weight:700;fill:#713b1c}
/* 比較図も縦に並べ、本文と図を交互に読めるようにする。 */
.learning-article :is(.coast-panels,.tide-panels,.tide-route-panels,.tide-reading-steps){grid-template-columns:1fr}
.learning-article :is(.coast-panel,.tide-panel) svg{max-width:480px;display:block;margin-inline:auto}
.learning-article :is(.coast-panel,.tide-panel)+:is(.coast-panel,.tide-panel){border-top:1px solid var(--line);padding-top:24px}
.learning-glossary,.learning-check{margin:45px 0}
.learning-glossary h2,.learning-check h2{font-size:25px;line-height:1.6;margin:10px 0 20px}
.learning-glossary dl{margin:0}
.learning-glossary dl>div{padding:18px 0;border-bottom:1px solid var(--line)}
.learning-glossary dt{font-size:18px;font-weight:700;margin-bottom:8px}
.learning-glossary dd{font-size:16px;line-height:1.9;margin:0;color:#355767}
.learning-check>p:not(.eyebrow){font-size:16px;line-height:1.9;margin-bottom:20px}
.learning-check details{border:1px solid #cddfd8;border-radius:12px;margin:14px 0;background:#fff;overflow:hidden}
.learning-check summary{cursor:pointer;padding:21px;font-size:18px;line-height:1.85;font-weight:700}
.check-number{display:inline-block;font:700 14px Arial,sans-serif;color:#167985;margin-right:10px}
.learning-check details>p{padding:20px 22px;background:#edf5f1;border-top:1px solid #d8e5dc;font-size:16px;line-height:2}
.learning-article summary:focus-visible{outline:3px solid #137c89;outline-offset:3px}
.learning-article .source-box h3{margin:24px 0 12px;font-size:16px}
.learning-related .article-grid{grid-template-columns:1fr}
.learning-related .article-card{grid-template-columns:180px 1fr}
.learning-article .think-box,.learning-article .teaching-note{margin-top:36px}
@media(max-width:760px){
  .learning-article .article-toc{margin-bottom:24px}
  .article-toc summary{padding:16px 18px;font-size:17px}
  .article-toc summary>span{font-size:12px;margin-left:10px}
  .article-toc nav{padding-inline:18px}
  .learning-start>h2{font-size:24px;line-height:1.7}
  .learning-notice{padding:16px;font-size:16px}
  .learning-article .lesson-title h2{font-size:22px}
  .learning-article .lesson-section>p.learning-focus{font-size:18px;padding:14px 16px}
  .learning-figure{padding:15px;margin:20px 0}
  .learning-figure h3{font-size:18px;margin-bottom:18px}
  .learning-figure figcaption{font-size:14px}
  .learning-answer{padding:17px}
  .learning-answer strong{font-size:18px}
  .learning-article .lesson-section>p{font-size:16px;line-height:2}
  .learning-article .lesson-deeper{padding:16px}
  .learning-article .lesson-section{margin-bottom:38px}
  .learning-check summary{padding:17px;font-size:17px}
  .learning-check details>p{padding:17px;font-size:16px}
  .learning-related .article-card{grid-template-columns:110px 1fr}
  .learning-related .section-heading{align-items:flex-start;flex-direction:column;gap:15px}
}
@media print{
  .learning-article .article-toc{display:none}
  .learning-article{display:block!important}
  .learning-figure{break-inside:avoid;padding:4mm}
  .learning-figure svg{max-width:85mm}
  .learning-article :is(.coast-panels,.tide-panels,.tide-route-panels){grid-template-columns:1fr!important}
}