:root {
  --blue: #69C1EB;
  --blue2: #65A2D8;
  --bg: linear-gradient(to bottom, #69C1EB 0%, #69C1EB 90%, #116A9F 95%, #116A9F 100%);
  --white: #FFFFFF;
  --white2: #EEEEEE;
  --white_alpha: rgba(255,255,255,0.2);
  --yellow: #FBB415;
  --yellow_alpha: rgba(250,180,20,0.75);
  --screenx: 75%;
  --spotColor1A: rgba(165,90,165,0);
  --spotColor1B: rgba(165,90,165,1);
  --menuColor1A: rgba(250,180,20,0);
  --menuColor1B: rgba(250,180,20,0.75);
  --blue_alpha: rgba(105, 193, 235, 0.1);
  --blue_alpha2: rgba(12, 87, 145, 0.75);
}

*,
*::before,
*::after{
    box-sizing: border-box;
}

/* ============================================ */

body{
	background : var(--bg);
    margin: 0px;
    padding: 0px;
    font-family: 'Pridi', serif;
}

/* ============================================ */

.wrapper{
    position: relative;
    /* background: url("/site_assets/images/modal_sky01.png") no-repeat top center, url("/site_assets/images/modal_bg01.svg") no-repeat bottom center; */
    width: 100%;
    /* padding-bottom: 20rem; */
    overflow-x: hidden;
}

/* ============================================ */

.content{
    width: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* ============================================ */

#topMenu{
    margin-top: 1rem;
    margin-bottom: 1rem;
    height: 5rem;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    /* flex-direction: column; */
    /* justify-content: center; */
    /* background-color: rgb(255,255,255, 0.5); */
    /* text-align: center; */
    z-index: 100;
}

#topMenu .desktop{
    /* position: absolute; */
    /* top: 0px;
    left: 0px;
    width: 100vw;
    display: block; */

    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 5rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
}

#topMenu .desktop div:nth-child(1){
    width: 33%;
    text-align: left;
    align-items: center;
}

#topMenu .desktop div:nth-child(2){
    width: 33%;
    text-align: center;
    align-items: center;
}

#topMenu .desktop div:nth-child(3){
    width: 33%;
    text-align: right;
    align-items: center;
}

#topMenu .desktop div:nth-child(3) .menu_bar{
    display: none;
    width: 2.5rem;
    height: 2.5rem;
    transform: translate(0, 50%);
    cursor: pointer;
}

#kgm_logo{
    position: absolute;
    /* top:1rem; */
    left:1rem;
    height: 5rem;
    width: auto;
}

/* ============================================ */

#topMenu .mobile{
    display: none;
    /*width: 95vw;
    height: 3rem; */
    /* padding: 5px; */
    /* margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center; */
    /* background-color:  */
    /* backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px); */
}

/* #kgm_logo{
    position: absolute;
    top:2rem;
    left:4rem;
    width: 10rem;
    height: auto;
}

#kgm_logo_bird{
    height: 2rem;
}

#kgm_logo_text{
    height: 2rem;
}

#hamburger, #menu_bullet{
} */

.clear {
    clear: both;
}

/* ============================================ */

.spot{
    height: 4rem;
    width: 4rem;
    background-color: #A55AA5;
    border: 5px solid;
    border-radius: 50%;
    border-color: white;
    display: flex;
    justify-content: center;
    cursor: pointer;
    animation-name: spot_anime1;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;

    display: none;
}

.spot img{
    align-self: center;
    width: 2rem;
    height: 2rem;
}

/* ============================================ */

.menu_bullet{
    display:flex;
    flex-direction:row;
    position:absolute;
    width:10rem;
    height:2rem;
    /* background-color: var(--yellow_alpha); */
    justify-content:flex-start;
    border-radius:1rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    -moz-backdrop-filter: blur(4px);
    cursor: pointer;

    animation-name: menu_anime1;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.menu_bullet img{
    margin-left:0px;
    width:2.5rem;
    height:2.5rem;
    align-self:center;
}

.menu_bullet span{
    color: var(--white);
    margin-left:10px;
    align-self:center;
    text-shadow: 1px 1px #333333;
}

/* ============================================ */

.arrow_down{
    position: absolute;
    top:80vh;
    width: 3rem;
    height: 3rem;
    left: 50%;
    transform: translate(-50%, -50%);

    animation-name: arrow_anime1;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* ==============================================
    keyframes
============================================== */

@keyframes spot_anime1 {
  from {background-color: var(--spotColor1A);}
  to {background-color: var(--spotColor1B);}
}

@keyframes menu_anime1 {
  from {background-color: var(--white_alpha);}
  to {background-color: var(--blue_alpha2);}
}

@keyframes arrow_anime1 {
  from {transform: translate(-50%, 0px);}
  to {transform: translate(-50%, 10px);}
}

/* ============================================ */

#homeBody{
    position: relative;
    /* border-style: solid;
    border-width: 2px;
    border-color: red; */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 200rem;
    /* overflow-x: hidden; */
    /* overflow-y: visible !important; */
}

#footer{
    display: flex;
    flex-direction: column;
    width: 100%;
    /* height: 15vh; */
    position: relative;
    background-color : var(--yellow);
    justify-content: center;
    align-items: center;
}

#footer .social{
    /* width: 100%; */
    margin-top: 1rem;
    margin-bottom: -1rem;
    text-align:center;
}

#footer .copyright{
    /* width: 100%; */
    text-align:center;
    font-size: 1rem;
    color: white;
}

.social_icon{
    position: relative;
    width: 2rem;
    height: auto;
    /* align-self: center; */
    /* left: 1rem;
    bottom: 1rem; */
}


/* Home Block 1 */

#school_road_house{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 40%;
    height: auto;
}

#cloud01{
    position: absolute;
    width: 8rem;
    height: auto;
    top: 5rem;
    /* left: 10%; */
    left: calc(50vw - 40%);
    transform: translate(-50%, -50%);
}

#cloud02{
    position: absolute;
    width: 16rem;
    height: auto;
    top: 5rem;
    left: 70%;
    transform: translate(-50%, -50%);
}

#cloud03{
    position: absolute;
    width: 8rem;
    height: auto;
    top: 5rem;
    left: 90%;
    transform: translate(-50%, -50%);
}

#cloud04{
    position: absolute;
    width: 6rem;
    height: auto;
    top: 40rem;
    left: 85%;
    transform: translate(-50%, -50%);
}

#rainbow01{
    position: absolute;
    width: 50rem;
    height: auto;
    top: 20rem;
    left: 50%;
    transform: translate(-50%, -50%);
}

#cloud05{
    position: absolute;
    width: 12rem;
    height: auto;
    top: 15rem;
    left: 30%;
    transform: translate(-50%, -50%);
}

#cloud06{
    position: absolute;
    width: 24rem;
    height: auto;
    top: 30rem;
    left: 25%;
    transform: translate(-50%, -50%);
}

#cloud07{
    position: absolute;
    width: 20rem;
    height: auto;
    top: 30rem;
    left: 75%;
    transform: translate(-50%, -50%);
}

#tree01{
    position: absolute;
    width: 16rem;
    height: auto;
    top: 8rem;
    left: 78%;
    transform: translate(-50%, -50%);
}

#line_note01{
    position: absolute;
    width: 40rem;
    height: auto;
    top: 25rem;
    left: 50%;
    transform: translate(-50%, -50%);
}

#horse01{
    position: absolute;
    width: 10rem;
    height: auto;
    top: 35rem;
    left: 65%;
    transform: translate(-50%, -50%);
}

#char01{
    position: absolute;
	width: 10rem;
	height: auto;
    top: 20rem;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* #spot01{
    position: absolute;
    top: 12rem;
    left: calc(50% - 6rem);
    z-index: +1;
    transform: translate(-50%, -50%);
} */

/* #spot02{
    position: absolute;
    top: 22rem;
    left: calc(50% + 6rem);
    z-index: +1;
    transform: translate(-50%, -50%);
} */


/* Home Block 2 */

#cloud08{
    position: absolute;
    width: 10rem;
	height: auto;
    top: 40rem;
    left: 10%;
    transform: translate(-50%, -50%);
}

#tube01{
    position: absolute;
    width: 30rem;
	height: auto;
    top: 60rem;
    left: 20%;
    transform: translate(-50%, -50%);
}

#line_note02{
    position: absolute;
    width: 50rem;
	height: auto;
    top: 75rem;
    left: 65%;
    transform: translate(-50%, -50%);
}

#slider01{
    position: absolute;
    width: 25rem;
	height: auto;
    top: 45rem;
    left: 80%;
    transform: translate(-50%, -50%);
}

#char02{
    position: absolute;
	width: 10rem;
	height: auto;
    top: 60rem;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* #spot03{
    position: absolute;
    top: 60rem;
    left: calc(50% - 6rem);
    transform: translate(-50%, -50%);
} */

#menu01{
    position: absolute;
    top: 60rem;
    left: calc(50% - 6rem);
    transform: translate(-50%, -50%);
}

/* #spot04{
    position: absolute;
    top: 62rem;
    left: calc(50% + 6rem);
    transform: translate(-50%, -50%);
} */

#menu02{
    position: absolute;
    top: 62rem;
    left: calc(50% + 6rem);
    transform: translate(-50%, -50%);
}

/* Home Block 3 */

#cloud08B{
    position: absolute;
    width: 15rem;
	height: auto;
    top: 60rem;
    left: 70%;
    transform: translate(-50%, -50%);
}

#tray01{
    position: absolute;
    width: 10rem;
	height: auto;
    top: 80rem;
    left: 10%;
    transform: translate(-50%, -50%);
}

#slider02{
    position: absolute;
    width: 40rem;
	height: auto;
    top: 90rem;
    left: 75%;
    transform: translate(-50%, -50%);
}

#ball01{
    position: absolute;
    width: 2rem;
	height: auto;
    top: 110rem;
    left: 45%;
    transform: translate(-50%, -50%);
}

#char03{
    position: absolute;
	width: 10rem;
	height: auto;
    top: 100rem;
    left: 30%;
    transform: translate(-50%, -50%);
}

/* #spot05{
    position: absolute;
    top: 90rem;
    left: calc(30% - 5rem);
    transform: translate(-50%, -50%);
} */

#menu03{
    position: absolute;
    top: 90rem;
    left: calc(30% - 1rem);
    transform: translate(-50%, -50%);
}

/* #spot06{
    position: absolute;
    top: 103rem;
    left: calc(30% + 6rem);
    transform: translate(-50%, -50%);
} */

#menu04{
    position: absolute;
    top: 103rem;
    left: calc(30% + 6rem);
    transform: translate(-50%, -50%);
}

/* Home Block 4 */

#cloud09{
    position: absolute;
	width: 15rem;
	height: auto;
    top: 155rem;
    left: 15%;
    transform: translate(-50%, -50%);
}

#cloud10{
    position: absolute;
    width: 15rem;
	height: auto;
    top: 120rem;
    left: 80%;
    transform: translate(-50%, -50%);
}

#slider03{
    position: absolute;
    width: 20rem;
	height: auto;
    top: 135rem;
    left: 20%;
    transform: translate(-50%, -50%);
}

#line_note03{
    position: absolute;
    width: 50rem;
	height: auto;
    top: 155rem;
    left: 65%;
    transform: translate(-50%, -50%);
}

#tank{
    position: absolute;
    width: 10rem;
	height: auto;
    top: 160rem;
    left: 40%;
    transform: translate(-50%, -50%);
}

#char04{
    position: absolute;
	width: 10rem;
	height: auto;
    top: 140rem;
    left: 60%;
    transform: translate(-50%, -50%);
}

/* #spot07{
    position: absolute;
    top: 140rem;
    left: calc(60% - 6rem);
    transform: translate(-50%, -50%);
} */

#menu05{
    position: absolute;
    top: 140rem;
    left: calc(60% - 6rem);
    transform: translate(-50%, -50%);
}

/* #spot08{
    position: absolute;
    top: 150rem;
    left: calc(60% + 6rem);
    transform: translate(-50%, -50%);
} */

#menu06{
    position: absolute;
    top: 150rem;
    left: calc(60% + 4rem);
    transform: translate(-50%, -50%);
}

/* Home Block 5 */

#swing{
    position: absolute;
    /* width: 30rem; */
    width: clamp(20rem, 45vw, 30rem);
    height: auto;
    /* top: 178rem; */
    bottom: 1rem;
    left: 30%;
    transform: translate(-50%, -50%);
}

#school_bus{
    position: absolute;
    /* width: 45rem; */
    width: clamp(20rem, 65vw, 45rem);
    height: auto;
    left: 0px;
    bottom: 0rem;
}

#pool01{
    position: absolute;
    /* width: 15rem; */
    width: clamp(10rem, 30vw, 45rem);
    height: auto;
    right: 5vw;
    bottom: 2rem;
}

#char05{
    position: absolute;
	width: 15rem;
	height: auto;
    bottom: 2.5rem;
    left: 55%;
    transform: translate(-50%, -50%);
}

/* #spot09{
    position: absolute;
    bottom: 4rem;
    left: calc(55% - 6rem);
    transform: translate(-50%, -50%);
} */

/* #spot10{
    position: absolute;
    bottom: 2rem;
    left: calc(55% + 6rem);
    transform: translate(-50%, -50%);
} */

#menu07{
    position: absolute;
    bottom: 4rem;
    left: calc(55% - 6rem);
    transform: translate(-50%, -50%);
}

#menu08{
    position: absolute;
    bottom: 2rem;
    left: calc(55% + 5rem);
    transform: translate(-50%, -50%);
}

#modal{
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    background-color: lightblue;
    /* background-image: url("/site_assets/images/bg_bird.png"); */
    background-image: url("/site_assets/images/bird_outline.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 999;
}

#modal #bt_modal_close{
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
}

#modal .modal_bg{
    /* position: absolute;
    top:0px;
    left:0px;
    height: 100vh;
    width: 100vW; */
    /*transform: translate(-50%, -50%);
    background-color: rgba(255,255,255,0.8);
    border: 15px solid;
    border-radius: 50%;
    border-color: white; */
    /* background: lightblue  url("/site_assets/images/bg_bird.png") no-repeat fixed center;
    background-size: contain; */
}
/*
#modal .modal_head{
    position: absolute;
    top:15%;
    left: 50%;
    font-size: 1.5rem;
    transform: translate(-50%, 0%);
}

#modal .modal_head h2{
    margin: 0px 0px 0px 0px;
    line-height: 1;
    text-align: center;
} */

#modal .modal_body{
    position: absolute;
    top: 0px;
    left: 0px;
    /* padding-top: 6rem; */
    /* padding-bottom: 6rem; */
    width: 100%;
    height: 100%;
    /* top:25%; */
    /* left: 50%; */
    /* bottom: 10%; */
    /* width: 50vw; */
    /* height: 60vh; */
    overflow-y: scroll;
    overflow-x: hidden;
    /* font-size: 1.2rem; */
    /* line-height: 1.2rem; */
    /* transform: translate(-50%, 0%); */
    text-align: center;
}

#modal .modal_body h2{
    font-size: 1.5rem;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

#modal .modal_body p{
    font-size: 1.2rem;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

/* ==============================================
min-width: 120rem
screen width more than 1920px/120rem
============================================== */

@media screen and (min-width: 120.01rem){

    #kgm_logo{
        width: 20rem;
        height: auto;
    }

    .spot{
        height: 8rem;
        width: 8rem;
    }

    .spot img{
        align-self: center;
        width: 4rem;
        height: 4rem;
    }

    .menu_bullet{
        display:flex;
        flex-direction:row;
        position:absolute;
        width:20rem;
        height:4rem;
    }

    .menu_bullet img{
        margin-left:0px;
        width:5rem;
        height:5rem;
        align-self:center;
    }

    .menu_bullet span{
        color: var(--white);
        margin-left:20px;
        align-self:center;
        text-shadow: 2px 2px #333333;
        font-size: 2rem;
    }

    #char01{
        position: absolute;
    	width: 20rem;
    	height: auto;
        top: 40rem;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #homeBody{
        position: relative;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: 400rem;
    }

    #rainbow01{
        position: absolute;
        width: 100rem;
        height: auto;
        top: 40rem;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #cloud01{
        position: absolute;
        width: 16rem;
        height: auto;
        top: 10rem;
        left: 10%;
        transform: translate(-50%, -50%);
    }

    #cloud02{
        position: absolute;
        width: 32rem;
        height: auto;
        top: 10rem;
        left: 70%;
        transform: translate(-50%, -50%);
    }

    #cloud03{
        position: absolute;
        width: 16rem;
        height: auto;
        top: 10rem;
        left: 90%;
        transform: translate(-50%, -50%);
    }

    #cloud04{
        position: absolute;
        width: 12rem;
        height: auto;
        top: 80rem;
        left: 85%;
        transform: translate(-50%, -50%);
    }

    #cloud05{
        position: absolute;
        width: 24rem;
        height: auto;
        top: 30rem;
        left: 30%;
        transform: translate(-50%, -50%);
    }

    #cloud06{
        position: absolute;
        width: 48rem;
        height: auto;
        top: 60rem;
        left: 25%;
        transform: translate(-50%, -50%);
    }

    #cloud07{
        position: absolute;
        width: 40rem;
        height: auto;
        top: 60rem;
        left: 75%;
        transform: translate(-50%, -50%);
    }

    #tree01{
        position: absolute;
        width: 32rem;
        height: auto;
        top: 16rem;
        left: 78%;
        transform: translate(-50%, -50%);
    }

    #line_note01{
        position: absolute;
        width: 80rem;
        height: auto;
        top: 50rem;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #horse01{
        position: absolute;
        width: 20rem;
        height: auto;
        top: 70rem;
        left: 65%;
        transform: translate(-50%, -50%);
    }

    #spot01{
        position: absolute;
        top: 24rem;
        left: calc(50% - 15rem);
        z-index: +1;
        transform: translate(-50%, -50%);
    }

    #spot02{
        position: absolute;
        top: 44rem;
        left: calc(50% + 15rem);
        z-index: +1;
        transform: translate(-50%, -50%);
    }

    /* Home Block 2 */

    #cloud08{
        position: absolute;
        width: 20rem;
    	height: auto;
        top: 800rem;
        left: 10%;
        transform: translate(-50%, -50%);
    }

    #tube01{
        position: absolute;
        width: 60rem;
    	height: auto;
        top: 120rem;
        left: 20%;
        transform: translate(-50%, -50%);
    }

    #line_note02{
        position: absolute;
        width: 100rem;
    	height: auto;
        top: 150rem;
        left: 65%;
        transform: translate(-50%, -50%);
    }

    #slider01{
        position: absolute;
        width: 50rem;
    	height: auto;
        top: 90rem;
        left: 80%;
        transform: translate(-50%, -50%);
    }

    #char02{
        position: absolute;
    	width: 20rem;
    	height: auto;
        top: 120rem;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* #spot03{
        position: absolute;
        top: 120rem;
        left: calc(50% - 12rem);
        transform: translate(-50%, -50%);
    }

    #spot04{
        position: absolute;
        top: 124rem;
        left: calc(50% + 12rem);
        transform: translate(-50%, -50%);
    } */

    #menu01{
        position: absolute;
        top: 120rem;
        left: calc(50% - 12rem);
        transform: translate(-50%, -50%);
    }

    #menu02{
        position: absolute;
        top: 124rem;
        left: calc(50% + 12rem);
        transform: translate(-50%, -50%);
    }

    /* Home Block 3 */

    #cloud08B{
        position: absolute;
        width: 30rem;
    	height: auto;
        top: 120rem;
        left: 70%;
        transform: translate(-50%, -50%);
    }

    #tray01{
        position: absolute;
        width: 20rem;
    	height: auto;
        top: 160rem;
        left: 10%;
        transform: translate(-50%, -50%);
    }

    #slider02{
        position: absolute;
        width: 80rem;
    	height: auto;
        top: 180rem;
        left: 75%;
        transform: translate(-50%, -50%);
    }

    #ball01{
        position: absolute;
        width: 4rem;
    	height: auto;
        top: 220rem;
        left: 45%;
        transform: translate(-50%, -50%);
    }

    #char03{
        position: absolute;
    	width: 20rem;
    	height: auto;
        top: 200rem;
        left: 30%;
        transform: translate(-50%, -50%);
    }

    /* #spot05{
        position: absolute;
        top: 180rem;
        left: calc(30% - 10rem);
        transform: translate(-50%, -50%);
    }

    #spot06{
        position: absolute;
        top: 206rem;
        left: calc(30% + 12rem);
        transform: translate(-50%, -50%);
    } */

    #menu03{
        position: absolute;
        top: 180rem;
        left: calc(30% - 10rem);
        transform: translate(-50%, -50%);
    }

    #menu04{
        position: absolute;
        top: 206rem;
        left: calc(30% + 12rem);
        transform: translate(-50%, -50%);
    }

    /* Home Block 4 */

    #cloud09{
        position: absolute;
    	width: 30rem;
    	height: auto;
        top: 310rem;
        left: 15%;
        transform: translate(-50%, -50%);
    }

    #cloud10{
        position: absolute;
        width: 30rem;
    	height: auto;
        top: 240rem;
        left: 80%;
        transform: translate(-50%, -50%);
    }

    #slider03{
        position: absolute;
        width: 40rem;
    	height: auto;
        top: 270rem;
        left: 20%;
        transform: translate(-50%, -50%);
    }

    #line_note03{
        position: absolute;
        width: 100rem;
    	height: auto;
        top: 310rem;
        left: 65%;
        transform: translate(-50%, -50%);
    }

    #tank{
        position: absolute;
        width: 20rem;
    	height: auto;
        top: 320rem;
        left: 40%;
        transform: translate(-50%, -50%);
    }

    #char04{
        position: absolute;
    	width: 20rem;
    	height: auto;
        top: 280rem;
        left: 60%;
        transform: translate(-50%, -50%);
    }

    /* #spot07{
        position: absolute;
        top: 280rem;
        left: calc(60% - 12rem);
        transform: translate(-50%, -50%);
    }

    #spot08{
        position: absolute;
        top: 300rem;
        left: calc(60% + 12rem);
        transform: translate(-50%, -50%);
    } */

    #menu05{
        position: absolute;
        top: 280rem;
        left: calc(60% - 12rem);
        transform: translate(-50%, -50%);
    }

    #menu06{
        position: absolute;
        top: 300rem;
        left: calc(60% + 12rem);
        transform: translate(-50%, -50%);
    }

    /* Home Block 5 */

    #swing{
        position: absolute;
        /* width: 30rem; */
        width: clamp(40rem, 45vw, 60rem);
        height: auto;
        /* top: 178rem; */
        bottom: 2rem;
        left: 30%;
        transform: translate(-50%, -50%);
    }

    #school_bus{
        position: absolute;
        /* width: 45rem; */
        width: clamp(40rem, 65vw, 90rem);
        height: auto;
        left: 0px;
        bottom: 0rem;
    }

    #pool01{
        position: absolute;
        /* width: 15rem; */
        width: clamp(20rem, 30vw, 90rem);
        height: auto;
        right: 5vw;
        bottom: 2rem;
    }

    #char05{
        position: absolute;
    	width: 30rem;
    	height: auto;
        bottom: 5rem;
        left: 55%;
        transform: translate(-50%, -50%);
    }

    /* #spot09{
        position: absolute;
        bottom: 8rem;
        left: calc(55% - 12rem);
        transform: translate(-50%, -50%);
    }

    #spot10{
        position: absolute;
        bottom: 4rem;
        left: calc(55% + 12rem);
        transform: translate(-50%, -50%);
    } */

    #menu07{
        position: absolute;
        bottom: 8rem;
        left: calc(55% - 12rem);
        transform: translate(-50%, -50%);
    }

    #menu08{
        position: absolute;
        bottom: 4rem;
        left: calc(55% + 12rem);
        transform: translate(-50%, -50%);
    }

    #footer .copyright{
        /* width: 100%; */
        text-align:center;
        font-size: 2rem;
        color: white;
    }

    .social_icon{
        position: relative;
        width: 4rem;
        height: auto;
    }

}

/* ==============================================
min-width: 91rem
screen width more than 1440px/90rem
============================================== */

@media screen and (min-width: 90.01rem){

    #kgm_logo{
        width: 15rem;
        height: auto;
    }

    .spot{
        height: 6rem;
        width: 6rem;
    }

    .spot img{
        align-self: center;
        width: 3rem;
        height: 3rem;
    }

    .menu_bullet{
        display:flex;
        flex-direction:row;
        position:absolute;
        width:15rem;
        height:3rem;
    }

    .menu_bullet img{
        margin-left:0px;
        width:3rem;
        height:3rem;
        align-self:center;
    }

    .menu_bullet span{
        color: var(--white);
        margin-left:15px;
        align-self:center;
        text-shadow: 2px 2px #333333;
        font-size: 1.5rem;
    }

    #char01{
        position: absolute;
    	width: 15rem;
    	height: auto;
        top: 30rem;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #homeBody{
        position: relative;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: 300rem;
    }

    #rainbow01{
        position: absolute;
        width: 75rem;
        height: auto;
        top: 30rem;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #cloud01{
        position: absolute;
        width: 12rem;
        height: auto;
        top: 8rem;
        left: 10%;
        transform: translate(-50%, -50%);
    }

    #cloud02{
        position: absolute;
        width: 24rem;
        height: auto;
        top: 8rem;
        left: 70%;
        transform: translate(-50%, -50%);
    }

    #cloud03{
        position: absolute;
        width: 12rem;
        height: auto;
        top: 8rem;
        left: 90%;
        transform: translate(-50%, -50%);
    }

    #cloud04{
        position: absolute;
        width: 9rem;
        height: auto;
        top: 60rem;
        left: 85%;
        transform: translate(-50%, -50%);
    }

    #cloud05{
        position: absolute;
        width: 18rem;
        height: auto;
        top: 20rem;
        left: 30%;
        transform: translate(-50%, -50%);
    }

    #cloud06{
        position: absolute;
        width: 36rem;
        height: auto;
        top: 45rem;
        left: 25%;
        transform: translate(-50%, -50%);
    }

    #cloud07{
        position: absolute;
        width: 30rem;
        height: auto;
        top: 45rem;
        left: 75%;
        transform: translate(-50%, -50%);
    }

    #tree01{
        position: absolute;
        width: 24rem;
        height: auto;
        top: 12rem;
        left: 78%;
        transform: translate(-50%, -50%);
    }

    #line_note01{
        position: absolute;
        width: 60rem;
        height: auto;
        top: 38rem;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #horse01{
        position: absolute;
        width: 15rem;
        height: auto;
        top: 52rem;
        left: 65%;
        transform: translate(-50%, -50%);
    }

    #spot01{
        position: absolute;
        top: 18rem;
        left: calc(50% - 13rem);
        z-index: +1;
        transform: translate(-50%, -50%);
    }

    #spot02{
        position: absolute;
        top: 33rem;
        left: calc(50% + 13rem);
        z-index: +1;
        transform: translate(-50%, -50%);
    }

    /* Home Block 2 */

    #cloud08{
        position: absolute;
        width: 15rem;
    	height: auto;
        top: 600rem;
        left: 10%;
        transform: translate(-50%, -50%);
    }

    #tube01{
        position: absolute;
        width: 45rem;
    	height: auto;
        top: 90rem;
        left: 20%;
        transform: translate(-50%, -50%);
    }

    #line_note02{
        position: absolute;
        width: 75rem;
    	height: auto;
        top: 112rem;
        left: 65%;
        transform: translate(-50%, -50%);
    }

    #slider01{
        position: absolute;
        width: 38rem;
    	height: auto;
        top: 68rem;
        left: 80%;
        transform: translate(-50%, -50%);
    }

    #char02{
        position: absolute;
    	width: 15rem;
    	height: auto;
        top: 90rem;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* #spot03{
        position: absolute;
        top: 90rem;
        left: calc(50% - 9rem);
        transform: translate(-50%, -50%);
    }

    #spot04{
        position: absolute;
        top: 93rem;
        left: calc(50% + 9rem);
        transform: translate(-50%, -50%);
    } */

    #menu01{
        position: absolute;
        top: 90rem;
        left: calc(50% - 9rem);
        transform: translate(-50%, -50%);
    }

    #menu02{
        position: absolute;
        top: 93rem;
        left: calc(50% + 9rem);
        transform: translate(-50%, -50%);
    }

    /* Home Block 3 */

    #cloud08B{
        position: absolute;
        width: 20rem;
    	height: auto;
        top: 90rem;
        left: 70%;
        transform: translate(-50%, -50%);
    }

    #tray01{
        position: absolute;
        width: 15rem;
    	height: auto;
        top: 120rem;
        left: 10%;
        transform: translate(-50%, -50%);
    }

    #slider02{
        position: absolute;
        width: 60rem;
    	height: auto;
        top: 135rem;
        left: 75%;
        transform: translate(-50%, -50%);
    }

    #ball01{
        position: absolute;
        width: 3rem;
    	height: auto;
        top: 165rem;
        left: 45%;
        transform: translate(-50%, -50%);
    }

    #char03{
        position: absolute;
    	width: 15rem;
    	height: auto;
        top: 150rem;
        left: 30%;
        transform: translate(-50%, -50%);
    }

    /* #spot05{
        position: absolute;
        top: 135rem;
        left: calc(30% - 8rem);
        transform: translate(-50%, -50%);
    }

    #spot06{
        position: absolute;
        top: 155rem;
        left: calc(30% + 8rem);
        transform: translate(-50%, -50%);
    } */

    #menu03{
        position: absolute;
        top: 135rem;
        left: calc(30% - 8rem);
        transform: translate(-50%, -50%);
    }

    #menu04{
        position: absolute;
        top: 155rem;
        left: calc(30% + 8rem);
        transform: translate(-50%, -50%);
    }

    /* Home Block 4 */

    #cloud09{
        position: absolute;
    	width: 20rem;
    	height: auto;
        top: 232rem;
        left: 15%;
        transform: translate(-50%, -50%);
    }

    #cloud10{
        position: absolute;
        width: 20rem;
    	height: auto;
        top: 180rem;
        left: 80%;
        transform: translate(-50%, -50%);
    }

    #slider03{
        position: absolute;
        width: 30rem;
    	height: auto;
        top: 202rem;
        left: 20%;
        transform: translate(-50%, -50%);
    }

    #line_note03{
        position: absolute;
        width: 75rem;
    	height: auto;
        top: 232rem;
        left: 65%;
        transform: translate(-50%, -50%);
    }

    #tank{
        position: absolute;
        width: 15rem;
    	height: auto;
        top: 240rem;
        left: 40%;
        transform: translate(-50%, -50%);
    }

    #char04{
        position: absolute;
    	width: 15rem;
    	height: auto;
        top: 210rem;
        left: 60%;
        transform: translate(-50%, -50%);
    }

    /* #spot07{
        position: absolute;
        top: 210rem;
        left: calc(60% - 10rem);
        transform: translate(-50%, -50%);
    } */

    #spot05{
        position: absolute;
        top: 210rem;
        left: calc(60% - 10rem);
        transform: translate(-50%, -50%);
    }

    /* #spot08{
        position: absolute;
        top: 225rem;
        left: calc(60% + 10rem);
        transform: translate(-50%, -50%);
    } */

    #menu06{
        position: absolute;
        top: 225rem;
        left: calc(60% + 10rem);
        /* z-index: 11; */
        transform: translate(-50%, -50%);
    }

    /* Home Block 5 */

    #swing{
        position: absolute;
        /* width: 30rem; */
        width: clamp(30rem, 45vw, 45rem);
        height: auto;
        /* top: 178rem; */
        bottom: 1.5rem;
        left: 30%;
        transform: translate(-50%, -50%);
    }

    #school_bus{
        position: absolute;
        /* width: 45rem; */
        width: clamp(30rem, 65vw, 68rem);
        height: auto;
        left: 0px;
        bottom: 0rem;
    }

    #pool01{
        position: absolute;
        /* width: 15rem; */
        width: clamp(15rem, 30vw, 68rem);
        height: auto;
        right: 5vw;
        bottom: 2rem;
    }

    #char05{
        position: absolute;
    	width: 20rem;
    	height: auto;
        bottom: 4rem;
        left: 55%;
        transform: translate(-50%, -50%);
    }

    /* #spot09{
        position: absolute;
        bottom: 6rem;
        left: calc(55% - 12rem);
        transform: translate(-50%, -50%);
    } */

    #menu07{
        position: absolute;
        bottom: 6rem;
        left: calc(55% - 12rem);
        transform: translate(-50%, -50%);
    }

    /* #spot10{
        position: absolute;
        bottom: 3rem;
        left: calc(55% + 12rem);
        transform: translate(-50%, -50%);
    } */

    #menu08{
        position: absolute;
        bottom: 3rem;
        left: calc(55% + 12rem);
        transform: translate(-50%, -50%);
    }

    #footer .copyright{
        /* width: 100%; */
        text-align:center;
        font-size: 2rem;
        color: white;
    }

    .social_icon{
        position: relative;
        width: 4rem;
        height: auto;
    }

}

/* ==============================================
max-width: 47rem
============================================== */

@media screen and (max-width: 47rem){

    #slider01{
        position: absolute;
        width: 22rem;
    	height: auto;
        top: 45rem;
        left: 80%;
        transform: translate(-50%, -50%);
    }

    #tube01{
        position: absolute;
        width: 30rem;
    	height: auto;
        top: 60rem;
        left: 0%;
        transform: translate(-50%, -50%);
    }

    #slider02{
        position: absolute;
        width: 35rem;
        height: auto;
        top: 90rem;
        left: 85%;
        transform: translate(-50%, -50%);
    }

    #pool01{
        position: absolute;
        /* width: 15rem; */
        width: clamp(10rem, 30vw, 45rem);
        height: auto;
        right: 2vw;
        bottom: 2rem;
    }

    #char05{
        position: absolute;
    	width: 10rem;
    	height: auto;
        bottom: 1rem;
        left: 55%;
        transform: translate(-50%, -50%);
    }

    /* #modal .modal_body{
        width: 70vw;
    } */

    #modal .modal_body p{
        font-size: 1.2rem;
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }

}

/* ==============================================
max-width: 37rem
============================================== */

@media screen and (max-width: 37rem){

    #slider01{
        position: absolute;
        width: 20rem;
    	height: auto;
        top: 45rem;
        left: 80%;
        transform: translate(-50%, -50%);
    }

    #tube01{
        position: absolute;
        width: 25rem;
    	height: auto;
        top: 60rem;
        left: -5%;
        transform: translate(-50%, -50%);
    }

    #slider02{
        position: absolute;
        width: 30rem;
        height: auto;
        top: 90rem;
        left: 85%;
        transform: translate(-50%, -50%);
    }

    #pool01{
        position: absolute;
        /* width: 15rem; */
        width: clamp(10rem, 30vw, 45rem);
        height: auto;
        right: -10vw;
        bottom: 2rem;
    }

    #char05{
        position: absolute;
    	width: 10rem;
    	height: auto;
        bottom: 1rem;
        left: 55%;
        transform: translate(-50%, -50%);
    }

    /* #modal .modal_body{
        width: 80vw;
    } */

    #modal .modal_body p{
        font-size: 1.2rem;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    #kgm_logo{
        position: absolute;
        top:4rem;
        left:50%;
        /* margin-left: auto; */
        /* margin-right: auto; */
        width: 8rem;
        height: auto;
        transform: translate(-50%, -50%);
    }
}

/* ==============================================
max-width: 26rem
============================================== */

@media screen and (max-width: 26rem){

    #slider01{
        position: absolute;
        width: 15rem;
    	height: auto;
        top: 45rem;
        left: 80%;
        transform: translate(-50%, -50%);
    }

    #tube01{
        position: absolute;
        width: 25rem;
    	height: auto;
        top: 60rem;
        left: -10%;
        transform: translate(-50%, -50%);
    }

    #slider02{
        position: absolute;
        width: 20rem;
        height: auto;
        top: 95rem;
        left: 95%;
        transform: translate(-50%, -50%);
    }

    #pool01{
        position: absolute;
        /* width: 15rem; */
        width: clamp(10rem, 30vw, 45rem);
        height: auto;
        right: -25vw;
        bottom: 2rem;
    }

    #char05{
        position: absolute;
    	width: 10rem;
    	height: auto;
        bottom: 0rem;
        left: 55%;
        transform: translate(-50%, -50%);
    }

    /* #modal .modal_body{
        width: 80vw;
    } */

    #modal .modal_body p{
        font-size: 1.2rem;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}