@charset "utf-8";
/* CSS Document */

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-style:normal;
	font-weight: normal;
	font-size: 98%;
	vertical-align: baseline;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height:1.7;
	border-collapse: collapse;
	list-style: none;	
}


*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

@font-face {
  font-family:kawaii;
  src: url("KTEGAKI.eot") format("eot"),/*For IE*/
  url("KTEGAKI.woff") format("woff"),/*For Modern browser*/
  url("KTEGAKI.ttf") format("truetype");/*For iOS Android*/
}
body {
  font-family:kawaii;
 
}


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

html{
    scroll-behavior: smooth;

} 






html {
  height:100%;
}

body {
  margin:0;
}



.border_radius {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}

.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}

.content {
  background-color:rgba(255,255,255,.8);
  border-radius:.25em;
  box-shadow:0 0 .25em rgba(0,0,0,.25);
  box-sizing:border-box;
  left:50%;
  padding:10vmin;
  position:fixed;
  text-align:center;
  top:50%;
  transform:translate(-50%, -50%);
}

h1 {
  font-family:monospace;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}



.holder{
	background-color:#FFFFFF;
	z-index:-10;
}




.cp_keyframes {
	float:right;
	margin: 0 auto;
	background: #65b59a;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	-webkit-animation: keyframes 0.5s ease-in infinite alternate;
	        animation: keyframes 0.5s ease-in infinite alternate;
}
@-webkit-keyframes keyframes {
	0% {
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
	}
	100% {
		-webkit-transform: translateY(250%);
		transform: translateY(250%);
	}
}
@keyframes keyframes {
	0% {
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
	}
	100% {
		-webkit-transform: translateY(250%);
		transform: translateY(250%);
	}
}






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


.dropmenu{

  *zoom: 1;

  list-style-type: none;

  width: 100%;

  margin: 5px auto 30px;

  padding: 0;

}

.dropmenu:before, .dropmenu:after{

  content: "";

  display: table;

}

.dropmenu:after{

  clear: both;

}

.dropmenu li{

  position: relative;

  width: 20%;

  float: left;

  margin: 0;

  padding: 0;

  text-align: center;

}

.dropmenu li a{

  display: block;

  margin: 0;

  padding: 15px 0 11px;

  background: #65b59a;

  color: #000;

  font-size: 14px;

  line-height: 1;

  text-decoration: none;

}

.dropmenu li ul{

  list-style: none;

  position: absolute;

  z-index: 9999;

  top: 100%;

  left: 0;

  margin: 0;

  padding: 0;

}

.dropmenu li ul li{

  width: 100%;

}

.dropmenu li ul li a{

  padding: 13px 15px;

  border-top: 1px solid #7c8c0e;

  background: #65b59a;

  text-align: left;
  
  　　


}

.dropmenu li:hover > a{

  background: #65b59a;

}

.dropmenu li a:hover{

  background: #dcdcdc;

}



#normal li ul{

  display: none;

}

#normal li:hover ul{

  display: block;

}

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

#flip3 ul {

  visibility: hidden;

  perspective: 400px;

}

#flip3 li:hover ul{

  visibility: visible;

}

#flip3 ul li{

  transform: rotateX(-90deg);

  transform-origin: 50% 0;

  transition: .1s;

}

#flip3 li:hover ul li{

  transform: rotateX(0);

}

#flip3 li:hover ul li:nth-child(1) {

  transition-delay: 0s;

}

#flip3 li:hover ul li:nth-child(2) {

  transition-delay: .1s;

}

#flip3 li:hover ul li:nth-child(3) {

  transition-delay: .2s;

}

#flip3 li:hover ul li:nth-child(4) {

  transition-delay: .3s;

}

#flip3 li:hover ul li:nth-child(5) {

  transition-delay: .4s;

}

#flip3 li:hover ul li:nth-child(6) {

  transition-delay: .5s;

}

#flip3 li ul li:nth-last-of-type(1) {

  transition-delay: 0s;

}

#flip3 li ul li:nth-last-of-type(2) {

  transition-delay: .1s;

}

#flip3 li ul li:nth-last-of-type(3) {

  transition-delay: .2s;

}

#flip3 li ul li:nth-last-of-type(4) {

  transition-delay: .3s;

}

#flip3 li ul li:nth-last-of-type(5) {

  transition-delay: .4s;

}

#flip3 li ul li:nth-last-of-type(6) {

  transition-delay: .5s;

}



/* pagetop */
.pagetop {
    display: none;
    position: fixed;
    z-index: 1;/* 背景=雪、桜、等の為、インデックス階層を1に指定 */
    bottom: -10px;/* pagetop座標x-37 */
    right: 1px;/* pagetop座標y6 */
}
.pagetop a {
    display: block;
    background-color: none;
    text-align: center;
    color: #222;
    font-size: 12px;
    text-decoration: none;
    padding: 5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.7;
    opacity: 0.7;
}
.pagetop a:hover {
    display: block;
    background-color: none;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 1;
    opacity: 1;
}
/* pagetop3-ここまで */




.atama{color:#FF0000;
       font-family: 'Orbitron', sans-serif;
    font-size: 100px;}




#wrapper-container{
    width: 100%;


     
    
}

#wrapper-container2{

   height: 100%;
}

#container{
  /*  width: 1400px;*/
  /*  background-image: url(images/konkuri.jpg);*/
   
  /* background-image: -webkit-radial-gradient(51% 98%, #D3D4CF 7%, #BDBFBA 98%);
  background-image: radial-gradient(51% 98%, #D3D4CF 7%, #BDBFBA 98%);*/ 
 /* background-image: -webkit-radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), -webkit-radial-gradient(91% 146%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 100%);
  background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 100%);
  background-blend-mode: screen;*/

    margin-right: auto;
    margin-left: auto;
    padding-top: 10px;
    height:　auto;
    margin: 0 auto;
   
    
}

.video-container {
  position: relative;
}



.video-container img {
  width: 1000px;
 height: 550px;    
}

.maincol h1 img,
#wrapper-contents02 h1 img,
#wrapper-contents03 h1 img,
#wrapper-contents04 h1 img,
#wrapper-contents05 h1 img {
	vertical-align:middle;
}



#header01{width: 1000px;
    background-color: #c1ab05;
    margin-right: auto;
    margin-left: auto;
    height: 64px;
    
    border-bottom: 5px solid #34589e; 
}



#header02{width: 1000px;

    margin-top: 30px;
    margin-bottom:30px; 
    margin-right: auto;
    margin-left: auto;
    height:200px;
   
}
#header img,#contents02 img{width: 1000px;
     height: auto;
    }   
	
	
	

#contents01,#contents02,#contents03,#contents04,#contents05{
	width:1080px;
	margin: auto;}


.box2{
  display: inline-block;
  width: 90px;
  height: 40px;
  margin: 0.5em;
}


  #maincol h2{
	  font-size:1.5em;
	  font-weight:bold;
  }
	  
   
   
   



#wrapper-contents01{
    width: 100%;
    height: 100%;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 10px;
    padding-bottom: 0px;
    background-color: rgba(220,220,220,0.5);
    
    
}

.ma-ka{
	background:linear-gradient(transparent 70%, #ff7f50 0%);

}



img.waku{
	border: 9px solid #d3d3d3;
	}

.p01{
  color: #00ff00;
}
.main-container{
    display:flex;
    height: 600px;
    padding:0 0 40px 0;
  
}

.sidebar{
    flex:0 0 300px;
    margin:20px 20px 0 20px;
    padding: 30px 0 30px 0;
    /*background-color: #f5f5f5;*/
	
	background-color: #CDDCDC;
  background-image: -webkit-radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-image: radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-blend-mode: screen, overlay;
	
	
	
	
	
	
    
}
.sidebar img{
    width: 300px;
    height: 200px;

}
  #maincol{
	
    flex:1 1 auto;
   /* margin: 20px 20px 0 0;*/
    padding: 30px 0 30px 0;
	margin-bottom:30px;
    /* background-color:#f5f5f5;*/
	background-color: #CDDCDC;
  background-image: -webkit-radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-image: radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-blend-mode: screen, overlay;
     
	 
}
#maincol h1{
    color: #006400;
    text-shadow: 2px 2px 5px #808080;
    
}



@keyframes typing { from { width: 0; } }
@keyframes caret { 50% { border-color: transparent; } }

.hope {
margin:auto;	
font-family: monospace; 
width: 40ch;
border-right: .08em solid;
overflow: hidden;
font-size: 4em;
white-space: nowrap;
animation: typing 5s steps(11, end), caret .5s step-end infinite;
}










#wrapper-contents02{
    width: 100%;
    height:245px;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
 background-color: rgba(220,220,220,0.5) ;
   
   
}
 #contents02 img{  
 width: 1000px;

    margin-top: 30px;
    margin-bottom:30px; 
    margin-right: auto;
    margin-left: auto;
    height:200px;
   
 
   }
   
 
   
   
   
  
}


#wrapper-contents03{
    width: 100%;
    height:300px;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
   /* background-color: #f5f5f5;*/
   
   background-color: rgba(224,255,224,0.5);
 
   
   
   
   
}


#wrapper-contents04{
    width: 100%;
    height:300px;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
   /* background-color: #f5f5f5;*/
   
   background-color: rgba(224,255,224,0.5);
 
   
   
   
   
}





#wrapper-contents02 h1,#wrapper-contents03 h1,#wrapper-contents04 h1{
    color:#006400;
    text-shadow: 2px 2px 5px #808080;
}

#wrapper-contents02 h1,#wrapper-contents03 h1,#wrapper-contents04 p{
	
	
	
}

.kakko{color:red;
      border-bottom:dotted;
      /* text-decoration: underline;*/
       text-decoration-color: red;
}
.kakko2{color:red;
       border-bottom:dotted;
      /* text-decoration: underline;*/
       text-decoration-color: red;
	   font-family:kawaii;
	   }



#wrapper-contents04{
     
    height:1300px;
  
    
    
}
#wrapper-contents04 p{
   margin-top: 10px;
   margin-bottom: 20px;    
    
    
}
#wrapper-contents03{
    height:1200px;
    
}

/*#wrapper-contents03{
    width: 1000px;
    height: 300px;
    background-color: #f5f5f5;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #000000;
    }
#wrapper-contents03 h1{
    color:red;
    
}　

#wrapper-contents04{
    width: 1000px;
    height: 300px;
    background-color: #f5f5f5;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #000000;
    }
#wrapper-contents04 h1{
    color:red;
}*/
#wrapper-contents05{
    width: 100%;
    height: 450px;
   /* background-color: #f5f5f5;*/
   
  background-color: rgba(224,255,224,0.5);
  
   
   
   
   
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
   
}
#wrapper-contents05 h1{
    color:#006400;
    text-shadow: 2px 2px 5px #808080;
}
#wrapper-contents05 img{
    margin-top: 20px;
}

#wrapper-contents06{
    width: 100%;
    height: 1000px;
   /* background-color: #f5f5f5;*/
   
   background-color: #fff;
  
   
   
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
  
}

#wrapper-contents06 img{
	width: 40%;
	height: auto;
}




 .video-container2 video{
    width: 1000px;
    height:auto ;
    
}

#wrapper-footer01{
    width: 100%;
    height:auto;
   
    margin-top: 30px;  
    margin-right: auto;
    margin-left: auto;
     
    
}
.footer-container{
    display: flex;
    justify-content: space-between;
    padding :20px;
    background: #65b59a;
}
    
    
    
  /* padding: 20px;
   border-radius: 20px;
    background-color:aqua;*/
}


.footer-container ul{
    margin:0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    color: #ffffff;
    
}
.copyright{
    color: #ffffff;
    font-size: 1em;
    
}

/*nav{
    border-top: 8px solid #34589e;
    background:#2a6fb7;
}*/


nav ul{
	
    overflow: hidden；
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1000px;
    
}
nav li{
    box-sizing:border-box;
    float:left;
    border-right:1px solid #34589e;
    width: 20%;
}
nav li:last-child{
    border-right: none; 
}

nav li a {
    display: block;
    padding:  20px 0;
    width: 100%;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    color: fff;
}
nav li a:hover{
    background:  #c0c0c0;
    
}
a:hover{
    opacity: 0.6;
}



/*-----------グラデーションTOP---------------------------------------------------*/
 @import url(https://fonts.googleapis.com/css?family=Bitter);
   body {
      margin: 0;
      font-family: 'Bitter', serif;
      text-align: center;
    
   }

    .holder,
    .first,
    .second,
    .third {
      height: 100vh;
      width: 100vw;
    }
    .first,
    .second,
    .third {
      position: absolute;
    }
    .second,
    .third {
      opacity: 0;
    }
    .holder {
      height: 100vh;
      position: relative;
      z-index: 1;
    }
    .first {
      animation: first 10s infinite;
      background: linear-gradient(#5ff8ca, #60e08c);
      z-index: 10;
    }
      @keyframes first {
        0% {opacity: 1.0;}
        10% {opacity: 0.8;}
        20% {opacity: 0.6;}
        30% {opacity: 0.4;}
        40% {opacity: 0.2;}
        50% {opacity: 0.1;}
        60% {opacity: 0.2;}
        70% {opacity: 0.4;}
        80% {opacity: 0.6;}
        90% {opacity: 0.8;}
        100% {opacity: 1.0;}
      }

    .second {
      animation: second 10s infinite; animation-delay: 2s;
      background: linear-gradient(#19eaa6, #00a1f0);
      z-index: 20;
    }
      @keyframes second {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }

    .third {
      animation: third 10s infinite;
      animation-delay: 8s;
      background: linear-gradient(#aab7f8, #ff75c6);
      z-index: 30;
    }
      @keyframes third {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }

    .txt {
      margin-top: calc(50vh - 43px);
      position: absolute;
      width: 100%;
      z-index: 1000;
    }
.txt h1{
    font-family: 'Orbitron', sans-serif;
    font-size: 100px;
    
}
   .txt p{
       color: #ff0000;
}
    h1 {
      font-size: 40px;
      font-weight: 400;
      margin: 0;
    }
    p {
      font-size: 20px;
      margin-top: 26px;
    }



ul {
list-style:none;
}

li.first01 {
border: 1px solid #ccc;
width: 400px;
margin-top: 10px;    
margin-left : auto;
margin-right : auto;
}

li.next01 {
width: 400px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-left : auto;
margin-right : auto;
    
}

span.dan {
float: left;    
padding: 10px; 
  
}

span.dan2 {
display: block;
margin-left: 110px;

padding: 10px;
border-left: 1px solid #ccc;
background-color: #dcdcdc;    
}　

ul.one{
 list-style:disc;   
}

ul.one li{
    font-size: 28px;
}
.deta{

    margin:0 5px;
	padding:4px 15px;
	border-radius:20px;
	background:linear-gradient(#c0c0c0,#008000);
	color:#ffffff;
}


iframe{
    margin-top: 30px;
    
    
}

p.work{
    margin-top: 0px;
	font-family:kawaii;
	
}

p.setumei{
    font-size: 30px;
   
    text-indent: 1em;
    padding-left: 20px;
    padding-right: 20px;
	font-family:kawaii;
}

p.name{
    font-size: 25px;
}

hr{
    
    margin-top: 20px;
    margin-bottom: 20px;
}
.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #ff0000;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #ff0000;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}

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



@media screen and (max-width:768px){
    
  html{
    scroll-behavior: smooth;

} 



.atama{color:#FF0000;
       font-family: 'Orbitron', sans-serif;
    font-size: 100px;}

#wrapper-container{
    width: 100%;


     
    
}

    
 


#container{
    width: 100%;
	
	
  /*   background-image: -webkit-radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), -webkit-radial-gradient(91% 146%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 100%);
  background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 100%);
  background-blend-mode: screen;*/
  
  
    margin-right: auto;
    margin-left: auto;
    padding-top: 10px;
    height:　auto;
    margin: 0 auto;
    
}
    
 .video-container {
  position: relative;
}



.video-container img  {
  width: 700px;
 height: 385px;    
}   
    
    
    
    
    
#header01{
    width: 700px;
    background-color: #c1ab05;
    margin-right: auto;
    margin-left: auto;
    height: 64px;
    border: 1px solid #000000;
    border-bottom: 3px solid #34589e;
}

#header02{
    width: 700px;
    margin-top: 30px;
    margin-bottom:30px; 
    margin-right: auto;
    margin-left: auto;
    height: 140px;
   
}

    
#header02 img ,#contents02 img{
     width: 698px;
     height: auto;
    }   
 #contents01,#contents02,#contents03,#contents04,#contents05{
	width:700px;
	margin: auto;}
   
#wrapper-contents01{
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 10px;
    padding-bottom: 0px;
     background-color: rgba(220,220,220,0.5);
   
    
}





.p01{
  color: #00ff00;
}
.main-container{
    display:flex;
    height: auto;
    padding:0 0 40px 0;
    background-color: #dcdcdc;
   
}

.sidebar{
    flex:0 0 300px;
    margin:20px 20px 0 20px;
    padding: 30px 0 30px 0;
    
	background-color: #CDDCDC;
  background-image: -webkit-radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-image: radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-blend-mode: screen, overlay;
	
	
	
	
    
}
.sidebar img{
    width: 300px;
    height: 200px;

}
#maincol{
flex:1 1 auto;
    margin: 20px 0 0 0;
    padding: 30px 0 30px 0;
    background-color: #CDDCDC;
  background-image: -webkit-radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-image: radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-blend-mode: screen, overlay;
	  
   
   
     
}
#maincol h1{
    color: #006400;
    text-shadow: 2px 2px 5px #808080;
    
}


#wrapper-contents02{
    width: 100%;
    height:auto;
	margin-top:30px;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
     
	 background-color:rgba(220,220,220,0.5) ;
    
}


#wrapper-contents03{
    width: 100%;
    height:auto;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
     
	background-color:rgba(224,255,224,0.5);
	
   
}


#wrapper-contents04{
    width: 100%;
    height:auto;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
     
	 background-color: rgba(224,255,224,0.5);
	
   
}

#wrapper-contents02 h1,#wrapper-contents03 h1,#wrapper-contents04 h1{
    color:#006400;
    text-shadow: 2px 2px 5px #808080;
}

.kakko{color:red;
       text-decoration: underline;
       text-decoration-color: red;}



#wrapper-contents04{
     
    height:auto;
   
    
    
}
#wrapper-contents04 p{
   margin-top: 10px;
   margin-bottom: 20px;    
    
    
}
#wrapper-contents03{
    height:auto;
    
}

/*#wrapper-contents03{
    width: 1000px;
    height: 300px;
    background-color: #f5f5f5;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #000000;
    }
#wrapper-contents03 h1{
    color:red;
    
}　

#wrapper-contents04{
    width: 1000px;
    height: 300px;
    background-color: #f5f5f5;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #000000;
    }
#wrapper-contents04 h1{
    color:red;
}*/
#wrapper-contents05{
    width: 100%;
    height: auto;
	
	background-color: rgba(224,255,224,0.5);
	
  
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
  
}
#wrapper-contents05 h1{
    color:#006400;
    text-shadow: 2px 2px 5px #808080;
}
#wrapper-contents05 img{
    margin-top: 20px;
}
    
#wrapper-contents06{
    width: 100%;
    height: 252px;
	
	
  
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
   
}
 .video-container2 video{
    width: 700px;
    height:auto ;
    }
#wrapper-footer01{
    width: 100%;
    height:auto;
   
    margin-top: 30px;  
    margin-right: auto;
    margin-left: auto;
       
    
}
.footer-container{
    display: flex;
    justify-content: space-between;
    padding :20px;
    background: #65b59a;
}
    
    
    
  /* padding: 20px;
   border-radius: 20px;
    background-color:aqua;*/



.footer-container ul{
    margin:0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    color: #ffffff;
    
}
.copyright{
    color: #ffffff;
    font-size: 1em;
    
}

/*nav{
    border-top: 8px solid #34589e;
    background:#2a6fb7;
}*/
nav ul{
	
    overflow: hidden
    list-style: none;
    margin: 0 auto;
    padding: 0;
   /* max-width: 700px;*/
    
}
nav li{
    box-sizing: border-box;
    float: left;
   border-right: 1px solid #34589e;
    width: 20%;
}
    
nav li:nth-child(1){

   border-right: none;
    
} 
nav li:nth-child(2){

   border-left: 1px solid #34589e;
    
}        
nav li:last-child{
    border-right: none;
    
}

nav li a {
    display: block;
    padding:  20px 0;
    width: 100%;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    color: fff;
}
nav li a:hover{
    background:  #c0c0c0;
}
a:hover{
    opacity: 0.6;
}



/*-----------グラデーションTOP---------------------------------------------------*/
 @import url(https://fonts.googleapis.com/css?family=Bitter);
   body {
      margin: 0;
      font-family: 'Bitter', serif;
      text-align: center;
    
   }

    .holder,
    .first,
    .second,
    .third {
      height: 100vh;
      width: 100vw;
    }
    .first,
    .second,
    .third {
      position: absolute;
    }
    .second,
    .third {
      opacity: 0;
    }
    .holder {
      height: 100vh;
      position: relative;
      z-index: 1;
    }
    .first {
      animation: first 10s infinite;
      background: linear-gradient(#5ff8ca, #60e08c);
      z-index: 10;
    }
      @keyframes first {
        0% {opacity: 1.0;}
        10% {opacity: 0.8;}
        20% {opacity: 0.6;}
        30% {opacity: 0.4;}
        40% {opacity: 0.2;}
        50% {opacity: 0.1;}
        60% {opacity: 0.2;}
        70% {opacity: 0.4;}
        80% {opacity: 0.6;}
        90% {opacity: 0.8;}
        100% {opacity: 1.0;}
      }

    .second {
      animation: second 10s infinite; animation-delay: 2s;
      background: linear-gradient(#19eaa6, #00a1f0);
      z-index: 20;
    }
      @keyframes second {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }

    .third {
      animation: third 10s infinite;
      animation-delay: 8s;
      background: linear-gradient(#aab7f8, #ff75c6);
      z-index: 30;
    }
      @keyframes third {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }

    .txt {
      margin-top: calc(50vh - 43px);
      position: absolute;
      width: 100%;
      z-index: 1000;
    }
.txt h1{
    font-family: 'Orbitron', sans-serif;

}
   .txt p{
       color: #ff0000;
}
    h1 {
      font-size: 40px;
      font-weight: 400;
      margin: 0;
    }
    p {
      font-size: 20px;
      margin-top: 26px;
    }



ul {
list-style:none;
}

li.first01 {
border: 1px solid #ccc;
width: 350px;
margin-top: 10px;    
margin-left : auto;
margin-right : auto;
}

li.next01 {
width: 350px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-left : auto;
margin-right : auto;
    
}

span.dan {
float: left;    
padding: 10px; 
  
}

span.dan2 {
display: block;
margin-left: 110px;

padding: 10px;
border-left: 1px solid #ccc;
background-color: #dcdcdc;    
}　

ul.one{
 list-style:disc;   
}

ul.one li{
    font-size: 28px;
}
.deta{

    margin:0 5px;
	padding:4px 15px;
	border-radius:20px;
	background:linear-gradient(#c0c0c0,#008000);
	color:#ffffff;
}


iframe{
    margin-top: 30px;
    
    
}

p.work{
    margin-top: 0px;
}

p.setumei{
    font-size: 25px;
}

p.name{
    font-size: 25px;
}

hr{
    
    margin-top: 20px;
    margin-bottom: 20px;
}
  
    
    
    
    
    
    
    
    
}    
@media screen and (max-width:640px){
      
      
      
html{
    scroll-behavior: smooth;

} 



.atama{color:#FF0000;
       font-family: 'Orbitron', sans-serif;
    font-size: 100px;}


#wrapper-container{
    width: 100%;
   

     
    
}

    
 


#container{
    width: 100%;
    /*  background-image: -webkit-radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), -webkit-radial-gradient(91% 146%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 100%);
  background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 100%);
  background-blend-mode: screen;*/
  
   
    margin-right: auto;
    margin-left: auto;
    padding-top: 10px;
    height:　auto;
    margin: 0 auto;
   
}
.video-container {
  position: relative;
}



.video-container img {
  width: 580px;
 height: 319px;    
}    
    
    
    
    
    
    
    
#header01{
    width: 580px;
    background-color: #c1ab05;
    margin-right: auto;
    margin-left: auto;
    height: 64px;
    border: 1px solid #000000;
    border-bottom: 3px solid #34589e;
}

#header02{
    width: 580px;
    margin-top: 30px;
    margin-bottom:30px; 
    margin-right: auto;
    margin-left: auto;
    height: 117px;
  
}

    
#header02 img,#contents02 img{
     width: 578px;
     height: auto;
    }   
#contents01,#contents02,#contents03,#contents04,#contents05{
	width:580px;
	margin: auto;}
    
#wrapper-contents01{
    
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 10px;
    padding-bottom: 0px;
     background-color: rgba(220,220,220,0.5);
  
    
}



.p01{
  color: #00ff00;
}
.main-container{
    display:flex;
    height: auto;
    padding:0 0 40px 0;
    background-color: #dcdcdc;
   
}

.sidebar{
    display: none;
    flex:0 0 300px;
    margin:20px 20px 0 20px;
    padding: 30px 0 30px 0;
     background-image: -webkit-radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-image: radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-blend-mode: screen, overlay;
     
}
.sidebar img{
    width: 300px;
    height: 200px;

}
#maincol{
flex:1 1 auto;
    margin: 20px 0 0 0;
    padding: 30px 0 30px 0;
      background-image: -webkit-radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-image: radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-blend-mode: screen, overlay;
     
}
#maincol h1{
    color: #006400;
    text-shadow: 2px 2px 5px #808080;
    
}


#wrapper-contents02{
    width: 100%;
    height:auto;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
	
	 background-color:rgba(220,220,220,0.5) ;
   
}

#wrapper-contents03{
    width: 100%;
    height:auto;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
	
	background-color: rgba(224,255,224,0.5);
   
}


#wrapper-contents04{
    width: 100%;
    height:auto;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
	
	 background-color: rgba(224,255,224,0.5);
  
}



#wrapper-contents02 h1,#wrapper-contents03 h1,#wrapper-contents04 h1{
    color:#006400;
    text-shadow: 2px 2px 5px #808080;
}

.kakko{color:red;
    text-decoration: underline;
       text-decoration-color: red;}



#wrapper-contents04{
     
    height:auto;
   
    
    
}
#wrapper-contents04 p{
   margin-top: 10px;
   margin-bottom: 20px;    
    
    
}
#wrapper-contents03{
    height:auto;
    
}

/*#wrapper-contents03{
    width: 1000px;
    height: 300px;
    background-color: #f5f5f5;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #000000;
    }
#wrapper-contents03 h1{
    color:red;
    
}　

#wrapper-contents04{
    width: 1000px;
    height: 300px;
    background-color: #f5f5f5;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #000000;
    }
#wrapper-contents04 h1{
    color:red;
}*/
#wrapper-contents05{
    width: 100%;
    height: auto;
	
	
	background-color: rgba(224,255,224,0.5);

    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
  
}
#wrapper-contents05 h1{
    color:#006400;
    text-shadow: 2px 2px 5px #808080;
}
#wrapper-contents05 img{
    margin-top: 20px;
}
    
#wrapper-contents06{
    width: 100%;
    height: 208px;
	
	background-color: #ffffe0;
 
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
  
}
 .video-container2 video{
    width: 580px;
    height:auto ;
    }
    
    
    
#wrapper-footer01{
    width: 100%;
    height:auto;
   
    margin-top: 30px;  
    margin-right: auto;
    margin-left: auto;
     
    
}
.footer-container{
    display: flex;
    justify-content: space-between;
    padding :20px;
    background:#65b59a;
}
    
    
    
  /* padding: 20px;
   border-radius: 20px;
    background-color:aqua;*/



.footer-container ul{
    margin:0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    color: #ffffff;
    
}
.copyright{
    color: #ffffff;
    font-size: 1em;
    
}

/*nav{
    border-top: 8px solid #34589e;
    background:#2a6fb7;
}*/
nav ul{
	
    overflow: hidden
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 700px;
    
}
nav li{
    box-sizing: border-box;
    float: left;
   border-right: 1px solid #34589e;
    width: 20%;
}
nav li:last-child{
    border-right: none;
    
}

nav li a {
    display: block;
    padding:  20px 0;
    width: 100%;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    color: fff;
}
nav li a:hover{
    background:  #c0c0c0;
}
a:hover{
    opacity: 0.6;
}



/*-----------グラデーションTOP---------------------------------------------------*/
 @import url(https://fonts.googleapis.com/css?family=Bitter);
   body {
      margin: 0;
      font-family: 'Bitter', serif;
      text-align: center;
    
   }

    .holder,
    .first,
    .second,
    .third {
      height: 100vh;
      width: 100vw;
    }
    .first,
    .second,
    .third {
      position: absolute;
    }
    .second,
    .third {
      opacity: 0;
    }
    .holder {
      height: 100vh;
      position: relative;
      z-index: 1;
    }
    .first {
      animation: first 10s infinite;
      background: linear-gradient(#5ff8ca, #60e08c);
      z-index: 10;
    }
      @keyframes first {
        0% {opacity: 1.0;}
        10% {opacity: 0.8;}
        20% {opacity: 0.6;}
        30% {opacity: 0.4;}
        40% {opacity: 0.2;}
        50% {opacity: 0.1;}
        60% {opacity: 0.2;}
        70% {opacity: 0.4;}
        80% {opacity: 0.6;}
        90% {opacity: 0.8;}
        100% {opacity: 1.0;}
      }

    .second {
      animation: second 10s infinite; animation-delay: 2s;
      background: linear-gradient(#19eaa6, #00a1f0);
      z-index: 20;
    }
      @keyframes second {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }

    .third {
      animation: third 10s infinite;
      animation-delay: 8s;
      background: linear-gradient(#aab7f8, #ff75c6);
      z-index: 30;
    }
      @keyframes third {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }

    .txt {
      margin-top: calc(50vh - 43px);
      position: absolute;
      width: 100%;
      z-index: 1000;
    }
.txt h1{
    font-family: 'Orbitron', sans-serif;
    
}
   .txt p{
       color: #ff0000;
}
    h1 {
      font-size: 40px;
      font-weight: 400;
      margin: 0;
    }
    p {
      font-size: 20px;
      margin-top: 26px;
    }



ul {
list-style:none;
}

li.first01 {
border: 1px solid #ccc;
width: 250px;
margin-top: 10px;    
margin-left : auto;
margin-right : auto;
}

li.next01 {
width: 250px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-left : auto;
margin-right : auto;
    
}

span.dan {
float: left;    
padding: 10px; 
  
}

span.dan2 {
display: block;
margin-left: 110px;

padding: 10px;
border-left: 1px solid #ccc;
background-color: #dcdcdc;    
}　

ul.one{
 list-style:disc;   
}

ul.one li{
    font-size: 28px;
}
.deta{

    margin:0 5px;
	padding:4px 15px;
	border-radius:20px;
	background:linear-gradient(#c0c0c0,#008000);
	color:#ffffff;
}


iframe{
    margin-top: 30px;
    
    
}

p.work{
    margin-top: 0px;
}

p.setumei{
    font-size: 25px;
}

p.name{
    font-size: 25px;
}

hr{
    
    margin-top: 20px;
    margin-bottom: 20px;
}
  
    
    
    
    
    
    
    
    


iframe{
    width: 100%;
}             
      
 
}
@media screen and (max-width:480px){
  /*480px以下で適用する内容*/
  
 html{
    scroll-behavior: smooth;

} 




.atama{color:#FF0000;
       font-family: 'Orbitron', sans-serif;
    font-size: 60px;}


#wrapper-container{
    width: 100%;
   

     
    
}

    
 


#container{
    width: 100%;
   
/*	background-image: -webkit-radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), -webkit-radial-gradient(91% 146%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 100%);
  background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 100%);
  background-blend-mode: screen;*/
   
    margin-right: auto;
    margin-left: auto;
    padding-top: 10px;
    height:　auto;
    margin: 0 auto;
   
}
.video-container {
  position: relative;
}



.video-container img  {
  width: 400px;
 height: 220px;    
}    
    
    
    
    
    
    
    
#header01{
    width: 400px;
    background-color: #c1ab05;
    margin-right: auto;
    margin-left: auto;
    height: 87px;
    border: 1px solid #000000;
    border-bottom: 3px solid #34589e;
}
    
    
.em{
    font-size: 0.9em; 
        
    }    
    

#header02{
    width: 402px;
    margin-top: 30px;
    margin-bottom:30px; 
    margin-right: auto;
    margin-left: auto;
    height: 81px;
   
}

    
#header02 img,#contents02 img{
     width: 400px;
     height: auto;
    }   
#contents01,#contents02,#contents03,#contents04,#contents05{
	width:400px;
	margin: auto;}
    
#wrapper-contents01{
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 10px;
    padding-bottom: 0px;
     background-color: rgba(220,220,220,0.5);
 
    
}



.p01{
  color: #00ff00;
}
.main-container{
    display:flex;
    height: auto;
    padding:0 0 40px 0;
    background-color: #dcdcdc;
   
}

.sidebar{
    display: none;
   /* flex:0 0 300px;
    margin:20px 20px 0 20px;
    padding: 30px 0 30px 0;
    background-color: #f5f5f5;
    border: 1px dashed #000000;
    */
}



#maincol{
    flex:1 1 auto;
    margin: 20px 0 0 0;
    padding: 30px 0 30px 0;
     background-image: -webkit-radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-image: radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-blend-mode: screen, overlay;
    
}
#maincol h1{
    color: #006400;
    text-shadow: 2px 2px 5px #808080;
    
}


#wrapper-contents02{
    width: 100%;
    height:auto;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
	
	 background-color:rgba(220,220,220,0.5) ;
	
  
  
}

#wrapper-contents03{
    width: 100%;
    height:auto;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
	
	background-color:rgba(224,255,224,0.5);
	
  
   
}


#wrapper-contents04{
    width: 100%;
    height:auto;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
	
	 background-color: rgba(224,255,224,0.5);
	
  
   
}
#wrapper-contents02 h1,#wrapper-contents03 h1,#wrapper-contents04 h1{
    color:#006400;
    text-shadow: 2px 2px 5px #808080;
}

.kakko{color:red;
       text-decoration: underline;
       text-decoration-color: red;}



#wrapper-contents04{
     
    height:auto;
   
    
    
}
#wrapper-contents04 p{
   margin-top: 10px;
   margin-bottom: 20px;    
    
    
}
#wrapper-contents03{
    height:auto;
    
}

/*#wrapper-contents03{
    width: 1000px;
    height: 300px;
    background-color: #f5f5f5;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #000000;
    }
#wrapper-contents03 h1{
    color:red;
    
}　

#wrapper-contents04{
    width: 1000px;
    height: 300px;
    background-color: #f5f5f5;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #000000;
    }
#wrapper-contents04 h1{
    color:red;
}*/
#wrapper-contents05{
    width: 100%;
    height: auto;
	background-color: rgba(224,255,224,0.5);
	
 
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
  
}
#wrapper-contents05 h1{
    color:#006400;
    text-shadow: 2px 2px 5px #808080;
}
#wrapper-contents05 img{
    margin-top: 20px;
}
#wrapper-contents06{
    width: 100%;
    height: 144px;
	
	background-color: #ffffe0;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
   
}
 .video-container2 video{
    width: 400px;
    height:auto ;
        
    }
    
    
#wrapper-footer01{
    width: 100%;
    height:auto;
   
    margin-top: 30px;  
    margin-right: auto;
    margin-left: auto;
         
    
}
.footer-container{
    display: flex;
    justify-content: space-between;
    padding :20px;
    background: #65b59a;
}
    
    
    
  /* padding: 20px;
   border-radius: 20px;
    background-color:aqua;*/



.footer-container ul{
    margin:0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    color: #ffffff;
    
}
.copyright{
    color: #ffffff;
    font-size: 1em;
    
}

/*nav{
    border-top: 8px solid #34589e;
    background:#2a6fb7;
}*/
nav ul{
	
    overflow: hidden
    list-style: none;
    margin: 0 auto;
    padding: 0;
   /* max-width: 700px;*/
    
}
nav li{
    box-sizing: border-box;
    float: left;
   border-right: 1px solid #34589e;
    width: 20%;
}
    
 nav li:nth-child(4){
     border-right: none;   
    }
    
    nav li:nth-child(5){
        border-left: 1px solid #34589e;
    }     
nav li:last-child{
    border-right: none;
    
}

nav li a {
    display: block;
    padding:  20px 0;
    width: 100%;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    color: fff;
}
nav li a:hover{
    background:  #c0c0c0;
}
a:hover{
    opacity: 0.6;
}



/*-----------グラデーションTOP---------------------------------------------------*/
 @import url(https://fonts.googleapis.com/css?family=Bitter);
   body {
      margin: 0;
      font-family: 'Bitter', serif;
      text-align: center;
    
   }

    .holder,
    .first,
    .second,
    .third {
      height: 100vh;
      width: 100vw;
    }
    .first,
    .second,
    .third {
      position: absolute;
    }
    .second,
    .third {
      opacity: 0;
    }
    .holder {
      height: 100vh;
      position: relative;
      z-index: 1;
    }
    .first {
      animation: first 10s infinite;
      background: linear-gradient(#5ff8ca, #60e08c);
      z-index: 10;
    }
      @keyframes first {
        0% {opacity: 1.0;}
        10% {opacity: 0.8;}
        20% {opacity: 0.6;}
        30% {opacity: 0.4;}
        40% {opacity: 0.2;}
        50% {opacity: 0.1;}
        60% {opacity: 0.2;}
        70% {opacity: 0.4;}
        80% {opacity: 0.6;}
        90% {opacity: 0.8;}
        100% {opacity: 1.0;}
      }

    .second {
      animation: second 10s infinite; animation-delay: 2s;
      background: linear-gradient(#19eaa6, #00a1f0);
      z-index: 20;
    }
      @keyframes second {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }

    .third {
      animation: third 10s infinite;
      animation-delay: 8s;
      background: linear-gradient(#aab7f8, #ff75c6);
      z-index: 30;
    }
      @keyframes third {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }

    .txt {
      margin-top: calc(50vh - 43px);
      position: absolute;
      width: 100%;
      z-index: 1000;
    }
.txt h1{
    font-family: 'Orbitron', sans-serif;
    font-size:60px;
}
   .txt p{
       color: #ff0000;
}
    h1 {
      font-size: 40px;
      font-weight: 400;
      margin: 0;
    }
    p {
      font-size: 20px;
      margin-top: 26px;
    }



ul {
list-style:none;
}

li.first01 {
border: 1px solid #ccc;
width: 180px;
margin-top: 10px;    
margin-left : auto;
margin-right : auto;
}

li.next01 {
width: 180px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-left : auto;
margin-right : auto;
    
}

span.dan {
float: left;    
padding: 10px; 
  
}

span.dan2 {
display: block;
margin-left: 110px;

padding: 10px;
border-left: 1px solid #ccc;
background-color: #dcdcdc;    
}　

ul.one{
 list-style:disc;   
}

ul.one li{
    font-size: 28px;
}
.deta{

    margin:0 5px;
	padding:4px 15px;
	border-radius:20px;
	background:linear-gradient(#c0c0c0,#008000);
	color:#ffffff;
}


iframe{
    margin-top: 30px;
    
    
}

p.work{
    margin-top: 0px;
}

p.setumei{
    font-size: 25px;
}

p.name{
    font-size: 25px;
}

hr{
    
    margin-top: 20px;
    margin-bottom: 20px;
}
  
    
iframe{
    width: 100%;
}   
    
    
    
    
    
    
}
@media screen and (max-width:375px){
  /*375px以下で適用する内容*/
  
 html{
    scroll-behavior: smooth;

} 





.atama{color:#FF0000;
       font-family: 'Orbitron', sans-serif;
    font-size: 55px;}


#wrapper-container{
    width: 100%;
   
     
    
}

    
 


#container{
    width: 100%;
 
  
 /* background-image: -webkit-radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), -webkit-radial-gradient(91% 146%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 100%);
  background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 100%);
  background-blend-mode: screen;*/
  
  
    margin-right: auto;
    margin-left: auto;
    padding-top: 10px;
    height:　auto;
    margin: 0 auto;
   
}
    
.video-container {
  position: relative;
}



.video-container img {
  width: 320px;
 height: 176px;    
}    
    
    
    
#header01{
    width: 320px;
    background-color: #c1ab05;
    margin-right: auto;
    margin-left: auto;
    height: 87px;
    border: 1px solid #000000;
    border-bottom: 3px solid #34589e;
}
    
    
.em{
    font-size: 0.9em; 
        
    }    
    

#header02{
    width: 322px;
    margin-top: 30px;
    margin-bottom:30px; 
    margin-right: auto;
    margin-left: auto;
    height: 65px;
   
}

    
#header02 img,#contents02 img{
     width: 320px;
     height: auto;}
#contents01,#contents02,#contents03,#contents04,#contents05{
	width:320px;
	margin: auto;}
       
    
#wrapper-contents01{
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 10px;
    padding-bottom: 0px;
    background-color: rgba(220,220,220,0.5);
    
}



.p01{
  color: #00ff00;
}
.main-container{
    display:flex;
    height: auto;
    padding:0 0 40px 0;
    background-color: #dcdcdc;
    
}

.sidebar{
    display: none;
   /* flex:0 0 300px;
    margin:20px 20px 0 20px;
    padding: 30px 0 30px 0;
    background-color: #f5f5f5;
    border: 1px dashed #000000;
    */
}



#maincol{
    flex:1 1 auto;
    margin: 20px 0 0 0;
    padding: 30px 0 30px 0;
      background-image: -webkit-radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-image: radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-blend-mode: screen, overlay;
    
}
#maincol h1{
    color: #006400;
    text-shadow: 2px 2px 5px #808080;
    
}


#wrapper-contents02{
    width: 100%;
    height:auto;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
	 background-color:rgba(220,220,220,0.5) ;
 
   
}


#wrapper-contents03{
    width: 100%;
    height:auto;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
	background-color: rgba(224,255,224,0.5);
 
  
}



#wrapper-contents04{
    width: 100%;
    height:auto;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
	 background-color: rgba(224,255,224,0.5);
 
   
}
#wrapper-contents02 h1,#wrapper-contents03 h1,#wrapper-contents04 h1{
    color:#006400;
    text-shadow: 2px 2px 5px #808080;
}

.kakko{color:red;
       text-decoration: underline;
       text-decoration-color: red;}



#wrapper-contents04{
     
    height:auto;
   
    
    
}
#wrapper-contents04 p{
   margin-top: 10px;
   margin-bottom: 20px;    
    
    
}
#wrapper-contents03{
    height:auto;
    
}

/*#wrapper-contents03{
    width: 1000px;
    height: 300px;
    background-color: #f5f5f5;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #000000;
    }
#wrapper-contents03 h1{
    color:red;
    
}　

#wrapper-contents04{
    width: 1000px;
    height: 300px;
    background-color: #f5f5f5;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #000000;
    }
#wrapper-contents04 h1{
    color:red;
}*/
#wrapper-contents05{
    width: 100%;
    height: auto;
	background-color: rgba(224,255,224,0.5);
   
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
   
}
#wrapper-contents05 h1{
    color:#006400;
    text-shadow: 2px 2px 5px #808080;
}
#wrapper-contents05 img{
    margin-top: 20px;
}
    
 #wrapper-contents06{
    width: 100%;
    height: 115px;
	background-color: #ffffe0;
  
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
   
}
 .video-container2 video{
    width: 320px;
    height:auto ;
    }
    
    
#wrapper-footer01{
    width: 100%;
    height:auto;
   
    margin-top: 30px;  
    margin-right: auto;
    margin-left: auto;
      
    
}
.footer-container{
    display: flex;
    justify-content: space-between;
    padding :20px;
    background:#65b59a;
}
    
    
    
  /* padding: 20px;
   border-radius: 20px;
    background-color:aqua;*/



.footer-container ul{
    margin:0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    color: #ffffff;
    
}
.copyright{
    color: #ffffff;
    font-size: 1em;
    
}

/*nav{
    border-top: 8px solid #34589e;
    background:#2a6fb7;
}*/
nav ul{
	
    overflow: hidden
    list-style: none;
    margin: 0 auto;
    padding: 0;
   /* max-width: 700px;*/
    
}
nav li{
    box-sizing: border-box;
    float: left;
   border-right: 1px solid #34589e;
    width: 20%;
}
    
    
    
nav li:last-child{
    border-right: none;
    
}
    
 nav li:nth-child(4){
     border-right: 1px solid #34589e;   
    }
    
nav li:nth-child(5){
        border-left:none; }   

nav li a {
    display: block;
    padding:  20px 0;
    width: 100%;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    color: fff;
}
nav li a:hover{
    background:  #c0c0c0;
}
a:hover{
    opacity: 0.6;
}



/*-----------グラデーションTOP---------------------------------------------------*/
 @import url(https://fonts.googleapis.com/css?family=Bitter);
   body {
      margin: 0;
      font-family: 'Bitter', serif;
      text-align: center;
    
   }

    .holder,
    .first,
    .second,
    .third {
      height: 100vh;
      width: 100vw;
    }
    .first,
    .second,
    .third {
      position: absolute;
    }
    .second,
    .third {
      opacity: 0;
    }
    .holder {
      height: 100vh;
      position: relative;
      z-index: 1;
    }
    .first {
      animation: first 10s infinite;
      background: linear-gradient(#5ff8ca, #60e08c);
      z-index: 10;
    }
      @keyframes first {
        0% {opacity: 1.0;}
        10% {opacity: 0.8;}
        20% {opacity: 0.6;}
        30% {opacity: 0.4;}
        40% {opacity: 0.2;}
        50% {opacity: 0.1;}
        60% {opacity: 0.2;}
        70% {opacity: 0.4;}
        80% {opacity: 0.6;}
        90% {opacity: 0.8;}
        100% {opacity: 1.0;}
      }

    .second {
      animation: second 10s infinite; animation-delay: 2s;
      background: linear-gradient(#19eaa6, #00a1f0);
      z-index: 20;
    }
      @keyframes second {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }

    .third {
      animation: third 10s infinite;
      animation-delay: 8s;
      background: linear-gradient(#aab7f8, #ff75c6);
      z-index: 30;
    }
      @keyframes third {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }

    .txt {
      margin-top: calc(50vh - 43px);
      position: absolute;
      width: 100%;
      z-index: 1000;
    }
.txt h1{
    font-family: 'Orbitron', sans-serif;
    font-size:55px;
}
   .txt p{
       color: #ff0000;
}
    h1 {
      font-size: 40px;
      font-weight: 400;
      margin: 0;
    }
    p {
      font-size: 20px;
      margin-top: 26px;
    }



ul {
list-style:none;
}

li.first01 {
border: 1px solid #ccc;
width: 140px;
margin-top: 10px;    
margin-left : auto;
margin-right : auto;
}

li.next01 {
width: 140px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-left : auto;
margin-right : auto;
    
}

span.dan {
float: left;    
padding: 10px; 
  
}

span.dan2 {
display: block;
margin-left: 90px;

padding: 10px;
border-left: 1px solid #ccc;
background-color: #dcdcdc;    
}　

ul.one{
 list-style:disc;   
}

ul.one li{
    font-size: 28px;
}
.deta{

    margin:0 5px;
	padding:4px 15px;
	border-radius:20px;
	background:linear-gradient(#c0c0c0,#008000);
	color:#ffffff;
}


iframe{
    margin-top: 30px;
    
    
}

p.work{
    margin-top: 0px;
}

p.setumei{
    font-size: 25px;
}

p.name{
    font-size: 25px;
}

hr{
    
    margin-top: 20px;
    margin-bottom: 20px;
}
  
    
iframe{
    width: 100%;
}   
    
    
    
    
    
    
}          
@media screen and (max-width:320px){
  /*320px以下で適用する内容*/
  
 html{
    scroll-behavior: smooth;

} 



.atama{color:#FF0000;
       font-family: 'Orbitron', sans-serif;
    font-size: 50px;}


#wrapper-container{
    width: 100%;
    

     
    
}

    
 


#container{
    width: 100%;

 
/*background-image: -webkit-radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), -webkit-radial-gradient(91% 146%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 100%);
  background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 100%);
  background-blend-mode: screen;*/
  
   
    margin-right: auto;
    margin-left: auto;
    padding-top: 10px;
    height:　auto;
    margin: 0 auto;
  
}
    
.video-container {
  position: relative;
}



.video-container img {
  width: 300px;
 height: 165px;    
}    
    
#header01{
    width: 300px;
    background-color: #c1ab05;
    margin-right: auto;
    margin-left: auto;
    height: 87px;
    border: 1px solid #000000;
    border-bottom: 3px solid #34589e;
}
    
    
.em{
    font-size: 0.9em; 
        
    }    
    

#header02{
    width: 302px;
    margin-top: 30px;
    margin-bottom:30px; 
    margin-right: auto;
    margin-left: auto;
    height: 65px;
  
}

    
#header02 img,#contents02 img{
     width: 300px;
     height: auto;
    }   
#contents01,#contents02,#contents03,#contents04,#contents05{
	width:300px;
	margin: auto;}
    
#wrapper-contents01{
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 10px;
    padding-bottom: 0px;
     background-color: rgba(220,220,220,0.5);
   
}



.p01{
  color: #00ff00;
}
.main-container{
    display:flex;
    height: auto;
    padding:0 0 40px 0;
    background-color: #dcdcdc;
    
}

.sidebar{
    display: none;
   /* flex:0 0 300px;
    margin:20px 20px 0 20px;
    padding: 30px 0 30px 0;
    background-color: #f5f5f5;
    border: 1px dashed #000000;
    */
}



#maincol{
	
    flex:1 1 auto;
    margin: 20px 0 0 0;
    padding: 30px 0 30px 0;
      background-image: -webkit-radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-image: radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-blend-mode: screen, overlay;
   
}
#maincol h1{
    color: #006400;
    text-shadow: 2px 2px 5px #808080;
    
}


#wrapper-contents02{
    width: 100%;
    height:auto;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
	
	 background-color:rgba(220,220,220,0.5) ;
	
   
   
}

#wrapper-contents03{
    width: 100%;
    height:auto;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
	
	background-color: rgba(224,255,224,0.5);
	
   
    
}

#wrapper-contents04{
    width:100%;
    height:auto;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
	
	 background-color: rgba(224,255,224,0.5);
	
   
    
}
#wrapper-contents02 h1,#wrapper-contents03 h1,#wrapper-contents04 h1{
    color:#006400;
    text-shadow: 2px 2px 5px #808080;
}

.kakko{color:red;
       text-decoration: underline;
       text-decoration-color: red;}



#wrapper-contents04{
     
    height:auto;
    
    
    
}
#wrapper-contents04 p{
   margin-top: 10px;
   margin-bottom: 20px;    
    
    
}
#wrapper-contents03{
    height:auto;
    
}

/*#wrapper-contents03{
    width: 1000px;
    height: 300px;
    background-color: #f5f5f5;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #000000;
    }
#wrapper-contents03 h1{
    color:red;
    
}　

#wrapper-contents04{
    width: 1000px;
    height: 300px;
    background-color: #f5f5f5;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #000000;
    }
#wrapper-contents04 h1{
    color:red;
}*/
#wrapper-contents05{
    width: 100%;
    height: auto;
	background-color: #e0ffe0;
  
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    
}
#wrapper-contents05 h1{
    color:#006400;
    text-shadow: 2px 2px 5px #808080;
}
#wrapper-contents05 img{
    margin-top: 20px;
}
    
#wrapper-contents06{
    width: 100%;
    height: 108px;
	
	background-color: #ffffe0;
  
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
   
}
 .video-container2 video{
    width: 300px;
    height:auto ;
    }
    
#wrapper-footer01{
    width: 100%;
    height:auto;
   
    margin-top: 30px;  
    margin-right: auto;
    margin-left: auto;
       
    
}
.footer-container{
    display: flex;
    justify-content: space-between;
    padding :20px;
    background:#65b59a1;
}
    
    
    
  /* padding: 20px;
   border-radius: 20px;
    background-color:aqua;*/



.footer-container ul{
    margin:0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    color: #ffffff;
    
}
.copyright{
    color: #ffffff;
    font-size: 1em;
    
}

/*nav{
    border-top: 8px solid #34589e;
    background:#2a6fb7;
}*/
nav ul{
	
    overflow: hidden
    list-style: none;
    margin: 0 auto;
    padding: 0;
   /* max-width: 700px;*/
    
}
nav li{
    box-sizing: border-box;
    float: left;
   border-right: 1px solid #34589e;
    width: 20%;
}
nav li:nth-child(4){
     border-right: 1px solid #34589e;   
    }
    
nav li:nth-child(5){
        border-left:none; }   
     
     
     
     
nav li:last-child{
    border-right: none;
    
}

nav li a {
    display: block;
    padding:  20px 0;
    width: 100%;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    color: fff;
}
nav li a:hover{
    background:  #c0c0c0;
}
a:hover{
    opacity: 0.6;
}



/*-----------グラデーションTOP---------------------------------------------------*/
 @import url(https://fonts.googleapis.com/css?family=Bitter);
   body {
      margin: 0;
      font-family: 'Bitter', serif;
      text-align: center;
    
   }

    .holder,
    .first,
    .second,
    .third {
      height: 100vh;
      width: 100vw;
    }
    .first,
    .second,
    .third {
      position: absolute;
    }
    .second,
    .third {
      opacity: 0;
    }
    .holder {
      height: 100vh;
      position: relative;
      z-index: 1;
    }
    .first {
      animation: first 10s infinite;
      background: linear-gradient(#5ff8ca, #60e08c);
      z-index: 10;
    }
      @keyframes first {
        0% {opacity: 1.0;}
        10% {opacity: 0.8;}
        20% {opacity: 0.6;}
        30% {opacity: 0.4;}
        40% {opacity: 0.2;}
        50% {opacity: 0.1;}
        60% {opacity: 0.2;}
        70% {opacity: 0.4;}
        80% {opacity: 0.6;}
        90% {opacity: 0.8;}
        100% {opacity: 1.0;}
      }

    .second {
      animation: second 10s infinite; animation-delay: 2s;
      background: linear-gradient(#19eaa6, #00a1f0);
      z-index: 20;
    }
      @keyframes second {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }

    .third {
      animation: third 10s infinite;
      animation-delay: 8s;
      background: linear-gradient(#aab7f8, #ff75c6);
      z-index: 30;
    }
      @keyframes third {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }

    .txt {
      margin-top: calc(50vh - 43px);
      position: absolute;
      width: 100%;
      z-index: 1000;
    }
.txt h1{
    font-family: 'Orbitron', sans-serif;
    font-size: 50px;
}
   .txt p{
       color: #ff0000;
}
    h1 {
      font-size: 40px;
      font-weight: 400;
      margin: 0;
    }
    p {
      font-size: 20px;
      margin-top: 26px;
    }



ul {
list-style:none;
}

li.first01 {
border: 1px solid #ccc;
width: 120px;
margin-top: 10px;    
margin-left : auto;
margin-right : auto;
}

li.next01 {
width: 120px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-left : auto;
margin-right : auto;
    
}

span.dan {
float: left;    
padding: 10px;
font-size: 0.7em;    
  
}

span.dan2 {
display: block;
margin-left: 80px;

padding: 10px;
border-left: 1px solid #ccc;
background-color: #dcdcdc; 
font-size: 0.7em;    
}　

ul.one{
 list-style:disc;   
}

ul.one li{
    font-size: 28px;
}
.deta{

    margin:0 5px;
	padding:4px 15px;
	border-radius:20px;
	background:linear-gradient(#c0c0c0,#008000);
	color:#ffffff;
}


iframe{
    margin-top: 30px;
    
    
}

p.work{
    margin-top: 0px;
}

p.setumei{
    font-size: 25px;
}

p.name{
    font-size: 25px;
}

hr{
    
    margin-top: 20px;
    margin-bottom: 20px;
}
  
    
iframe{
    width: 100%;
}   
    
    
    
    
    
    
}