@charset "utf-8";
.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}
.justify_content_between {
  justify-content: space-between !important;
}

.justify_content_center {
  justify-content: center !important;
}

.justify_content_end {
  justify-content: flex-end !important;
}

.justify_content_start {
  justify-content: flex-start !important;
}

.align_items_center {
  align-items: center !important;
}

.align_items_end {
  align-items: flex-end !important;
}

.align_items_baseline {
  align-items: baseline !important;
}

#login_box {
  margin: 0 auto;
  width: 100%;
  padding: 10px 20px 10px;
  height: auto;
  display: block;
  clear: both;
  content: '';
  padding: 5px 20px;
  border: 1px solid #e6e6e6;
  text-align: center;
}
#login_box p {
  margin-bottom: 5px;
}
#loginButton_p {
  width: 200px;
  margin: 0px 24.5px;
  padding: 5px 0 !important;
  line-height: 25px;
  font-size: 18px;
  height: 38px;
  background: #e83416;
}
/* ----- old button compatibility ----- */
.applyBtnTypeA {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.applyBtnTypeA .btnTypeE,
.applyBtnTypeA .btnTypeC {
  position: absolute;
  top: 0;
  left: 0;
  color: #333;
  text-decoration: underline;
  font-size: 14px;
  cursor: pointer;
  background: none;
  border: none;
  margin-top: 20px;
}
/* #wrap がないテンプレ（ruum_contact, mobile_change_plan, service_contact 等）でも
   PIDログインボタン (a.btnTypeEntry) が正しく表示されるように body.user_info も対象に含める */
#wrap a.btnTypeEntry,
body.user_info a.btnTypeEntry,
body#request a.btnTypeEntry {
  display: block;
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px 30px;
  background: #d9161b;
  border-radius: 8px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  line-height: 1.4;
  color: #fff !important;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .applyBtnTypeA {
    flex-direction: column;
    gap: 16px;
  }
  .applyBtnTypeA .btnTypeE,
  .applyBtnTypeA .btnTypeC {
    position: static;
    order: 2;
    text-align: center;
    margin-top: 0;
  }
}
.page-title-wrap {
  padding: 16px 0;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .page-title-wrap {
    padding: 24px 0;
  }
}
/* SP のフォームタイトルは小さく（h-label が 22px だと長いタイトルが折り返す） */
@media screen and (max-width: 767px) {
  .page-title-wrap .h-label {
    font-size: 16px;
    text-align: center;
  }
}

/* ステップナビ調整: 上下余白を圧縮 */
.step-nav-wrap {
  padding: 12px 0 calc(8px + 2em);
  margin-bottom: 16px;
}
@media screen and (max-width: 767px) {
  /* 内容が収まる時は中央、はみ出す時は横スクロール可能なまま左起点
     (justify-content: safe center は非対応ブラウザで宣言ごと落ちて左寄せになるため、auto margin方式に変更) */
  .step-nav-wrap > .step-nav {
    justify-content: flex-start;
  }
  .step-nav-wrap > .step-nav > li:first-child {
    margin-left: auto;
  }
  .step-nav-wrap > .step-nav > li:last-child {
    margin-right: auto;
  }
}

/* ----- error box ----- */
.errBox,
#error_box {
  padding: 10px 20px;
  border: 2px solid #e93817;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  display: none;
}
.errBox:empty,
#error_box:empty {
  display: none;
}
.errBox ul:empty,
#error_box ul:empty {
  display: none;
}
.errBox ul,
#error_box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.errBox ul li,
#error_box ul li {
  padding: 1px 0;
  margin-bottom: 0;
  line-height: 1.4;
}
.errBox ul li a,
#error_box ul li a {
  color: #e93817;
  text-decoration: none;
  font-size: 14px;
}
.errBox ul li a:hover,
#error_box ul li a:hover {
  text-decoration: underline;
}
.board-pink.error-box {
  padding: 10px 20px;
  border: 2px solid #e93817;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
}
.board-pink.error-box .lead {
  font-weight: bold;
  margin-bottom: 8px;
}
.board-pink.error-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.board-pink.error-box ul li a {
  color: #e93817;
  text-decoration: none;
  font-size: 14px;
}

/* ----- legacy utility: display block helper (used in inline <i> sub-labels) ----- */
.d_block {
  display: block;
}

/* ----- js-display: JS で .show()/.hide() 切替する要素用の初期非表示クラス -----
   要素に class="js-display" を付与すると初期非表示になり、
   jQuery .show() / .fadeIn() で style 属性が付くと :not([style]) が外れて表示される。
   旧来の <style> 内 display:none ルールを各テンプレートに書く代わりに使用。 */
.js-display:not([style]) {
  display: none;
}

/* ----- note suffix inside form labels: shrink "※全角"/"※半角数字" etc. to avoid wrapping ----- */
.form-label .note,
.label-box .txt .note,
.label-box > .note,
.form-group label.inputBox > span .note,
.form-group label.inputBox > span > .note {
  font-size: 86%;
  font-weight: normal;
}

/* ----- legacy inputBox label pair: display sei/mei side-by-side (姓/名・セイ/メイ) ----- */
.form-group:has(> label.inputBox) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.form-group > label.inputBox {
  display: flex;
  align-items: center;
  gap: 6px;
  width: calc(50% - 4px);
  margin: 0;
  box-sizing: border-box;
}
.form-group > label.inputBox > span:first-child {
  flex: 0 0 auto;
  white-space: nowrap;
}
.form-group > label.inputBox > input[type="text"],
.form-group > label.inputBox > input[type="tel"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
@media screen and (max-width: 767px) {
  .form-group > label.inputBox {
    width: 100%;
  }
}

/* ----- 新コンポーネント (name.html/kana.html) の col-50: SP では 100% 幅で 2行表示 ----- */
@media screen and (max-width: 767px) {
  .form-group .row > .col-50,
  .cmn-box__inner .row > .col-50 {
    width: 100% !important;
  }
  .form-group .row > .col-50 + .col-50,
  .cmn-box__inner .row > .col-50 + .col-50 {
    margin-top: 12px;
  }
}

/* ----- legacy input-label + input pair (姓/名 など): SP では grid 2列で label | input を行ごとに配置 ----- */
/* form-group 直下、または form-group 内の任意のラッパー直下にある input-label + input ペアを対象 */
@media screen and (max-width: 767px) {
  .form-group:has(> .input-label + .input-text),
  .form-group :has(> .input-label + .input-text) {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    row-gap: 8px;
    align-items: center;
  }
  .form-group .input-label {
    margin-left: 0 !important;
  }
  .form-group .input-label + input.input-text {
    width: 100%;
    min-width: 0;
  }
  /* grid 内の input-label / input 以外の要素（<p> 等）は全列にまたがる */
  .form-group:has(> .input-label + .input-text) > *:not(.input-label):not(.input-text),
  .form-group :has(> .input-label + .input-text) > *:not(.input-label):not(.input-text) {
    grid-column: 1 / -1;
  }
}

/* ----- 郵便番号など: input-text-s（短い input）は 1 行に収めるため幅を抑制 ----- */
.form-group > input.input-text-s {
  width: 80px;
  max-width: 30%;
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .form-group > input.input-text-s {
    width: calc(50% - 30px);
    max-width: none;
  }
}

/* ----- radio-box-row: column grid wrapper for radio-box inside form-group (avoids li flex-child capture) ----- */
.radio-box-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.radio-box-row > label.radio-box,
.radio-box-row > label.check-box {
  margin: 0;
}
.radio-box-row.c1 > label.radio-box,
.radio-box-row.c1 > label.check-box { width: 100%; }
.radio-box-row.c2 > label.radio-box,
.radio-box-row.c2 > label.check-box { width: calc(50% - 4px); }
.radio-box-row.c3 > label.radio-box,
.radio-box-row.c3 > label.check-box { width: calc(33.33% - 6px); }
.radio-box-row.c4 > label.radio-box,
.radio-box-row.c4 > label.check-box { width: calc(25% - 6px); }
@media screen and (max-width: 767px) {
  .radio-box-row.sp_c1 > label.radio-box,
  .radio-box-row.sp_c1 > label.check-box { width: 100%; }
}

/* ----- required chip: auto width for English label ("Required") ----- */
.label-box .required,
.requiredTxt .required {
  width: auto;
  min-width: 40px;
  padding: 0 8px;
  white-space: nowrap;
}

/* ----- zipcode input group ----- */
.zipcode-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.zipcode-group input[type="text"] {
  width: auto;
  max-width: 120px;
}

/* ----- legacy date/select horizontal layout (selectList_S_M, input_obj) ----- */
.input_obj {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.input_obj.cf::after {
  content: none;
}
.selectList_S_M {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.selectList_S_M .select-wrap {
  display: inline-block;
}
.selectList_S_M .input_obj_text {
  display: inline-block;
  white-space: nowrap;
}
.input_obj .input_box_l,
.input_obj .input_box_r {
  flex: 0 0 auto;
}
@media screen and (max-width: 767px) {
  .input_obj {
    gap: 6px;
  }
  .selectList_S_M.sp_mb10 {
    margin-bottom: 10px;
  }
}

/* ----- add building button (catvimr 複数棟) ----- */
.btn-add-building {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  background: #fff;
  border: 1px solid #999;
  border-radius: 6px;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-add-building:hover {
  background: #f4f4f4;
  border-color: #666;
}
.btn-add-building .plus-icon {
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
}

/* ----- legacy koujiList (撤去工事希望日) ----- */
.koujiList {
  list-style: none;
  padding: 0;
  margin: 0;
}
.koujiList > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.koujiList > li > .select-wrap {
  display: inline-block;
}

/* ----- tooltip balloon (tips.js) ----- */
.tooltip {
  position: relative;
  cursor: pointer;
  display: inline-block;
}
.tooltip img {
  vertical-align: middle;
  width: 20px;
}
.toolTipBaloonTypeA {
  background: #fff !important;
  border: 1px solid #ddd;
  border-radius: 3px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  display: none;
  font-size: 12px;
  height: auto;
  line-height: 1.5;
  padding: 10px;
  position: absolute;
  text-align: left;
  bottom: calc(100% + 8px);
  left: -10px;
  width: auto;
  min-width: 200px;
  max-width: 300px;
  z-index: 9999;
}
.toolTipBaloonTypeA.isActive {
  display: block !important;
}
.toolTipBaloonTypeA::before {
  border-color: #fff transparent transparent;
  border-style: solid;
  border-width: 9px 9px 0;
  bottom: -8px;
  content: '';
  height: 0;
  left: 20px;
  position: absolute;
  width: 0;
  z-index: 0;
}
.toolTipBaloonTypeA::after {
  border-color: #ddd transparent transparent;
  border-style: solid;
  border-width: 10px 10px 0;
  bottom: -10px;
  content: '';
  height: 0;
  left: 19px;
  position: absolute;
  width: 0;
  z-index: -1;
}
.toolTipBaloonTypeA .close {
  cursor: pointer;
  position: absolute;
  right: -8px;
  top: -8px;
}

/* ----- flatpickr read-only input override ----- */
.form-group .flatpickr-input:read-only {
  border: 2px solid #e2e2e2 !important;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff !important;
  cursor: pointer;
}
.flatpickr-calendar input[type='text']:read-only,
.flatpickr-calendar .numInputWrapper input {
  border: none;
  background: transparent !important;
  padding: 0;
}
/* ----- hide override for form-list li ----- */
li.hide {
  display: none;
}
.required.hide,
.voluntarily.hide {
  display: none;
}

/* ----- en_wrap: wider required label ----- */
.en_wrap .required,
.en_wrap .voluntarily {
  width: 60px;
  font-size: 1rem;
}

/* ----- form-inline-group (label + select horizontal) ----- */
.form-inline-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap; /* select数が多い行（年齢の年月日+満年齢等）が枠外へはみ出さず折り返すように */
}
.form-inline-group > span {
  white-space: nowrap;
  font-weight: bold;
}
.form-inline-group .select-wrap,
.form-inline-group > div {
  flex: 1;
  min-width: 140px;
}
.form-inline-group .select-wrap select {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .form-inline-group {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ----- contact_date_list inline layout ----- */
.js-contact_date_list .form-group .mb10 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.js-contact_date_list .form-group .mb10 .form-label {
  white-space: nowrap;
  font-weight: bold;
  min-width: 60px;
}
.js-contact_date_list .form-group .mb10 select.select {
  flex: 1;
  min-width: 140px;
}
@media screen and (max-width: 767px) {
  .js-contact_date_list .form-group .mb10 {
    flex-direction: column;
    align-items: stretch;
  }
}

.button-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.button-group .btn-back {
  position: absolute;
  top: 0;
  left: 0;
}
.button-group .btn-primary {
  max-width: 400px;
  margin: 0 auto;
}
@media screen and (max-width: 769px) {
  .button-group {
    flex-direction: column;
    gap: 16px;
  }
  .button-group .btn-back {
    position: inherit;
    order: 2;
  }
}
.cmn-box-body.cmn-box-no-head {
  border-radius: 16px;
  border-top: 2px solid #d0d0d0;
}
.complete-title {
  text-align: center;
  font-size: 2rem;
  margin: 8px 0;
  line-height: 1.3;
}
@media screen and (min-width: 768px) {
  .complete-title {
    font-size: 2.4rem;
    margin: 12px 0;
  }
}

/* ----- confirm page (old table structure compatibility) ----- */
#subscription .inner {
  font-size: 16px;
  font-weight: normal;
}
#subscription h2.midashi {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  padding: 10px 0;
  border-bottom: 2px solid #e93817;
}
#subscription h3.midashi_s {
  background: #e93817;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 16px;
  border-radius: 8px 8px 0 0;
  margin: 20px 0 0;
}
#subscription .inputFormTable1,
#subscription .inputFormTable2 {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  border: 1px solid #d2d1d2;
  margin-bottom: 20px;
}
#subscription .inputFormTable1 th,
#subscription .inputFormTable2 th {
  padding: 12px;
  background-color: #f2f2f2;
  text-align: left;
  font-weight: bold;
  vertical-align: top;
  border-right: 1px solid #d2d1d2;
  border-bottom: 1px solid #d2d1d2;
  width: 30%;
}
#subscription .inputFormTable1 td,
#subscription .inputFormTable2 td {
  padding: 12px;
  border-bottom: 1px solid #d2d1d2;
  font-weight: normal;
}
#subscription .inputFormTable1 tr:last-child td,
#subscription .inputFormTable1 tr:last-child th,
#subscription .inputFormTable2 tr:last-child td,
#subscription .inputFormTable2 tr:last-child th {
  border-bottom: 0;
}
#subscription .applyBtnTypeA {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  position: relative;
}
#subscription .btnTypeE,
#subscription .btnTypeC {
  position: absolute;
  top: 0;
  left: 0;
  color: #333;
  text-decoration: underline;
  font-size: 14px;
  cursor: pointer;
  background: none;
  border: none;
}
#subscription a.btnTypeEntry {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px 30px;
  background: #d9161b;
  border-radius: 8px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff !important;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  #subscription .inputFormTable1 th,
  #subscription .inputFormTable2 th {
    display: block;
    width: 100%;
    border-right: none;
    border-left: 5px solid #f18d00;
    background: none;
    padding: 8px 8px;
    margin-bottom: 0;
  }
  #subscription .inputFormTable1 td,
  #subscription .inputFormTable2 td {
    display: block;
    width: 100%;
    padding: 8px 12px;
  }
  #subscription .inputFormTable1 tr,
  #subscription .inputFormTable2 tr {
    display: block;
    border-bottom: 1px solid #e5e5e5;
    padding: 8px 0;
  }
  #subscription .applyBtnTypeA {
    flex-direction: column;
    gap: 16px;
  }
  #subscription .btnTypeE,
  #subscription .btnTypeC {
    position: static;
    order: 2;
    text-align: center;
  }
}

/* ----- complete page ----- */
#subscription .button-group {
  justify-content: center;
}
.complete-message {
  font-weight: normal;
  text-align: center;
}
.notice-box {
  font-weight: normal;
}

/* ----- label.select compatibility (old radio/checkbox card pattern) ----- */
.form-group label.select,
.cmn-box-body label.select {
  display: block;
  float: left;
  cursor: pointer;
  padding: 8px 10px;
  position: relative;
  border: 1px solid #d2d1d2;
  margin: 5px 0 5px 5px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1.6;
  box-sizing: border-box;
}
/* hide empty span only outside form-group (product cards etc) */
.mobileList label.select > span:first-child:empty {
  display: none;
}
/* default: hide native radio/checkbox, use main.css pseudo-elements */
.form-group label.select > input[type='radio'],
label.select > input[type='radio'],
.form-group label.select > input[type='checkbox'],
label.select > input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* mobile: show native radio for product/terminal selection */
#mobileType label.select > input[type='radio'],
#mobileList label.select > input[type='radio'],
#mobileList_iphone label.select > input[type='radio'] {
  position: relative;
  opacity: 1;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  accent-color: #e93817;
  vertical-align: middle;
  cursor: pointer;
}
.form-group label.select.disabled,
.form-group label.radio-box.disabled {
  cursor: not-allowed;
  background-color: #f2f2f2;
  opacity: 0.5;
}
.c1 label.select,
.form-group .c1 label.select,
.form-group.c1 label.select,
.form-group.c1 label.radio-box,
.form-group.c1 label.check-box,
.form-group.c1 .radio-box > label,
.form-group.c1 .check-box > label {
  width: 100%;
}
.c2 label.select,
.form-group .c2 label.select,
.form-group.c2 label.select,
.form-group.c2 label.radio-box,
.form-group.c2 label.check-box,
.form-group.c2 .radio-box > label,
.form-group.c2 .check-box > label {
  width: calc(50% - 1em);
}
.c3 label.select,
.form-group .c3 label.select,
.form-group.c3 label.select,
.form-group.c3 label.radio-box,
.form-group.c3 label.check-box,
.form-group.c3 .radio-box > label,
.form-group.c3 .check-box > label {
  width: calc(33.33% - 5px);
}
.c4 label.select,
.form-group .c4 label.select,
.form-group.c4 label.select,
.form-group.c4 label.radio-box,
.form-group.c4 label.check-box,
.form-group.c4 .radio-box > label,
.form-group.c4 .check-box > label {
  width: calc(25% - 5px);
}
.c5 label.select {
  width: calc(20% - 5px);
}
.c6 label.select {
  width: calc(16.66% - 5px);
}
/* 選択カードの等高グリッド: floatだと文言の長いカードだけ縦に伸びて不揃いになるため、
   行内で高さを揃え文言を上下中央化する（internet_network_contact NET不具合状況ほか、第8弾FB 板矢06） */
.form-group.card-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.form-group.card-grid > label.select,
.form-group.card-grid > label.radio-box,
.form-group.card-grid > label.check-box {
  float: none;
  display: flex;
  align-items: center;
}
/* card-grid内で動的表示する詳細入力行(js-trouble_status_detail4等)は
   c2/c4のカード幅の影響を受けず全幅で表示する（internet_network_contact） */
.form-group.card-grid > div {
  width: 100%;
}
.form-group.card-grid > div input[type='text'],
.form-group.card-grid > div textarea {
  width: 100%;
  box-sizing: border-box;
}
.form-group .cf::after {
  content: '';
  display: table;
  clear: both;
}
.form-group.mh .cf {
  display: flex;
  flex-wrap: wrap;
}
.form-group.mh .cf > label {
  float: none;
  display: flex;
  align-items: center;
}

/* mobile product card */
.form-group .mobile_body {
  text-align: center;
  padding: 5px;
  position: relative;
}
.form-group .mobile_body .img {
  margin: 5px 0;
}
.form-group .mobile_body .img img {
  max-width: 80px;
  height: auto;
}
.form-group .mobile_body .txt {
  font-size: 12px;
  font-weight: bold;
  margin: 0;
}
.form-group .mobile_body .input {
  margin: 0;
}
.form-group .mobile_body .input input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* .form-group .mobile_body .input span {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background: #fff;
  vertical-align: middle;
} */
.form-group .mobile_body .input input {
  position: relative;
  opacity: 1;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  accent-color: #e93817;
  vertical-align: middle;
  cursor: pointer;
}
/* .form-group .mobile_body .input input:checked + span,
.form-group .mobileList label.select.on .input span {
  border-color: #e93817;
  background: #e93817;
} */
.form-group .mobileList label.select {
  padding: 8px 5px;
  width: calc(25% - 6px);
  min-height: 150px;
  text-align: center;
  cursor: pointer;
}
.form-group .mobileList label.select:has(input:checked) {
  border-color: #e93817;
  background: #fff5f3;
}
.form-group .mobileList .tooltip {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 1;
}
.form-group .mobileList .tooltip img {
  width: 20px;
}

/* mobile color swatch */
.form-group .mobile_color {
  display: inline-block;
  width: 24px;
  height: 16px;
  border: 1px solid #d2d1d2;
  vertical-align: middle;
  margin-left: 4px;
}
.mobile_body .tooltip {
  position: absolute;
  top: 0;
  right: 0;
}
.form-list .form-group label > input[type='radio'] + span.mobile_color::before,
.form-list .form-group label > input[type='checkbox'] + span.mobile_color::before,
.form-list .form-group label > input[type='radio'] + span.mobile_color::after,
.form-list .form-group label > input[type='checkbox'] + span.mobile_color::after {
  content: none;
}
@media screen and (max-width: 767px) {
  .c2 label.select,
  .form-group .c2 label.select,
  .form-group.c2 label.select,
  .form-group.c2 label.radio-box,
  .form-group.c2 label.check-box,
  .form-group.c2 .radio-box > label,
  .form-group.c2 .check-box > label,
  .c4 label.select,
  .form-group .c4 label.select,
  .form-group.c4 label.select,
  .form-group.c4 label.radio-box,
  .form-group.c4 label.check-box,
  .form-group.c4 .radio-box > label,
  .form-group.c4 .check-box > label {
    width: calc(50% - 1em);
  }
  .form-group .mobileList label.select {
    width: calc(50% - 1em);
    min-height: 140px;
  }
  .sp_c1 label.select,
  .form-group.sp_c1 label.select,
  .form-group.sp_c1 label.radio-box,
  .form-group.sp_c1 label.check-box,
  .form-group.sp_c1 .radio-box > label,
  .form-group.sp_c1 .check-box > label {
    width: 100%;
  }
  .sp_c2 label.select,
  .form-group.sp_c2 label.select,
  .form-group.sp_c2 label.radio-box,
  .form-group.sp_c2 label.check-box,
  .form-group.sp_c2 .radio-box > label,
  .form-group.sp_c2 .check-box > label {
    width: calc(50% - 1em);
  }
}

/* ----- select_table (work code table) ----- */
.select_table li {
  display: flex;
}
.select_table li:nth-child(even) {
  background: #f5f5f5;
}
.select_table li.haed {
  border-bottom: 1px dashed #ccc;
}
.select_table li.haed span {
  font-weight: bold;
  font-size: 86%;
}
.select_table li > span {
  padding: 5px 0;
}
.select_table li > span:first-child {
  width: 65%;
}
@media screen and (max-width: 767px) {
  .select_table li > span:first-child {
    width: calc(100% - 90px);
  }
}

/* ----- utility: text-align ----- */
.taC {
  text-align: center;
}
.taL {
  text-align: left;
}
.taR {
  text-align: right;
}

/* ----- PID login: btn_blue ----- */
a.btn_blue {
  display: inline-block;
  padding: 10px 30px;
  font-size: 16px;
  color: #fff;
  background-color: #89c6d7;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
}

/* ----- PC/SP display toggle ----- */
.pc_hide {
  display: none;
}
.sp_show,
.sp_showIN,
.sp_showINb {
  display: none;
}
@media screen and (min-width: 768px) {
  .pc_show {
    display: block;
  }
  .sp_hide {
    display: block;
  }
  .sp_show,
  .sp_showIN,
  .sp_showINb {
    display: none !important;
  }
  .accordion.border {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 767px) {
  .sp_show {
    display: block !important;
  }
  .sp_showIN {
    display: inline !important;
  }
  .sp_showINb {
    display: inline-block !important;
  }
  .sp_hide {
    display: none !important;
  }
  .pc_hide {
    display: block;
  }
  .pc_show {
    display: none;
  }
}
.note-list li {
  margin-bottom: 0;
}
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* select-wrap 内の <select> が親幅を超えてはみ出す問題への対策 (SP表示)。
   .form-list .select-wrap は label 要素として inline 配置されるため、
   中の <select> のデフォルト幅 (option 最長テキスト幅) が親幅を超えやすい。 */
.form-list .select-wrap {
  display: block;
  max-width: 100%;
}
.form-list .select-wrap select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* cmn-box-body の上端にも横線を引く（header が無い場合の境界を明示）。
   cmn-box-header の角丸は元のまま（16px 16px 0 0）、subtitle2 はフラットのまま使い分け。 */
.cmn-box .cmn-box-body {
  border-top: 2px solid #d0d0d0;
  border-radius: 16px;
}
/* cmn-box-header の直後の cmn-box-body は上線を非表示にし下のみ角丸を残す */
.cmn-box .cmn-box-header + .cmn-box-body {
  border-top: none;
  border-radius: 0 0 16px 16px;
}

/* form-list の末尾の <li> 直後に来る subtitle2 に上余白を付与（密着回避）。
   module.css の :first-child ルールに含まれる border-radius: 8px 8px 0 0; を打ち消し、
   subtitle2 は常にフラット赤帯で統一する。 */
.cmn-box-body .subtitle2 {
  margin-top: 24px;
  border-radius: 0;
}
/* 第8弾FB: module.css の密着(-16px)は子孫:first-childに効くため、BOX途中に置かれた
   section先頭の帯（cancellation_a/b の撤去について・転居先について等）が上の項目に
   重なっていた。密着はBOX先頭に来る場合のみに限定する。 */
.cmn-box-body .subtitle2:first-child {
  margin-top: 24px;
  border-radius: 0;
}
/* BOX先頭に来る帯のみ上端密着:
   ①cmn-box-body直下の先頭 ②body先頭ラッパー(section/div)内の先頭
   ③ヘッダー無しBOX(cmn-box-no-head)の直下section内の先頭（cancellation_eの撤去BOXは
     sdu/mduのsection2択でどちらか一方のみ表示されるため、2番目のsectionでも密着でよい） */
.cmn-box-body > .subtitle2:first-child,
.cmn-box-body > :first-child > .subtitle2:first-child,
.cmn-box-no-head > section > .subtitle2:first-child {
  margin-top: -16px;
}
/* WSC-2525: section内の正当なサブ見出し（転居先について等）は、ヘッダー重複扱いの非表示ルール(.cmn-box-header + .cmn-box-body .subtitle2:first-child)から除外して表示する */
.cmn-box-header + .cmn-box-body .subtitle2.keep-sub-heading:first-child {
  display: block;
}

/* 郵便番号入力幅の全フォーム統一
   個別テンプレで style="width:4em;" / class="w3em" / size="5" などバラバラなのを上書き。 */
input[name="form_zipcode1"],
input[name="b_form_zipcode1"],
input[name$="_form_zipcode1"] {
  width: 80px !important;
  max-width: 80px !important;
}
input[name="form_zipcode2"],
input[name="b_form_zipcode2"],
input[name$="_form_zipcode2"] {
  width: 96px !important;
  max-width: 96px !important;
}
/* zip ラッパー (zip-input / .form-list内 input.p-postal-code) の縦位置揃え */
.zip-input,
.form-list .h-adr .form-group > div:has(input[name^="form_zipcode"]) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* フォーム途中に挟まるアコーディオン (.accordion.border) の下余白。
   apply_text.html などが form 項目の間に挟まる際、次セクションと密着するのを防ぐ。
   連続アコーディオンの間隔 (既存 +.accordion.border の margin-top:12px) は
   bottom 側に統一して上書きで打ち消す。 */
.accordion.border {
  margin-bottom: 16px;
}
.accordion.border + .accordion.border {
  margin-top: 0;
}

/* Bootstrap の scroll-behavior:smooth がerror_boxリンクのスクロールを阻害するため無効化 */
:root {
  scroll-behavior: auto !important;
}

/* annotation_btn の色を btn-primary に統一（module.css の上書き） */
.button-group a.annotation_btn:has(.annotation) {
  background: #D9161B;
}
.button-group .annotation_btn .annotation {
  background: transparent;
}

/* ----- 旧テンプレ由来の姓名ブロック横並び対応（WSC-2525 第5弾FB横断対応）
   name-group/name-input 系クラスが未定義のため block 縦積みになっていた画面の修正。
   対象: contact_service, eng_service_contact, eventjcomtokyo_contact, medical_institution_contact,
         op_sale_campaign_adult, adplacement_inquiries, name_change, phone_change, remote_support, wowow 等 ----- */
.form-group .name-group,
.form-group .name-input {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}
.form-group .name-group > .name-item,
.form-group .name-input > .name-input-item,
.form-group .name-input > .name-field {
  flex: 1 1 0;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.name-item > label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0; /* ネストflexの自動最小幅で内容分が縮まずitem外へはみ出すのを防ぐ（例: フリガナのセイ全角カナ+input） */
}
.name-group .name-label,
.name-input .name-label {
  white-space: nowrap;
  flex-shrink: 0;
}
.name-group input[type="text"],
.name-input input[type="text"] {
  flex: 1;
  min-width: 0;
}
@media screen and (max-width: 767px) {
  .form-group .name-group,
  .form-group .name-input {
    flex-direction: column;
    gap: 10px;
  }
}

/* ----- 赤字ユーティリティ: 旧fcRed相当だが未定義だった text-red / color-red を標準赤(#D9161B)で定義 (WSC-2525 第7弾FB) ----- */
/* text-error も同族の未定義クラス（internet_network_contact ほか10テンプレで使用、第8弾FB 板矢06） */
.text-red,
.color-red,
.text-error {
  color: #D9161B;
}

/* ----- 旧input.css由来の入力幅ユーティリティ（未定義で入力欄が全幅になっていた） (WSC-2525 第7弾FB) ----- */
.form-group input.w80 { width: 80px; }
.form-group input.w100 { width: 100px; }
.form-group input.w150 { width: 150px; }
.form-group input.w200 { width: 200px; }
.form-group input.w300 { width: 300px; }

/* ----- cmn-box-header内の削除（×）ボタン: mobile_upgrade_pid.cssから汎用化。
   catvimr_contactの複数棟削除でCSS未読込により×が不可視・クリック不能だった（第9弾FB 林④） ----- */
.cmn-box-header {
  position: relative;
}
.cmn-box-header .close_btn {
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -10px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.cmn-box-header .close_btn::before,
.cmn-box-header .close_btn::after {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  background: #fff;
}
.cmn-box-header .close_btn::before {
  transform: rotate(-45deg);
}
.cmn-box-header .close_btn::after {
  transform: rotate(45deg);
}
.cmn-box-header .close_btn:hover {
  opacity: 0.8;
}

/* ----- 戻る型ボタンの長ラベル対応: main.cssの150px固定幅だと「入力内容クリア」等が
   2行に折り返すため、内容幅に追従させる（min-width:150pxは維持、第8弾FB 板矢07） ----- */
.button-group .btn-back {
  width: auto;
  white-space: nowrap;
  padding-left: 48px;
  padding-right: 24px;
}

/* ----- 解約フォームの諸費用・注意ブロック: 旧 .err th/td のピンク背景を li 構造で再現 (WSC-2525 第7弾FB 板矢02/03/05) ----- */
.form-list > li.err {
  background-color: #ffefef;
  padding: 16px 18px;
}

/* ----- 旧sim_entry_oc/common.css由来のアコーディオン(pid_caution2のJ:COMパーソナルID利用規約等)。
   CSS欠落で規約全文がベタ打ち表示になっていた (WSC-2525 第7弾FB 林さん③AQ126) ----- */
.accoBody {
  display: none;
}
.midashi_s {
  margin: 0 0 12px;
  padding: 2px 0 2px 10px;
  font-size: 129%;
  border-left: 5px solid #e63a1e;
}
.midashi_s.isAcc {
  cursor: pointer;
  background: url("/sim_contact/sim_entry_oc/img/icon/icon_open.png") 100% 50% no-repeat;
}
.midashi_s.isAcc.isActive {
  background: url("/sim_contact/sim_entry_oc/img/icon/icon_close.png") 100% 50% no-repeat;
}

/* ----- info-text li: 段落を縦積みに(flex子で横並びになるのを防止) (WSC-2525 第7弾FB 林さん③AQ89) ----- */
.form-list > li.info-text {
  display: block;
}

/* ----- select-hold: input.jsの汎用selectハンドラがprev('span')にラベルを上書きするのを防ぐ中立ラッパー (WSC-2525 第7弾FB 大井④W39) ----- */
.select-hold {
  display: inline-block;
}

/* ----- select-inline-row: 日にち/時刻など複数selectの横並び行 (WSC-2525 第7弾FB 大井①AB66) ----- */
.select-inline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.select-inline-row .select {
  width: auto;
}

/* ----- 確認画面 申込ボタンの押下後状態を統一 (WSC-2525 第7弾FB 大井⑦)
   main.cssのグローバル :disabled{background:#ccc !important} により
   button型confirm(2/3/4/5/6/9/17/27/33-37)だけ押下後グレーになりアンカー型(赤×半透明)と挙動が割れていた ----- */
.button-group .btn.btn-primary:disabled {
  background-color: #D9161B !important;
  border-color: #D9161B !important;
  cursor: default !important;
}

/* ----- 入力例(placeholder)のグレー化 (WSC-2525 第12弾FB No.4) -----
   main.cssの ::-webkit-input-placeholder{color:#333} で入力例が黒文字になり
   入力済みテキストと見分けがつかないため、全フォーム共通でグレーへ上書き */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999;
}
input::placeholder,
textarea::placeholder {
  color: #999;
  opacity: 1;
}