/*----------------------
standard setting 
-----------------------*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}

* {
	margin: 0;
	padding: 0;
}

html, body	{
	height:100%;
    width:100%;
    background:#fff;
    
    font-family: 'Noto Sans JP', '游ゴシック' , 'Yu Gothic' , '游ゴシック体' , 'YuGothic' , 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'Meiryo UI' , 'メイリオ' , Meiryo , 'ＭＳ Ｐゴシック' , 'MS PGothic' , sans-serif;
	font-size: 62.5%;
	font-weight: 400;
	line-height: 1.8em;
	color: #555;
    
}

html {
}

body {
    background: url(../image/bg.jpg) no-repeat;
    background-position: center center;
    background-size: cover;
}

img {
	border: 0;
	outline: none;
}

/*----------------------
contents setting 
-----------------------*/

#wrap {
    width:100%;
	height: 100%;
    height:calc(100% - 41px);
    overflow:hidden;
    position: relative;
}

#contentsWrap {
	position:absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%,-50%);
    width:70%;
    max-width:1200px;
	z-index: 10;
    text-align: center;
    display: block;
}

#contentsWrap #logo{
	width: 59%;
	height:auto;
}

#video{
    width:100%;              /*横幅いっぱいにwidthを指定*/
    padding-bottom: 56.25%;  /*高さをpaddingで指定(16:9)*/
    height:0px;              /*高さはpaddingで指定するためheightは0に*/
    position: relative;
}

#video .f_tl,
#video .f_tc,
#video .f_tr,
#video .f_ml,
#video .f_mr,
#video .f_bl,
#video .f_bc,
#video .f_br{
    position:absolute;
    z-index: 1000;
}

.f_tl{
    top:0;
    left:0;
    width:12px;
    height: auto;
}
.f_tc{
    margin: auto;
    top:0;
    left:0;
    right:0;
    width:72px;
    height: auto;
}
.f_tr{
    top:0;
    right:0;
    width:12px;
    height: auto;
}
.f_ml{
    margin: auto;
    top:0;
    left:0;
    bottom:0;
    width:7px;
    height: auto;
}
.f_mr{
    margin: auto;
    top:0;
    right:0;
    bottom:0;
    width:7px;
    height: auto;
}
.f_bl{
    bottom:0;
    left:0;
    width:12px;
    height: auto;
}
.f_bc{
    margin: auto;
    bottom:0;
    left:0;
    right:0;
    width:72px;
    height: auto;
}
.f_br{
    bottom:0;
    right:0;
    width:12px;
    height: auto;
}


#video iframe{
    position: absolute;
    top: 0;
    right: 0;
    left:0;
    bottom:0;
    width: 100% !important;
    height: 100% !important;
    margin:auto;
    overflow:hidden;
    box-sizing: border-box;
    border:solid 5px;
    border-image-source:url("../image/f_bg_line_video.jpg");
    border-image-slice:10;
}


a.btn_dq{
    margin: 50px auto 0 auto;
    width:100%;
    max-width: 550px;
    height: auto;
    display: block;
    transition:all 0.2s ease-out 0s;
}

a.btn_dq:hover{
opacity: 0.6;
transform:translateX( 5px );
}

a.btn_dq img{
    width:100%;
}




#ftrWrap {
    padding:0;
	height: 60px;
    width: 100%;
	position: absolute;
	bottom: 0;
	z-index: 0;
    background:url(../image/f_bg.jpg) repeat;
    background-size: 325px 280px;
    box-sizing: border-box;
}
#ftrWrap:before {
  content: '';
  width: 100%;
  height:10px;
  display: block;
  background:url(../image/f_bg_top.png);
  background-size: 2000px 10px;
  background-position: center top;
}

ul#ftrContents{
    padding:0 10px;
    width:100%;
    box-sizing: border-box;
}

ul#ftrContents:after {
    content:"";
    display:block;
    clear:both;
}

ul#ftrContents li{
    float:left;
    height: 42px;
    display: block;
}

ul#ftrContents li img{
    height:100%;
    width: auto;
}

ul#ftrContents li a{
    height:100%;
    width: auto;
    display: block;
    transition:all 0.2s ease-out 0s;
}

ul#ftrContents li a:hover{
opacity: 0.6;
transform:translateX( 5px );
}

ul#ftrContents li#nd {
    float:right; 
}

#ftrWrap .btnNintendo:hover,
#ftrWrap .btnBackNumber:hover{
    opacity: 0.6;
}


/*--------------------------------------------------------------------------
    Media Queries
--------------------------------------------------------------------------*/


/*--------------------------
    within 900px for tb & wiiu
----------------------------*/
@media screen and (max-width: 900px) {
    
    ul#ftrContents{
        margin:0;
        padding:6px 6px 6px 0;
    }
    
    ul#ftrContents li{
        height: 35px;
    }

}


/*--------------------------
    within 640px for sp
----------------------------*/ 
@media screen and (max-width: 640px) {

    body{
        min-height:inherit;
        height: auto;
    }
    #wrap{
        height:auto;
        overflow-x: hidden;
        overflow-y: auto;
    }
    
    #contentsWrap {
        margin:60px auto 20px auto;
        padding:0;
        position:inherit;
        bottom:0;
        top:0;
        width: 100%;
        height: auto;
        max-height:none;
    }
    
    #contentsWrap {
        margin:60px auto 60px auto;
        position:inherit;
        bottom:0;
        width: 90%;
        transform: translate( -55.5%, 0% );
        max-width:none;
        text-align: center;
        display: block;
    }

    #video{
        width:100%;              /*横幅いっぱいにwidthを指定*/
        padding-bottom: 56.25%;  /*高さをpaddingで指定(16:9)*/
        height:0px;              /*高さはpaddingで指定するためheightは0に*/
        position: relative;
    }

    #video iframe{
        position: absolute;
        top: 0;
        right: 0;
        left:0;
        bottom:0;
        width: 100% !important;
        height: 100% !important;
        margin:auto;
    }
    
    #contentsWrap #logo{
        margin-bottom:50px;
        width: 90%;
        height:auto;
    }
    
    a.btn_dq{
        margin:20px auto 20px auto;
        width:90%;
        display: block;
        position:inherit;
        bottom:0px;
        right:0px;
        transition:none;
    }

    a.btn_dq:hover{
        opacity: 0.8;
        transform:none;
    }

    
    #ftrWrap {
        height:auto;
        width: 100%;
        position:inherit;
        z-index: 20;
        transition: none;
    }

    ul#ftrContents{
        padding:0;
        height: auto;
        width:100%;
        overflow:inherit;
        box-sizing: border-box;
    }

    ul#ftrContents li{
        height:inherit;
        float:left;
    }
    
    ul#ftrContents li img{
        height:100%;
        width: auto;
    }

    ul#ftrContents li#nd {
        padding:15px 0 15px 0;
        clear: both;
        float:none;
        text-align: center;
        width: 100%;
        background-size: 1px 5px;
        text-align: center;
    }
    
    ul#ftrContents li#nd a{
        margin:0 auto;
        width:60%;
        height: auto;
    }
    
    ul#ftrContents li#nd a img{
        width:100%;
        height: auto;
    }

}