/*!
Theme Name: QQ Kids index
*/

:root {
  --width-s: min(800px, 100%);
  --width-m: min(1080px, 100%);
  --width-h: calc(50% - calc(var(--blank-size-xs)));
  --color-lgry: #e8e8e8;
  --color-gry: #888;
  --color-bl: #27addf;
  --color-lye: #fffde5;
  --color-ye: #fffa9f;
  --color-grn-01: #add456;
  --color-grn-02: #8dbc1f;
  --color-grn-03: #0c7852;
  --color-or: #f36431;
  --color-pk: #ff585f;
  --color-re: #e8464b;
  --font-lheigh-xs: 1.24;
  --font-lheigh-s: 1.45;
  --font-lheigh-m: 1.68;
  --box-shadow-02: 0 0 0.5rem rgb(0 0 0 / 0.2);
  --box-shadow-03: 0 0 0.5rem rgb(0 0 0 / 0.3);
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
p, figure, ul, ol, li {
  margin: 0;
  padding: 0;
}
picture {
  display: block;
}
li {
  list-style: none;
}
.c-cv-area {
  margin-bottom: 0;
}

@media only screen and (min-width: 769px) {
  :root {
    --font-size-xs: 12px;
    --font-size-s: 14px;
    --font-size-m: 16px;
    --font-size-l: 20px;
    --font-size-xl: 24px;
    --font-size-xxl: 32px;
    --blank-size-xs: 1rem;
    --blank-size-s: 1.8rem;
    --blank-size-m: 2.8rem;
    --blank-size-l: 4.2rem;
    --blank-size-xl: 5.8rem;
  }
  .is-hidden--pc {
    display: none !important;
  }
}

@media only screen and (max-width: 768px) {
  :root {
    --font-size-xs: 10px;
    --font-size-s: 12px;
    --font-size-m: 14px;
    --font-size-l: 18px;
    --font-size-xl: 24px;
    --font-size-xxl: 28px;
    --blank-size-xs: 0.6rem;
    --blank-size-s: 1rem;
    --blank-size-m: 1.8rem;
    --blank-size-l: 2.8rem;
    --blank-size-xl: 4rem;
  }
  .is-hidden--sp {
    display: none !important;
  }
}

/* u
====================================================*/
.u-dp--b { display: block; }
.u-ta--c { text-align: center; }
.u-ta--r { text-align: right; }
.u-fs--s { font-size: var(--font-size-s); }
.u-fs--xxl { font-size: var(--font-size-xxl); }
.u-fw--b { font-weight: 700; }
.u-fc--gry { color: var(--color-gry); }
.u-fc--or { color: var(--color-or); }
.u-fc--pk { color: var(--color-pk); }

.u-row--center {
  display: flex;
  justify-content: center;
}
.u-mtb--m { margin-top: var(--blank-size-m); margin-bottom: var(--blank-size-m); }
.u-mt--xs { margin-top: var(--blank-size-xs); }
.u-mt--s { margin-top: var(--blank-size-s); }
.u-mt--m { margin-top: var(--blank-size-m); }
.u-mb--xs { margin-bottom: var(--blank-size-xs); }
.u-mb--s { margin-bottom: var(--blank-size-s); }
.u-mb--m { margin-bottom: var(--blank-size-m); }

.u-arrow::before {
  content: "";
  position: relative;
  top: -0.1em;
  display: inline-block;
  vertical-align: middle;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.75em;
  transform: rotate(45deg);
}


/* 汎用
====================================================*/
main {
  line-height: var(--font-lheigh-m);
  font-size: var(--font-size-m);
  font-weight: 500;
  text-align: justify;
}

/* section --------------------------- */
.l-section {
  margin: 0;
  padding: var(--blank-size-xl) 0;
}
.l-section--lye {
  background: var(--color-lye);
}
.m-section__inner {
  margin: 0 auto;
  
}
.m-section__inner + .m-section__inner {
  margin-top: var(--blank-size-xl);
}
.m-section__inner--m {
  width: var(--width-m);
}
.m-section__inner--s {
  width: var(--width-s);
}

/* list --------------------------- */
.m-list--person .m-list__item {
  .m-img {
    img {
      display: block;
      width: min(200px, 45vw);
      margin: 0 auto var(--blank-size-xs);
    }
    .m-heading--m {
      text-align: center;
    }
  }
  .u-fw--b {
    margin: var(--blank-size-xs) -1em var(--blank-size-s);
    line-height: var(--font-lheigh-s);
    font-size: var(--font-size-s);
    text-align: center;
  }
}

/* iframe --------------------------- */
.m-iframe__wrapper {
  position: relative;
  width: var(--width-s);
  margin: var(--blank-size-s) auto 0;
  padding-bottom: 56.2%;
}
.m-iframe__wrapper iframe {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* heading / text --------------------------- */
*[class^="m-heading--"] {
  line-height: var(--font-lheigh-s);
  color: #000;
  font-weight: 700;
}
.m-heading--xl,
.m-heading--l {
  text-align: center;
}
.m-heading--xl {
  margin: 0 0 var(--blank-size-l);
  font-size: var(--font-size-xxl);

  &::after {
    content: "";
    margin: 0.6em auto 0;
    height: 10px;
    width: 10px;
    display: block;
    background: var(--color-re);
    box-shadow: -12px 0 0 var(--color-bl), 12px 0 0 var(--color-grn-01);
  }
  .m-heading__text {
    font-size: 1.5em;
  }
}
.m-heading--l {
  margin: 0 0 var(--blank-size-m);
  font-size: var(--font-size-xl);
}
.m-heading--m {
  margin: 0 0 0.5em;
  font-size: var(--font-size-l);
}
.m-heading--s {
  margin: 0 0 0.25em;
  font-size: 1em;
}
.m-text--desc {
  margin: -1rem 0 var(--blank-size-l);
}
p + .m-heading--s {
  margin-top: 1em;
}

/* btn --------------------------- */
.m-btn--cta {
  position: relative;
  display: block;
  width: min(340px, 80vw);
  margin: var(--blank-size-m) auto 0;
  padding: 1em 0;
  line-height: 1;
  color: #fff;
  font-weight: 700;
  text-align: center;
  border-radius: 2em;
  transition: transform 0.1s, box-shadow 0.1s;

  &::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 1em;
    width: 0.6em;
    height: 0.8em;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: #fff;
    transform: translateY(-50%);
  }
  &:hover {
    transform: translateY(0.1em);
    opacity: 1;
  }
}
.m-btn--cta--s {
  width: fit-content;
  padding: 0.8em 2.25em 0.8em 1.25em;
  margin: var(--blank-size-xs) 0 0 auto;
  font-size: var(--font-size-s);
}
.m-btn--cta__bl {
  background: var(--color-bl);
  box-shadow: 0 0.2em 0 #1e9cca;
  &:hover {
    box-shadow: 0 0.1em 0 #1e9cca;
  }
}
.m-btn--cta__pk {
  background: var(--color-pk);
  box-shadow: 0 0.2em 0 #f1000a;
  &:hover {
    box-shadow: 0 0.1em 0 #f1000a;
  }
}
.m-btn--cta__grn {
  background: var(--color-grn-02);
  box-shadow: 0 0.2em 0 #6c950e;
  &:hover {
    box-shadow: 0 0.1em 0 #6c950e;
  }
}

/* レスポンシブ --------------------------- */
@media only screen and (min-width: 769px) {
  .l-main {
    padding-bottom: 4rem;
  }
  .m-list--person .m-list__item {
    width: calc(25% - calc(var(--blank-size-s)));
  }
  .m-text--desc {
    text-align: center;
  }
  .u-row--between {
    display: flex;
    justify-content: space-between;
  }
}
@media only screen and (max-width: 768px) {
  .l-main {
    padding-bottom: 3rem;
  }
  .m-section__inner {
    padding: 0 var(--blank-size-m);
  }
  .m-btn--cta {
    font-size: calc(var(--font-size-m) * 1.2);
  }
  .m-btn--cta--s {
    margin-top: var(--blank-size-s);
    font-size: calc(var(--font-size-s) * 1.2);
  }
  .m-list--person .m-list__item {
    width: 80vw;
    margin: 0 auto var(--blank-size-l);
  }
}


/* 各コンテンツ
====================================================*/
.l-section.--no1 .m-heading--xl,
.l-section.--point .m-heading--xl {
  line-height: var(--font-lheigh-xs);
}

/* MV --------------------------- */
.main-visual {
  overflow: hidden;
  position: relative;
  z-index: 0;

  .main-visual__link {
    display: block;
    img {
      width: 100%;
    }
  }
}

/* top_slider --------------------------- */
.l-section.--slidebanner {
  padding: 16px;
  .c-swiper {
    margin: 0 auto;
  }
  .c-swiper {
    max-width: 780px;
    .swiper-wrapper {
      padding: 0;
    }
    .swiper-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-pagination-custom, .swiper-pagination-fraction {
      position: static;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 15px;
      margin-top: 5px;
      .swiper-pagination-bullet {
        display: block;
      }
    }
  }
  
}

/* about --------------------------- */
.m-list--about {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: min(360px, 80vw);
  margin: var(--blank-size-xs) auto 0;
  .m-name,
  .m-detail {
    display: flex;
    align-items: center;
    padding: var(--blank-size-s) 0;
    font-weight: 700;
    border-bottom: 2px solid var(--color-bl);
  }
}
.about--animation {
  background: center / auto 100%;
  animation: bg infinite linear;
}

/* no1 --------------------------- */
.no1__mark {
  width: min(500px, 90vw);
  line-height: var(--font-lheigh-s);
  margin: 0 auto;
  color: #000;
  font-size: var(--font-size-xl);
  font-weight: 700;
  text-align: center;
  background: url("/qqkids/wp-content/themes/qqkids-new-compressed/assets/images/home/home-ranking-bg-r.png") right bottom / auto 80% no-repeat, url("/qqkids/wp-content/themes/qqkids-new-compressed/assets/images/home/home-ranking-bg-l.png") left bottom / auto 80% no-repeat;

  img {
    display: block;
    width: min(240px, 45vw);
    margin: 0 auto var(--blank-size-s);
  }
}

/* point --------------------------- */
.m-list--point {
  counter-reset: count;
  flex-wrap: wrap;

  .m-list__item {
    overflow: hidden;
    margin-bottom: calc(var(--blank-size-xs) * 1.5);
    padding: 0 var(--blank-size-m) var(--blank-size-m);
    background: #fff;
    border: 2px solid var(--color-grn-02);
    border-radius: 1rem;

    .m-heading--m {
      display: flex;
      align-items: center;
      height: 4.5em;
      margin: 0 calc(-1 * var(--blank-size-m)) var(--blank-size-m);
      padding: 0 0 0 var(--blank-size-m);
      color: #fff;
      background: var(--color-grn-02);

      &::before {
        display: flex;
        align-items: center;
        justify-content: center;
        content: counter(count);
        counter-increment: count;
        width: 2em;
        height: 2em;
        line-height: 1;
        margin-right: var(--blank-size-xs);
        color: var(--color-grn-02);
        font-size: var(--font-size-xl);
        background: #fff;
        border-radius: 50%;
      }
    }
  }
}
.l-section.--point .m-heading--l {
  position: relative;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.75em;

  &::before, &::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 35px;
    height: 30px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="35" viewBox="0 0 30 35"><path d="M0,14a1,1,0,0,1-.851-.474A1,1,0,0,1-.526,12.15l21-13a1,1,0,0,1,1.377.324A1,1,0,0,1,21.526.85l-21,13A1,1,0,0,1,0,14Z" transform="translate(7 20)" fill="%23ff585f"/><path  d="M0,32a1,1,0,0,1-.642-.234,1,1,0,0,1-.124-1.409l26-31a1,1,0,0,1,1.409-.124A1,1,0,0,1,26.766.643l-26,31A1,1,0,0,1,0,32Z" fill="%23ff585f"/></svg>') center/100% auto no-repeat;
  }
  &::before {
    left: 0;
    transform: rotateY(180deg);
  }
  &::after {
    right: 0;
  }
}

/* fee --------------------------- */
.l-section.--fee {
  .m-text--desc {
    margin-bottom: var(--blank-size-m);
    color: var(--color-re);
    font-size: 1.8em;
    font-weight: 900;
  }
  .m-list {
    flex-wrap: wrap;
    .m-list__item {
      overflow: hidden;
      background: var(--color-grn-03);
      border:  2px solid var(--color-grn-03);
      border-radius: 1rem;
    }
    .m-heading--l {
      margin-bottom: 0;
      color: #fff;
    }
    .m-list__item.--popular {
      border-color: var(--color-pk);
      background: var(--color-pk);
      .headding__num {
        color: var(--color-ye);
      }
      .headding__no1 {
        position: relative;
        top: -0.5em;
        display: inline-block;
        margin-left: 1em;
        padding: 0.7em 0.5em 0.8em;
        color: #000;
        font-size: var(--font-size-xs);
        background: var(--color-ye);
        border-radius: 0.5em;
        vertical-align: middle;
      }
    }
  }
  .headding__num {
    position: relative;
    display: inline-block;
    color: var(--color-ye);
  }
  .m-text {
    height: 100%;
    padding: var(--blank-size-s);
    background: #fff;
  }
  .m-heading--l,
  .m-list__item {
    line-height: 1;
  }
  .m-heading--l {
    padding:  calc(var(--blank-size-xs) + 2px) 0 var(--blank-size-xs);
    height: 60px;
  }
  .headding__num {
    font-size: var(--font-size-xxl);
  }
  .headding__sub {
    font-size: var(--font-size-m);
    font-weight: 400;
  }
  .fee__text--01 {
    position: relative;
    margin: var(--blank-size-xs) 0 var(--blank-size-s);
    font-size: var(--font-size-l);
    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: 34px;
      height: 52px;
      margin-left: -17px;
      background: left/contain no-repeat;
    }
    &::before {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41.55 62.82"><path class="cls-1" d="M41.55,47.56a19.33,19.33,0,0,1-2.48-.15l2.48,0a13.24,13.24,0,0,0-2.65,0C26.63,45.68,27.32,32.14,26.22,32.66c0,11-6.16,14.26-10.59,15.17l-4.43.08a19.44,19.44,0,0,1,2.48.15l-2.48,0a15,15,0,0,0,2.68,0c12.29,1.72,12,15.24,13.07,14.72,0-11,6-14.27,10.3-15.17Z" fill="%23ffe731"/><path class="cls-1" d="M18.66,35.72c0-13.06,7.09-16.89,12.19-18l5.1-.09a22.78,22.78,0,0,1-3-.19l3-.05a15.48,15.48,0,0,0-3.15,0C18.27,15.43,19.1-.6,17.79,0c0,13.05-7.28,16.88-12.53,18L0,18.07a22.9,22.9,0,0,1,3,.19l-3,0a16.73,16.73,0,0,0,3.18,0C17.73,20.33,17.36,36.34,18.66,35.72Z" fill="%23ffe731"/></svg>');
      transform: translate(-6.5em, -50%);
    }
    &::after {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41.55 62.82"><path class="cls-1" d="M0,47.56a19.44,19.44,0,0,0,2.48-.15L0,47.36a13.24,13.24,0,0,1,2.65,0c12.27-1.71,11.58-15.25,12.68-14.73,0,11,6.16,14.26,10.59,15.17l4.43.08a19.6,19.6,0,0,0-2.49.15l2.49,0a15,15,0,0,1-2.68,0c-12.29,1.72-12,15.24-13.07,14.72,0-11-6-14.27-10.31-15.17Z" fill="%23ffe731"/><path class="cls-1" d="M22.89,35.72c0-13.06-7.09-16.89-12.19-18l-5.1-.09a22.9,22.9,0,0,0,3-.19l-3-.05a15.48,15.48,0,0,1,3.15,0c14.52-2,13.7-18.06,15-17.44,0,13.05,7.28,16.88,12.53,18l5.26.09a23.06,23.06,0,0,0-3,.19l3,0a16.82,16.82,0,0,1-3.19,0C23.81,20.33,24.19,36.34,22.89,35.72Z" fill="%23ffe731"/></svg>');
      transform: translate(6.5em, -50%);
    }
  }
  .fee__text--02 {
    margin-top: 0.25em;
    color: var(--color-gry);
    font-size: var(--font-size-xxl);
    font-weight: 700;
    .text__fee {
      text-decoration: line-through;
    }
    .text__tax {
      font-size: 0.5em;
    }
  }
  .fee__text--03 {
    position: relative;
    width: fit-content;
    margin: var(--blank-size-s) auto 0;
    padding-bottom: 0.5rem;
    color: var(--color-re);
    font-size: 2.4em;
    font-weight: 900;
    &::before,
    &::after {
      content: "";
      display: block;
    }
    &::before {
      width: 2rem;
      height: 1rem;
      margin: 0 auto;
      background: var(--color-re);
      clip-path: polygon(0 0, 100% 0%, 50% 100%);
    }
    &::after {
      position: absolute;
      width: calc(100% + 1rem);
      height: 1.5rem;
      left: -0.5rem;
      bottom: 0;
      background: var(--color-ye);
      z-index: 0;
    }
    .text__line {
      position: relative;
      z-index: 2;
    }
    .text__fee {
      position: relative;
      top: 0.05em;
      display: inline-block;
      margin: 0 0.05em;
      font-size: 2em;
    }
    .text__tax {
      position: absolute;
      right: -0.8em;
      bottom: 3em;
      width: 4em;
      font-size: 0.4em;
      font-weight: 700;
    }
  }
  .u-mt--xs.u-fs--s {
    padding: var(--blank-size-s);
    background: var(--color-lgry);
    border-radius: 1rem;
    li {
      padding-left: 1em;
      &::before {
        content: "※";
        display: inline-block;
        margin-left: -1em;
      }
    }
  }
}
.fee__ticket {
  width: min(600px, 100%);
  margin: var(--blank-size-m) auto var(--blank-size-l);
}

/* recommend --------------------------- */
.m-list--recommend {
  clear: both;
  overflow: hidden;
  .m-list__item {
    position: relative;
    &:nth-of-type(1) .m-heading--m {
      border-bottom-color: var(--color-bl);
    }
    &:nth-of-type(2) .m-heading--m  {
      border-bottom-color: var(--color-grn-02);
    }
    &:nth-of-type(3) .m-heading--m {
      border-bottom-color: var(--color-re);
    }
    &:nth-of-type(4) .m-heading--m {
      border-bottom-color: #e89747;
    }
    .m-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 80%;
      z-index: 0;
    }
    .m-heading--m, .m-text {
      position: relative;
      z-index: 1;
    }
    .m-heading--m {
      padding-bottom: var(--blank-size-xs);
      border-bottom: 2px solid;
    }
  }
}

/* voice --------------------------- */
.m-list--voice {
  flex-wrap: wrap;
  .m-list__item {
    padding: var(--blank-size-m);
    background: #fff;
    border-radius: 1rem;
    box-shadow: var(--box-shadow-02);
    .m-heading--m span {
      background: linear-gradient(to top, #ffc4c4 40%, rgba(255, 255, 255, 0) 40%);
    }
    .u-fw--b {
      margin-bottom: var(--blank-size-xs);
    }
  }
}

/* curriculum --------------------------- */
.m-list--curriculum {
  flex-wrap: wrap;
  .m-list__item {
    position: relative;
    overflow: hidden;
    margin-bottom: calc(var(--blank-size-xs) * 2);
    padding: 0 var(--blank-size-m) calc(var(--blank-size-m) * 3);
    background: #fff;
    border-radius: 1rem;
    border: 2px solid var(--color-bl);
    .m-heading--m {
      width: calc(100% + var(--blank-size-m) * 2);
      margin: 0 calc(-1 * var(--blank-size-m)) var(--blank-size-m);
      padding: var(--blank-size-s) var(--blank-size-m);
      color: #fff;
      background: var(--color-bl);
    }
    .curriculum__text__target {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: var(--blank-size-xs);
      .m-name,
      .m-detail {
        margin-bottom: 0.5em;
        padding: 0.2em 0.5em;
        line-height: var(--font-lheigh-s);
        font-size: var(--font-size-s);
      }
      .m-name {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 4em;
        padding: 0.2em 0.5em;
        text-align: center;
        border-radius: 0.25rem;
        background: var(--color-lgry);
      }
      .m-detail {
        width: calc(100% - 4em);
      }
    }
  }
}
.m-list--work {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--blank-size-s);
  background: #fff;
  .m-list__item {
    padding: var(--blank-size-s);
    text-align: center;
  }
}

/* smile --------------------------- */
.l-section.--smile {
  background: #F1F4F8;
  .m-img figcaption {
    color: #fff;
    padding: var(--blank-size-m);
  }
}

/* レスポンシブ --------------------------- */
@media only screen and (min-width: 769px) {
  .main-visual {
    background: #ffdf99;
    .main-visual__link {
      width: var(--width-m);
      margin: 0 auto;
      transition: opacity 0.2s;
      &:hover {
        opacity: 0.75;
      }
    }
  }

  .m-list--about {
    .m-name {
      width: 140px;
      font-size: var(--font-size-xl);
    }
    .m-detail {
      width: calc(100% - 150px);
      font-size: calc(var(--font-size-xl) * 1.5);
    }
  }
  .about--animation {
    height: 200px;
    background-image: url("/qqkids/wp-content/themes/qqkids-new-compressed/assets/images/home/home-animation.png");
    animation-duration: 40s;
  }
  @keyframes bg {
    0% {
      background-position: 0 0
    }
    100% {
      background-position: -2000px 0
    }
  }
  .m-list--point .m-list__item {
    width: calc(33.33% - var(--blank-size-xs));
  }

  .l-section.--fee .m-list .m-list__item {
    width: calc(50% - var(--blank-size-s) / 2);
    margin-bottom: var(--blank-size-s);
  }
  
  .m-list--voice .m-list__item,
  .m-list--curriculum .m-list__item,
  .m-list--recommend .m-list__item {
    width: var(--width-h);
  }

  .m-list--curriculum .m-list__item {
    .m-img {
      width: 200px;
    }
    .curriculum__text {
      width: calc(100% - 200px - calc(var(--blank-size-s)));
    }
    .m-btn--cta {
      position: absolute;
      bottom: var(--blank-size-m);
      right: var(--blank-size-m);
    }
  }

  .m-list--recommend .m-list__item {
    padding-top: 9%;
    &:nth-of-type(n+2) {
      margin-top: var(--blank-size-xl);
    }
    &:nth-of-type(odd) {
      float: left;
    }
    &:nth-of-type(even) {
      float: right;
    }
    &:nth-of-type(1),
    &:nth-of-type(4) {
      padding-left: 15%;
    }
    &:nth-of-type(2),
    &:nth-of-type(3) {
      padding-left: 12.5%;
    }
    &:nth-of-type(1) {
      padding-top: 7.5%;
    }
  }

  .m-list--voice .m-list__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: calc(var(--blank-size-xs) * 2);
    .m-img {
      width: 120px;
    }
    .voice__text {
      width: calc(100% - 120px - calc(var(--blank-size-m)));
    }
  }

  .m-list--work .m-list__item {
    width: 25%;
  }

  .l-section.--smile .m-img {
    position: relative;
    figcaption {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
@media only screen and (max-width: 768px) {
  .main-visual {
    margin-top: 60px;
  }

  .m-list--about {
    .m-name {
      width: 100px;
      font-size: var(--font-size-l);
    }
    .m-detail {
      width: calc(100% - 110px);
      font-size: var(--font-size-xl);
    }
  }
  .about--animation {
    height: 300px;
    background-image: url("/qqkids/wp-content/themes/qqkids-new-compressed/assets/images/home/home-animation-sp.png");
    animation-duration: 30s;
  }
  @keyframes bg {
    0% {
      background-position: 0 0
    }
    100% {
      background-position: -1333.333333px 0
    }
  }

  .l-section.--point .m-heading--l {
    padding: 0 2em;
    font-size: var(--font-size-l);
  }

  .l-section.--fee {
    .m-text--desc {
      margin-left: -1em;
      margin-right: -1em;
      line-height: var(--font-lheigh-xs);
      font-size: var(--font-size-xl);
      text-align: center;
    }
    .m-list__item {
      margin-bottom: var(--blank-size-s);
      .m-heading--l {
        height: 50px;
        .headding__no1 {
          top: -0.4em;
        }
      }
    }
  }

  .m-list--recommend .m-list__item {
    &:nth-of-type(n+2) {
      margin-top: var(--blank-size-m);
    }
    &:nth-of-type(1) .m-heading--m {
      padding-left: 32vw;
    }
    &:nth-of-type(4) .m-img {
      left: -5%;
    }
    .m-heading--m {
      height: 9em;
      padding: 5.5em 0 0 25vw;
      letter-spacing: -0.03em;
      font-size: var(--font-size-m);
    }
    .m-img {
      overflow: hidden;
      height: calc(var(--font-size-m) * 9);
    }
  }

  .m-list--curriculum .m-list__item {
    padding-bottom: var(--blank-size-m);
    .m-img {
      margin-bottom: var(--blank-size-m);
    }
    .m-heading--m {
      text-align: left;
    }
  }

  .m-list--voice .m-list__item {
    margin-bottom: var(--blank-size-s);
    padding-top: calc(var(--blank-size-m) * var(--font-lheigh-m));
    .m-img {
      width: 50vw;
      margin: 0 auto var(--blank-size-m);
    }
    .m-heading--m,
    .u-fw--b {
      text-align: center;
    }
    .u-fw--b {
      margin-bottom: var(--blank-size-s);
    }
  }

  .m-list--work .m-list__item {
    width: 50%;
  }

  .l-section.--smile .m-img figcaption {
    background: #0038A8;
  }

  .counseling.c-archive-item--event br,
  .c-archive-item--event .c-event--day::before {
    display: none;
  }
  .c-archive-item--event .c-event--day {
    margin-top: 0;
    font-size: var(--font-size-xl);
  }
  .c-archive-item--event.counseling .c-event--day {
    display: block;
  }
}