/* =====================================================================
   components.css — the shared component library
   ---------------------------------------------------------------------
   Loaded on every page after base.css (tokens) and layout.css (layout).
   Twelve components, each used on more than one page. A block that exists
   on one page only stays in that page's stylesheet — this file is not a
   place for one-offs, and it should stay short enough to read in one go.

     1. Card            .card  .card--tint  .card--link
     2. Expandable card [data-xcard]  .xcard-toggle  .xcard-detail
     3. Detail dialog   .dialog — built once by js/main.js, on first use
     4. FAQ             .faq-list  .faq-item
     5. Breadcrumb      .breadcrumb
     6. Arrow link      .link-arrow
     7. Keyword         .keyword
     8. Pill            .pill
     9. Note            .note  (.stat-note is the legal 打消し表示 twin)
    10. Fact sheet      .facts  .facts-item
    11. Data table      .table-wrap  .table
    12. Callout         .callout  .callout-label

   Every size, space and colour comes from base.css. Reference and usage
   rules: docs/design-system.md · live examples: /design-system/.
   ===================================================================== */


/* =====================================================================
   1. CARD
   One white surface with the warm hairline, --r-lg and --shadow-sm.
   --tint   the cream variant, for cards that sit on a white band
            (it flips to white on a cream band, so it never disappears).
   --link   a card that is itself a control — it links somewhere or opens
            the dialog. Its frame and glow ring live on pseudo-elements so
            the hover can grow the frame without moving the text.
            --card-glow picks the ring's hue (amber by default).
   Parts, all optional, in this order:
     .card-media > img  · .card-body (the column under a picture)
     .card-icon · .card-num · .card-title · .card-text
     .card-foot (pinned to the bottom)
   ===================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--pad-card);
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  color: var(--text-main);
}
.card--tint { background: var(--bg-cream); box-shadow: none; }
.section-alt .card--tint { background: var(--bg-white); }

.card-media {
  position: relative;
  margin: calc(var(--pad-card) * -1) calc(var(--pad-card) * -1) var(--pad-card);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-warm);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-body {
  position: relative;          /* the expand toggle's corner, under the picture */
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-4);
  border-radius: 12px;
  background: rgba(0, 174, 239, 0.10);
  color: var(--primary);
}
.card-icon svg { width: 24px; height: 24px; }
.card-num {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-en);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent);
}
.card-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
  color: var(--text-main);
  text-wrap: balance;
  word-break: auto-phrase;
}
.card-text {
  margin: 0;
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--text-light);
}
.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--border-warm);
}
/* The site-wide 英検® recipe, so a sup never adds leading to a card line */
.card sup,
.dialog sup,
.faq-item sup {
  font-size: 0.6em;
  vertical-align: baseline;
  position: relative;
  top: -0.45em;
  line-height: 0;
}

/* ---- Interactive card ---- */
@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes card-glow {
  to { --glow-angle: 360deg; }
}
.card--link {
  --card-glow: 245, 158, 11;
  isolation: isolate;                 /* contains the z-index:-1 frame */
  background: none;
  border: 0;                          /* the frame below draws it, on the box edge */
  box-shadow: none;
  cursor: pointer;
}
.card--link:hover { opacity: 1; }
.card--link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  border-radius: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease-card);
}
.card--link.card--tint::after { background: var(--bg-cream); box-shadow: none; }
.section-alt .card--link.card--tint::after { background: var(--bg-white); }
.card--link::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 3;                         /* above the media, so the ring is never covered */
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--glow-angle),
    transparent 0deg,
    transparent 240deg,
    rgba(var(--card-glow), 0.07) 285deg,
    rgba(var(--card-glow), 0.22) 320deg,
    rgba(var(--card-glow), 0.07) 355deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.3s var(--ease-card);
  pointer-events: none;
}
.card--link:hover::after,
.card--link:hover::before,
.card--link:focus-within::after,
.card--link:focus-within::before { transform: scale(1.008); }
.card--link:hover::before,
.card--link:focus-within::before {
  opacity: 1;
  animation: card-glow 10s linear infinite;
}
/* The media carries the frame's edge itself (its image would otherwise
   paint over the frame's 1px) and grows from its bottom edge, in step with
   the frame growing from the card's centre. */
.card--link .card-media {
  transform-origin: 50% 100%;
  transition: transform 0.3s var(--ease-card);
}
.card--link .card-media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid var(--border-warm);
  border-bottom: 0;
  border-radius: inherit;
  pointer-events: none;
}
.card--link:hover .card-media,
.card--link:focus-within .card-media { transform: scale(1.008); }


/* =====================================================================
   2. EXPANDABLE CARD
   A card that shows the important part and keeps the detail one tap
   away. Hovering the card grows its expand icon — the two arrows push
   apart — so the reader knows it opens; a click anywhere on the card (or
   Enter/Space on the icon) opens the detail dialog.

     <article class="card card--link" data-xcard>
       <div class="card-media"><img src="…" alt="…" data-xcard-media></div>   optional
       <button type="button" class="xcard-toggle" aria-label="〇〇の詳細を見る">
         <svg viewBox="0 0 24 24" …><path class="arrow-tr" d="M14 4h6v6M20 4l-6 6"/>
                                    <path class="arrow-bl" d="M4 14v6h6M4 20l6-6"/></svg>
       </button>
       <h3 class="card-title" data-xcard-title>…</h3>
       <p class="card-text">the one-sentence summary</p>
       <div class="xcard-detail" data-xcard-detail hidden>…the detail…</div>
     </article>

   The toggle sits in the top-right corner of its nearest positioned
   ancestor; the card title beside it reserves the corner. Any element can
   be the trigger — a list row works the same way (see /app/).
   ===================================================================== */
[data-xcard] { cursor: pointer; }
.xcard-toggle {
  position: absolute;
  top: var(--pad-card);
  right: var(--pad-card);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: rgba(245, 158, 11, 0.14);
  color: var(--accent);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.3s var(--ease-card), color 0.3s var(--ease-card), transform 0.3s var(--ease-card);
}
.xcard-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s var(--ease-card);
}
.xcard-toggle svg path { transition: transform 0.3s var(--ease-card); }
[data-xcard]:hover .xcard-toggle,
.xcard-toggle:hover,
.xcard-toggle:focus-visible {
  background: var(--accent);
  color: #fff;
  transform: scale(1.04);
}
[data-xcard]:hover .xcard-toggle svg,
.xcard-toggle:hover svg { transform: scale(1.06); }
/* The arrows push apart — the icon "expands", foreshadowing the dialog */
[data-xcard]:hover .xcard-toggle .arrow-tr,
.xcard-toggle:hover .arrow-tr,
.xcard-toggle:focus-visible .arrow-tr { transform: translate(2.5px, -2.5px); }
[data-xcard]:hover .xcard-toggle .arrow-bl,
.xcard-toggle:hover .arrow-bl,
.xcard-toggle:focus-visible .arrow-bl { transform: translate(-2.5px, 2.5px); }
.xcard-toggle:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
/* Under a picture the toggle rides the first line of the card body */
.card-body > .xcard-toggle { top: -0.5rem; right: 0; }
/* A title that starts beside the toggle leaves its corner free */
.xcard-toggle + .card-title,
.xcard-toggle + .card-num + .card-title { padding-right: 3rem; }
/* A compact row trigger (list of features): the icon sits in the row */
.xcard-toggle--inline {
  position: static;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
}
.xcard-toggle--inline svg { width: 15px; height: 15px; }
.xcard-detail[hidden] { display: none; }


/* =====================================================================
   3. DETAIL DIALOG
   One dialog per page, built by js/main.js the first time an expandable
   card opens. Centred panel on desktop; bottom sheet with a drag handle
   (swipe down to dismiss) at ≤640px. Focus is trapped while open and
   returns to the card on close; Esc, the backdrop and × all close it.
   Content helpers for the detail markup:
     .dialog-callout (POINT)  · .dialog-label  · .dialog-list
     .dialog-stats > .dialog-stat (.dialog-stat-num + .dialog-stat-label)
     .dialog-badges > .pill
   ===================================================================== */
.dialog {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  animation: dialog-fade 0.18s ease-out;
}
.dialog[hidden] { display: none; }
@keyframes dialog-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 14, 0.55);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.dialog-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 2.5rem);
  overflow: hidden;
  background: var(--bg-white);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  animation: dialog-rise 0.22s ease-out;
}
@keyframes dialog-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dialog-scroll { flex: 1; overflow-y: auto; }
.dialog-handle,
.dialog-fade { display: none; }
.dialog-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-main);
  border: 1px solid rgba(35, 25, 15, 0.08);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(35, 25, 15, 0.12);
  cursor: pointer;
  transition: background var(--transition);
}
.dialog-close svg { width: 16px; height: 16px; }
.dialog-close:hover { background: #fff; }
.dialog-close:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.dialog-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-warm);
}
.dialog-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dialog-media[hidden] { display: none; }
.dialog-content { padding: var(--sp-8) var(--sp-8) var(--sp-8); }
/* No picture: the title clears the floating × (and the handle on phones) */
.dialog-media[hidden] + .dialog-content { padding-top: var(--sp-12); }
.dialog-title {
  margin: 0 0 var(--sp-4);
  padding-right: var(--sp-8);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-head);
  color: var(--text-main);
  text-wrap: balance;
  word-break: auto-phrase;
}
.dialog-media:not([hidden]) + .dialog-content .dialog-title { padding-right: 0; }
.dialog-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-light);
}
.dialog-body p { margin: 0 0 var(--sp-3); text-wrap: pretty; word-break: auto-phrase; }
/* A plain paragraph is running text and fills the line (design-system.md,
   Type rules); a classed line — a label, a caption — and every line of an
   app mockup (.app-mockup: UI copy, chat bubbles, classed or not) keep
   the phrase breaks above. */
.dialog-body p:not([class]):not(.app-mockup *) { text-wrap: wrap; word-break: normal; }
.dialog-body p:last-child { margin-bottom: 0; }
.dialog-body strong,
.dialog-body em { font-style: normal; font-weight: var(--fw-bold); color: var(--text-main); }
body.is-modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .dialog { align-items: flex-end; padding: 0; }
  .dialog-panel {
    max-width: 100%;
    max-height: 88vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    animation: dialog-sheet-rise 0.32s var(--ease-sheet);
  }
  @keyframes dialog-sheet-rise {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .dialog-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    cursor: grab;
    touch-action: none;
  }
  .dialog-handle::before {
    content: '';
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  }
  /* no picture under the handle: draw it in the hairline ink instead */
  .dialog-panel.is-bare .dialog-handle::before { background: var(--border-warm); box-shadow: none; }
  .dialog-fade {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: block;
    height: 5rem;
    background: linear-gradient(to bottom, var(--bg-white) 0%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
  }
  .dialog-close { top: calc(40px + var(--sp-2)); right: var(--sp-4); }   /* clears the handle */
  .dialog-scroll { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .dialog-content { padding: var(--sp-6) var(--sp-5) var(--sp-8); }
  .dialog-media[hidden] + .dialog-content { padding-top: var(--sp-16); }
}

/* ---- Content helpers ---- */
.dialog-callout {
  position: relative;
  margin: var(--sp-6) 0 var(--sp-5);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.09) 0%, rgba(245, 158, 11, 0.03) 100%);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: var(--r-md);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.08);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-bold);
  color: var(--text-main);
}
.dialog-callout::before {
  content: 'POINT';
  position: absolute;
  top: -0.6rem;
  left: var(--sp-5);
  padding: 0.28rem 0.85rem;
  border-radius: var(--r-full);
  background: var(--accent);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
  font-family: var(--font-en);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  font-weight: var(--fw-head);
  letter-spacing: 0.2em;
  color: #fff;
}
.dialog-label {
  display: block;
  margin: var(--sp-8) 0 var(--sp-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  color: var(--accent);
}
.dialog-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-3);
  padding: 0;
  list-style: none;
}
.dialog-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--text-light);
}
.dialog-list li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 0.62em;
  border-radius: 50%;
  background: var(--accent);
}
.dialog-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-3) 0;
}
.dialog-stat {
  flex: 1;
  min-width: 60px;
  padding: var(--sp-3) var(--sp-2);
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-md);
  text-align: center;
}
.dialog-stat-num {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-stat);
  line-height: var(--lh-num);
  font-weight: var(--fw-head);
  letter-spacing: var(--ls-num);
  color: var(--primary);
}
.dialog-stat-num small { font-size: 0.5em; }
.dialog-stat-num--sm { font-size: var(--fs-h2); }   /* four-digit figures: 1,800 · 7,500 */
.dialog-stat-label {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-light);
}
.dialog-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
}


/* =====================================================================
   4. FAQ
   <details> cards: category + No. on top, Caveat "Q." + question + ±
   toggle, the answer under a dashed rule, and an optional closing card
   (.faq-cta). Same recipe on every page that answers questions
   (/, /app/, /free-trial/, /level-guide/, /payment/).
     <div class="faq-list">
       <details class="faq-item">
         <summary class="faq-summary">
           <div class="faq-item-head"><span class="faq-item-tag">…</span><span class="faq-item-index">No. 01</span></div>
           <div class="faq-item-body">
             <span class="faq-item-q-letter font-deco" aria-hidden="true">Q.</span>
             <span class="faq-item-q-text">…</span>
             <span class="faq-item-toggle" aria-hidden="true"><span class="faq-item-toggle-icon">+</span></span>
           </div>
         </summary>
         <div class="faq-answer">
           <span class="faq-item-a-letter font-deco" aria-hidden="true">A.</span>
           <div class="faq-item-a-text"><p>…</p></div>
         </div>
       </details>
     </div>
   ===================================================================== */
.faq-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.faq-item {
  position: relative;
  isolation: isolate;
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.faq-item::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 2;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--glow-angle),
    transparent 0deg,
    transparent 240deg,
    rgba(245, 158, 11, 0.07) 285deg,
    rgba(245, 158, 11, 0.22) 320deg,
    rgba(245, 158, 11, 0.07) 355deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.faq-item:hover::before,
.faq-item[open]::before {
  opacity: 1;
  animation: card-glow 10s linear infinite;
}
.faq-item[open] { box-shadow: var(--shadow-md); }
.faq-summary {
  display: block;
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  list-style: none;
  border-radius: inherit;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary:hover { background: rgba(245, 158, 11, 0.025); }
.faq-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.faq-item-tag {
  position: relative;
  padding-left: 0.95rem;
  font-size: var(--fs-caption);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--text-light);
  white-space: nowrap;
}
.faq-item-tag::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
  transform: translateY(-50%);
}
.faq-item-index {
  font-family: var(--font-en);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent);
  white-space: nowrap;
}
.faq-item-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
}
.faq-item-q-letter,
.faq-item-a-letter {
  display: inline-block;
  flex-shrink: 0;
  font-size: var(--fs-deco-lg);
  line-height: 0.85;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  transform: rotate(-4deg);
}
.faq-item-q-letter { color: var(--accent); align-self: center; }
.faq-item-a-letter { color: var(--primary); align-self: start; margin-top: 0.1rem; }
.faq-item-q-text {
  min-width: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
  color: var(--text-main);
  text-wrap: pretty;
  word-break: auto-phrase;
}
.faq-item-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 174, 239, 0.12);
  color: var(--primary);
  transition: background 0.3s ease, color 0.3s ease;
}
.faq-item-toggle-icon {
  display: inline-block;
  font-size: 1.4rem;   /* ds-allow: a glyph used as an icon, not text */
  font-weight: var(--fw-regular);
  line-height: 1;
  transform-origin: center;
  /* Noto Sans JP's "+" sits ~0.08em below the line box's centre (its
     ascent/descent are asymmetric), so nudge it up to sit in the disc. */
  transform: translateY(-0.08em);
  transition: transform 0.3s ease;
}
.faq-item[open] .faq-item-toggle-icon { transform: translateY(-0.08em) rotate(45deg); }
.faq-item[open] .faq-item-toggle { background: var(--primary); color: #fff; }
.faq-answer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-4);
  margin: 0 var(--sp-6);
  padding: var(--sp-5) 0 var(--sp-6);
  border-top: 1px dashed var(--border-warm);
}
.faq-item-a-text {
  min-width: 0;
  max-width: var(--w-measure);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-light);
  /* running text: it fills the line — no pretty / auto-phrase (Type rules) */
}
.faq-item-a-text p { margin: 0; }
.faq-item-a-text p + p { margin-top: var(--sp-3); }
.faq-item-a-text a {
  color: var(--ink-sky);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq-item-a-text a:hover { opacity: 1; color: var(--text-main); }
@media (max-width: 767px) {
  .faq-summary { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
  .faq-item-body { gap: var(--sp-3); }
  .faq-item-toggle { width: 32px; height: 32px; }
  .faq-item-toggle-icon { font-size: 1.2rem; }   /* ds-allow: icon glyph */
  .faq-answer { margin: 0 var(--sp-5); padding: var(--sp-4) 0 var(--sp-5); gap: var(--sp-3); }
}
/* ≤400px: the Q ornament would take half the question's measure */
@media (max-width: 400px) {
  /* The Q ornament was eating half the question's measure. With it gone the
     row has two children, so the grid drops to two tracks. */
  .faq-item-q-letter { display: none; }
  .faq-item-body { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); }
  /* 14px, so a 13-character phrase (「決めなければいけませんか？」) fits the
     190px question measure at 320 instead of breaking per character. */
  .faq-item-q-text { font-size: var(--fs-body-md); line-height: var(--lh-body-md); }
}
/* The list's closing card: a handwritten "Still have questions?", one
   line, one LINE button.
     <aside class="faq-cta"><p class="faq-cta-heading font-deco" aria-hidden="true">Still have questions?</p>
       <p class="faq-cta-text">その他のご質問は、<em class="keyword">公式LINE</em>で…</p> <a class="btn btn-primary btn-lg">…</a></aside> */
.faq-cta {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-block);
  padding: var(--sp-10) var(--sp-8) var(--sp-8);
  text-align: center;
  background: linear-gradient(135deg, var(--bg-warm) 0%, #fff 70%);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.faq-cta-heading {
  display: inline-block;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-deco);
  line-height: var(--lh-deco);
  font-weight: var(--fw-bold);
  color: var(--accent);
  transform: rotate(-2deg);
}
.faq-cta-text {
  margin-bottom: var(--sp-6);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-main);
}
.faq-cta-break-mobile { display: none; }
@media (max-width: 767px) {
  .faq-cta { padding: var(--sp-8) var(--sp-5); }
  .faq-cta-break-mobile { display: inline; }
}


/* =====================================================================
   5. BREADCRUMB
   The first line of every sub-page hero. Left-aligned; --center for the
   centred heroes (/app/, /payment/).
     <nav class="breadcrumb" aria-label="パンくずリスト"><ol>
       <li><a href="/">ホーム</a></li><li aria-current="page">…</li>
     </ol></nav>
   ===================================================================== */
.breadcrumb { margin: 0 0 var(--sp-5); }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-caption);
  line-height: 1;
  font-weight: var(--fw-bold);
}
.breadcrumb--center ol { justify-content: center; }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-main); }
.breadcrumb li + li::before {
  content: '/';
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}
/* A standalone nav link needs a 24px+ target; the negative margin keeps
   the text where it was. */
.breadcrumb a {
  display: inline-block;
  margin: -0.85rem -0.5rem;
  padding: 0.85rem 0.5rem;
  color: var(--text-light);
  transition: color var(--transition);
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  opacity: 1;
  color: var(--ink-sky);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* =====================================================================
   6. ARROW LINK
   A standalone text link that goes somewhere: bold, ink blue, an arrow
   that nudges right and an underline that draws in on hover. Inside a
   .card--link the card's hover drives it. --sm for card footers.
     <a class="link-arrow" href="…">ストーリーを読む<span class="link-arrow-icon" aria-hidden="true">→</span></a>
   ===================================================================== */
.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0 0 2px;
  background: none;
  border: 0;
  font-family: var(--font-ja);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-bold);
  color: var(--ink-sky);
  white-space: nowrap;
  cursor: pointer;
}
.link-arrow--sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.link-arrow::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.link-arrow-icon {
  display: inline-block;
  transition: transform var(--transition);
}
.link-arrow:hover { opacity: 1; }
.link-arrow:hover::after,
.link-arrow:focus-visible::after,
.card--link:hover .link-arrow::after { transform: scaleX(1); }
.link-arrow:hover .link-arrow-icon,
.link-arrow:focus-visible .link-arrow-icon,
.card--link:hover .link-arrow-icon { transform: translateX(4px); }


/* =====================================================================
   7. KEYWORD
   The ONE phrase per block that is the block's point: brand blue on a
   gold ground. Everything else that needs weight is plain bold in the
   text's own ink. The ground is a background, so a phrase that wraps
   keeps it under both fragments.
     <em class="keyword">無料体験</em>
   ===================================================================== */
.keyword {
  padding: 0 0.1em;
  font-style: normal;
  white-space: nowrap;   /* a keyword lands whole (「枠を / 仮確保」) — keep it short */
  font-weight: var(--fw-bold);
  color: var(--primary);
  background-image: linear-gradient(
    to top,
    transparent 0.08em,
    rgba(245, 158, 11, 0.22) 0.08em,
    rgba(245, 158, 11, 0.22) 0.38em,
    transparent 0.38em
  );
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}


/* =====================================================================
   8. PILL
   A short label on a tint: a category, an audience, a badge.
   Sky by default; --amber for the warm variant.
     <span class="pill">中学受験</span>
   ===================================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2rem 0.75rem;
  border-radius: var(--r-full);
  background: rgba(0, 174, 239, 0.10);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--ink-sky);
  white-space: nowrap;
}
.pill--amber { background: rgba(245, 158, 11, 0.14); color: var(--ink-amber); }


/* =====================================================================
   9. NOTE
   Fine print: a ※ note, a disclaimer, a caption under a table. One size
   and one ink everywhere. .stat-note is the same recipe for the 景品表示法
   打消し表示 under the pass-rate claims (partials/cta.php, the hero).
     <p class="note">※ …</p>   · .note--center to centre it
   ===================================================================== */
.note,
.stat-note {
  max-width: var(--w-narrow);
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: 0.01em;
  color: var(--ink-quiet);
  /* A 出典 line runs to three or four lines on a phone: running text, no
     phrase breaks (Type rules). Its links end in a closing bracket
     (…」）): Chromium's default text-spacing-trim trims that bracket at a
     line end, and the line then breaks far earlier — 6 to 23em short.
     space-all keeps full-width punctuation full-width. */
  text-spacing-trim: space-all;
}
.note--center,
.stat-note.text-center { margin-inline: auto; text-align: center; }


/* =====================================================================
   10. FACT SHEET
   A page's key figures in ONE ruled panel — a spec sheet, not a row of
   cards. Each cell: a small label, the figure in Montserrat with its unit
   in ink, and at most one quiet note. The cells are divided by the warm
   hairline (each cell draws its own top and left rule outside itself;
   the panel's overflow clips the ones that would double the frame), so
   the grid can reflow to any column count without a stray border.
   Four across → two (≤767).
     <dl class="facts">
       <div class="facts-item">
         <dt class="facts-label">一次試験の合格点</dt>
         <dd class="facts-value"><span class="facts-num">1,520</span><span class="facts-unit">点</span></dd>
         <dd class="facts-note">満点1,950・毎回固定</dd>
       </div>
       <div class="facts-item">
         <dt class="facts-label">レベルの目安</dt>
         <dd class="facts-value"><span class="facts-text">高校卒業程度</span></dd>
       </div>
     </dl>
   A figure is .facts-num (an official number only) + its unit (点・円・万人);
   a maximum or context goes in the note, never a ／ unit. A value in words
   or a status (非公表, 筆記85分) is .facts-text. The unit never leaves its
   figure, and a text value takes the figure's line box, so the notes in a
   row start at one height. Below ~386px a text value shrinks with the
   window so a date still fits a two-up cell on one line.
   ===================================================================== */
.facts {
  --facts-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--facts-cols), minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
/* Each cell spans three of the panel's row tracks (label / value / note)
   as a subgrid, so the values and notes in a row line up even when one
   label wraps to two lines. Without subgrid it stacks the same way. */
.facts-item {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
  row-gap: var(--sp-1);
  min-width: 0;
  margin: 0;
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  box-shadow: -1px 0 0 var(--border-warm), 0 -1px 0 var(--border-warm);
}
.facts-label {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-bold);
  color: var(--text-light);
  word-break: auto-phrase;
  overflow-wrap: anywhere;   /* a label longer than a narrow cell breaks, never clips */
}
.facts-value {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0 0.12em;
  margin: 0;
}
.facts-num {
  font-family: var(--font-en);
  font-size: var(--fs-stat);
  line-height: var(--lh-num);
  font-weight: var(--fw-head);
  letter-spacing: var(--ls-num);
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}
.facts-unit {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-num);   /* inside the figure's line box, so it can't deepen the row */
  font-weight: var(--fw-bold);
  color: var(--text-main);
}
.facts-text {
  /* narrow-phone guard: a two-up cell at 320px is ~100px wide, and a date
     (1月24日（日）) must still fit it on one line */
  font-size: min(var(--fs-h3), 4.4vw);
  line-height: calc(var(--fs-stat) * var(--lh-num));   /* = the figure's line box */
  font-weight: var(--fw-bold);
  color: var(--text-main);
  word-break: auto-phrase;
}
.facts-note {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-quiet);
  /* phrase breaks keep a word whole in the narrow cell; no pretty — the
     note runs to three lines on a phone, and WebKit's pretty would shorten
     each of them (Type rules) */
  word-break: auto-phrase;
}
@media (max-width: 767px) {
  .facts { --facts-cols: 2; }
  .facts-item { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
}


/* =====================================================================
   11. DATA TABLE
   Figures that are read across and down: exam sections, scores, dates,
   fees, a grade compared with its neighbours. One recipe everywhere:
   hairline rows (no zebra, no vertical rules), a cream head row in quiet
   ink, row headers in bold, numerals right-aligned in tabular figures.
   A two-column table (label → value) reads across instead: its values,
   figures included, sit left beside their labels, and when the values
   are figures the labels take 45% — automatic, no class. .num goes on a
   column whose every body cell is a figure (and on its head), never on
   single cells of a column that also holds words. The wrap scrolls
   sideways on a phone and shows a soft edge shadow only while there is
   more to scroll; --wide keeps a many-column table at a legible width
   instead of crushing it, and on a phone holds its row-header column in
   place while the rest scrolls.
     <div class="table-wrap">
       <table class="table [table--wide]">
         <caption class="…visually hidden…">…</caption>      optional
         <thead><tr><th scope="col">…</th>…</tr></thead>
         <tbody>
           <tr class="is-current"><th scope="row">2級</th><td class="num">1,520<span class="table-sub">満点1,950</span></td>…</tr>
         </tbody>
       </table>
     </div>
   The wrap is made focusable and a named region (tabindex="0",
   role="region") by script only while it actually scrolls; an optional
   visually-hidden <caption> names the table.
   .is-current (an amber rule and tint) goes only on this page's own row
   in a cross-grade table, or on the next exam round — nowhere else. In a
   schedule with one column per round it goes on that column's head and
   cells: the head takes the rule on top, the cells the tint.
   A cell's secondary line is <span class="table-sub">; a maximum is
   written there in words (満点1,800), never as ／1,800.
   The source goes under the wrap as a .note.
   ===================================================================== */
.table-wrap {
  position: relative;
  max-width: 100%;
  margin: var(--sp-6) 0 0;
  overflow-x: auto;
  border: 1px solid var(--border-warm);
  border-radius: var(--r-md);
  background:
    linear-gradient(to right, var(--bg-white) 40%, rgba(255, 255, 255, 0)) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--bg-white) 40%, rgba(255, 255, 255, 0)) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(35, 25, 15, 0.12), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(35, 25, 15, 0.12), transparent) right / 12px 100% no-repeat scroll,
    var(--bg-white);
  -webkit-overflow-scrolling: touch;
}
.table-wrap:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--text-main);
}
.table--wide { min-width: 40rem; }
.table caption {
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  caption-side: top;
  text-align: left;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-bold);
  color: var(--text-main);
  border-bottom: 1px solid var(--border-warm);
}
.table th,
.table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-warm);
  word-break: auto-phrase;
}
.table tr > :first-child { padding-left: var(--sp-5); }
.table tr > :last-child { padding-right: var(--sp-5); }
.table thead th {
  background: var(--bg-cream);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-bold);
  color: var(--text-light);
  vertical-align: bottom;
  white-space: nowrap;
}
.table tbody th { font-weight: var(--fw-bold); white-space: nowrap; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.table-sub {
  display: block;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-regular);
  color: var(--ink-quiet);
}
/* label → value: a two-column table of figures keeps each figure beside
   its label (a label → sentence table keeps the automatic widths, so its
   prose column stays wide) */
.table:not(:has(tr > :nth-child(3))):has(td.num) tbody th { width: 45%; }
.table:not(:has(tr > :nth-child(3))) .num { text-align: left; }
.table tr.is-current > * { background: rgba(245, 158, 11, 0.08); }
.table tr.is-current > :first-child { box-shadow: inset 3px 0 0 var(--accent); }
/* the same mark on a column (a schedule with one column per round):
   the head keeps its cream and takes the amber rule on top */
.table td.is-current { background: rgba(245, 158, 11, 0.08); }
.table thead th.is-current { box-shadow: inset 0 3px 0 var(--accent); color: var(--text-main); }
.table a {
  color: var(--ink-sky);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.table sup,
.facts sup {
  font-size: 0.6em;
  vertical-align: baseline;
  position: relative;
  top: -0.45em;
  line-height: 0;
}
@media (max-width: 767px) {
  .table th,
  .table td { padding: var(--sp-3); }
  .table tr > :first-child { padding-left: var(--sp-4); }
  .table tr > :last-child { padding-right: var(--sp-4); }
  /* A --wide table scrolls here: its row-header column stays put, so a
     date or a score scrolled into view keeps its label beside it. Opaque
     (a tint is laid over white), parted from the data by one hairline. */
  .table--wide tr > th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-white);
    box-shadow: inset -1px 0 0 var(--border-warm);
  }
  .table--wide thead tr > th:first-child { background: var(--bg-cream); }
  .table--wide tr.is-current > th:first-child {
    background: linear-gradient(rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.08)), var(--bg-white);
    box-shadow: inset 3px 0 0 var(--accent), inset -1px 0 0 var(--border-warm);
  }
}
/* A phone: a table that almost fits should fit, not scroll a few pixels.
   Its headers may take two lines and its cells wrap, both at phrase
   breaks only (a word or a figure is never split, so a column never
   shrinks below its longest phrase), and the padding closes up; figures
   (.num) never break at all. A --wide table scrolls anyway, so its
   headers stay on one line. */
@media (max-width: 480px) {
  .table:not(.table--wide) thead th,
  .table:not(.table--wide) tbody th { white-space: normal; word-break: auto-phrase; }
  .table:not(.table--wide) tbody th { min-width: 5em; }   /* padding included: 理由1 never parts from its digit */
  /* phrase breaks size the columns (a word is never split); no pretty — a
     narrow cell can run to six lines, and WebKit's pretty would shorten
     each of them (Type rules) */
  .table:not(.table--wide) td:not(.num) { word-break: auto-phrase; }
  .table th,
  .table td { padding-inline: var(--sp-2); }
  .table tr > :first-child { padding-left: var(--sp-3); }
  .table tr > :last-child { padding-right: var(--sp-3); }
}


/* =====================================================================
   12. CALLOUT
   One aside inside running text that a reader must not miss: a warning
   or a deadline, at most two per chapter. A quotation is a <blockquote>,
   not a callout. A warm panel with its label set into the top rule, like
   a fieldset legend — the same idea as the dialog's POINT tab, quietened
   for prose. The label is real text (注意, 締切), so it is read out.
     <aside class="callout">
       <p class="callout-label">注意</p>
       <p>要約の語数が指定の範囲から外れると、大きく減点されることがあります。</p>
     </aside>
   The label masks only the rule: its upper half takes the band's ground
   (white, or cream in .section-alt), its lower half the panel's warm one.
   ===================================================================== */
.callout {
  position: relative;
  margin: var(--sp-10) 0 var(--sp-6);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  background: var(--bg-warm);
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: var(--r-md);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-main);
}
.callout > .callout-label {
  position: absolute;
  top: 0;
  left: var(--sp-4);
  margin: 0;
  padding: 0 var(--sp-2);
  transform: translateY(-50%);
  background: linear-gradient(to bottom, var(--bg-white) 50%, var(--bg-warm) 50%);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--ink-amber);
}
.section-alt .callout > .callout-label { background: linear-gradient(to bottom, var(--bg-cream) 50%, var(--bg-warm) 50%); }
.callout p { margin: 0; }   /* running text: no pretty (Type rules) */
.callout p + p,
.callout p + ul,
.callout ul + p { margin-top: var(--sp-2); }
.callout ul { margin: 0; padding-left: 1.2em; }
.callout strong,
.callout em { font-style: normal; font-weight: var(--fw-bold); }
@media (max-width: 767px) {
  .callout { padding: var(--sp-5) var(--sp-5) var(--sp-4); }
}


/* ---- Motion ---- */
@media (prefers-reduced-motion: reduce) {
  .card--link::after,
  .card--link::before,
  .card--link .card-media,
  .xcard-toggle,
  .xcard-toggle svg,
  .xcard-toggle svg path,
  .link-arrow::after,
  .link-arrow-icon { transition: none; }
  .card--link:hover::after,
  .card--link:hover::before,
  .card--link:focus-within::after,
  .card--link:focus-within::before,
  .card--link:hover .card-media,
  .card--link:focus-within .card-media { transform: none; }
  .card--link:hover::before,
  .card--link:focus-within::before,
  .faq-item:hover::before,
  .faq-item[open]::before { animation: none; }
  .dialog,
  .dialog-panel { animation: none; }
}