@charset "UTF-8";

#contents {
	background: #f9f7f6 url(../characters/images/bg.png) center top repeat-y;
}
@media screen and (min-width: 1367px) {
	#contents {
		background-size: 100% auto;
	}
}

.characters {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.entrance .characters-list-btn {
	position: absolute;
	left: 50%;
	top: 95px;
	margin-left: 410px;
	z-index: 10;
}
.chara-detail .characters-list-btn {
	position: absolute;
	top: 385px;
	left: 50%;
  margin-left: 190px;
	z-index: 1;
}
.noscript-message {
	padding-top: 300px;
	text-align: center;
	font-size: 20px;
}

/* ========================================
	entrance
======================================== */
.entrance {
	position: absolute;
	width: 100%;
	top: 0;
	left:50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 11;
}
.h1-title {
	margin-bottom: 38px;
}
.character-copy {
	margin-bottom: 30px;
}
.entrance-wrap {
	width: 100%;
	height: 1146px;
	min-height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../characters/images/entrance_bg.png) center 56px no-repeat;
}
.no-js .entrance-wrap {
	display: none;
}
.entrance-inner .inner {
	position: absolute;
	top: 0;
	left:50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.character-textarea {
	text-align: center;
	padding-top: 103px;
}
.entrance__chara {
	position: absolute;
	top: 122px;
}
.entrance__chara--left {
	left: -13%;
}
.entrance__chara--right {
	right: -13%;
}
.entrance__chara img {
	width: 100%;
	height: auto;
}
.entrance-select {
	position: absolute;
	top: 485px;
	left: 50%;
	width: 605px;
	font-size: 0;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.entrance-select li {
	display: inline-block;
	cursor: pointer;
}
.entrance-select li:last-child {
	margin-left: 77px;
}
.entrance.is-active {
	position: relative;
}


/* ========================================
	swiper
======================================== */
.swiper-frame {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 500ms linear;
	transition: opacity 500ms linear;
	margin-top: -75px;
}
.swiper-frame.first {
	position: relative;
}
.swiper-frame.is-current {
	z-index: 10;
	visibility: visible;
	opacity: 1;
}
.swiper-container {
	width: 100%;
}
.swiper-slide {
/*	width: 500px;*/
	width: 260px;
}
.swiper-slide img {
/*	width: 100%;*/
	width: 192%;
	margin-left: -46%;
	height: auto;
}
.swiper-slide img.default {
	display: none;
}
.swiper-slide img.blur {
	display: block;
}
.swiper-slide.swiper-slide-active img.default {
	display: block;
}
.swiper-slide.swiper-slide-active img.blur {
	display: none;
}
.swiper-linkarea {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
}
.swiper-slide[data-charaid="001"] .swiper-linkarea {
	left: 20px;
	width: 220px;
}
.swiper-slide[data-charaid="002"] .swiper-linkarea {
	left: 80px;
	width: 200px;
}
.swiper-slide[data-charaid="003"] .swiper-linkarea {
	left: 60px;
	width: 190px;
}
.swiper-slide[data-charaid="004"] .swiper-linkarea {
	left: 30px;
	width: 180px;
}
.swiper-slide[data-charaid="005"] .swiper-linkarea {
	left: 10px;
	width: 220px;
}
.swiper-slide[data-charaid="006"] .swiper-linkarea {
	left: 30px;
	width: 220px;
}
.swiper-slide[data-charaid="007"] .swiper-linkarea {
	left: 50px;
	width: 170px;
}
.swiper-slide[data-charaid="008"] .swiper-linkarea {
	left: 50px;
	width: 190px;
}
.swiper-slide[data-charaid="009"] .swiper-linkarea {
	left: -10px;
	width: 260px;
}
.swiper-slide[data-charaid="010"] .swiper-linkarea {
	left: 40px;
	width: 190px;
}
.swiper-slide[data-charaid="011"] .swiper-linkarea {
	left: 20px;
	width: 230px;
}
.swiper-slide[data-charaid="012"] .swiper-linkarea {
	left: 40px;
	width: 170px;
}
.swiper-slide[data-charaid="013"] .swiper-linkarea {
	left: 20px;
	width: 280px;
}
.swiper-slide[data-charaid="014"] .swiper-linkarea {
	left: 10px;
	width: 270px;
}
.swiper-slide[data-charaid="015"] .swiper-linkarea {
	left: 50px;
	width: 180px;
}
.swiper-slide[data-charaid="016"] .swiper-linkarea {
	left: 10px;
	width: 250px;
}
.profile__zoom {
	display: none;
	position: absolute;
	top: 102px;
	right: -80px;
}
.swiper-slide.swiper-slide-active .profile__zoom {
	display: block;
}
.profile__zoom img {
	width: 100%;
	height: auto;
}


/* ========================================
	profile
======================================== */
#group01 .profile {
	background: url(../characters/images/bg_group_a.png) center top no-repeat;
}
#group02 .profile {
	background: url(../characters/images/bg_group_b.png) center top no-repeat;
}
#group03 .profile {
	background: url(../characters/images/bg_group_c.png) center top no-repeat;
}

.profile {
	position:  relative;
	height: 980px;
	margin-top: -375px;
}
.profile__block {
	position: absolute;
	top: 395px;
	left: 50%;
	width: 482px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.profile__name {
	width: 272px;
	margin: 0 auto 22px auto;
	background: url(../characters/images/profile_name_bg.png) center bottom no-repeat;
}
.profile__voice {
	font-size: 0;
	margin-bottom: 30px;
	text-align: center;
}
.profile__voice li {
	display: inline-block;
	padding-right: 15px;
	cursor: pointer;
}
.profile__voice li:last-child {
	padding-right: 0;
}
.profile__type {
	margin-bottom: 20px;
}
.profile__list_btn {
	position: absolute;
	top: 60%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

/* ========================================
	teamselect
======================================== */
.teamselect {
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 10;
}
.no-js .teamselect {
	display: none;
}
.teamselect li {
	display: block;
	height: 60px;
	margin-bottom: 42px;
	padding-top: 10px;
	text-align: center;
	cursor: pointer;
}
.teamselect li.is-active {
	display: none;
}
.teamselect li:hover {
	padding-top: 3px;
	-webkit-transition: 0.1s ease-out;
	transition: 0.1s ease-out;
}

/* ========================================
	modal-charalist
======================================== */
#charalist .modal-contents,
#zoom .modal-contents {
	background: transparent;
}

.modal-charalist {
	position: absolute;
	width: 870px;
	top: -200px;
	left: 50%;
	-webkit-transform: translate(-50%, 70%);
	transform: translate(-50%, 70%);
}

.modal-charalist p {
	float: left;
	margin-right: 15px;
}

.modal-charalist ul {
	font-size: 0;
	margin: 0 -5px;
	margin-bottom: 40px;
	padding-left: 71px;
}
.modal-charalist li {
	position: relative;
	display: inline-block;
	margin: 0 5px 10px 5px;
	overflow: hidden;
}
.modal-charalist li .icon-new {
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	height: 34px;
	background: url(../characters/images/modal/charalist_thumbs_new.png) left top no-repeat;
	overflow: hidden;
}
#zoom-img {
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

#charalist .modal-close__righttop,
#zoom .modal-close__righttop {
    left: 50%;
    margin-left:410px;
	top: 20px;
	z-index: 1;
}
/**0405add**/
.swiper-slide img.icon_new{
	width: 94px;
	height: 94px;
	position: absolute;
	top:98px;
	left:10px;
}
p#o-chara{margin-right: 8px;}
.modal-charalist li:nth-child(11){margin-left:10px}