body {
  margin: 0;
}

.lp_otorent{
  & * {
    box-sizing: border-box;
  }

  & img {
    max-width: 100%;
  }
  & .rs_inner {
    max-width: 1000px;
    margin-inline: auto;
  }
  
  & .rs_hero {
    position: relative;
    @media screen and (width >= 768px) {
      padding-block-start: 60px;
      background: #ffee7d url(../img/pupple/bg_hero_pc.png) repeat-x center center;
    }
    @media screen and (width < 768px) {
      padding-block: 30px 0;
      background: #ffee7d url(../img/pupple/bg_hero_sp.png) no-repeat center center;
      background-size: cover;
    }
    
    & .rs_maintitle {
      margin: 0 auto;
      display: flex;
      justify-content: center;
      max-width: 844px;
      width: 85.3846153846%;
    }
    & .rs_merit {
      margin-inline: auto;
      display: flex;
      @media screen and (width >= 768px) {
        margin-block-start: -30px;
        padding-inline-start: 20px;
        justify-content: flex-end;
      }
      @media screen and (width < 768px) {
        margin-block-start: 20px;
        width: 95%;
        justify-content: center;
      }
    }
    & .rs_copyrights {
      margin-block-start: 10px;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 10px;
      margin-inline: 20px;
      @media screen and (width >= 768px) {
        margin-inline-end: 30%;
        position: absolute;
        bottom: .5rem;
      }
      @media screen and (width < 768px) {
        justify-content: center;
      }
    }
  }
  & .rs_rcmd {
    padding-block-end: 50px;
    @media screen and (width >= 768px) {
      padding-block-start: 17px;
      background: #a6d6c8 url(../img/pupple/bg_main_pc.png) no-repeat center -50px;
    }
    @media screen and (width < 768px) {
      padding-block: 10px 30px;
      background: #a6d6c8 url(../img/pupple/bg_main_sp.png) no-repeat center top;
      background-size: 100% auto;

    }
    & .rs_subttl {
      margin-block: 0;
      display: flex;
      justify-content: center;
      position: relative;
      z-index: 10;
      & img {
        max-width: 71vw;
      }
    }
    & .rs_rcmd_list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      @media screen and (width < 768px) {
        gap: 15px;
        align-items: center;
      }
    }
    & .rs_rcmd_item {
      position: relative;
      display: flex;
      flex-direction: column;
      max-width: 90vw;
      & .rs_rcmd_item_btn {
        margin-block-start: -30px;
        margin-inline: 6% auto;
        display: flex;
        width: 328px;
        a {
          display: block;
          width: 100%;
          img {
            width: 100%;
          }
        }
        @media screen and (width < 768px) {
          width: 60vw;
          /* min-width: 177px; */
          margin-inline: auto;
          margin-block-start: -15px;
        }
      }
      &:nth-child(odd) {
        @media screen and (width >= 768px) {
          margin-inline-start: 6%;
        }
      }
      &:nth-child(even) {
        @media screen and (width >= 768px) {
          margin-inline-end: 6%;
          align-items: flex-end;
          & .rs_rcmd_item_btn {
            justify-content: flex-end;
          }
        }
      }
      &.rs_rcmd_item_electone {
        z-index: 5;
        max-width: 81.02564102564vw;
      }
      &.rs_rcmd_item_digitalpiano {
        z-index: 4;
        max-width: 82.6923076923vw;
        @media screen and (width >= 970px) {
          margin-block-start: -60px;
        }
        @media screen and (width >= 768px) {
          & .rs_rcmd_item_btn {
            margin-inline: auto 7%;
          }
        }
        
      }
      &.rs_rcmd_item_violin {
        z-index: 3;
        max-width: 82.4358974359vw;
        @media screen and (width >= 768px) {
          & .rs_rcmd_item_btn {
            margin-inline: 8% auto;
          }
        }
        @media screen and (width < 768px) {
          margin-top: -8px;
        }
      }
      &.rs_rcmd_item_trumpet {
        z-index: 2;
        max-width: 88.4615384615vw;
        @media screen and (width >= 768px) {
          margin-inline-end: 8%;
          & .rs_rcmd_item_btn {
            margin-inline: auto 9%;
          }
        }
        @media screen and (width < 768px) {
          margin-top: 9px;
        }
      }
      &.rs_rcmd_item_flute {
        z-index: 1;
        max-width: 86.6666666667vw;
        @media screen and (width >= 900px) {
          margin-block-start: -20px;
        }
        @media screen and (width >= 768px) {
          margin-inline-start: 3%;
          & .rs_rcmd_item_btn {
            margin-inline: 8% auto;
          }
        }
        @media screen and (width < 768px) {
          margin-top: -7px;
        }
      }
    }
    & .rs_merit {
      max-width: 900px;
      padding-inline: 20px;
      margin-block-start: 50px;
      margin-inline: auto;
      @media screen and (width < 768px) {
        margin-block-start: 40px;
        width: 90vw;
      }
      & h3 {
        display: flex;
        justify-content: center;
        margin-inline: 20px;
        margin-block-end: 0;
        position: relative;
        z-index: 2;
      }
      & .rs_merit_list {
        position: relative;
        z-index: 1;
        margin: -20px auto 0;
        padding: 0;
        display: flex;
        gap: 2px;
        flex-wrap: wrap;
        list-style-type: none;
        text-align: center;
        border-radius: 10px;
        overflow: hidden;
        & li {
          width: calc(50% - 1px);
          background-color: #0068b6;
          @media screen and (width < 768px) {
            width: 100%;
          }
          & dl {
            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: center;
            justify-content: center;
            padding: 28px 10px;
            margin: 0;
          }
          & dd {
            padding: 0;
            margin: 0;
          }
          @media screen and (width < 768px) {
            & .line-1 {
              height: 15px;
            }
            & .line-2 {
              height: 33px;
            }
            & dd {
              height: 24px;
            }
          }
        }
      }
    }
  }
  & .rs_concert {
    background-color: #ee802b;
    padding: 48px 50px 60px;
    @media screen and (width < 768px) {
      padding: 20px 20px 30px;
    }
    & .rs_inner {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 30px;
      @media screen and (width < 768px) {
        gap: 10px;
      }
    }
    & .rs_concert_ttl {
      margin-block: -65px 0;
      @media screen and (width < 768px) {
        margin-block: -30px 0;
      }
      width: 35%;
    }
    & .rs_banner {
      position: relative;
      width: 47%;
      @media screen and (width < 768px) {
        /* width: 40%; */
      }
      & a {
        display: block;
      }
    }
  }
}


.banner_area {
  padding: 2.75rem 3rem 2rem;
  .rs_inner {
    max-width: 800px;
  }
  .banner_list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style-type: none;
    gap: 15px;
    justify-content: space-between;
    & img {
      max-width: 100%;
    }
    @media screen and (width < 768px) {
      flex-direction: column;
      gap: 10px;
    }
  }
  & .note {
    text-align: right;
    font-weight: 700;
    font-size: 12px;
    @media screen and (width < 768px) {
      font-size: 8px;
    }
  }
}