/* RaidMyView.html */

#defeatLog .subBox {
    text-align: right;
}

/*ボス討伐インフォ*/
#raidTop {
    position: relative;
    text-align: right;
    background: #000;
	-webkit-box-shadow: 0 0 4px 3px rgba(135,17,89,0.8);
    box-shadow: 0 0 4px 3px rgba(135,17,89,0.8);
    margin: 0.5em 0;
	overflow: hidden;
    height: 5.8em;
    -webkit-transition: height 0.5s ease-out;
}

#raidTop .bossImg {
    width: 10.5em;
    vertical-align: bottom;
}

#raidTop .raidDefeatInfo {
    position: absolute;
    top: 0;
    text-align: left;
    left: 4%;
    min-width: 8em;
    height: 100%;
    padding-top: 0.5em;
}

#raidTop .bossName {
    font-weight: bold;
    font-size: 1em;
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(80%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position-y: bottom;
    margin-bottom: 0.em;
    padding-bottom: 0.1em;
}

#raidTop .numInfo {
    margin-bottom: 0.em;
}

#raidTop .numInfo:last-of-type {
	margin-bottom: 0;
}

#raidTop .numInfo .title {
    font-size: 0.9em;
	margin-right: 0.3em;
}

#raidTop .numInfo .num {
    font-size: 1.3em;
}

#raidTop .numInfo .unit {
    font-size: 0.7em;
}

#raidTop .shadow {
    position: absolute;
    width: 100%;
    height: 1em;
}

#raidTop .shadow.top {
	top: 0;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0)));
	background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}

#raidTop .shadow.bot {
    top: 4.8em;
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(0, 0, 0, 1)), color-stop(100%,transparent));
	background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 1) 0%,transparent 100%);
	background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%,transparent 100%);
}

#raidTop #raidStoryBox {
	padding:1em;
	font-size: 0.8em;
	text-align: left;
}

#raidTop #raidStory {
    font-family: 'Hiragino Mincho ProN', serif;
    line-height: 1.3;
}

#raidTop #storyTitle {
	font-family: 'Hiragino Mincho ProN', serif;
}

/* CLEARマーク演出 *********/
#defeatLog .subBox .clearMark {
    width: 100%;
    max-width: 5em;
	vertical-align: bottom;
	-webkit-transform: rotate(-9deg);
}

#RaidMyView #defeatLog .subBox .clearMark {
	opacity:0;
	-webkit-transform-origin:50% 50%;
}

#RaidMyView.anmFlag #defeatLog .subBox .clearMark {
	-webkit-animation:clearAnm 0.5s ease-in;
}

#RaidMyView #defeatLog .list:nth-child(2) .clearMark {-webkit-animation-delay:0.4s;}
#RaidMyView #defeatLog .list:nth-child(3) .clearMark {-webkit-animation-delay:0.8s;}
#RaidMyView #defeatLog .list:nth-child(4) .clearMark {-webkit-animation-delay:1.2s;}
#RaidMyView #defeatLog .list:nth-child(5) .clearMark {-webkit-animation-delay:1.6s;}
#RaidMyView #defeatLog .list:nth-child(6) .clearMark {-webkit-animation-delay:2.0s;}
#RaidMyView #defeatLog .list:nth-child(7) .clearMark {-webkit-animation-delay:2.4s;}
#RaidMyView #defeatLog .list:nth-child(8) .clearMark {-webkit-animation-delay:2.8s;}
#RaidMyView #defeatLog .list:nth-child(9) .clearMark {-webkit-animation-delay:3.2s;}
#RaidMyView #defeatLog .list:nth-child(10) .clearMark {-webkit-animation-delay:3.6s;}

@-webkit-keyframes clearAnm {
	0%{-webkit-transform:scale(2.5) rotate(-9deg);opacity:1;}
	90%{-webkit-transform:scale(0.8) rotate(-10deg);opacity:1;}
	100%{-webkit-transform:scale(1) rotate(-9deg);opacity:1;}
}

#defeatLog .linkList .mainBox {
	width:80%;
}

.boxDisp h5 {}
.boxDisp .subBox {
    margin-top: 1.1em;
}
.boxDisp .subBox .clearMark {}

/* ItemReceived.html */

#getItemArea {}

#getItemBox {
    position: relative;
    width: 40%;
    margin: 0 auto;
}
.getItemImg {
    width: 100%;
}
.light {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: lighting 0.8s infinite alternate ease-out;
	-webkit-transform-origin:50% 50%;
}

@-webkit-keyframes lighting {
	0%{-webkit-transform:scale(0.3)}
	100%{-webkit-transform:scale(1)}
}

#light01 {
    width: 40%;
    top: -12%;
    left: 82%;
	-webkit-animation-delay:0.5s;
    -webkit-animation-duration: 1.3s;
}
#light02 {
    width: 29%;
    top: 37%;
    left: 102%;
    -webkit-animation-delay: 0.2s;
    -webkit-animation-duration: 0.8s;
}
#light03 {
    width: 34%;
    top: 78%;
    left: 80%;
    -webkit-animation-delay: 0.7s;
    -webkit-animation-duration: 0.9s;
}
#light04 {
    width: 32%;
    top: 6%;
    left: -18%;
    -webkit-animation-delay: 0.9s;
    -webkit-animation-duration: 0.7s;
}
#light05 {
    width: 34%;
    top: 51%;
    left: -27%;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-duration: 1.1s;
}
#light06 {
    width: 22%;
    top: 77%;
    left: -4%;
    -webkit-animation-delay: 1.1s;
    -webkit-animation-duration: 0.7s;
}
#light07 {
    width: 23%;
    top: 24%;
    left: 11%;
    -webkit-animation-delay: 1.3s;
    -webkit-animation-duration: 1s;
}

#allRaidStoryBox {
    position: relative;
    text-align: right;
    background: #000;
    -webkit-box-shadow: 0 0 4px 3px rgba(135,17,89,0.8);
    box-shadow: 0 0 4px 3px rgba(135,17,89,0.8);
    margin: 0.5em 0;
    overflow: hidden;
    height:0;
    -webkit-transition: height 0.5s ease-out;
}

#allRaidStoryBox #raidStoryBox {
    padding:1em;
    font-size: 0.8em;
    text-align: left;
}

#allRaidStoryBox #raidStory {
    font-family: 'Hiragino Mincho ProN', serif;
    line-height: 1.3;
}

#allRaidStoryBox #storyTitle {
    font-family: 'Hiragino Mincho ProN', serif;
}

/* Detail.html */


/* Information.html */

#Information #explain_list {
	padding: 2% 6%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

@media only screen and (min-width:768px){
	#raidTop #raidStory {
    	padding: 0 8em;
	}
}