@charset "UTF-8";

/* update-section */
@media all {
  .bg-lightgreen {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--coco-lightgreen);
    color: #fff;
  }
  span.bg-lightgreen {
    display: inline-flex;
    height: 2em;
    margin: 0 0.4em;
    padding: 0 0.6em;
  }
  .update-content-notice {
    color: var(--main-blue);
  }

  .coco-bnr {
    position: relative;
    border: max(1px, 1rem) solid var(--coco-lightgreen);
  }
  .coco-patent {
    font-family: var(--linessed);
    font-weight: bold;
  }
  img.icon-outgo {
    display: inline-block;
    margin-left: 0.25em;
    width: 1em;
    height: 1em;
    vertical-align: initial;
  }
  .coco-bnr-text a > span {
    color: var(--main-blue);
    text-decoration: underline;
  }
  .coco-bnr-notice {
    display: inline-block;
    margin-left: 0.75em;
    font-size: 12rem;
    color: var(--txt-gray);
  }
  .button.coco-button {
    background: linear-gradient(
      45deg,
      rgba(40, 177, 187, 1) 0%,
      rgba(53, 197, 187, 1) 25%,
      rgba(156, 225, 187, 1) 50%,
      rgba(156, 225, 187, 1) 55%,
      rgba(53, 197, 187, 1) 75%,
      rgba(40, 177, 187, 1) 100%
    );
    background-size: 205%;
  }
  .button.coco-button > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .invert-white {
    filter: brightness(0) invert(1);
  }
  .coco-button .coco-logo {
    display: inline-block;
    overflow: hidden;
  }
  .coco-button .coco-logo img {
    height: 100%;
    width: auto;
    max-width: none;
  }
  .coco-button .icon-outogo {
    display: inline-block;
  }

  /* sp */
  @media only screen and (max-width: 767px) {
    .update-section {
      margin-top: 30rem;
      padding-bottom: 130rem;
    }
    .update-content-notice {
      margin-top: 2rem;
      font-size: 12rem;
    }

    .deco1 {
      display: none;
    }

    .coco-bnr {
      margin-top: 80rem;
      padding: 30rem 19rem 60rem;
      border-radius: 7rem;
    }
    .coco-bnr-logo {
      width: 250rem;
    }
    .coco-patent {
      margin-top: 16rem;
      height: 23rem;
      font-size: 13rem;
    }
    .coco-bnr-text {
      margin-top: 380rem;
    }

    .button.coco-button {
      position: absolute;
      bottom: -30rem;
      left: calc(50% - 125rem);
      width: 250rem;
      height: 60rem;
    }
    .coco-button > span {
      padding-left: 38rem;
      padding-right: 20rem;
      font-size: 16rem;
    }
    .coco-button .coco-logo {
      width: 27rem;
      height: 30rem;
    }
    .coco-button .icon-outogo {
      padding-bottom: 2rem;
      width: 16rem;
      height: 100%;
    }

    .deco2 {
      top: 150rem;
      left: calc(50% - 90rem);
      width: 180rem;
      height: 350rem;
    }
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
    .update-section {
      padding: 100rem 0 140rem;
    }

    .update-content {
      margin-top: 50rem;
      line-height: 2.5;
    }
    .update-content-notice {
      margin-top: 6rem;
      font-size: 14rem;
    }

    .deco1 {
      top: 0;
      right: 114rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      height: 240rem;
      width: 200rem;
    }
    .deco1 .logo-img {
      overflow: hidden;
      width: 167rem;
      height: 167rem;
      border-radius: 28rem;
      box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.2);
    }

    .coco-bnr {
      margin: 190rem auto 0;
      padding: 64rem 360rem 0 58rem;
      width: 800rem;
      height: 500rem;
      border-radius: 10rem;
    }
    .coco-patent {
      margin-top: 24rem;
      height: 32rem;
      font-size: 20rem;
    }
    .coco-bnr-text {
      margin-top: 50rem;
      line-height: 2.5;
    }
    .coco-bnr-text a {
      transition: opacity 0.3s;
    }
    .coco-bnr-text a:hover {
      opacity: 0.7;
    }

    .button.coco-button {
      position: absolute;
      bottom: -40rem;
      left: calc(50% - 160rem);
      width: 320rem;
      height: 80rem;
    }
    .coco-button > span {
      padding-left: 39rem;
      padding-right: 30rem;
      font-size: 20rem;
    }
    .coco-button .coco-logo {
      height: 38rem;
      width: 32rem;
    }
    .coco-button .icon-outogo {
      padding-bottom: 4rem;
      width: 16rem;
      height: 100%;
    }

    .deco2 {
      top: -80rem;
      right: 40rem;
      width: 255rem;
      height: 502rem;
    }
  }
}

/* credit-section */
@media all {
  .credit-section {
    background-color: #effafa;
  }
  .video-content {
    position: relative;
    background-color: #fff;
    text-align: center;
  }
  .video-content-ttl {
    font-family: var(--linessed);
    font-weight: bold;
    text-align: center;
    color: var(--coco-lightgreen);
  }
  .video-content-btn {
    position: absolute;
  }

  /* sp */
  @media only screen and (max-width: 767px) {
    .credit-section {
      padding: 0;
    }
    .credit-section-inner {
      padding: 410rem 25rem 110rem;
    }

    .deco3 {
      top: 30rem;
      left: calc(50% - 160rem);
      width: 320rem;
      height: 324rem;
    }

    .credit-content span.bg-lightgreen {
      margin: 0;
    }

    .video-content {
      margin-top: 140rem;
      padding-bottom: 40rem;
      border-radius: 7rem;
    }
    .video-content-img img {
      margin-top: -70rem;
      width: 246rem;
    }
    .video-content-ttl {
      margin: 20rem 0 10rem;
      font-size: 18rem;
    }
    .video-content-btn {
      bottom: -23rem;
      right: 20rem;
    }
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
    .credit-section {
      padding: 100rem 0 110rem;
    }
    .credit-section-inner {
      padding-left: 560rem;
    }

    .credit-content {
      margin-top: 35rem;
    }
    .credit-content p {
      line-height: 2.5;
    }

    .video-content {
      margin-top: 140rem;
      padding-bottom: 50rem;
      border-radius: 10rem;
    }
    .video-content-img img {
      margin-top: -70rem;
      width: 276rem;
    }
    .video-content-ttl {
      margin: 20rem 0;
      font-size: 22rem;
    }
    .video-content-btn {
      bottom: -30rem;
      right: 40rem;
    }

    .deco3 {
      top: 30rem;
      left: 0;
      width: 503rem;
      height: 508rem;
    }
  }
}

/* melit-aside */
@media all {
  .melit-aside {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--coco-lightgreen);
    color: #fff;
    font-weight: bold;
  }
  .aside-logo {
    overflow: hidden;
  }
  .aside-logo img {
    width: auto;
    max-width: none;
    height: 100%;
  }

  /* sp */
  @media only screen and (max-width: 767px) {
    .page-main::after {
      content: "";
      display: block;
      height: 150rem;
    }
    .melit-aside {
      margin: 60rem auto 0;
      padding: 0;
      width: 350rem;
      height: 90rem;
      font-size: 16rem;
      line-height: 26.5rem;
    }
    .aside-logo {
      margin-right: 13rem;
      width: 46rem;
      height: 52rem;
    }
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
    .melit-aside {
      margin: 60rem auto 160rem;
      width: 560rem;
      height: 100rem;
      font-size: 20rem;
      line-height: 1.8;
    }
    .aside-logo {
      margin-right: 20rem;
      height: 52rem;
      width: 45rem;
    }
  }
}

/* template-section */
@media all {
  /* sp */
  @media only screen and (max-width: 767px) {
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
  }
}