/*!
Theme Name: QQ Kids pricelist
*/

: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);
}

.u-deco--line {
  position: relative;
  width: fit-content;
  margin-left: auto !important;
  margin-right: auto !important;
  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;
  }
}

/* 汎用
====================================================*/

/* 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;
}
/* レスポンシブ --------------------------- */
@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.--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;
      & .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;
      }
    }
    & .m-list__item.--popular {
      border-color: var(--color-pk);
      background: var(--color-pk);
      & .headding__num {
        color: var(--color-ye);
      }
    }
    & .m-list__item.--c40 {
      border-color: var(--color-bl);
      background: var(--color-bl);
      & .headding__num {
        color: var(--color-ye);
      }
      & .sub {
        margin-top: 1rem;
      }
    }
  }
  & .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);
  & img {
    display: block;
    margin-bottom: var(--blank-size-xs);
  }
}

/* レスポンシブ --------------------------- */
@media only screen and (min-width: 769px) {

  .l-section.--fee .m-list .m-list__item {
    margin-bottom: var(--blank-size-s);
  }
  .l-section.--fee .m-list .m-list__item:not(.--c40) {
    width: calc(50% - var(--blank-size-s) / 2);
  }
  .l-section.--fee .m-list .m-list__item.--c40 {
    width: 100%;
    & .m-text {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: center;
      height: auto;
      & .fee__text--01,
      & .sub {
        width: 100%;
      }
      & .fee__text--01 {
        margin-bottom: 0;
        &::before {
          transform: translate(-9.5em, -50%);
        }
        &::after {
          transform: translate(9.5em, -50%);
        }
      }
      & .fee__text--03 {
        position: relative;
        margin: 0 0 0 4rem;
        &::before {
            position: absolute;
            bottom: 10%;
            left: -3rem;
            width: 1rem;
            height: 2rem;
            clip-path: polygon(0 0, 0 100%, 100% 50%);
        }
      }
    }
  }
}

@media only screen and (max-width: 768px) {
  .l-section.--fee {
    overflow: hidden;
    & .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;
        }
      }
      &.--c40 .m-heading--l {
        height: auto;
        padding-bottom: 10px;
        & .headding__no1 {
          margin-left: 0;
        }
        & .headding__sub {
          display: block;
          margin-top: 3px;
        }
      }
      &.--c40 .sub {
        font-size: 12px;
      }
    }
  }
}