@charset "utf-8";

.col1{background-color: #ffe8e8;}
.col2{background-color: #d0e9fb;}
.col3{background-color: #ffdcb5;}
.col4{background-color: #d8f8ee;}
.col5{background-color: #ddd7ee;}
.col6{background-color: #beddeb;}


#class li:nth-child(1){ border:solid 4px #ff5252; }
#class li:nth-child(1) dt{ color: #ff5252; }

#class li:nth-child(2){ border:solid 4px #4facf1; }
#class li:nth-child(2) dt{ color: #4facf1; }

#class li:nth-child(3){ border:solid 4px #ff8400; }
#class li:nth-child(3) dt{ color: #ff8400; }

#class li:nth-child(4){ border:solid 4px #1a936f; }
#class li:nth-child(4) dt{ color: #1a936f; }

#class li:nth-child(5){ border:solid 4px #684ab3; }
#class li:nth-child(5) dt{ color: #684ab3; }

#class li:nth-child(6){ border:solid 4px #3487ab; }
#class li:nth-child(6) dt{ color: #3487ab; }



@media print,screen and (min-width : 501px) {

#pagetitle{
  background: url(images/titlebg.jpg) center center no-repeat;
  background-size: cover;
}


/** クラスのご案内
---------------------------------------- */
#class{
  margin-top: 60px;
}
#class a{
  text-decoration: underline;
  color: #1192d4;
}

#class .fb{
  margin-top: 40px;
  padding: 20px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
  border-radius:10px;
}
#j2class{
  margin-top: 30px;
}

#class .fb-right{
  width: 360px;
}
#class .fb-left{
  flex: 1;
  margin-right: 30px;
}
#class dt{
  font-size:22px;font-size:2.2rem;
  font-family:"MPLUS1p-5";
  border-bottom:solid 1px #c8c8c8;
}
#class dt small{
  font-size:16px;font-size:1.6rem;
  margin-left: 20px;
}
#class dd{
  margin-top: 20px;
  padding: 0 20px;
  line-height: 1.4;
}
#class dd p{
  margin-top: 10px;
}
#class li dt{
  padding-left: 10px;
}



/** 月謝・料金
---------------------------------------- */

#price{
  margin-top: 60px;
}
#price table{
  margin-top: 40px;
  width: 100%;
  border:solid 1px #8c8c8c;
}
#price th{
  background-color: #f3f3f3;
}
#price th,
#price td{
  border:solid 1px #8c8c8c;
  padding: 10px;
  vertical-align: middle;
}
#price td:nth-child(1),
#price td:nth-child(2){
  text-align: center;
}


/** 練習日
---------------------------------------- */

#practice{
  margin-top: 60px;
}
#practice #practice1{
  margin-top: 40px;
}
#practice ul{
  margin-top: 40px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
}
#practice ul li{
  border-top:solid 1px #8c8c8c;
  border-right:solid 1px #8c8c8c;
  border-bottom:solid 1px #8c8c8c;
  padding: 10px;
  text-align: center;
}
#practice ul li:first-child{
  border-left:solid 1px #8c8c8c;
}
#practice ul li .rinji{
  font-size:12px;font-size:1.2rem;
  display: block;
}
#practice ul li .week{
  text-align: center;
  font-family:"NotoSansJP-5";
}

#practice ul li dl{
  border:solid 1px #c8c8c8;
  margin-top: 10px;
  padding: 6px;
  border-radius:5px;
}
#practice ul li:nth-child(1),
#practice ul li:nth-child(2),
#practice ul li:nth-child(3),
#practice ul li:nth-child(4),
#practice ul li:nth-child(5){
  width: 170px;
}
#practice ul li:nth-child(6){
  flex: 1;
}
#practice ul li dt{
  font-family:"NotoSansJP-5";
}
#practice ul li dd{
  font-size:12px;font-size:1.2rem;
}
#practice ul li div{
  border:solid 1px #c8c8c8;
  margin-top: 10px;
  padding: 6px;
  border-radius:5px;
}
#practice ul li dd p{
  border:solid 1px #c8c8c8;
  margin-top: 10px;
  padding: 10px;
  border-radius:5px;
}
#kojinsanka{
  border:solid 1px #8c8c8c;
  margin-top: 10px;
  padding: 10px;
}
#kojinsanka p{
  border:solid 1px #c8c8c8;
  text-align: center;
  background-color: #c8dffb;
  border-radius:5px;
  padding: 10px;
}

#sche{
  margin-top: 40px;
  text-align: center;
}
#sche a{
  display: inline-block;
  color: #fff;
  padding: 10px 30px;
  border-radius:8px;
  margin: 0 10px;
  font-family:"NotoSansJP-4";
}
#sche .bl{
  background-color: #1192d4;
}
#sche .or{
  background-color: #f35925;
}



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

#pagetitle{
  background: url(images/titlebgsp.jpg) center center no-repeat;
  background-size: cover;
}

/** クラスのご案内
---------------------------------------- */
#class{
  margin-top: 40px;
}

#class .fb{
  margin-top: 20px;
  padding: 10px;
  border-radius:10px;
}
#j2class{
  margin-top: 30px;
}

#class .fb-right{
  margin-top: 20px;
}
#class dt{
  font-size:20px;font-size:2.0rem;
  font-family:"MPLUS1p-5";
  border-bottom:solid 1px #c8c8c8;
}
#class dt small{
  font-size:16px;font-size:1.6rem;
  display: block;
}
#class dd{
  margin-top: 10px;
  padding: 0 10px;
  line-height: 1.4;
}
#class dd p{
  margin-top: 10px;
}
#class li dt{
  padding-left: 10px;
}



/** 月謝・料金
---------------------------------------- */

#price{
  margin-top: 40px;
}
#price table{
  margin-top: 20px;
  width: 100%;
  border:solid 1px #8c8c8c;
}
#price th{
  background-color: #f3f3f3;
}
#price th,
#price td{
  border:solid 1px #8c8c8c;
  padding: 10px;
  vertical-align: middle;
}
#price td:nth-child(1),
#price td:nth-child(2){
  text-align: center;
}


/** 練習日
---------------------------------------- */

#practice{
  margin-top: 40px;
}
#practice #practice1{
  margin-top: 20px;
}
#practice ul li{
  border:solid 1px #8c8c8c;
  padding: 10px;
  text-align: center;
  margin-top: 20px;
}

#practice ul li .week{
  text-align: center;
  font-family:"NotoSansJP-5";
  font-size:18px;font-size:1.8rem;
}
#practice ul li dl{
  border:solid 1px #c8c8c8;
  margin-top: 10px;
  padding: 10px;
  border-radius:5px;
}
#practice ul li dt{
  font-family:"NotoSansJP-5";
  font-size:18px;font-size:1.8rem;
}
#practice ul li dd{
  font-size:15px;font-size:1.5rem;
}
#practice ul li div{
  border:solid 1px #c8c8c8;
  margin-top: 10px;
  padding: 10px;
  border-radius:5px;
}
#practice ul li dd p{
  border:solid 1px #c8c8c8;
  margin-top: 10px;
  padding: 10px;
  border-radius:5px;
}

#sche{
  margin-top: 40px;
  text-align: center;
}
#sche a{
  display: inline-block;
  color: #fff;
  padding: 10px 0px;
  border-radius:8px;
  font-family:"NotoSansJP-4";
  width: 80%;
  margin-bottom: 10px;
}
#sche .bl{
  background-color: #1192d4;
}
#sche .or{
  background-color: #f35925;
}

}