@charset "utf-8";

@import "style.css";

@import "font.css";

@import "fade.css";

@import"https://fonts.googleapis.com/earlyaccess/notosansjapanese.css";

@import"https://fonts.googleapis.com/earlyaccess/sawarabimincho.css";


/*--------------------初期化--------------------*/

html,body{
width:100%;
-webkit-appearance: none;
}

body{
font-size:0px;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'ヒラギノ角ゴ Pro W3',Hiragino Kaku Gothic Pro,Noto Sans Japanese,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
background: #000;
color:#fff;
}

body {
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}
}


*{
margin:0px;
padding:0px;
box-sizing:border-box;
outline: 0;
}

ul,li{
list-style:none;
}

ul{
width:100%;
display: table;
table-layout: fixed;
}

li{
display: table-cell;
}

img{
max-width:100%;
display:block;
}

a{
transition: 0.2s;
text-decoration: none;
}

a:hover{
cursor:pointer;
}

.center{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

div.contener{
width:100%;
max-width: 700px;
margin: 0px auto;
overflow: hidden
}

.w90{
width:90%;
margin: 0px auto;
}

.w80{
width:80%;
margin: 0px auto;
}

.mb5{
margin-bottom: 5px!important;
}

.mb10{
margin-bottom: 10px!important;
}

.mb20{
margin-bottom: 20px!important;
}

.mb30{
margin-bottom: 30px!important;
}

.mb40{
margin-bottom: 40px!important;
}

.mb50{
margin-bottom: 50px!important;
}

.mb60{
margin-bottom: 60px!important;
}

.mb100{
margin-bottom: 100px!important;
}

section{
position: relative;
}

span.black_screen{
width:100%;
height:100%;
position: absolute;
display: block;
background: rgba(0,0,0,1);
top:0px;
left:0px;
z-index: 1
}

a.more{
display:block;
margin: 0px auto;
color:#fff;
text-align: center;
background-size: 15px;
font-weight: 700;
font-size:15px;
padding: 8px 0px 8px 10px;
}

figure.black_box{
width: 100%;
height: 100%;
background: #000;
position: absolute;
top:0px;
left:0%;
z-index: 1;
}

figure.white_box{
width: 100%;
height: 100%;
background: #fff;
position: absolute;
top:0px;
left:0%;
z-index: 1;
}

.parts{
display: block;
position: absolute;
width: 100%;
top:0px;
left:0px;
}

/*--------------------ドット--------------------*/

div.dot{
background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.5), rgba(0,0,0,.5) 1px, transparent 1px, transparent 100%);
background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.5), rgba(0,0,0,.5) 1px, transparent 1px, transparent 100%);
background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.5), rgba(0,0,0,.5) 1px, transparent 1px, transparent 100%);
background-image: repeating-radial-gradient(center center, rgba(0,0,0,.5), rgba(0,0,0,.5) 1px, transparent 1px, transparent 100%);
background-size: 3px 3px;
position: absolute;
top:0px;
left:0;
width:100%;
height:100%;
}

div.screen{
position: absolute;
top:0px;
left:0;
width:100%;
height:100%;
background: #000;
mix-blend-mode: overlay;
}

/*--------------------ハンバーガー―メニュー--------------------*/

a.menu-trigger,
a.menu-trigger span {
display: inline-block;
transition: all .4s;
}

a.menu-trigger {
position: absolute;
width: 34px;
height: 12px;
right: 0px;
top:50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

a.menu-trigger span {
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: #fff;
}

a.menu-trigger span:nth-of-type(1) {
top: 0;
}

a.menu-trigger span:nth-of-type(2) {
bottom: 0px;
}

a.menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(5px) rotate(-45deg);
transform: translateY(5px) rotate(-45deg);
}

a.menu-trigger.active span:nth-of-type(2) {
-webkit-transform: translateY(-5px) rotate(45deg);
transform: translateY(-5px) rotate(45deg);
}

/*--------------------ローディング--------------------*/

div.loadingWrap{
width: 100%;
height: 100%;
background: #000;
position: fixed;
top: 0;
left: 0;
z-index:9999;
}

div.loadingWrap img{
width:30%;
}

/*--------------------news--------------------*/

div.news{
position: fixed;
padding: 20px 0px 20px 0px;
width: 84%;
max-width: 650px;
background: rgba(255,255,255,0.95);
top:50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 20;
text-align: center;
font-size:12px;
color:#000;
line-height: 1.8;
font-weight: bold;
display: none;
}

p.news{
font-size: 140%;
}

img.close_icon{
width: 30px;
position: absolute;
right: -15px;
bottom: -15px;
}