@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Yantramanav:wght@500;700;900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap");

/*==============
    common
===============*/
:root {
  /* color */
  --font: #1c1c1c;
  --maincolor: #ffffff;
  --subcolor: #ef0000;
  --cvcolor: #ffff03;
  /* font */
  --en: "Yantramanav", serif;
  --ja: "Noto Sans JP", sans-serif;
}
::selection {
  background: var(--font);
  color: white;
}
::-moz-selection {
  background: var(--font);
  color: white;
}
html {
  font-size: 10px;
  scroll-behavior: smooth;
}
img {
  user-select: none; /* CSS3 */
  -moz-user-select: none; /* Firefox */
  -webkit-user-select: none; /* Safari、Chromeなど */
  -ms-user-select: none; /* IE10かららしい */
}
/* fade */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
body {
  font-size: 1.6rem;
  font-family: var(--ja);
  font-weight: 500;
  color: var(--font);
  animation: fadeIn 4s forwards;
  /*background-color: #000;*/
  position: relative;
  margin: 0;
}
a {
  text-decoration: none;
  color: initial;
  transition: 0.4s all;
  color: var(--font);
}
.pc {
  display: block;
}
.sp {
  display: none;
}
.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.en {
  font-family: var(--en);
  white-space: nowrap;
}
.flex{
  display: flex;
}
.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}
.fade-in-up {
  transform: translate(0, 50px);
}
.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}
.ttl{
  margin-bottom: 40px;
}
.ttl h2{
  font-size: clamp(4.5rem,12vw,6.4rem);
  font-weight: 800;
  background: rgb(198,0,11);
  background: linear-gradient(0deg, rgba(198,0,11,1) 50%, rgba(239,0,0,1) 51%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ttl .sub{
  font-size: clamp(1.4rem,3.733vw,1.8rem);
  padding-top: 8px;
  font-weight: bold;
}
@media screen and (max-width: 1000px) {
  .wrap{
    max-width: 90%;
  }
  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
  html, body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
  }
}
@media screen and (max-width: 500px) {
  .ttl{
    margin-bottom: 32px;
  }
  .ttl .sub{
    padding-top: 0;
  }
}
.box {
  opacity: 0;
}
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*-----------------------------------------------
 header
-----------------------------------------------*/
header{
  /* margin-bottom: 100px; */
  position: relative;
  width: 100%;
  z-index: 1000;
  position: -webkit-sticky;
  position:         sticky;
  top: 0;
  margin-top: -100px;
}
@font-face {
  font-family: 'icomoon';
  src:  url('../../assets/fonts/icomoon.eot?cn3by6');
  src:  url('../../assets/fonts/icomoon.eot?cn3by6#iefix') format('embedded-opentype'),
    url('../../assets/fonts/icomoon.ttf?cn3by6') format('truetype'),
    url('../../assets/fonts/icomoon.woff?cn3by6') format('woff'),
    url('../../assets/fonts/icomoon.svg?cn3by6#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-x:before {
  content: "\e900";
}
.icon-youtube:before {
  content: "\e912";
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-instagram:before {
  content: "\ea92";
}
.drawer{
  transition: opacity 0.3s, visibility 0.3s;
}
.drawer__nav{
  display: flex;
  justify-content: center;
}
.drawer__list {
  display: flex;
  justify-content: space-between;
  width: 88%;
  margin-top: 24px;
  border-radius: 50px;
  box-shadow: 6px 6px 10px 0px rgba(0,0,0,0.2);
  /* border: 2px solid var(--font); */
  padding: 20px 3%;
  background: #fff;
}
.drawer__item {
  width: 100%;
}
.drawer__item a{margin-left: 0px;}
.drawer__item a:first-child{
  margin-left: 0;
}
.drawer__itemsp{
  display: none !important;
}
.drawer__item-wrapper{
  display: flex;
  align-items: center;
}
.drawer__item-wrapper a:{
  transition: 0.4s;
}
.drawer__item img{
  max-width: 65px;
  width: 100%;
}
.drawer__item-wrapper2 {
  display: flex;
  justify-content: left;
  align-items: center;
  font-size: 1.4rem;
}
.drawer__item3 a{
  padding-left: 8px;
}
.drawer__item3 a:first-child,
.drawer__item3 a:nth-child(4)
{
  padding-left: 0;
}
.drawer__item3 a:last-child{
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: -1px;
}
.drawer__item4{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
li.drawer__item2 {
  margin-left: 24px;
  padding-bottom: 5px;
  position: relative;
}
li.drawer__item2:first-child{
  margin-left: 0;
}
.drawer__item-wrapper3 ul{
  display: flex;
  flex-wrap: wrap; 
  list-style: none; 
  justify-content: center;
}
.drawer__item-wrapper3 ul li{
flex: 0 0 calc(100% / 3);
box-sizing: border-box;
text-align: center;
}
li.drawer__item2 a,
.drawer__item-wrapper3 li a{
  transition: 0.3s;
}
 .drawer__item-wrapper3 {
  margin-left: 32px;
}
/*hover - pc only*/
@media screen and (min-width: 1000px) {
  .drawer__item-wrapper a:hover{
    opacity: 0.5;
  }
  li.drawer__item2 a:hover,
  .drawer__item-wrapper3 li a:hover{
    color: var(--subcolor);
  }
}
@media screen and (max-width: 1000px) {
  
.drawer__item a img{
  height: 40px;
  object-fit: contain;
}
  li.drawer__item2 a,
.drawer__item-wrapper3 li a{
  display: block;
  padding: 24px 8px;
}
.drawer__itemsp{
  display: flex !important;
  padding-top: 16px;
  background: #fff;
}
  li.drawer__item2{
    text-align: left;
    margin: 0 40px 0 40px !important;
    border-bottom: 1px solid #ccc;
    /* padding: 16px 8px; */
    position: relative;
  }
  li.drawer__item2::before{
    content: "";
    position: absolute;
    background: url(../img/arrow_black.png);
    width: 8px;
    height: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }
  .drawer__item-wrapper3 ul{
    gap: 20px;
   }
  
  .drawer__item-wrapper3 ul li{
    flex: initial ;
  }
header{
  position: absolute;
}
/*-----------------------------------------------
    hamburger
-----------------------------------------------*/
.hamburger {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 150;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.hamburger.is-active span:nth-child(1) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(135deg);
}
.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-active span:nth-child(3) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-135deg);
}
.hamburger span {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 2px;
  background-color: #333;
  transition: transform .3s;
}
.hamburger.is-active span {
  background-color: #333;
}
.hamburger span:nth-child(1) {
  top: 30%;
}
.hamburger span:nth-child(2) {
  top: 60%;
}
.hamburger span:nth-child(3) {
  top: 90%;
}
/*-----------------------------------------------
drawer
-----------------------------------------------*/
.drawer {
  visibility: hidden;
  opacity: 0;
}
.drawer.is-active {
  visibility: visible;
  opacity: 1;
}
.drawer-inner {
  /* display: flex;
  justify-content: center;
  align-items: center; */
  height: 100%;
  /* padding: 0 20px; */
}
.drawer__list {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  height: 70vh;
}
.drawer__link {
  color: #333;
}
.drawer__item img{
  width: 100%;
}
.drawer__item-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 16px;
  padding-top: 24px
}
.drawer__item-wrapper2 {
  display: block;
  width: 100%;
  background: #fff;
}
.drawer__item2 {
  margin-bottom: 24px;
}
.drawer__item,
.drawer__item2,
.drawer__item3 {
  text-align: center;
}
.drawer__item2:last-child {
  margin-bottom: 48px;
}
.drawer__item-wrapper3 {
  display: block;
  width: 100%;
  /* padding: 4px 0 0; */
  margin-left: 0px;
  background: #fff;
}
.hamburger {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  z-index: 150;
}
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height:60vh;
  height: -webkit-fill-available;
  overflow-x: hidden;
}

.drawer__list {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
  height: 100vh;
  padding-top: 50px;
  background: #fff;
}
}
@media screen and (max-width: 500px) {
.drawer {
  height: calc(var(--vh, 1vh) * 100);
  height: -webkit-fill-available;
}
.drawer__list {
  height: calc(var(--vh, 1vh) * 100);
}
.hamburger {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 24px;
  height: 24px;
  z-index: 150;
}
  li.drawer__item2 a,
  .drawer__item-wrapper3 li a{
  padding: 16px 8px;
}
}
/*-----------------------------------------------
 main visual
-----------------------------------------------*/
#mv {
  position: relative;
  overflow: hidden;
}
#mv .logo {
  position: absolute;
  justify-content: space-between;
  padding: 25px 20px 0 20px;
  width: 97.5%;
}
#mv .logo a{
  transition: 0.4s;
}
#mv .mvBg img{
  object-fit: cover;
  width: 100vw;
}
#mv .inc {
  gap: 20px;
}
#mv .inc li a img{
    height: 68px;
}
#mv .ldh a img{
    height: 76px;
}
#mv .campaign{
  width: 100vw;
  height: 100vh;  
  position: absolute;
}
.desktop{
  display: none;
}
/*hover - pc only*/
@media screen and (min-width: 1000px) {
  #mv .logo a:hover{
    opacity: 0.5;
  }
}
/*desktop size*/
@media screen and (min-width: 1580px) {
  #mv .mvBg{
    display: none;
  }
 .desktop{
  display: block !important;
}
}
@media screen and (max-width: 500px) {
  #mv .logo{
    padding: 8px 0 8px 8px;
  }
  #mv .inc {
    gap: 10px;
  }
  #mv .inc li a img {
    height: 40px;
  }
}
/*-----------------------------------------------
 cv
-----------------------------------------------*/
.cv{
  background: url(../img/cv_bg.png);
  /* padding: 80px 0; */
  position: relative;
  background-size: cover;
}
.cv .btn{
  text-align: center;
  padding: 80px 0;
}
.cv .btn a{
    max-width: 589px;
    width: 100%;
    background: var(--cvcolor);
    box-shadow: 0px 10px 0px 0px rgba(28, 28, 28, 1),0px 4px 32px 0px rgba(28, 28, 28, 0.2);
    display: inline-block;
    padding: 24px 0;
    text-align: center;
    font-weight: bold;
    border-radius: 100px;
    font-size: clamp(1.8rem,4.8vw,3.2rem);
    line-height: 1.2;
    transition: 0.4s;
}
.cv .btn a:hover{
  transform: translateY(4px);
  box-shadow: none;
}
.cv .btn a .center{
  position: relative;
  display: inline-block;
  padding: 0 60px 0 100px;
}
.cv .btn a .center::before{
  content: "";
  position: absolute;
  background: url(../img/expg_logo.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 83px;
  height: 66px;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.cv .btn a .center::after{
  content: "";
  position: absolute;
  background: url(../img/arrow_black.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 11px;
  height: 19px;
  top: 50%;
  right: -20%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.cv .btn a .sml{
    font-size: clamp(1.6rem,4.2666vw,2.4rem);
}
@media screen and (max-width: 1000px) {
  .cv .btn{
    padding: 54px 0 62px;
  }
  .cv .btn a{
    max-width: 80%;
    padding: 16px 0;
  }
  .cv .btn a .center::after{
    right: 0;
  }
}
@media screen and (max-width: 500px) {
  .cv .btn{
    padding: 40px 0 54px;
  }
  .cv .btn a .center{
    padding: 0 43px 0 60px;
    text-align: center;
  }
  .cv .btn a .center::before{
    width: 49px;
    height: 39px;
  }
  .cv .btn a .center::after{
    width: 9px;
    height: 15px;
  }
}
/*-----------------------------------------------
 benefits
-----------------------------------------------*/
#benefits{
    padding: 100px 0 100px;
    position: relative;
    overflow: hidden;
    background: #fff;
}
#benefits::before{
  content: "";
  position: absolute;
  background: url(../img/benefits_bg.png);
  background-size: contain;
  width: 2000px;
  height: 642px;
  z-index: 0;
}
#benefits .wrap{
  position: relative;
  z-index: 2;
}
#benefits .wrap .ttl h2,
#benefits .wrap .ttl .sub{
  text-align: center ;
}
#benefits ul{
  display: flex;
  gap: 3.33%;
}
#benefits li{
  width: 48.335%;
  background: rgb(255,255,255);
  /* background: linear-gradient(340deg, rgba(255,255,255,1) 50%, rgba(227,228,229,1) 50%); */
  background: #d70010;
  border-radius: 24px;
  box-shadow: 8px 8px 0px 0px rgba(254, 249, 161, 1);
  padding: 60px 0 40px;
  position: relative;
  text-align: center;
  /* border: 2px solid var(--font); */
  overflow: hidden;
}
#benefits li .subTtl{
    text-align: center;
    font-size: clamp(3.2rem,8.5333vw,4.0rem);
    font-weight: 800;
}
#benefits li .emphasis{
    text-align: center;
    font-size: clamp(4.8rem,12.8vw,7.8rem);
    font-weight: 800;
    letter-spacing: -0.25rem;
    margin: -32px 0;
}
#benefits .emphasis .big{
  font-size: clamp(10rem,26.666vw,13.7rem);
  color: var(--subcolor);
  letter-spacing: -0.5rem;
}
#benefits li img{
  /* max-width: 440px; */
  /* width: 100%; */
  max-height: 280px;
  height: 100%;
  object-fit: contain;
}
#benefits li.no2 img{
    max-height: 230px;
    margin-top: 25px;
}
#benefits li .annotation{
    text-align: center;
    font-size: 1.8rem;
}
#benefits li.no1::before {
  content: "";
  position: absolute;
  background: url(../img/benefits_ttl01.png);
  max-width: 210px;
  width: 100%;
  max-height: 164px;
  height: 100%;
  top: 0;
  left: 0;
  background-size: contain;
  background-repeat: no-repeat;
}
#benefits li.no2::before {
  content: "";
  position: absolute;
  background: url(../img/benefits_ttl02.png);
  max-width: 210px;
  width: 100%;
  max-height: 164px;
  height: 100%;
  top: 0;
  left: 0;
  background-size: contain;
  background-repeat: no-repeat;
}
#benefits li.no2 .emphasis{
  font-size: clamp(3.8rem,10.133vw,5.4rem);
}
p.campaignAnnotation{
    font-size: clamp(1.2rem,3.2vw,1.4rem);
    line-height: 1.8;
    margin-top: 40px;
}
p.campaignAnnotation span{
  display: block;
  text-align: center;
}
@media screen and (max-width: 1000px) {
  #benefits{
    padding: 0 0 64px;
  }
  #benefits ul{
    display: grid;
    row-gap: 24px;
  }
  #benefits li{
    width: 100%;
    padding: 70px 0 60px;
  }
  p.campaignAnnotation{
    margin-top: 24px;
}
  #benefits li.no2 img{
        margin-top: 0;
  }
}
@media screen and (max-width: 500px) {
  #benefits li img{
    width: 85%;
  }
  #benefits li.no1::before{
    max-width: 142px;
    max-height: 116px;
    background-size: contain;
    background-repeat: no-repeat;
    }
    #benefits li.no2::before{
    max-width: 142px;
    max-height: 116px;
    background-size: contain;
    background-repeat: no-repeat;
    }
    #benefits li .emphasis{
      margin: -24px 0;
    }
    #benefits li .annotation {
      font-size: clamp(1.6rem,4.2666vw,1.8rem);
    }
}
/*-----------------------------------------------
 features
-----------------------------------------------*/
#features{
  background: #ebebeb;
  padding: 100px 0 120px;
  position: relative;
  z-index: -1;
}
#features .wrap{
  position: relative;
  z-index: 1;
}
#features::before {
  content: "";
  position: absolute;
  background: url(../img/expg_logo_bg.png);
  background-repeat: repeat-y;
  background-size: contain;
  width: 1043px;
  height: 814px;
  left: -120px;
  top: -50px;
  opacity: 0;
  transition: opacity 0.3s ease; 
  z-index: -1; 
}

#features.active::before {
  position: fixed; 
  top: 0; 
  left: 20%; 
  transform: translateX(-50%);
  opacity: 0.08;
}
#features .wrap .ttl h2,
#features .wrap .ttl .sub{
  text-align: center;
}
@media screen and (max-width: 1000px) {
  #features{
    padding: 64px 0 72px;
  }
  #features .ttl{
    margin-bottom: 16px;
  }
  #features::before{
    width: 420px;
    height: 328px;
  }
  #features.active::before {
    top: 140px;
    left: 30%;
  }
}
@media screen and (max-width: 500px) {
}
/*-----------------------------------------------
 features - learn
-----------------------------------------------*/
#learn .learnTtl{
  font-size: clamp(2.2rem,5.866vw,2.4rem);
  font-weight: bold;
  text-align: center;
  margin-bottom: 24px;
}
#learn .learnTtl .big{
  color: var(--subcolor);
  font-size: 4.0rem;
}
#learn ul {
  display: flex;
  gap: 3.33%;
}
#learn ul li {
  width: calc(100% / 3);
  padding: 38px 32px;
  background: #fff;
  border-radius: 16px;
  position: relative;
}
#learn ul li.no1::before {
  content: "";
  position: absolute;
  background: url(../img/learn_01.png);
  background-size: contain;
  max-width: 101px;
  width: 100%;
  max-height: 61px;
  height: 100%;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
}
#learn ul li.no2::before {
  content: "";
  position: absolute;
  background: url(../img/learn_02.png);
  background-size: contain;
  max-width: 101px;
  width: 100%;
  max-height: 61px;
  height: 100%;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
}
#learn ul li.no3::before {
  content: "";
  position: absolute;
  background: url(../img/learn_03.png);
  background-size: contain;
  max-width: 101px;
  width: 100%;
  max-height: 61px;
  height: 100%;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
}
#learn ul li .subTtl {
  text-align: center;
  color: var(--color2);
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 14px;
}
#learn ul li .read {
  font-size: clamp(1.4rem, 3.73vw, 1.54rem);
  text-align: center;
  margin-bottom: 16px;
}
#learn ul li img {
  border-radius: 5px;
  max-width: 309px;
  width: 100%;
  max-height: 130px;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 1000px) {
  #learn ul {
    display: block;
  }
  #learn ul li {
    width: 80%;
    padding: 32px 32px;
    margin: 0 auto 24px auto;
    text-align: center;
  }
  #learn ul li:last-child{
 margin-bottom: 0;
  }
  #learn ul li img{
    max-width: 1000px;
    max-height: 200px;
  }
}
@media screen and (max-width: 500px) {
  #learn ul li img {
    max-width: 309px;
    max-height: 130px;
  }
}
/*-----------------------------------------------
 features - cycle
-----------------------------------------------*/
#cycle{
    margin-top: 80px;
}
#cycle .cycleTtl{
  text-align: center;
  font-size: 2.4rem;
  font-weight: bold;
}
#cycle .cycleTtl .big{
  color: var(--subcolor);
  font-size: clamp(3.2rem,8.533vw,4.0rem);
}
#cycle .block{
    background: #fff;
    border-radius: 20px;
    padding: 56px 0;
    margin-top: 24px;
}
#cycle .block .inner{
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}
#cycle .block h3{
  font-size: clamp(2.2rem,5.866vw,2.4rem);
  color: var(--subcolor);
  text-align: center;
  font-weight: bold;
}
#cycle .block p{
  text-align: center;
  line-height: 1.8;
  margin-top: 32px;
  font-size: clamp(1.4rem,3.7333vw,1.6rem);
}
#cycle .block ul{
    margin-top: 32px;
    gap: 3.7%;
    align-items: center;
}
#cycle .block li{
    text-align: center;
}
#cycle .block span{
    margin-top: 10px;
    display: inline-block;
    font-size: 1.4rem;
}
@media screen and (max-width: 1000px) {
  #cycle{
    margin-top: 48px;
}
#cycle .block{
  padding: 48px 0;
}
#cycle .block .inner {
  max-width: 85%;
}
#cycle .block ul{
  display: grid;
  row-gap: 20px;
}
}
@media screen and (max-width: 500px) {
  #cycle .block span{
    font-size: 1.1rem;
  }
}
/*-----------------------------------------------
 features - kids / regular common
-----------------------------------------------*/
.classFlex{
  gap: 3.33%;
  margin-top: 80px;
}
.classCommon{
  background: #fff;
  border-radius: 20px;
}
.classCommon .inner{
  width: 85%;
  margin: 0 auto;
  padding: 56px 0;
  text-align: center;
}
.classCommon h4{
  text-align: center;
  letter-spacing: -0.2rem;
  font-size: clamp(3.8rem,10.133vw,4.8rem);
  font-weight: 800;
  background: rgb(198,0,11);
  background: linear-gradient(0deg, rgba(198,0,11,1) 50%, rgba(239,0,0,1) 51%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.classCommon h3{
  text-align: center;
  font-size: clamp(2.2rem,5.866vw,2.4rem);
  font-weight: bold;
  line-height: 1.5;
  margin-top: 24px;
}
.classCommon p{
  line-height: 1.8;
  text-align: center;
  margin-top: 24px;
  font-size: clamp(1.4rem,3.7333vw,1.6rem);
}
.classCommon img{
  margin-top: 32px;
  width: 85%;
}
@media screen and (max-width: 1000px) {
  .classFlex{
    display: grid;
    row-gap: 24px;
    margin-top: 72px;
  }
  .classCommon .inner{
    padding: 48px 0;
  }
}
@media screen and (max-width: 500px) {

}
/*-----------------------------------------------
 features - kids
-----------------------------------------------*/
#kids{
    width: 48.335%;
}
@media screen and (max-width: 1000px) {
  #kids{
    width: 100%;
}
}
@media screen and (max-width: 500px) {

}
/*-----------------------------------------------
 features - regular
-----------------------------------------------*/
#regular{
    width: 48.335%;
}
@media screen and (max-width: 1000px) {
  #regular{
    width: 100%;
}
}
@media screen and (max-width: 500px) {

}
/*-----------------------------------------------
 monthlyFee
-----------------------------------------------*/
#monthlyFee{
  background-color: #39bff1;
  background-image: url(../../assets/img/monthly_bg.png);
  /* background-position: right; */
  background-size: cover;
  background-repeat: no-repeat;
  padding: 100px 0;
  
}
#monthlyFee .fee{
  justify-content: space-between;
  align-items: center;
}
#monthlyFee .ttl{
  width: 43.5%;
  color: var(--maincolor);
}
#monthlyFee .sub{
  font-weight: normal;
}
#monthlyFee .ttl h2{
  background: none;
  -webkit-text-fill-color: initial;
}
#monthlyFee .text{
  margin-top: 40px;
  line-height: 1.8;
  font-size: clamp(1.4rem,3.733vw,1.6rem);
}
#monthlyFee ul.feeFlex{
  display: flex;
  justify-content: space-between;
  width: 48.8%;
}
#monthlyFee ul.feeFlex li{
  width: 34.66%;
  background-color: var(--maincolor);
  border-radius: 15px;
  padding: 57px 6.93% 40px;
}
#monthlyFee .class-name{
  width: 205px;
  background-color: var(--font);
  border-radius: 20px;
  text-align: center;
  font-weight: bold;
  color: var(--maincolor);
  padding: 8px 0 8px 0;
}
#monthlyFee .course{
  padding-top: 8px;
  font-weight: bold;
  text-align: center;
}
#monthlyFee .tax{
  color: var(--font);
  font-size: 4rem;
}
#monthlyFee .price{
  color: var(--subcolor);
  font-size: 7rem;
  font-weight: bold;
  letter-spacing: -3px;
  text-align: right;
}
#monthlyFee .tax-included{
  text-align: right;
  margin-top: -20px;
}
#monthlyFee .price-wrapper{
  width: 200px;
}
@media screen and (max-width: 1000px) {
  #monthlyFee{
    padding: 64px 0;
  }
  #monthlyFee .flex{
    display: block;
  }
  #monthlyFee .ttl {
    width: 100%;
  }
  #monthlyFee ul.feeFlex {
    width: 100%;
}
#monthlyFee .class-name{
  margin: 0 auto;
}
#monthlyFee .price-wrapper{
  margin: 0 auto;
}
#monthlyFee .text{
  margin-top: 30px;
}
}
@media screen and (max-width: 500px) {
  #monthlyFee ul.feeFlex {
    display: block;
    width: 100%;
}
#monthlyFee ul.feeFlex li {
  width: 100%;
  padding: 24px 0;
}
#monthlyFee ul.feeFlex li:first-child{
  margin-bottom: 24px;
}
}
/*-----------------------------------------------
 access
-----------------------------------------------*/
#access{
  background: var(--maincolor);
  position: relative;
  padding: 100px 0;
}
#access::before{
  content: "";
  position: absolute;
  background-image: url(../../assets/img/shape_bg.png);
  background-position: top;
  background-repeat: no-repeat;
  z-index: 1;
  max-width: 1004px;
  width: 100%;
  max-height: 692px;
  height: 100%;
  top:0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
#access .wrap{
  position: relative;
  z-index: 2;
}
#access .wrap p{
  text-align: center;  
}
#access .place-name1{
  font-size: clamp(2.2rem,5.866vw,2.8rem);
  font-weight: bold;
  margin-top: -15px;
}
#access .place-name2{
  font-size: clamp(3.2rem,8.533vw,3.4rem);
  font-weight: bold;
}
#access .center{
  display: flex;
  justify-content: center;
}
#access .sub{
  text-align: center;
}
#access ul{
  margin: 16px 0 32px;
  line-height: 1.8;
}
#access ul li{
  display: flex;
  justify-content: center;
  font-size: clamp(1.4rem,3.733vw,1.6rem);
  text-align: center;
}
#access iframe{
  width: 90%;
  height: 280px;
  display: block;
    border: 0;
}
@media screen and (max-width: 500px) {
  #access{
    padding: 56px 0 64px;
  }
#access iframe{
  height: 140px;
}
}
/*-----------------------------------------------
 voice
-----------------------------------------------*/
#voice{
  background-color: #ececec;
  padding: 100px 0;
}
#voice .center{
  display: flex;
  justify-content: center;
}
#voice .wrap p{
  text-align: center;  
}
#voice .flex{
  display: flex;
}
#voice ul{
  display: flex;
  justify-content: space-between;
}
#voice .left .guardian,
#voice .right .guardian{
  display: flex;
  justify-content: left;
  gap: 5%;
}
#voice .heading-wrap{
  display: flex;
  align-items: center;
}
#voice .heading{
  width: auto;
  color: var(--subcolor);
  font-weight: bold;
}
#voice .heading p{
  line-height: 1.5;
}
#voice .heading p.subTtl{
  font-size: 1.4rem;
  text-align: left;
}
#voice .heading h3{
  font-size: 2.2rem;
  text-align: left;
  margin-top: 8px;
  line-height: 1.5;
  font-weight: bold;
}
#voice .icon1,
#voice .icon2{
  width: 35%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 100px 0;
}
#voice .icon1{
  background-image: url(../../assets/img/pictogram01.png);
}
#voice .icon2{
  background-image: url(../../assets/img/pictogram02.png);
}
#voice .left,
#voice .right{
  width: 41.3%;
  background-color: var(--maincolor);
  border-radius: 20px;
  padding: 50px 3.5%;
}
#voice .left p,
#voice .right p{
  font-size: clamp(1.4rem,3.733vw,1.6rem);
  text-align: left;
  margin-top: 30px;
  line-height: 1.8;
}
@media screen and (max-width: 1000px) {
  .wrap{
    max-width: 90%;
  }
  #voice{
    padding: 56px 0 64px;
  }
  #voice .icon1,
  #voice .icon2{
   padding: 70px 0;
   width: 28%;
  }
  #voice .delayScroll{
   display: block;
  }
  #voice .left .guardian,
  #voice .right .guardian {
      justify-content: center;
      gap: 0;
  }
  #voice .heading-wrap{
    display: flex;
    justify-content: center;
  }
  #voice .left,
  #voice .right{
    width: 100%;
    padding: 40px 0 48px;
  }
  #voice .heading p.subTtl{
    padding: 0;
    margin-top: 0;
  }
  #voice .right{
    margin-top: 24px;
  }
  #voice .left p, #voice .right p{
    padding: 0 32px;
  }
  #voice .heading h3{
    padding: 0;
  }
}
@media screen and (max-width: 500px) {
  #voice .icon1,
  #voice .icon2{
   width: 30%;
   margin: 0 auto;
   padding: 51px 0;
  }
  #voice .left .guardian,
  #voice .right .guardian {
      display: block;
  }
  #voice .left p, #voice .right p{
    padding: 0 24px;
  }
  #voice .heading p.subTtl{
    text-align: center;
    margin-top: 16px;
  }
  #voice .heading h3{
    text-align: center;
    padding: 0 24px;
  }
}
/*-----------------------------------------------
 gallery
-----------------------------------------------*/
#gallery{
  width: calc((100vw - 1200px) / 2 + 1200px);
  margin: 0 0 0 auto;
  padding-top: 100px;
}
.gallerySlider .subttl{
  font-size: 20px;
  font-weight: bold;
  padding-left: 20px;
  position: relative;
  margin-bottom: 20px;
}
.gallerySlider .subttl::before{
  content: "";
  position: absolute;
  background: url(../img/icon_star.png);
  width: 11px;
  height: 22px;
  background-size: cover;
  background-repeat: no-repeat;
  left: 0;
  top: 4px;
}
.newStudio{
  margin-bottom: 56px;
}
.swiper-backface-hidden .swiper-slide img{
  max-width:1000px;
  width: 100%;
}
@media screen and (max-width: 1000px) {
  #gallery{
    width: 95%;
    padding-top: 56px;
  }
  .gallerySlider .subttl{
    margin-bottom: 10px;
  }
  .newStudio {
    margin-bottom: 24px;
}
}
@media screen and (max-width: 500px) {
  .gallerySlider .subttl{
    font-size: 16px;
    padding-left: 15px;
  }
  .gallerySlider .subttl::before{
    width: 8px;
    height: 17px;
  }
}
/*-----------------------------------------------
 instructor / graduate common
-----------------------------------------------*/
.bg02{
  padding: 0 0 100px;
  position: relative;
  overflow: hidden;
}
.bg02::before {
  content: "";
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%;
  background: url(../img/gallery_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0; 
  transition: opacity 0.3s ease;
  z-index: -5;
}
.bg02.visible::before {
  opacity: 1; 
}
.bg02 .flex{
  padding-top: 120px;
  gap: 3.33%;
}
@media screen and (max-width: 500px) {
  .bg02 .flex{
    display: grid;
    row-gap: 24px;
    padding-top: 64px;
    }
  .bg02 {
    padding: 0 0 64px;
  }
}
/*-----------------------------------------------
 instructor
-----------------------------------------------*/
#instructor {
  position: relative;
  width: 48.335%;
  border-radius: 20px;
  overflow: hidden;
}
#instructor::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../assets/img/instructor_bg.jpg);
  background-size: cover;
  background-position: 46% 0px;
  background-repeat: no-repeat;
  transition: transform 0.4s ease-in-out;
}
#instructor .detail{
  padding: 40px;
}
#instructor .ttl{
    padding-top: 500px;
    position: relative;
}
#instructor .ttl h3{
  font-size: clamp(4.0rem,10.666vw,5.4rem);
  font-weight: 800;
  color: var(--maincolor);
  transition: 0.4s ;
}
#instructor .ttl p.sub{
  color: var(--maincolor);
  font-size: clamp(1.6rem,4.266vw,1.8rem);
  padding-top: 8px;
  font-weight: bold;
  transition: 0.4s ;
}
#instructor .more{
  color: var(--maincolor);
  position: relative;
  padding-right: 16px;
  margin-top: 32px;
  display: inline;
  transition:  0.4s ;
}
#instructor .more::before{
  content: "";
  position: absolute;
  background: url(../../assets/img/arrow_white.png);
  width: 7px;
  height: 12px;
  right: 0;
  top: 3px;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 20px;
}
#instructor{
  transform: 0.4s;
}
/*hover - pc only*/
@media screen and (min-width: 1000px) {
  #instructor:hover::before {
    transform: scale(1.1);
  }
  #instructor:hover .more::before {
    background: url(../../assets/img/arrow_red.png); 
  }  
  #instructor:hover .ttl h3 {
    color: var(--subcolor); 
  }
  #instructor:hover .ttl p.sub {
    color: var(--subcolor); 
  }
  #instructor:hover .more {
    color: var(--subcolor); 
  }
}
@media screen and (max-width: 1000px) {
  section.instructor {
    height: 500px;
}
  #instructor{
    width: 100%;
    height: 500px;
  }
  #instructor .ttl {
    padding-top: 300px;
    margin-bottom: 20px;
  }
  #instructor .ttl h3{
    font-size: 4.0rem;
  }
}
@media screen and (max-width: 500px) {
    #instructor .ttl {
      padding-top: 270px;
      margin-bottom: 10px;
  }
  section.instructor {
    height: auto;
}
  #instructor{
    height: 450px;
  }
}
/*-----------------------------------------------
 graduate
-----------------------------------------------*/
#graduate {
  position: relative;
  width: 48.335%;
  border-radius: 20px;
  overflow: hidden;
}
#graduate::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../assets/img/graduate_bg.jpg);
  background-size: cover;
  background-position: 77% 0;
  background-repeat: no-repeat;
  transition: transform 0.4s ease-in-out;
  border-radius: 20px;
}
#graduate .detail{
  padding: 40px;
  text-align: right;
}
#graduate .ttl{
    padding-top: 500px;
    position: relative;
}
#graduate .ttl h3{
  font-size: clamp(4.0rem,10.666vw,5.4rem);
  font-weight: 800;
  color: var(--maincolor);
  text-align: right;
  transition: 0.4s ;
}
#graduate .ttl p.sub{
  color: var(--maincolor);
  font-size: clamp(1.6rem,4.266vw,1.8rem);
  padding-top: 8px;
  font-weight: bold;
  text-align: right;
  transition: 0.4s ;
}
#graduate .more{
  text-align: right;
}
#graduate .more{
  color: var(--maincolor);
  position: relative;
  padding-right: 16px;
  margin-top: 32px;
  display: inline;
  transition: 0.4s;
}
#graduate .more::before{
  content: "";
  position: absolute;
  background: url(../../assets/img/arrow_white.png);
  width: 7px;
  height: 12px;
  right: 0;
  top: 3px;
  background-size: contain;
  background-repeat: no-repeat;
}
/*hover - pc only*/
@media screen and (min-width: 1000px) {
  #graduate:hover::before {
    transform: scale(1.1);
  }
  #graduate:hover .more::before {
    background: url(../../assets/img/arrow_red.png); 
  }
  #graduate:hover .ttl h3 {
    color: var(--subcolor); 
  }
  #graduate:hover .ttl p.sub {
    color: var(--subcolor); 
  }
  #graduate:hover .more {
    color: var(--subcolor); 
  }
}
@media screen and (max-width: 1000px) {
  #graduate{
    width: 100%;
  }
  #graduate{
    width: 100%;
    height: 500px;
  }
  #graduate .ttl {
    padding-top: 300px;
    margin-bottom: 20px;
  }
  #graduate .ttl h3{
    font-size: 4.0rem;
  }
}
@media screen and (max-width: 500px) {
  #graduate .ttl {
    padding-top: 270px;
    margin-bottom: 10px;
}
section.graduate {
  height: 450px;
}
#graduate{
  height: auto;
}
}

/*-----------------------------------------------
 footer
-----------------------------------------------*/
footer p{
  text-align: center;
  background: var(--font);
  color: var(--maincolor);
  padding: 40px 0;
  font-size: 14px;
}
@media screen and (max-width: 500px) {
  footer p{
    padding: 20px 0;
    font-size: 12px;
  }
}


@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1000px) {
}
@media screen and (max-width: 500px) {
}

/* 240124 */
#monthlyFee .price{
  font-size: 6rem;
}
#monthlyFee .tax{
  font-size: 3rem;
}
#monthlyFee .tax2{
  font-family: var(--ja);
  font-size: 2.5rem;
  font-weight: bold;
  margin-top: -10px;
  vertical-align: middle;
  padding-left: 4px;
}


/*250303*/
#monthlyFee ul.listUl{
  width: 100%;
  gap: 1.67%;
  margin-top: 30px;
}
#monthlyFee .listUl li {
  width: 50%;
	background-color: #fff;
  padding: 0;
  border-radius: 0;
}
#monthlyFee .listUl li:first-child .headLine02 {
	color: #e50012;
}
#monthlyFee .listUl li dl {
	border-top: 2px solid #000;
}
#monthlyFee .listUl li dt {
	padding: 13px 0 0 20px;
	float: left;
	font-size: 14px;
  position: relative;
  z-index: 1;
}
#monthlyFee .listUl li dd {
	padding: 13px 10px 14px 0;
	font-size: 13px;
	text-align: right;
	border-bottom: 1px solid #EBEBEB;
}
#monthlyFee .listUl li dd.bold {
	border-bottom: 20px solid #F2F2F2;
}
#monthlyFee .listUl li .first {
	border-bottom: 2px solid #000;
	background-color: #EDEDED;
  /* text-decoration: line-through;
  text-decoration-color: var(--subcolor);
  text-decoration-thickness: 0.2rem; */
  position: relative;
}
/* #monthlyFee .listUl li .first::before{
  content: "キャンペーン期間　0円!!";
  position: absolute;
  font-weight: bold;
  color: var(--subcolor);
  font-size: 1.6rem;
  right: 120px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
} */
#monthlyFee .listUl li:first-child .first {
	background-color: #FAE4E6;
}
#monthlyFee .listUl li .none {
	border-bottom: none;
}
#monthlyFee .headLine02 {
  padding: 20px 20px 20px;
  font-weight: bold;
}
#monthlyFee .implement p{
  color: #fff;
  padding-right: 32px;
}
#monthlyFee .implement ul{
    gap: 10px;
}
#monthlyFee .implement li{
  padding: 0;
  background: var(--font);
  color: #fff;
  width: 106px;
  text-align: center;
  padding: 4px 0;
  font-size: 1.4rem;
}
#implementClass{
  padding-top: 80px;
}
#schedule {
  padding: 100px 0;
  background:#F2F2F2;
}
#schedule .headttl{
  font-size: 14px;
  padding-left: 24px;
  position: relative;
  margin-bottom: 16px;
}
#schedule .headttl2{
  margin-top: 64px;
}
#schedule .headttl::before{
  content: "";
  position: absolute;
  background: url(../img/icon_star.png);
  width: 12px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  left: 0;
  top: 6px;
}
#schedule .headttl .en{
  font-size: 3.0rem;
  vertical-align: -5px;
  margin-right: 16px;
  font-weight: 900;
}
#schedule .accordion-header .large {
  font-size: 18px;
  vertical-align: middle;
  font-weight: 900;
}
#schedule .accordion-header .age{
  font-weight: 900;
}
#schedule .accordion-header .color {
  margin: 0 3px;
  color: #e50012;
  font-size: 12px;
}
#schedule .accordion-header .color {
  font-size: 14px;
}
#schedule .accordion{
  display: flex;
  gap: 20px;
  flex-flow: wrap;
}
#schedule .accordion2{
  margin-top: 32px;
}
#schedule .accordion .accordionBox{
  width: calc((100% - 40px) / 3);
}
#schedule .accordion-content {
  display: none;
}
#schedule .accordion-header {
  background-color: #FFF;
  padding: 20px 45px 16px 20px;
  /* margin: 10px 0 0; */
  transition: background .3s ease;
  cursor: pointer;
  position: relative;
  border-bottom: 2px solid #000;
}
#schedule .accordion-header::before,
#schedule .accordion-header::after{
  position:absolute;
  content:'';
  top:1px;
  right:20px;
  bottom:0;
  width:12px;
  height:2px;
  margin:auto;
  background:#151E2F;
}
#schedule .accordion-header::after{
  transform:rotate(-90deg);
  transition:transform 0.3s;
}
#schedule .accordion-header.active::after{
  transform:rotate(0deg);
}
#schedule .accordion-header span.category{
  font-weight: 900;
}
#schedule .accordion-header span.category,
#schedule .accordion-content ul{
  position: relative;
}
#schedule .scheduleDetail li{
    display: flex;
    justify-content: space-between;
    background-color: #FFF;
    padding: 16px 20px 19px 20px;
    border-bottom: 1px solid #E5E5E5;
}
#schedule .scheduleDetail li:last-child{
  border-bottom: none;
}
#schedule .scheduleDetail li .lTxt{
    font-weight: bold;
    color: var(--font);
    font-size: 1.4rem;
}
#schedule .scheduleDetail li .rTxt{
  font-weight: normal;
  font-size: 1.4rem;
}
#schedule .scheduleDetail .headmin{
  background: #ffdee4;
}
#schedule .scheduleDetail .headmin .color{
  color: var(--font);
}
#schedule .scheduleDetail .color{
  color: #eb647c;
}
#schedule .scheduleDetail .color01 {
  margin-left: 10px;
  color: #eb647c;
  font-size: 16px;
}
#schedule .scheduleDetail .color02{
  margin-left: 10px;
  color: #f3ac12;
  font-size: 16px;
}
@media screen and (max-width: 1000px) {
  #monthlyFee .implement,
  #monthlyFee .implement ul{
    display: flex !important;
  }
  #monthlyFee ul.listUl{
    display: grid;
    row-gap: 20px;
  }
  #monthlyFee .listUl li {
    width: 100%;
  }
  #schedule .accordion{
    display: grid;
    row-gap: 20px;
  }
  #schedule .accordion .accordionBox{
    width: 100%;
  }
  #schedule{
    padding: 64px 0;
  }
  #schedule .headttl2{
    margin-top: 48px;
  }
}
@media screen and (max-width: 500px) {
  #implementClass{
    padding-top: 64px;
  }
  #monthlyFee .implement p{
    padding-right: 16px;
  }
  #monthlyFee .implement li{
    width: 76px;
  }
  #schedule .headttl .en{
    font-size: 2.4rem;
    vertical-align: -3px;
    margin-right: 10px;
  }
  #schedule .headttl::before{
    width: 10px;
    height: 20px;
  }
  #schedule .headttl2{
    padding-left: 16px;
    font-size: 1.2rem;   
  }
  #monthlyFee .listUl li .first::before{
    left: 20px;
    font-size: 1.3rem;
  }
}

/* BENEFITS end  */
/* #benefits li.no2::after{
  content: "";
  background: rgba(0,0,0,0.5);
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: inline-block;
  border-radius: 22px;
} */
#benefits li.no2 .end{
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
}
/* #benefits li.no2 .end::before {
  content: "ご好評につき終了いたしました。";
  position: absolute;
  z-index: 5;
  width: 15em;
  height: 60px;
  line-height: 60px;
  font-weight: bold;
  padding: 0 90px;
  margin-top: 19%;
  color: #fff;
  background: var(--subcolor);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
} */
#benefits li.no2 .end::before {
  content: "";
  position: absolute;
  background: url(../img/benefits_end.jpg) no-repeat;
  background-size: contain;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  max-width: 1000px;
  max-height: 197px;
  width: 100%;
  height: 100%;
  z-index: 5;
}
@media screen and (max-width: 1000px) {
  /* #benefits li.no2 .end::before{
    margin-top: 15%;
  } */
#benefits li.no2 .end::before {
  top: 40%;
}
}
@media screen and (max-width: 500px) {
 /* #benefits li.no2 .end::before {
  height: 50px;
  line-height: 50px;
  padding: 0 20px 0 30px;
  margin-top: 18%;
} */
#benefits li.no2 .end::before {
  top: 50%;
}
}

/* 250501 */
.weekdaysOpen{
  color: var(--subcolor);
  margin-left: 16px;
  font-weight: bold;
}
#schedule .scheduleDetail li .lTxt .new{
  color: var(--subcolor);
  margin-left: 8px;
}
@media screen and (max-width: 500px) {
  .weekdaysOpen{
    display: inline-block;
    margin-left: -24px;
  }
}

/*250512*/
.padding{
    padding: 50px 0;
    background: #fff;
}
@media screen and (max-width: 1000px) {
  .padding{
    padding: 0;
  }
}