@charset "UTF-8";
@font-face {
	font-family: 'Astrolyte';
	src: url("/assets/webfont/Astrolyte.ttf.woff") format("woff"), url("/assets/webfont/Astrolyte.ttf.svg#Astrolyte") format("svg"), url("/assets/webfont/Astrolyte.ttf.eot"), url("/assets/webfont/Astrolyte.ttf.eot?#iefix") format("embedded-opentype");
	font-weight: normal;
	font-style: normal;
}

.layoutgrid {
	width: 100%;
	height: 400%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(/assets/img/common/151219/grid40x40.png) repeat;
	z-index: 9999;
	opacity: 0.2;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}

.layoutgrid960 {
	width: 960px;
	height: 400%;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -480px;
	background: dodgerblue;
	opacity: 0.1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
	z-index: 9999;
}

/* ------------------------------------------
	共通スタイル上書き
------------------------------------------ */
.wrapper {
	background: url(/assets/img/common/151219/trigrid.png) repeat;
	background-color: #000;
	background-attachment: fixed;
	height: 100%;
	min-height: 800px;
}

.pageHeader {
	padding-bottom: 0;
	padding-top: 55px;
}

.pageHeader__bg {
	margin-top: 0;
	background: url(../images/renewal/trigrid_dark.png);
	background-attachment: fixed;
	background-color: #42ff55;
}

.pageHeader__ttl {
	font-size: 80px;
	font-size: 5rem;
	color: #000;
	top: -68px;
}

.pageHeader .r01 {
	top: -64px;
	left: 512px;
}

/* ------------------------------------------
	キャラクター
------------------------------------------ */
.characters {
	position:absolute;
	bottom:0;
	right:0;
	width:auto;
	height:auto;
	z-index:201;
}

@media screen and (max-device-width: 1350px),
screen and (max-width: 1350px) {
	.characters {
	width: 60%;
}
}


.characters li {
	float:left;
	position:relative;
	width:10%;
	overflow:hidden;
}

.characters li img {
	width:100%;
	max-width: 320px;
}

.characters li:hover .onImg {
	width: 100%;
	height:100%;
}

.characters li .offImg {
	display:inline-block;
	width: 100%;
	height: 100%;
	cursor:pointer;
}

.characters li .offImg img {
	transition: all 0.3s ease;
}

.characters li .onImg {
	transition:all 0.3s ease;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	position:absolute;
	top:50%;
	left:50%;
	width:0;
	height:0;
	overflow:hidden;
	border-radius:45px;
	cursor:pointer;
}

.characters .issei .onImg {
	background: rgba(200, 2, 2, 0.5);
}

.characters .riasu .onImg {
	background: rgba(255, 42, 112, 0.5);
}

.characters .akeno .onImg {
	background: rgba(228, 197, 26, 0.5);
}

.characters .asia .onImg {
	background: rgba(11, 187, 94, 0.5);
}

.characters .koneko .onImg {
	background: rgba(157, 107, 166, 0.5);
}

.characters .zenovia .onImg {
	background: rgba(26, 153, 212, 0.5);
}

.characters .gyasupa .onImg {
	background: rgba(209, 152, 168, 0.5);
}

.characters .irina .onImg {
	background: rgba(255, 133, 53, 0.5);
}

.characters .gureifia .onImg {
	background-size:contain;
	border-radius:initial;
}

/* ------------------------------------------
	キャラクター details
------------------------------------------ */
.charaDetails {
	padding-bottom:calc(705 / 1680 * 100%);
	width: 100%;
	height:0;
	overflow: hidden;
	position: absolute;
	top:0;
	left:0;
	z-index:200;
}

.charaDetails img {
	width: 100%;
}

.charaDetails .charaPh {
	transition: all 0.25s ease;
	transform: scale(1.05);
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.charaDetails .charaPh.show {
	transform: scale(1);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	z-index: 10;
}

.charaDetails .screen {
	position:absolute;
	top:0;
	right:0;
	width:0;
	height:100%;
	background:url(../images/renewal/trigrid_dark.png) center center no-repeat;
	background-size:cover;
}

.charaDetails .uiBtns {
	transition: all 0.2s ease;
	position: relative;
	z-index: 100;
	width:101px;
	height: 100%;
}

.charaDetails .uiBtns span {
	width:101px;
	height:141px;
	position: absolute;
	top:50%;
	left:0;
	transform:translateY(-50%);
}

.charaDetails .uiBtns span img {
	width: 100%;
	cursor:pointer;
}

.charaDetails .next {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
}

.charaDetails .prev {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}

.chClose {
	transition: all 0.2s ease;
	position: absolute;
	top: 20px;
	right: 15px;
	width: 110px;
	height: 110px;
	display: none;
	z-index: 200;
	cursor: pointer;
}

.chClose:hover {
	opacity: 0.7;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

.chClose img {
	width: 100%;
}
.dressbreak{
	position:absolute;
	bottom:9px;
	left:27%;
	width:12%;
	border-radius:50%;
	z-index:200;
}
.dressbreak .ar{
	position:absolute;
	bottom:27%;
	left:30%;
	width:40%;
	z-index:200;
	cursor: pointer;
}
.flash{
	animation-delay:1s;
	animation-duration:2s;
	animation-iteration-count:infinite;
	animation-name:flash;
	animation-timing-function:linear;
}

.rot{
	
	animation-duration:2s;
	animation-iteration-count:infinite;
	animation-name:rot;
	animation-timing-function:ease-in;
}
.dim{
	cursor:pointer;
}
@keyframes flash{
	0%,100%{opacity:1;}
	20%{opacity:0.5;}
	40%{opacity:1;}
	60%{opacity:0.5;}
	80%{opacity:1;}
}

@keyframes rot{
	0%{-webkit-transform: rotate(0deg);}
	30%{-webkit-transform: rotate(180deg);}
	50%{-webkit-transform: rotate(180deg);}
	80%{-webkit-transform: rotate(360deg);}
	100%{-webkit-transform: rotate(360deg);}
}

@media screen and (max-device-width: 736px),
screen and (max-width: 736px) {
	.dressbreak {
		bottom: 70px !important;
		left: 40% !important;
		width: 10% !important;
	}
	.charaDetails .uiBtns{
		width:10%;
	}
	.charaDetails .uiBtns span{
		width:auto;
		height:auto;
	}
}