@charset "utf-8";

@import "style.css";

@import "font.css";

@import "fade.css";

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

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

body{
width:100%;
height:100%;
font-size:0px;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Hiragino Kaku Gothic ProN W6', 'ヒラギノ角ゴ ProN W6';
font-weight: 500;
background: #000  url("https://www.transparenttextures.com/patterns/cross-stripes.png");
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;
color:#464646;
}

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;
}

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

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

.w60{
width:60%!important;
margin: 0px auto!important;
}

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

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

.mb15{
margin-bottom: 15px!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;
}

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.menu-trigger,
a.menu-trigger span {
display: inline-block;
transition: all .4s;
}

a.menu-trigger {
position: absolute;
width: 16px;
height: 16px;
top:19px;
left:19px;
}

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

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

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

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

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




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

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: rgba(0,0,0,0.6);
}



/*--------------------パン屑--------------------*/

ul.breadcrumb {
width:80%;
padding: 15px 0px 15px 15px;
font-size: 12px;
margin-bottom: 10px
}

.breadcrumb li{
display:inline;/*横に並ぶように*/
list-style: none;
}

.breadcrumb li:after{/* >を表示*/
font-family: FontAwesome;
content: '\f101';
padding: 0 3px;
color:#dcdcdc
}

.breadcrumb li:last-child:after{
content: '';
}

.breadcrumb li a {
text-decoration: none;
color: #999;
}

.breadcrumb li:first-child a:before{/*家アイコンに*/
font-family: FontAwesome;
content: '\f015';
font-weight: normal;
font-size: 1.1em;
color:#dcdcdc
}

.breadcrumb li a:hover {
text-decoration: underline;
}



/*--------------------点滅--------------------*/

.top_blinking {
    -webkit-animation: 0.5s linear 0s alternate none infinite running top_blinking;
    -moz-animation: 0.5s linear 0s alternate none infinite running top_blinking;
    animation: 0.5s linear 0s alternate none infinite running top_blinking;
}
@-webkit-keyframes top_blinking {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@-moz-keyframes top_blinking {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes top_blinking {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
 

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

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

div.loadingWrap img{
width:100px;
}