:root {
  --ink: #1f2128;
  --ink-2: #292c35;
  --paper: #ffffff;
  --soft: #f6f5f3;
  --line: #dfdde0;
  --muted: #696a70;
  --magenta: #c90063;
  --magenta-light: #f12685;
  --cyan: #009fd7;
  --navy: #075b9b;
  --gold: #c99a31;
  --gold-light: #f3de9a;
  --orange: #f4a000;
  --green: #2ca85e;
  --radius: 24px;
  --shadow: 0 24px 70px rgba(28, 29, 35, .12);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

img { display: block; max-width: 100%; height: auto; }
button, summary { font: inherit; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  transform: translateY(-180%);
  padding: 10px 16px;
  color: #fff;
  background: var(--ink);
  border-radius: 8px;
}
.skip-link:focus { transform: none; }

.tagjob-gold { overflow: hidden; }
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.section { padding: clamp(90px, 10vw, 150px) 0; }
.section--ink { color: #fff; background: var(--ink); }
.section--soft { background: var(--soft); }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.28; letter-spacing: -.04em; }
h1 { font-size: clamp(3rem, 4.7vw, 4.7rem); }
h2 { margin-bottom: 32px; font-size: clamp(2.15rem, 3.4vw, 3.7rem); }
h3 { font-size: 1.28rem; }
p { margin-bottom: 1.2em; }
em { color: var(--magenta); font-style: normal; }

.kicker {
  margin-bottom: 16px;
  color: var(--magenta);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
}
.section--ink .kicker { color: #ff74b8; }
.section-intro { max-width: 760px; color: var(--muted); font-size: 1.02rem; }
.section--ink .section-intro { color: #c3c4c8; }
.caption { margin: 26px 0 0; color: var(--muted); font-size: .8rem; }
.large-copy { font-size: 1.22rem; font-weight: 800; }
.heading-chunk { display: inline-block; white-space: nowrap; }

.section-heading { margin-bottom: 48px; }
.section-heading h2 { margin-bottom: 22px; }
.section-heading--centered { text-align: center; }
.section-heading--centered .section-intro { margin-inline: auto; }
.section-heading--accent h2::after,
.heading-row--accent h2::after {
  display: block;
  width: min(250px, 46vw);
  height: 6px;
  margin: 24px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--magenta), var(--orange), var(--cyan));
  content: "";
}

.hero {
  position: relative;
  min-height: auto;
  padding: 58px 0 72px;
  border-top: 7px solid var(--magenta);
  color: #fff;
  background:
    radial-gradient(circle at 12% 10%, rgba(201,0,99,.2), transparent 34%),
    radial-gradient(circle at 92% 88%, rgba(0,159,215,.15), transparent 36%),
    #151821;
}
.hero__glow { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.hero__glow--pink { top: -210px; left: -150px; width: 520px; height: 520px; background: rgba(201,0,99,.12); }
.hero__glow--blue { right: -130px; bottom: -230px; width: 560px; height: 560px; background: rgba(0,159,215,.1); }
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(380px, 1.05fr);
  gap: clamp(42px, 5vw, 76px);
  align-items: center;
  min-height: 0;
}
.member-badge {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 22px;
  padding: 7px 14px;
  border: 1px solid rgba(201,154,49,.5);
  border-radius: 999px;
  color: var(--gold-light);
  background: rgba(201,154,49,.08);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
}
.hero h1 { max-width: 760px; margin-bottom: 26px; color: #fff; font-size: clamp(2.45rem, 3.35vw, 3.6rem); letter-spacing: -.055em; }
.hero h1 em { color: #fff; }
.hero-title__phrase { display: inline-block; white-space: nowrap; }
.brand { display: flex; gap: 9px; align-items: center; margin-bottom: 28px; }
.brand__word { font-size: 2.35rem; font-weight: 950; letter-spacing: .02em; line-height: 1; }
.brand__word--accent { color: var(--magenta); }
.brand__mark { width: 58px; color: var(--cyan); }
.hero__aside { display: grid; gap: 18px; align-self: center; }
.hero__visual { width: min(100%, 560px); margin: 0 auto; }
.hero__visual img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 30px 52px rgba(0,0,0,.38)); }
.hero__lead { max-width: 790px; margin-bottom: 28px; color: rgba(255,255,255,.74); font-size: 1.05rem; }
.hero__eligibility {
  display: grid;
  gap: 5px;
  max-width: 680px;
  margin: -4px 0 26px;
  padding: 16px 18px;
  border: 1px solid rgba(243,222,154,.42);
  border-left: 4px solid var(--gold-light);
  border-radius: 12px;
  background: rgba(201,154,49,.1);
}
.hero__eligibility strong { color: #fff; font-size: 1rem; }
.hero__eligibility span { color: var(--gold-light); font-size: .86rem; font-weight: 800; }
.hero__action { display: grid; gap: 12px; justify-items: start; }
.hero__action p { max-width: 680px; margin: 0; color: rgba(255,255,255,.56); font-size: .78rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 15px 26px;
  border: 0;
  border-radius: 12px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  text-decoration: none;
}
.button--link { color: #171a21; background: linear-gradient(135deg, #f3de9a, #c99a31); box-shadow: 0 14px 34px rgba(201,154,49,.22); transition: transform .2s ease, box-shadow .2s ease; }
.button--link:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(201,154,49,.3); }
.button--link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.button--disabled { color: #f2f2f3; background: #696b73; cursor: not-allowed; box-shadow: 0 12px 30px rgba(31,33,40,.18); opacity: 1; }
.button--large { min-height: 68px; padding-inline: 34px; }
.hero__status {
  position: relative;
  padding: 26px 28px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 28px;
  color: #fff;
  background: rgba(255,255,255,.045);
  box-shadow: var(--shadow);
}
.hero__status::before { position: absolute; inset: 0 auto 0 0; width: 5px; border-radius: 28px 0 0 28px; background: linear-gradient(var(--gold), var(--magenta)); content: ""; }
.hero__status-label { color: var(--gold-light); font-size: .68rem; font-weight: 900; letter-spacing: .18em; }
.hero__status > strong { display: block; margin: 20px 0 16px; font-size: 1.45rem; }
.hero__status dl { margin: 0; }
.hero__status dl div { display: grid; grid-template-columns: 72px 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.12); }
.hero__status dt { color: #aeb0b6; font-size: .75rem; }
.hero__status dd { margin: 0; font-weight: 800; }
.hero__status p { margin: 16px 0 0; color: #b8bac1; font-size: .75rem; }

@media (min-width: 821px) {
  .hero__visual { max-width: 520px; }
}

.concern-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 48px; }
.concern-grid article { min-height: 300px; padding: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); background: rgba(255,255,255,.045); }
.concern-grid article:nth-child(1) { border-top-color: var(--magenta-light); }
.concern-grid article:nth-child(2) { border-top-color: var(--cyan); }
.concern-grid article:nth-child(3) { border-top-color: var(--orange); }
.concern-grid article:nth-child(4) { border-top-color: var(--green); }
.concern-grid span { color: #d4d5d9; font-size: 1.35rem; font-weight: 950; letter-spacing: .06em; }
.concern-grid h3 { margin: 62px 0 16px; font-size: 1.3rem; }
.concern-grid p { margin: 0; color: #c5c6ca; font-size: .88rem; }

.split { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(50px, 8vw, 110px); align-items: center; }
.merge-map { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; padding: 34px; border: 1px solid var(--line); border-radius: 30px; background: var(--soft); }
.merge-card { min-height: 205px; padding: 26px; border-radius: 20px; color: #fff; }
.merge-card--partner { background: linear-gradient(145deg, var(--magenta), #e53b8f); }
.merge-card--mirai { background: linear-gradient(145deg, var(--cyan), var(--navy)); }
.merge-card span, .merge-result span { display: block; font-size: .65rem; font-weight: 900; letter-spacing: .14em; opacity: .84; }
.merge-card strong { display: block; margin: 28px 0 12px; font-size: 1.75rem; }
.merge-card p { margin: 0; font-size: .78rem; }
.merge-map__plus { font-size: 1.8rem; font-weight: 300; }
.merge-map__line { grid-column: 1/-1; width: 2px; height: 32px; margin: 0 auto; background: linear-gradient(var(--magenta), var(--cyan)); }
.merge-result { grid-column: 1/-1; padding: 24px; border: 2px solid var(--ink); border-radius: 18px; background: #fff; text-align: center; }
.merge-result span { color: var(--magenta); }
.merge-result strong { display: block; margin-top: 7px; font-size: 1.25rem; }

.section--gold { position: relative; color: #fff; background: linear-gradient(125deg, #6f5011 0%, #a77816 45%, #4f3910 100%); }
.section--gold::after { position: absolute; inset: 0; background: radial-gradient(circle at 15% 10%, rgba(255,255,255,.18), transparent 30%); content: ""; pointer-events: none; }
.benefit { position: relative; z-index: 1; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px, 8vw, 110px); }
.section--gold .kicker { color: #fff0bb; }
.benefit__heading h2 { font-size: clamp(2.15rem, 3vw, 2.55rem); }
.benefit__content > p { font-size: 1.08rem; }
.check-list { display: grid; gap: 10px; margin: 30px 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding: 13px 16px 13px 46px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(255,255,255,.08); }
.check-list li::before { position: absolute; left: 17px; color: #fff0bb; content: "✓"; font-weight: 900; }
.notice { padding: 22px; border-left: 4px solid #fff0bb; background: rgba(31,33,40,.28); }
.notice strong { font-size: 1.08rem; }
.notice p { margin: 4px 0 0; font-size: .84rem; }

.heading-row { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: end; margin-bottom: 44px; }
.heading-row h2 { margin-bottom: 0; }
.heading-row > p { margin: 0 0 7px; color: var(--muted); }
.heading-row--centered { display: block; max-width: 900px; margin: 0 auto 48px; text-align: center; }
.heading-row--centered h2 { margin-bottom: 22px; }
.heading-row--centered > p { max-width: 760px; margin: 0 auto; }
.chip-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.chip-grid span { display: flex; min-height: 86px; align-items: center; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font-weight: 800; }
.chip-grid span::before { flex: 0 0 auto; width: 9px; height: 9px; margin-right: 12px; border-radius: 50%; background: var(--magenta); content: ""; }

.support-rail { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); margin: 58px 0 0; padding: 0; list-style: none; }
.support-rail li { position: relative; min-height: 245px; padding: 28px 24px; border-top: 3px solid var(--line); }
.support-rail li::after { position: absolute; top: -7px; right: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--line); content: ""; }
.support-rail li:last-child::after { display: none; }
.support-rail li:nth-child(1) { border-color: var(--magenta); }
.support-rail li:nth-child(2) { border-color: #e45093; }
.support-rail li:nth-child(3) { border-color: var(--orange); }
.support-rail li:nth-child(4) { border-color: var(--cyan); }
.support-rail li:nth-child(5) { border-color: var(--green); }
.support-rail span { color: #9b9ca2; font-size: .68rem; font-weight: 900; }
.support-rail strong { display: block; margin-top: 72px; font-size: 1.12rem; }
.support-rail p { margin: 8px 0 0; color: var(--muted); font-size: .8rem; }

.flow-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin: 46px 0 0; padding: 1px; border-radius: 24px; overflow: hidden; background: rgba(255,255,255,.15); list-style: none; }
.flow-grid li { min-height: 260px; padding: 28px; background: var(--ink-2); }
.flow-grid li:nth-child(5), .flow-grid li:nth-child(6) { background: #392430; }
.flow-grid span { color: #ff8bc3; font-size: 1.08rem; font-weight: 950; letter-spacing: .1em; }
.flow-grid strong { display: block; margin-top: 46px; font-size: 1.3rem; line-height: 1.4; }
.flow-grid p { margin: 10px 0 0; color: #c0c1c6; font-size: .82rem; }

.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.fit-card { padding: clamp(32px, 5vw, 56px); border: 1px solid var(--line); border-radius: 28px; }
.fit-card--yes { background: #fff; box-shadow: var(--shadow); border-top: 5px solid var(--magenta); }
.fit-card--no { background: var(--soft); border-top: 5px solid #81838b; }
.fit-card h2 { font-size: clamp(2rem, 2.7vw, 2.75rem); }
.fit-card ul { display: grid; gap: 13px; margin: 0; padding-left: 1.25em; }
.fit-card li::marker { color: var(--magenta); }

.works-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.works-grid article { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 12px 36px rgba(31,33,40,.06); }
.works-grid img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #ecebed; }
.works-grid article > div { min-height: 150px; padding: 20px; }
.works-grid span { color: var(--magenta); font-size: .65rem; font-weight: 900; letter-spacing: .12em; }
.works-grid h3 { margin: 10px 0 6px; font-size: 1.12rem; }
.works-grid p { margin: 0; color: var(--muted); font-size: .82rem; }

.faq-layout { display: grid; grid-template-columns: .36fr .64fr; gap: clamp(50px, 9vw, 120px); }
.faq-layout h2 { font-size: clamp(2.25rem, 3vw, 3.2rem); white-space: nowrap; }
.faq-layout > div:first-child > p:last-child { color: var(--muted); }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 22px 48px 22px 0; cursor: pointer; font-weight: 900; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: var(--magenta); content: "+"; font-size: 1.4rem; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { margin: 0 44px 22px 0; color: var(--muted); }
.faq-list summary:focus-visible { outline: 3px solid rgba(0,159,215,.4); outline-offset: 4px; }

.final { position: relative; padding: clamp(105px, 13vw, 180px) 0; color: #fff; background: var(--ink); text-align: center; }
.final::before, .final::after { position: absolute; border-radius: 50%; content: ""; }
.final::before { top: -35%; left: -12%; width: 48vw; height: 48vw; background: rgba(201,0,99,.25); }
.final::after { right: -10%; bottom: -45%; width: 48vw; height: 48vw; background: rgba(0,159,215,.2); }
.final__inner { position: relative; z-index: 1; }
.final h2 { font-size: clamp(2.8rem, 6vw, 5.5rem); }
.final__inner > p:not(.kicker) { max-width: 700px; margin: 0 auto 34px; color: #c6c7cb; }
.final ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin: 24px 0 0; padding: 0; color: #aeb0b7; font-size: .75rem; list-style: none; }

.footer { padding: 46px 0 38px; color: #fff; background: #15161b; }
.footer__inner { display: grid; grid-template-columns: auto 1fr; gap: 28px 50px; align-items: center; }
.footer__brand { display: grid; gap: 8px; }
.footer__brand .brand { margin: 0; }
.footer__brand .brand__word { color: #fff; font-size: 1.8rem; }
.footer__brand .brand__word--accent { color: var(--magenta); }
.footer__brand .brand__mark { width: 46px; }
.footer__brand > span, .footer__copyright { margin: 0; color: #94969e; font-size: .72rem; letter-spacing: .08em; }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 24px; }
.footer__nav a { color: #c7c8cc; font-size: .78rem; text-decoration: none; }
.footer__nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer__nav a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.footer__copyright { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); text-align: right; }

@media (max-width: 1060px) {
  .hero__grid { grid-template-columns: minmax(0,1fr) minmax(350px,.92fr); gap: 32px; }
  .hero h1 { font-size: clamp(2.35rem,3.8vw,3.2rem); }
  .concern-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .support-rail { grid-template-columns: 1fr; }
  .support-rail li { min-height: 0; padding: 22px 20px 22px 48px; border-top: 0; border-left: 3px solid var(--line); }
  .support-rail li::after { top: auto; right: auto; bottom: -6px; left: -7px; }
  .support-rail li:nth-child(1) { border-left-color: var(--magenta); }
  .support-rail li:nth-child(2) { border-left-color: #e45093; }
  .support-rail li:nth-child(3) { border-left-color: var(--orange); }
  .support-rail li:nth-child(4) { border-left-color: var(--cyan); }
  .support-rail li:nth-child(5) { border-left-color: var(--green); }
  .support-rail strong { margin-top: 5px; }
}

@media (min-width: 821px) {
  .split > div:first-child h2 { font-size: clamp(2.2rem, 3.1vw, 3.25rem); }
}

@media (max-width: 820px) {
  .container { width: min(760px, calc(100% - 40px)); }
  .hero { min-height: auto; padding-bottom: 78px; }
  .hero__grid { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-top: 20px; }
  .hero__copy { display: contents; }
  .hero__aside { display: contents; }
  .member-badge { align-self: flex-start; order: 1; }
  .hero h1 { order: 2; margin-bottom: 0; }
  .brand { order: 3; margin-bottom: 0; }
  .hero__visual { order: 4; margin-bottom: 0; }
  .hero__lead { order: 5; margin-bottom: 0; }
  .hero__eligibility { order: 6; margin: 0; }
  .hero__action { order: 7; }
  .hero__status { order: 8; }
  .split, .benefit, .heading-row, .faq-layout { grid-template-columns: 1fr; }
  .heading-row { gap: 18px; align-items: start; }
  .chip-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .flow-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .works-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .container { width: calc(100% - 32px); }
  .section { padding: 82px 0; }
  h2 { font-size: clamp(1.9rem,9vw,2.6rem); }
  .hero { border-top-width: 6px; padding-top: 20px; }
  .hero__grid { gap: 23px; }
  .member-badge { margin-bottom: 0; font-size: .62rem; letter-spacing: .08em; }
  .hero h1 { font-size: clamp(1.75rem,7.4vw,2.2rem); line-height: 1.3; letter-spacing: -.055em; }
  .brand__word { font-size: 1.85rem; }
  .brand__mark { width: 46px; }
  .hero__visual { width: min(100%, 390px); }
  .hero__visual img { min-height: 0; aspect-ratio: 1; object-fit: contain; }
  .hero__lead { font-size: .97rem; }
  .hero__eligibility { padding: 15px 16px; }
  .hero__eligibility strong { font-size: .94rem; }
  .button { width: 100%; min-height: 62px; padding-inline: 18px; font-size: .9rem; }
  .hero__status { padding: 28px 24px; }
  .concern-grid, .chip-grid, .flow-grid, .works-grid, .fit-grid { grid-template-columns: 1fr; }
  .concern-grid article { min-height: 225px; }
  .concern-grid h3 { margin-top: 42px; }
  .merge-map { grid-template-columns: 1fr; padding: 20px; }
  .merge-map__plus { text-align: center; }
  .merge-map__line, .merge-result { grid-column: 1; }
  .merge-card { min-height: 175px; }
  .benefit { gap: 20px; }
  .chip-grid span { min-height: 66px; }
  .flow-grid li { min-height: 225px; }
  .flow-grid strong { margin-top: 46px; }
  .fit-card { padding: 30px 24px; }
  .works-grid article > div { min-height: 0; }
  #works-title { font-size: clamp(1.625rem, 6.5vw, 1.75rem); letter-spacing: -.03em; white-space: nowrap; }
  .faq-layout { gap: 22px; }
  .final h2 { font-size: clamp(2.45rem,12vw,3.65rem); }
  .final ul { display: grid; gap: 6px; }
  .footer__inner { grid-template-columns: 1fr; align-items: start; }
  .footer__nav { justify-content: flex-start; }
  .footer__copyright { grid-column: 1; text-align: left; }
}

@media (max-width: 370px) {
  .hero h1 { font-size: 2rem; }
  .brand__word { font-size: 1.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}