:root {
  --ink: #09111f;
  --ink-2: #101c30;
  --paper: #f6f8fb;
  --white: #fff;
  --blue: #6ca8ff;
  --mint: #7cf0c8;
  --yellow: #ffcb66;
  --red: #ff7f72;
  --line: rgba(9, 17, 31, .13);
  --muted: #667085;
  --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Noto Sans JP", sans-serif; font-size: 16px; line-height: 1.7; }
button, input { font: inherit; }
button { color: inherit; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .035; z-index: 99; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.site-header { height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 4.5vw; position: sticky; top: 0; z-index: 40; background: rgba(246,248,251,.88); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(9,17,31,.08); }
.brand { display: flex; align-items: center; gap: 12px; border: 0; background: none; cursor: pointer; padding: 8px 0; font: 700 1.08rem/1 "DM Sans", sans-serif; letter-spacing: .045em; }
.brand b { color: #285ce1; }
.brand-mark { width: 29px; height: 29px; position: relative; display: block; }
.brand-mark i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.brand-mark i:nth-child(1) { top: 0; left: 0; background: #285ce1; }
.brand-mark i:nth-child(2) { top: 4px; right: 0; background: var(--mint); }
.brand-mark i:nth-child(3) { bottom: 0; left: 9px; background: var(--yellow); }
.brand-mark:before, .brand-mark:after { content: ""; height: 1px; background: var(--ink); position: absolute; transform-origin: left; opacity: .7; }
.brand-mark:before { width: 17px; left: 6px; top: 6px; transform: rotate(13deg); }
.brand-mark:after { width: 14px; left: 7px; top: 9px; transform: rotate(58deg); }
.desktop-nav { display: flex; align-items: center; gap: 5px; }
.desktop-nav button { border: 0; background: transparent; padding: 10px 15px; border-radius: 12px; cursor: pointer; font-size: .88rem; font-weight: 600; }
.desktop-nav button:hover { background: #e9eef7; }
.desktop-nav .my-map-link { background: var(--ink); color: white; margin-left: 8px; }
.my-map-link span { display: inline-grid; place-items: center; background: var(--mint); color: var(--ink); min-width: 22px; height: 22px; padding: 0 6px; border-radius: 20px; margin-left: 7px; font-size: .75rem; }
.view { display: none; }
.view.is-active { display: block; animation: reveal .42s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } }
.hero-shell { min-height: calc(100vh - 76px); max-width: 1500px; margin: auto; padding: 6vw 6vw 5vw; display: grid; grid-template-columns: 1fr 1fr; align-items: center; overflow: hidden; }
.eyebrow, .section-number { font: 700 .72rem/1.4 "DM Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #355179; }
.eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: #285ce1; box-shadow: 0 0 0 5px rgba(40,92,225,.12); }
.hero-copy h1 { font-size: clamp(3.4rem, 6.5vw, 7.6rem); line-height: .98; letter-spacing: -.075em; margin: 30px 0 34px; font-weight: 800; }
.hero-copy h1 em, .mymap-hero h1 em { font-style: normal; color: transparent; -webkit-text-stroke: 2px var(--ink); }
.hero-lead { font-size: clamp(1.15rem, 2vw, 1.65rem); font-weight: 700; margin: 0 0 15px; }
.hero-note { max-width: 580px; color: var(--muted); line-height: 2; }
.primary-cta, .secondary-cta { border: 0; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 58px; border-radius: 999px; background: var(--ink); color: white; padding: 0 26px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 30px rgba(9,17,31,.16); transition: transform .2s ease, box-shadow .2s ease; }
.primary-cta:hover, .secondary-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 35px rgba(9,17,31,.22); }
.hero-copy .primary-cta { margin-top: 25px; }
.hero-copy small { display: block; margin: 12px 0 0 18px; color: var(--muted); font-size: .75rem; }
.hero-map { height: min(560px, 64vw); width: min(560px, 100%); position: relative; justify-self: end; }
.orbit { position: absolute; border: 1px solid rgba(9,17,31,.14); border-radius: 50%; inset: 13%; }
.orbit-two { inset: 29%; border-style: dashed; animation: spin 38s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.map-center { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; transform: translate(-50%,-50%); background: var(--ink); color: white; border-radius: 50%; display: grid; place-content: center; text-align: center; box-shadow: 0 30px 50px rgba(9,17,31,.25); }
.map-center span { font: 700 3.4rem/1 "DM Sans", sans-serif; }
.map-center small { font: 600 .62rem/1.8 "DM Sans", sans-serif; letter-spacing: .16em; color: var(--mint); }
.map-node { position: absolute; border: 1px solid rgba(9,17,31,.1); width: 118px; height: 118px; border-radius: 28px; display: grid; place-content: center; gap: 5px; background: white; box-shadow: 0 22px 50px rgba(53,74,110,.15); cursor: pointer; transition: transform .25s ease; z-index: 2; }
.map-node:hover { transform: scale(1.06) rotate(-2deg); }
.map-node span { font-size: 2.3rem; }
.map-node b { font-size: .86rem; }
.node-phone { left: 2%; top: 12%; background: var(--blue); transform: rotate(-5deg); }
.node-game { right: -1%; top: 23%; background: var(--mint); transform: rotate(5deg); }
.node-food { left: 20%; bottom: 0; background: var(--yellow); transform: rotate(3deg); }
.map-label { position: absolute; background: rgba(255,255,255,.85); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: .72rem; font-weight: 700; backdrop-filter: blur(5px); }
.label-a { right: 7%; bottom: 14%; }.label-b { left: 0; bottom: 30%; }.label-c { right: 17%; top: 3%; }
.section { max-width: 1400px; margin: auto; padding: 100px 6vw; }
.discover-section { border-top: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 50px; }
.section-number { color: #285ce1; margin: 0 0 13px; }
.section-heading h2, .map-intro h2, .discovery-banner h2 { font-size: clamp(2rem, 3.7vw, 4rem); letter-spacing: -.055em; line-height: 1.18; margin: 0; }
.section-heading > p { color: var(--muted); margin: 0; }
.theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.theme-card { min-height: 285px; border: 1px solid var(--line); border-radius: var(--radius); background: white; padding: 22px; text-align: left; position: relative; display: flex; flex-direction: column; cursor: pointer; transition: transform .25s, background .25s, box-shadow .25s; overflow: hidden; }
.theme-card:hover { transform: translateY(-7px); box-shadow: 0 20px 40px rgba(31,50,80,.10); }
.theme-card.is-selected { background: var(--ink); color: white; }
.theme-card.is-selected small { color: #a8b3c5; }
.theme-card.is-selected i { color: var(--mint); }
.theme-card.is-soon { opacity: .55; cursor: not-allowed; }
.theme-index { font: 600 .72rem "DM Sans", sans-serif; opacity: .55; }
.theme-icon { font-size: 3.4rem; margin: auto 0 22px; }
.theme-card strong { font-size: 1.35rem; }
.theme-card small { color: var(--muted); margin-top: 6px; }
.theme-card i { font: 600 .76rem "DM Sans", sans-serif; font-style: normal; margin-top: 20px; color: #285ce1; }
.map-section { max-width: none; background: var(--ink); color: white; border-radius: 42px 42px 0 0; padding-left: max(6vw, calc((100vw - 1400px)/2 + 6vw)); padding-right: max(6vw, calc((100vw - 1400px)/2 + 6vw)); }
.map-section .section-number { color: var(--mint); }
.map-intro-title { display: flex; align-items: center; gap: 22px; }
.map-intro-title > span { width: 86px; height: 86px; border-radius: 26px; display: grid; place-items: center; background: var(--mint); color: var(--ink); font-size: 2.8rem; flex: 0 0 auto; }
.map-intro h2 { max-width: 900px; font-size: clamp(2rem, 4vw, 4.6rem); }
.map-intro p:not(.section-number) { color: #a8b3c5; }
.industry-track-wrap { overflow-x: auto; margin: 60px -2vw 65px; padding: 12px 2vw 25px; scrollbar-width: thin; }
.industry-track { display: flex; min-width: max-content; align-items: stretch; }
.track-step { width: 195px; min-height: 155px; position: relative; padding-right: 28px; }
.track-step:after { content: "→"; position: absolute; right: 8px; top: 27px; color: #516078; }
.track-step:last-child:after { display: none; }
.track-node { width: 100%; height: 100%; background: var(--ink-2); border: 1px solid #2a3850; border-radius: 20px; padding: 20px; }
.track-node span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(124,240,200,.12); color: var(--mint); font: 700 .75rem "DM Sans", sans-serif; }
.track-node b { display: block; font-size: 1.05rem; margin-top: 15px; }.track-node small { color: #8e9bae; }
.company-section-head { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #26344b; padding-top: 28px; margin-bottom: 28px; color: #a8b3c5; font-size: .84rem; }
.pulse { width: 9px; height: 9px; display: inline-block; margin-right: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 6px rgba(124,240,200,.1); }
.sort-note { font-size: .75rem; }
.company-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.company-card { border: 1px solid var(--line); border-radius: var(--radius); background: white; color: var(--ink); overflow: hidden; min-height: 290px; display: flex; flex-direction: column; cursor: pointer; transition: transform .24s, box-shadow .24s; position: relative; }
.company-card:hover { transform: translateY(-6px); box-shadow: 0 22px 45px rgba(0,0,0,.18); }
.company-card-top { min-height: 150px; padding: 22px; display: flex; justify-content: space-between; align-items: flex-start; background: var(--card-color, var(--blue)); }
.company-card-top .hook { font-size: 1.2rem; line-height: 1.55; font-weight: 800; max-width: 240px; }
.company-card-top .arrow { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.7); display: grid; place-items: center; }
.company-card-body { padding: 20px 22px 22px; flex: 1; }
.company-name { font: 700 1.35rem/1.3 "DM Sans", "Noto Sans JP", sans-serif; }
.company-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.company-tags span { padding: 4px 9px; border-radius: 999px; background: #eef2f7; color: #536173; font-size: .68rem; }
.card-state { position: absolute; right: 14px; bottom: 13px; font-size: .7rem; font-weight: 700; color: #285ce1; }
.card-state.is-seen { color: #69778a; }
.discovery-banner { max-width: none; background: var(--mint); display: grid; grid-template-columns: auto 1fr auto; gap: 50px; align-items: center; padding-left: max(6vw, calc((100vw - 1400px)/2 + 6vw)); padding-right: max(6vw, calc((100vw - 1400px)/2 + 6vw)); }
.discovery-big-number { font: 700 clamp(5rem, 10vw, 9rem)/1 "DM Sans", sans-serif; letter-spacing: -.08em; }
.discovery-big-number small { font-size: 1.8rem; letter-spacing: 0; color: #29544a; }
.discovery-banner .section-number { color: #29544a; }.discovery-banner p { margin-bottom: 0; }
.discovery-banner .secondary-cta { background: white; color: var(--ink); }
.detail-page { min-height: calc(100vh - 76px); }
.detail-hero { min-height: 510px; padding: 42px max(6vw, calc((100vw - 1400px)/2 + 6vw)) 70px; background: var(--company-color); position: relative; overflow: hidden; }
.detail-hero:after { content: attr(data-initial); position: absolute; right: 2vw; bottom: -15vw; font: 800 34vw/1 "DM Sans", sans-serif; color: rgba(255,255,255,.18); pointer-events: none; }
.back-button { border: 0; background: rgba(255,255,255,.64); padding: 10px 16px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: .82rem; position: relative; z-index: 2; }
.detail-kicker { margin: 75px 0 10px; font: 700 .75rem "DM Sans", sans-serif; letter-spacing: .16em; }
.detail-hero h1 { font-size: clamp(3.6rem, 8.5vw, 8rem); letter-spacing: -.06em; line-height: .95; margin: 0; position: relative; z-index: 1; }
.detail-hero h2 { font-size: clamp(1.35rem, 2.4vw, 2.5rem); margin: 25px 0 0; max-width: 760px; position: relative; z-index: 1; }
.detail-main { max-width: 1200px; margin: auto; padding: 75px 6vw 110px; }
.detail-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 70px; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 8px; }.detail-tags span { border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; font-size: .75rem; }
.save-button { border: 1px solid var(--ink); background: white; border-radius: 999px; min-height: 50px; padding: 0 20px; cursor: pointer; font-weight: 700; }
.save-button.is-saved { background: var(--ink); color: white; }
.story-block { display: grid; grid-template-columns: 180px 1fr; gap: 40px; padding: 55px 0; border-top: 1px solid var(--line); }
.story-index { font: 700 .75rem "DM Sans", sans-serif; letter-spacing: .12em; color: #285ce1; }
.story-content h3 { font-size: clamp(1.65rem, 3vw, 2.8rem); line-height: 1.35; letter-spacing: -.04em; margin: 0 0 25px; }
.story-content p { font-size: 1.05rem; color: #536173; max-width: 750px; }
.process { display: flex; align-items: stretch; overflow-x: auto; gap: 12px; margin-top: 30px; padding-bottom: 12px; }
.process div { min-width: 150px; border-radius: 18px; background: var(--ink); color: white; padding: 20px; text-align: center; position: relative; }
.process div:not(:last-child):after { content: "→"; position: absolute; right: -13px; z-index: 1; color: #7b8799; }
.process b { display: block; margin-bottom: 5px; }.process small { color: #9ca8ba; }
.fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 25px; }
.fact-grid div { border: 1px solid var(--line); border-radius: 18px; padding: 23px; }.fact-grid small { display: block; color: var(--muted); }.fact-grid b { display: block; margin-top: 6px; font-size: 1.25rem; }
.next-discovery { margin-top: 30px; border-radius: 28px; background: var(--ink); color: white; padding: 38px; display: flex; justify-content: space-between; gap: 30px; align-items: center; }
.next-discovery small { color: var(--mint); font: 700 .7rem "DM Sans", sans-serif; letter-spacing: .12em; }.next-discovery h3 { margin: 8px 0 0; font-size: 1.5rem; }.next-discovery button { background: var(--mint); color: var(--ink); border: 0; border-radius: 999px; padding: 15px 22px; font-weight: 800; cursor: pointer; }
.mymap-hero { background: var(--ink); color: white; min-height: 440px; padding: 45px max(6vw, calc((100vw - 1200px)/2 + 6vw)); }
.mymap-hero .back-button { color: var(--ink); }.mymap-hero .section-number { color: var(--mint); margin-top: 65px; }.mymap-hero h1 { margin: 0; font-size: clamp(3rem, 6vw, 6rem); line-height: 1.05; letter-spacing: -.065em; }.mymap-hero h1 em { -webkit-text-stroke-color: white; }.mymap-hero > p:last-child { color: #a8b3c5; }
.mymap-stats { max-width: 1100px; margin: -58px auto 0; padding: 0 4vw; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); }
.mymap-stats div { background: white; border: 1px solid var(--line); padding: 30px; text-align: center; }.mymap-stats div:first-child { border-radius: 22px 0 0 22px; }.mymap-stats div:last-child { border-radius: 0 22px 22px 0; }.mymap-stats span { display: block; font: 700 2.8rem "DM Sans", sans-serif; }.mymap-stats small { color: var(--muted); }
.section-heading.compact { margin-bottom: 30px; }.section-heading.compact h2 { font-size: 2.4rem; }
.saved-section .company-card { border-color: var(--line); }
.empty-state { text-align: center; border: 1px dashed #aeb8c6; border-radius: 28px; padding: 65px 20px; background: white; }.empty-state span { width: 55px; height: 55px; border-radius: 50%; background: #e9eef7; display: grid; place-items: center; margin: auto; font-size: 1.7rem; }.empty-state h3 { margin-bottom: 4px; }.empty-state p { color: var(--muted); }.empty-state .primary-cta { margin-top: 15px; }
.search-panel { display: none; position: fixed; inset: 0; z-index: 80; }.search-panel.is-open { display: block; }.search-backdrop { position: absolute; inset: 0; background: rgba(9,17,31,.72); backdrop-filter: blur(8px); }.search-box { position: relative; max-width: 760px; margin: 8vh auto; background: white; border-radius: 28px; padding: 28px; max-height: 84vh; overflow-y: auto; animation: searchIn .25s ease both; }
@keyframes searchIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.search-top { display: flex; justify-content: space-between; align-items: center; }.search-top b { font-size: 1.2rem; }.search-top button { width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; font-size: 1.4rem; }
.search-input-wrap { margin-top: 25px; border: 2px solid var(--ink); border-radius: 18px; display: flex; align-items: center; gap: 10px; padding: 0 17px; }.search-input-wrap span { font-size: 1.6rem; }.search-input-wrap input { width: 100%; min-height: 60px; border: 0; outline: 0; background: transparent; font-size: 1rem; }
.search-hint { font-size: .75rem; color: var(--muted); margin: 8px 5px 20px; }.search-results { display: grid; gap: 8px; }.search-result { border: 1px solid var(--line); background: white; border-radius: 15px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; text-align: left; }.search-result:hover { background: #f0f4fa; }.search-result b { display: block; }.search-result small { color: var(--muted); }.search-empty { text-align: center; color: var(--muted); padding: 35px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; background: var(--ink); color: white; border: 1px solid #344257; border-radius: 18px; padding: 15px 22px; display: flex; align-items: center; gap: 14px; box-shadow: 0 20px 55px rgba(0,0,0,.32); transform: translateY(130px); opacity: 0; transition: .35s ease; }.toast.is-showing { transform: translateY(0); opacity: 1; }.toast > span { width: 40px; height: 40px; border-radius: 50%; background: var(--mint); color: var(--ink); display: grid; place-items: center; }.toast small { color: var(--mint); display: block; font: 600 .6rem "DM Sans", sans-serif; letter-spacing: .12em; }.toast b { font-size: .85rem; }
.mobile-nav { display: none; }
@media (max-width: 980px) {
  .hero-shell { grid-template-columns: 1fr; padding-top: 70px; }
  .hero-map { justify-self: center; margin-top: 40px; }
  .theme-grid { grid-template-columns: repeat(2,1fr); }
  .company-grid { grid-template-columns: repeat(2,1fr); }
  .discovery-banner { grid-template-columns: auto 1fr; }.discovery-banner .secondary-cta { grid-column: 2; justify-self: start; }
}
@media (max-width: 680px) {
  body { padding-bottom: 70px; }
  .site-header { height: 64px; padding: 0 20px; }.desktop-nav { display: none; }.brand { font-size: .94rem; }
  .hero-shell { min-height: auto; padding: 60px 22px 45px; }.hero-copy h1 { font-size: clamp(3.2rem, 15vw, 5rem); margin-top: 25px; }.hero-copy h1 em { -webkit-text-stroke-width: 1px; }.hero-note { font-size: .92rem; }.hero-map { height: 390px; width: 100%; margin-top: 28px; }.map-center { width: 105px; height: 105px; }.map-center span { font-size: 2.5rem; }.map-node { width: 91px; height: 91px; border-radius: 22px; }.map-node span { font-size: 1.8rem; }.map-node b { font-size: .72rem; }.label-c { top: 0; right: 8%; }
  .section { padding: 75px 20px; }.section-heading { display: block; margin-bottom: 30px; }.section-heading > p { margin-top: 16px; }.section-heading h2 { font-size: 2.2rem; }.theme-grid { gap: 10px; }.theme-card { min-height: 225px; padding: 16px; }.theme-icon { font-size: 2.5rem; }.theme-card strong { font-size: 1.1rem; }.theme-card small { font-size: .72rem; }
  .map-section { border-radius: 28px 28px 0 0; padding: 65px 20px; }.map-intro-title { display: block; }.map-intro-title > span { width: 70px; height: 70px; margin-bottom: 22px; }.map-intro h2 { font-size: 2.4rem; }.industry-track-wrap { margin-top: 40px; }.company-section-head .sort-note { display: none; }.company-grid { grid-template-columns: 1fr; }.company-card { min-height: 260px; }.company-card-top { min-height: 135px; }
  .discovery-banner { display: block; padding: 55px 20px; }.discovery-big-number { font-size: 6.4rem; }.discovery-banner h2 { font-size: 2.1rem; }.discovery-banner .secondary-cta { margin-top: 25px; }
  .detail-hero { min-height: 440px; padding: 30px 20px 55px; }.detail-kicker { margin-top: 70px; }.detail-hero h1 { font-size: clamp(3.3rem, 18vw, 5.5rem); }.detail-main { padding: 45px 20px 80px; }.detail-actions { align-items: flex-start; flex-direction: column; margin-bottom: 30px; }.story-block { grid-template-columns: 1fr; gap: 14px; padding: 42px 0; }.fact-grid { grid-template-columns: 1fr; }.next-discovery { align-items: flex-start; flex-direction: column; padding: 28px; }
  .mymap-hero { padding: 30px 20px 110px; min-height: auto; }.mymap-hero .section-number { margin-top: 55px; }.mymap-hero h1 { font-size: 3.3rem; }.mymap-stats { margin-top: -72px; padding: 0 15px; }.mymap-stats div { padding: 20px 5px; }.mymap-stats span { font-size: 2rem; }.mymap-stats small { font-size: .67rem; }
  .search-box { margin: 0; border-radius: 0; min-height: 100%; padding: 20px; }.search-input-wrap input { font-size: .9rem; }
  .toast { right: 12px; bottom: 82px; left: 12px; }
  .mobile-nav { display: grid; grid-template-columns: repeat(4,1fr); position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; height: 70px; background: rgba(255,255,255,.94); border-top: 1px solid var(--line); backdrop-filter: blur(14px); padding-bottom: env(safe-area-inset-bottom); }.mobile-nav button { border: 0; background: transparent; font-size: .66rem; font-weight: 700; display: grid; place-content: center; gap: 2px; position: relative; }.mobile-nav button > span { font-size: 1.2rem; line-height: 1; }.mobile-nav i { position: absolute; top: 7px; left: calc(50% + 10px); width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #285ce1; color: white; font-style: normal; }
}
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Premium editorial direction */
.site-header { background: rgba(7, 14, 26, .88); border-color: rgba(255,255,255,.08); color: white; }
.brand b { color: var(--mint); }
.brand-mark i:nth-child(1) { background: var(--blue); }
.desktop-nav button { color: #dfe7f2; }
.desktop-nav button:hover { background: rgba(255,255,255,.09); }
.desktop-nav .my-map-link { background: white; color: var(--ink); }
.hero-shell { max-width: none; min-height: calc(100vh - 76px); padding: 0; grid-template-columns: minmax(420px, 43%) 1fr; background: #07101e; color: white; position: relative; }
.hero-shell:after { content: ""; position: absolute; inset: auto 0 0; height: 180px; background: linear-gradient(transparent, rgba(7,16,30,.7)); pointer-events: none; }
.hero-copy { padding: 8vh 4vw 8vh max(6vw, calc((100vw - 1500px)/2 + 4vw)); position: relative; z-index: 3; }
.hero-copy:before { content: ""; width: 42vw; height: 42vw; border-radius: 50%; position: absolute; left: -25vw; top: -20vw; background: rgba(50,109,255,.15); filter: blur(70px); z-index: -1; }
.hero-copy .eyebrow { color: #aabbd1; }
.hero-copy h1 { font-size: clamp(3.6rem, 6.4vw, 7rem); color: white; }
.hero-copy h1 em { -webkit-text-stroke-color: white; }
.hero-copy .hero-lead { color: white; }
.hero-copy .hero-note { color: #9eacbf; max-width: 510px; }
.hero-copy .primary-cta { background: var(--mint); color: var(--ink); box-shadow: 0 16px 45px rgba(0,0,0,.3); }
.hero-copy small { color: #8291a7; }
.hero-visual { margin: 0; height: calc(100vh - 76px); min-height: 680px; position: relative; overflow: hidden; background: #07101e; }
.hero-visual:before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #07101e 0%, rgba(7,16,30,.25) 28%, transparent 60%), linear-gradient(0deg, rgba(7,16,30,.55), transparent 35%); }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 54% center; display: block; transform: scale(1.02); animation: heroDrift 12s ease-in-out infinite alternate; }
@keyframes heroDrift { to { transform: scale(1.07) translateX(-1.2%); } }
.visual-caption { position: absolute; left: 6%; bottom: 6%; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; padding: 14px 18px; border: 1px solid rgba(255,255,255,.16); background: rgba(7,16,30,.62); backdrop-filter: blur(15px); border-radius: 15px; }
.visual-caption span { grid-row: 1 / 3; font: 700 2rem/1 "DM Sans", sans-serif; color: var(--mint); }
.visual-caption b { font: 700 .67rem "DM Sans", sans-serif; letter-spacing: .14em; }
.visual-caption small { color: #b6c1d0; font-size: .72rem; }
.visual-node { position: absolute; z-index: 2; border: 1px solid rgba(255,255,255,.18); background: rgba(7,16,30,.66); color: white; backdrop-filter: blur(12px); border-radius: 999px; display: flex; gap: 8px; align-items: center; padding: 9px 14px 9px 10px; cursor: pointer; font: 700 .68rem "DM Sans", sans-serif; letter-spacing: .08em; transition: .25s ease; }
.visual-node:hover { background: white; color: var(--ink); transform: translateY(-3px); }
.visual-node span { width: 30px; height: 30px; display: grid; place-items: center; background: white; border-radius: 50%; }
.visual-node-game { right: 7%; top: 9%; }.visual-node-food { right: 20%; bottom: 19%; }
.visual-count { position: absolute; z-index: 2; top: 16%; left: 8%; display: flex; align-items: center; gap: 11px; color: white; }
.visual-count strong { font: 600 3rem/1 "DM Sans", sans-serif; letter-spacing: -.06em; }
.visual-count span { border-left: 1px solid rgba(255,255,255,.35); padding-left: 11px; color: #aeb9c9; font-size: .72rem; line-height: 1.5; }
.discover-section { padding-top: 120px; background: #f5f7fa; }
.theme-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.theme-card { min-height: 500px; padding: 0; border-radius: 26px; border: 0; background: #0a1424; color: white; isolation: isolate; box-shadow: 0 10px 35px rgba(13,28,50,.1); }
.theme-card:hover { transform: translateY(-9px); box-shadow: 0 28px 60px rgba(13,28,50,.2); }
.theme-card.is-selected { background: #0a1424; outline: 3px solid #285ce1; outline-offset: 4px; }
.theme-index { position: absolute; z-index: 3; left: 20px; top: 20px; color: white; opacity: 1; padding: 7px 10px; border-radius: 99px; background: rgba(7,16,30,.6); backdrop-filter: blur(10px); font-size: .62rem; letter-spacing: .1em; }
.theme-media { position: absolute; inset: 0; z-index: -1; display: block; }
.theme-media:after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,12,24,.97) 0%, rgba(5,12,24,.4) 52%, rgba(5,12,24,.08) 80%); }
.theme-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.theme-card:hover .theme-media img { transform: scale(1.055); }
.theme-copy { margin-top: auto; padding: 28px; display: block; position: relative; z-index: 2; }
.theme-copy strong { display: block; font-size: 1.75rem; line-height: 1.3; }
.theme-copy small { display: block; color: #b8c2d1; margin-top: 6px; font-size: .84rem; }
.theme-copy i { display: flex; align-items: center; justify-content: space-between; color: var(--mint); border-top: 1px solid rgba(255,255,255,.17); margin-top: 22px; padding-top: 18px; }
.theme-copy i b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--mint); color: var(--ink); font-size: 1rem; }
.map-section { border-radius: 0; background: #07101e; padding-top: 120px; position: relative; overflow: hidden; }
.map-section:before { content: "MAP 01"; position: absolute; right: -1vw; top: 20px; font: 800 10vw/1 "DM Sans", sans-serif; color: rgba(255,255,255,.025); letter-spacing: -.07em; pointer-events: none; }
.map-intro-title { display: grid; grid-template-columns: minmax(280px, .7fr) 1.3fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.map-photo { margin: 0; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 28px 70px rgba(0,0,0,.32); position: relative; }
.map-photo:after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.map-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .25s ease; }
.map-theme-label { display: inline-flex; align-items: center; gap: 10px; color: var(--mint); font: 700 .66rem "DM Sans", sans-serif; letter-spacing: .14em; margin-bottom: 18px; }
.map-theme-label i { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: rgba(124,240,200,.1); font-style: normal; font-size: 1rem; }
.map-intro h2 { font-size: clamp(2.3rem, 4.2vw, 4.8rem); }
.track-node { background: linear-gradient(145deg, #111e32, #0c1728); }
.company-card { border: 0; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.16); }
.company-card-top { min-height: 175px; position: relative; overflow: hidden; }
.company-card-top:after { content: ""; position: absolute; width: 160px; height: 160px; right: -65px; bottom: -80px; border: 1px solid rgba(9,17,31,.18); border-radius: 50%; box-shadow: 0 0 0 25px rgba(255,255,255,.12), 0 0 0 50px rgba(255,255,255,.08); }
.company-card-top .hook, .company-card-top .arrow { position: relative; z-index: 2; }
.detail-hero { min-height: 640px; display: flex; flex-direction: column; justify-content: flex-end; color: white; background-image: linear-gradient(0deg, rgba(4,10,20,.95) 0%, rgba(4,10,20,.18) 75%), var(--detail-image); background-size: cover; background-position: center; }
.detail-hero .back-button { position: absolute; top: 42px; left: max(6vw, calc((100vw - 1400px)/2 + 6vw)); }
.detail-hero:after { color: rgba(255,255,255,.08); }
.detail-kicker { color: var(--mint); margin-top: 0; }
.mymap-hero { background: linear-gradient(130deg, #07101e, #102744); }

@media (max-width: 980px) {
  .hero-shell { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { min-height: 620px; display: flex; flex-direction: column; justify-content: center; padding: 80px 8vw; }
  .hero-visual { height: 70vw; min-height: 560px; width: 100%; margin: 0; }
  .theme-grid { grid-template-columns: repeat(2, 1fr); }
  .theme-card:first-child { grid-column: 1 / -1; }
  .map-intro-title { grid-template-columns: 1fr; }
  .map-photo { max-width: 650px; aspect-ratio: 16 / 9; }
}

@media (max-width: 680px) {
  .site-header { height: 64px; }
  .hero-shell { padding: 0; }
  .hero-copy { min-height: 610px; padding: 74px 22px 60px; }
  .hero-copy h1 { font-size: clamp(3.15rem, 15.5vw, 5rem); }
  .hero-visual { min-height: 480px; height: 120vw; margin: 0; }
  .hero-visual:before { background: linear-gradient(0deg, rgba(7,16,30,.85), transparent 48%), linear-gradient(90deg, rgba(7,16,30,.25), transparent 50%); }
  .hero-visual img { object-position: 61% center; }
  .visual-count { top: 8%; left: 20px; }.visual-node-game { top: 8%; right: 16px; }.visual-node-food { bottom: 19%; right: 20px; }
  .visual-caption { left: 20px; right: 20px; bottom: 25px; }
  .discover-section { padding-top: 85px; }
  .theme-grid { grid-template-columns: 1fr; gap: 16px; }
  .theme-card:first-child { grid-column: auto; }
  .theme-card { min-height: 420px; }
  .map-section { padding-top: 85px; }
  .map-intro-title { display: grid; }
  .map-photo { width: 100%; height: auto; margin: 0; aspect-ratio: 4 / 3; }
  .detail-hero { min-height: 560px; padding-top: 110px; }
  .detail-hero .back-button { top: 25px; left: 20px; }
}

/* Light color-block direction */
:root {
  --ink: #15213b;
  --ink-2: #26395e;
  --paper: #f5f7fc;
  --blue: #4267ed;
  --mint: #71e2c2;
  --yellow: #ffd56a;
  --red: #ff806f;
  --line: rgba(25, 43, 77, .14);
  --muted: #61708b;
}
body { background: var(--paper); }
.site-header { background: rgba(255,255,255,.88); border-color: rgba(25,43,77,.1); color: var(--ink); box-shadow: 0 8px 30px rgba(48,70,112,.06); }
.brand b { color: #4267ed; }
.desktop-nav button { color: #33425e; }
.desktop-nav button:hover { background: #edf1fb; }
.desktop-nav .my-map-link { background: #4267ed; color: white; }
.my-map-link span { background: var(--yellow); }
.hero-shell { background: #edf2ff; color: var(--ink); grid-template-columns: minmax(420px, 44%) 1fr; }
.hero-shell:after { height: 120px; background: linear-gradient(transparent, rgba(237,242,255,.7)); }
.hero-copy { background: linear-gradient(145deg, #edf2ff 0%, #f8f3ff 100%); overflow: hidden; }
.hero-copy:before { width: 420px; height: 420px; left: -210px; top: -210px; background: #b5f1df; filter: none; opacity: .72; }
.hero-copy:after { content: ""; position: absolute; width: 230px; height: 230px; border-radius: 48% 52% 70% 30% / 44% 35% 65% 56%; right: -130px; bottom: -70px; background: #ffd56a; opacity: .65; transform: rotate(22deg); z-index: -1; }
.hero-copy .eyebrow { color: #4267ed; }
.hero-copy .eyebrow span { background: #4267ed; }
.hero-copy h1 { color: var(--ink); }
.hero-copy h1 em { color: #4267ed; -webkit-text-stroke: 0; }
.hero-copy .hero-lead { color: var(--ink); }
.hero-copy .hero-note { color: #5e6d88; }
.hero-copy .primary-cta { background: #4267ed; color: white; box-shadow: 0 16px 38px rgba(66,103,237,.25); }
.hero-copy small { color: #75819a; }
.hero-visual { background: #dfe7fb; height: calc(100vh - 132px); min-height: 610px; margin: 28px 28px 28px 0; border-radius: 32px; box-shadow: 0 24px 70px rgba(47,72,122,.18); }
.hero-visual:before { background: linear-gradient(90deg, rgba(37,56,93,.2), transparent 35%), linear-gradient(0deg, rgba(20,35,65,.5), transparent 38%); }
.visual-caption { color: var(--ink); border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.82); box-shadow: 0 10px 30px rgba(16,35,72,.15); }
.visual-caption small { color: #5c6a82; }
.visual-caption span { color: #4267ed; }
.visual-node { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.88); color: var(--ink); box-shadow: 0 8px 24px rgba(20,41,83,.14); }
.visual-node:hover { background: var(--yellow); }
.visual-count { color: white; padding: 12px 16px; border-radius: 18px; background: rgba(66,103,237,.86); backdrop-filter: blur(12px); }
.visual-count span { color: #edf2ff; border-color: rgba(255,255,255,.4); }
.discover-section { background: white; }
.section-number { color: #4267ed; }
.theme-card:nth-child(1) { box-shadow: 9px 9px 0 #8fb0ff; }
.theme-card:nth-child(2) { box-shadow: 9px 9px 0 #ff9b8e; }
.theme-card:nth-child(3) { box-shadow: 9px 9px 0 #ffd56a; }
.theme-card:hover { box-shadow: 12px 15px 0 var(--mint); }
.theme-card.is-selected { outline-color: #4267ed; }
.theme-copy i { color: #9ff2d8; }
.theme-copy i b { background: var(--yellow); }
.map-section { background: linear-gradient(145deg, #eef3ff 0%, #f8f5ff 58%, #fff7e5 100%); color: var(--ink); }
.map-section:before { color: rgba(66,103,237,.055); }
.map-section .section-number { color: #4267ed; }
.map-photo { border: 9px solid white; box-shadow: 18px 18px 0 #bfeedd, 0 25px 65px rgba(51,78,129,.13); }
.map-theme-label { color: #4267ed; }
.map-theme-label i { background: white; box-shadow: 0 7px 18px rgba(58,80,122,.12); }
.map-intro p:not(.section-number) { color: #63728c; }
.industry-track-wrap { scrollbar-color: #99abe0 transparent; }
.track-step:after { color: #4267ed; }
.track-node { background: rgba(255,255,255,.86); border-color: rgba(66,103,237,.16); box-shadow: 0 12px 30px rgba(51,78,129,.08); }
.track-node span { color: #2949bf; background: #dfe7ff; }
.track-node small { color: #697791; }
.company-section-head { border-color: rgba(66,103,237,.18); color: #65738b; }
.pulse { background: #4267ed; box-shadow: 0 0 0 6px rgba(66,103,237,.12); }
.company-card { box-shadow: 0 14px 38px rgba(45,69,113,.12); }
.company-card:hover { box-shadow: 0 22px 48px rgba(45,69,113,.19); }
.discovery-banner { background: linear-gradient(115deg, #ffcf62 0%, #ffe79c 45%, #baf1de 100%); }
.discovery-banner .section-number { color: #3d5893; }
.discovery-banner .secondary-cta { background: #4267ed; color: white; }
.discovery-big-number small { color: #57657d; }
.detail-hero { background-image: linear-gradient(0deg, rgba(45,72,145,.88) 0%, rgba(45,72,145,.06) 78%), var(--detail-image); }
.detail-main { background: white; }
.story-index { color: #4267ed; }
.process div { background: #edf2ff; color: var(--ink); border: 1px solid #d6dffc; }
.process div:not(:last-child):after { color: #4267ed; }
.process small { color: #65738b; }
.next-discovery { background: #4267ed; }
.next-discovery button { background: var(--yellow); }
.mymap-hero { background: linear-gradient(125deg, #dfe8ff 0%, #e5f9f3 55%, #fff0c4 100%); color: var(--ink); }
.mymap-hero .section-number { color: #4267ed; }
.mymap-hero h1 em { color: #4267ed; -webkit-text-stroke: 0; }
.mymap-hero > p:last-child { color: #60708b; }
.toast { background: #4267ed; border-color: #6f8af0; }
.toast > span { background: var(--yellow); }
.toast small { color: #dff9f1; }
.mobile-nav { background: rgba(255,255,255,.95); }

@media (max-width: 980px) {
  .hero-visual { margin: 0 6vw 6vw; width: auto; height: 64vw; min-height: 520px; }
}

@media (max-width: 680px) {
  .hero-copy { background: linear-gradient(150deg, #edf2ff, #f9f3ff); }
  .hero-visual { min-height: 470px; height: 118vw; margin: 0 16px 22px; border-radius: 25px; }
  .hero-visual:before { background: linear-gradient(0deg, rgba(33,60,130,.58), transparent 58%); }
  .theme-card:nth-child(1), .theme-card:nth-child(2), .theme-card:nth-child(3) { box-shadow: 6px 7px 0 var(--theme-shadow, #b5c5f3); }
  .theme-card:nth-child(1) { --theme-shadow: #8fb0ff; }
  .theme-card:nth-child(2) { --theme-shadow: #ff9b8e; }
  .theme-card:nth-child(3) { --theme-shadow: #ffd56a; }
  .map-photo { border-width: 6px; box-shadow: 9px 10px 0 #bfeedd; }
}

/* Manga-first visual learning */
body {
  background-color: #f8fbff;
  background-image: radial-gradient(rgba(66,103,237,.09) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}
.site-header { box-shadow: 0 3px 0 #18243e; }
.hero-shell { grid-template-columns: minmax(390px, 38%) 1fr; background: linear-gradient(135deg, #eaf8ff 0%, #fff9dc 100%); }
.hero-copy { background: transparent; padding-right: 2.5vw; }
.hero-copy:before { background: #8ee8cd; opacity: .52; }
.hero-copy:after { background: #ffdb63; }
.hero-copy .eyebrow { font-family: "Noto Sans JP", sans-serif; font-weight: 800; letter-spacing: .08em; }
.hero-copy h1 { font-size: clamp(4.1rem, 7.3vw, 8.4rem); line-height: .88; letter-spacing: -.075em; margin: 26px 0 32px; transform: rotate(-1.5deg); }
.hero-copy h1 em { color: #ff685b; text-shadow: 4px 4px 0 #ffd65f; }
.hero-copy .hero-lead { font-size: clamp(1.08rem, 1.55vw, 1.45rem); line-height: 1.8; }
.hero-copy .primary-cta { border: 3px solid #18243e; border-radius: 16px; box-shadow: 7px 7px 0 #18243e; background: #4267ed; transition: transform .15s, box-shadow .15s; }
.hero-copy .primary-cta:hover { transform: translate(4px,4px); box-shadow: 3px 3px 0 #18243e; }
.hero-visual { min-height: 620px; border: 3px solid #18243e; border-radius: 28px; box-shadow: 9px 9px 0 #7ddfc4; background: white; }
.hero-visual:before { background: linear-gradient(90deg, rgba(255,255,255,.14), transparent 24%); }
.hero-visual img { object-position: 58% center; animation: heroDrift 9s ease-in-out infinite alternate; }
.comic-bubble { left: auto; right: 5%; bottom: 7%; display: block; padding: 16px 20px; border: 3px solid #18243e; border-radius: 22px; background: white; color: var(--ink); transform: rotate(-3deg); box-shadow: 5px 5px 0 #ffcf62; }
.comic-bubble:after { content: ""; position: absolute; left: 22px; bottom: -15px; width: 22px; height: 22px; background: white; border-right: 3px solid #18243e; border-bottom: 3px solid #18243e; transform: rotate(45deg); }
.comic-bubble b { font-size: 1rem; line-height: 1.45; }
.visual-node { border: 3px solid #18243e; backdrop-filter: none; box-shadow: 4px 4px 0 #18243e; }
.visual-node-game { right: 5%; top: 6%; }.visual-node-food { right: auto; left: 4%; bottom: 7%; }
.visual-count { top: 5%; left: 4%; border: 3px solid #18243e; background: #ff6f61; box-shadow: 4px 4px 0 #18243e; transform: rotate(-5deg); }
.section-heading h2 { font-weight: 800; letter-spacing: -.06em; }
.section-heading > p { display: inline-block; color: var(--ink); font-weight: 800; padding: 9px 15px; border-radius: 999px; background: var(--yellow); border: 2px solid #18243e; transform: rotate(2deg); }
.discover-section { background: rgba(255,255,255,.94); }
.theme-grid { gap: 26px; }
.theme-card { min-height: 420px; background: white; color: var(--ink); border: 3px solid #18243e; border-radius: 24px; box-shadow: 8px 8px 0 #8fb0ff !important; display: flex; }
.theme-card:nth-child(2) { box-shadow: 8px 8px 0 #ff9b8e !important; }
.theme-card:nth-child(3) { box-shadow: 8px 8px 0 #ffd56a !important; }
.theme-card:hover { transform: translate(-2px,-7px) rotate(-1deg); }
.theme-card.is-selected { outline: 5px solid #71e2c2; outline-offset: 4px; }
.theme-index { color: var(--ink); background: white; border: 2px solid #18243e; font-size: .8rem; }
.theme-media { position: relative; inset: auto; z-index: 0; width: 100%; height: 310px; border-bottom: 3px solid #18243e; overflow: hidden; }
.theme-media:after { display: none; }
.theme-media img { object-position: center; }
.theme-copy { margin: 0; padding: 17px 20px 19px; display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; color: var(--ink); background: white; }
.theme-copy strong { font-size: 1.5rem; }.theme-copy small { margin: 0; color: #61708b; font-weight: 700; }
.theme-copy i { border: 0; margin: 0; padding: 0; color: #4267ed; gap: 8px; }
.theme-copy i b { border: 2px solid #18243e; }
.map-section { background-color: #eefaFF; background-image: radial-gradient(rgba(66,103,237,.11) 1.4px, transparent 1.4px); background-size: 20px 20px; }
.map-section:before { content: "LET'S GO!"; color: rgba(66,103,237,.06); }
.map-photo { border: 4px solid #18243e; border-radius: 24px; box-shadow: 10px 10px 0 #71e2c2; background: white; }
.map-theme-label { padding: 7px 13px; border-radius: 999px; color: var(--ink); background: var(--yellow); border: 2px solid #18243e; letter-spacing: .04em; }
.map-theme-label i { background: white; box-shadow: none; border: 1px solid #18243e; }
.map-intro h2 { font-weight: 800; transform: rotate(-1deg); }
.map-intro p:not(.section-number) { color: #4267ed; font-weight: 800; font-size: 1.2rem; }
.track-step { width: 174px; }
.track-node { border: 3px solid #18243e; border-radius: 18px; background: white; box-shadow: 5px 5px 0 #9eb6ff; }
.track-step:nth-child(2n) .track-node { box-shadow-color: #ffad9f; }
.track-step:nth-child(3n) .track-node { box-shadow-color: #ffd56a; }
.track-node span { border: 2px solid #18243e; background: #71e2c2; color: var(--ink); }
.company-section-head { border-top: 3px dashed #8da2c6; }
.company-section-head b { font-size: 1rem; color: var(--ink); }
.sort-note { color: #4267ed; font-weight: 800; }
.company-card { border: 3px solid #18243e; border-radius: 18px; box-shadow: 6px 6px 0 #18243e; }
.company-card:hover { transform: translate(-2px,-6px) rotate(-.5deg); box-shadow: 8px 10px 0 #18243e; }
.company-card-top { min-height: 155px; }
.company-card-top .hook { font-size: 1.08rem; line-height: 1.45; }
.company-card-top .arrow { border: 2px solid #18243e; background: white; }
.company-tags span { border: 1px solid #b8c5d9; background: #f2f6fc; }
.card-state { padding: 3px 7px; border-radius: 6px; background: #fff1a9; color: var(--ink); }
.discovery-banner { background: #ffd65f; border-top: 4px solid #18243e; border-bottom: 4px solid #18243e; background-image: repeating-conic-gradient(from 0deg at 12% 50%, rgba(255,255,255,.38) 0 5deg, transparent 5deg 12deg); }
.discovery-big-number { color: #4267ed; text-shadow: 4px 4px 0 white; }
.discovery-banner h2 { font-weight: 800; }
.discovery-banner .secondary-cta { border: 3px solid #18243e; border-radius: 14px; box-shadow: 5px 5px 0 #18243e; }
.detail-hero { min-height: 600px; color: var(--ink); background-image: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.78) 35%, rgba(255,255,255,.08) 70%), var(--detail-image); background-position: center; border-bottom: 4px solid #18243e; }
.detail-hero:after { display: none; }
.detail-hero h1, .detail-hero h2, .detail-kicker { width: fit-content; max-width: 62%; }
.detail-hero h1 { color: var(--ink); text-shadow: 5px 5px 0 #ffd65f; }
.detail-hero h2 { color: var(--ink); background: white; border: 3px solid #18243e; border-radius: 13px; padding: 9px 15px; box-shadow: 5px 5px 0 #71e2c2; font-size: clamp(1.05rem, 2vw, 1.6rem); }
.detail-kicker { color: #4267ed; font-weight: 800; }
.save-button { border: 3px solid #18243e; box-shadow: 4px 4px 0 #18243e; background: var(--yellow); }
.save-button.is-saved { background: #71e2c2; color: var(--ink); }
.story-block { grid-template-columns: 95px minmax(0, 1fr); padding: 45px 0; }
.story-index { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #4267ed; color: white; border: 3px solid #18243e; box-shadow: 4px 4px 0 #ffd65f; font-size: 1rem; }
.story-content h3 { font-weight: 800; margin-bottom: 16px; }
.story-content p { font-size: 1rem; line-height: 1.8; max-width: 680px; }
.process div { background: white; border: 3px solid #18243e; box-shadow: 4px 4px 0 #8fb0ff; }
.process div:nth-child(2n) { box-shadow-color: #ff9b8e; }.process div:nth-child(3n) { box-shadow-color: #ffd56a; }
.fact-grid div { border: 3px solid #18243e; background: #eef3ff; box-shadow: 4px 4px 0 #71e2c2; }
.next-discovery { border: 3px solid #18243e; box-shadow: 7px 7px 0 #ffd56a; }
.mymap-hero { background-color: #eaf8ff; background-image: radial-gradient(rgba(66,103,237,.12) 1.4px, transparent 1.4px); background-size: 20px 20px; border-bottom: 4px solid #18243e; }
.mymap-hero h1 { font-weight: 800; }.mymap-hero h1 em { color: #ff685b; text-shadow: 4px 4px 0 #ffd65f; }
.mymap-stats div { border: 3px solid #18243e; }
.empty-state { border: 3px dashed #4267ed; }

@media (max-width: 980px) {
  .hero-shell { grid-template-columns: 1fr; }
  .hero-copy { min-height: 510px; }
  .hero-visual { margin: 0 5vw 7vw; height: 65vw; min-height: 510px; }
  .theme-card:first-child { grid-column: auto; }
  .theme-grid { grid-template-columns: repeat(2, 1fr); }
  .theme-card { min-height: 400px; }.theme-media { height: 290px; }
}

@media (max-width: 680px) {
  .hero-copy { min-height: 500px; padding-top: 60px; }
  .hero-copy h1 { font-size: clamp(3.7rem, 18vw, 5.4rem); }
  .hero-visual { min-height: 405px; height: 105vw; margin: 0 14px 28px; border-radius: 22px; }
  .hero-visual img { object-position: 63% center; }
  .comic-bubble { right: 12px; bottom: 16px; padding: 10px 13px; }
  .comic-bubble b { font-size: .82rem; }
  .visual-node-game { display: none; }.visual-node-food { left: 12px; bottom: 18px; }
  .visual-count { left: 12px; top: 12px; }
  .section-heading > p { margin-top: 18px; }
  .theme-grid { grid-template-columns: 1fr; }.theme-card { min-height: 390px; }.theme-media { height: 285px; }
  .map-intro p:not(.section-number) { font-size: 1rem; }
  .story-block { grid-template-columns: 1fr; }.story-index { width: 54px; height: 54px; }
  .detail-hero { min-height: 530px; background-image: linear-gradient(0deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.72) 45%, rgba(255,255,255,.05) 78%), var(--detail-image); justify-content: flex-end; }
  .detail-hero h1, .detail-hero h2, .detail-kicker { max-width: 100%; }
  .detail-hero h1 { font-size: clamp(2.8rem, 15vw, 4.5rem); }
}

/* Company story manga library */
.story-library { max-width: none; background: #fff6ca; border-top: 4px solid #18243e; border-bottom: 4px solid #18243e; padding-left: max(6vw, calc((100vw - 1400px)/2 + 6vw)); padding-right: max(6vw, calc((100vw - 1400px)/2 + 6vw)); }
.story-heading h2 { font-weight: 800; transform: rotate(-1deg); }
.story-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.story-card { min-height: 390px; border: 4px solid #18243e; border-radius: 24px; background: white; padding: 0; overflow: hidden; display: grid; grid-template-rows: 1fr auto; text-align: left; cursor: pointer; box-shadow: 9px 9px 0 #18243e; transition: .18s ease; }
.story-card:hover { transform: translate(-2px,-7px) rotate(-.5deg); box-shadow: 12px 15px 0 #4267ed; }
.story-card-wide { grid-column: 1 / -1; min-height: 480px; grid-template-columns: 1.7fr .7fr; grid-template-rows: 1fr; }
.story-card-image { display: block; min-height: 275px; overflow: hidden; border-bottom: 4px solid #18243e; }
.story-card-wide .story-card-image { border-bottom: 0; border-right: 4px solid #18243e; }
.story-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.story-card:hover .story-card-image img { transform: scale(1.035); }
.story-card-info { padding: 23px; display: flex; flex-direction: column; justify-content: center; background: white; }
.story-card-info small { color: #4267ed; font-weight: 800; letter-spacing: .06em; }
.story-card-info strong { font-size: clamp(1.45rem,2.7vw,2.6rem); line-height: 1.25; letter-spacing: -.05em; margin-top: 10px; }
.story-card-info i { align-self: flex-start; margin-top: 24px; padding: 8px 13px; border-radius: 10px; background: #ffd65f; border: 2px solid #18243e; font-style: normal; font-weight: 800; }
.story-card:nth-child(2) .story-card-info { background: #eaf0ff; }.story-card:nth-child(3) .story-card-info { background: #e3f9f1; }

/* Company rankings */
.ranking-section { max-width: none; background: #dff4ff; border-bottom: 4px solid #18243e; padding-left: max(6vw, calc((100vw - 1400px)/2 + 6vw)); padding-right: max(6vw, calc((100vw - 1400px)/2 + 6vw)); overflow: hidden; position: relative; }
.ranking-section:before { content: "DISCOVER"; position: absolute; right: -1.5vw; top: 36px; color: rgba(66,103,237,.08); font: 800 clamp(4rem,10vw,9rem)/.8 "DM Sans",sans-serif; letter-spacing: -.06em; pointer-events: none; }
.ranking-heading { position: relative; z-index: 1; }
.ranking-heading h2 { font-weight: 800; letter-spacing: -.055em; }
.ranking-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; position: relative; z-index: 2; }
.ranking-tabs button { min-height: 52px; padding: 0 20px; border: 3px solid #18243e; border-radius: 999px; background: white; color: #18243e; font-weight: 800; font-size: .95rem; cursor: pointer; box-shadow: 4px 4px 0 #18243e; transition: .18s ease; }
.ranking-tabs button span { margin-right: 6px; }
.ranking-tabs button:hover { transform: translateY(-3px); }
.ranking-tabs button.is-active { background: #4267ed; color: white; box-shadow: 4px 4px 0 #ffcf5a; }
.ranking-board { display: grid; grid-template-columns: minmax(300px,.78fr) minmax(470px,1.22fr); gap: 22px; position: relative; z-index: 1; }
.ranking-top { min-height: 100%; }
.ranking-winner { width: 100%; min-height: 470px; height: 100%; padding: 30px; border: 4px solid #18243e; border-radius: 26px; background: var(--rank-color); color: #18243e; text-align: left; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; gap: 14px; position: relative; overflow: hidden; cursor: pointer; box-shadow: 10px 10px 0 var(--rank-accent); transition: .2s ease; }
.ranking-winner:hover { transform: translate(-3px,-5px); box-shadow: 13px 15px 0 var(--rank-accent); }
.ranking-winner:after { content: "01"; position: absolute; right: -10px; bottom: -45px; color: rgba(255,255,255,.34); font: 800 13rem/1 "DM Sans",sans-serif; letter-spacing: -.08em; }
.winner-crown { width: 54px; height: 54px; border: 3px solid #18243e; border-radius: 50%; background: #ffcf5a; display: grid; place-items: center; font-size: 1.7rem; transform: rotate(-8deg); }
.winner-rank { align-self: center; border: 2px solid #18243e; border-radius: 999px; background: white; padding: 7px 11px; font: 800 .78rem "DM Sans",sans-serif; letter-spacing: .08em; }
.winner-copy { grid-column: 1 / -1; align-self: end; position: relative; z-index: 1; }
.winner-copy small,.winner-copy em { display: block; font-style: normal; font-weight: 700; }
.winner-copy small { color: #263853; }
.winner-copy strong { display: block; margin: 8px 0; font-size: clamp(2.4rem,4.2vw,4.8rem); line-height: 1; letter-spacing: -.07em; }
.winner-copy em { max-width: 300px; font-size: .92rem; }
.winner-value { align-self: end; font: 800 clamp(1.8rem,3vw,3rem)/1 "DM Sans",sans-serif; letter-spacing: -.05em; position: relative; z-index: 1; }
.winner-arrow { align-self: end; justify-self: end; width: 54px; height: 54px; border: 3px solid #18243e; border-radius: 50%; background: white; display: grid; place-items: center; font-size: 1.5rem; position: relative; z-index: 1; }
.ranking-list { display: grid; gap: 12px; }
.ranking-row { min-height: 106px; padding: 16px 18px; border: 3px solid #18243e; border-radius: 18px; background: white; color: #18243e; display: grid; grid-template-columns: 50px minmax(180px,1fr) auto 38px; grid-template-rows: 1fr 10px; gap: 9px 14px; align-items: center; text-align: left; cursor: pointer; box-shadow: 5px 5px 0 #18243e; transition: .18s ease; }
.ranking-row:hover { transform: translateX(5px); box-shadow: 1px 5px 0 #4267ed; }
.ranking-position { grid-row: 1 / 3; width: 45px; height: 45px; border-radius: 13px; background: var(--rank-color); border: 2px solid #18243e; display: grid; place-items: center; font: 800 1.25rem "DM Sans",sans-serif; }
.ranking-company b { display: block; font-size: 1.12rem; }.ranking-company small { display: block; color: #5a6980; margin-top: 3px; font-size: .78rem; }
.ranking-value { font: 800 1.25rem "DM Sans",sans-serif; white-space: nowrap; }
.ranking-bar { grid-column: 2 / 4; height: 10px; border-radius: 99px; background: #e7ecf3; overflow: hidden; }
.ranking-bar i { display: block; width: var(--bar-width); height: 100%; border-radius: inherit; background: var(--rank-color); transition: width .45s ease; }
.ranking-open { grid-column: 4; grid-row: 1 / 3; justify-self: center; font-size: 1.25rem; }
.ranking-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-start; gap: 25px; margin-top: 10px; padding: 19px 0 0; border-top: 1px solid rgba(24,36,62,.24); }
.ranking-foot p { max-width: 670px; margin: 0; color: #52627b; font-size: .8rem; line-height: 1.7; }
.ranking-foot div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 11px; font-size: .75rem; }
.ranking-foot div span { color: #52627b; }.ranking-foot a { color: #243fba; text-decoration-thickness: 1px; }

.story-reader { --story-color:#4267ed; min-height: calc(100vh - 76px); max-width: 1320px; margin: auto; padding: 44px 5vw 110px; }
.story-reader-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 45px; }
.story-reader-nav .back-button { border: 3px solid #18243e; background: white; box-shadow: 4px 4px 0 #18243e; }
.story-reader-nav > span { font: 800 .8rem "DM Sans",sans-serif; color: #4267ed; letter-spacing: .12em; }
.story-reader-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 35px; }
.story-reader-header small { display: inline-block; padding: 7px 12px; border: 2px solid #18243e; border-radius: 999px; background: var(--story-color); color: white; font-weight: 800; }
.story-reader-header h1 { font-size: clamp(2.7rem,6.2vw,6.5rem); line-height: 1.02; letter-spacing: -.07em; margin: 18px 0 12px; max-width: 900px; font-weight: 800; text-shadow: 5px 5px 0 #ffd65f; }
.story-reader-header p { margin: 0; color: #53627d; font-weight: 700; font-size: 1.1rem; }
.story-stamp { flex: 0 0 auto; padding: 12px 17px; border: 3px solid #18243e; background: #71e2c2; border-radius: 12px; font-weight: 800; transform: rotate(3deg); box-shadow: 4px 4px 0 #18243e; }
.story-comic { margin: 0; padding: 10px; background: white; border: 4px solid #18243e; border-radius: 22px; box-shadow: 10px 10px 0 var(--story-color); }
.story-comic img { width: 100%; display: block; border-radius: 12px; }
.story-comic figcaption { text-align: right; font-size: .72rem; color: #77849a; padding: 7px 6px 0; }
.story-chapters { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin: 60px 0; }
.story-chapters section { position: relative; border: 3px solid #18243e; border-radius: 18px; background: white; padding: 22px 18px 22px; box-shadow: 5px 5px 0 #afc0fa; }
.story-chapters section:nth-child(2) { box-shadow-color:#ffad9f; }.story-chapters section:nth-child(3) { box-shadow-color:#ffd56a; }.story-chapters section:nth-child(4) { box-shadow-color:#71e2c2; }
.story-chapters section > span { position: absolute; right: 12px; top: 10px; font: 800 2.8rem/1 "DM Sans",sans-serif; color: rgba(66,103,237,.12); }
.story-chapters small { color: #4267ed; font-weight: 900; letter-spacing: .1em; }
.story-chapters h2 { font-size: 1.25rem; line-height: 1.45; margin: 12px 0 8px; }
.story-chapters p { color: #596983; font-size: .88rem; line-height: 1.75; margin: 0; }
.story-takeaway { display: flex; align-items: center; gap: 20px; border: 4px solid #18243e; border-radius: 20px; padding: 24px 28px; background: #fff0a8; box-shadow: 7px 7px 0 #18243e; }
.story-takeaway > span { font-size: 2.5rem; }.story-takeaway small { display: block; color: #6a5c24; font-weight: 800; }.story-takeaway strong { display: block; margin-top: 4px; font-size: 1.18rem; }
.story-reader-actions { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin: 36px 0 70px; }
.story-reader-actions a { color: #56647a; font-size: .8rem; }
.story-reader-actions button { border: 3px solid #18243e; background: #4267ed; color: white; padding: 13px 18px; border-radius: 12px; box-shadow: 4px 4px 0 #18243e; font-weight: 800; cursor: pointer; }
.next-story { width: 100%; border: 4px solid #18243e; border-radius: 22px; background: #e9f9f4; padding: 28px 32px; display: grid; grid-template-columns: 1fr auto; text-align: left; cursor: pointer; box-shadow: 8px 8px 0 #71e2c2; }
.next-story small { grid-column: 1; color: #4267ed; font-weight: 800; }.next-story strong { grid-column: 1; font-size: 1.6rem; line-height: 1.35; }.next-story span { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; border: 3px solid #18243e; background: #ffd65f; font-size: 1.5rem; }

@media (max-width: 850px) {
  .story-card-wide { grid-template-columns: 1fr; grid-template-rows: 1fr auto; min-height: 440px; }
  .story-card-wide .story-card-image { border-right: 0; border-bottom: 4px solid #18243e; }
  .story-card-info strong { font-size: 1.55rem; }
  .story-chapters { grid-template-columns: repeat(2,1fr); }
  .ranking-board { grid-template-columns: 1fr; }
  .ranking-winner { min-height: 390px; }
  .ranking-foot { flex-direction: column; }.ranking-foot div { justify-content: flex-start; }
}

@media (max-width: 680px) {
  .story-card-grid { grid-template-columns: 1fr; }
  .story-card-wide { grid-column: auto; }
  .story-card { min-height: 370px; }.story-card-image { min-height: 250px; }
  .story-reader { padding: 28px 18px 90px; }
  .story-reader-header { display: block; }.story-reader-header h1 { font-size: 3rem; }.story-stamp { display: inline-block; margin-top: 22px; }
  .story-comic { padding: 5px; border-radius: 16px; box-shadow: 6px 7px 0 var(--story-color); overflow-x: auto; }
  .story-comic img { width: 950px; max-width: none; }
  .story-comic:after { content: "← 横にスワイプ →"; display: block; text-align: center; padding: 8px; font-size: .72rem; color: #596983; }
  .story-chapters { grid-template-columns: 1fr; gap: 12px; margin: 45px 0; }
  .story-takeaway { align-items: flex-start; padding: 20px; }.story-takeaway strong { font-size: 1rem; }
  .story-reader-actions { align-items: stretch; flex-direction: column-reverse; }.story-reader-actions button { width: 100%; }
  .ranking-section { padding-left: 18px; padding-right: 18px; }
  .ranking-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .ranking-tabs button { min-height: 49px; padding: 0 5px; font-size: .82rem; box-shadow: 3px 3px 0 #18243e; }
  .ranking-winner { min-height: 340px; padding: 22px; border-radius: 20px; box-shadow: 7px 7px 0 var(--rank-accent); }
  .winner-copy strong { font-size: 2.7rem; }.winner-value { font-size: 1.65rem; }
  .ranking-row { min-height: 112px; padding: 14px 12px; grid-template-columns: 44px minmax(0,1fr) auto; gap: 8px 10px; }
  .ranking-position { width: 40px; height: 40px; }.ranking-open { display: none; }
  .ranking-company small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 43vw; }
  .ranking-value { font-size: 1rem; }.ranking-bar { grid-column: 2 / 4; }
  .ranking-foot { margin-top: 4px; }.ranking-foot div { gap: 9px 14px; }
}

/* Readable, resilient comparison and company layouts */
html { scroll-padding-top: 96px; }
.company-source { display: inline-block; margin: 6px 0 18px; color: #284cca; font-size: 1rem; font-weight: 700; }
.ranking-board { grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); align-items: start; }
.ranking-top { position: sticky; top: 95px; }
.ranking-winner { height: auto; }
.winner-copy strong { overflow-wrap: anywhere; line-height: 1.15; }
.ranking-company { min-width: 0; }.ranking-company b { overflow-wrap: anywhere; }
.ranking-company small { font-size: .875rem; white-space: normal; }
.ranking-row { grid-template-columns: 45px minmax(0,1fr) auto 22px; }
.ranking-foot p,.ranking-foot div { font-size: .875rem; }
.ranking-heading > p { font-size: 1rem; }
.theme-copy small { font-size: .875rem; }
.desktop-nav { flex-wrap: wrap; }
.company-name { overflow-wrap: anywhere; }
button:focus-visible,a:focus-visible { outline: 3px solid #4267ed; outline-offset: 5px; }
.search-results { max-height: 60vh; overflow-y: auto; }
@media (max-width: 980px) { .ranking-board { grid-template-columns: 1fr; }.ranking-top { position: static; } }
@media (max-width: 680px) {
 .ranking-row { grid-template-columns: 40px minmax(0,1fr); }
 .ranking-position { grid-row: 1 / 4; }
 .ranking-value { grid-column: 2; font-size: 1.15rem; }
 .ranking-bar { grid-column: 2; }
 .ranking-company small { max-width: none; white-space: normal; }
 .winner-copy strong { font-size: clamp(2rem,9vw,3rem); }
 .mobile-nav button { font-size: .875rem; }
}

/* Interactive discovery, learning and manga quizzes */
.discovery-theme-link{display:block;margin-top:18px;color:#243451;font-weight:700;font-size:16px}.discovery-detail{max-width:1120px;margin:auto;padding:48px 24px 90px;outline:none}.discovery-detail h1{font-size:clamp(28px,5vw,48px);line-height:1.4;margin:24px 0 12px;color:#172742}.discovery-detail>p{font-size:16px}.question-progress{display:flex;gap:10px;max-width:300px;margin:24px 0}.question-progress i{height:9px;background:#dde8f3;flex:1;border-radius:9px}.question-progress .is-done{background:#4267ed}.discovery-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:36px 0}.discovery-choices button{background:#e1f8ee;border:3px solid #243451;box-shadow:5px 5px 0 #243451;border-radius:22px;padding:40px 18px;color:#172742;min-height:200px}.discovery-choices button:nth-child(2){background:#fff0a6}.discovery-choices button:nth-child(3){background:#dae8ff}.discovery-choices span{display:block;font-size:56px;margin-bottom:22px}.discovery-choices b{font-size:20px;line-height:1.5}.discovery-choices button:hover{transform:translateY(-4px)}.discovery-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:32px 0}.discovery-results>div{min-width:0}.discovery-results p span{display:block;background:#e4f4fd;padding:9px 12px;margin:8px 0;border-radius:10px;font-size:14px}.discovery-restart,.quiz-retry{border:2px solid #243451;background:#fff0a6;padding:14px 20px;border-radius:12px;font-size:16px;font-weight:700;margin-top:20px}.career-section{margin:40px 0;background:#e3f8ee;border:3px solid #243451;border-radius:20px;padding:28px}.career-section>small,.manga-quiz>small{font-size:14px;font-weight:700}.career-section h3{font-size:24px;line-height:1.5;margin:12px 0 20px}.career-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.career-grid article{background:white;border-radius:15px;padding:22px;min-width:0}.career-grid h4{font-size:19px;margin:0 0 12px}.career-grid p{font-size:16px;line-height:1.7}.career-grid span{display:block;font-size:14px;margin:20px 0 8px;color:#42576b}.career-grid b{font-size:16px;line-height:1.7}.career-section details,.discovery-detail details{margin-top:22px;font-size:14px;line-height:1.8}.career-section summary,.discovery-detail summary{cursor:pointer;font-weight:700}.manga-quiz{background:#fff0a6;border:3px solid #243451;border-radius:22px;padding:28px;margin:32px 0;box-shadow:5px 5px 0 #243451}.manga-quiz h2{font-size:24px;line-height:1.5;margin:14px 0 22px}.quiz-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.quiz-options button{border:2px solid #243451;background:white;border-radius:12px;padding:18px 12px;font-size:16px;line-height:1.5;color:#172742}.quiz-options button:disabled{opacity:1;cursor:default}.quiz-options .is-correct{background:#abefd5;border:3px solid #166747}.manga-quiz p{font-size:16px;line-height:1.8}.quiz-retry[hidden]{display:none}.ranking-tabs{flex-wrap:wrap}.ranking-value{white-space:normal;overflow-wrap:anywhere}
@media(max-width:680px){.discovery-detail{padding:28px 20px 90px}.discovery-choices,.discovery-results,.career-grid,.quiz-options{grid-template-columns:1fr}.discovery-choices{gap:18px}.discovery-choices button{min-height:100px;padding:20px;display:flex;align-items:center;gap:22px;text-align:left}.discovery-choices span{font-size:40px;margin:0}.career-section,.manga-quiz{padding:20px}.ranking-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Keep company content inside the viewport, including intrinsic grid sizes. */
.detail-main, .story-block, .story-content, .process, .fact-grid, .fact-grid > div { min-width: 0; }
.story-content { overflow-wrap: anywhere; }
.process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; gap: 16px; padding: 0 5px 5px 0; }
.process > div { min-width: 0; padding: 20px 12px; }
.process small { display: block; font-size: .875rem; line-height: 1.7; overflow-wrap: anywhere; }
.process div:nth-child(2n) { box-shadow: 4px 4px 0 #ff9b8e; }
.process div:nth-child(3n) { box-shadow: 4px 4px 0 #ffd56a; }
.fact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-right: 5px; }
.story-index, .ranking-position, .visual-count strong, .mymap-stats strong, [data-saved-count], .ranking-value, .winner-value { font-variant-numeric: tabular-nums; }
.story-index, .ranking-position { display: flex; align-items: center; justify-content: center; line-height: 1; letter-spacing: 0; padding: 0; flex-shrink: 0; }
@media (max-width: 980px) {
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .process div:not(:last-child):after { content: none; }
}
@media (max-width: 680px) {
  .story-block { grid-template-columns: minmax(0, 1fr); }
  .detail-main { width: 100%; max-width: 100%; }
  .fact-grid { grid-template-columns: minmax(0, 1fr); }
  .mobile-nav { height: calc(70px + env(safe-area-inset-bottom)); }
  .mobile-nav button { min-width: 0; }
  .mobile-nav button > span { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 26px; margin: 0 auto; }
  .mobile-nav i { position: absolute; top: -6px; left: 24px; width: auto; min-width: 20px; height: 20px; padding: 0 4px; display: flex; align-items: center; justify-content: center; font: 700 .75rem/1 "DM Sans", sans-serif; }
}
@media (max-width: 359px) {
  .process { grid-template-columns: minmax(0, 1fr); }
}

/* SVG geometry keeps navigation and ranking icons optically aligned. */
.ui-icon { display: block; width: 26px; height: 26px; flex: none; }
.winner-crown { display: flex; align-items: center; justify-content: center; transform: none; padding: 0; line-height: 1; }
.winner-crown .ui-icon { width: 28px; height: 28px; }
@media (max-width: 680px) {
  .mobile-nav button > span { width: 28px; height: 28px; }
  .mobile-nav .ui-icon { width: 26px; height: 26px; }
}

/* Curated company discovery and concise workday panels. */
.everyday-section { background: #e7f8ef; }
.everyday-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.everyday-card { min-width:0; background:white; border:3px solid #18243e; border-radius:22px; box-shadow:5px 5px 0 #18243e; overflow:hidden; }
.everyday-scene { background:var(--feature-color); padding:24px; display:flex; align-items:center; gap:14px; min-height:100px; }
.everyday-scene span { font-size:40px; line-height:1; flex:none; }
.everyday-scene small { font-size:16px; font-weight:700; overflow-wrap:anywhere; }
.everyday-copy { padding:24px; }
.feature-company { font-size:14px; font-weight:700; color:#42536b; }
.everyday-copy h3 { font-size:22px; line-height:1.55; margin:12px 0; }
.everyday-copy p { font-size:16px; line-height:1.8; }
.everyday-copy button { background:#fff0a6; border:2px solid #18243e; border-radius:12px; padding:12px 14px; width:100%; font-size:16px; font-weight:700; margin-top:16px; }
.feature-selection { margin-top:28px; font-size:14px; line-height:1.8; }
.feature-selection summary,.workday-section summary { cursor:pointer; font-weight:700; }
.workday-section { background:#eff4ff; border:3px solid #18243e; border-radius:22px; padding:28px; margin:40px 0; min-width:0; }
.workday-section header>small { font-size:14px; color:#4267ed; font-weight:700; }
.workday-section h3 { font-size:26px; line-height:1.5; margin:14px 0; }
.workday-section p { font-size:16px; line-height:1.8; }
.workday-section .workday-role { font-size:20px; font-weight:700; margin:8px 0; }
.workday-section .workday-employer { font-size:14px; color:#42536b; margin:8px 0; }
.workday-section .workday-disclaimer { font-size:14px; color:#42536b; }
.workday-panels { list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:26px 0; }
.workday-panels li { min-width:0; background:white; border:2px solid #18243e; border-radius:16px; padding:22px; position:relative; }
.workday-step { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#4267ed; color:white; font:700 16px/1 'DM Sans',sans-serif; font-variant-numeric:tabular-nums; }
.workday-emoji { display:block; font-size:40px; margin:18px 0; line-height:1; }
.workday-panels small { font-size:14px; font-weight:700; color:#4267ed; }
.workday-panels h4 { font-size:20px; line-height:1.5; margin:10px 0; }
.workday-notes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.workday-notes>div { background:#fff0a6; border-radius:14px; padding:20px; }
.workday-notes small,.feature-proof small { font-size:14px; font-weight:700; }
.workday-notes p { margin-bottom:0; }
.workday-section details { margin-top:24px; font-size:14px; line-height:1.8; }
.workday-section a { color:#2855c6; font-size:16px; text-decoration:underline; }
.source-date { display:block; font-size:14px; margin-top:10px; }
.feature-proof { border-top:1px solid #c4cfe4; margin-top:24px; padding-top:24px; }
@media(max-width:980px){.everyday-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workday-panels{grid-template-columns:minmax(0,1fr)}}
@media(max-width:680px){.everyday-grid,.workday-notes{grid-template-columns:minmax(0,1fr)}.everyday-copy,.workday-section{padding:20px}.workday-section h3{font-size:24px}}

/* Accessible navigation and resilient layouts for the published multi-page site. */
[hidden] { display: none !important; }
a.brand, .desktop-nav a, .mobile-nav a, a.company-card, a.story-card,
a.ranking-winner, a.ranking-row, a.next-story, a.primary-cta, a.secondary-cta,
a.back-button, .next-discovery a, .story-reader-actions a[data-story-company],
.everyday-copy a[data-everyday-company], a.search-result {
  color: inherit;
  text-decoration: none;
}
.desktop-nav a { border: 0; padding: 10px 15px; border-radius: 12px; font-size: .88rem; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.desktop-nav a:hover { background: #edf1fb; }
.desktop-nav a.my-map-link { color: white; background: #5b4de8; margin-left: 8px; }
.desktop-nav a[aria-current], .mobile-nav a[aria-current], .mobile-nav button[aria-current] { color: #4338ca; background: #eeedff; }
.desktop-nav a.my-map-link[aria-current] { background: #4434c5; color: white; }
a.primary-cta, a.secondary-cta, a.back-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
a.primary-cta { color: white; }
a.secondary-cta { color: white; }
a.company-card { display: block; }
a.back-button { width: fit-content; }
.next-discovery a { background: var(--yellow); color: var(--ink); border: 0; border-radius: 999px; padding: 15px 22px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; flex: none; }
.story-reader-actions a[data-story-company] { border: 3px solid #18243e; background: #4267ed; color: white; padding: 13px 18px; border-radius: 12px; box-shadow: 4px 4px 0 #18243e; font-weight: 800; font-size: 1rem; min-height: 48px; }
.everyday-copy a[data-everyday-company] { display: flex; align-items: center; justify-content: center; background: #fff0a6; border: 2px solid #18243e; border-radius: 12px; padding: 12px 14px; width: 100%; font-size: 16px; font-weight: 700; margin-top: 16px; min-height: 48px; }
a.search-result { display: flex; }
button, a, input, summary { -webkit-tap-highlight-color: rgba(66,103,237,.18); }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid #4338ca; outline-offset: 4px; }
.search-input-wrap:focus-within { box-shadow: 0 0 0 4px #dad5ff; }
.search-input-wrap input:focus-visible { outline-offset: 1px; }
.search-top button { width: 44px; height: 44px; flex: none; }
.search-open { overflow: hidden; overscroll-behavior: none; }
.search-box { overscroll-behavior: contain; }
.search-results { overscroll-behavior: contain; }
.search-result { min-height: 60px; }
.search-result small { line-height: 1.6; }
.search-empty { text-align: left; line-height: 1.8; }
.search-empty p { margin: 0 0 12px; }
.search-empty button { min-height: 44px; border: 2px solid #18243e; border-radius: 10px; background: #fff0a6; padding: 10px 16px; font-weight: 700; cursor: pointer; }
#search-result-count { margin: 14px 0 8px; color: #42536f; font-size: .9rem; }
.skip-link { position: fixed; top: 10px; left: 12px; z-index: 150; padding: 12px 18px; min-height: 44px; border: 2px solid #18243e; border-radius: 10px; background: white; color: #18243e; font-weight: 700; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.hero-summary { max-width: 30em; margin: 24px 0 0; font-size: clamp(.9rem, 1.1vw, 1rem); line-height: 1.8; color: #42536f; }
.breadcrumbs { max-width: 1320px; margin: 0 auto; padding: 18px 5vw; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: .875rem; color: #42536f; }
.breadcrumbs a { min-height: 44px; display: inline-flex; align-items: center; color: #4338ca; text-underline-offset: .2em; }
.breadcrumbs [aria-current] { overflow-wrap: anywhere; }
.storage-note { max-width: 65ch; margin-top: 22px; font-size: .95rem; line-height: 1.8; color: #dbe5fa; }
.site-footer { background: #f0f4fb; color: #243451; border-top: 3px solid #18243e; padding: 48px max(24px,6vw); }
.site-footer p { max-width: 60em; margin: 12px 0; line-height: 1.8; }
.site-footer a { color: #3349b7; text-underline-offset: .2em; }
.company-directory { max-width: 1400px; margin: 0 auto 32px; }
.company-directory h2 { margin: 0 0 18px; font-size: 1.25rem; }
#company-directory-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px 24px; }
#company-directory-list a { min-height: 44px; display: flex; align-items: center; width: fit-content; overflow-wrap: anywhere; font-size: .95rem; }
.site-footer > :not(.company-directory) { max-width: 1400px; margin-left: auto; margin-right: auto; }
@media (max-width: 980px) {
  .site-header { height: auto; min-height: 76px; gap: 12px; }
  .desktop-nav { justify-content: flex-end; }
  .desktop-nav a, .desktop-nav button { padding-left: 10px; padding-right: 10px; }
  #company-directory-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .site-header { min-height: 64px; }
  .mobile-nav a { display: grid; place-content: center; gap: 2px; position: relative; font-size: .875rem; font-weight: 700; min-width: 0; min-height: 56px; }
  .mobile-nav a > span { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0 auto; }
  .mobile-nav a[aria-current] { box-shadow: inset 0 3px 0 #5b4de8; }
  .mobile-nav a:not([aria-current]) { color: #243451; }
  .search-box { height: 100vh; height: 100dvh; min-height: 0; max-height: 100vh; max-height: 100dvh; overflow: hidden; display: flex; flex-direction: column; padding: max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom)); }
  .search-top, .search-input-wrap, .search-hint, #search-result-count { flex: none; }
  .search-results { min-height: 0; max-height: none; flex: 1; overflow-y: auto; padding-right: 4px; }
  .search-input-wrap { margin-top: 18px; }
  .search-input-wrap input { min-height: 52px; font-size: 16px; }
  .toast { bottom: calc(82px + env(safe-area-inset-bottom)); }
  .hero-summary { font-size: .95rem; }
  .breadcrumbs { padding: 10px 20px; }
  .storage-note { font-size: .9rem; }
  .story-reader-actions a[data-story-company] { width: 100%; text-align: center; }
  #company-directory-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 18px; }
  .site-footer { padding: 34px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The wider company catalogue is a clear second route alongside curated discovery. */
.prime-promo{background:linear-gradient(115deg,#e0f5ed,#e9e6ff);border-top:3px solid #18243e;border-bottom:3px solid #18243e}.prime-promo h2{font-size:clamp(28px,4vw,48px);line-height:1.4;letter-spacing:-.04em}.prime-promo .primary-cta{padding:16px 24px;background:#5b4de8;color:white;border-radius:14px;margin-top:12px}.prime-promo small{display:block;margin-top:18px;color:#465570}.prime-search-link a{color:#4338ca;font-size:15px;font-weight:700;min-height:44px;display:flex;align-items:center}.prime-bookmark{padding:24px}.prime-bookmark h3{margin:0 0 12px;font-size:20px}.prime-bookmark p{margin:0;font-size:14px;color:#42536f}.desktop-nav{gap:0}.desktop-nav a,.desktop-nav button{padding-left:10px;padding-right:10px}@media(min-width:681px) and (max-width:1100px){.site-header{padding:10px 20px;min-height:76px;height:auto;flex-wrap:wrap}.desktop-nav{flex-wrap:wrap;justify-content:flex-start}.desktop-nav a,.desktop-nav button{font-size:13px;padding:9px}.brand{flex:none}}@media(max-width:680px){.hero-copy .primary-cta{width:100%;max-width:400px}.hero-copy{padding-bottom:40px}.prime-promo{padding:30px 20px}.prime-search-link{flex:none}.hero-summary{margin-top:18px}.company-directory summary{min-height:44px;padding:10px 0;font-weight:700;cursor:pointer}}

/* Readable text and reachable controls across the site. */
:where(a, button, input, select, summary):focus-visible {
  outline: 3px solid #5144c8;
  outline-offset: 3px;
}
:where(main, section, article, h1, h2, h3)[id] { scroll-margin-top: 84px; }
@media (max-width: 680px) {
  :where(.detail-main, .story-reader, .story-content, .section) {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  :is(.story-content, .story-chapters, .career-grid, .workday-section, .detail-main) p {
    font-size: 1rem;
    line-height: 1.8;
  }
  :is(.back-button, .company-source, .save-button, .quiz-options button) {
    min-height: 44px;
  }
  :is(.back-button, .company-source) {
    display: inline-flex;
    align-items: center;
  }
  .detail-hero h1, .story-reader h1 { overflow-wrap: anywhere; }
  .search-results { overscroll-behavior: contain; }
}