@font-face {font-family:"Kaishi Noto Sans JP";font-style:normal;font-weight:100 900;font-display:swap;src:url("assets/noto-sans-jp.woff2") format("woff2");}
/* Kaishi landing page — source-design reconstruction, 2026-09-17. */
:root {
  --navy:#092d63;
  --blue:#0064df;
  --orange:#ff690a;
  --green:#12ac4a;
  --cream:#fefbf7;
  --pale:#f1f8ff;
  --ink:#1e1e1e;
  --border:#dbe5ef;
  --radius:10px
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:auto
}
body {
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:"Kaishi Noto Sans JP","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  line-height:1.75;
  font-size:16px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%
}
h1,h2,h3,p,ul,dl,dd,blockquote {
  margin:0
}
h1,h2,h3 {
  line-height:1.5
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  font:inherit;
  cursor:pointer
}
button:disabled {
  cursor:default
}
a {
  color:inherit
}
img {
  display:block;
  max-width:100%;
  height:auto
}
svg {
  display:block;
  width:100%;
  height:100%
}
em {
  font-style:normal;
  color:var(--orange)
}
small {
  font-size:.65em
}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:4px
}
[hidden] {
  display:none!important
}
.keep {
  display:inline-block;
  max-width:100%
}
.blue {
  color:var(--blue)
}
.only-mobile {
  display:none
}
.only-desktop {
  display:block
}
.wrap {
  width:min(1252px,calc(100% - 64px));
  margin-inline:auto
}
.block {
  padding:56px 0
}
.cream {
  background:var(--cream)
}
.pale {
  background:var(--pale)
}
.block-title {
  margin:0 0 28px;
  text-align:center
}
.block-title h2 {
  font-size:clamp(28px,2.65vw,38px);
  color:var(--navy);
  font-weight:800;
  line-height:1.5
}
.lead {
  text-align:center;
  font-size:21px;
  color:var(--navy);
  margin-bottom:24px
}
.lead-photo {
  width:580px;
  height:auto;
  border-radius:8px;
  margin:0 auto 28px
}
.note {
  font-size:13px;
  color:#586271;
  text-align:center;
  margin-top:20px
}
.skip-link {
  position:absolute;
  top:0;
  left:12px;
  transform:translateY(-110%);
  padding:10px 15px;
  background:#fff;
  z-index:30
}
.skip-link:focus {
  transform:none
}

/* FV: photograph, lettering, HTML headline and seal are independent layers. */
.fv {
  position:relative;
  isolation:isolate;
  container-type:inline-size;
  max-width:1440px;
  aspect-ratio:1440/500;
  margin:auto;
  overflow:hidden;
  background:#fbf4e9
}
.fv-photo {
  position:absolute;
  inset:0;
  z-index:-2
}
.fv-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top
}
.fv:after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#fff4e888,transparent 55%)
}
.fv-lettering {
  display:none
}
.fv-lettering-desktop {
  position:absolute;
  left:4.5%;
  top:3%;
  width:40%;
  aspect-ratio:575/125;
  mix-blend-mode:multiply
}
.fv-title {
  position:absolute;
  left:5%;
  top:31%;
  width:46%;
  background:#fffaf4e8;
  padding:1.3cqw 1.8cqw;
  border-radius:6px;
  font-size:2.78cqw;
  line-height:1.55;
  letter-spacing:-.035em;
  font-weight:700
}
.fv-title-row {
  display:block;
  width:max-content;
  max-width:100%
}
.fv-title-opening {display:block}
.fv-title-opening > .fv-title-row {display:inline}
.fv-title em {
  color:#ff5f0a
}
.fv-description {
  position:absolute;
  left:5.7%;
  top:78%;
  width:43%;
  font-weight:700;
  font-size:1.3cqw;
  line-height:1.8
}
.fv-description>span {
  display:block
}
.fv-seal {
  position:absolute;
  right:3.2%;
  top:30%;
  width:22%;
  aspect-ratio:163/166
}
.intro {
  padding-top:20px;
  padding-bottom:28px
}
.intro>.wrap {
  display:grid;
  gap:18px
}
.intro-label {
  order:0;
  text-align:center;
  font-weight:700;
  letter-spacing:.15em
}
.enrollment {
  order:1;
  position:relative;
  overflow:hidden;
  border-radius:16px;
  padding:23px;
  background:linear-gradient(110deg,#192457,#2d427d,#192457);
  color:white;
  text-align:center;
  box-shadow:0 3px 5px #16224b22
}
.enrollment h2 {
  font-size:30px;
  position:relative;
  z-index:1
}
.enrollment h2 span {
  color:#ffe084
}
.enrollment p {
  font-size:20px;
  margin-top:13px;
  position:relative;
  z-index:1
}
.enrollment img {
  position:absolute;
  bottom:0;
  right:5%;
  width:180px;
  opacity:.3
}
.proofs {
  order:2;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid #ffdcc5;
  border-radius:14px;
  background:#fff6ef;
  overflow:hidden
}
.proofs>div {
  display:flex;
  align-items:center;
  gap:20px;
  padding:22px;
  font-weight:700;
  font-size:16px
}
.proofs>div+div {
  border-left:1px solid #f1dcc8
}
.proofs img {
  width:76px;
  height:76px;
  object-fit:contain;
  flex:none
}
.cta-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}
.intro .cta-pair {
  order:3
}
.cta {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:0;
  border:0;
  border-radius:12px;
  padding:19px 14px;
  color:#fff;
  text-align:center;
  box-shadow:0 3px 0 #00000010;
  transition:filter .15s
}
.cta:hover {
  filter:brightness(1.05)
}
.cta-request {
  background:#ff7b0e
}
.cta-line {
  background:#14a949
}
.cta small {
  font-size:17px
}
.cta strong {
  font-size:24px;
  line-height:1.5
}
.cta span {
  font-size:16px
}
.cta>b {
  font-size:25px;
  line-height:1
}
.reasons-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}
.reason {
  background:white;
  border:1px solid #f3d8c3;
  border-radius:12px;
  padding:24px 18px
}
.reason-mark {
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:18px;
  font-weight:700;
  font-size:25px;
  color:var(--orange)
}
.reason-mark img {
  width:56px;
  height:56px;
  object-fit:contain
}
.reason h3 {
  font-size:22px;
  color:var(--navy)
}
.reason p {
  font-size:15px;
  margin-top:15px
}
.slides {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px
}
.slide-item {
  min-width:0
}
.slider-nav {
  display:none
}
.subjects {
  padding:0;
  list-style:none;
  display:grid;
  gap:9px
}
.subjects li {
  background:#edf4ff;
  border:1px solid #c9ddf3;
  border-radius:7px;
  padding:9px 7px;
  text-align:center;
  color:var(--navy);
  font-size:17px
}
.skill {
  height:100%;
  padding:16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff
}
.skill-image {
  aspect-ratio:318/161;
  overflow:hidden;
  border-radius:8px
}
.skill-image img {
  width:100%;
  max-width:none
}
.skill h3 {
  text-align:center;
  color:#0047b9;
  font-size:23px;
  margin:18px 0
}
.project-lead {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:40px;
  align-items:center;
  margin-bottom:30px
}
.project-lead h3 {
  font-size:24px;
  color:var(--navy);
  margin-bottom:12px
}
.project-lead img {
  width:100%;
  border-radius:8px
}
.pill {
  display:inline-block;
  border-radius:20px;
  background:var(--navy);
  color:#fff;
  padding:3px 15px;
  font-size:13px;
  margin-top:14px
}
.process {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.process-card {
  position:relative;
  background:white;
  border-radius:10px;
  padding:14px
}
.process-card>img {
  width:100%;
  border-radius:6px
}
.process-card h3 {
  font-size:22px;
  text-align:center;
  margin:14px 0 8px;
  color:var(--navy)
}
.process-card p {
  text-align:center;
  font-size:15px
}
.process-number {
  position:absolute;
  left:7px;
  top:-12px;
  border-radius:50%;
  background:var(--orange);
  color:#fff;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  font-size:13px;
  font-weight:700
}
.process-card+article:before {
  content:'›';
  color:var(--orange);
  position:absolute;
  left:-25px;
  top:42%;
  font-size:40px
}
.nsg {
  display:grid;
  grid-template-columns:2fr 1fr;
  background:var(--orange);
  color:white;
  border-radius:10px;
  overflow:hidden;
  margin:28px 0
}
.nsg>div {
  padding:23px 28px
}
.nsg h3 {
  font-size:23px
}
.nsg strong {
  font-size:34px
}
.nsg img {
  width:100%;
  height:100%;
  object-fit:cover
}
.domain-heading {
  font-size:20px;
  color:var(--navy);
  margin-bottom:18px
}
.domains {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:15px 10px;
  padding:0;
  list-style:none
}
.domains li {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  line-height:1.5;
  color:var(--navy)
}
.domains img {
  width:25px;
  height:25px;
  object-fit:contain;
  flex:none
}
.case-ages {
  display:block
}
.case-tabs {
  display:none
}
#cases .slides {
  grid-template-columns:1fr;
  gap:20px
}
.career {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:30px;
  align-items:center;
  border:1px solid #dce5ef;
  background:#f1f6fe;
  border-radius:12px;
  padding:30px
}
.career .eyebrow {
  font-size:32px;
  color:var(--orange);
  font-weight:800;
  line-height:1.3
}
.career-age {
  font-size:20px;
  color:var(--navy);
  font-weight:700;
  margin-top:8px
}
.career h3 {
  font-size:25px;
  margin:16px 0;
  color:var(--navy)
}
.career-theme {
  display:block;
  font-size:.8em;
  margin-bottom:7px
}
.career-subjects {
  display:flex;
  flex-wrap:wrap;
  gap:6px 13px;
  padding:12px;
  background:#e3edf9;
  border-radius:6px;
  font-size:16px;
  color:var(--navy)
}
.career-subjects span {
  display:inline-block
}
.career>img {
  width:100%;
  height:auto;
  border-radius:8px
}
.case-2 {
  background:#fff4e9
}
.case-2 .career-subjects {
  background:#ffe8d8
}
.case-3 {
  background:#fffbea
}
.case-3 .career-subjects {
  background:#f8efc3
}
.case-4 {
  background:#eff9f4
}
.case-4 .career-subjects {
  background:#dfeee5
}
.case-5 {
  background:#f7f2fc
}
.case-5 .career-subjects {
  background:#eae1f4
}
.fees {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}
.fee {
  padding:24px;
  background:#fff;
  border-radius:10px;
  color:var(--navy)
}
.fee.featured {
  background:#fff6df
}
.fee h3 {
  min-height:62px;
  font-size:18px
}
.fee>p {
  font-size:14px;
  margin-top:14px
}
.fee>strong {
  font-size:clamp(30px,3vw,44px);
  white-space:nowrap
}
.fee.featured>strong {
  color:var(--orange)
}
.fee strong small {
  font-size:16px
}
.fee p>b {
  color:#d95327
}
.fee-bar {
  height:18px;
  overflow:hidden;
  border-radius:5px;
  background:#e9f0f8;
  margin:10px 0
}
.fee-bar span {
  height:100%;
  display:block;
  background:#9cbee9
}
.featured .fee-bar span {
  background:var(--orange)
}
.advanced {
  background:#fff;
  border-radius:12px;
  text-align:center;
  padding:22px;
  margin:24px 0;
  font-size:22px;
  color:var(--navy)
}
.advanced strong {
  font-size:38px;
  color:var(--blue);
  margin-left:20px
}
.costs {
  background:#e3f2ff;
  border-radius:12px;
  padding:26px;
  max-width:820px;
  margin:auto;
  color:var(--navy)
}
.costs h3 {
  font-size:26px;
  text-align:center;
  margin-bottom:18px
}
.costs dl {
  background:white;
  border-radius:8px;
  padding:12px 22px
}
.costs dl>div {
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:12px 0
}
.costs dt {
  display:flex;
  align-items:center;
  gap:12px
}
.costs dt img {
  width:25px;
  height:25px;
  object-fit:contain
}
.costs dd {
  white-space:nowrap;
  font-weight:700
}
.total {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding-top:18px;
  font-weight:700
}
.total strong {
  font-size:40px;
  color:#bd5634
}
.selection {
  max-width:820px;
  margin:18px auto 0;
  border-radius:9px;
  background:#e7f3fe;
  text-align:center;
  padding:15px;
  font-size:21px;
  color:var(--navy);
  font-weight:700
}
.timing-photos {
  display:flex;
  justify-content:center;
  gap:15px;
  margin:0 auto 20px;
  max-width:580px
}
.timing-photos img {
  width:calc(50% - 7.5px);
  height:auto;
  border-radius:8px
}
.timeline {
  display:grid;
  grid-template-columns:200px 1fr 145px;
  align-items:center;
  gap:22px;
  padding:24px;
  background:#f4faff;
  border-radius:12px;
  margin-top:20px;
  color:var(--navy)
}
.timeline h3 {
  font-size:20px;
  color:var(--orange)
}
.timeline-track {
  display:flex;
  overflow:hidden;
  border-radius:5px;
  background:var(--orange);
  font-size:11px;
  line-height:34px;
  text-align:center;
  color:white
}
.timeline-track span {
  white-space:nowrap
}
.timeline-track .study {
  background:#88b7f0
}
.timeline-track .wait {
  background:#bcc3ce
}
.timeline p {
  font-size:13px;
  margin-top:12px
}
.timeline>strong {
  font-size:37px;
  color:var(--orange);
  white-space:nowrap
}
.timeline.later h3,.timeline.later>strong {
  color:#818995
}
.later .timeline-track {
  background:#e6bca7
}
.timing-result {
  background:#fff1e4;
  border-radius:10px;
  padding:16px;
  text-align:center;
  font-weight:800;
  color:var(--orange);
  font-size:27px;
  margin-top:24px
}
.line-promo {
  background:#12ac4a;
  border-radius:12px;
  padding:23px;
  color:white
}
.line-promo h2 {
  font-size:24px;
  text-align:center;
  margin-bottom:18px
}
.line-promo button {
  display:flex;
  align-items:center;
  gap:20px;
  width:100%;
  border:0;
  border-radius:9px;
  background:#fff;
  color:var(--green);
  padding:22px;
  text-align:left
}
.line-promo button>img {
  width:60px;
  height:60px;
  object-fit:contain;
  flex:none
}
.line-promo button>span {
  flex:1
}
.line-promo strong {
  font-size:38px;
  display:block;
  line-height:1.45
}
.line-promo small {
  display:block;
  font-size:15px;
  color:var(--ink);
  margin-top:8px
}
.line-promo button>b {
  font-size:30px
}
.week-intro {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:35px;
  margin-bottom:28px
}
.week-intro img {
  width:180px;
  height:auto;
  border-radius:8px
}
.week-intro p {
  font-size:21px
}
.weekdays {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:5px
}
.weekdays span {
  text-align:center;
  background:#286bcb;
  color:white;
  border-radius:5px;
  padding:10px 0;
  font-size:21px;
  font-weight:700
}
.weekdays span:nth-child(n+6) {
  background:var(--orange)
}
.week-label {
  display:grid;
  grid-template-columns:5fr 2fr;
  gap:5px;
  text-align:center;
  margin:5px 0 24px;
  font-weight:700;
  color:var(--blue)
}
.week-label span {
  background:#eef6fe;
  padding:4px
}
.week-label span+span {
  background:#fff4e8;
  color:var(--orange)
}
.study-plan {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}
.study-plan article {
  display:grid;
  grid-template-columns:130px 1fr;
  gap:14px 24px;
  align-items:center;
  background:#eef8ff;
  padding:26px;
  border-radius:10px
}
.study-plan article+article {
  background:#fff6ec
}
.study-plan h3,.study-time {
  grid-column:1/-1
}
.study-plan h3 {
  font-size:25px;
  color:var(--blue)
}
.study-time {
  font-weight:700
}
.study-plan img {
  width:130px;
  height:110px;
  object-fit:contain
}
.study-plan ul {
  font-size:15px;
  padding-left:20px
}
.study-result {
  font-size:24px;
  font-weight:700;
  text-align:center;
  background:#eef8ff;
  border-radius:10px;
  color:var(--blue);
  padding:18px;
  margin-top:22px
}
.calendar-copy {
  margin-bottom:24px;
  line-height:1.9
}
.calendar {
  display:grid;
  grid-template-columns:2.15fr 1fr 2.15fr 1fr;
  gap:8px
}
.term {
  display:flex;
  overflow:hidden;
  border-radius:5px
}
.term>b {
  writing-mode:vertical-rl;
  padding:12px 8px;
  background:#e867aa;
  color:white;
  text-align:center
}
.term p {
  flex:1;
  padding:18px 7px;
  text-align:center;
  font-size:14px;
  white-space:nowrap
}
.calendar strong {
  display:block;
  font-size:16px;
  margin-top:6px
}
.spring {
  background:#fff0f7;
  color:#bc3a82
}
.autumn {
  background:#e4f5ff;
  color:#1d659d
}
.autumn>b {
  background:#3697ce
}
.break {
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-radius:5px;
  text-align:center;
  font-size:14px
}
#voices .slides {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.voice {
  display:grid;
  grid-template-columns:42% 1fr;
  align-items:center;
  background:white;
  border-radius:10px;
  overflow:hidden;
  height:100%
}
.voice>img {
  width:100%;
  height:auto
}
.voice>div {
  padding:20px
}
.voice h3 {
  font-size:22px;
  color:var(--blue)
}
.voice p {
  font-size:13px;
  margin-top:5px
}
.voice blockquote {
  font-size:20px;
  line-height:1.6;
  font-weight:700;
  color:var(--navy);
  margin-top:14px
}
.teacher-profile {
  display:grid;
  grid-template-columns:235px 1fr;
  gap:35px;
  align-items:center;
  background:#fff;
  border-radius:12px;
  padding:32px;
  max-width:1080px;
  margin:auto
}
.teacher-profile>img {
  width:100%;
  height:auto
}
.teacher-profile h3 {
  color:var(--navy);
  font-size:30px;
  margin-bottom:14px
}
.teacher-profile p {
  font-size:16px
}
.teacher-profile blockquote {
  padding:17px;
  margin:20px 0;
  background:#eef6ff;
  color:var(--navy);
  font-weight:700;
  font-size:27px
}
.faq {
  max-width:1000px;
  margin:auto;
  display:grid;
  gap:18px
}
.faq details {
  background:white;
  border-radius:10px;
  padding:0 24px;
  color:var(--navy)
}
.faq summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  gap:14px;
  align-items:center;
  padding:21px 0;
  font-size:20px;
  font-weight:700
}
.faq summary::-webkit-details-marker {
  display:none
}
.faq summary>span {
  background:#e9f4ff;
  border-radius:50%;
  padding:0 8px;
  font-size:23px;
  flex:none
}
.faq summary:after {
  content:'+';
  margin-left:auto;
  font-size:23px;
  flex:none
}
.faq details[open] summary:after {
  content:'−'
}
.answer {
  display:flex;
  gap:12px;
  background:#f0f7fc;
  padding:18px;
  margin-bottom:22px;
  font-size:16px
}
.answer>span {
  font-weight:700
}
.application-card {
  max-width:760px;
  margin:auto;
  padding:28px;
  background:#e3f1ff;
  border-radius:10px;
  text-align:center;
  color:var(--blue)
}
.application-card>.eyebrow {
  font-size:32px;
  font-weight:700
}
.application-card h3 {
  font-size:18px;
  margin-top:14px
}
.application-period {
  background:white;
  color:var(--ink);
  border-radius:8px;
  padding:17px;
  font-weight:700;
  font-size:26px;
  margin:16px 0
}
.application-card ul {
  list-style:none;
  padding:15px;
  background:#fff;
  border-radius:8px;
  text-align:left;
  display:flex;
  flex-wrap:wrap;
  gap:14px
}
.application-card li {
  font-size:15px
}
.application-card li:before {
  content:'✓';
  margin-right:7px
}
.application-button {
  width:100%;
  border:0;
  border-radius:8px;
  padding:13px 20px;
  display:flex;
  justify-content:space-between;
  background:var(--blue);
  color:#fff;
  font-size:20px;
  font-weight:700;
  margin-top:18px
}
.closing {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:30px;
  align-items:center;
  margin-bottom:30px
}
.closing h2 {
  font-size:clamp(28px,3vw,38px);
  line-height:1.65
}
.closing-tagline {
  font-size:28px;
  color:var(--orange);
  margin-bottom:18px;
  font-family:serif
}
.closing>img {
  width:270px;
  height:auto;
  justify-self:center
}
.contact-phone {
  text-align:center;
  margin-top:25px;
  color:var(--navy);
  font-weight:700
}
.contact-phone a {
  font-size:30px;
  text-decoration:none
}
.contact-phone small {
  display:block;
  font-size:13px
}
footer {
  background:#eef7ff;
  padding:45px 0;
  color:var(--navy)
}
.footer-layout {
  background:white;
  border-radius:12px;
  padding:32px 40px;
  display:flex;
  justify-content:space-between;
  gap:30px
}
.footer-layout h2 {
  font-size:25px
}
.footer-layout address {
  font-size:14px;
  font-style:normal;
  line-height:1.9;
  margin-top:18px
}
.footer-layout nav {
  display:flex;
  flex-direction:column;
  gap:12px;
  justify-content:center
}
.footer-layout button {
  border:0;
  background:#f1f7fc;
  color:var(--navy);
  text-align:left;
  padding:10px 14px;
  font-size:14px;
  min-height:44px
}
.notification {
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  max-width:calc(100% - 30px);
  width:max-content;
  z-index:40;
  border:1px solid #cad8e9;
  border-radius:10px;
  background:white;
  color:var(--navy);
  box-shadow:0 5px 20px #0002;
  padding:12px 18px;
  font-size:14px
}

/* Intermediate widths retain readable columns without squeezing long labels. */
@media(min-width:768px) and (max-width:1050px) {
  .reasons-grid {
  grid-template-columns:repeat(2,1fr)
}
.proofs>div {
  padding:18px 12px;
  gap:12px;
  font-size:13px
}
.proofs img {
  width:55px;
  height:55px
}
.cta strong {
  font-size:20px
}
.cta small,.cta span {
  font-size:13px
}
.domains {
  grid-template-columns:repeat(4,1fr)
}
.calendar {
  grid-template-columns:2.15fr 1fr
}
.fee {
  padding:16px
}
.fee h3 {
  font-size:16px
}
.fee>strong {
  font-size:30px
}
.voice {
  display:block
}
.voice>img {
  width:100%;
  height:auto
}
.timeline {
  grid-template-columns:160px 1fr
}
.timeline>strong {
  grid-column:2
}
.study-plan article {
  grid-template-columns:1fr
}
.study-plan img {
  margin:auto
}
.skill h3 {
  font-size:20px
}
.subjects li {
  font-size:14px
}

}

/* Mobile design uses a 390 × 585 FV coordinate system and natural-flow content. */
@media(max-width:767px) {
  
 body {
  font-size:14px;
  line-height:1.75
}
.wrap {
  width:calc(100% - 40px);
  max-width:500px
}
.block {
  padding:32px 0
}
.only-mobile {
  display:block
}
.only-desktop {
  display:none
}
.block-title {
  margin-bottom:22px
}
.block-title h2 {
  font-size:clamp(22px,6.15vw,26px);
  line-height:1.5;
  letter-spacing:-.025em
}
.lead {
  font-size:16px;
  margin-top:-8px;
  margin-bottom:20px
}
.lead-photo {
  max-width:100%;
  height:auto;
  margin-bottom:20px
}
.note {
  font-size:12px;
  margin-top:16px
}

 .fv {
  width:100%;
  max-width:540px;
  aspect-ratio:390/585;
  background:#fbf4e9
}
.fv-photo img {
  object-fit:fill;
  object-position:center
}
.fv:after {
  display:none
}
.fv-lettering {
  display:block;
  position:absolute;
  left:5.13%;
  top:3.08%;
  width:56.41%;
  aspect-ratio:220/143;
  mix-blend-mode:multiply;
  clip-path:polygon(0 10%,100% 0,100% 61%,0 100%)
}
.fv-lettering-desktop {
  display:none
}
.fv-title {
  left:4.4%;
  top:40.3%;
  width:90%;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  font-size:7.7cqw;
  line-height:1.4;
  letter-spacing:-.035em;
  transform:rotate(-2deg);
  transform-origin:left center
}
.fv-title-opening {display:contents}
.fv-title-opening > .fv-title-row {display:block}
.fv-title-row {
  position:relative;
  isolation:isolate;
  padding:.45cqw 3cqw .45cqw 3.5cqw;
  margin-top:-.15cqw;
  white-space:nowrap;
  max-width:none
}
.fv-title-row:before {
  content:"";
  position:absolute;
  inset:-1.2cqw -1.4cqw -1.2cqw -1cqw;
  background:#fff;
  z-index:-1;
  clip-path:polygon(2% 5%,12% 3%,20% 5%,31% 1%,43% 3%,58% 0,70% 3%,82% 1%,98% 4%,97% 12%,100% 15%,98% 22%,99% 28%,97% 35%,100% 39%,98% 46%,99% 53%,97% 61%,99% 67%,98% 73%,100% 78%,97% 84%,98% 93%,89% 96%,75% 94%,61% 99%,48% 96%,33% 100%,19% 97%,2% 100%,3% 91%,1% 86%,3% 77%,0 71%,2% 63%,1% 54%,3% 47%,1% 39%,3% 31%,1% 23%,3% 16%)
}
.fv-description {
  left:5.13%;
  top:75.7%;
  width:50%;
  font-size:3.18cqw;
  line-height:1.85;
  font-weight:700
}
.fv-description>span:nth-child(2) {
  margin:1cqw 0
}
.fv-seal {
  left:55.64%;
  right:auto;
  top:68.72%;
  width:41.8%;
  aspect-ratio:163/166
}

 .intro {
  padding-top:20px;
  padding-bottom:22px
}
.intro>.wrap {
  gap:18px
}
.intro .cta-pair {
  order:0
}
.intro-label {
  order:1;
  font-size:14px;
  letter-spacing:0;
  margin-top:8px
}
.enrollment {
  order:2;
  border-radius:10px;
  padding:18px 12px
}
.enrollment h2 {
  font-size:22px
}
.enrollment h2 span {
  display:block
}
.enrollment p {
  font-size:14px;
  margin-top:9px
}
.enrollment img {
  width:124px;
  right:4px
}
.proofs {
  order:3;
  grid-template-columns:1fr;
  gap:12px;
  border:0;
  background:none;
  overflow:visible
}
.proofs>div {
  background:white;
  border-radius:10px;
  padding:12px;
  gap:16px;
  font-size:15px
}
.proofs>div+div {
  border:0
}
.proofs img {
  width:78px;
  height:78px
}
.cta-pair {
  grid-template-columns:1fr;
  gap:16px
}
.cta {
  border-radius:10px;
  padding:15px 12px;
  gap:8px;
  min-height:145px
}
.cta strong {
  font-size:21px;
  line-height:1.5
}
.cta small,.cta span {
  font-size:14px
}
.cta-line strong {
  font-size:22px
}
.cta>b {
  font-size:22px
}
.reasons-grid {
  grid-template-columns:1fr;
  gap:12px
}
.reason {
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  column-gap:12px;
  padding:15px 13px;
  align-items:center
}
.reason-mark {
  grid-row:1/3;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:18px;
  margin:0
}
.reason-mark img {
  width:44px;
  height:43px
}
.reason h3 {
  font-size:clamp(17px,4.7vw,20px);
  line-height:1.5
}
.reason p {
  font-size:13px;
  margin-top:7px
}
#reasons .block-title h2 {
  font-size:clamp(21px,5.85vw,25px)
}
.slides,#cases .slides,#voices .slides {
  display:block
}
.slide-item {
  width:100%
}
.slide-item.is-active {
  animation:slide-in .28s ease-out
}
.slider-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:18px
}
.slider-nav button {
  min-height:44px;
  width:85px;
  border:1px solid #cdd8e5;
  border-radius:24px;
  background:white;
  color:var(--navy);
  font-size:23px
}
.slider-nav button[data-direction="1"] {
  background:var(--orange);
  color:#fff;
  border-color:var(--orange)
}
.slider-nav button:disabled {
  background:#edf0f3;
  border-color:#edf0f3;
  color:#a8b0ba
}
.slider-nav output {
  font-size:14px;
  min-width:50px;
  text-align:center;
  color:var(--navy)
}
.skill {
  padding:15px;
  border-radius:12px
}
.skill h3 {
  font-size:21px;
  margin:14px 0 16px
}
.subjects li {
  padding:9px;
  font-size:16px
}
.project-lead {
  grid-template-columns:1fr;
  gap:18px;
  margin-bottom:28px
}
.project-lead h3 {
  font-size:20px
}
.project-lead p {
  font-size:14px
}
.project-lead img {
  width:100%
}
.process {
  grid-template-columns:1fr;
  gap:20px
}
.process-card {
  display:grid;
  grid-template-columns:105px 1fr;
  gap:5px 12px;
  padding:15px 12px
}
.process-card>img {
  grid-row:1/3;
  align-self:center
}
.process-card h3 {
  text-align:left;
  margin:0;
  font-size:18px
}
.process-card p {
  text-align:left;
  font-size:13px
}
.process-card+article:before {
  display:none
}
.process-number {
  width:27px;
  height:27px;
  font-size:12px;
  top:-9px
}
.nsg {
  grid-template-columns:1fr;
  margin:24px 0
}
.nsg>div {
  padding:22px 18px
}
.nsg h3 {
  font-size:20px
}
.nsg strong {
  font-size:28px
}
.nsg img {
  height:auto
}
.domain-heading {
  font-size:18px;
  text-align:center
}
.domains {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px 7px
}
.domains li {
  font-size:11px;
  gap:5px;
  overflow-wrap:anywhere
}
.domains img {
  width:20px;
  height:20px
}
.case-ages {
  font-size:clamp(17px,5.1vw,22px);
  margin-bottom:5px;
  white-space:nowrap
}
.case-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:16px
}
.case-tabs button {
  border:1px solid #bcd2eb;
  border-radius:6px;
  padding:6px 9px;
  min-height:38px;
  font-size:12px;
  background:white;
  color:var(--navy)
}
.case-tabs button[aria-pressed=true] {
  background:var(--blue);
  color:white;
  border-color:var(--blue)
}
.career {
  grid-template-columns:1fr;
  padding:20px 16px;
  gap:18px
}
.career .eyebrow {
  font-size:25px
}
.career-age {
  font-size:16px;
  margin-top:5px
}
.career h3 {
  font-size:clamp(17px,4.7vw,20px);
  margin:12px 0;
  line-height:1.6
}
.career-theme {
  font-size:.8em
}
.career-subjects {
  font-size:12px;
  gap:6px 12px;
  padding:10px;
  line-height:1.8
}
.career>img {
  width:100%;
  height:auto
}
.fees {
  grid-template-columns:1fr;
  gap:10px
}
.fee {
  padding:20px 16px
}
.fee h3 {
  font-size:16px;
  min-height:0
}
.fee>p {
  margin-top:8px
}
.fee>strong {
  font-size:35px
}
.fee.featured>strong {
  font-size:40px
}
.advanced {
  font-size:17px;
  padding:18px;
  margin:18px 0
}
.advanced strong {
  display:block;
  font-size:30px;
  margin:0
}
.costs {
  padding:18px 14px
}
.costs h3 {
  font-size:21px;
  margin-bottom:14px
}
.costs dl {
  padding:8px 12px
}
.costs dl>div {
  font-size:13px;
  padding:10px 0;
  gap:8px
}
.costs dt {
  gap:7px
}
.costs dt img {
  width:21px;
  height:21px
}
.total {
  font-size:15px;
  padding-top:14px
}
.total strong {
  font-size:32px
}
.selection {
  font-size:17px;
  padding:13px;
  margin-top:14px
}
.timing-photos {
  gap:10px
}
.timing-photos img {
  width:calc(50% - 5px)
}
.timeline {
  grid-template-columns:1fr;
  gap:13px;
  padding:18px
}
.timeline h3 {
  font-size:19px
}
.timeline>strong {
  font-size:35px;
  justify-self:end
}
.timeline-track {
  font-size:9px;
  line-height:29px
}
.timeline p {
  font-size:12px;
  margin-top:10px
}
.timing-result {
  font-size:21px;
  padding:14px;
  margin-top:18px
}
.line-promo {
  padding:16px
}
.line-promo h2 {
  font-size:17px;
  margin-bottom:14px
}
.line-promo button {
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:10px;
  padding:16px 12px
}
.line-promo button>img {
  width:34px;
  height:34px;
  align-self:start
}
.line-promo button>span {
  font-size:14px
}
.line-promo strong {
  font-size:23px;
  letter-spacing:-.04em;
  line-height:1.5
}
.line-promo small {
  font-size:12px
}
.line-promo button>b {
  grid-column:2;
  text-align:right;
  font-size:24px;
  line-height:1
}
.week-intro {
  gap:16px;
  margin-bottom:20px
}
.week-intro img {
  width:110px
}
.week-intro p {
  font-size:14px
}
.weekdays {
  gap:4px
}
.weekdays span {
  font-size:16px;
  padding:7px 0
}
.week-label {
  gap:4px;
  font-size:13px;
  margin-bottom:18px
}
.study-plan {
  grid-template-columns:1fr;
  gap:16px
}
.study-plan article {
  grid-template-columns:95px 1fr;
  padding:18px 14px;
  gap:12px 14px
}
.study-plan h3 {
  font-size:23px
}
.study-time {
  font-size:14px
}
.study-plan img {
  width:95px;
  height:85px
}
.study-plan ul {
  font-size:13px;
  padding-left:17px
}
.study-result {
  font-size:18px;
  text-align:left;
  padding:15px;
  margin-top:18px
}
.calendar-copy {
  font-size:14px;
  margin-bottom:18px
}
.calendar {
  grid-template-columns:2.15fr 1fr;
  gap:10px 6px
}
.term>b {
  font-size:13px;
  padding:10px 6px
}
.term p {
  font-size:11px;
  padding:16px 5px
}
.calendar strong {
  font-size:13px
}
.break {
  font-size:12px
}
.voice {
  display:block;
  max-width:350px;
  margin:auto
}
.voice>img {
  width:100%;
  height:auto
}
.voice>div {
  padding:16px;
  text-align:center
}
.voice h3 {
  font-size:20px
}
.voice p {
  font-size:13px
}
.voice blockquote {
  font-size:19px;
  margin-top:12px
}
.teacher-profile {
  grid-template-columns:1fr;
  padding:20px;
  gap:18px
}
.teacher-profile>img {
  width:210px;
  margin:auto
}
.teacher-profile h3 {
  font-size:24px
}
.teacher-profile p {
  font-size:14px
}
.teacher-profile blockquote {
  font-size:21px;
  padding:14px;
  margin:16px 0
}
.faq {
  gap:13px
}
.faq details {
  padding:0 14px
}
.faq summary {
  font-size:15px;
  gap:10px;
  padding:16px 0
}
.faq summary>span {
  font-size:19px;
  padding:0 6px
}
.answer {
  font-size:13px;
  padding:13px 10px;
  margin-bottom:15px;
  gap:10px
}
.application-card {
  padding:20px 16px
}
.application-card>.eyebrow {
  font-size:26px
}
.application-card h3 {
  font-size:16px
}
.application-period {
  font-size:23px;
  padding:15px 10px
}
.application-card ul {
  display:block;
  padding:12px
}
.application-card li {
  font-size:14px;
  margin:5px 0
}
.application-button {
  font-size:17px;
  padding:12px 16px
}
.closing {
  grid-template-columns:1fr;
  gap:23px;
  margin-bottom:23px
}
.closing>img {
  grid-row:1;
  width:270px
}
.closing h2 {
  text-align:center;
  font-size:26px;
  line-height:1.6
}
.closing-tagline {
  font-size:22px;
  text-align:center;
  margin-bottom:18px
}
.contact-phone {
  margin-top:22px
}
.contact-phone a {
  font-size:26px
}
.contact-phone small {
  font-size:12px
}
footer {
  padding:28px 0
}
.footer-layout {
  display:block;
  padding:22px 18px
}
.footer-layout h2 {
  font-size:22px
}
.footer-layout>div>p {
  font-size:14px
}
.footer-layout address {
  font-size:13px;
  margin-top:15px
}
.footer-layout nav {
  margin-top:22px;
  gap:8px
}
.notification {
  font-size:13px;
  padding:11px 15px
}


}

@media(max-width:359px) {
  .wrap {
  width:calc(100% - 32px)
}
.cta strong {
  font-size:19px
}
.cta small,.cta span {
  font-size:12px
}
.proofs img {
  width:65px;
  height:65px
}
.proofs>div {
  font-size:13px;
  gap:12px
}
.reason {
  grid-template-columns:36px minmax(0,1fr);
  gap:5px 10px;
  padding:14px 11px
}
.reason-mark img {
  width:36px;
  height:36px
}
.reason h3 {
  font-size:16px
}
.reason p {
  font-size:11px
}
.subjects li {
  font-size:14px
}
.skill h3 {
  font-size:19px
}
.domains {
  font-size:10px
}
.domains img {
  width:17px;
  height:17px
}
.process-card {
  grid-template-columns:85px 1fr
}
.total strong {
  font-size:28px
}
.application-period {
  font-size:20px
}
.case-tabs button {
  font-size:11px;
  padding:6px
}
.career-subjects {
  font-size:11px
}

}

@keyframes slide-in {
  from {
  opacity:.55;
  transform:translateX(7px)
}
to {
  opacity:1;
  transform:none
}

}

@media(prefers-reduced-motion:reduce) {
  * {
  animation:none!important;
  transition:none!important
}

}


/* Keep the reference design’s deliberate line breaks. */
.cta-line strong > span {font:inherit;white-space:nowrap;display:inline-block}
@media(max-width:767px) {
  .cta-line strong > span {display:block}
  .cta-line strong {font-size:clamp(18px,5.1vw,24px)}
  .fv-description {width:53%;font-size:3.18cqw;letter-spacing:-.045em}
}

.fv-seal img {width:100%;height:auto}
@media(max-width:767px) {
  .fv-description:before {content:"";position:absolute;z-index:-1;inset:-5cqw -5cqw -5cqw -6cqw;background:linear-gradient(90deg,rgba(255,251,244,.97) 0%,rgba(255,251,244,.88) 72%,rgba(255,251,244,0) 100%);filter:blur(5px)}
  .fv-description {isolation:isolate;text-shadow:0 1px 2px #fff8;line-height:1.8}
  .fv-seal {left:59%;width:38%;top:72.5%}
}

/* Fit the hero and primary CTA inside the initial mobile viewport. */
@media(max-width:767px) {
  .fv {width:min(100%,calc((100vh - 132px) * 2 / 3));width:min(100%,calc((100svh - 132px) * 2 / 3))}
  #introduction {padding-top:8px}
  #introduction .cta-request {height:116px;min-height:116px;padding:8px;gap:3px}
  #introduction .cta-request small {font-size:13px;line-height:18px}
  #introduction .cta-request strong {font-size:clamp(18px,5.1vw,22px);line-height:30px;white-space:nowrap}
  #introduction .cta-request span {font-size:clamp(10px,2.8vw,13px);line-height:18px;white-space:nowrap}
  #introduction .cta-request > b {font-size:20px;line-height:20px}
}

/* Full-width mobile composition, with room reserved for the primary CTA. */
@media(max-width:767px) {
  .fv {width:100%;height:min(150vw,calc(100svh - 132px));aspect-ratio:auto;container-type:size}
  .fv-photo img {object-fit:cover;object-position:center 32%}
  .fv-title {top:auto;bottom:31%;font-size:min(7.7cqw,5.8cqh)}
  .fv-description {top:auto;bottom:5%;font-size:min(3.18cqw,2.6cqh)}
  .fv-seal {left:auto;right:3%;top:auto;bottom:2%;width:min(36cqw,27cqh)}
  .fv-lettering {width:min(56.41cqw,43cqh)}
}

#skills .block-title h2 {color:#1e1e1e}
.skill h3 {line-height:1.45}

/* Figma SP completion frame 2334:908: 390px, padding 32/20, gap 12. */
@media(max-width:767px) {
  #skills {padding:32px 0}
  #skills > .wrap {width:calc(100% - 40px);display:flex;flex-direction:column;gap:12px}
  #skills .block-title {margin:0;text-align:left}
  #skills .block-title h2 {font-size:26px;font-weight:700;line-height:1.5;letter-spacing:0;color:#1e1e1e}
  #skills .lead {margin:0;text-align:left;font-size:15px;line-height:23px;color:#1e1e1e}
  #skills .lead-photo {width:100%;margin:0;border-radius:0}
  #skills .skill {padding:0 16px 16px;border:0;border-radius:0}
  #skills .skill-image {border-radius:0}
  #skills .skill h3 {font-size:22px;font-weight:700;line-height:1.45;margin:12px 0 8px;color:#0047b9}
  #skills .subjects {gap:8px}
  #skills .subjects li {font-size:14px;line-height:20px;padding:7px 6px;border-radius:7px}
  #skills .slider-nav {margin-top:12px}
  #skills .slider-nav button {width:100px;height:44px;min-height:44px;font-size:14px}
  #skills .slider-nav output {font-weight:700}
}

/* Equal square photo areas; keep the fourth portrait on the right visible. */
#voices .voice > img {aspect-ratio:1 / 1;height:auto;object-fit:cover;object-position:center}
#voices .voice > img[src$="student-4.webp"] {object-position:right center}

/* Figma PC 2333:598 crop: x=.25, y=.33, width=.75, height=.60. */
.voice-photo-ym {display:block;position:relative;width:100%;aspect-ratio:1;overflow:hidden}
.voice-photo-ym > img {position:absolute;max-width:none;width:133.333333%;height:auto;left:-33.333333%;top:-55%}

.closing-line {display:block}
@media(max-width:767px) {
  .closing h2 {font-size:clamp(18px,5.55vw,24px);line-height:1.8;letter-spacing:0}
  .closing-line {white-space:nowrap}
  #slider-3-item-4 blockquote {font-size:clamp(16px,4.7vw,19px)}
}

/* Figma: 30–65 comparison, with equal four-year study periods. */
#timing .note {text-align:left;color:#1e1e1e;font-size:15px;line-height:1.6;margin:16px 0}
.timing-axis {color:#173863;font-size:15px;margin:16px 0}
.timing-axis>div {display:flex;justify-content:space-between;padding:16px 16px 0;font-weight:700}
.timing-comparison {display:grid;grid-template-columns:1fr 1fr;gap:16px}
.timing-option {border:1px solid #f4cfba;border-radius:10px;padding:16px;background:#fff;min-width:0}
.timing-option h3 {font-size:19px;font-weight:700;color:#ff650a;line-height:1.5;margin:0 0 12px}
.period-bar {display:flex;height:22px;border-radius:6px;overflow:hidden;margin-bottom:16px}
.period-study {background:#408fea}.period-wait {background:#b8bcc5}.period-work {background:#ff650a}
.period-detail {display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.6;margin:0 0 18px;color:#1e1e1e}
.period-detail img,.work-period>img {width:24px;height:24px;object-fit:contain;flex:none}
.study-detail {color:#173863}
.period-inactive {font-size:14px;font-weight:700;color:#777;margin:0 0 12px}
.work-period {display:flex;align-items:center;gap:8px;background:#fff1e4;border-radius:8px;padding:14px 10px;color:#173863}
.work-period p {font-size:14px;font-weight:700;line-height:1.6}
.work-period strong {margin-left:auto;white-space:nowrap;color:#ff650a;font-size:38px;line-height:1.2}
.work-period strong small {font-size:16px}
.timing-option.is-later {border-color:#dce0e6}
.is-later h3 {color:#4b5563}
.is-later .period-work {background:#ffc1a7}
.is-later .work-period {background:#f3f5fa}
.is-later .work-period strong {color:#78818d}
.is-later .work-period>img {filter:saturate(.3)}
#timing .timing-result {background:#fff1e4;color:#f36518;text-align:center;font-size:24px;line-height:1.6;padding:16px;margin-top:14px;border-radius:10px}
@media(max-width:767px) {
 .timing-comparison {grid-template-columns:1fr;gap:14px}
 #timing .timing-result {font-size:21px}
 .period-detail {font-size:14px}
}
@media(max-width:359px) {
 .timing-option {padding:14px}
 .period-detail {font-size:12px;gap:6px}
 .work-period p {font-size:12px}
 .work-period strong {font-size:34px}
}

/* Figma SP 2334:1292–1298: 390px section, 350px panel, 318px card. */
#simulation {padding:20px 0}
.line-promo {background:#00b746;padding:16px;border-radius:12px}
.line-promo h2 {display:flex;align-items:center;gap:10px;text-align:left;font-size:20px;line-height:1.5;margin:0 0 16px;color:#fff}
.line-promo h2>img {width:24px;height:28px;object-fit:contain;flex:none}
.line-promo button {display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:14px;border-radius:10px;color:#00b746}
.line-promo .simulation-kicker {display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;line-height:36px}
.simulation-kicker img {width:36px;height:36px;object-fit:contain}
.line-promo strong {font-size:32px;line-height:1.5;text-align:center;letter-spacing:0;margin:0}
.simulation-receive {display:block;font-size:20px}
.line-promo .simulation-detail {display:flex;align-items:center;gap:10px}
.line-promo small {font-size:15px;line-height:1.5;color:#1e1e1e;margin:0;flex:1}
.simulation-arrow {font-size:30px;line-height:1;font-weight:400;flex:none}
@media(max-width:767px) {
 #simulation .wrap {width:calc(100% - 40px)}
 .line-promo h2 {font-size:16px;line-height:25px}
 .line-promo .simulation-kicker {font-size:16px}
 .line-promo strong {font-size:24px;white-space:nowrap;letter-spacing:-.02em;line-height:1.5}
 .simulation-receive {font-size:18px}
 .line-promo small {font-size:14px;line-height:23px}
}
@media(max-width:374px) {
 .line-promo h2 {font-size:14px}
 .line-promo strong {font-size:clamp(18px,6.15vw,23px)}
 .line-promo small {font-size:12px}
}

/* Client review, 2026-09-18: attached comments 1–10. */
#projects .project-lead>div {text-align:center}
.process-card p {text-align:center}
.process-line {display:block}
.fee {--comparison-amount-size:32px}
.fee>strong,.fee .fee-difference {font-size:var(--comparison-amount-size);font-weight:700;line-height:1.4}
.fee .fee-difference {display:inline-block;white-space:nowrap;color:var(--orange)}
.fee .fee-difference small {font-size:14px}
.study-plan .study-time {font-size:20px;line-height:1.6;text-align:center;color:var(--blue)}
.study-plan article:nth-child(2) .study-time {color:var(--orange)}
#annual .calendar,#annual .calendar p,#annual .calendar b,#annual .calendar strong,#annual .calendar .break {text-align:center}
#voices .block-title em.blue {color:var(--blue)}
@media(max-width:767px) {
 #skills .lead-photo {display:none}
 #skills .lead {margin-bottom:20px}
 .fee {--comparison-amount-size:28px}
 .fee.featured>strong {font-size:38px}
 .fee>strong small {font-size:14px}
 .study-plan .study-time {font-size:18px}
 #annual .block-title h2>em {display:block}
 .calendar-phrase {white-space:nowrap}
 #annual .term {display:flex;flex-direction:column}
 #annual .term>b {writing-mode:horizontal-tb;padding:8px 4px 0;background:transparent;color:inherit}
 #annual .term p {padding:8px 4px 12px}
 #annual .break {display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 4px}
}

#projects .process-card h3 {text-align:center}

/* Select only the required lettering image through picture, not hidden SVGs. */
.fv-responsive-lettering {display:block;position:absolute;left:4.5%;top:3%;width:40%;aspect-ratio:575/125;mix-blend-mode:multiply}
.fv-responsive-lettering>img {display:block;width:100%;height:auto;aspect-ratio:575/125}
@media(max-width:767px) {
 .fv-responsive-lettering {left:5.13%;top:3.08%;width:min(56.41cqw,43cqh);aspect-ratio:220/143;clip-path:polygon(0 10%,100% 0,100% 61%,0 100%)}
 .fv-responsive-lettering>img {aspect-ratio:220/143}
}

.project-caption,.project-name,.project-copy-line {display:block}
#projects .project-lead h3 {line-height:1.6;margin-bottom:16px}
.project-caption {font-size:18px;font-weight:500;margin-bottom:4px}
.project-name {font-size:24px;font-weight:700;white-space:nowrap}
#projects .project-lead p {line-height:1.9;margin-bottom:16px}
#projects .process-card p {line-height:1.8;min-height:3.6em}
@media(max-width:767px) {
 .project-caption {font-size:16px}
 .project-name {font-size:20px}
 #projects .project-lead p {font-size:14px}
 .project-copy-line {white-space:nowrap}
 #projects .process-card {grid-template-columns:90px minmax(0,1fr);align-items:center}
 #projects .process-card h3 {font-size:16px;line-height:1.5;white-space:nowrap}
 #projects .process-card p {font-size:13px;white-space:nowrap}
}
@media(max-width:359px) {
 #projects .process-card {grid-template-columns:75px minmax(0,1fr);gap:5px 8px}
 #projects .process-card h3 {font-size:14px}
 #projects .process-card p {font-size:12px}
}