@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: 393;
}
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;
  background-size: cover;
  background-repeat: repeat-y;
}

.scrollTo-contact{
  display: block;
  cursor: pointer;
}
.is-mobile{
  display: block;
}
.is-desktop{
  display: none;
}

main>*:not(.background-attachment,.partner,.flow,footer,.consultation){
  background-color: #ffffff;
}

/* contact */
.inspark-school .contact{
  width: calc(100% - 4vw);
  margin: auto;
}
.inspark-school .contact>form>fieldset:first-of-type~p{
  margin-top: 0;
}
.inspark-school .contact>form>p>a{
  color: #ffffff;
}
.inspark-school .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 .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 .contact>form>fieldset>div>textarea{
  height: calc(140 * var(--site-font-size-ratio));
}
/* contact */

/* overlay */
.overlay{
  position: fixed;
  bottom: 0;
  display: none;
  z-index: 9999;
  max-width: 600px;
  padding: 2vw 5vw;
  background-color: #000000;
}
@keyframes overlay_fadeIn{
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.overlay_fadeIn{
  animation:overlay_fadeIn 0.5s linear;
}
/* overlay */

/* apply-form */
.apply-form{
  background-color: #ffffff;
  border-radius: 3vw;
  padding:5vw 2vw;
  width: 90vw;
}
.apply-form>span:nth-child(1){
  display: block;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 4vw;
}
.apply-form>span:nth-child(2){
  display: block;
  width: 100%;
  text-align: center;
  font-size: 2.5vw;
  margin-bottom: 3vw;
}
.apply-form>form>div{
  margin: 3vw auto;
}
.apply-form>form>div>label{
  display: block;
  width: fit-content;
  font-size: 3vw;
  font-weight: bold;
}
.apply-form>form>div>label::after{
  content: "*";
  color: red;
  padding-left: 1vw;
}
.apply-form>form>div>label+input,
.apply-form>form>div>label+select,
.apply-form>form>div>label+textarea{
  width: 100%;
  border:1px solid gray;
  padding: 2vw 2vw;
  font-size: 4vw;
  border-radius: 1vw;
}
.apply-form>form>p{
  text-align: center;
  font-size: 2vw;
}
.apply-form>form>p>a{
  font-weight: bold;
  color: #EF215C;
}
.apply-form>form>input[type='submit']{
  background-color: #EF215C;
  color: #ffffff;
  font-weight: bold;
  font-size: 3vw;
  text-align: center;
  display: block;
  width: 80%;
  margin: 3vw auto;
  padding: 2vw;
  border: none;
  border-radius: 1.5vw;
}
/* apply-form */

/* header */
.inspark-school header{
  width: 100%;
  margin: auto;
  padding-top: calc(18 * var(--site-font-size-ratio));
  padding-bottom: calc(calc(67 - 32 - 20) * var(--site-font-size-ratio));
  padding-left: calc(18 * var(--site-font-size-ratio));
  padding-right: calc(18 * var(--site-font-size-ratio));
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  z-index: 999;
}
.inspark-school header>h1{
  width: calc(60 * var(--site-font-size-ratio));
}
.inspark-school header>h1>img{
  width: 100%;
}
.inspark-school header>.buttons{
  width: calc(250 * var(--site-font-size-ratio));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.inspark-school header>.buttons>a:is(.is-mobile){
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(120 * var(--site-font-size-ratio));
  height: calc(45 * var(--site-font-size-ratio));
  border-radius: 9999px;
  color: #ffffff;
  font-weight: 700;
  font-size: calc(12 * var(--site-font-size-ratio));
}
.inspark-school header>.buttons>a:is(.is-mobile):nth-of-type(1){
  background-color: #FF9900;
}
.inspark-school header>.buttons>a:is(.is-mobile):nth-of-type(2){
  background-color: #EC3B82;
}
/* header */

/* fv */
.fv{
  padding-left: calc(11 * var(--site-font-size-ratio));
  padding-top: calc(calc(96) * var(--site-font-size-ratio));
  background-image: url(../images/fv1.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position-x: calc(0 * var(--site-font-size-ratio));
  background-position-y: calc(70 * var(--site-font-size-ratio));
  position: relative;
  z-index: 2;
}
.fv>span:first-child{
  font-weight: 700;
  font-size: calc(12 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color: #313B4F;
}
.fv>p{
  font-weight: 700;
  font-size: calc(20 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color: #313B4F;
  text-shadow:
    calc(1 * var(--site-font-size-ratio)) 0 0 #ffffff,
    calc(1 * var(--site-font-size-ratio)) calc(1 * var(--site-font-size-ratio)) 0 #ffffff,
    0 calc(1 * var(--site-font-size-ratio)) 0 #ffffff,
    calc(-1 * var(--site-font-size-ratio)) calc(1 * var(--site-font-size-ratio)) 0 #ffffff,
    calc(-1 * var(--site-font-size-ratio)) 0 0 #ffffff,
    calc(-1 * var(--site-font-size-ratio)) calc(-1 * var(--site-font-size-ratio)) 0 #ffffff,
    0 calc(-1 * var(--site-font-size-ratio)) 0 #ffffff,
    calc(-1 * var(--site-font-size-ratio)) calc(-1 * var(--site-font-size-ratio)) 0 #ffffff;
}
.fv>p>span{
  background: linear-gradient(to bottom, transparent 60%, #F8DF08 60% 95%, transparent 95% 100%);
}
.fv>span:nth-of-type(2),
.fv>span:nth-of-type(3),
.fv>span:nth-of-type(4){
  font-weight: 700;
  font-size: calc(12 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color: #595109;
  background-color: #F8DF08;
  padding: calc(4 * var(--site-font-size-ratio)) calc(10 * var(--site-font-size-ratio));
  border-radius: 100px;
  display: block;
  width: fit-content;
  position: relative;
}
.fv>span:nth-of-type(2)::after,
.fv>span:nth-of-type(3)::after,
.fv>span:nth-of-type(4)::after{
  content: "";
  display: block;
  width: calc(22.8 * var(--site-font-size-ratio));
  height: calc(8.92 * var(--site-font-size-ratio));
  background-image: url(../images/fv-text-after.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  right: 0;
  transform: scale(2) translate(55%, -25%);
}
.fv>span:nth-of-type(2){
  margin-top: calc(calc(247 - 132 - 90) * var(--site-font-size-ratio));
}
.fv>span:nth-of-type(3),
.fv>span:nth-of-type(4){
  margin-top: calc(calc(282 - 247 - 26) * var(--site-font-size-ratio));
}
.fv>.buttons{
  margin: auto;
  margin-top: calc(calc(414 - 233 - 111) * var(--site-font-size-ratio));
  width: calc(308 * var(--site-font-size-ratio));
  transform: translateY(50%);
  position: relative;
  z-index: 1;
}
/* fv */

/* client_logos */
.client_logos{
  position: relative;
  z-index: 1;
  padding-top: calc(30 * var(--site-font-size-ratio));
}
.client_logos .js-marquee{
  display: flex;
  flex-wrap: nowrap;
}
.client_logos .js-marquee>.slide{
  height: calc(30 * 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 */

/* whatIsInspark */
.whatIsInspark{
  width: 100%;
  position: relative;
  padding-top: calc(calc(505 - 378 - 65) * var(--site-font-size-ratio));
  padding-left: calc(18 * var(--site-font-size-ratio));
  padding-right: calc(18 * var(--site-font-size-ratio));
}
.whatIsInspark::before{
  content: "";
  display: block;
  width: calc(300 * var(--site-font-size-ratio));
  height: calc(300 * var(--site-font-size-ratio));
  border-radius: 50%;
  position: absolute;
  top: calc(-95 * var(--site-font-size-ratio));
  right: calc(-150 * var(--site-font-size-ratio));
  background: linear-gradient(to bottom,transparent 0 50%,#F8DF08 50% 100%);
  z-index: 0;
}
.whatIsInspark::after{
  content: "";
  display: block;
  width: calc(357 * var(--site-font-size-ratio));
  height: calc(34.32 * var(--site-font-size-ratio));
  background-image: url(../images/whatIsInspark-after.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: calc(462 * var(--site-font-size-ratio));
  left: 50%;
  transform: translateX(-50%);
}
.whatIsInspark>span:nth-of-type(1){
  font-weight: 700;
  font-size: calc(16 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color: #313B4F;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: calc(calc(591 - 505 - 56) * var(--site-font-size-ratio));
  gap: calc(10 * var(--site-font-size-ratio));
  position: relative;
}
.whatIsInspark>span:nth-of-type(1)::before{
  content: "What’s? Inspark";
  color: #EC3B82;
  font-size: calc(32 * var(--site-font-size-ratio));
  line-height: calc(32 * var(--site-font-size-ratio));
  letter-spacing: 0.02em;
}
.whatIsInspark>video{
  width: calc(180.59 * var(--site-font-size-ratio));
  height: calc(321.32 * var(--site-font-size-ratio));
  border-radius: calc(20 * var(--site-font-size-ratio));
  margin: auto;
  display: block;
}
.whatIsInspark>h2{
  font-weight: 700;
  font-size: calc(18 * var(--site-font-size-ratio));
  line-height: calc(27 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color: #313B4F;
  margin-top: calc(calc(953 - 591 - 321.32) * var(--site-font-size-ratio));
}
.whatIsInspark>h2>span{
  background: linear-gradient(to bottom,transparent 70%,#ee86a8 70% 100%);
}
.whatIsInspark>span:nth-of-type(2),
.whatIsInspark>span:nth-of-type(3){
  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;
  color: #313B4F;
  display: inline-block;
  margin-top: calc(15 * var(--site-font-size-ratio));
}
.whatIsInspark>ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: calc(10 * var(--site-font-size-ratio));
  margin-top: calc(calc(1274 - 1108 - 156) * var(--site-font-size-ratio));
}
.whatIsInspark>ul>li{
  width: calc(166 * var(--site-font-size-ratio));
  height: calc(74 * var(--site-font-size-ratio));
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 150px;
  border: calc(0.3 * var(--site-font-size-ratio)) solid #EC3B82;
  text-align: center;
  color: #EC3B82;
  font-weight: 700;
  font-size: calc(14 * var(--site-font-size-ratio));
}
/* whatIsInspark */

/* necessity */
.necessity{
  padding: 0 calc(18 * var(--site-font-size-ratio));
  padding-top: calc(calc(1492 - 1274 - 200) * var(--site-font-size-ratio));
}
.necessity>img{
  display: block;
  margin: auto;
  width: calc(180 * var(--site-font-size-ratio));
}
.necessity>span{
  display: block;
  margin-top: calc(calc(1877 - 1492 - 384.56) * var(--site-font-size-ratio));
  color: #EC3B82;
  font-weight: 700;
  font-size: calc(12 * var(--site-font-size-ratio));
  line-height: calc(16 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
}
.necessity>p:nth-of-type(1){
  margin-top: calc(calc(1903 - 1877 - 16) * var(--site-font-size-ratio));
  font-weight: 700;
  font-size: calc(18 * var(--site-font-size-ratio));
  line-height: calc(27 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
}
.necessity>p:nth-of-type(1)>span{
  background: linear-gradient(to bottom,transparent 70%,#ee86a8 70% 100%);
}
.necessity>p:nth-of-type(2){
  margin-top: calc(calc(2004 - 1903 - 81) * var(--site-font-size-ratio));
  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;
}
/* necessity */

/* works */
.works{
  padding-top: calc(calc(1204 - 1081 - 63) * var(--site-font-size-ratio));
}
.works>h2{
  font-weight: 700;
  color: #313B4F;
  font-size: calc(18 * var(--site-font-size-ratio));
  line-height: calc(26 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.works>h2::before{
  content: "WORKS";
  font-family: var(--site-font-family-Josefin-Sans);
  font-weight: 700;
  color: #469CCF;
  font-size: calc(40 * var(--site-font-size-ratio));
  display: block;
  width: 100%;
  text-align: center;
}
.works_splide{
  margin-top: calc(calc(1302 - 1244 - 18) * var(--site-font-size-ratio));
}
.works_splide .splide__list .splide__slide>img{
  border-radius: calc(20 * var(--site-font-size-ratio));
}
.works_splide .splide__list .splide__slide>span{
  display: block;
  width: 100%;
  margin-top: calc(10 * var(--site-font-size-ratio));
  text-align: center;
  font-weight: 700;
  color: #313B4F;
  font-size: calc(14 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
}
/* works */

/* genre */
.genre{
  width: 100%;
  margin: 0 auto;
  padding-top: calc(calc(1696 - 1302 - 354) * var(--site-font-size-ratio));
  padding-bottom: calc(calc(2205 - 1863 - 282) * var(--site-font-size-ratio));
  padding-right: calc(18 * var(--site-font-size-ratio));
  padding-left: calc(18 * var(--site-font-size-ratio));
}
.genre>span{
  font-weight: 700;
  color: #313B4F;
  font-size: calc(16 * var(--site-font-size-ratio));
  line-height: calc(32 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  position: relative;
  display: block;
  width: 100%;
}
.genre>span::after{
  content: "";
  display: block;
  width: calc(120.35 * var(--site-font-size-ratio));
  height: calc(126.78 * var(--site-font-size-ratio));
  background-image: url(../images/genre-tittle.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  top: 0%;
  transform: translate(0%,0%);
}
.genre>.buttons{
  width: calc(197 * var(--site-font-size-ratio));
  margin-left: 0;
  margin-right: auto;
  margin-top: calc(calc(1780 - 1696 - 64) * var(--site-font-size-ratio));
}
.genre>ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(20 * var(--site-font-size-ratio));
  margin-top: calc(calc(1863 - 1696 - 126.78) * var(--site-font-size-ratio));
}
.genre>ul>li{
  width: calc(100 * var(--site-font-size-ratio));
  text-align: center;
  font-weight: 700;
  color: #313B4F;
  font-size: calc(14 * var(--site-font-size-ratio));
}
.genre>ul>li>img{
  width: 100%;
  margin-bottom: calc(10 * var(--site-font-size-ratio));
}
/* genre */

/* background-attachment */
.background-attachment{
  width: 100%;
  height: calc(240 * var(--site-font-size-ratio));
}
.background-attachment::after{
  display: block;
  content: '';
  width: 100%;
  height: 100vh;
  background-image: url(../images/background-attachment.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  z-index: -99999;
}
/* background-attachment */

/* partner */
.partner{
  background-color: #F8DF08;
  display: grid;
  grid-template-areas:
    "partner-title partner-title"
    "partner-content partner-content"
    "partner-div partner-div"
    "partner-ul partner-ul"
    "partner-ol partner-ol";
  justify-content: center;
  padding:0 calc(18 * var(--site-font-size-ratio)) calc(calc(2445 + 686 - 3042 - 29) * var(--site-font-size-ratio));
}
.partner>h2{
  grid-area: partner-title;
  color: #313B4F;
  font-weight: 700;
  font-size: calc(18 * var(--site-font-size-ratio));
  line-height: calc(26 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: calc(calc(2505 - 2445) * var(--site-font-size-ratio));
}
.partner>h2::before{
  content: "PARTNER";
  font-family: var(--site-font-family-Josefin-Sans);
  color: #ffffff;
  font-weight: 700;
  font-size: calc(40 * var(--site-font-size-ratio));
  display: block;
  width: 100%;
  text-align: center;
}
.partner>p{
  grid-area: partner-content;
  color: #313B4F;
  font-weight: 400;
  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(2717 - 2603 - 84) * var(--site-font-size-ratio));
}
.partner>ol{
  grid-area: partner-ol;
  display: flex;
  flex-wrap: nowrap;
  column-gap: calc(10 * var(--site-font-size-ratio));
  margin-top: calc(calc(3042 - 2917 - 105) * var(--site-font-size-ratio));
}
.partner>ol>li{
  color: #595109;
  font-weight: 700;
  font-size: calc(14 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  background-color: #ffffff;
  border-radius: calc(20 * var(--site-font-size-ratio));
  width: calc(112.33 * var(--site-font-size-ratio));
  height: calc(29 * var(--site-font-size-ratio));
  display: flex;
  align-items: center;
  justify-content: center;
}
.partner>ol>li:not(.on){
  cursor: pointer;
}
.partner>ol>li.on{
  color: #ffffff;
  background-color: #E0261B;
}
.partner>ul{
  grid-area: partner-ul;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  column-gap: calc(10 * var(--site-font-size-ratio));
  margin-top: calc(calc(2917 - 2717 - 180) * var(--site-font-size-ratio));
}
.partner>ul>li{
  width: calc(80 * var(--site-font-size-ratio));
  text-align: center;
  color: #313B4F;
  font-weight: 700;
  font-size: calc(14 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
}
.partner>ul>li:not(.on){
  cursor: pointer;
}
.partner>ul>li>img{
  width: 100%;
  height: calc(80 * var(--site-font-size-ratio));
  border-radius: 50%;
}
.partner>div{
  grid-area: partner-div;
  padding: 0;
  text-align: center;
  color: #313B4F;
  margin-top: calc(calc(2717 - 2603 - 84) * var(--site-font-size-ratio));
  display: grid;
  grid-template-areas:
    "partner-div-img partner-div-title"
    "partner-div-img partner-div-content"
    "partner-div-img partner-div-btn";
  column-gap: calc(calc(140 - 101.41 - 18) * var(--site-font-size-ratio));
}
.partner>div>img{
  width: calc(101.41 * var(--site-font-size-ratio));
  height: calc(180 * var(--site-font-size-ratio));
  border-radius: calc(10 * var(--site-font-size-ratio));
  grid-area: partner-div-img;
}
.partner>div>span{
  font-weight: 700;
  font-size: calc(16 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  display: block;
  margin-top: calc(calc(4081 - 3574 - 497) * var(--site-font-size-ratio));
  grid-area: partner-div-title;
  text-align: left;
}
.partner>div>p{
  font-weight: 700;
  font-size: calc(14 * var(--site-font-size-ratio));
  line-height: calc(21 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  text-align: left;
  margin-top: calc(calc(4118 - 4081 - 27) * var(--site-font-size-ratio));
  grid-area: partner-div-content;
}
.partner>div>a.apply_btn{
  border-radius: 100px;
  font-weight: 700;
  font-size: calc(14 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color:#ffffff;
  background-color:#313B4F;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(40 * var(--site-font-size-ratio));
  margin-top: calc(calc(4180 - 4118 - 42) * var(--site-font-size-ratio));
  cursor: pointer;
  grid-area: partner-div-btn;
}
/* partner */

/* strong-point */
.strong-point{
  padding-top: calc(calc(3205 - 2445 - 686) * var(--site-font-size-ratio));
  position: relative;
  overflow: hidden;
}
.strong-point::before{
  content: "";
  display: block;
  width: calc(258 * var(--site-font-size-ratio));
  height: calc(120 * var(--site-font-size-ratio));
  background-image: url(../images/strong-point.png);
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  left: calc(0 * var(--site-font-size-ratio));
  top: calc(38 * var(--site-font-size-ratio));
}
.strong-point>h2{
  font-weight: 700;
  font-size: calc(18 * var(--site-font-size-ratio));
  line-height: calc(36 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color:#313B4F;
  display: block;
  text-align: center;
}
.strong-point>ol{
  width: calc(338 * var(--site-font-size-ratio));
  margin: calc(calc(3300 - 3205 - 36) * var(--site-font-size-ratio)) auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(calc(254 - 224) * var(--site-font-size-ratio));
  counter-reset: point;
}
.strong-point>ol>li{
  margin-right: 0;
  margin-left: auto;
  border: calc(2 * var(--site-font-size-ratio)) solid #8EC43E;
  border-radius: calc(30 * var(--site-font-size-ratio));
  padding-top: calc(30 * var(--site-font-size-ratio));
  padding-bottom: calc(30 * var(--site-font-size-ratio));
  padding-left: calc(20 * var(--site-font-size-ratio));
  padding-right: calc(20 * var(--site-font-size-ratio));
  position: relative;
}
.strong-point>ol>li::before{
  font-family: var(--site-font-family-Josefin-Sans);
  counter-increment: point;
  content: "0"counter(point);
  font-weight: 700;
  font-size: calc(40 * var(--site-font-size-ratio));
  letter-spacing: initial;
  color:#8EC43E;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.strong-point>ol>li>span{
  font-weight: 700;
  font-size: calc(16 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color:#313B4F;
}
.strong-point>ol>li>p{
  font-weight: 400;
  font-size: calc(14 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color:#313B4F;
  margin-top: calc(calc(34 - 24) * var(--site-font-size-ratio));
}
/* strong-point */

/* introduce */
.introduce{
  position: relative;
  padding: calc(calc(3960 - 3281 - 619) * var(--site-font-size-ratio)) calc(18 * var(--site-font-size-ratio)) 0;
}
.introduce>h2{
  font-weight: 700;
  font-size: calc(18 * var(--site-font-size-ratio));
  line-height: calc(36 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color:#313B4F;
  display: block;
  text-align: center;
}
.introduce>div:nth-of-type(1){
  margin-top: calc(calc(4006 - 3960 - 36) * var(--site-font-size-ratio));
}
.introduce>div:nth-of-type(2){
  margin-top: calc(calc(4554 - 4006 - 518) * var(--site-font-size-ratio));
}
.introduce>div>img{
  width: 100%;
  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;
  color:#313B4F;
  padding-top: calc(calc(4237 - 4006 - 221) * var(--site-font-size-ratio));
}
.introduce>div>span:nth-of-type(2){
  font-weight: 700;
  font-size: calc(14 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color:#313B4F;
  padding-top: calc(calc(4269 - 4237 - 24) * var(--site-font-size-ratio));
}
.introduce>div>span:nth-of-type(3){
  font-weight: 400;
  font-size: calc(14 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color:#313B4F;
  margin-top: calc(calc(4300 - 4269 - 21) * var(--site-font-size-ratio));
}
.introduce>div>span:nth-of-type(4){
  font-weight: 700;
  font-size: calc(18 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color:#EC3B82;
  margin-top: calc(calc(4367 - 4336 - 21) * var(--site-font-size-ratio));
}
.introduce>div>span:nth-of-type(3)::before,
.introduce>div>span:nth-of-type(4)::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(3)::before{
  background-color: #7F7F7F;
  content: 'BEFORE';
}
.introduce>div>span:nth-of-type(4)::before{
  background-color: #EC3B82;
  content: 'AFTER';
}
.introduce>div>p{
  font-weight: 400;
  font-size: calc(14 * var(--site-font-size-ratio));
  line-height: calc(20.72 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color:#313B4F;
  margin-top: calc(calc(4440 - 4403 - 27) * var(--site-font-size-ratio));
}
/* introduce */

/* price */
.price{
  padding-top: calc(calc(5159 - 4554 - 545) * var(--site-font-size-ratio));
  padding-left: calc(18 * var(--site-font-size-ratio));
  padding-right: calc(18 * var(--site-font-size-ratio));
  padding-bottom: calc(calc(6181 - 5368 - 753) * var(--site-font-size-ratio));
  position: relative;
}
.price>h2{
  font-weight: 700;
  font-size: calc(18 * var(--site-font-size-ratio));
  line-height: calc(18 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color:#313B4F;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.price>h2::before{
  font-family: var(--site-font-family-Josefin-Sans);
  content: "PRICE";
  font-weight: 700;
  font-size: calc(40 * var(--site-font-size-ratio));
  line-height: initial;
  letter-spacing: initial;
  color:#EE86A8;
  width: 100%;
  text-align: center;
}
.price>p{
  font-weight: 700;
  font-size: calc(18 * var(--site-font-size-ratio));
  line-height: calc(27 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color:#313B4F;
  text-align: center;
  margin-top: calc(calc(5257 - 5199 - 18) * var(--site-font-size-ratio));
}
.price>div{
  overflow-x: scroll;
  padding-top: calc(20 * var(--site-font-size-ratio));
  margin-top: calc(calc(5368 - 5257 - 81) * var(--site-font-size-ratio));
}
.price>div::-webkit-scrollbar{
  display: none;
}
.price>div>table{
  border-collapse: collapse;
  width: max-content;
}
.price>div>table th,
.price>div>table td{
  padding: calc(calc(100 - 55 - 36) * var(--site-font-size-ratio)) 0;
  border-bottom: 1px dashed #E2E2E2;
}
.price>div>table tr:first-child>th,
.price>div>table tr:first-child>td{
  padding-top: calc(calc(100 - 55 - 18) * var(--site-font-size-ratio));
}
.price>div>table tr:last-child>th,
.price>div>table tr:last-child>td{
  border: none;
}
.price>div>table th{
  width: calc(calc(438 - 160 - 160) * var(--site-font-size-ratio));
  text-align: left;
  font-weight: 700;
  font-size: calc(12 * var(--site-font-size-ratio));
  color:#313B4F;
  padding-left: calc(20 * var(--site-font-size-ratio));
}
.price>div>table td{
  width: calc(120 * var(--site-font-size-ratio));
  text-align: center;
  font-weight: 400;
  font-size: calc(10 * var(--site-font-size-ratio));
  color:#313B4F;
  position: relative;
}
.price>div>table td>img{
  display: block;
  margin: auto;
  margin-bottom: calc(5 * var(--site-font-size-ratio));
  width: calc(24 * var(--site-font-size-ratio));
}
.price>div>table td:nth-child(2){
  background-color: #EFF6FF;
}
.price>div>table td:nth-child(3){
  background-color: #FFEFF4;
}
.price>div>table td>div{
  width: calc(116 * var(--site-font-size-ratio));
  height: calc(40 * var(--site-font-size-ratio));
  display: flex;
  justify-content: center;
  align-items: baseline;
  padding-top: calc(6 * var(--site-font-size-ratio));
  border-radius: 100px;
  font-weight: 700;
  font-size: calc(18 * var(--site-font-size-ratio));
  line-height: initial;
  letter-spacing: 0.1em;
  color:#ffffff;
  background-color: #469CCF;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,-50%);
}
.price>div>table td:nth-child(3)>div{
  background-color: #EE86A8;
}
.price>div>table td>div>span{
  font-size: calc(14 * var(--site-font-size-ratio));
}
.price>div>table tr:last-child>td{
  font-weight: 700;
  font-size: calc(16 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  color:#313B4F;
  text-align: center;
}
.price>div>table tr:first-child>td:last-child{
  border-top-right-radius: calc(20 * var(--site-font-size-ratio));
}
.price>div>table tr:last-child>td:last-child{
  border-bottom-right-radius: calc(20 * var(--site-font-size-ratio));
  color: #EE86A8;
}
.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>img{
  display: block;
  width: calc(calc(393 - 18 - 18) * var(--site-font-size-ratio) * 0.8);
  margin: auto;
  margin-top: calc(44 * var(--site-font-size-ratio));
}
/* price */

/* flow */
.flow{
  background-color: #469CCF;
  padding-top: calc(calc(6181 - 5368 - 753) * var(--site-font-size-ratio));
  padding-bottom: calc(calc(6181 + 906 - 6387 - 620) * var(--site-font-size-ratio));
}
.flow>h2{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: #313B4F;
  font-weight: 700;
  font-size: calc(18 * var(--site-font-size-ratio));
  line-height: calc(26 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
}
.flow>h2::before{
  content: "FLOW";
  color: #ffffff;
  font-family: var(--site-font-family-Josefin-Sans);
  font-weight: 700;
  font-size: calc(40 * var(--site-font-size-ratio));
  letter-spacing: initial;
  display: block;
  text-align: center;
  width: 100%;
}
.flow>ul,
.flow>ol{
  width: calc(358 * var(--site-font-size-ratio));
  margin: auto;
}
.flow>ul{
  display: flex;
  flex-wrap: nowrap;
  margin-top: calc(calc(6339 - 6281 - 18) * var(--site-font-size-ratio));
}
.flow>ul>li{
  width: 50%;
  height: calc(48 * var(--site-font-size-ratio));
  border-top-left-radius: calc(40 * var(--site-font-size-ratio));
  border-top-right-radius: calc(40 * var(--site-font-size-ratio));
  background-color: #104463;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: calc(16 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
}
.flow>ul>li.on{
  background-color: #ffffff;
  color: #469CCF;
}
.flow>ul>li:not(.on){
  cursor: pointer;
}
.flow>ol{
  background-color: #ffffff;
  border-bottom-left-radius: calc(30 * var(--site-font-size-ratio));
  border-bottom-right-radius: calc(30 * var(--site-font-size-ratio));
  padding: calc(calc(6417 - 6387) * var(--site-font-size-ratio)) calc(calc(38 - 18) * 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: #469CCF;
  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{
  background-color: #ffffff;
  padding-top: calc(calc(7147 - 6181 - 906) * var(--site-font-size-ratio));
  padding-bottom: calc(calc(7907 - 7147 - 700) * var(--site-font-size-ratio));
  position: relative;
  overflow: hidden;
}
.FAQ>h2{
  width: 100%;
  margin: auto;
  color: #313B4F;
  background-color: #ffffff;
  font-size: calc(18 * var(--site-font-size-ratio));
  font-weight: 700;
  line-height: calc(26 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.FAQ>h2::before{
  content: "FAQ";
  font-family: var(--site-font-family-Josefin-Sans);
  display: block;
  width: 100%;
  font-size: calc(40 * var(--site-font-size-ratio));
  font-weight: 700;
  letter-spacing: 0;
  color: #8EC43E;
  text-align: center;
}
.FAQ>dl{
  width: calc(357 * var(--site-font-size-ratio));
  padding: calc(20 * var(--site-font-size-ratio)) calc(20 * var(--site-font-size-ratio));
  margin: auto;
  background-color: #F2F2F2;
  border-radius: calc(20 * var(--site-font-size-ratio));
}
.FAQ>dl:nth-of-type(1){
  margin-top: calc(calc(7245 - 7187 - 18) * var(--site-font-size-ratio));
}
.FAQ>dl:nth-of-type(1)~dl{
  margin-top: calc(calc(7398 - 7245 - 143) * var(--site-font-size-ratio));
}
.FAQ>dl>dt{
  font-weight: 700;
  font-size: calc(16 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
}
.FAQ>dl>dt::before{
  font-family: var(--site-font-family-Josefin-Sans);
  font-weight: bold;
  content: "Q";
  color: #8ac237;
  font-size: calc(30 * var(--site-font-size-ratio));
  padding-right: calc(calc(37 - 30) * var(--site-font-size-ratio));
}
.FAQ>dl>dd{
  margin-top: calc(calc(40 - 30) * var(--site-font-size-ratio));
  font-weight: 400;
  font-size: calc(14 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
}
/* FAQ */

/* footer */
.inspark-school footer{
  background-color: #252525;
  max-width: 100%;
  padding-top: calc(calc(7987 - 7907) * var(--site-font-size-ratio));
  padding-bottom: calc(calc(7907 + 385 - 8238 - 14) * var(--site-font-size-ratio));
  margin: 0 auto;
}
.inspark-school footer>span{
  font-weight: 700;
  font-size: calc(12 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
}
.inspark-school footer>.buttons{
  width: calc(308 * var(--site-font-size-ratio));
  margin: auto;
  margin-top: calc(calc(8025 - 7987 - 18) * var(--site-font-size-ratio));
}
.inspark-school footer>img{
  width: calc(160 * var(--site-font-size-ratio));
  margin-top: calc(calc(8116 - 8025 - 51) * var(--site-font-size-ratio));
}
.inspark-school footer>small{
  font-weight: 700;
  font-size: calc(14 * var(--site-font-size-ratio));
  letter-spacing: 0.1em;
  text-align: center;
  display: block;
  margin-top: calc(calc(8238 - 8116 - 81.14) * var(--site-font-size-ratio));
}
.inspark-school footer>ul.menu{
  flex-wrap: wrap;
  row-gap: calc(5 * var(--site-font-size-ratio));
}
.inspark-school footer>ul.menu>li>a{
  font-size: calc(12 * var(--site-font-size-ratio));
}
/* footer */

/* pic */
div:has(img[src*=pic1]){
  padding-top: calc(25 * var(--site-font-size-ratio));
}
div:has(img[src*=pic2]){
  padding-bottom: calc(25 * var(--site-font-size-ratio));
}
/* pic */

/* consultation */
.consultation,
.consultation_fadeIn{
  display: none;
}
/* consultation */

/* -----------------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{
    margin-bottom: 0;
    background-size: contain;
  }

  main>*:not(.background-attachment,.partner,.flow,footer,.consultation){
    background-color: initial;
  }

  .buttons{
    cursor: pointer;
    max-width: fit-content;
  }


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

  /* overlay */
  .overlay{
    display: none !important;
  }
  /* overlay */

  /* apply-form */
  .apply-form{
    width: calc(600 * var(--site-font-size-ratio));
    border-radius: calc(15 * var(--site-font-size-ratio));
    padding: calc(30 * var(--site-font-size-ratio));
  }
  .apply-form>span:nth-child(1){
    font-size: calc(28 * var(--site-font-size-ratio));
  }
  .apply-form>span:nth-child(2){
    font-size: calc(18 * var(--site-font-size-ratio));
    margin-bottom: calc(15 * var(--site-font-size-ratio));
  }
  .apply-form>form>div{
    margin: calc(15 * var(--site-font-size-ratio)) auto;
  }
  .apply-form>form>div>label{
    font-size: calc(18 * var(--site-font-size-ratio));
  }
  .apply-form>form>div>label::after{
    padding-left: calc(5 * var(--site-font-size-ratio));
  }
  .apply-form>form>div>label+input,
  .apply-form>form>div>label+select,
  .apply-form>form>div>label+textarea{
    padding: calc(10 * var(--site-font-size-ratio)) calc(15 * var(--site-font-size-ratio));
    font-size: calc(22 * var(--site-font-size-ratio));
    border-radius: calc(10 * var(--site-font-size-ratio));
  }
  .apply-form>form>p{
    font-size: calc(12 * var(--site-font-size-ratio));
  }
  .apply-form>form>input[type='submit']{
    font-size: calc(22 * var(--site-font-size-ratio));
    margin: calc(15 * var(--site-font-size-ratio)) auto;
    padding: calc(10 * var(--site-font-size-ratio));
    border-radius: calc(10 * var(--site-font-size-ratio));
    cursor: pointer;
  }

  /* header */
  .inspark-school header{
    width: calc(1236 * var(--site-font-size-ratio));
    margin: auto;
    padding-top: calc(30 * var(--site-font-size-ratio));
    padding-bottom: calc(calc(121 - 30 - 51) * var(--site-font-size-ratio));
    padding-left: 0;
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow-y: clip;
  }
  .inspark-school header::after{
    content: "";
    display: block;
    width: calc(744 * var(--site-font-size-ratio));
    height: calc(744 * var(--site-font-size-ratio));
    border-radius: 50%;
    position: absolute;
    top: calc(-231 * var(--site-font-size-ratio));
    right: calc(-380 * var(--site-font-size-ratio));
    background-color: #469CCF;
    z-index: -1;
  }
  .inspark-school header>h1{
    width: calc(100 * var(--site-font-size-ratio));
  }
  .inspark-school header>.buttons{
    width: calc(308 * var(--site-font-size-ratio));
  }
  .inspark-school header>.buttons>a:is(.is-mobile){
    display: none;
  }
  /* header */

  /* fv */
  .fv{
    padding-left: calc(240 * var(--site-font-size-ratio));
    padding-top: calc(calc(141 - 51 - 30) * var(--site-font-size-ratio));
    padding-bottom: calc(calc(720 + 121 - 141 - 631) * var(--site-font-size-ratio));
    background-image: url(../images/FV-desktop1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
    background-position-y: 0;
  }
  .fv>span:first-child{
    font-weight: 700;
    font-size: calc(20 * var(--site-font-size-ratio));
    line-height: calc(29.6 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    color: #313B4F;
  }
  .fv>p{
    font-weight: 700;
    font-size: calc(48 * var(--site-font-size-ratio));
    line-height: calc(71.04 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    color: #313B4F;
    text-shadow: none;
  }
  .fv>p>span{
    background: linear-gradient(to bottom, transparent 60%, #F8DF08 60% 95%, transparent 95% 100%);
  }
  .fv>span:nth-of-type(2),
  .fv>span:nth-of-type(3),
  .fv>span:nth-of-type(4){
    font-weight: 700;
    font-size: calc(28 * var(--site-font-size-ratio));
    line-height: calc(41.44 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    color: #595109;
    background-color: #F8DF08;
    padding: calc(4 * var(--site-font-size-ratio)) calc(30 * var(--site-font-size-ratio));
    border-radius: 100px;
    display: block;
    width: fit-content;
  }
  .fv>span:nth-of-type(2){
    margin-top: calc(calc(468 - 211 - 213) * var(--site-font-size-ratio));
  }
  .fv>span:nth-of-type(3),
  .fv>span:nth-of-type(4){
    margin-top: calc(calc(534 - 468 - 49) * var(--site-font-size-ratio));
  }
  .fv>.buttons{
    margin: initial;
    margin-top: calc(calc(692 - 456 - 193) * var(--site-font-size-ratio));
    width: calc(440 * var(--site-font-size-ratio));
    transform: initial;
  }
  /* fv */

  /* client_logos */
  .client_logos{
    padding-top: calc(10 * var(--site-font-size-ratio));
  }
  .client_logos .js-marquee>.slide{
    height: calc(70 * var(--site-font-size-ratio));
    padding: calc(10 * var(--site-font-size-ratio));
  }
  /* client_logos */

  /* whatIsInspark */
  .whatIsInspark{
    display: grid;
    grid-template-areas:
      "whatIsInspark-title whatIsInspark-title"
      "whatIsInspark-video whatIsInspark-text1"
      "whatIsInspark-video whatIsInspark-text2"
      "whatIsInspark-video whatIsInspark-text3"
      "whatIsInspark-video whatIsInspark-ul";
    justify-content: center;
    column-gap: calc(calc(525 - 140 - 340.59) * var(--site-font-size-ratio));
    position: relative;
    padding-top: calc(calc(921 - 720 - 121) * var(--site-font-size-ratio));
    padding-bottom: calc(calc(117 + 1583 - 1013 - 606) * var(--site-font-size-ratio));
    padding-left: 0;
    padding-right: 0;
  }
  .whatIsInspark::before{
    content: "";
    display: block;
    width: calc(508 * var(--site-font-size-ratio));
    height: calc(508 * var(--site-font-size-ratio));
    border-radius: 50%;
    position: absolute;
    top: calc(calc(930 - 921 - 32) * var(--site-font-size-ratio));
    right: calc(-35 * var(--site-font-size-ratio));
    background: linear-gradient(to bottom,transparent 0 10%,#F8DF08 10% 100%);
    z-index: -1;
  }
  .whatIsInspark::after{
    content: "";
    display: block;
    width: calc(1184 * var(--site-font-size-ratio));
    height: calc(117 * var(--site-font-size-ratio));
    background-image: url(../images/whatIsInspark-after.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: initial;
    bottom: 0;
    left: 50%;
    transform: translate(-52%);
  }
  .whatIsInspark>span:nth-of-type(1){
    font-weight: 700;
    font-size: calc(16 * var(--site-font-size-ratio));
    line-height: calc(23.68 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    color: #313B4F;
    grid-area: whatIsInspark-title;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: initial;
    margin-bottom: calc(calc(1013 - 921 - 32) * var(--site-font-size-ratio));
    gap: calc(20 * var(--site-font-size-ratio));
  }
  .whatIsInspark>span:nth-of-type(1)::before{
    content: "What’s? Inspark";
    color: #EC3B82;
    font-size: calc(32 * var(--site-font-size-ratio));
    line-height: calc(32 * var(--site-font-size-ratio));
    letter-spacing: 0.02em;
  }
  .whatIsInspark>video{
    grid-area: whatIsInspark-video;
    width: calc(340.59 * var(--site-font-size-ratio));
    height: calc(606 * var(--site-font-size-ratio));
    border-radius: calc(30 * var(--site-font-size-ratio));
    margin-left: calc(calc(140 - 101) * var(--site-font-size-ratio));
  }
  .whatIsInspark>h2{
    grid-area: whatIsInspark-text1;
    font-weight: 700;
    font-size: calc(32 * var(--site-font-size-ratio));
    line-height: calc(64 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    color: #313B4F;
    align-self: flex-end;
    margin-top: 0;
  }
  .whatIsInspark>h2>span{
    background: linear-gradient(to bottom,transparent 70%,#ee86a8 70% 100%);
  }
  .whatIsInspark>span:nth-of-type(2),
  .whatIsInspark>span:nth-of-type(3){
    font-weight: 500;
    font-size: calc(18 * var(--site-font-size-ratio));
    line-height: calc(36 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    color: #313B4F;
    margin-top: 0;
  }
  .whatIsInspark>span:nth-of-type(2){
    grid-area: whatIsInspark-text2;
    margin-top: calc(calc(1293 - 1061 - 192) * var(--site-font-size-ratio));
  }
  .whatIsInspark>span:nth-of-type(3){
    grid-area: whatIsInspark-text3;
  }
  .whatIsInspark>ul{
    flex-wrap: nowrap;
    margin-top: calc(calc(1483 - 1309 - 144) * var(--site-font-size-ratio));
    margin-bottom: calc(50 * var(--site-font-size-ratio));
    grid-area: whatIsInspark-ul;
  }
  .whatIsInspark>ul>li{
    width: calc(190 * var(--site-font-size-ratio));
    font-size: calc(16 * var(--site-font-size-ratio));
    background-color: #EC3B82;
    color: #ffffff;
  }
  /* whatIsInspark */

  /* necessity */
  .necessity{
    padding: 0 calc(97 * var(--site-font-size-ratio));
    padding-top: calc(calc(1748 - 1583 - 117) * var(--site-font-size-ratio));
    display: grid;
    grid-template-areas:
      "necessity-title necessity-img"
      "necessity-p1 necessity-img"
      "necessity-p2 necessity-img";
    grid-template-columns: 1fr calc(446 * var(--site-font-size-ratio));
    position: relative;
  }
  .necessity::before{
    content: "";
    display: block;
    width: calc(420 * var(--site-font-size-ratio));
    height: calc(420 * var(--site-font-size-ratio));
    border-radius: 50%;
    position: absolute;
    top: calc(230 * var(--site-font-size-ratio));
    left: calc(-160 * var(--site-font-size-ratio));
    background-color: #F8DF08;
    z-index: -1;
  }
  .necessity>img{
    width: 100%;
    grid-area: necessity-img;
  }
  .necessity>span{
    margin-top: calc(calc(1833 - 1748) * var(--site-font-size-ratio));
    font-size: calc(16 * var(--site-font-size-ratio));
    grid-area: necessity-title;
  }
  .necessity>p:nth-of-type(1){
    margin-top: calc(calc(1869 - 1833 - 16) * var(--site-font-size-ratio));
    font-size: calc(32 * var(--site-font-size-ratio));
    line-height: calc(64 * var(--site-font-size-ratio));
    grid-area: necessity-p1;
  }
  .necessity>p:nth-of-type(2){
    margin-top: calc(calc(2101 - 1869 - 192) * var(--site-font-size-ratio));
    margin-bottom: calc(213 * var(--site-font-size-ratio));
    font-size: calc(18 * var(--site-font-size-ratio));
    line-height: calc(36 * var(--site-font-size-ratio));
    grid-area: necessity-p2;
  }
  /* necessity */

  /* works */
  .works{
    position: relative;
    padding-top: 0;
  }
  .works::after{
    content: "";
    display: block;
    width: calc(380 * var(--site-font-size-ratio));
    height: calc(380 * var(--site-font-size-ratio));
    border-radius: 50%;
    position: absolute;
    top: calc(67 * var(--site-font-size-ratio));
    right: calc(-67 * var(--site-font-size-ratio));
    background-color: #469CCF;
    z-index: -1;
  }
  .works>h2{
    font-weight: 700;
    color: #313B4F;
    font-size: calc(32 * var(--site-font-size-ratio));
    line-height: calc(64 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: initial;
    padding-left: calc(102 * var(--site-font-size-ratio));
  }
  .works>h2::before{
    content: "WORKS";
    font-family: var(--site-font-family-Josefin-Sans);
    font-weight: 700;
    color: #469CCF;
    font-size: calc(100 * var(--site-font-size-ratio));
    line-height: initial;
    letter-spacing: 0em;
    display: block;
    width: 100%;
    text-align: left;
  }
  .works_splide{
    margin-top: calc(calc(2020 - 1896 - 64) * var(--site-font-size-ratio));
  }
  .works_splide .splide__list .splide__slide>img{
    border-radius: calc(20 * var(--site-font-size-ratio));
  }
  .works_splide .splide__list .splide__slide>span{
    display: block;
    width: 100%;
    margin-top: calc(20 * var(--site-font-size-ratio));
    text-align: center;
    font-weight: 700;
    color: #313B4F;
    font-size: calc(23 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
  }
  /* works */

  /* genre */
  .genre{
    display: grid;
    grid-template-areas:
      "genre-title genre-btn"
      "genre-genre genre-genre";
    grid-template-columns: 1fr calc(440 * var(--site-font-size-ratio));
    justify-content: center;
    width: calc(1238 * var(--site-font-size-ratio));
    position: relative;
    padding-top: calc(calc(2617 - 2020 - 517) * var(--site-font-size-ratio));
    padding-bottom: calc(calc(3134 - 2800 - 214) * var(--site-font-size-ratio));
    padding-left: 0;
    padding-right: 0;
  }
  .genre::before{
    content: "";
    display: block;
    width: calc(400 * var(--site-font-size-ratio));
    height: calc(400 * var(--site-font-size-ratio));
    border-radius: 50%;
    background-color: #EE86A8;
    position: absolute;
    left: calc(-230 * var(--site-font-size-ratio));
    top: calc(50 * var(--site-font-size-ratio));
    z-index: -1;
  }
  .genre>span{
    grid-area: genre-title;
    font-weight: 700;
    color: #313B4F;
    font-size: calc(32 * var(--site-font-size-ratio));
    line-height: calc(64 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    position: relative;
    width: fit-content;
  }
  .genre>span::after{
    content: "";
    display: block;
    width: calc(135.35 * var(--site-font-size-ratio));
    height: calc(142.59 * var(--site-font-size-ratio));
    background-image: url(../images/genre-tittle.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(100%,-50%);
  }
  .genre>.buttons{
    grid-area: genre-btn;
    width: 100%;
    margin: 0;
  }
  .genre>ul{
    grid-area: genre-genre;
    display: flex;
    flex-wrap: nowrap;
    gap: calc(calc(315 - 180 - 105) * var(--site-font-size-ratio));
    margin-top: calc(calc(2800 - 2617 - 142.59) * var(--site-font-size-ratio));
  }
  .genre>ul>li{
    width: calc(180 * var(--site-font-size-ratio));
    text-align: center;
    font-weight: 700;
    color: #313B4F;
    font-size: calc(16 * var(--site-font-size-ratio));
    line-height: calc(23.68 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
  }
  .genre>ul>li>img{
    width: 100%;
    margin-bottom: calc(10 * var(--site-font-size-ratio));
  }
  /* genre */

  /* background-attachment */
  .background-attachment{
    width: 100%;
    height: calc(400 * var(--site-font-size-ratio));
    background-image: url(../images/background-attachment.png);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .background-attachment::after{
    content: none;
  }
  /* background-attachment */

  /* partner */
  .partner{
    background-color: #F8DF08;
    display: grid;
    grid-template-areas:
      "partner-title partner-div"
      "partner-content partner-div"
      "partner-ol partner-div"
      "partner-ul partner-div";
    justify-content: center;
    padding: 0;
  }
  .partner>h2{
    grid-area: partner-title;
    color: #313B4F;
    font-weight: 700;
    font-size: calc(32 * var(--site-font-size-ratio));
    line-height: calc(64 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: initial;
    margin-top: calc(calc(3654 - 400 - 3134) * var(--site-font-size-ratio));
  }
  .partner>h2::before{
    content: "PARTNER";
    text-align: left;
    font-family: var(--site-font-family-Josefin-Sans);
    color: #ffffff;
    font-weight: 700;
    font-size: calc(100 * var(--site-font-size-ratio));
    line-height: calc(100 * var(--site-font-size-ratio));
    letter-spacing: initial;
    display: block;
    width: 100%;
    transform: translateY(30%);
  }
  .partner>p{
    grid-area: partner-content;
    color: #313B4F;
    font-weight: 400;
    font-size: calc(18 * var(--site-font-size-ratio));
    line-height: calc(36 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    margin-top: calc(calc(3833 - 64 - 3729) * var(--site-font-size-ratio));
  }
  .partner>ol{
    grid-area: partner-ol;
    width: calc(632 * var(--site-font-size-ratio));
    display: flex;
    flex-wrap: nowrap;
    column-gap: calc(10 * var(--site-font-size-ratio));
    margin-top: calc(calc(3927 - 3833 - 74) * var(--site-font-size-ratio));
  }
  .partner>ol>li{
    color: #595109;
    font-weight: 700;
    font-size: calc(16 * var(--site-font-size-ratio));
    line-height: calc(23.68 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    background-color: #ffffff;
    border-radius: calc(20 * var(--site-font-size-ratio));
    width: calc(204 * var(--site-font-size-ratio));
    height: calc(32 * var(--site-font-size-ratio));
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .partner>ol>li:not(.on){
    cursor: pointer;
  }
  .partner>ol>li.on{
    color: #ffffff;
    background-color: #E0261B;
  }
  .partner>ul{
    grid-area: partner-ul;
    width: calc(620 * var(--site-font-size-ratio));
    display: flex;
    flex-wrap: nowrap;
    column-gap: calc(20 * var(--site-font-size-ratio));
    margin-top: calc(calc(3999 - 3927 - 32) * var(--site-font-size-ratio));
    margin-bottom: calc(calc(3534 + 734 - 3999 - 186) * var(--site-font-size-ratio));
  }
  .partner>ul>li{
    width: calc(140 * var(--site-font-size-ratio));
    text-align: center;
    row-gap: calc(20 * var(--site-font-size-ratio));
    color: #313B4F;
    font-weight: 700;
    font-size: calc(18 * var(--site-font-size-ratio));
    line-height: calc(26.64 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
  }
  .partner>ul>li:not(.on){
    cursor: pointer;
  }
  .partner>ul>li>img{
    width: 100%;
    height: calc(140 * var(--site-font-size-ratio));
    border-radius: 50%;
  }
  .partner>div{
    grid-area: partner-div;
    background-color: #242424;
    width: calc(480 * var(--site-font-size-ratio));
    padding: calc(calc(3574 - 3534) * var(--site-font-size-ratio)) calc(calc(917 - 837) * var(--site-font-size-ratio));
    text-align: center;
    color: #ffffff;
    margin-top: 0;
    display: block;
  }
  .partner>div>img{
    width: calc(280 * var(--site-font-size-ratio));
    height: calc(497 * var(--site-font-size-ratio));
    border-radius: calc(20 * var(--site-font-size-ratio));
  }
  .partner>div>span{
    font-weight: 700;
    font-size: calc(18 * var(--site-font-size-ratio));
    line-height: calc(26.64 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    display: block;
    margin-top: calc(calc(4081 - 3574 - 497) * var(--site-font-size-ratio));
    text-align: center;
  }
  .partner>div>p{
    font-weight: 700;
    font-size: calc(14 * var(--site-font-size-ratio));
    line-height: calc(21 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    text-align: left;
    margin-top: calc(calc(4118 - 4081 - 27) * var(--site-font-size-ratio));
  }
  .partner>div>a.apply_btn{
    border-radius: 100px;
    font-weight: 700;
    color:#313B4F;
    background-color:#F8DF08;
    font-size: calc(16 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(48 * var(--site-font-size-ratio));
    margin-top: calc(calc(4180 - 4118 - 42) * var(--site-font-size-ratio));
    cursor: pointer;
  }
  /* partner */

  /* strong-point */
  .strong-point{
    padding-top: calc(calc(4388 - 3534 - 734) * var(--site-font-size-ratio));
    position: relative;
    overflow: hidden;
  }
  .strong-point::before{
    content: "";
    display: block;
    width: calc(430 * var(--site-font-size-ratio));
    height: calc(200 * var(--site-font-size-ratio));
    background-image: url(../images/strong-point.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    left: calc(20 * var(--site-font-size-ratio));
    top: calc(calc(4328 - 734 - 3534) * var(--site-font-size-ratio));
  }
  .strong-point::after{
    content: "";
    display: block;
    width: calc(380 * var(--site-font-size-ratio));
    height: calc(380 * var(--site-font-size-ratio));
    border-radius: 50%;
    background-color: #8EC43E;
    position: absolute;
    right: calc(-30 * var(--site-font-size-ratio));
    top: calc(-130 * var(--site-font-size-ratio));
  }
  .strong-point>h2{
    font-weight: 700;
    font-size: calc(32 * var(--site-font-size-ratio));
    line-height: calc(64 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    color:#313B4F;
    display: block;
    text-align: center;
  }
  .strong-point>ol{
    width: calc(804 * var(--site-font-size-ratio));
    margin: calc(calc(4492 - 4388 - 64) * var(--site-font-size-ratio)) auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: calc(calc(4740 - 4492 - 208) * var(--site-font-size-ratio));
    counter-reset: point;
  }
  .strong-point>ol>li{
    width: calc(740 * var(--site-font-size-ratio));
    margin-right: 0;
    margin-left: auto;
    border: calc(2 * var(--site-font-size-ratio)) solid #8EC43E;
    border-radius: calc(30 * var(--site-font-size-ratio));
    padding-top: calc(calc(4532 - 4492) * var(--site-font-size-ratio));
    padding-bottom: calc(calc(4532 - 4492) * var(--site-font-size-ratio));
    padding-left: calc(calc(454 - 374) * var(--site-font-size-ratio));
    padding-right: calc(calc(374 + 740 - 620 - 454) * var(--site-font-size-ratio));
    position: relative;
  }
  .strong-point>ol>li::before{
    font-family: var(--site-font-family-Josefin-Sans);
    counter-increment: point;
    content: "0"counter(point);
    font-weight: 700;
    font-size: calc(100 * var(--site-font-size-ratio));
    line-height: calc(100 * var(--site-font-size-ratio));
    letter-spacing: initial;
    color:#8EC43E;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%,-50%);
  }
  .strong-point>ol>li>span{
    font-weight: 700;
    font-size: calc(24 * var(--site-font-size-ratio));
    line-height: calc(35.52 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    color:#313B4F;
  }
  .strong-point>ol>li>p{
    font-weight: 700;
    font-size: calc(16 * var(--site-font-size-ratio));
    line-height: calc(23.68 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    color:#313B4F;
    margin-top: calc(calc(4588 - 4532 - 36) * var(--site-font-size-ratio));
  }
  /* strong-point */

  /* introduce */
  .introduce{
    position: relative;
    padding-top: calc(calc(5268 - 4492 - 656) * var(--site-font-size-ratio));
  }
  .introduce::before{
    content: "";
    display: block;
    width: calc(508 * var(--site-font-size-ratio));
    height: calc(508 * var(--site-font-size-ratio));
    border-radius: 50%;
    background-color: #F8DF08;
    position: absolute;
    left: calc(-150 * var(--site-font-size-ratio));
    top: calc(-150 * var(--site-font-size-ratio));
    z-index: -1;
  }
  .introduce>h2{
    font-weight: 700;
    font-size: calc(32 * var(--site-font-size-ratio));
    line-height: calc(64 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    color:#313B4F;
    display: block;
    text-align: center;
  }
  .introduce>div{
    width: calc(1080 * var(--site-font-size-ratio));
    min-height: calc(270 * var(--site-font-size-ratio));
    margin: auto;
    padding-left: calc(calc(640 - 180) * var(--site-font-size-ratio));
    position: relative;
  }
  .introduce>div:nth-of-type(1){
    margin-top: calc(calc(5372 - 5268 - 64) * var(--site-font-size-ratio));
  }
  .introduce>div:nth-of-type(2){
    margin-top: calc(calc(5662 - 5372 - 260) * var(--site-font-size-ratio));
  }
  .introduce>div>img{
    width: calc(420 * var(--site-font-size-ratio));
    position: absolute;
    left: 0;
    top: 0;
    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(24 * var(--site-font-size-ratio));
    line-height: calc(35.52 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    color:#313B4F;
    padding-top: 0;
  }
  .introduce>div>span:nth-of-type(2){
    font-weight: 700;
    font-size: calc(14 * var(--site-font-size-ratio));
    line-height: calc(20.72 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    color:#313B4F;
    padding-top: 0;
  }
  .introduce>div>span:nth-of-type(3){
    font-weight: 400;
    font-size: calc(16 * var(--site-font-size-ratio));
    line-height: calc(23.68 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    color:#313B4F;
    margin-top: calc(calc(5461 - 5416 - 21) * var(--site-font-size-ratio));
  }
  .introduce>div>span:nth-of-type(4){
    font-weight: 700;
    font-size: calc(24 * var(--site-font-size-ratio));
    line-height: calc(35.52 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    color:#EC3B82;
    margin-top: calc(calc(5499 - 5461 - 24) * var(--site-font-size-ratio));
  }
  .introduce>div>span:nth-of-type(3),
  .introduce>div>span:nth-of-type(4){
    padding-left: calc(calc(789 - 640) * var(--site-font-size-ratio));
    position: relative;
  }
  .introduce>div>span:nth-of-type(3)::before,
  .introduce>div>span:nth-of-type(4)::before{
    display: flex;
    width: calc(131 * var(--site-font-size-ratio));
    height: calc(32 * var(--site-font-size-ratio));
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: calc(18 * var(--site-font-size-ratio));
    line-height: calc(23.68 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    color:#ffffff;
    border-radius: 50px;
    position: absolute;
    left: 0;
    top: 0;
    margin-bottom: 0;
  }
  .introduce>div>span:nth-of-type(3)::before{
    background-color: #7F7F7F;
    transform: translateY(-15%);
  }
  .introduce>div>span:nth-of-type(4)::before{
    background-color: #EC3B82;
  }
  .introduce>div>p{
    font-weight: 400;
    font-size: calc(14 * var(--site-font-size-ratio));
    line-height: calc(20.72 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    color:#313B4F;
    margin-top: calc(calc(5545 - 5499 - 36) * var(--site-font-size-ratio));
  }
  /* introduce */

  /* price */
  .price{
    display: grid;
    grid-template-areas:
      "price-title price-table"
      "price-p price-table"
      "price-p price-table";
    justify-content: center;
    grid-template-columns: calc(335 * var(--site-font-size-ratio)) calc(794 * var(--site-font-size-ratio));
    grid-template-rows: calc(330 * var(--site-font-size-ratio)) 1fr calc(200 * var(--site-font-size-ratio));
    column-gap: calc(calc(564 - 101 - 335) * var(--site-font-size-ratio));
    padding-top: calc(calc(6068 - 5662 - 270 + 30) * var(--site-font-size-ratio));
    padding-bottom: calc(calc(7099 - 6068 - 911) * var(--site-font-size-ratio));
    padding-left: 0;
    position: relative;
  }
  .price::after{
    content: "";
    display: block;
    width: calc(400 * var(--site-font-size-ratio));
    height: calc(400 * var(--site-font-size-ratio));
    border-radius: 50%;
    background-color: #EE86A8;
    position: absolute;
    right: calc(-100 * var(--site-font-size-ratio));
    bottom: calc(-205 * var(--site-font-size-ratio));
    z-index: -1;
  }
  .price>h2{
    grid-area: price-title;
    font-weight: 700;
    font-size: calc(32 * var(--site-font-size-ratio));
    line-height: calc(64 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    color:#313B4F;
    display: block;
    margin-top: calc(120 * var(--site-font-size-ratio));
  }
  .price>h2::before{
    font-family: var(--site-font-family-Josefin-Sans);
    content: "PRICE";
    font-weight: 700;
    font-size: calc(100 * var(--site-font-size-ratio));
    line-height: initial;
    letter-spacing: initial;
    color:#EE86A8;
    text-align: left;
  }
  .price>p{
    grid-area: price-p;
    font-weight: 700;
    font-size: calc(18 * var(--site-font-size-ratio));
    line-height: calc(36 * var(--site-font-size-ratio));
    letter-spacing: 0.05em;
    color:#313B4F;
    text-align: left;
    margin-top: 0;
  }
  .price>div{
    grid-area: price-table;
    overflow-x: initial;
    padding-top: calc(30 * var(--site-font-size-ratio));
    margin-top: 0;
  }
  .price>div>table{
    border-collapse: collapse;
    width: initial;
  }
  .price>div>table th,
  .price>div>table td{
    padding: calc(calc(571 - 570) * var(--site-font-size-ratio)) 0;
    border-bottom: 1px dashed #E2E2E2;
  }
  .price>div>table tr:first-child>th,
  .price>div>table tr:first-child>td{
    padding-top: calc(calc(586 - 522) * var(--site-font-size-ratio));
  }
  .price>div>table tr:last-child>th,
  .price>div>table tr:last-child>td{
    border: none;
  }
  .price>div>table th{
    width: calc(calc(794 - 279 - 279) * var(--site-font-size-ratio));
    text-align: left;
    font-weight: 700;
    font-size: calc(20 * var(--site-font-size-ratio));
    line-height: initial;
    letter-spacing: 0.1em;
    color:#313B4F;
    padding-left: calc(calc(6144 - 6100) * var(--site-font-size-ratio));
  }
  .price>div>table td{
    width: calc(279 * var(--site-font-size-ratio));
    text-align: center;
    font-weight: 400;
    font-size: calc(10 * var(--site-font-size-ratio));
    line-height: initial;
    letter-spacing: 0.1em;
    color:#313B4F;
    position: relative;
  }
  .price>div>table td>img{
    display: block;
    margin: auto;
    margin-bottom: calc(5 * var(--site-font-size-ratio));
    width: calc(25.76 * var(--site-font-size-ratio));
  }
  .price>div>table td:nth-child(2){
    background-color: #EFF6FF;
  }
  .price>div>table td:nth-child(3){
    background-color: #FFEFF4;
  }
  .price>div>table td>div{
    width: calc(220 * var(--site-font-size-ratio));
    height: calc(60 * var(--site-font-size-ratio));
    display: flex;
    justify-content: center;
    align-items: baseline;
    padding-top: calc(10 * var(--site-font-size-ratio));
    border-radius: 100px;
    font-weight: 700;
    font-size: calc(30 * var(--site-font-size-ratio));
    line-height: initial;
    letter-spacing: 0.1em;
    color:#ffffff;
    background-color: #469CCF;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .price>div>table td:nth-child(3)>div{
    background-color: #EE86A8;
  }
  .price>div>table td>div>span{
    font-size: calc(18 * var(--site-font-size-ratio));
  }
  .price>div>table tr:last-child>td{
    font-weight: 700;
    font-size: calc(20 * var(--site-font-size-ratio));
    line-height: initial;
    letter-spacing: 0.1em;
    color:#313B4F;
  }
  .price>div>table tr:first-child>td:last-child{
    border-top-right-radius: calc(40 * var(--site-font-size-ratio));
  }
  .price>div>table tr:last-child>td:last-child{
    border-bottom-right-radius: calc(40 * var(--site-font-size-ratio));
  }
  .price .scroll-hint-icon-wrap{
    display: none;
  }
  .price>img{
    grid-area: price-img;
    width: 100%;
    margin-top: calc(18 * var(--site-font-size-ratio));
  }
  /* price */

  /* flow */
  .flow{
    background-color: #469CCF;
    padding-top: calc(calc(7251 - 7099) * var(--site-font-size-ratio));
    padding-bottom: calc(calc(7099 + 1379 - 900 - 7490) * var(--site-font-size-ratio));
  }
  .flow>h2{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color: #313B4F;
    font-weight: 700;
    font-size: calc(32 * var(--site-font-size-ratio));
    line-height: calc(64 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
  }
  .flow>h2::before{
    content: "FLOW";
    color: #ffffff;
    font-family: var(--site-font-family-Josefin-Sans);
    font-weight: 700;
    font-size: calc(100 * var(--site-font-size-ratio));
    line-height: calc(50 * var(--site-font-size-ratio));
    letter-spacing: initial;
    display: block;
    text-align: center;
    width: 100%;
  }
  .flow>ul,
  .flow>ol{
    width: calc(800 * var(--site-font-size-ratio));
    margin: auto;
  }
  .flow>ul{
    display: flex;
    flex-wrap: nowrap;
    margin-top: calc(calc(7430 - 7251 - 139) * var(--site-font-size-ratio));
  }
  .flow>ul>li{
    width: 50%;
    height: calc(60 * var(--site-font-size-ratio));
    border-top-left-radius: calc(40 * var(--site-font-size-ratio));
    border-top-right-radius: calc(40 * var(--site-font-size-ratio));
    background-color: #104463;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: calc(24 * var(--site-font-size-ratio));
    line-height: calc(35.52 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
  }
  .flow>ul>li.on{
    background-color: #ffffff;
    color: #469CCF;
  }
  .flow>ul>li:not(.on){
    cursor: pointer;
  }
  .flow>ol{
    background-color: #ffffff;
    border-bottom-left-radius: calc(60 * var(--site-font-size-ratio));
    border-bottom-right-radius: calc(60 * var(--site-font-size-ratio));
    padding: calc(calc(7530 - 60 - 7430) * var(--site-font-size-ratio)) calc(calc(360 - 320) * var(--site-font-size-ratio));
    counter-reset: flow;
  }
  .flow>ol::after{
    content: "";
    display: block;
    background-image: url(../images/flow-ul-after.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: calc(120 * var(--site-font-size-ratio));
  }
  .flow>ol>li{
    background-color: #F2F2F2;
    font-weight: 700;
    font-size: calc(24 * var(--site-font-size-ratio));
    line-height: calc(35.52 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    margin-bottom: calc(calc(7670 - 7530 - 120) * var(--site-font-size-ratio));
    border-radius: calc(20 * var(--site-font-size-ratio));
    position: relative;
    height: calc(120 * 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: #469CCF;
    font-size: calc(50 * var(--site-font-size-ratio));
    line-height: calc(50 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    padding-left: calc(calc(390 - 360) * var(--site-font-size-ratio));
    padding-right: calc(calc(479 - 390 - 49) * 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(12 * var(--site-font-size-ratio));
    position: absolute;
    background-position: center;
    bottom: calc(-16 * var(--site-font-size-ratio));
    left: 50%;
    transform: translateX(-50%);
  }
  /* flow */

  /* FAQ */
  .FAQ{
    background-color: #ffffff;
    padding-top: calc(calc(8630 - 7099 - 1379) * var(--site-font-size-ratio));
    padding-bottom: calc(calc(9710 - 9413 - 177) * var(--site-font-size-ratio));
    position: relative;
    overflow: hidden;
  }
  .FAQ::before{
    content: "";
    display: block;
    width: calc(380 * var(--site-font-size-ratio));
    height: calc(380 * var(--site-font-size-ratio));
    border-radius: 50%;
    position: absolute;
    top: calc(-35 * var(--site-font-size-ratio));
    left: calc(-67 * var(--site-font-size-ratio));
    background-color: #8EC43E;
  }
  .FAQ>h2{
    width: 100%;
    margin: auto;
    color: #313B4F;
    background-color: #ffffff;
    font-size: calc(32 * var(--site-font-size-ratio));
    font-weight: 700;
    line-height: calc(64 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .FAQ>h2::before{
    content: "FAQ";
    font-family: var(--site-font-family-Josefin-Sans);
    display: block;
    width: 100%;
    font-size: calc(100 * var(--site-font-size-ratio));
    font-weight: 700;
    line-height: initial;
    letter-spacing: 0;
    color: #8EC43E;
    text-align: center;
  }
  .FAQ>dl{
    width: calc(800 * var(--site-font-size-ratio));
    padding: calc(30 * var(--site-font-size-ratio)) calc(40 * var(--site-font-size-ratio));
    margin: auto;
    background-color: #F2F2F2;
    border-radius: calc(20 * var(--site-font-size-ratio));
  }
  .FAQ>dl:nth-of-type(1){
    margin-top: calc(calc(8822 - 8718 - 64) * var(--site-font-size-ratio));
  }
  .FAQ>dl:nth-of-type(1)~dl{
    margin-top: calc(calc(9019 - 8822 - 177) * var(--site-font-size-ratio));
  }
  .FAQ>dl>dt{
    font-weight: 700;
    font-size: calc(24 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
  }
  .FAQ>dl>dt::before{
    font-family: var(--site-font-family-Josefin-Sans);
    font-weight: bold;
    content: "Q";
    color: #8ac237;
    font-size: calc(40 * var(--site-font-size-ratio));
    padding-right: calc(calc(56 - 36) * var(--site-font-size-ratio));
  }
  .FAQ>dl>dd{
    margin-top: calc(10 * var(--site-font-size-ratio));
    font-weight: 400;
    font-size: calc(18 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
  }
  /* FAQ */

  /* footer */
  .inspark-school footer{
    margin-bottom: calc(100 * var(--site-font-size-ratio));
    background-color: #252525;
    max-width: 100%;
    display: grid;
    justify-content: center;
    grid-template-areas:
      "footer-img footer-span"
      "footer-img footer-buttons"
      "footer-menu footer-small";
    column-gap: calc(calc(900 - 100 - 420) * var(--site-font-size-ratio));
    padding-top: calc(calc(9770 - 9710) * var(--site-font-size-ratio));
    padding-bottom: calc(calc(9710 + 290 - 9944 - 16) * 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));
    line-height: calc(23.68 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
  }
  .inspark-school footer>.buttons{
    grid-area: footer-buttons;
    width: calc(440 * var(--site-font-size-ratio));
    margin: initial;
    margin-top: calc(calc(9804 - 9770 - 24) * var(--site-font-size-ratio));
  }
  .inspark-school footer>img{
    grid-area: footer-img;
    width: calc(140 * var(--site-font-size-ratio));
    align-self: flex-start;
    margin-top: calc(calc(9804 - 9770 - 24) * var(--site-font-size-ratio));
  }
  .inspark-school footer>ul.menu{
    grid-area: footer-menu;
    width: calc(430 * var(--site-font-size-ratio));
    margin-bottom: 0;
  }
  .inspark-school footer>ul.menu>li:has(a[href='/service/legal/']),
  .inspark-school footer>ul.menu>li:has(a[href='/privacy_policy/']){
    display: block;
    width: 100%;
    text-align: left;
  }
  .inspark-school footer>ul.menu>li:has(a[href='/service/legal/']){
    margin-top: calc(15 * var(--site-font-size-ratio));
  }
  .inspark-school footer>small{
    grid-area: footer-small;
    font-weight: 700;
    font-size: calc(16 * var(--site-font-size-ratio));
    line-height: calc(16 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    text-align: right;
    display: block;
    margin-top: calc(calc(9944 - 9804 - 80) * var(--site-font-size-ratio));
  }
  /* footer */

  /* pic */
  div:has(img[src*=pic1]){
    padding-top: calc(100 * var(--site-font-size-ratio));
    width: calc(1100 * var(--site-font-size-ratio));
    margin: auto;
  }
  div:has(img[src*=pic2]){
    padding-bottom: calc(50 * var(--site-font-size-ratio));
  }
  /* pic */

  /* consultation */
  .consultation:is(.consultation_fadeIn){
    width: 100%;
    display: grid;
    align-items: center;
    grid-template-areas: 
      "consultation-span consultation-a1 consultation-a2";
    grid-template-columns:calc(635 * var(--site-font-size-ratio)) 1fr 1fr;
    gap: calc(20 * var(--site-font-size-ratio));
    background-color: #469CCF;
    color: #ffffff;
    font-weight: 700;
    padding: calc(15 * var(--site-font-size-ratio)) calc(50 * var(--site-font-size-ratio));
    position: fixed;
    bottom: 0;
    z-index: 999;
  }
  @keyframes consultation_fadeIn{
    0% {opacity: 0;}
    100% {opacity: 1;}
  }
  .consultation_fadeIn{
    animation:consultation_fadeIn 0.5s linear;
  }
  .consultation>span{
    grid-area: consultation-span;
    font-size: calc(20 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
  }
  .consultation>a{
    height: calc(72 * var(--site-font-size-ratio));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 99999px;
    color: inherit;
    text-decoration: none;
    font-size: calc(22 * var(--site-font-size-ratio));
    position: relative;
    cursor: pointer;
  }
  .consultation>a::after{
    content: "▶";
    position: absolute;
    top: 50%;
    right: calc(20 * var(--site-font-size-ratio));
    transform: translateY(-50%);
  }
  .consultation>a:nth-of-type(1){
    background-color: #FF9900;
    grid-area: consultation-a1;
  }
  .consultation>a:nth-of-type(2){
    background-color: #EC3B82;
    grid-area: consultation-a2;
  }
  /* consultation */

}

@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;
  }
}