/*-------------------------------------------
    アクセシビリティ対応
-------------------------------------------*/
*{
  --fuji-po-red-2: #C40A00;
}

button{
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
}

a.pink-link{
  color: var(--fuji-po-red-2);
}

/*-------------------------------------------
申込みフォーム
-------------------------------------------*/

/*申込みフォーム　STEP*/
.form-step-image-area.select-choice ~ .form-step-footer-area .step.sel .step-title,
.form-step-image-area.user-choice ~ .form-step-footer-area .step.use .step-title,
.form-step-image-area.confirm-choice ~ .form-step-footer-area .step.con .step-title,
.form-step-image-area.payment-choice ~ .form-step-footer-area .step.pay .step-title,
.form-step-image-area.select-choice ~ .mypage-section-container .form-step-footer-area .step.sel .step-title,
.form-step-image-area.user-choice ~ .mypage-section-container .form-step-footer-area .step.use .step-title,
.form-step-image-area.confirm-choice ~ .mypage-section-container .form-step-footer-area .step.con .step-title,
.form-step-image-area.payment-choice ~ .mypage-section-container .form-step-footer-area .step.pay .step-title,
.select-choice .step.sel .step-title, .user-choice .step.use .step-title, .confirm-choice .step.con .step-title,
.payment-choice .step.pay .step-title{
  background-color: var(--fuji-po-red);
}
table.form-table tr{
  height: auto;
}
main.mypage-main select,
input.mypage-input-border{
  font-size: 1.4rem;
}
.custom-check-box.js-input-radio-change:focus,
main.mypage-main select:focus,
input.mypage-input-border:focus{
  outline: none;
  border: none;
  box-shadow: 0 0 5px 2px #f5e77e;
  border-radius: 8px;
}
/*必須マーク*/
table.form-table span.mandatory,
div.mandatory{
  background-color: var(--fuji-po-red-2);
}
div.mandatory.agree-check {
  border: 1px solid var(--fuji-po-white);
}
div.gender-label-box{
  align-items: initial;
}
div.form-user-background.form-user-background-entry.form-user-password{
  margin-bottom: 0;
}
/*テキストリンク*/
.entry-confirm-plan-edit-links a.pink-link,
div.user-link a.pink-link{
  color: var(--fuji-po-red);
}
/*注釈*/
p.remark,
p.mypage-remark{
  color: var(--fuji-po-black);
}

div.mail-attention{
  border: 3px solid var(--fuji-po-red);
}

table.form-confirm-info-table td{
  word-break: break-all;
}

.form-user-background.special div.form-capacity-select-area.active:focus {
  outline: auto;
}
label.label-input{
  width: 40px;
}
div.gender-label-box label.label-input{
  margin-right: 68px;
}
@media screen and (max-width: 767px) {
  table.form-table{
    border-spacing: 0 7px;
  }
  div.gender-label-box{
    margin-top: 0;
  }
}
/*-------------------------------------------
  　新→新　申込みフォーム
-------------------------------------------*/
@media screen and (max-width: 767px) {
  .form-capacity-select-image{
    height: calc(20vw - 2.5px);
  }
  .special-plan-select .form-capacity-select-image{
    height: calc(20vw - 12px);
  }
  .capacity-select-image-create {
    height: auto;
  }

  .charge-img-create {
    margin: 10px 0;
  }

  div.form-capacity-select-area.datacharge.capacity-select-area-create {
    margin: 0;
  }
}
div.form-capacity-notice.payment span.strong{
  color: var(--fuji-po-red);
}

div.white-content-box-form.payment{
  padding: 30px;
}
.form-user-background.special div.form-capacity-select-area.active:focus,
.form-user-background.special div.form-capacity-select-area.selected:focus{
  outline: auto;
}

.focus-decoration-black:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #000;
}

/* お客様情報 */
div.button.button-create,
.create-btn-end.button.button-body-cancel {
  flex-direction: row;
  justify-content: flex-end;
}

.focus-before-label {
  position: relative; 
}

.focus-before-label:focus-visible {
  outline: none;
}

.focus-before-label:focus-visible::before {
  outline: solid 2px #FFEB00;
  content: "";
  position: absolute;
  bottom: -2.5px;
  margin-left: 0;
  border: 10px solid transparent;
}

/* 海外データプラン */
main.mypage-main select.focus-decoration-black:focus,
.corp-imei-search input.mypage-input-border.focus-decoration-black:focus {
  box-shadow: 0 0 0 2px #000;
  border-radius: 0;
  outline: none;
}
.button-text-margin.button-text {
  margin-right: 0;
}

@media screen and (max-width: 767px) {
  div.button.button-create,
  .create-btn-end.button.button-body-cancel {
  flex-direction: column;
  }
}

/* フォーカスボタン枠調整用 */
.pay-box:last-child img.padding-reset-link {
  padding: 0;
}

.button-link-create {
  margin-bottom: 15px;
}