@charset "UTF-8";
/* CSS Document */

.lodeing {
  width: 100vw;
  height: 100lvh;
  background: #FFF500;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  display: none;
}

@keyframes loading {
  0% {
    opacity: 1;
  }

  99.9% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    display: none;
    visibility: hidden;
  }
}

.lodeing__wapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
  height: 100%;
}

.lodeing p {
  font-size: 5rem;
  font-style: italic;
  font-weight: 900;
  padding-right: 7px;
}

.lodeing p span {
  font-family: var(--en);
}

.lodeing .countup {
  font-size: 2.8;
  font-weight: 900;
  font-family: var(--en);
  font-style: italic;
}


.bottomFixd {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  background-color: #000000;
  color: #FFFFFF;
  padding: 10px 0;
  font-weight: 600;
  z-index: 999;
}

.bottomFixd small {
  font-size: 1.8rem;
  background: #F6CE00;
  padding: 0 10px;
}

.bottomFixd p {
  font-size: 3rem;
  font-weight: 800;
}

.bottomFixd span {
  font-family: var(--en);
  font-size: 5rem;
}

.bottomFixd .en {
  font-size: 5rem;
  display: inline-block;
  transform: translateY(2px);
  display: none;
}

.bottomFixd .join__top__element time {
  color: #FFFFFF;
}

.bottomFixd .daylink {
  display: flex;
  align-items: center;
  gap: 5px;
  transition: 0.25s;
}

.bottomFixd .daylink:hover {
  opacity: 0.5;
}

.bottomFixd .daylink span {
  margin-top: 2.5px;
  width: 9px;
  height: 10px;
  background: #FFFFFF;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

.bottomFixd .link {
  display: flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 12px 24px;
  font-weight: 600;
  background-color: #FFF500;
  color: #000000;
  transition: 0.25s;
}

.bottomFixd .link:hover {
  background-color: #FFD800;
  opacity: 1;
}

.bottomFixd .link img {
  width: 25px;
  height: 25px;
}


.top {
  margin-top: 100px;
  margin-bottom: 200px;
  height: calc(100vh - 225px);
}

.top .wapper {
  position: relative;
  height: 100%;
}

.top .wapper img {
  height: 95%;
  width: 75%;
  border-radius: 30px;
  object-fit: cover;
}

.top__text {
  position: absolute;
  right: 0;
  bottom: 0;
  text-align: right;
}

.top__text h2 {
  width: fit-content;
  font-size: 4rem;
  font-style: italic;
  font-weight: 900;
  margin-bottom: 30px;
}

.topLine {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  animation: textline 0.6s ease-out both;
  animation-delay: 4s;
  padding-right: 7.5px;
}

.loading-topAactive .topLine {
  animation-delay: 1.2s;
}

.topLine::before {
  animation: none;
  clip-path: inset(0 0 0 0);
}

.top__subtext,
.top__subtitle {
  clip-path: inset(0 100% 0 0);
  animation: textline 0.6s ease-out both;
  animation-delay: 4.5s;
}

.loading-topAactive .top__subtext,
.loading-topAactive .top__subtitle {
  animation-delay: 1.6s;
}

.top__subtext::before {
  animation: none;
  clip-path: inset(0 0 0 0);
}



.top__text h2 .line:nth-of-type(1) {
  margin-bottom: 10px;
}

.top__text ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.top__text ul li h3 {
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 600;
}

.top__text ul li p {
  font-weight: 900;
}

.wapper {
  width: 90%;
  max-width: 1440px;
  margin: 0 auto;
}

.about {
  padding-bottom: 150px;
}

.about .wapper {
  padding-top: 50px;
  max-width: 1080px;
  position: relative;
}

.about__image {
  position: absolute;
  top: 0;
  right: -5%;
  width: 55%;
  z-index: 1; /* 見出し帯より奥に */
}

.about__image img {
  border-radius: 30px;
  position: relative;
  z-index: 1;
}

.about__contents {
  width: 100%;
  position: relative;
  z-index: 2; /* 画像より手前に表示 */
}

.about__contents h2 {
  font-size: 5.2rem;
  font-weight: 900;
  font-style: italic;
  margin-bottom: 25px;

  /* ↓ 白帯を極力タイトにする調整（再調整） */
  display: inline;               /* 自然な折返し */
  background: #FFFFFF;           /* 白帯 */
  padding: .02em .28em;          /* 上下の余白をさらに薄く */
  line-height: 1.00;             /* 行高をさらに詰める */
  border-radius: 6px;            /* 角丸も少しだけ小さく */
  position: relative;
  z-index: 2;

  /* Safari 折返し時の帯継続 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

  /* 既存のアニメ系プロパティは不要 */
  clip-path: none;
  transition: none;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.about__contents .scrollLine-active {
  clip-path: inset(0 0 0 0);
}

.about__contents h2::before {
  clip-path: inset(0 0 0 0);
  height: 20%;
}

.about__contents p {
  font-size: 2.8rem;
  font-weight: 700;
  width: 47.5%;
  margin-bottom: 25px;
  line-height: 1.8;
}

.about__contents small {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  width: 47.5%;
  line-height: 1.8;
}

.section2 {
  background: #FFFFFF;
  padding: 150px 0;
}

.section2 h2 {
  width: 90%;
  text-align: center;
  font-size: 3rem;
  font-weight: 900;
  margin: 0 auto 75px;
}

.section2 h2 p {
  width: fit-content;
  margin: 0 auto;
}

.section2 h2 p:last-of-type {
  font-size: 4rem;
}

.section2 h2 .scrollLine::before {
  background: #FFF500;
}

.section2 ul {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* 中央揃え */
  align-items: flex-start;
  gap: 50px;
  padding-left: 0;      /* 既定の余白をリセット */
  list-style: none;     /* 行頭のマーカーを無効化 */
  box-sizing: border-box; /* はみ出し防止 */
}

.section2 ul li {
  width: calc(100% / 4 - 12.5px);
}

.section2 ul li img {
  display: block;
  height: 125px;
  margin: 0 auto 25px;
}

.section2 ul li h3 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
}

.sec2__arrow {
  width: fit-content;
  display: block;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  gap: 7.5px;
}

.sec2__arrow span {
  width: 16px;
  height: 13px;
  background: #000000;
  display: block;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.sec2__bottomText {
  display: block;
  text-align: center;
  font-size: 3rem;
  font-weight: 900;
}

.join {
  background: url("../images/join.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 70% 50%;
  position: relative;
  height: 250px;
}

.join3 {
  height: 300px;
}

.join::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0.7;
}

.join__topText {
  font-size: 3rem;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1;
}

.join__topText span {
  font-size: 2.5rem;
  text-align: center;
}

.join__contents {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  display: flex;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.join__top {
  display: flex;
  justify-content: center;
  align-items: center;
}

.join__top h2 {
  font-size: 7rem;
  font-weight: 900;
  font-style: italic;
  color: #FFF500;
  font-family: var(--en);
  margin-right: 40px;
}

.join__top__small {
  font-size: 1.8rem;
  background: #FFF500;
  padding: 0 10px;
  color: #000000;
}

.join__top p {
  font-size: 3rem;
  font-weight: 800;
  position: relative;
}

.join__top p span {
  font-size: 5rem;
  font-family: var(--en);
}

.join__top p .en {
  font-size: 2.8rem;
  font-family: var(--en);
  transform: translateY(3px);
  display: none;

}

.join__bottom {
  position: relative;
}

.join__bottom .mainlink {
  display: flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 12px 30px;
  font-weight: 600;
  background-color: #FFF500; /* 黄色バック */
  color: #000; /* 文字は黒 */
  border: none;
  transition: background-color 0.3s ease;
}

.join__bottom .mainlink:hover {
  background-color: #FFD800; /* ホバー時にやや濃い黄色 */
}


.join__bottom .mainlink img {
  width: 28px;
  height: 28px;
  filter: brightness(0) !important;
}

.join__bottom .sublink {
  position: absolute;
  top: 50%;
  right: -170px;
  line-height: 1;
  transform: translateY(-50%);
  transition: 0.25s;
}

.join__bottom .sublink:hover {
  opacity: 0.5;
}

.join__bottom .sublink span {
  display: inline-block;
  margin-left: 8px;
  margin-top: 2.5px;
  width: 9px;
  height: 10px;
  background: #FFFFFF;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

.course {
  padding: 150px 0 150px;
  background: #FFFFFF;
}

.course .wapper {
  width: 100%;
  position: relative;
  max-width: none;
}

.course__text {
  position: absolute;
  top: 0;
  left: 5%;
  width: 40%;
}

.course__text h2 {
  position: relative;
  font-size: 10rem;
  font-weight: 900;
  font-style: italic;
  width: fit-content;
  padding-right: 20px;
}

.course__text .scrollLine::before {
  background: #FFF500;
  height: 40%;
  top: 35%;
}

.course__text p {
  font-size: 2rem;
  font-weight: 700;
}

.slider {
  width: 60%;
  margin-left: auto;
  position: static;
}

.slider .slick-list {
  padding: 0 20% 0 0 !important;
  position: static;
}

.slider .slider__item {
  margin: 0 2.5vw;
}

.slider .slick-dots {
  display: flex;
  flex-direction: column;
  top: 300px;
  left: 5%;
  width: fit-content;
  gap: 20px;
  height: fit-content;
}

.slider .slider .slick-dotted.slick-slider {
  position: static;
}

.slider .slider__item__image {
  position: relative;
}

.slider .slider__item__image img {
  border-radius: 30px;
  margin-bottom: 25px;
}

.slider .slider__item__image .ber {
  position: absolute;
  width: 90%;
  height: 2px;
  background: #F6F6F6;
  bottom: 5%;
  left: 5%;
  display: block;
}

.slider .slider__item__image .ber::after {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #D20000;
}

.slider .slick-current .slider__item__image .ber::after {
  animation: bar 10s linear both;
}

@keyframes bar {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

.slider .slider__item__image h3 {
  position: absolute;
  top: 5%;
  left: 2.5%;
  width: fit-content;
  background: #FFFFFF;
  font-size: 2.3rem;
  font-weight: 900;
  display: inline-block;         /* テキスト幅に帯を合わせる */
  padding: .12em .45em;          /* 帯の余白をタイトに */
  line-height: 1.05;             /* 高さをさらに詰める */
  border-radius: 8px;            /* 角丸をやや小さく */
}

.slider .slider__item p {
  line-height: 1.8;
  font-weight: 500;
}

.slider .slick-dots li button {
  font-size: 1.6rem;
  width: fit-content;
  line-height: 1;
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  cursor: pointer;
  color: #000000;
}

.slider .slick-dots li {
  width: auto;
  height: auto;
}

.slider .slick-dots li button:before {
  content: none;
}

.slider .slick-dots .slick-active button {
  color: #F6CE00;
}


.flow {
  background: #FFFFFF;
}

.flow .wapper {
  background: #FFF500;
  border-radius: 30px;
  padding: 150px 0;
}

.flow .wapper .scrollLine {
  width: fit-content;
  margin: 0 auto 0;
  font-size: 10rem;
  padding-right: 20px;
  font-weight: 900;
  font-style: italic;
}

.flow .wapper .scrollLine::before {
  height: 40%;
  top: 35%;
}

.flow__subtitle {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 50px;
}

.flow__black {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 50px;
}

.flow__black p {
  padding: 8px 0;
  width: 200px;
  border-radius: 100px;
  color: #FFFFFF;
  background: #000000;
  font-size: 1.8rem;
  font-weight: 500;
  text-align: center;
}

.flow__text {
  width: 90%;
  max-width: 800px;
  margin: 0 auto 50px;
  text-align: center;
  line-height: 1.8;
}

.flow__text span {
  font-weight: 900;
}

.flow__content {
  width: 90%;
  max-width: 800px;
  padding: 50px 0;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 30px;
}

.flow__content img {
  display: block;
  width: 90%;
  margin: 0 auto;
}

.skill {
  padding: 150px 0 50px;
  background: #FFFFFF;
}

.skill h2 {
  font-style: italic;
  font-size: 10rem;
  font-family: var(--en);
  width: fit-content;
  padding-right: 10px;
  margin: 0 auto;
}

.skill__subtitle {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 50px;
}

.skill .scrollLine::before {
  background: #FFF500;
  height: 40%;
  top: 35%;
}

.skill__ul {
  display: flex;
  gap: 50px;
  margin-bottom: 50px;
}

.skill__ul__li {
  width: calc(100% / 5);
}

.skill__ul__li h3 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 2rem;
  font-weight: 700;

}

.skill__ul__li img {
  display: block;
  width: auto;
  height: 125px;
  margin: 0 auto 30px;
}

.skill__ul__li p {
  line-height: 1.8;
  font-weight: 500;
}

.skill__link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-weight: 700;
  width: fit-content;
  margin: 0 auto 50px;
  transition: 0.25s;
}

.skill__link:hover {
  opacity: 0.5;
}

.skill__link span {
  width: 8px;
  height: 10px;
  background: #000000;
  display: block;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  margin-top: 3.5px;
}

.skill__bottomText {
  font-weight: 500;
  margin-bottom: 25px;
  text-align: center;
  line-height: 1.8rem;
}

.skill__bottomText-strong {
  font-size: 3rem;
  font-weight: 700;
  width: fit-content;
  margin: 0 auto;
  padding: 0 0 0 10px;
}

.skill__bottomText-strong::before {
  background: #FFF500;
  height: 40%;
  top: 35%;
}

.triangle-area {
  width: 100%;
  height: 125px;
  margin-top: -1px;
  position: relative;
  background: #000000;   /* ← 左右の帯（黄色→黒） */
  z-index: 1;
}
.triangle-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f8f8f8;   /* ← 中央の逆三角（上のグレーと同色） */
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/* Yellow triangle for the center divider before LINE CTA */
.triangle-area.triangle-area--yellow::before {
  background: #FFF500 !important;
}

.section__line {
  position: relative;
  background: url(../images/line.jpg);
  height: 500px;
  margin-top: -125px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.section__line::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0.7;
}

.section__line .wapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  position: absolute;
  z-index: 2;
  bottom: 75px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
}

.section__line .wapper img {
  height: 220px;
  width: auto;
  border-radius: 30px;
  border: solid 3px #FFFFFF;
}

.section__line__content {
  width: fit-content;
  text-align: center;
}

.section__line__content h2 {
  margin-bottom: 15px;
}

.section__line__content h2 small {
  display: block;
  font-size: clamp(1.6rem, 4vw, 3rem); /* ← 可変に変更 */
  font-weight: 900;
  color: #FFFFFF;
}

.section__line__content h2 strong {
  display: block;
  font-size: clamp(2.2rem, 8vw, 4rem); /* ← 可変に変更 */
  font-weight: 900;
  color: #FFF500;
  line-height: 1.25;
  word-break: keep-all;   /* 不自然な途中改行を防ぐ */
  overflow-wrap: anywhere; /* はみ出しを防止 */
  white-space: normal;     /* 折返しを許可 */
}

.section__line__content a img {
  width: 25px !important;
  height: auto !important;
  border: none !important;
  border-radius: 0 !important;
}

.section__line__content p {
  color: #FFFFFF;
  font-weight: 500;
  margin-bottom: 25px;
  font-size: 1.8rem; /* 新規追加：完全解説！も同じサイズに */
}

.section__line__content p span {
  font-size: 1.8rem;
  font-weight: 700;
}

.section__line__content a {
  display: block;
  background: #06C755;
  width: 280px;
  padding: 15px 0;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  transition: 0.25s;
}

.section__line__content a:hover {
  opacity: 0.5;
  cursor: pointer;
}

.way {
  padding: 150px 0 0;
}

.way h2 {
  width: fit-content;
  font-size: 10rem;
  font-weight: 900;
  font-family: var(--en);
  font-style: italic;
  padding-right: 20px;
}

.way h2::before {
  height: 40%;
  top: 35%;
}

.way__text {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 75px;
}

.way__contens {
  display: flex;
  gap: 5%;
}

.way__contens__ul {
  display: flex;
  flex-direction: column;
  gap: 150px;
  width: 50%;
}

.way__contens__ul__li:last-child {
  margin-bottom: 175px;
}

.way__contens__ul__li strong {
  font-size: 10rem;
  font-style: italic;
  font-family: var(--en);
  font-weight: 800;
  line-height: 1;
}

.way__contens__ul__li h3 {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
}

.way__contens__ul__li h3 p {
  width: fit-content;
  font-size: 3rem;
  font-weight: 900;
}

.way__contens__ul__li p {
  font-size: 1.8rem;
  text-align: left;
}

.way__wapper {
  margin-top: 25px;
}

.way__contens__ul__li .scrollEffect {
  line-height: 1.8;
}

.way__contents__image {
  width: 50%;
  height: 100%;
  position: sticky;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.way__contents__image .fadeout {
  opacity: 0;
}

.way__contents__image img:nth-child(1) {
  position: relative;
  z-index: 3;
}

.way__contents__image img:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.way__contents__image img:nth-child(3) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.way__contents__image img {
  border-radius: 30px;
  transition: 0.25s;
}


.join2 {
  position: relative;
  background: url("../images/join2.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.join2::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0.7;
}

.join2__contents {
  position: relative;
  z-index: 1;
}

.join2__contents h2 {
  font-size: 10rem;
  font-style: italic;
  font-weight: 900;
  color: #FFF500;
  line-height: 1;
  text-align: center;
  margin-top: 10px;
  font-family: var(--en);
}

.join2__contents p {
  text-align: center;
  color: #FFFFFF;
}

.join2__contents .link {
  color: #FFFFFF;
  width: fit-content;
  display: block;
  margin: 15px auto 30px;
  transition: 0.25s;
}

.join2__contents .link span {
  display: inline-block;
  margin-left: 8px;
  margin-top: 2.5px;
  width: 9px;
  height: 10px;
  background: #FFFFFF;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

  .join2__contents .button {
    display: flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    padding: 20px 30px;
    margin: 0 auto;
    font-weight: 600;
    background: #FFFFFF;
    color: #000000;
    transition: 0.25s;
    margin-top: 25px;
  }

.join2__contents a:hover {
  opacity: 0.5;
}

.join2__contents a img {
  width: 28px;
  filter: brightness(0);
}

.join2 .join__top p {
  color: #FFFFFF;
}

.howto {
  padding: 150px 0;
  background: #FFFFFF;
}

.howto__sumallTitle {
  font-size: 2.6rem;
  font-weight: 900;
  display: block;
  width: fit-content;
  margin: 0 auto;
  position: relative;
  font-style: italic;
  font-family: var(--en);
}

.howto__sumallTitle::before {
  width: 2px;
  height: 80%;
  content: "";
  display: block;
  position: absolute;
  left: -20px;
  bottom: 10%;
  background: #000000;
  transform: rotate(-25deg);
}

.howto__sumallTitle::after {
  width: 2px;
  height: 80%;
  content: "";
  display: block;
  position: absolute;
  right: -20px;
  bottom: 10%;
  background: #000000;
  transform: rotate(25deg);
}

.howto__title {
  font-size: 3rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 75px;
}

.howto__title span {
  font-size: 4rem;
}

.howto__ul {
  display: flex;
  justify-content: space-between;
  max-width: 1080px;
  margin: 0 auto;
}

.howto__ul__li {
  width: 30%;
  position: relative;
}

.howto__ul__li::after {
  content: "";
  width: 1px;
  height: 100%;
  background: #D9D9D9;
  position: absolute;
  top: 0;
  right: -7.5%;
}

.howto__ul__li:last-child:after {
  content: none;
}

.howto__ul__li__images {
  position: relative;
  margin-bottom: 15px;
}

.howto__ul__li__images__number {
  position: absolute;
  line-height: 1;
  top: -22.5px;
  left: 0;
  font-size: 4.5rem;
  font-weight: 900;
  font-style: italic;
  font-family: var(--en);
}

.howto__ul__li__images__image {
  border-radius: 15px;
}

.howto__ul__li__title {
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.howto__ul__li__title p {
  width: fit-content;
  padding: 0 5px;
  margin: 0 auto;
}

.howto__ul__li__title p::before {
  background: #FFF500;
}

.howto__ul__li__triangle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7.5px;
  margin-bottom: 15px;
}

.howto__ul__li__triangle span {
  width: 16px;
  height: 13px;
  background: #000000;
  display: block;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.howto__ul__li__text {
  line-height: 1.8;
  font-weight: 500;
}

.howto__ul__li__text span {
  font-weight: 900;
}

.teacher {
  padding: 150px 0;
  background: #FFFFFF;
}

.teacher .wapper {
  display: flex;
  justify-content: space-between;
}

.teacher .wapper div {
  width: 50%;
}

.teacher .wapper div:last-of-type {
  width: 40%;
}

.teacher .wapper div img {
  border-radius: 20px;
}

.teacher h2 {
  width: fit-content;
  font-size: 10rem;
  font-weight: 900;
  font-family: var(--en);
  font-style: italic;
  padding-right: 20px;
}

.teacher h2::before {
  background: #FFF500;
  height: 40%;
  top: 35%;
}

.teacher small {
  font-size: 2rem;
  display: block;
  font-weight: 700;
  margin-bottom: 30px;
}

.teacher h3 {
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: 30px;
}

.teacher p {
  line-height: 1.8;
}

.flowonly {
  padding: 150px 0;
  background: #F6F6F6;
}

.flowonly ul {
  display: flex;
  max-width: 1080px;
  margin: 0 auto;
  gap: 50px;
}

.flowonly ul li {
  width: calc(100% / 3 - 30px);
}

.flowonly h2 {
  width: fit-content;
  font-size: 10rem;
  font-weight: 900;
  font-family: var(--en);
  font-style: italic;
  padding-right: 20px;
  margin: 0 auto;
}

.flowonly h2::before {
  background: #FFF500;
  height: 40%;
  top: 35%;
}

.flowonly p {
  font-size: 2rem;
  display: block;
  text-align: center;
  font-weight: 700;
  margin-bottom: 75px;
}

.flowonly small {
  display: block;
  text-align: center;
  font-size: 2rem;
  font-weight: 900;
  font-style: italic;
  line-height: 1.3;
  margin-left: 10px;
}

.flowonly strong {
  font-size: 5rem;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  text-align: center;
  display: block;
  position: relative;
  z-index: 1;
}

.flowonly img {
  margin-top: -10%;
}

.flowonly ul li div {
  position: relative;
}

.flowonly ul li div::after {
  content: "";
  width: 16px;
  height: 18px;
  display: block;
  position: absolute;
  top: 45%;
  right: -35px;
  transform: translateY(-50%);
  background: #000000;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

.flowonly ul li:last-child div::after {
  content: none;
}

.flowonly h3 {
  font-weight: 700;
  font-size: 2rem;
  position: relative;
  z-index: 1;
  margin-top: -20%;
  text-align: center;
  margin-bottom: 5px;
}

.flowonly ul li p {
  line-height: 1.8;
  text-align: left;
  font-weight: 500;
  font-size: 1.6rem;
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

.judge {
  padding: 150px 0;
  background: #FFFFFF;
}

.judge__title {
  margin-bottom: 75px;
  display: flex;
  align-items: center;
  gap: 50px;
}

.judge__title h2 {
  width: fit-content;
  font-size: 10rem;
  font-weight: 900;
  font-family: var(--en);
  font-style: italic;
  padding-right: 20px;
}

.judge__title h2:before {
  background: #FFF500;
  height: 40%;
  top: 35%;
}

.judge__title__right small {
  font-size: 2rem;
  font-weight: 700;
  display: block;
  margin-top: 10px;
}

.judge__title__right strong {
  font-size: 3rem;
  font-weight: 900;
  display: block;
}


.xscroll {
  overflow-x: scroll;
}

table {
  width: 1080px;
  margin: 0 auto;
  border-collapse: collapse;
  border: 0;
}

table .wapper {
  width: 85%;
  text-align: center;
}

table tbody tr {
  border-radius: 40px;
}

table tbody tr .maintitle {
  text-align: center;
  height: 70px;
  margin-bottom: 25px;
}

table tbody tr .subtitle {
  text-align: center;
  height: 70px;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

table tbody tr:first-child {
  align-items: flex-end;
}

table tbody tr:first-child th {
  width: 28%;
  text-align: center;
  padding: 50px 0;
  font-size: 3rem;
  font-weight: 700;
}

table tbody tr:first-child th img {
  display: block;
  width: 80%;
  margin: 0 auto;
}

table tbody tr:first-child th:first-child {
  width: 16%;
}

table tbody tr:first-child th:nth-child(2) {
  background: #FFF500;
  border-radius: 20px 20px 0 0;
}

.sticy {
  position: sticky;
  top: 0;
  left: 0;
  vertical-align: middle;
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  border-radius: 40px 0 0 40px;
  background: #FFFCBC;
  z-index: 2;
}

.sticy::before {
  background: #FFFFFF;
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  top: 0;
  left: -2px;
  z-index: -2;
}

.sticy::after {
  border-radius: 40px 0 0 40px;
  background: #FFFCBC;
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  top: 0;
  left: 0;
  z-index: -1;
}

table tbody tr:nth-child(odd) .sticy::after {
  background: #FFFFFF;
}

table tbody tr:nth-child(even) {
  background: #FFFCBC;
}

table tbody tr td {
  padding: 30px 0;
  width: 28%;
}

table tbody tr td strong {
  font-size: 2.2rem;
  font-weight: 700;
  background: linear-gradient(transparent 60%, #FFFFFF 0%);
  display: inline;
  padding: 0 1px 0px;
}

.whiteline {
  background: linear-gradient(transparent 60%, #FFFFFF 0%);
  display: inline-block;
  padding: 0 1px;
  line-height: 1.2;
}

table tbody tr td small {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
}

table tbody tr td p {
  line-height: 1.75;
  text-align: left;
}

table tbody tr:nth-child(odd) td:first-of-type {
  background: #FFF500;
}

table tbody tr:nth-child(even) td:first-of-type {
  background: #FFF95E;
}

table tbody tr td:last-child {
  border-radius: 0 40px 40px 0;
}

table tbody tr:not(1) th {
  width: 16%;
}

table tbody tr td i {
  font-style: normal;
  font-weight: 900;
  font-size: 4.5rem;
  text-align: center;
  display: block;
  line-height: 1.2;
}

table tbody tr .bottom {
  border-radius: 0 0 30px 30px;
}

table tbody tr td .center {
  text-align: center;
}

.period1 {
  font-weight: 700;
  font-size: 2.6rem;
}

.period1 span {
  font-size: 3rem;
}

.period2 {
  font-weight: 700;
  font-size: 2rem;
  margin-top: 4px;
}

.period2 span {
  font-size: 2.4rem;
}

.period3 {
  font-weight: 700;
  font-size: 2rem;
  margin-top: 10px;
}

table tbody tr td .plice {
  text-align: center;
}

table tbody tr .plice1 {
  font-size: 2.6rem;
  font-weight: 700;
}

table tbody tr .plice1 span {
  font-size: 3rem;
}

table tbody tr .plice2 {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 10px;
}

table tbody tr .plice2 span {
  font-size: 2.4rem;
}

table tbody tr .plice3 {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 10px;
}

table tbody tr .plice3 span {
  font-size: 2.4rem;
}

table tbody tr .plice3__small {
  display: block;
  text-align: center;
  font-weight: 500;
}


.plan {
  padding: 150px 0;
}

.plan .wapper {
  max-width: 900px;
}

.plan h2 {
  position: relative;
  width: fit-content;
  margin: 0 auto 0;
  font-size: 10rem;
  padding-right: 20px;
  font-weight: 900;
  font-style: italic;
}

.plan h2::before {
  height: 40%;
  top: 35%;
}

.title__text {
  font-size: 2rem;
  display: block;
  text-align: center;
  font-weight: 700;
  margin-bottom: 15px;
}

.plan__subtext {
  display: block;
  font-size: 1.4rem;
  text-align: right;
  font-weight: 500;
  margin-bottom: 15px;
}

.plan__contents {
  padding: 50px 0;
  border-radius: 40px;
  background: #FFFFFF;
  text-align: center;
  margin-bottom: 50px;
}

.plan__contents ul {
  text-align: left;
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 2カラム */
  column-gap: 60px;                 /* カラム間隔 */
  row-gap: 16px;                    /* 行間隔 */
  align-items: start;
}

.plan__contents ul li {
  width: auto;                      /* 既存の60%を撤廃 */
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.8;
  font-size: 1.6rem;
  word-break: keep-all;             /* 日本語の不自然な分割を抑制 */
}

.plan__contents ul li:nth-child(even) {
  width: auto;                      /* 既存の40%を撤廃（2カラムはgridで制御） */
}

.plan__contents .check {
  display: inline-block;
  flex: 0 0 22px;                   /* 固定幅 */
  width: 22px;
  height: auto;
  margin-right: 0;
  transform: translateY(3px);       /* ベースライン微調整 */
}

@media (max-width: 1024px) {
  .plan__contents ul {
    grid-template-columns: 1fr;     /* 1カラム */
    column-gap: 0;
    row-gap: 12px;
    max-width: 540px;
  }
  .plan__contents ul li {
    font-size: 1.4rem;
    line-height: 1.7;
  }
}

.plan__contents__maintext {
  width: 90%;
  max-width: 500px;
  padding: 15px 0;
  font-size: 2.4rem;
  font-weight: 700;
  background: #000000;
  color: #FFFFFF;
  border-radius: 100px;
  margin: 0 auto 5px;
}

.plan__contents__mainprice {
  font-size: 4.5rem;
  font-weight: 900;
  width: fit-content;
  padding-right: 10px;
  margin: 0 auto 15px;
  display: block;
}

.plan__contents__mainprice::before {
  background: #FFF500;
  height: 50%;
  top: auto;
  bottom: 0;
}

.plan__contents__mainprice span {
  font-size: 10rem;
  font-family: var(--en);
}

.plan__contents__subtext {
  width: 80%;
  max-width: 375px;
  padding: 7.5px 0;
  font-size: 2rem;
  font-weight: 700;
  border: solid 2px #000000;
  border-radius: 100px;
  margin: 0 auto 5px;
}

.plan__contents__subprice {
  font-size: 3.5rem;
  font-weight: 900;
  margin: 0 auto 15px;
}

.plan__contents__subprice span {
  font-size: 6rem;
  font-family: var(--en);
}

.plan__contents__smallprice {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 8px;
}

.plan__contents__smallprice span {
  font-size: 3.8rem;
  font-weight: 700;
}

.plan__contents__smallprice .en {
  font-family: var(--en);
}

/* ── 入会金注記：学割価格のすぐ下に表示 ── */
.plan__enroll{
  display: block;
  text-align: center;
  font-size: 1.4rem;
  color: #666;
  line-height: 1.6;
  margin: 6px auto 16px; /* 価格のすぐ下に配置 */
}
@media (max-width: 1024px){
  .plan__enroll{ font-size: 1.3rem; margin: 6px auto 14px; }
}
@media (max-width: 600px){
  .plan__enroll{ font-size: 1.2rem; margin: 6px auto 12px; }
}

.plan__bottomtext-strong {
  width: fit-content;
  font-size: 3rem;
  font-weight: 900;
  margin: 0 auto 20px;
}

.plan__bottomtext-strong span {
  font-size: 4rem;
}

.plan__bottomtext-small {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 50px;
}

.plan__bottomtext-small span {
  font-size: 2.2rem;
  font-weight: 900;
}

.banner {
  max-width: 800px;
  margin: 0 auto;
}

.banner a {
  transition: 0.25s;
}

.banner a:hover {
  opacity: 0.5;
}

.voise {
  padding: 150px 0;
  background: #F6F6F6;
}

.voise .wapper {
  max-width: 1080px;
}

.voise__title {
  margin-bottom: 75px;
  display: flex;
  align-items: center;
  gap: 50px;
}

.voise__title h2:before {
  background: #FFF500;
  height: 40%;
  top: 35%;
}

.voise__title h2 {
  width: fit-content;
  font-size: 10rem;
  font-weight: 900;
  font-family: var(--en);
  font-style: italic;
  padding-right: 20px;
}

.voise__title p {
  font-size: 2rem;
  font-weight: 700;
  display: block;
  margin-top: 10px;
}

.voise__ul {
  display: flex;
  gap: 25px;
  margin-bottom: 100px;
}

.voise__ul__li {
  width: calc(100% / 3);
  background: #FFFFFF;
  border-radius: 20px;
  padding: 25px 0;
}

.voise__ul__li__image {
  width: 60%;
  display: block;
  margin: 0 auto 5px;
}

.voise__ul__li__small {
  display: block;
  margin-bottom: 5px;
  font-size: 1.6rem;
}

.voise__ul__li__smalltext {
  font-size: 1.4rem;
  margin-bottom: 15px;
}

.voise__ul__li__strong {
  width: fit-content;
  background: #FFF500;
  font-size: 2rem;
  font-weight: 700;
}

.voise__ul__li__strongtext {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.voise__ul__li__line {
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: 15px;
  background: #000000;
}

.voise__ul__li__text {
  line-height: 1.8;
}

.video {
  display: block;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

.faq {
  padding: 150px 0;
  background: #FFFFFF;
}

.faq .wapper {
  max-width: 900px;
}

.faq h2 {
  font-style: italic;
  font-size: 10rem;
  font-family: var(--en);
  width: fit-content;
  padding-right: 10px;
  margin: 0 auto;
}

.faq h2::before {
  background: #FFF500;
  height: 40%;
  top: 35%;
}

.faq .faq__text {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 75px;
}

.accordion {
  width: 100%;
  margin-bottom: 20px;
}

.accordion-header {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 15px;
  background-color: #F6F6F6;
  border-radius: 20px;
  padding: 25px 60px 25px 20px;
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 1;
  transition: 0.25s;
}

.accordion-active {
  background: #FFF500;
}

.accordion-header::before {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: #000000;
  position: absolute;
  right: 20px;
  top: 40px;
}

.accordion-header::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: #000000;
  position: absolute;
  right: 20px;
  top: 40px;
  transform: rotate(90deg);
  transition: 0.25s;
}

.accordion-active::after {
  transform: rotate(0);
}

.accordion-header span {
  font-size: 3rem;
  font-family: var(--en);
  font-weight: 900;
  font-style: italic;
}

.accordion-content {
  display: none;
  padding: 0 20px;
  margin-top: 20px;
  font-size: 1.8rem;
  line-height: 1.8;
}

.accordion-content a {
  text-decoration: underline;
  transition: 0.25s;
}

.accordion-content a:hover {
  opacity: 0.5;
}

.topSP {
  display: none;
}

.flowSP {
  display: none !important;
}

.slider .slick-prev {
  left: auto;
  top: auto;
  bottom: 0;
  right: calc(62% + 50px);
}

.slider .slick-prev:before {
  content: "";
  opacity: 1;
  display: block;
  width: 20px;
  height: 24px;
  background: #000000;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.slider .slick-next {
  right: 62%;
  bottom: 0;
  top: auto;
}

.slider .slick-next:before {
  content: "";
  opacity: 1;
  display: block;
  width: 20px;
  height: 24px;
  background: #000000;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

.skill__link__sp {
  display: none;
}

.waySP {
  display: none;
}

.way__contens__ul__li .wapSP {
  display: none;
}

.waylink {
  width: fit-content;
  display: block;
  margin: 15px 0 0 auto;
  transition: 0.25s;
  font-weight: 700;
}

.waylink:hover {
  opacity: 0.5;
}

.waylink span {
  display: inline-block;
  margin-left: 8px;
  margin-top: 2.5px;
  width: 9px;
  height: 10px;
  background: #000000;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

.scrolltext {
  display: none;
}

@media (max-width: 1200px) {

  .scrolltext {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: #B2B1B1;
    text-align: center;
    transform: translateY(-50px);
  }

  .xscroll {
    padding-bottom: 75px;
  }

  .xscroll::-webkit-scrollbar {
    height: 8px;
    -webkit-appearance: none;
  }


  .xscroll::-webkit-scrollbar-track {
    background: #F6F6F6;
  }


  .xscroll::-webkit-scrollbar-thumb {
    background: #000000;
  }

}

@media (max-width: 1480px) {

  .course__text h2,
  .flow .wapper .scrollLine,
  .skill h2,
  .way h2,
  .join2__contents h2,
  .teacher h2,
  .flowonly h2,
  .judge__title h2,
  .plan h2,
  .plan__contents__mainprice span,
  .voise__title h2,
  .faq h2 {
    font-size: 8rem;
  }

  .way__contens__ul__li h3 p {
    font-size: 2.6rem;
    padding: 5px 0 5px 2.5px;
    margin: -5px 0;
  }

  .way__contens {
    gap: 2.5%;
  }

  .section__line__content h2 strong {
    font-size: 3.6rem;
  }

  .slider__item__image h3 {
    font-size: 2.2rem;
  }
}

.planSP {
  display: none;
}

.week {
  font-size: 3rem;
  font-weight: 800;
  position: relative;
  color: #FFFFFF;
  font-style: normal;
  margin-bottom: -20px;
  margin-right: -7px;
}

.bottomFixd .week {
  color: #FFFFFF;
}



@media (max-width: 1024px) {

  .week {
    font-size: 3rem;
    margin-bottom: -20px;
  }

  .join__top__element time {
    transform: translateY(5px);
  }

  .bottomFixd .join__top__element small {
    padding: 2px 5px;
  }

  .join__top__small {
    padding: 2px 5px;
    font-size: 1.4rem;
  }

  .howto__title {
    font-size: 2.8rem;
  }

  .voise__title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .setumeikai__button {
    width: fit-content;
    margin: 0 auto 25px;
  }

  .planSP {
    display: block;
  }

  .planPC {
    display: none;
  }



  .judge__title {
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
  }

  .plan__bottomtext-small {
    margin-top: 25px;
  }



  .topSP {
    display: block;
  }

  .topPC {
    display: none;
  }

  .top {
    margin-bottom: 100px;
  }

  .top .wapper img {
    transform: translateX(-10%);
    width: 100%;
    height: calc(100vh - 525px);
    border-radius: 0 30px 30px 0;
  }

  .top__text {
    position: relative;
  }

  .top__text h2 {
    position: absolute;
    bottom: 300px;
    right: 0;
    text-align: right;
  }

  .top__text ul {
    text-align: right;
    margin-top: 10px;
  }

  .about__image {
    position: static;
    width: 90%;
    margin-left: auto;
  }

  .about__contents {
    width: 100%;
    margin-top: -40px;
  }

  .about__contents p,
  .about__contents small {
    width: 100%;
  }

  .about__contents h2{
    display: inline;
    white-space: normal;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: .04em .32em;   /* モバイルはわずかに厚めだがタイト */
    border-radius: 6px;
    line-height: 1.02;
  }

  .about {
    padding-bottom: 100px;
  }

  .section2 {
    padding: 100px 0;
  }

  .section2 ul {
    max-width: 800px;
    flex-wrap: wrap;
    gap: 25px;
  }

  .section2 ul li {
    width: calc(100% / 2 - 12.5px);
    margin-bottom: 25px;
  }

  .join {
    height: 350px;
  }

  .join__topText {
    display: block;
    margin-bottom: 10px;
    font-size: 2.4rem;
  }

  .join__topText small {
    font-size: 1.8rem;
  }

  .join__top {
    flex-wrap: wrap;
    margin-bottom: 20px;
  }

  section .join__top {
    margin-bottom: 25px;
  }

  .join__top h2 {
    width: 100%;
    margin: 0 auto;
    line-height: 1;
    text-align: center;
    font-size: 5.6rem;
  }

  .join__bottom .sublink {
    position: static;
    line-height: 1.5;
    transform: none;
    width: fit-content;
    margin: 10px 0 10px;
  }

  .join__bottom {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 10px;
  }

  .course {
    padding: 100px 0 150px;
  }

  .course__text {
    position: static;
    margin-left: 5%;
    margin-bottom: 225px;
    width: 90%;
  }

  .slider {
    width: 100%;
  }

  .slider .slick-dots {
    top: 225px;
    width: 90%;
    height: fit-content;
  }

  .slider .slick-list {
    padding: 0 7.5% 0 7.5% !important;
  }

  .flowSP {
    display: block !important;
  }

  .flowPC {
    display: none !important;
  }

  .skill__ul {
    flex-wrap: wrap;
    gap: 50px;
  }

  .skill__ul__li {
    width: calc(100% / 2 - 25px);
  }

  .skill__link {
    display: none;
  }

  .skill__link__sp {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(100% / 2 - 25px);
  }

  .skill__link__sp::after {
    content: "";
    position: absolute;
    top: calc(50% + 40px);
    left: 50%;
    transform: translateX(-50%);
    width: 9px;
    height: 10px;
    background: #000000;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
  }

  .wayPC {
    display: none;
  }

  .waySP {
    display: block;
  }

  .triangle-area {
    height: 100px;
  }

  .section__line {
    margin-top: -100px;
    height: 650px;
  }

  .section__line .wapper {
    flex-direction: column;
    gap: 25px;
  }

  .section__line .wapper img {
    height: 180px;
  }

  .way__contents__image {
    display: none;
  }

  .way__contens__ul {
    gap: 100px;
    width: 100%;
  }

  .way__contens__ul__li .wapSP {
    border-radius: 20px;
    display: block;
  }

  .way__contens__ul__li strong {
    display: block;
    margin-top: -50px;
    width: 90%;
  }

  .way__contens__ul__li p {
    width: 100%;
  }

  .way__wapper {
    width: 100%;
  }

  .howto__ul {
    flex-direction: column;
    gap: 100px;
  }

  .howto__ul__li {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
  }

  .howto__ul__li::before {
    content: "";
    width: 100%;
    height: 1px;
    background: #D9D9D9;
    position: absolute;
    display: block;
    left: 0;
    bottom: -40px;
  }

  .howto__ul__li:last-child::before {
    content: none;
  }

  .bottomFixd {
    padding-top: 5px;
    flex-direction: column;
    padding-bottom: 10px;
    gap: 5px;
  }

  .bottomFixd small,
  .bottomFixd h2 {
    font-size: 1.4rem;
    margin-top: 0;
  }

  .flowonly ul {
    flex-direction: column;
  }

  .flowonly ul li {
    width: 100%;
    display: flex;
    gap: 25px;
    position: relative;
    align-items: center;
  }

  .flowonly ul li div::after {
    content: none;
  }

  .flowonly ul {
    gap: 100px;
  }

  .flowonly__ul__li__spleft {
    position: relative;
    width: 35%;
    max-width: 300px;
  }

  .flowonly__spnumber {
    position: absolute;
    top: -50px;
    left: 0;
    z-index: 1;
  }

  .flowonly__ul__li__spright {
    display: block;
    text-align: left;
    flex: 1;
  }

  .flowonly h3 {
    text-align: left;
  }

  .flowonly ul li::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: -40px;
    width: 16px;
    height: 13px;
    background: #000000;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
  }

  .flowonly ul li:last-child:after {
    content: none;
  }

  .slider .slick-dots li {
    position: static;
  }

  .slider .slick-next {
    right: 35%;
    bottom: -75px;
    top: auto;
  }

  .slider .slick-prev {
    left: auto;
    top: auto;
    bottom: -75px;
    right: 65%;
  }

  .slider .slick-dots li button::after {
    content: "";
    width: 12.5px;
    height: 12.5px;
    background: #E9E9E9;
    border-radius: 50%;
    position: absolute;
    bottom: -648px;
    left: 40%;
  }

  .slider .slick-dots li:nth-child(2) button::after {
    left: 45.5%;
  }

  .slider .slick-dots li:nth-child(3) button::after {
    left: 51%;
  }

  .slider .slick-dots li:nth-child(4) button::after {
    left: 57%;
  }

  .slider .slick-dots .slick-active button::after {
    background: #FFF500;
  }

  .slider .slider__item {
    height: 525px;
  }

  .slider .slider__item__image img {
    height: 350px;
    object-fit: cover;
  }

  .flow .wapper {
    padding: 100px 0;
  }

  .skill {
    padding: 100px 0;
  }

  .way {
    padding: 100px 0;
  }

  .way__contens__ul__li:last-child {
    margin-bottom: 0;
  }

  .howto {
    padding: 100px 0;
  }

  .teacher {
    padding: 100px 0;
  }

  .flowonly {
    padding: 100px 0;
  }

  .judge {
    padding: 100px 0;
  }

  .plan {
    padding: 100px 0;
  }

  .voise {
    padding: 100px 0;
  }

  .faq {
    padding: 100px 0;
  }

  table {
    width: 1000px;
  }

  .plan__bottomtext-strong {
    margin-bottom: 0;
  }

}

.spbr {
  display: none;
}

.sp {
  display: none;
}










@media (max-width: 767px) {

  .week {
    font-size: 2rem;
    margin-bottom: -10px;
  }

  .join__top__element time {
    transform: translateY(3px);
  }

  .slider .slick-dots li button::after {
    bottom: -515px;
  }

  .voiseSlick {
    margin-bottom: 100px !important;
  }

  .voiseSlick .voise__ul__li {
    margin: 0 2.5vw;
    min-height: 650px;
  }

  .spbr {
    display: block;
  }

  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  .flowonly small {
    font-size: 1.2rem;
    margin-left: 5px;
  }

  .flowonly strong {
    font-size: 3rem;
  }

  .flowonly__spnumber {
    top: -25px;
  }

  .bottomFixd .join__top__element small {
    padding: 2px 5px;
  }

  .bottomFixd span {
    font-size: 3rem;
  }

  .bottomFixd p {
    font-size: 2rem;
  }

  .join__top__element time {
    font-size: 2.8rem;
  }


  .bottomFixd .join__top__element time {

    transform: translateY(2px);
  }

  .join__top__element time span {
    font-size: 2.8rem;
    transform: translateY(1px);
  }

  .join__top__element time i {
    font-size: 2.6rem;
    transform: translateY(-1px);
  }

  .top {
    height: calc(100vh - 210px);
    margin: 80px 0 80px;
  }

  .top .wapper img {
    width: 100%;
    height: calc(100% - 270px);
    object-fit: cover;
  }

  .flow__content {
    padding: 25px 0 10px;
  }

  .top__text h2 {
    font-size: 10vw;
    bottom: 265px;
    margin-bottom: 0px;
    text-align: right;
  }

  .about__contents h2 {
    font-size: 2.4rem;
  }
  .about__contents h2{
    padding: .04em .30em;
    line-height: 1.02;
    border-radius: 6px;
  }

  .about__contents p {
    font-size: 1.8rem;
  }

  .about__contents small {
    font-size: 1.4rem;
  }

  .about {
    padding-bottom: 75px;
  }

  .section2 {
    padding: 75px 0;
  }

  .section2 h2 p {
    font-size: 2rem;
  }

  .section2 .sp p {
    font-size: 2.8rem;
  }

  .section2 h2 p:last-of-type {
    font-size: 2.8rem;
  }

  .section2 h2 {
    margin-bottom: 50px;
  }

  .section2 ul li h3 {
    font-size: 1.4rem;
  }

  .sec2__arrow {
    margin: 25px auto;
  }

  .sec2__bottomText {
    font-size: 2.4rem;
  }

  .course {
    padding-top: 75px;
    padding-bottom: 100px;
  }

  .course__text {
    width: 90%;
  }

  .course__text h2,
  .flow .wapper .scrollLine,
  .skill h2,
  .way h2,
  .join2__contents h2,
  .teacher h2,
  .flowonly h2,
  .judge__title h2,
  .plan h2,
  .plan__contents__mainprice span,
  .voise__title h2,
  .faq h2,
  .plan__contents__subprice span {
    font-size: 4.8rem;
  }

  .join__top p {
    font-size: 2rem;
  }

  .join__top p span {
    font-size: 3rem;
  }

  .course__text p {
    font-size: 1.6rem;
  }

  .slider .slick-dots {
    top: 180px;
  }

  .slider .slider__item__image h3 {
    font-size: 1.6rem;
    top: 7.5%;
    left: 5%;
  }

  .slider .slider__item__image .slider__sp {
    background: transparent;
    position: absolute;
    top: 5%;
    left: 2.5%;
    width: fit-content;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .slider .slider__item__image .slider__sp p {
    background: #FFFFFF;
    font-size: 1.6rem;
    font-weight: 900;
    width: fit-content;
  }

  .slider .slider__item p {
    font-size: 1.4rem;
  }

  .slider .slider__item {
    height: 400px;
  }

  .slider .slider__item__image img {
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
  }

  .slider .slick-dots li button {
    font-size: 1.4rem;
  }

  table {
    width: 650px;
  }

  table {
    width: 800px;
  }

  .voiseSlick .voise__ul__li {
    margin: 0 2.5vw;
    min-height: 650px;
  }

  .voiseSlick .slick-dots {
    bottom: -50px;
  }

  .voiseSlick .slick-dots li button:before {
    font-size: 1rem;
  }

  .voiseSlick .slick-dots li button:before {
    color: #D9D9D9;
  }

  .voiseSlick .slick-dots li.slick-active button:before {
    color: #FFE000;
  }

  .voiseSlick .slick-next {
    right: 35%;
    top: auto;
    bottom: -49px;
    transform: none;
    z-index: 9;
  }

  .voiseSlick .slick-next:before {
    content: '';
    display: block;
    width: 10px;
    height: 12px;
    background: #000000;
    opacity: 1;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
  }

  .voiseSlick .slick-prev {
    left: 35%;
    top: auto;
    bottom: -49px;
    transform: none;
    z-index: 9;
  }

  .voiseSlick .slick-prev:before {
    content: '';
    display: block;
    width: 10px;
    height: 12px;
    background: #000000;
    opacity: 1;
    clip-path: polygon(0 50%, 100% 100%, 100% 0);
  }

  .lodeing p {
    font-size: 3rem;
  }

  .join__section .join__top__element {
    position: relative;
  }

  .join__section .join__top__element p {
    margin-bottom: 35px;
    font-size: 2.4rem;
    letter-spacing: 0.2rem;
  }

  .join__section .join__top__element p span {
    font-size: 4rem;
  }

  .join__section .join__top__element .week {
    position: absolute;
    bottom: 11px;
    right: 140px;
    font-size: 1.8rem;
  }

  .join__section .join__top__element .join__top__small {
    margin-top: 12px;
    padding: 7px 10px;
    font-size: 1.4rem;
  }

  .join__section .join__top__element time {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 2.2rem;
  }

  .join__section .join__top__element time span {
    font-size: 3.2rem;
  }

}





.waySP {
  display: none !important;
}

.teacherSP {
  display: none;
}

@media (max-width: 600px) {

  .top__text {
    margin-top: -120px;
  }

  .top .wapper img {
    height: calc(100% - 150px);
    width: 95%;
  }

  .lodeing p {
    font-size: 2.6rem;
  }

  .waySP {
    display: flex !important;
  }

  .wayPC {
    display: none !important;
  }

  .slider .slider__item {
    height: 475px;
  }

  .slider .slider__item__image img {
    height: 225px;
    object-fit: cover;
  }

  .course__text h2,
  .flow .wapper .scrollLine,
  .skill h2,
  .way h2,
  .join2__contents h2,
  .teacher h2,
  .flowonly h2,
  .judge__title h2,
  .plan h2,
  .plan__contents__mainprice span,
  .voise__title h2,
  .faq h2 {
    font-size: 4.4rem;
  }
  .about__contents h2{
    padding: .04em .30em;
    line-height: 1.02;
    border-radius: 6px;
  }

  table {
    width: 600px;
  }

  .about__contents {
    margin-top: -20px;
  }

  .flow__subtitle {
    font-size: 1.4rem;
  }

  .flow__black p {
    font-size: 1.4rem;
    width: 150px;
  }

  .flow__black {
    margin-bottom: 25px;
  }

  .flow__text {
    font-size: 1.4rem;
  }

  .flow .wapper {
    padding: 75px 0;
  }

  .skill__subtitle {
    font-size: 1.4rem;
  }

  .skill__ul__li h3 {
    font-size: 1.8rem;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .skill__ul {
    gap: 25px;
  }

  .skill__ul__li {
    width: calc(100% / 2 - 12.5px);
  }

  .skill__link__sp {
    font-size: 1.4rem;
  }

  .skill__ul__li p {
    font-size: 1.4rem;
  }

  .skill__bottomText {
    font-size: 1.6rem;
    line-height: 1.8;
  }

  .skill__bottomText-strong {
    font-size: 2rem;
  }

  .section__line .wapper img {
    height: 150px;
  }

  .triangle-area {
    height: 50px;
  }

  .section__line {
    margin-top: -49px;
    height: 575px;
  }

  .section__line__content h2 small {
    font-size: 2rem;
  }

  .section__line__content h2 strong {
    font-size: 3rem;
  }

  .section__line__content p {
    font-size: 1.6rem;
  }

  .section__line__content p span {
    font-size: 2rem;
  }

  .way__text {
    font-size: 1.4rem;
    margin-bottom: 50px;
  }

  .way__contens__ul__li strong {
    font-size: 8rem;
  }

  .way__contens__ul__li h3 {
    gap: 0;
  }

  .way__contens__ul__li h3 p {
    font-size: 2.4rem;
  }

  .way__contens__ul__li p {
    font-size: 1.4rem;
  }

  .howto {
    padding: 75px 0;
  }

  .howto__title {
    font-size: 2rem;
  }

  .howto__title span {
    font-size: 3rem;
  }

  .join__topText {
    font-size: 1.7rem;
  }

  .teacher {
    padding: 75px 0;
  }

  .teacher .wapper div {
    width: 100%;
  }

  .teacher .wapper div:last-of-type {
    display: none;
  }

  .teacher small {
    font-size: 1.4rem;
  }

  .teacher h3 {
    font-size: 2.6rem;
    text-align: center;
  }

  .teacher p {
    font-size: 1.4rem;
  }

  .teacherSP {
    display: block !important;
    width: 65% !important;
    margin: 0 auto 10px;
  }

  .flowonly {
    padding: 75px 0;
  }

  .flowonly ul li p {
    font-size: 1.4rem;
  }

  .judge {
    padding: 75px 0;
  }

  .judge__title__right small {
    font-size: 1.4rem;
  }

  .judge__title__right strong {
    font-size: 2.4rem;
  }

  .judge__title {
    margin-bottom: 50px;
  }

  .sticy {
    font-size: 1.4rem;
  }

  table tbody tr td strong {
    font-size: 1.6rem;
  }

  table tbody tr td p {
    font-size: 1.2rem;
  }

  table tbody tr td small {
    font-size: 1.4rem;
  }

  table tbody tr .maintitle {
    text-align: center;
    height: 50px;
    margin-bottom: 20px;
  }

  .whiteline {
    font-size: 2.8rem;
  }

  table tbody tr td i {
    font-size: 2.8rem;
  }

  table tbody tr td {
    width: 30%;
  }

  .period1,
  .period2,
  .period3 {
    font-size: 1.5rem;
  }

  .period1 span,
  .period2 span,
  .period3 span {
    font-size: 1.8rem;
  }

  table tbody tr .plice1,
  table tbody tr .plice2,
  table tbody tr .plice3 {
    font-size: 1.5rem;
    margin: 0;
  }

  table tbody tr .plice1 span,
  table tbody tr .plice2 span,
  table tbody tr .plice3 span {
    font-size: 1.8rem;
  }

  table tbody tr:nth-child(8) td {
    vertical-align: middle;
  }

  .plan {
    padding: 75px 0;
  }

  .title__text {
    font-size: 1.4rem;
  }

  .plan__subtext {
    font-size: 1.2rem;
  }

  .plan__contents__maintext {
    font-size: 2rem;
    padding: 5px 0;
  }

  .plan__contents__mainprice span {
    font-size: 6rem;
  }

  .plan__contents__subtext {
    font-size: 1.4rem;
  }

  .plan__contents ul {
    display: block;
  }

  .plan__contents ul li,
  .plan__contents ul li:nth-child(even) {
    width: 270px;
    margin: 0 auto;
    font-size: 1.4rem;
  }

  .plan__bottomtext-strong {
    font-size: 2.4rem;
  }

  .plan__bottomtext-strong span {
    font-size: 3.5rem;
  }

  .plan__bottomtext-small {
    font-size: 1.5rem;
  }

  .voise {
    padding: 75px 0;
  }

  .voise__title p {
    font-size: 1.4rem;
    margin: 0;
  }

  .faq {
    padding: 75px 0;
  }

  .faq .faq__text {
    font-size: 1.4rem;
    margin-bottom: 50px;
  }

  .accordion-header {
    align-items: center;
  }

  .voise__ul__li__strongtext {
    font-size: 1.6rem;
  }

  .voise__ul__li__text {
    font-size: 1.4rem;
  }

  .voiseSlick .voise__ul__li {
    margin: 0 2.5vw;
    min-height: 600px;
  }

  .voiseSlick .slick-dots {
    bottom: -50px;
  }

  .voiseSlick .slick-dots li button:before {
    font-size: 1.25rem;
  }

  .voiseSlick .slick-dots li button:before {
    color: #D9D9D9;
  }

  .voiseSlick .slick-dots li.slick-active button:before {
    color: #FFE000;
  }

  .voiseSlick .slick-next {
    right: 27%;
    top: auto;
    bottom: -49px;
    transform: none;
    z-index: 9;
  }

  .voiseSlick .slick-next:before {
    content: '';
    display: block;
    width: 16px;
    height: 18px;
    background: #000000;
    opacity: 1;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
  }

  .voiseSlick .slick-prev {
    left: 27%;
    top: auto;
    bottom: -49px;
    transform: none;
    z-index: 9;
  }

  .voiseSlick .slick-prev:before {
    content: '';
    display: block;
    width: 16px;
    height: 18px;
    background: #000000;
    opacity: 1;
    clip-path: polygon(0 50%, 100% 100%, 100% 0);
  }

  .accordion-header {
    font-size: 1.6rem;
    line-height: 1.25;
  }

  .accordion-header::before,
  .accordion-header::after {
    top: 45px;
  }

  .slider .slick-dots li button::after {
    width: 12.5px;
    height: 12.5px;
    bottom: -24px;
  }

  .slider .slick-prev:before,
  .slider .slick-next:before {
    width: 16px;
    height: 18px;
  }

  .voiseWapper {
    width: 100%;
  }

  .voise__title {
    width: 90%;
    margin: 0 auto 50px;
  }

  .slider .slick-prev,
  .slider .slick-next {
    bottom: -60px;
  }

  .slider .slick-next {
    right: 20%;
  }

  .slider .slick-prev {
    left: 20%;
    right: auto;
  }

  .slider .slick-dots li button::after {
    left: 30%;
    bottom: -567px;
  }

  .slider .slick-dots li:nth-child(2) button::after {
    left: 42%;
  }

  .slider .slick-dots li:nth-child(3) button::after {
    left: 54%;
  }

  .slider .slick-dots li:nth-child(4) button::after {
    left: 66%;
  }

  .join__top__element {
    gap: 10px;
  }

  .join__top__element small {
    font-size: 1.2rem;
    margin-top: 5px;
  }

  .join__top__element p {
    font-size: 1.4rem;
    transform: translateY(3px);
  }

  .join__top__element p span {
    font-size: 1.8rem;
  }

  .week {
    font-size: 1.4rem;
    margin-bottom: -10px;
    margin-right: -2px;
  }

  .join__top__element time {
    font-size: 1.4rem;
  }

  .join__top__element time span {
    font-size: 1.6rem;
  }

  .join__top__element time {
    transform: translateY(3.5px);
  }
}

/* ─── 特典動画タイトルを改行させない ─── */
.section__line__content h2 strong {
  white-space: nowrap;
}

@media (max-width: 375px) {
  .top__text h2 {
    font-size: 6vw;
  }
}

@media (max-width: 374px) {

  .bottomFixd small,
  .bottomFixd h2 {
    font-size: 1.2rem;
  }

  .bottomFixd p {
    font-size: 1.4rem;
  }

  .bottomFixd span {
    font-size: 2.2rem;
  }

  .bottomFixd .join__top__element time {
    font-size: 1.4rem;
  }

  .bottomFixd .join__top__element time span {
    font-size: 2rem;
  }

  .bottomFixd .join__top__element time i {
    font-size: 1.8rem;
  }

  .bottomFixd .link {
    padding: 10px 20px;
  }

  .top {
    height: calc(100vh - 180px);
    margin: 80px 0 80px;
  }

  .voiseSlick .voise__ul__li {
    min-height: 650px;
  }

  .section2 .sp p {
    font-size: 2.4rem;
  }

  .slider .slider__item {
    height: 500px;
  }

  .slider .slick-dots li button::after {
    bottom: -580px;
  }

  .slider .slick-dots li button {
    font-size: 1.2rem;
  }

  .slider .slider__item__image h3 {
    font-size: 1.3rem;
  }

  .course__text h2,
  .flow .wapper .scrollLine,
  .skill h2,
  .way h2,
  .join2__contents h2,
  .teacher h2,
  .flowonly h2,
  .judge__title h2,
  .plan h2,
  .plan__contents__mainprice span,
  .voise__title h2,
  .faq h2 {
    font-size: 3rem;
  }

  .join__top h2 {
    font-size: 4rem;
  }

  .flow__black p {
    font-size: 1.3rem;
    width: 125px;
  }

  .section__line__content h2 strong {
    font-size: 2.2rem;
  }

  .way__contens__ul__li h3 p {
    font-size: 1.8rem;
  }

  .howto__title {
    font-size: 1.6rem;
  }

  .howto__title span {
    font-size: 2.4rem;
  }

  .howto__ul__li__title {
    font-size: 2rem;
  }

  .join__topText {
    font-size: 1.4rem;
  }

  .join__topText small {
    font-size: 1.2rem;
  }

  .plan__contents__mainprice span {
    font-size: 5rem;
  }

  .join__bottom .mainlink {
    transform: none;
    padding: 5px 30px;
  }

  .skill__ul__li h3 {
    font-size: 1.6rem;
  }

  .skill__ul__li img {
    height: 80px;
  }

  .skill__link__sp {
    font-size: 1.1rem;
  }

  .skill__bottomText-strong {
    font-size: 1.8rem;
  }

  .section__line__content p {
    font-size: 1.1rem;
  }

  .flowonly h3 {
    font-size: 1.6rem;
  }

  .flowonly ul li p {
    font-size: 1.2rem;
  }

  .plan__contents__mainprice {
    font-size: 3.5rem;
  }

  .plan__contents__subprice span {
    font-size: 3.8rem;
  }

  .plan__contents__smallprice span {
    font-size: 2.8rem;
  }

  .plan__contents__smallprice {
    font-size: 1.8rem;
  }

  .plan__bottomtext-strong {
    font-size: 2rem;
  }

  .plan__bottomtext-strong span {
    font-size: 2.8rem;
  }

  .plan__bottomtext-small {
    font-size: 1.3rem;
  }

  .plan__bottomtext-small span {
    font-size: 1.9rem;
  }

}



.join-container {
  text-align: center;
  color: #FFFFFF; /* テキストを白に */
  margin-bottom: 12px; /* 下部余白 */
}

.join__date-line {
  display: flex;
  flex-direction: column; /* 日程を縦に積む */
  align-items: center;
  gap: 4px;
  margin-bottom: 12px; /* 下部余白 */
}

.join__term {
  background: #FFF500;
  color: #000000;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 1.6rem; /* 少し小さめ */
  line-height: 1;
}

.join__date {
  font-size: 3.2rem; /* 日付を大きく */
  font-weight: 900;
}

.join__weekly-line {
  font-size: 2.4rem; /* 曜日と時間を中サイズ */
  font-weight: 600;
}

/* 下部固定CTA のスケジュールも合わせる */
.bottomFixd .join-container {
  color: #FFFFFF;
}

.bottomFixd .join__date-line {
  margin-bottom: 0; /* ボトムCTAでは余白不要 */
}
.bottomFixd .join__date {
  font-size: 2.8rem;
}
.bottomFixd .join__weekly-line {
  font-size: 2rem;
}

@media (max-width: 1024px) {
  .join__date {
    font-size: 3.2rem; /* match desktop */
  }
  .join__weekly-line {
    font-size: 2.4rem; /* match desktop */
  }
  /* スマホでも「完全解説！」を1.8remで統一 */
  .section__line__content p {
    font-size: 1.8rem !important;
  }
  .section__line__content p span {
    font-size: 1.8rem !important;
  }
}

/* ─── JOIN US! のスケジュール表示 ─── */
.join.join__section .join__top {
  flex-direction: column; /* 横並びから縦積み */
  gap: 4px; /* JOIN US! と日程の間隔 */
}

/* Desktop: show schedule on one line */
@media screen and (min-width: 768px) {
  .join__date-line {
    flex-direction: row !important;
    gap: 12px !important;
  }
  .join__term,
  .join__date,
  .join__weekly-line {
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
  }
}
/* ─── JOIN US! 日程文字を全端末で白に固定 ─── */
.join.join__section .join-container,
.join.join__section .join__date-line,
.join.join__section .join__date,
.join.join__section .join__weekly-line {
  color: #FFFFFF !important;
}
.judge td .maintitle {
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.5;
}

.judge td .wapper p {
  font-size: clamp(13px, 1.6vw, 16px);
  line-height: 1.8;
}

/* スマホはさらに少し小さめに */
@media (max-width: 768px) {
  .judge td .maintitle { font-size: 16px; }
  .judge td .wapper p { font-size: 14px; }
}
/* ===== Feature headline & bullets (standalone .maintitle in .wapper) ===== */
/* Standalone headline used above JOIN area — keep it compact */
/* Standalone headline used above JOIN area — keep it compact */
.wapper > .maintitle {
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.35;
  font-weight: 900;
  font-style: italic;
  display: inline;
  background: none;
  padding: 0;
  border-radius: 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Remove highlight and add underline for .maintitle strong */
/* Update: .maintitle strong headline emphasis */
.maintitle strong {
  background: none;
  font-size: 1.8rem; /* slightly larger than previous 1.6rem */
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}
/* The first paragraph just after that headline (the bullet lines) */
/* The first paragraph just after that headline (the bullet lines) */
/* Feature bullets: smaller, lighter than headline */
.wapper > .maintitle + p,
.wapper > .maintitle + p + p,
.wapper > .maintitle + p + p + p,
.wapper > .maintitle + p + p + p + p {
  font-size: clamp(12px, 1.1vw, 14px);
  line-height: 1.7;
  font-weight: 500;
  margin-top: 10px;
}
/* Make emphasized parts bold without enlarging */
.wapper p strong,
.wapper p b {
  font-size: inherit;
  font-weight: 700;
}
@media (max-width: 1024px) {
  .wapper > .maintitle {
    font-size: clamp(18px, 5.2vw, 24px);
    line-height: 1.35;
    padding: 0;
    border-radius: 0;
  }
  .wapper > .maintitle + p,
  .wapper > .maintitle + p + p,
  .wapper > .maintitle + p + p + p,
  .wapper > .maintitle + p + p + p + p {
    font-size: 13px;
    line-height: 1.7;
  }
  .maintitle strong {
    font-size: 1.4rem;
  }
}
/* ===============================
   HERO (TOP) responsive fixes
   - Reduce headline size on tablet & mobile
   - Give image more height so text doesn't collide
   - Tighten white-label padding
   =============================== */

/* Tablet (<=1024px) */
@media (max-width: 1024px) {
  /* Make the hero image a bit taller so the headline has room */
  .top .wapper img {
    height: min(60vh, calc(100vh - 420px)) !important;
  }
  /* Headline: smaller, tighter, stay inside the image */
  .top__text h2 {
    font-size: clamp(28px, 6.0vw, 48px) !important;
    line-height: 1.15 !important;
    bottom: 240px !important;
  }
  .top__text h2 .topLine {
    padding-right: 4px !important;
  }
}

/* Mobile (<=767px) */
@media (max-width: 767px) {
  /* Ensure overall hero height doesn't force overlap */
  .top {
    height: auto !important;
    margin: 80px 0 40px !important;
  }
  .top .wapper {
    height: auto !important;
  }
  .top .wapper img {
    height: min(55vh, calc(100vh - 300px)) !important;
  }
  /* Headline smaller & tighter; keep within image area */
  .top__text {
    position: relative !important;
  }
  .top__text h2 {
    position: absolute !important;
    right: 0 !important;
    bottom: 200px !important;
    font-size: clamp(20px, 7.2vw, 34px) !important;
    line-height: 1.12 !important;
    margin-bottom: 0 !important;
    text-align: right !important;
  }
  .top__text h2 .topLine {
    padding-right: 3px !important;
  }
  /* Sub points just under the headline — make sure they don't blow up */
  .top__text ul li h3 {
    font-size: 1.2rem !important;
  }
  .top__text ul li p {
    font-size: 1.4rem !important;
    line-height: 1.6 !important;
  }
  /* Tighten the white帯 even more to avoid collision */
  .top__text h2 .topLine { padding-right: 3px !important; }
}

/* Small phones (<=480px) — one more step down to avoid wrap collisions */
@media (max-width: 480px) {
  .top__text h2 {
    bottom: 180px !important;
    font-size: clamp(18px, 8vw, 28px) !important;
  }
}
/* ===============================
   HEROセクション スマホ表示のみ調整
   =============================== */
@media (max-width: 767px) {
  /* HEROセクションの下の空白を広げて、Point1と重ならないように */
  /* 余白を圧縮：黄色の空白を減らす */
  .top {
    margin-bottom: 80px !important;   /* 360px → 80px に縮小 */
    padding-bottom: 0 !important;     /* 追加の下パディングを撤去 */
  }

  /* HERO画像の高さを調整 */
  .top .wapper img {
    height: min(62vh, calc(100vh - 240px)) !important; /* 少し高くして下の空白をさらに削減 */
  }

  /* HEROテキストの位置調整 */
  .top__text {
    bottom: auto !important;
  }

  /* 見出しのフォントサイズをさらに小さく、位置も調整 */
  .top__text h2 {
    font-size: clamp(16px, 6.5vw, 28px) !important;
    line-height: 1.15 !important;
    bottom: 320px !important;
  }
}
.cta-bottom {
  background-color: #000000;
  color: #ffffff;
  padding: 20px 0;
}

.cta-bottom,
.cta-bottom * {
  color: #ffffff;
}

.cta-bottom .btn,
.cta-bottom a.btn {
  background-color: #FFF500;
  color: #000000;
  border: none;
  transition: background-color 0.3s;
}
.cta-bottom .btn:hover,
.cta-bottom a.btn:hover {
  background-color: #FFD800;
}
.wapper > ul:has(> li:nth-child(4)) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;           /* 中央寄せ */
  gap: clamp(24px, 3vw, 50px);       /* カード間の余白 */
  padding-left: 0;                   /* 既定のUL余白を除去 */
  list-style: none;                  /* マーカー非表示 */
}

.wapper > ul:has(> li:nth-child(4)) > li {
  flex: 0 1 clamp(240px, 22%, 320px);/* 等幅&可変幅 */
  max-width: 320px;
}

/* 見出し/本文の整形（任意・安全） */
.wapper > ul:has(> li:nth-child(4)) > li h3 {
  text-align: center;
  margin-bottom: 12px;
}
.wapper > ul:has(> li:nth-child(4)) > li p {
  text-align: left;
  line-height: 1.9;
}

/* スマホは1〜2列に折返し、引き続き中央寄せ */
@media (max-width: 767px) {
  .wapper > ul:has(> li:nth-child(4)) {
    gap: 20px;
  }
  .wapper > ul:has(> li:nth-child(4)) > li {
    flex-basis: clamp(260px, 46%, 480px); /* 2列（画面幅に応じて1列） */
  }
}
.cta-area .cta-btn img,
.cta-area .cta-icon img {
  filter: brightness(0) !important;
}
/* === Normalize: slide #2 uses the same single <h3> as other slides === */
@media (min-width: 768px) {
  .slider .slider__item:nth-child(2) .slider__item__image h3 {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .slider .slider__item:nth-child(2) .slider__item__image h3 {
    display: block !important;
  }
}
/* === Fix: adjust top caption position for mobile to avoid overlapping with Point1 === */
@media (max-width: 767px) {
  .mainvisual__catch {
    margin-top: -10vw !important;  /* lift it upward */
  }
}
/* === TEACHER: move right photo down to align with left text === */
@media (min-width: 1024px) {
  .teacher .wapper div:last-of-type {
    margin-top: 90px; /* adjust as needed to match the red box */
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .teacher .wapper div:last-of-type {
    margin-top: 70px; /* tablet tweak */
  }
}/* ========== 案件保証オプションセクション ========== */

:root {
  /* LP全体の黄色に統一 */
  --syuni-yellow: #FFF500;
}

.guarantee-section {
  background-color: #000000; /* 黒背景 */
  color: #FFFFFF;           /* 白文字 */
  padding: 80px 20px;       /* セクション余白 */
  text-align: center;
}

.guarantee-container {
  max-width: 800px; /* 内容の最大幅 */
  margin: 0 auto;
}

/* 見出しサイズは他セクション(howto__title等=3rem)に合わせる */
.guarantee-title {
  font-size: 3rem;          /* 3rem に統一 */
  font-weight: 900;         /* 他の見出しに合わせて太字 */
  color: var(--syuni-yellow);
  line-height: 1.4;
  margin-bottom: 25px;
}

.guarantee-title-sub {
  display: block;
  font-size: 2rem;          /* small見出しは 2rem */
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 10px;
}

/* 本文は他セクションの標準文(1.8rem/1.8/500)に合わせる */
.guarantee-description {
  font-size: 1.8rem;
  line-height: 1.8;
  font-weight: 500;
  margin-bottom: 40px;
}

/* 強調文字 (黄色) */
.highlight {
  color: var(--syuni-yellow);
  font-weight: 700;
}

/* ========== 卒業後サポート カードレイアウト ========== */
.guarantee-cards {
  display: flex;
  gap: 30px;
  justify-content: center;
  margin-top: 40px;
}

.guarantee-card {
  flex: 1;
  max-width: 280px;
  background-color: #1a1a1a;
  border: 2px solid var(--syuni-yellow);
  border-radius: 12px;
  padding: 30px 24px;
  text-align: center;
}

.guarantee-card__number {
  display: block;
  font-size: 3.2rem;
  font-weight: 900;
  color: var(--syuni-yellow);
  margin-bottom: 12px;
  font-family: var(--en);
}

.guarantee-card__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--syuni-yellow);
  margin-bottom: 16px;
  line-height: 1.4;
}

.guarantee-card__text {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.8;
  color: #FFFFFF;
  text-align: left;
}

/* --- レスポンシブ --- */
@media (max-width: 1024px) {
  .guarantee-title { font-size: 2.8rem; }
  .guarantee-title-sub { font-size: 1.8rem; }
  .guarantee-cards {
    gap: 20px;
  }
  .guarantee-card {
    padding: 24px 20px;
  }
  .guarantee-card__title {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .guarantee-section { padding: 60px 16px; }
  .guarantee-title { font-size: 2.4rem; }
  .guarantee-title-sub { font-size: 1.6rem; }
  .guarantee-description { font-size: 1.4rem; line-height: 1.7; }
  .guarantee-cards {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .guarantee-card {
    max-width: 100%;
    width: 100%;
  }
  .guarantee-card__number {
    font-size: 2.8rem;
  }
  .guarantee-card__title {
    font-size: 1.6rem;
  }
  .guarantee-card__text {
    font-size: 1.4rem;
  }
}