:root {
  /* ========================
     Blue系カラー
  ========================= */
  --blue-main: #009cff; /* メインアクセント */
  --blue-sub: #0798ff; /* サブアクセント */
  --blue-light: #05d1ff; /* 装飾用ライトブルー */
  --blue-deco: #b3e2e8; /* 装飾・背景パーツ用 */
  --blue-text: #224960; /* メインテキストカラー */

  /* ========================
     Yellow系カラー
  ========================= */
  --yellow-highlight: #ffff00; /* 強調用（キャッチなど） */
  --yellow-deco: #f9d358; /* 装飾・柔らかい黄色 */

  /* ========================
     Green系カラー
  ========================= */
  --green-positive: #3eb157; /* CTA・信頼系・成果表現に */

  /* ========================
     Gray / White系カラー
  ========================= */
  --white: #ffffff; /* 純白背景 */
  --gray-light: #f8f8f8; /* 全体背景用 */
  --gray-sub: #f0f1f4; /* サブ背景（淡グレー） */

  /*---------------
font family
----------------*/

  --main-font-family: "kozuka-gothic-pr6n", sans-serif;
  --sub-font-family: "dnp-shuei-mincho-pr6", sans-serif;
  --sub2-font-family: "all-round-gothic", sans-serif;

  --main-weight: 700; /* 小塚ゴシック Pr6N B All Round Gothic Bold */
  --sub-weight: 500; /* 小塚ゴシック Pr6N M */
  --sub2-weight: 600; /* DNP 秀英明朝 Pr6 B */

  --main-font-style: normal;
}

/* デフォルト設定  SPファースト*/
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-size: 62.5%; /* 10px基準 (1rem = 10px) */
}

/* タブレット: 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  html {
    font-size: 56.25%; /* 1rem = 9px */
  }
}

@media print, screen and (min-width: 769px) {
  html {
    font-size: 100%; /* 10px基準 (1rem = 10px) */
  }
}

@media print, screen and (max-width: 529px) {
  html {
    font-size: 50%; /* 1rem = 8px */
  }
}

/* @media (max-width: 768px) {
  html {
    font-size: 1.542rem;
    scroll-padding-top: 13.333vw;
  }
}

@media (max-width: 429px) {
  html {
    font-size: 1.3rem;
  }
} */

html,
body {
  height: 100%;
  overflow-x: hidden;
}

@supports (-webkit-touch-callout: none) {
  html body,
  body body {
    height: -webkit-fill-available;
  }
}

body {
  font-family: var(--main-font-family);
  font-weight: var(--main-weight);
  font-style: var(--main-font-style);
  color: var(--blue-text);
  letter-spacing: 0.03em;
  overflow: auto; /* ここを `hidden` にしているとスクロールできない */
}

@media print, screen and (min-width: 769px) {
  body {
    font-size: 1.8rem;
  }
}

a {
  cursor: pointer;
  outline: none;
  text-decoration: none;
  color: var(--black-color);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

sup {
  vertical-align: super;
  font-size: 0.7em;
}

@media print, screen and (min-width: 769px) {
  .sp {
    display: none;
  }
}

@media print, screen and (max-width: 768px) {
  .pc {
    display: none;
  }
}

.container {
  max-width: 1200px; /* PC時の最大幅を1200pxに制限 */
  width: calc(100% - 40px);
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
  }
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1.2s;
}

/* =========================
共通
========================= */

main {
  margin-inline: auto;
  position: relative;
}

.p-top {
  width: 100%;
  overflow-x: hidden;
}

.inner {
  width: calc(100% - 6%);
  margin-inline: auto;
  width: 100%;
  max-width: 1200px;
}

/* =========================
FV
========================= */

.fv {
  position: relative;
  text-align: left;
  color: var(--blue-text);
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.fv__background--gradation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -100;
  background: linear-gradient(to right, #0798ff 10%, #05d1ff 100%);
  background-repeat: no-repeat;
  background-size: cover;
  transform: none;
}

.fv__bg--decoration {
  position: absolute;
  width: 32px;
  height: 32px;
  z-index: -50;
  filter: brightness(250%) opacity(0.25);
  will-change: transform;
}

.bg--decoration23 {
  top: 2vh;
  right: 0%;
}
.bg--decoration24 {
  top: 38vh;
  right: 10%;
}
.bg--decoration25 {
  top: 23vh;
  right: 40%;
}
.bg--decoration26 {
  top: 25vh;
  right: 2%;
}
.bg--decoration27 {
  top: 32vh;
  right: 12%;
}
.bg--decoration28 {
  top: 48vh;
  right: 2%;
}
.bg--decoration29 {
  top: 60vh;
  right: 1%;
}
.bg--decoration30 {
  top: 40vh;
  right: 32%;
}
.bg--decoration31 {
  top: 56vh;
  right: 36%;
}
.bg--decoration32 {
  top: 5vh;
  right: 42%;
}
.bg--decoration33 {
  top: 18vh;
  right: 26%;
}
.bg--decoration34 {
  top: 46vh;
  right: 38%;
}
.bg--decoration35 {
  top: 32vh;
  right: 42%;
}
.bg--decoration36 {
  top: 25vh;
  right: 2%;
}
.bg--decoration37 {
  top: 15vh;
  right: 10%;
}
.bg--decoration38 {
  top: 8vh;
  right: 4%;
}
.bg--decoration39 {
  top: 2vh;
  right: 21%;
}

.fv__inner {
  position: relative;
  padding: 2.4rem 0;
}

.fv__logo--image {
  width: 115px;
  margin-left: 5.5%;
}

.fv__headline {
  margin-left: 9%;
  margin-top: 0.8rem;
}

.fv__headline--label {
  background-image: url(../img/fv-balloon.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  line-height: 50px; /* 中央寄せしたい場合 */
  height: 50px;
  width: 185px;
  color: var(--white);
  display: inline-block;
  text-align: center;
  border-radius: 20px;
  font-size: 1.3rem;
  letter-spacing: 0.08rem;
  animation: float-up-down 4s ease-in-out infinite;
}

/* アニメーションの定義 */
@keyframes float-up-down {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}

.fv__headline--label span {
  font-size: 1.7rem;
}

.fv__headline--lead {
  font-size: 18px;
}

.fv__headline--dot {
  width: 0.7rem;
  height: 0.7rem;
  margin-left: 0.7rem;
}

.fv__headline--dot:not(:first-child) {
  margin-left: 1.9rem;
}

.fv__headline--point {
  color: var(--white);
  position: relative;
  font-size: 2.8rem;
  margin-top: -0.6rem;
}

.fv__headline--highlight {
  background-image: url(../img/fv-deco-cloud.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  line-height: 68px; /* 中央寄せしたい場合 */
  height: 65px;
  width: 189px;
  color: var(--blue-main);
  display: inline-block;
  text-align: center;
  border-radius: 20px;
  font-size: 2.6rem;
  letter-spacing: 0.15rem;
  margin-top: 0.5rem;
}

.fv__headline--point-num {
  font-size: 3.5rem;
}

.fv__headline--sub {
  margin-top: 2.3rem;
  letter-spacing: 0.07rem;
  line-height: 3.7rem;
  font-size: 3.3rem;
  color: var(--white);
}

.fv__headline--emphasis {
  color: var(--yellow-highlight);
  letter-spacing: 0.35rem;
  font-size: 3.5rem;
}

.fv__headline--emphasis01 {
  margin-left: -1.2rem;
}

.fv__headline--emphasis02 {
  color: var(--yellow-highlight);
  font-size: 2rem;
  margin-left: -1rem;
}

.fv__headline--emphasis03 {
  font-size: 2rem;
  margin-left: 0.2rem;
}

.fv__headline--main {
  margin-left: -0.5rem;
  font-size: 6.6rem;
  margin-top: 1rem;
  letter-spacing: 0.02rem;
  color: var(--white);
}

.fv__headline--emphasis04 {
  font-size: 3.8rem;
  margin-left: -1rem;
}

.fv__person {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* overflow: hidden; */
  z-index: -50;
}

.fv__person--image {
  position: absolute;
  top: -17.8%;
  right: -17%;
  z-index: -3;
  max-width: 460px;
  width: 88vw;
  height: auto;
  display: inline-block;
}

@media print, screen and (max-width: 529px) {
  .fv__logo--image {
    margin-left: 2.5%;
  }

  .fv__headline {
    margin-left: 4%;
    margin-top: 0.8rem;
  }
  .fv__headline--label {
    line-height: 45px; /* 中央寄せしたい場合 */
    height: 45px;
    width: 150px;
  }

  .fv__headline {
    margin-top: 1.2vh;
  }

  .fv__headline--highlight {
    line-height: 50px; /* 中央寄せしたい場合 */
    height: 50px;
    width: 150px;
    margin-top: 0.8vh;
  }

  .fv__headline--sub {
    margin-top: 1vh;
    line-height: 4rem;
  }

  .fv__person--image {
    position: absolute;
    /* top: -12.5vh;
    max-width: 450px; */
    margin-top: 12vh;
    width: 100%;
    top: -8.5vh;
    max-width: 324px;
  }

  .fv__headline--main {
    margin-top: 0.2vh;
    letter-spacing: 0.02rem;
    font-size: 3.6rem;
  }

  .fv__headline--emphasis04 {
    font-size: 3.4rem;
  }
}

@media print, screen and (max-width: 390px) {
  .fv__headline--sub {
    margin-top: 1.5vh;
    line-height: 4rem;
  }

  .fv__headline--emphasis {
    font-size: 3.2rem;
  }
  .fv__headline--main {
    font-size: 5rem;
    margin-top: 0.8vh;
  }
}

/* PCサイズでグラデーション方向＆白の位置を変更 */
@media screen and (min-width: 769px) {
  .fv__background--gradation {
    background: linear-gradient(to top, #0798ff 60%, #05d1ff 100%);
  }

  .fv__inner {
    position: relative;
    padding: 1.6rem 0;
  }

  .fv__logo--image {
    width: 177px;
    margin-left: 2%;
  }

  .fv__headline--label {
    line-height: 74px; /* 中央寄せしたい場合 */
    height: 74px;
    width: 262px;
    color: var(--white);
    display: inline-block;
    text-align: center;
    border-radius: 20px;
    font-size: 1.2rem;
    letter-spacing: 0rem;
    margin-left: 12.5rem;
  }

  .fv__headline--label span {
    font-size: 1.5rem;
  }

  .fv__headline--lead {
    font-size: 18px;
  }

  .fv__headline {
    /* margin-left: 27.8%; */
    margin-top: -3.58rem;
    margin-left: 2%;
  }

  .fv__headline--dots {
    margin-left: 7.2rem;
    margin-top: 0.35rem;
  }

  .fv__headline--dot {
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0rem;
  }

  .fv__headline--dot:not(:first-child) {
    margin-left: 1.4rem;
  }

  .fv__headline--container {
    display: flex;
    align-items: center;
    margin-left: 6.6rem;
    margin-top: -1.6rem;
  }

  .fv__headline--point {
    font-size: 2.2rem;
    margin-top: 0;
    letter-spacing: -0.15rem;
    margin-top: 0.5rem;
  }

  .fv__headline--point-emphasis {
    font-size: 1.7rem;
  }

  .fv__headline--highlight {
    line-height: 78px; /* 中央寄せしたい場合 */
    height: 73px;
    width: 220px;
    margin-left: 0.4rem;
    font-size: 2rem;
    letter-spacing: 0.05rem;
    margin-top: -0.2rem;
  }

  .fv__headline--point-num {
    font-size: 3rem;
  }

  .fv__headline--sub {
    margin-top: 0.2rem;
    margin-left: 1.7rem;
    letter-spacing: 0.02rem;
    line-height: 3.7rem;
    font-size: 2.4rem;
    display: flex;
    align-items: center;
  }

  .fv__headline--emphasis {
    letter-spacing: 0.02rem;
    font-size: 2.8rem;
  }

  .fv__headline--emphasis01 {
    color: var(--yellow-highlight);
    font-size: 2.4rem;
    margin-left: 0.3rem;
  }
  .fv__headline--emphasis02 {
    color: var(--white);
    font-size: 1.8rem;
    margin-left: 0.1rem;
    margin-top: 0.4rem;
  }

  .fv__headline--emphasis03 {
    color: var(--white);
    font-size: 1.8rem;
    margin-left: 0.1rem;
  }

  .fv__headline--main {
    margin-left: 1rem;
    font-size: 5.6rem;
    margin-top: 0.5rem;
    letter-spacing: 0.28rem;
  }

  .fv__headline--emphasis04 {
    font-size: 3.6rem;
    margin-left: -1.3rem;
    margin-right: -0.6rem;
  }

  .fv__person--image {
    top: -14.8%;
    right: -20.6%;
    z-index: -3;
    max-width: 500px;
  }

  .fv__bg--decoration {
    width: 36px;
    height: 36px;
  }

  .fv__decoration--top {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: -50;
  }

  .fv__decoration--topstar:nth-child(1) {
    width: 27px;
    height: 27px;
    position: absolute;
    top: 53vh;
    right: 2.8%;
  }

  .fv__decoration--topstar:nth-child(2) {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 15vh;
    right: 32.6%;
  }

  .fv__decoration--topstar:nth-child(3) {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 20vh;
    right: 6.2%;
  }
}

@media screen and (min-width: 890px) {
  .fv__headline {
    margin-left: 9%;
  }

  .fv__person--image {
    position: absolute;
    top: -14.8%;
    right: -4.6%;
    max-width: 500px;
  }
}

/* =========================
メイン
========================= */
.trouble__section {
  text-align: center;
  position: relative;
  margin-top: -43vh;
}

.title__background {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 102%; /* 画面より広がらないように */
  height: 830px;
  background-image: url("../img/fv-bg-wave-pattern.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: -50;
}

.fv__decoration {
  position: absolute;
  top: 17.2%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: -30;
}

.fv__decoration--star:nth-child(1) {
  width: 20px;
  height: 20px;
  position: absolute;
  margin-left: -24.3rem;
}
.fv__decoration--star:nth-child(2) {
  width: 18px;
  height: 18px;
  position: absolute;
  margin-left: -20rem;
  margin-top: 9.6rem;
}
.fv__decoration--star:nth-child(3) {
  width: 16px;
  height: 16px;
  position: absolute;
  margin-left: -14.5rem;
  margin-top: -6.6rem;
}

.fv__bottom {
  margin-top: 16rem;
  text-align: center;
  color: var(--blue-main);
  opacity: 0;
  animation: slide-fade-up 2s ease-out forwards;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

/* アニメーション定義 */
@keyframes slide-fade-up {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0px);
  }
}

.fv__bottom--text {
  font-size: 3.4rem;
  line-height: 3rem;
  letter-spacing: 0.06rem;
  display: inline-block;
}

.fv__bottom--number {
  font-weight: bold;
  font-size: 5rem;
}

.fv__bottom--logo {
  height: auto;
  width: 135px;
  vertical-align: middle;
}

.trouble__headline--dots {
  margin-top: 7.2rem;
}

.trouble__headline--dot {
  width: 0.9rem;
  height: 0.9rem;
  margin-left: -4.2rem;
}

.trouble__headline--dot:not(:first-child) {
  margin-left: 1.8rem;
}

.trouble__title {
  margin-top: 0.9rem;
  font-size: 2.3rem;
  color: var(--blue-main);
  letter-spacing: -0.07rem;
}

.trouble__highlight {
  font-size: 2.7rem;
  letter-spacing: 0.2rem;
}

.trouble__list {
  margin: 2.2rem auto 0 auto;
  display: flex;
  flex-direction: column;
  width: 70%;
  gap: 0.5rem;
}

.trouble__item {
  display: flex;
  align-items: center;
  background-color: var(--white);
  padding: 9px 10px 7px 15px;
  border-radius: 16px;
  font-size: 1.1rem;
}

.trouble__icon--check {
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.4rem;
  flex-shrink: 0;
  margin-top: -0.02rem;
}

.trouble__item:nth-child(1),
.trouble__item:nth-child(2),
.trouble__item:nth-child(3),
.trouble__item:nth-child(4) {
  letter-spacing: 0.21rem;
}

.trouble__item:nth-child(5),
.trouble__item:nth-child(7) {
  letter-spacing: 0.1rem;
}

.trouble__characters {
  display: flex;
  justify-content: center;
  gap: 13rem;
  margin-top: 0;
}

.trouble__character {
  width: 75px;
  height: 111px;
}

.trouble__character--girl {
  margin-top: 1.1rem;
  width: 73px;
  height: 100px;
}

/* お悩み解決 */

.trouble__solution {
  position: relative;
  margin-top: 4.5rem;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  opacity: 0;
  transform: scale(0.8); /* 初期状態は少し小さく */
}

.trouble__solution.js-show {
  opacity: 1;
  transform: scale(1); /* 拡大して表示 */
}

.solution__stars {
  position: absolute;
  top: 50%;
  left: 48.4%;
  transform: translate(-50%, -50%);
  width: 66%;
  max-width: 400px;
  height: auto;
  z-index: -1;
}

.solution__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
  width: 100%;
  gap: 2.7rem;
}

.solution__image {
  max-width: 200px;
  width: 30vw;
  margin-left: 2.5rem;
}

.solution__logo {
  width: 100px;
  height: auto;
  display: inline-block;
  margin-inline: auto;
  margin-bottom: 1rem;
}

.solution__text-group {
  font-size: 2.6rem;
  color: var(--blue-main);
  line-height: 4.4rem;
  letter-spacing: -0.05rem;
  text-align: left;
  margin-bottom: 0.3rem;
}

.solution__text {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.solution__text-bottom {
  margin-top: -1.6rem;
}

.solution__text--highlight {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  font-weight: bold;
  color: var(--blue-main);
  border: 2px solid var(--blue-main);
  font-size: 2.8rem;
  box-sizing: border-box;
}

.solution__text--highlight:nth-child(2) {
  margin-left: -0.65rem;
}

@media print, screen and (max-width: 529px) {
  .trouble__section {
    margin-top: -60vh;
  }

  .title__background {
    /* height: 870px;  */
    height: 950px;
  }

  .fv__decoration {
    position: absolute;
    top: 19.2%;
  }

  .fv__decoration--star:nth-child(1) {
    width: 18px;
    height: 18px;
    margin-left: -48.3%;
    margin-top: -3.6rem;
  }
  .fv__decoration--star:nth-child(2) {
    width: 16px;
    height: 16px;
    margin-left: -30%;
  }
  .fv__decoration--star:nth-child(3) {
    width: 15px;
    height: 15px;
    margin-top: -8rem;
    margin-left: -24%;
  }

  .fv__bottom {
    /* margin-top: 19rem; */
    margin-top: 22rem;
  }

  .fv__bottom--logo {
    width: 125px;
  }

  .trouble__headline--dots {
    margin-top: 14rem;
  }

  .trouble__headline--dot {
    margin-left: -4.8rem;
  }

  .trouble__headline--dot:not(:first-child) {
    margin-left: 1.6rem;
  }

  .trouble__list {
    margin: 2.4rem auto 0 auto;
    width: 80%;
    gap: 0.8rem;
  }

  .trouble__item {
    padding: 11px 3px 11px 5px;
    font-size: 1.5rem;
    text-align: left;
  }

  .trouble__icon--check {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.2rem;
  }

  .trouble__item:nth-child(1),
  .trouble__item:nth-child(2),
  .trouble__item:nth-child(3),
  .trouble__item:nth-child(4) {
    letter-spacing: -0.02rem;
  }

  .trouble__item:nth-child(5),
  .trouble__item:nth-child(7) {
    letter-spacing: -0.02rem;
  }

  .trouble__item:nth-child(6) {
    letter-spacing: -0.1rem;
  }

  .trouble__characters {
    gap: 17rem;
    margin-top: 6rem;
  }

  /* お悩み解決 */

  .trouble__solution {
    margin-top: 10rem;
  }

  .solution__stars {
    width: 90%;
    max-width: 400px;
  }

  .solution__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-inline: auto;
    width: 100%;
    gap: 2.7rem;
  }

  .solution__image {
    max-width: 200px;
    width: 30vw;
    margin-left: 2.5rem;
  }

  .solution__logo {
    width: 90px;
  }

  .solution__text {
    margin-bottom: 1.6rem;
  }

  .solution__text-bottom {
    margin-top: -1.6rem;
  }

  .solution__text--highlight {
    width: 35px;
    height: 35px;
  }

  .solution__text--highlight:nth-child(2) {
    margin-left: -0.4rem;
  }
}

/* スマホ最小サイズ（406px以下）で96%に */
@media (max-width: 440px) {
  .trouble__list {
    width: 96%;
  }

  .trouble__item {
    font-size: 1.3rem;
  }
}

@media print, screen and (max-width: 390px) {
  .title__background {
    /* height: 870px;  */
    height: 1080px;
  }

  .fv__decoration {
    position: absolute;
    top: 20.2%;
  }

  .fv__bottom {
    /* margin-top: 19rem; */
    margin-top: 27rem;
  }

  .trouble__headline--dots {
    margin-top: 25em;
  }

  .trouble__characters {
    gap: 17rem;
    margin-top: 6rem;
  }
}

@media screen and (min-width: 769px) {
  .trouble__section {
    text-align: center;
    position: relative;
    margin-top: -55vh;
  }

  .title__background {
    height: 1110px; /* ← 高さの指定 */
    width: 100%;
    transform: scale(5);
    left: 50%;
    transform: translateX(-50%);
    background-position: center top;
  }

  .fv__decoration {
    position: absolute;
    top: 18.3%;
    left: 50%;
    transform: translateX(-50%);
    z-index: -30;
  }

  .fv__decoration--star:nth-child(1) {
    width: 24px;
    height: 24px;
    position: absolute;
    margin-left: -27.2rem;
  }
  .fv__decoration--star:nth-child(2) {
    width: 24px;
    height: 24px;
    position: absolute;
    margin-left: -21.2rem;
    margin-top: 4.3rem;
  }
  .fv__decoration--star:nth-child(3) {
    width: 18px;
    height: 18px;
    position: absolute;
    margin-left: -19.5rem;
    margin-top: -4rem;
  }

  .fv__bottom {
    margin-top: 14.05rem;
  }

  .fv__bottom--text {
    font-size: 2.4rem;
    line-height: 1.8rem;
    letter-spacing: 0.1rem;
  }

  .fv__bottom--number {
    font-size: 3.5rem;
  }

  .fv__bottom--logo {
    margin-left: 1rem;
    width: 190px;
  }

  .trouble__headline--dots {
    margin-top: 7.55rem;
  }

  .trouble__headline--dot {
    width: 0.8rem;
    height: 0.8rem;
  }

  .trouble__headline--dot:not(:first-child) {
    margin-left: 1.4rem;
  }

  .trouble__title {
    margin-top: 0.2rem;
    font-size: 2rem;
    letter-spacing: 0.02rem;
  }

  .trouble__highlight {
    font-size: 2.5rem;
    letter-spacing: 0.2rem;
  }

  .trouble__list {
    margin: 2.4rem auto auto;
    display: flex;
    flex-direction: column;
    width: 70%;

    gap: 0.3rem;
  }

  .trouble__item {
    display: flex;
    align-items: center;
    background-color: var(--white);
    padding: 14px 10px 10.5px 15px;
    border-radius: 16px;
    font-size: 1.1rem;
  }

  .trouble__icon--check {
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.4rem;
    flex-shrink: 0;
    margin-top: -0.02rem;
  }

  .trouble__item:nth-child(1),
  .trouble__item:nth-child(2),
  .trouble__item:nth-child(3),
  .trouble__item:nth-child(4) {
    letter-spacing: 0.09rem;
  }

  .trouble__item:nth-child(5),
  .trouble__item:nth-child(7) {
    letter-spacing: -0.01rem;
  }

  .trouble__item:nth-child(6) {
    letter-spacing: -0.065rem;
  }

  .trouble__characters {
    display: flex;
    justify-content: space-between;
    margin-inline: 2%;
    gap: 0;
    margin-top: -6.6rem;
  }
  .trouble__character {
    width: 110px;
    height: 171px;
  }
  .trouble__character--girl {
    margin-top: 0.6rem;
    width: 100px;
    height: 161px;
  }

  /* お悩み解決 */

  .trouble__solution {
    margin-top: 3.8rem;
  }

  .solution__stars {
    width: 68.5%;
    max-width: 1200px;
  }

  .solution__inner {
    width: 100%;
    gap: 3.2rem;
  }

  .solution__image {
    max-width: 400px;
    width: 30.2vw;
    margin-left: 2.2rem;
  }

  .solution__text-group {
    font-size: 3.2rem;
    line-height: 5rem;
    letter-spacing: 0.03rem;
    margin-bottom: 0.6rem;
  }

  .solution__logo {
    width: 210px;
    margin-bottom: 0rem;
  }

  .solution__text {
    display: flex;
    align-items: flex-end;
    gap: 0.7rem;
    font-size: 2.45rem;
    margin-bottom: 0.5rem;
  }

  .solution__text-bottom {
    margin-top: -1.6rem;
    display: inline-block;
    align-items: center;
    margin-left: 0.4rem;
  }

  .solution__text--highlight {
    display: inline-block;
    width: 74px;
    height: 74px;
    line-height: 74px;
    font-size: 3.8rem;
    box-sizing: border-box;
  }

  .solution__text--highlight:nth-child(2) {
    margin-left: -0.5rem;
  }
}

@media screen and (min-width: 1056px) {
  .trouble__section {
    margin-top: -62vh;
  }

  .title__background {
    width: 102.5%; /* 画面より広がらないように */
    height: 104vw;
    background-size: 100% auto;
  }

  .fv__bottom {
    margin-top: 20.05vw;
  }

  .trouble__headline--dots {
    margin-top: 14.5vw;
  }

  .trouble__list {
    display: flex;
    flex-direction: column;
    width: 51%;
    gap: 0.3rem;
  }

  .trouble__item {
    display: flex;
    align-items: center;
    background-color: var(--white);
    padding: 14px 10px 10.5px 15px;
    border-radius: 16px;
    font-size: 1.1rem;
  }

  .trouble__icon--check {
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.4rem;
    flex-shrink: 0;
    margin-top: -0.02rem;
  }

  .trouble__item:nth-child(1),
  .trouble__item:nth-child(2),
  .trouble__item:nth-child(3),
  .trouble__item:nth-child(4) {
    letter-spacing: 0.09rem;
  }

  .trouble__item:nth-child(5),
  .trouble__item:nth-child(7) {
    letter-spacing: -0.01rem;
  }

  .trouble__item:nth-child(6) {
    letter-spacing: -0.065rem;
  }

  .trouble__characters {
    margin-inline: 7%;
    gap: 0;
    margin-top: clamp(-14rem, calc(62.2vw - 53.8rem), 30rem);
  }
  .trouble__character {
    width: 180px;
    height: 266px;
  }
  .trouble__character--girl {
    margin-top: 1.2rem;
    width: 177px;
    height: 246px;
  }
}

/* =========================
 LINEオファーセクション 
========================= */

#line__offer {
  margin-top: 2.8rem;
  background: linear-gradient(to right, #05d1ff, #0798ff);
  color: var(--white);
  text-align: center;
  padding: 23px 4% 44px 4%;
}

.line__offer--heading {
  align-items: center;
  background-image: url(../img/line-balloon.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 53px;
  width: 332px;
  color: var(--green-positive);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: line-float-up-down 4s ease-in-out infinite;
  gap: 0.2rem;
  padding-bottom: 0.2rem;
}

/* アニメーションの定義 */
@keyframes line-float-up-down {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
  100% {
    transform: translateY(0);
  }
}

.line__offer--icon {
  width: 24px;
  height: 24px;
  line-height: 54px;
  margin-left: 1rem;
  margin-bottom: 0.6rem;
}

.line__offer--label {
  font-size: 1.9rem;
  display: inline-block;
  line-height: 1;
  letter-spacing: 0.05rem;
}

.yellow-dot {
  position: relative;
  display: inline-block;
  margin-left: -0.4rem;
}

.yellow-dot::before {
  content: "";
  position: absolute;
  top: -8px; /* 文字の上に配置 */
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  background-color: var(--yellow-deco);
  border-radius: 50%;
}

.line__offer--title-top {
  margin-top: 1.8rem;
  font-size: 2.4rem;
  line-height: 3.4rem;
  letter-spacing: -0.13rem;
}

.yellow-dot2 {
  position: relative;
  display: inline-block;
}

.yellow-dot2::before {
  content: "";
  position: absolute;
  top: -6px; /* 文字の上に配置 */
  left: 56%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background-color: var(--yellow-deco);
  border-radius: 50%;
}

.line__offer--title-emphasis {
  font-size: 1.9rem;
  margin-left: -0.2rem;
  margin-right: 0.2rem;
}

/* .line__offer--highlight {
  background-color: var(--white);
  color: var(--blue-main);
  line-height: 1;
  padding: 5px 3px 0 2px;
  letter-spacing: 0.05rem;
  display: inline-block;
  margin-left: -0.1rem;
} */

.line__offer--highlight {
  position: relative;
  color: var(--blue-main);
  display: inline-block;
  padding: 5px 3px 0 2px;
  letter-spacing: 0.05rem;
  line-height: 1;
  margin-left: -0.1rem;
  z-index: 1;
  overflow: hidden;
}

.line__offer--highlight::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  transform: scaleX(0);
  transform-origin: left;
  z-index: -1;
}

/* アニメーションは js-show クラスがついたときのみ発動 */
.line__offer--highlight.js-show::before {
  animation: masking-tape-slide 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes masking-tape-slide {
  0% {
    opacity: 0;
    transform: scaleX(0) translateX(-5%);
  }
  30% {
    transform: scaleX(1) translateX(0);
  }
  100% {
    transform: scaleX(1) translateX(0);
  }
  30%,
  100% {
    opacity: 1;
  }
}

.line__offer--title-bottom {
  margin-top: -0.18rem;
  font-size: 2.4rem;
  line-height: 3.4rem;
  letter-spacing: 0.02rem;
}

.line__offer--title-emphasis2 {
  font-size: 1.9rem;
  margin-left: -0.4rem;
  margin-right: -0.4rem;
}

.line__offer--note {
  margin-top: 1.9rem;
  font-size: 1.3rem;
  position: relative;
  display: inline-block;
}

.line__offer--note::before,
.line__offer--note::after {
  content: "";
  position: absolute;
  top: 30%;
  width: 12px;
  height: 2px;
  background-color: var(--white);
}

.line__offer--note::before {
  left: -12.5px;
  transform: translateY(-50%) rotate(73deg);
}

.line__offer--note::after {
  right: -12.5px;
  transform: translateY(-50%) rotate(-73deg);
}

.line__offer--button {
  text-align: center;
  margin-top: 0.7rem;
  margin-inline: auto;

  display: block;
}

.line__offer__link {
  display: inline-block;
  width: 340px;
  height: 75px;
  position: relative; /* ← 追加！ */
  overflow: hidden; /* ←光がはみ出さないように */
  border-radius: 9999px; /* ←見た目に合わせる */
}

/* 初期状態：表示されているアイコン */
.line__offer--button-icon,
.line__offer--hover-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 75px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  width: 100%;
  height: auto;
}

.line__offer--button-icon {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.line__offer--hover-icon {
  opacity: 0;
  visibility: hidden;
  z-index: 2;
}

/* ホバー時の切り替え */
.line__offer__link:hover .line__offer--button-icon {
  opacity: 0;
  visibility: hidden;
}

.line__offer__link:hover .line__offer--hover-icon {
  opacity: 1;
  visibility: visible;
}

.cta-line__shine {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 80px; /* ←幅広げてやわらかく */
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  pointer-events: none;
  z-index: 3;
  opacity: 0; /* 初期は非表示 */
  filter: blur(8px);
}

/* 光るときだけ付けるクラス */
.cta-line__shine.is-active {
  animation: shine-slide 0.8s ease-in-out;
  opacity: 1;
}

@keyframes shine-slide {
  0% {
    left: -70%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    left: 140%;
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    left: 140%;
    opacity: 0;
  }
}

@media print, screen and (max-width: 383px) {
  .line__offer__link {
    display: inline-block;
    width: 280px;
    height: 65px;
  }

  .line__offer--button-icon,
  .line__offer--hover-icon {
    width: 280px;
    height: auto;
  }
}

@media print, screen and (max-width: 529px) {
  /* 光のエフェクト */

  .cta-line__shine {
    width: 100px;
    height: 200%;
  }
}

@media screen and (min-width: 769px) {
  #line__offer.inner {
    margin-top: 1.65rem;
    padding: 24px 4% 17px 4%;
  }

  .line__offer--heading {
    height: 56px;
    width: 360px;
    gap: 0.4rem;
    padding-bottom: 0.2rem;
  }

  .line__offer--icon {
    width: 26px;
    height: 26px;
    margin-left: 0.7rem;
    margin-bottom: 0.3rem;
  }

  .line__offer--label {
    font-size: 1.3rem;
  }

  .line__offer--title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.35rem;
  }

  .line__offer--title-top {
    margin-top: 0;
    font-size: 1.6rem;
    letter-spacing: -0.06rem;
    margin-left: 0.3rem;
    line-height: 1;
  }

  .yellow-dot2::before {
    top: -11px; /* 文字の上に配置 */
    left: 50%;
  }

  .line__offer--title-emphasis {
    font-size: 1.2rem;
    margin-left: -0.1rem;
    margin-right: 0.1rem;
  }

  .line__offer--highlight {
    padding: 6px 3px 0 3px;
    margin-left: -0.1rem;
  }

  .line__offer--title-bottom {
    margin-top: 0.4rem;
    font-size: 1.6rem;
    margin-left: 0.4rem;
    letter-spacing: 0.06rem;
    line-height: 1;
  }

  .line__offer--title-emphasis2 {
    font-size: 1.2rem;
  }

  .line__offer--note {
    margin-top: 1.33rem;
    font-size: 0.9rem;
    letter-spacing: 0.015rem;
  }

  .line__offer--button {
    margin-top: 1.7rem;
  }

  .line__offer__link {
    width: 430px;
    height: 100px;
  }

  .line__offer--button-icon,
  .line__offer--hover-icon {
    width: 430px;
    height: auto;
  }
}

/* =========================
塾長紹介セクション
========================= */

#instructor__section {
  position: relative;
  max-width: 696px;
  margin-inline: auto;
  margin-top: 6.82rem;

  margin-bottom: -200px; /* 背景とつながるように重ねる */
  z-index: 1;
}

.instructor__background {
  position: absolute;
  min-height: 270px;
  max-width: 696px;
  max-height: 335px;
  width: 84.6vw;
  height: 53.8vw;
  top: 0;
  left: 50.4%;
  transform: translateX(-50%);
  margin-inline: auto;
}

.instructor__background img {
  min-height: 270px;
  max-width: 696px;
  max-height: 335px;
  width: 84.6vw;
  height: 53.8vw;
}

.instructor__image {
  position: absolute;
  /* top: -8.8rem; */
  top: -6.6rem;
  right: 20%;
  height: auto;

  max-width: 180px;
  width: 31vw;
  object-fit: contain;
  z-index: 10;
}

.instructor__label {
  /* position: absolute; */
  top: 0.6vw;
  left: 3%;
  z-index: 10;
  font-size: 2rem;
  color: var(--white);
  width: 166px;
  height: 70px;
  letter-spacing: 0.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  transform: rotate(-14deg); /* ← テキストだけ傾ける */
}

.instructor__label::before {
  content: "";
  position: absolute;
  top: -5px;
  background-image: url("../img/instructor-label.png"); /* 水色のタグ風ラベル画像 */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 166px;
  height: 70px;
  transform: rotate(14deg); /* ← 背景画像だけ傾ける */
  z-index: -1;
}

.instructor__label--text {
  padding-left: 2.3rem;
  letter-spacing: 0.28rem;
}

.instructor__inner {
  /* background-image: url("../img/instructor-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 453px;
  height: 320px; */
  position: relative;
  max-width: 696px;
  width: 82.4vw;
  left: 49.8%;
  transform: translateX(-50%);
  margin: 0;
}

.instructor__name--inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  max-width: 696px;
  width: 82.4vw;
  padding: 1rem 0 1rem 17%;
  background-color: #eff0f4;
  /* margin-top: 0.4rem; */
  margin-top: 5vw;
}

.instructor__name {
  font-size: 2.4rem;
  letter-spacing: 0.24rem;
  font-weight: var(--sub-weight);
  font-family: var(--sub-font-family);
}

.instructor__name--roman {
  font-size: 1.8rem;
  margin-top: 0.2rem;
  letter-spacing: 0.036rem;
  font-weight: var(--sub-weight);
  font-family: var(--sub-font-family);
}

.instructor__wrapper {
  margin-top: -1.4rem;
  line-height: 2.2rem;
  display: flex;
  justify-content: center;
}

.instructor__achievements {
  margin-top: 2.7rem;
}

.instructor__achievement {
  font-size: 1.6rem;
  letter-spacing: -0.1rem;
}

.instructor__highlight {
  font-size: 2.4rem;
  letter-spacing: 0.1rem;
  margin-left: 0.2rem;
  margin-right: -0.1rem;
}

.instructor__highlight-sub {
  font-size: 1.8rem;
  letter-spacing: -0.06rem;
}

.instructor__highlight-sub.sub02 {
  margin-left: -0.3rem;
}

@media print, screen and (max-width: 529px) {
  .instructor__image {
    top: -6.6rem;
    right: 4rem;
    min-width: 140px;
  }

  .instructor__name--inner {
    padding: 1rem 0 1rem 11%;
  }

  .instructor__wrapper {
    margin-top: -1.4rem;
    line-height: 2.2rem;
  }

  .instructor__achievements {
    margin-top: 4rem;
  }
}

@media screen and (min-width: 769px) {
  #instructor__section {
    margin-top: 2.4rem;
    margin-bottom: -145px; /* 背景とつながるように重ねる */
  }

  .instructor__background {
    left: 53.3%;
    max-width: 696px;
    max-height: 335px;
    width: 84.6vw;
    height: 53.8vw;
  }

  .instructor__background img {
    max-width: 696px;
    max-height: 335px;
    width: 84.6vw;
    height: 53.8vw;
  }

  .instructor__name--inner {
    max-width: 678px;
  }

  .instructor__image {
    max-width: 255px;
    width: 30.2vw;
    top: -1.6rem;
    right: 1%;
  }

  .instructor__label {
    top: -0.2rem;
    left: 50%;
    transform: translateX(-50%) rotate(-14deg); /* ← 合体させる */
    font-size: 1.8rem;
    width: 260px;
    height: 102px;
    margin-left: -35%;
  }

  .instructor__label::before {
    top: -10px;
    width: 260px;
    height: 108px;
  }

  .instructor__label--text {
    letter-spacing: 0.32rem;
  }

  .instructor__inner {
    position: relative;
    max-width: 696px;
    width: 82.4vw;
    left: 51.7%;
    max-width: 696px;
    width: 82.4vw;
    left: 53.8%;
  }

  .instructor__name--inner {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-direction: row;
    max-width: 530px;
    width: 66.4vw;
    padding: 0.2rem 0 0.2rem 4.1rem;
    margin-top: -0.95rem;
  }

  .instructor__name {
    font-size: 2.1rem;
    letter-spacing: 0.25rem;
  }

  .instructor__name--roman {
    font-size: 1.6rem;
    margin-top: 0.3rem;
    letter-spacing: -0.04rem;
  }

  .instructor__wrapper {
    margin-top: -1rem;
    line-height: 1.95rem;
    margin-left: -23%;
  }

  .instructor__achievements {
    margin-top: 2.7rem;
  }

  .instructor__achievement {
    font-size: 1.3rem;
    letter-spacing: -0.09rem;
  }

  .instructor__highlight {
    font-size: 2.1rem;
    letter-spacing: 0.1rem;
    margin-left: 0.1rem;
    margin-right: -0.3rem;
  }

  .instructor__highlight-sub {
    font-size: 1.5rem;
    letter-spacing: -0.1rem;
    margin-left: -0.2rem;
  }

  .instructor__highlight-sub.sub01 {
    margin-left: -0.1rem;
  }

  .instructor__highlight-sub.sub02 {
    margin-left: -0.1rem;
  }
}
/* =========================
  数学ができない〜
========================= */

/* 背景エリア（波状の白背景と青フレーム） */
.mathreason__background--wave-frame {
  background: url("../img/background-wave_top.webp") no-repeat center top;
  background-size: cover;
  width: 100%;
  height: 17rem;
  left: 50%;
  top: 0rem;
  transform: translateX(-50%);
  position: relative;
  z-index: 0;
}

/* その上に来るメインコンテンツ */

.mathreason__main--wrapper {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.mathreason__heading--main-title {
  position: relative;
  display: inline-block;
  font-size: 2.4rem;
  line-height: 2.8rem;
  font-weight: bold;
  color: var(--blue-main);
  text-align: center;
  padding: 16px 32px;
  margin: 10vh auto 0;
}

.mathreason__heading--main-title::before {
  content: "";
  position: absolute;
  max-width: 74px;
  width: 15vw;
  height: 50px;
  background-repeat: no-repeat;
  background-size: contain;
  left: 50%;
  top: 158px;
  transform: translateX(-50%) scale(6);
  background-image: url("../img/frame-corner-top.png");
}

.mathreason__heading--main-title-sub {
  color: var(--blue-main);
  font-size: 1.8rem;
  font-weight: 900;
  margin-left: -0.3rem;
}

.mathreason__title--number {
  font-size: 3rem;
  margin-left: -0.4rem;
}

/* ステップ階段構成：横並びに変更 */
.mathreason__step--container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: nowrap;
  margin-bottom: 48px;
  height: 260px;
  width: 100vw;
  padding: 0;
  gap: 0;
  position: relative;
  left: 45.5%;
  transform: translateX(-50%);
}

.mathreason__block--level-yellow {
  position: absolute;
  top: 21.2rem;
  left: 19.7rem;
  transform: translateX(-50%);
  z-index: 50;
}

.mathreason__block--level-yellow .mathreason__score--text {
  position: absolute;
  top: 38%;
  left: 52%;
  letter-spacing: -0.08rem;
  width: 100%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 100;
  color: var(--white);
  font-size: 1.5rem;
}

.mathreason__image--block-yellow {
  width: 107px;
  height: auto;
}

.mathreason__block--level-pink {
  position: absolute;
  top: 16.8rem;
  left: 25.1rem;
  transform: translateX(-50%);
  z-index: 40;
}

.mathreason__image--block-pink {
  width: 108px;
  height: auto;
}

.mathreason__block--level-pink .mathreason__score--text {
  position: absolute;
  top: 32%;
  left: 54%;
  letter-spacing: -0.08rem;
  width: 100%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 100;
  color: var(--white);
  font-size: 1.5rem;
}

.mathreason__block--level-red {
  position: absolute;
  top: 12.6rem;
  left: 30.4rem;
  max-width: 500px;
  width: 40vw;
  transform: translateX(-50%);
  z-index: 30;
}

.mathreason__image--block-red {
  width: 109px;
  height: auto;
}

.mathreason__block--level-red .mathreason__score--text {
  position: absolute;
  top: 23%;
  left: 55%;
  letter-spacing: -0.08rem;
  width: 100%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 100;
  color: var(--white);
  font-size: 1.5rem;
}

.mathreason__block--level-blue {
  position: absolute;
  top: 8.3rem;
  left: 36rem;
  max-width: 500px;
  width: 40vw;
  transform: translateX(-50%);
  z-index: 20;
}

.mathreason__image--block-blue {
  width: 106px;
  height: auto;
}

.mathreason__block--level-blue .mathreason__score--text {
  position: absolute;
  top: 19.5%;
  left: 56%;
  letter-spacing: -0.08rem;
  width: 100%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 100;
  color: var(--white);
  font-size: 1.5rem;
}

.mathreason__block--arrow-up {
  position: absolute;
  top: -0.2rem;
  left: 39.7rem;
  max-width: 500px;
  width: 40vw;
  transform: translateX(-50%);
  z-index: 10;
}

.mathreason__image--arrow-up {
  width: 91px;
  height: auto;
}

.mathreason__block--level-yellow,
.mathreason__block--level-pink,
.mathreason__block--level-red,
.mathreason__block--level-blue,
.mathreason__block--arrow-up {
  width: 100px;
  height: auto;
  opacity: 0; /* 最初は非表示 */
}

.js-show .mathreason__block--level-yellow,
.js-show .mathreason__block--level-pink,
.js-show .mathreason__block--level-red,
.js-show .mathreason__block--level-blue,
.js-show .mathreason__block--arrow-up,
.js-show .mathreason__label--item,
.js-show .mathreason__block--arrow-up {
  animation: slideUpFadeIn 0.6s ease-out forwards;
}

/* ディレイをそれぞれに設定（0.2秒ずつ遅らせる） */
.js-show .mathreason__block--level-yellow {
  animation-delay: 0.2s;
}

.js-show .mathreason__block--level-pink {
  animation-delay: 0.4s;
}

.js-show .mathreason__block--level-red {
  animation-delay: 0.6s;
}

.js-show .mathreason__block--level-blue {
  animation-delay: 0.8s;
}

.js-show .mathreason__block--arrow-up {
  animation-delay: 1s;
}

@keyframes slideUpFadeIn {
  0% {
    transform: translateY(30px) translateX(-50%);
    opacity: 0;
  }
  100% {
    transform: translateY(0) translateX(-50%);
    opacity: 1;
  }
}

.js-show .mathreason__label--item,
.js-show .mathreason__label--text-yellow,
.js-show .mathreason__label--text-pink,
.js-show .mathreason__label--text-red,
.js-show .mathreason__label--text-blue {
  animation: FadeIn 1s ease-out forwards;
}

.js-show .mathreason__label--item,
.js-show .mathreason__label--text-yellow,
.js-show .mathreason__label--text-pink,
.js-show .mathreason__label--text-red,
.js-show .mathreason__label--text-blue {
  animation-delay: 2s;
}

@keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.mathreason__labels--container {
  position: relative;
}

/* 各ラベルブロック */
.mathreason__label--item {
  position: absolute;
  display: flex;
  align-items: center;
  z-index: 2;
  gap: 8px;
  opacity: 0;
}

/* 丸 */
.mathreason__label--circle-start {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.mathreason__label--circle-end {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

/* 線：共通 */
.mathreason__label--line-wrapper {
  display: flex;
  transform: rotate(180deg);
}
/* カラー別（線の長さ/丸の位置） */
.mathreason__label--item-yellow .mathreason__label--line-vertical {
  width: 1px;
  height: 10px;
  background-color: currentColor;
}

.mathreason__label--item-yellow .mathreason__label--line-horizontal {
  width: 80px;
  height: 1px;
  background-color: currentColor;
}

.mathreason__label--item-yellow .mathreason__label--circle-start {
  width: 8px;
  height: 8px;
  margin-top: -1.8rem;
  margin-left: -1.3rem;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.mathreason__label--item-yellow .mathreason__label--circle-end {
  width: 8px;
  height: 8px;
  margin-bottom: -0.8rem;
  margin-left: -9.6rem;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.mathreason__label--item-pink .mathreason__label--line-vertical {
  width: 1px;
  height: 15px;
  background-color: currentColor;
}

.mathreason__label--item-pink .mathreason__label--line-horizontal {
  width: 62px;
  height: 1px;
  background-color: currentColor;
}

.mathreason__label--item-pink .mathreason__label--circle-start {
  width: 8px;
  height: 8px;
  margin-top: -1rem;
  margin-left: -7.4rem;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.mathreason__label--item-pink .mathreason__label--circle-end {
  width: 8px;
  height: 8px;
  margin-bottom: -1.35rem;
  margin-left: 4.8rem;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.mathreason__label--item-red .mathreason__label--line-vertical {
  width: 1px;
  height: 15px;

  background-color: currentColor;
}

.mathreason__label--item-red .mathreason__label--line-horizontal {
  width: 35px;
  height: 1px;
  background-color: currentColor;
}

.mathreason__label--item-red .mathreason__label--circle-start {
  width: 8px;
  height: 8px;
  margin-top: -1.7rem;
  margin-left: -1.2rem;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.mathreason__label--item-red .mathreason__label--circle-end {
  width: 8px;
  height: 8px;
  margin-bottom: -1.3rem;
  margin-left: -5.45rem;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.mathreason__label--item-blue .mathreason__label--line-vertical {
  width: 1px;
  height: 10px;

  background-color: currentColor;
}

.mathreason__label--item-blue .mathreason__label--line-horizontal {
  width: 86px;
  height: 1px;
  background-color: currentColor;
}

.mathreason__label--item-blue .mathreason__label--circle-start {
  width: 8px;
  height: 8px;
  margin-top: -1rem;
  margin-left: -9.8rem;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.mathreason__label--item-blue .mathreason__label--circle-end {
  width: 8px;
  height: 8px;
  margin-bottom: -1rem;
  margin-left: 7.3rem;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

/* カラー別（色 & 配置位置） */
.mathreason__label--item-yellow {
  color: #f2b705;
  top: 280px;
  left: 231px;
}

.mathreason__label--item-pink {
  color: #da83a0;
  top: 168px;
  left: 138px;
}

.mathreason__label--item-red {
  color: #c9505d;
  top: 228px;
  left: 340px;
}

.mathreason__label--item-blue {
  color: #4dbac9;
  top: 85px;
  left: 232px;
}

/* ラベルテキスト 全体 */

/* テキスト */
.mathreason__label--score-group {
  display: flex;
  flex-direction: column; /* ← 縦に並べる！ */
  align-items: flex-start;
  line-height: 1.4rem;
}

.mathreason__label--text {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: currentColor;
}

.mathreason__label--description {
  font-size: 1rem;
  color: var(--blue-text);
  text-align: left;
  margin-left: 0.7rem;
}

/* ラベルテキスト配置 */
.mathreason__label--text-yellow {
  position: absolute;
  top: 24rem;
  left: 29rem;
  z-index: 100;
  opacity: 0;
}

.mathreason__label--text-pink {
  position: absolute;
  top: 13.5rem;
  left: 11.8rem;
  z-index: 100;
  opacity: 0;
}

.mathreason__label--text-red {
  position: absolute;
  top: 18.9rem;
  left: 35rem;
  z-index: 100;
  opacity: 0;
}

.mathreason__label--text-blue {
  position: absolute;
  top: 5rem;
  left: 21rem;
  z-index: 100;
  opacity: 0;
}

/* ラベルテキスト 黄色 */
.mathreason__label--text-yellow .mathreason__label--score-title {
  font-size: 1rem;
  text-align: center;
  color: #f2b705;
}

.mathreason__label--text-yellow .mathreason__label--score-value {
  font-size: 1.5rem;
  letter-spacing: -0.05rem;
  text-align: center;
  color: #f2b705;
}

.mathreason__label--text-yellow .mathreason__label--description {
  margin-top: 1.3rem;
  margin-left: 0.4rem;
}

/* ラベルテキスト ピンク */
.mathreason__label--text-pink .mathreason__label--score-title {
  font-size: 1rem;
  text-align: center;
  color: #da83a0;
}

.mathreason__label--text-pink .mathreason__label--score-value {
  font-size: 1.5rem;
  letter-spacing: -0.08rem;
  margin-top: 0.4rem;
  text-align: center;
  color: #da83a0;
}

.mathreason__label--text-pink .mathreason__label--description {
  margin-left: 0.4rem;
  margin-top: -0.2rem;
}

/* ラベルテキスト 赤色 */
.mathreason__label--text-red .mathreason__label--score-group {
  background-color: var(--white);
  padding-inline: 4px 2px;
}

.mathreason__label--text-red .mathreason__label--score-title {
  font-size: 1rem;
  text-align: center;
  color: #c9505d;
}

.mathreason__label--text-red .mathreason__label--score-value {
  font-size: 1.5rem;
  letter-spacing: -0.05rem;
  text-align: center;
  color: #c9505d;
}

.mathreason__label--text-red .mathreason__label--description {
  margin-left: 0.5rem;
}
/* ラベルテキスト 青色 */

.mathreason__label--text-blue .mathreason__label--score-title {
  font-size: 1rem;
  text-align: center;
  color: #4dbac9;
}

.mathreason__label--text-blue .mathreason__label--score-value {
  font-size: 1.5rem;
  letter-spacing: -0.05rem;
  text-align: center;
  color: #4dbac9;
}

/* メッセージ */

.mathreason__reason--message {
  margin-top: 6.3rem;
  margin-inline: auto;

  width: 100%;
}

.reason--message__top {
  color: var(--white);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.reason--highlight__top {
  background: linear-gradient(to right, #0798ff, #05d1ff);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left center;
  color: var(--white);
  padding: 10px 5px 4px 5px;
  line-height: 1;
  font-size: 3.2rem;
  display: inline-block;
  letter-spacing: 0.2rem;
  margin-inline: auto;
  /* margin-left: 9.8rem; */
  transition: background-size 2.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* アニメーションは js-show クラスがついたときのみ発動 */
.reason--highlight__top.js-show {
  background-size: 100% 100%;
}

.mathreason__reason--small {
  font-size: 2.6rem;
  letter-spacing: -0.01rem;
  margin-right: 0.5rem;
}

.reason--highlight__bottom {
  margin-top: 0.6rem;
  background: linear-gradient(to right, #0798ff, #05d1ff);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left center;
  color: var(--white);
  padding: 10px 10px 4px 8px;
  line-height: 1;
  font-size: 3.2rem;
  margin-inline: auto;
  /* margin-left: 9.8rem; */

  letter-spacing: 0.1rem;
  display: inline-block;
  transition: background-size 2.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* アニメーションは js-show クラスがついたときのみ発動 */
.reason--highlight__bottom.js-show {
  background-size: 100% 100%;
}

.reason--message__text {
  margin-top: 2.5rem;
  /* margin-left: 9.8rem; */
  color: var(--blue-main);
  font-size: 2.1rem;
  line-height: 3.1rem;
}

.mathreason__reason--highlight {
  position: relative;
}

.mathreason__reason--highlight::after {
  content: "";
  position: absolute;
  bottom: 0.2rem;
  left: 0;
  height: 8px;
  width: 100%;
  background-color: var(--yellow-deco);
  animation: underline-slide 1.2s ease-out forwards;
  z-index: -1;
}

.mathreason__reason--number {
  font-size: 3.4rem;
  color: var(--blue-main);
}

.reason--message__bottom {
  margin-top: 4.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mathreason__reason--text {
  /* margin-left: 9.8rem; */
  color: var(--blue-main);
  font-size: 1.9rem;
  line-height: 3.5rem;
  display: inline-block;
}

.mathreason__reason--small02 {
  font-size: 1.5rem;
  letter-spacing: -0.048rem;
}

.mathreason__reason--note {
  font-size: 1.4rem;
  color: var(--blue-main);
  margin-left: 1.2rem;
  display: inline-block;
  position: relative;
}

.mathreason__reason--note::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: contain;
  left: 50%;
  top: 1.2rem;
  transform: translateX(-50%);
  background-image: url("../img/reason-bottom_line.png");
}

.reason__text--bottom {
  font-size: 2.4rem;
  letter-spacing: 0.08rem;
}

.reason__text--bottom::before,
.reason__text--bottom::after {
  font-family: "Arial Rounded MT Bold", "Helvetica Rounded", "Segoe UI",
    sans-serif;
  font-size: 24px;
  color: var(--blue-main);
}

.reason__text--bottom::before {
  content: "“";
  margin-right: 4px;
}

.reason__text--bottom::after {
  content: "”";
  margin-left: 2px;
}

.reason--highlight01__top {
  background: linear-gradient(to right, #0798ff, #05d1ff);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left center;
  color: var(--white);
  padding: 8px 8px 2px 8px;
  line-height: 1;
  font-size: 3.1rem;
  display: inline-flex;
  align-items: flex-end;
  letter-spacing: 0.3rem;
  margin-inline: auto;
  /* margin-left: 9.8rem; */
  margin-top: 0.8rem;
  transition: background-size 2.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* アニメーションは js-show クラスがついたときのみ発動 */
.reason--highlight01__top.js-show {
  background-size: 100% 100%;
}

.mathreason__reason--number02 {
  font-size: 3.6rem;
  color: var(--white);
  margin-bottom: -0.3rem;
}

.mathreason__reason--small03 {
  font-size: 2.2rem;
  letter-spacing: 0.1rem;
  margin-left: -0.1rem;
  margin-right: 0.1rem;
  margin-bottom: 0.15rem;
}

.mathreason__reason--small04 {
  font-size: 2rem;
  letter-spacing: -0.1rem;
  margin-left: -0.1rem;
  margin-bottom: 0.2rem;
}

.reason--highlight02__bottom {
  background: linear-gradient(to right, #0798ff, #05d1ff);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left center;
  margin-top: 0.3rem;

  color: var(--white);
  padding: 8px 6px 2px 8px;
  line-height: 1;
  font-size: 3.1rem;
  margin-inline: auto;
  /* margin-left: 9.8rem; */
  letter-spacing: 0.1rem;
  display: inline-flex;
  align-items: flex-end;
  transition: background-size 2.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* アニメーションは js-show クラスがついたときのみ発動 */
.reason--highlight02__bottom.js-show {
  background-size: 100% 100%;
}

.mathreason__reason--small05 {
  font-size: 2.3rem;
  letter-spacing: 0.1rem;
  margin-left: 0.1rem;
  margin-right: 0.1rem;
}

@media (max-width: 529px) {
  .mathreason__heading--main-title {
    margin: 15rem auto 0;
  }
  .mathreason__step--container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: nowrap;
    margin-bottom: 48px;
    height: 260px;
    width: 100%;
    padding: 0;
    gap: 0;
    position: relative;
    top: 8rem;
    left: 56%;
    transform: translateX(-50%);
  }

  .mathreason__block--level-yellow {
    position: absolute;
    top: 22.2rem;
    left: 16.7rem;
    transform: translateX(-50%);
    z-index: 50;
  }

  .mathreason__block--level-pink {
    position: absolute;
    top: 17rem;
    left: 23.5rem;
    transform: translateX(-50%);
    z-index: 40;
  }

  .mathreason__block--level-red {
    position: absolute;
    top: 11.6rem;
    left: 30.9rem;
    max-width: 500px;
    width: 40vw;
    transform: translateX(-50%);
    z-index: 30;
  }

  .mathreason__block--level-blue {
    position: absolute;
    top: 6.4rem;
    left: 37.6rem;
    max-width: 500px;
    width: 40vw;
    transform: translateX(-50%);
    z-index: 20;
  }

  .mathreason__block--arrow-up {
    position: absolute;
    top: -4.3rem;
    left: 41.9rem;
    max-width: 500px;
    width: 40vw;
    transform: translateX(-50%);
    z-index: 10;
  }

  .mathreason__block--level-red .mathreason__score--text {
    top: 26%;
    left: 50%;
    letter-spacing: -0.08rem;
    width: 100%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 100;
    color: var(--white);
    font-size: 1.5rem;
  }

  .mathreason__block--level-blue .mathreason__score--text {
    top: 22.5%;
    left: 50%;
  }

  /* 丸 */
  .mathreason__label--circle-start {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
  }

  .mathreason__label--circle-end {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
  }

  /* 線：共通 */
  .mathreason__label--line-wrapper {
    display: flex;
    transform: rotate(180deg);
  }
  /* カラー別（線の長さ/丸の位置） */

  .mathreason__label--item-yellow .mathreason__label--circle-start {
    width: 8px;
    height: 8px;
    margin-top: -1.8rem;
    margin-left: -1.6rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
  }

  .mathreason__label--item-yellow .mathreason__label--circle-end {
    width: 8px;
    height: 8px;
    margin-bottom: -0.8rem;
    margin-left: -12.2rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
  }

  .mathreason__label--item-pink .mathreason__label--circle-start {
    width: 8px;
    height: 8px;
    margin-top: -1rem;
    margin-left: -9.2rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
  }

  .mathreason__label--item-pink .mathreason__label--circle-end {
    width: 8px;
    height: 8px;
    margin-bottom: -1.6rem;
    margin-left: 5.8rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
  }

  .mathreason__label--item-red .mathreason__label--circle-start {
    width: 8px;
    height: 8px;
    margin-top: -2.2rem;
    margin-left: -1.6rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
  }

  .mathreason__label--item-red .mathreason__label--circle-end {
    width: 8px;
    height: 8px;
    margin-bottom: -1.3rem;
    margin-left: -6.2rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
  }

  .mathreason__label--item-blue .mathreason__label--circle-start {
    width: 8px;
    height: 8px;
    margin-top: -1rem;
    margin-left: -12.3rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
  }

  .mathreason__label--item-blue .mathreason__label--circle-end {
    width: 8px;
    height: 8px;
    margin-bottom: -1rem;
    margin-left: 9rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
  }

  /* カラー別（色 & 配置位置） */
  .mathreason__label--item-yellow {
    color: #f2b705;
    top: 255px;
    left: 160px;
  }

  .mathreason__label--item-pink {
    color: #da83a0;
    top: 138px;
    left: 80px;
  }

  .mathreason__label--item-red {
    color: #c9505d;
    top: 190px;
    left: 280px;
  }

  .mathreason__label--item-blue {
    color: #4dbac9;
    top: 65px;
    left: 160px;
  }

  /* ラベルテキスト配置 */
  .mathreason__label--text-yellow {
    position: absolute;
    top: 28rem;
    left: 26rem;
    z-index: 100;
    opacity: 0;
  }

  .mathreason__label--text-pink {
    position: absolute;
    top: 13.5rem;
    left: 8.2rem;
    z-index: 100;
    opacity: 0;
  }

  .mathreason__label--text-red {
    position: absolute;
    top: 19.9rem;
    left: 36rem;
    z-index: 100;
    opacity: 0;
  }

  .mathreason__label--text-blue {
    position: absolute;
    top: 5rem;
    left: 18rem;
    z-index: 100;
    opacity: 0;
  }

  .mathreason__reason--message {
    margin-top: 10.3rem;
    margin-inline: auto;
    width: 100%;
  }
  .mathreason__reason--note::after {
    width: 80px;
    height: 32px;
  }
}

@media screen and (max-width: 472px) {
  .mathreason__step--container {
    left: 46%;
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 405px) {
  .mathreason__step--container {
    top: 4rem;
    width: 110%;
    left: 44%;
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 380px) {
  .mathreason__step--container {
    left: 40%;
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 355px) {
  .mathreason__step--container {
    width: 120%;
    left: 42%;
    transform: translateX(-50%);
  }

  .mathreason__label--text-red {
    position: absolute;
    top: 19.9rem;
    left: 33rem;
    z-index: 100;
    opacity: 0;
    background-color: var(--white);
  }
}

@media screen and (min-width: 536px) {
  .mathreason__step--container {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media screen and (min-width: 640px) {
  .mathreason__step--container {
    width: 100%;
    left: 56%;
    transform: translateX(-50%);
  }
}

@media screen and (min-width: 769px) {
  /* 背景エリア（波状の白背景と青フレーム） */
  .mathreason__background--wave-frame {
    height: 20rem;
    left: 50%;
    top: 2rem;
  }

  /* その上に来るメインコンテンツ */
  .mathreason__main--wrapper {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: -5.56rem auto 0 auto;
    text-align: center;
  }

  .mathreason__heading--main-title {
    position: relative;
    display: inline-block;
    font-size: 1.6rem;
    line-height: 2.9rem;
    margin: 0rem auto;
  }

  .mathreason__title--number {
    font-size: 2.8rem;
    margin-left: -0.4rem;
  }

  .mathreason__heading--main-title::before {
    max-width: 900px;
    width: 88vw;
    height: 90px;

    top: 30px;
    transform: translateX(-50%) scale(1);
  }

  .mathreason__step--container {
    width: 100%;
    left: 45%;
    transform: translateX(-50%);
  }

  .mathreason__block--level-yellow {
    position: absolute;
    top: 17.8rem;
    left: 8.9rem;
  }

  .mathreason__block--level-yellow .mathreason__score--text {
    font-size: 1.1rem;
  }

  /* .mathreason__image--block-yellow {
    width: 107px;
    height: auto;
  } */

  .mathreason__block--level-pink {
    position: absolute;
    top: 15.2rem;
    left: 12.2rem;
  }

  /* .mathreason__image--block-pink {
    width: 108px;
    height: auto;
  } */

  .mathreason__block--level-pink .mathreason__score--text {
    font-size: 1.1rem;
  }

  .mathreason__block--level-red {
    position: absolute;
    top: 12.1rem;
    left: 15.5rem;
  }

  .mathreason__image--block-red {
    width: 115px;
    height: auto;
  }

  .mathreason__block--level-red .mathreason__score--text {
    font-size: 1.1rem;
  }

  .mathreason__block--level-blue {
    position: absolute;
    top: 9.2rem;
    left: 19.2rem;
  }

  .mathreason__image--block-blue {
    width: 113px;
    height: auto;
  }

  .mathreason__block--level-blue .mathreason__score--text {
    top: 22.5%;
    font-size: 1.1rem;
  }

  .mathreason__block--arrow-up {
    position: absolute;
    top: 3.3rem;
    left: 21.9rem;
    max-width: 500px;
    width: 40vw;
    transform: translateX(-50%);
    z-index: 10;
  }

  .mathreason__image--arrow-up {
    width: 98px;
    height: auto;
  }

  /* 各ラベルブロック */
  .mathreason__label--item {
    position: absolute;
    display: flex;
    align-items: center;
    z-index: 2;

    opacity: 0;
  }

  /* カラー別（線の長さ/丸の位置） */

  .mathreason__label--item-yellow .mathreason__label--circle-start {
    margin-top: -0.9rem;
    margin-left: -0.8rem;
  }

  .mathreason__label--item-yellow .mathreason__label--circle-end {
    margin-bottom: -0.5rem;
    margin-left: -6rem;
  }

  .mathreason__label--item-pink .mathreason__label--circle-start {
    margin-top: -1rem;
    margin-left: -4.6rem;
  }

  .mathreason__label--item-pink .mathreason__label--circle-end {
    margin-bottom: -0.8rem;
    margin-left: 3.2rem;
  }

  .mathreason__label--item-red .mathreason__label--circle-start {
    width: 8px;
    height: 8px;
    margin-top: -1rem;
    margin-left: -0.8rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
  }

  .mathreason__label--item-red .mathreason__label--circle-end {
    width: 8px;
    height: 8px;
    margin-bottom: -0.7rem;
    margin-left: -3.45rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
  }

  .mathreason__label--item-blue .mathreason__label--line-vertical {
    width: 1px;
    height: 10px;

    background-color: currentColor;
  }

  .mathreason__label--item-blue .mathreason__label--line-horizontal {
    width: 86px;
    height: 1px;
    background-color: currentColor;
  }

  .mathreason__label--item-blue .mathreason__label--circle-start {
    width: 8px;
    height: 8px;
    margin-top: -1rem;
    margin-left: -6.1rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
  }

  .mathreason__label--item-blue .mathreason__label--circle-end {
    width: 8px;
    height: 8px;
    margin-bottom: -0.6rem;
    margin-left: 4.7rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
  }

  /* カラー別（色 & 配置位置） */
  .mathreason__label--item-yellow {
    color: #f2b705;
    top: 360px;
    left: 183px;
  }

  .mathreason__label--item-pink {
    color: #da83a0;
    top: 238px;
    left: 79px;
  }

  .mathreason__label--item-red {
    color: #c9505d;
    top: 302px;
    left: 293px;
  }

  .mathreason__label--item-blue {
    color: #4dbac9;
    top: 150px;
    left: 177px;
  }

  /* ラベルテキスト 全体 */

  /* テキスト */
  .mathreason__label--score-group {
    line-height: 1.2rem;
  }

  .mathreason__label--description {
    font-size: 0.65rem;
    color: var(--blue-text);
    text-align: left;
    margin-left: 0.6rem;
  }

  /* ラベルテキスト配置 */
  .mathreason__label--text-yellow {
    position: absolute;
    top: 19.8rem;
    left: 14.8rem;
  }

  .mathreason__label--text-pink {
    position: absolute;
    top: 12.4rem;
    left: 3.6rem;
    z-index: 100;
    opacity: 0;
  }

  .mathreason__label--text-red {
    position: absolute;
    top: 16.1rem;
    left: 18.8rem;
    z-index: 100;
    opacity: 0;
  }

  .mathreason__label--text-blue {
    position: absolute;
    top: 6.9rem;
    left: 9.5rem;
    z-index: 100;
    opacity: 0;
  }

  /* ラベルテキスト 黄色 */
  .mathreason__label--text-yellow .mathreason__label--score-title {
    font-size: 0.6rem;
    text-align: center;
    color: #f2b705;
  }

  .mathreason__label--text-yellow .mathreason__label--score-value {
    font-size: 1rem;
    letter-spacing: -0.05rem;
    text-align: center;
    color: #f2b705;
  }

  .mathreason__label--text-yellow .mathreason__label--description {
    margin-top: 1.3rem;
    margin-left: 0.4rem;
  }

  /* ラベルテキスト ピンク */
  .mathreason__label--text-pink .mathreason__label--score-title {
    font-size: 0.6rem;
    text-align: center;
    color: #da83a0;
  }

  .mathreason__label--text-pink .mathreason__label--score-value {
    font-size: 1rem;
    letter-spacing: -0.08rem;
    margin-top: 0;
    text-align: center;
    color: #da83a0;
  }

  .mathreason__label--text-pink .mathreason__label--description {
    margin-left: 0.4rem;
    margin-top: -0.2rem;
  }

  /* ラベルテキスト 赤色 */
  .mathreason__label--text-red .mathreason__label--score-group {
    background-color: var(--white);
    padding-inline: 4px 2px;
  }

  .mathreason__label--text-red .mathreason__label--score-title {
    font-size: 0.6rem;
    text-align: center;
    color: #c9505d;
  }

  .mathreason__label--text-red .mathreason__label--score-value {
    font-size: 1rem;
    letter-spacing: -0.05rem;
    text-align: center;
    color: #c9505d;
  }

  .mathreason__label--text-red .mathreason__label--description {
    margin-left: 0.4rem;
  }
  /* ラベルテキスト 青色 */

  .mathreason__label--text-blue .mathreason__label--score-title {
    font-size: 0.6rem;
    text-align: center;
    color: #4dbac9;
  }

  .mathreason__label--text-blue .mathreason__label--score-value {
    font-size: 1rem;
    letter-spacing: -0.05rem;
    text-align: center;
    color: #4dbac9;
  }

  .mathreason__reason--message {
    margin-top: 5.1rem;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    width: 98%;
  }

  .reason--message__top {
    width: 50%;
    text-align: left;
    margin-top: -13rem;
    margin-left: -4rem;
    justify-content: start;
    align-items: flex-start;
  }

  .reason--highlight__top {
    padding: 11px 5px 5px 6px;
    line-height: 1;
    font-size: 2rem;
    letter-spacing: 0.2rem;
    margin-inline: 0;
  }

  .reason--highlight__bottom {
    margin-top: 0.55rem;
    padding: 11px 5px 5px 6px;
    line-height: 1;
    font-size: 2rem;
    letter-spacing: 0.2rem;
    margin-inline: 0;
  }

  .mathreason__reason--small {
    font-size: 1.9rem;
    letter-spacing: -0.01rem;
    margin-right: 0.5rem;
  }

  .mathreason__reason--small:last-of-type {
    margin-right: 0;
  }

  .reason--message__text {
    margin-top: 1.7rem;
    font-size: 1.3rem;
    letter-spacing: -0.05rem;
    line-height: 2.6rem;
  }

  .mathreason__reason--number {
    font-size: 2.3rem;
  }

  .reason--message__bottom {
    width: 60%;
    margin-top: 5.2rem;
    margin-left: 1.3rem;
    text-align: left;
    justify-content: start;
    align-items: flex-start;
  }

  .mathreason__reason--text {
    font-size: 1.6rem;
    line-height: 2.8rem;
    display: inline-block;
  }

  .reason__number-02 {
    margin-left: 0.25rem;
  }

  .mathreason__reason--small02 {
    font-size: 1.2rem;
    letter-spacing: -0.048rem;
  }

  .mathreason__reason--note {
    font-size: 1.1rem;
    margin-left: 0.6rem;
  }

  .mathreason__reason--note::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 32px;
    background-repeat: no-repeat;
    background-size: contain;
    left: 50%;
    top: 0.9rem;
    transform: translateX(-50%);
  }

  .reason__text--bottom {
    font-size: 2rem;
    letter-spacing: 0.08rem;
  }

  .reason--highlight01__top {
    margin-top: 0.55rem;
    padding: 11px 5px 5px 10px;
    line-height: 1;
    font-size: 2.2rem;
    letter-spacing: 0.2rem;
    margin-inline: 0;
  }

  .mathreason__reason--number02 {
    font-size: 2.6rem;
    color: var(--white);
    margin-bottom: -0.3rem;
  }

  .mathreason__reason--small03 {
    font-size: 1.6rem;
  }

  .mathreason__reason--small04 {
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
    margin-left: 0.3rem;
  }

  .reason--highlight02__bottom {
    margin-top: 0.55rem;
    padding: 11px 5px 5px 6px;
    line-height: 1;
    font-size: 2.2rem;
    letter-spacing: 0.2rem;
    margin-inline: 0;
  }

  .mathreason__reason--small05 {
    font-size: 1.8rem;
  }
}

@media screen and (min-width: 910px) {
  .mathreason__heading--main-title {
    position: relative;
    display: inline-block;
    font-size: 2.3rem;
    line-height: 2.9rem;
    margin: 0rem auto;
  }
}

@media screen and (min-width: 980px) {
  .mathreason__step--container {
    width: 100%;
    left: 56%;
    transform: translateX(-50%);
  }

  .mathreason__reason--message {
    margin-top: 5.1rem;
    width: 92%;
  }

  .reason--message__top {
    margin-left: -9rem;
  }

  .reason--highlight__top {
    font-size: 2.2rem;
  }

  .reason--highlight__bottom {
    font-size: 2.2rem;
  }

  .reason--message__text {
    font-size: 1.6rem;
  }

  .reason--message__bottom {
    margin-left: 6.5rem;
  }
}

@media screen and (min-width: 1070px) {
  /* 背景エリア（波状の白背景と青フレーム） */
  .mathreason__background--wave-frame {
    background: url(../img/background-wave_top.webp) no-repeat center top;
    background-size: cover;
    width: 100%;
    height: 26vw;
    left: 50%;
    top: -4rem;
    transform: translateX(-50%);
    position: relative;
    z-index: 0;
  }
}

.chart {
  display: flex;
  justify-content: center;
  width: 265px;
  height: 265px;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  margin-top: 5rem;
}

.chart__circle {
  width: 100%;
  height: 100%;
  position: absolute;
}

.chart__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.chart__circle-base {
  fill: none;
  stroke: #e5e5e5;
  stroke-width: 20; /* 幅を太く */
}

.chart__circle-progress {
  fill: none;
  stroke: url(#chart-gradient);
  stroke-width: 20;
  stroke-linecap: butt;
  stroke-dasharray: 314.16; /* 2πr = 2 * 3.1416 * 50 */
  stroke-dashoffset: 314.16;
}

.js-show .chart__circle-progress {
  stroke-dashoffset: 24.216; /* ← 90%表示 (＝円周長の10%) */
  transition: stroke-dashoffset 2s ease-out;
}

.chart__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: flex-end;
  gap: 0.1em;
  font-weight: bold;
  font-size: 2rem;
  opacity: 0;
  animation: chart__fade-in 1.2s ease-out 1.2s forwards;
}

.chart__text-image {
  width: 80px;
}

@keyframes chart__fade-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.chart__decoration {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.chart__corner-line {
  margin-inline: auto;
  width: 83%;
  height: auto;
  text-align: center;
  display: inline-block;
  justify-content: center;
}

/* スクロール矢印 */
.chart__scroll-arrow {
  margin-top: 1rem;
  width: 30px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  transition: opacity 0.2s linear 2.32s,
    transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  animation: scroll-down-bounce 2.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s
    infinite;
}

@keyframes scroll-down-bounce {
  0% {
    opacity: 1;
    transform: translateY(-30%);
  }

  100% {
    opacity: 0.6;
    transform: translateY(30%);
  }
}

@media screen and (min-width: 769px) {
  .chart {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: -15.1rem;
    margin-left: 14.4rem;
    text-align: center;
    position: static;
    transform: none;
  }

  .chart__circle {
    width: 235px;
    height: 235px;
    position: relative;
  }

  .chart__scroll--inner {
    position: absolute;
    top: 4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    margin-inline: auto;
  }

  .chart__scroll--inner .chart__scroll-arrow {
    width: 48px;
  }

  .chart__decoration {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .chart__corner-line {
    max-width: 900px;
    margin-inline: auto;
    width: 90vw;
    height: auto;
    text-align: center;
    display: inline-block;
    justify-content: center;
  }

  .chart__decoration .chart__scroll-arrow {
    width: 48px;
    margin-top: 0;
  }
}

@media screen and (min-width: 980px) {
  .chart {
    margin-left: 16.4rem;
  }
}
/* =========================
 あなた偏差値ごとで〜〜
========================= */
.study-change {
  text-align: center;
  padding: 1.5rem 4% 6rem 4%;
  position: relative;
  overflow: hidden;
}

.study-change__background {
  position: absolute;
  top: 15rem;
  z-index: 0;
  animation: float-stars 4s ease-in-out infinite alternate;
}

.study-change__background-image {
  width: 98%;
  height: auto;
  display: block;
  pointer-events: none;
  opacity: 1;
}

@keyframes float-stars {
  0% {
    transform: translate(0, 0) rotate(-0.2deg);
  }
  50% {
    transform: translate(0, -6px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(0.2deg);
  }
}

.study-change__question {
  font-size: 2rem;
  line-height: 1.5;
}

.study-change__highlight {
  position: relative;
  display: inline-block;
  font-size: 2.5rem;
  letter-spacing: 0.05rem;
}

.study-change__highlight::after {
  content: "";
  position: absolute;
  height: 12px;
  width: 105%;
  left: 50%;
  bottom: 0.2rem;
  transform: translateX(-50%);
  background: linear-gradient(to right, var(--yellow-deco), var(--yellow-deco))
    no-repeat;
  z-index: -1;
  background-size: 0% 100%;
  transition: background-size 1s ease-out;
}

.study-change__highlight.js-show::after {
  background-size: 100% 100%;
}

.study-change__small--text {
  font-size: 1.8rem;
  letter-spacing: -0.02rem;
}

.study-change__faces {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;

  margin: 2rem auto 2.5rem;
}

.study-change__face-wrapper {
  width: 124px;
  display: flex;
  justify-content: center;
  margin: -3px -4px; /* ← 上下左右で重ねる */
}

.study-change__face {
  width: 125px;
  height: auto;
  display: block;
}

.study-change__explanation {
  position: relative;
  text-align: center;
  padding: 0 4% 6rem;
  margin-top: -10rem;
  z-index: -10;
  overflow: hidden;
  background-color: var(--gray-light);
}

.study-change__circle-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  width: 100%;
  height: auto;
}

.study-change__circle-bg-image {
  width: 100%;

  height: auto;
  display: block;
}

.study-change__text:nth-of-type(1) {
  margin-top: 5.6rem;
}

.study-change__text {
  font-size: 1.9rem;
  line-height: 1.3;
  margin-bottom: 2.2rem;
  letter-spacing: -0.02rem;
}

.study-change__text--highlight {
  position: relative;
  letter-spacing: 0.12rem;
}

.study-change__text--highlight::after {
  content: "";
  position: absolute;
  height: 12px;
  width: 105%;
  left: 50%;
  bottom: 0.2rem;
  transform: translateX(-50%);
  background-color: var(--yellow-deco);
  z-index: -1;
}

.study-change__wave {
  margin-top: -11.3rem;
}

.study-change__wave-image {
  width: 110%;
  transform: scale(1.3) rotate(3deg);
  text-align: center;
  height: auto;
  display: inline-block;
  z-index: 50;
}

/* スマホ最小サイズ */
@media (max-width: 529px) {
  .study-change__face {
    width: 110px;
  }

  .study-change__text {
    font-size: 1.4rem;
  }
}

@media screen and (min-width: 769px) {
  .study-change {
    text-align: center;
    padding: 5rem 4% 6rem 4%;
    position: relative;
    overflow: visible;
  }

  .study-change__explanation {
    background: linear-gradient(to top, var(--gray-light) 95%, #ffffff 100%);
    padding: 0px 4% 3rem;
  }

  .study-change__background {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 3rem;
    width: 90%;
    max-width: 1000px;
  }

  .study-change__background-image {
    height: auto;
    display: block;
    pointer-events: none;
    opacity: 1;
  }

  @keyframes float-stars {
    0% {
      transform: translate(-50%, 0) rotate(-0.2deg);
    }
    50% {
      transform: translate(-50%, -6px) rotate(0deg);
    }
    100% {
      transform: translate(-50%, 0) rotate(0.2deg);
    }
  }
  .study-change__question {
    position: absolute;
    top: 6.6rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.3rem;
    line-height: 1.6;
  }

  .study-change__highlight {
    font-size: 1.6rem;
  }

  .study-change__highlight::after {
    width: 103%;
    left: 52%;
    bottom: 0.1rem;
  }

  .study-change__small--text {
    font-size: 1.3rem;
    letter-spacing: -0.02rem;
  }

  .study-change__faces {
    position: absolute;
    top: 13rem;
    left: 50%;
    transform: translateX(-50%);
    grid-template-columns: repeat(4, auto);
    margin: 2rem auto 2.5rem;
  }

  .study-change__face {
    width: 120px;
    height: auto;
    display: block;
  }

  .study-change__text {
    font-size: 1.3rem;
    line-height: 1.3;
    margin-bottom: 2.2rem;
    letter-spacing: 0.08rem;
  }

  .study-change__text--highlight::after {
    content: "";
    position: absolute;
    height: 12px;
    width: 100%;
    left: 50%;
    bottom: -0.1rem;
    transform: translateX(-50%);
    background-color: var(--yellow-deco);
    z-index: -1;
  }

  .study-change__text:nth-of-type(1) {
    margin-top: 23.5rem;
    line-height: 1.5;
    margin-bottom: 2rem;
  }

  .study-change__text:nth-of-type(3) {
    margin-top: 0rem;
    margin-bottom: 0rem;
    line-height: 1.5;
  }

  .study-change__circle-bg-image {
    width: 98%;
    max-width: 1000px;
    text-align: center;
    height: auto;
    display: block;
    margin-inline: auto;
    margin-top: 5rem;
  }

  .study-change__wave {
    margin-top: -14vw;
    width: 100%;
  }

  .study-change__wave {
    margin-top: -19.4vw;
    transform: scale(1) rotate(2.8deg);
    width: 120%;
    right: 12%;
  }

  .study-change__wave-image {
    width: 100%;
    transform: scale(1) rotate(3.2deg);
    text-align: center;
    height: auto;
    display: inline-block;
    z-index: 50;
  }
}

@media screen and (min-width: 1044px) {
  .study-change__background {
    top: 3rem;
    width: 80%;
    max-width: 1000px;
  }

  .study-change__circle-bg-image {
    width: 79%;
    max-width: 1000px;
    margin-top: 0rem;
  }

  .study-change__highlight {
    font-size: 1.8rem;
  }
}

@media screen and (min-width: 1100px) {
  .study-change__explanation {
    padding: 0px 4% 5rem;
  }

  .study-change__wave {
    margin-top: -20.3vw;
    transform: scale(1) rotate(1.2deg);
    width: 130%;
  }
}
/* =========================
実績
========================= */

.levelup {
  position: relative;
  padding: 0.8rem 0 0 0;
  margin-top: -1rem;
}

.levelup__background {
  position: absolute;
  top: -0.4rem;
  left: 50%;
  width: 100%;
  height: 1939px;
  transform: translateX(-50%);
  z-index: -10;
  background-image: url("../img/bg-grid.png");
  background-size: contain; /* ✅ 幅を合わせて縦横比維持 */
  background-repeat: repeat; /* ✅ 縦にリピート */
}

/* .levelup__background-image {
  width: 100%;
  height: auto;
  
  min-height: 2000px;
  display: block;
} */

.levelup__scroll {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.levelup_inner {
  padding: 0;
}

.levelup__headline {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: 4.7rem;
  color: var(--blue-main);

  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  opacity: 0;
  transform: scale(0.8); /* 初期状態は少し小さく */
}

.levelup__headline.js-show {
  opacity: 1;
  transform: scale(1); /* 拡大して表示 */
}

.levelup__title {
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: -0.01rem;
}

.levelup__title--highlight {
  display: inline-block;
  font-size: 3.2rem;
  padding-top: 1.7rem;
  padding-bottom: 0.5rem;
  letter-spacing: 0.1rem;
}

.levelup__title--blue-bg {
  font-size: 3.2rem;
  letter-spacing: 0.08rem;
}

.levelup__title--blue-bg span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--blue-main);
  color: var(--white);
  width: 3.6rem;
  height: 3.6rem;
  padding-top: 0.6rem;
  margin: 0 0.15rem;
  font-size: 3rem;
}

.levelup__title--blue-bg span:nth-of-type(3) {
  margin-right: -0.5rem;
}

.levelup__logo {
  margin-top: 1rem;
}

.levelup__logo-image {
  width: 174px;
  max-width: 70%;
  height: auto;
  display: inline-block;
}

.levelup__caption {
  text-align: center;
  font-size: 1.6rem;
  margin-top: 1.5rem;
  letter-spacing: 0.01rem;
  line-height: 1.1;
}

.levelup__caption--small {
  font-size: 1.9rem;
  margin-right: -0.7rem;
}

.levelup__caption--small.l_small02 {
  margin-left: -1rem;
}

.levelup__caption--big {
  font-size: 4rem;
  margin-left: 0.5rem;
}

.levelup__caption--small.l_small03 {
  margin-left: 0.8rem;
  margin-right: -0.2rem;
}

.levelup__caption--small.l_small04 {
  margin-left: -0.7rem;
  margin-right: -0.4rem;
}

.levelup__caption--mid {
  font-size: 2.8rem;
  margin-left: 0.5rem;
  letter-spacing: 0.2rem;
}

.levelup__caption--number {
  font-size: 5rem;
  position: relative;
  margin-left: -1rem;
  margin-right: -0.2rem;
}

.levelup__caption--highlight {
  position: relative;
  display: inline-block;
  font-size: 2.5rem;
}

.levelup__caption--highlight::after {
  content: "";
  position: absolute;
  height: 14px;
  width: 102%;
  left: 50%;
  bottom: 0.1rem;
  transform: translateX(-50%);
  background-color: var(--yellow-deco);
  z-index: -1;
}

.levelup__label--inner {
  display: inline-block;
  text-align: center;
  line-height: 1.4;
  position: relative;
  margin-inline: auto;
  width: 100%;
  margin-top: 4.7rem;
  z-index: 10;
}

.levelup__label {
  display: inline-block;
  text-align: center;
  padding: 0.5rem 0rem 0.2rem 2.2rem;
  background: linear-gradient(to right, #0798ff, #05d1ff);
  border-radius: 23px;
  color: var(--white);
  letter-spacing: 0.1rem;
  font-size: 3.4rem;
  margin-inline: auto;
  width: 87%;
  max-width: 500px;
}

.levelup__card-wrapper {
  position: relative;
  width: 88%;
  margin-inline: auto;
}

.levelup__card-frame {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 455px;
  z-index: -1;
  pointer-events: none;
  transform: rotate(180deg);
  left: 50%;
  transform: translateX(-50%);
}

.levelup__card-frame-02 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  max-width: 455px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.levelup__card {
  position: relative;
  z-index: 1;
  padding-top: 4.5rem;
  text-align: center;
  margin-top: -2rem;
  width: 450px;
  left: 50%;
  transform: translateX(-50%);
}

.levelup__card-content {
  position: relative;
}

.levelup__card-thumbnail-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.levelup__card-thumbnail {
  width: 81%;
  margin-inline: auto;
  display: block;
  height: auto;
  transition: transform 0.4s ease-out;
}

.levelup__card-thumbnail-wrapper:hover .levelup__card-thumbnail {
  transform: scale(1.05);
}

/* 光の筋 */
.shine-effect {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
}

/* ホバーで光が走る */
.levelup__card-thumbnail-wrapper:hover .shine-effect {
  animation: shine-slide 0.8s forwards;
}

/* キーアニメーション */
@keyframes shine-slide {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

.levelup__card-button {
  margin-top: 1rem;
  width: 35%;
  height: auto;
}

.levelup__card-voice {
  margin-top: 1.1rem;
  font-size: 1.7rem;
  width: 98%;
  text-align: left;
}

.levelup__card-voice span {
  background: linear-gradient(to right, #0798ff, #05d1ff);
  color: var(--white);
  display: inline-block;
  padding: 1rem 0.1rem 0.7rem 2.3rem;
  letter-spacing: 0.12rem;
  margin-left: 0.6rem;
  text-align: left;
}

.levelup__card-voice span:nth-of-type(2) {
  margin-top: 0.5rem;
  letter-spacing: 0.19rem;
}

.levelup__card-comment {
  margin-top: 1.2rem;
  width: 80%;
  margin-inline: auto;
  font-size: 1.4rem;
  line-height: 1.8;
  letter-spacing: -0.02rem;
  text-align: justify;
}

.levelup__card-comment span {
  letter-spacing: 0.06rem;
}

.levelup__card-comment.card-comment-02 {
  line-height: 1.6;
  letter-spacing: -0rem;
  text-align: justify;
}

.levelup__card-comment.card-comment-02 span {
  display: block;
  text-align: right;
  width: 102%;
}
.levelup__card-02 {
  margin-top: 9.8rem;
}

/* =========================
実績CTA
========================= */

.levelup-message {
  position: relative;
  text-align: center;
}

.levelup-message__circle-bg {
  position: absolute;
  top: -3.3rem;
  left: 50%;
  width: 99%;
  max-width: 768px;

  transform: translateX(-50%);
  z-index: -2;
}

.levelup-message__circle-image {
  width: 100%;
  height: auto;
  display: block;
}

/* 初期状態：非表示 */
.levelup-message__title,
.levelup-message__text {
  opacity: 0;
  transform: translateX(30px);
}

.levelup-message__gift-text {
  opacity: 0;
  transform: translateY(30px);
}

/* メッセージタイトル（1行目） */
.levelup-message__title {
  display: inline-block;
  padding-top: 6.6rem;
  margin-left: 1rem;
  font-size: 2.1rem;
  color: var(--white);
}

/* アニメーション適用トリガー */
.js-show .levelup-message__title {
  opacity: 1;
  transform: translateX(0);
  animation: fadeSlideLeft 0.8s ease-out forwards;
}

.levelup-message__text {
  display: inline-block;
  padding-top: 2.8rem;
  letter-spacing: 0.1rem;
  color: var(--white);
  line-height: 1.1;
  display: block;
}

.js-show .levelup-message__text {
  transform: translateX(0);
  animation: fadeSlideLeft 0.8s ease-out forwards;
  animation-delay: 0.3s;
}

.levelup-message__strong {
  font-size: 2.4rem;
}

.levelup-message__highlight {
  position: relative;
  display: inline-block;
  font-size: 2.8rem;
  letter-spacing: -0.02rem;
  margin-left: 2rem;
}

.levelup-message__highlight::after {
  content: "";
  position: absolute;
  height: 14px;
  width: 102%;
  left: 50%;
  bottom: 0.1rem;
  transform: translateX(-50%);
  background-color: var(--yellow-deco);
  z-index: -1;
}

.levelup-message__number {
  font-size: 3.6rem;
}

.levelup-message__mid {
  font-size: 2.2rem;
  letter-spacing: -0.02rem;
}

.levelup-message__gift-text {
  color: var(--white);
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.1rem;
  margin: 3.4rem 0 0 0;
  display: inline-block;
}

.js-show .levelup-message__gift-text {
  opacity: 1;
  transform: translateY(0);
  animation: fadeSlideUp 0.8s ease-out forwards;
}

.levelup-message__gift-icon {
  width: 2rem;
  height: 2rem;
  margin-right: 0.3rem;
  margin-left: -0.1rem;
  margin-bottom: 1rem;
}

.levelup-message__gift-text::before {
  left: -29.5px;
  transform: translateY(-50%) rotate(73deg);
}

.levelup-message__gift-text::after {
  right: -29.5px;
  transform: translateY(-50%) rotate(-73deg);
}

.levelup-message__gift-text::before,
.levelup-message__gift-text::after {
  content: "";
  position: absolute;
  top: 40%;
  width: 45px;
  height: 2px;
  background-color: var(--white);
}

/* アニメーション用 */
@keyframes fadeSlideLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.levelup__link {
  margin-top: 0.2rem;
  display: block;
  text-align: center;
  margin-inline: auto;
}

.levelup-message__wave {
  margin-top: 2rem;
}

.levelup-message__wave-image {
  width: 100%;
  height: auto;
  display: block;
  transform: rotate(180deg);
}

/* スマホ最小サイズ */
@media (max-width: 529px) {
  .levelup__label {
    font-size: 2.3rem;
    width: 76%;
  }

  .levelup__card-frame {
    transform: rotate(180deg);
    width: 300px;
    max-width: 100%;
    height: 400px;
    left: 50%;
    transform: translateX(-50%);
  }

  .levelup__card-frame-02 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    max-width: 100%;
    height: 450px;
    z-index: -1;
    pointer-events: none;
  }

  .levelup__card {
    width: 300px;
  }

  .levelup__card-02 {
    margin-top: 3rem;
    width: 300px;
  }

  .levelup-message__circle-bg {
    position: absolute;
    top: -3.3rem;
    left: 50%;
    width: 110%;
    max-width: 768px;
    transform: translateX(-50%);
    z-index: -2;
  }

  .levelup-message__circle-image {
    width: 100%;
    height: auto;
    display: block;
  }

  .levelup__link {
    margin-top: 0.2rem;
    display: inline-block;
  }

  .levelup__link .line__offer--button-icon,
  .levelup__link .line__offer--hover-icon {
    width: 340px;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .levelup-message {
    margin-top: 5rem;
  }
}

/* スマホ最小サイズ */
@media (max-width: 380px) {
  .levelup-message__circle-bg {
    position: absolute;
    top: 0rem;
    left: 50%;
    width: 120%;
    max-width: 768px;
    transform: translateX(-50%);
    z-index: -2;
  }

  .levelup__link .line__offer--button-icon,
  .levelup__link .line__offer--hover-icon {
    width: 280px;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media screen and (min-width: 768px) {
  .levelup__background {
    position: absolute;
    top: -0.2rem;
    left: 50%;
    width: 100%;
    height: 2500px;
    transform: translateX(-50%);
    z-index: -10;
    background-image: url("../img/bg-grid.png");
    background-size: contain; /* ✅ 幅を合わせて縦横比維持 */
    background-repeat: repeat; /* ✅ 縦にリピート */
  }
  .levelup__caption {
    text-align: center;
    margin-top: 1.5rem;
    margin-inline: auto;
    width: 64%;
  }
  .levelup__label--inner {
    margin-top: 2.5rem;
  }

  .levelup__label {
    padding: 0.5rem 0rem 0.2rem 2.2rem;
    border-radius: 50px;
    letter-spacing: 0.01rem;
    font-size: 2.2rem;
    width: 70%;
  }

  .levelup__card--inner {
    margin-top: -2rem;
  }

  .levelup__card-frame {
    transform: rotate(180deg);
    width: 600px;
    max-width: 100%;
    height: 600px;
    left: 50%;
    transform: translateX(-50%);
  }

  .levelup__card-frame-02 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 700px;
    max-width: 100%;
    z-index: -1;
    pointer-events: none;
  }

  .levelup__card {
    position: relative;
    z-index: 1;
    padding-top: 2.8rem;
    text-align: center;
    margin-top: 0;
    width: 600px;
    left: 50%;
    transform: translateX(-50%);
  }

  .levelup__card-02 {
    margin-top: 7rem;
    width: 600px;
    left: 50%;
    transform: translateX(-50%);
  }

  .levelup__card-thumbnail {
    width: 78%;
  }

  .levelup__card-voice span {
    padding: 0.7rem 0.1rem 0.5rem 1.8rem;
    letter-spacing: 0.05rem;
    margin-left: 0;
  }

  .levelup__card-voice span:nth-of-type(2) {
    margin-top: 0.2rem;
    letter-spacing: 0.12rem;
  }

  .levelup__card-voice {
    margin-top: 0.5rem;
    font-size: 1.1rem;
    width: 97%;
    text-align: left;
  }

  .levelup__card-comment {
    margin-top: 0.8rem;
    width: 80%;
    margin-inline: 0;
    margin-left: 2rem;
    font-size: 0.9rem;
    line-height: 1.8;
    letter-spacing: -0.02rem;
    text-align: justify;
  }

  .levelup-message {
    margin-top: 6rem;
  }

  .levelup-message__circle-bg {
    position: absolute;
    top: -5rem;
    width: 100%;
    max-width: 900px;
  }

  .levelup-message__circle-image {
    width: 100%;
    height: auto;
    display: block;
  }

  .levelup-message__title {
    padding-top: 3rem;
    margin-left: 1rem;
    font-size: 1.8rem;
    color: var(--white);
    display: inline-block;
  }

  .levelup-message__strong {
    font-size: 2.2rem;
  }

  .levelup-message__highlight {
    font-size: 2.4rem;
    letter-spacing: -0.02rem;
    margin-left: 1.2rem;
  }

  .levelup-message__number {
    font-size: 3rem;
    margin-left: 0.5rem;
  }

  .levelup-message__mid {
    font-size: 1.9rem;
    letter-spacing: 0.02rem;
    margin-left: 0.5rem;
  }

  .levelup-message__gift-text {
    font-size: 1rem;
    letter-spacing: 0.08rem;
    display: inline-block;
    margin-top: 2rem;
  }

  .levelup-message__gift-text::before,
  .levelup-message__gift-text::after {
    top: 25%;
    width: 18px;
    height: 2px;
    background-color: var(--white);
  }

  .levelup-message__gift-text::before {
    left: -12.5px;
  }

  .levelup-message__gift-text::after {
    right: -12.5px;
  }

  .levelup-message__gift-icon {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.3rem;
    margin-left: -0.1rem;
    margin-bottom: 1rem;
  }
}

@media screen and (min-width: 1030px) {
  .levelup__background {
    top: -2rem;
    height: 1500px;
  }

  .levelup_inner {
    padding: 0 1rem;
  }

  .levelup__scroll .chart__scroll-arrow {
    margin-top: 0;
    width: 48px;
  }

  .levelup__headline {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 1.7rem;
    width: 100%;
  }

  .levelup__title--inner {
    width: 74%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    left: 50%;
    transform: translateX(-50%);
  }

  .levelup__title {
    font-size: 2.2rem;
    letter-spacing: 0.04rem;
    text-align: left;
  }

  .levelup__title--highlight {
    padding-bottom: 0;
    letter-spacing: -0.08rem;
  }

  .levelup__headline--bottom {
    margin-top: -0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .levelup__title--blue-bg {
    font-size: 2.9rem;
    letter-spacing: 0.1rem;
  }

  .levelup__title--blue-bg span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--blue-main);
    color: var(--white);
    width: 3.3rem;
    height: 3.3rem;
    padding-top: 0.6rem;
    margin: 0 0.15rem;
    font-size: 2.8rem;
  }

  .levelup__logo-image {
    width: 260px;
    max-width: 100%;
    margin-top: -3.2rem;
    height: auto;
    display: inline-block;
  }

  .levelup__caption {
    font-size: 1.1rem;
    margin-top: 0.3rem;
    letter-spacing: 0.01rem;
    width: 100%;
  }

  .levelup__caption--small {
    font-size: 1.7rem;
    margin-right: -0.7rem;
  }

  .levelup__caption--big {
    font-size: 3.4rem;
    margin-left: 0.3rem;
  }

  .levelup__caption--small.l_small02 {
    margin-left: -0.6rem;
  }

  .levelup__caption--small.l_small03 {
    margin-left: -0.2rem;
    margin-right: -0.4rem;
  }

  .levelup__caption--highlight::after {
    content: "";
    position: absolute;
    height: 14px;
    width: 101%;
    left: 48%;
    bottom: 0.3rem;
  }

  .levelup__caption--mid {
    font-size: 2.3rem;
    margin-left: 0.2rem;
    letter-spacing: 0.2rem;
  }

  .levelup__caption--number {
    font-size: 4.3rem;
  }

  .levelup__label {
    width: 45%;
  }

  .levelup__card--inner {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
  }

  .levelup__card-wrapper {
    position: relative;
    width: 46%;
    margin: 0;
  }

  .levelup__card-frame {
    transform: rotate(180deg);
    width: 460px;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .levelup__card-frame-02 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 460px;
    height: auto;
    z-index: -1;
    pointer-events: none;
  }

  .levelup__card {
    position: relative;
    z-index: 1;
    padding-top: 2.8rem;
    text-align: center;
    margin-top: 0;
    width: 460px;

    left: 50%;
    transform: translateX(-50%);
  }

  .levelup__card-02 {
    margin-top: 0rem;
    width: 460px;

    left: 50%;
    transform: translateX(-50%);
  }

  .levelup__card-thumbnail {
    width: 78%;
  }

  .levelup__card-voice span {
    padding: 0.7rem 0.1rem 0.5rem 1.8rem;
    letter-spacing: 0.05rem;
    margin-left: 0;
  }

  .levelup__card-voice span:nth-of-type(2) {
    margin-top: 0.2rem;
    letter-spacing: 0.12rem;
  }

  .levelup__card-voice {
    margin-top: 0.5rem;
    font-size: 1.1rem;
    width: 97%;
    text-align: left;
  }

  .levelup__card-comment {
    margin-top: 0.8rem;
    width: 80%;
    margin-inline: 0;
    margin-left: 2rem;
    font-size: 0.9rem;
    line-height: 1.8;
    letter-spacing: -0.02rem;
    text-align: justify;
  }
  .levelup-message {
    margin-top: 2rem;
  }
}

/* =========================
ノウハウ
========================= */

/* セクション全体 */
.point {
  position: relative;
  background-color: transparent;
  width: 100%;
}

/* 上部波背景 */
.point__wave-top {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 1rem;
  width: 105%;
  height: auto;
  z-index: -1;
}

/* セクション見出し */
.point__title {
  padding-top: 10rem;
  text-align: center;
  display: inline-block;
  margin-inline: auto;
  width: 100%;
}

.point__title-text {
  font-size: 2.2rem;
  line-height: 1.4;
  text-align: center;
}

.point__title-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: end;
}

.point__title-line span {
  background: linear-gradient(to right, #0798ff, #05d1ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  letter-spacing: 0.1rem;
}

.point__title-line .point__big {
  font-size: 2.9rem;
  margin-bottom: -0.3rem;
}

.point__title-line:nth-child(1) {
  margin-left: -0.5rem;
}

.point__title-line:nth-child(2) {
  margin-left: -1rem;
}

/* 各ポイントブロック */
.point__block {
  margin-top: 0.6rem;
  width: 90%;

  margin-inline: auto;
}

/* 番号画像 */

.point__number-image {
  width: 18.5rem;
  position: absolute;
  top: -8.4rem;
  left: 3.8rem;
}

.point__content {
  position: relative;
  border: 2px solid var(--blue-text);
  margin-top: 8.7rem;
  /* padding-inline: 4rem; */
  padding-left: 3.8rem;

  text-align: left;
  z-index: -1;
}

/* リードテキスト */
.point__lead {
  font-size: 1.6rem;
  margin-top: 4.2rem;
  line-height: 1.6;
}

.point__lead-label {
  display: inline-block;
  background: linear-gradient(to right, #0798ff, #05d1ff);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left center;
  color: var(--white);
  display: inline-block;
  font-size: 2.5rem;
  letter-spacing: 0.04rem;
  padding-block: 0.02rem;
  padding-inline: 0.3rem 0.4rem;
  margin-bottom: 0.3rem;
  text-align: left;
  transition: background-size 2.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.point__lead-label.js-show {
  background-size: 100% 100%;
}

.point__lead-label.point__label-02 {
  letter-spacing: 0.03rem;
  padding-block: 0.03rem;
  padding-inline: 0.1rem;
  margin-bottom: 0.4rem;
}

/* 通常本文 */
.point__text {
  margin-top: 3rem;
  font-size: 1.6rem;
  line-height: 1.49;
  letter-spacing: 0.06rem;
  margin-bottom: 1.5rem;
}

.point__text.point__text--02 {
  margin-top: 2.6rem;
  line-height: 1.7;
}

.point__text--highlight {
  position: relative;
  display: inline-block;
  font-size: 2.5rem;
  letter-spacing: -0.02rem;
  margin-right: 0.2rem;
}

.point__text--highlight::after {
  content: "";
  position: absolute;
  height: 14px;
  width: 102%;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  background: linear-gradient(to right, var(--yellow-deco), var(--yellow-deco))
    no-repeat;
  z-index: -1;
  background-size: 0% 100%;
  transition: background-size 1s ease-out;
}

.point__text--highlight.js-show::after {
  background-size: 100% 100%;
}

.point__text--small {
  font-size: 1.6rem;
  margin-top: 2rem;
}

/* 表（チャート） */
.point__chart {
  margin-top: 1.4rem;
  margin-left: -1.3rem;
  max-width: 768px;
  width: 73vw;
  height: auto;
}

.point__text.point__text--03 {
  margin-top: 1.8rem;
  line-height: 1.7;
}

.point__text--highlight.point__text--highlight-02 {
  position: relative;
  display: inline-block;
  font-size: 2.5rem;
  letter-spacing: -0.13rem;
  margin-right: -0.2rem;
  margin-left: -0.5rem;
}

.point__text--small.point__text--small-02 {
  margin-left: -0.5rem;
}

.point__text.point__text--04 {
  margin-top: 3.6rem;
  line-height: 1.7;
}

.point__text--item-01 {
  letter-spacing: 0.09rem;
}

.point__text--item-02 {
  letter-spacing: 0.06rem;
}

.point__text.point__text--05 {
  margin-top: 3.4rem;
  line-height: 1.8;
}

/* ステップと生徒画像 */
.point__image--container {
  position: relative;
}

.point__step-graph {
  margin: 2.5rem 2.5rem 0 2.5rem;
  overflow: hidden;
  width: 80%;
  height: auto;
}

.point__step-image {
  width: 120%;
  height: auto;
  margin-top: -9rem;
  margin-left: -2rem;
}

.point__student-image {
  position: absolute;
  top: -3rem;
  left: 43%;
  transform: translateX(-50%);
  width: 14%;
  max-width: 180px;
}

/* サポートラベル */
.point__block-02 {
  margin-top: 0rem;
  position: relative;
}

.point__content-02 {
  border: 2px solid var(--blue-text);
  margin-top: 5rem;
  /* padding-inline: 4rem; */
  padding-left: 3.8rem;
  margin-bottom: 2.6rem;
  text-align: left;
  z-index: -1;
  padding-bottom: 3.4rem;
}

.point__number-image02 {
  width: 19.8rem;
  position: absolute;
  top: -8rem;
  right: 3.8rem;
}

.point__lead.point__lead-02 {
  margin-top: 3.9rem;
  line-height: 1.5;
}

/* チェックリスト */
.point__check-list {
  list-style: none;
  padding: 0;
  margin: 3rem 0 0 0.2rem;
}

.point__check-list li {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  font-size: 1.5rem;
}

.point__check-list li:nth-of-type(2) {
  margin-top: 1rem;
}

.point__check-list img {
  width: 2.1rem;
  height: auto;
  margin-right: 0.5rem;
}

.point__text.point__text--06 {
  margin-top: 3.2rem;
  letter-spacing: -0.04rem;
  line-height: 1.65;
}

.point__text--highlight.point__text--highlight-03 {
  position: relative;
  display: inline-block;
  font-size: 2.3rem;
  letter-spacing: -0.08rem;
  margin-right: 0rem;
  margin-right: -0.2rem;
}

/* 教師と生徒の画像 */
.point__teacher-image {
  width: 100%;
  max-width: 320px;
  margin-top: 0;
  text-align: center;
  display: inline-block;
  position: relative;
  left: 48%;
  transform: translateX(-50%);
}

@media screen and (min-width: 769px) {
  point {
    overflow: hidden;
  }

  .point__wave-top {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 3rem;
    width: 113%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }

  .point__title {
    padding-top: 7.5rem;
  }

  .point__title-text {
    font-size: 2.1rem;
  }

  .point__title-line {
    justify-content: flex-end;
    margin-right: 4.4rem;
  }

  .point__title-line .point__big {
    font-size: 2.6rem;
  }

  .point__block {
    margin-top: 2.5rem;
    width: 87%;
  }

  .point__number-image {
    width: 14.5rem;
    position: absolute;
    top: -6.4rem;
    left: 2.4rem;
  }

  .point__content {
    margin-top: 1rem;
    /* padding-inline: 4rem; */
    padding-left: 1.8rem;
    padding-bottom: 2.6rem;
    text-align: left;
  }

  .point__lead {
    font-size: 1rem;
    margin-top: 3rem;
    letter-spacing: -0.03rem;
    line-height: 1.6;
  }

  .point__lead-label {
    font-size: 1.3rem;
    letter-spacing: 0.04rem;
    padding-block: 0.02rem;
    padding-inline: 0.6rem 0.1rem;
    margin-bottom: 0.2rem;
  }

  .point__lead-label.point__label-02 {
    letter-spacing: 0.03rem;
    padding-block: 0.03rem;
    padding-inline: 0.6rem 0.1rem;
    margin-bottom: 0.2rem;
  }

  .point__text {
    margin-top: 2rem;
    font-size: 0.9rem;
    line-height: 1.4;
    letter-spacing: 0.01rem;
    margin-bottom: 1.5rem;
  }

  .point__text.point__text--02 {
    margin-top: 1.6rem;
    line-height: 1.7;
  }

  .point__text--highlight {
    margin-top: -0.2rem;
    font-size: 1.4rem;
    letter-spacing: -0.02rem;
    margin-right: 0rem;
  }

  .point__text--small {
    font-size: 1rem;
    margin-top: 1.6rem;
    margin-left: -0.2em;
  }

  .point__text--highlight::after {
    height: 14px;
    bottom: 0.2rem;
  }

  .point__chart {
    position: absolute;
    top: 0;
    right: 0.7rem;
    margin-top: 1.4rem;
    margin-left: 2rem;
    max-width: 100%;
    width: 400px;
    height: auto;
  }

  .point__text.point__text--03 {
    margin-top: 2.1rem;
    line-height: 1.8;
  }

  .point__text--highlight.point__text--highlight-02 {
    margin-top: -0.2rem;
    font-size: 1.4rem;
    letter-spacing: -0.01rem;
    margin-right: 0rem;
    margin-left: 0.2rem;
  }

  .point__text--small.point__text--small-02 {
    margin-left: -0.1rem;
  }

  .point__text.point__text--04 {
    margin-top: 1.5rem;
    letter-spacing: -0.02rem;
    line-height: 1.6;
  }

  .point__text.point__text--05 {
    margin-top: 1.8rem;
    letter-spacing: -0.02rem;
    line-height: 1.8;
  }
  .point__image--container {
    position: relative;
    width: 100%;
    height: auto;
  }
  .point__step-graph {
    position: absolute;
    top: -18rem;
    right: 0.6rem;
    margin: 0;
    padding-top: 3rem;
    overflow: hidden;
    width: 360px;
    height: auto;
  }

  .point__student-image {
    left: auto; /* ←leftを解除 */
    right: 11.5rem; /* ←右からの距離を指定 */
    top: -17.2rem;
    width: 50px;
    max-width: 100%;
    transform: none;
  }

  .point__number-image02 {
    width: 16.8rem;
    position: absolute;
    top: -6.4rem;
    right: 2.2rem;
  }

  .point__content-02 {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 0rem;
    margin-top: 3.7rem;
    /* padding-inline: 4rem; */
    padding-left: 0rem;
    margin-bottom: 2.6rem;
    padding-bottom: 2.4rem;
  }

  .point__lead.point__lead-02 {
    margin-top: 4rem;
    line-height: 1.5;
  }

  .point__top {
    font-size: 1rem;
    letter-spacing: -0.05rem;
    margin-bottom: 0.5rem;
  }

  .point__check-list {
    margin: 2.2rem 0 0 0.2rem;
  }
  .point__check-list li {
    font-size: 1rem;
    letter-spacing: -0.05rem;
    gap: 0;
  }

  .point__check-list li:nth-of-type(2) {
    margin-top: 0.2rem;
  }

  .point__text.point__text--06 {
    margin-top: 2.2rem;
    letter-spacing: 0.02rem;
    line-height: 1.7;
  }

  .point__check-list img {
    width: 1.2rem;
    margin-right: 0.1rem;
    margin-bottom: 0.1rem;
  }

  .point__text--highlight.point__text--highlight-03 {
    position: relative;
    display: inline-block;
    font-size: 1.4rem;
    letter-spacing: -0.08rem;
    margin-right: 0rem;
    margin-right: -0.2rem;
  }

  .point__teacher-image {
    width: 100%;
    max-width: 280px;
    margin-top: 5rem;
    left: 0.2rem;
    transform: none;
  }
}

@media screen and (min-width: 908px) {
  .point__chart {
    position: absolute;
    top: 0;
    right: 1.2rem;
    margin-top: 1.4rem;
    margin-left: 2rem;
    max-width: 768px;
    width: 500px;
  }
  .point__step-graph {
    position: absolute;
    top: -18rem;
    right: 2rem;

    padding-top: 2rem;

    width: 400px;
  }

  .point__student-image {
    right: 14.3rem; /* ←右からの距離を指定 */
    top: -19.2rem;
    width: 65px;
  }

  .point__teacher-image {
    width: 100%;
    max-width: 320px;
    margin-top: 4rem;
  }

  .point__content-02 {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 4rem;
    margin-top: 3.7rem;
    /* padding-inline: 4rem; */
    padding-left: 0rem;
    margin-bottom: 2.6rem;
    padding-bottom: 2.4rem;
  }
}

@media screen and (min-width: 1010px) {
  .point__chart {
    position: absolute;
    top: 0;
    right: 1.6rem;
    margin-top: 1.4rem;
    margin-left: -1.3rem;
    max-width: 768px;
    width: 590px;
  }

  .point__step-graph {
    position: absolute;
    top: -20rem;
    right: 3rem;

    padding-top: 1rem;

    width: 462px;
  }

  .point__student-image {
    right: 16.3rem; /* ←右からの距離を指定 */
    top: -22rem;
    width: 80px;
    max-width: 100%;
  }
}

/* =========================
   CTA３
========================= */

.cta-banner {
  background-color: var(--blue-main);
  padding: 4rem 2.2rem 4rem;
  border-radius: 30px;
  width: 82.5%;
  margin: 5.5rem auto 0 auto;
  position: relative;
}

.cta-banner__balloon {
  text-align: left;
  margin-top: -7rem;
  margin-left: 0.5rem;
  animation: line-float-up-down 4s ease-in-out infinite;
}

.cta-banner__balloon-image {
  width: 21rem;
}

.cta-banner__content {
  color: var(--white);
  text-align: left;
  margin-top: 2.2rem;
}

.cta-banner__label {
  font-weight: bold;
  font-size: 2.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  letter-spacing: 0.2rem;
}

.yellow-dot__label {
  position: relative;
  display: inline-block;
  margin-left: -0.6rem;
  margin-right: -0.1rem;
}

.yellow-dot__label::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background-color: var(--yellow-deco);
  border-radius: 50%;
}

.cta-banner__line-icon {
  width: 3.6rem;
  margin-bottom: 0.2rem;
}

.cta-banner__headline {
  margin-top: 0.1rem;
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 1.4;
}

.cta-banner__highlight {
  letter-spacing: 0.2rem;
  margin-bottom: -0.4rem;
}

.cta-banner__text {
  margin-top: 1.6rem;
  font-size: 1.8rem;
  line-height: 1.65;
}

.cta-banner__list {
  margin-top: 3.2rem;
}

.cta-banner__item {
  font-size: 1.7rem;
  display: flex;
  align-items: center;
  position: relative;
  gap: 1rem;
  margin-bottom: 1rem;
  letter-spacing: 0.16rem;
}

.cta-banner__list img {
  width: 2.2rem;
}

.cta-banner__note {
  margin-top: 3rem;
  color: var(--white);
  font-size: 1.4rem;
  text-align: center;
  position: relative;
  z-index: 10;
  display: inline-block;
  width: 100%;
}

.cta-banner__note::after {
  content: "";
  position: absolute;
  height: 7px;
  width: 90%;
  min-width: 300px;
  left: 49%;
  bottom: -0.3rem;
  transform: translateX(-50%);
  background: linear-gradient(to right, var(--yellow-deco), var(--yellow-deco))
    no-repeat;
  z-index: -1;
  background-size: 0% 100%;
  transition: background-size 1s ease-out;
}

.cta-banner__note.js-show::after {
  background-size: 100% 100%;
}

.cta-banner__cta-text {
  font-size: 1.3rem;
  text-align: center;
  width: 100%;
  margin-top: 3rem;
  display: inline-block;
}

.cta-banner__cta-text::before {
  left: 11rem;
  transform: translateY(-50%) rotate(73deg);
}

.cta-banner__cta-text::before,
.cta-banner__cta-text::after {
  content: "";
  position: absolute;
  top: 35%;
  width: 12px;
  height: 2px;
  background-color: var(--white);
}

.cta-banner__cta-text::after {
  right: 11rem;
  transform: translateY(-50%) rotate(-73deg);
}

.cta-banner__button {
  margin-top: 1rem;
  text-align: center;
}

.cta-banner__image img {
  position: absolute;
  top: -480px;
  right: -10px;
  width: 150px;
  max-width: 250px;
  margin: 0 auto;
  display: block;
  z-index: 1;
}

/* スマホ最小サイズ */
@media (max-width: 529px) {
  .cta-banner {
    padding: 4rem 1.2rem 4rem;
    width: 90.5%;
  }

  .cta-banner__label {
    font-size: 2.4rem;
    gap: 0.4rem;
    letter-spacing: 0.2rem;
  }

  .cta-banner__headline {
    font-size: 2.4rem;
    line-height: 1.3;
  }

  .cta-banner__text {
    font-size: 1.6rem;
  }

  .cta-banner__item {
    font-size: 1.5rem;
  }

  .cta-banner__note {
    margin-top: 2.6rem;
    font-size: 1.3rem;
  }

  .cta-banner__note::after {
    width: 50%;
    min-width: 280px;
    left: 49%;
    bottom: -0.3rem;
  }

  .cta-text__container {
    width: 100%;
    margin-inline: auto;
    text-align: center;
    display: inline-block;
  }

  .cta-banner__cta-text {
    font-size: 1.3rem;
    display: inline-block;
    width: 60%;
    max-width: 300px;
    min-width: 300px;
  }

  .cta-banner__cta-text::before {
    left: 9rem;
    transform: translateY(-50%) rotate(73deg);
  }
  .cta-banner__cta-text::after {
    right: 9rem;
    transform: translateY(-50%) rotate(-73deg);
  }

  .cta-banner__image img {
    position: absolute;
    top: -380px;
    right: -10px;
    width: 28vw;
    max-width: 130px;
    margin: 0 auto;
    display: block;
    z-index: 1;
  }

  .cta-banner__button {
    margin-top: 3rem;
    text-align: center;
  }

  .line__offer--button-icon,
  .line__offer--hover-icon {
    width: 340px;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* スマホ最小サイズ */
@media (max-width: 380px) {
  .line__offer--button-icon,
  .line__offer--hover-icon {
    width: 280px;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media screen and (min-width: 769px) {
  .cta-banner {
    padding: 4.6rem 1rem 3.2rem 2rem;
    margin: 4.5rem auto 0 auto;
    width: 86.5%;
    border-radius: 40px;
  }

  .cta-banner__balloon {
    margin-top: -6.8rem;
    margin-left: 0rem;
  }

  .cta-banner__balloon-image {
    width: 15.2rem;
  }
  .cta-banner__content {
    width: 100%;
    margin-top: 1.6rem;
  }

  .cta-banner__label {
    font-size: 1.7rem;
    gap: 0.6rem;
    letter-spacing: 0.21rem;
  }

  .cta-banner__line-icon {
    width: 2.2rem;
    margin-bottom: 0.5rem;
  }

  .cta-banner__headline {
    margin-top: 0.1rem;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
    line-height: 1.4;
  }

  .cta-banner__highlight {
    letter-spacing: 0.23rem;
    margin-bottom: -0.4rem;
    margin-left: 0.2rem;
  }

  .cta-banner__text {
    margin-top: 1.6rem;
    font-size: 1.1rem;
    line-height: 1.65;
  }

  .cta-banner__list {
    margin-top: 1.9rem;
  }

  .cta-banner__list img {
    width: 1.5rem;
  }

  .cta-banner__item {
    font-size: 1rem;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
    letter-spacing: 0.1rem;
  }

  .cta-banner__note {
    margin-top: 1.7rem;
    font-size: 1rem;
    text-align: left;
    letter-spacing: 0.08rem;
    z-index: 10;
    width: auto;
    display: inline-block;
  }

  .cta-banner__note::after {
    height: 7px;
    width: 98%;
    left: 48%;
    bottom: 0rem;
  }

  .cta-banner__cta-text {
    font-size: 1rem;
    text-align: left;
    margin-top: 1rem;
    width: auto;
    margin-left: 7rem;
    display: inline-block;
  }

  .cta-banner__cta-text::before {
    left: -0.8rem;
    transform: translateY(-50%) rotate(73deg);
  }

  .cta-banner__cta-text::after {
    right: -0.8rem;
    transform: translateY(-50%) rotate(-73deg);
  }

  .cta-banner__cta-text::before,
  .cta-banner__cta-text::after {
    top: 45%;
  }

  .cta-line__link {
    margin-top: 0.2rem;
    display: block;
    text-align: left;
    margin-inline: 0;
  }

  .cta-line__link .line__offer--button-icon,
  .cta-line__link .line__offer--hover-icon {
    width: 430px;
    height: auto;
  }

  .cta-banner__image img {
    position: absolute;
    top: -455px;
    right: 10px;
    width: 170px;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    z-index: 1;
  }
}

@media screen and (min-width: 876px) {
  .cta-banner {
    padding: 4.6rem 1rem 3.2rem 5.2rem;
    margin: 4.5rem auto 0 auto;
    width: 86.5%;
    border-radius: 40px;
  }

  .cta-banner__image img {
    position: absolute;
    top: -286px;
    right: -6px;
    width: 250px;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    z-index: 1;
  }
}

@media screen and (min-width: 1017px) {
  .cta-banner {
    padding: 4.6rem 1rem 3.2rem 5.2rem;
    margin: 4.5rem auto 0 auto;
    width: 86.5%;
    border-radius: 40px;
  }

  .cta-banner__image img {
    position: absolute;
    top: -436px;
    right: 18px;
    width: 360px;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    z-index: 1;
  }
}

/* =========================
   活動理念
========================= */
.philosophy {
  padding: 4rem 0 2.5rem;
  margin-top: 5.5rem;
  position: relative;
}

/* 上部波背景 */
.philosophy__bg-image {
  position: absolute;
  top: -8rem;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 1425px;
  z-index: -1;
}

.philosophy__image img {
  max-width: 288px;
  width: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 1rem;
}

.philosophy__title {
  font-size: 3.4rem;
  margin-top: 1.7rem;
  letter-spacing: 0.1rem;
  color: var(--white);
  text-align: center;

  opacity: 0;
  transform: translateY(20px);
  transition: all 0.7s ease;
}

.js-show.philosophy__title {
  opacity: 1;
  transform: translateY(0);
}

.philosophy__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.philosophy__content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  color: var(--white);
}

.philosophy__text {
  margin-top: 3rem;

  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 5rem;
}

.philosophy__text p {
  font-size: 1.5rem;
  line-height: 1.88;
  letter-spacing: 0.08rem;
  margin-bottom: 3rem;
  text-align: left;
}

@media screen and (max-width: 529px) {
  .philosophy__bg-image {
    position: absolute;
    top: -6rem;
    width: 160%;
    height: 1225px;
    z-index: -1;
  }

  .philosophy__image img {
    max-width: 220px;
    width: 100%;
    display: block;
    margin: 3rem auto 0;
    border-radius: 1rem;
  }
}

/* スマホ最小サイズ（406px以下）で96%に */
@media (max-width: 440px) {
  .philosophy__bg-image {
    position: absolute;
    top: -6rem;
    width: 160%;
    height: 1025px;
    z-index: -1;
  }

  .philosophy__image img {
    max-width: 200px;
    width: 100%;
    display: block;
    margin: 0 auto;
    border-radius: 1rem;
  }

  .philosophy__title {
    font-size: 2.8rem;
    margin-top: 2.7rem;
    letter-spacing: 0.1rem;
  }

  .philosophy__text {
    margin-top: 2rem;
    padding: 0 1rem;
  }

  .philosophy__text p {
    font-size: 1.3rem;
    line-height: 1.88;
    letter-spacing: 0.08rem;
    margin-bottom: 3rem;
  }
  .philosophy__content {
    margin-top: 3rem;
    gap: 1rem;
  }
}

@media screen and (min-width: 769px) {
  .philosophy {
    padding: 4rem 0 3.1rem;
    margin-top: 5.5rem;
    position: relative;
  }

  .philosophy__content {
    width: 88%;
    margin-left: 5%;
  }

  .philosophy__bg-image {
    position: absolute;
    top: -7rem;
    left: 50%;
    transform: translateX(-50%);
    width: 114%;
    height: 800px;
    z-index: -1;
  }

  .philosophy__image {
    width: 205px;
    position: absolute;
    top: -0.7rem;
    right: 1.5rem;
  }

  .philosophy__title {
    font-size: 1.8rem;
    margin-top: -0.5rem;
    letter-spacing: -0.01rem;
    text-align: left;
    opacity: 0;
    width: 100%;
    transform: translateY(20px);
    transition: all 0.7s ease;
  }

  .philosophy__text {
    margin-top: 0.2rem;
    width: 100%;
    text-align: left;
    padding: 0;
    display: initial;
  }

  .philosophy__text p {
    font-size: 0.8rem;
    line-height: 1.75;
    letter-spacing: 0.01rem;
    margin-bottom: 1.5rem;
  }
}

@media screen and (min-width: 1050px) {
  .philosophy__content {
    width: 88%;
    margin-left: 11.4rem;
  }

  .philosophy__image {
    width: 205px;
    position: absolute;
    top: -0.7rem;
    right: 12.3rem;
  }
}

/* =========================
  footer
========================= */
.footer {
  background-color: var(--white);
  padding: 3.4rem 2rem 5.7rem 2rem;
  text-align: left;
  position: relative;
}

.footer__social-label {
  font-size: 0.9rem;
  color: var(--blue-main);
  margin-left: 5.6rem;
  letter-spacing: 0.05rem;
}

.footer__sns-list {
  display: flex;
  justify-content: start;
  gap: 0.9rem;
  margin-left: 2.8rem;
}

.footer__sns-link {
  display: inline-block;
  position: relative;
  margin-top: 0.4rem;
  width: 3.8rem;
  height: 3.8rem;
}

.footer__sns-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
}

.footer__sns-icon.hover {
  opacity: 0;
}

.footer__sns-link:hover .footer__sns-icon.hover {
  opacity: 1;
}

.footer__sns-link:hover .footer__sns-icon.default {
  opacity: 0;
}

.footer__logo {
  margin-top: 1.6rem;
}

.footer__logo img {
  max-width: 130px;
  margin-left: 3rem;
  width: 100%;
  height: auto;
}

.footer__links {
  position: absolute;
  top: 13rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  flex-direction: row;
  width: 100%;
  gap: 0.2rem;
  margin: 2rem 0 1rem;
}

.footer__link {
  font-size: 0.8rem;
  margin-right: 2rem;
  color: #626266;
  transition: all 0.3s;
}

.footer__link:hover {
  color: var(--blue-main);
}

.footer__copyright {
  margin-top: -2.4rem;
  font-size: 1.4rem;
  color: var(--blue-main);
  text-align: right;
  margin-right: 3.4rem;
}

@media screen and (max-width: 529px) {
  .footer__links {
    top: 15rem;
    gap: 0rem;
    margin: 2rem 0 1rem;
  }

  .footer__link {
    margin-right: 1.8rem;
  }
}

/* ========================
  PCレイアウト（769px以上）
======================== */
@media screen and (min-width: 769px) {
  .footer {
    background-color: var(--white);
    padding: 4.7rem 0 2rem;
    text-align: left;
    position: relative;
  }

  .footer__inner {
    padding: 0 4.4rem;
    text-align: center;
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .footer__sns-list {
    display: flex;
    justify-content: start;
    gap: 0.8rem;
    margin-left: 0rem;
  }

  .footer__social-label {
    font-size: 0.8rem;
    margin-left: 0;
    letter-spacing: 0.03rem;
  }

  .footer__sns-link {
    margin-top: 0.4rem;
    width: 3.2rem;
    height: 3.2rem;
  }

  .footer__logo {
    margin-top: -1.6rem;
  }

  .footer__logo img {
    max-width: 220px;
    width: 220px;
    margin-left: -4rem;
  }

  .footer__copyright {
    margin-top: 3.4rem;
    font-size: 0.8rem;
    color: var(--blue-main);
    text-align: right;
    margin-right: 0;
  }

  .footer__links {
    position: absolute;
    top: 3.5rem;
    right: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 0.5rem;
    margin: 2rem 0 1rem;
  }

  .footer__link {
    font-size: 0.6rem;
    margin-right: 0;
  }
}