@charset "utf-8";
/* ==========================================================================
   LOWMEL LAB.Online — LP (design-01 / SP)
   Figma: https://www.figma.com/design/oEMrlRIOsJhuZlx63JlMuB/LOWMEL_LP?node-id=823-4

   Authored 1:1 against the 390px Figma SP frame.
   On PC the whole column is scaled with `zoom` so it fills 540px and the
   viewport beside it shows only the page background.
   ========================================================================== */

:root {
  /* colors (from Figma) */
  --c-text: #553f2f;
  --c-text-sub: #625b50;
  --c-accent: #43b7d5;
  --c-accent-light: #6ed6ef;
  --c-accent-pale: #def8fe;
  --c-cream: #fbf9f4;
  --c-gray: #f3f3f3;
  --c-white: #fff;

  --grad-cta: linear-gradient(90deg, #43b7d5 37%, #34c4e7 100%);
  --grad-pale-down: linear-gradient(180deg, #def8fe 0%, #fbf9f4 100%);
  --grad-pale-fade: linear-gradient(180deg, #def8fe 0%, rgba(222, 248, 254, .7) 60%, rgba(222, 248, 254, 0) 100%);
  --grad-pale-sides: linear-gradient(90deg, rgba(222, 248, 254, 0) 0%, rgba(222, 248, 254, .7) 10%, #def8fe 50%, rgba(222, 248, 254, .7) 90%, rgba(222, 248, 254, 0) 100%);

  /* layout */
  --lp-width: 390px; /* Figma SP frame width */
  --lp-max: 540px;   /* width of the centered column on PC */
  --page-bg: #eaf6fa; /* shown left/right of the column on PC */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page-bg);
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  color: var(--c-text);
  font-weight: 400;
}

img {
  display: block;
  max-width: 100%;
  /* every <img> carries its intrinsic width/height attributes so the browser
     reserves space while lazy-loading; CSS width drives the real size. */
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

p { margin: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   root column
   -------------------------------------------------------------------------- */
.lp {
  width: var(--lp-width);
  margin-inline: auto;
  background: var(--c-white);
  /* `clip` — not `hidden` — because `hidden` would make this element a scroll
     container and the sticky header would stop sticking to the viewport. */
  overflow: clip;
  /* 390px design -> up to 540px on PC, shrinks below 390px */
  zoom: calc(min(100vw, var(--lp-max)) / var(--lp-width));
}

.lp__main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* keep in-page anchor targets clear of the sticky header. 56px is stated in
   the zoomed coordinate space, so it tracks the header's real height. */
.lp__main > [id] { scroll-margin-top: 56px; }

/* --------------------------------------------------------------------------
   header
   -------------------------------------------------------------------------- */
.siteHeader {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
  /* Figma states 16px block padding on a 56px-high header, but its 32px CTA
     overflows that box; keeping the block padding at 0 reproduces the 56px. */
  padding: 0 21px 0 16px;
  background: var(--c-white);
}

.siteHeader__logoImg { width: 161.8px; }

/* small gradient CTA used in the header */
.ctaMini {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 104px;
  min-height: 32px;
  background: var(--grad-cta);
  box-shadow: 0 1px 4px rgba(62, 62, 62, .25);
}

.ctaMini__label {
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  color: var(--c-white);
  white-space: nowrap;
}

.ctaMini__arrow { width: 6px; }

/* --------------------------------------------------------------------------
   hero
   -------------------------------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}

.hero__visual {
  position: relative;
  align-self: stretch;
}

.hero__mv {
  width: 390px;
  aspect-ratio: 390 / 586;
  object-fit: cover;
}

/* white translucent plate over the bottom of the key visual */
.hero__plate {
  position: absolute;
  top: 452px;
  left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  width: 351px;
  padding: 8px;
  background: rgba(255, 255, 255, .8);
}

.hero__plateLead {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.hero__plateLine { width: 20px; }

.hero__plateLeadText {
  font-size: 16px;
  font-weight: 700;
  line-height: 23px;
  text-align: center;
}

.hero__plateTitle {
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
  color: var(--c-accent);
  text-align: center;
  white-space: nowrap;
}

/* headline overlay at the top of the key visual */
.hero__headline {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 147px;
  background: var(--grad-pale-fade);
}

.hero__headlineDeco {
  position: absolute;
  top: 55px;
  left: 32px;
  width: 215px;
  height: 27px;
  background: var(--c-white);
}

.hero__headlineText {
  position: absolute;
  top: 24px;
  left: 16px;
  width: 358px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.hero__headlineRow { display: block; }

.hero__headlineRow--lower { font-weight: 700; }

/* "LOWMEL" inside the upper line */
.hero__headlineBrand {
  font-weight: 700;
  color: var(--c-accent);
}

.hero__headlineLarge { font-size: 24px; }

.hero__headlineLarge--accent { color: var(--c-accent); }

/* description below the key visual */
.hero__description {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  padding: 16px 16px 24px;
  overflow: hidden;
}

.hero__badgeList {
  display: flex;
  justify-content: center;
  gap: 16px;
  align-self: stretch;
}

.hero__badge {
  position: relative;
  width: 171px; /* 166.2px shape + 4px drop-shadow bleed baked into the SVG */
}

.hero__badgeBox { width: 171px; }

.hero__badgeLabel {
  position: absolute;
  top: 22px;
  left: 9px;
  width: 149px;
  font-size: 16px;
  font-weight: 900;
  line-height: 23px;
  color: var(--c-accent);
  text-align: center;
}

.hero__badgeStar {
  position: absolute;
  top: 5px;
  left: 76px;
  width: 15px;
}

.hero__descriptionText {
  position: relative;
  width: 358px;
}

.hero__descriptionText p {
  position: relative;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

/* highlighter strokes sitting behind the copy */
.hero__mark {
  position: absolute;
  z-index: 0;
}

.hero__mark--1 {
  top: 39.5px;
  left: 99px;
  width: 186px;
}

.hero__mark--2 {
  top: 81.5px;
  left: 8px;
  width: 321px;
}

/* --------------------------------------------------------------------------
   shared: carousel dots  (scrollbtn: 10px dots, 12px gap)
   -------------------------------------------------------------------------- */
.carouselDots {
  display: flex;
  align-items: center;
  gap: 12px;
}

.carouselDots__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ddd8d5;
  cursor: pointer;
  transition: background-color .2s;
}

.carouselDots__dot.is-current { background: #7c7c7c; }

/* shared: horizontal scroll carousel */
.carousel {
  position: relative;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: clip;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.carousel::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------------------------
   problems
   -------------------------------------------------------------------------- */
.problems {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  padding: 24px 16px;
  background: var(--grad-pale-down);
}

.problems__heading {
  width: 312px;
  padding-bottom: 4px;
  border-bottom: 0.5px solid var(--c-text);
  font-size: 24px;
  font-weight: 900;
  line-height: 35px;
  text-align: center;
}

.problems__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 358px;
}

.problems__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dashed #e6e6e6;
}

.problems__icon {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 40px;
  background: var(--c-accent-light);
}

.problems__icon img { width: 9.4px; }

.problems__itemText {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.problems__itemText b { font-weight: 900; }

.problems__itemTextSmall { font-size: 14px; }

.problems__next {
  display: flex;
  justify-content: center;
  align-self: stretch;
}

.problems__nextIcon { width: 97px; }

.problems__solution {
  align-self: stretch;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}

.problems__solutionBrand { color: var(--c-accent); }

.problems__carouselOuter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  /* the carousel is full-bleed (390px) inside the 16px-padded section */
  width: 390px;
  margin-inline: -16px;
}

.problems__carouselLead {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.problems__leadSlash { width: 10px; }

.problems__carouselLeadText {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
}

.problems__carousel {
  gap: 16px;
  width: 390px;
  /* 82px gutters centre a 226px slide in the 390px frame */
  padding-inline: 82px;
}

.problems__slide {
  flex: 0 0 auto;
  width: 226px;
  scroll-snap-align: center;
  box-shadow: 0 3px 6px 0 #e6e6e6;
}

.problems__slide--wide { width: 227px; }

.problems__slide img {
  width: 100%;
  aspect-ratio: 226 / 282;
  object-fit: cover;
}

.problems__note {
  display: flex;
  justify-content: center;
  align-self: stretch;
}

.problems__note p {
  width: 342px;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

/* --------------------------------------------------------------------------
   shared: check icon (cyan disc + white tick)
   -------------------------------------------------------------------------- */
.checkIcon {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 40px;
  background: var(--c-accent-light);
}

.checkIcon img { width: 9.4px; }

/* shared: rotated square bullet */
.diamondDot {
  flex: 0 0 auto;
  width: 9.636px;
  height: 9.636px;
  margin: 6px 2px;
  background: var(--c-accent-light);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   shared: numbered step label (full-bleed pale band)
   -------------------------------------------------------------------------- */
.stepLabel {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 390px;
  margin-inline: -16px;
  padding: 8px 16px;
  overflow: clip;
  background: var(--grad-pale-sides);
}

.stepLabel__num {
  flex: 0 0 auto;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-accent);
}

.stepLabel__diamond {
  flex: 0 0 auto;
  width: 6.636px;
  height: 6.636px;
  background: var(--c-accent);
  transform: rotate(-45deg);
}

.stepLabel__title {
  width: 310px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   shared: "Point" / "レッスン内容" panel
   -------------------------------------------------------------------------- */
.point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 358px;
  padding: 16px;
  overflow: clip;
  background: var(--c-cream);
}

.point__title,
.lessonBlock__title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: 34px;
  border-bottom: 0.5px solid var(--c-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.point__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.point__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dashed #e6e6e6;
}

.point__item--last { border-bottom: 0; }

.point__itemText {
  position: relative;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.point__itemText b { font-weight: 900; }

.point__itemText strong { font-weight: 700; }

/* pale highlighter strokes behind the point list */
.point__deco {
  position: absolute;
  z-index: 0;
}

.point__deco--m1a { top: 20.5px; left: 35px; width: 68px; }
.point__deco--m1b { top: 57.5px; left: 28px; width: 196px; }
.point__deco--m1c { top: 116.5px; left: 28px; width: 122px; }

/* --------------------------------------------------------------------------
   shared: lesson / movie content list
   -------------------------------------------------------------------------- */
.lessonBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 358px;
  padding: 0 16px 24px;
  overflow: clip;
  border-bottom: 1px dashed #ddd8d5;
}

.lessonBlock__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 328px;
}

.lessonBlock__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
}

.lessonBlock__itemText {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.lessonBlock__sched {
  display: flex;
  align-items: flex-start;
  padding: 8px;
  overflow: clip;
  background: var(--c-gray);
}

.lessonBlock__schedInner {
  width: 311px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.lessonBlock__schedTitle {
  font-weight: 700;
  text-decoration: underline;
  text-underline-position: from-font;
}

.lessonBlock__schedNote { font-size: 12px; }

/* --------------------------------------------------------------------------
   method 01
   -------------------------------------------------------------------------- */
.method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  padding: 24px 16px 0;
}

.method__sectionTitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  text-align: center;
  white-space: nowrap;
}

.method__sectionTitleMain {
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
}

.method__sectionTitleSub {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.method__sectionTitleCount {
  font-size: 24px;
  line-height: normal;
  color: var(--c-accent);
}

.method__img { width: 358px; }

.method__img img {
  width: 358px;
  aspect-ratio: 358 / 218;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   method 02
   -------------------------------------------------------------------------- */
.stepLabel__title--w313 { width: 313px; }

.point__itemSpacer { font-size: 16px; }

.point__itemNote { font-size: 12px; }

.point__deco--m2a { top: 18.5px; left: 33px; width: 77px; }
.point__deco--m2b { top: 76.5px; left: 133px; width: 84px; }
.point__deco--m2c { top: 134.5px; left: 28px; width: 153px; }

.lessonBlock__title--sm {
  width: 326px;
  font-size: 16px;
}

.lessonBlock__item--plain {
  align-items: center;
  gap: 0;
}

.lessonBlock__itemNote {
  width: 300px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.method__imgPhone { width: 176px; }

.method__imgPhone img {
  width: 176px;
  aspect-ratio: 176 / 351;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   method 03 — trainers carousel
   -------------------------------------------------------------------------- */
.method--trainers { padding-bottom: 24px; }

.point__deco--m3a { top: 18.5px; left: 28px; width: 203px; }
.point__deco--m3b { top: 56.5px; left: 28px; width: 84px; }
.point__deco--m3c { top: 97.5px; left: 28px; width: 97px; }

.trainers {
  position: relative;
  width: 390px;
  margin-inline: -16px;
}

.trainers__carousel {
  /* stretch so every card matches the tallest one, as in the design */
  align-items: stretch;
  gap: 8px;
  width: 390px;
  padding: 0 48.5px 8px;
}

/* prev / next chevrons flanking the centred card */
.trainers__nav {
  position: absolute;
  top: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  transform: translateY(-50%);
  cursor: pointer;
}

.trainers__nav img { width: 6px; }

.trainers__nav--prev { left: 31px; }

.trainers__nav--next { right: 31px; }

.trainerCard {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  width: 293px;
  padding: 24px 16px;
  background: var(--c-white);
  box-shadow: 0 3px 6px 0 #e6e6e6;
  scroll-snap-align: center;
}

.trainerCard__inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.trainerCard__avatar {
  width: 180px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

.trainerCard__name {
  align-self: stretch;
  font-size: 16px;
  font-weight: 700;
  line-height: 23px;
}

.trainerCard__tagList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  align-self: stretch;
}

.trainerCard__tag {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  background: var(--c-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  color: var(--c-white);
  white-space: nowrap;
}

.trainerCard__profile {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: stretch;
}

.trainerCard__bio {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.trainerCard__achievements {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: stretch;
  padding: 8px;
  background: var(--c-gray);
}

.trainerCard__achievementsInner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trainerCard__achievementsLabel,
.trainerCard__achievementsList {
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  color: var(--c-text-sub);
}

/* --------------------------------------------------------------------------
   shared: "＼ … ／" slash lead line
   -------------------------------------------------------------------------- */
.slashLine { width: 10px; }

/* --------------------------------------------------------------------------
   shared: main gradient CTA
   -------------------------------------------------------------------------- */
.ctaBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 358px;
}

.ctaBlock__sub {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.ctaBlock__subText {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

.ctaMain {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  min-height: 108px;
  padding: 24px;
  background: var(--grad-cta);
  box-shadow: 0 3px 6px 0 rgba(62, 62, 62, .25);
}

.ctaMain__label {
  flex: 1 1 auto;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  color: var(--c-white);
}

.ctaMain__arrow { width: 7px; }

/* --------------------------------------------------------------------------
   plan
   -------------------------------------------------------------------------- */
.plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  padding: 24px 16px;
  background: var(--grad-pale-down);
}

.plan__title {
  text-align: center;
  white-space: nowrap;
}

.plan__titleLead {
  font-size: 24px;
  font-weight: 700;
}

.plan__titleCount {
  font-size: 24px;
  font-weight: 900;
  color: var(--c-accent);
}

.plan__titleOf {
  font-size: 20px;
  font-weight: 900;
}

.plan__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 358px;
}

.planCard__outer {
  position: relative;
  align-self: stretch;
}

.planCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  overflow: clip;
  background: var(--c-white);
  box-shadow: 0 3px 6px 0 #e6e6e6;
}

.planCard--standard {
  padding: 24px 16px 16px;
  background: var(--c-cream);
}

.planCard--premium { padding: 24px 16px 16px; }

/* ribbon sitting astride the top edge of the card */
.planCard__ribbon {
  position: absolute;
  top: -17px;
  left: 108px;
  z-index: 1;
  width: 145px;
}

.planCard__ribbonImg { width: 145px; }

.planCard__ribbonLabel {
  position: absolute;
  top: 3px;
  left: 32px;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  white-space: nowrap;
}

.planCard__ribbon--solid .planCard__ribbonLabel { color: var(--c-white); }

.planCard__ribbon--outline .planCard__ribbonLabel { color: var(--c-accent); }

.planCard__sub {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.planCard__subText {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
}

.planCard__title {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  padding-inline: 34px;
  overflow: clip;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: var(--c-accent);
  white-space: nowrap;
}

.planCard__price {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 16px;
  align-self: stretch;
  padding: 0 40px 16px;
  overflow: clip;
  border-bottom: 1px dashed #7c7c7c;
  font-weight: 700;
  white-space: nowrap;
}

.planCard__priceLabel {
  font-size: 20px;
  line-height: 1.5;
}

.planCard__priceValue {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.planCard__priceNum {
  font-size: 36px;
  line-height: 1.3;
}

.planCard__priceUnit {
  font-size: 16px;
  line-height: 1.5;
}

.planCard__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
}

.planCard__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
}

.planCard__itemText {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.planCard__itemNote {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   plan — terms
   -------------------------------------------------------------------------- */
.planTos {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 358px;
  padding: 16px;
  background: var(--c-white);
}

.planTos__block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.planTos__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 23px;
}

.planTos__body {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

/* --------------------------------------------------------------------------
   how to
   -------------------------------------------------------------------------- */
.howto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  padding: 24px 16px;
}

.howto__title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  text-align: center;
  white-space: nowrap;
}

.howto__titleMain {
  font-size: 24px;
  font-weight: 900;
  line-height: normal;
}

.howto__titleSub {
  font-size: 16px;
  font-weight: 900;
  line-height: normal;
}

.howto__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 358px;
}

/* "受講環境について" pale panel */
.howto__env {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  padding: 16px;
  overflow: clip;
  background: var(--c-accent-pale);
  box-shadow: 0 3px 6px 0 #e6e6e6;
}

.howto__envTitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}

.howto__envBody { width: 328px; }

/* numbered step cards */
.howtoStep {
  position: relative;
  align-self: stretch;
  border: 0.5px solid var(--c-text);
}

.howtoStep__ribbon {
  position: absolute;
  top: -28.5px;
  left: 50%;
  z-index: 2;
  width: 145px;
  transform: translateX(-50%);
}

.howtoStep__ribbonImg { width: 145px; }

.howtoStep__ribbonLabel {
  position: absolute;
  top: 2.5px;
  left: 40px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-white);
  white-space: nowrap;
}

.howtoStep__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px 16px;
  overflow: clip;
  background: var(--c-white);
  box-shadow: 0 3px 6px 0 #e6e6e6;
}

.howtoStep__title {
  align-self: stretch;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.howtoStep__img { width: 318px; }

.howtoStep__img img {
  width: 318px;
  aspect-ratio: 318 / 145;
  object-fit: cover;
}

.howtoStep__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
}

.howtoStep__textRow {
  display: flex;
  align-items: center;
  padding: 4px 0;
}

.howtoStep__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.howtoStep__note {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 8px;
  background: var(--c-cream);
}

.howtoStep__noteText {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.howtoStep__noteText--strong { font-weight: 700; }

.ctaMain--compact {
  min-height: 92px;
  padding: 16px 24px;
}

/* --------------------------------------------------------------------------
   closing
   -------------------------------------------------------------------------- */
.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  padding: 24px 16px;
  background: var(--grad-pale-down);
}

.closing__title {
  align-self: stretch;
  font-size: 20px;
  font-weight: 900;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
}

.closing__img { width: 358px; }

.closing__img img {
  width: 358px;
  aspect-ratio: 358 / 218;
  object-fit: cover;
}

.closing__text {
  width: 358px;
  overflow: clip;
}

.closing__text p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   footer
   -------------------------------------------------------------------------- */
.siteFooter {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px 16px 40px;
  background: var(--c-cream);
}

.siteFooter__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.siteFooter__navLink {
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

.siteFooter__social {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}

.siteFooter__socialLink img { width: 88px; }

.siteFooter__copyright {
  align-self: stretch;
  font-size: 10px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
}

/* let the note body fill its flex row deterministically */
.howtoStep__noteInner {
  flex: 1 1 auto;
  min-width: 0;
}