@charset "UTF-8";


section.l-mainVisual.piano{
  background:url(../img/about/course/mv_piano.jpg) no-repeat 60% center/cover;
}

section.l-mainVisual.rhythmic{
  background:url(../img/about/course/mv_rhythmic.jpg) no-repeat center center/cover;
}

.l-course__heading{
  color:var(--accent-color-pl);
  font-size:var(--copy-txt-size);
  position: relative;
  width: fit-content;
  line-height: 1.5;
  margin:0 0 3.2rem;
  letter-spacing: 0.1em;
  padding:0 0 0 2rem;
  margin-left:-1.1rem;
}

.l-course__heading::before,.l-course__heading.center::after{
  content:"";
  display: block;
  width:1.1rem;
  height:1.3rem;
  background:url(../img/about/course/heading-deco-l.svg) no-repeat center center/contain;
  position: absolute;
  left:0;
  top:0;
}


.l-course__heading.center{
  padding:0;
  margin:0 auto 3.2rem;
  text-align: center;
}

.l-course__heading.center::before{
  top:inherit;
  bottom:-0.5rem;
  left:-1.6rem;
}
.l-course__heading.center::after{
  right:-1.6rem;
  left: inherit;
  top:-0.5rem;
  background:url(../img/about/course/heading-deco-r.svg) no-repeat center center/contain;
}

.l-course__lesson__txt-hosoku{
  display: grid;
  grid-template-columns: auto 1fr;
  gap:0.4rem;
}


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

  section.l-mainVisual.piano,section.l-mainVisual.rhythmic{
    padding:20rem 0;
  }


  .l-course__heading{
  padding:0 0 0 3rem;
  margin:0 0 4.8rem;
  
}

.l-course__heading.center{
  margin:0 auto 4.8rem;
}


.l-course__heading::before,.l-course__heading.center::after{
  width:1.4rem;
  height:1.6rem;
  top:1rem;
}

.l-course__heading.center::before{
  bottom:-0.5rem;
  left:-3.2rem;
}
.l-course__heading.center::after{
  right:-3.2rem;
  top:-0.5rem;
}

}

@media screen and (min-width: 1920px) {
  section.l-mainVisual.piano,section.l-mainVisual.rhythmic{
    padding:25rem 0;
  }
}

/* about
---------------------------------------------------------*/
.l-course__about{
  position: relative;
  padding:var(--sec-pd) 0 calc(var(--sec-pd) - 5em);
}

.l-course__about::before{
  content:"";
  display: block;
  width:24.35vw;
  height:41.02vw;
  background:url(../img/about/course/course-deco-sp.png) no-repeat center center/contain;
  position: absolute;
  right:1vw;
  top:-25vw;
  z-index:300;
}

.l-course__about-copy{
  font-size:1.6rem;
  line-height: 1.6;
  margin-bottom:var(--contents-sub-mgb);
}

.l-course__about__item {
margin-bottom:var(--contents-mgb);
}

.l-course__about__txt p{
  margin-bottom:0.8rem;
}

.l-course__about__txt p:last-child{
  margin-bottom:0;
}

.l-course__about__txt-copy{
  font-size:var(--lead-txt-size);
  margin-bottom:1.6rem !important;
	line-height:1.4;
}

.l-course__about__item:last-of-type{
  margin-bottom:0;
}

.l-course__about__image{
  margin-bottom:1.6rem;
}

.l-course__sub-heading{
  font-size:1.6rem;
  color:var(--accent-color-pl);
  margin-top:var(--contents-mgb);
  border-bottom:1px solid var(--border-color-lgy);
  padding-bottom:0.4rem;
  margin-bottom: var(--contents-sub-mgb);
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.l-course__voice__lists{
  display: flex;
  flex-direction: column;
  gap:4rem;
  margin-top:4rem;
}

.l-course__voice__item{
  border:1px solid var(--border-color-lgy);
  position: relative;
  padding: 3.4rem 2.4rem 2.4rem;
}

.l-course__voice__item::before{
  content:"";
  display: block;
  width:10rem;
  height:4rem;
  position: absolute;
  top:-2rem;
  z-index:10;
}

.l-course__voice__item:first-child::before{
  background:url(../img/about/course/voice-icon1.svg) no-repeat center center/contain;
  left:1rem;
}

.l-course__voice__item:nth-child(2)::before{
  background:url(../img/about/course/voice-icon2.svg) no-repeat center center/contain;
  right:1rem;
}

.l-course__voice__item:nth-child(3)::before{
  background:url(../img/about/course/voice-icon3.svg) no-repeat center center/contain;
  left:1rem;
}

.l-course__voice__txt{
  font-size:var(--desc-size-sub);
  line-height: 1.71;
  margin-bottom:1.2rem;
}

.l-course__voice__ttl{
  font-size:1.4rem;
  font-weight:bold;
}


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

.l-course__about{
  padding:var(--sec-pd) 0 calc(var(--sec-pd) - 10em);
}

.l-course__about::before{
  width:20.86vw;
  height:22.84vw;
  background:url(../img/about/course/course-deco-pc.png) no-repeat center center/contain;
  right:1vw;
  top:-16vw;
}


.l-course__about-copy{
  font-size:1.8rem;
  line-height: 2;
  /* margin-bottom:var(--contents-sub-mgb); */
}


  .l-course__about__item{
    display: flex;
    gap:6.44vw;
  }


  .l-course__about__image,.l-course__about__txt{
    width:calc((100% - 6.44vw) /2);
  }


  .l-course__about__item:nth-of-type(even){
    flex-direction: row-reverse;
  }

.l-course__about-copy{
    font-size:1.8rem;
    line-height: 1.7;
  }

.l-course__about__image{
  margin-bottom:0;
}

.l-course__sub-heading{
  font-size:1.8rem;
  padding-bottom:1rem;
  line-height: 1.5;
}

.l-course__voice__lists{
  display: flex;
  flex-direction: column;
  gap:5.6rem;
  margin-top:6.4rem;
}

.l-course__voice__item{
  width:90%;
  max-width:900px;
  padding: 4.8rem 4rem 3.2rem;
}

.l-course__voice__item::before{
  width:13rem;
  height:5rem;
  top:-2.5rem;
}

.l-course__voice__item:first-child::before{
  left:2.4rem;
}

.l-course__voice__item:nth-child(2)::before{
  right:2.4rem;
}

.l-course__voice__item:nth-child(3)::before{
  left:2.4rem;
}

.l-course__voice__item:nth-child(2){
  align-self: flex-end;
}

.l-course__voice__txt{
  line-height: 1.8;
  margin-bottom:1.6rem;
}

.l-course__voice__ttl{
  font-size:1.6em;
}


}

@media screen and (min-width: 1920px) {
.l-course__voice__item{
  max-width:1025px;
}
}

/* value
---------------------------------------------------------*/

.l-course__value{
  background:var(--bg-color-bg);
  position: relative;
}


.l-course__value__wrapper{
  width:100%;
  overflow: hidden;
  position: relative;
}


.l-course__value__wrapper::before{
  content:"";
  display: block;
  background: #fff;
  border-bottom-left-radius: 200% 20rem;
  border-bottom-right-radius: 200% 20rem;
  height: 5rem;
  margin-left: -8rem;
  margin-right: -8rem;
  padding-left: 8rem;
  padding-right: 8rem;
  position: absolute;
  right:0;
  left:0;
  z-index: 1;
}

.l-course__value .contents-inner{
  position: relative;
  z-index:2;
  margin-top:calc(var(--sec-pd) + 5rem);
}

.l-course__value__lists{
  padding-top:3rem;
  display: grid;
  gap:4.8rem;
}

.l-course__value__item{
  background:#fff;
  position: relative;
  padding:20px;
}

.l-course__value__item::before{
  content:"";
  display: block;
  border-radius: 50%;
  width:6rem;
  height:6rem;
  background:url(../img/about/course/value-icon1.svg) no-repeat center center/contain;
  position: absolute;
  margin:0 auto;
  right:0;
  left:0;
  top:-3rem;
}

.l-course__value__item:nth-child(2)::before{
  background:url(../img/about/course/value-icon2.svg) no-repeat center center/contain;
}

.l-course__value__item:nth-child(3)::before{
  background:url(../img/about/course/value-icon3.svg) no-repeat center center/contain;
}

.l-course__value__image{
  margin-bottom:1.6rem;
}

.l-course__value__copy{
  font-size:1.4rem;
  font-weight:bold;
  line-height: 1.71;
  margin-bottom:0.8rem;
}

.l-course__value__txt{
  font-size:var(--desc-size-sub);
  line-height: 1.71;
}

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

  section.l-course__value::before{
    width:10.83vw;
    height:14.34vw;
    right:2.75vw;
    top:-5rem;
    }

  .l-course__value__wrapper::before{
    border-bottom-left-radius: 500% 100rem;
    border-bottom-right-radius: 500% 100rem;
    height: 10em;
    margin-left: -5rem;
    margin-right: -5rem;
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .l-course__value .contents-inner{
    margin-top:calc(var(--sec-pd) + 10rem);
  }

.l-course__value__lists{
  padding-top:4rem;
  gap:7.2rem;
}

.l-course__value__item{
  padding:5.6rem 4.8rem 4rem;
  display: grid;
  grid-template-columns: 30% 1fr;
  gap:4rem;
}

.l-course__value__item.center{
  align-items: center;
}

.l-course__value__item::before{
  width:8rem;
  height:8rem;
  top:-4rem;
}


.l-course__value__image{
  margin-bottom:0;
}

.l-course__value__copy{
  font-size:1.6rem;
  line-height: 1.8;
  margin-bottom:1.6rem;
}



}

/* Voice
---------------------------------------------------------*/

.l-course__voice{
  position: relative;
}

.l-course__voice::before,.l-course__voice::after{
  content:"";
  display: block;
  position: absolute;
  z-index:100;
}

.l-course__voice.piano::before{
  width:min(13.33vw, 52px);
  height:min(36.15vw, 142px);
  top:-3rem;
  left:2vw;
  background:url(../img/about/course/piano_voice_image1.png) no-repeat center center/contain;
}

.l-course__voice.piano::after{
  width:min(37.17vw, 145px);
  height:min(43.33vw, 170px);
  bottom:-5rem;
  right:1vw;
  background:url(../img/about/course/piano_voice_image2-sp.png) no-repeat center center/contain;
}

.l-course__voice.rhythmic::before{
  width:min(51.53vw, 200px);
  height:min(35.12vw, 136px);
  top:-8rem;
  left:1vw;
  background:url(../img/about/course/rhythmic_voice_image1.png) no-repeat center center/contain;
}

.l-course__voice.rhythmic::after{
  width:min(33.33vw, 130px);
  height:min(47.17vw, 184px);
  bottom:-5rem;
  right:1vw;
  background:url(../img/about/course/rhythmic_voice_image2.png) no-repeat center center/contain;
}

.l-course__voice .l-course__voice__lists{
  margin-top:5.2rem;
}

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

.l-course__voice.piano::before{
  width:min(6.51vw, 90px);
  height:min(17.71vw, 242px);
  top:-4rem;
  left:2.48vw;
}

.l-course__voice.piano::after{
  width:min(17.34vw, 238px);
  height:min(27.01vw, 370px);
  bottom:-5rem;
  right:2.78vw;
  background:url(../img/about/course/piano_voice_image2.png) no-repeat center center/contain;
}

.l-course__voice.rhythmic::before{
  width:min(31.40vw, 386px);
  height:min(21.44vw, 263px);
  top:-12rem;
  left:2vw;
}

.l-course__voice.rhythmic::after{
  width:min(20.42vw, 258px);
  height:min(26.79vw, 367px);
  bottom:-5rem;
  right:2.92vw;
}

.l-course__voice .l-course__voice__lists{
  margin-top:7.3rem;
}

}

/* info
---------------------------------------------------------*/
section.l-course__lesson{
	padding-top:4rem;
}

.l-course__lesson__lists{
  width:90%;
  margin:2.4rem auto;
  display: grid;
  gap:1.2rem;
}
@media screen and (min-width: 768px) {
	
section.l-course__lesson{
	padding-top:0;
}
	
  .l-course__lesson__lists{
  width:100%;
  max-width:900px;
  margin:4rem auto;
  grid-template-columns: 1fr 1fr;
  gap:4rem 5.6rem;
}
}

@media screen and (min-width: 1920px) {
  .l-course__lesson__lists{
    max-width:1025px;
}
}