/* ==================================================
 * Fluid Scaling Setup — SP専用 2ゾーン
 *   $SP_DESIGN = 390
 *   500px以上は固定幅（directly02方式）
 * ================================================== */

html {
  font-size: calc(100vw * 10 / 390);
  font-feature-settings: 'pwid' on, 'palt' on;
}

@media screen and (min-width: 500px) {
  html {
    font-size: calc(500px * 10 / 390);
  }
}

/* ==================================================
 * Base
 * ================================================== */
body {
  font-family: var(--font-jp);
  color: var(--color-text);
  background: var(--color-bg-alt);
  line-height: 1;
  font-weight: 400;
}

main {
  overflow: hidden;
}

span {
  display: inline-block;
}

picture {
  display: block;
}

img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

@media screen and (min-width: 500px) {
  .hover-nomal {
    transition: opacity .5s 0s cubic-bezier(.44,.14,.09,1.02);
  }
  .hover-nomal:hover {
    opacity: .7;
  }
}

/* ==================================================
 * Layout
 * ================================================== */
main {
  max-width: 500px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--color-bg);
}

.l-section {
  padding: 6rem 2rem;
}

/* ==================================================
 * Utilities (.u-)
 * ================================================== */
.u-en {
  font-family: var(--font-en);
}

.u-color-blue {
  color: var(--color-main);
}

.u-center {
  text-align: center;
}

.u-accent {
  color: var(--color-accent);
}

/* ==================================================
 * Common Components (.c-)
 * ================================================== */

/* ========== .c-head ========== */
.c-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .8rem;
  position: relative;
  z-index: 2;
}
.c-head__en {
  font-size: 2.2rem;
  font-weight: 600;
}
.c-head__ja {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .02em;
  transform: translate(0, -.2rem);
}

/* --large: Class, Teacher, Access, Students Voice */
.c-head.--large .c-head__en {
  font-size: 4.2rem;
}
.c-head.--large .c-head__ja {
  transform: translate(0, -.4rem);
}

/* ==================================================
 * Sections (.p-)
 * ================================================== */

/* ========== .p-mv ========== */
.p-mv {
  position: relative;
  background: var(--color-bg-alt);
}

/* ========== .p-sv ========== */
.p-sv {
  background: var(--color-bg-alt);
  padding: 3.6rem 2rem 5rem;
  position: relative;
  overflow: hidden;
}
.p-sv__lead {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 2.1;
  letter-spacing: .03em;
}
.p-sv__img {
  position: absolute;
  width: 43.5rem;
  top: 2.4rem;
  left: calc(50% - .1rem);
  transform: translate(-50%, 0);
}
.p-sv__ttl {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
  margin-top: 24.2rem;
}
.p-sv__txt {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8;
  margin-top: 2.3rem;
}

/* ========== .p-about ========== */
.p-about {
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}
.p-about::before {
  background: url('../img/about-deco.webp') no-repeat center center/contain;
  content: '';
  height: 26rem;
  right: -3.9rem;
  position: absolute;
  top: 3.1rem;
  width: 26rem;
}
.p-about__ttl {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.7;
  margin-top: 3rem;
  position: relative;
  z-index: 2;
}
.p-about__slide--wrapper {
  position: relative;
  width: calc(100% + 4rem);
  left: -2rem;
  margin-top: 2rem;
  overflow: hidden;
}
.p-about__slide {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.p-about__slide--inner {
  display: flex;
  gap: .4rem;
  width: max-content;
}
.p-about__slide--inner:nth-child(1) {
  animation: aboutSlideLeft 60s linear infinite;
}
.p-about__slide--inner:nth-child(2) {
  animation: aboutSlideRight 60s linear infinite;
}
.p-about__slide--img {
  width: 95rem;
  min-width: 95rem;
}

@keyframes aboutSlideLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-95rem - .4rem)); }
}
@keyframes aboutSlideRight {
  from { transform: translateX(calc(-95rem - .4rem)); }
  to   { transform: translateX(0); }
}
.p-about__txt {
  margin-top: 1.6rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .02em;
  position: relative;
  z-index: 2;
}

/* ========== .p-philosophy ========== */
.p-philosophy {
  position: relative;
  padding-bottom: 0;
}
.p-philosophy::before {
  background: url('../img/philosophy-deco.webp') no-repeat center center/contain;
  content: '';
  height: 26.7rem;
  left: -10.8rem;
  position: absolute;
  top: -3rem;
  width: 26.7rem;
}
.p-philosophy::after {
  background-color: var(--color-border);
  content: '';
  height: .1rem;
  left: 2rem;
  position: absolute;
  top: 0;
  width: calc(100% - 4rem);
}
.p-philosophy__lead {
  margin-top: 3rem;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.7;
  position: relative;
  z-index: 2;
}
.p-philosophy__txt {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .02em;
  margin-top: 2rem;
  position: relative;
  z-index: 2;
}
.p-philosophy__img {
  margin-top: 3rem;
  overflow: hidden;
  position: relative;
  z-index: 2;
  width: calc(100% + 4rem);
  left: -2rem;
}

/* ========== .p-feature ========== */
.p-feature {
  background: var(--color-bg-alt);
  position: relative;
  overflow: hidden;
}
.p-feature::before {
  background: url('../img/features-deco.webp') no-repeat center center/contain;
  content: '';
  height: 27rem;
  right: -7.2rem;
  position: absolute;
  top: -1.7rem;
  width: 27rem;
}
.p-feature__lead {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.7;
  margin-top: 3rem;
  position: relative;
  z-index: 2;
}
.p-feature__list {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  position: relative;
  z-index: 2;
}
.p-feature__item--txts {
  position: relative;
  margin-top: 1.4rem;
  padding: 0 2rem 0 5.8rem;
}
.p-feature__item--txts-num {
  position: absolute;
  top: .5rem;
  left: 2rem;
  line-height: 1.4;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
}
.p-feature__item--txts-ttl {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.7;
}
.p-feature__item--txts-txt {
  margin-top: .8rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

/* ========== .p-class ========== */
.p-class {
  background: var(--color-bg-alt);
  padding-bottom: 5rem;
  position: relative;
}
.p-class::before {
  background-color: var(--color-border);
  content: '';
  height: .1rem;
  left: 2rem;
  position: absolute;
  top: 0;
  width: calc(100% - 4rem);
}
.p-class__intro {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .02em;
  margin-top: 2.3rem;
}
.p-class__block {
  background: var(--color-bg);
  border-radius: 2rem;
  overflow: hidden;
  margin-top: 2.5rem;
}
.p-class__block.--02 {
  margin-top: 2rem;
}
.p-class__block--header {
  padding: 1.1rem 1rem;
  font-size: 2rem;
  line-height: 1.7;
  font-weight: 700;
  color: var(--color-text-inverse);
  text-align: center;
}
.p-class__block--header.--green {
  background: var(--color-green);
}
.p-class__block--header.--blue {
  background: var(--color-main);
}
.p-class__block--body {
  padding-bottom: 1rem;
}
.p-class__row {
  padding: 2rem;
  border-bottom: .1rem dashed var(--color-border);
}
.p-class__row.--last {
  border-bottom: none;
}
.p-class__row--grade {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
  position: relative;
}
.p-class__row--grade::before {
  background-color: var(--color-green);
  content: '';
  height: 2.2rem;
  left: -2rem;
  position: absolute;
  top: .4rem;
  width: .5rem;
}
.p-class__block.--02 .p-class__row--grade::before {
  background-color: var(--color-main);
}
.p-class__row--time {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8;
  margin-top: .5rem;
  letter-spacing: .02em;
}
.p-class__row--price {
  margin-top: .6rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.p-class__row--price-ja {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .02em;
  transform: translate(0, -.3rem);
}
.p-class__row--price-num {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--color-accent);
}
.p-class__row--note {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .02em;
  margin-top: 1.1rem;
}
.p-class__row--note.--01 {
  margin-top: .5rem;
}
.p-class__row--highlight {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  margin-top: .8rem;
}
.p-class__row--highlight span {
  padding: 0 .6rem .1rem;
  background-color: #FFE15D;
}
.p-class__note {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.8;
  margin-top: 1.2rem;
  letter-spacing: .02em;
}
.p-class__cta {
  margin-top: 2rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .02em;
  text-align: center;
}
.p-class__cta span {
  color: var(--color-accent);
}

/* ========== .p-voice ========== */
.p-voice {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
  padding-bottom: 5rem;
}
.p-voice::before {
  background: url('../img/voice-deco.webp') no-repeat center center/contain;
  content: '';
  height: 26rem;
  right: -2rem;
  position: absolute;
  top: -2.5rem;
  width: 26rem;
}
.p-voice .c-head__en {
  color: var(--color-text-inverse);
  font-size: 3.8rem !important;
}
.p-voice .c-head__ja {
  color: var(--color-text-inverse);
  transform: translate(0, 0) !important;
}
.p-voice__list--wrapper {
  position: relative;
  z-index: 2;
  margin-top: 3.4rem;
  overflow-x: scroll;
  overflow-y: visible;
  -ms-overflow-style: none;
  scrollbar-width: none;
  width: calc(100% + 4rem);
  left: -2rem;
}
.p-voice__list--wrapper::-webkit-scrollbar {
  display: none;
}
.p-voice__list--inner {
  padding: 0 2rem;
  width: auto;
}
.p-voice__list {
  display: flex;
  gap: 1.5rem;
}
.p-voice__list::after {
  content: '';
  flex: 0 0 2rem;
}
.p-voice__card {
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 2rem;
  padding: 2rem 2rem 7.8rem;
  position: relative;
  width: 30.4rem;
  min-width: 30.4rem;
}
.p-voice__card--header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.p-voice__card--num {
  font-size: 4.8rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-accent);
}
.p-voice__card--name {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
}
.p-voice__card--school {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
}
.p-voice__card--txts {
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: var(--color-border) dashed .1rem;
}
.p-voice__card--txt {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .02em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  overflow: hidden;
}
.p-voice__card--more {
  position: absolute;
  width: 10.1rem;
  height: 3.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
  border-radius: .6rem;
  background: #E7E7E7;
  padding-bottom: .2rem;
  bottom: 2.5rem;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.p-voice__after {
  margin-top: 4.5rem;
}
.p-voice__after--label {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .02em;
}
.p-voice__after--txt {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8;
}

/* ========== .p-teacher ========== */
.p-teacher {
  background: var(--color-bg-alt);
  position: relative;
  overflow: hidden;
}
.p-teacher::before {
  background: url('../img/teacher-deco.webp') no-repeat center center/contain;
  content: '';
  height: 24.6rem;
  left: -3.6rem;
  position: absolute;
  bottom: 0;
  width: 24.6rem;
}
.p-teacher__img {
  margin-top: 3rem;
  width: calc(100% + 4rem);
  left: -2rem;
  position: relative;
}
.p-teacher__name {
  margin-top: 3rem;
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
}
.p-teacher__intro {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .02em;
  margin-top: 2rem;
}
.p-teacher__career {
  position: relative;
  z-index: 2;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: var(--color-border) dashed .1rem;
  display: flex;
  justify-content: space-between;
}
.p-teacher__career--label {
  width: calc(100% - 25.8rem);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1.8;
}
.p-teacher__career--txt {
  width: 25.8rem;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1.8;
}

/* ========== .p-access ========== */
.p-access {
  background: var(--color-bg);
}
.p-access__name {
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: 2.5rem;
  line-height: 1.7;
}
.p-access__info {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .02em;
  margin-top: .6rem;
}
.p-access__map {
  width: 100%;
  height: 24rem;
  margin-top: 2.5rem;
}
.p-access__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ========== .p-cta ========== */
.p-cta {
  background: var(--color-bg-alt);
  padding: 5rem 2rem 3.6rem;
  text-align: center;
}
.p-cta__ttl {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .02em;
}
.p-cta__tel {
  width: 100%;
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border-radius: 2rem;
  height: 7.9rem;
}
.p-cta__tel--label {
  font-size: 2.3rem;
  font-weight: 600;
  transform: translate(0, .2rem);
}
.p-cta__tel--num {
  font-size: 3.2rem;
  font-weight: 600;
}
.p-cta__sub {
  margin-top: 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.55;
}

/* ========== .p-footer ========== */
.p-footer {
  background: var(--color-bg-alt);
  padding: 0 2rem 3rem;
  text-align: center;
}
.p-footer__credit {
  border-top: #2c2c2c solid .1rem;
  padding-top: 1.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
}
.p-footer__links {
  display: flex;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 1.1rem;
  border-bottom: #2c2c2c solid .1rem;
  padding-bottom: 2.5rem;
}
.p-footer__links a {
  width: calc(50% - .6rem);
  height: 4.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border-radius: .8rem;
  font-size: 1.4rem;
  font-weight: 500;
  position: relative;
}
.p-footer__links a::after {
  content: ">";
  font-size: 1.2rem;
  position: absolute;
  right: 1.3rem;
  top: 50%;
  transform: translate(0, -50%);
}
.p-footer__copy {
  font-size: 1.2rem;
  color: #909090;
  line-height: 1.5;
  margin-top: 20px;
}

/* ========== .p-voiceModal ========== */
.p-voiceModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.p-voiceModal.is-active {
  opacity: 1;
  visibility: visible;
}
.p-voiceModal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
}
.p-voiceModal__body {
  position: relative;
  width: calc(100% - 4rem);
  max-width: 46rem;
  max-height: calc(100vh - 8rem);
  background: var(--color-bg);
  border-radius: 2rem;
  overflow: hidden;
  transform: translateY(2rem);
  transition: transform .3s ease;
}
.p-voiceModal.is-active .p-voiceModal__body {
  transform: translateY(0);
}
.p-voiceModal__close {
  margin-top: 2rem;
  width: 10.1rem;
  height: 3.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
  border-radius: .6rem;
  background: #E7E7E7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}
.p-voiceModal__inner {
  padding: 3rem 2rem;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.p-voiceModal__header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.p-voiceModal__num {
  font-size: 4.8rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-accent);
}
.p-voiceModal__name {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
}
.p-voiceModal__school {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
}
.p-voiceModal__img {
  display: none;
  margin-bottom: 1.8rem;
  border-radius: .5rem;
  overflow: hidden;
}
.p-voiceModal__img.is-active {
  display: block;
}
.p-voiceModal__txts {
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: var(--color-border) dashed .1rem;
}
.p-voiceModal__txt {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .02em;
}