@charset "UTF-8";

html {
  scrollbar-gutter: stable;
  overscroll-behavior-y: none;
}

html:has(:popover-open),
body:has(:popover-open) {
  overflow: hidden;
  pointer-events: none;
}

:root {
  --orange: #ee5404;
}

#au_gallery {

  .orange {
    color: var(--orange);
  }

  sup {
    vertical-align: super;
    font-size: 0.8em;
    top: 0;
  }

  picture {
    display: block;
  }

  img {
    width: 100%;
    user-drag: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    /* object-fit: cover; */
  }

  picture {
    line-height: 0;
  }

  button {
    background-color: inherit;
    border: none;
    outline: none;
    line-height: 0;
    padding: 0;
  }

  button:active {
    border: none;
  }

  /*-pc*/
  @media (min-width : 641px) {

    .for_sp,
    .-sp {
      display: none !important;
    }

    .bt {
      cursor: pointer;
      transition: all 0.5s;

      &:hover {
        opacity: 0.8;
      }
    }
  }

  /*-sp*/
  @media (max-width : 640px) {

    .for_pc,
    .-pc {
      display: none !important;
    }
  }

  .contents_all_wrap {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    background: #fff;
  }

  .content_inner_wrap {
    width: 100%;
    position: relative;
    line-height: 1.5em;
    margin: auto;
    text-align: center;

    /*-pc*/
    @media (min-width : 641px) {
      max-width: 1240px;
      padding: 0 8px;
    }
  }

  .btn_primary {
    border-radius: 50vw;
    background-color: #D23A00;
    background-image: url(/cm/img/icon_arrow_link_white.svg);
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin: auto;
    font-weight: 700;
    transition: all 0.2s;

    /*-pc*/
    @media (min-width: 641px) {
      width: 360px;
      height: 88px;
      font-size: 16px;
      background-position: right 20px center;
      background-size: 30px;

      &:hover {
        background-position: right 15px center;
      }
    }

    /*-sp*/
    @media (max-width : 640px) {
      width: 92%;
      height: 20vw;
      font-size: 4vw;
      background-position: right 5vw center;
      background-size: 6vw;
      line-height: 1.2em;
      height: 18vw;
      margin: 3vw auto;

      &:hover {
        background-position: right 4vw center;
      }
    }
  }

  .btn_secondary {
    border-radius: 50vw;
    background-color: #fff;
    background-image: url(/cm/img/icon_arrow_link_orange.svg);
    border: 2px solid #D23A00;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #D23A00;
    margin: auto;
    font-weight: 700;
    transition: 0.2s all;

    /*-pc*/
    @media (min-width: 641px) {
      width: 360px;
      height: 88px;
      font-size: 16px;
      background-position: right 20px center;
      background-size: 30px;

      &:hover {
        background-position: right 15px center;
      }
    }

    /*-sp*/
    @media (max-width : 640px) {
      /* width: 50vw; */
      height: 15vw;
      font-size: 4vw;
      background-position: right 5vw center;
      background-size: 6vw;

      &:hover {
        background-position: right 4vw center;
      }
    }
  }

  .cv_copy {

    /*-pc*/
    @media (min-width : 641px) {
      font-size: 16px;
      margin: 54px auto 17px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      font-size: 4.5vw;
      line-height: 1.4em;
      margin: 11vw auto 4vw;
    }
  }

  /*共通要素（imgなど）
---------------------------------------------------*/
  img {
    width: 100%;
  }

  picture {
    display: block;
    width: 100%;
    line-height: 0;
  }

  /*section.kv 1/7
---------------------------------------------------*/
  section.kv {
    width: 100%;
    background-color: #fff;
    line-height: 0;
    overflow-y: hidden;
    background-image: url(/cm/img/kv_rainbow.webp);
    position: relative;
    overflow: hidden;

    /*-pc*/
    @media (min-width : 641px) {
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center bottom;
      overflow: hidden;
      position: relative;
    }

    /*-sp*/
    @media (max-width : 640px) {
      background-size: 166% 48%;
      background-repeat: no-repeat;
      background-position: left -21vw bottom 10vw;
    }

    .kv_title {
      background-color: #df5516;
      color: #fff;
      font-weight: 700;
      padding: 10px 0;
      position: relative;
      z-index: 5;

      /*-pc*/
      @media (min-width : 641px) {
        font-size: 50px;
      }

      /*-sp*/
      @media (max-width : 640px) {
        font-size: 7vw;
        text-align: center;
      }

      .content_inner_wrap {

        /*-pc*/
        @media (min-width : 641px) {
          max-width: 976px;
          text-align: left;
          padding: 0 8px;
        }

        /*-sp*/
        @media (max-width : 640px) {
          text-align: center;
        }
      }
    }

    .kv_wrap {
      width: 100%;
      margin: auto;
      position: relative;

      /*-pc*/
      @media (min-width : 641px) {
        max-width: 1280px;
        max-height: 720px;
        aspect-ratio: 128/54;
      }

      /*-sp*/
      @media (max-width : 640px) {
        min-height: 160.5vw;
      }
    }

    .kv_logo {
      position: absolute;
      display: block;
      z-index: 5;

      /*-pc*/
      @media (min-width : 641px) {
        max-width: 270px;
        width: 23%;
        left: 7.1%;
        top: 12.5%;
      }

      /*-sp*/
      @media (max-width : 640px) {
        width: 85vw;
        left: 8vw;
        top: 7vw;
      }
    }

    .kv_talent {
      position: absolute;
      /* max-width: 650px; */
      margin: auto;
      z-index: 5;

      /*-pc*/
      @media (min-width : 641px) {
        width: 32.9%;
        left: -10.5%;
        right: 0;
        bottom: 0;
      }

      /*-sp*/
      @media (max-width : 640px) {
        width: 76.6%;
        left: -17.5%;
        right: -35vw;
        bottom: -9vw;
      }
    }

    .kv_copy {
      position: absolute;
      color: #575757;
      line-height: 1.9em;
      z-index: 5;

      /*-pc*/
      @media (min-width : 641px) {
        left: 67.5%;
        bottom: 19.4%;
        font-size: min(1.6vw, 18px);
      }

      /*-sp*/
      @media (max-width : 640px) {
        left: 8vw;
        top: 43vw;
        font-size: 3.2vw;
        line-height: 2.1em;
      }

      .logo_copy {
        font-weight: 600;

        /*-pc*/
        @media (min-width : 641px) {
          font-size: min(1.8vw, 20.7px);
          margin: 5.8% 0 3%;
        }

        /*-sp*/
        @media (max-width : 640px) {
          font-size: 3.8vw;
          margin: 4vw 0 3%;
        }
      }

      .logo_au {
        display: block;

        /*-pc*/
        @media (min-width : 641px) {
          width: 50%;
        }

        /*-sp*/
        @media (max-width : 640px) {
          width: 27.4vw;
        }
      }
    }
  }
}

/*section.main-heading 2/7
---------------------------------------*/
section.main-heading {
  background-image: url(/cm/img/bg_rainbow.webp);
  background-size: contain;
  background-position: top left;
  background-repeat: repeat-x;

  /*-pc*/
  @media (min-width : 641px) {
    padding: 110px 0 202px;
  }

  /*-sp*/
  @media (max-width : 640px) {
    padding: 20vw 0 30vw;
  }

  .title {
    color: #EB5505;
    text-align: center;
    font-style: normal;
    font-weight: 700;

    /*-pc*/
    @media (min-width : 641px) {
      font-size: 45px;
      line-height: 1.7em;
    }

    /*-sp*/
    @media (max-width : 640px) {
      font-size: 8vw;
      line-height: 1.6em;
    }
  }
}

/*section.tvcm 3/7
---------------------------------------*/
section.tvcm {
  background: linear-gradient(0deg, #FFEAF2 -0.28%, #FFD7B5 99.41%);
  position: relative;

  /*-pc*/
  @media (min-width : 641px) {
    padding: 90px 0 180px;
  }

  /*-sp*/
  @media (max-width : 640px) {
    padding: 29vw 0 28vw;
  }

  .head_round img {
    position: absolute;
    left: 0;

    /*-pc*/
    @media (min-width : 641px) {
      width: 100%;
      height: 130px;
      top: -130px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      top: -21vw;
      height: 9vw;
      top: -9vw;
    }
  }

  .title {
    font-style: normal;
    font-weight: 700;
    color: #EB5505;
    transform: skewY(-10deg);

    /*-pc*/
    @media (min-width : 641px) {
      font-size: 55px;
      margin-bottom: 80px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      font-size: 12.4vw;
      margin-bottom: 16vw;
    }
  }

  .item_wrap {
    background-color: #fff;
    border: 1px solid #EB5505;
    margin: auto;
    background-image: url(/cm/img/rainbow.webp);
    box-sizing: border-box;
    position: relative;
    background-repeat: no-repeat;

    /*-pc*/
    @media (min-width : 641px) {
      max-width: 800px;
      border-radius: 20px;
      padding: 80px 80px 60px 80px;
      background-size: 970px 510px;
      background-position: left 330px bottom -80px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      max-width: 90vw;
      overflow: hidden;
      border-radius: 3vw;
      padding: 10.5vw 5vw;
      background-size: 110vw 58vw;
      background-position: bottom 9vw right -18vw;
      max-width: 90vw;
    }

    .tb {
      margin: auto;
      line-height: 0;
    }

    .note {
      text-align: left;
      line-height: 1.7em;

      /*-pc*/
      @media (min-width : 641px) {
        font-size: 18px;
        margin-top: 42px;
      }

      /*-sp*/
      @media (max-width : 640px) {
        font-size: 4vw;
        margin-top: 8vw;
        line-height: 1.7em;
      }
    }
  }
}

/*section.making 4/7
---------------------------------------*/
section.making {
  background: linear-gradient(0deg, #E6FFAA -0.28%, #FFE96F 99.41%);
  position: relative;

  /*-pc*/
  @media (min-width : 641px) {
    padding: 235px 0 180px;
  }

  /*-sp*/
  @media (max-width : 640px) {
    padding: 36vw 0 29vw;
  }

  .head_round img {
    width: 100%;
    position: absolute;
    left: 0;

    /*-pc*/
    @media (min-width : 641px) {
      height: 240px;
      top: -120px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      height: 22vw;
      top: -11vw;
    }
  }

  .title {
    font-style: normal;
    font-weight: 700;
    color: #EB5505;

    /*-pc*/
    @media (min-width : 641px) {
      font-size: 52px;
      transform: skewY(-10deg);
      margin-bottom: 100px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      font-size: 12.4vw;
      transform: skewY(-10deg);
      margin-bottom: 17vw;
    }
  }

  .item_wrap {
    background-color: #fff;
    border: 1px solid #EB5505;
    margin: auto;
    background-image: url(/cm/img/rainbow.webp);
    box-sizing: border-box;
    position: relative;
    background-repeat: no-repeat;

    /*-pc*/
    @media (min-width : 641px) {
      max-width: 800px;
      border-radius: 20px;
      padding: 80px 80px 80px 80px;
      background-size: 970px 510px;
      background-position: left 330px bottom -80px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      max-width: 90vw;
      border-radius: 3vw;
      padding: 7vw 5vw;
      background-size: 110vw 58vw;
      background-position: bottom 9vw right -18vw;
      max-width: 90vw;
    }

    .tb {
      margin: auto;
      line-height: 0;
    }

    .note {
      text-align: left;

      /* font-weight: 500; */
      /*-pc*/
      @media (min-width : 641px) {
        margin-top: 40px;
        width: 400px;
        min-height: 160px;
        font-size: 18px;
        line-height: 1.7em;
      }

      /*-sp*/
      @media (max-width : 640px) {
        margin-top: 3vw;
        width: 41vw;
        min-height: 20vw;
        font-size: 4vw;
        line-height: 1.7em;
      }
    }

    .tarent {
      position: absolute;
      bottom: 0;

      /*-pc*/
      @media (min-width : 641px) {
        max-width: 258px;
        left: 64%;
      }

      /*-sp*/
      @media (max-width : 640px) {
        max-width: 38vw;
        right: 4vw;
      }
    }
  }
}

/*section.interview 5/7
---------------------------------------*/
section.interview {
  background: linear-gradient(180deg, #E7DEFF -0.02%, #C0DCFF 99.81%);
  position: relative;

  /*-pc*/
  @media (min-width : 641px) {
    padding: 235px 0 180px;
  }

  /*-sp*/
  @media (max-width : 640px) {
    padding: 36vw 0 29vw;
  }

  .head_round img {
    width: 100%;
    position: absolute;
    left: 0;

    /*-pc*/
    @media (min-width : 641px) {
      height: 240px;
      top: -120px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      height: 22vw;
      top: -11vw;
    }
  }

  .title {
    font-style: normal;
    font-weight: 700;
    color: #EB5505;

    /*-pc*/
    @media (min-width : 641px) {
      font-size: 52px;
      transform: skewY(-10deg);
      margin-bottom: 100px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      font-size: 13vw;
      transform: skewY(-10deg);
      margin-bottom: 17vw;
    }
  }

  .item_wrap {
    background-color: #fff;
    border: 1px solid #EB5505;
    margin: auto;
    background-image: url(/cm/img/rainbow.webp);
    position: relative;
    box-sizing: border-box;
    background-repeat: no-repeat;

    /*-pc*/
    @media (min-width : 641px) {
      max-width: 800px;
      border-radius: 20px;
      padding: 80px 80px 80px 80px;
      background-size: 970px 510px;
      background-position: left 330px bottom -80px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      background-size: 110vw 58vw;
      background-position: bottom 9vw right -18vw;
      max-width: 90vw;
      border-radius: 3vw;
      padding: 7vw 5vw;
    }

    .tb {
      margin: auto;
      line-height: 0;
    }

    .note {
      text-align: left;

      /* font-weight: 500; */
      /*-pc*/
      @media (min-width : 641px) {
        font-size: 16px;
        margin-top: 40px;
        width: 400px;
        min-height: 160px;
        line-height: 1.7em;
      }

      /*-sp*/
      @media (max-width : 640px) {
        font-size: 3.9vw;
        letter-spacing: -0.02em;
        margin-top: 3vw;
        line-height: 1.7em;
        width: 40vw;
        /* min-height: 10vw; */
      }
    }

    .tarent {
      position: absolute;
      bottom: 0;

      /*-pc*/
      @media (min-width : 641px) {
        max-width: 167px;
        right: 13%;
      }

      /*-sp*/
      @media (max-width : 640px) {
        max-width: 27vw;
        right: 13vw;
        /* bottom: -1px; */
      }
    }
  }

  .btn_wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    /*-pc*/
    @media (min-width : 641px) {
      max-width: 750px;
      margin: 50px auto;
      column-gap: 45px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      flex-direction: column;
      max-width: 90vw;
      margin: 6vw auto;
      flex-direction: column;
      row-gap: 6vw;
    }

    .btn_secondary {

      /*-pc*/
      @media (min-width : 641px) {
        height: 80px;
        font-size: 18px;
        background-size: 30px 30px;
        background-position: right 20px top 50%;
      }

      /*-sp*/
      @media (max-width : 640px) {
        width: 100%;
        height: 12vw;
        font-size: 3vw;
        background-size: 5vw 5vw;
        background-position: right 2vw top 50%;
      }
    }
  }
}

/*section.web_movie 5/7
---------------------------------------*/
section.web-movie {
  position: relative;
  background-color: #fff;

  /*-pc*/
  @media (min-width : 641px) {
    padding: 166px 0 0px;
  }

  /*-sp*/
  @media (max-width : 640px) {
    padding: 25vw 0 1vw;
  }

  .head_round img {
    width: 100%;
    position: absolute;
    left: 0;

    /*-pc*/
    @media (min-width : 641px) {
      height: 240px;
      top: -120px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      height: 22vw;
      top: -11vw;
    }
  }

  .title {
    font-style: normal;
    font-weight: 700;
    color: #EB5505;

    /*-pc*/
    @media (min-width : 641px) {
      font-size: 52px;
      transform: skewY(-10deg);
      margin-bottom: 67px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      font-size: 9vw;
      transform: skewY(-10deg);
      margin-bottom: 13vw;
    }
  }

  .title_read {
    text-align: center;
    line-height: 1.5em;

    /*-pc*/
    @media (min-width : 641px) {
      font-size: 24px;
      margin-bottom: 30px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      font-size: 4.3vw;
      margin-bottom: 5vw;
    }
  }

  .slider1_wrap {
    width: 100%;
    position: relative;
    margin: auto;

    /*-pc*/
    @media (min-width : 641px) {
      margin-bottom: 90px;
      overflow: hidden;
      max-height: 531px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      margin-bottom: 10vw;
      overflow: hidden;
      width: 90vw;
    }

    .swiper1 {
      margin: auto;

      /*-pc*/
      @media (min-width : 641px) {
        overflow: visible;
        max-width: 1200px;
      }

      /*-sp*/
      @media (max-width : 640px) {}
    }

    .swiper-slide {

      /*-pc*/
      @media (min-width : 641px) {
        max-width: 600px;
      }

      /*-sp*/
      @media (max-width : 640px) {}
    }

    .swiper1_ui_wrap {
      position: relative;
      text-align: center;

      /*-pc*/
      @media (min-width : 641px) {
        margin: 73px auto 110px;
      }

      /*-sp*/
      @media (max-width : 640px) {
        margin: 10vw auto 10vw;
      }

      .swiper1-pagination {
        display: inline-block;
      }

      .swiper1-button-prev,
      .swiper1-button-next {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        border: 2px solid var(--orange);
        border-radius: 50%;
        background-image: url(/cm/img/icon_arrow_link_orange.svg);
        background-size: 60%;
        background-repeat: no-repeat;
        background-position: center;

        /*-pc*/
        @media (min-width : 641px) {
          height: 70px;
          width: 70px;
          top: -22px;
        }

        /*-sp*/
        @media (max-width : 640px) {
          height: 8vw;
          width: 8vw;
          top: 0.1vw;
        }
      }

      .swiper1-button-prev {
        transform: rotate(180deg);

        /*-pc*/
        @media (min-width : 641px) {
          right: 220px;
        }

        /*-sp*/
        @media (max-width : 640px) {
          right: 38vw;
        }
      }

      .swiper1-button-next {

        /*-pc*/
        @media (min-width : 641px) {
          left: 220px;
        }

        /*-sp*/
        @media (max-width : 640px) {
          left: 37vw;
        }
      }

      .swiper-pagination-bullet-active {
        background-color: var(--orange);
      }
    }
  }

  .short_movie_title {
    color: #EB5505;
    text-align: center;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5em;

    /*-pc*/
    @media (min-width : 641px) {
      font-size: 24px;
      margin-bottom: 10px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      font-size: 5vw;
      margin-bottom: 5vw;
    }
  }

  .short_movie_remarks {
    color: #000;
    font-weight: 400;

    /*-pc*/
    @media (min-width : 641px) {
      font-size: 14px;
      margin-bottom: 32px;
      font-weight: 500;
    }

    /*-sp*/
    @media (max-width : 640px) {
      font-size: 3vw;
      margin-bottom: 8vw;
    }

    a {
      color: #06A;
      text-decoration: underline;
    }
  }

  .goldcard_note {
    color: #000;
    text-align: center;
    font-style: normal;
    font-weight: 500;

    /*-pc*/
    @media (min-width : 641px) {
      font-size: 20px;
      margin: 0px 0 20px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      font-size: 4.2vw;
      margin: 0px 0 3vw;
      line-height: 1.3em;
    }
  }

  .slider2_wrap {
    width: 90%;
    max-width: 1280px;
    margin: auto;
    position: relative;
    overflow-x: hidden;

    /*-pc*/
    @media (min-width : 641px) {
      margin-bottom: 100px;
      margin: auto;
    }

    .swiper2 {
      overflow: visible;
      margin: auto;
    }

    .swiper-slide {

      /*-pc*/
      @media (min-width : 641px) {
        max-width: 420px;
      }

      /*-sp*/
      @media (max-width : 640px) {}
    }

    .swiper2_ui_wrap {
      position: relative;
      text-align: center;

      /*-pc*/
      @media (min-width : 641px) {
        margin: 73px auto 110px;
      }

      /*-sp*/
      @media (max-width : 640px) {
        margin: 10vw auto 10vw;
      }

      .swiper2-pagination {
        display: inline-block;
      }

      .swiper2-button-prev,
      .swiper2-button-next {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        border: 2px solid var(--orange);
        border-radius: 50%;
        background-image: url(/cm/img/icon_arrow_link_orange.svg);
        background-size: 60%;
        background-repeat: no-repeat;
        background-position: center;

        /*-pc*/
        @media (min-width : 641px) {
          height: 70px;
          width: 70px;
          top: -22px;
        }

        /*-sp*/
        @media (max-width : 640px) {
          height: 10vw;
          width: 10vw;
          top: -0.4vw;
        }
      }

      .swiper2-button-prev {
        transform: rotate(180deg);

        /*-pc*/
        @media (min-width : 641px) {
          right: 220px;
        }

        /*-sp*/
        @media (max-width : 640px) {
          right: 35vw;
        }
      }

      .swiper2-button-next {

        /*-pc*/
        @media (min-width : 641px) {
          left: 220px;
        }

        /*-sp*/
        @media (max-width : 640px) {
          left: 33vw;
        }
      }

      .swiper-pagination-bullet-active {
        background-color: var(--orange);
      }
    }
  }
}

/*section hellow_new 6/7
---------------------------------------------------*/
section.hello-new {
  position: relative;
  background-image: url(/cm/img/rainbow.webp);
  background-repeat: no-repeat;
  background-color: #fff;

  /*-pc*/
  @media (min-width : 641px) {
    background-position: top 120px center;
    background-repeat: no-repeat;
    background-position: top center;
  }

  /*-pc*/
  @media (min-width : 641px) {
    padding: 229px 0 0px;
    background-size: 110vw;
  }

  /*-sp*/
  @media (max-width : 640px) {
    padding: 32.8vw 0 0vw;
    background-size: 170vw;
    background-position: top 12vw left;
  }

  .hello_title {
    margin: auto;

    /*-pc*/
    @media (min-width : 641px) {
      max-width: 450px;
      margin-bottom: 56px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      max-width: 74vw;
      margin: auto;
      margin-bottom: 10vw;
    }
  }

  .hello_induction {
    color: #EB5505;
    text-align: center;
    font-family: "Noto Sans";
    font-weight: 700;
    line-height: 1.5em;

    /*-pc*/
    @media (min-width : 641px) {
      font-size: 32px;
      margin-bottom: 10px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      font-size: 8.6vw;
      margin-bottom: 5vw;
      line-height: 1.4em;
    }
  }

  .hellow_arrow {
    transform: rotate(90deg);
    margin: auto;

    /*-pc*/
    @media (min-width : 641px) {
      height: 50px;
      max-width: 50px;
      margin-bottom: 20px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      height: 10vw;
      max-width: 10vw;
      margin-bottom: 7vw;
    }
  }

  .item_wrap {
    background-color: #fff;
    margin: auto;
    background-image: url(/cm/img/rainbow.webp);
    position: relative;
    background-repeat: no-repeat;
    overflow: hidden;
    box-sizing: border-box;

    /*-pc*/
    @media (min-width : 641px) {
      border: 3px solid #EB5505;
      max-width: 800px;
      border-radius: 20px;
      padding: 80px 80px 80px 80px;
      background-position: top -30px right 0px;
      background-size: 850px 390px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      border: 0.5vw solid #EB5505;
      max-width: 80vw;
      border-radius: 3vw;
      padding: 14vw 3vw 8vw;
      background-position: top 5vw right 0px;
      background-size: 110vw;
    }

    &::after {
      content: "";
      background: linear-gradient(0deg, #FFE19E 0%, #FFF 100%);
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      z-index: 0;

      /*-pc*/
      @media (min-width : 641px) {
        height: 180px;
      }

      /*-sp*/
      @media (max-width : 640px) {
        height: 40vw;
      }
    }

    .item_inner_wrap {
      position: relative;
      z-index: 3;
    }

    .hello_card {
      margin: auto;

      /*-pc*/
      @media (min-width : 641px) {
        width: 450px;
        margin-bottom: 46px;
      }

      /*-sp*/
      @media (max-width : 640px) {
        width: 63vw;
        margin-bottom: 10vw;
      }
    }
  }
}

/*accodion*/
.accordion_wrap {

  /*-pc*/
  @media (min-width : 641px) {
    max-width: 960px;
    margin: 50px auto 0;
    padding: 10px;
  }

  /*-sp*/
  @media (max-width : 640px) {
    max-width: 90vw;
    margin: 10vw auto 0;
  }

  .accordion_bt {
    width: 100%;
    color: var(--orange);
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    background-image: url(/cm/img/icon_minus.svg);
    background-repeat: no-repeat;
    transition: none;

    /*-pc*/
    @media (min-width : 641px) {
      border: 3px solid var(--orange) !important;
      font-size: 16px;
      border-radius: 5px;
      background-position: right 20px top 50%;
      background-size: 40px 40px;
      height: 80px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      border: 0.5vw solid var(--orange) !important;
      font-size: 4vw;
      border-radius: 1vw;
      background-position: right 5vw top 50%;
      background-size: 6vw 6vw;
      height: 18vw;
    }

    &.off {
      background-image: url(/cm/img/icon_plus.svg);
    }
  }
}

.accodion_item {
  border-top: none;
  border-radius: 0 0 5px 5px;
  display: none;

  /*-pc*/
  @media (min-width : 641px) {
    padding: 30px 20px;
    border: 3px solid var(--orange);
    border-top: none;
  }

  /*-sp*/
  @media (max-width : 640px) {
    padding: 2vw 2vw;
    border: 0.5vw solid var(--orange);
    border-top: none;
    overflow: hidden;
  }

  .accordion_content_inner {

    /*-pc*/
    @media (min-width : 641px) {}

    /*-sp*/
    @media (max-width : 640px) {
      overflow-x: scroll;
      overflow-y: hidden;
      overscroll-behavior-x: none;
    }
  }

  table.detail_table {
    border-collapse: collapse;
    border-spacing: 0;
    color: #666;
    line-height: 1.5em;

    /*-pc*/
    @media (min-width : 641px) {
      font-size: 12px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      font-size: 3vw;
      width: 180vw;
    }

    .noborder,
    .gold {
      border: none;
    }

    td,
    th {
      border: 1px solid #e4e4e4;
      text-align: left;

      /*-pc*/
      @media (min-width : 641px) {
        padding: 15px;
      }

      /*-sp*/
      @media (max-width : 640px) {
        padding: 1.7vw;
      }
    }

    thead th {
      text-align: center;
      line-height: 1.3;

      /*-pc*/
      @media (min-width : 641px) {
        font-size: 14px;
      }

      /*-sp*/
      @media (max-width : 640px) {
        font-size: 3.5vw;
      }
    }

    tbody th {
      background-color: #f3f3f3;
      font-weight: 700;
      vertical-align: middle;
      text-align: center;
      color: #333;

      /*-pc*/
      @media (min-width : 641px) {
        font-size: 15px;
        padding: 15px;
      }

      /*-sp*/
      @media (max-width : 640px) {
        font-size: 3.6vw;
      }
    }

    tbody td {

      /*-pc*/
      @media (min-width : 641px) {
        padding: 15px;
      }

      /*-sp*/
      @media (max-width : 640px) {
        padding: 1vw 2vw;
      }
    }

    .card_name {
      font-weight: 700;
      letter-spacing: -0.01em;
      color: #000;

      /*-pc*/
      @media (min-width : 641px) {
        margin-bottom: 7px;
        font-size: 16px;
        white-space: nowrap;
      }

      /*-sp*/
      @media (max-width : 640px) {
        margin-bottom: 4vw;
        font-size: 4vw;
      }
    }

    .c-link__container {

      /*-pc*/
      @media (min-width : 641px) {
        margin-top: 10px;
      }

      /*-sp*/
      @media (max-width : 640px) {
        margin-top: 3vw;
      }
    }

    .description {
      line-height: 1.3em;

      /*-pc*/
      @media (min-width : 641px) {
        margin: 10px 0;
        font-size: 13px;
      }

      /*-sp*/
      @media (max-width : 640px) {
        margin: 3vw 0;
        font-size: 3.3vw;
      }
    }

    .conditions_list {

      /*-pc*/
      @media (min-width : 641px) {
        padding-left: 15px;
      }

      /*-sp*/
      @media (max-width : 640px) {
        padding-left: 4vw;
      }
    }

    .conditions_list>li {
      line-height: 1.5;
      list-style-type: disc;
      margin-bottom: 0.5em;

      /*-pc*/
      @media (min-width : 641px) {
        font-size: 14px;
      }

      /*-sp*/
      @media (max-width : 640px) {
        font-size: 3.5vw;
      }
    }

    ul.notes li {
      position: relative;
      padding-left: 1.2em;
      color: #666;
      font-size: 12px;
      line-height: 1.4em;
      text-align: left;
    }

    a.text_link {
      color: #06A;
    }

    .u-align-center {
      margin: auto;

      /*-pc*/
      @media (min-width : 641px) {
        width: 120px;
      }

      /*-sp*/
      @media (max-width : 640px) {
        width: 40vw;
      }
    }

    .fontRed {
      color: #f00;
    }

    .table_cell {
      display: table-cell;

      &.icon {
        white-space: nowrap;
      }
    }

    /*↑detail_table*/
  }

  .notes_wrap {
    text-align: left;
    line-height: 1.5em;
    color: #6E6E6E;
    margin-top: 30px;

    /*-pc*/
    @media (min-width : 641px) {
      font-size: 12px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      font-size: 3vw;
    }

    .for_sp_message {
      margin-bottom: 1.5em;
    }
  }
}

.accodion_remarks {
  display: table;
  text-align: left;
  color: #6E6E6E;

  /*-pc*/
  @media (min-width :641px) {
    font-size: 12px;
    margin: auto;
    padding: 20px 0;
    max-width: 930px;
    width: 100%;
  }

  /*-sp*/
  @media (max-width : 640px) {
    font-size: 3vw;
    width: 90vw;
    margin: auto;
    padding: 3vw 0;
    line-height: 1.5em;
  }

  .list_text {
    text-indent: -1.3em;
    padding-left: 1.3em;
  }
}

/*accodion_bt click data-tg
--------------------------------------*/
.-accodion_btn {
  position: relative;
}

.-accodion_btn .-to-open,
.-accodion_btn .-to-close {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
}

.-accodion_btn.on .-to-open,
.-accodion_btn.off .-to-close {
  display: none;
  pointer-events: none;
}

.-accodion_btn.on .-to-close,
.-accodion_btn.off .-to-open {
  display: block;
  pointer-events: auto;
}

/*end
  ----------------------------------*/
/*モーダル*/
.modal_item_window {
  background-color: #fff;
  transition: 0.5s all;
  z-index: 10;
  pointer-events: auto;
  overflow: visible;
  border: none;

  /*-pc*/
  @media (min-width : 641px) {
    min-width: 50px;
    min-height: 50px;
    padding: 0;
  }

  /*-sp*/
  @media (max-width : 640px) {
    min-width: 5vw;
    min-height: 5vw;
    padding: 0;
  }

  &.horizontal iframe,
  &.horizontal {
    width: 100%;
    line-height: 0;
    border: none;
    box-sizing: border-box;
    background-color: inherit;

    /*-pc*/
    @media (min-width : 641px) {
      max-width: 800px;
      aspect-ratio: 16/9;
      /* padding: 0 20px; */
    }

    /*-sp*/
    @media (max-width : 640px) {
      max-width: 90vw;
      aspect-ratio: 16/9
    }
  }

  &.vertical iframe,
  &.vertical {
    width: 100%;
    line-height: 0;
    border: none;
    box-sizing: border-box;
    background-color: inherit;

    /*-pc*/
    @media (min-width : 641px) {
      max-width: 400px;
      max-height: 80dvh;
      aspect-ratio: 9/16;
    }

    /*-sp*/
    @media (max-width : 640px) {
      max-width: 90vw;
      aspect-ratio: 9/16;
      max-height: 80dvh;
    }
  }

  .inner {
    position: relative;
    /* margin: 0 8px; */
  }

  img {
    width: 100%;
  }

  .bt_close {
    background-color: inherit;
    background-image: url(/cm/img/btn_close.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: none;
    position: absolute;
    cursor: pointer;

    /*-pc*/
    @media (min-width : 641px) {
      right: 0;
      top: -50px;
      height: 30px;
      width: 30px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      right: 0;
      top: -9vw;
      height: 8vw;
      width: 8vw;
    }
  }
}

.modal_item_window:popover-open {
  opacity: 1;
  transform: translateY(0);
}

@starting-style {
  .modal_item_window:popover-open {
    opacity: 0;
    transform: translateY(20px);
  }
}

.modal_item_window::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.35s ease, display 0.35s ease allow-discrete, overlay 0.35s ease allow-discrete;
}

.modal_item_window:popover-open::backdrop {
  opacity: 1;
  pointer-events: auto;
}

&@starting-style {
  .modal_item_window:popover-open::backdrop {
    opacity: 0;
    transition: 0.2s all;
  }
}

#modal_profile1.modal_item_window,
#modal_profile2.modal_item_window {
  width: 100%;
  text-align: center;
  border: none;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;

  &:popover-open {
    display: flex;
  }

  /*-pc*/
  @media (min-width : 641px) {
    max-width: 800px;
    padding: 20px 20px 20px 20px;
  }

  /*-sp*/
  @media (max-width : 640px) {
    max-width: 90vw;
    padding: 1vw;
  }

  .title {
    font-weight: 700;

    /*-pc*/
    @media (min-width : 641px) {
      font-size: 18px;
      margin: 0 0 20px 0;
    }

    /*-sp*/
    @media (max-width : 640px) {
      font-size: 4.5vw;
      margin: 3vw 0 5vw 0;
    }
  }

  .profile_wrap {

    /*-pc*/
    @media (min-width : 641px) {}

    /*-sp*/
    @media (max-width : 640px) {
      display: flex;
      margin-bottom: 5vw;
      column-gap: 4vw;
      width: 85vw;
      align-items: flex-start;
    }
  }

  .modal_profile {
    display: block;
    margin: 0 auto;

    /*-pc*/
    @media (min-width : 641px) {
      width: 155px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      width: 57%;
    }
  }

  .profile_note_wrap {

    /*-pc*/
    @media (min-width : 641px) {}

    /*-sp*/
    @media (max-width : 640px) {
      width: 60%;
      text-align: left;
    }
  }

  .name {
    font-weight: 700;

    /*-pc*/
    @media (min-width : 641px) {
      font-size: 16px;
      padding: 10px 0;
    }

    /*-sp*/
    @media (max-width : 640px) {
      font-size: 4.5vw;
      padding: 0 0 3vw 0;
      line-height: 1.2em;
    }
  }

  .notes {
    text-align: left;

    /*-pc*/
    @media (min-width : 641px) {
      font-size: 14px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      font-size: 3.1vw;
    }
  }
}

#modal_profile3.modal_item_window {
  width: 100%;
  text-align: center;
  border: none;
  box-sizing: border-box;

  /*-pc*/
  @media (min-width : 641px) {
    max-width: 800px;
    padding: 20px;
  }

  /*-sp*/
  @media (max-width : 640px) {
    max-width: 90vw;
    padding: 1vw 2vw;
  }

  .bt_close {

    /*-pc*/
    @media (min-width : 641px) {
      top: -58px;
      right: -24px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      top: -17vw;
      right: -4vw;
    }
  }

  .title {
    font-weight: 700;

    /*-pc*/
    @media (min-width : 641px) {
      font-size: 18px;
      margin: 0 0 20px 0;
    }

    /*-sp*/
    @media (max-width : 640px) {
      font-size: 5vw;
      margin: 5vw 0;
    }
  }

  .card_wrap {
    display: flex;

    /*-pc*/
    @media (min-width : 641px) {
      column-gap: 20px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      column-gap: 2vw;
      flex-direction: column;
      flex-wrap: wrap;
    }
  }

  .card {

    /*-pc*/
    @media (min-width : 641px) {
      width: 50%;
    }

    /*-sp*/
    @media (max-width : 640px) {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      column-gap: 1%;
    }
  }

  .card_pict {
    width: 100%;
    margin: auto;

    /*-pc*/
    @media (min-width : 641px) {
      max-width: 200px;
      margin-bottom: 15px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      max-width: 33%;
      margin: 0 auto;
    }
  }

  .card_note_wrap {

    /*-pc*/
    @media (min-width : 641px) {}

    /*-sp*/
    @media (max-width : 640px) {
      width: 59%;
      TEXT-ALIGN: left;
    }
  }

  .sub_copy {
    font-weight: 700;

    /*-pc*/
    @media (min-width : 641px) {
      font-size: 13px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      font-size: 3.1vw;
    }
  }

  .main_copy {
    font-weight: 700;

    /*-pc*/
    @media (min-width : 641px) {
      font-size: 18px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      font-size: 4vw;
    }
  }

  .price {
    font-weight: 700;

    /*-pc*/
    @media (min-width : 641px) {
      font-size: 12px;
      padding: 9px 0px;
    }

    /*-sp*/
    @media (max-width : 640px) {
      font-size: 3vw;
      padding: 3vw 0;
    }
  }

  .btn_primary {

    /*-pc*/
    @media (min-width : 641px) {
      height: 60px;
      width: 100%;
    }

    /*-sp*/
    @media (max-width : 640px) {
      height: 15vw;
      margin-bottom: 7vw;
    }
  }

  .btn_secondary {

    /*-pc*/
    @media (min-width : 641px) {
      height: 58px;
      margin: 30px auto;
    }

    /*-sp*/
    @media (max-width : 640px) {
      height: 17vw;
      margin: 5vw auto;
      width: 92%;
    }
  }
}

/*animation-----------------------*/
.-anime_fadeUp.on {
  transform: translateY(0px);
  opacity: 1;
  transition: all 0.2s ease-in-out;
}

.-anime_fadeUp {
  transform: translateY(50px);
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

/*-pc*/
@media (min-width : 640px) {
  .-anime_hoverZoom {
    transform: scale(0.97);
    transition: all 0.2s;
  }

  .-anime_hoverZoom:hover {
    transform: scale(1);
    transition: all 0.2s;
  }
}

.-anime_fadeIn {}

.-anime_fadeIn {
  animation-name: anime_fadeIn;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  will-change: opacity;
  opacity: 0;
}

@keyframes anime_fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.-anime_maskWhiteToRight {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 120vw;
  /* background-color: #fff; */
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 1) 100%);
  animation-name: anime_maskWhiteToRight;
  animation-duration: 0.25s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  will-change: transform;
  z-index: 1;
  left: -20%;
}

@keyframes anime_maskWhiteToRight {
  0% {
    opacity: 1;
    left: -20%;
  }

  98% {
    opacity: 1;
    left: 120%;
  }

  100% {
    left: 300%;
  }
}