@charset "utf-8";
/* CSS Document */

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
フロントページ
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

body.home {
  /*FAQ*/
  .faq_wrap {
    background-color: var(--color-blue);
    padding: 10rem 2rem 7rem;
    @media screen and (max-width: 480px) {
      padding: 5.2rem 2rem 2.7rem;
    }

    h2.ui {
      margin-bottom: 7.2rem;
      @media screen and (max-width: 480px) {
        margin-bottom: 3.4rem;
      }
    }
    ul.faq {
      max-width: 79.8rem;
      margin: auto;
      & > li {
        background-color: #fff;
        border-radius: 1rem;
        margin-bottom: 2.8rem;
        letter-spacing: 0.1em;
        @media screen and (max-width: 480px) {
          margin-bottom: 2rem;
        }
        dl {
          dt.aco_title {
            padding: 3.2rem 6.8rem;
            cursor: pointer;
            position: relative;
            &::before,
            &::after {
              content: "";
              display: block;
              position: absolute;
              width: 2.8rem;
              height: 2px;
              background-color: var(--color-ex_deep_blue);
              right: 4.2rem;
              top: 50%;
              transform: translateY(-50%);
              transition: 0.2s ease-in;
            }
            &::after {
              transform: translateY(-50%) rotate(90deg);
            }
            &.open {
              &::after {
                transform: translateY(-50%) rotate(0deg);
              }
            }

            @media screen and (max-width: 480px) {
              padding: 2rem 2.6rem;
              &::before,
              &::after {
                width: 2rem;
                height: 2px;
                right: 2.6rem;
              }
            }
            span {
              display: inline-block;
              font-size: 2.4rem;
              line-height: 1.58;
              padding-left: 7.4rem;
              background-repeat: no-repeat;
              background-position: left top 0.45em;
              background-size: auto 1.74rem;
              word-break: keep-all;
              text-align: left;
              color: var(--color-ex_deep_blue);
              @media screen and (max-width: 480px) {
                font-size: 1.8rem;
                padding-left: 4.2rem;
                background-size: auto 1.4rem;
              }
            }
          }

          dd.dropdown {
            padding: 3.2rem 6.8rem;
            border-top: 1px solid var(--color-ex_deep_blue);
            font-size: 1.8rem;
            line-height: 1.66;
            display: none;
            @media screen and (max-width: 480px) {
              font-size: 1.4rem;
              padding: 2rem 2.6rem;
            }
          }
        }
        /* 番号 */
        &:nth-child(1) {
          dl {
            dt {
              span {
                background-image: url(../img/common/icon-q01.svg);
              }
            }
          }
        }
        &:nth-child(2) {
          dl {
            dt {
              span {
                background-image: url(../img/common/icon-q02.svg);
              }
            }
          }
        }
        &:nth-child(3) {
          dl {
            dt {
              span {
                background-image: url(../img/common/icon-q03.svg);
              }
            }
          }
        }
        &:nth-child(4) {
          dl {
            dt {
              span {
                background-image: url(../img/common/icon-q04.svg);
              }
            }
          }
        }
        &:nth-child(5) {
          dl {
            dt {
              span {
                background-image: url(../img/common/icon-q05.svg);
              }
            }
          }
        }
        &:nth-child(6) {
          dl {
            dt {
              span {
                background-image: url(../img/common/icon-q06.svg);
              }
            }
          }
        }
      }
    }
  }
  /* お客様の声 */
  .voice_wrap {
    background-color: #eef5f9;
    padding: 8.6rem 2rem 6.4rem;
    @media screen and (max-width: 480px) {
      padding: 3.9rem 2rem 2.1rem;
    }
    h2 {
      margin-bottom: 5rem;
      @media screen and (max-width: 480px) {
        margin-bottom: 2.2rem;
      }
    }
    .voice {
      max-width: 79.8rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: auto;
      @media screen and (max-width: 480px) {
        display: block;
      }
      article {
        max-width: 38.6rem;
        width: 49%;
        background-color: #fff;
        box-sizing: border-box;
        border: 2px solid var(--color-blue);
        margin-bottom: 3.2rem;
        @media screen and (max-width: 480px) {
          max-width: 100%;
          width: 100%;
          margin-bottom: 1.7rem;
        }
        .user {
          padding: 2rem;
          display: flex;
          align-items: center;
          border-bottom: 1px solid var(--color-blue);

          .img_wrap {
            width: 9.1rem;
            margin-right: 1.8rem;
          }
          ul {
            li {
              font-size: 1.8rem;
              letter-spacing: 0.05em;
            }
            li.pref {
              margin: 0.5em 0;
              span {
                display: inline-block;
                background-color: var(--color-blue);
                color: #fff;
                font-size: 1.4rem;
                letter-spacing: 0.06em;
                padding: 0.5rem 1em 0.6rem 0.94em;
              }
            }
          }
        }
        .text {
          padding: 1.8rem 2rem;
          font-size: 1.4rem;
          line-height: 1.7;
        }
      }
    }
  }
  /* 高価買い取りの理由 */
  .riyu_wrap {
    padding: 7.8rem 0 6.6rem;
    @media screen and (max-width: 480px) {
      padding: 5.6rem 0 5.4rem;
    }
    h2 {
      font-size: 3.4rem;
      letter-spacing: 0.05em;
      font-weight: 900;
      color: var(--color-blue);
      padding-left: 0.05em;
      text-align: center;
      line-height: 1.16;
      margin-bottom: 3.4rem;
      word-break: keep-all;
      @media screen and (max-width: 480px) {
        font-size: 2.4rem;
        margin-bottom: 2.6rem;
      }
      span {
        letter-spacing: 0.09em;
        font-size: 2.8rem;
        font-weight: 700;
        display: inline-block;
        padding-left: 0.09em;
        margin-bottom: 0.35em;
        @media screen and (max-width: 480px) {
          font-size: 1.6rem;
        }
      }
    }

    ul {
      display: flex;
      justify-content: center;
      gap: 3rem;
      margin-bottom: 3.8rem;
      @media screen and (max-width: 480px) {
        gap: 0.6rem;
        margin-bottom: 4rem;
      }
      li {
        width: 24.7rem;
        background-color: var(--color-blue);
        border-radius: 9999px;
        aspect-ratio: 1/1;
        padding: 2.5rem;
        box-sizing: border-box;
        @media screen and (max-width: 480px) {
          width: 11.6rem;
          padding: 1.1rem;
        }
        p {
          width: 19.7rem;
          border-radius: 9999px;
          aspect-ratio: 1/1;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          color: #fff;
          font-size: 1.8rem;
          line-height: 1.667;
          font-weight: 700;

          background-size: contain;
          background-repeat: no-repeat;
          overflow: hidden;
          box-sizing: border-box;
          @media screen and (max-width: 480px) {
            width: 9.4rem;
            padding: 1.25rem 1rem 0.75rem;
            font-size: 1.2rem;
            line-height: 1.5;
          }
        }
        &:nth-child(1) {
          p {
            background-image: url(../img/top/riyu-01.webp);
          }
        }
        &:nth-child(2) {
          p {
            background-image: url(../img/top/riyu-02.webp);
          }
        }
        &:nth-child(3) {
          p {
            background-image: url(../img/top/riyu-03.webp);
          }
        }
      }
    }
  }
  /* 買取ステップ */
  .step_wrap {
    padding: 8rem 2.8rem 8.4rem;
    background-image: url(../img/top/bg-dot.svg), url(../img/top/bg-step.webp);
    background-size: 2.4rem, cover;
    @media screen and (max-width: 480px) {
      padding: 3.2rem 2.8rem 5.4rem;
      background-size: 1.6rem, cover;
    }
    .inner {
      max-width: 79.8rem;
      margin: auto auto 4rem;
      display: flex;
      justify-content: space-between;
      @media screen and (max-width: 480px) {
        display: block;
        margin-bottom: 4.5rem;
      }
      hgroup {
        max-width: 29.8rem;
        width: 38%;
        @media screen and (max-width: 480px) {
          width: 98%;
          margin: auto auto 2.4rem;
        }
        h2 {
          font-size: 3.4rem;
          letter-spacing: 0.07em;
          color: var(--color-blue);
          line-height: 1.4;
          margin-bottom: 3.2rem;
          font-weight: 900;
          @media screen and (max-width: 480px) {
            font-size: 2.6rem;
            margin-bottom: 1.2rem;
          }
        }
        p {
          font-size: 1.8rem;
          line-height: 1.9;
          letter-spacing: 0.02em;
          @media screen and (max-width: 480px) {
            font-size: 1.4rem;
            line-height: 1.7;
          }
        }
      }
      figure {
        max-width: 45.4rem;
        width: 58%;
        padding-top: 0.72rem;
        @media screen and (max-width: 480px) {
          width: 100%;
          padding: 0;
        }
      }
    }
  }
  .case_wrap {
    padding: 5.2rem 2rem 8.2rem;
    @media screen and (max-width: 480px) {
      pad: 3.2rem 2rem 4.2rem;
    }
    h2 {
      max-width: 48.4rem;
      margin: auto auto 4.4rem;
      @media screen and (max-width: 480px) {
        max-width: 32.6rem;
        margin: auto auto 1.8rem;
      }
    }
    .button_wrap {
      margin-top: 2.4rem;
    }
  }

  /* メイン部分 */

  div.main_outwrap {
    position: relative;
    &::before,
    &::after {
      content: "";
      display: block;
      width: 100vw;
      aspect-ratio: 1/2.212;
      right: 50%;
      position: absolute;
      z-index: 5;
      filter: drop-shadow(1.1rem 1.1rem 1.1rem rgba(0, 0, 0, 0.3));
      background-size: contain;
    }
    &::before {
      top: 39.6rem;
      background-image: url(../img/top/main-back-before.svg);
      transform: translate(23.5rem, -50%);
    }
    &::after {
      top: 34.2rem;
      transform: translate(11.7rem, -50%);
      background-image: url(../img/top/main-back-after.svg);
    }
    @media screen and (max-width: 1024px) {
      &::before {
        top: 30rem;
        transform: translate(18rem, -50%);
      }
      &::after {
        top: 24rem;
        transform: translate(6rem, -50%);
      }
    }
    @media screen and (max-width: 480px) {
      &::before {
        top: 10.9rem;
        transform: translate(4.5rem, -50%);
      }
      &::after {
        top: 9.3rem;
        transform: translate(0.9rem, -50%);
      }
    }
    .main {
      position: relative;
      background-image: url(../img/top/bg-step.webp);
      background-size: cover;
      padding: 5rem 2rem 10rem;
      @media screen and (max-width: 480px) {
        padding: 0 0 3.6rem;
      }
      .inner {
        position: relative;
        z-index: 20;
        max-width: 100rem;
        margin: auto;
        padding: 22.3rem 0 0;

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

        /* タイトル */
        h1 {
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          @media screen and (max-width: 480px) {
            position: relative;
            height: 24rem;
            overflow: hidden;
          }
          .title-01 {
            width: 94%;
            position: absolute;
            left: 3%;
            top: 0;
            z-index: 5;
            @media screen and (max-width: 480px) {
              width: 17.9rem;
              left: 1rem;
              top: 2.2rem;
            }
          }
          .title-02 {
            position: absolute;
            width: 43.4%;
            top: 0;
            right: 0;
            z-index: 20;
            @media screen and (max-width: 480px) {
              width: 30.4rem;
              left: 1rem;
              top: 10rem;
            }
          }
          .illust {
            position: absolute;
            width: 41%;
            right: 16rem;
            top: 12rem;
            z-index: 10;
            @media screen and (max-width: 1024px) {
              width: 50%;
              top: 9rem;
              right: 0;
            }
            @media screen and (max-width: 480px) {
              width: 18rem;
              top: 0.2rem;
              right: 4.6rem;
            }
          }
          .name {
            width: 23.2%;
            position: absolute;
            top: 22.4rem;
            right: 4rem;
            z-index: 30;
            @media screen and (max-width: 1024px) {
              top: 46rem;
              right: 2rem;
            }
            @media screen and (max-width: 480px) {
              width: 10rem;
              top: 19.4rem;
              right: 3.2rem;
            }
          }
        }

        /* 廃車手続き無料 */
        .badge_wrap {
          position: absolute;
          right: 1.2rem;
          top: 41rem;
          width: 22.4rem;
          z-index: 40;
          @media screen and (max-width: 1024px) {
            top: 58rem;
            right: 0;
          }
          @media screen and (max-width: 480px) {
            right: 0.8rem;
            top: 1rem;
            width: 9.2rem;
          }
        }

        /* お急ぎください */
        .oisogi_wrap {
          z-index: 1;
          position: absolute;
          right: 0;
          top: 64rem;
          background-image: url(../img/top/waku-pc.webp?ver3);
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center center;
          width: 50.4rem;
          height: 12.6rem;
          box-sizing: border-box;
          padding: 5rem 0 0;
          @media screen and (max-width: 1024px) {
            position: relative;
            top: auto;
            right: auto;
            margin: 8rem auto auto;
          }
          @media screen and (max-width: 480px) {
            width: 33.5rem;
            height: 11.1rem;
            background-image: url(../img/top/waku-sp.webp?ver3);
            margin: auto;
            padding: 3.8rem 0 0;
          }
          /* h3 {
            position: absolute;
            top: 0;
            width: 100%;
            text-align: center;
            font-size: 2rem;
            letter-spacing: 0.05em;
            padding-left: 0.05em;
            box-sizing: border-box;
            color: var(--color-blue);
            transform: translateY(-50%);
            @media screen and (max-width: 480px) {
              font-size: 1.4rem;
            }
          } */
          h4 {
            text-align: center;
            font-size: 2.1rem;
            line-height: 1.4;
            letter-spacing: 0.025em;
            padding-left: 0.025em;
            box-sizing: border-box;
            @media screen and (max-width: 480px) {
              font-size: 1.4rem;
              letter-spacing: 0.025em;
              line-height: 1.5;
            }
            span {
              display: inline-block;
              font-size: 0.65em;
              @media screen and (max-width: 480px) {
                font-size: 0.8em;
                transform: translateY(-0.2em);
              }
            }
          }
          p {
            font-size: 1.6rem;
            letter-spacing: 0.02em;
            line-height: 1.5;
            width: 87%;
            margin: auto;
            @media screen and (max-width: 480px) {
              font-size: 1.2rem;
            }
          }
        }

        .hk-wrap {
          @media screen and (max-width: 1024px) {
            position: relative;
            z-index: 25;
          }
        }
      }
      /* かしこい選択 */

      .copy {
        font-size: 3.6rem;
        text-align: center;
        letter-spacing: 0.26em;
        padding-left: 4em;
        color: var(--color-blue);
        margin-top: 8rem;
        @media screen and (max-width: 1024px) {
          padding-left: 0.26em;
          margin-top: 8rem;
        }
        @media screen and (max-width: 480px) {
          font-size: 2rem;
          padding-left: 0.26em;
          line-height: 1.6;
          margin-top: 3rem;
        }
      }
      .inner:has(.oisogi_wrap) + .copy {
        @media screen and (max-width: 1024px) {
          margin-top: 4rem;
        }
        @media screen and (max-width: 480px) {
          margin-top: 3rem;
        }
      }
    }
  }
  .result_outwrap {
    .chance_wrap {
      .plusup_wrap {
        ul.home {
          position: relative;
          z-index: 20;
        }
        p.anotation {
          position: relative;
          z-index: 20;
        }
      }
    }
    .freedial_banner_wrap {
      z-index: 20;
    }
  }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
固定ページ
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

/* 共通 */
body.page {
  hgroup.ui {
    background-image: url(../img/top/bg-dot.svg), url(../img/top/bg-step.webp);
    background-size: 2.4rem, cover;
    padding: 9rem 2rem 6.4rem;
    @media screen and (max-width: 480px) {
      padding: 3.2rem 2rem 3.6rem;
      background-size: 1.6rem, cover;
    }
    h1 {
      text-align: center;
      margin-bottom: 2.4rem;
      @media screen and (max-width: 480px) {
        margin-bottom: 1.8rem;
      }
      span {
        display: inline-block;
        font-size: 3.6rem;
        line-height: 1.4;
        color: var(--color-blue);
        letter-spacing: 0.09em;
        font-weight: 900;
        padding-left: 0.09em;
        @media screen and (max-width: 480px) {
          font-size: 2rem;
        }
      }
    }
    p {
      font-size: 1.8rem;
      line-height: 1.9;
      margin: auto;
      letter-spacing: 0.04em;
      @media screen and (max-width: 480px) {
        font-size: 1.4rem;
        line-height: 1.75;
      }
    }
  }
}
/* プライバシーポリシー */
body.page.policy {
  hgroup.ui {
    margin-bottom: 6rem;
    @media screen and (max-width: 480px) {
      margin-bottom: 4rem;
    }
    p {
      max-width: 74.5rem;
    }
  }
  .contents {
    .inner {
      max-width: 79.8rem;
      padding: 0 2rem;
      margin: auto;
      section {
        padding-bottom: 3.2rem;
        margin-bottom: 3.2rem;
        border-bottom: 1px solid var(--color-blue);
        @media screen and (max-width: 480px) {
          padding-bottom: 2rem;
          margin-bottom: 2rem;
        }
        &:last-child {
          border-bottom: none;
        }
        h3 {
          font-size: 2rem;
          line-height: 1.7;
          font-weight: 700;
          @media screen and (max-width: 480px) {
            font-size: 1.4rem;
          }
        }
        p,
        ul {
          font-size: 1.8rem;
          line-height: 1.9;
          @media screen and (max-width: 480px) {
            font-size: 1.2rem;
          }
        }
        ul {
          list-style-type: disc;
          padding-left: 0.75em;
          margin-left: 0.75em;
        }
      }
    }
  }
}
/* 営業所一覧 */
body.shop {
  hgroup.ui {
    p {
      max-width: 60rem;
    }
  }
  .shop_link_list {
    margin-top: -2rem;
    margin-bottom: 10rem;
    @media screen and (max-width: 480px) {
      margin-top: -1.6rem;
      margin-bottom: 6rem;
    }
  }

  .shop_wrap {
    max-width: 79.8rem;
    padding: 0 2rem;
    margin: auto;

    h3 {
      background-color: var(--color-blue);
      color: #fff;
      font-size: 1.8rem;
      letter-spacing: 0.05em;
      padding: 1rem 2rem;
      margin-bottom: 3.8rem;
      &:nth-of-type(2n) {
        background-color: var(--color-light_blue);
      }
      @media screen and (max-width: 480px) {
        font-size: 1.6rem;
        padding: 0.76rem 1.3rem;
        margin-bottom: 2rem;
      }
    }
    .shop_data {
      margin-bottom: 4.5rem;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      @media screen and (max-width: 480px) {
        display: block;
        margin-bottom: 3rem;
      }
      article {
        max-width: 36.4rem;
        width: 46%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 5rem;
        @media screen and (max-width: 480px) {
          max-width: 100%;
          width: 100%;
          margin-bottom: 4rem;
        }
        .text_wrap {
          max-width: 22.4rem;
          width: 61%;
          padding-right: 1em;
          box-sizing: border-box;
          @media screen and (max-width: 480px) {
            max-width: 100%;
          }
          h4 {
            font-size: 2.4rem;
            line-height: 1.25;
            color: var(--color-blue);
            font-weight: 900;
            margin-bottom: 0.25em;
            @media screen and (max-width: 480px) {
              font-size: 2rem;
            }
          }
          address {
            font-style: normal;
            font-size: 1.6rem;
            line-height: 1.375;
            word-break: keep-all;
            text-align: left;
            @media screen and (max-width: 480px) {
              font-size: 1.4rem;
            }
          }
        }
        .img_wrap {
          max-width: 14rem;
          width: 39%;
          @media screen and (max-width: 480px) {
            max-width: 100%;
          }
        }
        .map {
          margin-top: 1.4rem;
          width: 100%;
          aspect-ratio: 364/184;
          iframe {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
/* 買取ステップ */
body.step {
  hgroup.ui {
    padding-bottom: 18.4rem;
    @media screen and (max-width: 480px) {
      padding-bottom: 9rem;
    }
    p {
      max-width: 60rem;
    }
  }

  .step_wrap {
    max-width: 60rem;
    margin: -13.2rem auto auto;
    padding: 0 2rem 2rem;
    position: relative;

    &::before {
      content: "";
      display: block;
      width: 2rem;
      height: 80rem;
      background-color: var(--color-blue);
      z-index: 1;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    @media screen and (max-width: 480px) {
      margin-top: -6rem;
      &::before {
        width: 1rem;
        height: 60rem;
      }
    }
    .step {
      background-color: #fff;
      border: 5px solid var(--color-blue);
      padding: 1.8rem 1.8rem 1.8rem 2.8rem;
      position: relative;
      z-index: 10;
      display: flex;
      gap: 4.2rem;
      justify-content: space-between;
      margin-bottom: 5.6rem;
      @media screen and (max-width: 480px) {
        border: 3px solid var(--color-blue);
        padding: 1.6rem 1rem;
        display: block;
        margin-bottom: 3rem;
      }
      .step_number {
        background-color: #fff800;
        border-right: 3px solid var(--color-blue);
        border-bottom: 3px solid var(--color-blue);
        position: absolute;
        left: 0;
        top: 0;
        width: 7.6rem;
        height: 7.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        @media screen and (max-width: 480px) {
          width: 5em;
          height: 4.8rem;
        }
        img {
          width: 4rem;
          @media screen and (max-width: 480px) {
            width: 3rem;
          }
        }
      }
      .img_wrap {
        width: 15.6rem;
        min-height: 15.6rem;
        flex-shrink: 0;
        @media screen and (max-width: 480px) {
          position: absolute;
          top: 1rem;
          right: 1rem;
          width: 9rem;
          aspect-ratio: 1/1;
          min-height: auto;
        }
        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
        }
      }
      .text_wrap {
        h2 {
          font-size: 2.8rem;
          letter-spacing: 0.09em;
          font-weight: 900;
          color: var(--color-blue);
          padding-left: 6.8rem;
          margin-bottom: 4rem;
          @media screen and (max-width: 480px) {
            font-size: 2rem;
            padding-left: 5rem;
            margin-bottom: 3rem;
          }
        }
        p {
          font-size: 1.6rem;
          letter-spacing: 0.05em;
          line-height: 1.625;
          @media screen and (max-width: 480px) {
            font-size: 1.2rem;
            width: 20rem;
          }
        }
      }
    }
  }
}
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
買取実績
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

#contents_wrap.case_wrap {
  padding: 4.4rem 2rem 0;
  @media screen and (max-width: 480px) {
    padding: 2rem 2rem 0;
  }
  h1 {
    max-width: 48.4rem;
    margin: auto auto 4.4rem;
    @media screen and (max-width: 480px) {
      max-width: 32.6rem;
      margin: auto auto 1.8rem;
    }
  }
  /* ページネーション */
  .pagination_wrap {
    text-align: center;
    font-size: 1.8rem;
    @media screen and (max-width: 480px) {
      font-size: 1.2rem;
    }
    .page-numbers {
      display: inline-block;
      width: 2em;
      aspect-ratio: 1/1;
      box-sizing: border-box;
      border: 1px solid var(--color-blue);
      border-radius: 9999px;
      padding-top: 0.4em;
      background-color: var(--color-blue);
      color: #fff;
      margin: 0.1em;
      &.current {
        background-color: #fff;
        color: var(--color-blue);
      }
      &.prev,
      &.next {
        border: none;
        background-color: #fff;
        color: var(--color-blue);
        width: 3em;
        aspect-ratio: 3/2;
      }
    }
  }

  &.case_entry_wrap {
    padding: 0;
    article {
      padding: 4.4rem 2rem 11rem;
      background-color: #eef5f9;
      @media screen and (max-width: 480px) {
        padding: 2rem 2rem 0;
      }

      .cardata_wrap {
        max-width: 79.8rem;
        margin: auto;
        border-radius: 1rem;
        overflow: hidden;
        @media screen and (max-width: 480px) {
          border-radius: 0.6rem;
        }
        h2 {
          background-color: var(--color-blue);
          padding: 1em 0.25em;
          font-size: 3.2rem;
          font-weight: 900;
          color: #fff;
          line-height: 1.4;
          text-align: center;
          letter-spacing: 0.09em;
          @media screen and (max-width: 480px) {
            font-size: 2rem;
          }
          span {
            display: inline-block;
            padding-left: 0.09em;
          }
        }
        .cardata {
          padding: 4.8rem;
          background-color: #fff;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          @media screen and (max-width: 480px) {
            display: block;
            padding: 1.6rem;
          }
          .img_wrap {
            width: 35rem;
            aspect-ratio: 1/1;
            flex-shrink: 0;
            @media screen and (max-width: 480px) {
              width: 100%;
              aspect-ratio: 4/3;
              margin-bottom: 2rem;
            }
          }
          .data_wrap {
            width: 30.4rem;
            @media screen and (max-width: 480px) {
              width: 100%;
            }
            h3 {
              background-color: #e32934;
              color: #fff;
              font-size: 1.2rem;
              font-weight: 900;
              padding: 0.5rem;
              letter-spacing: 0.02em;
              margin-bottom: 0.6rem;
              @media screen and (max-width: 480px) {
                font-size: 1rem;
                text-align: center;
              }
            }
            .price {
              font-size: 4.6rem;
              color: #e32934;
              font-weight: 900;
              margin-bottom: 1.2rem;
              @media screen and (max-width: 480px) {
                font-size: 3.2rem;
                text-align: center;
                margin-bottom: 2rem;
              }
              .yen {
                font-size: 0.8em;
              }
            }
            table.data {
              width: 100%;
              tbody {
                tr {
                  border-bottom: 1px solid #000;
                  th {
                    font-size: 1.4rem;
                    font-weight: 500;
                    text-align-last: justify;
                    width: 5em;
                    vertical-align: middle;
                    padding: 0.6rem 2rem 0.6rem 0.4rem;
                    @media screen and (max-width: 480px) {
                      font-size: 1.2rem;
                    }
                  }
                  td {
                    font-size: 1.6rem;
                    letter-spacing: 0.06em;
                    font-weight: 900;
                    line-height: 1.25;
                    padding: 0.3rem 0;
                    @media screen and (max-width: 480px) {
                      font-size: 1.4rem;
                      padding: 0.5rem 0;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}