:root {
  --bg: #f9fafc;
  --paper: #fff;
  --ink: #202b44;
  --muted: #8790a3;
  --accent: #3e6de8;
  --accent-dark: #2b54c5;
  --line: #e0e5ef;
  --soft: #eef2fc;
  --display: "Manrope", "Noto Sans JP", sans-serif;
}
body {
  background: var(--bg);
  color: var(--ink);
}
.w-brand {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1.2px;
  gap: 8px;
}
.brand-period {
  color: var(--accent);
}
.w-mark {
  width: 25px;
  height: 24px;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  transform: rotate(-12deg);
  margin-right: 3px;
}
.w-mark i {
  display: block;
  width: 5px;
  background: var(--accent);
  border-radius: 2px;
  height: 12px;
}
.w-mark i:nth-child(2) {
  height: 22px;
}
.w-mark i:last-child {
  height: 17px;
}
.w-hero {
  position: relative;
  text-align: center;
  padding-top: 65px;
  padding-bottom: 56px;
  overflow: hidden;
}
.hero-grid {
  position: absolute;
  inset: 0 5%;
  z-index: -1;
  background-image:
    linear-gradient(#dbe4f433 1px, transparent 1px),
    linear-gradient(90deg, #dbe4f433 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse, #000 0%, transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse, #000 0%, transparent 68%);
}
.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: #7c879c;
  background: #f0f3fa;
  border: 1px solid #e1e7f4;
  border-radius: 50px;
  padding: 6px 14px 6px 6px;
}
.new-label {
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--accent);
  background: white;
  box-shadow: 0 1px 3px #2f4c8708;
  border-radius: 50px;
  padding: 6px 9px;
  font-weight: 700;
}
.w-hero h1 {
  font-size: clamp(43px, 5.1vw, 68px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.045em;
  margin-top: 24px;
}
.hero-highlight {
  position: relative;
  color: var(--accent);
  z-index: 1;
  display: inline-block;
}
.hero-highlight:before {
  content: "";
  background: #e6edff;
  position: absolute;
  left: -5px;
  right: -5px;
  height: 24px;
  bottom: 11px;
  border-radius: 4px;
  z-index: -1;
  transform: rotate(-2deg);
}
.blue {
  color: var(--accent);
}
.w-hero > p {
  font-size: 13px;
  line-height: 2.3;
  color: #818ba0;
  margin-top: 22px;
}
.w-hero .actions {
  justify-content: center;
  margin-top: 29px;
}
.w-hero .button {
  border-radius: 7px;
  font-size: 11px;
  padding: 16px 23px;
}
.hero-footnotes {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #a0a8b7;
  margin-top: 19px;
}
.hero-footnotes i {
  height: 3px;
  width: 3px;
  border-radius: 50%;
  background: #bdc6d7;
}
.mobile-break {
  display: none;
}
.hero-orbit {
  position: absolute;
  color: #9ab2ef;
  font-size: 42px;
  font-family: var(--display);
  font-weight: 400;
}
.orbit-left {
  top: 30%;
  left: 8%;
  transform: rotate(13deg);
}
.orbit-right {
  top: 47%;
  right: 9%;
  border: 1px solid #d5e0f6;
  width: 65px;
  height: 65px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  transform: rotate(-13deg);
  color: #8faced;
  background: #f2f5fd;
}
.dashboard-section {
  position: relative;
  scroll-margin-top: 30px;
}
.dashboard {
  display: flex;
  background: #fff;
  border: 1px solid #dbe2f0;
  border-radius: 12px;
  box-shadow:
    0 18px 60px #2b437011,
    0 2px 9px #2b437005;
  max-width: 1015px;
  margin: auto;
  overflow: hidden;
}
.dash-sidebar {
  width: 174px;
  border-right: 1px solid #e7ebf3;
  background: #f7f9fe;
  padding: 28px 15px 19px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-shrink: 0;
}
.dash-brand {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: #334875;
  margin: 0 9px 28px;
}
.dash-brand > span {
  color: var(--accent);
}
.dash-nav {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border-radius: 4px;
  font-size: 13px;
  color: #96a2bc;
}
.dash-nav b {
  font-weight: 400;
  font-size: 8px;
  color: #8b97ad;
}
.dash-nav.active {
  background: #e9effd;
  color: #4470d8;
}
.dash-nav.active b {
  color: #4470d8;
}
.dash-nav > i {
  font-style: normal;
  font-size: 7px;
  margin-left: auto;
  background: #e7edfa;
  padding: 2px 5px;
  border-radius: 3px;
  color: #7292d6;
}
.dash-sidebar-bottom {
  margin-top: auto;
  padding: 34px 9px 0;
}
.dash-sidebar-bottom > span:first-child {
  font-size: 9px;
  line-height: 2.1;
  color: #a1abc0;
  display: block;
}
.dash-user {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #e0e6f0;
  margin-top: 23px;
  padding-top: 16px;
  font-size: 7px;
  color: #8996af;
}
.dash-user i {
  font-style: normal;
  background: #dce6fc;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #5e7fae;
  font-size: 12px;
}
.dash-content {
  padding: 28px 31px 25px;
  flex: 1;
  min-width: 0;
}
.dash-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 6px;
  letter-spacing: 1.4px;
  color: #96a2b7;
}
.sample-badge {
  font-size: 6px;
  color: #8c9bbb;
  background: #f1f4fa;
  border: 1px solid #e6ebf5;
  border-radius: 3px;
  padding: 4px 7px;
  letter-spacing: 0.5px;
}
.dash-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: 19px 0;
}
.dash-title h2 {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.03em;
}
.dash-title p {
  font-size: 8px;
  color: #929db0;
  margin-top: 8px;
}
.dash-date {
  font-size: 6px;
  letter-spacing: 1px;
  color: #a4adbc;
  display: flex;
  align-items: center;
  gap: 9px;
}
.dash-date i {
  font-style: normal;
  font-size: 13px;
  color: #8eaae6;
}
.focus-tabs {
  display: flex;
  gap: 7px;
  border-bottom: 1px solid #e6ebf3;
  padding-bottom: 12px;
  margin-top: 23px;
  align-items: center;
}
.focus-tabs button {
  border: 0;
  border-radius: 4px;
  background: #f6f8fc;
  padding: 9px 12px;
  font-size: 9px;
  color: #919eb7;
  font-family: var(--display);
  font-weight: 600;
}
.focus-tabs button span {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 7px;
  font-weight: 400;
  margin-left: 4px;
}
.focus-tabs button.active {
  background: #eaf0ff;
  color: #4a6db5;
}
.focus-tabs > span {
  font-size: 7px;
  color: #a7b2c6;
  margin-left: 5px;
}
.dash-panels {
  display: grid;
  grid-template-columns: 0.74fr 1.26fr;
  gap: 16px;
  margin-top: 18px;
}
.score-panel,
.analysis-panel {
  border: 1px solid #e4eaf5;
  border-radius: 7px;
  padding: 16px;
  background: #fcfdff;
}
.panel-label {
  font-size: 8px;
  color: #7e8ca7;
}
.score-ring {
  width: 102px;
  height: 102px;
  border-radius: 50%;
  background: conic-gradient(#6189ed var(--score), #e8eefb 0);
  display: grid;
  place-items: center;
  margin: 18px auto 15px;
  position: relative;
}
.score-ring:before {
  content: "";
  inset: 9px;
  position: absolute;
  border-radius: 50%;
  background: #fcfdff;
}
.score-ring > div {
  z-index: 1;
  text-align: center;
}
.score-ring strong {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -1.5px;
  color: #385a9f;
}
.score-ring > div > span {
  font-size: 12px;
  color: #a5b3ca;
  margin-left: 3px;
}
.score-ring small {
  font-size: 6px;
  color: #97a6c0;
  display: block;
  margin-top: 2px;
}
.score-bottom {
  border-top: 1px solid #e8edf7;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  font-size: 7px;
  color: #a3acc0;
}
.score-bottom strong {
  font-family: var(--display);
  font-size: 9px;
  font-weight: 500;
  color: #6f82a5;
}
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.panel-heading > span:last-child {
  font-size: 5px;
  letter-spacing: 0.5px;
  color: #a6b1c6;
}
.analysis-bars {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}
.analysis-bars > div {
  display: flex;
  align-items: center;
  gap: 9px;
  position: relative;
  height: 14px;
}
.analysis-bars > div > span {
  font-size: 6px;
  letter-spacing: 0.4px;
  width: 38px;
  flex-shrink: 0;
  color: #a0aec6;
}
.analysis-bars i {
  display: block;
  max-width: calc(100% - 60px);
  width: var(--bar);
  height: 10px;
  border-radius: 2px;
  background: #a5bcf3;
  transition: width 0.6s ease;
}
.analysis-bars .weak-bar i {
  background: #e5b982;
}
.analysis-bars b {
  font-size: 5px;
  letter-spacing: 0.4px;
  background: #faf0e1;
  color: #b59367;
  padding: 3px 5px;
  border-radius: 3px;
  position: absolute;
  right: 0;
  font-weight: 500;
}
.analysis-note {
  border-top: 1px solid #e8edf7;
  margin-top: 19px;
  padding-top: 12px;
  font-size: 6px;
  color: #9fabc1;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.focus-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #cba778;
}
.analysis-note strong {
  font-size: 7px;
  font-weight: 400;
  color: #8b96ab;
  margin-left: auto;
}
.next-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  margin-top: 16px;
  background: #f0f4fd;
  border: 1px solid #e2eafa;
  border-radius: 6px;
}
.next-icon {
  width: 35px;
  height: 35px;
  border-radius: 8px;
  background: #e0e9ff;
  display: grid;
  place-items: center;
  color: #6b8dde;
  font-size: 23px;
  flex-shrink: 0;
}
.next-step div > span {
  font-size: 5px;
  letter-spacing: 1.4px;
  color: #819ad0;
}
.next-step h3 {
  font-size: 10px;
  font-weight: 500;
  margin-top: 4px;
  color: #5b74a6;
}
.next-step p {
  font-size: 7px;
  color: #9aabc9;
  margin-top: 5px;
  line-height: 1.8;
}
.next-arrow {
  color: #87a0d6;
  margin-left: auto;
  font-size: 17px;
}
.dashboard-caption {
  max-width: 1015px;
  margin: 19px auto 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #929fb7;
  font-size: 9px;
}
.caption-square {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: #8ba9ee;
  flex-shrink: 0;
}
.dashboard-caption .demo-note {
  margin-left: auto;
  font-size: 7px;
  color: #a6b0c1;
}
.w-keywords {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 38px;
  padding-top: 46px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line);
  margin-top: 16px;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 2px;
  color: #8a98b1;
}
.w-keywords i {
  font-style: normal;
  color: #b9c5dc;
  font-size: 17px;
}
.w-problem .section-head h2 {
  font-weight: 600;
  letter-spacing: 0.04em;
}
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
}
.problem-grid article {
  padding: 27px 24px 29px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.problem-grid article > span {
  font-size: 7px;
  letter-spacing: 1.3px;
  color: #9aa7c0;
}
.problem-icon {
  width: 41px;
  height: 41px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f0f3f9;
  color: #9aaac5;
  font-family: var(--display);
  font-size: 26px;
  margin: 23px 0;
}
.problem-grid h3 {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.8;
}
.problem-grid p {
  font-size: 11px;
  line-height: 2.2;
  color: #94a0b5;
  margin-top: 12px;
}
.problem-conclusion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-top: 37px;
  font-size: 13px;
  color: #99a4b9;
}
.problem-conclusion strong {
  font-weight: 500;
  color: #6380b7;
}
.conclusion-arrow {
  margin-left: 23px;
  font-size: 28px;
  color: #94abe0;
}
.w-features {
  background: #edf1f8;
}
.feature-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 35px;
  margin-bottom: 38px;
}
.feature-section-heading .section-head {
  margin-bottom: 0;
}
.feature-section-heading .section-head h2 {
  font-weight: 600;
}
.feature-section-heading > p {
  font-size: 11px;
  line-height: 2.3;
  color: #8b99b2;
  padding-bottom: 7px;
}
.bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.bento {
  padding: 34px 33px;
  background: #fff;
  border: 1px solid #dfe6f1;
  border-radius: 9px;
  overflow: hidden;
  position: relative;
}
.bento-primary {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 50px;
  background: #294f9e;
  color: #fff;
  border-color: #294f9e;
  padding: 46px;
}
.feature-index {
  font-size: 8px;
  letter-spacing: 1.8px;
  color: #94a2bb;
}
.bento-primary .feature-index {
  color: #a4bcec;
}
.bento h3 {
  font-size: 27px;
  font-weight: 500;
  line-height: 1.75;
  margin: 21px 0 15px;
}
.bento p {
  font-size: 11px;
  line-height: 2.2;
  color: #91a0b8;
}
.bento-primary p {
  color: #a9bfeb;
}
.heatmap-card {
  background: #f8faff;
  padding: 22px 25px;
  border-radius: 8px;
  box-shadow: 0 14px 35px #152b6330;
  transform: rotate(3deg);
  border: 1px solid #e6ecf8;
}
.heatmap-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 7px;
  letter-spacing: 1px;
  color: #8d9cb9;
}
.heatmap-header > span:last-child {
  font-size: 17px;
  color: #7595d9;
}
.heatmap {
  display: grid;
  grid-template-columns: 36px repeat(6, 1fr);
  gap: 9px;
  margin-top: 21px;
  align-items: center;
}
.heatmap > span {
  font-size: 8px;
  color: #8c9cb7;
}
.heatmap i {
  display: block;
  aspect-ratio: 1;
  border-radius: 3px;
  background: #e5ebf7;
}
.heatmap .lv1 {
  background: #e6caa4;
}
.heatmap .lv2 {
  background: #d1defa;
}
.heatmap .lv3 {
  background: #9eb9f2;
}
.heatmap .lv4 {
  background: #618ae3;
}
.heatmap-focus {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #e1e8f6;
  margin-top: 20px;
  padding-top: 16px;
}
.heatmap-focus > span {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: #e5edfd;
  color: #7094dd;
  display: grid;
  place-items: center;
  font-size: 20px;
}
.heatmap-focus small {
  display: block;
  font-size: 5px;
  letter-spacing: 1px;
  color: #96a8c8;
}
.heatmap-focus strong {
  font-size: 9px;
  font-weight: 500;
  color: #768fb9;
  display: block;
  margin-top: 6px;
}
.bento-review,
.bento-progress {
  padding-bottom: 0;
}
.review-widget {
  border: 1px solid #e3e9f4;
  box-shadow: 0 5px 15px #26427105;
  border-radius: 7px 7px 0 0;
  padding: 20px;
  background: #f9fbff;
  margin-top: 30px;
  margin-bottom: -1px;
}
.review-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 17px;
}
.review-date span {
  font-size: 6px;
  color: #a0acc3;
  letter-spacing: 1px;
}
.review-date strong {
  font-size: 9px;
  font-weight: 400;
  color: #7e91b3;
}
.review-task {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e0e8f7;
  border-radius: 5px;
  padding: 13px 11px;
}
.review-task > span:first-child {
  width: 28px;
  height: 28px;
  background: #e9efff;
  color: #7495da;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.review-task b {
  font-size: 9px;
  font-weight: 400;
  color: #6d82a9;
}
.review-task small {
  font-size: 6px;
  color: #a4b1c9;
  display: block;
  margin-top: 5px;
}
.review-task > span:last-child {
  margin-left: auto;
  color: #9cb2de;
}
.review-task.secondary {
  margin-top: 9px;
  opacity: 0.55;
}
.growth-chart {
  margin-top: 44px;
  padding-top: 14px;
}
.growth-chart > span {
  font-size: 7px;
  letter-spacing: 1.3px;
  color: #a4b2ca;
}
.growth-chart svg {
  width: 100%;
  height: 140px;
  display: block;
  margin-top: 10px;
  background-image: linear-gradient(#e9eef6 1px, transparent 1px);
  background-size: 100% 38px;
}
.growth-chart > div {
  display: flex;
  justify-content: space-between;
  font-size: 7px;
  color: #a5b0c5;
  padding-bottom: 25px;
  margin-top: 9px;
}
.bento-paper {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 35px;
  padding: 37px 45px;
  background: #f9fbff;
}
.book-art {
  position: relative;
  min-height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.book-back {
  position: absolute;
  width: 133px;
  height: 180px;
  background: #d3ddef;
  transform: rotate(-16deg);
  border-radius: 4px;
  left: 55px;
  top: 33px;
  border-right: 6px solid #becde5;
}
.book-front {
  position: relative;
  background: #4369bd;
  width: 137px;
  height: 180px;
  border-radius: 3px;
  transform: rotate(-5deg);
  padding: 23px 19px;
  box-shadow: 6px 10px 17px #38599322;
  border-left: 6px solid #3458a5;
  color: #e5edff;
  margin-left: -42px;
}
.book-front > span {
  font-size: 13px;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0.4px;
}
.book-front i {
  height: 1px;
  background: #849fd6;
  display: block;
  margin: 14px 0;
}
.book-front small {
  font-size: 5px;
  letter-spacing: 1px;
  color: #a4bceb;
}
.book-plus {
  font-size: 27px;
  color: #9ab1db;
  position: absolute;
  right: 80px;
  top: 96px;
}
.book-note {
  position: absolute;
  width: 99px;
  height: 130px;
  background: white;
  border: 1px solid #e1e8f5;
  right: 0;
  top: 76px;
  transform: rotate(8deg);
  border-radius: 4px;
  padding: 15px;
  box-shadow: 0 10px 20px #2b467011;
}
.book-note > span {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #6d8fc9;
  display: block;
  margin-bottom: 11px;
}
.book-note i {
  display: block;
  border-bottom: 1px solid #e3eaf5;
  font-size: 9px;
  color: #a5b7d5;
  text-align: right;
  font-style: normal;
  padding: 4px;
}
.book-note i:last-child {
  color: #d0b691;
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 48px;
}
.how-number {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--display);
  font-size: 12px;
  color: #6c8dce;
  border-top: 1px solid #dce4f2;
  padding-top: 18px;
  letter-spacing: 1px;
}
.how-number > span {
  font-size: 20px;
  color: #aabbdc;
}
.how-illustration {
  height: 118px;
  margin: 23px 0 26px;
  border-radius: 6px;
  background: #f0f4fb;
  display: flex;
  align-items: center;
  justify-content: center;
}
.record-illustration {
  gap: 8px;
}
.record-illustration i {
  background: #fff;
  border: 1px solid #e0e7f4;
  border-radius: 4px;
  font-style: normal;
  font-size: 7px;
  color: #a2aec5;
  padding: 11px 13px;
  transform: rotate(-3deg);
}
.record-illustration i:nth-child(2) {
  transform: rotate(4deg);
}
.record-illustration b {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  color: #7696da;
  text-align: center;
  font-weight: 400;
}
.record-illustration b.wrong {
  color: #d0a87f;
}
.focus-illustration > div {
  background: #fff;
  border: 1px solid #e0e7f4;
  padding: 16px 18px 16px 47px;
  position: relative;
  border-radius: 5px;
}
.focus-illustration i {
  position: absolute;
  left: 15px;
  top: 24px;
  width: 19px;
  height: 19px;
  border: 1px solid #91aae0;
  border-radius: 50%;
}
.focus-illustration i:after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #8aa6e2;
}
.focus-illustration span {
  display: block;
  font-size: 6px;
  letter-spacing: 0.7px;
  color: #95a9cf;
}
.focus-illustration b {
  display: block;
  font-size: 8px;
  font-weight: 400;
  color: #7f94bb;
  margin-top: 8px;
}
.review-illustration {
  gap: 13px;
}
.review-illustration > span {
  display: grid;
  place-items: center;
  border: 1px solid #cbd9f5;
  border-radius: 50%;
  width: 39px;
  height: 39px;
  font-size: 26px;
  color: #9bb3e3;
}
.review-illustration > div {
  font-size: 7px;
  letter-spacing: 0.7px;
  color: #90a5cb;
}
.review-illustration small {
  display: block;
  font-size: 8px;
  letter-spacing: 0;
  margin-top: 10px;
  color: #a2aec6;
}
.how-grid h3 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 15px;
}
.how-grid p {
  font-size: 10px;
  line-height: 2.2;
  color: #929fb4;
}
.w-manifesto {
  background: #eaf0fc;
  padding: 70px 0;
  overflow: hidden;
}
.w-manifesto .shell {
  position: relative;
}
.w-manifesto .eyebrow {
  font-size: 8px;
  letter-spacing: 1.8px;
  color: #8099c9;
}
.w-manifesto h2 {
  font-size: 35px;
  font-weight: 500;
  line-height: 1.7;
  margin: 23px 0;
  color: #4b689e;
  position: relative;
  z-index: 2;
}
.w-manifesto h2 > span {
  color: var(--accent);
}
.w-manifesto p {
  font-size: 11px;
  line-height: 2.4;
  color: #93a5c7;
  position: relative;
  z-index: 2;
}
.manifesto-symbol {
  position: absolute;
  right: 85px;
  top: -37px;
  font-family: var(--display);
  font-size: 240px;
  color: #d4e0f8;
  line-height: 1.2;
}
.w-cta {
  padding-bottom: 87px;
}
.cta-panel {
  position: relative;
  background: #3564d9;
  border: 1px solid #3564d9;
  border-radius: 10px;
  padding: 58px 59px;
  color: #fff;
  overflow: hidden;
}
.cta-grid {
  background-image:
    linear-gradient(#ffffff07 1px, transparent 1px),
    linear-gradient(90deg, #ffffff07 1px, transparent 1px);
  background-size: 40px 40px;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cta-panel > .eyebrow {
  font-size: 8px;
  letter-spacing: 1.8px;
  color: #b4c9f8;
  position: relative;
  z-index: 1;
}
.cta-panel h2 {
  font-size: 38px;
  font-weight: 500;
  line-height: 1.8;
  margin: 20px 0;
  position: relative;
  z-index: 2;
}
.cta-panel > p {
  font-size: 11px;
  line-height: 2.3;
  color: #b9ccf7;
  position: relative;
  z-index: 2;
}
.cta-panel .actions {
  margin-top: 29px;
  position: relative;
  z-index: 2;
  gap: 22px;
}
.cta-panel .button {
  background: #fff;
  color: #3564d9;
  border-color: white;
}
.cta-panel .status {
  font-size: 8px;
  letter-spacing: 1px;
  color: #b9ccf7;
}
.cta-panel .status:before {
  background: #bbcff9;
}
.cta-arrow {
  position: absolute;
  right: 59px;
  top: 6px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 310px;
  line-height: 1.1;
  color: #4a76e6;
  pointer-events: none;
}
@media (max-width: 1000px) {
  .w-hero h1 {
    font-size: 53px;
  }
  .orbit-left {
    left: 5%;
    font-size: 35px;
  }
  .orbit-right {
    right: 6%;
    width: 52px;
    height: 52px;
    font-size: 35px;
  }
  .dash-sidebar {
    width: 150px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .dash-content {
    padding: 25px;
  }
  .dash-date {
    display: none;
  }
  .panel-heading > span:last-child {
    display: none;
  }
  .bento-primary {
    gap: 30px;
    padding: 35px;
  }
  .heatmap-card {
    padding: 20px;
  }
  .heatmap {
    gap: 7px;
    grid-template-columns: 30px repeat(6, 1fr);
  }
  .bento h3 {
    font-size: 25px;
  }
  .bento-paper {
    padding: 32px;
  }
  .book-back {
    left: 20px;
  }
  .book-front {
    margin-left: -35px;
  }
  .book-plus {
    right: 55px;
  }
  .book-note {
    right: -10px;
  }
  .how-grid {
    gap: 23px;
  }
  .record-illustration i {
    padding: 10px;
  }
  .w-manifesto h2 {
    font-size: 31px;
  }
  .manifesto-symbol {
    right: 35px;
    font-size: 220px;
  }
}
@media (max-width: 700px) {
  .w-brand {
    font-size: 24px;
  }
  .w-mark {
    width: 22px;
    height: 21px;
  }
  .w-mark i:nth-child(2) {
    height: 20px;
  }
  .w-mark i:last-child {
    height: 15px;
  }
  .w-hero {
    padding-top: 42px;
    padding-bottom: 36px;
  }
  .hero-label {
    font-size: 8px;
    padding: 5px 10px 5px 5px;
    gap: 7px;
  }
  .new-label {
    font-size: 6px;
    padding: 5px 7px;
    letter-spacing: 0.5px;
  }
  .w-hero h1 {
    font-size: 36px;
    line-height: 1.7;
    letter-spacing: 0.02em;
    margin-top: 25px;
  }
  .hero-highlight:before {
    height: 13px;
    bottom: 8px;
  }
  .w-hero > p {
    font-size: 10px;
    line-height: 2.3;
    margin-top: 19px;
  }
  .mobile-break {
    display: block;
  }
  .w-hero .actions {
    margin-top: 24px;
    gap: 9px;
  }
  .w-hero .button {
    font-size: 9px;
    padding: 13px 13px;
    gap: 12px;
  }
  .w-hero .button > span:last-child {
    font-size: 15px;
  }
  .hero-footnotes {
    font-size: 7px;
    gap: 9px;
    line-height: 1.8;
    margin-top: 16px;
  }
  .hero-orbit {
    display: none;
  }
  .hero-grid {
    background-size: 25px 25px;
    inset: 0;
  }
  .dashboard {
    border-radius: 8px;
  }
  .dash-sidebar {
    display: none;
  }
  .dash-content {
    padding: 18px 16px 17px;
  }
  .dash-top {
    font-size: 5px;
    letter-spacing: 1px;
  }
  .sample-badge {
    font-size: 5px;
    padding: 3px 5px;
  }
  .dash-title {
    margin: 16px 0;
  }
  .dash-title h2 {
    font-size: 17px;
  }
  .dash-title p {
    font-size: 7px;
    line-height: 1.8;
    margin-top: 6px;
  }
  .focus-tabs {
    margin-top: 17px;
    padding-bottom: 10px;
    gap: 6px;
  }
  .focus-tabs button {
    font-size: 8px;
    padding: 8px;
  }
  .focus-tabs button span {
    font-size: 6px;
    margin-left: 2px;
  }
  .focus-tabs > span {
    font-size: 5px;
    margin-left: 0;
  }
  .dash-panels {
    grid-template-columns: 0.75fr 1.25fr;
    gap: 9px;
    margin-top: 13px;
  }
  .score-panel,
  .analysis-panel {
    padding: 10px 9px;
    border-radius: 5px;
  }
  .panel-label {
    font-size: 6px;
    line-height: 1.6;
  }
  .score-ring {
    width: 76px;
    height: 76px;
    margin: 14px auto;
  }
  .score-ring:before {
    inset: 7px;
  }
  .score-ring strong {
    font-size: 24px;
  }
  .score-ring > div > span {
    font-size: 9px;
  }
  .score-ring small {
    font-size: 5px;
  }
  .score-bottom {
    font-size: 6px;
    padding-top: 8px;
  }
  .score-bottom strong {
    font-size: 7px;
  }
  .analysis-bars {
    gap: 11px;
    margin-top: 16px;
  }
  .analysis-bars > div {
    height: 11px;
    gap: 5px;
  }
  .analysis-bars > div > span {
    font-size: 5px;
    width: 27px;
    letter-spacing: 0;
  }
  .analysis-bars i {
    height: 7px;
    max-width: calc(100% - 33px);
  }
  .analysis-bars b {
    font-size: 4px;
    padding: 2px;
    right: -2px;
  }
  .analysis-note {
    font-size: 5px;
    gap: 3px;
    margin-top: 14px;
    padding-top: 8px;
    line-height: 1.7;
  }
  .analysis-note strong {
    margin-left: 7px;
    font-size: 6px;
  }
  .focus-dot {
    width: 3px;
    height: 3px;
  }
  .next-step {
    padding: 11px 10px;
    gap: 8px;
    margin-top: 11px;
  }
  .next-icon {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    font-size: 18px;
  }
  .next-step h3 {
    font-size: 8px;
    line-height: 1.8;
    margin-top: 2px;
  }
  .next-step div > span {
    font-size: 4px;
    letter-spacing: 1px;
  }
  .next-step p {
    font-size: 6px;
    line-height: 1.8;
    margin-top: 3px;
  }
  .next-arrow {
    font-size: 13px;
  }
  .dashboard-caption {
    flex-wrap: wrap;
    font-size: 7px;
    gap: 5px;
    margin-top: 13px;
    line-height: 1.8;
  }
  .dashboard-caption .demo-note {
    width: 100%;
    font-size: 6px;
    margin-left: 10px;
  }
  .caption-square {
    width: 4px;
    height: 4px;
  }
  .w-keywords {
    gap: 15px;
    font-size: 7px;
    letter-spacing: 1px;
    padding-top: 31px;
    padding-bottom: 29px;
    margin-top: 8px;
  }
  .w-keywords i {
    font-size: 12px;
  }
  .problem-grid {
    grid-template-columns: 1fr;
    gap: 13px;
    margin-top: 27px;
  }
  .problem-grid article {
    position: relative;
    padding: 24px;
  }
  .problem-grid article > span {
    font-size: 6px;
    letter-spacing: 1px;
  }
  .problem-icon {
    position: absolute;
    right: 22px;
    top: 28px;
    width: 35px;
    height: 35px;
    font-size: 23px;
    margin: 0;
  }
  .problem-grid h3 {
    font-size: 17px;
    margin-top: 20px;
  }
  .problem-grid p {
    font-size: 10px;
    margin-top: 11px;
  }
  .problem-conclusion {
    font-size: 11px;
    flex-wrap: wrap;
    gap: 8px;
    text-align: center;
    line-height: 1.8;
    margin-top: 25px;
  }
  .problem-conclusion > span:first-child {
    width: 100%;
  }
  .problem-conclusion strong {
    font-size: 11px;
  }
  .conclusion-arrow {
    margin-left: 4px;
    font-size: 19px;
  }
  .feature-section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 28px;
  }
  .feature-section-heading > p {
    font-size: 10px;
  }
  .bento-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .bento {
    padding: 27px 24px;
  }
  .bento-primary {
    grid-column: auto;
    grid-template-columns: 1fr;
    gap: 25px;
    padding-bottom: 30px;
  }
  .bento h3 {
    font-size: 24px;
    line-height: 1.75;
    margin-top: 18px;
  }
  .bento p {
    font-size: 10px;
    line-height: 2.3;
  }
  .feature-index {
    font-size: 7px;
    letter-spacing: 1.5px;
  }
  .heatmap-card {
    padding: 19px 20px;
    margin: 2px 0 0;
    transform: rotate(2deg);
  }
  .heatmap {
    gap: 8px;
    margin-top: 16px;
  }
  .heatmap-focus {
    margin-top: 16px;
    padding-top: 13px;
  }
  .heatmap-focus strong {
    font-size: 8px;
  }
  .heatmap-focus small {
    font-size: 5px;
  }
  .bento-review,
  .bento-progress {
    padding-bottom: 0;
  }
  .review-widget {
    padding: 16px;
    margin-top: 24px;
  }
  .growth-chart {
    margin-top: 25px;
  }
  .growth-chart svg {
    height: 115px;
  }
  .bento-paper {
    grid-column: auto;
    grid-template-columns: 1fr;
    gap: 9px;
    padding-bottom: 16px;
  }
  .book-art {
    min-height: 231px;
  }
  .book-back {
    left: 31px;
  }
  .book-front {
    margin-left: -25px;
  }
  .book-note {
    right: -3px;
    top: 81px;
    width: 90px;
    height: 121px;
    padding: 13px;
  }
  .book-plus {
    right: 58px;
    top: 101px;
  }
  .how-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 30px;
  }
  .how-number {
    font-size: 11px;
    padding-top: 16px;
  }
  .how-number > span {
    font-size: 17px;
  }
  .how-illustration {
    margin: 18px 0 22px;
    height: 118px;
  }
  .record-illustration {
    gap: 16px;
  }
  .record-illustration i {
    padding: 12px 19px;
    font-size: 8px;
  }
  .how-grid h3 {
    font-size: 18px;
    margin-bottom: 12px;
  }
  .how-grid p {
    font-size: 10px;
  }
  .focus-illustration > div {
    padding: 18px 22px 18px 50px;
  }
  .focus-illustration i {
    top: 26px;
  }
  .focus-illustration b {
    font-size: 9px;
  }
  .review-illustration > div {
    font-size: 8px;
  }
  .review-illustration small {
    font-size: 9px;
  }
  .w-manifesto {
    padding: 46px 0;
  }
  .w-manifesto .eyebrow {
    font-size: 6px;
    letter-spacing: 1.2px;
  }
  .w-manifesto h2 {
    font-size: 25px;
    line-height: 1.8;
    margin: 20px 0;
  }
  .w-manifesto h2 span {
    display: block;
  }
  .w-manifesto p {
    font-size: 10px;
    line-height: 2.4;
  }
  .manifesto-symbol {
    font-size: 151px;
    top: 26px;
    right: 0;
    color: #dbe5f9;
  }
  .w-cta {
    padding-bottom: 53px;
  }
  .cta-panel {
    padding: 34px 25px;
  }
  .cta-panel > .eyebrow {
    font-size: 6px;
    letter-spacing: 1px;
  }
  .cta-panel h2 {
    font-size: 27px;
    line-height: 1.8;
    margin: 23px 0 17px;
  }
  .cta-panel > p {
    font-size: 10px;
  }
  .cta-panel .actions {
    margin-top: 24px;
    gap: 16px;
  }
  .cta-panel .status {
    font-size: 6px;
    gap: 6px;
    letter-spacing: 0.6px;
  }
  .cta-arrow {
    font-size: 183px;
    right: -21px;
    top: 43px;
    color: #4774e3;
  }
}

/* ETS 帰属表示（法務条件 LG-W1-2 / AC-32。削除しないこと） */
.legal-attribution {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(32, 43, 68, 0.12);
  font-size: 12px;
  line-height: 1.8;
  color: #5d6b85;
}

/* ヒーロー直下の対応教材（離脱理由1位への対策。マーケ要望 B-1） */
.hero-materials {
  margin: 28px auto 0;
  max-width: 560px;
  padding: 16px 20px;
  border: 1px solid rgba(32, 43, 68, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  text-align: left;
}
.hero-materials .materials-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #3e6de8;
  margin-bottom: 6px;
}
.hero-materials p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #202b44;
}
.hero-materials small {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.7;
  color: #5d6b85;
}
.w-hero sup {
  font-size: 0.5em;
  vertical-align: super;
  line-height: 0;
}

/* 機能ブロックの「事実の1行」 */
.fact{margin-top:10px;padding-left:12px;border-left:2px solid #3e6de8;font-size:14px;line-height:1.8;color:#3a4763}
/* 料金 */
.w-pricing .price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
@media(max-width:720px){.w-pricing .price-grid{grid-template-columns:1fr}}
.price-card{border:1px solid rgba(32,43,68,.12);border-radius:16px;padding:26px 24px;background:#fff}
.price-card-main{border-color:#3e6de8;box-shadow:0 8px 28px rgba(62,109,232,.12)}
.price-name{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;color:#3e6de8}
.price-value{display:block;margin:10px 0 18px;font-size:40px;line-height:1.2;color:#202b44;font-variant-numeric:tabular-nums}
.price-value small{font-size:14px;font-weight:600;color:#5d6b85;margin-left:4px}
.price-card ul{margin:0;padding-left:18px}
.price-card li{font-size:15px;line-height:1.9;color:#3a4763}
.price-note{margin-top:18px;font-size:13px;line-height:1.8;color:#5d6b85}