@charset "UTF-8";

/* ==================================================================
CSS information
style info :「INDEX」 用
================================================================== */


/*#wrapper { background: url(../_img/index/dotloop.png) top center repeat; }*/
#footer_wrap { background: #000 url(../_common/img/footer_bg.png);}
/* --------------------------------------------------------
#container
-------------------------------------------------------- */
#container { z-index: 2; }

/* --------------------------------------------------------
#mainvisual
-------------------------------------------------------- */
#mainvisual { width: 100%; height: auto; position: relative; }
#mainvisual:before { content: ""; display: block; padding-top: 60.7857%; }
#mv-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

#visual { width: 100%; height: auto; position: absolute; top: 0; left: 0px; z-index: 0; }
#visual img { position: absolute; width: 100%; height: auto;}
#visual .mv2 { position: absolute; top: 0; left: 0;}
@media screen and (min-width: 1601px) {
/*
#mainvisual { width: 1600px; margin: 0 auto; }
*/
/*
#visual { width: 100%; height: auto; position: relative; top: 0; left: inherit; margin-left: inherit; z-index: 0;}
#visual img { width: 100%; height: auto;}
*/
}


/* #mainlogo
-------------------------------------------------------- */
#mainlogo { position: absolute; top: 8.3936%; left: 27.1428%; text-align: center; width: 45.7142%; height: auto; }
#mainlogo img { position: relative; width: 100%; height: auto; }
#maincopy { position: absolute; top: 58.5699%; left: 30.7142%; text-align: center; width: 37.8571%; height: auto; }
#maincopy img { position: relative; width: 100%; height: auto; }
@media screen and (min-width: 1401px) {
#mainlogo { position: absolute; top: 15.3936%; left: 0%; text-align: center; width: 100%; height: auto; }
#mainlogo img { width: 640px; }
#maincopy { left: 0%; text-align: center; width: 100%; height: auto; }
#maincopy img { width: 530px; }
}

/* #boxset
-------------------------------------------------------- */
#boxset { position: absolute; bottom: 7.5507%; left: 17.85625%; max-width: 900px; width: 64.2857%;}
#boxset img { position: relative; width: 100%; height: auto; }
@media screen and (min-width: 1401px) {
#boxset { left: 50%; margin-left: -450px; width: 900px; }
}

/* #infomation
-------------------------------------------------------- */
#infomation { position: relative; border: 1px solid #ffea9c; padding: 1px; max-width: 445px; width: 48.8%; background: #000; margin-bottom: 1.0%;}
#infomation #infomation-inner { position: relative; border: 1px solid #c6b67c; }
#infomation #infomation-inner:after { content: ""; display: block; clear: both; }
#infomation #infomation-inner { zoom:1; }
#infomation .ttl { float: left; }
#infomation .bx-wrapper { max-width: 370px; width: 70.7865%; margin: 0; border-left: 1px solid #9d8741; float: left; height: 29px;}
#infomation .infomation_slider { position: relative; height: 29px;}
#infomation ul li { font-size: 1.2rem; color: #FFF; height: 29px; line-height: 29px; padding-left: 0.5em; overflow: hidden; /*min-width: 365px;*/ padding-right: 10px; }
#infomation ul li .date { display: inline; padding-right: 1em; }
#infomation ul li .text { display: inline; white-space: nowrap; }
#infomation ul li a { text-decoration: underline; color: #FFF;}
#infomation ul li > div { width: 960px;}

#infomation .btn_prev,
#infomation .btn_next { position: absolute; top: 4px; background: #000;}
#infomation .btn_prev { right: 23px;}
#infomation .btn_next { right: 4px;}
#infomation .btn_prev a,
#infomation .btn_next a { display: block; width: 19px; height: 23px; }
#infomation .btn_prev a { background: url(../_img/index/btn_prev.png) no-repeat center center;}
#infomation .btn_next a { background: url(../_img/index/btn_next.png) no-repeat center center;}
#infomation .btn_prev a.disabled,
#infomation .btn_next a.disabled { opacity: 0.5;}

@media screen and (max-width: 1280px) {
#infomation .bx-wrapper { width: 64.7865%; }
}
@media screen and (max-width: 1024px) {
#infomation .bx-wrapper { width: 61.7865%; }
#infomation ul li { font-size: 1.1rem; }
}

/* #bnr_amiibo
-------------------------------------------------------- */
#bnr_amiibo { position: absolute; top: 0; right: 0; z-index: 100; max-width: 440px; width: 48.8889%; }
#bnr_amiibo img { position: relative; width: 100%; height: auto; }
#bnr_amiibo a { display: block; }
#bnr_amiibo_pic_l { position: absolute; bottom: 0px; display: none; opacity: 0; overflow: hidden; z-index: 1;}


/* #speclist
-------------------------------------------------------- */
#speclist { position: relative; border: 1px solid #ffea9c; padding: 1px; max-width: 445px; width: 48.8%; max-height: 134px; height: 30.1123%; background: #000; overflow: hidden;}
#speclist #speclist-inner { position: relative; border: 1px solid #c6b67c; }
#speclist #speclist-inner:after { content: ""; display: block; clear: both; }
#speclist #speclist-inner { zoom:1; }
#speclist .bx-wrapper { max-height: 128px; height: 28.7640%;}
/*#speclist .bx-viewport { height: 128px !important;}*/
#speclist .btn_prev,
#speclist .btn_next { position: absolute; top: 0px; height: 100%;}
#speclist .btn_prev { left: 0px;}
#speclist .btn_next { right: 0px;}
#speclist .btn_prev a,
#speclist .btn_next a { display: block; width: 32px; height: 100%; }
#speclist .btn_prev a { background: url(../_img/index/btn_prev.png) no-repeat center center;}
#speclist .btn_next a { background: url(../_img/index/btn_next.png) no-repeat center center;}
#speclist .btn_prev a.disabled,
#speclist .btn_next a.disabled { opacity: 0.5;}

#speclist .block1 a ,
#speclist .block2 a ,
#speclist .block3 a { display: block; position: absolute; top: 0; left: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; }
#speclist .block1 .link1 { width: 8.2892%; height: 25%; max-width: 32px; max-height: 32px; top: 37.5%; left: 33.3574%;}
#speclist .block1 .link2 { width: 7.1503%; height: 26.7812%; max-width: 27px; max-height: 33px; top: 66.4062%; left: 33.3574%;}
#speclist .block1 .link3 { width: 48.2801%; height: 19.75%; max-width: 205px; max-height: 24px; top: 75.2187%; left: 45.9690%;}

#speclist .block2 .link1 { width: 48.2801%; height: 19.75%; max-width: 205px; max-height: 24px; top: 75.2187%; left: 45.9690%;}

#speclist .block3 .link1 { width: 48.2801%; height: 19.75%; max-width: 205px; max-height: 24px; top: 75.2187%; left: 45.9690%;}

/* #bnr01, #bnr02
-------------------------------------------------------- */
#bnr01, #bnr02 { position: absolute; top: 70.949%; /*max-width: 216px; width: 24%;*/}
#bnr01 { right: 17.11112%; width: 31.55556%; max-width: 284px;}
#bnr02 { right: 0px; width: 16%; max-width: 144px;}

#bnr03 { position: absolute; top: 104%; left: 0%; width: 48.66667%; max-width: 438px;}

#bnr04 { position: absolute; top: 104%; left: 51.4%; width: 48.66667%; max-width: 438px;}


@media screen and (min-width: 1401px) {
#boxset { max-width: none;}
}




/* --------------------------------------------------------
#contents
-------------------------------------------------------- */
#contents { background: url(../_img/index/dot.png); position: relative;}





/* --------------------------------------------------------
#evolution
-------------------------------------------------------- */
#evolution { background: #000; position: relative; height: 469px;}
#evolution #ev-inner { position: absolute; top:0; left: 50%; margin-left: -800px; height: 469px; width: 1600px;}
#evolution #ev-inner img { width: 100%; height: auto;}
#evolution .inner { position: relative; width: 960px; height: 100%; margin: 0 auto; z-index: 100; padding-top: 186px; }

#evolution .copy { margin-left: 406px; margin-bottom: 22px;}
#evolution .text { margin-left: 406px; margin-bottom: 34px;}

#evolution #pager_Custom { position: relative; top: 0; height: 0; z-index: 101;}
#evolution #pager_Custom .bx-pager { letter-spacing: -.45em; width: 100%; text-align: center;}
#evolution #pager_Custom .bx-pager-item { letter-spacing: normal; vertical-align: top; display: inline-block; width: 27px; height: 29px; overflow:hidden; margin: 0 2px; }
#evolution #pager_Custom .bx-pager-item a { display: block; width: 27px; height: 29px; background: url(../_img/index/hdpic_btn.png) no-repeat center center; text-indent: 100%;}
#evolution #pager_Custom .bx-pager-item a:hover,
#evolution #pager_Custom .bx-pager-item a.active { background: url(../_img/index/hdpic_btn_on.png) no-repeat center center; }


/* --------------------------------------------------------
.contents_block
-------------------------------------------------------- */
.contents_block { position: relative; }
.contents_block .inner { position: relative; width: 900px; margin: 0 auto; }

hr { background: url(../_common/img/line.png) center center repeat-x; width: 100%; height: 18px; border: none; margin: 0;}
hr.line { background: url(../_img/index/line_p.png) center center no-repeat; width: 100%; height: 37px; border: none; margin: 0;}



/* #c1
-------------------------------------------------------- */
#c1 {}

#c1 #block1 { height: 441px;}
#c1 #block1 p { position: absolute;}
#c1 #block1 .copy { top: 21px; left: 325px;}
#c1 #block1 .text { top: 151px; left: 325px;}
#c1 #block1 .pic { top: -24px; left: 0;}
#c1 #block1 .pic img { position: relative;}
#c1 #block1 .btn_wolf { top: 308px; left: 559px;}
#c1 #block2 .amiibo_zelda{ top: }

#c1 #block2 { height: 674px;}
#c1 #block2 .subcopy { text-align: center; margin-bottom: 9px; }
#c1 #block2 .picList { position: relative; letter-spacing: -.45em; font-size: 0; text-align: center; margin-bottom: 25px;}
#c1 #block2 .picList li { display: inline-block; letter-spacing: normal; vertical-align: top;}
#c1 #block2 .picList li img { position: relative;}
#c1 #block2 .picList li:nth-child(2) { margin-left: 4px; margin-right: 18px;}
#c1 #block2 .notes { text-align: left; margin-bottom: 20px;}
#c1 #block2 .amiibo_zelda{width:832px;margin: 0 auto;}


/* #c2
-------------------------------------------------------- */
#c2 { padding-top: 57px; height: 327px; }

#c2 .copy { margin-bottom: 24px; }
#c2 .text { }
#c2 .btn { position: absolute; bottom: -55px; left: 569px;}

/* #c3
-------------------------------------------------------- */
#c3 { padding-top: 42px; height: 360px; }

#c3 .copy { margin-bottom: 13px; }
#c3 .text { }
#c3 .picList { position: absolute; top: 0; left: 390px; letter-spacing: -.45em; font-size: 0;}
#c3 .picList li { display: inline-block; letter-spacing: normal; vertical-align: top;}
#c3 .picList li:nth-child(2) { margin-left: 18px; }
#c3 .btn { position: absolute; top: 253px; left: 559px;}

.end_miiverse_txt {
    margin: 20px 0 0;
}

/* #c4
-------------------------------------------------------- */
#c4 { padding-top: 54px; height: 470px; }

#c4 .copy { margin-bottom: 44px; }
#c4 .picList { position: relative; letter-spacing: -.45em; font-size: 0;}
#c4 .picList li { display: inline-block; letter-spacing: normal; vertical-align: top; text-align: center;}
#c4 .picList li:nth-child(2) { margin-left: 64px; margin-right: 64px; }




/* --------------------------------------------------------
#spec
-------------------------------------------------------- */
#spec { width: 100%; position: relative; padding: 14px 0 4px; }
#spec .spec-box { position: relative; width: 900px; margin: 0 auto; }
#spec .spec-box .btnset { position: absolute; top: 0; left: 0;}
#spec .spec-box .btnset li { position: absolute;}
#spec .spec-box .btnset .amiibo { top: 73px; left: 108px;}
#spec .spec-box .btnset .cero { top: 109px; left: 109px;}
#spec .spec-box .btnset .btn_detail { top: 106px; left: 151px;}
#spec .spec-box .btnset .btn_guidebook { top: 115px; left: 151px;}
#spec .spec-box .btnset .btn_sped { top: 123px; left: 424px;}
#spec .spec-box .btnset .btn_amiibo { top: 123px; left: 704px;}


#aptext { width: 900px; margin: 0 auto 20px; color: #FFF; font-size: 1.0rem; padding-left: 25px; }


/* --------------------------------------------------------
#vm_block
-------------------------------------------------------- */
#vm_block {
	position: fixed;
	left: 0; 
	top: 0;
	z-index: 1;
	width: auto; 
	min-width: 100%; 
	height: auto;
	min-height: 100%;
}
#vm_block img { position: absolute; width: 100%; height: auto;}
#vm_block.tablet { position: absolute;}