@charset "utf-8";

/*==============================
 *
 * 01.共通設定
 * 01-01.コンテンツ設定
 * 01-02.ヘッダ・フッタ
 * 01-03.テキスト
 * 01-04.ボタン
 *
 * 02.個別設定
 * 02-01.TOP
 * 
 * 03.調整
 *------------------------------*/

/*==============================
 * 01.共通設定
 *==============================*/
.container * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {    
font-family: 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;/*開発用 実装後削除*/
}

.container {
    position: relative;
    width: 948px;
    line-height: 1.7;
    margin: 13px auto 20px;
    border: 1px solid #DBDBDB;
    background-color: #F0F0F0;
}

.container_header {
    background: url(../img/bg_header.jpg) no-repeat left top;
    padding-top: 443px;
}

.container_body {
    padding-bottom: 15px;
    background: url(../img/bg_body.png) no-repeat right bottom;
}

/*レイアウトクリア*/
.layout_clear:before,
.layout_clear:after,
.column:before,
.column:after,
.column_list dl:before,
.column_list dl:after {
    display: table;
    content: "";
}

.layout_clear:after,
.column:after,
.column_list dl:after {
    clear: both;
}

/*カラム*/
.column_box,
.column_list dl > dt,
.column_list dl > dd,
.box_left {
    float: left;
    max-width: 100%;
}

.box_right {
    float: right;
    max-width: 100%;
}

/*カラムリスト*/
.horizontal {
    letter-spacing: -0.4em;
}

.horizontal li {
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal;
}

/*画像置き換え*/
.img,
.img_list > li > a,
.img_list > li > span {
    display: block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    word-wrap: normal;
}

/*------------------------------
 * 01-01.コンテンツ設定
 *------------------------------*/
/*ボックス*/
.box_1 {
    width: 635px;
    margin: 25px auto;
    padding-bottom: 44px;
    background: url(../img/box_1_footer.png) no-repeat left bottom;
}

.box_1 > .box_header {
    padding-top: 44px;
    background: url(../img/box_1_header.png) no-repeat left top;
}

.box_1 .box_body {
    padding: 0 45px;
    background: url(../img/box_1_body.png) repeat-y left top;
}

.box_2 {
    width: 855px;
    margin: 25px auto;
    padding-bottom: 44px;
    background: url(../img/box_2_footer.png) no-repeat left bottom;
}

.box_2 > .box_header {
    padding-top: 44px;
    background: url(../img/box_2_header.png) no-repeat left top;
}

.box_2 .box_body {
    padding: 0 45px;
    background: url(../img/box_2_body.png) repeat-y left top;
}

/*タイトル*/
.title_section {
    display: block;
    width: 725px;
    height: 34px;
    margin: 25px auto 15px;
    overflow: hidden;
    background: url(../img/title_section.png) no-repeat;
    text-align: center;
    text-indent: 100%;
    white-space: nowrap;
    word-wrap: normal;
}

.requirement {
    background-position: 0 0;
}

.participate {
    background-position: 0 -34px;
}

.about {
    background-position: 0 -68px;
}

/*小見出し*/
.icon_listmark {
    padding-left: 20px;
    background: url(../img/icon_listmark.png) no-repeat left center;
}

/*------------------------------
 * 01-02.ヘッダ・フッタ
 *------------------------------*/
/*ヘッダ*/
.header {
    position: relative;
    height: 273px;
}

.header h2 a {
    position: absolute;
    top: 9px;
    left: 287px;
    display: block;
    width: 374px;
    height: 254px;
}

#header_social ul {
    position: absolute;
    top: 8px;
    right: 5px;
    z-index: 20;
    width: 56px;
}

#header_social li {
    float: left;
}

#header_social a {
    width: 26px;
    height: 26px;
    margin-right: 2px;
    background: url(../img/icon_sns.png) no-repeat;
}

#header_social .sns_facebook a {
    background-position: 0 0;
}

#header_social .sns_twitter a {
    background-position: 0 -26px;
}

#header_social .sns_facebook a:hover {
    background-position: -26px 0;
}

#header_social .sns_twitter a:hover  {
    background-position: -26px -26px;
}

/*フッタ*/
.footer {
    position: absolute;
    bottom: 15px;
    left: 315px;
    z-index: 10;
}

/*------------------------------
 * 01-03.テキスト
 *------------------------------*/
em {
    color: #9761B3;
    font-weight: bold;
    font-size: 14px;
}

/*リンク*/
a:focus,
a:active,
a:hover {
    outline: 0;
}

.container a {
    color: #1f97e5;
}

/*------------------------------
 * 01-04.ボタン
 *------------------------------*/
.btn_img a {
    display: block;
    width: 278px;
    height: 42px;
    margin: 15px auto;
    overflow: hidden;
    background: url(../img/btn_login.png) no-repeat;
    text-indent: 100%;
    white-space: nowrap;
    word-wrap: normal;
}

.btn_img a {
    padding-top: 16px;
}

.btn_login a {
    background-position: 0 0;
}

.btn_login a:hover {
    background-position: 0 -42px;
}

.btn_btn_update a {
    position: absolute;
    top: 285px;
    left: 48px;
    display: block;
    width: 289px;
    height: 59px;
    margin: 15px auto;
    overflow: hidden;
    background: url(../img/btn_update.png) no-repeat;
    text-indent: 100%;
    white-space: nowrap;
    word-wrap: normal;
}

.btn_btn_update a:hover {
    background-position: 0 -59px;
}

/*==============================
 * 02.個別設定
 *==============================*/
/*------------------------------
 * 02-01.TOP
 *------------------------------*/
.section {
    margin-right: 12px;
    margin-left: 12px;
}

.title_header p {
    margin: 0 auto 20px;
}

.title_header01 {
    width: 532px;
    height: 47px;
    background: url(../img/title_header01.png) no-repeat center top;
}

.title_header02 {
    width: 789px;
    height: 45px;
    background: url(../img/title_header02.png) no-repeat center top;
}

.term {
    width: 680px;
    height: 21px;
    margin: 15px auto 25px;
    background: url(../img/title_term.png) no-repeat left center;
}

/*クローズドβテスト募集要項*/
.requirement + p {
    padding-left: 70px;
    text-align: left;
}

.box_requirement {
    width: 618px;
    margin: 20px auto;
    padding: 15px 20px;
    background-color: #FFF;
}

.box_requirement ul {
    padding-bottom: 5px;
    text-align: left;
}

.box_requirement ul:last-child {
    padding-bottom: 0;
}

.box_requirement li {
    color: #9761B3;
    font-size: 14px;
}

.box_requirement .icon_listmark span {
    display: block;
    width: 220px;
    margin-right: 10px;
    background: url(../img/dot.png) repeat-x left center;
}

.box_requirement .icon_listmark em {
    padding-right: 5px;
    background-color: #FFF;
    font-weight: bold;
}

/*クローズドβテスト参加方法*/
.test_code {
    text-align: center;
}

.qrcode {
    width: 500px;
    margin: 0 50px;
    padding: 0 10px 10px 120px;
    background: url(../img/img_qrcode.png) no-repeat left top;
    text-align: left;
}

.qrcode > p {
    text-align: center;
}

.code_number {
    margin-bottom: 15px;
    color: #9761B3;
    font-size: 20px;
    font-weight: bold;
}

.code_number span {
    font-size: 32px;
}

/*募集終了*/
.recruitment_complete {
    margin-bottom: 20px;
    font-size: 22px;
}

/*FFブレイブエクスヴィアスとは？*/
.product {
    position: relative;
}

.about_ffbe {
    width: 855px;
    min-height: 257px;
    margin: 0 auto;
    padding: 10px 20px 40px;
    background: url(../img/title_story.png) no-repeat 465px 15px;
}

.about_ffbe .box_left {
    position: relative;
    width: 545px;
}

.about_ffbe .box_left .img_ss01 {
    position: absolute;
    top: 0;
    left: 0;
}

.about_ffbe .box_left .img_ss02 {
    position: absolute;
    top: 38px;
    left: 182px;
}

.about_ffbe .box_left .img_ss03 {
    position: absolute;
    top: 76px;
    left: 364px;
}

.about_ffbe .box_right {
    padding-top: 20px;
}

.about_ffbe .box_right > p {
    margin-bottom: 23px;
}

.about_ffbe .box_right > p:last-child {
    margin-bottom: 0;
}

/*商品紹介*/
.product .box_left {
    position: absolute;
    top: 25px;
    left: 35px;
    margin-left: 70px;
}

.product .box_right {
    margin: 20px 35px 0 0;
}

.product_title {
    width: 345px;
    height: 56px;
    padding-bottom: 80px;
    background: url(../img/title_product.png) no-repeat center top;
    border-bottom: 1px solid #BD9BCE;
}

.product_body {
    padding: 20px 30px;
    border-bottom: 1px solid #BD9BCE;
}

.product dt, .product dd {
    display: table-cell;
}

.product dt {
    width: 90px;
    text-align: left;
}

.product dd span {
    padding:0 10px 0 5px;
}

.copy {
    padding: 25px 10px 10px;
    color: #813ea4;
    font-family: Arial;
    font-weight: bold;
    font-size: 11px;
}

/*==============================
 * 03.調整
 *==============================*/
.container .padding_no {
    padding: 0;
}

.container .padding_tp_no {
    padding-top: 0;
}

.container .padding_bt_no {
    padding-bottom: 0;
}

.container .margin_no {
    margin: 0;
}

.container .margin_bt_no {
    margin-bottom: 0;
}

.container .margin_bt_1 {
    margin-bottom: 5px;
}

.container .margin_bt_2 {
    margin-bottom: 10px;
}

.container .margin_bt_3 {
    margin-bottom: 15px;
}

.container .margin_bt_4 {
    margin-bottom: 20px;
}

.container .margin_bt_5 {
    margin-bottom: 25px;
}

.container .margin_bt_6 {
    margin-bottom: 30px;
}

.container .margin_bt_7 {
    margin-bottom: 35px;
}

.container .margin_bt_8 {
    margin-bottom: 40px;
}

.container .margin_bt_9 {
    margin-bottom: 45px;
}

.container .margin_bt_10 {
    margin-bottom: 50px;
}

.container .margin_bt_11 {
    margin-bottom: 55px;
}

.container .margin_bt_12 {
    margin-bottom: 60px;
}