@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    font-size: 1vw;
    font-size: 1vw;
    text-decoration: none;
}

body {
    width: 98%;
    margin-left: auto;
    margin-right: auto;
}

.space {
    display: flex;
    height: 5vw;
    margin-top: 2vw;
    margin-bottom: 2vw;

    align-items: center;
    text-align: center;
 }

.earth {
    display: flex;
    height: 3vw;
    width: 40%;
    margin-left: 30%;
    align-items: center;
    
}

.box1 {
    width: 20%;
    height: 4.8vw;

    margin-left: 3%;
    background-color: aliceblue;
}

.box1 img {
    width: 65%;
}


.box2 {
    width: 10vw;
    background-color:
}

.box3 {
    width: 10vw;
    background-color:
}

.box4 {
    width: 10vw;
    background-color:
}

.box5 {
    width: 7%;
    height: 3vw;
    margin-left: auto;
    margin-right: 7%;
    line-height: 3vw;
    border-radius: 10px;
    background-color:orange ;
    
}

.box6 {
    width: 90vw;
    height: 35vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5vw;
}

.box6 img {
    width: 100%;
}
.space2 {
    display: flex;
    width: 86%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 18vw;
    margin-bottom: 2vw;
}

.earth2 {
    /* これない！！！！！display: flex; を使うと、全部横になるからやらない*/
    width: calc(100% / 3);

 
}

.leaf {
    /* box7 box8が横並びになり、box9が上にドーンとスライドする */
    display: flex;
}

.earth2:nth-child(2) {
    margin-left: 2%;
    margin-right: 2%;
}


.box7 {
    display: flex;
    width: 45%;
    height: 15vw;
    justify-content: center;
    align-items: center;
  
}

.box7 img {
    width: 50%;
}

.box8 {
    width: 65%;
    height: 15vw;
  
    overflow: hidden;
}

.box8 img {
    width: 98%;

}

.box9 {
    width: 100%;
    height: 7vw;
    padding: 2%;
 
}

.box10 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45%;
    height: 15vw;
   

}

.box10 img {
    width: 50%;
}

.box11 {
    width: 65%;
    height: 15vw;
  
    overflow: hidden;
}

.box11 img {
    width: 98%;
}

.box12 {
    width: 100%;
    height: 7vw;
    padding: 2%;
  
}

.box13 {
    display: flex;
    align-items: center;
   justify-content: center;
    width: 45%;
    height: 15vw;
    
}

.box13 img {
    width: 50%;
}

.box14 {
    width: 65%;
    height: 15vw;
   
    overflow: hidden;
}

.box14 img {
    width: 98%;
}

.box15 {
    width: 100%;
    height: 7vw;
    padding: 2%;
  
}



/* ---------------------------------------- */
.space3 {
    display: flex;
    width: 86%;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1%;
}

.earth3 {
    width: calc(100%/3);

}

.earth3:nth-child(2) {
    margin-left: 2%;
    margin-right: 2%;
}

.earth3:nth-child(3) {
    margin-top: 2%;
}

.leaf3 {
    display: flex;
}

.b1 {
    background-color: orange;
    height: 7vw;
}

.b2 {
    width: 100%;
}

.b2 img {
    width: 100%;
}

.b3 {
    background-color: yellowgreen;
    width: 95%;
    height: 4vw;
}

.b4 {
    background-color:grey;
    height: 12vw;
}


.b5 {
    height: 20vw;
}

.b5 img {
    width: 78.5%;
}

.b6 {
    background-color:gainsboro;
    width: 95%;
    height: 4vw;
}

.b7 {
    background-color: #ADD8E6;
    height: 18vw;
}

.b8 {
    width: 73.5%;

}

.b8 img {
    width: 100%;
}

.b9 {
    background-color: palevioletred;
    width: 95%;
    height: 4vw;
}


/* ------------------------------------------ */




.box16 {
    margin-top: 3%;
    padding: 2%;
    font-size: 1vw;
    background-color: #f5f5f5;

}

.footer {
    display: flex;
    width: 74%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2%;
}

.box17 {
    width: calc(100%/3);
  
}

.box18 {
    width: calc(100%/3);
    margin-left: 5%;
    margin-right: 5%;
   
}

.box19 {
    width: calc(100%/3);
   
}

.box20 {
    text-align: center;
    height: 1.6vw;
    font-size: 1vw;
   
}