@charset "utf-8";


body{
background-color:#fafafa;
font-size:13px;
}
#header{display:none;}
#container{width:98%;max-width:800px;margin:0 auto;padding:20px 0%;box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.2);background-color:#fff;}
#header-logo{width:200px;height:60px;margin:auto;text-indent:-1000em;}
#enqt{width:96%;margin:auto;}
#title{width:100%;margin:0 auto;padding:10px 0;font-size:1.4em; font-weight:normal;background-color:#fff; color:#000; text-align:center;}
#headerimg{display:none;}
/*webCGでは別途指定する*/
/*#err{color: #9E0009;font-size:1.2em;font-weight: bold;margin: 5px 0px;text-align:left;}*/
#container > #err{width:96%;margin:5px auto;}
#msg{clear:both;width:96%;margin:10px auto;font-size:1em;}
table{width:100%; margin:0;}
table.tbl{margin-bottom:10px;}
.q-txt{padding:2px 0px 2px 10px;font-size:1.2em;font-weight:normal;color:#000;background-color:#dcebf7;vertical-align:middle;border-width:1px 1px;border-style:solid;border-color: #dcebf7!important;;}
.q-txt .mark{display:inline-block;float:right;margin:0px 1em 0px 0em;padding:2px 5px;font-size:12px;color:#fff;background-color:#004F91;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
.a-txt{padding:10px 0 5px 0px;font-size:1.0em;}
.a-txt input,.a-txt select,.a-txt textarea{background-color:#fafafa;}
.a-txt input[type="text"],input[type="password"],input[type="email"]{display:block;width:60%;padding:13px;font-size:1.2em;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border-width:1px 1px 1px 1px;border-color:#aaa #aaa #aaa #aaa;border-style:solid;color:#000;background-color:#fafafa;}
.a-txt input[type="text"].short{width:6em;}
.a-txt input[type="radio"]{display:block;float:left;margin-right:10px;width:1.2em;height:1.2em;}
.a-txt input[type="radio"]{border-color:#ccc;}
.a-txt input[type="radio"]:checked{border-color:#666;}
.a-txt input[type="checkbox"]{margin-right:10px;width:1.2em;height:1.2em;}
.a-txt input[type="button"]{margin-left:20px;color:#fff;background-color:#ababab;}
.a-txt label{font-size:1.2em;cursor:pointer;}
.a-txt textarea{display:block;margin:10px auto;width:98%;height:7em;line-height:1.3em;padding:1%;}
.a-txt .ex-txt{margin:5px 0px;font-size:0.9em;}
.a-txt select{margin:0em 0.5em 0em 1em;width:12em;height:2em;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
.a-txt select:nth-of-type(1){margin-left:0em;}
#submit{clear:both;padding-top:10px;text-align:center;}
#submit input{display:block;min-width:38%;margin:10px auto;padding:13px!important;font-size:1.2em; font-weight:bold;background-color:#004F91;;color:#fff;padding:3px;cursor:pointer;}
#submit input:hover{opacity:0.7;}
#submit input[type="reset"]{display:none;}
#submit br{display:none;}
a.link-large{display:block;width:50%;margin:10px auto;text-align:center;font-size:1.2em}
ul.notice-list, ol.notice-list {background: #eee;border-radius :8px;box-shadow :0px 0px 5px silver;padding: 0.5em 0.5em 0.5em 2em;}
ul.notice-list li, ol.notice-list li {line-height: 1.5;padding: 0.5em 0;}
#footerimg{display:none;}
#copyright{clear:both;width:100%;margin:0px auto;padding:10px 0px;color:#888;background-color:#fff;text-align:center;font-size:12px;}
.clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; }
.clearfix {display: inline-block;}

.form-item{margin-bottom:20px;}
#card_expire_date select{width:6em;}
.form-block.hidden-form{display:none;}
.radio2{ width:80%; }
@media screen and (min-width:768px) {
  .radio2{ width:30%; }
}
textarea.note{ height:180px; font-size:0.9em; }
#mode-wrapper{ width:98%; }
#mode { float:none; width:auto; margin:10px auto; margin:10px 0px; color:#fff; font-size:0.8em; }
@media screen and (min-width:768px) { 
  #mode { font-size:1em; }
}
@media screen and (min-width:768px) {
  #mode{ width:50%; min-width:280px; margin:10px auto; color:#fff;font-size:1em; }
  .cc-input #mode { width:80%; }
}
#mode .item { position:relative; display:inline-block; width:32.5%; margin:0% 1% 0% 0%; padding:0%; }
.cc-input #mode .item { width:19%; }
#mode .item span { display:block; float:left; width:calc(98% - 1.8em); font-size:1em; line-height:1em; padding:0.4em; text-indent:0.5em; color:#fff; background-color:#9d9d9d; }
#mode .item:last-child span { width:98%; }
#mode .item.on span { background-color:#584f49; color:#fff; }
#mode .item:not(:last-child)::after { display:block; float:left; content: ""; width: 0; height: 0; border-left: 0.9em solid #9d9d9d; border-top: 0.9em solid transparent; border-bottom: 0.9em solid transparent; }
#mode .item.on:not(:last-child)::after { border-left-color:#584f49; }
#mode .item:last-child { margin-right:0%; }

.m-fop-description { text-align:center; }
.m-fop-description .m-fop-item { font-weight:bold; }
.m-select-fop {border:1px solid #e2eaf5; }
.m-select-fop span.u-line-horizon { text-align: center; position: relative; display: block; width: 96%; margin: 0 auto; }
.m-select-fop span.u-line-horizon::before { content: 'or'; display: inline-block; padding: 1rem 0; font-weight: bold; color: #bfb9b9; background-color: #fff; line-height: 0; position: absolute; left: 50%; right: auto; top: -1rem; width:60px; margin-left:-30px; }
.m-select-fop span.u-line-horizon::after { content: ''; display: block; width: 100%; height: 1px; background-color: #ddd; }
.m-select-fop__item { display:table; width:100%; padding:40px 25px 15px; box-sizing:border-box; }
.m-select-fop__item div.m-fop-text, .m-select-fop__item div.m-fop-button { display:table-cell; vertical-align: top; }
.m-select-fop__item div.m-fop-text { padding:0 1.5em 0 0;}
.m-select-fop__item div.m-fop-text h2 { color:#333; font-size:16px; font-weight:bold; margin:0 0 5px; }
.m-select-fop__item div.m-fop-text h2.u-col-amazon { color:#e0b214; }
.m-select-fop__item div.m-fop-button { width: 300px; text-align:right; }
.m-subsc-remarks { margin-bottom:40px; list-style:none; padding:0 25px; }
.c_btn_cc { border:1px solid #CCC; width: 296px; display: inline-block; background:linear-gradient(to bottom, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #ebeff8, #e2eaf5); color: #fff; line-height: 60px; font-size: 1.2em; cursor: pointer; border-radius: 4px; text-decoration: none; text-align:center; position:relative; box-sizing:border-box; }
.c_btn_cc img.logo { width:auto; height:2.5em; vertical-align:middle; margin:-8px 0 0; }
.c_btn_cc::before { content: ''; width: 8px; height: 8px; border: 0px; border-top: solid 3px #333; border-right: solid 3px #333; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 50%; right: 4%; margin-top: -4px; }
.txt-area p.terms { margin: 20px 20px; text-align: center; }
.m-autopay-price__text { font-size:105%; text-align:center; }

#under_processing { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index:9999; }
#under_processing p { margin: 0; width: 300px; height: 150px; position: fixed; top: 50%; left: 50%; margin-top: -75px; margin-left: -150px; color: #000; text-align: center; box-sizing: border-box; padding: 15px; background: #fafafa url(/common/images/v1/common/loading_gear.gif) no-repeat 50% 75%; border: 1px solid #ccc; border-radius: 8px; }
#error { color:#9E0009; text-align:center; }
#error h2 { font-size:140%; }

.amazonpay .m_select_fop__item {text-align:center; margin-bottom:1em; }
.amazonpay .c_fop_btn__remarks {font-size:12px; line-height:1.5; display:inline-block; text-indent:-1em; padding-left:1em; }
.amazonpay .c_btn_signup, .amazonpay .c-button-item { display: block; min-width: 38%; margin: 10px auto; padding: 13px!important; font-size: 1.2em; font-weight: bold; background-color: #333; color: #fff; padding: 3px; cursor: pointer; }
.amazonpay .c-button-item { display: inline-block; font-size:1.2em; text-decoration:none; min-width:30%; }
.amazonpay .c_btn_signup.disable { background-color: #CCC!important; cursor:default!important; }
.amazonpay .c_btn_signup.disable:hover { opacity:1.0!important; }
#walletWidgetDiv, #consentWidgetDiv, #submit { margin-bottom:2em;}
.amazonpay .m-button-area { clear: both; padding-top: 10px; text-align: center;}

@media screen and (max-width:700px) {
  .m-select-fop__item { display:block; }
  .m-select-fop__item div.m-fop-text, .m-select-fop__item div.m-fop-button { display:block; }
  .m-select-fop__item div.m-fop-text { margin-bottom:0.5rem; }
  .m-select-fop__item div.m-fop-button { width: 100%; text-align: center; }
  .c_btn_cc, .amazonpay-button-inner-image { width:100%!important; max-width:296px; }
}

#container{padding:0px;}
#header-logo{width:100%;height:55px;margin:auto;text-indent:-1000em;background-image:url(https://www.webcg.net/common/webcg/images/v5/common/webcg_logo.svg);background-repeat:no-repeat;background-position:center center;background-size:122px auto;background-color:#004F91;}

/*for auth/update only*/

body{
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  -webkit-appearance: none;
}
button,input[type="submit"],input[type="button"]{
        -webkit-appearance: none;
}
.err-txt {
  color:#ff0000;
  font-size:0.8rem;
  font-weight:normal;
  margin: 5px 0px;
  text-align:left;
}
label a.desc{
  position:relative;
  display:inline-block;
  font-size:14px;
  padding-left:20px;
}
label a.desc:before{
  content:"▶︎";
  position:absolute;
  font-size:10px;
  left: 10px;
  top: 3px;
}
.term-link{
  display:inline-block;
  margin:5px;
}
.agreement-checkbox{
    font-size: 1.2em;
    text-align: center;
    display: block;
    margin-top: 20px;
}
.registration-notice{
  display:none;
  padding:20px;
  border:1px solid #ff0000;
  margin:0 30px 30px 30px;
  text-align:left;
}
.registration-notice .notice-title{
  display:inline-block;
  margin-bottom:5px;
  font-weight:bold;
}
.registration-notice .dplay-only{
  margin-top:10px;
}
.registration-notice ul{
  margin:0;
}
.registration-notice ul li{
  margin-bottom:5px;
}

@media screen and (max-width:768px) {
  .plan-radio-td{
    display:block;
  }
  .registration-notice{
    margin:0 15px 30px 15px;
    padding:10px;
  }
  .registration-notice ul{
    padding-left:20px;
  }
  .a-txt input[type="text"],input[type="password"],input[type="email"]{
    width:90%;
  }
}

body#auth-update{
  margin:8px;
}
body#auth-update.modal-open {
  height: 100vh;
  overflow-y: hidden;
}
body#auth-update pre{
  margin:20px 15px;
  padding:20px;
  border:1px solid #FF0000;
  white-space: break-spaces;
}

body#auth-update .links{
  margin:30px 0;
  border-top: 1px solid #ccc;
  padding: 20px 0;
  text-align:center;
}
body#auth-update .links a.center{
  display:inline-block;
  margin:10px 0;
}

body#auth-update .resign-message{
  margin:30px;
  text-align:center;
}
body#auth-update .resign-message .message-l{
  font-size:20px;
  margin:15px;
}
body#auth-update .resign-message .message-m{
  font-size:16px;
  margin:10px;
}
body#auth-update .resign-message .message-s{
  font-size:14px;
  margin:5px;
}

body#auth-update .cc-input #mode{
  display:block;
  margin:20px auto;
}
body#auth-update .cc-input #mode .item {
    width: 18%;
}

body#auth-update input.parsley-success,
body#auth-update select.parsley-success,
body#auth-update textarea.parsley-success {
  color: #468847;
  background-color: #DFF0D8;
  border: 1px solid #D6E9C6;
}

body#auth-update input.parsley-error,
body#auth-update select.parsley-error,
body#auth-update textarea.parsley-error {
  color: #B94A48;
  background-color: #F2DEDE;
  border: 1px solid #EED3D7;
}

body#auth-update .parsley-errors-list {
  margin: 2px 0 3px;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
  line-height: 0.9em;
  opacity: 0;
  color: #B94A48;
  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
}

body#auth-update .parsley-errors-list.filled {
  opacity: 1;
}

body#auth-update .error-modal{
    position: fixed;
    top: 0;
    left:0;
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    width: 100vw;
    height: 100vh;
    text-align: center;
}
body#auth-update .error-modal .inner{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    width: calc(100vw * 0.9);
}
body#auth-update .error-modal .inner h3{
  font-size:20px;
}
body#auth-update .error-modal .inner p{
  font-size:16px;
}
body#auth-update .error-modal .close-btn{
    position: absolute;
    top: 0;
    right:0;
    width: 60px;
    height:60px;
    background-color: #000;
}
body#auth-update .error-modal .close-btn span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);/*)*/
    width: 60px;
    height: 60px;
    font-size: 60px;
    line-height: 0.8;
    cursor: pointer;
}


/*confirm-modal 20220516*/
body#auth-update .confirm-modal{
    position: fixed;
    top: 0;
    left:0;
    background-color: rgba(0,0,0,0.8);
    /*color: #fff;*/
    width: 100vw;
    height: 100vh;
    /*text-align: center;*/
}
body#auth-update .confirm-modal .inner{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    width: calc(100vw * 0.9);
    max-height: calc(100% * 0.9);
    overflow-y: scroll;
}

/**/
body#auth-update .confirm-modal .inner .confirm-modal-panel{
  max-width:500px;
  /*height:500px;*/
  color: #333;
  background-color: #fff;
  margin: 0 auto;
  padding:15px;
}


body#auth-update .confirm-modal .inner .confirm-modal-panel input[type="button"] {
    display: block;
    min-width: 38%;
    margin: 20px auto 10px auto;
    padding: 13px!important;
    font-size: 1.2em;
    font-weight: bold;
    background-color: #004F91;
    color: #fff;
    padding: 3px;
    cursor: pointer;
}

body#auth-update .confirm-modal .inner .confirm-modal-panel h3{
  font-size:20px;
  font-weight:bold;
}
body#auth-update .confirm-modal .inner .confirm-modal-panel h4{
  font-size:14px;
  margin:10px 0 5px 0;
  padding-left:6px;
  font-weight:bold;
  border-left:4px solid #004F91;
  
}
body#auth-update .confirm-modal .inner .confirm-modal-panel p{
  font-size:14px;
  margin:15px 0;
}
body#auth-update .confirm-modal .inner .confirm-modal-panel span{
  display:inline-block;
  font-size:12px;
  padding-left:10px;
}
body#auth-update .confirm-modal .close-btn{
    position: absolute;
    top: 0;
    right:0;
    width: 60px;
    height:60px;
    background-color: #000;
    text-align: center;
}
body#auth-update .confirm-modal .close-btn span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);/*)*/
    width: 60px;
    height: 60px;
    color:#fff;
    font-size: 60px;
    line-height: 0.8;
    cursor: pointer;
}