@charset"utf-8";

/*配色・デザイン・レイアウトの調整*/

 /* http://www.jp.square-enix.com/FFBE/serialcode/
========================================================================== */

 /* for common
========================================================================== */
body {
	position:relative;
	background:#ffffff;
}
#ffbe_serialcode_wrap{
	width: 100%;
	position: relative;
	/*background-image: url(../images/bg2.jpg);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 100% auto;
	opacity: 0;*/
	font-family: Meiryo, "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ＭＳ Ｐゴシック", "MS PGothic", Osaka, -apple-system, BlinkMacSystemFont, "Helvetica Neue", arial, sans-serif;
}
#ffbe_serialcode_wrap img{
	width: 100%; height: auto;
	vertical-align: bottom;
}
.ffbe_serialcode_bg{
	width: 100%; height: 100%;
	position: absolute; left: 0; top: 0; z-index: -1;
	background-image: url(../images/bg1.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	opacity: 0;
}
.ffbe_serialcode_bg.active{
	-webkit-animation: bg_fadein 1s ease forwards;
	animation: bg_fadein 1s ease forwards;
}
@-webkit-keyframes bg_fadein {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes bg_fadein {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.ffbe_serialcode_container{
	width: 100%;
	position: relative; z-index: 10;
}
.ffbe_serialcode_container h1{
	width: 12.5vw;
	position: absolute; left: 1.875vw; top: 1.25vw;
}
.ffbe_serialcode_container h2{
	width: 44.375%;
	margin: 0 auto;
	padding-top: 5.625vw;
}
.ffbe_serialcode_container h3{
	width: 56.25%;
	margin: 0 auto;
	padding-top: 1.875vw;
}
.ffbe_serialcode_container h4{
	width: 57.5%;
	margin: 0 auto;
	padding-top: 3.75vw;
}
.ffbe_serialcode_container h5{
	width: 100%;
	margin: 0 auto;
	padding-top: 2.5vw;
}
.ffbe_serialcode_container .step_block{
	width: 100%;
	background-image: url(../images/step_bg.png);
	background-position: center center;
	background-size: 100% auto;
}
.ffbe_serialcode_container .step_block ul{
	width: 85%;
	margin: 0 auto;
}
.ffbe_serialcode_container .step_block li{
	margin: 0; padding: 0 0 2.5vw 1em;
	text-indent: -1em;
	font-size: 2.65625vw; line-height: 1.5; color: #283c6e;
}
.ffbe_serialcode_container .step_block li span{
	color: #ff0066;
}
.ffbe_serialcode_container .step_block a:link,
.ffbe_serialcode_container .step_block a:visited{
	color: #0082cc;
}
.ffbe_serialcode_container .step_block a:hover,
.ffbe_serialcode_container .step_block a:active{
	color: #33b4ff;
}
.ffbe_serialcode_container .step_block dl,
.ffbe_serialcode_container .step_block p{
	width: 85%;
	margin: 0 auto; padding: 0;
	position: relative;
	font-size: 2.34375vw; line-height: 1.5; color: #283c6e;
}
.ffbe_serialcode_container .step_block dt{
	margin: 0; padding: 0;
	position: absolute; left: 0; top: 0;
}
.ffbe_serialcode_container .step_block dd{
	margin: 0; padding: 0 0 0 1em;
}
.ffbe_serialcode_container .step_block p span{
	font-size: 2.5vw;
}
.ffbe_serialcode_container .step_end{
	text-align: center;
}

#ffbe_serialcode_wrap #flow{
	width: 100%;
	position: relative;
	background-image: url(../images/bg2.jpg);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
#ffbe_serialcode_wrap #flow_img{
	padding-top: 3.75vw;
	position: relative; z-index: 10;
}

#ffbe_serialcode_wrap #notes{
	text-align: center;
	padding-top: 3.75vw;
	position: relative; z-index: 10;
	font-size: 2.34375vw; line-height: 1.5; color: #283c6e;
	margin: 0 3.75vw;
	text-shadow: 0 0 4px #fff, 0 0 8px #fff,
}

#ffbe_serialcode_wrap .andapp{
	width: 43.75%;
	margin: 0 auto; padding-top: 5.0vw; padding-bottom: 3.15vw;
}
#ffbe_serialcode_wrap .comm_site {
	width: 87.5%;
	margin: 0 auto;
}

#ambassador{
	position: relative; z-index: 10;
}
#ambassador .ambassador_top{
	padding-top: 1.85vw;
	text-align: center;
}
#ambassador .ambassador_block{
	width: 100%;
	margin: 0 auto;
	background-image: url(../images/subflame_bg.png);
	background-position: top center;
	background-size: 100% auto;
}
#ambassador .ambassador_block p{
	width: 85%;
	margin: 0 auto; padding: 0;
	position: relative;
	font-size: 2.5vw; line-height: 1.5; color: #283c6e;
}
#ambassador .ambassador_block p span{
	font-size: 2.1875vw;
	vertical-align: top;
}
#ambassador .ambassador_block p.head{
	font-size: 2.8125vw;
	padding-bottom: 1.875vw;
	color: #285a99;
}
#ambassador .ambassador_block p.notes{
	font-size: 2.34375vw;
	padding-top: 1.875vw;
	/*padding-bottom: 0.625vw;*/
}
#ambassador .ambassador_block dl{
	width: 85%;
	margin: 0 auto; padding: 0;
	position: relative;
	font-size: 2.34375vw; line-height: 1.5; color: #283c6e;
}
#ambassador .ambassador_block dt{
	margin: 0; padding: 0;
	position: absolute; left: 0; top: 0;
}
#ambassador .ambassador_block dd{
	margin: 0; padding: 0 0 0 2em;
}
#ambassador .ambassador_block dd.single{
	margin: 0; padding: 0 0 0 1em;
}
#ambassador hr.line{
	width: 85%;
	height:0;
	margin:4.375vw auto;
	padding:0;
	display: block;
	border:0;
	border-top:#335078 1px dotted;
	opacity: 0.8;
}
#ambassador .ambassador_end{
	text-align: center; padding-bottom: 3.15vw;
}

#ffbe_serialcode_wrap #sns_btn{
	width: 100%;
	text-align: center;
}
#ffbe_serialcode_wrap #sns_btn li{
	width: 31.25%;
	display: inline-block;
}
#ffbe_serialcode_wrap #sns_btn #sns_fb_btn{
	width: 30.0%;
}

#ffbe_serialcode_wrap .jumptop_box {
	width: 100%;
	margin: -5vw auto 0 auto;
}