@charset "euc-jp";

/*

    再利用可能なコンポーネント
   
*/
/* ----------------------------------------------------------
    幅、余白確保ボックス / .holder-*
------------------------------------------------------------- */
/* スマホ */
@media only screen and (min-width: 0) and (max-width: 767px) {
     .holder--l {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .holder--m,
    .holder--s {
        width: 93.75%;
        margin-left: auto;
        margin-right: auto;
    }
}
/* タブレット */
@media only screen and (min-width: 768px) and (max-width: 969px) {
    .holder--l {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .holder--m {
        width: 94.79%;
        margin-left: auto;
        margin-right: auto;
    }

    .holder--s {
        width: 508px;
        margin-left: auto;
        margin-right: auto;
    }

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

    .holder--l {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .holder--m {
        width: 860px;
        margin-left: auto;
        margin-right: auto;
    }

    .holder--m02 {
        width: 950px;
        margin-left: auto;
        margin-right: auto;
    }

    .holder--s {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

}

/* ----------------------------------------------------------
    インプット　/ input
------------------------------------------------------------- */

.formparts--l  {width:100%;}
.formparts--m  {width:75%;}
.formparts--sm {width:50%;}
.formparts--s  {width:50%;}



input[type="button"].formparts--l {
    padding:2rem;
}


input[type="tel"],
input[type="password"],
input[type="text"],
input[type="email"],
input[type="number"]{
    border: solid 1px #999;
    border-radius:2px;
    padding:1.2rem;
    font-size:1.6rem;
    line-height:1;
}

textarea {
    border-radius:2px;
    padding: 1.2rem;
    height: 160px;
    font-size:1.6rem;
}

/* focus */
select:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus{
    outline:1px;
    border-color:#333;
    background-color:#eee;
}

/* submit　textlink */

.textlink {
    font-size:1.4rem;
}


/* placeholder */
:placeholder-shown {
    font-size:1.6rem;
    color: #aaa;
    vertical-align: middle;
}

/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
    font-size:1.6rem;
    color: #aaa; }

/* Firefox 18- */
:-moz-placeholder {
    font-size:1.6rem;
    color: #aaa; opacity: 1; }

/* Firefox 19+ */
::-moz-placeholder {
    color: #aaa; opacity: 1;
    font-size:1.6rem;
}

/* IE 10+ */
:-ms-input-placeholder {
    color: #aaa;
    font-size:1.6rem;
}


input.smsNum {
    width:75%;
    padding:1.4rem 2rem;
    font-size:3rem;
    margin:0 auto;
    text-align: center ;
}


input[type=radio], input[type=checkbox] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    overflow: hidden;
    padding: 0;
    clip: rect(0, 0, 0, 0);
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance:textfield;
}


.radio,
.checkbox {
    width:100%;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    padding: 1.2rem 1.6rem 1.2rem 4rem;
    border-radius: 2px;
    background-color: #fff;
    border:1px solid #999;
    vertical-align: middle;
    cursor: pointer;
}

.radio:after,
.checkbox:after {
    position: absolute;
    top: 50%;
    left: 15px;
    display: block;
    margin-top: -10px;
    width: 18px;
    height: 18px;
    border: 1px solid #666;
    border-radius: 2px;
    content: '';
}

.radio:before {
    position: absolute;
    top: 50%;
    left: 19px;
    display: block;
    margin-top: -6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #1b63a7;
    content: '';
    opacity: 0;
}

.radio:after {
    border-radius: 50%;
}


input[type=checkbox]:focus + .checkbox,
input[type=radio]:focus + .radio,
.radio:hover,
.checkbox:hover {
    border-color: #555;
    background-color:#eee;
}

input[type=radio]:checked + .radio:before {
    opacity: 1;
}

input[type=radio]:checked + .radio {
    border-color:#1B63A7;
    background-color:#D8ECFF;
}


.checkbox:before {
    position: absolute;
    top: 50%;
    left: 21px;
    display: block;
    margin-top: -8px;
    width: 6px;
    height: 12px;
    border-right: 3px solid #1b63a7;
    border-bottom: 3px solid #1b63a7;
    content: '';
    opacity: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


input[type=checkbox]:checked + .checkbox:before {
    opacity: 1;
}


input[type=checkbox]:checked + .checkbox {
    border-color:#1B63A7;
    background-color:#D8ECFF;
}


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


    input[type=radio], input[type=checkbox] {
        display: none;
    }

    .formparts__order--3cols .radio {
        width:100%;
        text-align: center;
        padding: 2.8rem 1rem 1rem;
    }

    .formparts__order--3cols .radio:after {
        top: 20px;
        left: calc((100% - 15px) /2);
        width: 15px;
        height: 15px;
        content: '';
    }

    /* IE11 */
    _:-ms-lang(x), .formparts__order--3cols .radio:after {
        left:48%;
    }

    .formparts__order--3cols .radio:before {
        top: 19px;
        left: calc((100% - 9px) /2);
        width: 9px;
        height: 9px;
    }


    /* for ie11 */
    _:-ms-lang(x), .formparts__order--3cols .radio:before {
        left:48%;
    }

    .formparts__order--2radios li .radio {
        width:100%;
    }

}




/* セレクトボックス */
.selectWrap {
    font-size:1.4rem;
    position: relative;
    display: inline-block;
}

.selectWrap:after {
    content: '';
    width: 6px;
    height: 6px;
    border: 0px;
    border-bottom: solid 1px #999;
    border-right: solid 1px #999;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -4px;
}

.select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: auto;
    background: transparent;
    position: relative;
    z-index: 1;
    padding: 1.2rem 40px 1.2rem 10px;
    border: solid 1px #999;
    border-radius: 2px;
    font-size:1.6rem;
    line-height:1;
}
select::-ms-expand {
    display: none;
}

/* formparts 並び順 */

.formparts__order {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-line-pack: justify;
    align-content: space-between;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}


.formparts__order--2cols li {
    width:calc((100% - 10px) / 2);
}

.formparts__order--3cols li {
    margin-left:10px;
}

.formparts__order--3cols li:first-child {
    margin-left:0px;
}

.formparts__order--2radios li:last-child,
.formparts__order--2cols li:last-child {
    margin-left:10px;
}

.formparts__order--sms li {
    display:inline-block;
    width:49%;
    padding:0 1%;
}

.formparts--button {
    margin-left:10px;
    font-size:1.2rem;
    padding:.8rem 1rem;
    background:#666;
    border:1px solid #666;
    border-radius: 2px;
    color:#fff;
}




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

    .formparts--l {width:100%;}

    .formparts__order--2cols li:last-child {
        margin-left:10px;
    }

    .formparts__order--2cols li,
    .formparts__order--2radios li {
        width:calc((100% - 10px) / 2);
    }

    /* for ie11 */
    _:-ms-lang(x), .formparts__order--2cols li,
    _:-ms-lang(x), .formparts__order--2radios li {
        width:48%;
    }

    .formparts__order--2radios li:last-child {
        margin-left:10px;
    }

    .formparts__order--sms li {
        width:100%;
        padding-bottom:1rem;
    }

}


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

    .formparts--l  {width:100%;}
    .formparts--m  {width:100%;}
    .formparts--sm {width:100%;}
    .formparts--s  {width:50%;}

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


    /* for ie11 */
    _:-ms-lang(x), .formparts__order--3cols li {
        width:30%;
    }



    .formparts__order--2cols li {
        width:100%;
    }

    .formparts__order--2cols li:last-child {
        margin-left:0px;
        margin-top:1rem;
    }

    .formparts__order--2radios li {
        width:calc((100% - 10px) / 2);
    }

    /* for ie11 */
    _:-ms-lang(x), .formparts__order--2radios li {
        width:48%;
    }

    .formparts__order--2radios li:last-child {
        margin-left:10px;
    }

    .formparts__order--sms li {
        width:100%;
        padding-bottom:1rem;
    }

    .formparts--button {
        margin-left:0px;
        margin-top:.5rem;
    }


}


/* バリデーション */
select.isSuccess,
textarea.isSuccess,
input.isSuccess {
    border-color:#1B63A7;
    background-color:#D8ECFF;
}

select.isError,
textarea.isError,
input.isError,
.radio.isError {
    background-color: #ffdfdf;
    border-color: #E10000;
}

.form__msgList {
    font-size:1.2rem;
    margin-top:.8rem;
}

.form__msgList .isError {
    color:#E10000;
    background: url("../../../images/register/xserver/ico_exclam.png") no-repeat 0.5rem 0.3rem;
    padding-left:1.8rem;
}

.form__msgList .isSuccess {
    color:#1B63A7;
    background: url("../../../images/register/xserver/ico_check.png") no-repeat left center;
    padding-left:1.8rem;
}

.form__msgList .isLoading {
    background: url("../../../images/register/xserver/loading.gif") no-repeat left center;
    padding-left:1.8rem;
}

.isError__block {
    color:#E10000;
    background-color: #ffdfdf;
    padding:1.2rem;
    margin-top:20px;
    text-align: center ;
}




/* ----------------------------------------------------------
    ボタン / button
------------------------------------------------------------- */

.btnarea {
    text-align:center;
    margin-top:40px;
}

.btnarea--return {
    text-align:left;
    margin-top:40px;
}


.btn {
    display:block;
    margin:0 auto;
    font-weight:bold;
    font-size:1.6rem;
    padding:1rem 1rem;
    border-radius:4px;
    text-decoration:none;
    text-align: center;
    box-shadow:0px 2px 2px 0 rgba(0,0,0,0.3);
    transition:.3s;
    cursor:pointer;
}

.btn--signup,.btn--login  {
    padding-top:2rem;
    padding-bottom:2rem;
}




/* for ie11 */
_:lang(x)::-ms-backdrop, .btn {
    padding:1.6rem 1rem;
}

/* for edge12- */
@supports (-ms-ime-align: auto) {
    .btn {
        padding:1.6rem 1rem;
    }
}

.btn--primary:hover,
.btn--secondary:hover {
    box-shadow:0px 0 2px 0 rgba(0,0,0,0.2);
    opacity: 0.6;
    transition: .3s;

}

.btn--primary {
    background-color: #ffd307;
    color:#222;
}

.btn--secondary {
    background-color: #ff7933;
    color:#fff;
}

.btn--disabled {
    background-color: #e1e1e1;
    color:#fff;
    box-shadow:none;
    cursor:default;
    transition: none;
}




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

    .btn {
        padding:1.6rem 1rem;
    }

    .btnarea--return {
        margin-bottom:20px;
    }

}


/* ----------------------------------------------------------
    パーツ　/　parts
------------------------------------------------------------- */

.label {
    display:inline-block;
    font-size:1rem;
    color:#fff;
    margin-left:.5rem;
    padding:.2rem .4rem;
}

.label--hissu {
    background-color: #E10000;
}

.label--ninni {
    background-color: #666;
}

.note {
    display:block;
    margin-top:.8rem;
    font-size:1.2rem;
    color:#666;
    line-height:1.4;
}

.document {
    height:240px;
    width:80%;
    background:#ededed;
    color:#333;
    font-size:1.2rem;
    line-height:1.4;
    padding:1rem;
}

/* ----------------------------------------------------------
    メッセージ関連　/　msg
------------------------------------------------------------- */
.msg {
    margin: 0 0 20px;
    padding: 15px;
    background: #f7f7f7;
    border: 1px solid #ddd;
}
.msg > :last-child {
    margin-bottom: 0;
}
.msg .btn {
    margin: 0 5px 5px 0;
}
.msg--notice {
    background: #fbf8ea;
    border-color: #e7e3d3;
}
.msg--notice .msg__ttl {
    color: #eca700;
}
.msg--caution {
    background: #fbeded;
    border-color: #ebd5d5;
}
.msg--caution .msg__ttl {
    color: #bf1517;
}
.msg__ttl {
    margin: 0 0 10px;
    color: #69b000;
    font-size: 16px;
    font-weight: bold;
}
.msg__ttl .ico {
    margin: 0 5px 0 0;
    font-size: 18px;
}
.msg__body > :last-child {
    margin-bottom: 0;
}


/* ----------------------------------------------------------
    アイコン / .ico
------------------------------------------------------------- */
@font-face {
    font-family: 'xserver';
    font-style: normal;
    font-weight: normal;
    src: url(../../fonts/xserver.eot?-yof791);
    src: url(../../fonts/xserver.eot?#iefix-yof791) format('embedded-opentype'),
    url(../../fonts/xserver.ttf?-yof791) format('truetype'),
    url(../../fonts/xserver.woff?-yof791) format('woff'),
    url(../../fonts/xserver.svg?-yof791#xserver) format('svg');
}

.ico {
    font-family: 'xserver';
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    vertical-align: middle;
    text-transform: none;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ico_circle:before { content: "\e800"; }
.ico_circle-double:before { content: "\e814"; }
.ico_circle-fill:before { content: "\e801"; }
.ico_square:before { content: "\e802"; }
.ico_square-fill:before { content: "\e803"; }
.ico_exclamation:before { content: "\e804"; }
.ico_exclamation-fill:before { content: "\e805"; }
.ico_triangle-down:before { content: "\e815"; }
.ico_triangle-left:before { content: "\e816"; }
.ico_triangle-right:before { content: "\e817"; }
.ico_triangle-up:before { content: "\e818"; }
.ico_circle-arrow-down:before { content: "\e806"; }
.ico_circle-arrow-left:before { content: "\e807"; }
.ico_circle-arrow-right:before { content: "\e808"; }
.ico_circle-arrow-up:before { content: "\e809"; }
.ico_arrow-down:before { content: "\e600"; }
.ico_arrow-left:before { content: "\e601"; }
.ico_arrow-right:before { content: "\e602"; }
.ico_arrow-up:before { content: "\e603"; }
.ico_chevron-down:before { content: "\e604"; }
.ico_chevron-left:before { content: "\e605"; }
.ico_chevron-right:before { content: "\e606"; }
.ico_chevron-up:before { content: "\e607"; }
.ico_circle-down:before { content: "\e608"; }
.ico_circle-left:before { content: "\e609"; }
.ico_circle-right:before { content: "\e60a"; }
.ico_circle-up:before { content: "\e60b"; }
.ico_hierarchy:before { content: "\e624"; }
.ico_check:before { content: "\e80f"; }
.ico_cross:before { content: "\e60c"; }
.ico_plus:before { content: "\e60d"; }
.ico_minus:before { content: "\e60e"; }
.ico_menu:before { content: "\e60f"; }
.ico_list:before { content: "\e610"; }
.ico_book:before { content: "\e611"; }
.ico_display:before { content: "\e612"; }
.ico_circle-check:before { content: "\e613"; }
.ico_email:before { content: "\e614"; }
.ico_gear:before { content: "\e615"; }
.ico_globe:before { content: "\e616"; }
.ico_home:before { content: "\e617"; }
.ico_lock:before { content: "\e618"; }
.ico_magnifier:before { content: "\e619"; }
.ico_mouse:before { content: "\e61a"; }
.ico_new-window:before { content: "\e61b"; }
.ico_operator:before { content: "\e61c"; }
.ico_pencil:before { content: "\e61d"; }
.ico_phone:before { content: "\e61e"; }
.ico_refresh:before { content: "\e61f"; }
.ico_safety:before { content: "\e620"; }
.ico_server:before { content: "\e621"; }
.ico_tag:before { content: "\e622"; }
.ico_unlock:before { content: "\e623"; }
.ico_balloon:before { content: "\e80a"; }
.ico_balloon-q:before { content: "\e80b"; }
.ico_balloon-a:before { content: "\e80c"; }
.ico_square-q:before { content: "\e80d"; }
.ico_square-a:before { content: "\e80e"; }
.ico_q:before { content: "\e810"; }
.ico_signature:before { content: "\e811"; }
.ico_window:before { content: "\e812"; }
.ico_wordpress:before { content: "\e813"; }
.ico_square-exclamation:before { content: "\e900"; }
.ico_square-question:before { content: "\e901"; }
.ico_smartphone:before { content: "\e902"; }