/* WATARI：国旗で塗った世界地図。明るい水色の海、白い陸と南極、国旗の赤と紺、紺のリボンの見出し */
:root {
  --bg: #f4fbfe;
  --surface: #ffffff;
  --surface-2: #f7f4ee;
  --ink: #2f2a28;
  --muted: #847b74;
  --line: #ece6dc;
  --accent: #1d3f8f;      /* 紺 */
  --accent-ink: #ffffff;
  --hot: #d9667a;
  --ok: #5aa27a;
  --badge: #e63946;
  --pmark: #c9a24a;
  --side-dark: #1d3f8f;
  --side-ink: #2f2a28;
  --side-pill: rgba(255, 255, 255, .9);
  --human-bg: #fbf3e2;
  --human-line: #c9a24a;
  --human-node: #ead39b;
  --bar-ink: #ead39b;
  --radius: 16px;
  --font-head: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  /* メニュー：海の水色に、白い陸と、ところどころの国旗の色 */
  --side:
    radial-gradient(40% 14% at 30% 8%, rgba(255, 255, 255, .95), transparent 70%),
    radial-gradient(50% 16% at 80% 40%, rgba(255, 255, 255, .85), transparent 70%),
    radial-gradient(40% 12% at 20% 72%, rgba(255, 255, 255, .8), transparent 70%),
    linear-gradient(180deg, #a9e1f2, #7fcbe6);
}
body.resident { background: radial-gradient(50% 40% at 100% 0%, rgba(127, 203, 230, .3), transparent 70%), #f4fbfe; }
.r-side { box-shadow: 0 0 0 1px #f0e6d2, 0 24px 50px -20px rgba(29, 63, 143, .35); }
.r-ptag { border: 0; background: #1d3f8f; color: #fff; font-family: "Playfair Display", serif; letter-spacing: .14em; }
.r-menu a.on { background: #fff; color: #1d3f8f; box-shadow: 0 8px 18px -10px rgba(142, 42, 60, .5); }
.r-menu a.on .ic { color: #1d3f8f; }
.r-pill.dark { background: #1d3f8f; }
.r-head h1 { font-weight: 900; }
.r-crumb::before { content: "Study Abroad"; font-family: "Playfair Display", serif; font-style: italic; color: #1d3f8f; margin-right: 8px; }
.r-card h3 .ic, .r-note .ic { color: #c9a24a; }
.r-kic { background: #fbf3e2; color: #1d3f8f; }
.r-lead { border-left: 5px solid #c9a24a; }
.r-btn.primary { background: #1d3f8f; color: #fff; }
.r-chat-head { background: linear-gradient(135deg, #1d3f8f, #e63946); color: #fff; }
.r-chat-x { color: #fff; }

/* ── 留学マップ（国旗の世界地図） ── */
.wt-wrap { display: grid; gap: 16px; }
@media (min-width: 1180px) { .wt-wrap { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; } }
.wt-main { display: grid; gap: 12px; min-width: 0; }
.wt-map { position: relative; margin: 0; padding: 10px; border-radius: 16px; background: #8fd3e8; box-shadow: 0 0 0 6px #fff, 0 24px 44px -26px rgba(20, 70, 110, .6); }
.wt-ribbon { position: absolute; z-index: 2; left: 50%; top: 10px; transform: translateX(-50%); margin: 0; padding: 5px 26px; white-space: nowrap; font-family: "Playfair Display", serif; font-style: italic; font-weight: 700; font-size: 17px; letter-spacing: .08em; color: #fff; background: #1d3f8f; border-radius: 99px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); }
.wt-ribbon span { font-family: "Zen Maru Gothic", sans-serif; font-style: normal; font-size: 13px; }
.wt-map svg { display: block; width: 100%; height: auto; font-family: "Zen Maru Gothic", sans-serif; }
.wt-loading { fill: #1d3f8f; font-size: 16px; font-weight: 700; }
.wt-sea { fill: #8fd3e8; }
.wt-ocean { fill: #fff; font-size: 13px; font-weight: 900; letter-spacing: .12em; opacity: .85; }
.wt-c { fill: #fbfdfe; stroke: #9cc7d8; stroke-width: .5; }
.wt-c.ice { fill: #ffffff; stroke: #d7eef6; }
.wt-c.flag { stroke: #fff; stroke-width: .8; }
.wt-c.dest { stroke: #fff; stroke-width: 1.6; filter: url(#wtLift); cursor: pointer; transition: opacity .2s; }
.wt-c.dest:hover { opacity: .85; }
.wt-c.dest.on { stroke: #1d3f8f; stroke-width: 2.4; }
.wt-cn { font-size: 9px; font-weight: 900; fill: #fff; paint-order: stroke; stroke: #1d3f8f; stroke-width: 2.6px; pointer-events: none; }
.wt-cn.big { font-size: 13px; letter-spacing: .04em; }
.wt-route { fill: none; stroke: #1d3f8f; stroke-width: 2; stroke-dasharray: 6 5; opacity: .55; }
.wt-route.on { stroke: #e63946; stroke-width: 3.4; stroke-dasharray: none; opacity: 1; }
.wt-jp circle { fill: #e63946; stroke: #fff; stroke-width: 2.5; }
.wt-jp .halo { fill: rgba(230, 57, 70, .25); stroke: none; }
.wt-pin { cursor: pointer; outline: none; }
.wt-pin path { fill: #e63946; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3)); }
.wt-pin .hole { fill: #fff; }
.wt-pin .ct { font-size: 11px; font-weight: 900; fill: #1d3f8f; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.wt-pin.on path { fill: #1d3f8f; }
.wt-badge { position: absolute; right: 22px; bottom: 22px; width: 112px; height: 112px; border-radius: 50%; display: grid; place-content: center; text-align: center; color: #fff; background: radial-gradient(circle at 35% 30%, #ff6b74, #c81d2b); box-shadow: 0 0 0 4px #fff, 0 12px 24px -10px rgba(120, 20, 30, .7); transform: rotate(-8deg); }
.wt-badge b { font-size: 20px; letter-spacing: .06em; }
.wt-badge span { font-size: 10.5px; }
/* 行き先のカード（国旗・都市・現地の時刻） */
.wt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.wt-dest { display: grid; justify-items: start; gap: 2px; padding: 10px; border: 0; border-radius: 12px; background: #fff; text-align: left; cursor: pointer; box-shadow: 0 0 0 1px #d9eef6, 0 8px 16px -12px rgba(20, 70, 110, .5); transition: transform .15s; }
.wt-dest:hover { transform: translateY(-2px); }
.wt-dest.on { box-shadow: 0 0 0 2px #1d3f8f, 0 10px 20px -10px rgba(29, 63, 143, .6); }
.wt-dest b { font-size: 14px; }
.wt-dest small { font-size: 11px; color: var(--muted); }
.wt-dest em { font-style: normal; font-size: 11.5px; font-weight: 700; color: #e63946; }
.wt-flag { display: block; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 4px 10px -4px rgba(0, 0, 0, .3); margin-bottom: 4px; }
/* 右のカード */
.wt-card { padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #d9eef6, 0 16px 30px -24px rgba(20, 70, 110, .5); }
.wt-hero { display: flex; gap: 12px; align-items: center; }
.wt-hero .wt-flag { margin: 0; border-radius: 6px; }
.wt-area { margin: 0; display: inline-block; font-size: 11px; font-weight: 700; color: #fff; background: #1d3f8f; padding: 1px 10px; border-radius: 99px; }
.wt-card h3 { margin: 4px 0 0; font-size: 24px; font-weight: 900; }
.wt-city { margin: 0; font-size: 12.5px; color: var(--muted); }
.wt-now { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 8px; }
.wt-now div { display: grid; padding: 10px; border-radius: 12px; background: linear-gradient(135deg, #eaf7fc, #fff); box-shadow: inset 0 0 0 1px #d9eef6; }
.wt-now span { font-size: 10.5px; color: var(--muted); }
.wt-now b { font-size: 16px; color: #1d3f8f; }
.wt-fun { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wt-fun li { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: #fff1f2; color: #c81d2b; }
.wt-kinds { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.wt-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.wt-nums div { display: grid; padding: 8px 10px; border-radius: 12px; background: #f4fbfe; }
.wt-nums b { font-family: "Playfair Display", serif; font-size: 26px; color: #1d3f8f; line-height: 1; }
.wt-nums span { font-size: 11px; color: var(--muted); }
.wt-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wt-people li { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.wt-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.wt-row b small { margin-left: 6px; font-size: 11px; color: var(--muted); font-weight: 500; }
.wt-row span { font-size: 12px; color: #1d3f8f; font-weight: 700; }
.wt-bar { height: 6px; border-radius: 99px; background: #e7f2f7; overflow: hidden; }
.wt-bar i { display: block; height: 100%; border-radius: 99px; }
.wt-ai { justify-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 2px; border: 0; border-radius: 99px; background: #f4fbfe; font-size: 11.5px; cursor: pointer; }
.wt-ai.working { box-shadow: inset 0 0 0 1.5px var(--c); }
.wt-ai.working::after { content: "作業中"; margin-left: 4px; font-size: 10px; color: var(--c); font-weight: 800; }
.wt-ai.got { animation: wtGot 1.2s ease-out; }
@keyframes wtGot { 0% { box-shadow: 0 0 0 0 var(--c); } 100% { box-shadow: 0 0 0 12px transparent; } }
.wt-plan { width: 100%; justify-content: center; margin-top: 12px; background: #e63946 !important; }
.wt-small { margin: 10px 0 0; font-size: 11px; color: var(--muted); }
@media (max-width: 760px) { .wt-badge { width: 76px; height: 76px; } .wt-badge b { font-size: 14px; } .wt-ribbon { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .wt-ai.got { animation: none; } }

/* ── 受講生カルテ（語学と留学） ── */
.wt-kt { --kt: #1d3f8f; }
.wt-kt .kt-card, .wt-kt .kt-list button { border-radius: 16px; box-shadow: 0 0 0 1px #d9eef6, 0 10px 20px -16px rgba(20, 70, 110, .5); }
.wt-kt .kt-list button.on { box-shadow: 0 0 0 2px #1d3f8f; }
.wt-kt .kt-av { background: linear-gradient(135deg, #1d3f8f, #e63946); }
.kt-lv { margin-left: 6px; font-size: 10.5px; font-weight: 800; color: #fff; background: #e63946; padding: 0 7px; border-radius: 99px; }
.kt-plan { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; color: #fff; background: linear-gradient(120deg, #1d3f8f, #2f6fd1 60%, #8fd3e8); box-shadow: 0 14px 28px -18px rgba(29, 63, 143, .8); }
.kt-plan .kt-k { color: rgba(255, 255, 255, .75); margin: 0; }
.kt-plan > div { display: grid; gap: 2px; flex: 1; }
.kt-plan b { font-size: 16px; }
.kt-plan span { font-size: 12.5px; opacity: .9; }
.kt-flag { flex: none; border-radius: 5px; box-shadow: 0 0 0 2px #fff, 0 6px 12px -4px rgba(0, 0, 0, .4); }
.kt-docs-n { flex: none !important; text-align: center; padding: 6px 14px; border-radius: 12px; background: rgba(255, 255, 255, .18); }
.kt-docs-n b { font-family: "Playfair Display", serif; font-size: 28px; line-height: 1; }
.kt-docs-n small { font-size: 14px; }
.kt-cefr { display: flex; gap: 4px; margin-bottom: 12px; }
.kt-cefr span { flex: 1; text-align: center; padding: 6px 0; border-radius: 8px; font-family: "Playfair Display", serif; font-weight: 700; color: #8aa0c8; background: #eef4fb; }
.kt-cefr span.on { color: #fff; background: #e63946; box-shadow: 0 6px 14px -6px rgba(230, 57, 70, .8); transform: scale(1.08); }
.kt-four { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kt-four li { display: grid; grid-template-columns: 40px 1fr 30px; align-items: center; gap: 8px; font-size: 13px; }
.kt-four i { height: 10px; border-radius: 99px; background: linear-gradient(90deg, #1d3f8f calc(var(--p) * 1%), #e7f2f7 0); }
.kt-four b { font-family: "Playfair Display", serif; color: #1d3f8f; }
.kt-check { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.kt-check li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #847b74; }
.kt-check li.ok { color: #2f2a28; }
.kt-check i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 900; color: #fff; box-shadow: inset 0 0 0 2px #cfdbe8; }
.kt-check li.ok i { background: #2fa36b; box-shadow: none; }
.kt-weak { margin: 0 0 10px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.kt-weak li { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; color: #c81d2b; background: #fff1f2; }
.wt-kt .kt-line { color: #847b74; }