@charset "UTF-8";

/* ========================================
	common
======================================== */
/* content */
.content {
	background: url(../images/koopa/kuppa_bg.jpg) repeat 0 0;
}

/* main */
.main {
	width: 100%;
	height: 805px;
	background: url(../images/koopa/main_bg.jpg) repeat-x 0 0;
}
.main_curtain1 {
	position: absolute;
	top:0;
	left: 0;
}
body.is-tablet .main_curtain1 {
	display: none;
}
.main_curtain2 {
	position: absolute;
	top:0;
	right: 0;
}
body.is-tablet .main_curtain2 {
	display: none;
}
.main_box1 {
	position: relative;
	width: 1414px;
	padding-left: 56px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.main_box1 .main_chara {
	position: absolute;
	top: 61px;
}
.main_box1 .main_star1 {
	position: absolute;
	top: 64px;
	left: 112px;
}
.main_box1 .main_star2 {
	position: absolute;
	top: 64px;
	right: 140px;
}
.main_box1 .main_logo {
	position: absolute;
	top: 38px;
	left: 474px;
}
.main_box1 .main_txt1 {
	position: absolute;
	top: 404px;
	left: 466px;
}
.main_box1 .main_txt2 {
	position: absolute;
	top: 577px;
	left: 369px;
}

/* lnav */
.lnav {
	width: 860px;
	margin: 0 auto;
	padding: 82px 0 59px;
	background-color: #fff;
}
.lnav_item {
	position: relative;
	float: left;
	margin: 0 36px 0 0;
}
.lnav_item:last-child {
	margin-right: 0;
}
.lnav_item a {
	display: block;
	position: relative;
}
.lnav_item a:after {
	content: '';
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
		url(../images/koopa/hover_lefttop.png) left top no-repeat,
		url(../images/koopa/hover_righttop.png) right top no-repeat,
		url(../images/koopa/hover_rightbottom.png) right bottom no-repeat,
		url(../images/koopa/hover_leftbottom.png) left bottom no-repeat;
}
body:not(.is-tablet) .lnav_item a:hover {
	display: block;
}
body:not(.is-tablet) .lnav_item a:hover:after {
	display: block;
	-webkit-animation: menuHover 500ms steps(2) infinite;
	animation: menuHover 500ms steps(2) infinite;
}
.lnav_item .lnav_chara1 {
	position: absolute;
	top: -26px;
	right: 18px;
}
.lnav_item .lnav_chara2 {
	position: absolute;
	top: -50px;
	right: 14px;
}


/* ========================================
	クッパ軍団の物語
======================================== */
/* main_box2 */
.main_box2 {
	position: absolute;
	top: 618px;
	left: 0;
	width: 100%;
	height: 184px;
	background: url(../images/koopa/main_cap_bg.png) repeat-x 0 0;
}
.main_box2 .main_cap {
	width: 100%;
	height: 160px;
	margin-top: 11px;
	background: url(../images/koopa/main_cap.jpg) repeat-x 0 0;
	background-position: 0 0;
	-webkit-animation: capflow 40s linear infinite;
	animation: capflow 40s linear infinite;
}
@-webkit-keyframes capflow {
	0% {
		background-position: -2199px 0;
	}
	100% {
		background-position: 0 0;
	}
}
@keyframes capflow {
	0% {
		background-position: -2199px 0;
	}
	100% {
		background-position: 0 0;
	}
}

/* about */
.about {
  position: relative;
	width: 1104px;
	height: 1738px;
	margin: 20px 0 52px;
	padding: 95px 22px 22px 22px;
	background: url(../images/koopa/about_bg.png) no-repeat 0 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.about_inner {
	overflow: hidden;
	position: relative;
	width: 1060px;
	height: 1620px;
}
.about_ttl {
	position: relative;
	padding: 71px 0 35px;
	background: url(../images/koopa/about_ttl_bg.png) no-repeat 50% 29px;
	text-align: center;
}
.about_txt {
	margin-bottom: 44px;
	text-align: center;
}
.about_koopa {
	position: absolute;
	top: 30px;
	left: -245px;
	transition: left 300ms;
}
.no-js .about_koopa,
.about_koopa.is-animation {
	left: -97px;
}
.about_star {
	position: absolute;
	top: 286px;
	right: 1px;
}
.about_chara {
	position: relative;
	width: 963px;
	margin: 0 auto;
}

.about_chara_item {
	position: absolute;
}
.about_chara_item_inner {
	position: relative;
	width: 480px;
	height: 600px;
}
.about_balloon_animation {
	transform: scale(0.7) translate(-40px, -40px);
	opacity: 0;;
	transition: opacity 200ms, transform 300ms;
}
.no-js .about_balloon_animation,
.about_balloon_animation.is-animation {
	transform: scale(1) translate(0, 0);
	-webkit-transform: scale(1) translate(0, 0);
	opacity: 1;
}
.about_chara1_item {
	top: 0;
	left: 0;
	background: url(../images/koopa/about_chara1_bg.png) no-repeat 0 0;
}
.about_chara1_data {
	position: absolute;
	top: 35px;
	right: 19px;
}
.about_chara1_img {
	position: absolute;
	top: 20px;
	left: 23px;
}
.about_chara1_balloon {
	position: absolute;
	top: 336px;
	left: 45px
}

.about_chara2_item {
	top: 0;
	left: 483px;
	background: url(../images/koopa/about_chara2_bg.png) no-repeat 0 0;
}
.about_chara2_data {
	position: absolute;
	top: 35px;
	right: 21px;
}
.about_chara2_img {
	position: absolute;
	top: 20px;
	left: 22px;
}
.about_chara2_balloon {
	position: absolute;
	top: 336px;
	left: 65px;
	transition-delay: 250ms, 250ms;
}

.about_chara3_item {
	top: 603px;
	left: 0;
	background: url(../images/koopa/about_chara3_bg.png) no-repeat 0 0;
}
.about_chara3_data {
	position: absolute;
	top: 35px;
	right: 19px;
}
.about_chara3_img {
	position: absolute;
	top: 48px;
	left: 25px;
}
.about_chara3_balloon {
	position: absolute;
	top: 317px;
	left: 45px;
}

.about_chara4_item {
	top: 603px;
	left: 483px;
	background: url(../images/koopa/about_chara4_bg.png) no-repeat 0 0;
}
.about_chara4_data {
	position: absolute;
	top: 35px;
	right: 21px;
}
.about_chara4_img {
	position: absolute;
	top: 34px;
	left: 11px;
}
.about_chara4_balloon {
	position: absolute;
	top: 332px;
	left: 43px;
	transition-delay: 250ms, 250ms;
}

/* secret */
.secret {
	position: relative;
	width: 1106px;
	height: 879px;
	margin: 0 0 51px;
	background: url(../images/koopa/secret_bg.png) no-repeat 0 33px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.secret_ttl {
	text-align: center;
}
.secret_slider_box {
	position: absolute;
	top: 127px;
	left: 87px;
	width: 548px;
	height: 474px;
}
.secret_btn {
	position: absolute;
	top: 160px;
	right: 70px;
	width: 369px;
	height: 296px;
	background: url(../images/koopa/secret_btn_bg.png) no-repeat 20px 0;
}
.js-tab {
	position: relative;
	width: 369px;
	height: 296px;
}
.js-tab .type1 {
	position: absolute;
	top: 49px;
	left: 227px;
	width: 124px;
	height: 44px;
	background: url(../images/koopa/secret_btn.png) no-repeat 0 0;
	cursor:pointer;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.js-tab .type1.active,
.js-tab .type1:hover {
	background-position: 0 -54px;
}
.js-tab .type2 {
	position: absolute;
	top: 251px;
	left: 226px;
	width: 144px;
	height: 44px;
	background: url(../images/koopa/secret_btn.png) no-repeat -134px 0;
	cursor:pointer;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.js-tab .type2.active,
.js-tab .type2:hover {
	background-position: -134px -54px;
}
.js-tab .type3 {
	position: absolute;
	top: 251px;
	left: 1px;
	width: 154px;
	height: 44px;
	background: url(../images/koopa/secret_btn.png) no-repeat -288px 0;
	cursor:pointer;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.js-tab .type3.active,
.js-tab .type3:hover {
	background-position: -288px -54px;
}

.js-tab_content {
	display:none;
}
.js-tab_content.active {
	display:block;
}

.secret_icnSlider_wrapper {
	position: relative;
	top: 49px;
	z-index: 1;
}
.secret_icnSlider li img {
	margin: 0 auto;
}
.secret_imgSlider_wrapper {
	position: relative;
	padding: 64px 73px 0 73px;
}
.secret_imgSlider_wrapper .bx-pager {
	bottom: -130px;
	z-index: 1;
}
.secret_imgSlider_wrapper .bx-pager-item a {
	width: 25px;
	height: 25px;
	margin: 0 2px;
	background: url(../images/koopa/secret_pager_icn.png) no-repeat 0 0;
}
.secret_imgSlider_wrapper .bx-pager-item a.active,
.secret_imgSlider_wrapper .bx-pager-item a:hover {
	background-position: 0 -25px;
}
.secret_imgSlider_wrapper .bx-controls-direction a {
	overflow: hidden;
	width: 49px;
	height: 49px;
	margin-top: -27px;
}
.secret_imgSlider_wrapper .bx-prev {
	left: -59px;
	background: url(../images/koopa/secret_prev_btn.png) no-repeat 0 0;
}
.secret_imgSlider_wrapper .bx-prev:hover {
	background-position: 0 -59px;
}
.secret_imgSlider_wrapper .bx-next {
	right: -59px;
	background: url(../images/koopa/secret_next_btn.png) no-repeat 0 0;
}
.secret_imgSlider_wrapper .bx-next:hover {
	background-position: 0 -59px;
}
.secret_txtSlider_wrapper {
	position: relative;
	padding-top: 18px;
	z-index: 1;
}
.secret_txtSlider li img {
	margin: 0 auto;
}
.secret_type1_icn {
	position: absolute;
	top: 0;
}

.secret_txt {
	position: absolute;
	top: 628px;
	left: 99px;
}
.secret_star {
	position: absolute;
	top: 640px;
	right: -1px;
}
.secret_chara {
	position: absolute;
	top: 478px;
	right: 78px;
}
.secret_slider_bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

/* powerup */
.powerup {
	position: relative;
	width: 1106px;
	height: 739px;
	margin: 0 0 51px;
	background: url(../images/koopa/powerup_bg.png) no-repeat 0 33px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.powerup_ttl {
	text-align: center;
}
.powerup_img1 {
	position: absolute;
	top: 187px;
	left: 57px;
}
.powerup_arrow {
	position: absolute;
	top: 292px;
	left: 511px;
}
.powerup_img2 {
	position: absolute;
	top:187px;
	left: 568px;
}
.powerup_img2 .powerup_icn {
	position: absolute;
	top: -33px;
	left: -30px;
}
.powerup_txt {
	position: absolute;
	top:485px;
	left: 267px;
}
.powerup_star {
	position: absolute;
	top:468px;
	left: 5px;
}
.powerup_chara {
	position: absolute;
	top:492px;
	left: 37px;
}


/* ========================================
	ボコスカバトル
======================================== */
/* battle */
.battle {
	position: relative;
	width: 1104px;
	height: 1798px;
	background: url(../images/koopa/battle_bg.png) no-repeat 0 0;
	margin: -364px 0 46px;
	padding: 95px 21px 22px 21px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.battle_inner {
	width: 1062px;
	height: 1631px;
}
.battle_header {
	position: relative;
  height: 381px;
}
.battle_ttl {
	position: absolute;
	top: 44px;
	left: 75px;
}
.battle_txt {
	position: absolute;
	top: 247px;
	left: 164px;
}
.battle_star1 {
	position: absolute;
	top: 21px;
	left: -25px;
}
.battle_movie {
	position: absolute;
	top: 17px;
	right: 55px;
	width: 444px;
	height: 295px;
	background: url(../images/koopa/battle_img.png) no-repeat 0 0;
}
.battle_movie_wrap {
	position: absolute;
	top: 37px;
	left: 30px;
	background-color: #fff;
	padding: 2px;
	width: 382px;
	height: 217px;
	margin: 0;
	border-radius: 3px;
	transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
}
.battle_movie_wrap:after {
	display: none;
}
.battle_movie_in {
	width: 100%;
	height: 100%;
}
.battle_movie_in img {
	width: 100%;
	height: auto;
	/*margin-top: 1px;*/
	vertical-align: top;
}
.battle_star2 {
	position: absolute;
	top: 277px;
	right: -19px;
}

.battle1 {
	position: relative;
	height: 580px;
}
.battle1_ttl {
  position: relative;
	text-align: center;
}
.battle1_img1 {
	position: absolute;
	top: 116px;
	left: 72px;
}
.battle1_arrow {
	position: absolute;
	top: 221px;
	left: 505px;
}
.battle1_img2 {
	position: absolute;
	top: 116px;
	right: 74px;
}
.battle1_txt {
	position: absolute;
	top: 414px;
	width: 100%;
	text-align: center;
}
.battle1_chara {
	position: absolute;
	top: -141px;
	left: -35px;
}

.battle2 {
	position: relative;
	height: 688px;
}
.battle2_ttl {
	position: relative;
	text-align: center;
}
.battle2_txt {
	position: absolute;
	top: 108px;
	width: 100%;
	text-align: center;
}
.battle2_box1 {
	position: absolute;
	top: 286px;
	left: 72px;
}
.battle2_img1 {
	margin-bottom: 7px;
}
.battle2_txt1 {
	position: absolute;
	left: -5px;
}
.battle2_icn1 {
	position: absolute;
	top: -34px;
	left: -29px;
}
.battle2_box2 {
	position: absolute;
	top: 286px;
	right: 39px;
}
.battle2_img2 {
	margin-bottom: -7px;
}
.battle2_icn2 {
	position: absolute;
	top: -34px;
	left: -29px;
}
.battle2_txt2 {
	position: absolute;
	left: 2px;
}
.battle2_chara {
	position: absolute;
	top: -66px;
	right: 26px
}

/* win */
.win {
	position: relative;
	width: 1106px;
	height: 1159px;
	margin: 0 0 46px;
	background: url(../images/koopa/win_bg.png) no-repeat 0 33px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.win_ttl {
	text-align: center;
}
.win_box1 {
	position: absolute;
	top: 138px;
	left: 96px;
}
.win_img1 {
  margin-bottom: 17px;
}
.win_icn1 {
	position: absolute;
	top: -34px;
	left: -31px;
}
.win_txt1 {
	text-align: center;
}
.win_box2 {
	position: absolute;
	top: 138px;
	right: 96px;
}
.win_img2 {
  margin-bottom: 17px;
}
.win_icn2 {
	position: absolute;
	top: -34px;
	left: -41px;
}
.win_txt2 {
	text-align: center;
}
.new-friends {
	position: absolute;
	top: 501px;
	left: 74px;
	width: 958px;
	height: 428px;
	background: url(../images/koopa/new-friends_bg.png) no-repeat 0 0;
}
.new-friends_ttl {
	height: 121px;
	padding-top: 29px;
	text-align: center;
}
.new-friends_dot {
	position: absolute;
	top: -28px;
	left: -5px;
}
.new-friends_img1 {
	position: absolute;
	top: 121px;
	left: 41px;
}
.new-friends_img2 {
	position: absolute;
	top: 121px;
	right: 37px;
}
.win_star {
	position: absolute;
	bottom: 84px;
	left: 5px;
}
.win_txt3 {
	position: absolute;
	bottom: 98px;
	width: 100%;
	text-align: center;
}

/* amibo_btn */
.amibo_btn a {
	position: relative;
	display: block;
	overflow: hidden;
	width: 508px;
	margin: 0 auto 56px;
}