@media(max-width: 1280px){
p{
    font-size: 1.5vw;
}
.balloon p {
    margin: 0;
    padding: 0;
    /* font-size: 2vw; */
    /* font-size: 1.2rem; */
}
h2{
    text-align: center;
    padding: 10px;
    color: #fdfdfd;
    font-size: 3.6vw;
}
h3{
    text-align: center;
    padding: 10px;
    color: #fdfdfd;
    font-size: 2.4vw;
}
h4{
    font-size: 1.65vw;
}
.box{
    padding: 15px;
}
.container{
        width: 80vw;
    }
.course-box .box,
.for-working-box .box {
  align-items: flex-start; 
}
.course-box img,
.for-working-box img,
.box-contents img {
  height: auto;
  max-width: 100%;
  flex: 0 0 auto;
  display: block;
}
#girl{
    width: 18%;
    bottom: 5%;
    left: 1.5%;
    z-index: 3;
}
#boy{
    width: 23%;
    bottom: 5%;
    right: 1.5%;
    z-index: 3;
}
#left_asset{
    width: clamp(160px,18vw,220px);
    left: 0%;
    z-index: 2;
}
#right_asset{
    width: clamp(160px,18vw,220px);
    right: 0%;
    z-index: 2;
}
#main-logo img{
    width: clamp(40vw,60%,600px);
}    
}


@media (max-width: 430px){
p{
    font-size: 2.4vw;
}
h2{
    text-align: center;
    padding: 10px;
    color: #fdfdfd;
    font-size: 4.4vw;
}
h3{
    text-align: center;
    padding: 10px;
    color: #fdfdfd;
    font-size: 3.6vw;
}
h4{
    font-size: 3vw;
}
#m-vis1{
    object-position: bottom 40% right 35%;
}
#m-vis2{
    object-position: bottom 10% left 40%;
}
#m-vis3{
    object-position: bottom 60% right 30%;
}
#left_asset,#right_asset{
    display: none;
}
#girl{
    width: 23%;
    bottom: 35%;
    left: 1.5%;
    z-index: 3;
    rotate: -15deg;
}
#boy{
    width: 28%;
    bottom: 65%;
    right: 1.5%;
    z-index: 3;
    rotate: 15deg;
}
#main-logo img{
    bottom: 40px;
    width: 100vw;
}

.course-box .box,.for-working-box .box {
    flex-direction: column;
}

.txt-box {
    width: 100%;
}
.media{
    width: 100%;
}
.box.rev-contents {
    flex-direction: column-reverse;
}

.school-info th{
    width: 30%;
    padding: 10px;
}
.school-info td{
    padding: 10px;
}
#pagetop {
    right: 10px;
    bottom: 10px;
}

#pagetop img {
    width: 40px;
}
.balloon{
    background: #eed5ff;
    border-radius: 45px;
}

img.circle-img{
    width: 75%;
    margin-top: 10px;
    display: block;
    float: right;
}

#hanabi,#wind_chime,#morning-glory,#Straw_Hat,#sunflour,#watermelon,#shaved-ice,#ramune-soda,#water-balloon,#corn{
    display: block;
    width: 20%;
    position: absolute;
    z-index: 3;
}

#hanabi{
    top: -4%;
    left: -12.5%;
}
#wind_chime{
    top: 65%;
    right: -13%;
    rotate: 15deg;
}
#morning-glory{
    top: -4%;
    right: -12%;
    rotate: 15deg;
}
#Straw_Hat{
    top: 92%;
    left: -12.5%;
    rotate: -15deg;
}
#sunflour{
    top: -30%;
    right: -11%;
}
#watermelon{
    top: 60%;
    left: -13%;
    rotate: 15deg;
}
#shaved-ice{
    top: -4%;
    left: -10%;
}
#ramune-soda{
    top: 90%;
    right: -10%;
    rotate: 15deg;
}
#water-balloon{
    top: -3%;
    right: -10%;
    rotate: -7deg;
}
#corn{
    top: 95.5%;
    left: -12%;
    rotate: -21deg;
}
}

@media (max-width: 1280px) and (max-height: 768px) {
#left_asset,#right_asset{
    display: none;
}
#girl{
    width: clamp(15vw,10%,20vw);
}
#boy{
    width: clamp(15vw,18%,22vw);
}

}
@media (max-height: 430px){
#main-logo img{
    width: auto;
    height: 40%;
}
.nav-overlay-content {
  transform: translate(-50%, -25%);
}
#m-vis1{
    object-position: bottom 40%;
    transform: scale(1.2);
}
#m-vis3{
    object-position: top 0 right 30%;
    transform: scale(1.25);
}
}