@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/* Noto Sans JP: Thin 100, ExtraLight 200, Light 300, Regular 400, Medium 500, SemiBold 600, Bold 700, ExtraBold 800, Black 900 */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
/* Josefin Sans: Thin 100,Thin 100 Italic,ExtraLight 200,ExtraLight 200 Italic,Light 300,Light 300 Italic,Regular 400,Regular 400 Italic,Medium 500,Medium 500 Italic,SemiBold 600,SemiBold 600 Italic,Bold 700,Bold 700 Italic */

/* -----------------mobile base↓-------------------- */
/* -----------------common↓-------------------- */
:root{
  --site-font-family-Noto-Sans-JP:"Noto Sans JP", sans-serif;
  --site-font-family-Josefin-Sans:"Josefin Sans", sans-serif;
  --site-division: 394;
}
body{
  background-color: #ffffff;
  font-family: var(--site-font-family-Noto-Sans-JP);
}
img{
  vertical-align: top;
  max-width: 100%;
}
.inspark-school main{
  padding: 0;
}
a{
  text-decoration: none;
}

.is-mobile{
  display: block;
}
.is-desktop{
  display: none;
}

/* btn */
.inspark-school .btn{
  margin: auto;
  display: flex;
  align-items: center;
  position: relative;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.inspark-school .btn:is(.btn-contact){
  color: #000000;
}
.inspark-school .btn::before{
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.inspark-school .btn:is(.btn-dl)::before{
  background-image: url(../images/btn-contact.png);
}
.inspark-school .btn:is(.btn-contact)::before{
  background-image: url(../images/btn-contact.png);
}
.inspark-school .btn:is(.btn-tel){
  width: calc(210 * var(--site-font-size-ratio));
  margin-right: 0;
  justify-content: end;
}
.inspark-school .btn:is(.btn-tel)>img{
  width: 75%;
}
/* btn */

/* header */
.inspark-school header{
  width: 100%;
  padding-top: calc(20 * var(--site-font-size-ratio));
  padding-bottom: calc(calc(81 - 41 - 20) * var(--site-font-size-ratio));
  padding-left: calc(20 * var(--site-font-size-ratio));
  padding-right: calc(20 * var(--site-font-size-ratio));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.inspark-school header>h1{
  width: calc(79.07142639160156 * var(--site-font-size-ratio));
}
.inspark-school header>h1>img{
  width: 100%;
}
/* header */

/* fv */
.fv{
  background-image: url(../images/fv.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.fv>span,
.fv>p{
  margin-left: calc(20 * var(--site-font-size-ratio));
}
.fv>p{
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: calc(8 * var(--site-font-size-ratio));
}
.fv>p>span:nth-of-type(1){
  font-size: calc(20 * var(--site-font-size-ratio));
}
.fv>p>span:nth-of-type(2){
  font-size: calc(40 * var(--site-font-size-ratio));
  line-height: calc(60 * var(--site-font-size-ratio));
  color: #FFF200;
}
.fv>p>span:nth-of-type(3){
  font-size: calc(40 * var(--site-font-size-ratio));
  line-height: calc(60 * var(--site-font-size-ratio));
}
.fv>p>span:nth-of-type(4){
  font-size: calc(20 * var(--site-font-size-ratio));
}
.fv>span:nth-of-type(1),
.fv>span:nth-of-type(2),
.fv>span:nth-of-type(3){
  font-weight: 400;
  font-size: calc(14 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  background-color: #ffffff;
  padding: calc(4 * var(--site-font-size-ratio)) calc(20 * var(--site-font-size-ratio));
  border-radius: 100px;
  display: block;
  width: fit-content;
  margin-top: calc(4 * var(--site-font-size-ratio));
}
.fv>span:nth-of-type(1){
  margin-top: calc(calc(297 - 81 - 196) * var(--site-font-size-ratio));
}
.fv>div{
  margin-top: calc(calc(412 - 95 - 297) * var(--site-font-size-ratio));
}
.fv>div .splide__slide img{
  border-radius: calc(40 * var(--site-font-size-ratio));;
}
.fv>.btn{
  width: calc(353 * var(--site-font-size-ratio));
  height: calc(51 * var(--site-font-size-ratio));
  border-radius: calc(12 * var(--site-font-size-ratio));
  padding-left: calc(calc(96.08 - 20) * var(--site-font-size-ratio));
  font-size: calc(18 * var(--site-font-size-ratio));
  box-shadow: 0 calc(4 * var(--site-font-size-ratio)) calc(8 * var(--site-font-size-ratio)) 0 #0000001A;
}
.fv>.btn::before{
  width: calc(31.459810256958036 * var(--site-font-size-ratio));
  height: calc(31.459810256958036 * var(--site-font-size-ratio));
  left: calc(calc(64.32 - 53) * var(--site-font-size-ratio));
}
.fv>.btn:is(.btn-dl){
  margin-top: calc(calc(799 - 412 - 356.9) * var(--site-font-size-ratio));
  background: linear-gradient(to right, #BB0000 calc(51 * var(--site-font-size-ratio)), #FF2929 calc(51 * var(--site-font-size-ratio)) 100%);
}
/* fv */

/* client_logos */
.client_logos{
  position: relative;
  z-index: 1;
  height: calc(48 * var(--site-font-size-ratio));
  margin-top: calc(calc(951 - 799 - 112) * var(--site-font-size-ratio));
  margin-bottom: calc(calc(951 - 799 - 112) * var(--site-font-size-ratio));
}
.client_logos .js-marquee{
  display: flex;
  flex-wrap: nowrap;
}
.client_logos .js-marquee>.slide{
  height: calc(48 * var(--site-font-size-ratio));
  display: flex;
  align-items: center;
  padding: calc(5 * var(--site-font-size-ratio));
}
.client_logos .js-marquee>.slide>img{
  height: 100%;
}
/* client_logos */

/* campaing */
.campaing{
  background-color: #F8DF08;
  position: relative;
  padding: calc(40 * var(--site-font-size-ratio)) calc(30 * var(--site-font-size-ratio));
  z-index: 0;
}
.campaing::before{
  content: "";
  display: block;
  width: calc(100% - calc(20 * var(--site-font-size-ratio)));
  height: calc(100% - calc(20 * var(--site-font-size-ratio)));
  border: calc(4 * var(--site-font-size-ratio)) solid #FF2929;
  border-radius: calc(10 * var(--site-font-size-ratio));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
}
.campaing::after{
  content: "CAMPAIGN";
  color: #EBD300;
  font-size: calc(60 * var(--site-font-size-ratio));
  font-family: var(--site-font-family-Josefin-Sans);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
}
.campaing>span:nth-of-type(1){
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(41 * var(--site-font-size-ratio));
  border-radius: 999px;
  font-weight: 700;
  font-size: calc(14 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color: #ffffff;
  background-color: #FF2929;
}
.campaing>span:nth-of-type(2){
  display: block;
  margin-top: calc(calc(91 - 40 - 41) * var(--site-font-size-ratio));
  text-align: center;
  font-weight: 700;
  font-size: calc(20 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
}
.campaing>p{
  margin-top: calc(calc(131 - 91 - 30) * var(--site-font-size-ratio));
  text-align: center;
  font-weight: 700;
  font-size: calc(28 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
}
.campaing>ul{
  margin-top: calc(calc(274 - 131 - 123) * var(--site-font-size-ratio));
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--site-font-size-ratio));
  font-weight: 400;
  font-size: calc(12 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
}
/* campaing */

/* whatIsInspark */
.whatIsInspark{
  padding: calc(calc(1475 - 1039 - 376) * var(--site-font-size-ratio)) calc(20 * var(--site-font-size-ratio));
  background-image:
    radial-gradient(circle at right calc(100 * var(--site-font-size-ratio)) top 65.5%, #FF4848 calc(119 * var(--site-font-size-ratio)), transparent calc(calc(119 + 1) * var(--site-font-size-ratio))),
    linear-gradient(to bottom, transparent 52%,#F2F2F2 52% 100%);
  background-repeat: no-repeat, no-repeat;
}
.whatIsInspark>span:nth-of-type(1){
  font-weight: 700;
  font-size: calc(14 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(10 * var(--site-font-size-ratio));
  position: relative;
  width: 100%;
}
.whatIsInspark>span:nth-of-type(1)::before{
  content: "What’s? Inspark";
  color: #FF2929;
  font-size: calc(32 * var(--site-font-size-ratio));
  line-height: calc(32 * var(--site-font-size-ratio));
  letter-spacing: 0.02em;
  font-family: var(--site-font-family-Josefin-Sans);
}
.whatIsInspark>h2{
  font-weight: 700;
  font-size: calc(20 * var(--site-font-size-ratio));
  line-height: calc(30 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  margin-top: calc(calc(1566 - 1475 - 61) * var(--site-font-size-ratio));
}
.whatIsInspark>p{
  font-weight: 500;
  font-size: calc(14 * var(--site-font-size-ratio));
  line-height: calc(21 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  margin-top: calc(calc(1646 - 1566 - 60) * var(--site-font-size-ratio));
  display: flex;
  flex-wrap: wrap;
  gap: calc(calc(1813 - 1646 - 147) * var(--site-font-size-ratio));
}
.whatIsInspark>p>span{
  display: block;
}
.whatIsInspark>ul{
  margin: calc(calc(2018 - 1813 - 126) * var(--site-font-size-ratio)) auto 0;
  width: calc(353 * var(--site-font-size-ratio));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--site-font-size-ratio));
}
.whatIsInspark>ul>li{
  width: calc(160 * var(--site-font-size-ratio));
  height: calc(60 * var(--site-font-size-ratio));
  border-radius: calc(12 * var(--site-font-size-ratio));
  padding: calc(10 * var(--site-font-size-ratio)) calc(10 * var(--site-font-size-ratio));
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  color: #ffffff;
  font-size: calc(14 * var(--site-font-size-ratio));
  font-weight: 700;
}
.whatIsInspark>ul>li>span{
  font-size: calc(12 * var(--site-font-size-ratio));
}
.whatIsInspark>div{
  margin-top: calc(calc(2231.12 - 2018 - 130) * var(--site-font-size-ratio));
}
.whatIsInspark>div>video{
  width: calc(180.59 * var(--site-font-size-ratio));
  border-radius: calc(20 * var(--site-font-size-ratio));
  margin: auto;
  display: block;
}
.whatIsInspark>section{
  margin-top: calc(calc(2687 - 2231.12 - 415.4952087402344) * var(--site-font-size-ratio));
  counter-reset: whatIsInspark;
}
.whatIsInspark>section>h3{
  font-size: calc(20 * var(--site-font-size-ratio));
  line-height: calc(30 * var(--site-font-size-ratio));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
}
.whatIsInspark>section>section{
  margin-top: calc(20 * var(--site-font-size-ratio));
}
.whatIsInspark>section>section:first-of-type{
  margin-top: calc(calc(2747 - 2687 - 30) * var(--site-font-size-ratio));
}
.whatIsInspark>section>section>h4{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: calc(10 * var(--site-font-size-ratio));
  font-size: calc(16 * var(--site-font-size-ratio));
  font-weight: 700;
  letter-spacing: 0.1em;
}
.whatIsInspark>section>section>h4::before{
  counter-increment: whatIsInspark;
  content: "0"counter(whatIsInspark);
  color: #FF2929;
  font-size: calc(32 * var(--site-font-size-ratio));
  font-weight: 700;
  letter-spacing: 0em;
  font-family: var(--site-font-family-Josefin-Sans);
}
.whatIsInspark>section>section>p{
  margin-top: calc(calc(44.5 - 32) * var(--site-font-size-ratio));
  font-size: calc(14 * var(--site-font-size-ratio));
  line-height: calc(21 * var(--site-font-size-ratio));
  font-weight: 700;
  letter-spacing: 0.1em;
}
/* whatIsInspark */

/* StrongPoint-Introduce */
.StrongPoint-Introduce{
  border: calc(2 * var(--site-font-size-ratio)) solid #010000;
  border-radius: calc(40 * var(--site-font-size-ratio));
  width: calc(353 * var(--site-font-size-ratio));
  margin: calc(calc(3324 - 2308 - 937) * var(--site-font-size-ratio)) auto 0;
  padding: calc(calc(3364 - 3324) * var(--site-font-size-ratio)) calc(20 * var(--site-font-size-ratio));
  position: relative;
  background-color: #ffffff;
}
.StrongPoint-Introduce::before{
  content: "";
  display: block;
  width: calc(240 * var(--site-font-size-ratio));
  height: calc(240 * var(--site-font-size-ratio));
  background-color: #FF2929;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  z-index: -1;
}
.StrongPoint-Introduce::after{
  content: "";
  display: block;
  width: calc(140 * var(--site-font-size-ratio));
  height: calc(140 * var(--site-font-size-ratio));
  background-color: #00619E;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
  z-index: -1;
}
/* StrongPoint-Introduce */

/* strong-point */
.strong-point>h2{
  font-weight: 700;
  font-size: calc(20 * var(--site-font-size-ratio));
  line-height: calc(30 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  text-align: center;
}
.strong-point>h2>span{
  color: #FF2929;
}
.strong-point>ol{
  margin: calc(calc(3424 - 3364 - 30) * var(--site-font-size-ratio)) auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(20 * var(--site-font-size-ratio));
  counter-reset: point;
}
.strong-point>ol>li{
  display: flex;
  flex-wrap: wrap;
  gap: calc(calc(44.5 - 32) * var(--site-font-size-ratio));
}
.strong-point>ol>li>span{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: calc(10 * var(--site-font-size-ratio));
  font-weight: 700;
  font-size: calc(16 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
}
.strong-point>ol>li>span::before{
  font-family: var(--site-font-family-Josefin-Sans);
  counter-increment: point;
  content: "0"counter(point);
  font-weight: 700;
  font-size: calc(32 * var(--site-font-size-ratio));
  letter-spacing: initial;
  color:#FF2929;
}
.strong-point>ol>li>p{
  font-weight: 500;
  font-size: calc(14 * var(--site-font-size-ratio));
  line-height: calc(21 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
}
/* strong-point */

/* introduce */
.introduce{
  margin-top: calc(calc(3890 - 3424 - 425.5) * var(--site-font-size-ratio));
}
.introduce>h2{
  font-weight: 700;
  font-size: calc(20 * var(--site-font-size-ratio));
  line-height: calc(30 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  text-align: center;
}
.introduce>div:nth-of-type(1){
  margin-top: calc(calc(3950 - 3890 - 30) * var(--site-font-size-ratio));
}
.introduce>div:nth-of-type(2){
  margin-top: calc(calc(4626 - 3950 - 636) * var(--site-font-size-ratio));
}
.introduce>div>img{
  display: block;
  margin: auto;
  width: calc(180 * var(--site-font-size-ratio));
  border-radius: calc(20 * var(--site-font-size-ratio));
}
.introduce>div>img~*{
  display: block;
}
.introduce>div>span:nth-of-type(1){
  font-weight: 700;
  font-size: calc(16 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  margin-top: calc(calc(4291 - 3950 - 320.625) * var(--site-font-size-ratio));
}
.introduce>div>span:nth-of-type(2){
  font-weight: 400;
  font-size: calc(14 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  margin-top: calc(calc(4371 - 4335 - 26) * var(--site-font-size-ratio));
}
.introduce>div>span:nth-of-type(3){
  font-weight: 700;
  font-size: calc(16 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color:#FF2929;
  margin-top: calc(calc(4367 - 4336 - 21) * var(--site-font-size-ratio));
}
.introduce>div>span:nth-of-type(2)::before,
.introduce>div>span:nth-of-type(3)::before{
  display: flex;
  width: 100%;
  height: calc(26 * var(--site-font-size-ratio));
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: calc(12 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color:#ffffff;
  border-radius: 50px;
  margin-bottom: calc(calc(4336 - 4300 - 26) * var(--site-font-size-ratio));
}
.introduce>div>span:nth-of-type(2)::before{
  background-color: #7F7F7F;
  content: 'BEFORE';
}
.introduce>div>span:nth-of-type(3)::before{
  background-color: #FF2929;
  content: 'AFTER';
}
.introduce>div>p{
  font-weight: 400;
  font-size: calc(14 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  margin-top: calc(calc(4481 - 4447 - 24) * var(--site-font-size-ratio));
}
/* introduce */

/* price */
.price{
  margin-top: calc(calc(5404 - 3324 - 2000) * var(--site-font-size-ratio));
  background-color: #00619E;
  padding: calc(calc(5464 - 5404) * var(--site-font-size-ratio)) calc(20 * var(--site-font-size-ratio));
}
.price>h2{
  font-weight: 700;
  font-size: calc(14 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color:#ffffff;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(8 * var(--site-font-size-ratio));
}
.price>h2::before{
  font-family: var(--site-font-family-Josefin-Sans);
  content: "Price";
  font-weight: 700;
  font-size: calc(32 * var(--site-font-size-ratio));
  line-height: calc(32 * var(--site-font-size-ratio));
  letter-spacing: 0.02em;
  color:#FF2929;
  width: 100%;
  text-align: center;
}
.price>p{
  font-weight: 700;
  font-size: calc(20 * var(--site-font-size-ratio));
  line-height: calc(30 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color:#ffffff;
  text-align: center;
  margin-top: calc(calc(5555 - 5464 - 61) * var(--site-font-size-ratio));
}
.price>div{
  margin-top: calc(calc(5685 - 5555 - 90) * var(--site-font-size-ratio));
  padding: calc(calc(5745 - 5685) * var(--site-font-size-ratio)) calc(calc(40 - 20) * var(--site-font-size-ratio));
  border-radius: calc(20 * var(--site-font-size-ratio));
  background-color: #ffffff;
}
.price>div>span:nth-of-type(1){
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: calc(20 * var(--site-font-size-ratio));
  line-height: calc(30 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
}
.price>div>span:nth-of-type(1)>span{
  color: #FF2929;
}
.price>div>div.js-scrollable{
  overflow-x: scroll;
  margin-top: calc(calc(5805 - 5745 - 30) * var(--site-font-size-ratio));
}
.price>div>div.js-scrollable::-webkit-scrollbar{
  display: none;
}
.price>div>div.js-scrollable>table{
  border-collapse: collapse;
  width: max-content;
  position: relative;
}
.price>div>div.js-scrollable>table::after{
  content: "";
  display: block;
  width: calc(766 / 4 * var(--site-font-size-ratio));
  height: calc(80 * var(--site-font-size-ratio) * 4);
  border: calc(4 * var(--site-font-size-ratio)) solid #FF2929;
  border-radius: calc(10 * var(--site-font-size-ratio));
  position: absolute;
  bottom: 0;
  left: calc(766 / 4 * var(--site-font-size-ratio));
}
.price>div>div.js-scrollable>table th,
.price>div>div.js-scrollable>table td{
  width: calc(766 / 4 * var(--site-font-size-ratio));
  text-align: center;
  font-size: calc(14 * var(--site-font-size-ratio));
  font-weight: 800;
}
.price>div>div.js-scrollable>table th:first-child{
  text-align: left;
  padding-left: calc(calc(70 - 40) * var(--site-font-size-ratio));
}
.price>div>div.js-scrollable>table tr:nth-child(1) th:nth-child(2){
  color: #FF2929;
}
.price>div>div.js-scrollable>table tr:nth-child(1) th,
.price>div>div.js-scrollable>table tr:nth-child(1) td{
  height: calc(50 * var(--site-font-size-ratio));
  font-size: calc(16 * var(--site-font-size-ratio));
  vertical-align: top;
}
.price>div>div.js-scrollable>table tr:nth-child(1)~tr th,
.price>div>div.js-scrollable>table tr:nth-child(1)~tr td{
  height: calc(80 * var(--site-font-size-ratio));
}
.price>div>div.js-scrollable>table tr:nth-child(2)~tr:nth-child(odd) th,
.price>div>div.js-scrollable>table tr:nth-child(2)~tr:nth-child(odd) td{
  background-color: #EFF6FF;
}
.price>div>div.js-scrollable>table tr:nth-child(2)~tr:nth-child(odd) th:first-child{
  border-top-left-radius: calc(12 * var(--site-font-size-ratio));
  border-bottom-left-radius: calc(12 * var(--site-font-size-ratio));
}
.price>div>div.js-scrollable>table tr:nth-child(2)~tr:nth-child(odd) td:last-child{
  border-top-right-radius: calc(12 * var(--site-font-size-ratio));
  border-bottom-right-radius: calc(12 * var(--site-font-size-ratio));
}
.price>div>div.js-scrollable>table img{
  width: calc(41.50996017456055 * var(--site-font-size-ratio));
}
.price .scroll-hint-icon-wrap.is-active .scroll-hint-icon{
  opacity: 0.5;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: calc(240 * var(--site-font-size-ratio));
  height: calc(160 * var(--site-font-size-ratio));
  border-radius: calc(30 * var(--site-font-size-ratio));
  padding-top: calc(60 * var(--site-font-size-ratio));
}
.price .scroll-hint-icon:after{
  top: calc(50 * var(--site-font-size-ratio));
}
.price .scroll-hint-text{
  font-size: calc(14 * var(--site-font-size-ratio));
}
.price>div>small{
  margin-top: calc(calc(6211 - 5805 - 394) * var(--site-font-size-ratio));
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  gap: calc(calc(6314 - 6211 - 74) * var(--site-font-size-ratio));
  font-size: calc(12 * var(--site-font-size-ratio));
  font-weight: 400;
  letter-spacing: 0.1em;
}
.price>div>small::after{
  content: "";
  display: block;
  width: calc(178.59361267089912 * var(--site-font-size-ratio));
  height: calc(28.999984741211048 * var(--site-font-size-ratio));
  background-image: url(../images/price-triangle.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.price>div>span:nth-of-type(2){
  display: block;
  margin-top: calc(calc(6344 - 6314 - 0) * var(--site-font-size-ratio));
  text-align: center;
  font-size: calc(20 * var(--site-font-size-ratio));
  line-height: calc(30 * var(--site-font-size-ratio));
  font-weight: 700;
  letter-spacing: 0.1em;
}
.price>div>span:nth-of-type(2)>span{
  color: #FF2929;
}
.price>div>span:nth-of-type(3){
  display: block;
  margin-top: calc(calc(6434 - 6344 - 60) * var(--site-font-size-ratio));
  text-align: center;
  font-size: calc(14 * var(--site-font-size-ratio));
  font-weight: 700;
  letter-spacing: 0.1em;
}
.price>div>span:nth-of-type(4){
  display: block;
  margin-top: calc(calc(6488 - 6434 - 42) * var(--site-font-size-ratio));
  text-align: center;
  font-size: calc(10 * var(--site-font-size-ratio));
  font-weight: 700;
  letter-spacing: 0.1em;
}
.price>div>picture>img{
  margin-top: calc(calc(6523.89 - 6488 - 15) * var(--site-font-size-ratio));
}
.price>div>span:nth-of-type(5){
  display: block;
  margin-top: calc(calc(6694 - 6523.89 - 157.3067626953125) * var(--site-font-size-ratio));
  text-align: center;
  font-size: calc(12 * var(--site-font-size-ratio));
  font-weight: 700;
  letter-spacing: 0.1em;
}
.price>div>ul{
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  border-radius: 999px;
  overflow: hidden;
  margin-top: calc(calc(6722 - 6694 - 18) * var(--site-font-size-ratio));
}
.price>div>ul>li{
  width: 25%;
  height: calc(40 * var(--site-font-size-ratio));
  font-size: calc(16 * var(--site-font-size-ratio));
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #ffffff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.price>div>ul>li::after{
  content: "";
  display: block;
  position: absolute;
  width: calc(11 * var(--site-font-size-ratio));
  height: 100%;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  top: 0;
  right: 0;
  transform: translateX(100%);
  z-index: 1;
}
.price>div>ul>li:nth-of-type(1){
  --price-color1:#00619E;
  background-color: var(--price-color1);
}
.price>div>ul>li:nth-of-type(1)::after{
  background-color: var(--price-color1);
}
.price>div>ul>li:nth-of-type(2){
  --price-color2:#007BC8;
  background-color: var(--price-color2);
}
.price>div>ul>li:nth-of-type(2)::after{
  background-color: var(--price-color2);
}
.price>div>ul>li:nth-of-type(3){
  --price-color3:#008BE2;
  background-color: var(--price-color3);
}
.price>div>ul>li:nth-of-type(3)::after{
  background-color: var(--price-color3);
}
.price>div>ul>li:nth-of-type(4){
  --price-color4:#059DFC;
  background-color: var(--price-color4);
}
.price>div>ul>li:nth-of-type(4)::after{
  content: none;
}
/* price */

/* flow */
.flow{
  margin-top: calc(calc(7318 - 6882 - 376) * var(--site-font-size-ratio));
  padding: 0 calc(20 * var(--site-font-size-ratio));
}
.flow>h2{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
  gap: calc(8 * var(--site-font-size-ratio));
  font-weight: 700;
  font-size: calc(14 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
}
.flow>h2::before{
  content: "Flow";
  color: #FF2929;
  font-family: var(--site-font-family-Josefin-Sans);
  font-weight: 700;
  font-size: calc(32 * var(--site-font-size-ratio));
  line-height: calc(32 * var(--site-font-size-ratio));
  letter-spacing: 0.02em;
}
.flow>ol{
  margin-top: calc(calc(7409 - 7318 - 61) * var(--site-font-size-ratio));
  border-radius: calc(30 * var(--site-font-size-ratio));
  background-color: #00619E;
  padding: calc(calc(7429 - 7409) * var(--site-font-size-ratio));
  counter-reset: flow;
}
.flow>ol::after{
  content: "";
  display: block;
  background-image: url(../images/flow-ul-after-mobile.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: calc(60 * var(--site-font-size-ratio));
}
.flow>ol>li{
  background-color: #F2F2F2;
  font-weight: 700;
  font-size: calc(16 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  margin-bottom: calc(calc(100 - 60) * var(--site-font-size-ratio));
  border-radius: calc(20 * var(--site-font-size-ratio));
  position: relative;
  height: calc(60 * var(--site-font-size-ratio));
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.flow>ol>li::before{
  font-family: var(--site-font-family-Josefin-Sans);
  counter-increment: flow;
  content: "0"counter(flow);
  color: #FF2929;
  font-size: calc(40 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  padding-left: calc(10 * var(--site-font-size-ratio));
  padding-right: calc(calc(64 - 39 - 10) * var(--site-font-size-ratio));
}
.flow>ol>li::after{
  content: "";
  display: block;
  background-image: url(../images/flow-icon.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: calc(20 * var(--site-font-size-ratio));
  position: absolute;
  background-position: center;
  bottom: calc(-32 * var(--site-font-size-ratio));
  left: 50%;
  transform: translateX(-50%);
}
/* flow */

/* FAQ */
.FAQ{
  padding-top: calc(calc(8069 - 7409 - 600) * var(--site-font-size-ratio));
  position: relative;
}
.FAQ::before{
  content: "";
  display: block;
  width: calc(240 * var(--site-font-size-ratio));
  height: calc(240 * var(--site-font-size-ratio));
  background-color: #FF2929;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, 25%);
  z-index: -1;
}
.FAQ::after{
  content: "";
  display: block;
  width: calc(140 * var(--site-font-size-ratio));
  height: calc(140 * var(--site-font-size-ratio));
  background-color: #00619E;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-25%, 215%);
  z-index: -1;
}
.FAQ>h2{
  font-size: calc(14 * var(--site-font-size-ratio));
  font-weight: 700;
  letter-spacing: 0.1em;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--site-font-size-ratio));
}
.FAQ>h2::before{
  content: "FAQ";
  font-family: var(--site-font-family-Josefin-Sans);
  font-size: calc(32 * var(--site-font-size-ratio));
  line-height: calc(32 * var(--site-font-size-ratio));
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FF2929;
}
.FAQ>dl{
  width: calc(353 * var(--site-font-size-ratio));
  padding: calc(20 * var(--site-font-size-ratio)) calc(20 * var(--site-font-size-ratio));
  margin: auto;
  background-color: #F9F9F9;
  border-radius: calc(20 * var(--site-font-size-ratio));
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: calc(10 * var(--site-font-size-ratio));
}
.FAQ>dl:nth-of-type(1){
  margin-top: calc(calc(8160 - 8069 - 61) * var(--site-font-size-ratio));
}
.FAQ>dl:nth-of-type(1)~dl{
  margin-top: calc(19 * var(--site-font-size-ratio));
}
.FAQ>dl>dt{
  font-weight: 700;
  font-size: calc(16 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  display: flex;
  flex-wrap: nowrap;
  gap: calc(calc(37 - 30) * var(--site-font-size-ratio));
}
.FAQ>dl>dt::before{
  font-family: var(--site-font-family-Josefin-Sans);
  font-weight: bold;
  content: "Q";
  color: #F8DF08;
  font-size: calc(30 * var(--site-font-size-ratio));
}
.FAQ>dl>dd{
  font-weight: 400;
  font-size: calc(14 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
}
/* FAQ */

/* footer */
.inspark-school footer{
  background-color: #000000;
  max-width: 100%;
  padding: calc(calc(9825 - 9805) * var(--site-font-size-ratio)) calc(20 * var(--site-font-size-ratio));
  margin: calc(calc(9805 - 8804 - 941) * var(--site-font-size-ratio)) auto 0;
}
.inspark-school footer>img{
  width: calc(79.13043212890625 * var(--site-font-size-ratio));
}
.inspark-school footer>span{
  display: block;
  margin: calc(calc(9895 - 9825 - 40) * var(--site-font-size-ratio)) auto 0;
  font-weight: 700;
  font-size: calc(12 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
}
.inspark-school footer>.btn:is(.btn-dl){
  margin: calc(calc(9925 - 9895 - 18) * var(--site-font-size-ratio)) auto 0;
  background: linear-gradient(to right, #BB0000 calc(60 * var(--site-font-size-ratio)), #FF2929 calc(60 * var(--site-font-size-ratio)) 100%);
  width: calc(353 * var(--site-font-size-ratio));
  height: calc(60 * var(--site-font-size-ratio));
  border-radius: calc(12 * var(--site-font-size-ratio));
  padding-left: calc(calc(96.08 - 20) * var(--site-font-size-ratio));
  font-size: calc(18 * var(--site-font-size-ratio));
}
.inspark-school footer>.btn:is(.btn-dl)::before{
  width: calc(40 * var(--site-font-size-ratio));
  height: calc(40 * var(--site-font-size-ratio));
  left: calc(calc(64.32 - 53) * var(--site-font-size-ratio));
}
.inspark-school footer>small{
  font-weight: 700;
  font-size: calc(12 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  text-align: center;
  display: block;
  margin-top: calc(calc(10005 - 9925 - 60) * var(--site-font-size-ratio));
}
/* footer */

/* form */
.form{
  width: calc(352 * var(--site-font-size-ratio));
  margin: calc(calc(8804 - 8160 - 584) * var(--site-font-size-ratio)) auto 0;
  background-color: #00619E;
  border-radius: calc(20 * var(--site-font-size-ratio));
  padding: calc(60 * var(--site-font-size-ratio)) calc(27 * var(--site-font-size-ratio));
}
.form>span{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
  gap: calc(8 * var(--site-font-size-ratio));
  font-weight: 700;
  font-size: calc(14 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color: #ffffff;
}
.form>span::before{
  content: "Entry";
  font-family: var(--site-font-family-Josefin-Sans);
  font-weight: 700;
  font-size: calc(32 * var(--site-font-size-ratio));
  line-height: calc(32 * var(--site-font-size-ratio));
  letter-spacing: 0.02em;
}
.form fieldset:has(input[type="radio"]){
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(20 * var(--site-font-size-ratio));
  margin-top: calc(calc(156 - 60 - 61) * var(--site-font-size-ratio));
}
.form fieldset:has(input[type="radio"])>label{
  width: fit-content;
  color: #ffffff;
  font-weight: 700;
  font-size: calc(16 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(12 * var(--site-font-size-ratio));
}
.form fieldset:has(input[type="radio"])>label::before{
  content: "";
  display: block;
  width: calc(22 * var(--site-font-size-ratio));
  height: calc(22 * var(--site-font-size-ratio));
  background-image: url(../images/radio.svg);
  background-size: 98%;
  background-position: center;
  background-repeat: no-repeat;
}
.form fieldset:has(input[type="radio"])>label:has(input[type="radio"]:checked)::before{
  background-image: url(../images/radio_checked.svg);
}
.form fieldset:has(input[type="radio"])>label>input{
  display: none;
}
.form fieldset:has(input[type="text"]){
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--site-font-size-ratio));
  margin-top: calc(calc(244 - 156 - 68) * var(--site-font-size-ratio));
}
.form fieldset:has(input[type="text"])>label{
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--site-font-size-ratio));
  color: #ffffff;
  font-weight: 700;
  font-size: calc(14 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
}
.form fieldset:has(input[type="text"])>label>input{
  height: calc(60 * var(--site-font-size-ratio));
  border-radius: calc(12 * var(--site-font-size-ratio));
  background-color: #ffffff;
  border: none;
  padding: calc(10 * var(--site-font-size-ratio));
  font-size: calc(16 * var(--site-font-size-ratio));
}
.form>form>span{
  display: block;
  text-align: center;
  color: #ffffff;
  font-weight: 400;
  font-size: calc(14 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  margin-top: calc(calc(769 - 244 - 495) * var(--site-font-size-ratio));
}
.form>form>span>a{
  color: inherit;
  text-decoration: underline;
}
.form>form>.btn{
  margin-top: calc(calc(821 - 769 - 42) * var(--site-font-size-ratio));
  width: 100%;
  height: calc(60 * var(--site-font-size-ratio));
  border-radius: calc(12 * var(--site-font-size-ratio));
  padding-left: calc(calc(96.08 - 20) * var(--site-font-size-ratio));
  font-size: calc(16 * var(--site-font-size-ratio));
}
.form>form>.btn:is(.btn-dl){
  background: linear-gradient(to right, #BB0000 calc(60 * var(--site-font-size-ratio)), #FF2929 calc(60 * var(--site-font-size-ratio)) 100%);
}
.form>form>.btn:is(.btn-contact){
  background: linear-gradient(to right, #181818 calc(60 * var(--site-font-size-ratio)), #ffffff calc(60 * var(--site-font-size-ratio)) 100%);
}
.form>form>.btn::before{
  width: calc(40 * var(--site-font-size-ratio));
  height: calc(40 * var(--site-font-size-ratio));
  left: calc(calc(64.32 - 53) * var(--site-font-size-ratio));
}
/* form */

/* -----------------desktop(include ipad)↓-------------------- */
@media screen and (min-width: 768px){
  /* -----------------common↓-------------------- */
  :root{
    --site-division: 1440;
  }
  .commmon-padding{
    padding: 20px;
  }
  .inspark-school .swiper{
    width: 70%;
    padding-bottom: 35px !important;
  }
  .inspark-school .swiper .swiper-pagination{
    bottom: 15px;
  }
  .inspark-school .swiper .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
  }
  .is-mobile{
    display: none;
  }
  .is-desktop{
    display: block;
  }
  .inspark-school main{
    background-size: 100% calc(880 * var(--site-font-size-ratio));
  }

  /* header */
  .inspark-school header{
    padding-top: calc(30 * var(--site-font-size-ratio));
    padding-left: calc(100 * var(--site-font-size-ratio));
    padding-right: calc(100 * var(--site-font-size-ratio));
    padding-bottom: calc(calc(187 - 33 - 51) * var(--site-font-size-ratio));
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    grid-area: fv-header;
  }
  .inspark-school header>h1{
    width: calc(100 * var(--site-font-size-ratio));
  }
  .inspark-school header>.btn{
    display: flex;
  }
  .inspark-school header>.btn:is(.btn-dl){
    margin-right: 0;
    padding-left: calc(calc(1104 - 1032) * var(--site-font-size-ratio));
    width: calc(308 * var(--site-font-size-ratio));
    height: calc(51 * var(--site-font-size-ratio));
    border-radius: calc(12 * var(--site-font-size-ratio));
    background: linear-gradient(to right, #BB0000 calc(52 * var(--site-font-size-ratio)), #FF2929 calc(52 * var(--site-font-size-ratio)) 100%);
  }
  .inspark-school header>.btn:is(.btn-dl)::before{
    width: calc(30 * var(--site-font-size-ratio));
    height: calc(30 * var(--site-font-size-ratio));
    left: calc(10 * var(--site-font-size-ratio));
  }
  .inspark-school .btn:is(.btn-tel){
    width: calc(308 * var(--site-font-size-ratio));
    margin-right: 0;
  }
  /* header */

  /* btn */
  .inspark-school .btn{
    cursor: pointer;
  }
  /* btn */

  /* fv */
  .fv{
    display: grid;
    grid-template-areas:
      "fv-header fv-header"
      "fv-p fv-splide"
      "fv-span1 fv-splide"
      "fv-span2 fv-splide"
      "fv-span3 fv-splide"
      "fv-dl fv-splide";
    grid-template-columns: 1fr calc(calc(1440 - 715) * var(--site-font-size-ratio));
    padding-bottom: calc(calc(880 - 229 - 570) * var(--site-font-size-ratio));
    background-image: url(../images/fv-desktop.png);
    background-size: cover;
  }
  .fv>span,
  .fv>p,
  .fv>.btn{
    margin-left: calc(101 * var(--site-font-size-ratio));
  }
  .fv>p{
    gap: calc(12 * var(--site-font-size-ratio));
    grid-area: fv-p;
  }
  .fv>p>span:nth-of-type(2){
    font-size: calc(60 * var(--site-font-size-ratio));
    line-height: calc(80 * var(--site-font-size-ratio));
    grid-area: fv-span2;
  }
  .fv>p>span:nth-of-type(3){
    font-size: calc(60 * var(--site-font-size-ratio));
    line-height: calc(80 * var(--site-font-size-ratio));
    grid-area: fv-span3;
  }
  .fv>span:nth-of-type(1),
  .fv>span:nth-of-type(2),
  .fv>span:nth-of-type(3){
    font-weight: 700;
    font-size: calc(18 * var(--site-font-size-ratio));
    padding: calc(8 * var(--site-font-size-ratio)) calc(30 * var(--site-font-size-ratio));
    margin-top: calc(12 * var(--site-font-size-ratio));
  }
  .fv>span:nth-of-type(1){
    margin-top: calc(calc(471 - 187 - 244) * var(--site-font-size-ratio));
    grid-area: fv-span1;
  }
  .fv>div{
    margin-top: calc(calc(229 - 187) * var(--site-font-size-ratio));
    grid-area: fv-splide;
  }
  .fv>div .splide__slide img{
    border-radius: calc(50 * var(--site-font-size-ratio));;
  }
  .fv>.btn{
    width: calc(321 * var(--site-font-size-ratio));
    box-shadow: none;
  }
  .fv>.btn::before{
    width: calc(30 * var(--site-font-size-ratio));
    height: calc(30 * var(--site-font-size-ratio));
  }
  .fv>.btn:is(.btn-dl){
    margin-top: calc(calc(654 - 471 - 153) * var(--site-font-size-ratio));
    grid-area: fv-dl;
  }
  /* fv */

  /* cheapest */
  .cheapest{
    height: calc(80 * var(--site-font-size-ratio));
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    background-color: #0F1E28;
    padding: 0 calc(103 * var(--site-font-size-ratio));
    color: #ffffff;
    font-size: calc(18 * var(--site-font-size-ratio));
    font-weight: 700;
    letter-spacing: 0.1em;
  }
  .cheapest>.btn:is(.btn-dl){
    margin-right: 0;
    background: linear-gradient(to right, #BB0000 calc(51 * var(--site-font-size-ratio)), #FF2929 calc(51 * var(--site-font-size-ratio)) 100%);
    width: calc(308 * var(--site-font-size-ratio));
    height: calc(51 * var(--site-font-size-ratio));
    border-radius: calc(12 * var(--site-font-size-ratio));
    padding-left: calc(calc(96.08 - 20) * var(--site-font-size-ratio));
    font-size: calc(18 * var(--site-font-size-ratio));
  }
  .cheapest>.btn:is(.btn-dl)::before{
    width: calc(30 * var(--site-font-size-ratio));
    height: calc(30 * var(--site-font-size-ratio));
    left: calc(10 * var(--site-font-size-ratio));
  }
  /* cheapest */

  /* client_logos */
  .client_logos{
    height: calc(80 * var(--site-font-size-ratio));
    margin-top: calc(calc(999 - 879 - 80) * var(--site-font-size-ratio));
    margin-bottom: calc(calc(999 - 879 - 80) * var(--site-font-size-ratio));
  }
  .client_logos .js-marquee>.slide{
    height: calc(80 * var(--site-font-size-ratio));
  }
  /* client_logos */

  /* campaing */
  .campaing::before{
    width: calc(100% - calc(23 * var(--site-font-size-ratio)));
    height: calc(100% - calc(23 * var(--site-font-size-ratio)));
    border-radius: calc(20 * var(--site-font-size-ratio));
  }
  .campaing::after{
    font-size: calc(180 * var(--site-font-size-ratio));
  }
  .campaing>span:nth-of-type(1){
    margin: auto;
    width: calc(541 * var(--site-font-size-ratio));
    height: calc(56 * var(--site-font-size-ratio));
    font-size: calc(24 * var(--site-font-size-ratio));
  }
  .campaing>span:nth-of-type(2){
    margin-top: calc(calc(1273 - 1179 - 56) * var(--site-font-size-ratio));
    font-size: calc(30 * var(--site-font-size-ratio));
  }
  .campaing>p{
    margin-top: calc(calc(1329 - 1273 - 44) * var(--site-font-size-ratio));
    font-size: calc(40 * var(--site-font-size-ratio));
  }
  .campaing>ul{
    margin: auto;
    width: fit-content;
    margin-top: calc(calc(1389 - 1329 - 40) * var(--site-font-size-ratio));
    font-size: calc(14 * var(--site-font-size-ratio));
  }
  /* campaing */

  /* whatIsInspark */
  .whatIsInspark{
    padding: calc(calc(1640 - 1119 - 401) * var(--site-font-size-ratio)) calc(101 * var(--site-font-size-ratio));
    background-image:
      radial-gradient(circle at right calc(100 * var(--site-font-size-ratio)) top 50%, #FF4848 calc(219 * var(--site-font-size-ratio)), transparent calc(calc(219 + 1) * var(--site-font-size-ratio))),
      linear-gradient(to bottom, transparent 52%,#F2F2F2 52% 100%);
    display: grid;
    justify-content: space-between;
    align-items: flex-start;
    column-gap: calc(55 * var(--site-font-size-ratio));
    grid-template-areas:
      "whatIsInspark-title whatIsInspark-video"
      "whatIsInspark-h2 whatIsInspark-video"
      "whatIsInspark-p whatIsInspark-video"
      "whatIsInspark-ul whatIsInspark-video"
      "whatIsInspark-section whatIsInspark-video";
  }
  .whatIsInspark>span:nth-of-type(1){
    font-size: calc(16 * var(--site-font-size-ratio));
    gap: calc(20 * var(--site-font-size-ratio));
    grid-area: whatIsInspark-title;
  }
  .whatIsInspark>h2{
    font-size: calc(32 * var(--site-font-size-ratio));
    line-height: calc(48 * var(--site-font-size-ratio));
    margin-top: calc(calc(1712 - 1640 - 32) * var(--site-font-size-ratio));
    grid-area: whatIsInspark-h2;
  }
  .whatIsInspark>p{
    font-size: calc(18 * var(--site-font-size-ratio));
    line-height: calc(36 * var(--site-font-size-ratio));
    margin-top: calc(calc(1800 - 1712 - 48) * var(--site-font-size-ratio));
    gap: calc(calc(1984 - 1800 - 144) * var(--site-font-size-ratio));
    grid-area: whatIsInspark-p;
  }
  .whatIsInspark>ul{
    margin: calc(calc(2168 - 1984 - 144) * var(--site-font-size-ratio)) auto 0 0;
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    grid-area: whatIsInspark-ul;
  }
  .whatIsInspark>ul>li{
    width: calc(200 * var(--site-font-size-ratio));
    height: calc(74 * var(--site-font-size-ratio));
    font-size: calc(16 * var(--site-font-size-ratio));
  }
  .whatIsInspark>div{
    margin-top: 0;
    grid-area: whatIsInspark-video;
  }
  .whatIsInspark>div>video{
    width: calc(320 * var(--site-font-size-ratio));
    border-radius: calc(30 * var(--site-font-size-ratio));
  }
  .whatIsInspark>section{
    margin-top: calc(calc(2363 - 1640 - 602) * var(--site-font-size-ratio));
    width: calc(685 * var(--site-font-size-ratio));
    grid-area: whatIsInspark-section;
  }
  .whatIsInspark>section>h3{
    font-size: calc(32 * var(--site-font-size-ratio));
    line-height: calc(32 * var(--site-font-size-ratio));
    text-align: left;
  }
  .whatIsInspark>section>section:first-of-type{
    margin-top: calc(calc(2514 - 2442 - 32) * var(--site-font-size-ratio));
  }
  .whatIsInspark>section>section>h4{
    gap: calc(20 * var(--site-font-size-ratio));
    font-size: calc(20 * var(--site-font-size-ratio));
  }
  .whatIsInspark>section>section>h4::before{
    font-size: calc(48 * var(--site-font-size-ratio));
  }
  .whatIsInspark>section>section>p{
    margin-top: calc(calc(60 - 48) * var(--site-font-size-ratio));
    font-size: calc(18 * var(--site-font-size-ratio));
    line-height: calc(36 * var(--site-font-size-ratio));
    font-weight: 500;
  }
  /* whatIsInspark */

  /* StrongPoint-Introduce */
  .StrongPoint-Introduce{
    width: calc(1080 * var(--site-font-size-ratio));
    margin: calc(calc(3190 - 2363 - 747) * var(--site-font-size-ratio)) auto 0;
    padding: calc(calc(3270 - 3190) * var(--site-font-size-ratio)) calc(calc(280 - 180) * var(--site-font-size-ratio));
  }
  .StrongPoint-Introduce::before{
    width: calc(360 * var(--site-font-size-ratio));
    height: calc(360 * var(--site-font-size-ratio));
  }
  .StrongPoint-Introduce::after{
    width: calc(200 * var(--site-font-size-ratio));
    height: calc(200 * var(--site-font-size-ratio));
  }
  /* StrongPoint-Introduce */

  /* strong-point */
  .strong-point>h2{
    font-size: calc(32 * var(--site-font-size-ratio));
    line-height: calc(48 * var(--site-font-size-ratio));
  }
  .strong-point>ol{
    margin: calc(calc(3358 - 3270 - 48) * var(--site-font-size-ratio)) auto 0;
    gap: calc(56 * var(--site-font-size-ratio));
  }
  .strong-point>ol>li{
    gap: calc(calc(56 - 36) * var(--site-font-size-ratio));
    position: relative;
    padding-left: calc(135.5 * var(--site-font-size-ratio));
  }
  .strong-point>ol>li>span{
    display: block;
    width: 100%;
    gap: calc(0 * var(--site-font-size-ratio));
    font-size: calc(24 * var(--site-font-size-ratio));
  }
  .strong-point>ol>li>span::before{
    font-size: calc(100 * var(--site-font-size-ratio));
    position: absolute;
    top: 0;
    left: 0;
  }
  .strong-point>ol>li>p{
    font-weight: 700;
    font-size: calc(16 * var(--site-font-size-ratio));
    line-height: initial;
  }
  /* strong-point */

  /* introduce */
  .introduce{
    margin-top: calc(calc(3870 - 3358 - 424) * var(--site-font-size-ratio));
  }
  .introduce>h2{
    font-size: calc(32 * var(--site-font-size-ratio));
    line-height: calc(64 * var(--site-font-size-ratio));
  }
  .introduce>div{
    display: grid;
    grid-template-areas:
      "introduce-img introduce-title"
      "introduce-img introduce-before"
      "introduce-img introduce-after"
      "introduce-img introduce-p";
    grid-template-columns: calc(160 * var(--site-font-size-ratio)) 1fr;
    grid-template-rows: calc(100 * var(--site-font-size-ratio)) calc(32 * var(--site-font-size-ratio)) calc(32 * var(--site-font-size-ratio)) auto;
    column-gap: calc(calc(200 - 160) * var(--site-font-size-ratio));
  }
  .introduce>div:nth-of-type(1){
    margin-top: calc(calc(3974 - 3870 - 64) * var(--site-font-size-ratio));
  }
  .introduce>div:nth-of-type(2){
    margin-top: calc(30 * var(--site-font-size-ratio));
  }
  .introduce>div>img{
    width: 100%;
    grid-area: introduce-img;
  }
  .introduce>div>span:nth-of-type(1){
    font-size: calc(24 * var(--site-font-size-ratio));
    margin-top: calc(0 * var(--site-font-size-ratio));
    grid-area: introduce-title;
    align-self: center;
  }
  .introduce>div>span:nth-of-type(2){
    margin-top: calc(0 * var(--site-font-size-ratio));
    grid-area: introduce-before;
  }
  .introduce>div>span:nth-of-type(3){
    font-weight: 400;
    font-size: calc(14 * var(--site-font-size-ratio));
    color:#000000;
    margin-top: calc(0 * var(--site-font-size-ratio));
    grid-area: introduce-after;
  }
  .introduce>div>span:nth-of-type(2),
  .introduce>div>span:nth-of-type(3){
    display: flex;
    flex-direction: row;
    gap: calc(calc(312 - 200 - 100) * var(--site-font-size-ratio));
  }
  .introduce>div>span:nth-of-type(2)::before,
  .introduce>div>span:nth-of-type(3)::before{
    display: flex;
    width: calc(100 * var(--site-font-size-ratio));
    margin-bottom: calc(0 * var(--site-font-size-ratio));
  }
  .introduce>div>p{
    margin-top: calc(0 * var(--site-font-size-ratio));
    grid-area: introduce-p;
  }
  /* introduce */

  /* price */
  .price{
    margin-top: calc(calc(4734 - 3190 - 1464) * var(--site-font-size-ratio));
    padding: calc(calc(4854 - 4734) * var(--site-font-size-ratio)) calc(100 * var(--site-font-size-ratio));
  }
  .price>h2{
    font-size: calc(16 * var(--site-font-size-ratio));
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    gap: calc(20 * var(--site-font-size-ratio));
  }
  .price>h2::before{
    width: fit-content;
  }
  .price>p{
    font-size: calc(32 * var(--site-font-size-ratio));
    line-height: calc(48 * var(--site-font-size-ratio));
    margin-top: calc(calc(4926 - 4854 - 32) * var(--site-font-size-ratio));
  }
  .price>div{
    margin: calc(calc(5110 - 4926 - 144) * var(--site-font-size-ratio)) auto 0;
    width: calc(1240 * var(--site-font-size-ratio));
    padding: calc(calc(5190 - 5110) * var(--site-font-size-ratio)) calc(calc(246 - 100) * var(--site-font-size-ratio));
    border-radius: calc(40 * var(--site-font-size-ratio));
  }
  .price>div>span:nth-of-type(1){
    font-size: calc(32 * var(--site-font-size-ratio));
    line-height: calc(48 * var(--site-font-size-ratio));
  }
  .price>div>div.js-scrollable{
    margin-top: calc(calc(5278 - 5190 - 48) * var(--site-font-size-ratio));
  }
  .price>div>div.js-scrollable>table::after{
    width: calc(949 / 4 * var(--site-font-size-ratio));
    left: calc(949 / 4 * var(--site-font-size-ratio));
  }
  .price>div>div.js-scrollable>table th,
  .price>div>div.js-scrollable>table td{
    width: calc(949 / 4 * var(--site-font-size-ratio));
    font-size: calc(16 * var(--site-font-size-ratio));
  }
  .price>div>div.js-scrollable>table th:first-child{
    padding-left: calc(calc(276 - 246) * var(--site-font-size-ratio));
  }
  .price>div>div.js-scrollable>table tr:nth-child(1) th,
  .price>div>div.js-scrollable>table tr:nth-child(1) td{
    font-size: calc(20 * var(--site-font-size-ratio));
  }
  .price .scroll-hint-icon-wrap{
    display: none;
  }
  .price>div>small{
    margin-top: calc(calc(5683 - 5278 - 393) * var(--site-font-size-ratio));
    align-items: end;
    gap: calc(30 * var(--site-font-size-ratio));
  }
  .price>div>small::after{
    width: calc(277.128173828126 * var(--site-font-size-ratio));
    height: calc(45.00000000000017 * var(--site-font-size-ratio));
    align-self: center;
  }
  .price>div>span:nth-of-type(2){
    margin-top: calc(calc(5786 - 5766 - 0) * var(--site-font-size-ratio));
    font-size: calc(32 * var(--site-font-size-ratio));
    line-height: calc(48 * var(--site-font-size-ratio));
  }
  .price>div>span:nth-of-type(3){
    margin-top: calc(calc(5874 - 5786 - 48) * var(--site-font-size-ratio));
  }
  .price>div>span:nth-of-type(4){
    margin-top: calc(calc(5899 - 5874 - 21) * var(--site-font-size-ratio));
  }
  .price>div>picture>img{
    display: block;
    margin: calc(calc(5934 - 5899 - 15) * var(--site-font-size-ratio)) auto 0;
    width: calc(547 * var(--site-font-size-ratio));
  }
  .price>div>span:nth-of-type(5){
    margin-top: calc(calc(6109 - 5934 - 165) * var(--site-font-size-ratio));
    font-size: calc(14 * var(--site-font-size-ratio));
  }
  .price>div>ul{
    width: calc(544 * var(--site-font-size-ratio));
    margin: calc(calc(6140 - 6109 - 21) * var(--site-font-size-ratio)) auto 0;
  }
  .price>div>ul>li{
    height: calc(60 * var(--site-font-size-ratio));
  }
  .price>div>ul>li::after{
    width: calc(17 * var(--site-font-size-ratio));
    transform: translateX(calc(100% - 1px));
  }
  /* price */

  /* flow */
  .flow{
    margin-top: calc(calc(6849 - 6368 - 401) * var(--site-font-size-ratio));
    padding: 0 calc(100 * var(--site-font-size-ratio));
  }
  .flow>h2{
    gap: calc(20 * var(--site-font-size-ratio));
    font-size: calc(16 * var(--site-font-size-ratio));
    flex-direction: row;
    justify-content: center;
  }
  .flow>ol{
    width: calc(800 * var(--site-font-size-ratio));
    margin: calc(calc(6921 - 6849 - 32) * var(--site-font-size-ratio)) auto 0;
    border-radius: calc(40 * var(--site-font-size-ratio));
    padding: calc(calc(360 - 320) * var(--site-font-size-ratio));
  }
  .flow>ol::after{
    background-image: url(../images/flow-ul-after-desktop.png);
    height: calc(120 * var(--site-font-size-ratio));
  }
  .flow>ol>li{
    font-size: calc(24 * var(--site-font-size-ratio));
    margin-bottom: calc(calc(100 - 60) * var(--site-font-size-ratio));
    border-radius: calc(20 * var(--site-font-size-ratio));
    height: calc(120 * var(--site-font-size-ratio));
  }
  .flow>ol>li::before{
    font-size: calc(50 * var(--site-font-size-ratio));
    padding-left: calc(20 * var(--site-font-size-ratio));
    padding-right: calc(35 * var(--site-font-size-ratio));
  }
  /* flow */

  /* FAQ */
  .FAQ{
    width: calc(800 * var(--site-font-size-ratio));
    margin: auto;
    padding-top: calc(calc(7901 - 6921 - 900) * var(--site-font-size-ratio));  
  }
  .FAQ::before{
    width: calc(200 * var(--site-font-size-ratio));
    height: calc(200 * var(--site-font-size-ratio));
    transform: translate(50%, 25%);
  }
  .FAQ::after{
    width: calc(148 * var(--site-font-size-ratio));
    height: calc(148 * var(--site-font-size-ratio));
    top: initial;
    bottom: 0;
    transform: translate(-25%, 75%);
  }
  .FAQ>h2{
    font-size: calc(16 * var(--site-font-size-ratio));
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    gap: calc(20 * var(--site-font-size-ratio));
  }
  .FAQ>dl{
    width: 100%;
    padding: calc(30 * var(--site-font-size-ratio)) calc(40 * var(--site-font-size-ratio));
  }
  .FAQ>dl:nth-of-type(1){
    margin-top: calc(calc(7973 - 7901 - 32) * var(--site-font-size-ratio));
  }
  .FAQ>dl:nth-of-type(1)~dl{
    margin-top: calc(20 * var(--site-font-size-ratio));
  }
  .FAQ>dl>dt{
    font-size: calc(24 * var(--site-font-size-ratio));
    gap: calc(calc(56 - 36) * var(--site-font-size-ratio));
  }
  .FAQ>dl>dt::before{
    font-size: calc(40 * var(--site-font-size-ratio));
  }
  .FAQ>dl>dd{
    font-size: calc(18 * var(--site-font-size-ratio));
  }
  /* FAQ */

  /* form */
  .form{
    width: calc(1078 * var(--site-font-size-ratio));
    margin: calc(calc(8861 - 7973 - 731) * var(--site-font-size-ratio)) auto 0;
    border-radius: calc(40 * var(--site-font-size-ratio));
    padding: calc(80 * var(--site-font-size-ratio)) calc(27 * var(--site-font-size-ratio));
  }
  .form>span{
    gap: calc(10 * var(--site-font-size-ratio));
    font-size: calc(16 * var(--site-font-size-ratio));
  }
  .form fieldset:has(input[type="radio"]){
    flex-direction: row;
    gap: calc(30 * var(--site-font-size-ratio));
    margin-top: calc(calc(206 - 80 - 66) * var(--site-font-size-ratio));
  }
  .form fieldset:has(input[type="radio"])>label{
    cursor: pointer;
  }
  .form fieldset:has(input[type="text"]){
    gap: calc(20 * var(--site-font-size-ratio));
    margin-top: calc(calc(250 - 206 - 24) * var(--site-font-size-ratio));
  }
  .form fieldset:has(input[type="text"])>label{
    font-size: calc(16 * var(--site-font-size-ratio));
    width: calc(530 * var(--site-font-size-ratio));
    margin: auto;
  }
  .form>form>span{
    font-size: calc(16 * var(--site-font-size-ratio));
    margin-top: calc(calc(830 - 250 - 550) * var(--site-font-size-ratio));
  }
  .form>form>.btn{
    margin-top: calc(calc(874 - 830 - 24) * var(--site-font-size-ratio));
    width: calc(352 * var(--site-font-size-ratio));
    height: calc(51 * var(--site-font-size-ratio));
    padding-left: calc(calc(96.08 - 20) * var(--site-font-size-ratio));
    font-size: calc(18 * var(--site-font-size-ratio));
    cursor: pointer;
  }
  .form>form>.btn::before{
    width: calc(30 * var(--site-font-size-ratio));
    height: calc(30 * var(--site-font-size-ratio));
    left: calc(calc(64.32 - 53) * var(--site-font-size-ratio));
  }
  /* form */

  /* footer */
  .inspark-school footer{
    margin: calc(calc(9986 - 8861 - 1005) * var(--site-font-size-ratio)) auto 0;
    max-width: 100%;
    display: grid;
    justify-content: space-between;
    grid-template-areas:
      "footer-img footer-span"
      "footer-img footer-dl"
      "footer-img footer-small";
    padding: calc(calc(10046 - 9986) * var(--site-font-size-ratio)) calc(100 * var(--site-font-size-ratio));
  }
  .inspark-school footer>span{
    grid-area: footer-span;
    font-weight: 700;
    font-size: calc(16 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
  }
  .inspark-school footer>img{
    grid-area: footer-img;
    width: calc(140 * var(--site-font-size-ratio));
    align-self: flex-start;
    margin-top: 0;
  }
  .inspark-school footer>.btn:is(.btn-dl){
    grid-area: footer-dl;
  }
  .inspark-school footer>small{
    grid-area: footer-small;
    font-weight: 700;
    font-size: calc(16 * var(--site-font-size-ratio));
    text-align: right;
    display: block;
    margin-top: calc(calc(10171 - 10080 - 51) * var(--site-font-size-ratio));
  }
  .inspark-school footer>.btn:is(.btn-dl){
    margin-top: calc(calc(874 - 830 - 24) * var(--site-font-size-ratio));
    background: linear-gradient(to right, #BB0000 calc(52 * var(--site-font-size-ratio)), #FF2929 calc(52 * var(--site-font-size-ratio)) 100%);
    width: calc(352 * var(--site-font-size-ratio));
    height: calc(51 * var(--site-font-size-ratio));
    padding-left: calc(calc(96.08 - 20) * var(--site-font-size-ratio));
    font-size: calc(18 * var(--site-font-size-ratio));
    cursor: pointer;
  }
  .inspark-school footer>.btn:is(.btn-dl)::before{
    width: calc(30 * var(--site-font-size-ratio));
    height: calc(30 * var(--site-font-size-ratio));
    left: calc(calc(64.32 - 53) * var(--site-font-size-ratio));
  }
  /* footer */
}

@media screen and (max-width: 1959px){
  :root{
    --site-font-size-ratio: calc(100vw / var(--site-division));
  }
}

@media screen and (min-width: 1960px){
  :root{
    --site-font-size-ratio: 1px;
  }
  .inspark-school main{
    max-width: 1960px;
  }
}