:root {
  --width-s: min(800px, 100%);
  --width-m: min(1080px, 100%);
  --color-gry-01: #f8f8f8;
  --color-gry-02: #dbdbdb;
  --color-gry-03: #888;
  --color-bl-01: #1456a1;
  --color-bl-02: #13b0ec;
  --color-lbl: #ddf8ff;
  --color-or: #ff6f1a;
  --color-ye: #fee923;
  --color-lye: #fffa9f;
  --color-bgr: #008489;
  --color-lgr: #d2e7d6;
  --color-re: #ff3034;
  --color-pk: #fa4e72;
  --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);
}

@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-2l: 24px;
    --font-size-3l: 32px;
    --blank-size-xs: 0.8rem;
    --blank-size-s: 1.25rem;
    --blank-size-m: 2rem;
    --blank-size-l: 2.8rem;
    --blank-size-xl: 3.6rem;
  }
  .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-2l: 20px;
    --font-size-3l: 24px;
    --blank-size-xs: 0.6rem;
    --blank-size-s: 1rem;
    --blank-size-m: 1.6rem;
    --blank-size-l: 2.4rem;
    --blank-size-xl: 3.2rem;
  }
  .is-hidden--sp {
    display: none !important;
  }
}

/* u
====================================================*/
.u-dp--b { display: block; }
.u-ta--c { text-align: center; }
.u-fs--s { font-size: var(--font-size-s); }
.u-fc--or { color: var(--color-or); }
.u-fc--gry { color: var(--color-gry-03); }
.u-mtb--m { margin-top: var(--blank-size-m) !important; margin-bottom: var(--blank-size-m) !important; }
.u-mt--xs { margin-top: var(--blank-size-xs) !important; }
.u-mt--s { margin-top: var(--blank-size-s) !important; }
.u-mt--m { margin-top: var(--blank-size-m) !important; }
.u-mb--xs { margin-bottom: var(--blank-size-xs) !important; }
.u-mb--s { margin-bottom: var(--blank-size-s) !important; }
.u-mb--m { margin-bottom: var(--blank-size-m) !important; }

/* fee --------------------------- */
.fee__area {
  width: min(800px, 100%);
  margin: 0 auto;
  
  p {
    margin: 0;
  }
  .m-text--desc {
    margin-bottom: var(--blank-size-m);
    color: var(--color-re);
    font-size: 1.8em;
    font-weight: 900;
    text-align: center;
  }
  .m-text {
    height: 100%;
    padding: var(--blank-size-s);
    background: #fff;
  }
  .m-heading--l,
  .m-list__item {
    line-height: 1;
  }
  .m-heading--l {
    max-height: 60px;
    margin: 0;
    padding: var(--blank-size-xs) 0 calc(var(--blank-size-xs) + 2px);
    color: #fff;
  }
  .headding__num {
    position: relative;
    display: inline-block;
    color: var(--color-ye);
    font-size: var(--font-size-3l);
  }
  .headding__sub {
    font-size: var(--font-size-m);
    font-weight: 400;
  }
  .m-list {
    margin: 0;
    padding: 0;
    .m-list__item {
      overflow: hidden;
      background: var(--color-bgr);
      border:  2px solid var(--color-bgr);
      border-radius: 1rem;
      &.--popular {
        border-color: var(--color-pk);
        background: var(--color-pk);
        .headding__num {
          color: var(--color-lye);
        }
        .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-lye);
          border-radius: 0.5em;
          vertical-align: middle;
        }
      }
    }
  }
  .fee__text--01 {
    font-size: var(--font-size-l);
  }
  .fee__text--02 {
    margin-top: 0.25em;
    color: var(--color-gry-03);
    font-size: var(--font-size-3l);
    font-weight: 700; 
  }
  .fee__text--02 .text__fee {
    text-decoration: line-through;
  }
  .fee__text--02 .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;
  }
  .fee__text--03::before,
  .fee__text--03::after {
    content: "";
    display: block;
  }
  .fee__text--03::before {
    width: 2rem;
    height: 1rem;
    margin: 0 auto;
    background: var(--color-re);
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
  }
  .fee__text--03::after {
    position: absolute;
    width: calc(100% + 1rem);
    height: 1.5rem;
    left: -0.5rem;
    bottom: 0;
    background: var(--color-lye);
    z-index: 0;
  }
  .fee__text--03 .text__line {
    position: relative;
    z-index: 2;
  }
  .fee__text--03 .text__fee {
    position: relative;
    top: 0.05em;
    display: inline-block;
    margin: 0 0.05em;
    font-size: 2em;
  }
  .fee__text--03 .text__tax {
    position: absolute;
    right: -0.8em;
    bottom: 3em;
    width: 4em;
    font-size: 0.4em;
    font-weight: 700;
  }

  .fee_ticket__wrapper {
    position: relative;
    width: min(420px, calc(100% - var(--blank-size-m)));
    margin: var(--blank-size-xs) auto 0;

    &::before {
      content: "＋";
      display: block;
      line-height: 1;
      margin-bottom: var(--blank-size-s);
      color: var(--color-or);
      font-size: 4em;
      font-weight: 700;
      text-align: center;
    }
    .fee_ticket__benefits {
      position: relative;
      line-height: var(--font-lheigh-xs);
      padding: var(--blank-size-s) var(--blank-size-m);
      color: #fff;
      font-size: var(--font-size-2l);
      font-weight: 900;
      text-align: center;
      background: var(--color-bgr);
      border-radius: 1rem;
      box-shadow: var(--box-shadow-03);

      &::before {
        content: "";
        position: absolute;
        top: -20%;
        left: -6%;
        display: block;
        width: 7rem;
        height: 7rem;
        background: url(/assets2/images/top/avatar_bubble.png) no-repeat 50% 50%;
        background-size: contain;
      }
    }
    .fee_ticket__benefits--more {
      display: block;
      font-size: var(--font-size-m);
      font-weight: 500;

      &::before {
        content: "＼";
      }
      &::after {
        content: "／";
      }
    }
    .fee_ticket__benefits--num {
      color: var(--color-ye);
      font-size: 2em;
    }
  }
}

/* レスポンシブ --------------------------- */
@media only screen and (min-width: 769px) {
  .fee__area {
    font-size: 16px;
    .m-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .m-list__item {
        width: calc(50% - var(--blank-size-s) / 4);
        margin-bottom: calc(var(--blank-size-s) / 2);
      }
    }
  }
}

@media only screen and (max-width: 768px) {
  .fee__area {
    font-size: 14px;
    .m-text--desc {
      line-height: var(--font-lheigh-xs);
      font-size: var(--font-size-2l);
      text-align: center;
    }
    .m-list__item {
      margin-bottom: var(--blank-size-xs);

      &.--popular{
        .headding__no1 {
          top: -0.4em;
          padding: 0.5em;
          font-size: var(--font-size-s);
        }
        .m-heading--l {
          padding-bottom: calc(var(--blank-size-xs) / 1.25);
        }
      } 
    }
    .fee_ticket__benefits::before {
      width: 5rem;
      height: 5rem;
    }
  }
}