@media (width < 768px) {
  body {
    font-size: 14px;
    letter-spacing: 0.008em;
  }


  /* header */
  header {
    padding: 22px 15px 33px;
    position: relative;
    .wrapper {
      display: flex;
      flex-direction: column;
      .lbox {
        display: contents;
      }
    }
    #header_logo {
      text-align: center;
      order: 1;
      img {
        width: 184px;
        height: auto;
      }
    }
    #mv_img {
      order: 2;
      margin-top: 15px;
      img {
        width: 100%;
        height: auto;
      }
    }
    .mv_copy {
      order: 3;
      font-size: 28px;
      line-height: 1.28;
      font-weight: 800;
      padding-left: 13px;
      margin-top: -13px;
      span {
        &:nth-of-type(1) {
          text-shadow: -2px -2px 0 #FFFFFF, 2px -2px 0 #FFFFFF, -2px 2px 0 #FFFFFF, 2px 2px 0 #FFFFFF;
        }
        &:nth-of-type(3) {
          letter-spacing: 0.09em;
        }
      }
    }
    .mv_subcopy {
      order: 4;
      padding-left: 13px;
      margin-top: 13px;
      font-size: 13px;
      font-weight: 600;
    }
    .mv_feature {
      order: 5;
      padding-left: 12px;
      margin-top: -1px;
      display: flex;
      gap: 0 5px;
      img {
        width: 72px;
        height: auto;
      }
    }
    .mv_open {
      img {
        width: 105px;
        height: auto;
      }
    }
  }
  section.cta {
    background: repeating-linear-gradient(45deg, #48bd3f, #48bd3f 10px, #4dbf47 10px, #4dbf47 20px);
    position: relative;
    padding: 25px 0 27px;
    overflow: hidden;
    &::after {
      content: "";
      border-radius: 50%;
      background-image: -moz-radial-gradient( 50% 50%, circle closest-side, rgb(255,249,172) 0%, rgba(255,249,172,0) 100%);
      background-image: -webkit-radial-gradient( 50% 50%, circle closest-side, rgb(255,249,172) 0%, rgba(255,249,172,0) 100%);
      background-image: -ms-radial-gradient( 50% 50%, circle closest-side, rgb(255,249,172) 0%, rgba(255,249,172,0) 100%);
      opacity: 0.502;
      position: absolute;
      width: 400px;
      height: 400px;
      z-index: 1;
      top: 0;
      right: 0;
      transform: translateX(50%);
    }
    h2 {
      text-align: center;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.04em;
      position: relative;
      z-index: 5;
    }
    > ul {
      margin-top: 13px;
      padding: 0 22px;
      position: relative;
      z-index: 5;
      > li {
        margin-top: 12px;
        &:nth-of-type(1) {
          margin-top: 0;
        }
        a {
          width: 100%;
          padding: 9px 0 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0 14px;
          font-size: 18px;
          font-weight: 600;
          border-radius: 70px;
          box-shadow: 2.8285px 2.8285px 0px 0px rgba(0, 0, 0, 0.2);
          img {
            width: 24px;
            height: auto;
          }
          &.line {
            background: #FFFFFF;
          }
        }
      }
    }
  }

  #top_worries {
    padding: 55px 22px 33px;
    h2 {
      text-align: center;
      font-size: 18px;
      font-weight: 800;
      line-height: 1.2;
      .size_l {
        font-size: 36px;
      }
      .size_m {
        font-size: 24px;
      }
    }
    > ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      margin: 30px auto 0;
      gap: 10px;
      > li {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        gap: 0;
        grid-template-rows: auto;
        border-radius: 12px;
        padding: 8px 3px 0;
        text-align: center;
        border-width: 2px;
        dt {
          font-size: 10px;
          text-decoration: underline;
          font-weight: 600;
        }
        dd {
          margin-top: 7px;
          p {
            font-size: 17px;
            line-height: 1.47;
            font-weight: 700;
            letter-spacing: -0.03em;
            &.img {
              margin-top: 5px;
              padding: 0 12px;
            }
          }
        }
      }
    }
  }
  #top_dontworry {
    h2 {
      font-size: 27px;
      font-weight: 700;
      text-align: center;
      letter-spacing: -0.06em;
      line-height: 1.3;
      .kerning_1 {
        display: inline-block;
        margin-left: -8px;
      }
      .kerning_2 {
        display: inline-block;
        margin-right: -10px;
      }
    }
    .dw_points_wrapper {
      margin-top: 43px;
      padding: 60px 22px 60px;
      position: relative;
      &::before {
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-right: 12px solid transparent;
        border-left: 12px solid transparent;
        border-top: 20px solid #ffffff;
        border-bottom: 0;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .dw_points {
      > li {
        margin-top: 15px;
        border-radius: 0 12px 12px 12px;
        overflow: hidden;
        position: relative;
        &:nth-of-type(1) {
          margin-top: 0;
        }
        > dl {
          dt {
            img {
              width: 100%;
              height: auto;
            }
          }
          dd {
            padding: 21px 29px 25px;
            .point {
              position: absolute;
              top: 0;
              left: 0;
              width: 40px;
              text-align: center;
              padding: 3px 0;
              line-height: 1;
              font-weight: 700;
              font-size: 10px;
            }
            h3 {
              font-size: 20px;
              font-weight: 700;
              letter-spacing: 0.05em;
              line-height: 1.3;
              & + p {
                margin-top: 16px;
                font-size: 14px;
                line-height: 1.5;
              }
            }
          }
        }
      }
    }
  }
  #top_features {
    padding: 60px 22px 65px;
    position: relative;
    &::before {
      content: "";
      background: var(--bg-gradient);
      opacity: 0.1;
      position: absolute;
      inset: 0;
      z-index: 1;
    }
    .contents {
      position: relative;
      z-index: 5;
    }
    h2 {
      text-align: center;
      padding: 16px 0 12px;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.25;
      border-radius: 16px 16px 0 0;
      .size_l {
        font-size: 32px;
      }
      .size_m {
        font-size: 24px;
      }
    }
    .features_list {
      border-radius: 0 0 16px 16px;
      overflow: hidden;
      > li {
        padding: 27px 25px 23px;
        position: relative;
        &::after {
          content: "";
          background-image: repeating-linear-gradient(90deg, #dddddd, #dddddd 4px, transparent 4px, transparent 8px);
          background-position: left bottom;
          background-repeat: repeat-x;
          background-size: 100% 1px;
          position: absolute;
          height: 1px;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: 5;
        }
        &::before {
          width: 30px;
          height: 30px;
          font-size: 15px;
          font-weight: 600;
          z-index: 9;
          box-sizing: border-box;
        }
        &:nth-of-type(2n+1) {
          &::before {
            position: absolute;
            top: 0;
            left: 0;
            background: radial-gradient(circle at top left, var(--color-yellow) 0%, var(--color-yellow) 100%, transparent 100%);
            border-radius: 0 0 100% 0;
            padding-left: 7px;
          }
        }
        &:nth-of-type(2n) {
          &::before {
            position: absolute;
            top: -2px;
            right: 0;
            z-index: 9;
            background: radial-gradient(circle at top right, var(--color-yellow) 0%, var(--color-yellow) 100%, transparent 100%);
            border-radius: 0 0 0 100%;
            text-align: right;
            padding-right: 7px;
            padding-top: 1px;
          }
        }
        &:nth-of-type(3) {
          padding-top: 23px;
          &::before {
            top: -2px;
          }
          &::after {
            display: none;
          }
        }
        > dl {
          display: contents;
          dt {
            font-size: 21px;
            font-weight: 700;
            line-height: 1.28;
          }
          dd {
            margin-top: 13px;
            font-size: 14px;
            line-height: 1.5;
          }
        }
      }
    }
  }
  #top_flow {
    padding: 65px 22px 70px;
    h2 {
      text-align: center;
      font-size: 24px;
      font-weight: 700;
    }
    > ol {
      margin: 33px auto 0;
      > li {
        display: flex;
        align-items: flex-start;
        position: relative;
        margin-top: 19px;
        &::before {
          content: "";
          width: 1px;
          background: #d8d8cf;
          position: absolute;
          top: 0;
          bottom: -19px;
          left: 30px;
          z-index: 1;
        }
        &:nth-of-type(1) {
          margin-top: 0;
        }
        &:last-child {
          &::before {
            display: none;
          }
        }
        .num {
          width: 60px;
          padding: 25px 0 26px;
          border-radius: 12px 0 0 12px;
          font-size: 16px;
          font-weight: 500;
          text-align: center;
          flex-shrink: 0;
          font-size: 10px;
          line-height: 1.1;
          position: relative;
          z-index: 5;
          .integer {
            display: block;
            font-size: 24px;
            font-weight: 600;
          }
        }
        dl {
          background: #FFFFFF;
          flex-grow: 1;
          padding: 21px 29px 27px;
          border-radius: 0 12px 12px 12px;
          dt {
            font-size: 18px;
            font-weight: 700;
            line-height: 1.5;
          }
          dd {
            margin-top: 14px;
            font-size: 14px;
            line-height: 1.5;
            letter-spacing: 0;
          }
        }
      }
    }
  }
  
  #top_faq {
    padding: 65px 22px 70px;
    h2 {
      text-align: center;
      font-size: 24px;
      font-weight: 700;
      span {
        margin: 0 -3px;
      }
    }
    .faqlist {
      margin: 33px auto 0;
      > li {
        margin-top: 10px;
        border-radius: 12px;
        overflow: hidden;
        &:nth-of-type(1) {
          margin-top: 0;
        }
        dl {
          dt {
            button,
            button:focus,
            button:hover  {
              padding: 20px 20px 18px calc(25px + 1.25em);
              font-size: 18px;
              font-weight: 600;
              text-indent: -1.25em;
              color: #080808;
            }
            button {
              &::before {
                color: var(--color-magenta);
                padding-right: 5px;
              }
            }
          }
          dd {
            margin-top: 3px;
            padding: 0 24px 30px;
            font-size: 14px;
            font-weight: 500;
            line-height: 1.5;
          }
        }
      }
    }
  }
  #top_access {
    padding: 65px 0 70px;
    h2 {
      text-align: center;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.02em;
      .kerning {
        margin: 0 -3px;
      }
    }
    h3 {
      text-align: center;
      margin-top: 35px;
      img {
        width: 181px;
        height: auto;
      }
    }
    .about_shop {
      margin: 22px auto 0;
      padding: 0 22px;
      .photo {
        position: relative;
        overflow: hidden;
        img {
          width: 100%;
          height: auto;
          border-radius: 12px;
        }
      }
      .infomation {
        margin-top: 10px;
        padding: 0 10px;
        > dl {
          display: flex;
          background-image: repeating-linear-gradient(90deg, #dddddd, #dddddd 4px, transparent 4px, transparent 8px);
          background-position: left bottom;
          background-repeat: repeat-x;
          background-size: 100% 1px;
          dt {
            width: 90px;
            padding: 11px 3px 11px 9px;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.5;
            flex-shrink: 0;
          }
          dd {
            flex-grow: 1;
            padding: 11px 5px 11px 0;
            font-size: 14px;
            line-height: 1.5;
          }
        }
        .sns {
          margin-top: 14px;
          margin-left: 10px;
          display: flex;
          gap: 0 25px;
          img {
            width: 32px;
            height: auto;
          }
        }
      }
    }
    .map {
      margin-top: 28px;
      iframe {
        aspect-ratio: 750 / 480;
        width: 100%;
        height: auto;
      }
    }
    .maplink {
      margin: 15px auto 0;
      padding: 0 22px;
      display: flex;
      justify-content: center;
      gap: 0 18px;
      > li {
        display: contents;
        a {
          border-width: 2px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex: 1;
          border-radius: 75px;
          text-align: center;
          font-size: 15px;
          font-weight: 700;
          position: relative;
          box-shadow: 2.8285px 2.8285px 0px 0px rgba(0, 0, 0, 0.2);
          line-height: 1.1;

          .small {
            font-size: 10px;
            font-weight: 500;
          }
          &#top_access_gmap {
            padding-right: 5px;
            &::after {
              content: "";
              width: 10px;
              height: 10px;
              background: url(../img/ico_tab.png) no-repeat;
              background-size: 10px;
              position: absolute;
              top: 50%;
              right: 13px;
              transform: translateY(-50%);
            }
          }
          &#top_access_floormap {
            padding: 5px 0 9px;
          }
        }
      }
    }
  }
  #footer {
    padding: 20px 0 35px;
    text-align: center;
    &::before {
      height: 4px;
    }
    h2 {
      font-size: 13px;
      font-weight: 600;
    }
    > dl {
      dt {
        margin-top: 10px;
        img {
          width: 137px;
          height: auto;
        }
      }
      dd {
        margin-top: 12px;
        font-size: 10px;
        font-weight: 500;
      }
    }
  }
}