@charset "UTF-8";

html,body{
    overflow-x:hidden;
}

header.global{
    position:relative;
    height:4.4rem;
    line-height:4.4rem;
    box-sizing:border-box;
    border-bottom:1px solid #ecf0f1;
}

header.global p#logo{
    position:relative;
    vertical-align:bottom;
    display:block;
    margin:0 auto;
    width:24rem;
    height:4rem;
    text-indent:-9999rem;
    background:url('/img/logo-gray.png') no-repeat top center;
    background-size:100% auto;
}

/**
 * 共通
 */
#content{
    background:#bdc3c7;
}

.container{
    margin:0 auto;
    padding:0;
    width:100vw;
    overflow-x:hidden;
    background:#fff;
}

.button-container{
    margin:2rem auto;
    text-align:center;
}

.flash-message{
    border-radius:.4rem;
    margin:.8rem .4rem;
    padding:.8rem;
    background:#ecf0f1;
}

.flash-message.error{
    background:#fee;
    color:#e74c3c;
}

.flash-message.success{
    background:#efe;
    color:#2ecc71;
}

a[href="#"]{
    line-height:3.2rem;
}

.mail-combo > input[type="text"]{
    width:24rem !important;
    border-radius:.4rem 0 0 .4rem;
    border-right:0;
}

.mail-combo > input[type="text"] + button{
    border-radius:0 .4rem .4rem 0 !important;
}


/** モーダルウィンドウ */
.modal-container{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.2);
    padding:.8rem;
    display:none;
}

.modal-container.open{
    display:block;
}

.modal-container--darken.open{
    display:block;
}

.modal-container > .window{
    width:100%;
    height:100%;
    background:#fff;
    border-radius:.4rem;
    padding-bottom:5.2rem;
    overflow:auto;
}

.modal-container > .window > .body{
    padding:.8rem;
    height:100%;
    overflow:auto;
}

.modal-container > .window > .close-button{
    position:absolute;
    bottom:1.2rem;
    left:1.2rem;
    width:calc(100% - 2.4rem);
    background:#34495e;
    color:#fff;
    border-radius:.4rem;
    line-height:4.4rem;
    text-align:center;
    box-sizing:border-box;
}

.modal-container > .window > .close-button:before{
    font-family:'WebHostingHub-Glyphs';
    content:'\f0d2';
    display:inline-block;
    text-decoration:none;
    vertical-align:top;
    margin-right:.4rem;
}

.modal-container > .window > .body > .mail,
.modal-container > .window > .body > .important{
    display:none;
}

.modal-container > .window > .body > .mail.enabled,
.modal-container > .window > .body > .important.enabled{
    display:block;
}

.modal-container > .window > .body h1{
    font-size:2.4rem;
    border-bottom:2px solid #666;
    margin-bottom:.4rem;
}

.modal-container > .window > .body h1 + p{
    padding:.4rem 0;
    margin-bottom:.8rem;
}

.modal-container > .window > .body h2{
    font-size:1.8rem;
    border:1px solid #666;
    border-radius:.4rem;
    line-height:4.4rem;
    padding:0 .8rem;
    margin:.4rem 0;
}

.modal-container > .window > .body h2 + p{
    margin-bottom:.8rem;
}

.modal-container--darken{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
    padding:.8rem;
    display:none;
}

/** 重要事項説明書 */
#important{
    /*padding:.4rem;*/
}

#important > h1{
    font-size:2.4rem;
    border-bottom:2px solid #666;
    margin-bottom:.4rem;
}

#important > h1 + p{
    padding:.4rem 0;
    margin-bottom:.8rem;
}

#important > h2{
    font-size:1.8rem;
    border:1px solid #666;
    border-radius:.4rem;
    line-height:4.4rem;
    padding:0 .8rem;
    margin:.4rem 0;
}

#important > h2 + p{
    margin-bottom:.8rem;
}

#important > article > h3{
    font-size:1.6rem;
    background:#7f8c8d;
    color:#fff;
    padding:.8rem;
    margin:.4rem 0;
    border-radius:.4rem;
}

#important > article > h3 + p,
#important > article > h4 + p{
    padding:.4rem;
}

#important > article > h4{
    font-size:1.5rem;
    background:#ecf0f1;
    padding:.4rem;
    margin:.4rem 0;
    border-radius:.2rem;
}

#important table{
    width:100%;
}

#important table.th-num th{
    width:4rem;
    text-align:center;
}

#important table.th-center th{
    text-align:center;
}

#important table.th-center td{
    text-align:right;
}

#confirmation > article{
    padding:.4rem;
}

#confirmation dl{
    margin-top:.8rem;
    border-radius:.4rem;
}

#confirmation dl > dt{
    font-weight:normal;
    margin:.8rem 0 .4rem;
    background:#efefef;
    padding:.4rem;
    border-radius:.2rem;
}

#confirmation dl > dt:first-of-type{
    margin-top:0;
}

#confirmation dd{
    text-align:center;
    margin:0;
    padding:0 0 .8rem;
}

#confirmation dd:last-of-type{
    border:0;
}

#confirmation dd input[type="radio"] + label{
    border:1px solid #bdc3c7;
    min-width:8.8rem;
    text-align:left;
}

#confirmation dd input[type="radio"]:focus + label,
#confirmation dd input[type="radio"]:checked + label{
    border-color:#3498db;
}

#confirmation table{
    width:100%;
}

#confirmation table td.choice{
    width:11rem;
}

#confirmation table td.choice > label{
    width:8.8rem;
}

#clause > article{
    padding:.4rem;
}

input[type="checkbox"] + label{
    border:1px solid #bdc3c7;
    border-radius:.4rem;
}

input[type="checkbox"]:focus + label,
input[type="checkbox"]:checked + label{
    border-color:#3498db;
}

input[type="checkbox"] + label:before{
    top:0;
    font-size:1.8rem;
    line-height:4.4rem;
    vertical-align:bottom;
    margin-right:.4rem;
}

/**
 * indexページ
 */
h2.caution{
    margin:1rem 0;
    border-bottom:4px solid #f39c12;
    font-weight:normal;
    font-size:2.4rem;
    padding:0 .8rem;
}

h2.caution:before{
    font-family:'WebHostingHub-Glyphs';
    content:'\f316';
    display:inline-block;
    text-decoration:none;
    vertical-align:top;
    font-size:2rem;
    margin-right:.4rem;
    color:#f39c12;
}

h3.check{
    font-size:1.8rem;
    font-weight:normal;
    padding:.4rem;
    border-bottom:2px solid #e67e22;
    margin-bottom:.4rem;
}

h3.check:before{
    font-family:'WebHostingHub-Glyphs';
    content:'\f310';
    display:inline-block;
    text-decoration:none;
    vertical-align:top;
    margin-right:.4rem;
    color:#e67e22;
}

h3.check:not(:first-of-type){
    margin-top:2rem;
}

h3.check + article{
    padding:.8rem;
    background:#ecf0f1;
    border-radius:.2rem;
    margin:.4rem;
}

h3.check + article > p{
    font-size:1.4rem;
    line-height:1.75;
}

h3.check + article > p:not(:first-of-type){
    margin-top:.8rem;
}

h3.check + article > h4{
    font-size:1.6rem;
    font-weight:normal;
    line-height:2.4rem;
    color:#d35400;
    border-radius:.2rem;
    border-bottom:2px solid #d35400;
}

h3.check + article > h4:before{
    font-family:'WebHostingHub-Glyphs';
    content:'\f488';
    display:inline-block;
    text-decoration:none;
    vertical-align:top;
    margin-right:.2rem;
    font-size:1.2rem;
}

h3.check + article > h4:not(:first-of-type){
    margin-top:1.6rem;
}

h3.check + article > h4 + div > p{
    padding:.4rem;
    word-break:break-all;
    line-height:1.75;
}

a.button.confirm.no{
    color:#fff !important;
    background:#95a5a6;
    border-color:#7f8c8d;
}

a.button.confirm.yes{
    color:#fff !important;
    background:#2ecc71;
    border-color:#27ae60;
}

.download-container{
    padding:.8rem 0;
    text-align:center;
}

.download-container > p{
    margin:.8rem 0;
}

a.download-link{
    display:inline-block;
    vertical-align:middle;
    line-height:4.4rem;
    height:4.4rem;
    min-width:4rem;
    padding:0 .8rem 0 3.2rem;
    box-sizing:border-box;
    background:#e67e22;
    border-bottom:2px solid #d35400;
    color:#fff;
    border-radius:.4rem;
    text-align:left;
    text-decoration:none;
    position:relative;
}

a.download-link:before{
    margin-right:.4rem;
    position:absolute;
    top:0;
    left:.8rem;
}

a.tel{
    position:relative;
    display:table;
    margin:2rem auto;
    line-height:4.4rem;
    height:4.4rem;
    box-sizing:border-box;
    padding:0 1.6rem;
    font-size:1.6rem;
    font-weight:bold;
    /*border:1px solid #bdc3c7;*/
    background:#3498db;
    color:#fff;
    border-radius:.4rem;
    text-decoration:none;
}

a.tel:before{
    font-family:'WebHostingHub-Glyphs';
    content:'\f148';
    display:inline-block;
    text-decoration:none;
    margin-right:.4rem;
    font-size:2rem;
    vertical-align:bottom;
    font-weight:normal;
}

/**
 * 入力画面
 */

/** form */
form.subscription{
    /*width:400vw;*/
    /*display:table;*/
    transition-duration:.2s;
}

form.subscription > section{
    /*display:table-cell;*/
    /*width:100vw;*/
    border-bottom:1px solid #ecf0f1;
    margin-bottom:1rem;
}

/** STEP見出し */
h2.step{
    padding:0 .4rem;
    line-height:4.4rem;
    border-bottom:4px solid #3498db;
    font-size:2rem;
}

h2.step > span{
    color:#3498db;
    margin-right:.4rem;
    font-weight:bold;
}

p.annotation{
    display:block;
    padding:.8rem;
    background:#ecf0f1;
    margin:.4rem;
    border-radius:.2rem;
}

/** 入力欄 */
fieldset{
    padding:0;
    border:0;
}

fieldset > dl{
    padding:0 .4rem;
}

fieldset > dl > dt{
    line-height:3.2rem;
    font-weight:normal;
    font-size:1.6rem;
    background:#2980b9;
    color:#fff;
    border-radius:.2rem;
    padding:0 .4rem;
}

fieldset > dl > dd{
    margin:.8rem .4rem .8rem;
}

.inline-vertical{
    display:inline-block;
    position:relative;
}

.inline-vertical > label{
    display:block;
    line-height:2.4rem;
}

.vertical > label{
    display:block;
    line-height:2.4rem;
}

.button-radio{
    display:inline-table;
    table-layout:fixed;
    border-collapse:collapse;
    vertical-align:bottom;
}

.button-radio > .item{
    display:table-cell;
    vertical-align:bottom;
    padding:0 .2rem;
    text-align:center;
}

.button-radio > .item:first-of-type{
    padding:0 .2rem 0 0;
}

.button-radio > .item:last-of-type{
    padding:0 0 0 .2rem;
}

.button-radio > .item > input[type="radio"] + label{
    min-width:8rem;
    margin:0;
    background:#ecf0f1;
    border:1px solid #bdc3c7;
    text-align:center;
}

.button-radio > .item > input[type="radio"] + label:before{
    content:'';
}

.button-radio > .item > input[type="radio"]:focus + label{
    color:#3498db;
    border-color:#3498db;
}

.button-radio > .item > input[type="radio"]:checked + label{
    border-color:#2980b9;
    background:#3498db;
    color:#fff;
}

.input-toggle{
    margin:0 .4rem .8rem;
}

.input-toggle + fieldset,
.other-subscribe + fieldset{
    display:none;
}

.input-toggle + fieldset.enabled,
.other-subscribe + fieldset.enabled{
    display:block;
}

.button.copy{
    margin-bottom:.8rem;
}
.button.copy:before{
    font-family:'WebHostingHub-Glyphs';
    content:'\f0c9';
    display:inline-block;
    text-decoration:none;
    vertical-align:top;
    margin-right:.2rem;
    /*font-size:1.2rem;*/
}

button.confirm{
    display:inline-block !important;
    border-radius:.4rem !important;
    line-height:4.4rem !important;
    height:4.4rem !important;
    padding:0 2rem !important;
    box-sizing:border-box !important;
    border:0 !important;
    border-bottom:2px solid #2980b9 !important;
    background:#3498db !important;
    color:#fff !important;
    text-align:center !important;
}

button.confirm.disabled{
    background:#ecf0f1 !important;
    border-color:#bdc3c7 !important;
    color:#bdc3c7 !important;
}

.select-box > select{
    background:transparent;
}

input.short,
label.short{
    width:10rem !important;
}

input.middle,
label.middle{
    width:14rem !important;
}

input.long{
    width:20rem !important;
}

input.longer{
    width:28.4rem !important;
}

input.longest{
    width:30rem !important;
}

input.full{
    width:100% !important;
}

input.ng,
.select-box.ng,
select.ng,
input[type="radio"] + label.ng{
    background:#fee !important;
}

input.ok,
.select-box.ok,
select.ok{
    background:#efe !important;
}

.panel.error{
    background:#e74c3c;
    border:1px solid #c0392b;
    color:#fff;
    padding:.8rem;
    border-radius:.4rem;
    margin:2rem .4rem;
}

.valid-message{
    display:none;
    vertical-align:top;
    line-height:2.4rem;
}

.valid-message:before{
    font-family:'WebHostingHub-Glyphs';
    display:inline-block;
    text-decoration:none;
    vertical-align:top;
    margin-right:.2rem;
}

.valid-message.ng{
    display:block;
    color:#e74c3c;
}

.valid-message.ng:before{
    content:'\f05a';
}

.valid-message.ok{
    display:block;
    color:#2ecc71;
}

.valid-message.ok:before{
    content:'\f310';
}

/* 個別の対応 */
#is_myself + label{
    border:1px solid #bdc3c7;
    border-radius:.4rem;
    margin:0 .4rem .4rem;
    vertical-align:bottom;
    padding:0 1.6rem;
}

#is_myself + label:before{
    margin-right:.4rem;
    vertical-align:bottom;
}

#is_myself:checked + label{
    border-color:#2980b9;
    background:#3498db;
    color:#fff;
}

#is_myself:checked + label:before{
    color:#fff;
}

#is_myself:checked + label + fieldset{
    display:none;
}

#relationship_other{
    display:none;
}

#relationship_other.enabled{
    display:inline-block;
}

.subscribe-radio input[type="radio"] + label{
    border:1px solid #bdc3c7;
    min-width:20rem;
    text-align:left;
    margin-bottom:.4rem;
}

.subscribe-radio input[type="radio"]:focus + label,
.subscribe-radio input[type="radio"]:checked + label{
    border-color:#3498db;
}

.plan-select{
    letter-spacing:-1rem;
}

.plan-select > input[type="radio"] + label{
    letter-spacing:normal;
    display:block;
    position:relative;
    border:1px solid #bdc3c7;
    border-radius:.4rem;
    height:100%;
    line-height:1;
    padding-left:4rem;
    color:#666;
    margin:.2rem auto;
    box-sizing:border-box;
    max-width:32rem;
}

.plan-select > input[type="radio"]:checked + label{
    background:#efefff;
    border-color:#3498db;
}

.plan-select > input[type="radio"]:focus + label{
    border-color:#3498db;
}

.plan-select > input[type="radio"] + label > p.plan-name{
    font-size:1.6rem;
    line-height:4rem;
}

.plan-select > input[type="radio"] + label > p.plan-name > strong{
    color:#f098b1;
    font-size:2.4rem;
    font-weight:normal;
}

.plan-select > input[type="radio"] + label > p.plan-price > strong{
    color:#f098b1;
    font-size:3.2rem;
    font-weight:normal;
}

.plan-select > input[type="radio"] + label:before{
    position:absolute;
    height:4rem;
    line-height:4rem;
    top:0;
    left:.8rem;
}

/* -------------------------------------------------------------------------------- */

/*
 * 確認画面
 */
section.confirm-container{
    border:0;
}

section.confirm-container > h3{
    padding:0 .8rem;
    line-height:3.6rem;
    background:#3498db;
    color:#fff;
    border-radius:.2rem;
    font-size:1.6rem;
    margin:.8rem .4rem;
}

dl.confirm{
    padding:0 .8rem;
}

dl.confirm > dt{
    line-height:2.4rem;
    font-weight:normal;
    font-size:1.6rem;
    border-bottom:2px solid #2980b9;
    /*background:#2980b9;*/
    color:#2980b9;
    border-radius:.2rem;
    padding:0 .4rem;
}

dl.confirm > dt:before{
    font-family:'WebHostingHub-Glyphs';
    content:'\2713';
    display:inline-block;
    text-decoration:none;
    vertical-align:top;
    margin-right:.2rem;
    font-size:1.2rem;
    color:#2980b9;
}

dl.confirm > dd{
    padding:.8rem;
    margin:0 0 .8rem;
}

button.registration,
button.payment{
    display:inline-block !important;
    border-radius:.4rem !important;
    line-height:4.4rem !important;
    height:4.4rem !important;
    padding:0 2rem !important;
    box-sizing:border-box !important;
    border:0 !important;
    border-bottom:2px solid #d35400 !important;
    background:#e67e22 !important;
    color:#fff !important;
    text-align:center !important;
}

button.correct{
    display:inline-block !important;
    border-radius:.4rem !important;
    line-height:4.4rem !important;
    height:4.4rem !important;
    padding:0 2rem !important;
    box-sizing:border-box !important;
    border:0 !important;
    border-bottom:2px solid #2c3e50 !important;
    background:#34495e !important;
    color:#fff !important;
    text-align:center !important;
}

section.complete h3{
    margin-top:1.6rem;
    font-size:2rem;
    border-bottom:2px solid #d35400;
    color:#d35400;
    padding:0 .8rem;
    line-height:3.6rem;
}

section.complete h3:before{
    font-family:'WebHostingHub-Glyphs';
    content:'\f133';
    display:inline-block;
    margin-right:.2rem;
}

.customer-number{
    display:block;
    font-size:1.6rem;
    background:#fff;
    color:#e67e22;
    padding:.8rem;
    text-align:center;
    margin:.4rem;
    border-radius:.2rem;
}

.color-error{
    color:#c0392b;
}

@media screen and (min-width: 375px){

    #content{
        padding:2rem 0;
    }

    .container{
        width:32rem;
        border-radius:.4rem;
        box-shadow:0 1px 2px rgba(0,0,0,0.25);
    }

}

@media screen and (min-width: 768px){
    .container{
        padding:2rem;
        width:64rem;
    }
}

@media screen and (min-width: 960px){

    header.global{
        position:relative;
        height:8.8rem;
        line-height:8rem;
        box-sizing:border-box;
    }

    header.global p#logo{
        position:relative;
        width:48rem;
        height:8rem;
    }

    .container{
        width:96rem;
    }


}