img {
    max-width: 100%;
    height: auto;   
}
a{
    color: #bcb8a1;
    text-decoration: none;
}
body{
    font:1.1rem/1.8 Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
    color: #d9dbdf;
    background-color: #010507;
    min-width: 960px;
    margin: 0;
    padding: 0;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
header,navi,article,footer{
    max-width: 960px;
    margin:0 auto;
}
header{
    width: 960px;
    height: 540px;
    background-image: url(../img/toppg_hedder.jpg);
    animation: horizontal 1s ease-in-out infinite alternate;
    z-index: 20;
    animation-duration: 1.1s;
}
header img {
    position:absolute;
    top:400px;
    left:10px;
    animation: horizontal 1s ease-in-out infinite alternate;
    animation-duration: 1.3s;
}
#common main{
    min-height: 100vh;
    background-image: url(../img/common_bg_l_01.jpg);
}
navi ul{
    list-style-type:none;
    display: flex;
    justify-content: center;
    padding: 0;
}
navi ul li{
    max-width: 190px;
    margin-right: 0.5%;
    max-height: 48px;
    z-index: 11;
}
navi li:last-child{
    margin-right: 0;
}
#top{
    width: 860px;
    min-height: 968px;
    padding: 50px;
    margin-bottom: 40px;
}
#sum,#gsys,#con,#mem{
    max-width: 860px;
    min-height: 500px;
    padding: 50px;
    margin-bottom: 40px;
    text-align: center;
}
#news{
    max-width: 880px;
    margin-bottom: 100px;
    text-align: center;
    border-bottom: 4px double #bcb8a1;
}
div::-webkit-scrollbar{
  width: 12px;
}
div::-webkit-scrollbar-track{
  background: #000;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 2px #777; 
    margin-bottom: 10px;
}
div::-webkit-scrollbar-thumb{
  background: #aaa;
  border-radius: 10px;
  box-shadow: none;
}
#news dl{
    text-align: left;
}
#news dl+dl{
    width: 98%;
    border-top: dotted 2px #bcb8a1;
    padding: 10px 0;
}
#news dt{
    width: 20%;
    text-align: center;
    background-color: #010507;
    border-radius: 10px;   
}
#news dd{
    margin: 0;
    padding-left: 20px;
}

#top{
    background-image: url(../img/toppj_bg_blu.png);
}
#sum{
    background-image: url(../img/sumpj_bg_main.png);
}
#gsys{
    background-image: url(../img/gsys_bg_main.png);
}
#con{
    background-image: url(../img/conpg_bg_main.png);
    text-align: center;
}
#mem{
    background-image: url(../img/mempj_bg_main.png);
}
#mem dl dt,#mem dl dd{
    width: 250px;
    margin: 0 auto;
    text-align: left;

}
#mem dl dt{
    font-size:1rem;
    margin-bottom: 4px;
    color: #bcb8a1;
}
#mem dl dd{
    font-size:1.3rem;
    text-align: left;
    line-height:1;
    padding-left: 20px;
}
#mem small{
    font-size:0.8rem;
    margin-left: 4px;
}
#mem img{
    margin-left: 4px;
}
@keyframes horizontal {
    0% { transform:translateX( -3px); }
  100% { transform:translateX(  0px); }
}
@keyframes vertical {
    0% { transform:translateY(-10px); }
  100% { transform:translateY(  0px); }
}
#sum_tx1,#sum_tx2,#sum_tx3{
    animation: horizontal 1s ease-in-out infinite alternate;
    z-index: 20;
}
#sum_tx1{
    animation-duration: 1.1s
}
#sum_tx2{
    animation-duration: 1.3s
}
#sum_tx3{
    animation-duration: 1.5s
}
#footer1{
    width: 100%;
    font-size:1rem;
}
#footer1 dl{
    width: 100%;
    margin: 0 auto;
}
#footer1 dt{
    width: 40%;
    display: inline-block;
    text-align: right;
}
#footer1 dd{
    width: 60%;
    margin: 0;
    padding: 0;
    display: inline-block;
    text-align: left;
}
#footer1 img{
    margin: 0 auto;
    vertical-align: bottom;
}
#footer1{
    text-align: center;
    margin: 0 auto;
}
#trydl{
    max-width: 500px;
}
#trydl:hover{
	animation: rumble 0.12s linear infinite;
}
@keyframes rumble{
	0%	{transform:rotate(0deg)	translate(0,0);}
	12.5%	{transform:rotate(0.4deg)	translate(1px,-1px);}
	25%	{transform:rotate(0.8deg)	translate(0px,1px);}
	37.5%	{transform:rotate(0.4deg)	translate(-1px,0);}
	50%	{transform:rotate(0deg)	translate(0,0);}
	62.5%	{transform:rotate(-0.4deg)	translate(1px,0);}
	75%	{transform:rotate(-0.8deg)	translate(0,1px);}
	87.5%	{transform:rotate(-0.4deg)	translate(-1px,-1px);}
	100%	{transform:rotate(0deg)	translate(0,0);}
}
#bg_t1{
    width: 100%;
    position: absolute;
    top: 600px;
    display: block;
    z-index: 10;
}
#bg_t2{
    width: 100%;
    position: absolute;
    top: 80px;
    display: block;
    z-index: 10;
}
#bg_r{
    position: absolute;
    top: 620px;
    left: -webkit-calc( 100% - 156px );
    left: calc( 100% - 156px );
    display: block;
    z-index: 9;
}
#bg_l1{
    position: absolute;
    top: 600px;
    right: -webkit-calc( 100% - 167px );
    right: calc( 100% - 167px );
    display: block;
    z-index: 9;
}
#bg_l2{
    position: absolute;
    top: 1500px;
    right: -webkit-calc( 100% - 140px );
    right: calc( 100% - 140px );
    display: block;
    z-index: 9;
}
#tw1{
    width: 860px;
    height: 960px;
    text-align: center;
}
#bg_eyedrops{
    position: absolute;
    top: 1190px;
    right: -webkit-calc( 100% - 260px );
    right: calc( 100% - 260px );
    display: block;
}
#btn_tw{
    position: absolute;
    top: 0;
    display: block;
    z-index: 50;
}
#btn_pr{
    position: absolute;
    top: 0;
    left: 100px;
    display: block;
    z-index: 50;
}
#gsys_ss{
    text-align: center;
}
/* スクリーンショット拡大 */
.lb {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.7);
    opacity: 0;
    transition: .3s opacity ease;
    z-index: -1;
}

.lb img {
    width: auto !important;
    max-height: 100%!important;
    transform: scale(.7);
    transition: .4s transform ease;
    pointer-events: none;
}

.lb:target {
    opacity: 1;
    z-index: 103;
}

.lb:target img {
    transform: scale(1);
}

/* スクリーンショット拡大 閉じるボタン */
.lb::before,.lb::after {
    display: block;
    position: fixed;
    content: "";
    width: 50px;
    height:3px;
    top: 60px;
    right: 60px;
    background: #fff;
    border-radius: 4px;
}
.lb::before {
    transform: rotate(-315deg);
}
.lb::after {
    transform: rotate(315deg);
}

/* entrance */
.entrance{
    max-width: 500px;
    height: 400px;
    padding: 40px 0;
    background-color: rgba(0,0,0,0.8);
    border-radius: 14px;
    box-shadow: 0 0 30px #000;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
}
#entrance{
    min-height: 100vh;
    background: url(../img/entrance_bg.jpg) center top no-repeat;
    background-size:cover;
    width: 100vw;
    min-height: 900px;
    overflow: hidden;
}
#entrance p{
    margin-top: 40px;
}
.entbutton{
    margin:20px auto 0 auto;
    text-align:center;
    font-size: 20px;
    padding:10px 0;
    border: 1px solid #bcb8a1;
    border-radius: 6px;
    position: relative;
    display:block;
    width: 50%;
    color:#bcb8a1;
}
.entbutton:hover{
  background:RGBA(150, 130, 100, .30)
}

@keyframes distort-1 {
    0% {
        clip: rect(25px, 9999px, 58px, 0)
    }

    5% {
        clip: rect(88px, 9999px, 21px, 0)
    }

    10% {
        clip: rect(94px, 9999px, 28px, 0)
    }

    15% {
        clip: rect(23px, 9999px, 61px, 0)
    }

    20% {
        clip: rect(20px, 9999px, 47px, 0)
    }

    25% {
        clip: rect(56px, 9999px, 46px, 0)
    }

    30% {
        clip: rect(100px, 9999px, 18px, 0)
    }

    35% {
        clip: rect(32px, 9999px, 61px, 0)
    }

    40% {
        clip: rect(51px, 9999px, 26px, 0)
    }

    45% {
        clip: rect(43px, 9999px, 28px, 0)
    }

    50% {
        clip: rect(90px, 9999px, 26px, 0)
    }

    55% {
        clip: rect(5px, 9999px, 4px, 0)
    }

    60% {
        clip: rect(20px, 9999px, 69px, 0)
    }

    65% {
        clip: rect(28px, 9999px, 44px, 0)
    }

    70% {
        clip: rect(33px, 9999px, 73px, 0)
    }

    75% {
        clip: rect(57px, 9999px, 88px, 0)
    }

    80% {
        clip: rect(25px, 9999px, 69px, 0)
    }

    85% {
        clip: rect(92px, 9999px, 60px, 0)
    }

    90% {
        clip: rect(49px, 9999px, 4px, 0)
    }

    95% {
        clip: rect(24px, 9999px, 92px, 0)
    }

    100% {
        clip: rect(89px, 9999px, 82px, 0)
    }
}

.effect_glitch:hover:after {
    content: attr(data-text);
    position: absolute;
    width:100%;
    top:100%;
    left:-2px;
    padding-top:14px;
    display:block;
    color: #968266;
    text-shadow: -0px 0 rgba(188, 243, 57,.9);
    top: 0;
    background: transparent;
    overflow: hidden;
    clip: rect(0, 100px, 0, 0);
    animation: distort-1 1s forwards linear alternate-reverse;
-webkit-animation: distort-1 1s forwards linear alternate-reverse;
      
}
@keyframes distort-2 {
    0% {
        clip: rect(61px, 9999px, 86px, 0)
    }

    5% {
        clip: rect(64px, 9999px, 36px, 0)
    }

    10% {
        clip: rect(17px, 9999px, 78px, 0)
    }

    15% {
        clip: rect(89px, 9999px, 92px, 0)
    }

    20% {
        clip: rect(18px, 9999px, 90px, 0)
    }

    25% {
        clip: rect(55px, 9999px, 54px, 0)
    }

    30% {
        clip: rect(78px, 9999px, 77px, 0)
    }

    35% {
        clip: rect(30px, 9999px, 98px, 0)
    }

    40% {
        clip: rect(72px, 9999px, 39px, 0)
    }

    45% {
        clip: rect(94px, 9999px, 89px, 0)
    }

    50% {
        clip: rect(18px, 9999px, 40px, 0)
    }

    55% {
        clip: rect(54px, 9999px, 91px, 0)
    }

    60% {
        clip: rect(46px, 9999px, 77px, 0)
    }

    65% {
        clip: rect(45px, 9999px, 27px, 0)
    }

    70% {
        clip: rect(12px, 9999px, 63px, 0)
    }

    75% {
        clip: rect(96px, 9999px, 8px, 0)
    }

    80% {
        clip: rect(96px, 9999px, 10px, 0)
    }

    85% {
        clip: rect(26px, 9999px, 68px, 0)
    }

    90% {
        clip: rect(64px, 9999px, 23px, 0)
    }

    95% {
        clip: rect(31px, 9999px, 63px, 0)
    }

    100% {
        clip: rect(27px, 9999px, 6px, 0)
    }
}
.effect_glitch:hover:before {
    content: attr(data-text);
    position: absolute;
    text-align:center;
    left:-20px;
    top:0;
    padding:10px;
    width:100%;
    height:100%;
    color: #968266;
    text-shadow: 3px 0 RGBA(18, 1, 32,.5);
    top: 0;
    background: transparent;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: distort-2 1s forwards linear alternate-reverse
}