/* 月食と日食のしくみ（/eclipse/） */
.ecl-hero .bgimg img { opacity: 0.32; }
.ecl-nav { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.ecl-nav a { padding: 7px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line2); color: var(--tx); font-weight: 800; font-size: 15px; text-decoration: none; }
.ecl-nav a[aria-current] { background: linear-gradient(180deg, #ffe39d, var(--gold2)); color: #2a1600; box-shadow: none; }

/* ─── シミュレーター ─── */
.ecl-sim, .ecl-tilt, .ecl-hub { margin-top: 14px; }
.es-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.es-types .chip { font-size: 15px; padding: 7px 14px; cursor: pointer; border: 0; }
.es-types .chip.on { background: linear-gradient(180deg, #ffe39d, var(--gold2)); color: #2a1600; box-shadow: none; }
.es-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 1000px) { .es-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .es-space { grid-column: 1 / -1; } }
@media (max-width: 600px) { .es-grid { grid-template-columns: minmax(0, 1fr); } }
.es-v { margin: 0; background: rgba(2, 4, 14, 0.66); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); padding: 8px 8px 10px; min-width: 0; }
.es-v figcaption { font-size: 14px; font-weight: 800; color: var(--tx2); margin: 0 4px 6px; line-height: 1.5; }
.es-v figcaption b { color: var(--gold); margin-right: 2px; }
.es-v svg, .es-v canvas { display: block; width: 100%; height: auto; border-radius: 10px; }
.es-v canvas { aspect-ratio: 6 / 5; }
.eh-mini canvas { aspect-ratio: 24 / 17; }
.es-cap { font-size: 13.5px; color: var(--mut); margin: 6px 4px 0; line-height: 1.6; min-height: 3.2em; }
.es-state { margin: 8px 4px 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.5; }
.es-state b { font-size: 15.5px; color: var(--gold); }
.es-state span { font-size: 13.5px; color: var(--mut); font-family: var(--ff); }
.es-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.es-play { min-width: 128px; }
.es-range { flex: 1 1 220px; min-width: 0; height: 32px; accent-color: var(--gold); cursor: pointer; touch-action: pan-y; }
.es-speed button { font-size: 14px; padding: 6px 11px; }
.es-note { font-size: 13.5px; margin: 10px 0 0; line-height: 1.7; }

/* SVG の中の文字と線 */
.ecl-sim svg, .ecl-tilt svg, .ecl-hub svg, .ecl-fig svg { font-family: var(--ff); }
svg .t { fill: #e8eeff; font-size: 21px; font-weight: 800; }
svg .t.s { font-size: 17px; font-weight: 700; }
svg .t.xs { font-size: 13px; font-weight: 700; fill: var(--mut); }
svg .t.c { text-anchor: middle; }
svg .t.r { text-anchor: end; }
svg .t.mut { fill: #9fb0dc; }
svg .t.gold { fill: var(--gold); }
svg .t.red { fill: #ff9b7a; }
svg .t.umbt { fill: #ff9b7a; }
svg .t.big { font-size: 26px; font-weight: 900; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, 0.7); stroke-width: 5px; }
svg .t.obs { font-size: 22px; fill: #ffe066; paint-order: stroke; stroke: #000; stroke-width: 3px; }
svg .rays line { stroke: #ffd27a; stroke-opacity: 0.22; stroke-width: 1.5; stroke-dasharray: 10 12; }
svg .pen { fill: rgba(150, 165, 210, 0.16); }
svg .umb { fill: rgba(0, 0, 0, 0.55); }
svg .orb { fill: none; stroke: rgba(200, 215, 255, 0.35); stroke-width: 1.5; stroke-dasharray: 5 6; }
svg .orb2 { fill: none; stroke: var(--gold); stroke-opacity: 0.55; stroke-width: 1.6; stroke-dasharray: 6 6; }
svg .beam { fill: rgba(255, 214, 130, 0.13); }
svg .pen2 { fill: rgba(3, 5, 14, 0.62); stroke: rgba(190, 205, 255, 0.4); stroke-dasharray: 4 4; }
svg .umb2 { fill: #000; stroke: rgba(255, 150, 120, 0.7); }
svg .ant { fill: rgba(255, 190, 90, 0.18); stroke: rgba(255, 190, 90, 0.5); stroke-dasharray: 4 4; }
svg .pen2.on { fill: rgba(0, 0, 0, 0.32); stroke: none; }
svg .umb2.on { fill: rgba(0, 0, 0, 0.85); stroke: none; }
svg .ant.on { fill: rgba(255, 200, 100, 0.35); }
svg.is-partial .umb2 { fill: rgba(0, 0, 0, 0.18); stroke: rgba(255, 255, 255, 0.35); stroke-dasharray: 4 4; }
svg.is-partial .umb2.on { opacity: 0; }
svg .c-pen { fill: rgba(150, 165, 210, 0.14); stroke: rgba(180, 195, 240, 0.45); stroke-dasharray: 5 5; }
svg .c-umb { fill: rgba(90, 20, 10, 0.5); stroke: rgba(255, 140, 110, 0.55); }
svg .c-x { stroke: rgba(255, 255, 255, 0.4); stroke-width: 1.5; }
svg .c-path { stroke: var(--gold); stroke-opacity: 0.6; stroke-width: 1.5; stroke-dasharray: 6 6; }
svg .land ellipse { fill: rgba(110, 190, 120, 0.55); }
svg .lat { stroke: rgba(255, 255, 255, 0.15); fill: none; }
svg .mshadow { fill: rgba(0, 0, 0, 0.5); }
svg .ecl-line { stroke: rgba(160, 190, 255, 0.45); stroke-width: 1.2; stroke-dasharray: 3 5; }
svg .node { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 4 4; }
svg .m-pen { fill: rgba(20, 22, 40, 0.4); }
svg .m-umb { fill: #9c3a1f; }
svg .ln { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.2; stroke-dasharray: 4 4; }

/* なぜ毎月起きない？ */
.et-top { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.et-sw { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 800; font-size: 15px; }
.et-banner { margin: 0; font-weight: 800; font-size: 15.5px; color: var(--tx2); min-height: 1.6em; flex: 1 1 260px; text-align: right; }
.et-banner.hit { color: var(--gold); }
@media (max-width: 700px) { .et-banner { text-align: left; } }
.ecl-tilt svg { display: block; width: 100%; height: auto; background: rgba(2, 4, 14, 0.66); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.et-count { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font-size: 15px; }
.et-count > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.et-count b { font-family: var(--ff-x); font-size: 22px; color: #fff; margin-left: 2px; }
.et-count b.hl { color: var(--gold); }
.et-count small { color: var(--mut); margin-right: 6px; }
.et-log { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.et-log li { font-size: 13.5px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.et-log li b { margin-right: 4px; color: var(--tx2); }
.et-log li.lu { background: rgba(255, 120, 80, 0.16); }
.et-log li.so { background: rgba(255, 210, 122, 0.16); }
.et-log li.mut { color: var(--mut); }
.ecl-pt h3 { font-size: 17.5px; }
.ecl-pt p { margin: 0; }

/* 入口のちがいの図 */
.eh-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.eh-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.eh-mini p { margin: 6px 4px 0; font-size: 14.5px; font-weight: 800; color: var(--gold); line-height: 1.5; }
@media (max-width: 860px) { .eh-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .eh-mini figcaption { font-size: 13px; } .eh-mini p { font-size: 13px; } }
.tbl-x, .ecl-tbl-w { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; background: var(--panel); box-shadow: var(--glow); }
.ecl-cmp .tbl th:first-child { white-space: nowrap; }
.ecl-cmp .tbl td, .ecl-cmp .tbl th { font-size: 15px; }
.ecl-go a.panel { display: flex; flex-direction: column; gap: 12px; color: var(--tx); text-decoration: none; transition: transform 0.2s; }
.ecl-go a.panel:hover { transform: translateY(-3px); }
.eg-t { display: flex; flex-direction: column; gap: 2px; }
.eg-t small { font-family: var(--ff-x); letter-spacing: 0.2em; color: var(--cyan); font-size: 12px; }
.eg-t b { font-size: 22px; }
.eg-t span { color: var(--tx2); font-size: 15px; }

/* 図（赤くなるわけ・金環と皆既） */
.ecl-fig { margin: 0; background: rgba(2, 4, 14, 0.66); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); padding: 10px; }
.ecl-fig svg { display: block; width: 100%; height: auto; }
.ecl-fig figcaption { font-size: 13.5px; color: var(--mut); margin: 6px 4px 0; line-height: 1.6; }
.rf-ray path { fill: none; stroke-width: 3; stroke-dasharray: 14 10; animation: rfFlow 1.6s linear infinite; }
.rf-red path { stroke: #ff7a4a; }
.rf-wht path { stroke: #ffe9b0; stroke-opacity: 0.6; }
.rf-blue path { stroke: #6fb6ff; stroke-width: 3; stroke-linecap: round; }
@keyframes rfFlow { to { stroke-dashoffset: -48; } }
@media (prefers-reduced-motion: reduce) { .rf-ray path { animation: none; } }
.ecl-why { align-items: center; }
.ecl-why .panel p:last-child { margin-bottom: 0; }

/* 種類のカード */
.ecl-types .panel { display: flex; flex-direction: column; gap: 10px; }
.ecl-types .ph { border-radius: 14px; }
.ecl-types h3 { margin: 4px 0 0; font-size: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ecl-types h3 small { font-size: 13.5px; color: var(--cyan); font-weight: 700; }
.ecl-types p { margin: 0; font-size: 16px; }
.ecl-pen, .ecl-ann { aspect-ratio: 3 / 2; border-radius: 14px; background: radial-gradient(circle at 50% 50%, #0d1430, #02040c); display: grid; place-items: center; box-shadow: var(--sh); }
.ecl-pen i { width: 42%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 70% 40%, #d9d6cc 0%, #b7b3a8 45%, #6f6a62 100%); box-shadow: 0 0 30px rgba(220, 230, 255, 0.2); }
.ecl-ann i { width: 40%; aspect-ratio: 1; border-radius: 50%; background: #07080f; box-shadow: 0 0 0 7px #fff3c4, 0 0 0 9px #ffd27a, 0 0 40px 14px rgba(255, 220, 140, 0.55); }

/* 400倍 */
.ecl-400 h3 { font-size: clamp(18px, 2.2vw, 22px); }
.ecl-400 h3 b { color: var(--gold); }
.e4-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0; }
.e4-row > div { display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 8px 14px; box-shadow: inset 0 0 0 1px var(--line); }
.e4-row span { font-size: 13px; color: var(--mut); }
.e4-row b { font-size: 18px; }
.e4-row i { font-style: normal; font-weight: 900; color: var(--mut); }
.e4-row .e4-ans { background: rgba(255, 210, 122, 0.14); }
.e4-row .e4-ans b { color: var(--gold); font-size: 22px; }

/* 安全 */
.ecl-safe { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; background: linear-gradient(135deg, rgba(255, 90, 60, 0.22), rgba(255, 180, 60, 0.14)); box-shadow: inset 0 0 0 2px rgba(255, 140, 90, 0.7), 0 10px 40px rgba(255, 90, 60, 0.18); }
.ecl-safe .es-ic { font-size: 34px; line-height: 1; flex: none; }
.ecl-safe b { color: #fff; }
.ecl-safe > div { display: flex; flex-direction: column; gap: 4px; }
.ecl-safe > div > b { font-size: clamp(17px, 2vw, 20px); color: #ffd9a0; }
.ecl-safe span { font-size: 15.5px; color: var(--tx); line-height: 1.8; }
.ecl-ul { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.ecl-ul.ok li::marker { color: var(--green); }
.ecl-ul.ng li::marker { color: var(--red); }
.ecl-safe-ph { align-items: start; }

/* 英語・FAQ・参考 */
.ecl-terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.et-i { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.et-i b { font-size: 18px; color: #fff; }
.et-i span { color: var(--gold); font-weight: 800; font-size: 15.5px; }
.et-i small { color: var(--mut); font-size: 13.5px; line-height: 1.6; }
.ecl-phr { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ecl-phr li { display: flex; flex-direction: column; }
.ecl-phr span { font-size: 17px; color: #fff; }
.ecl-phr small { color: var(--tx2); font-size: 14.5px; }
.ecl-faq { display: flex; flex-direction: column; gap: 10px; }
.ecl-faq details { padding: 14px 18px; }
.ecl-faq summary { cursor: pointer; font-weight: 800; font-size: 16.5px; list-style: none; padding-left: 28px; position: relative; }
.ecl-faq summary::-webkit-details-marker { display: none; }
.ecl-faq summary::before { content: 'Q'; position: absolute; left: 0; top: 0; font-family: var(--ff-x); color: var(--gold); }
.ecl-faq details[open] summary { margin-bottom: 8px; }
.ecl-faq p { margin: 0; font-size: 16px; color: var(--tx2); }
.ecl-refs ul { margin: 0 0 10px; padding-left: 1.2em; font-size: 15px; }
.ecl-rel { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-top: 12px; }
.ecl-rel a { display: flex; flex-direction: column; gap: 4px; color: var(--tx); text-decoration: none; padding: 16px 18px; transition: transform 0.2s; }
.ecl-rel a:hover { transform: translateY(-2px); }
.ecl-rel b { font-size: 16.5px; }
.ecl-rel span { font-size: 14px; color: var(--mut); line-height: 1.6; }

/* 進み方 */
.ecl-flow { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; counter-reset: f; }
.ecl-flow li { counter-increment: f; position: relative; padding: 14px 14px 14px 46px; border-radius: 16px; background: var(--panel); box-shadow: var(--glow); display: flex; flex-direction: column; gap: 2px; }
.ecl-flow li::before { content: counter(f); position: absolute; left: 12px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: grid; place-items: center; font-family: var(--ff-x); font-size: 13px; }
.ecl-flow li.red::before { background: #a8402a; }
.ecl-flow li.gold::before { background: var(--gold2); color: #2a1600; }
.ecl-flow b { font-size: 15.5px; }
.ecl-flow span { font-size: 14px; color: var(--tx2); line-height: 1.65; }
.ecl-flow.sm { grid-template-columns: minmax(0, 1fr); margin: 0; }
.ecl-flow.sm li { background: rgba(255, 255, 255, 0.04); box-shadow: none; }

/* 一覧の表 */
.ecl-tbl { min-width: 620px; }
.ecl-tbl td { font-size: 15px; line-height: 1.6; }
.ecl-tbl td small { display: block; color: var(--mut); font-size: 13px; }
.ecl-tbl tr.past td { opacity: 0.5; }
.ecl-tbl tr.jp:not(.past) { background: rgba(255, 210, 122, 0.06); }
.ecl-tbl .ok { color: var(--green); }
.ecl-tbl .ok2 { color: #b8ffd9; }
.ecl-tbl .no { color: var(--mut); }
.ecl-tbl .pst { color: var(--mut); }
.ecl-tag { display: inline-block; white-space: nowrap; font-size: 13.5px; font-weight: 800; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.ecl-tag.t-total { background: rgba(255, 110, 80, 0.22); color: #ffb39c; }
.ecl-tag.t-annular, .ecl-tag.t-hybrid { background: rgba(255, 210, 122, 0.2); color: var(--gold); }
.ecl-tag.t-partial { background: rgba(120, 170, 255, 0.18); color: #bcd4ff; }
.ecl-tag.t-penumbral { background: rgba(255, 255, 255, 0.08); color: var(--mut); }
.ecl-big { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-top: 12px; }
.ecl-big .panel { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ecl-big b { font-size: 19px; }
.ecl-big span:last-child { font-size: 14.5px; color: var(--tx2); line-height: 1.7; }
.ecl-tip { display: flex; gap: 14px; align-items: flex-start; }
.ecl-tip img { flex: none; }
.ecl-tip p { margin: 0; }
@media (max-width: 480px) { .ecl-tip img { width: 52px; height: 52px; } }
/* スマホ：横長の図の文字を大きく */
@media (max-width: 600px) {
  .es-space svg .t, .eh-space svg .t, .ecl-tilt svg .t, .ecl-fig svg .t { font-size: 30px; }
  .es-space svg .t.s, .eh-space svg .t.s, .ecl-tilt svg .t.s, .ecl-fig svg .t.s { font-size: 25px; }
  .eh-space svg .t.big { font-size: 36px; }
  .ecl-tilt svg .t.xs { font-size: 19px; }
  .es-cap { min-height: 0; }
}