body{
       color: darkslategray;
       text-align: center;
       font-family: serif;
       padding-bottom: 60px;
       }
body a{
       text-decoration: none;
}
.table{
       font-size:2vh;
}
h3{
       font-size: 3vh;
}
a:hover{
       text-decoration: underline;
}
#future_h{
       background-color: #f0908d;
       color: #ffffff;
       height: 35%; 
}
#now_h{
       background-color: #e6b422;
       color: #ffffff;
       height: 35%; 
}
#past_h{
       background-color: #38b38b;
       color: #ffffff;
       height: 35%; 
}
header a{
       color: #ffffff;
       margin-right: 20px;
       font-size: 2vh
}
header h1{
       margin-top: 1px;
}
header img{
       margin-top: 10px;
       width: 40px;
}
#content{
       margin-top: 20px;
       font-size:3vh;
}
#content a{
       color: darkslategray;
       font-size:3vh;
}
#content h2{
       line-height:0.1;;
       margin-top: 70px;
}
#content h3{
       line-height: 1.5;
       margin-left: 100px;
       margin-right: 100px;
}
#content p{
       margin-bottom: 20px;
       font-size:3vh;
}
#text_p p{
       text-align: left;
       width: 80vw;
       margin-left: 10vw;
}
.underline{
       text-decoration: underline;
}
#text_f p{
       text-align: left;
       width: 70vw;
       margin-left: 20vw;
}

#quiz p{
       margin-bottom: 10px;
       line-height: 1.5;
}
#quiz button{
       margin-bottom: 10px;
       margin-top: 10px;
       font-family: serif;
       background-color: #f0908d;
       color: #ffffff;
       border-radius: 5px;
       border: 3px solid #f0908d;
       font-size:3vh;
}
#quiz button:hover{
       background-color: #ffffff;
       color: #f0908d;
       border-radius: 5px;
       border: 3px solid #f0908d;
}

#answerA{
       font-size:3vh;
       cursor:pointer;
}
#answerA p:hover{
       color: red;
}
#answerB{
       font-size:3vh;
       cursor:pointer;
}
#answerB p:hover{
       color: red;
}
#answerC{
       font-size:3vh;
       cursor:pointer;
}
#answerC p:hover{
       color: red;
}
#haikei_p img{
       float: left;
       margin-left: 10%;
       margin-top:5%;
       width: 30%;
}
#text-all{
       font-size:120%;
       float: right;
       margin-right: 10%;
       margin-top: 5%;
       width: 50%;
}
#text-all button{
       font-size:120%;
       font-family: serif;
       margin-top: 20px;
       margin-bottom: 20px;
}
.icon_f:before{
       content:"";
       padding-right: 10px;
       border-left: 7px solid #f0908d;
       }
.icon_n:before{
       content:"";
       padding-right: 10px;
       border-left: 7px solid #e6b422;
       }
.icon_p:before{
       content:"";
       padding-right: 10px;
       border-left: 7px solid #38b38b;
       }

.sokki{
       position: relative;
}
#sokkis img{
       width: 15vw;
       height: 15vw;
       object-fit: cover;
}
#sokkis p{
       background:black;
       width: 15vw;
       left: 0;
       bottom: 0;
       position:absolute;
       color:#fff;
       bottom:0.1%;
       margin-bottom:0;
       font-size:2vh;
}

.building{
       position: relative;
}

#buildings img{
       width: 15vw;
       height: 15vw;
       object-fit: cover;
}

#buildings p{
       background:black;
       width: 15vw;
       position:absolute;
       color:#fff;
       left: 0;
       bottom:0.1%;
       margin-bottom:0;
       font-size:2vh;

}

.clearfix:after {
content: "";
display: block;
clear: both;
}

#paneru img{
       width:80%
}

.btn a{
       color:#ffffff;
       font-size: 3vh;
       font-family: 'Bitter',serif;
       display: inline-block;
       text-align: center;
       margin-top: 20px;
       border-radius: 5px;
       margin-right: 1vw;
       padding: 1vw;
}
#btn_p{
       background-color: #38b38b;
       border: 3px solid #38b38b;
}
#btn_p:hover{
       text-decoration: none;
       background-color: #ffffff;
       color: #38b38b;
}
#btn_n{
       background-color: #e6b422;
       border: 3px solid #e6b422;
}
#btn_n:hover{
       text-decoration: none;
       background-color: #ffffff;
       color: #e6b422;
}
#btn_f{
       background-color: #f0908d;
       border: 3px solid #f0908d;
}
#btn_f:hover{
       text-decoration: none;
       background-color: #ffffff;
       color: #f0908d;
}
#rbutton a{
       color:#ffffff;
}
.br_hidden{
       display: none;
}

span{
       color: #f0908d;
}
iframe{
       width:560px;
       height:315px;
}

@media screen and (max-width: 912px){
  .br_hidden{
    display: block;
  }
  table{
       max-width: 100%;
  }
  table .year{
       width:30vw;
  }
  h2{
       font-size: 5vw;
  }
  #sokkis img{
       width: 30vw;
       height: 30vw;
  }
  #sokkis p{
       width: 30vw;
  }
  #buildings img{
       width: 30vw;
       height: 30vw;
  }

  #buildings p{
       width: 30vw;
  }
  #explanation img{
       max-width: 100%;
  }
  #haikei_p img{
       margin-left: 25vw;
       margin-right: 25vw;
       margin-top:5%;
       width: 50vw;
  }
  #text-all{
       font-size:3vh;
       margin-left: 10vw;
       margin-right: 10vw;
       margin-top: 5%;
       width: 80vw;
  }
  #text-all #text{
       text-align: left;
  }
  #text_f p{
       text-align: left;
       width: 80vw;
       margin-left: 10vw;
  }
  iframe{
       width:80vw;
       height:45vw;
  }
  header h1{
       font-size: 6vw;
  }
  header img{
       width:7vw;
  }
  .scale{
       width:100%;
  }
  

}