/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}

html{
    width: 100%;
}

html{
    width: 100%
}

body{
    width:auto;
    background-color:#C3DBE4;
    height:auto;
    width:100%;
    overflow-x: hidden;
    box-sizing: border-box;
}
#wrapper{
    
}
img{
    width: 40%;
    position: absolute;
    left: 1%;
    top: 1%;
}
.main img{
    width:70%;
    position: absolute;
    top: 0%;
    left:32%;
}
.main h2{
    font-size: 1.2rem;
    color: #106a8f;
    position: absolute;
    left: 2%;
    top: 8%;
}
.main h3{
    font-size: 2.5rem;
    color: #106a8f;
    position: absolute;
    left: -4%;
    top: 10%;
}
.main h4{
    font-size: 1.2rem;
    color: #106a8f;
    position: absolute;
    left: 33%;
    top: 13%;
}
.main p{
    font-size: 0.05rem;
    color: #106a8f;
    position: relative;
    right: 15.5%;
    top: 43vw;
    transform: scale(0.7);
}
.about img{
    width:118% ;
    position: absolute;
    left: 0%;
    top: 18%;
}
.about h2{
    font-size:  1.3rem ;
    color: white;
    position: absolute;
    left: 47%;
    top: 37%;
    font-weight:bold;
} 
.about h3{
    font-size: 3vw;
    color:#106a8f ;
    position: relative;
    right: -6.5%;
    top: 63vw;
    transform: scale(0.5);
    line-height: 1.2rem; 
}
.about br{
    font-size: 0.5rem;
    color:#106a8f ;
    position: relative;
    transform: scale(0.6);  
}
.about h4{
    font-size: 0.6rem;
    color: #106a8f;
    position: relative;
    left: 38%;
    top: 60vw;
    font-weight:bold;
}
.about h5{
    font-size: 3vw;
    color:#106a8f ;
    position: relative;
    left: 28%;
    top: 63vw;
    transform: scale(0.5);   
}
.about br{
    font-size: 0.05rem;
    color:#106a8f ;
    position: relative;
    left: 15%;
    top: 40vw;
    transform: scale(0.5);  
}
.activity img{
    width: 100%;
    position: absolute;
    left: 0%;
    top: 60%;
}
.activity h2{
    font-size:  1.2rem ;
    color: white;
    position: absolute;
    left: 11%;
    top: 58%;
}
.activity h3{
    font-size:  2.8rem ;
    color:#106a8f;
    position: absolute;
    left: 1%;
    top: 56%;
}
.activity h4{
    font-size:  2.8rem ;
    color:#106a8f;
    position: absolute;
    left: 10%;
    top: 62%;
}
.activity h5{
    font-size:  2.8rem ;
    color:#106a8f;
    position: absolute;
    left: 17%;
    top: 67%;
}
.activity h6{
    font-size:  2.8rem ;
    color:#106a8f;
    position: absolute;
    left: 26%;
    top: 71%;
}
.activity h1{
    font-size:  2.8rem ;
    color:#106a8f;
    position: absolute;
    left: 65%;
    top: 80%;
}
.activity2 h1{
    font-size: 0.5rem;
    color: #106a8f;
    position: relative;
    right: 8%;
    top: 57vw;
    transform: scale(0.7);
}
.gra p{
    font-size: 0.5rem;
    color:#106a8f ;
    position: relative;
    text-indent:-1.2em; 
    right: 13%;
    top: 52.5vw;
    transform: scale(0.45);
}
.mov p{
    font-size: 0.5rem;
    color:#106a8f ;
    position: relative;
    text-indent:-1.2em; 
    left: 11%;
    top: 42.4vw;
    transform: scale(0.45);
}
.senryaku p{
    font-size: 0.5rem;
    color:#106a8f ;
    position: relative;
    text-indent:-1.2em; 
    left: 33%;
    top: 32vw;
    transform: scale(0.45);
}
.gra img{
    width: 23%;
    position: absolute;
    left: 12%;
    top: 67%;
}
.mov img{
    width: 23%;
    position: absolute;
    left: 35%;
    top: 67%;
}
.senryaku img{
    width: 23%;
    position: absolute;
    left: 58%;
    top: 67%;
}
.activity3 h1{
    font-size: 0.5rem;
    color: #106a8f;
    position: relative;
    left: 2%;
    top: 39vw;
    transform: scale(0.7);
}
.activity3 img{
    width: 40%;
    position: absolute;
    left: 25%;
    top: 73.5%;
}
.activity4-1 h1{
    font-size: 0.5rem;
    color: #106a8f;
    position: relative;
    left: 9%;
    top: 47vw;
    transform: scale(0.7);
}
.activity4-1 img{
    width: 15%;
    position: absolute;
    left: 26%;
    top: 80%;
}
.activity4-2 h1{
    font-size: 0.6rem;
    color: #106a8f;
    position: relative;
    left: 15%;
    top: 51vw;
    transform: scale(0.5);
}
.activity4-2 h2{
    font-size: 0.5rem;
    color: #106a8f;
    position: relative;
    left: 3%;
    top: 47vw;
    transform: scale(0.3);
}
.activity4-2 img{
    width: 17%;
    position: absolute;
    left: 36.5%;
    top: 83.3%;
}
.activity4-3 img{
    width: 11%;
    position: absolute;
    left: 54%;
    top: 80%;
}
.activity4-4 img{
    width: 18%;
    position: absolute;
    left: 62%;
    top: 83.2%;
}
.activity5 h1 {
    font-size: 0.5rem;
    color: #106a8f;
    position: relative;
    left: 18%;
    top: 46vw;
    transform: scale(0.7);
}
.activity5 h2{
    font-size: 0.5rem;
    color: #106a8f;
    position: relative;
    right: 2%;
    top: 40vw;
    transform: scale(0.3);  
}
.activity5 img{
    width: 13%;
    position: absolute;
    left: 53%;
    top: 87%;
}
.activity6 h1 {
    font-size: 0.5rem;
    color: #106a8f;
    position: relative;
    left: 57%;
    top: 25vw;
    transform: scale(0.7);
}
.activity6 h2{
    font-size: 0.5rem;
    color: #106a8f;
    position: relative;
    left: 37%;
    top: 18vw;
    transform: scale(0.3);
}
.activity6 img{
    width: 10%;
    position: absolute;
    left: 90%;
    top: 87%;
}
.matome{
    width:115vw;
    position:relative;
    top:79vw;
    left:-10vw;
}
.fes img{
    width: 112vw;
    margin-top:198vw;
    margin-left:-13vw;
}
.fes h1{
    font-size:4vw;
    font-weight:300;
    color: #106a8f;
    position: relative;
    right: 9%;
    top: 145vw;
    transform: scale(0.8); 
}
.fes2 img{
    width: 80%;
    position: absolute;
    left: 6%;
    top: 145%;
}
.fes2 h1{
    font-size: 0.85rem;
    color: #106a8f;
    position: relative;
    left: 9%;
    top: 123vw;
    text-indent: -1rem;
    line-height: 1.7rem;
}
.fes2 h2{
    font-size:  0.85rem ;
    color:white;
    position: absolute;
    left: 45.5%;
    top:290vw ;
}
.fes2 h3{
    font-size: 0.85rem;
    color: #106a8f;
    position: relative;
    left: 61%;
    top: 78vw;
}
.previous img{
    width: 104vw;
    margin-top:334vw;
    
}
.previous h1{
    font-size:  1.2rem ;
    color:white;
    position: absolute;
    left: 7%;
    top:308vw ;
}
.pp{
    color: #106A8F;
    font-size: 0.9rem;
    position: relative;
    top: 146vw;
    left: 1.8rem;
    font-weight:bold;
}
.ppp{
    color: #FFFFFF;
    font-size: 1rem;
    position: relative;
    top: 140vw;
    left: -7.3rem;
    font-weight: bolder;
}
header {
    padding:10px;
    background: #ffffff00;
  }
  
  #nav-drawer {
    position: relative;
  }
  
  /*チェックボックス等は非表示に*/
  .nav-unshown {
    display:none;
  }
  
  /*アイコンのスペース*/
  #nav-open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
  }
  
  /*ハンバーガーの形をCSSで表現*/
  #nav-open span, #nav-open span:before, #nav-open span:after {
    position: absolute;
    height: 3px;/*線の太さ*/
    width: 25px;/*長さ*/
    border-radius: 3px;
    background: #ffffff;
    display: block;
    content: '';
    cursor: pointer;
  }
  #nav-open span:before {
    bottom: -8px;
  }
  #nav-open span:after {
    bottom: -16px;
  }
  
  /*閉じる用の薄黒箇所*/
  #nav-close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #106A8F;
    opacity: 0;
    transition: .3s ease-in-out;
  }
  
  /*メニューの中身*/
  #nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 90%;
    max-width: 298px;/*最大幅（お好みで調整を）*/
    height: 100%;
    background: #106A8F;
    transition: .3s ease-in-out;
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);
  }
  .moji10{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color:#ffffff;
    line-height:19vw;
  }
  .header10{
      font-weight:bold;
      color:#090446;
      line-height:18vw;
  }
  /*チェックがついたら表示させる*/
  #nav-input:checked ~ #nav-close {
    display: block;
    opacity: .5;
  }
  
  #nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
  }
  
  .header-logo-menu{
   text-align: center;
   display: flex;
   display: -moz-flex;
   display: -o-flex;
   display: -webkit-flex;
   display: -ms-flex;
   flex-direction: row;
   -moz-flex-direction: row;
   -o-flex-direction: row;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
  }
  
  /*ロゴやサイトタイトルをセンタリング*/
  .logo-area{
      margin-left:37vw;
      
    }