@charset "Shift_JIS";
body{
	font-family: "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
       background: linear-gradient(#7b68ee, #FFFFFF); 
       overflow-x:hidden;
}
#sec01 h1{
  display: inline-block;
  background: linear-gradient(45deg, #FA8BFF 16%, #2BD2FF 57%, #2BFF88 90%);
  background: -webkit-linear-gradient(45deg, #FA8BFF 16%, #2BD2FF 57%, #2BFF88 90%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientEffect 2.5s infinite alternate;
}
 
@keyframes gradientEffect {
  from {background-position: left}
  to {background-position: right}
}

#sec01{
      width:80%;
      margin:0 auto;
      background-image : url(back-1.png);
      background-repeat: no-repeat;
      background-position:10% 50%;
}
#sec01 h1{
      font-size:250%;
      -webkit-text-stroke: 1.5px #000000;
      text-stroke: 1.5px #000000;
      margin-left:10%;
      letter-spacing: 0.12em;
}

#sec02{
    display: block;
    width: 100%;
    margin: 0 auto;
    margin-bottom:13%;
}

#sec02 .note{
    float: left;
    width:45%;
    text-align:right;
}

#sec02 .note img{
   width:80%;
   margin:0 auto;
   float:left;
}
#sec02 .kyara img{
   width:80%;
   margin:0 auto;
   float:left;
   margin-top:3%;
}

#sec02 .msg{
   width:99%;
   display: block;
}

#sec02 h2{
   width:90%;
   padding:30 0 0 10;
   font-size:180%;
   color:#8b4513;
   letter-spacing: 0.12em;
   margin-bottom:3%;
}

#sec02 span{
   width:15%;
   float:left;
   margin-right:5%;
}

#sec02 table{
   width:30%;
   font-size:180%;
   color:#8a2be2;
}

#sec04{
   width:90%;
   margin:0 auto;
   margin-bottom:13%;
}

#sec04 h2{
   font-size:180%;
   font-weight:bold;
   color:#0000ff;
   width:80%;
   margin:0 auto;
}

#sec04 .msg{
    width:80%;
    margin-left:10%;  
    font-size:150%;
    font-weight:bold;
    float:left;
    display: block;
}

#sec04 p{
    float:left;
    width:45%;
    margin-right:5%;
}

#sec04 span{
    width:45%;
    margin-bottom:20%;
}
#sec04 img{
    width:50%;
}

#sec05{
   width:70%;
   margin:0 auto;
   margin-bottom:3%;
}

#sec05 .msg b{
   font-size:150%;
   color:#ffff00;
   width:100%;   
}

#sec05 p{
    width:80%;
    font-size:130%;
}

#sec05 .t-1{
    width:18%;
    font-size:120%;
}

#sec05 .t-2{
    font-size:120%;
}

#sec05 th{
    font-weight:bold;
    width:30%;
}

#sec05 b{
   color:#0000ff;
}

#sec06 {
   width:100%;
   margin:0 auto;
   margin-bottom:13%;
}

#sec06 div{
   width:40%;
   margin:0 auto;
}

#sec06 img{
   width:99%;
} 

#sec07{
   width:90%;
   margin:0 auto;
   margin-bottom:13%;
}

#sec07 h2{
   font-size:180%;
   font-weight:bold;
   color:#0000ff;
   width:80%;
   margin:0 auto;
}
#sec07 .msg{
    width:70%;
    margin-left:10%;  
    font-size:150%;
    font-weight:bold;
    float:left;
    display: block;
}

#sec07 p{
    float:left;
    width:45%;
    margin-right:5%;
}

#sec07 span{
    width:45%;
    margin-bottom:20%;
}
#sec07 img{
    width:40%;
    float:right;
}
#sec08{
   width:70%;
   margin:0 auto;
   margin-bottom:3%;
}
#sec08 .msg{
    width:80%;
    font-size:110%;
    color:#ff8c00;    
}
#sec08 p{
    width:80%;
    font-size:130%;
}

@media only screen and (max-width: 900px){
body{
    font-size:16px;
}

#sec01{
      width:98%;
      margin:0 auto;
      background-size:99%;
      background-position:50% 60%;
      font-size:55%;
}
#sec01 h1{
      margin-left:5%;
      font-weight:bold;
}

#sec02 .note{
   width:100%;
   margin:0 auto;
   allign:center;
}
#sec02 img{
   margin:0 auto;
}
#sec02 .kyara img{
   float:right;
}
#sec02 h2{
   width:100%;
   margin:0 auto;
   font-size:95%;
}
#sec02 table{
   width:100%;
   font-size:115%;
   color:#8a2be2;
}

#sec03{
   width:100%;
   margin:0 auto;
   margin-bottom:10%;
   padding-left:1%;
}

#sec03 table{
   margin:0 auto;
   font-size:65%;
   font-weight:bold;
   width:99%;
}

#sec04{
   width:100%;
   padding-left:1%;
}

#sec04 h2{
   font-size:120%;
   width:99%;
}

#sec04 .msg{
   width:99%;
   font-size:110%;
   margin:0 auto;
   
}

#sec04 p{
   width:99%; 
}

#sec05{
  width:100%;
  font-size:16px;
  padding-left:1%;
}

#sec05 .msg{
   width:99%;
   font-size:90%;
}

#sec05 p{
   font-size:120%;
   width:99%;
}

#sec05 .t-1{
   width:99%;
}

#sec05 th{
   color:#0000ff;
   width:15%;
}
#sec05 td{
   width:60%;
}
#sec05 b{
   color:#0000ff;
}

#sec06{
   padding-left:1%;
   width:100%;
}

#sec06 div{
   width:100%;
}

#sec06 img{
   width:99%;
   margin:0 auto;
}

#sec07{
   width:100%;
   padding-left:1%;
}

#sec07 h2{
   font-size:120%;
   width:99%;
}

#sec07 .msg{
   width:99%;
   font-size:110%;
   margin:0 auto;
   
}

#sec07 p{
   width:99%; 
}

#sec08{
  width:100%;
  font-size:16px;
  padding-left:1%;
}

#sec08 .msg{
   width:99%;
   font-size:90%;
}

#sec08 p{
   font-size:120%;
   width:99%;
}


}

@media only screen and (max-width: 1200px){
#sec05 .t-1{
   width:100%;
}
#sec05 .t-1 th{
   text-align:left;
   width:15%;
}
}