@charset "utf-8";

* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}

body#collabo_superhero {background:black;}
.footerBan {display:none !important;}

.partsparts {
	position:relative;
	margin:0 auto;
	padding:0;
}

/* =======================================
	header
======================================= */
header {
	position:relative;
	background-image:url("../../img/collabo_superhero/header_sp.jpg");
	background-repeat:no-repeat;
	background-position:center top;
	background-size:100% auto;
	padding-top:149%;
}

.collabo_superhero_pv {
	position:absolute;
	width:21%;
	top:25%;
	right:10%;
	margin:auto;
	animation: bloodclot 1.5s ease-in-out infinite both;
}

@keyframes bloodclot {
	from {transform: scale(1);transform-origin: center center;animation-timing-function: ease-out;}
	10% {transform: scale(0.91);animation-timing-function: ease-in;}
	17% {transform: scale(0.98);animation-timing-function: ease-out;}
	33% {transform: scale(0.87);animation-timing-function: ease-in;}
	45% {transform: scale(1);animation-timing-function: ease-out;}
}


/* =======================================
	nav
======================================= */
#collabo_superhero_nav {
	width:100%;
	background:url("../../img/collabo_superhero/bg_menu_sp.png") center top no-repeat;
	background-size:100% 100%;
	z-index:9999;
	position:relative;
	margin:0 auto;
	text-align:center;
}

#collabo_superhero_nav.fixed {
	width:100%;
	position: fixed !important;
	margin:auto;
	top: 0;
	left:0;
	right:0;
}

#collabo_superhero_nav ul {
	width:96%;
	display:flex;
	justify-content:space-between;
	align-items: center;
	position:relative;
	margin:0 auto;
	padding:4% 0;
}

#collabo_superhero_nav ul li {
	display:flex;
	align-items:center;
}

#collabo_superhero_nav ul li a {
	display:block;
	width:100%;
	height:100%;
}

#collabo_superhero_nav ul li img {
	padding:0 6%;
}


/* =======================================
	Let's play
======================================= */
#collabo_superhero_letsplay {
	width:100%;
	margin:0 auto;
	position:relative;
	padding:3% 0 5%;
	background:black url("../../img/collabo_superhero/bg_howtoplay_sp.png") center top no-repeat;
	background-size:100% auto;
}

#collabo_superhero_letsplay ul {
	width:81.4%;
	margin:0 auto;
	display:flex;
	align-items:center;
	justify-content: space-between;
}

#collabo_superhero_letsplay ul li:not(:last-child) {
	margin-right:20px;
}

.btn_howtoplay {
	width:89%;
	margin:1.5em auto 0;
}

.btn_campaign {
	display:none;
	position:fixed;
	bottom:10%;
	left:20px;
	z-index:2000;
}

.btn_campaign a {
	display:block;
	width:40%;
	cursor:pointer;
}

.btn_campaign a img {
	filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));
}


/* =======================================
	Character
======================================= */
.ttl_character {
	margin:calc( var(--vh) * 20 ) auto 5px;
	width:36%;
}

#game {
	position:relative;
}

ul.collabo_superhero_tab_info {
	position:absolute;
	top:calc( var(--vh) * 21.5 );
	width:96.6%;
	left:0;
	right:0;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	z-index:300;
}

ul.collabo_superhero_tab_info li {
	list-style:none;
	flex:1;
	text-align: center;
}

ul.collabo_superhero_tab_info li:first-child {
	margin-right:36%;
}

ul.collabo_superhero_tab_menu {
	position:absolute;
	top:calc( var(--vh) * 26.5 );
	width:96.6%;
	left:0;
	right:0;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	z-index:300;
}

ul.collabo_superhero_tab_menu li {
	list-style:none;
	flex:1;
	text-align:center;
}

ul.collabo_superhero_tab_menu li:first-child {
	margin-right:10%;
}

.collabo_superhero_tab_bg_01 {
	z-index:100;
	width:100%;
	position:-webkit-sticky;
	position:sticky;
	top:0;
	height:calc( var(--vh) * 100 );
	background:url("../../img/collabo_superhero/bg_tab01_sp.jpg") center top no-repeat;
	background-size:100% auto;
}

.collabo_superhero_tab_bg_02 {
	z-index:100;
	width:100%;
	position:-webkit-sticky;
	position:sticky;
	top:0;
	height:calc( var(--vh) * 100 );
	background:url("../../img/collabo_superhero/bg_tab02_sp.jpg") center top no-repeat;
	background-size:100% auto;
}

.collabo_superhero_inner {
	position:-webkit-sticky;
	position:sticky;
	top:0;
	z-index:200;
	margin:calc( var(--vh) * -100 ) auto 0;
}

.collabo_superhero_inner01,
.collabo_superhero_inner02 {
	position:relative;
}

.collabo_superhero_tab_hide {
	display:none;
}


/* =======================================
	#characters
======================================= */
.aboutbox {
	position:relative;
}

.aboutbox_btn_dcd {
	position:absolute;
	bottom:5.5%;
	left:0;
	right:0;
	margin:auto;
	width:79%;
	height:auto;
}

.aboutbox_btn_gkj {
	position:absolute;
	bottom:5.5%;
	left:0;
	right:0;
	margin:auto;
	width:79%;
	height:auto;
}

.collabo_superhero_inner01 .charactersWrap {
	position:absolute;
	top:9%;
	left:0;
	right:0;
	margin:auto;
	width:100%;
	padding:0;
	display:block;
}

.collabo_superhero_inner02 .charactersWrap {
	position:absolute;
	top:11%;
	left:0;
	right:0;
	margin:auto;
	width:100%;
	padding:0;
	display:block;
}

.charactersSlide {
	width:83.75%;
	margin:0 auto;
	padding:0;
}

.charactersContent {
	width:75%;
	margin:59.5% auto 0;
	padding:0;
	text-align:center;
}

.charactersContent video {
	display:block;
	width:100%;
	height:auto;
	aspect-ratio: 16 / 9;
	margin:0 auto;
}


/* =======================================
	Event
======================================= */
.collabo_superhero_event {
	position:relative;
	margin-top:3%;
}


/* =======================================
	Campaign
======================================= */
#campaign .collabo_superhero_inner {
	padding-top:calc( var(--vh) * 24 );
}

.collabo_superhero_campaign_bg {
	width:100%;
	height:calc( var(--vh) * 100 );
	position:-webkit-sticky;
	position:sticky;
	top:0;
	background:url("../../img/collabo_superhero/bg_campaign_sp.jpg") center top no-repeat;
	background-size:100% auto;
}


/* =======================================
	Movie
======================================= */
#movie {
	position:relative;
	width:100%;
	z-index:200;
	background:url("../../img/collabo_superhero/bg_movie_sp.jpg") center top no-repeat;
	background-size:100% auto;
	padding-top:120.77%;
}

.collabo_superhero_inner_movie {
	position:absolute;
	top:0;
	left:0;
	right:0;
	margin:auto;
	width:100%;
}

.ttl_movie {
	margin:2em auto;
	width:36%;
}

.youtube {
	position:relative;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
	max-width:100%;
}

.youtube iframe, .youtube object, .youtube embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


/* =======================================
	Copyright
======================================= */
#copyright {
	margin:0 auto;
	text-align:center;
	padding:1em 0;
	color:white;
	background:#1e1e1e;
}

/* =======================================
	Footer
======================================= */
#collabo_superhero_foot ul {
	width:90%;
	display:flex;
	justify-content:space-between;
	align-items: center;
	margin:4em auto 2em;
	padding:1.5em 0;
}

#collabo_superhero_foot ul li {
	display:flex;
	align-items:center;
}

#collabo_superhero_foot ul li:not(:last-child) a img {
	border-right:2px solid gainsboro;
}

#collabo_superhero_foot ul li img {
	height:auto;
	padding:0 10%;
}

.mainFooter {
	padding:18px 8px 120px;
}


/* =======================================
	buttons
======================================= */
.twBtn01 {
	width:57.75%;
	position: absolute;
	bottom:3%;
	left:0;
	right:0;
	margin:auto;
}

.twBtn02 {
	width:57.75%;
	position:absolute;
	bottom:14%;
	left:0;
	right:0;
	margin:auto;
}

.twBtn03 {
	width:57.75%;
	position:absolute;
	bottom:12%;
	right:8%;
}

.twBtn04 {
	width:57.75%;
	position:absolute;
	bottom:12%;
	left:0;
	right:0;
	margin:auto;
}

.ouboBtn02 {
	width:40.25%;
	position:absolute;
	bottom:5%;
	left:0;
	right:0;
	margin:auto;
}

.ouboBtn03 {
	width:40.25%;
	position:absolute;
	bottom:4%;
	right:17%;
}

.ouboBtn04 {
	width:40.25%;
	position:absolute;
	bottom:5%;
	left:0;
	right:0;
	margin:auto;
}


/* =======================================
	remodal
======================================= */
.remodal {
	background:transparent;
}

.remodalblue a,
.remodalblue a:link,
.remodalblue a:visited,
.remodalblue a:hover,
.remodalblue a:active {
	color:#00b8ff;
}

.remodalblue {
	position:relative;
	width:100%;
	padding:20% 0 0;
}

.remodalblue button {
	position:absolute;
	background:transparent;
	border:none;
	top:0.3%;
	left:auto;
	right:3%;
	cursor:pointer !important;
}

.remodalmovie {
	position:relative;
	width:90%;
	padding:50px 0;
	background:transparent !important;
}

.remodalmovie button {
	position:absolute;
	background:transparent;
	border:none;
	top:-3%;
	left:auto;
	right:-2%;
	cursor:pointer !important;
}

.remodalabout {
	position:relative;
	padding:6% 0 0;
	width:100%;
}

.remodalabout button {
	position:absolute;
	background:transparent;
	border:none;
	top:-5%;
	left:auto;
	right:-2%;
	cursor:pointer !important;
}

.oubox {
	width:90%;
	margin:0 auto;
	color:#9ba7b0;
	background:black;
	text-align:left;
	padding:10px 2.5vw;
	border:1px solid #9ba7b0;
}

.ouboTitle {
	font-size:22px;
	font-weight:bold;
	margin:2em auto 1em;
	text-align:center;
	line-height:1.5;
}

.ouboMidashi {
	font-size:14px;
	font-weight:bold;
	margin:15px auto 5px;
	line-height:1.5;
}

.ouboMidashi span {
	font-size:0.8em;
	font-weight:normal;
	display:inline-block;
	margin-left:0.2em;
}

.oubox p {
	font-size:12px;
	line-height:1.5;
	word-break:break-all;
}

.closeRed {
	display:block;
	position:relative;
	width:36px;
	height:36px;
}

.closeRed::before, .closeRed::after {
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:2px;
	height:36px;
	background:#d50000;
}

.closeRed::before {
	transform:translate(-50%,-50%) rotate(45deg);
}

.closeRed::after {
	transform:translate(-50%,-50%) rotate(-45deg);
}


/* =======================================
	swiper_main
======================================= */
.mySwiper01a {
	width:100%;
	padding:1% 21% 0;
}

.mySwiper01b {
	width:100%;
	margin-top:2%;
}

.mySwiper01b.thumbnailpic .swiper-slide:nth-of-type(1) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn01-01_off.png") no-repeat;
	background-size:100% auto;
}
.mySwiper01b.thumbnailpic .swiper-slide-thumb-active:nth-of-type(1) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn01-01_on.png") no-repeat;
	background-size:100% auto;
}
.mySwiper01b.thumbnailpic .swiper-slide:nth-of-type(2) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn01-02_off.png") no-repeat;
	background-size:100% auto;
}
.mySwiper01b.thumbnailpic .swiper-slide-thumb-active:nth-of-type(2) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn01-02_on.png") no-repeat;
	background-size:100% auto;
}
.mySwiper01b.thumbnailpic .swiper-slide:nth-of-type(3) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn01-03_off.png") no-repeat;
	background-size:100% auto;
}
.mySwiper01b.thumbnailpic .swiper-slide-thumb-active:nth-of-type(3) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn01-03_on.png") no-repeat;
	background-size:100% auto;
}
.mySwiper01b.thumbnailpic .swiper-slide:nth-of-type(4) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn01-04_off.png") no-repeat;
	background-size:100% auto;
}
.mySwiper01b.thumbnailpic .swiper-slide-thumb-active:nth-of-type(4) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn01-04_on.png") no-repeat;
	background-size:100% auto;
}
.mySwiper01b.thumbnailpic .swiper-slide:nth-of-type(5) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn01-05_off.png") no-repeat;
	background-size:100% auto;
}
.mySwiper01b.thumbnailpic .swiper-slide-thumb-active:nth-of-type(5) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn01-05_on.png") no-repeat;
	background-size:100% auto;
}
.mySwiper01b.thumbnailpic .swiper-slide:nth-of-type(6) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn01-06_off.png") no-repeat;
	background-size:100% auto;
}
.mySwiper01b.thumbnailpic .swiper-slide-thumb-active:nth-of-type(6) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn01-06_on.png") no-repeat;
	background-size:100% auto;
}
.mySwiper01b.thumbnailpic .swiper-slide:nth-of-type(7) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn01-07_off.png") no-repeat;
	background-size:100% auto;
}
.mySwiper01b.thumbnailpic .swiper-slide-thumb-active:nth-of-type(7) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn01-07_on.png") no-repeat;
	background-size:100% auto;
}

.myswiper02 {
	padding-bottom:11%;
}

.swiper02 {
	width:72%;
	margin:auto;
	position:absolute;
	bottom:1%;
	left:0;
	right:0;
}

.myswiper03 {
	padding-bottom:10%;
}

.swiper03 {
	width:72%;
	margin:auto;
	position:absolute;
	bottom:1%;
	left:0;
	right:0;
}

.myswiper04 {
	padding-bottom:11%;
}

.swiper04 {
	width:72%;
	margin:auto;
	position:absolute;
	bottom:1%;
	left:0;
	right:0;
}

.mySwiper05a {
	width:100%;
	padding:1% 15% 0;
}

.mySwiper05b {
	width:87%;
	margin-top:4%;
}

.mySwiper05b.thumbnailpic .swiper-slide:nth-of-type(1) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn02-01_off.png") no-repeat;
	background-size:100% auto;
}
.mySwiper05b.thumbnailpic .swiper-slide-thumb-active:nth-of-type(1) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn02-01_on.png") no-repeat;
	background-size:100% auto;
}
.mySwiper05b.thumbnailpic .swiper-slide:nth-of-type(2) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn02-02_off.png") no-repeat;
	background-size:100% auto;
}
.mySwiper05b.thumbnailpic .swiper-slide-thumb-active:nth-of-type(2) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn02-02_on.png") no-repeat;
	background-size:100% auto;
}
.mySwiper05b.thumbnailpic .swiper-slide:nth-of-type(3) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn02-03_off.png") no-repeat;
	background-size:100% auto;
}
.mySwiper05b.thumbnailpic .swiper-slide-thumb-active:nth-of-type(3) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn02-03_on.png") no-repeat;
	background-size:100% auto;
}
.mySwiper05b.thumbnailpic .swiper-slide:nth-of-type(4) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn02-04_off.png") no-repeat;
	background-size:100% auto;
}
.mySwiper05b.thumbnailpic .swiper-slide-thumb-active:nth-of-type(4) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn02-04_on.png") no-repeat;
	background-size:100% auto;
}
.mySwiper05b.thumbnailpic .swiper-slide:nth-of-type(5) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn02-05_off.png") no-repeat;
	background-size:100% auto;
}
.mySwiper05b.thumbnailpic .swiper-slide-thumb-active:nth-of-type(5) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn02-05_on.png") no-repeat;
	background-size:100% auto;
}
.mySwiper05b.thumbnailpic .swiper-slide:nth-of-type(6) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn02-06_off.png") no-repeat;
	background-size:100% auto;
}
.mySwiper05b.thumbnailpic .swiper-slide-thumb-active:nth-of-type(6) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../../img/collabo_superhero/tapbtn02-06_on.png") no-repeat;
	background-size:100% auto;
}

.myswiper06 {
	padding-bottom:11%;
}

.swiper06 {
	width:72%;
	margin:auto;
	position:absolute;
	bottom:1%;
	left:0;
	right:0;
}

.myswiper07 {
	padding-bottom:11%;
}

.swiper07 {
	width:72%;
	margin:auto;
	position:absolute;
	bottom:1%;
	left:0;
	right:0;
}

.myswiper08 {
	padding-bottom:11%;
}

.swiper08 {
	width:72%;
	margin:auto;
	position:absolute;
	bottom:1%;
	left:0;
	right:0;
}

.myswiper99 {
	padding-bottom:12%;
}

.swiper99 {
	width:72%;
	margin:0 auto;
	position:relative;
}


/* =======================================
	swiper_nextprev
======================================= */
.swiper-button-prev,
.swiper-button-next,
.swiper-button-prev01a,
.swiper-button-next01a,
.swiper-button-prev05a,
.swiper-button-next05a {
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-12px;
}

.swiper-button-next,
.swiper-button-next02,
.swiper-button-next03,
.swiper-button-next04,
.swiper-button-next99 {
	position:absolute;
	top:50%;
	z-index:10;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--swiper-navigation-color, var(--swiper-theme-color));
	background-image:url("../../img/collabo_superhero/swiper.png");
}

.swiper-button-next06,
.swiper-button-next07,
.swiper-button-next08 {
	position:absolute;
	top:50%;
	z-index:10;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--swiper-navigation-color, var(--swiper-theme-color));
	background-image:url("../../img/collabo_superhero/swiper2.png");
}

.swiper-button-prev,
.swiper-button-prev02,
.swiper-button-prev03,
.swiper-button-prev04 {
	position:absolute;
	top:50%;
	z-index:10;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--swiper-navigation-color, var(--swiper-theme-color));
	background-image:url("../../img/collabo_superhero/swiper.png");
	transform: scale(-1, 1);
}

.swiper-button-prev06,
.swiper-button-prev07,
.swiper-button-prev08 {
	position:absolute;
	top:50%;
	z-index:10;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--swiper-navigation-color, var(--swiper-theme-color));
	background-image:url("../../img/collabo_superhero/swiper2.png");
	transform: scale(-1, 1);
}

.swiper-button-next01a {
	position:absolute;
	top:50%;
	right:10%;
	z-index:10;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--swiper-navigation-color, var(--swiper-theme-color));
	background-image:url("../../img/collabo_superhero/swiper3.png");
}

.swiper-button-prev01a {
	position:absolute;
	left:10%;
	top:50%;
	z-index:10;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--swiper-navigation-color, var(--swiper-theme-color));
	background-image:url("../../img/collabo_superhero/swiper3.png");
	transform: scale(-1, 1);
}

.swiper-button-next05a {
	position:absolute;
	top:50%;
	right:6%;
	z-index:10;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--swiper-navigation-color, var(--swiper-theme-color));
	background-image:url("../../img/collabo_superhero/swiper3.png");
}

.swiper-button-prev05a {
	position:absolute;
	top:50%;
	left:6%;
	z-index:10;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--swiper-navigation-color, var(--swiper-theme-color));
	background-image:url("../../img/collabo_superhero/swiper3.png");
	transform: scale(-1, 1);
}

.swiper-button-prev99 {
	position:absolute;
	top:50%;
	z-index:10;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--swiper-navigation-color, var(--swiper-theme-color));
	background-image:url("../../img/collabo_superhero/swiper2.png");
	transform: scale(-1, 1);
}

.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after,
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
	content: none !important;
}

.swiper-pagination-bullet-active {
	background:whitesmoke;
}

.swiper-pagination-bullet {
	background:silver;
}

.swiper-button-prev02 {
	left:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-next02 {
	right:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-prev03 {
	left:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-next03 {
	right:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-prev04 {
	left:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-next04 {
	right:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-prev06 {
	left:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-next06 {
	right:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-prev07 {
	left:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-next07 {
	right:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-prev08 {
	left:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-next08 {
	right:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-prev99 {
	position:absolute;
	left:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-17%;
}

.swiper-button-next99 {
	position:absolute;
	right:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-17%;
}


@media screen and (min-width: 500px) {

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
	bottom:0;
}

}

@media screen and (min-width: 800px) {

.wrapper {
	min-width:unset;
}

/* =======================================
	header
======================================= */
header {
	background-image:url("../../img/collabo_superhero/header.jpg");
	padding-top:32.33%;
}

.collabo_superhero_pv {
	width:8%;
	top:5%;
	right:33%;
}

/* =======================================
	nav
======================================= */
#collabo_superhero_nav {
	background:url("../../img/collabo_superhero/bg_menu.png") center top no-repeat;
	background-size:100% 100%;
}

#collabo_superhero_nav ul {
	width:100%;
	display:block;
	position:relative;
	margin:0 auto;
	padding:2% 0;
	letter-spacing:-0.4em !important;
}

#collabo_superhero_nav ul li {
	display:inline-block;
	vertical-align:middle;
	letter-spacing:0 !important;
}

#collabo_superhero_nav ul li:not(:last-child) {
	margin-right:4%;
}

#collabo_superhero_nav ul li img {
	padding:0;
}

/* =======================================
	Let's play
======================================= */
#collabo_superhero_letsplay {
	padding:30px 0;
	background:black url("../../img/collabo_superhero/bg_howtoplay_sp.png") center top no-repeat;
	background-size:100% auto;
}

#collabo_superhero_letsplay ul {
	width:100%;
	max-width:500px;
}

.btn_howtoplay {
	width:100%;
	max-width:500px;
}

.btn_campaign {
	width:13%;
	max-width:258px;
	bottom:40px;
	left:40px;
}

.btn_campaign a {
	display:block;
	width:100%;
	height:100%;
	cursor:pointer;
}

.btn_campaign a img {
	filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));
}


/* =======================================
	Character
======================================= */
.ttl_character {
	margin:20px auto 10px;
	width:32%;
	max-width:340px;
}

ul.collabo_superhero_tab_info {
	top:6vh;
	width:57%;
	max-width:870px;
}

ul.collabo_superhero_tab_info li:first-child {
	margin-right:36%;
}

ul.collabo_superhero_tab_menu {
	top:10vh;
	width:57%;
	max-width:870px;
}

ul.collabo_superhero_tab_menu li {
	cursor:pointer;
}

.collabo_superhero_tab_bg_01 {
	height:100vh;
	background:url("../../img/collabo_superhero/bg_tab01.jpg") center top no-repeat;
	background-size:100% auto;
}

.collabo_superhero_tab_bg_02 {
	height:100vh;
	background:url("../../img/collabo_superhero/bg_tab02.jpg") center top no-repeat;
	background-size:100% auto;
}

.collabo_superhero_inner {
	margin:-100vh auto 0;
	width:57%;
	max-width:1026px;
}

/* =======================================
	#characters
======================================= */
.collabo_superhero_inner01 .charactersWrap {
	top:14%;
	padding:0 3.5%;
	display:flex;
	justify-content:space-between;
}

.collabo_superhero_inner02 .charactersWrap {
	top:22%;
	padding:0 3.5%;
	display:flex;
	justify-content:space-between;
}

.charactersSlide {
	width:50%;
	padding:0 0 0 2%;
}

.collabo_superhero_inner01 .charactersContent {
	width:50%;
	padding:28.5% 5% 0;
	margin:0 auto;
	text-align:left;
}

.collabo_superhero_inner02 .charactersContent {
	width:50%;
	padding:27% 5% 0;
	margin:0 auto;
	text-align:left;
}

/* =======================================
	Campaign
======================================= */
#campaign .collabo_superhero_inner {
	padding-top:3%;
}

.collabo_superhero_campaign_bg {
	height:100vh;
	background:url("../../img/collabo_superhero/bg_campaign.jpg") center top no-repeat;
	background-size:100% auto;
}

/* =======================================
	Movie
======================================= */
#movie {
	background:url("../../img/collabo_superhero/bg_movie.jpg") center top no-repeat;
	background-size:100% auto;
	padding-top:45.8%;
}

.collabo_superhero_inner_movie {
	width:57%;
	max-width:1026px;
}

.ttl_movie {
	margin:4em auto;
	width:32%;
	max-width:280px;
}

/* =======================================
	Footer
======================================= */
#collabo_superhero_foot ul {
	width:auto;
	display:table;
}

#collabo_superhero_foot ul li {
	width:auto;
	display:table-cell;
}

#collabo_superhero_foot ul li:not(:last-child) a {
	border-right:2px solid gainsboro;
}

#collabo_superhero_foot ul li:not(:last-child) a img {
	border-right:none;
}

#collabo_superhero_foot ul li img {
	height:2.4vh;
	padding:0 1.5vw;
}

.mainFooter {
	padding:18px 8px 18px;
}

/* =======================================
	buttons
======================================= */
.twBtn01 {
	width:42%;
	bottom:4%;
}

.twBtn02 {
	width:42%;
	bottom:13%;
}

.twBtn03 {
	width:38%;
	bottom:12%;
	right:19%;
}

.twBtn04 {
	width:42%;
	bottom:14%;
}

.ouboBtn02 {
	width:29%;
	bottom:5%;
}

.ouboBtn03 {
	width:29%;
	bottom:4%;
	right:24%;
}

.ouboBtn04 {
	width:29%;
	bottom:8%;
}

/* =======================================
	remodal
======================================= */
.remodalabout button {
	top:-10%;
}

.remodalblue {
	padding:6% 0 0;
}

.remodalblue button {
	top:10px;
}

.remodalabout button {
	top:2%;
}

/* =======================================
	swiper_main
======================================= */
.mySwiper01b {
	margin-top:3.5%;
}

.swiper02 {
	width:36.5%;
	margin:0 auto;
	position:absolute;
	bottom:4%;
	left:auto;
	right:13.4%;
}

.swiper03 {
	width:36.5%;
	margin:0 auto;
	bottom:5%;
	left:auto;
	right:13.4%;
}

.swiper04 {
	width:36.5%;
	margin:0 auto;
	bottom:5%;
	left:auto;
	right:13.4%;
}

.mySwiper05a {
	width:100%;
	padding:1% 16% 0;
}

.mySwiper05b {
	width:100%;
	margin-top:4%;
}

.swiper06 {
	width:36.5%;
	margin:0 auto;
	bottom:4%;
	left:auto;
	right:13.4%;
}

.swiper07 {
	width:36.5%;
	margin:0 auto;
	bottom:5%;
	left:auto;
	right:13.4%;
}

.swiper08 {
	width:36.5%;
	margin:0 auto;
	bottom:5%;
	left:auto;
	right:13.4%;
}

.myswiper99 {
	padding-bottom:7%;
}

.swiper99 {
	width:63%;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
	bottom:-2%;
}


/* =======================================
	swiper_nextprev
======================================= */
.swiper-button-next01a {
	background-image:url("../../img/collabo_superhero/swiper.png");
}

.swiper-button-prev01a {
	background-image:url("../../img/collabo_superhero/swiper.png");
}

.swiper-button-prev02 {
	left:-15%;
	width:20px;
	height:20px;
	background-size:20px 20px;
	margin-top:-8px;
}

.swiper-button-next02 {
	right:-15%;
	width:20px;
	height:20px;
	background-size:20px 20px;
	margin-top:-8px;
}

.swiper-button-prev03 {
	left:-15%;
	width:20px;
	height:20px;
	background-size:20px 20px;
	margin-top:-8px;
}

.swiper-button-next03 {
	right:-15%;
	width:20px;
	height:20px;
	background-size:20px 20px;
	margin-top:-8px;
}

.swiper-button-prev04 {
	left:-15%;
	width:20px;
	height:20px;
	background-size:20px 20px;
	margin-top:-8px;
}

.swiper-button-next04 {
	right:-15%;
	width:20px;
	height:20px;
	background-size:20px 20px;
	margin-top:-8px;
}

.swiper-button-next05a {
	background-image:url("../../img/collabo_superhero/swiper2.png");
}

.swiper-button-prev05a {
	background-image:url("../../img/collabo_superhero/swiper2.png");
}

.swiper-button-prev06 {
	left:-15%;
	width:20px;
	height:20px;
	background-size:20px 20px;
	margin-top:-8px;
}

.swiper-button-next06 {
	right:-15%;
	width:20px;
	height:20px;
	background-size:20px 20px;
	margin-top:-8px;
}

.swiper-button-prev07 {
	left:-15%;
	width:20px;
	height:20px;
	background-size:20px 20px;
	margin-top:-8px;
}

.swiper-button-next07 {
	right:-15%;
	width:20px;
	height:20px;
	background-size:20px 20px;
	margin-top:-8px;
}

.swiper-button-prev08 {
	left:-15%;
	width:20px;
	height:20px;
	background-size:20px 20px;
	margin-top:-8px;
}

.swiper-button-next08 {
	right:-15%;
	width:20px;
	height:20px;
	background-size:20px 20px;
	margin-top:-8px;
}

.swiper-button-prev99 {
	position:absolute;
	left:-10%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-13%;
}

.swiper-button-next99 {
	position:absolute;
	right:-10%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-13%;
}

}


@media screen and (min-width: 800px) and (orientation:portrait) {

.wrapper {
	min-width:unset;
}

ul.collabo_superhero_tab_info {
	width:90%;
}

ul.collabo_superhero_tab_menu {
	width:90%;
}

.collabo_superhero_inner {
	width:90%;
}

.collabo_superhero_inner_movie {
	width:90%;
}

.collabo_superhero_tab_bg_01 {
	background:url("../../img/collabo_superhero/bg_tab01_sp.jpg") center top no-repeat;
	background-size:100% auto;
}

.collabo_superhero_tab_bg_02 {
	background:url("../../img/collabo_superhero/bg_tab02_sp.jpg") center top no-repeat;
	background-size:100% auto;
}

.collabo_superhero_campaign_bg {
	background:url("../../img/collabo_superhero/bg_campaign_sp.jpg") center top no-repeat;
	background-size:100% auto;
}

#movie {
	background:url("../../img/collabo_superhero/bg_movie_sp.jpg") center top no-repeat;
	background-size:100% auto;
	padding-top:120%;
}

ul.collabo_superhero_tab_info {
	top:4.5vh;
}

ul.collabo_superhero_tab_menu {
	top:7.5vh;
}

.footerNav {
	width:90%;
}

.swiper99 {
	width:75%;
}

#collabo_superhero_foot ul li img {
	height:1.8vh;
}

.remodalabout button {
	top:-1%;
}

.remodalblue {
	padding:10% 0 0;
}

}

@media screen and (min-width: 900px) {

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
	bottom:-1%;
}

.swiper-button-prev02,
.swiper-button-prev03,
.swiper-button-prev04,
.swiper-button-prev06,
.swiper-button-prev07,
.swiper-button-prev08 {
	left:-14%;
}

.swiper-button-next02,
.swiper-button-next03,
.swiper-button-next04,
.swiper-button-next06,
.swiper-button-next07,
.swiper-button-next08 {
	right:-14%;
}

.swiper-button-prev99 {
	position:absolute;
	left:-10%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-13%;
}

.swiper-button-next99 {
	position:absolute;
	right:-10%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-13%;
}

}

@media screen and (min-width: 960px) {

.remodalblue button {
	top:1%;
}

ul.collabo_superhero_tab_info {
	top:6.5vh;
}

ul.collabo_superhero_tab_menu {
	top:11.5vh;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
	bottom:0;
}

.swiper-button-prev99 {
	position:absolute;
	left:-10%;
	width:26px;
	height:26px;
	background-size:26px 26px;
	margin-top:-13%;
}

.swiper-button-next99 {
	position:absolute;
	right:-10%;
	width:26px;
	height:26px;
	background-size:26px 26px;
	margin-top:-13%;
}

}

@media screen and (min-width: 1200px) {

.closeRed {
	width:54px;
	height:54px;
}

.closeRed::before, .closeRed::after {
	height:54px;
}

ul.collabo_superhero_tab_menu {
	top:11.5vh;
}

ul.collabo_superhero_tab_info li:first-child {
	margin-right:50%;
}

.swiper02 {
	width:36.5%;
	margin:0 auto;
	position:absolute;
	bottom:4%;
	left:auto;
	right:13.4%;
}

.swiper03 {
	width:36.5%;
	margin:0 auto;
	bottom:5%;
	left:auto;
	right:13.4%;
}

.swiper04 {
	width:36.5%;
	margin:0 auto;
	bottom:5%;
	left:auto;
	right:13.4%;
}

.mySwiper05a {
	width:100%;
	padding:1% 16% 0;
}

.mySwiper05b {
	width:100%;
	margin-top:4%;
}

.swiper06 {
	width:36.5%;
	margin:0 auto;
	bottom:4%;
	left:auto;
	right:13.4%;
}

.swiper07 {
	width:36.5%;
	margin:0 auto;
	bottom:5%;
	left:auto;
	right:13.4%;
}

.swiper08 {
	width:36.5%;
	margin:0 auto;
	bottom:5%;
	left:auto;
	right:13.4%;
}

.myswiper99 {
	padding-bottom:7%;
}

.swiper99 {
	width:63%;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
	bottom:1%;
}

.swiper-button-prev,
.swiper-button-next,
.swiper-button-prev01a,
.swiper-button-next01a,
.swiper-button-prev05a,
.swiper-button-next05a {
	width:36px;
	height:36px;
	background-size:36px 36px;
	margin-top:-18px;
}

.swiper-button-prev02 {
	left:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-next02 {
	right:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-prev03 {
	left:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-next03 {
	right:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-prev04 {
	left:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-next04 {
	right:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-next05a {
	background-image:url("../../img/collabo_superhero/swiper2.png");
}

.swiper-button-prev05a {
	background-image:url("../../img/collabo_superhero/swiper2.png");
}

.swiper-button-prev06 {
	left:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-next06 {
	right:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-prev07 {
	left:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-next07 {
	right:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-prev08 {
	left:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-next08 {
	right:-12%;
	width:24px;
	height:24px;
	background-size:24px 24px;
	margin-top:-8px;
}

.swiper-button-prev99 {
	position:absolute;
	left:-10%;
	width:36px;
	height:36px;
	background-size:36px 36px;
	margin-top:-14%;
}

.swiper-button-next99 {
	position:absolute;
	right:-10%;
	width:36px;
	height:36px;
	background-size:36px 36px;
	margin-top:-14%;
}

}