@charset "UTF8";
/**
 * reset
 */
*{
	/* 意図しない横幅が出ないように画面幅で強制改行を有効にする */
	word-break: break-all;
}

body, div, h1, h2, h3, h4, h5, h6, ul {
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	text-align: center;
}

/**
 * default
 */
a:link {
	color: #FFFF00;
}

a:focus {
	color: #000000;
}

a:visited {
	color: #FFFF00;
}

body {
    background-attachment: fixed;
    background-color: #000;
    background-image:url(../images_SP/bg/body_common.jpg);
    background-position:top center;
    background-repeat:no-repeat;
    color: #FFF;
    margin-left: auto;
    margin-right: auto;
    width:320px;
}

img {
	vertical-align: top;
}

#container {
    background-color: #000;
    clear: both;
}

.dummyLink {
    color: #FFFF00;
    text-decoration: underline;
}

/**
 * mypage
 */
#displayCards {
	width: 100%;
}


#marquee {
	-webkit-marquee-direction: left;
	-webkit-marquee-loop: infinite;
	background-color: #333333;
	display: -wap-marquee;
	overflow-x: -webkit-marquee;
	padding: 10px;
    white-space: nowrap;
}

#marquee.marqueeBackground {
	background:  -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#000),
		to(#4A006E)
	);
}

.mypageCard {
	float: left;
}

.mypageCardImg {
	width: 100%;
}

#mypageMenu .column {
	margin: 0.5em 0;
}

.naviBtn {
	float: left;
}

.naviBtnImg {
	width: 100%;
}

.blink {
	text-decoration: blink;
}

#userStatus {
}

#userStatusTop {
}

#userStatusBottom {
}

#userStatusData {
	width: 90%;
}

.userStatusValue {
	float: left;
}

#rookieBonus {
	border-bottom: dotted medium #6F004D;
}

#notice {
    background: -webkit-gradient(
        linear,
        left top,
        right bottom,
        from(#3F0011),
        to(#000)
    );
}

#notice .text {
	border-bottom: dotted medium #6F004D;
}

#information {
	background: -webkit-gradient(
		linear,
		left top,
		right bottom,
		from(#08102F),
		to(#000)
	);
}

.relative {
    position:relative;
}

.fixedPopup {
    display:none;
    position:absolute;
    z-index: 8000;
}

/*
#information .title {
	background: -webkit-gradient(
		linear,
		left top,
		right top,
		from(#18829B),
		color-stop(0.5, #6A005F),
		to(#18829B)
	);
}
*/

#information .text {
	border-bottom: dotted medium #1D339B;
}

#userProfile {
	background: -webkit-gradient(
		linear,
		left top,
		right bottom,
		from(#001B0D),
		to(#000)
	);
}

#userProfile .title {
	background: -webkit-gradient(
		linear,
		left top,
		right top,
		from(#00AC7F),
		color-stop(0.5, #6A005F),
		to(#00AC7F)
	);
}

#userProfile .text {
}

#battleHistory {
	background: -webkit-gradient(
		linear,
		left top,
		right bottom,
		from(#3D0D00),
		to(#000)
	);
}

#battleHistory .title {
	background: -webkit-gradient(
		linear,
		left top,
		right top,
		from(#ef0f28),
		color-stop(0.5, #61006b),
		to(#ef0f28)
	
/*元のグラデーション*/
/*		from(#F1270E),
		color-stop(0.5, #6A005F),
		to(#F1270E)
*/	);
}

#battleHistory .text {
	border-bottom: dotted medium #CB0700;
}

#friendshipHistory {
	background: -webkit-gradient(
		linear,
		left top,
		right bottom,
		from(#2B280D),
		to(#000)
	);
}

#friendshipHistory .title {
	background: -webkit-gradient(
		linear,
		left top,
		right top,
		from(#00AC7F),
		color-stop(0.5, #6A005F),
		to(#00AC7F)
	);
}

#friendshipHistory .text {
}

#friendshipHistoryData {
}

#friendshipHistoryData .data {
	background-color: #6B6310;
	width: 320px;
}

#friendshipHistoryData .image {
	float: left;
	margin-left: 10px;
	width: 35%;
}

#friendshipHistoryData .avatar {
	float: left;
}

#friendshipHistoryData .leaderCard {
	float: left;
}

#friendshipHistoryData .text {
	float: left;
	width: 60%;
}

#friendshipHistoryData .text .top {
	border-bottom: dotted medium #CB0700;
}

#friendshipHistoryData .text .bottom {
}

/**
 * 汎用クラス
 */
.buttonBox{
}


.buttonBox a {
    -webkit-border-radius: 10px;
    -webkit-box-shadow: 7px 7px 10px #000000;
    text-shadow: -1px -1px 2px #aaaaaa;
	background: -webkit-gradient(linear, left top, left bottom, from(#f7bf05), to(#73093f));
	border: 1px solid #777777;
	box-shadow: 5px 5px 5px #000000;
	color: #FFF;
	display: block;
	text-align: center;
	text-decoration: none;
}

.buttonBox span.glay {
    -webkit-border-radius: 10px;
    -webkit-box-shadow: 7px 7px 10px #000000;
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#aaa));
    border: 1px solid #777777;
    box-shadow: 5px 5px 5px #000000;
    color:#FFF;
    display:block;
    text-align:center;
    text-decoration:none;
}


#tabAttribute {
	font-size:small;
}

#tabAttribute .buttonBox .button a {
	background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#AD964D),
        to(#653649)
        );
}


.buttonBox span.active {
	-webkit-border-radius: 10px;
    -webkit-box-shadow: 7px 7px 10px #000000;
	background: -webkit-gradient(linear, left top, left bottom, from(#f6ff00), to(#bd0074));
	border: 1px solid #777777;
	box-shadow: 5px 5px 5px #000000;
	color:#FFF;
	display:block;
	text-align:center;
	text-decoration:none;
}


/**
 * 属性2のボタンOFF時
 */
.buttonBox .button1 a {
	-webkit-border-radius: 10px;
	-webkit-box-shadow: 7px 7px 10px #000000;
	background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#406955),
        to(#172326)
        );
	border: 1px solid #777777;
	box-shadow: 5px 5px 5px #000000;
	color:#FFF;
	display:block;
	text-align:center;
	text-decoration:none;
}

/**
 * 属性2のボタンON時
 */
.buttonBox .button1 span.active {
	-webkit-border-radius: 10px;
	-webkit-box-shadow: 7px 7px 10px #000000;
	background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#00FF7E),
        to(#004879)
        );
	border: 1px solid #777777;
	box-shadow: 5px 5px 5px #000000;
	color:#FFF;
	display:block;
	text-align:center;
	text-decoration:none;
}

/**
 * 属性3のボタンOFF時
 */
.buttonBox .button2 a {
	-webkit-border-radius: 10px;
	-webkit-box-shadow: 7px 7px 10px #000000;
	background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#915162),
        to(#442635)
        );
	border: 1px solid #777777;
	box-shadow: 5px 5px 5px #000000;
	color:#FFF;
	display:block;
	text-align:center;
	text-decoration:none;
}

/**
 * 属性3のボタンON時
 */
.buttonBox .button2 span.active {
	-webkit-border-radius: 10px;
	-webkit-box-shadow: 7px 7px 10px #000000;
	background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#FF1239),
        to(#8A0068)
        );
	border: 1px solid #777777;
	box-shadow: 5px 5px 5px #000000;
	color:#FFF;
	display:block;
	text-align:center;
	text-decoration:none;
}

/**
 * 属性1のボタンOFF時
 */
.buttonBox .button3 a {
	-webkit-border-radius: 10px;
	-webkit-box-shadow: 7px 7px 10px #000000;
	background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#817948),
        to(#443026)
        );
	border: 1px solid #777777;
	box-shadow: 5px 5px 5px #000000;
	color:#FFF;
	display:block;
	text-align:center;
	text-decoration:none;
}

/**
 * 属性1のボタンON時
 */
.buttonBox .button3 span.active {
	-webkit-border-radius: 10px;
	-webkit-box-shadow: 7px 7px 10px #000000;
	background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#FFE400),
        to(#A04B00)
        );
	border: 1px solid #777777;
	box-shadow: 5px 5px 5px #000000;
	color:#FFF;
	display:block;
	text-align:center;
	text-decoration:none;
}


.buttonBox input[type="submit"] {
	display:block;
	text-align:center;
	margin: 0 auto;
	-webkit-border-radius: 10px;
	border: 1px solid #777777;
	text-shadow: -1px -1px 2px #aaaaaa;
	background: -webkit-gradient(linear, left top, left bottom, from(#f7bf05), to(#73093f));
	box-shadow: 5px 5px 5px #000000;
	-webkit-box-shadow: 7px 7px 10px #000000;
	text-decoration:none;
	color:#FFF;
}

.buttonBox .more {
    width: 10em;
}

.buttonBoxSmall {
    width: 45%;
    padding-left:0.5em;
}

.buttonBoxSmall .glay{
	display:block;
	text-align:center;
	margin: 0 auto;
	padding:10px;
	-webkit-border-radius: 10px;
	border: 1px solid #777777;
	text-shadow: -1px -1px 2px #aaaaaa;
	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#aaa));
	box-shadow: 5px 5px 5px #000000;
	  -webkit-box-shadow: 7px 7px 10px #000000;
	text-decoration:none;
	color:#FFF;
}

.buttonBoxSmall .button a {
	display:block;
	text-align:center;
	margin: 0 auto;
	padding:10px;
	-webkit-border-radius: 10px;
	border: 1px solid #777777;
	text-shadow: -1px -1px 2px #aaaaaa;
	background: -webkit-gradient(linear, left top, left bottom, from(#f7bf05), to(#73093f));
	box-shadow: 5px 5px 5px #000000;
	  -webkit-box-shadow: 7px 7px 10px #000000;
	text-decoration:none;
	color:#FFF;
}

.borderBottomDottedBlue {
	border-bottom: dotted medium #1D339B;
}

.borderBottomDottedPurple {
	border-bottom: dotted medium #6F004D;
}

.borderBottomDottedRed {
	border-bottom: dotted medium #CB0700;
}


.borderTopDottedBlue {
	border-top: dotted medium #1D339B;
}

.borderTopDottedPurple {
	border-top: dotted medium #6F004D;
}

.borderTopDottedRed {
	border-top: dotted medium #CB0700;
}

.center {
	text-align: center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}

.clearFix{
	clear: both;
}

.columnFive {
	width: 20%;
}

.columnFour {
	width: 25%;
}

.columnThree {
	width: 33%;
}

.columnTwo {
	width: 50%;
}

.blockCenter {
	margin-left: auto;
	margin-right: auto;
}

.blockLeft {
	margin-left: 0;
	margin-right: auto;
}

.blockRight {
	margin-left: auto;
	margin-right: 0;
}

.bannerImg {
	width: 240px;
}

#questGage {
    background-color: black;
    background-image: url(../images_SP/gage_b.gif);
    width:153px;
}

.gage .title {
	width: 20%;
}

.gage .value {
	width: 25%;
}

.gage .gages {
	width: 55%;
}

.radiusTop {
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
}

.radiusBottom {
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
}

.paddingCommon {
	padding-bottom: 0.3em;
	padding-top: 0.3em;
}

.paddingCommonRL {
	padding-right:0.3em;
	padding-left:0.3em;
}


.marginCommon {
	margin-bottom: 0.5em;
	margin-top: 0.5em;
}

.paddingCommonLink {
	padding-bottom: 0.8em;
	padding-top: 0.8em;
}

.paddingCommonBottom {
    padding-bottom:0.3em;
}

.paddingCommonTop {
    padding-top:0.3em;
}

.marginCommonBottom {
	margin-bottom: 0.5em;
}

.marginCommonTop {
	margin-top: 0.5em;
}

.marginCommonRight {
	margin-right: 0.5em;
	}

.marginCommonLeft{
	margin-left:0.5em;
	}

.textIndentCommon {
	text-indent: 0.8em;
}

.preMultilineTextIndent {
    margin-left: 2.4em;
}
.preMultilineTextIndent .multilineTextIndent {
    text-indent: -1.6em;
}

.widthDefault {
	width:320px;
}

.floatLeft {
	float: left;
}

.floatRight {
    float: right;
}


.back a {
    width: 75px;
    height: 40px;
    display: block;
	padding-top: 10px;
    padding-left: 0.2em;
    color: #fff;
    text-decoration: none;
    font-weight:bold;
}

.back {
    background-image:url(../images_SP/btn/back.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    height: 40px;
    text-align:center;
    width: 75px;
}


.next a {
	width: 75px;
	height: 40px;
	display: block;
	padding-top: 10px;
	padding-left: 0.2em;
	color: #fff;
	text-decoration: none;
	font-weight:bold;
	-webkit-transform: scaleX(-1);
}

.next {
	background-image:url(../images_SP/btn/back.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto;
	height: 40px;
	text-align:center;
	width: 75px;
	-webkit-transform: scaleX(-1);
}

.thinLinePink {
	text-decoration:none;
    text-shadow: -1px -1px 2px #AAA;
	-webkit-text-fill-color: #ffffff;
/*	-webkit-text-stroke-color: #721445;
	-webkit-text-stroke-width: 0.8px;
*/	background: -webkit-gradient(
		linear,
		left top,
		right top,
		from(#d15281),
		color-stop(0.5, #97164d),
		to(#d15281)

/*元のグラデーション*/
/*		from(#EA68A1),
		color-stop(0.5, #B6195E),
		to(#EA68A1)
*/	);
/*	font-size: large;
*/	font-weight:bold;
}

.thinLineBlue {
	text-decoration:none;
    text-shadow: -1px -1px 2px #AAA;
	-webkit-text-fill-color: #ffffff;
/*	-webkit-text-stroke-color: #14146D;
	-webkit-text-stroke-width: 0.8px;
*/	background: -webkit-gradient(
        linear,
        left top,
        right top,
        from(#2790a9),
        color-stop(0.5, #001f27),
        to(#2790a9)	
		
/*元のグラデーション
*//*        from(#18829B),
        color-stop(0.5, #003D4C),
        to(#18829B)
*/    );
/*    font-size: large;
*/	font-weight:bold;
}

.thinLineYellow {
	text-decoration:none;
    text-shadow: -1px -1px 2px #AAA;
	-webkit-text-fill-color: #ffffff;
/*	-webkit-text-stroke-color: #A16600;
	-webkit-text-stroke-width: 0.8px;
*/	background: -webkit-gradient(
        linear,
        left top,
        right top,
        from(#EBDE47),
        color-stop(0.5, #B85B00),
        to(#EBDE47)
    );
    font-size: large;
	font-weight:bold;
}


.tiltGradientPink {
	background: -webkit-gradient(
		linear,
		left top,
		right bottom,
		from(#3F0011),
		to(#000)
	);
}

/**
 * ポップアップメニュー(ColorBox)
 */
#menuWindow {
	width: 320px;
}
#colorbox, #cboxOverlay, #cboxWrapper {
    overflow:hidden;
    top     :0;
    left    :0;
    z-index :9999;
}
#cboxOverlay {
	position:fixed;
	width:100%;
	height:100%;
}
#cboxMiddleLeft, #cboxBottomLeft {
	clear:left;
}
#cboxContent {
	position:relative;
}
#cboxLoadedContent {
	overflow:auto;
}
#cboxTitle {
	margin:0;
}
#cboxLoadingOverlay, #cboxLoadingGraphic {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
	cursor:pointer;
	display:none;
}
.cboxPhoto {
	float:left;
	margin:auto;
	border:0;
	display:block;
}
.cboxIframe {
	width:100%;
	height:100%;
	display:block;
	border:0;
}
#colorbox, #cboxContent, #cboxLoadedContent {
	box-sizing:content-box;
}
#cboxOverlay {
	background:#000;
}
#colorbox {

}
#cboxContent {
	margin-top:20px;
}

#popupMenu {
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#583842),
		to(#656565)
	);
}

#popupMenu .column {
	margin-top:0.5em;
	margin-bottom:0.7em;
	width: 95%;
}

#popupMenu .columnLeft {
	float:left;
	width:50%;
}

#popupMenu .columnRight {
}

.fixedPopup {
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#583842),
        to(#656565)
    );
}

.fixedPopup .column {
    margin-top:0.5em;
    margin-bottom:0.7em;
    width: 95%;
}

.fixedPopup .columnLeft {
    float:left;
    width:50%;
}

.fixedPopup .columnRight {
}

.fixedNavigation {
	width: 100%;
}

.fixedNavigation img{
	width: 100%;
}

.fixedNavigation .fixedMenu {
    width: 20%;
}

.fixedNavigation .fixedMypage {
    width: 20%;
}
.fixedNavigation .fixedGacha {
    width: 20%;
}

.fixedNavigation .fixedTop {
    width: 20%;
}

.fixedNavigation .fixedMix {
    width: 20%;
}

/******* 属性ごとの色つけ ******/
.textColor1{
	color:#14ff8e;
	}

.textColor2{
	color:#ff4a6c;
	}

.textColor3{
	color:#ffeb42;
	}

.borderColor1{
	border:solid 2px #14ff8e;
	}

.borderColor2{
	border:solid 2px #ff4a6c;
	}

.borderColor3{
	border:solid 2px #ffeb42;
	}

.borderBottomDottedColor1 {
    border-bottom: dotted medium #14ff8e;
}

.borderBottomDottedColor2 {
    border-bottom: dotted medium #ff4a6c;
}

.borderBottomDottedColor3 {
    border-bottom: dotted medium #ffeb42;
}

.borderTopDottedColor1 {
    border-top: dotted medium #14ff8e;
}

.borderTopDottedColor2 {
    border-top: dotted medium #ff4a6c;
}

.borderTopDottedColor3 {
    border-top: dotted medium #ffeb42;
}

.width100Per {
    width:100%;
}

.width50Per {
    width: 50%;
}

.width75Per {
	width:75%;
}

.width40Per {
	width:40%;
}

.width90Per {
	width:90%;
}

.gradientTitle {
	width:100%;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #fdc602),
		color-stop(.50, #7b004b),
		color-stop(1, #fdc602)
	);
	text-align:center;
	font-size:large;
	font-weight:bold;
	text-shadow: -1px -1px 2px #7b004b;
}

.pageTitle{
	width:100%;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	background: -webkit-gradient(
	    linear,
        left top,
        right top,
        from(#EBDE47),
        color-stop(0.5, #B85B00),
        to(#EBDE47)
		
/*元のグラデーション*/
/*	left bottom,
	color-stop(0, #fdc602),
	color-stop(.50, #7b004b),
	color-stop(1, #fdc602)
*/	);
	text-align:center;
	font-size:large;
	font-weight:bold;
	text-decoration: none;
    text-shadow: -1px -1px 2px #AAA;
	-webkit-text-fill-color: #ffffff;
/*	-webkit-text-stroke-color: #7b004b;
	-webkit-text-stroke-width: 1px;
*/	margin-bottom:0.3em;
	}

/*.purpleLinedTitle{
	background: -webkit-gradient(linear, left top, left bottom, from(#a45285), to(#5e033b));
	-webkit-border-radius: 7px 7px 0 0/7px 7px 0 0;
	padding:10px;
	width:300px;
	-webkit-text-fill-color: #ffffff;
	-webkit-text-stroke-color: #5e033b;
	-webkit-text-stroke-width: 0.8px;
	font-size:x-large;
	font-weight:bold;
	}*/

.purpleLinedTitle{
	-webkit-border-radius: 5px 5px 0 0/5px 5px 0 0;
	text-decoration: none;
    text-shadow: -1px -1px 2px #AAA;
	-webkit-text-fill-color: #ffffff;
/*	-webkit-text-stroke-color: #5e033b;
	-webkit-text-stroke-width: 0.8px;
*/	background: -webkit-gradient(linear, left top, left bottom, from(#a45285), to(#5e033b));
    font-size: large;
	font-weight:bold;
}

.statusBoxPurple {
	background-color: #400039;
	-webkit-border-radius: 0 0 5px 5px/0 0 5px 5px;
	padding:0.5em;
}

.linedTitleBaseline {
    padding-top: 0.3em;
}

.purpleBox{
    background-color     :#20001d;
    -webkit-border-radius: 0 0 7px 7px/ 0 0 7px 7px;
    padding              :10px;
    width                :300px;
}

.purpleBox div{
    color         :#ffff33;
    border-bottom :dotted 3px;
    border-width  :3px;
    padding-left  :1em;
    padding-bottom:0.3em;
    border-color  :#a45285;
    margin-bottom :0.3em;
}

.goldLinedTitle{
    -webkit-border-radius  : 5px 5px 0 0/5px 5px 0 0;
    -webkit-text-fill-color: #ffffff;
    text-decoration        :none;
    text-shadow            : -1px -1px 2px #AAA;
    background             : -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#BF7500),
        to(#5E2200)
    );
    font-size  : large;
    font-weight:bold;
}

.baseBox1{
    -webkit-border-radius: 7px;
    background-color     :#00431D;
	/*-webkit-border-radius: 0 0 7px 7px/ 0 0 7px 7px;
	padding:10px;*/
}

.baseBox2{
    -webkit-border-radius: 7px;
    background-color     :#660003;
	/*-webkit-border-radius: 0 0 7px 7px/ 0 0 7px 7px;
	padding:10px;*/
}

.baseBox3{
    -webkit-border-radius: 7px;
    background-color     :#595308;
	/*-webkit-border-radius: 0 0 7px 7px/ 0 0 7px 7px;
	padding:10px;*/
}

.baseBoxGray{
    background-color     :#262626;
    -webkit-border-radius: 5px;
	/*padding:0.5em;*/
}

.baseBoxPurple {
    background-color     :#1F001C;
    -webkit-border-radius: 5px;
	/*padding:0.5em;*/
}

.colorRed {
	color:#FF0000;
}

.colorLikeRed{
	color:#FF1111;
}

.colorLikePink {
	color:#FF0066;
}

.colorLikeAqua {
	color:#00C0C0;
}

.colorLikeGreen {
	color:#00CC00;
}

.colorLikeWineRed {
	color:#990000;
}

.colorLikeOrange {
	color:#FF6600;
}

.colorBlue {
	color:#0000FF;
}

.colorWhite {
	color:#FFFFFF;
}

.redLine {
    border          :solid #FF0000 1px;
    height          :0px;
    color           :#FF0000;
    background-color:#FF0000;
    margin          :0px;
    padding         :0px;
}


.bgCheckPurple{
	background-image:url(../images_SP/bg/bunner_bg_ichimatsu_small.png);
	}

.bgBoxPurple{
	background-color:#1F001C;
	}


/* smallButtonはbuttonParallelに統一する */
.smallButton a {
    text-align           :center;
    text-decoration      :none;
    color                :#FFF;
    display              :inline-block;
    padding              :5px;
    width                :120px;
    font-size            :small;
    -webkit-border-radius: 7px;
    border               : 1px solid #777;
    text-shadow          : -1px -1px 2px #AAA;
    background           : -webkit-gradient(linear, left top, left bottom, from(#f7bf05), to(#73093f));
    box-shadow           : 5px 5px 5px #000;
    -webkit-box-shadow   : 7px 7px 10px #000;
}

/**
 * 小さいボタンを平行に並べる
 * 単なるボタンのリンク用
 */
.buttonParallel a{
    -webkit-border-radius: 5px;
    -webkit-box-shadow   : 7px 7px 10px #000000;
    background           : -webkit-gradient(linear, left top, left bottom, from(#f7bf05), to(#73093f));
    border               : 1px solid #777777;
    box-shadow           : 5px 5px 5px #000000;
    color                : #FFF;
    display              :inline-block;
    text-align           : center;
    text-decoration      : none;
    text-shadow          : -1px -1px 2px #AAA;
    width                :40%;
}

/**
 * 小さいボタンを平行に並べる
 * 複数のボタンが選択肢になっているリンク用
 * ボタンが暗い配色になっている
 * ex.)属性の選択ボタン等
 */
.buttonParallel a.nonActive {
    -webkit-border-radius: 5px;
    -webkit-box-shadow   : 7px 7px 10px #000000;
    background           : -webkit-gradient(linear, left top, left bottom, from(#f7bf05), to(#73093f));
    border               : 1px solid #777777;
    box-shadow           : 5px 5px 5px #000000;
    color                :#FFF;
    display              :inline-block;
    text-align           :center;
    text-decoration      :none;
    text-shadow          : -1px -1px 2px #AAA;
    width                :40%;
}

/**
 * 小さいボタンを平行に並べる
 * 複数のボタンが選択肢になっているボタンの選択されている状態
 */
.buttonParallel .active {
    -webkit-border-radius: 5px;
    -webkit-box-shadow   : 7px 7px 10px #000000;
    background           : -webkit-gradient(linear, left top, left bottom, from(#f6ff00), to(#bd0074));
    border               : 1px solid #777777;
    box-shadow           : 5px 5px 5px #000000;
    color                :#FFF;
    display              :inline-block;
    text-align           :center;
    text-decoration      :none;
    text-shadow          : -1px -1px 2px #AAA;
    width                :40%;
}

/**
 * ページング用
 */
.pager {
	padding-top: 0.8em;
	padding-bottom: 0.8em;
}

.pager a {
    -webkit-border-radius  : 3px;
    -webkit-box-shadow     : 7px 7px 10px #000000;
    -webkit-text-fill-color: #ffffff;
    background             : -webkit-gradient(linear, left top, left bottom, from(#f7bf05), to(#73093f));
    border                 : 1px solid #777777;
    box-shadow             : 5px 5px 5px #000000;
    display                :inline-block;
    text-align             : center;
    text-decoration        : none;
    padding                : 0.5em 1em;
}

.pager b {
    -webkit-border-radius  : 3px;
    -webkit-box-shadow     : 7px 7px 10px #000000;
    -webkit-text-fill-color: #ffffff;
    background             : -webkit-gradient(linear, left top, left bottom, from(#F6FF00), to(#BD0074));
    border                 : 1px solid #777777;
    box-shadow             : 5px 5px 5px #000000;
    display                :inline-block;
    text-align             : center;
    text-decoration        : none;
    padding                : 0.5em 1em;
}

.userListContainer{
    clear        :both;
    margin-left  :auto;
    margin-right :auto;
    margin-bottom:5px;
    width        :320px;
    min-height   :100px;
}

/***** for Green stuff color number 1 *****/
.userList1Left{
    padding              :0.2em;
    width                :133px;
    text-align           :center;
    -webkit-border-radius: 7px 0 0 7px/7px 0 0 7px;
    background-color     :#003a19;
    float                :left;
    height               :100px;
    vertical-align       :bottom;
}

.userList1Right{
    padding              :0.2em;
    width                :173px;
    background-color     :#002710;
    -webkit-border-radius:0 7px 7px 0/0 7px 7px 0;
    float                :right;
    min-height           :100px;
}

.player1Border img{
	border: solid 2px;
	border-color:#14ff8e;
}


/***** for Red stuff color number 2 *****/
.userList2Left {
    padding              :0.2em;
    width                :133px;
    text-align           :center;
    -webkit-border-radius: 7px 0 0 7px/7px 0 0 7px;
    background-color     :#3d0002;
    float                :left;
    height               :100px;
    vertical-align       :middle;
}

.userList2Right{
    padding              :0.2em;
    width                :173px;
    background-color     :#290001;
    -webkit-border-radius:0 7px 7px 0/0 7px 7px 0;
    float                :right;
    min-height           :100px;
}

.player2Border img{
    border      : solid 2px;
    border-color:#ff4a6c;
}


/***** for Yellow stuff color number 3 *****/
.userList3Left{
    padding              :0.2em;
    width                :133px;
    text-align           :center;
    -webkit-border-radius: 7px 0 0 7px/7px 0 0 7px;
    background-color     :#4d4807;
    float                :left;
    height               :100px;
    vertical-align       :middle;
}

.userList3Right{
    padding              :0.2em;
    width                :173px;
    background-color     :#332f05;
    -webkit-border-radius:0 7px 7px 0/0 7px 7px 0;
    float                :right;
    min-height           :100px;
}

.player3Border img{
    border      : solid 2px;
    border-color:#ffeb42;
}

.userListWidth{
	width:172px;
	}

/** アプリ未登録フレンド用 **/
.userListLeftGray {
    padding              :0.3em;
    width                :130px;
    background-color     :#262626;
    -webkit-border-radius: 7px 0 0 7px/7px 0 0 7px;
    float                :left;
    height               :100px;
    text-align           :center;
    vertical-align       :bottom;
}

.userListRightGray {
    padding              :0.3em;
    width                :172px;
    background-color     :#262626;
    -webkit-border-radius:0 7px 7px 0/0 7px 7px 0;
    float                :right;
    min-height           :100px;
}

.playerBorderGray img{
    border      : solid 2px;
    border-color:#1a1a1a;
}


.bgGray {
    background-color     :#262626;
    -webkit-border-radius: 10px;
    -webkit-border-radius: 10px;
    width                :300px;
    margin               :5px auto;
    padding              :10px;
}

.godMark {
	width:15px;
	height:14px;
}

ul.linkList {
    list-style-type    : none;
    list-style-position: inside;
}

ul.linkList li {
    display: block;
    margin : 0.8em 0;
}


.checkboxScale {
    -webkit-transform: scale(1.5,1.5);
}

/**
 * このclassのアイテムを光らせる。
 * easeInOutBlinkとpulseはセットで使用
 */
.easeInOutBlink {
    -webkit-animation-direction: alternate;
    -webkit-animation-delay: 0s;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-name: pulse;
    -webkit-animation-timing-function:ease-in-out;
}
@-webkit-keyframes pulse {
    from {
        opacity: 1.0;/*透明度100%*/
    }
    to {
        opacity: 0.8;/*透明度80%*/
    }
}

.doubleSubmitDisableAnchorAfter {
    display: block;
    margin : 1px 0;
}

.imgSize1em {
    width      : 1em;
    height     : 1em;
    margin-left: 2px;
}

.loading {
    background     : url("../images_SP/icon/loading.gif") no-repeat;
    background-size:16px auto; /*実寸の半分にしてアイコン1つが16x16になるようにする*/
    width          :16px;
    height         :16px;
    margin         :0 2px;
    padding        : 0;
    display        : inline-block;
    position       :relative;top:2px;
}

.progress_img {
    position         : absolute;
    left             : 50%;
    width            : 32px;
    height           : 32px;
    -webkit-animation: progress_img infinite 0.8s cubic-bezier(0, 0, 1, 1);
    animation        : progress_img infinite 0.8s cubic-bezier(0, 0, 1, 1);
}
.progress_img:before  {
    display         : block;
    position        : absolute;
    top             : -5px;
    left            : 20px;
    border-radius   : 50%;
    width           : 10px;
    height          : 10px;
    content         : "";
}
@-webkit-keyframes progress_img {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
.progress_logo_area {
    position   : absolute;
    top:6px;
    left: 50%;
    margin: 0;
    padding-left: 8px;
}
.progress_logo {
    margin           : 0;
    padding          : 0;
    opacity          :0.8;
    filter           : alpha(opacity=80);
    -webkit-animation: progress_logo infinite 2.0s cubic-bezier(0, 0, 1, 1);
}
@-webkit-keyframes progress_logo {
    0% {
        opacity:0.8;
        filter: alpha(opacity=80);
    }
    50% {
        opacity:0.3;
        filter: alpha(opacity=30);
        }
    100% {
        opacity:0.8;
        filter: alpha(opacity=80);
    }
}

#fade {
    background : none repeat scroll 0 0 #000;
    height     : 100%;
    left       : 0;
    position   : fixed;
    text-indent: inherit;
    top        : 0;
    width      : 100%;
    z-index    : 9990;
    opacity    : 0.3;
}

#fade img{
    opacity: 1.0;
}

#menuWindow {
    background : none repeat scroll 0 0 #000;
    height     : 100%;
    left       : 0;
    position   : fixed;
    text-indent: inherit;
    top        : 0;
    width      : 100%;
    z-index    : 9990;
    opacity    : 1;
}

#menuWindow img{
    opacity: 1.0;
}

.gageImg {
    height: 12px;
}