@charset "UTF-8";

/* ===============================================
CONTENTS
=============================================== */
#messageContainer .infoMessage{color:#3b9da6;}
#messageContainer .errorMessage{color:#e40007;}
/* ===============================================
/*  LAYOUT
------------------------------------------------*/
.p-login .l-main__left,
.p-login .l-main__right {
    margin: 8px auto;
    padding: 8px 24px;
}
@media (max-width:768px) {
    .p-login .l-main__left,
    .p-login .l-main__right {
        margin: 0 auto;
        padding: 0;
    }
}
@media (max-width:400px) {
    .p-deliver-box {
        margin-top: 30px;
    }
}
@media (max-width:350px) {
    .p-sns-h1 {
        font-size: 130%;
    }
}
.p-snsDispmessageArea {
    max-width: 400px;
    margin: 10px auto;
    text-align: center;
    font-size: 110%;
}
.p-newEntry,
.p-newEntryForm,
.p-mailLogin,
.p-outsideLogin,
.p-dispmessageArea,
.p-entryForm {
    max-width: 400px;
    margin: 10px auto;
}
.p-newEntry,
.p-mailLogin,
.p-outsideLogin,
.p-entryForm {
    padding: 20px;
}
.p-newEntryForm {
    padding: 0 12px 0;
}
.p-entryForm {
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
}
.p-entryConfirm .p-entryForm {
    border-bottom: none;
}
.p-entryNav {
  margin: 0 auto 20px;
    text-align: center;
}
.p-entryNav li {
    display: inline;
    padding: 5px;
    font-size: 14px;
}
.p-entry .c-btn--back,
.p-entry .c-btn--forward,
.p-entry .c-btn--conversion {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}
.p-entry .c-link {
    display: block;
    text-align: center;
}
.p-outsideLogin__list li {
    max-width: 296px;
    margin: 16px auto;
}
.p-outsideLogin__list li:last-child {
    margin-bottom: 0;
}
.p-newEntry .c-hdl--simple {
    margin-bottom: 12px;
}
.p-entryForm .c-caption {
    margin-top: 8px;
}

@media (max-width: 768px) {
    .p-newEntryForm,
    .p-entryForm {
        padding: 16px 8px;
    }
    .p-newEntry,
    .p-newEntryForm,
    .p-entryForm {
        margin-top: 0;
    }
    .p-entry .p-newEntryForm {
        padding: 8px 8px 0;
    }
    .p-entryForm {
        margin: 0 auto;
    }
    .p-outsideLogin__list li {
        width: 100%;
    }
    .p-entryNav li {
        display: block;
        font-size: 12px;
    }
}
@media (max-width: 320px) {
    .p-entry .p-newEntryForm {
        padding: 0;
    }
    .p-newEntry,
    .p-outsideLogin,
    .p-entryForm {
        padding: 16px 8px;
    }
    .p-mailLogin {
        padding: 20px 8px;
    }
}

/* ===============================================
/*  ログイン
------------------------------------------------*/
/* メール */
.p-mailLogin {
    margin: 16px auto 24px;
    background-color: #eef0f2;
}
.p-mailLogin .c-btn--forward {
    height: 48px;
    margin: 12px auto;
}

/* 外部ID */
.p-outsideLogin {
    margin: 0 auto 24px;
}
.p-outsideLogin .c-link {
    margin: -10px auto -5px;
}

/* 前回ログイン */
.p-mailLogin.on {
    padding-bottom: 8px;
}
.p-outsideLogin__list li.on {
    padding: 10px;
}
.p-mailLogin.on,
.p-outsideLogin__list li.on {
    position: relative;
    margin-top: 28px;
    border: 2px solid #e40007;
}
.p-mailLogin.on:before,
.p-outsideLogin__list li.on:before {
    content: '前回ログイン';
    position: absolute;
    right: -2px;
    top: -18px;
    display: block;
    padding: 2px 4px 0;
    background: #e40007;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #fff;
    font-size: 11px;
}

/* ===============================================
/*  外部ID　BUTTON
------------------------------------------------*/
/* BASE */
.c-btn_sns {
  display: block;
  height: 42px;
  border-radius: 4px;
  line-height: 42px;
  text-align: center;
  font-size: 14px;
  box-sizing: border-box;
}
.c-btn_sns__label {
  display: block;
  margin: 0 0 0 42px;
  font-weight: bold;
  color: #fff;
}
.c-btn_sns:hover {
  opacity: 0.7;
}

/* LINE */
.c-btn_line {
  background: url("https://c.bookwalker.jp/ex/scc/common/img/btn_icon_line.png") no-repeat #00C300;
  background-size: 42px 42px;
}
.c-btn_line span {
  border-left: 1px solid #00b300;
}
.c-btn_line:hover {
  background-color: #00e000;
  opacity: 1;
}
.c-btn_line:hover span {
  border-left: 1px solid #00c900;
}

/* LINE new */
.c-btn_line2 {
  background: url("https://c.bookwalker.jp/ex/scc/common/img/btn_icon_line.png") no-repeat #06C755;
  background-size: 42px 42px;
}
.c-btn_line2 span {
  border-left: 1px solid #000000;
}
.c-btn_line2:hover {
  background-color: #06C755E6;
  opacity: 1;
}
.c-btn_line2:hover span {
  border-left: 1px solid #000000E6;
}

/* Twitter */
.c-btn_twitter {
  background: url("https://c.bookwalker.jp/ex/scc/common/img/btn_icon_x.png") no-repeat #313131;
  background-size: 42px 42px;
}

/* Facebook */
.c-btn_facebook {
  background: url("https://c.bookwalker.jp/ex/scc/common/img/btn_icon_facebook.png") no-repeat #1877f2;
  background-size: 26px 26px;
  background-position: 9px 50%;
}

/* ニコニコ */
.c-btn_nico {
  background: url("https://c.bookwalker.jp/ex/scc/common/img/btn_icon_nico.png") no-repeat #252525;
  background-size: 42px 42px;
  border: 1px solid #252525;
}

/* Google */
.c-btn_google {
  background: url("https://c.bookwalker.jp/ex/scc/common/img/btn_icon_google.png") no-repeat #ea4234;
  background-size: 42px 42px;
  color: #fff;
  border: 1px solid #ea4234;
}

/* yahoo */
.c-btn_yahoo {
  background: url("https://c.bookwalker.jp/ex/scc/common/img/btn_icon_yj.png") no-repeat #aaaaaa;
  background-size: 42px 42px;
  color: #fff;
  border: 1px solid #aaaaaa;
}

/* dアカウント */
.c-btn_daccount {
  background: url("https://c.bookwalker.jp/ex/scc/common/img/btn_icon_daccount.png") no-repeat #cc0033;
  background-size: 42px 42px;
  color: #fff;
  border: 1px solid #cc0033;
}

/* ===============================================
/*  ENTRY FORM
------------------------------------------------*/
.p-flex {
    display: -webkit-box;
    display: flex;
}

/* チェックボックス パスワード表示 */
.p-password {
    margin: 10px;
}
.p-password .c-checkbox {
    display: inline-block;
}

/* ラジオボタン 性別 */
.p-entry .c-radioBtn__lavel {
    height: 38px;
    line-height: 38px;
    padding-left: 25px;
    text-align: center;
    font-weight: bold;
}
.p-gender .p-flex .c-radioBtn:not(:last-of-type) {
    margin-right: 8px;
}

@media (max-width:400px) {
    .p-gender .p-flex .c-radioBtn:not(:last-of-type) {
    margin-right: 3px;
    }
}

/* セレクトエリア 生年月 */
.p-yearWrap {
    /* display: inherit; */
    width: 50%;
    padding-right: 15px;
}
.p-monthWrap {
    /* display: inherit; */
    width: 40%;
}
.p-yearWrap-ja {
    display: inherit;
    width: 50%;
    padding-right: 15px;
}
.p-monthWrap-ja {
    display: inherit;
    width: 40%;
}
.p-select__lavel {
    width: 10%;
    padding-left: 10px;
    font-size: 14px;
    line-height: 38px;
}

/* チェックボックス 同意チェック 多言語対応 */
.p-consent {
    margin: 10px;
}
.p-consent .c-checkbox {
    display: inline-block;
}

/* On/Offスイッチ */
.p-entryForm__offer {
    margin-bottom: 20px;
    padding: 16px 8px;
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
}
.p-entryForm__offer .c-switch__wrap + .c-switch__wrap {
    margin-top: 16px;
}

/* フォーム Wrapper */
.p-entryForm__group {
    margin: 0 0 16px;
}
.p-entryForm__group:last-child {
    margin-bottom: 0;
}

/* フォーム 見出し */
.p-entryForm__group__label {
    display: inline-block;
    padding: 0 0 10px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
}
@media (max-width: 768px) {
    .p-entryForm__group__label {
        font-size: 14px;
    }
}
.p-entryConfirm .p-entryForm__group__label {
    color: #666;
    font-size: 14px;
    font-weight: normal;
}
.p-entryConfirm .u-line--dashed {
    margin-bottom: 8px;
}

/* 必須アイコン */
.p-entryForm__group__require {
    margin: 0 0 0 8px;
    padding: 1px 4px;
    border-radius: 2px;
    background: #e40007;
    color: #fff;
    font-size: 12px;
    vertical-align: super;
}

/* 注意文言 */
.p-entryForm__group__attention {
    color: #666;
    font-size: 12px;
}

/* 入力内容 確認項目 */
.p-entryForm__group__confirm {
    display: inline;
    padding: 0 10px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
}

/* ===============================================
/*  認証コード入力画面
------------------------------------------------*/
.p-entryInterim .c-hdl--simple {
  margin-top: 24px;
}
.p-entryInterim .c-step {
  margin: 8px auto;
}
.p-entryInterim .p-newEntryForm {
  padding: 8px 12px 0;
  margin-top: 0;
}
.p-entryInterim .p-entryForm {
  border-bottom: none;
  margin-top: 0;
}
.p-entryInterim .c-caption {
  margin-bottom: 16px;
}
.p-entryInterim .c-description {
  padding: 0;
}
.p-entryInterim .p-entryForm_group__authenticationCode {
  padding-bottom: 24px;
  border-bottom: 1px dashed #ccc;
}
.p-entryInterim .c-box--dotted {
  margin: 24px auto;
}

.p-entryInterim .c-inputField {
  margin: 24px 0 16px;
}
.p-entryInterim .
.p-entryInterim #authenticationCode:disabled {
  background-color: #eee;
}
.p-entryInterim #entryCompleteBtn {
  max-width: none;
  margin: auto 8px;
}
.p-entryInterim #entryCompleteBtn:disabled {
  opacity: 50%;
  pointer-events: none;
}
.p-entryInterim #topPageLinkArea {
  margin-top: 24px;
}
@media (max-width: 320px) {
  .p-entryInterim .p-newEntryForm {
    padding: 8px 0 0;
  }
}
@media (max-width: 768px) {
  .p-entryInterim .p-newEntryForm {
    padding: 8px 16px 0;
  }
  .p-entryInterim #D-messageContainer {
    padding-bottom: 10px;
  }
}

/* ===============================================
/*  外部IDで新規会員登録
------------------------------------------------*/
.p-entryOut .p-entryForm {
    border-top: none;
}
.p-entryOut .p-entryForm__offer {
    padding: 16px;
}
.p-entryOut .p-deliver-box .c-inputField {
    margin: 8px 0;
}
@media (max-width: 320px) {
    .p-entryOut .p-entryForm__offer {
        padding: 16px 4px;
    }
}

/* ===============================================
/*  読み放題会員登録
------------------------------------------------*/
.p-subscr .p-newEntryForm {
  padding-top: 0;
}
.p-subscr .p-action--transition.c-box--emp,
.p-subscr .p-action--transition .c-hdl--thi {
  margin-top: 0;
  border-color: #5a8d48;
}
.p-subscr .c-box--emp .c-hdl--thi {
  margin-top: 0;
 }
.p-subscr .c-caption {
  font-size: 15px;
}

/* 選択 */
.p-subscr .p-settlementMethod .c-radioBtn__lavel,
.p-subscr .p-couseSelect .c-radioBtn__lavel {
  border-color: transparent;
  font-weight: bold;
}
.p-subscr .p-settlementMethod,
.p-subscr .p-couseSelect {
  padding: 8px 0;
}
.p-subscr .p-settlementMethod__txt {
  display: block;
  margin: 8px 0 0 8px;
  font-size: 14px;
  font-weight: bold;
}
.p-subscr .p-settlementMethod__contents > li {
  border-top: 1px dashed #ccc;
  padding-top: 8px;
}
.p-subscr .p-settlementMethod__contents .c-attention__list {
  margin: 12px 8px 8px;
}

/* 支払い選択 */
.p-subscr .p-settlementMethod__wrapper {
  overflow: hidden;
}
.p-subscr .p-settlementMethod__wrapper .p-settlementMethod__txt {
  float: left;
}
.p-subscr .p-settlementMethod__btn-mini {
  float: right;
  width: 90px;
  margin: 4px 0;
}
.p-subscr .p-settlementMethod__img {
  display: block;
  text-align: center;
}
.p-subscr .p-settlementMethod__img img {
  max-width: 100%;
  max-height: 48px;
  margin: 8px 4px 0;
}

/* お申込内容 */
.p-subscr .p-application-contents__body {
  margin: 16px 0;
  padding: 8px;
  border-top: 1px dotted #ccc;
  border-bottom: 1px dotted #ccc;
}
.p-subscr .p-application-contents .c-attention__list__annotation {
  color: #e40007;
  font-size: 11px;
}
.p-subscr .p-application-contents__terms {
  margin: 16px 0;
}
.p-subscr .p-application-contents__terms__link {
  display: block;
  padding: 4px;
  text-align: right;
  font-size: 11px;
}
.p-subscr .c-btn--conversion {
  margin: 8px auto;
}

/* ===============================================
/*  ios
------------------------------------------------*/
.backBtnArea a{background:url(images/arrow.png) no-repeat right 10px #fff;}
.backBtnArea2 a{background:url(images/arrow_back.png) no-repeat left 10px #fff;}
.mt10{margin-top:10px;}

/* 読み放題無料オファー注意文言 */
.p-subscr .subscr_free_offer__list {
  margin: 12px 8px 8px;
}
.p-subscr .subscr_free_offer__list__annotation {
  color: #e40007;
  font-size: 12px;
}
.p-subscr .p-settlementMethod__contents .subscr_free_offer_attention__list {
  margin: 12px 8px 8px;
}
.subscr_free_offer_attention__list__annotation:before {
    content: "※";
    padding-right: 2px;
}
.p-subscr .p-settlementMethod__contents .subscr_free_offer_attention__list__annotation {
  color: #e40007;
  font-size: 11px;
}

/* ===============================================
/*  図書カードNEXT
------------------------------------------------*/
#messageContainerToshoCard .infoMessage{color:#3b9da6;}
#messageContainerToshoCard .warningMessage{color:#e40007;}
#messageContainerToshoCard .errorMessage{color:#e40007;}