:root {
  --font-color: #594B3A;
  --white-color: #FFFFFF;
  --gray-color: #F2EEE7;
  --background-color: #FBE9E5;
  --accent-color: #E5555D;
  --sp-padding: 1.125rem;
  --pc-padding: 2rem;
  --pc-header-height: 24.3125rem;
  --sp-header-height: 9.4375rem;
  --ff-base: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}

/* =========================
   Breakpoint variables
========================= */
/* =========================
   Breakpoint map
========================= */
/* =========================
   Media query mixin
========================= */
.page-piano .subheader {
  background-image: url(../images/common/img-piano-subheader_pc.webp);
}
@media screen and (max-width: 767px) {
  .page-piano .subheader {
    background-image: url(../images/common/img-piano-subheader_sp.webp);
  }
}
.page-piano .piano-lesson__section {
  padding-top: 0.25rem;
  padding-bottom: 18.625rem;
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson__section {
    padding-top: 0.625rem;
    padding-bottom: 5.6875rem;
  }
}
.page-piano .piano-lesson-intro__text {
  color: var(--accent-color);
  text-align: center;
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 2.24px;
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson-intro__text {
    font-size: 1.25rem;
    font-style: normal;
    line-height: normal;
  }
}
.page-piano .piano-lesson__title {
  position: relative;
  padding-top: 18.3125rem;
  margin-top: 2.9375rem;
  color: var(--accent-color);
  text-align: center;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 2.24px;
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson__title {
    margin-top: 3.4375rem;
    padding-top: 14rem;
    font-size: 1.5rem;
  }
}
.page-piano .piano-lesson__title::before {
  content: "";
  position: absolute;
  background: url(../images/piano/img-intro.webp) no-repeat center center/contain;
  width: 12.5rem;
  height: 16.625rem;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  left: 50%;
  top: 0;
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson__title::before {
    width: 9.375rem;
    height: 12.4375rem;
  }
}
.page-piano .piano-lesson__lead {
  margin-top: 1.8125rem;
  text-align: center;
  font-style: normal;
  line-height: 1.875;
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson__lead {
    margin-top: 1.5625rem;
    font-size: 0.875rem;
    font-style: normal;
    line-height: 1.78571;
  }
}
.page-piano .piano-lesson__list {
  margin-top: 6.3125rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 69.875rem;
  max-width: 100%;
  margin-inline: auto;
  gap: 4.5625rem;
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson__list {
    margin-top: 2.625rem;
    gap: 5.375rem;
  }
}
.page-piano .piano-lesson-list__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 768px) {
  .page-piano .piano-lesson-list__item {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson-list__item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4.125rem;
  }
}
@media screen and (min-width: 768px) {
  .page-piano .piano-lesson-item__cont {
    width: 40.25%;
  }
}
.page-piano .piano-lesson-item__lead {
  color: #FF981A;
  font-size: clamp(1.75rem, 1.464rem + 0.6vw, 2rem);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 2.24px;
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson-item__lead {
    text-align: center;
    font-size: 1.25rem;
  }
}
.page-piano .piano-lesson-item__text {
  margin-top: 1.375rem;
  font-style: normal;
  line-height: 1.875;
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson-item__text {
    margin-top: 1.875rem;
    font-size: 0.875rem;
    line-height: 1.78571;
  }
}
.page-piano .piano-lesson-item__img {
  position: relative;
}
.page-piano .piano-lesson-item__img::before {
  content: "";
  position: absolute;
}
@media screen and (min-width: 768px) {
  .page-piano .piano-lesson-item__img01 {
    width: 53.84%;
  }
}
.page-piano .piano-lesson-item__img01::before {
  width: 5rem;
  height: 5rem;
  top: 61%;
  right: 31%;
  background: url(../images/piano/deco-intro-01.webp) no-repeat center center/contain;
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson-item__img01::before {
    width: 3.75rem;
    height: 3.75rem;
    top: 63%;
    right: 9%;
  }
}
@media screen and (min-width: 768px) {
  .page-piano .piano-lesson-item__img02 {
    width: 47.4%;
  }
}
.page-piano .piano-lesson-item__img02::before {
  width: 5rem;
  height: 5rem;
  top: -3.125rem;
  right: 1.875rem;
  background: url(../images/piano/deco-intro-02.webp) no-repeat center center/contain;
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson-item__img02::before {
    width: 3.75rem;
    height: 3.75rem;
    top: -1.875rem;
    right: 2.125rem;
  }
}
.page-piano .piano-lesson-adult__section {
  position: relative;
  padding-top: 0.25rem;
  padding-bottom: 1.875rem;
  background: #FBFAF6;
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson-adult__section {
    padding-bottom: calc(27.2vw + 0.8125rem);
  }
}
.page-piano .piano-lesson-adult__section::before, .page-piano .piano-lesson-adult__section::after {
  content: "";
  position: absolute;
}
.page-piano .piano-lesson-adult__section::before {
  background: url(../images/piano/bg-adult_pc.webp) no-repeat center center/cover;
  aspect-ratio: 1440/222;
  width: 100%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  left: 50%;
  top: -14.9305555556vw;
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson-adult__section::before {
    background: url(../images/piano/bg-adult_sp.webp) no-repeat center center/cover;
    aspect-ratio: 375/58;
    top: -14.1333333333vw;
  }
}
.page-piano .piano-lesson-adult__section::after {
  background: url(../images/piano/bg-adult-02_pc.webp) no-repeat center center/cover;
  aspect-ratio: 1440/340;
  width: 100%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  left: 50%;
  bottom: -12.2222222222vw;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson-adult__section::after {
    background: url(../images/piano/bg-adult-02_sp.webp) no-repeat center center/cover;
    aspect-ratio: 375/102;
    bottom: 0;
    z-index: 1;
  }
}
.page-piano .piano-lesson-adult__lead {
  color: #79BF4B;
  text-align: center;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.68;
  letter-spacing: 2.24px;
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson-adult__lead {
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
  }
}
.page-piano .piano-lesson-adult__title {
  color: #79BF4B;
  text-align: center;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 0.75;
  margin-top: 0.9375rem;
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson-adult__title {
    margin-top: 0.125rem;
    text-align: center;
    font-size: 1.5rem;
    line-height: normal;
  }
}
.page-piano .piano-lesson-adult__cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 69.8125rem;
  max-width: 100%;
  margin-inline: auto;
  margin-top: 3.6875rem;
}
@media screen and (min-width: 768px) {
  .page-piano .piano-lesson-adult__cont {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson-adult__cont {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2.4375rem;
    margin-top: 2rem;
  }
}
@media screen and (min-width: 768px) {
  .page-piano .piano-lesson-adult__text {
    width: 46.1%;
    line-height: 1.875;
  }
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson-adult__text {
    font-size: 0.875rem;
    font-style: normal;
    line-height: 1.78571;
  }
}
@media screen and (min-width: 768px) {
  .page-piano .piano-lesson-adult__img {
    width: 47.4%;
  }
}
.page-piano .piano-lesson-adult-bottom__wrapper {
  margin-top: 9.4375rem;
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson-adult-bottom__wrapper {
    margin-top: 3.375rem;
  }
}
.page-piano .piano-lesson-adult-bottom__lead {
  text-align: center;
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 0.9375;
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson-adult-bottom__lead {
    font-size: 1.25rem;
    line-height: normal;
  }
}
.page-piano .piano-lesson-adult-bottom__cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 2.5625rem;
  width: 46.1875rem;
  max-width: 100%;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .page-piano .piano-lesson-adult-bottom__cont {
    gap: 3.15%;
  }
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson-adult-bottom__cont {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    margin-top: 1.625rem;
    gap: 1.875rem;
    width: 35rem;
  }
}
.page-piano .piano-lesson-adult-bottom__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (min-width: 768px) {
  .page-piano .piano-lesson-adult-bottom__list {
    width: 69.1%;
    margin-top: 1rem;
  }
}
.page-piano .piano-lesson-adult-bottom-list__item {
  font-size: 1.25rem;
  font-style: normal;
  line-height: 2;
  letter-spacing: 1px;
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson-adult-bottom-list__item {
    font-size: 1rem;
    line-height: 1.875;
    letter-spacing: 0.8px;
  }
}
@media screen and (min-width: 768px) {
  .page-piano .piano-lesson-adult-bottom__img {
    width: 27.7%;
  }
}
@media screen and (max-width: 767px) {
  .page-piano .piano-lesson-adult-bottom__img {
    width: 8.5rem;
    max-width: 100%;
    margin-inline: auto;
  }
}
@media screen and (min-width: 768px) {
  .page-piano .lesson-detail__section {
    margin-top: 13.5625rem;
    padding-top: 3.6875rem;
    padding-bottom: 24.9375rem;
  }
}
@media screen and (min-width: 768px) {
  .page-piano .voice-section {
    padding-bottom: 1.8125rem;
  }
}
.page-piano .access__section {
  position: relative;
  padding-top: calc(9.375vw + 7.5625rem);
  padding-bottom: calc(10.4861111111vw + 9.4375rem);
}
@media screen and (max-width: 767px) {
  .page-piano .access__section {
    padding-top: calc(8vw + 3.5625rem);
    padding-bottom: calc(11.2vw + 5.625rem);
  }
}
.page-piano .access__section::before {
  content: "";
  position: absolute;
  background: url("../images/ritomic/bg-access_pc.webp") no-repeat center center/cover;
  aspect-ratio: 1440/135;
  width: 100%;
  left: 50%;
  top: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  .page-piano .access__section::before {
    background: url("../images/ritomic/bg-access_sp.webp") no-repeat center center/cover;
    aspect-ratio: 375/35;
    top: 0;
  }
}
.page-piano .access__cont {
  width: 46.3125rem;
  max-width: 100%;
  margin-inline: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 768px) {
  .page-piano .access__cont {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 1.875rem;
  }
}
@media screen and (max-width: 767px) {
  .page-piano .access__cont {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2.75rem;
    width: 35rem;
  }
}
@media screen and (min-width: 768px) {
  .page-piano .access__block {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
.page-piano .access__title {
  color: var(--accent-color);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 2.24px;
}
@media screen and (max-width: 767px) {
  .page-piano .access__title {
    text-align: center;
    font-size: 1.25rem;
  }
}
.page-piano .access__text {
  margin-top: 2.375rem;
  font-size: 1rem;
  font-style: normal;
  line-height: 1.875;
}
@media screen and (max-width: 767px) {
  .page-piano .access__text {
    margin-top: 2.125rem;
    font-size: 0.875rem;
    line-height: 1.78571;
  }
}
.page-piano .access__img {
  width: 12.8125rem;
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  .page-piano .access__img {
    margin-inline: auto;
  }
}