/*PC用内容ページ*/
body, html{
    margin: 0;
    font-family: sans-serif;
    color:white;
    font-size: 100%;
/*background-color: rgba(0,0,0,0);*/
    background-size: 100%;
    padding: 0;
    box-sizing: border-box;
}
body{
    height: 100%;
    width: 100%;
position: absolute;
            background: url("../img/assets/basd.jpg");
                background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: black;
}
#002{
    border-bottom: solid 2px rgb(75,79,81);
}
#hack {
	width:			1000px;
        max-width: 100%;
        min-width: 80%;
        box-sizing: border-box;
	height:			auto;
	overflow:		hidden;
	margin:			0 0 0 0;
	position:		relative;
        margin-left: auto;
        margin-right: auto;
/*        margin-top: 8%;*/
        background-color: black;
        padding-bottom: 0;
        padding-top: 0;
        z-index: 2;
        border-radius: 2vw;
        display: block;
        box-sizing: border-box;
}
#hack #caption {
	font-size:		1.5vw;
	text-align: 		center;
	color:			#fff;
        padding-top: 5%;
}
#hack #hackyou {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(74, 148, 186,0.5);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
        padding-top: 20%;
        display: none;
}
#hack:hover #hackyou {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}
#title{
    height: auto;
    border-radius: 1vw;
    min-width: 71%;
    max-width: 100%;
    width: 900px;
    background-color: white;
/*    position: absolute;*/
    margin-top: -9%;
/*    top:auto;*/
    margin-left: auto;
    margin-right: auto;
    color: black;
    padding-left: 1%;
    padding-top: 0.5%;
    padding-bottom: 1%;
    z-index: 5;
    box-sizing: border-box;
    position: relative;
}
#TTTitle{
    font-size: 3.7vw;
    
    text-align: center;
}
#sharp{
    margin-bottom: -2.5%;
    user-select: none;
}
#marui{
    user-select: none;
}
#maru{
    border-radius: 50%;
    height: 100px;
    width: 100px;
    background-color: black;
}
#menu {
  width:93%;
  padding: 0;
  margin: 0;
  list-style-type: none;
  height: 100%;
/*  position: relative;*/
  top: 0;
  
}
#menu li {
  width:16.6666666666666%;
  float:left;
  padding:0;
  margin:0;    
  text-align:center;
  height:100%;
}
#menu li a {
  width:auto;
  text-shadow:0 -1px 0px #333,0 1px 0px #555;
  padding: 0;
  text-decoration:none;
    text-align: center;
    transition: 0.3s background-position;
    background-size: 200% auto;
    color: cyan; 
    font-size: 1.1vw;
    height:100%;
    position: relative;display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */
}
    ul#menu  li ul{
        height: 0;
        width: 0;
        margin: 0;
        padding: 0;
        top: 0;
        position: absolute;
        z-index: -1;
        width: 15.5%;
/*   animation: fadeout 0.3s linear 0s 1;*/
          list-style-type: none;
        
    }
    ul#menu li:hover ul{
        display: block;
          animation: drp 0.3s linear 0s;
          z-index: 100;
          width: 15.5%;
          top: 100%;
      
    }
    @keyframes drp{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
    ul#menu li ul li a{
        color: white;
          text-decoration:none;
            width:auto;
/*  font-size:15px;*/
/*  font-weight:bold;*/
  text-shadow:0 -1px 0px #333,0 1px 0px #555;
  padding: 0;
  text-decoration:none;
/*  display:block;*/
    text-align: center;
    transition: 0.3s background-position;
    background-size: 200% auto;
    color: cyan; 
/*    font-size: 1.1vw;*/
    height:100%;
    position: relative;display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */
    }
    ul#menu li ul.two li{
  width:100%;
  height: 45%;
  float:left;
  padding:0;
  margin:0;    
  text-align:center;
  transition: 0.3s;
    }
    ul#menu li ul li:hover{
        background-color: #171717
    }
    .two{
        height: 150%;
          border-radius: 0 0 1vw 1vw;
          background-color: #262626;
 
}
ul#menu li:hover ul.two{
    height: 150%;
}
    .three{
        height: 200%;
          border-radius: 0 0 1vw 1vw;
          background-color: #262626;
 
}

ul#menu li:hover ul.three{
    height: 220%;
}
   ul#menu li ul.three li{
  width:100%;
  height: 31%;
  float:left;
  padding:0;
  margin:0;    
  text-align:center;
  transition: 0.3s;
    }
        .four{
        height: 270%;
          border-radius: 0 0 1vw 1vw;
          background-color: #262626;
 
}
ul#menu li:hover ul.four{
    height: 290%;
}
   ul#menu li ul.four li{
  width:100%;
  height: 23.5%;
  float:left;
  padding:0;
  margin:0;    
  text-align:center;
  transition: 0.3s;
    }
           .five{
        height: 340%;
          border-radius: 0 0 1vw 1vw;
          background-color: #262626;
 
}
ul#menu li:hover ul.five{
    height: 360%;
}
   ul#menu li ul.five li{
  width:100%;
  height: 19%;
  float:left;
  padding:0;
  margin:0;    
  text-align:center;
  transition: 0.3s;
    }
#menu0,#menu2,#menu4{
    background-image: linear-gradient(to right, #4c4c4c, black,#4c4c4c );
}
#menu0:hover,#menu2:hover,#menu4:hover {
    background-position: -100% 0%; 
}
#menu1,#menu3,#menu5{
    background-image: linear-gradient(to right,black, #4c4c4c, black);
}
#menu1:hover,#menu3:hover,#menu5:hover{
    background-position: right center;
}
#JEbutton{
 width:7%;
 background-color: #052633;
   height: 100%;
 margin: 0;
position: absolute;
padding: 0;
top: 0;
right:  0;
}
#JEbutton a{
    width: 100%;
    height: 100%;
float: left;
 text-decoration: none;
 position: relative;display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */  color: white;
    text-decoration: none;
    text-align:center;
     transition: 0.5s;
     user-select: none;
     font-size: 1em;
}
#JEbutton a:hover{
    background-color: #21429e;
}
#naiyou{
    background-color: black;
    color: white;
    width: 1000px;
    min-width: 80%;
    max-width: 100%;
    margin-top:0;
    padding: 3% 3% 3% 3%;
    height:100%;
    display: block;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 0;
    position: static;
    top: 0;
}
#header{
    background-color: #052633;
    height:10%; 
    width: 100%;
    margin-top: 0;
    margin-bottom: 3%;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    position: relative;
    display: block;
}
#border1{
    display: block;
    margin-left: 11%;
    top: auto;
    height: 38%;
    margin-top: -15%;
    margin-bottom: -1%;
    z-index: 1;
}
.content{
    height: auto;
    border-radius: 1vw;
    line-height: 1.8em;
    width: 1000px;
    min-width: 80%;
    max-width: 100%;
    background-color: white;
    margin-top: 0.8%;
margin-left: auto;
margin-right: auto;
    margin-bottom: 0;
    color: black;
    padding-left: 2%;
    padding-top:  1%;
    padding-bottom: 2%;
    padding-right: 2%;
    z-index: 3;
    font-size: 1.1em;
    display: block;
    box-sizing: border-box;
}
.contenttt{
    text-shadow: 0.1vw 0.1vw 0 #000,
             -0.1vw 0.1vw 0 #000,
             0.1vw -0.1vw 0 #000,
             -0.1vw -0.1vw 0 #000;
    color: #2ea3ea;
    font-weight: bold;
    font-size: 2.3vw;
    margin-left: 16%;
    margin-top: -2%;
    font-family: sans-serif;
}
.sen{
    border-top: 0.7vw solid white;
    width: 2.5%;
    margin-left: 15.4%;
    margin-top: -0.8%;
}
#footer{
    display: block;
    background-color: #323232;
    color: white;
    margin-top: 5%;
    text-align: center;
    font-weight: normal;
    text-decoration: none;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
}
#footer > a{
    font-weight: normal;
    font-size: 1em;
    color: white;
}
#bottom{
    margin: 0;
    padding: 0;
}
.backtotop {
position: fixed;
bottom:7%;
right:5%;
height: auto;
width : 50px;
padding: 0;
margin: 0;
/*top: 85%;
left: 95%;
*/z-index: 100;
display: block;
vertical-align: top;
   -ms-user-select: none; /* IE 10+ */
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
   font-size: 0;
  box-sizing: border-box;
}
#warn{
    opacity: 0;
    position: absolute;
    top: -100%;
}
#dousa{
    font-size: 0.8em;
    color:    #b9b9b9;
}
    .square_btn{
        display: inline-block;
        padding: 0.5em 1em;
        text-decoration: none;
        background: #668ad8;
        color: #fff;
        border-bottom: solid 4px #627295;
        border-radius: 3px;
    
    }
    .square_btn:active{
        -ms-transform: translateY(4px);
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
        border-bottom: none;
    }
    
.highlight {
    background: linear-gradient(transparent 50%, #ffff66 0%);
    line-height: 1.3em;
}
video{
    max-width: 100%;
}
img{
    max-width: 100%;
}
iframe{
    max-width: 100%;
}
    @media screen and (max-width: 1200px) {
        #menu li a{
            font-size: 0.8em;
        }
        #JEbutton{
            font-size: 0.8em;
        }
}
    @media screen and (max-width: 1000px) {
        #menu li a{
            font-size: 0.69em;
        }
        #JEbutton{
            font-size: 0.69em;
        }
        #TTTitle{
            font-size: 3em;
        }
                #dousa{
            display:none;
        }
}
@media screen and (max-width: 700px) {
        #menu li a{
            font-size: 0.7em;
        }
        #JEbutton{
            font-size: 0.6em;
        }
        .backtotop{
            position: fixed;
            bottom: 5%;
            right: 0;
            
            width: 45px;
        }
        #dousa{
            font-size: 0.6em;
        }
        #TTTitle{
            font-size: 2em;
        }
}
.box6 {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #f0f8ff;
    border: dashed 3px #7cfc00;
}
.box6 p {
    margin: 0; 
    padding: 0;
}