body{
  display: flex;
  flex-direction: column; /* 子要素を縦方向に並べる */
  align-items: center; /* 水平方向の中央に配置（必要に応じて） */
}

#start{
  text-align: center;
  font-size: 50px;
  font-weight: bold;

}

.flatroom-container {
  position:relative;
  margin-top: 130px;
  width: 800px; /* コンテナの幅を調整 */
  height:350px;
  max-width: 800px; /* 最大幅を設定 */
  z-index: -1;
}

.flatdoor {
  position: absolute;
  left: 58%;
  transform: translate(-50%, 0%);
  width: 800px; /* コンテナの幅を調整 */
  height:250px;
  max-width: 800px; /* 最大幅を設定 */
  z-index: -1;
}


#image-door{
  position: absolute;
  bottom: -5px;
  right: 5%;
}

#image-room{
  position:absolute;
  bottom: 0px;
  left: 30%;
}

#image1 {
  position: absolute;
  bottom: 30px;
  right: 15%; /* 初期位置を画面外に設定 */
  opacity: 0; /* 最初は透明にする */
  animation: slideInAndBounce1 5s ease-in-out forwards; /* スライドインと跳ねるアニメーションを適用 */
  animation-iteration-count: 1;
  animation-delay: 0s;
  animation-duration: 4s;
  animation-timing-function:linear;
}

#image2 {
  position: absolute;
  right: 15%; /* 初期位置を画面外に設定 */
  opacity: 0; /* 最初は透明にする */
  animation: slideInAndBounce2 5s ease-in-out forwards; /* スライドインと跳ねるアニメーションを適用 */
  animation-iteration-count: 1;
  animation-delay: 1s;
  animation-duration: 5s;
  animation-timing-function:linear;
}

#image3 {
  position: absolute;
  bottom: 10%;
  right: 15%; /* 初期位置を画面外に設定 */
  opacity: 0; /* 最初は透明にする */
  animation: slideInAndBounce3 5s ease-in-out forwards; /* スライドインと跳ねるアニメーションを適用 */
  animation-iteration-count: 1;
  animation-delay: 3s;
  animation-duration: 3s;
}

#image4 {  
  position: absolute;
  right: 15%; /* 初期位置を画面外に設定 */
  bottom: 30px;
  opacity: 0; /* 最初は透明にする */
  animation: slideInAndBounce4 5s ease-in-out forwards; /* スライドインと跳ねるアニメーションを適用 */
  animation-iteration-count: 1;
  animation-delay: 5s;
  animation-duration: 3s;
}




@keyframes slideInAndBounce1 {
  0% {
    transform: translateX(0%) translateY(0%) rotate(0deg)scale(0.3);
  }
  10% {
    transform: translateX(-21%) translateY(-3.33%) rotate(5deg)scale(0.5);
  }
  20% {
    transform: translateX(-42%) rotate(0deg);
  }
  30% {
    transform: translateX(-63%) translateY(-3.33%)rotate(5deg);
  }
  40% {
    transform: translateX(-84%)  rotate(0deg);
  }
  50% {
    transform: translateX(-105%) translateY(-3.33%)rotate(5deg);
  }
  60% {
    transform: translateX(-126%) rotate(0deg);
  }
  70% {
    transform: translateX(-147%) translateY(-3.33%) rotate(-5deg);
  }
  80% {
    transform: translateX(-168%) rotate(0deg);
  }
  90% {
    transform: translateX(-189%) translateY(-3.33%)rotate(5deg);
  }

  92% {
    transform: translateX(-200%) translateY(0%)rotate(4deg);
  }


  95% {
    transform: translateX(-210%) translateY(-3.33%)rotate(3deg);
  }

  97% {
    transform: translateX(-220%) translateY(-0%)rotate(2deg);
  }


  100% {
    /* bottom: 0%; */
    opacity: 1;
    transform: translateX(-240%) rotate(0deg);
  }
}



@keyframes slideInAndBounce2 {
  
  0% {
    transform: translateX(0%) translateY(0%)rotate(5deg)scale(0.3);
  }
  10% {
    transform: translateX(-21%) translateY(-5%)rotate(-20deg)scale(0.5);
  }
  20% {
    transform: translateX(-42%)rotate(5deg) ;
  }
  30% {
    transform: translateX(-63%) translateY(-5%)rotate(-20deg);
  }
  40% {
    transform: translateX(-84%) rotate(5deg);
  }
  50% {
    transform: translateX(-105%) translateY(-5%)rotate(-20deg);
  }
  60% {
    transform: translateX(-126%) rotate(5deg);
  }
  70% {
    transform: translateX(-147%) translateY(-5%)rotate(-20deg);
  }
  80% {
    transform: translateX(-168%) rotate(5deg);
  }
  90% {
    transform: translateX(-189%) translateY(-5%)rotate(-20deg);
  }
  100% {
    /* bottom:0%; */
    opacity: 1; /* 表示 */
    transform: translateX(-210%);
  }
}

@keyframes slideInAndBounce3 {
  
  0%{
    transform: translateX(0%)translateY(0%)scale(0.3);
  }
  20% {
    transform: translateX(-50%)translateY(-50%)scale(0.5); /* ジャンプ */
  }
  40% {
    transform: translateX(-100%)translateY(0%); /* 少しジャンプ */
  }
  60% {
    transform: translateX(-150%)translateY(-50%); /* ジャンプ */
  }
  80% {
    transform: translateX(-200%)translateY(0%); /* 少しジャンプ */
  }
  90% {
    transform: translateX(-225%)translateY(-50%); 
  }
  100% {
    /* bottom:0%; */
    opacity: 1; /* 表示 */
    transform: translateX(-250%);
  }
}

@keyframes slideInAndBounce4 {
  
  0%{
    transform: translateX(-14%)translateY(0%)scale(0.5);
  }
  20% {
    transform: translateX(-28%)translateY(-5%)rotate(5deg); /* ジャンプ */
  }
  40% {
    transform: translateX(-42%)translateY(0%)rotate(-5deg); /* 少しジャンプ */
  }
  60% {
    transform: translateX(-56%)translateY(-5%)rotate(5deg); /* ジャンプ */
  }
  80% {
    transform: translateX(-70%)translateY(0%)rotate(-5deg); /* 少しジャンプ */
  }
  100% {
    /*  */
    opacity: 1; /* 表示 */
    transform: translateX(-70%);
  }
} 


p{padding-top: 5px;
  text-indent: 1em;
  margin-left: 20px; 
  margin-right: 20px;
}

h1{
  text-align: center;
  font-family: Mochiy Pop One,serif;
  font-weight: normal;
  font-size: 40px;}

h1 span{
  font-size: 65px;
}

h2,h3,h4,h5{
  font-size: 32px;
  font-family: "M PLUS Rounded 1c", serif;
  font-weight: 900;
  font-style: normal;
  text-indent: 1em;}

h2,h5{height: 60px;}

h2{
    background-color:rgb(248, 204, 213) ;
}

h3{
  background-color:rgb(244, 180, 148) ;
}

h4{
  background-color:rgb(242, 242, 155) ;
}

h5{
  background-color:rgb(157, 235, 229) ;
}


.place,.teacher,.parents,.discussion{
  padding-bottom: 30px;
}

.UD {
  display: flex;
  justify-content: space-around;
  padding-top: 20px;
 }

/* #study{
  width: 10%;
  object-fit: contain;
}

#book{
  width: 8%;
  object-fit: contain;
}

#balance{
  width: 10%;
  object-fit: contain;
}

#art{
  width: 18%;
  object-fit: contain;
}
     */

.caution {
	font-size: 0.5em;
	vertical-align: top;
}

#caution2 {
	font-size: 20px;
  padding-left: 3%;
  padding-right: 3%;
}

.break-point1,.break-point2 {
  display: none; /* 通常時は改行しない */
}

/* 通常時のスタイル（改行なし） */
.change1 br,.change2 br {
  display: none; /* 通常時は <br> タグを非表示にする */
}

@media (max-width: 900px){
  .flatroom-container{
    scale: 90%;
  }

  h5{
    font-size: 30px;
  }

  h1{
    font-size: 35px;
  }

  h1 span{
    font-size: 55px;
  }
}

@media (max-width: 820px){
  .flatroom-container{
    scale: 90%;
  }

  h5{
    font-size: 28px;
  }
}


@media (max-width: 785px){
  .flatroom-container{
    scale: 80%;
    margin-top: 60px;
    margin-bottom: -250px;
    height: 600px;
    }
 
  #image-room{
    position:absolute;
    bottom: 260px;
    left: 30%;
    }

  h1{
    font-size: 26px;
  }

  h1 span{
    font-size: 42px;
  }



  h2,h3,h4,h5{
    font-size: 26px;
    text-indent: 1rem;
  }

  #caution2{
    font-size: 10px;
  }

  p{
    font-size: 1rem;
  }

  /* #study{
    width: 20%;
    object-fit: contain;
  }
  
  #book{
    width: 15%;
    object-fit: contain;
  }
  
  #balance{
    width: 20%;
    object-fit: contain;
  }
  
  #art{
    width: 25%;
    object-fit: contain;
  } */

}

@media (max-width: 705px) {
  .flatroom-container{
    scale:65%;
    margin-top: 20px;
  }

  h1{font-size: 20px;}

  h1 span{
    font-size: 32px;  
  }
  h5{
    height: 100px;
  }

  .break-point2 {
    display: inline; /* 改行タグを表示 */}

  .change2 br + span { /* brタグの直後のspan要素にスタイルを適用 */
    display: block; /* span要素をブロック要素にする */
    position:absolute;
    right: 35px; 
  }
}




@media (max-width: 580px) {
  .flatroom-container{
    scale: 50%;
    margin-top: -40px;
  }
  h2{
    height: 100px;
  }
  
  .break-point1 {
    display: inline; /* 改行タグを表示 */}

  .change1 br + span { /* brタグの直後のspan要素にスタイルを適用 */
    display: block; /* span要素をブロック要素にする */
    position:absolute;
    right: 35px; 
  }
}



@media (max-width: 480px) {

  h2, h3,h5{font-size: 24px;}

  
  
  h1{font-size: 18px;}

  h1 span{font-size: 30px;}

} 

@media (max-width: 440px) {
  h1{
    font-size: 16px;
  }

  h1 span{
    font-size: 25px;
  }

  h2,h5{
    height: 80px;
  }

  h2,h3{
    font-size: 20px;
  }

  h4{
    font-size: 20px;}

  h5{
    font-size: 20px;
  }

  .flatroom-container{
    scale: 43%;
    margin-top: -60px;
    margin-bottom: -250px;
  }
 } 


@media (max-width: 390px) {
  .flatroom-container{
    scale: 38%;
    margin-top: -85px;
    margin-bottom: -275px;
  }

  h2,h3,h4,h5{font-size: 18px;}
  
  h2,h5{
    height: 70px;

  }

}

@media (max-width: 350px) {
  .flatroom-container{
    scale: 30%;
    margin-top: -110px;
    margin-bottom: -275px;
  }
  h1 span{font-size :20px;}

 h1,p{
  font-size: 12px;
 }

 h2,h3,h4,h5{
  font-size: 16px;
 }
h2,h5{
  height: 65px;
}

}