/* ベースの本体 */
#loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  transition: all 1s;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
#loading.loaded {
  opacity: 0;
  visibility: hidden;
}

/* 以下にローディングアニメーションCSSのコピペ https://dubdesign.net/download/html-css/htmlcss-loading8/*/

/* sample loader */
.loader008,
.loader008:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader008 {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(107, 182, 255, 0.2);
  border-right: 1.1em solid rgba(107, 182, 255, 0.2);
  border-bottom: 1.1em solid rgba(107, 182, 255, 0.2);
  border-left: 1.1em solid #6bb6ff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}















/*メニューをページ下部に固定*/
#sp-fixed-menu{
   position: fixed;
   width: 80%;
   bottom: 15px;
   font-size: 0;
   opacity: 0.9;
   z-index: 99;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   padding:1;
   margin:0;
   width:100%;
}

#sp-fixed-menu li{
   justify-content: center;
   align-items: center;
   width: 80%;
   padding:0;
   margin:0;
   font-size: 18px;
   border-right: 0px solid #fff;
}

/*左側メニューを緑色に*/
#sp-fixed-menu li:first-child{
   background: #38b435;
}

/*左側メニューをオレンジ色に*/
#sp-fixed-menu li:last-child{
   background: #f3a324;
border-radius:30px;
}

/*ボタンを調整*/
#sp-fixed-menu li a{
   color: #fff;
   text-align: center;
   display:block;
   width: 100%;
   padding:10px;
}







.site-title {
  position: absolute;
  left: -9999px;
}








.container_pianolesson {
  position: relative;
  width: 100%;
text-align : center
}
.image {
  position: absolute;
  width: 100%;
  opacity: 0;
  animation: change-img-anim 21s infinite;
}
.image:nth-of-type(1) {
  position: absolute;
  animation: change-img-anim-first 21s infinite;
  animation-delay: 0s;
}
.image:nth-of-type(2) {
  position: absolute;
  animation-delay: 3s;
}
.image:nth-of-type(3) {
  position: absolute;
  animation-delay: 6s;
}
.image:nth-of-type(4) {
  position: absolute;
  animation-delay: 9s;
}
.image:nth-of-type(5) {
  position: absolute;
  animation-delay: 12s;
}
.image:nth-of-type(6) {
  position: absolute;
  animation-delay: 15s;
}
.image:nth-of-type(7) {
  position: relative;
  animation-delay: 18s;
}
@keyframes change-img-anim-first {
  0%{ opacity: １;}
  30%{ opacity: 1;}
  36%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}
@keyframes change-img-anim {
  0%{ opacity: 0;}
  30%{ opacity: 1;}
  36%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}








.subjecth3 {
  font-weight: bold;
  font-size: 20px;
  padding: 0px 0px 0px 0px;
  margin-bottom: 0em;
margin-left: 0em;
  letter-spacing: 1px;
  color: #87CEFA;
}


.subjecth33 {
  font-weight: bold;
  font-size: 20px;
  padding: 0px 0px 0px 0px;
  margin-bottom: 0em;
margin-left: 0em;
  letter-spacing: 1px;
  color: #FA897E;
}








span.del {
  text-decoration-line: line-through;
  text-decoration-style:double;
  text-decoration-color: red;
}