@charset "utf-8";

/* ↓↓↓ common ↓↓↓ */

:root {
  --font-poppins: "Poppins", sans-serif;
  --font-figtree: "Figtree", sans-serif;
  --cosmos-blue: #20A2E3;
  --text-black: #646464;
}

body,
html {
  position: relative;
  font-size: 0.78125vw;
  font-style: normal;
  color: #222;
}

/* @media screen and (min-width: 1281px) {

  body,
  html {
    font-size: 62.5%;
  }
} */

@media screen and (max-width: 768px) {

  body,
  html {
    font-size: 2.666666666666667vw;
  }
}

.-pc {
  display: block;
}

.-sp {
  display: none;
}

.-wb {
  display: inline-block;
}

@media screen and (max-width: 768px) {
  .-pc {
    display: none;
  }

  .-sp {
    display: block;
  }
}

section {
  position: relative;
  z-index: 1;
}

.text {
  text-align: justify;
  word-break: break-all;
  font-size: max(10px, 1.2rem);
  line-height: 2;
  color: var(--text-black);
}

/* ↑↑↑ common ↑↑↑ */

/* ↓↓↓ header ↓↓↓ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10rem;
  background-color: #fff;
  padding: 1.6rem 3rem 1.5rem 2.7rem;
  border-bottom: 1px solid #DDDDDD;
  z-index: 10;

  .block {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
  }

  .logo {
    width: 27.7rem;
  }

  .prime_image {
    position: absolute;
    top: 0;
    right: 0;
    /* right: max(170px, 17.6rem); */
    width: 21.8rem;
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.9rem;
    margin-left: auto;
  }

  .btn_group {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 3rem;

    .lang_btn {
      cursor: pointer;
      position: relative;
      font-size: max(10px, 1.1rem);
      padding-right: max(13px, 1.3rem);
      transition: color 0.3s ease;

      &::after {
        content: '';
        position: absolute;
        top: max(4px, 0.5rem);
        right: 0;
        width: max(9px, 1rem);
        aspect-ratio: 1/1;
        mask-image: url(/wp/wp-content/themes/cosmos-cpo/img/common/menu_arrow.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        background-color: #20A2E3;
        transition: background-color 0.3s ease;
      }
    }

    @media screen and (min-width: 769px) {
      .lang_btn:hover {
        color: #58C7FF;

        &::after {
          background-color: #58C7FF;
        }
      }
    }

    .search_btn {
      cursor: pointer;
      position: relative;
      font-size: max(10px, 1rem);
      padding-right: max(13px, 1.3rem);
      transition: color 0.3s ease;

      &::after {
        content: '';
        position: absolute;
        top: max(3px, 0.3rem);
        right: 0;
        width: max(10px, 1rem);
        aspect-ratio: 1/1;
        mask-image: url(/wp/wp-content/themes/cosmos-cpo/img/common/search_icon.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        background-color: #20A2E3;
        transition: background-color 0.3s ease;
      }
    }

    @media screen and (min-width: 769px) {
      .search_btn:hover {
        color: #58C7FF;

        &::after {
          background-color: #58C7FF;
        }
      }
    }
  }

  nav {
    display: flex;
    align-items: center;
    gap: 3rem;

    .list {
      display: flex;
      gap: 3rem;

      .page_ttl {
        cursor: pointer;
        position: relative;
        font-size: max(13px, 1.3rem);
        font-weight: 500;
        transition: color 0.3s ease;

        &.-megamenu {
          padding-right: max(14px, 1.4rem);

          &::after {
            content: '';
            position: absolute;
            top: max(5px, 0.5rem);
            right: 0;
            width: max(10px, 1rem);
            aspect-ratio: 1/1;
            mask-image: url(/wp/wp-content/themes/cosmos-cpo/img/common/menu_arrow.svg);
            mask-repeat: no-repeat;
            mask-size: contain;
            background-color: #20A2E3;
            transition: background-color 0.3s ease;
          }
        }

        &[target="_blank"] {
          padding-right: max(12px, 1.2rem);

          &::after {
            content: '';
            position: absolute;
            top: max(7px, 0.7rem);
            right: 0;
            width: max(9px, 0.9rem);
            height: max(10px, 1rem);
            mask-image: url(/wp/wp-content/themes/cosmos-cpo/img/common/header_linktab.svg);
            mask-repeat: no-repeat;
            mask-size: max(9px, 0.9rem) max(10px, 1rem);
            mask-position: center;
            background-color: #20A2E3;
            transition: background-color 0.3s ease;
          }
        }
      }

      @media screen and (min-width: 769px) {
        .page_ttl:hover {
          color: #58C7FF;

          &.-megamenu {
            &::after {
              background-color: #58C7FF;
            }
          }

          &[target="_blank"] {

            &::after {
              background-color: #58C7FF;
            }
          }
        }
      }
    }
  }

  .contact_btn {
    position: relative;
    display: grid;
    place-content: center;
    width: 14.6rem;
    height: 3.6rem;
    border-radius: 3.6rem;
    font-size: max(10px, 1.3rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #fff;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      translate: 0 -50%;
      top: 0;
      left: 0;
      width: 100%;
      height: 200%;
      background: #0099E5;
      background: linear-gradient(0deg, rgba(0, 153, 229, 1) 0%, rgba(70, 193, 255, 1) 50%, rgba(161, 222, 253, 1) 100%);
      transition: translate 0.3s ease;
    }

    .txt {
      position: relative;
      z-index: 1;
    }

    &.-sp {
      display: none;
    }
  }

  @media screen and (min-width: 769px) {
    .contact_btn:hover {
      &::before {
        translate: 0 0;
      }
    }
  }

  .megamenu_bg {
    position: fixed;
    display: flex;
    top: 10rem;
    left: 3rem;
    width: calc(100% - 3rem * 2);
    padding: 3.2rem 5.4rem;
    background-color: #FFFFFF;
    border-radius: 0 0 2rem 2rem;
    translate: 0 5%;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0px 2px 4px 0 rgba(5, 42, 92, 0.1);

    .megamenu_ttl {
      position: relative;
      min-width: 25.6rem;
      min-height: 13rem;
      border-right: 1px solid #F0F0F0;
      transition: color 0.3s ease;

      .en {
        position: relative;
        font-family: var(--font-poppins);
        font-size: max(10px, 1.6rem);
        font-weight: 500;
        color: #20A2E3;
        padding-left: 1.3rem;
        transition: color 0.3s ease;

        &::before {
          content: '';
          position: absolute;
          top: -1rem;
          left: 0;
          width: 3rem;
          height: 3rem;
          background: url(/wp/wp-content/themes/cosmos-cpo/img/common/en_circle_blue.png) no-repeat;
          background-size: cover;
          z-index: -1;
        }
      }

      .ttl {
        position: relative;
        width: max-content;
        font-size: 2.8rem;
        font-weight: 700;
        line-height: 1.2;
        padding-left: 1.3rem;
        padding-right: 4rem;
      }

      &[href] {
        .ttl {
          &::before {
            content: '';
            position: absolute;
            top: 0.7rem;
            right: 0;
            width: 2.4rem;
            height: 2.4rem;
            border-radius: 50%;
            background-color: #E7F4FA;
          }

          &::after {
            content: '';
            position: absolute;
            top: 1.5rem;
            right: 0.9rem;
            width: 0.5rem;
            height: 0.8rem;
            mask-image: url(/wp/wp-content/themes/cosmos-cpo/img/common/megamenu_arrow.svg);
            mask-size: contain;
            mask-repeat: no-repeat;
            background-color: #20A2E3;
            transition: background-color 0.3s ease;
          }
        }
      }
    }

    @media screen and (min-width: 769px) {
      .megamenu_ttl {

        &[href]:hover {
          color: #646464;

          .en {
            color: #58C7FF;
          }

          &::after {
            background-color: #58C7FF;
          }
        }
      }
    }
  }

  .megamenu_list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 3.8rem;
    width: 100%;
    height: max-content;
    padding-left: 5.4rem;

    .megamenu_item {
      position: relative;
      width: calc((100% - 3.8rem * 2) / 3);
      overflow: hidden;

      &::after {
        content: '';
        position: absolute;
        translate: -50% 0;
        bottom: 0;
        left: 0;
        width: 200%;
        height: 1px;
        background: #F0F0F0;
        background: linear-gradient(90deg, rgba(88, 199, 255, 1) 0%, rgba(88, 199, 255, 1) 50%, rgba(240, 240, 240, 1) 49%, rgba(240, 240, 240, 1) 100%);
        transition: translate 0.6s ease;
      }

      a {
        position: relative;
        display: block;
        height: 100%;
        font-size: max(10px, 1.6rem);
        font-weight: 500;
        padding: 1.6rem 0;
        transition: color 0.3s ease;

        &::before {
          content: '';
          position: absolute;
          top: 1.8rem;
          right: 0;
          width: 2rem;
          height: 2rem;
          border-radius: 50%;
          background-color: #E7F4FA;
        }

        &::after {
          content: '';
          position: absolute;
          top: 2.5rem;
          right: 0.7rem;
          width: 0.4rem;
          height: 0.7rem;
          mask-image: url(/wp/wp-content/themes/cosmos-cpo/img/common/megamenu_arrow.svg);
          mask-size: contain;
          mask-repeat: no-repeat;
          background-color: #20A2E3;
          transition: background-color 0.3s ease;
        }

        small {
          font-size: max(10px, 1.2rem);
        }
      }
    }

    @media screen and (min-width: 769px) {
      .megamenu_item:hover {

        &::after {
          translate: 0 0;
        }

        a {
          color: #646464;

          &::after {
            background-color: #58C7FF;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .header {
    height: auto;
    min-height: 7.2rem;
    padding: 0;

    &::before {
      content: '';
      position: absolute;
      top: 7.1rem;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #DDDDDD;
    }

    .block {
      display: block;
      padding: 2.8rem 1rem 0;
    }

    .logo {
      width: 17.4rem;
    }

    .prime_image {
      top: 0.8rem;
      left: 1rem;
      right: initial;
      width: 10.9rem;
    }

    .menu_btn {
      cursor: pointer;
      position: absolute;
      display: grid;
      place-content: center;
      top: 0;
      right: 0;
      width: 7.1rem;
      height: 7.1rem;

      .box {
        position: relative;
        width: 3.5rem;
        height: 3.5rem;
        overflow: hidden;
      }

      .bar {
        position: absolute;
        translate: -50% -50%;
        transform-origin: center;
        left: 50%;
        display: block;
        width: 5rem;
        height: 0.1rem;
        background-color: #222;

        &:first-of-type {
          top: calc(50% - 0.7rem);
        }

        &:nth-of-type(2) {
          top: 50%;
        }

        &:last-of-type {
          top: calc(50% + 0.7rem);
        }
      }
    }

    .content {
      display: none;
      visibility: hidden;
      height: calc(100vh - 7.2rem);
      height: calc(100vh - 7.2rem);
      padding-bottom: 12rem;
      background-color: #fff;
      overflow-y: scroll;
      clip-path: inset(0 0 100% 0);
    }

    .btn_group {
      display: none;
      visibility: hidden;
    }

    nav {
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
      gap: 2.4rem;

      .list {
        flex-direction: column;
        gap: 0;
        width: 100%;

        .item {
          width: 100%;
          border-bottom: 1px solid #DDDDDD;
        }

        .page_ttl {
          display: block;
          padding: 1.8rem 2rem;
          font-size: 1.6rem;
          font-weight: 700;

          &.-megamenu {
            &::after {
              position: relative;
              display: inline-block;
              top: initial;
              right: initial;
              width: 1.2rem;
              margin-left: 0.4rem;
              transition: rotate 0.3s ease;
            }

            &.-active {
              &::after {
                rotate: 180deg;
              }
            }
          }

          &[target="_blank"] {
            &::after {
              position: relative;
              display: inline-block;
              top: initial;
              right: initial;
              width: 1rem;
              height: 1.2rem;
              mask-size: 1rem 1.2rem;
              margin-left: 0.4rem;
            }
          }
        }
      }
    }

    .contact_btn {
      width: 33.5rem;
      height: 8rem;
      border-radius: 8rem;
      margin: 0 auto;
      font-size: 2rem;


      &.-sp {
        position: fixed;
        bottom: 0;
        left: 0;
        display: grid;
        width: 100%;
        height: 5rem;
        border-radius: 0;
        font-size: 1.5rem;
      }

      .txt {
        .-sp {
          display: inline-block;
        }
      }
    }

    .megamenu_bg {
      display: none;
      position: initial;
      width: 100%;
      padding: 0;
      background-color: initial;
      border-radius: 0;
      translate: 0 0;
      opacity: 1;
      visibility: visible;

      .megamenu_ttl {
        display: none;
        visibility: hidden;

        .en {
          position: relative;
          font-family: var(--font-poppins);
          font-size: max(10px, 1.6rem);
          font-weight: 500;
          color: #20A2E3;
          padding-left: 1.3rem;
          transition: color 0.3s ease;

          &::before {
            content: '';
            position: absolute;
            top: -1rem;
            left: 0;
            width: 3rem;
            height: 3rem;
            background: url(/wp/wp-content/themes/cosmos-cpo/img/common/en_circle_blue.png) no-repeat;
            background-size: cover;
            z-index: -1;
          }
        }

        .ttl {
          position: relative;
          width: max-content;
          font-size: 2.8rem;
          font-weight: 700;
          line-height: 1.2;
          padding-left: 1.3rem;
          padding-right: 4rem;
        }

        &[href] {
          .ttl {
            &::before {
              content: '';
              position: absolute;
              top: 0.7rem;
              right: 0;
              width: 2.4rem;
              height: 2.4rem;
              border-radius: 50%;
              background-color: #E7F4FA;
            }

            &::after {
              content: '';
              position: absolute;
              top: 1.5rem;
              right: 0.9rem;
              width: 0.5rem;
              height: 0.8rem;
              mask-image: url(/wp/wp-content/themes/cosmos-cpo/img/common/megamenu_arrow.svg);
              mask-size: contain;
              mask-repeat: no-repeat;
              background-color: #20A2E3;
              transition: background-color 0.3s ease;
            }
          }
        }
      }
    }

    .megamenu_list {
      flex-direction: column;
      gap: 0;
      padding: 0 2rem 1.7rem;

      .megamenu_item {
        width: 100%;

        &::after {
          display: none;
        }

        a {
          font-size: 1.4rem;
          padding: 1.2rem 0;

          &::before {
            top: 1.3rem;
          }

          &::after {
            top: 2rem;
          }
        }
      }
    }

    .lang_area {
      margin-top: 2.4rem;
      padding: 0 2rem;

      .heading {
        text-align: center;
        font-size: 1.5rem;
      }

      .lang_group {
        display: flex;
        gap: 0.7rem;
        margin-top: 1rem;
      }

      .lang_sp_btn {
        display: grid;
        place-content: center;
        width: calc((100% - 0.7rem * 2) / 3);
        height: 4rem;
        border-radius: 4rem;
        border: 1px solid #D0DEE5;
        font-size: 1.2rem;
        font-weight: 700;

        &.-active {
          background-color: #D0DEE5;
        }
      }
    }

    &.-active {
      height: 100vh;
      height: 100lvh;

      .menu_btn {
        .bar {

          &:first-of-type {
            animation: menuOpen01 0.3s ease forwards;
          }

          &:nth-of-type(2) {
            animation: menuOpen02 0.3s ease forwards;
          }

          &:last-of-type {
            animation: menuOpen03 0.3s ease forwards;
          }
        }
      }

      .content {
        position: absolute;
        top: 7.2rem;
        left: 0;
        width: 100%;
        display: block;
        visibility: visible;
        z-index: 10;
      }
    }

    &.-form {
      .contact_btn {
        &.-sp {
          display: none;
          visibility: hidden;
        }
      }
    }
  }
}

@keyframes menuOpen01 {
  0% {
    translate: -50% -50%;
  }

  50% {
    translate: -50% calc(-50% + 0.7rem);
    rotate: 0deg;
  }

  100% {
    translate: -50% calc(-50% + 0.7rem);
    rotate: 45deg;
  }
}

@keyframes menuOpen02 {
  0% {
    scale: 1;
  }

  50% {
    scale: 1;
  }

  100% {
    scale: 0;
  }
}

@keyframes menuOpen03 {
  0% {
    translate: -50% -50%;
  }

  50% {
    translate: -50% calc(-50% - 0.7rem);
    rotate: 0deg;
  }

  100% {
    translate: -50% calc(-50% - 0.7rem);
    rotate: -45deg;
  }
}

/* ↑↑↑ header ↑↑↑ */

/* ↓↓↓ contact ↓↓↓ */
.contact {
  background-color: #052A5C;

  .inner {
    padding: 7.5rem 0;
  }

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

    .ttl {
      font-size: 3.2rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: #F7F9FA;
    }

    .en {
      position: relative;
      width: max-content;
      font-family: var(--font-poppins);
      font-size: max(10px, 1.6rem);
      font-weight: 500;
      letter-spacing: 0;
      line-height: 1;
      color: var(--cosmos-blue);
      padding-left: 1.3rem;
      margin: 0 auto;

      &::before {
        content: '';
        position: absolute;
        top: -1rem;
        left: 0;
        width: 3rem;
        height: 3rem;
        background: url(/wp/wp-content/themes/cosmos-cpo/img/common/en_circle_deep.png) no-repeat;
        background-size: cover;
      }

      .txt {
        position: relative;
        z-index: 1;
      }
    }

    .text {
      text-align: center;
      font-size: max(10px, 1.3rem);
      color: #F7F9FA;
      margin-top: 1rem;
    }
  }

  .tel_group {
    display: flex;
    justify-content: center;
    gap: 1.6rem;
    margin-top: 3.4rem;

    .tel_btn {
      display: flex;
      align-items: center;
      gap: 3rem;
      min-width: 45.4rem;
      border-radius: 2rem;
      background-color: #0F3C79;
      padding: 1.7rem 3.2rem;
      color: #F7F9FA;

      .btn_area {
        display: grid;
        place-content: center;
        width: 7.6rem;
        height: 7.6rem;
        aspect-ratio: 1/1;
        font-size: max(10px, 1.5rem);
        font-weight: 500;
        border: 1px solid #F7F9FA;
        border-radius: 50%;
      }

      .tel {
        position: relative;
        font-family: var(--font-figtree);
        font-size: 3.2rem;
        font-weight: 500;
        letter-spacing: 0.05em;
        line-height: 1;
        padding-left: 4.2rem;

        &::before {
          content: '';
          position: absolute;
          translate: 0 -50%;
          top: 50%;
          left: 0;
          width: 2.6rem;
          height: 2.6rem;
          background: url(/wp/wp-content/themes/cosmos-cpo/img/common/tell_icon.png) no-repeat;
          background-size: cover;
        }
      }

      .note {
        text-align: center;
        font-size: max(10px, 1.2rem);
        letter-spacing: 0;
        margin-top: 0.3em;
      }
    }
  }

  .contact_btn {
    position: relative;
    width: 36rem;
    height: 8rem;
    border-radius: 8rem;
    display: grid;
    place-content: center;
    margin: 4rem auto 0;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #F7F9FA;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      translate: 0 -50%;
      top: 0;
      left: 0;
      width: 100%;
      height: 200%;
      background: #0099E5;
      background: linear-gradient(0deg, rgba(0, 153, 229, 1) 0%, rgba(70, 193, 255, 1) 50%, rgba(161, 222, 253, 1) 100%);
      transition: translate 0.3s ease;
    }

    .txt {
      position: relative;
      z-index: 1;
    }
  }

  @media screen and (min-width: 769px) {
    .contact_btn:hover {
      &::before {
        translate: 0 0;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .contact {

    .inner {
      padding: 6.4rem 2rem;
    }

    .block_ttl {

      .ttl {
        font-size: 2.4rem;
      }

      .text {
        margin-top: 2.4rem;
      }
    }

    .tel_group {
      flex-direction: column;
      gap: 1rem;
      margin-top: 2.4rem;

      .tel_btn {
        gap: 1rem;
        min-width: initial;
        border-radius: 1rem;
        padding: 1.6rem 1rem;

        .btn_area {
          width: 6.4rem;
          height: 6.4rem;
          font-size: max(10px, 1.4rem);
        }

        .tel {
          font-size: 2.4rem;
          padding-left: 2.6rem;

          &::before {
            width: 2.2rem;
            height: 2.2rem;
          }
        }
      }
    }

    .contact_btn {
      width: 100%;
      margin: 2.4rem auto 0;
    }
  }
}

/* ↑↑↑ contact ↑↑↑ */

/* ↓↓↓ footer ↓↓↓ */
footer {
  position: relative;
  background-color: #F7F9FA;
  z-index: 1;

  .block {
    display: flex;
    justify-content: space-between;
    gap: 10rem;
    padding: 5.6rem 8.2rem 4rem 8.4rem;

    .btn_group {
      .logo {
        display: block;
        width: 29.8rem;
        margin-bottom: 2.4rem;
      }

      .btn {
        position: relative;
        display: block;
        width: max-content;
        background-color: #fff;
        border: 1px solid #D0DEE5;
        border-radius: 8rem;
        font-size: max(10px, 1.3rem);
        font-weight: 500;
        color: var(--cosmos-blue);
        padding: 1.2rem 2rem 1.3rem;
        transition: border 0.3s ease, color 0.3s ease;

        +.btn {
          margin-top: 0.8rem;
        }

        &.-pdf {
          padding-right: 4.4rem;

          &::after {
            content: '';
            position: absolute;
            translate: 0 -50%;
            top: 50%;
            right: 2rem;
            width: 1.2rem;
            height: 1.6rem;
            background: url(/wp/wp-content/themes/cosmos-cpo/img/common/pdf_icon.svg) no-repeat;
            background-size: cover;
          }
        }
      }

      @media screen and (min-width: 769px) {
        .btn:hover {
          border: 1px solid #fff;
          color: #58C7FF;
        }
      }
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      gap: 5rem;
    }

    .wrap {
      display: flex;
      flex-direction: column;
      color: #646464;
    }

    .page_ttl {
      width: max-content;
      font-size: max(12px, 1.2rem);
      font-weight: 500;

      +.page_ttl {
        margin-top: 1.8rem;
      }

      +.list {
        margin-top: 0.8rem;
        font-size: max(10px, 1rem);

        .item {
          +.item {
            margin-top: 0.6rem;
          }
        }
      }

      &[target="_blank"] {
        position: relative;
        padding-right: max(12px, 1.2rem);

        &::after {
          content: '';
          position: absolute;
          top: max(6px, 0.6rem);
          right: 0;
          width: max(10px, 1rem);
          height: max(9px, 0.9rem);
          mask-image: url(/wp/wp-content/themes/cosmos-cpo/img/common/footer_linktab.svg);
          mask-size: max(10px, 1rem) max(9px, 0.9rem);
          mask-repeat: no-repeat;
          background-color: #20A2E3;
          transition: background-color 0.3s ease;
        }
      }

      &.-blue {
        color: var(--cosmos-blue);
      }
    }

    a.page_ttl,
    a.underpage_ttl {
      transition: color 0.3s ease;
    }

    @media screen and (min-width: 769px) {

      a.page_ttl:hover,
      a.underpage_ttl:hover {
        color: #8B8B8B;
      }

      a.page_ttl.-blue:hover {
        color: #58C7FF;
      }

      a.page_ttl[target="_blank"]:hover {

        &::after {
          background-color: #58C7FF;
        }
      }
    }
  }

  .bottom {
    display: flex;
    align-items: center;
    gap: 5rem;
    border-top: 1px solid #DDDDDD;
    padding: 2rem 8.4rem 2rem 8.4rem;

    .copyright {
      font-family: var(--font-figtree);
      font-size: max(9px, 0.9rem);
      font-weight: 500;
      letter-spacing: 0;
      line-height: 1.6;
      color: #8B8B8B;
    }

    .prime_image {
      min-width: max(218px, 21.8rem);
      width: 21.8rem;
      margin-left: auto;
    }
  }
}

@media screen and (max-width: 768px) {
  footer {

    .bottom {
      flex-direction: column;
      gap: 2rem;
      padding: 1.6rem 2rem 2.8rem;

      .prime_image {
        min-width: 16.8rem;
        width: 16.8rem;
        margin: 0 auto;
      }
    }

    .block {
      flex-direction: column;
      gap: 2.4rem;
      padding: 3.2rem 2rem;

      .btn_group {
        .logo {
          width: 24.8rem;
          margin: 0 auto 3.2rem;
        }

        .btn {
          text-align: center;
          width: 100%;
          font-size: 1.2rem;
          padding: 1.3rem 2rem 1.4rem;

          &.-pdf {

            &::after {
              width: 1rem;
              height: 1.3rem;
            }

          }
        }
      }

      .content {
        display: block;
        gap: 0;
      }

      .wrap {
        display: none;

        &:last-of-type {
          display: block;
        }
      }

      .page_ttl {
        display: none;
        font-weight: 400;

        +.page_ttl {
          margin-top: 0;
        }

        +.-blue {
          display: block;
          margin: 0 auto;
        }
      }

      .underpage_ttl {
        display: none;
      }
    }

  }
}

.pagetop_btn {
  cursor: pointer;
  position: absolute;
  display: block;
  bottom: 1.7rem;
  right: 2.2rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 1px solid #8B8B8B;
  background-color: #F7F9FA;
  z-index: 1;

  &::after {
    content: '';
    position: absolute;
    translate: -50% -50%;
    top: 50%;
    left: 50%;
    width: 1.1rem;
    height: 0.6rem;
    background: url(/wp/wp-content/themes/cosmos-cpo/img/common/pagetop_arrow.png) no-repeat;
    background-size: contain;
    background-position: center;
  }
}

@media screen and (max-width: 768px) {
  .pagetop_btn {
    bottom: 0.5rem;
    right: 0.5rem;
  }
}

/* ↑↑↑ footer ↑↑↑ */

/* ↓↓↓ lower ↓↓↓ */
.-lower {
  position: relative;
  padding: 10rem 0 0;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 48rem;
    background: linear-gradient(0deg, rgba(237, 246, 250, 0) 0%, rgba(231, 244, 250, 1) 100%);
  }

  &::after {
    content: '';
    position: absolute;
    top: 10rem;
    right: 0;
    width: 54.4rem;
    height: 30rem;
    background: url(/wp/wp-content/themes/cosmos-cpo/img/common/under_fv_deco.png) no-repeat;
    background-size: contain;
  }

  .fv {
    padding: 16rem 3rem 0;

    .block {
      max-width: 104rem;
      margin: 0 auto;
    }

    .page_ttl {
      position: relative;

      .en {
        position: relative;
        font-family: var(--font-poppins);
        font-size: max(10px, 1.6rem);
        font-weight: 500;
        color: var(--cosmos-blue);
        transition: color 0.3s ease;

        &::before {
          content: '';
          position: absolute;
          top: -1rem;
          left: -1.3rem;
          width: 3rem;
          height: 3rem;
          background: url(/wp/wp-content/themes/cosmos-cpo/img/common/en_circle_blue.png) no-repeat;
          background-size: cover;
          z-index: -1;
        }
      }

      .ttl {
        position: relative;
        width: 100%;
        font-size: 3.8rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1.2;
        transition: color 0.3s ease;
      }
    }

    .breadcrumbs {
      position: relative;
      display: flex;
      gap: 3rem;
      margin: 8rem auto 0;
      padding-bottom: 3.2rem;
      border-bottom: 1px solid #E7F4FA;

      .breadcrumbs_item {
        position: relative;
        font-size: max(10px, 1.2rem);
        font-weight: 500;
        color: var(--text-black);

        &:not(:last-of-type) {
          &::after {
            content: '';
            position: absolute;
            translate: 0 -50%;
            top: 50%;
            right: -1.8rem;
            width: 0.6rem;
            height: 0.6rem;
            background: url(/wp/wp-content/themes/cosmos-cpo/img/common/breadcrumbs_arrow.svg) no-repeat;
            background-size: contain;
          }
        }

        a {
          color: var(--cosmos-blue);
          text-decoration: underline;
          transition: color 0.3s ease;
        }

        @media screen and (min-width: 769px) {
          a:hover {
            text-decoration: none;
            color: #58C7FF;
          }
        }
      }
    }
  }

  .twinkle_common_ttl {
    .ttl {
      position: relative;
      display: flex;
      align-items: center;
      font-size: 2.4rem;
      font-weight: 700;
      padding-left: 4.6rem;

      &::before {
        content: '';
        position: absolute;
        top: 0.2em;
        left: 0;
        width: 3rem;
        height: 3rem;
        background: url(/wp/wp-content/themes/cosmos-cpo/img/common/cosmos_kirameki.svg) no-repeat;
        background-size: cover;
      }
    }

    .sub {
      font-size: max(10px, 1.5rem);
      padding-top: 0.2em;
      padding-left: 2rem;
    }

    .num {
      font-family: var(--font-poppins);
      font-size: 3.2rem;
      font-weight: 500;
      line-height: 1;
    }

    .attention {
      font-size: 2rem;
      padding-top: 0.2em;
    }
  }

  .sticky_area {
    position: relative;
    display: flex;
    gap: 6rem;
    max-width: 104rem;
    margin: 0 auto;

    aside {
      position: sticky;
      top: 12rem;
      left: 0;
      width: 16rem;
      height: max-content;
      z-index: 1;

      .heading {
        position: relative;
        display: block;
        font-size: max(10px, 1.2rem);
        font-weight: 500;
        color: #8B8B8B;
        margin-bottom: 1.6rem;
        transition: color 0.3s ease;

        &:not(:first-of-type) {
          margin-top: 3.2rem;

          &::before {
            content: '';
            position: absolute;
            top: -1.6rem;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #F0F0F0;
          }
        }

        &.-active {
          color: var(--cosmos-blue);
        }
      }

      .anchor {
        position: relative;
        display: block;
        font-size: max(10px, 1.2rem);
        font-weight: 500;
        padding-left: 2.2rem;
        transition: color 0.3s ease;

        +.anchor,
        +.detail_group {
          margin-top: 1.6rem;
        }

        &::before {
          content: '';
          position: absolute;
          top: 0.2em;
          left: 0;
          width: 1.6rem;
          height: 1.6rem;
          background: url(/wp/wp-content/themes/cosmos-cpo/img/common/cosmos_kirameki.svg) no-repeat;
          background-size: cover;
          opacity: 0;
          transition: opacity 0.3s ease;
        }

        &.-active {
          color: var(--cosmos-blue);


          &::before {
            opacity: 1;
          }
        }
      }

      .detail_group {
        .detail {
          position: relative;
          display: block;
          font-size: max(10px, 1.2rem);
          font-weight: 500;
          padding-left: max(24px, 3.2rem);
          margin-top: 0.8rem;
          transition: color 0.3s ease;

          &::before {
            content: '┗ ';
            position: absolute;
            top: 0;
            left: 1.8rem;
          }
        }

        &.-active {
          .detail {
            &.-active {
              color: var(--cosmos-blue);
            }
          }

        }
      }

    }

    .content {
      max-width: 82rem;
      flex-grow: 1;
    }
  }

  .other_info {
    padding: 8rem 2rem;
    background-color: #F7F9FA;

    .block {
      max-width: 104rem;
      margin: 0 auto;
    }

    .list {
      display: flex;
      flex-wrap: wrap;
      gap: 1.6rem;
      margin-top: 2.4rem;
    }

    .item {
      width: calc((100% - 1.6rem * 2) / 3);
      height: 10rem;
      border-radius: 2rem;
      border: 1px solid #D0DEE5;
      background-color: #fff;
      transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;

      &.-long {
        width: calc((100% - 1.6rem) / 2);
      }

      a {
        position: relative;
        display: grid;
        place-content: center left;
        font-size: 1.8rem;
        font-weight: 700;
        height: 100%;
        padding: 0 6.4rem 0 3.2rem;

        &::before {
          content: '';
          translate: 0 -50%;
          top: 50%;
          right: 2rem;
          position: absolute;
          width: 2.4rem;
          height: 2.4rem;
          border-radius: 50%;
          background-color: #E7F4FA;
          transition: background-color 0.3s ease;
        }

        &::after {
          content: '';
          position: absolute;
          translate: 0 -50%;
          top: 50%;
          right: 2.8rem;
          width: 0.6rem;
          height: 1rem;
          mask-image: url(/wp/wp-content/themes/cosmos-cpo/img/common/more_arrow.svg);
          mask-size: contain;
          mask-repeat: no-repeat;
          background-color: var(--cosmos-blue);
          transition: background-color 0.3s ease;
        }
      }

      &.-active {
        color: #646464;
        border: 1px solid #E7F4FA;
        background-color: #E7F4FA;

        a {

          &::before {
            background-color: #fff;
          }

          &::after {
            background-color: #58C7FF;
          }
        }
      }
    }

    @media screen and (min-width: 769px) {
      .item:hover {
        color: #646464;
        border: 1px solid #E7F4FA;
        background-color: #E7F4FA;

        a {

          &::before {
            background-color: #fff;
          }

          &::after {
            background-color: #58C7FF;
          }
        }
      }
    }
  }
}


@media screen and (max-width: 768px) {
  .-lower {
    padding: 7.2rem 0 0;

    &::after {
      top: 7.2rem;
      width: 33.7rem;
      height: 20.5rem;
      background: url(/wp/wp-content/themes/cosmos-cpo/img/common/under_fv_deco_sp.png) no-repeat;
      background-size: contain;
    }

    .fv {
      padding: 6.2rem 2rem 0;

      .block {
        max-width: 104rem;
        margin: 0 auto;
      }

      .page_ttl {
        .en {
          &::before {
            left: -1.3rem;
          }
        }

        .ttl {
          font-size: 2.8rem;
          line-height: 1.4;
          padding-left: 0;
          margin-top: 0.1em;
        }
      }

      .breadcrumbs {
        gap: 2.3rem;
        margin: 4rem auto 0;
        padding-bottom: 1.6rem;
        overflow-x: scroll;

        .breadcrumbs_item {
          min-width: max-content;

          &:not(:last-of-type) {
            &::after {
              right: -1.6rem;
            }
          }
        }
      }
    }

    .twinkle_common_ttl {
      .ttl {
        padding-left: 3.8rem;
      }

      &:has(.num) {
        .ttl {
          display: block;
          font-size: 2rem;
          letter-spacing: 0.03em;

          &::before {
            top: 0.1em;
          }
        }

        .num {
          translate: 0 0.1em;
          font-size: 2.4rem;
        }

        .attention {
          font-size: 1.5rem;
        }
      }
    }

    .sticky_area {
      aside {
        display: none;
        visibility: hidden;
      }
    }

    .other_info {
      padding: 6.4rem 2rem;

      .list {
        flex-direction: column;
        gap: 1rem;
      }

      .item {
        width: 100%;
        height: 6.4rem;
        border-radius: 1rem;

        &.-long {
          width: 100%;
        }

        a {
          padding: 0 6.4rem 0 2rem;
        }
      }
    }
  }
}


main {
  +.-lower {
    padding: 0;

    &::before,
    &::after {
      display: none;
    }
  }
}

/* ↑↑↑ lower ↑↑↑ */

/* ↓↓↓ 404 ↓↓↓ */
.notfound {
  position: relative;
  padding: 12rem 3rem;
  z-index: 1;

  .block {
    max-width: 86.4rem;
    margin: 0 auto;

    .text_group {
      .text {
        font-size: 1.5rem;
        color: #222222;

        +.text {
          margin-top: 3rem;
        }

        a {
          color: var(--cosmos-blue);
          text-decoration: underline;
        }

        @media screen and (min-width: 769px) {
          a:hover {
            text-decoration: none;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .notfound {
    padding: 7.4rem 2rem 8rem;
  }
}

/* ↑↑↑ 404 ↑↑↑ */

/* ↓↓↓ common ↓↓↓ */
/* ↑↑↑ common ↑↑↑ */

/* ↓↓↓ common ↓↓↓ */
/* ↑↑↑ common ↑↑↑ */

@media screen and (min-width: 1281px) {}

@media screen and (max-width: 1280px) {}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 480px) {}

@media screen and (max-width: 375px) {}