@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&display=swap);
/*---------------------------------------
   基本設定
---------------------------------------*/
body {
  font-size: 1.4rem;
}

/*---------------------------------------
   装飾
---------------------------------------*/
.show--sp {
  display: block !important;
}

.ttl--lg {
  font-size: 2.4rem;
  margin-bottom: 2rem;
}

.ttl--bubble {
  height: 4.5rem;
  top: -2.3rem;
  padding: 0 1em;
}

.lead {
  font-size: 1.4rem;
  text-align: left;
  padding-bottom: 2rem;
}

/*---------------------------------------
   レイアウト
---------------------------------------*/
#coordination,
#cost,
#venue {
  padding-top: 10rem;
  margin-top: -10rem;
}

#instructor,
#trial,
#contact {
  padding-top: 5rem;
  margin-top: -5rem;
}

.container {
  padding: 0 1.5rem;
}

/*---------------------------------------
   ヘッダー
---------------------------------------*/
.header {
  height: 5rem;
}

.header__logo {
  font-size: 1.4rem;
  max-width: 60%;
}

.btn {
  width: 100%;
}

/*---------------------------------------
   MV
---------------------------------------*/
.mv {
  background-image: url(../img/mv-sp.png);
}

.mv__catch {
  top: 4%;
  right: 50%;
  max-width: 90%;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}

.mv__banner-area {
  margin-left: auto;
  margin-right: auto;
  border-radius: 0;
  gap: 2rem;
  padding: 0rem 1.5rem 5rem;
}

/*---------------------------------------
   入会特典
---------------------------------------*/
.benefits__list {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 3rem;
}

/*---------------------------------------
   スクールの特徴
---------------------------------------*/
.features__bg {
  padding-top: 3rem;
  padding-bottom: 25rem;
}
.features__bg::after {
  border-top: 4rem solid transparent;
  border-bottom: 4rem solid #F5F5F5;
}

@media only screen and (max-width: 480px) {
  .features-lead__img img {
    width: 155%;
    right: -10%;
    max-width: unset;
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }
}
.features-lead__txt {
  padding: 0 1.5rem 3rem;
  background-color: rgba(255, 255, 255, 0.7);
  width: 100%;
}

.features__heading {
  font-size: 2.2rem;
  color: #D0241B;
  line-height: 1;
  margin-bottom: 1.5rem;
}

.features__item:nth-child(even) .features__inner {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.features__inner {
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0rem;
}

.features__list {
  gap: 0;
  padding-bottom: 8rem;
}

.features__text {
  max-width: 95%;
  width: 100%;
  padding: 0 1.5rem;
  margin-top: 1.5rem;
}
.features__text::before {
  display: none;
}

.features__img {
  margin: 1.5rem auto;
}
.features__img img {
  border-radius: 1rem;
}

.features__item {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

/*---------------------------------------
   コーディネーション
---------------------------------------*/
.coordination__skill {
  padding-bottom: 5rem;
}

.coordination__skill-item {
  width: calc(50% - 2rem);
}

.coordination__result {
  padding-bottom: 5rem;
}
.coordination__result::after {
  height: 2rem;
}

.coordination__result-exp {
  border-radius: 1rem;
  font-size: 1.6rem;
  padding: 1.5rem;
  max-width: unset;
  margin-top: 20rem;
}
.coordination__result-exp p {
  width: 100%;
}
.coordination__result-exp .show--pc {
  display: none !important;
}

.coordination__result-ttl {
  font-size: 2.8vw;
  height: 4rem;
}

.coordination__result-item {
  width: 100%;
  padding: 1.5rem;
  min-height: unset;
  border-radius: 1rem;
}

.coordination__result-exp-img {
  top: -10rem;
  z-index: -1;
}

.trial::after {
  border-top: 5rem solid transparent;
  border-bottom: 5rem solid #F5F5F5;
}

/*---------------------------------------
   初心者のお子様
---------------------------------------*/
.beginer {
  padding: 8rem 0 10rem;
}
.beginer .ttl--bubble img {
  margin-right: 1rem;
}

.beginer__box {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.beginer__img {
  max-width: unset;
  border-radius: 1rem;
}

.beginer__heading {
  font-size: 1.8rem;
  top: -4rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 4rem;
  margin: 0;
}
.beginer__heading::after {
  top: 90%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(30deg);
          transform: translate(-50%, -50%) rotate(30deg);
}

.beginer__text p {
  margin-top: -2rem;
  margin-bottom: 1.5rem;
}

/*---------------------------------------
   費用について
---------------------------------------*/
#cost {
  padding-bottom: 10rem;
}

.cost__table {
  margin: 2rem auto;
}
.cost__table th,
.cost__table td {
  height: 3rem;
}

/*---------------------------------------
   無料体験
---------------------------------------*/
.trial {
  padding: 5rem 0 5rem;
}

.trial__box {
  gap: 1rem 0;
}

.trial__text {
  max-width: 70%;
}

.trial__label {
  margin: 0 auto;
  max-width: 20%;
  height: 100%;
}

/*---------------------------------------
   インストラクター
---------------------------------------*/
.instructor__item {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.instructor__img {
  width: 100%;
  height: 50vh;
  -o-object-position: center 20%;
     object-position: center 20%;
  border-radius: 1rem 1rem 0 0;
}

.instructor__text {
  gap: 0;
  width: 100%;
  height: 20rem;
  border-radius: 0 0 1rem 1rem;
}

.instructor__slider {
  margin: 2rem 0 15rem auto;
}

/*
.right {
    padding-right: unset;
    margin-right: unset !important;
    margin-left: unset !important;
}
/*---------------------------------------
   開催場所
---------------------------------------*/
.venue {
  padding-bottom: 5rem;
}

.venue__container {
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
}

.venue__container--left {
  padding-right: 0;
  border-right: none;
  border-top: solid 4px #D0611C;
  padding-top: 3rem;
}
.venue__container--left img,
.venue__container--left iframe {
  margin: 2rem auto;
  display: block;
  width: 100%;
  height: 20rem;
}
.venue__container--left img {
  -o-object-fit: cover;
     object-fit: cover;
}

.venue__container--right {
  padding-left: 0;
}

.venue__table th {
  white-space: nowrap;
}

.venue__instructor {
  max-width: unset;
  width: 70%;
  border-radius: 100vh;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}

/*---------------------------------------
   お問い合わせ
---------------------------------------*/
.contact {
  padding-bottom: 8rem;
}

.contact__inner {
  padding: 3rem 0;
  border-radius: 1rem;
}

.contact__form {
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 0 1.5rem;
  margin-bottom: 3rem;
}
.contact__form dd {
  margin-bottom: 3rem;
}

.contact-conf .contact__table {
  border-bottom: solid 1px #333333;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  position: relative tr;
  position-overflow: auto;
  position-position: relative;
}
.contact-conf .contact__table th,
.contact-conf .contact__table td {
  display: block;
  width: 100%;
  border-bottom: none;
}
.contact-conf .contact__table tbody th {
  position: sticky;
  left: 0;
  z-index: 3;
}
.contact-conf .contact__table thead th {
  z-index: 5;
}

/*---------------------------------------
   フッター
---------------------------------------*/
.cta {
  max-width: 90vw;
  font-size: 0.75em;
  gap: 2rem;
}

.btn--cta {
  height: 4rem !important;
}
.btn--cta::after {
  width: 2.5em !important;
}