ul {
  padding: 0;
  margin: 0;
}

ul li {
  list-style-type: none;
}

#header {
  min-width: 100%;
}

.container-center {
  min-width: 100%;
}

#main {
  width: 100%;
  min-width: auto;
  /* background-color: #d9ff1a; */
  margin-top: 70px;
}

@media screen and (max-width: 767px) {
  #main {
    width: 98%;
  }
}

.section-block {
  /* margin: 2% 3%;
  background: white;
  border-radius: 10px;
  padding: 2% 4%; */
}

@media screen and (max-width: 767px) {
  .section-block,
  section:first-of-type {
    margin-top: 20px
  }
}

@media screen and (max-width: 680px) {
  section:first-of-type {
    margin-top: 20px
  }
}

.section-block.online-lesson img{
}

.section-join {
  margin: 0 7%;
}

.class-header {
  margin: 0;
  padding: 0;
  font-size: 24px;
  color: #fff;
  background-color: #6bc9c4;
  padding: 1% 2%;
}

@media screen and (max-width: 767px) {
  .class-header {
    padding: 1% 4%;
  }
}

.class-header:before {
  content: "●";
  color: #ffc7c3;
  font-size: 1.2em;
}

.class-header span.subtitle {
  font-size: 18px;
}

#main p {
  margin-bottom: 0;
}

#main .main-sentence {
  font-size: 16px;
}

#main .attention {
  margin-top: 80px;
}

#main .attention p{
  margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
  #main .attention {
    margin-top: 10px;
  }
  #main .attention p{
    margin-bottom: 10px;
  }
}


#main p.comment {
  margin-top: 0;
}

#main p.top-small-margin {
  margin-top: 20px;
}

#main .attention ul{
  list-style-position: inside;
}

#main .attention ul li{
  list-style-type: disc;
}

#main .merit ul{
  list-style-position: inside;
}

#main .merit ul li{
  list-style-type: square;
  font-size: 14px;
}

#main .recommend h3 {
  font-weight: normal;
  font-size: 16px;
}

#main .recommend ul.items {
  display: flex;
  flex-wrap: wrap;
}

#main .recommend ul.items li {
  display: block;
  width: 190px;
  height: 60px;
  margin-right: 8px;
  margin-bottom: 8px;
}

#main .recommend ul.items li a {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
  text-align: center;

  justify-content: center;
  align-items: center;
}

#main .recommend ul.items li.kenhamo a {
  background-color: #00948F;
}

#main .recommend ul.items li.kenhamo a:hover {
  background-color: #06837f;
}

#main .recommend ul.items li.guitar a {
  background-color: #F47922;
}

#main .recommend ul.items li.guitar a:hover {
  background-color: #d66b1f;
}

#main .recommend ul.items li.uta a {
    background-color: #29abe2;
}

#main .recommend ul.items li.uta a:hover {
  background-color: #2992e2;
}

#main .recommend ul.items li.chorus a {
    background-color: #689dd5;
}

#main .recommend ul.items li.chorus a:hover {
  background-color: #2b7ed5;
}

#main .recommend ul.items li.soprano a {
  background-color: #e95189;
}

#main .recommend ul.items li.soprano a:hover {
  background-color: #d84b7f;
}

#main .recommend ul.items li.alto a {
  background-color: #a8cc45;
}

#main .recommend ul.items li.alto a:hover {
  background-color: #93b23d;
}

#main .recommend ul.items li.koto a {
  background-color: #8961a9;
}

#main .recommend ul.items li.koto a:hover {
  background-color: #7534a9;
}

#main .idea dl{
  list-style-position: inside;
}

#main .idea dl dd:before{
  content: '・';
}

#main .btn-app{
  display: flex;
  justify-content: flex-end;
}

#main .btn-app a{
  width: 232px;
  height: 60px;
  background-color: #ff7d01;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 8px;
}

#main .btn-inquiry{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

#main .btn-inquiry a{
  width: 382px;
  height: 83px;
  background-color: #70ad47;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 8px;
}

.vocaloid_link {
  margin-top: 15px;
}

#main p.small {
  font-size: 12px;
}

#main dl dt {
  margin-top: 8px;
}

#main dl dd {
  padding-left: 15px;
}

#main dl dd.red {
  color: #ff0000;
}

.main-visual{
  width: 100%;
  /* margin-top: 69px; */
}

.main-visual-sp{
  display: none;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}


@media handheld, only screen and (max-width:55em) {
  .main-visual{
    margin-top: 0;
    display: none;
  }
  .main-visual-sp{
    display: block;
  }
}

.main-visual img {
  width: 100%;
  height: auto;
}

img {
  display: inline;
}

.sub-title {
  display: block;
  background-color: #ade09a;
  padding: 8px 20px;
  margin: 0 15px;
  font-size: 20px;
}

.check_result {
  display: none;
}

#pagetop-wrap .container-center{
  min-width: auto;
}

#pagetop-wrap .container-center #pagetop{
  width: auto;
}

footer {
  min-width: auto;
}


@media (max-width: 767px) {
  .header ul {
    text-align: left;
    margin-top: 0px;
  }
}

@media screen and (max-width: 767px){
  .sp-nav-product-content p,
  .sp-nav-product-table p,
  .sp-nav-product-table-row p {
    margin: 0;
  }

  .nav hr {
    margin: 0;
  }

  .nav li > a {
    padding: 0px;
  }

  .nav li > a:hover {
    background-color: transparent;
  }

  .nav li img {
    display: inline;
  }
  
  .nav li.noborder {
    text-align: center;
  }

}

/*↓合唱コンテンツ用*/
#main .merit-chorus {
font-size: 20px;
font-weight: bold;
margin: 0;
padding: 0;
}

#main li.attention-txt p {
 font-size: 16px;
}

.merit-chorus-attention{
 font-weight:bold;
 border-bottom: solid 1px;
}


/*↓うたコンテンツ用*/
#main img.uta-link{
  margin: 0 0 45px 0;
}

#main p.adinfo{
  margin-top: 30px;
}

/*合唱とオンライン授業の間とオンライン授業とリコーダーの間の隙間調整用*/
.class-header-space{
 margin: 20px 0 0 0;
}

/*うた授業と合唱の間の隙間調整用*/
.chorus-header-space{
 margin: 30px 0 0 0;
}



/*教材無料公開の案内用*/

#notice{
  width: 100%;
  min-width: auto;
  background-color: #6bc9c4;
  margin: 2% 0 4% 0;
 padding: 1% 2%;
}

#notice .check a.uta-start a.gift-digital-link a:hover{
     background-color: transparent;
}

.notice-header {
  margin: 2%;
  padding: 1%;
  font-size: 24px;
  color: #fff;
}

.notice-block {
  margin: 2% 3%;
  padding: 1% 2%;
  background: white;
  border-radius: 10px;   
}

.summary-block {
  margin: 2% 3%;
  padding: 1% 2%;
  background: #6bc9c4;
}

.summary-block dl {
  color: white;
}


.check {
  margin: 25% 0 0;
  padding: 0;
}

.notice-index {
  margin: 4% 0 2%;
  padding: 6% 0 0;
  font-size: 24px;
  color: #fff;
}


.uta-txt p{
   margin: 4% 0 10%;   
}
.uta-txt ul{
   margin: 20% 0 0; 
}

@media screen and (max-width: 767px) {

.notice-emphasis-big{
 color: #ff0000;    
 text-align: center;
 font-size: 24px;
 font-weight:  bold;
 line-height: 24px;
 }

.notice-emphasis-small{
 color: #ff0000;    
 text-align: center;
 font-weight:  bold;
 font-size: 18px;
 }
    
 .uta-txt p{
   margin: 4% 0 5%;   
 }
 .uta-txt ul{
   margin: 5% 0 3%;   
}    
    
.check {
  margin: 5% 0 0;
  padding: 0;
}    

}