@charset "UTF-8";
/* ----------------------------------------------------------------------------
　フォント
---------------------------------------------------------------------------- */
main {
  font-family: "Noto Sans JP", sans-serif;
  color: #000;
}

/* ----------------------------------------------------------------------------
　ページの下マージン
---------------------------------------------------------------------------- */
@media screen and (max-width: 592px) {
  main {
    padding-bottom: 35px;
  }
}

/* ----------------------------------------------------------------------------
　リセット
---------------------------------------------------------------------------- */
main ul {
  list-style: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
main ul li {
  list-style: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

/* ----------------------------------------------------------------------------
　a:hover
---------------------------------------------------------------------------- */
main a {
  text-decoration: underline;
}
main a:hover {
  text-decoration: none;
}

main a:hover {
  opacity: 0.8;
}

/* ----------------------------------------------------------------------------
　new_form_header
---------------------------------------------------------------------------- */
#new_form_header {
  padding: 1rem 0;
  text-align: center;
  background-color: #efefef;
  margin-bottom: 3rem;
}

#new_form_header .icn-wowow {
  font-size: 1.2rem;
  color: #0650a6;
}

/* ----------------------------------------------------------------------------
　new_form_footer
---------------------------------------------------------------------------- */
#new_form_footer {
  padding: 2rem 0;
  text-align: center;
  font-size: 0.8rem;
  margin-top: 3rem;
}

/* ----------------------------------------------------------------------------
　contents
---------------------------------------------------------------------------- */
#contents {
  width: 700px;
  margin: 0 auto;
}
@media screen and (max-width: 770px) {
  #contents {
    width: 90%;
  }
}

/* ----------------------------------------------------------------------------
　keycut
---------------------------------------------------------------------------- */
.keycut:not(:last-child) {
  margin-bottom: 2rem;
}
.keycut img {
  display: block;
  max-width: 100%;
  pointer-events: none;
  margin: 0 auto;
}

/* ----------------------------------------------------------------------------
　ページタイトル
---------------------------------------------------------------------------- */
.page_ttl {
  text-align: center;
  font-size: 1.3rem;
  line-height: 160%;
  position: relative;
  margin-bottom: 2.8rem;
}
@media screen and (max-width: 1024px) {
  .page_ttl {
    font-size: 1.275rem;
  }
}
@media screen and (max-width: 592px) {
  .page_ttl {
    font-size: 1.2rem;
  }
}
.page_ttl .big {
  font-size: 1.875rem;
  line-height: 130%;
}
.page_ttl .medium {
  font-size: 1.25rem;
  line-height: 130%;
}
.page_ttl.border_bottom {
  border-bottom: 1px solid #ccc;
  padding-bottom: 1rem;
}

.page_ttl .small {
  font-size: 0.875rem;
  line-height: 130%;
}

/* ----------------------------------------------------------------------------
　テキストボックス
---------------------------------------------------------------------------- */
input[type=text],
input[type=email],
input[type=password],
input[type=tel] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 13px 10px;
  color: #000;
  border: 2px solid #dfe0e6;
  font-size: 1rem;
  line-height: 100%;
  background-color: #fff;
  border-radius: 3px;
}
@media screen and (max-width: 592px) {
  input[type=text],
  input[type=email],
  input[type=password],
  input[type=tel] {
    font-size: 1.2rem;
    padding: 13px 10px;
  }
}
input[type=text]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder {
  font-size: 1rem;
}
input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=tel]::-moz-placeholder {
  font-size: 1rem;
}
input[type=text]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder {
  font-size: 1rem;
}
input[type=text]::-ms-input-placeholder, input[type=email]::-ms-input-placeholder, input[type=password]::-ms-input-placeholder, input[type=tel]::-ms-input-placeholder {
  font-size: 1rem;
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=password]::placeholder,
input[type=tel]::placeholder {
  font-size: 1rem;
}
input[type=text]:disabled,
input[type=email]:disabled,
input[type=password]:disabled,
input[type=tel]:disabled {
  background-color: #f5f5f5;
}

/* Edge目のアイコン非表示 */
::-ms-reveal {
  display: none;
}

/* ？アイコンが上に乗った場合 */
input[type=text].hatena_spc,
input[type=email].hatena_spc,
input[type=password].hatena_spc,
input[type=tel].hatena_spc {
  padding: 15px 45px 15px 10px;
}
@media screen and (max-width: 592px) {
  input[type=text].hatena_spc,
  input[type=email].hatena_spc,
  input[type=password].hatena_spc,
  input[type=tel].hatena_spc {
    padding: 13px 40px 13px 10px;
  }
}

/* ----------------------------------------------------------------------------
　セレクトボックス
---------------------------------------------------------------------------- */
select {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 13px 25px 13px 13px;
  color: #000;
  border: 2px solid #dfe0e6;
  font-size: 1rem;
  border-radius: 3px;
  background: url("../img/select_arrow.svg") right 0.5rem bottom 50% no-repeat;
  background-color: #fff;
  cursor: pointer;
}
select:disabled {
  background-color: #f5f5f5;
}
@media screen and (max-width: 592px) {
  select {
    font-size: 1rem;
  }
}

/* ----------------------------------------------------------------------------
　テキストボックス
---------------------------------------------------------------------------- */
textarea {
  -webkit-appearance: none;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 15px 10px;
  color: #000;
  border: 2px solid #dfe0e6;
  font-size: 0.75rem !important;
  line-height: 130%;
  background-color: #fff;
  border-radius: 3px;
}
@media screen and (max-width: 592px) {
  textarea {
    font-size: 1rem !important;
    padding: 13px 10px;
  }
}

/* ----------------------------------------------------------------------------
　？アイコン
---------------------------------------------------------------------------- */
.hatena .close {
  display: none;
  width: 24px;
  vertical-align: bottom;
}
@media screen and (max-width: 592px) {
  .hatena .close {
    width: 20px;
  }
}

.hatena .open {
  width: 24px;
  vertical-align: bottom;
}
@media screen and (max-width: 592px) {
  .hatena .open {
    width: 20px;
  }
}

.hatena {
  width: 24px;
  cursor: pointer;
  position: relative;
}

.hatena.active {
  z-index: 1001;
}

.hatena.active .open {
  display: none;
}

.hatena.active .close {
  display: block;
}

.hatena_inner {
  display: none;
  width: 300px;
  position: fixed;
  top: 40px;
  left: 0%;
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 1rem;
  font-size: 0.875rem;
  color: #000 !important;
  z-index: 1000;
}
@media screen and (max-width: 592px) {
  .hatena_inner {
    width: 95%;
    left: 2.5% !important;
  }
}

.hatena_inner.active {
  display: block;
  opacity: 1;
  -webkit-animation: hatenaAnime 0.3s ease-in-out 0s forwards;
          animation: hatenaAnime 0.3s ease-in-out 0s forwards;
}

@-webkit-keyframes hatenaAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@keyframes hatenaAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
.hatena_inner .arrow {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: absolute;
  top: -18px;
  left: 0px;
  width: 28px;
  height: 18px;
  background: url("../img/hatena_arrow.svg") 0 0 no-repeat;
  background-size: 100% auto;
}
@media screen and (max-width: 592px) {
  .hatena_inner .arrow {
    top: -15px;
    width: 25px;
    height: 15px;
  }
}

.hatena_inner .arrow.right img {
  margin-left: calc(100% - 30px);
}

.hatena_inner .hatena_title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #000 !important;
}

.hatena_inner .hatena_text {
  line-height: 160%;
  margin-bottom: 1rem;
  color: #000 !important;
  word-break: break-all;
}
.hatena_inner .hatena_text:last-child {
  margin-bottom: 0rem;
}

.hatena_inner strong {
  font-weight: 600;
}

.hatena_inner a {
  text-decoration: underline;
  color: #000 !important;
}
.hatena_inner a:hover {
  text-decoration: none;
}

.hatena_inner p {
  line-height: 160%;
}

/* ----------------------------------------------------------------------------
　チェックボックス装飾
---------------------------------------------------------------------------- */
label.checkbox {
  background: url("../img/label_checkbox.svg?ver=2") 0 0 no-repeat;
  position: relative;
  padding: 0.1rem 0 0.1rem 28px;
  background-size: 20px auto;
  cursor: pointer;
  min-height: 20px;
  line-height: 120%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
}
@media screen and (max-width: 592px) {
  label.checkbox {
    padding: 0.1rem 0 0.1rem 28px;
  }
}

label.checkbox.active {
  background: url("../img/label_checkbox_active.svg?ver=2") 0 0 no-repeat;
  background-size: 20px auto;
}

label.checkbox input {
  position: absolute;
  left: -9999px;
}

label.checkbox.focus:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: "";
  position: absolute;
  top: 0rem;
  left: 0rem;
  width: 20px;
  height: 20px;
  border: 2px solid #000 !important;
  border-radius: 5px;
}

label.checkbox.checkbox_default {
  background-image: none;
}
label.checkbox.checkbox_default:after {
  display: none;
}
label.checkbox.checkbox_default input {
  cursor: pointer;
  position: relative;
  top: 0rem;
  left: 0rem;
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  margin-right: 0.8rem;
}
label.checkbox.checkbox_default input:checked {
  -webkit-animation: checkboxAnime 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s forwards;
          animation: checkboxAnime 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s forwards;
}

label.checkbox.checkbox_block {
  display: block;
  border: 2px solid #dfe0e6;
  background-color: #fff;
  padding: 1rem 1rem 1rem 45px;
  background-position: 15px center;
}
label.checkbox.checkbox_block:after {
  top: 0.95rem;
  left: 0.95rem;
}

label.checkbox.checkbox_block_default {
  background-image: none;
  display: block;
  border: 2px solid #dfe0e6;
  background-color: #fff;
  padding: 1rem;
}
label.checkbox.checkbox_block_default:after {
  top: 0.95rem;
  left: 0.95rem;
  display: none;
}
label.checkbox.checkbox_block_default:has(input:disabled) {
  background-color: #f5f5f5;
  cursor: default;
  color: #666;
}
label.checkbox.checkbox_block_default input {
  position: relative;
  top: 0rem;
  left: 0rem;
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  margin-right: 0.8rem;
}
label.checkbox.checkbox_block_default input:checked {
  -webkit-animation: checkboxAnime 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s forwards;
          animation: checkboxAnime 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s forwards;
}
@-webkit-keyframes checkboxAnime {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}
@keyframes checkboxAnime {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}

/* ----------------------------------------------------------------------------
　ラジオ装飾
---------------------------------------------------------------------------- */
label.radio.radio_box {
  border: 2px solid #dfe0e6;
  background-color: #fff;
  background: url("../img/label_radio.svg") 15px center no-repeat;
  background-size: 20px auto;
  position: relative;
  cursor: pointer;
  min-height: 24px;
  line-height: 120%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  border-radius: 3px;
  padding: 1rem 1rem 1rem 45px;
}
label.radio.radio_box.line2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
@media screen and (max-width: 592px) {
  label.radio.radio_box {
    padding: 1rem 1rem 1rem 40px;
  }
}
label.radio.radio_box .small {
  font-size: 0.8rem;
}
label.radio.radio_box.active {
  background: url("../img/label_radio_active.svg") 15px center no-repeat;
  background-size: 20px auto;
}
label.radio.radio_box input {
  position: absolute;
  left: -9999px;
}

label.radio:not(.radio_box) {
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
label.radio:not(.radio_box) input {
  -webkit-transform: scale(1.4);
          transform: scale(1.4);
  left: 0rem;
  top: 0.3rem;
  margin-right: 0.5rem;
}

/* ----------------------------------------------------------------------------
　ボックスインデント
---------------------------------------------------------------------------- */
.box_indent {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}

/* ----------------------------------------------------------------------------
　下マージン
---------------------------------------------------------------------------- */
.spc_btm0_5 {
  margin-bottom: 0.5rem !important;
}

.spc_btm1 {
  margin-bottom: 1rem !important;
}

.spc_btm2 {
  margin-bottom: 2rem !important;
}

.spc_btm3 {
  margin-bottom: 3rem !important;
}

.spc_btm4 {
  margin-bottom: 4rem !important;
}

.spc_top0_5 {
  margin-top: 0.5rem !important;
}

.spc_top1 {
  margin-top: 1rem !important;
}

.spc_top2 {
  margin-top: 2rem !important;
}

.spc_top3 {
  margin-top: 3rem !important;
}

.spc_top4 {
  margin-top: 4rem !important;
}

.mt0_5 {
  margin-top: 0.5rem !important;
}

.mt1 {
  margin-top: 1rem !important;
}

.mt2 {
  margin-top: 2rem !important;
}

.mt3 {
  margin-top: 3rem !important;
}

.mt4 {
  margin-top: 4rem !important;
}

.mt5 {
  margin-top: 5rem !important;
}

.mb0 {
  margin-bottom: 0rem !important;
}

.mb0_5 {
  margin-bottom: 0.5rem !important;
}

.mb1 {
  margin-bottom: 1rem !important;
}

.mb1_5 {
  margin-bottom: 1.5rem !important;
}

.mb2 {
  margin-bottom: 2rem !important;
}

.mb2_5 {
  margin-bottom: 2.5rem !important;
}

.mb3 {
  margin-bottom: 3rem !important;
}

.mb3_5 {
  margin-bottom: 3.5rem !important;
}

.mb4 {
  margin-bottom: 4rem !important;
}

.mb4_5 {
  margin-bottom: 4.5rem !important;
}

.mb5 {
  margin-bottom: 5rem !important;
}

/* ----------------------------------------------------------------------------
　電話番号リンク
---------------------------------------------------------------------------- */
.tel_link {
  text-decoration: none !important;
  cursor: default;
}

/* ----------------------------------------------------------------------------
　テキストカラー
---------------------------------------------------------------------------- */
.txt_red {
  color: #cc0000 !important;
}

.txt_black {
  color: #000 !important;
}

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

/* ----------------------------------------------------------------------------
　テキストの太さ
---------------------------------------------------------------------------- */
.txt_bold {
  font-weight: 700;
}

/* ----------------------------------------------------------------------------
　デバッグ用
---------------------------------------------------------------------------- */
#debug {
  background-color: #ccc;
  position: fixed;
  top: 0rem;
  left: 0rem;
  z-index: 100000;
  padding: 0.5rem;
  width: 200px;
  font-size: 0.7rem;
  word-break: break-all;
}

/* ----------------------------------------------------------------------------
　エラー赤枠
---------------------------------------------------------------------------- */
/* サーバエラー */
.server_error {
  border: 2px solid #ff6666 !important;
}

/* デバッグエラー */
.debug_error {
  border: 2px solid #ff6666 !important;
}

/* ----------------------------------------------------------------------------
　エラーメッセージ
---------------------------------------------------------------------------- */
.error_massage {
  color: #cc0000 !important;
  position: relative;
  font-size: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  background: url("../img/icon_error.svg") 0 0.25rem no-repeat;
  background-size: 15px auto;
  padding: 0 0 0 20px;
  display: block;
}
@media screen and (max-width: 592px) {
  .error_massage {
    background-position: 0 0.15rem;
  }
}
.error_massage a {
  color: #cc0000 !important;
}

/* ----------------------------------------------------------------------------
　エラーメッセージパターン02
---------------------------------------------------------------------------- */
.error_massage02 {
  border: 1px solid #cc0000;
  color: #cc0000 !important;
  position: relative;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  background: url("../img/icon_error.svg") 0.7rem 55% no-repeat;
  background-size: 15px auto;
  background-color: #FFF4F4;
  padding: 0.5rem 0.5rem 0.5rem 35px;
}
.error_massage02 a {
  color: #cc0000 !important;
}

/* ----------------------------------------------------------------------------
　注意メッセージ
---------------------------------------------------------------------------- */
.error_massage_yellow {
  position: relative;
  font-size: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  background: url("../img/icon_error_yellow.svg") 0 0.25rem no-repeat;
  background-size: 15px auto;
  padding: 0 0 0 20px;
}
@media screen and (max-width: 592px) {
  .error_massage_yellow {
    background-position: 0 0.15rem;
  }
}

/* ----------------------------------------------------------------------------
　警告メッセージ
---------------------------------------------------------------------------- */
.caution_massage {
  text-align: center;
}

.caution_massage p {
  display: inline-block;
  position: relative;
  font-size: 1rem;
  line-height: 180%;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  background: url("../img/icon_error_yellow.svg") 0 0.55rem no-repeat;
  background-size: 15px auto;
  padding: 0 0 0 25px;
  text-align: left;
  color: #cc0000 !important;
}
@media screen and (max-width: 592px) {
  .caution_massage p {
    background-position: 0 0.4rem;
  }
}

/* ----------------------------------------------------------------------------
　警告メッセージ02
---------------------------------------------------------------------------- */
.caution_massage02 {
  text-align: center;
}

.caution_massage02 p {
  display: inline-block;
  position: relative;
  font-size: 1rem;
  line-height: 180%;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  background: url("../img/icon_error_circle_red.svg") 0 0.45rem no-repeat;
  background-size: 17px auto;
  padding: 0 0 0 25px;
  text-align: left;
  color: #cc0000 !important;
}
.caution_massage02 p a {
  color: #cc0000 !important;
}
@media screen and (max-width: 592px) {
  .caution_massage02 p {
    background-position: 0 0.4rem;
  }
}

.caution_massage02._txt_black p {
  color: #000 !important;
}
.caution_massage02._txt_black p a {
  color: #000 !important;
}

/* ----------------------------------------------------------------------------
　サーバエラーメッセージ
---------------------------------------------------------------------------- */
.server_error_massage_top {
  width: 425px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #cc0000;
  background-color: #ffeded;
  padding: 0.5rem;
  color: #cc0000;
  font-size: 0.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 auto 2rem;
}
@media screen and (max-width: 592px) {
  .server_error_massage_top {
    width: 90%;
    font-size: 0.7rem;
  }
}

.server_error_massage_top img {
  width: 16px;
  margin-right: 0.2rem;
}

.server_error_massage {
  color: #cc0000 !important;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  position: relative;
  padding: 0 0 0 1.3rem;
}
@media screen and (max-width: 592px) {
  .server_error_massage {
    font-size: 0.7rem;
    padding: 0.2rem 0 0.2rem 1.3rem;
  }
}
@media screen and (max-width: 384px) {
  .server_error_massage {
    padding: 0.2rem 0 0.2rem 1.5rem;
  }
}

.server_error_massage img {
  width: 16px;
  position: absolute;
  top: 0rem;
  left: 0rem;
}

/* ----------------------------------------------------------------------------
　別ウインドウアイコン
---------------------------------------------------------------------------- */
.icon_blank {
  width: 15px;
  position: relative;
  top: -1px;
}

/* ----------------------------------------------------------------------------
　B-CASカード番号とは？
---------------------------------------------------------------------------- */
#hatena_bcas {
  width: 680px;
  text-align: left;
}
@media screen and (max-width: 800px) {
  #hatena_bcas {
    width: 90%;
    left: 5% !important;
  }
}

#hatena_bcas .hatena_title {
  text-align: center;
  line-height: 160%;
}

#hatena_bcas .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0 1rem;
  margin-bottom: 1.5rem;
}
@media screen and (max-width: 592px) {
  #hatena_bcas .flex {
    display: block;
  }
}

#hatena_bcas .flex li {
  width: 30%;
}
@media screen and (max-width: 592px) {
  #hatena_bcas .flex li {
    width: 100%;
  }
}

#hatena_bcas .flex .flex_arrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 6%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 7.5% 1.5% 0;
}
@media screen and (max-width: 592px) {
  #hatena_bcas .flex .flex_arrow {
    width: 10%;
    padding: 1rem 0;
    margin: 0 auto;
  }
}
#hatena_bcas .flex .flex_arrow img {
  width: 100%;
  height: auto;
}

#hatena_bcas .flex li .photo {
  margin-bottom: 0.5rem;
}
#hatena_bcas .flex li .photo img {
  width: 100%;
}
@media screen and (max-width: 592px) {
  #hatena_bcas .flex li .photo {
    padding: 0 1rem;
  }
}

#hatena_bcas .flex li .text {
  font-size: 0.875rem;
  line-height: 160%;
  letter-spacing: -1px;
}

#hatena_bcas .scroll {
  height: 350px;
  padding-right: 1rem;
  overflow-y: scroll;
  -webkit-overflow-scrolling: auto;
}
#hatena_bcas .scroll::-webkit-scrollbar {
  width: 5px;
}
#hatena_bcas .scroll::-webkit-scrollbar-thumb {
  background-color: #333;
}

/* ----------------------------------------------------------------------------
　注意文
---------------------------------------------------------------------------- */
.attention_list {
  margin-bottom: 3rem;
}

.attention_list li {
  font-size: 0.8rem;
  line-height: 180%;
  padding-left: 1em;
  text-indent: -1em;
  margin-bottom: 0.2rem;
  color: #666;
}
.attention_list li a {
  color: #666;
  text-decoration: underline;
}
.attention_list li a:hover {
  text-decoration: none;
}
.attention_list li.no_indent {
  padding-left: 0em;
  text-indent: 0em;
}
.attention_list li.txt_center {
  text-align: center;
}

/* ----------------------------------------------------------------------------
　注意エリア
---------------------------------------------------------------------------- */
.attention_area {
  background-color: #ddebf7;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}
.attention_area.anchor_style {
  position: relative;
  width: 85%;
  margin: 0 auto 2.5rem;
}
@media screen and (max-width: 592px) {
  .attention_area.anchor_style {
    width: 100%;
  }
}
.attention_area.anchor_style:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 10px 0 10px;
  border-color: #ddebf7 transparent transparent transparent;
  position: absolute;
  top: 100%;
  left: calc((100% - 20px) / 2);
}
@media screen and (max-width: 592px) {
  .attention_area {
    padding: 1rem;
  }
}

.attention_area .ttl {
  font-size: 1rem;
  line-height: 160%;
  font-weight: 600;
  text-align: center;
  color: #cc0000;
  margin-bottom: 1rem;
}
.attention_area .ttl:last-child {
  margin-bottom: 0rem;
}
.attention_area .ttl._black {
  color: #000;
}

.attention_area ul li {
  padding-left: 1em;
  text-indent: -1em;
  line-height: 160%;
  margin-bottom: 0.5rem;
}
.attention_area ul li.no_indent {
  padding-left: 0em;
  text-indent: 0em;
}
.attention_area ul li.small {
  font-size: 0.875rem;
}

.attention_area .txt {
  line-height: 180%;
}
.attention_area .txt.txt_center {
  text-align: center;
}
.attention_area .txt:not(:last-child) {
  margin-bottom: 1.5rem;
}

/* ----------------------------------------------------------------------------
　お問い合わせエリア
---------------------------------------------------------------------------- */
.contact_area {
  background-color: #eee;
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 2.5rem;
}
@media screen and (max-width: 592px) {
  .contact_area {
    padding: 1rem;
  }
}

.contact_area p {
  margin-bottom: 0.2rem;
  line-height: 160%;
}

.contact_area .tel {
  font-size: 1.275rem;
  font-weight: 600;
}
@media screen and (min-width: 593px) {
  .contact_area .tel .sp_tel_link {
    pointer-events: none;
    text-decoration: none;
  }
}

/* ----------------------------------------------------------------------------
　リードタイトル
---------------------------------------------------------------------------- */
.lead_ttl {
  font-size: 1.125rem;
  line-height: 160%;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid #ccc;
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
}
@media screen and (max-width: 592px) {
  .lead_ttl {
    font-size: 1rem;
  }
}
.lead_ttl.no_border {
  border-bottom: none;
  padding-bottom: 0rem;
}
.lead_ttl .caution {
  background: url("../img/icon_error_circle_red.svg") 0 0.37rem no-repeat;
  background-size: 17px auto;
  padding: 0 0 0 22px;
  color: #cc0000 !important;
}
@media screen and (max-width: 592px) {
  .lead_ttl .caution {
    background-size: 13px auto;
    padding: 0 0 0 18px;
  }
}
.lead_ttl .txt_bold_normal {
  font-weight: 400;
}
.lead_ttl .cap {
  font-size: 0.875rem;
  font-weight: 400;
  display: inline-block;
  margin-top: 0.5rem;
}
.lead_ttl._txt_red {
  color: #cc0000;
}
.lead_ttl a {
  color: #0057a7;
}

/* ----------------------------------------------------------------------------
　ステップタイトル
---------------------------------------------------------------------------- */
.step_ttl {
  font-size: 1.125rem;
  line-height: 150%;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid #ccc;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
}

.step_ttl .step {
  margin-right: 0.8rem;
  color: #0057a7;
}

.step_ttl .number {
  color: #666;
  margin-left: 0.5rem;
  letter-spacing: 2px;
}

.step_ttl .number .now {
  font-size: 1.5rem;
  color: #0057a7;
}

/* ----------------------------------------------------------------------------
　必須アイコン
---------------------------------------------------------------------------- */
.required_icon {
  display: inline-block;
  font-size: 0.7rem;
  line-height: 100%;
  background-color: #0057a7;
  color: #fff;
  padding: 0.3rem 0.5rem;
  margin-left: 0.5rem;
  position: relative;
  top: -0.1rem;
  border-radius: 2px;
}
@media screen and (max-width: 592px) {
  .required_icon {
    top: -0.15rem;
  }
}

/* ----------------------------------------------------------------------------
　変更不可アイコン
---------------------------------------------------------------------------- */
.required_hold {
  display: inline-block;
  font-size: 0.7rem;
  line-height: 100%;
  background-color: #000;
  color: #fff;
  padding: 0.3rem 0.5rem;
  margin-left: 0.5rem;
  position: relative;
  top: -0.1rem;
  border-radius: 2px;
}
@media screen and (max-width: 592px) {
  .required_hold {
    top: -0.15rem;
  }
}

#contents > .txt {
  margin-bottom: 2.5rem;
  line-height: 180%;
}
#contents > .txt.center {
  text-align: center;
}

/* ----------------------------------------------------------------------------
　約款
---------------------------------------------------------------------------- */
.term_lead {
  line-height: 160%;
  margin-bottom: 2rem;
  text-align: center;
}
.term_lead a {
  color: #0057a7;
}

#term {
  margin-bottom: 2rem;
}

#term .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#term ul li {
  margin-bottom: 0.5rem;
}
#term ul li.indent {
  padding-left: 1.9em;
  text-indent: -1.9em;
}
#term ul li.indent .error_massage {
  padding-left: 20px;
  text-indent: 0em;
}
#term ul li.indent .required_icon {
  padding: 0.3rem 0.5rem;
  text-indent: 0rem;
}

#term ul li a {
  color: #0057a7;
  position: relative;
  top: -0.2rem;
}
@media screen and (max-width: 592px) {
  #term ul li a {
    top: -0.4rem;
  }
}
#term ul li a.sp_top0 {
  top: 0rem;
}
#term ul li a:hover {
  text-decoration: underline;
}

#term ul li a img {
  margin-left: 0.5rem;
}

#term ul li .txt {
  position: relative;
  top: -0.2rem;
}
@media screen and (max-width: 592px) {
  #term ul li .txt {
    top: -0.4rem;
  }
}
#term ul li .txt .indent_small {
  font-size: 0.8rem;
  padding-left: 1.5rem;
  display: block;
  margin-top: 0.2rem;
}

#term ul li .cap {
  font-size: 0.8rem;
  line-height: 180%;
  color: #666;
  text-indent: 0rem;
}

/* ----------------------------------------------------------------------------
　右チャットボット固定
---------------------------------------------------------------------------- */
.chat_bnr {
  position: fixed;
  top: 200px;
  right: 0rem;
  z-index: 100;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.chat_bnr.active {
  -webkit-animation: chatBnrAnime 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
          animation: chatBnrAnime 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
}
@media screen and (max-width: 592px) {
  .chat_bnr {
    right: 0px;
    top: initial;
    bottom: 0rem;
    width: 100%;
    height: 50px;
    text-align: center;
    border-top: 1px solid #0057A7;
    background-color: #fff;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
.chat_bnr a:hover {
  opacity: 1;
}
.chat_bnr img {
  display: block;
  width: 35px;
}
@media screen and (max-width: 592px) {
  .chat_bnr img {
    height: 100%;
    width: auto;
    margin: 0 auto;
  }
}

@-webkit-keyframes chatBnrAnime {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@keyframes chatBnrAnime {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@media screen and (max-width: 592px) {
  @-webkit-keyframes chatBnrAnime {
    0% {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
    }
    100% {
      -webkit-transform: translateY(0%);
              transform: translateY(0%);
    }
  }
  @keyframes chatBnrAnime {
    0% {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
    }
    100% {
      -webkit-transform: translateY(0%);
              transform: translateY(0%);
    }
  }
}
/* ----------------------------------------------------------------------------
　送信エリア
---------------------------------------------------------------------------- */
#submit_area {
  width: 80%;
  margin: 2.5rem auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
#submit_area.layout_column {
  display: block;
}
#submit_area.align_items_flex_start {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
#submit_area.align_items_stretch {
  -webkit-box-align: stretch !important;
      -ms-flex-align: stretch !important;
          align-items: stretch !important;
}
@media screen and (max-width: 592px) {
  #submit_area {
    width: 100%;
    display: block;
  }
}

#submit_area .btn_submit {
  width: 48%;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
@media screen and (max-width: 592px) {
  #submit_area .btn_submit {
    width: 100%;
    margin-bottom: 1.5rem;
  }
}
#submit_area .btn_submit:only-child {
  width: 100%;
}
#submit_area .btn_submit.spc_right1 {
  margin-right: 2rem;
}

#submit_area .btn_submit a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #0057a7;
  text-align: center;
  border-radius: 3px;
  color: #fff;
  text-decoration: none;
  padding: 1.2rem 0 1.3rem;
  font-weight: 600;
  font-size: 1.275rem;
  line-height: 160%;
  height: 100%;
}
#submit_area .btn_submit a .small {
  font-size: 0.875rem;
  line-height: 160%;
}
#submit_area .btn_submit a.off {
  background-color: #ccc;
  pointer-events: none;
}
#submit_area .btn_submit a.color_white {
  border: 1px solid #0057a7;
  color: #0057a7;
  background-color: #fff;
}

/* submitボタン用に追加したCSS */
#submit_area .btn_submit input[type=submit] {
  position: relative;
  display: block;
  text-align: center;
  border-radius: 3px;
  color: #fff;
  background-color: #0057a7;
  text-decoration: none;
  padding: 1.2rem 0 1.3rem;
  font-weight: 600;
  font-size: 1.275rem;
  line-height: 160%;
  width: 100%;
  height: 100%;
}
#submit_area .btn_submit input[type=submit]:disabled {
  background-color: #ccc;
  cursor: default !important;
}
#submit_area .btn_submit input[type=submit]:disabled:hover {
  opacity: 1;
}
#submit_area .btn_submit input[type=submit].small {
  width: 80%;
  font-size: 0.875rem;
  line-height: 160%;
  padding: 0.8rem 0 0.8rem;
  margin: 0 auto;
}
#submit_area .btn_submit input[type=submit].color_white {
  border: 1px solid #0057a7;
  color: #0057a7;
  background-color: #fff;
}

#submit_area .btn_submit input[type=submit]:hover {
  opacity: 0.8;
  cursor: pointer;
}

#submit_area .btn_submit a .small {
  font-size: 0.875rem;
  line-height: 160%;
}

#submit_area .btn_submit a.off {
  background-color: #ccc;
  pointer-events: none;
}

/* submitボタン用に追加したCSS */
#submit_area .btn_submit .submit_input_box.off {
  background-color: #ccc;
  pointer-events: none;
}

#submit_area .btn_back,
#submit_area .btn_close {
  width: 48%;
  margin-right: 4%;
}
#submit_area .btn_back:only-child,
#submit_area .btn_close:only-child {
  margin: 0 auto;
}
@media screen and (max-width: 592px) {
  #submit_area .btn_back,
  #submit_area .btn_close {
    width: 80%;
    margin: 0 auto;
  }
}

#submit_area .btn_back a,
#submit_area .btn_close a {
  display: block;
  background-color: #fff;
  border: 1px solid #0057a7;
  text-align: center;
  border-radius: 3px;
  color: #0057a7;
  text-decoration: none;
  padding: 0.7rem 0;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 130%;
}

#submit_area .btn_close a {
  background: url("../img/icon_close.svg") 1rem 50% no-repeat;
  background-size: 15px auto;
}

#submit_area.layout_column .btn_submit,
#submit_area.layout_column .btn_back,
#submit_area.layout_column .btn_close {
  margin: 0 auto 1.5rem;
  width: 100%;
}

#submit_area.layout_column .btn_back,
#submit_area.layout_column .btn_close {
  width: 48%;
}
@media screen and (max-width: 592px) {
  #submit_area.layout_column .btn_back,
  #submit_area.layout_column .btn_close {
    width: 80%;
  }
}

#submit_area.layout_column .btn_password {
  width: 80%;
}
@media screen and (max-width: 592px) {
  #submit_area.layout_column .btn_password {
    width: 80%;
  }
}

#submit_area .cap {
  display: block;
  font-size: 0.7rem;
  line-height: 160%;
  text-align: center;
  margin-top: 0.5rem;
}
@media screen and (max-width: 592px) {
  #submit_area .cap {
    font-size: 0.875rem;
  }
}

/* ----------------------------------------------------------------------------
　入力項目の見出し
---------------------------------------------------------------------------- */
.input_title {
  font-size: 1rem;
  line-height: 150%;
  font-weight: 600;
  margin-bottom: 0.7rem;
}
.input_title.txt_center {
  text-align: center;
}

/* ----------------------------------------------------------------------------
　anchor_ttl
---------------------------------------------------------------------------- */
.anchor_ttl {
  background-color: #ddebf7;
  padding: 1.5rem;
  line-height: 160%;
  font-weight: 600;
  position: relative;
  width: 85%;
  margin: 0 auto 2.5rem;
}
@media screen and (max-width: 592px) {
  .anchor_ttl {
    width: 100%;
  }
}
.anchor_ttl:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 10px 0 10px;
  border-color: #ddebf7 transparent transparent transparent;
  position: absolute;
  top: 100%;
  left: calc((100% - 20px) / 2);
}

.anchor_ttl .ttl {
  font-size: 1rem;
  line-height: 160%;
  font-weight: 600;
  text-align: center;
  color: #cc0000;
  margin-bottom: 1rem;
}

.anchor_ttl ul li {
  padding-left: 1em;
  text-indent: -1em;
  line-height: 160%;
  margin-bottom: 0.5rem;
}
.anchor_ttl ul li.small {
  font-size: 0.875rem;
}

.anchor_ttl .txt {
  line-height: 180%;
}

/* ----------------------------------------------------------------------------
　anchor_link
---------------------------------------------------------------------------- */
.anchor_link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}

.anchor_link li {
  width: 48%;
}

.anchor_link li a {
  border: 2px solid #0057a7;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #0057a7;
  padding: 1rem;
  font-weight: 600;
  text-decoration: none;
}
@media screen and (max-width: 592px) {
  .anchor_link li a {
    font-size: 0.875rem;
  }
}

.anchor_link li a span {
  font-size: 1.275rem;
  margin-left: 0.5rem;
}

/* ----------------------------------------------------------------------------
　入力項目の見出し（？マークあり）
---------------------------------------------------------------------------- */
.input_title_flex {
  margin-bottom: 0.7rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.input_title_flex.space_between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.input_title_flex .ttl {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  margin-right: 0.5rem;
}

.input_title_flex .hatena {
  top: -0.1rem;
}

/* ----------------------------------------------------------------------------
　ご登録のメールアドレス
---------------------------------------------------------------------------- */
.input_email {
  margin-bottom: 2.5rem;
}

/* ----------------------------------------------------------------------------
　ニックネーム
---------------------------------------------------------------------------- */
.input_nickname {
  margin-bottom: 2.5rem;
}

/* ----------------------------------------------------------------------------
　お名前
---------------------------------------------------------------------------- */
.input_name {
  margin-bottom: 2.5rem;
}

.input_name .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.input_name .flex input {
  width: 48.5%;
}

/* ----------------------------------------------------------------------------
　お名前（全角カタカナ）
---------------------------------------------------------------------------- */
.input_kana {
  margin-bottom: 2.5rem;
}

.input_kana .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.input_kana .flex input {
  width: 48.5%;
}

/* ----------------------------------------------------------------------------
　パスワード入力欄
---------------------------------------------------------------------------- */
.input_password {
  margin-bottom: 2rem;
}

.input_password .input_area {
  position: relative;
  margin-bottom: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.input_password .input_area input {
  padding-right: 55px;
}

.input_password .input_area .btn_visualization {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 45px;
  height: calc(100% - 8px);
  display: block;
  font-size: 0rem;
  aspect-ratio: 1/0.8;
  -webkit-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.input_password .input_area .btn_visualization:hover {
  opacity: 1;
}

.input_password .input_area .btn_visualization::before {
  content: "";
  position: absolute;
  top: 0rem;
  left: 0rem;
  width: 100%;
  height: 100%;
  background: url("../img/icon_visualization_active.svg") center center no-repeat;
  background-size: 60% auto;
  background-color: #fff;
}

.input_password .input_area .btn_visualization::after {
  content: "";
  position: absolute;
  top: 0rem;
  left: 0rem;
  width: 100%;
  height: 100%;
  background: url("../img/icon_visualization.svg") center center no-repeat;
  background-size: 60% auto;
  background-color: #fff;
  -webkit-transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}

.input_password .input_area .btn_visualization.active:after {
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}

/* ----------------------------------------------------------------------------
　電話番号（半角数字）
---------------------------------------------------------------------------- */
.input_tel {
  margin-bottom: 2.5rem;
}

.input_tel .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.input_tel .flex input {
  width: 100%;
}

.input_tel .flex p {
  margin: 0 0.5rem;
}

/* ----------------------------------------------------------------------------
　郵便番号（半角数字）
---------------------------------------------------------------------------- */
.input_zip {
  margin-bottom: 2.5rem;
}

.input_zip .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.input_zip .flex input {
  width: 20%;
}
.input_zip .flex input.nextfocus {
  margin-right: 2%;
}
@media screen and (max-width: 592px) {
  .input_zip .flex input {
    width: 25%;
  }
}

.input_zip .flex p {
  margin: 0 0.5rem;
}

.input_zip .flex .btn_auto_address {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100px;
          flex: 0 0 100px;
  display: block;
  width: 20%;
  padding: 0.8rem 0;
  background-color: #0057a7;
  border: 2px solid #0057a7;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  margin-left: 1.2rem;
  border-radius: 3px;
}
@media screen and (max-width: 592px) {
  .input_zip .flex .btn_auto_address {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 70px;
            flex: 0 0 70px;
    padding: 1.2rem 0;
  }
}

.input_zip .flex .btn_auto_clear {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100px;
          flex: 0 0 100px;
  display: block;
  width: 20%;
  padding: 0.8rem 0;
  background-color: #fff;
  border: 2px solid #0057a7;
  color: #0057a7;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  margin-left: 1.2rem;
  border-radius: 3px;
}
@media screen and (max-width: 592px) {
  .input_zip .flex .btn_auto_clear {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 70px;
            flex: 0 0 70px;
    padding: 1.2rem 0;
  }
}

/* ----------------------------------------------------------------------------
　生年月日入力欄
---------------------------------------------------------------------------- */
.input_birthday {
  width: 100%;
  margin: 0 auto 2rem;
  position: relative;
}

.input_birthday .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.input_birthday .flex select {
  width: 100%;
}

.input_birthday .flex span {
  margin: 0 0.5rem;
}

.input_birthday .select_text {
  position: relative;
  top: 0.6rem;
  font-size: 0.8rem;
}
@media screen and (max-width: 592px) {
  .input_birthday .select_text {
    font-size: 0.9rem;
    top: 1.2rem;
  }
}

/* ----------------------------------------------------------------------------
　性別入力欄
---------------------------------------------------------------------------- */
.input_sex {
  width: 100%;
  margin: 0 auto 2rem;
  position: relative;
}

.input_sex .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.input_sex .flex p {
  width: 100%;
  margin-right: 1rem;
}
.input_sex .flex p:last-child {
  margin-right: 0rem;
}
@media screen and (max-width: 592px) {
  .input_sex .flex p {
    font-size: 0.9rem;
  }
}

/* ----------------------------------------------------------------------------
　案内メール設定希望
---------------------------------------------------------------------------- */
.input_mail_hope {
  width: 100%;
  margin: 0 auto 2rem;
  position: relative;
}

.input_mail_hope .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.input_mail_hope .flex p {
  width: 100%;
  margin-right: 1rem;
}
.input_mail_hope .flex p:last-child {
  margin-right: 0rem;
}
@media screen and (max-width: 592px) {
  .input_mail_hope .flex p {
    font-size: 0.9rem;
  }
}

/* ----------------------------------------------------------------------------
　プログラムガイド（番組表）の送付について
---------------------------------------------------------------------------- */
.input_program_guide {
  width: 100%;
  margin: 0 auto 2rem;
  position: relative;
}

.input_program_guide .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.input_program_guide .flex p {
  width: 100%;
  margin-right: 1rem;
}
.input_program_guide .flex p:last-child {
  margin-right: 0rem;
}
@media screen and (max-width: 592px) {
  .input_program_guide .flex p {
    font-size: 0.9rem;
  }
}

/* ----------------------------------------------------------------------------
　変更するB-CAS/ACAS番号の選択
---------------------------------------------------------------------------- */
.input_bcas_select {
  width: 100%;
  margin: 0 auto 2rem;
  position: relative;
}

.input_bcas_select p {
  margin-bottom: 1rem;
}
.input_bcas_select p:last-child {
  margin-bottom: 0rem;
}

/* ----------------------------------------------------------------------------
　都道府県
---------------------------------------------------------------------------- */
.input_prefecture {
  margin-bottom: 2.5rem;
}

.input_prefecture select {
  width: 50%;
}
@media screen and (max-width: 592px) {
  .input_prefecture select {
    width: 100%;
  }
}

/* ----------------------------------------------------------------------------
　市区町村（全角）・番地（全角）・建物名（全角）
---------------------------------------------------------------------------- */
.input_address {
  margin-bottom: 2.5rem;
}

/* ----------------------------------------------------------------------------
　B-CASカード番号／ACAS番号
---------------------------------------------------------------------------- */
.input_bcas {
  margin-bottom: 2.5rem;
}
.input_bcas:last-child {
  margin-bottom: 0rem;
}

.input_bcas .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.input_bcas .flex input {
  width: 100%;
  margin-right: 0.8rem;
}
.input_bcas .flex input:last-child {
  margin-right: 0rem;
}
@media screen and (max-width: 592px) {
  .input_bcas .flex input {
    font-size: 1rem;
  }
}

/* ----------------------------------------------------------------------------
　クレジットカード番号
---------------------------------------------------------------------------- */
.input_credit_number {
  margin-bottom: 2rem;
}

.input_credit_number .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.input_credit_number .flex input {
  width: 100%;
  margin-right: 1rem;
}
.input_credit_number .flex input:last-child {
  margin-right: 0rem;
}

.input_credit_number .flex p {
  margin: 0 0.5rem;
}

/* ----------------------------------------------------------------------------
　有効期限
---------------------------------------------------------------------------- */
.input_expiry {
  margin-bottom: 2.5rem;
}
.input_expiry:last-child {
  margin-bottom: 0rem;
}

.input_expiry .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.input_expiry .flex select {
  width: 22.5%;
}

.input_expiry .flex p {
  margin: 0 0.5rem;
  white-space: nowrap;
}

/* ----------------------------------------------------------------------------
　クレジットカード名義人
---------------------------------------------------------------------------- */
.input_credit_name {
  margin-bottom: 2.5rem;
}

/* ----------------------------------------------------------------------------
　クレジットカードセキュリティコード
---------------------------------------------------------------------------- */
.input_credit_security {
  margin-bottom: 2.5rem;
}

/* ----------------------------------------------------------------------------
　recapture
---------------------------------------------------------------------------- */
.input_recapture {
  margin-bottom: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.input_recapture img {
  width: 100%;
}

.recaptcha_error_area {
  margin: 0 auto 2rem;
  width: 304px;
}

/* ----------------------------------------------------------------------------
　info_area
---------------------------------------------------------------------------- */
.info_area .gray_area {
  background-color: #eee;
  padding: 1.5rem;
  line-height: 180%;
  width: 80%;
  margin: 0 auto 2.5rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media screen and (max-width: 592px) {
  .info_area .gray_area {
    width: 100%;
  }
}

.info_area .normal_area {
  line-height: 180%;
  width: 80%;
  margin: 0 auto 2.5rem;
}
@media screen and (max-width: 592px) {
  .info_area .normal_area {
    width: 100%;
  }
}

.info_area .bnr_area {
  width: 80%;
  margin: 0 auto 2.5rem;
}
@media screen and (max-width: 592px) {
  .info_area .bnr_area {
    width: 100%;
  }
}
.info_area .bnr_area img {
  width: 100%;
}

/* ----------------------------------------------------------------------------
　入力エリアのキャプション
---------------------------------------------------------------------------- */
.input_cap {
  font-size: 0.875rem;
  line-height: 160%;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* ----------------------------------------------------------------------------
　WEBアカウントをまだお持ちでない方
---------------------------------------------------------------------------- */
.create_account {
  width: 80%;
  margin: 0 auto 2rem;
}
@media screen and (max-width: 592px) {
  .create_account {
    width: 100%;
  }
}

.create_account .ttl {
  text-align: center;
  margin-bottom: 1rem;
  font-weight: 600;
}

.create_account .btn a {
  border: 2px solid #0057a7;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #0057a7;
  padding: 1rem;
  font-weight: 600;
  text-decoration: none;
  position: relative;
}
.create_account .btn a:before {
  font-family: wol;
  content: "▸";
  font-weight: 400;
  color: #0057a7;
  font-size: 1.5rem;
  position: absolute;
  height: 100%;
  top: 0rem;
  right: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-decoration: none;
}

/* ----------------------------------------------------------------------------
　（はてなマーク）パスワード
---------------------------------------------------------------------------- */
#hatena_password .enableList {
  width: 100%;
}

#hatena_password .enableList td {
  border: 1px solid #ccc;
  width: 16.666666%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  padding: 0.5rem;
}

/* ----------------------------------------------------------------------------
　箇条書きテキスト
---------------------------------------------------------------------------- */
.txt_list {
  margin-bottom: 3rem;
}
.txt_list li {
  padding-left: 1em;
  text-indent: -1em;
}
.txt_list li:not(:last-child) {
  margin-bottom: 0.5rem;
}
.txt_list._mb0 {
  margin-bottom: 0rem;
}

/* ----------------------------------------------------------------------------
　テキスト中央揃え
---------------------------------------------------------------------------- */
._txt_center {
  text-align: center;
}

/* ----------------------------------------------------------------------------
　確認画面レイアウト
---------------------------------------------------------------------------- */
#confirm {
  margin-bottom: 3rem;
}

#confirm dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 2rem;
}
@media screen and (max-width: 592px) {
  #confirm dl {
    display: block;
  }
}

#confirm dl dt {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 16rem;
          flex: 0 0 16rem;
  font-weight: 600;
}
@media screen and (max-width: 592px) {
  #confirm dl dt {
    margin-bottom: 0.5rem;
  }
}

#confirm dl dd {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

#confirm dl dd .small {
  font-size: 0.875rem;
}

/* ----------------------------------------------------------------------------
　エラー画面
---------------------------------------------------------------------------- */
.error_area {
  margin-bottom: 2rem;
}
.error_area:last-child {
  margin-bottom: 0rem;
}

.error_area .txt {
  line-height: 160%;
  margin-bottom: 1.5rem;
  text-align: center;
}
.error_area .txt:last-child {
  margin-bottom: 0rem;
}

/* list01 */
.error_area .list01 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #eee;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}

.error_area .list01 li {
  margin-bottom: 0.2rem;
}

/* contact */
.error_area .contact {
  background-color: #ddebf7;
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 2.5rem;
}

.error_area .contact p {
  margin-bottom: 0.2rem;
  line-height: 160%;
}

.error_area .contact .tel {
  font-size: 1.275rem;
  font-weight: 600;
}

/* error404 */
.error_area .error404 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #eee;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}

.error_area .error404 .ttl {
  font-weight: 600;
  margin-right: 2rem;
  line-height: 180%;
}
@media screen and (max-width: 592px) {
  .error_area .error404 .ttl {
    margin-right: 1rem;
  }
}

.error_area .error404 .illust {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100px;
          flex: 0 0 100px;
}
.error_area .error404 .illust img {
  width: 100%;
}

/* ----------------------------------------------------------------------------
　ボタンリスト
---------------------------------------------------------------------------- */
.btn_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 2.5rem;
}
@media screen and (max-width: 592px) {
  .btn_list {
    display: block;
  }
}

.btn_list li {
  margin: 0 0.8rem;
  width: 250px;
}
@media screen and (max-width: 592px) {
  .btn_list li {
    width: 100%;
    margin: 0 0 1rem 0;
  }
}

.btn_list li a {
  position: relative;
  display: block;
  background-color: #fff;
  border: 1px solid #0057a7;
  text-align: center;
  border-radius: 3px;
  color: #0057a7;
  text-decoration: none;
  padding: 1rem 1rem 1rem;
  font-weight: 600;
  font-size: 1rem;
  line-height: 130%;
}

/* ----------------------------------------------------------------------------
　エラー画面からその他画面への遷移リンク
---------------------------------------------------------------------------- */
.help_link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.help_link:last-child {
  margin-bottom: 0rem;
}
.help_link.right {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.help_link._mb1 {
  margin-bottom: 1rem;
}

.help_link li {
  margin: 0 1rem;
}
.help_link li:only-child {
  margin: 0 0 0 0;
}

.help_link li a {
  position: relative;
  padding: 0 0 0 1.3rem;
}
.help_link li a:before {
  font-family: wol;
  content: "▸";
  font-weight: 400;
  color: #0057a7;
  font-size: 1.3rem;
  position: absolute;
  height: 100%;
  top: 0.1rem;
  left: 0rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-decoration: none;
}

/* ----------------------------------------------------------------------------
　「登録完了」メール送信表示
---------------------------------------------------------------------------- */
.sent_address_area {
  background-color: #efefef;
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 2.5rem;
  /** 【FLECTが追加しました】メールアドレスが長すぎる場合のレイアウト崩れを対応するために追加したCSS */
  word-break: break-all;
}
.sent_address_area .address {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.sent_address_area .address:last-child {
  margin-bottom: 0rem;
}

/* ----------------------------------------------------------------------------
　「パスワードの再確認」テキスト
---------------------------------------------------------------------------- */
.reconfirmation_area {
  text-align: left;
  margin-bottom: 2.5rem;
  word-break: break-all;
}

/* ----------------------------------------------------------------------------
　「登録完了」テキスト
---------------------------------------------------------------------------- */
.fin_txt {
  line-height: 160%;
  text-align: center;
  margin-bottom: 2.5rem;
}

/* ----------------------------------------------------------------------------
　サンクス文章
---------------------------------------------------------------------------- */
.thanks {
  margin-bottom: 2.5rem;
  line-height: 160%;
}

/* ----------------------------------------------------------------------------
　お進みくださいボタン
---------------------------------------------------------------------------- */
.btn_proceed {
  width: 80%;
  margin: 0 auto 2.5rem;
}
@media screen and (max-width: 592px) {
  .btn_proceed {
    width: 100%;
  }
}

.btn_proceed a {
  display: block;
  background-color: #0057a7;
  text-align: center;
  border-radius: 3px;
  color: #fff;
  text-decoration: none;
  padding: 1rem 0;
  font-weight: 600;
  font-size: 1rem;
  line-height: 160%;
}

/* ----------------------------------------------------------------------------
　WOWOWオンデマンドボタン
---------------------------------------------------------------------------- */
.btn_wod {
  width: 80%;
  margin: 0 auto 2.5rem;
}
@media screen and (max-width: 592px) {
  .btn_wod {
    width: 100%;
  }
}

.btn_wod a {
  border: 1px solid #0057a7;
  text-align: center;
  border-radius: 3px;
  color: #0057a7;
  text-decoration: none;
  padding: 1rem 0;
  font-weight: 600;
  font-size: 1rem;
  line-height: 160%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
}
.btn_wod a:before {
  font-family: wol;
  content: "▸";
  font-weight: 400;
  color: #0057a7;
  font-size: 1.5rem;
  position: absolute;
  height: 100%;
  top: 0rem;
  right: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-decoration: none;
}

.btn_wod a .logo {
  width: 150px;
  margin-right: 1rem;
}
.btn_wod a .logo img {
  width: 100%;
}

.btn_wod a .text {
  font-size: 1.125rem;
  margin-right: 0.5rem;
}

.btn_wod a .icn-arrow_right {
  font-size: 1.5rem;
}

/* ----------------------------------------------------------------------------
　必ずご確認ください
---------------------------------------------------------------------------- */
.attention_ttl_area {
  margin-bottom: 3rem;
}

.attention_ttl_area h2 {
  font-size: 1.275rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}

.attention_ttl_area h2 span {
  background: url("../img/icon_error.svg") 0 center no-repeat;
  background-size: 17px auto;
  padding: 0 0 0 25px;
}

.attention_ttl_area .txt {
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 160%;
  color: #cc0000;
  margin-bottom: 1rem;
}

.attention_ttl_area .cap {
  text-align: center;
  line-height: 160%;
}

/* ----------------------------------------------------------------------------
　必ずご確認ください
---------------------------------------------------------------------------- */
.chart_area {
  margin-bottom: 3rem;
}

.chart_area dt {
  background-color: #4472c4;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 600;
  padding: 1rem;
  text-align: center;
}

.chart_area dt .small {
  font-size: 0.875rem;
  line-height: 120%;
  font-weight: normal;
}

.chart_area dd {
  background-color: #ddebf7;
  padding: 1rem;
}

.chart_area dd .txt {
  text-align: center;
  line-height: 180%;
  margin-bottom: 1rem;
}
.chart_area dd .txt:last-child {
  margin-bottom: 0rem;
}

.chart_area dd .chart {
  margin-bottom: 1rem;
}
.chart_area dd .chart:last-child {
  margin-bottom: 0rem;
}
.chart_area dd .chart img {
  width: 100%;
}

/* ----------------------------------------------------------------------------
　入力項目の見出し
---------------------------------------------------------------------------- */
.input_title {
  font-size: 1rem;
  line-height: 150%;
  font-weight: 600;
  margin-bottom: 0.7rem;
}
.input_title.txt_center {
  text-align: center;
}

/* ----------------------------------------------------------------------------
　入力項目の見出し
---------------------------------------------------------------------------- */
.not_service {
  margin-bottom: 2.5rem;
}

.not_service .ttl {
  font-weight: 600;
  margin-bottom: 1rem;
}

.not_service ul li {
  margin-bottom: 0.5rem;
  padding-left: 1em;
  text-indent: -1em;
}