@charset "euc-jp";
/*

    申し込みフォーム用スタイル
   
*/


/* ----------------------------------------------------------
    分岐画面
------------------------------------------------------------- */

.branch {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: stretch;
}

.branch__child {
    width:50%;
    padding:30px;
}

.branch__child--register {
    background:#fef2e5;
    width:50%;
    margin:10px;
}

.branch__child--login {
    background:#f3f3f5;
    width:50%;
    margin:10px;
}

.branch__ttl {
    text-align:center;
    font-size:1.8rem;
    line-height:1.4;
    margin-bottom:20px;
    padding-bottom:5px;
}

.branch__ttl--register {
    border-bottom:solid 1px #fdd2a3;
    margin-bottom:70px;
}

.branch__ttl--login {
    border-bottom:solid 1px #d1d1d5;
}

.campaignCopy {
    font-weight:bold;
    text-align: center ;
    color:#f7931e;
}

a.underline{
    text-decoration: underline;
}
a.underline:hover{
    text-decoration: none;
}
.branch__child--xmgame {
    width:50%;
    padding: 0;
    margin:10px;
    display: flex;
    flex-direction: column;
    position: relative;
}
.branch__child--xmgame::before {
    content: "閲覧中のサービス";
    display: block;
    background-color: #f7790b;
    padding: 5px 10px;
    color: #FFF;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
}
.branch__child--xmgame::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 6px 0 6px;
    border-color: #f7790b rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    position: absolute;
    top: 15px;
    left: 50%;
    margin: auto;
    transform: translateX(-50%);
}
.branch__child--xgame {
    width:50%;
    padding: 0;
    margin: 10px;
    display: flex;
    flex-direction: column;
}
.branch__service {
    text-align: center;
    color: #000;
    background-color: #f6f6f6;
    padding: 24px;
    border: #eee 5px solid;
}
.branch__child--xgame .branch__service{
    border-color: #eee;
    border-bottom: #ddd 1px solid;
}
.branch__child--xmgame .branch__service{
    border-color: #f240ba;
    border-bottom: #ddd 1px solid;
}
.branch__subttl sup{
    font-size: 1.4rem;
    vertical-align: top;
}
.branch__ttl {
    font-size: 2.2rem;
    margin-bottom: 0;
    padding-bottom: 0;
    font-feature-settings: "palt";
}
.branch__ttl--xgame {
    color: #9642d6;
}
.branch__ttl--xmgame {
    color: #f240ba;
}
.branch__ttl .small{
    font-size: 1.4rem;
}

.branch__inner{
    padding: 30px 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: #f6f6f6;
}
.branch__child--xgame .branch__inner {
    border: #eee 5px solid;
    border-top: none;
}
.branch__child--xmgame .branch__inner {
    border: #f240ba 5px solid;
    border-top: none;
}
.branch__xgame__logo,
.branch__xmgame__logo{
    display: block;
    margin:0 auto 24px;
    max-height: 29px;
    max-width: 100%;
}
.branch__price{
    display: flex;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1;
    color: #333;
    background-color: #fff;
    width: 100%;
    margin: 0 auto;
    padding: 20px 10px;
    justify-content: center;
    align-items: baseline;
}
.branch__price.cp {
    display: block;
}
.branch__price.cp .branch__price__txt{
    color: #9642d6!important;
}
.branch__price__l{
    font-size: 3.2rem;
}
.branch__child--xgame .branch__price__cp{
    color: #9642d6;
}
.branch__child--xmgame .branch__price__cp{
    color: #f240ba;
}

.branch__price__wrap{
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.branch__price__wrap .normal-price{
    color: #888;
    display: block;
    font-size: initial;
    font-weight: initial;
}
.branch__price__txt{
    color: #333;
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    margin: 5px auto;
}
.branch__child--xgame .branch__price__txt--cp{
    color: #9642d6;
}
.branch__child--xmgame .branch__price__txt--cp{
    color: #f240ba;
}

.branch__point{
    margin: 20px auto;
    font-size: 1.3rem;
}
.branch__point + form{
    margin-top: 12px;
}
.branch__point li{
    margin-top: 0.4em;
    display: flex;
}
.branch__point li a {
    font-size: 1rem;
}
.branch__point li:first-child{
    margin-top: 0;
}
.branch__point li:before{
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 0;
    top: 0.5em;
    position: relative;
    margin-right: 4px;
}
.branch__child--xgame .branch__point li:before{
    border-left: 6px solid #9642d6;
}
.branch__child--xmgame .branch__point li:before{
    border-left: 6px solid #f240ba;
}

.branch__child--xgame .btn--primary {
    background-color: #9642d6;
    color: #fff;
}
.branch__child--xmgame .btn--primary {
    background-color: #f240ba;
    color: #fff;
}
.branch__child--xgame .btn--loading.isLoading.btn--primary  {
    background-color: #9642d6 !important;
}
.branch__child--xmgame .btn--loading.isLoading.btn--primary  {
    background-color: #f240ba !important;
}

.branch__login {
    text-align: center;
    margin-top: 10px;
    text-decoration: underline;
}
.branch__login a {
    color: #333;
}

.branch__login:hover {
    text-decoration: none;
}

.branch__bnr__images{
    max-width: 80%;
    transition: .3s;
}
.branch__bnr__images:hover {
    opacity: .8;
}
.footer_note {
    margin: 40px 10px 0;
    display: block;
}
.footer_note .footer_note_item {
    display: inline-block;
    margin-left: 1.5em;
    color: #888;
    font-size: 11px;
    line-height: 1.4;
    text-indent: -1.5em;
}

/* タブレット + スマホ */
@media only screen and (min-width: 0) and (max-width: 969px) {
    .branch__subttl,
    .branch__point,
    .branch__login {
        font-size: 1.2rem;
    }
    .branch__price__txt,
    .branch__price,
    .btn {
        font-size: 1.4rem;
    }
    .branch__price__l {
        font-size: 2.4rem;
    }
    .branch__child--xmgame::before {
        font-size: 12px;
        top: -5px;
    }
    .branch__child--xmgame::after {
        top: 10px;
    }
}

/* タブレット */
@media only screen and (min-width: 768px) and (max-width: 969px) {

}

/* スマホ */
@media only screen and (min-width: 0) and (max-width: 767px) {
    .orderTtl {
        margin:10px 0;
    }

    .orderTtl img {
        width:105px;
    }

    .branch__child {
        margin: 0;
        padding:0 16px 24px;
    }
    .branch__child--xmgame {
        margin-top: 10px;
    }
    .branch__service {
        padding:16px 12px;
    }
    .branch__child--xgame .branch__service {
        padding-top: 24px;
    }
    .branch__inner {
        padding: 32px 24px 28px;
    }
    .branch__point {
        font-size: 0.9em;
    }

    .campaignCopy {
        margin-top:0px;
    }

    .branch__child--register {
        margin:0px 0px 10px;
    }

    .branch__child--login {
        margin:0px;
    }

    .branch__ttl--register {
        margin-bottom:20px;
    }

    .branch__bnr__images{
        max-width: 100%;
    }
    .branch__price.cp .normal-price{
        font-size: 1.4rem;
    }
    .branch__price.cp .branch__price__l{
        font-size: 3rem;
    }
}

/* ----------------------------------------------------------
    ツールチップ /
------------------------------------------------------------- */
.graph {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    background: 50% 50% no-repeat;
    background-size: contain;
}
.graph--question {
    width: 16px;
    height: 16px;
    background-image: url(../../../images/register/xserver/ico_question.png);
}

.tooltip {
    display: inline-block;
}

.tooltip__target {
    display: inline-block;
    cursor: pointer;
}

.tooltip__content {
    display: none;
}

.tooltip__balloon {
    text-align: left;
    color: #000;
    background: #fff;
    border: 1px solid #333333;
    position: absolute;
    z-index: 100000;
    padding: 10px;
    font-size: 12px;
}

.tooltip__balloon:before {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #333;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -11px;
    margin-left: -10px;
}

.tooltip__balloon:after {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
}

.tooltip__balloon.top:before {
    border-top-color: transparent;
    border-bottom: 10px solid #333;
    top: -21px;
    bottom: auto;
}
.tooltip__balloon.top:after {
    border-top-color: transparent;
    border-bottom: 10px solid #fff;
    top: -20px;
    bottom: auto;
}

.tooltip__balloon.left:before,
.tooltip__balloon.left:after {
    left: 10px;
    margin: 0;
}

.tooltip__balloon.right:before,
.tooltip__balloon.right:after {
    right: 10px;
    left: auto;
    margin: 0;
}

.tooltip__balloon__bottom {
    position: absolute;
    width: 60px;
    height: 30px;
    left: 50%;
    bottom: -30px;
    background: #fff;
    opacity: 0;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.tooltip__balloon__btn {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 50%;
    bottom: -30px;
    background: #fff;
    opacity: 0;
    cursor: pointer;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.tooltip__balloon.left .tooltip__balloon__bottom{ left: 20px; }
.tooltip__balloon.left .tooltip__balloon__btn{ left: 20px; }

.tooltip__balloon.right .tooltip__balloon__bottom{ right: 20px; }
.tooltip__balloon.right .tooltip__balloon__btn{ right: 20px; }

.left,
.right {
    display: block;
    width: 50%;
    float: left;
    box-sizing: border-box;
}
.left {
    padding-right: 20px;
}

/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {
    .tooltip__balloon {
        width: 150px;
    }
    .left,
    .right {
        display: block;
        width: 100%;
        float: none;
        box-sizing: border-box;
    }
    .left {
        padding-right: 0;
    }

    .ico-question {
        position: relative;
        top: 5px;
    }
}

/* ----------------------------------------------------------
    入力画面
------------------------------------------------------------- */

/* ページタイトル */
.pageheader {
    background:#1b63a7;
    width:100%;
    padding:.8rem 0;
    margin-bottom:20px;
}

.pageTtl {
    font-size:1.6rem;
    font-weight:bold;
    color:#fff;
    padding:.8rem 0;

}

.pageTtl:first-letter {
    display:inline-block;
    border-radius: 50%;
    padding:.2rem .6rem;
    background-color:#fff;
    color:#1b63a7;
}

.serverIdInfo {
    width: 100%;
    color: #1b63a7;
    font-weight: bold;
}
.serverIdInfo li:nth-child(1) {
    background: url(../../../images/register/xserver/server_id_info_img01.png) 0 0 no-repeat;
}
.serverIdInfo li:nth-child(2) {
    background: url(../../../images/register/xserver/server_id_info_img02.png) 0 0 no-repeat;
}
.serverIdInfo li:nth-child(3) {
    background: url(../../../images/register/xserver/server_id_info_img03.png) 0 0 no-repeat;
}
.serverIdInfo li:nth-child(3) > span {
    color: #222222;
    font-size: 10px;
}

.inputTxt {
    font-weight: bold;
    font-size: 12px;
}

.inputSecureCord {
    width: 100px;
}

.serverPriceBox {
    display: flex;
    flex-wrap: wrap;
}

.serverIdBox {
    display: flex;
    flex-wrap: wrap;
}
.serverIdBox__idName {
    width: 95px;
    font-size: 15px;
}
.serverIdBox__cangeId {
    display: flex;
    padding: 0 0 0 16px;
    background: url(../../../images/register/xserver/server_id_ico.png) 0 50% no-repeat;
    font-size: 12px;
    align-items: center;
    text-decoration: underline!important;
    color: #222222;
}

.serverLimit {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.afterInfo , .formPartsInfo {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 8px;
    margin: 0 0 5px;
    border: 1px solid #ece3a6;
    background: #fffdef;
    position: relative;
    font-size: 12px;
}

.afterInfo__ttl , .formPartsInfo__ttl {
    color: #d89e03;
    font-weight: bold;
}
.afterInfo__ttl::before , .formPartsInfo__ttl::before {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 2px 0 0;
    background: url(../../../images/register/xserver/after_info_ico.png) 0 0 no-repeat;
    content: '';
    position: relative;
    top: 3px;
}

.cpInfo {
    word-break: break-all;
}

.serverLimit , .domainList , #cash_limit_month , #cash_limit_year {
    height: 100% !important;
}

.quickStartPrTxtBox {
    margin: 0 0 10px;
}
.quickStartPrTxtBox__ttl {
    color: #3873bc;
    font-weight: bold;
}
.quickStartPrTxtBox__list {
    display: flex;
    flex-wrap: wrap;
}
.quickStartPrTxtBox__list li {
    margin: 0 5px 0 0;
    padding: 0 0 0 15px;
    background: url(../../../images/register/xserver/branch_quick_start_full_list_ico.png) 0 50% no-repeat;
}
.quickStartPrTxtBox__list li:last-child {
    margin: 0;
}

/* PC */
@media only screen and (min-width: 970px) {


    .pc--visible{ display:block;}
    .pc--invisible{ display:none; }


    .pageheader--inner {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -ms-flex-pack: distribute;
        justify-content: space-around;

    }

    .pageheader__item {
        padding:.8rem 1.2rem;
        border-radius:2px;
        width:100%;
        text-align: center;
    }

    /* 現在値表示 */
    .nextnav,
    .paging {
        display:none;
    }

    .pageTtl.isCurrent {
        background:#fff;
        color:#1b63a7;
    }

    .pageTtl.isCurrent:first-letter {
        background-color:#1b63a7;
        color:#fff;

    }

    .serverIdInfo {
        padding-top: 15px;
        font-size: 12px;
    }
    .serverIdInfo li {
        padding-left: 30px;
        margin-bottom: 10px;
    }
    .serverIdBox__cangeId:hover {
        text-decoration: none!important;
    }

    .inputCardNumber {
        width: 480px;
        background: url(../../../images/register/xserver/card_ico.png) 333px 50% no-repeat;
    }
    .cardLimt {
        width: 100px;
    }

    .serverLimit {
        width: 100px;
        border: 1px solid #999;
        border-right: none;
    }
    .serverPrice {
        width: 125px;
        border: 1px solid #999;
        text-align: center;
        line-height: 1.3;
    }
    .serverPrice__ttl {
        padding-top: 3px;
        margin: 0;
        font-size: 10px;
    }
    .serverPrice__txt {
        margin: 0;
        font-size: 16px;
    }
    .PricePr {
        display: flex;
        width: 246px;
        margin-left: 8px;
        border: 1px solid #ece3a6;
        background: #fffdef;
        position: relative;
        font-size: 12px;
        text-align: center;
        align-items: center;
        justify-content: center;

    }
    .PricePr > b {
        color: #e10000;
    }
    .PricePr::after {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 6px 7px 6px 0;
        border-color: transparent #fffdef transparent transparent;
        content: '';
        position: absolute;
        top: 37%;
        left: -7px;
    }
    .PricePr::before {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 6px 7px 6px 0;
        border-color: transparent #ece3a6 transparent transparent;
        content: '';
        position: absolute;
        top: 37%;
        left: -8px;
    }

    .domainInputTxt {
        width: 360px;
        border-right: none!important;
        border-top-right-radius: 0!important;
        border-bottom-right-radius: 0!important;
    }
    .domainList {
        width: 120px;
        border-top-left-radius: 0!important;
        border-bottom-left-radius: 0!important;
    }
    .cpInfo {
        width: 440px;
        padding: 10px;
        margin: 0 0 15px;
        border: 1px solid #e84f12;
    }
    .cpInfo__ttl {
        color: #e84f12;
        font-weight: bold;
        line-height: 1.2;
        margin-bottom: 5px;
    }
    .cpInfo > p {
        font-size: 12px;
    }

}

/* タブレット */
@media only screen and (min-width: 768px) and (max-width: 969px) {


    .pc--visible{ display:none;}
    .pc--invisible{ display:block; }
    
    
    .pageheader {
        padding:0;
    }

    .pageheader--inner {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -ms-flex-pack: distribute;
        justify-content: space-around;

    }

    .pageheader__item {
        margin:.8rem;
        border-radius:2px;
        width:100%;
        text-align: center;
    }

    /* 現在値表示 */
    .nextnav,
    .paging {
        display:none;
    }

    .pageTtl.isCurrent {
        background:#fff;
        color:#1b63a7;
    }

    .pageTtl.isCurrent:first-letter {
        background-color:#1b63a7;
        color:#fff;

    }

    .serverIdInfo {
        padding-top: 10px;
        font-size: 12px;
    }
    .serverIdInfo li {
        padding-left: 23px;
        margin-bottom: 5px;
    }
    .serverIdInfo li:nth-child(1) {
        background: url(../../../images/register/xserver/server_id_info_s_img01.png) 0 0 no-repeat;
    }
    .serverIdInfo li:nth-child(2) {
        background: url(../../../images/register/xserver/server_id_info_s_img02.png) 0 0 no-repeat;
    }
    .serverIdInfo li:nth-child(3) {
        background: url(../../../images/register/xserver/server_id_info_s_img03.png) 0 0 no-repeat;
    }
    .serverIdInfo li:nth-child(3) > span {
        color: #222222;
        font-size: 10px;
    }

    .inputCardNumber {
        width: 100%;
        background: url(../../../images/register/xserver/card_ico.png) 98% 50% no-repeat;
    }
    .cardLimt {
        width: 100px;
    }

    .serverLimit {
        width: 100px;
        border: 1px solid #999;
        border-right: none;
    }
    .serverPrice {
        width: 125px;
        border: 1px solid #999;
        text-align: center;
        line-height: 1.3;
    }
    .serverPrice__ttl {
        padding-top: 3px;
        margin: 0;
        font-size: 10px;
    }
    .serverPrice__txt {
        margin: 0;
        font-size: 16px;
    }
    .PricePr {
        display: flex;
        width: 300px;
        height: 40px;
        margin: 8px 0 0 0;
        border: 1px solid #ece3a6;
        background: #fffdef;
        position: relative;
        font-size: 12px;
        text-align: center;
        align-items: center;
        justify-content: center;

    }
    .PricePr > b {
        color: #e10000;
    }
    .PricePr::after {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 6px 7px 6px;
        border-color: transparent transparent #fffdef transparent;
        content: '';
        position: absolute;
        top: -7px;
        left: 50%;
    }
    .PricePr::before {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 6px 7px 6px;
        border-color: transparent transparent #ece3a6 transparent;
        content: '';
        position: absolute;
        top: -8px;
        left: 50%;
    }
    .domainInputTxt {
        width: 270px;
        border-right: none!important;
        border-top-right-radius: 0!important;
        border-bottom-right-radius: 0!important;
    }
    .domainList {
        width: 120px;
        border-top-left-radius: 0!important;
        border-bottom-left-radius: 0!important;
    }
    .cpInfo {
        width: 80%;
        padding: 2%;
        margin: 0 0 15px;
        border: 1px solid #e84f12;
    }
    .cpInfo__ttl {
        color: #e84f12;
        font-weight: bold;
        line-height: 1.2;
        margin-bottom: 5px;
    }
    .cpInfo > p {
        font-size: 12px;
    }

}


/* スマホ */
@media only screen and (min-width: 0) and (max-width: 767px) {
    
    .pc--visible{ display:none;}
    .pc--invisible{ display:block; }
    
    .pageheader {
        padding:0;
    }
    .pageheader--inner {
        position:relative;
        padding:10px 0;
    }

    p.pageTtl {
        display:none;
    }

    .pageheader__item {
        color:#fff;
    }

    .paging {
        font-size:1rem;
    }

    .nextnav {
        position: absolute;
        right:0;
        top:1.8rem;
        font-size:1.2rem;
    }

    .serverIdInfo {
        padding-top: 10px;
        font-size: 12px;
    }
    .serverIdInfo li {
        padding-left: 23px;
        margin-bottom: 5px;
    }
    .serverIdInfo li:nth-child(1) {
        background: url(../../../images/register/xserver/server_id_info_s_img01.png) 0 0 no-repeat;
    }
    .serverIdInfo li:nth-child(2) {
        background: url(../../../images/register/xserver/server_id_info_s_img02.png) 0 0 no-repeat;
    }
    .serverIdInfo li:nth-child(3) {
        background: url(../../../images/register/xserver/server_id_info_s_img03.png) 0 0 no-repeat;
    }
    .serverIdInfo li:nth-child(3) > span {
        color: #222222;
        font-size: 10px;
    }

    .inputCardNumber {
        width: 100%;
        background: url(../../../images/register/xserver/card_ico.png) 98% 50% no-repeat;
    }
    .cardLimt {
        width: 100%;
    }

    .serverLimit {
        width: 100px;
        border: 1px solid #999;
        border-right: none;
    }
    .serverPrice {
        width: 125px;
        border: 1px solid #999;
        text-align: center;
        line-height: 1.3;
    }
    .serverPrice__ttl {
        padding-top: 3px;
        margin: 0;
        font-size: 10px;
    }
    .serverPrice__txt {
        margin: 0;
        font-size: 16px;
    }
    .PricePr {
        display: flex;
        padding: 0 0 0 10px;
        width: 90%;
        height: 40px;
        margin: 8px 0 0 0;
        border: 1px solid #ece3a6;
        background: #fffdef;
        position: relative;
        font-size: 12px;
        align-items: center;

    }
    .PricePr > b {
        color: #e10000;
    }
    .PricePr::after {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 6px 7px 6px;
        border-color: transparent transparent #fffdef transparent;
        content: '';
        position: absolute;
        top: -7px;
        left: 15%;
    }
    .PricePr::before {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 6px 7px 6px;
        border-color: transparent transparent #ece3a6 transparent;
        content: '';
        position: absolute;
        top: -8px;
        left: 15%;
    }

    .domainInputTxt {
        width: 100%;
        margin: 0 0 10px;
    }
    .domainList {
        width: 140px;
    }
    .cpInfo {
        width: 100%;
        padding: 2%;
        margin: 0 0 15px;
        border: 1px solid #e84f12;
    }
    .cpInfo__ttl {
        color: #e84f12;
        font-weight: bold;
        line-height: 1.2;
        margin-bottom: 5px;
    }
    .cpInfo > p {
        font-size: 12px;
    }

}

.form__box {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align: center;
    align-items: center;
    border-bottom:1px solid #d0d0d0;
}

h2 + .form__box {
    border-top:1px solid #d0d0d0;
}

.form__box--sms {
    border-top:0 !important;
    border-bottom:0 !important;
    text-align: center;
}

.form__box--head {
    padding:1.6rem;
    width:40%;
    font-weight:bold;
}

.form__box--body {
    padding:1.6rem;
    width:60%;
}

.attention {
    background:#FFF1B8;
    padding:1.6rem;
    border-radius: 2px;
}

.success {
    background:#D8ECFF;
    margin-bottom:20px;
    padding:.8rem 1.6rem;
    color:#1B63A7;
    font-weight:bold;
    text-align: center;

}

/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {

    .branch {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .branch__child {
        width:100%;
    }

    .form__box {
        -ms-flex-wrap:wrap;
        flex-wrap:wrap;
        -ms-flex-direction: column;
        flex-direction: column;
        border-bottom:0;
        -ms-flex-line-pack: start;
        align-content: flex-start;
    }

    h2 + .form__box {
        border-top:0;
    }

    .form__box--head {
        width:100%;
        padding: 1rem 0 0
    }

    .form__box--body {
        width:100%;
        padding:.8rem 0 1.6rem;
    }

    .formparts__order--dev3 li {
        width: calc(100%/3);
    }

    /* IE11 */
    *::-ms-backdrop, .formparts__order--dev3 li {
        width: 33.33%;
    }

    .confirm .form__box--head {
        background:#D8ECFF;
        padding:.4rem;
    }
}

/* ----------------------------------------------------------
    SMS認証関連
------------------------------------------------------------- */
.smsTtl {
    font-weight:bold;
    font-size:1.8rem;
    text-align: center;
    margin-bottom:10px;
}

.smsTtl--secondary {
    font-weight:bold;
    color:#333;
    background-color: #D8ECFF;
    margin-bottom:10px;
}

.smsTtl--secondary .num {
    display:inline-block;
    padding:.8rem 1.4rem;
    margin-right:.8rem;
    background-color: #1b63a7;
    color:#fff;
}

/* ----------------------------------------------------------
    確認画面
------------------------------------------------------------- */

.autoUpdate--ico {
    display: inline-block;
    padding: 2px 7px;
    margin: 0 0 0 5px;
    font-size: 12px;
    background: #1cc650;
    color: #fff;
    border-radius: 15px;
}

.cpDomain--ico {
    display: inline-block;
    padding: 2px 7px;
    margin: 0 0 0 5px;
    font-size: 12px;
    background: #ffcd34;
    color: #222;
    border-radius: 15px;
}

.planDomain--ico {
    display: inline-block;
    padding: 2px 7px;
    margin: 0 0 0 5px;
    font-size: 12px;
    background: #ff3447;
    color: #fff;
    border-radius: 15px;
}

.subForm__box--ttl {
    font-size: 10px;
    font-weight: bold;
}

.subForm__box--txt {
    margin: 0 0 15px;
}
.subForm__box--txt:last-child {
    margin: 0;
}

.priceTxt {
    text-align: right;
}

.priceSumTxt {
    width: 100%;
    text-align: right;
    font-weight: bold;
    font-size: 15px;
}
.cardTypeTxt img {
    height: 18px;
    margin: 0 2px 0 0;
}

/* ----------------------------------------------------------
    完了画面
------------------------------------------------------------- */
.doBox {
    margin-bottom:40px;
    position:relative;
}

.doBox__first {
    background-color: #D8ECFF;
}

.doBox__second {
    border:2px solid #D8ECFF;
}

.doBox__second .doBox__child--body {
    border-left:2px solid #D8ECFF;
    margin-left:285px;
}

.doBox__third {
    border:2px solid #fee9ca;
}

.thirdTextColor {
    color: #fa7c00;
}

.doBox__third .doBox__child--body {
    border-left:2px solid #fee9ca;
    margin-left:285px;
}

.doBox__child--head {
    float:left;
    margin: 45px 0px;
    width: 285px;
    text-align:center;
}

.doBox__child--head span {
    font-size:12px;
}

.doBox__child--body {
    padding:30px 30px 34px 30px;
}


.arrow:after {
    content: "";
    display: block;
    position: absolute;
    border-top:40px solid #1b63a7;
    border-left:60px solid transparent;
    border-right:60px solid transparent;
    left: calc((100% - 90px) / 2);
    top: 100%;
}


.expBox {
    border-left:4px solid #1b63a7;
    padding-left:2rem;
    margin-top:20px;
    margin-left:257px;
}

.checkList {
    background-color: #D8ECFF;
    margin-top:10px;
}

.checkList li {
    display:inline-block;
    font-size:12px;
    font-weight:bold;
    padding:10px 35px 20px;
    text-align: center;
}


.checkList li img {
    display:block;
    margin-bottom:10px;
    margin-left:auto;
    margin-right:auto;
}

/* IE11 */
*::-ms-backdrop, .checkList li {
    padding:10px 20px 20px;
    width: 32%;
}

.btn--white {
    display:inline-block;
    padding:8px 12px 8px 16px;
    border:1px solid #ddd;
    position:relative;
    padding-left:1em;
    background:linear-gradient(to bottom, #fff, #ddd);
    border-radius: 2px;
}

.ico--arrow {
    padding-left:1em;
    display:block;
}

.ico--arrow:before {
    margin-left:1em;
    content: "";
    display: block;
    position: absolute;
    border-top:5px solid transparent;
    border-left:10px solid #1b63a7;
    border-bottom:5px solid transparent;
    border-bottom:5px solid transparent;
    top:12px;
    left:0;
}

/* スマホ */
@media only screen and (min-width: 0) and (max-width: 767px) {


    .doBox__second .doBox__child--body {
        border-left:0;
        margin-left:0px;
    }
    .doBox__child--head {
        float: none;
        text-align:center;
        width:100%;
        padding:30px 0 0;
        margin: 0px;
    }

    .expBox {
        border-left:0;
        padding-left:0rem;
        margin-top:20px;
        margin-left:0px;
    }

    .doBox__third .doBox__child--body {
        margin-left: 0px;
        border-left: 0px;
    }

    .doBox__child--body {
        padding:30px 20px 24px 20px;
    }

    .checkList li {
        display:block;
        width:100%;
    }
}




/* ----------------------------------------------------------
    ポリシー
------------------------------------------------------------- */

#policy {
    padding-right:20px;
    width:100%;
    /*height:80vh;*/
    height: 100%;
    overflow-y: scroll;
    font-size:1.2rem;
}

#policy p {
    margin-bottom:1em;
}

#policy .policy__ttl {
    font-weight:bold;
    font-size:1.6em;
}

#policy .policy__ttl--secondary {
    font-weight:bold;
    font-size:1.4em;
}

#policy .policy__ttl--third {
    font-weight:bold;
}

#policy .policy__section {
    margin-bottom:2em;
}

#policy .list {
    margin-left:1em;
}

#policy .list li {
    margin-left:1em;
    list-style-type: disc;
}

#policy .definition {
    margin-left:.5em;
}

#policy .definition dt {
    font-weight:bold;
}

#policy .definition dd {
    margin-bottom:10px;
}

#policy .inquiry {
    background:#eee;
    padding:1.2em;
}

#policy .sectionWrap {
    margin-bottom:50px;
}

#policy .numList {
    margin-left:1em;
    margin-bottom:20px;
    list-style-type: decimal;
}

#policy .numList li {
    margin-left:1em;
}

#policy .numList--none li {
    margin-left:.5em;
    list-style-type: none;
}


/* スマホ */
@media only screen and (min-width: 0) and (max-width: 767px) {
    
    #policy {
        overflow-y: scroll;
        padding-right: 10px;
    }

    #policy .policy__ttl {
        font-size:1.2em;
    }

    #policy .policy__ttl--secondary {
        font-size:1.2em;
    }

}

/*-------------------------------------------------------------
  クイックスタートモーダル
-------------------------------------------------------------*/
#light1 {
    display: none;
}
.quickStart {
    width: 800px;
}
.quickStart_wrapper {
     display: flex;
     width: 100%;
     height: 100%;
     z-index: 100;
     position: fixed;
     background: url(../../../images/register/xserver/branch_quick_start_bg.png) 0 0 repeat;
     align-items: center;
     justify-content: center;
    margin: -40px 0 0;
}
.quickStart__ttl {
     padding: 30px 20px;
     line-height: 1.2;
     font-size: 24px;
     background: #e8e8e8;
     text-align: center;
     position: relative;
}
.quickStart__body {
     display: flex;
     padding: 30px;
     flex-wrap: wrap;
     background: #ffffff;
     text-align: center;
}
.quickStart__attention {
    border: 2px solid #e6e39c;
    padding: 20px;
    margin: 20px 0;
    width: 100%;
}
.quickStart__attention li {
    margin: 0 0 10px;
    color: #d89e02;
    font-size: 20px;
    font-weight: bold;
}
.quickStart__attention li:last-child {
    margin: 0;
}
.quickStart__attention li::before {
     display: inline-block;
     width: 5px;
     height: 22px;
     background: url(../../../images/register/xserver/branch_quick_start_attent.png) 0 50% no-repeat;
     margin: 0 5px 0 0;
     content: '';
}
.modalCloseButton__box {
    width: 100%;
    text-align: center;
}
#modalCloseButton {
    display: inline-block;
    width: 225px;
    padding: 15px 0;
    text-align: center;
    background: #1b63a7;
    color: #ffffff;
}

/* スマホ */
@media only screen and (min-width: 0) and (max-width: 767px) {
    .quickStart_wrapper {
        margin: -20px 0 0;
    }
}

/* タブレット */
@media only screen and (min-width: 768px) and (max-width: 969px) {
    .quickStart_wrapper {
        margin: -40px 0 0;
    }
}

/* SP + Tab */
@media only screen and (min-width: 0) and (max-width: 999px) {
    .quickStart {
        width: 90%;
    }
    .quickStart__attention li {
        font-size: 16px;
    }
    .quickStart__ttl {
        padding: 20px;
        font-size: 16px;
    }
    .quickStart__body {
        padding: 15px;
    }
}

.order_msg {
    margin: 0 80px 40px 80px;
    padding: 15px;
    font-size: 14px;
    background: #fff url(../../../img/common/bg_grid_small.png);
    border: none;
}
.order_msg .msg_ttl {
    margin: 0 0 10px;
    color: #32699c;
    font-size: 16px;
    font-weight: bold;
}
@media only screen and (max-width: 849px) and (min-width: 0) {
    .order_msg {
        margin: 0 10px 20px 10px;
        padding: 15px;
    }

}

.noteBox {
    padding: 2.2rem 2.4rem 1.6rem;
    margin-bottom: 4rem;
    border-radius: 2px;
    border-width: 1px;
    border-style: solid;
}
.noteBox section + section {
    margin-top: 2.4rem;
}
.noteBox p.end {
    margin-bottom: 1rem;
}
.noteBox--info {
    background-color: #f1f8ff;
    border-color: #dbe6f1;
}
.noteBox__mainTtl {
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
}
.noteBox--info .noteBox__mainTtl::before {
    display: inline-block;
    font-size: 2.4rem;
    padding-right: 0.8rem;
    content: '\e923';
}


/*-------------------------------------------------------------
  新規お申し込み一時停止
-------------------------------------------------------------*/

.newApp__suspended {
    box-sizing: border-box;
    width: 800px;
    max-width: 95%;
    border: 1px solid #cd0a0d;
    background-color: #fadbd5;
    color: #cd0a0d;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 2.4rem;
    padding: 3rem;
    text-align: center;
}
.newApp__suspended a {
    color: #cd0a0d;
}
.newApp__suspended p:last-child {
    margin: 0;
}