/* -----------------mobile base↓-------------------- */
/* -----------------common↓-------------------- */
body{
  background-color: #000000;
}
img{
  vertical-align: top;
  max-width: 100%;
}
.inspark-school main{
  padding: 0;
  background-color: #000000;
  max-width: 768px;
}
.inspark-school footer{
  padding-bottom: 0;
  margin: 5vw auto;
}
.inspark-school footer>div{
  display: none;
}
.inspark-school footer>a.logo>img{
  margin: 0 auto;
}
.commmon-padding{
  padding: 2vw;
}
.scrollTo-timeRex{
  display: block;
  cursor: pointer;
}
.inspark-school .swiper{
  padding-bottom: 5vw !important;
}
.inspark-school .swiper .swiper-pagination{
  bottom: 1vw;
}
.inspark-school .swiper .swiper-pagination-bullet {
  width: 3.5vw;
  height: 3.5vw;
  background: gray;
  border: 1px solid white;
  opacity: 1;
}
.inspark-school .swiper .swiper-pagination-bullet-active {
  background: #ffffff;
  border: 1px solid gray;
}
.scrollTo-contact{
  display: block;
}
.w90{
  width: 90%;
  margin: auto;
}
/* header */
.inspark-school header{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  background-color: #000000;
  width: 100%;
  z-index: 10;
  height: 20vw;
}
header.header_fiexd+*{
  margin-top: 20vw;
}
.inspark-school header>a{
  display: block;
}
.inspark-school header>a:nth-child(1){
  width: 30vw;
}
.inspark-school header>a:nth-child(2){
  width: 45vw;
}
/* header */

/* inspark_school_movie */
.inspark_school_movie .swiper-slide{
  padding: 2vw;
}
.inspark_school_movie .swiper-slide>video{
  box-shadow: 0 0 0.8vw 0.8vw white;
}
/* inspark_school_movie */

/* inspark_school_voice */
.voice{
  background-color: #ffffff;
}
.inspark_school_voice{
  background-color: #ffffff;
}
.inspark_school_voice .swiper-wrapper{
  align-items: center;
}
.inspark_school_voice .swiper-slide{
  background-color: #ffffff;
  padding: 2vw;
}
/* inspark_school_voice */

/* strehgth */
.strehgth{
  display: flex;
  flex-wrap: wrap;
  gap: 5vw;
}
/* strehgth */

/* FAQ */
.FAQ>dl{
  padding: 0vw 2vw 3vw;
}
.FAQ>dl>dt,
.FAQ>dl>dd{
  background-color: #ffffff;
  position: relative;
  font-size: 4vw;
}
.FAQ>dl>dt::before,
.FAQ>dl>dd::before{
  font-size: 8vw;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 5vw;
  transform: translate(0,-50%);
}
.FAQ>dl>dt::before{
  content: "Q";
  color: #8ac237;
}
.FAQ>dl>dd::before{
  content: "A";
  color: #f83537;
}
.FAQ>dl>dt{
  margin-top: 3vw;
  font-weight: bold;
  padding:2vw 18vw;
  cursor: pointer;
}
.FAQ>dl>dt::after{
  font-family: "Font Awesome 5 Free";
  content: '\f078';
  position: absolute;
  right: 5vw;
  top: 50%;
  transform: translate(0,-50%);
}
.FAQ>dl>dt.on::after{
  content: '\f077';
}
.FAQ>dl>dd{
  display: none;
  padding:2vw 3vw 2vw 20vw;
}
/* FAQ */

/* timeRex */
.timeRex{
  background-color: #ffffff;
}
/* timeRex */

/* contact */
.inspark-school_01 .contact{
  width: calc(100% - 4vw);
  margin: auto;
}
.inspark-school_01 .contact>form>fieldset:first-of-type~p{
  margin-top: 0;
}
.inspark-school_01 .contact>form>p>a{
  color: #ffffff;
}
.inspark-school_01 .contact>form>fieldset:nth-of-type(4)>div{
  display: flex;
  justify-content: space-between;
  font-family: var(--site-font-family-Zen-Kaku-Gothic-Antique);
  font-size: calc(18* var(--site-font-size-ratio));
  font-weight: 500;
  line-height: calc(18* var(--site-font-size-ratio));
  letter-spacing: 0.1em;
}
.inspark-school_01 .contact__div-title{
  color: #ffffff;
  text-align: center;
  font-size: calc(26 * var(--site-font-size-ratio));
  font-weight: 500;
  font-family: var(--site-font-family-Zen-Kaku-Gothic-Antique);
  letter-spacing: 0.1em;
  margin-top: calc(16 * var(--site-font-size-ratio));
  margin-bottom: calc(8 * var(--site-font-size-ratio));
}
.inspark-school_01 .contact>form>fieldset>div>textarea{
  height: calc(140 * var(--site-font-size-ratio));
}
/* contact */

/* -----------------desktop(include ipad)↓-------------------- */
@media screen and (min-width: 768px){
  /* -----------------common↓-------------------- */
  .commmon-padding{
    padding: 20px;
  }
  .inspark-school footer{
    max-width: 100%;
    display: block;
    padding: 0 25px;
    margin: 35px auto;
  }
  .inspark-school footer>a.logo>img{
    margin: 0;
  }
  .inspark-school .swiper{
    padding-bottom: 35px !important;
  }
  .inspark-school .swiper .swiper-pagination{
    bottom: 15px;
  }
  .inspark-school .swiper .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
  }
  /* header */
  .inspark-school header{
    width: 768px;
    padding: 5px;
    height: 80px;
  }
  header.header_fiexd+*{
    margin-top: 80px;
  }
  .inspark-school header>a:nth-child(1) {
    width: 250px;
  }
  .inspark-school header>a:nth-child(2) {
    width: 300px;
  }
  .inspark-school header>a>img{
    width: 60%;
  }
  /* header */

  /* inspark_school_voice */
  .inspark_school_voice .swiper-slide{
    padding: 25px;
  }
  /* inspark_school_voice */

  /* inspark_school_movie */
  .inspark_school_movie .swiper-slide{
    padding: 15px;
  }
  .inspark_school_movie .swiper-slide>video{
    box-shadow: 0 0 5px 5px white;
  }
  /* inspark_school_movie */

  /* strehgth */
  .strehgth{
    gap: 35px;
  }
  /* strehgth */

  /* FAQ */
  .FAQ>dl{
    padding: 0 0 35px 0;
  }
  .FAQ>dl>dt {
    margin-top: 35px;
    padding: 15px 150px;
  }
  .FAQ>dl>dd {
    padding: 15px 30px 15px 150px;
  }
  .FAQ>dl>dt,
  .FAQ>dl>dd {
    font-size: 28px;
  }
  .FAQ>dl>dt::before,
  .FAQ>dl>dd::before {
    font-size: 62px;
    left: 42px;
  }
  .FAQ>dl>dt::after {
    right: 42px;
    font-size: 48px;
  }
  /* FAQ */

  /* contact */
  .inspark-school_01 .contact{
    width: 100%;
  }
  .inspark-school_01 .contact>form>fieldset:nth-of-type(4)>div{
    flex-wrap: wrap;
    gap: 5px;
  }
  .inspark-school_01 .contact>form>fieldset:nth-of-type(4)>div>nobr{
    width: 100%;
  }
  /* contact */
}