/*
 * 刷新済みの画面は style2.css を読まない。未着手の画面だけ、古い表・フォームのために残している。
 * このファイルは member.css のあと。未着手の画面では style2.css のあとにも読む。
 */

html, body {
  overflow: visible !important;
  min-width: 0 !important;
  height: auto;
  letter-spacing: normal;
}
body {
  font-family: var(--bs-body-font-family) !important;
  font-size: var(--fs-body) !important;
  color: var(--ink) !important;
  background: var(--soft) !important;
  line-height: 1.8 !important;
}
.m-footer-links a,
.m-footer-links a:link,
.m-footer-links a:visited { color: var(--primary); text-decoration: underline; }
.m-footer-links a:hover,
.m-footer-links a:active { color: var(--primary-hover); }
.m-footer-copy { color: #fff !important; }

/* ロゴはモックと同じ 160×30。幅が狭いときは「member's page」よりメニューボタンを優先して縮む。 */
.m-brand { min-width: 0; }
.m-header-inner { flex-wrap: nowrap !important; }
.m-header-actions,
.m-menu-btn { flex: none !important; }
a.btn.btn-outline-dark,
a.btn.btn-outline-dark:link,
a.btn.btn-outline-dark:visited {
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  text-decoration: none;
}
a.btn.btn-outline-dark:hover,
a.btn.btn-outline-dark:active {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
  text-decoration: none;
}

/* 現行 style2.css の a:link / a:visited（#663366・下線）が、メニューの白文字より詳細度が高い。
   モックと同じく、帯の中は白、開いた子メニューは本文色にする。 */
.m-gnav a.m-gnav-link,
.m-gnav a.m-gnav-link:link,
.m-gnav a.m-gnav-link:visited,
.m-gnav button.m-gnav-link {
  color: #fff;
  background: var(--primary);
  text-decoration: none;
}
.m-gnav a.m-gnav-link:hover,
.m-gnav a.m-gnav-link:active,
.m-gnav button.m-gnav-link:hover,
.m-gnav button.m-gnav-link:active,
.m-gnav button.m-gnav-link[aria-expanded="true"] {
  color: #fff;
  background: var(--primary-hover);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.m-gnav a.m-gnav-link.is-current,
.m-gnav button.m-gnav-link.is-current {
  color: #fff;
  background: var(--primary-active);
  text-decoration: none;
  box-shadow: inset 0 -6px 0 #fff;
}
.m-gnav a.dropdown-item,
.m-gnav a.dropdown-item:link,
.m-gnav a.dropdown-item:visited {
  color: var(--ink);
  background: var(--paper);
  text-decoration: none;
}
.m-gnav a.dropdown-item:hover,
.m-gnav a.dropdown-item:focus,
.m-gnav a.dropdown-item:active {
  color: var(--ink);
  background: var(--primary-bg);
  text-decoration: underline;
}
.m-gnav a.dropdown-item.is-current,
.m-gnav a.dropdown-item.is-current:link,
.m-gnav a.dropdown-item.is-current:visited {
  color: var(--ink);
  background: var(--primary-bg);
  text-decoration: none;
}
a.m-oc-link,
a.m-oc-link:link,
a.m-oc-link:visited,
a.m-oc-link:hover,
a.m-oc-link:active {
  color: var(--ink);
  text-decoration: none;
}
a.m-oc-link:hover,
a.m-oc-link:active {
  background: var(--primary-bg);
  border-color: var(--primary);
}
@media screen and (min-width: 768px) {
  body {
    min-width: 0 !important;
    overflow: visible !important;
  }
}

body.bg_container,
#page,
#main,
.bg_container #page,
.bg_container #main {
  background: var(--soft) !important;
  background-image: none !important;
}

#page,
#main {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#page > div,
#main > div {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}
.m-footer { margin-top: auto; }

.inner_wrap {
  max-width: var(--content-max);
  width: 100%;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
/* 親が縦 flex のとき、margin: 0 auto の .m-container は中身の幅まで縮む。幅を指定してから max-width で中央に置く。 */
.m-container { width: 100%; }
#page_login .wrapper,
#login_form.wrapper,
#page_entry .wrapper {
  max-width: 800px;
}

#page_header > br { display: none; }
#page_header {
  padding: 1.5rem 0 .75rem !important;
  margin: 0 0 1.5rem !important;
  border-bottom: 4px solid var(--accent) !important;
  background: transparent !important;
  text-align: left !important;
}
#page_header h1,
h1.type1,
#Main_form > h1,
#login_form > h1,
#page_login h1 {
  font-family: inherit !important;
  font-size: var(--fs-h1) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
#page_login h1,
#login_form > h1 { text-align: center; }

#page_header .page_desc {
  display: flex !important;
  align-items: center;
  margin: 1.5rem 0 1rem !important;
  padding: .6rem .9rem !important;
  background: var(--primary) !important;
  color: #fff !important;
  font-size: var(--fs-h2) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  border-radius: var(--r-btn) !important;
  border-bottom: 4px solid var(--accent) !important;
}
#page_header .page_desc a {
  color: #fff !important;
  text-decoration: none !important;
  background: transparent !important;
}

#login_form {
  background: var(--paper) !important;
  border: 2px solid var(--line-soft);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  padding: 1.75rem 1.5rem 2rem !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  text-align: left !important;
  width: 100% !important;
  max-width: none !important;
}
#login_form .fld-label,
#login_form .link-list,
#login_form .link-list a { text-align: left !important; }

#indexList {
  list-style: none !important;
  margin: 0 0 2rem;
  padding: 0 !important;
  display: grid;
  gap: .6rem;
  grid-template-columns: 1fr;
}
#indexList li { list-style: none !important; margin: 0; padding: 0; }
@media (min-width: 768px) {
  #indexList { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}
#indexList a {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 60px;
  padding: .4rem 1rem;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--r-btn);
  color: var(--ink) !important;
  font-weight: 700;
  text-decoration: none !important;
}
#indexList a::before {
  content: "↓";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
}

/* style2.css の a:link 下線が、日付まで含めて付く。下線はタイトルだけ。 */
.news-list a,
.news-list a:link,
.news-list a:visited {
  color: var(--ink);
  text-decoration: none;
}
.news-list a .news-title,
.news-list a:link .news-title,
.news-list a:visited .news-title {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* style2.css の a:link 下線が文全体に付く。「こちら」だけ下線。 */
.link-list a,
.link-list a:link,
.link-list a:visited {
  color: var(--ink);
  text-decoration: none;
}
.link-list a .link-here,
.link-list a:link .link-here,
.link-list a:visited .link-here {
  color: var(--primary);
  text-decoration: underline;
}
#indexList a:hover {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--ink) !important;
}

/* 登録情報の「ポジション」行を、モックと同じ白い枠の中に置く。「表示」は押せる高さにする。 */
#my_profile #tblMain {
  width: 100%;
  margin: 0 0 1.25rem;
  background: var(--paper);
  border: 2px solid var(--line-soft);
  border-radius: var(--r-card);
}
#my_profile #tblMain tr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  padding: .85rem 1.25rem;
}
#my_profile #tblMain td,
#my_profile #tblMain td.tdPosition,
#my_profile #tblMain tr td.tdBranch,
#my_profile #tblMain tr td.tdButton {
  display: flex !important;
  align-items: center;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
#my_profile #tblMain select {
  min-height: var(--tap);
  min-width: 6.5rem;
  padding: .4rem 2rem .4rem .8rem;
  border: 2px solid var(--line);
  border-radius: var(--r-field);
  font-size: max(16px, var(--fs-lg));
  font-weight: 700;
  background: var(--paper);
  color: var(--ink);
}
.filter-bar select,
.filter-bar .form-select {
  width: auto;
  min-width: 8rem;
  min-height: var(--tap);
}
.filter-bar input[type="button"] {
  width: auto !important;
  max-width: none;
}
#my_profile table.information thead th,
#my_profile table.historyTable thead th {
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 800;
}
#my_profile table.information td.fixed,
#my_profile table.information th.fixed,
#my_profile table.historyTable td.fixed,
#my_profile table.historyTable th.fixed {
  background: var(--primary-bg) !important;
  color: var(--ink) !important;
}
/* スマホ・タブレット: 列の多い表は 1 行 1 枚のカード。style2 の sticky と空の ::before を止める */
@media (max-width: 1199.98px) {
  #my_profile #list_table3 { white-space: normal !important; }
  #my_profile .table-wrap.is-stack table.list-table th,
  #my_profile .table-wrap.is-stack table.list-table td {
    position: static !important;
    white-space: normal;
    font-size: var(--fs-body);
  }
  #my_profile .table-wrap.is-stack table.list-table td::before {
    content: attr(data-label);
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    border: 0;
  }
  #my_profile .table-wrap.is-stack tr.acc-total-head,
  #my_profile .table-wrap.is-stack table.list-table td:not([data-label]) { display: none; }
}

table.contTable,
table.form_box {
  width: 100%;
  background: var(--paper);
  border: 2px solid var(--line-soft);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--r-card);
  overflow: hidden;
}
/* モックは角丸と枠線を .table-wrap 側に置く。表自体に付けると枠が二重になる */
.table-wrap > table.list-table.contTable {
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
}
table.contTable th,
table.form_box th {
  background: var(--primary-bg) !important;
  color: var(--ink) !important;
  font-weight: 800;
  text-align: left !important;
}
/* 項目名＋値の2列だけ。狭い幅で項目名が1文字に潰れ、選択欄が枠からはみ出すのを防ぐ */
@media (max-width: 767.98px) {
  body[data-page] table.contTable:not(.list-table):not(.item-table) tr:has(> th + td:last-child),
  body[data-page] table.form_box tr:has(> th + td:last-child) {
    display: block;
  }
  body[data-page] table.contTable:not(.list-table):not(.item-table) tr:has(> th + td:last-child) > th,
  body[data-page] table.contTable:not(.list-table):not(.item-table) tr:has(> th + td:last-child) > td,
  body[data-page] table.form_box tr:has(> th + td:last-child) > th,
  body[data-page] table.form_box tr:has(> th + td:last-child) > td {
    display: block;
    width: 100% !important;
    min-width: 0;
    white-space: normal;
  }
  body[data-page] table.contTable select,
  body[data-page] table.form_box select {
    width: 100%;
    max-width: 100%;
  }
}
table.contTable td,
table.form_box td {
  background: var(--paper) !important;
  color: var(--ink) !important;
}
/* 変更リクエスト: 見出し帯は青緑、項目名は左寄せの薄地。style2 の点線背景・800px・幅100pxを上書き */
#page_information #my_profileChange form {
  max-width: none;
}
#my_profileChange #txtPostal {
  width: auto;
  max-width: 11rem;
}
#my_profileChange .acc-req-table input[type="button"],
#my_profileChange .btn-row input[type="submit"] {
  width: auto;
  max-width: none;
}
table.list-table.acc-req-table thead th,
table.list-table.acc-req-table thead td.infoTh1 {
  background: var(--primary) !important;
  color: #fff !important;
  text-align: center !important;
  font-weight: 700;
  border-bottom: 4px solid var(--accent);
}
#page_information #Main_form #list_table3 table.acc-req-table tbody th {
  background: var(--primary-bg) !important;
  color: var(--ink) !important;
  text-align: left !important;
  font-weight: 800;
}
#my_profileChange table.list-table.acc-req-table tbody tr:nth-child(even) td {
  background: #f8f9fa !important;
}
/* style2 の #list_table3 th, td { display:table-cell } が、スマホのカード化より強い */
#list_table3 table.acc-req-table tbody td {
  text-align: left;
  border-color: var(--line-soft);
}
#list_table3 table.acc-req-table .inline-row select {
  width: auto;
}
@media (max-width: 767.98px) {
  #list_table3.table-wrap.is-stack { overflow: visible; background: none; border: 0; }
  #list_table3.is-stack table.list-table,
  #list_table3.is-stack table.list-table tbody,
  #list_table3.is-stack table.list-table tr,
  #list_table3.is-stack table.list-table th,
  #list_table3.is-stack table.list-table td {
    display: block;
    width: 100%;
    text-align: left;
  }
  #list_table3.is-stack table.list-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  #list_table3.is-stack table.list-table tbody tr {
    margin: 0 0 1rem; background: var(--paper);
    border: 2px solid var(--line-soft); border-radius: var(--r-card); overflow: hidden;
  }
  #list_table3.is-stack table.list-table tbody td {
    display: grid; grid-template-columns: minmax(6.5rem, 40%) 1fr; gap: .75rem;
    align-items: baseline; padding: .55rem 1rem; border: 0; border-top: 1px solid var(--line-soft);
  }
  #list_table3.is-stack table.acc-req-table tbody td.acc-req-empty { display: none; }
  #list_table3.is-stack table.acc-req-table tbody td.acc-req-input { display: block; }
  #list_table3.is-stack table.acc-req-table tbody td.acc-req-input::before { display: block; margin: 0 0 .4rem; }
  #list_table3.is-stack table.list-table tbody th {
    display: block; border: 0; border-bottom: 3px solid var(--accent);
    background: var(--primary-bg) !important; color: var(--ink) !important;
    text-align: left !important; font-weight: 800; padding: .7rem 1rem;
  }
  #list_table3.is-stack table.list-table tbody td::before {
    content: attr(data-label); font-weight: 700; color: var(--ink-2);
  }
  #list_table3.is-stack table.list-table tbody th::before { content: none; }
  #my_profileChange #list_table3.is-stack table.acc-req-table tbody td {
    background: var(--paper) !important;
  }
}
#Main_form a.btn.btn-primary,
#Main_form a.btn.btn-primary:link,
#Main_form a.btn.btn-primary:visited,
#Main_form a.btn.btn-primary:hover,
#Main_form a.btn.btn-primary:active,
#login_form a.btn.btn-primary,
#login_form a.btn.btn-primary:link,
#login_form a.btn.btn-primary:visited,
#login_form a.btn.btn-primary:hover,
#login_form a.btn.btn-primary:active {
  color: #fff !important;
  text-decoration: none;
  background-color: var(--primary);
  border-color: var(--primary);
}
a.btn.btn-primary:hover,
a.btn.btn-primary:active {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}
#Main_form a.btn.btn-secondary-m,
#Main_form a.btn.btn-secondary-m:link,
#Main_form a.btn.btn-secondary-m:visited,
#Main_form a.btn.btn-secondary-m:hover,
#Main_form a.btn.btn-secondary-m:active {
  color: var(--primary);
  text-decoration: none;
  background: var(--paper);
  border: 3px solid var(--primary);
}
.address-list { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: grid; gap: 1rem; font-family: inherit; }
.address-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 1rem 1.5rem; margin: 0; padding: 1.25rem; background: var(--paper);
  border: 2px solid var(--line-soft); border-radius: var(--r-card); box-shadow: none;
}
.address-card:hover { border-color: var(--line-soft); box-shadow: none; }
.address-card__body { flex: 1 1 18rem; min-width: 0; }
.address-card__name {
  margin: 0 0 .5rem; padding: 0 0 .25rem; font-size: var(--fs-h3); font-weight: 800;
  line-height: 1.4; color: var(--ink); white-space: normal;
  border-bottom: 3px solid var(--accent); display: block;
}
.address-card__details { font-size: var(--fs-lg); color: var(--ink); line-height: 1.6; }
.address-card__details p { margin: 0; font-size: var(--fs-lg); line-height: 1.6; color: var(--ink); }
.address-card__postal { font-weight: 700; color: var(--ink); margin-bottom: 0 !important; }
.address-card__tel { margin-top: 0 !important; font-size: var(--fs-lg); color: var(--ink); }
.address-card__actions { flex: 0 0 auto; width: auto; }
.address-card__actions .btn { min-width: 10rem; }
#Main_form a.btn.btn-edit,
#Main_form a.btn.btn-edit:link,
#Main_form a.btn.btn-edit:visited {
  font-size: var(--fs-lg);
  font-weight: 800;
}
@media (max-width: 575.98px) {
  .address-card { padding: 1rem .9rem; }
  .address-card__actions { flex: 1 1 100%; width: 100%; }
  .address-card__actions .btn { width: 100%; }
}
body[data-page="ShippingAddressEdit"] .modern-form {
  max-width: none;
  margin: 0 0 1.5rem;
  box-shadow: none;
  background: var(--paper);
  border: 2px solid var(--line-soft);
  border-radius: var(--r-card);
  font-family: inherit;
}
body[data-page="ShippingAddressEdit"] button.btn.btn-primary.btn-submit,
body[data-page="ShippingAddressEdit"] button.btn.btn-primary.btn-submit:hover {
  background-color: var(--primary);
  color: #fff;
  border: 3px solid var(--primary);
  border-radius: var(--r-btn);
  min-height: 72px;
  padding: .75rem 1.5rem;
  font-size: var(--fs-h3);
  font-weight: 800;
}
body[data-page="ShippingAddressEdit"] #Main_form a.btn.btn-secondary-m.btn-cancel {
  font-size: var(--fs-lg);
  font-weight: 800;
  padding: .5rem 1.25rem;
  min-height: var(--tap);
}
/* style2 の #Main_form（白地・下余白 50px）を、刷新済み画面ではモックの地色と余白にする */
body[data-page] #Main_form {
  margin-bottom: 3rem;
  background: transparent;
}
/* style2 撤去後も旧 class のリンクボタンを主ボタン相当に */
body[data-page] a.btn_type1.btn-primary,
body[data-page] a.btn.btn-primary:not(.btn-linkish) {
  color: #fff !important;
  text-decoration: none !important;
}
body[data-page] .table-wrap.is-stack .list-table tbody td[colspan] {
  text-align: center;
  font-weight: 700;
  padding: 1.5rem 1rem;
}
/* 古い .form-actions が残っていても、モックの .btn-row と同じ並びに戻す */
body[data-page="ShippingAddressEdit"] .btn-row.form-actions {
  align-items: stretch;
  gap: 1rem;
}
@media (min-width: 576px) {
  body[data-page="ShippingAddressEdit"] .btn-row.form-actions {
    flex-direction: row;
  }
}
body[data-page="ShippingAddressEdit"] button.btn.btn-primary.btn-submit:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="hidden"]):not([type="file"]),
select,
textarea {
  min-height: var(--tap);
  font-size: max(16px, var(--fs-lg));
  border: 2px solid var(--line);
  border-radius: var(--r-field);
  padding: .5rem .9rem;
  color: var(--ink);
  background: var(--paper);
}
input[type="submit"],
button.btn_link,
.btn_submit button,
.btn_submit input {
  min-height: var(--tap);
  width: auto;
  max-width: 24rem;
  padding: .5rem 1.5rem;
  background: var(--primary);
  color: #fff;
  border: 3px solid var(--primary);
  border-radius: var(--r-btn);
  font-size: var(--fs-lg);
  font-weight: 800;
  cursor: pointer;
}
input[type="submit"]:hover,
button.btn_link:hover,
.btn_submit button:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
}
input[type="button"] {
  min-height: var(--tap);
  width: auto;
  max-width: 24rem;
  padding: .5rem 1.5rem;
  background: var(--paper);
  color: var(--primary);
  border: 3px solid var(--primary);
  border-radius: var(--r-btn);
  font-size: var(--fs-lg);
  font-weight: 800;
  cursor: pointer;
}
input[type="button"]:hover {
  background: var(--primary-bg);
  color: var(--primary-hover);
  border-color: var(--primary-hover);
}
.btn_submit {
  display: flex;
  justify-content: center;
}

#Main_form a,
#login_form a,
.contBox a {
  color: var(--primary);
}
#Main_form a:hover,
#login_form a:hover,
.contBox a:hover {
  color: var(--primary-hover);
}

#posted_content,
#info_detail article {
  background: var(--paper);
  border: 2px solid var(--line-soft);
  border-radius: var(--r-card);
  padding: 1.5rem 1.5rem 1.75rem;
}
#content_header {
  margin: 0 0 1rem;
  padding: 0 0 .75rem;
  border-bottom: 3px solid var(--accent);
}
#content_header h1,
#content_header h2 {
  margin: 0 0 .5rem;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink);
}
.posted_date { color: var(--ink-2); font-weight: 700; }

/* オートシップ開始: style2 の幅 800px と灰色の表を、モックの全幅・見出し帯にする */
:is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #page_autoship form {
  max-width: none;
  margin: 0;
}
:is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #Main_form .link-list a,
:is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #Main_form .link-list a:link,
:is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #Main_form .link-list a:visited {
  color: var(--ink);
  text-decoration: none;
}
:is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #Main_form .link-list a .link-here,
:is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #Main_form .link-list a:link .link-here,
:is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #Main_form .link-list a:visited .link-here {
  color: var(--primary);
  text-decoration: underline;
}
:is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #page_autoship #Main_form #list_table3 table.as-status thead th {
  background: var(--primary) !important;
  color: #fff !important;
  font-size: var(--fs-body) !important;
  font-weight: 700 !important;
  text-align: center !important;
  border-bottom: 4px solid var(--accent);
}
:is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #page_autoship #Main_form #list_table3 table.as-status tbody th {
  background: var(--primary-bg) !important;
  color: var(--ink) !important;
  font-size: var(--fs-body) !important;
  font-weight: 800 !important;
  text-align: left !important;
}
:is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #page_autoship #Main_form #list_table3 table.as-status tbody td {
  font-size: var(--fs-body) !important;
  color: var(--ink) !important;
  text-align: center;
  background: var(--paper);
}
:is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #btnSend {
  width: 100%;
  max-width: 24rem;
}
:is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) .as-month .form-select {
  width: auto;
  min-width: 7.5rem;
  max-width: 100%;
}
@media (max-width: 767.98px) {
  :is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #list_table3.table-wrap.is-stack:not(:has(thead th:nth-child(7))) {
    overflow: visible;
    background: none;
    border: 0;
    min-width: 0;
  }
  :is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #list_table3 table.as-status:not(:has(thead th:nth-child(7))),
  :is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #list_table3 table.as-status:not(:has(thead th:nth-child(7))) tbody,
  :is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #list_table3 table.as-status:not(:has(thead th:nth-child(7))) tr {
    display: block;
    width: 100%;
  }
  :is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #list_table3 table.as-status:not(:has(thead th:nth-child(7))) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  :is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #list_table3 table.as-status:not(:has(thead th:nth-child(7))) tbody tr {
    margin: 0 0 1rem;
    background: var(--paper);
    border: 2px solid var(--line-soft);
    border-radius: var(--r-card);
    overflow: hidden;
  }
  :is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #list_table3 table.as-status:not(:has(thead th:nth-child(7))) tbody th {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    text-align: left !important;
    border: 0 !important;
    border-bottom: 3px solid var(--accent) !important;
    font-size: var(--fs-lg) !important;
  }
  :is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #list_table3 table.as-status:not(:has(thead th:nth-child(7))) tbody td {
    display: grid !important;
    grid-template-columns: minmax(6.5rem, 40%) 1fr;
    gap: .75rem;
    align-items: baseline;
    width: 100% !important;
    white-space: normal !important;
    text-align: left !important;
    padding: .55rem 1rem;
    border: 0;
    border-top: 1px solid var(--line-soft);
  }
  :is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #list_table3 table.as-status:not(:has(thead th:nth-child(7))) tbody td:nth-child(2)::before { content: var(--m1); font-weight: 700; color: var(--ink-2); }
  :is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #list_table3 table.as-status:not(:has(thead th:nth-child(7))) tbody td:nth-child(3)::before { content: var(--m2); font-weight: 700; color: var(--ink-2); }
  :is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #list_table3 table.as-status:not(:has(thead th:nth-child(7))) tbody td:nth-child(4)::before { content: var(--m3); font-weight: 700; color: var(--ink-2); }
  :is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #list_table3 table.as-status:not(:has(thead th:nth-child(7))) tbody td:nth-child(5)::before { content: var(--m4); font-weight: 700; color: var(--ink-2); }
  :is(body[data-page="AutoShipStart"], body[data-page="AutoShipChange"]) #list_table3 table.as-status:not(:has(thead th:nth-child(7))) tbody td:nth-child(6)::before { content: var(--m5); font-weight: 700; color: var(--ink-2); }
}

/* オートシップ変更: 継続中の支払方法・配送先の表 */
body[data-page="AutoShipChange"] #page_autoship #Main_form #list_table4 table.list-table thead th {
  background: var(--primary) !important;
  color: #fff !important;
  font-size: var(--fs-body) !important;
  font-weight: 700 !important;
  text-align: center !important;
  border-bottom: 4px solid var(--accent);
}
body[data-page="AutoShipChange"] #page_autoship #Main_form #list_table4 table.list-table tbody th {
  background: var(--primary-bg) !important;
  color: var(--ink) !important;
  font-size: var(--fs-body) !important;
  font-weight: 800 !important;
  text-align: left !important;
}
body[data-page="AutoShipChange"] #list_table4 table.list-table tbody td {
  font-size: var(--fs-body) !important;
  color: var(--ink) !important;
  white-space: normal !important;
  text-align: left !important;
  background: var(--paper);
}
@media (max-width: 767.98px) {
  body[data-page="AutoShipChange"] #list_table4.table-wrap.is-stack {
    overflow: visible;
    background: none;
    border: 0;
    min-width: 0;
  }
  body[data-page="AutoShipChange"] #list_table4 table.list-table,
  body[data-page="AutoShipChange"] #list_table4 table.list-table tbody,
  body[data-page="AutoShipChange"] #list_table4 table.list-table tr {
    display: block;
    width: 100%;
  }
  body[data-page="AutoShipChange"] #list_table4 table.list-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  body[data-page="AutoShipChange"] #list_table4 table.list-table tbody tr {
    margin: 0 0 1rem;
    background: var(--paper);
    border: 2px solid var(--line-soft);
    border-radius: var(--r-card);
    overflow: hidden;
  }
  body[data-page="AutoShipChange"] #list_table4 table.list-table tbody th {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    text-align: left !important;
    border: 0 !important;
    border-bottom: 3px solid var(--accent) !important;
    font-size: var(--fs-lg) !important;
  }
  body[data-page="AutoShipChange"] #list_table4 table.list-table tbody td {
    display: grid !important;
    grid-template-columns: minmax(6.5rem, 40%) 1fr;
    gap: .75rem;
    align-items: baseline;
    width: 100% !important;
    white-space: normal !important;
    text-align: left !important;
    padding: .55rem 1rem;
    border: 0;
    border-top: 1px solid var(--line-soft);
  }
  body[data-page="AutoShipChange"] #list_table4 table.list-table tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--ink-2);
  }
}

/* 新規会員登録（概要書面・コース・入力・確認）。#login_form の width:100% / max-width:none はログインカード用なので、登録ウィザードだけ中央に戻す。 */
body#entry3 #login_form.wrapper {
  width: min(100%, 800px) !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body#entry3 #page_entry .btn_submit button,
body#entry3 #page_entry .btn_submit input {
  min-height: 72px;
  min-width: 12rem;
  padding: .75rem 1.5rem;
  font-size: var(--fs-h3);
}
body#entry3 .dl-table dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 新規登録チェックシート（CheckList / CheckListConfirm）。旧マークアップの表を新デザインに寄せる。
   はい／いいえは label で囲み、押せる範囲を --tap 以上にする。スマホは項目名の下に回答を置く。 */
body#entry_check table.chk-table th,
body#entry_check table.chk-table td {
  padding: .9rem 1rem;
  vertical-align: top;
  line-height: 1.7;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-body);
}
body#entry_check table.chk-table tr:last-child > th,
body#entry_check table.chk-table tr:last-child > td { border-bottom: 0; }
body#entry_check table.chk-table th { width: 62%; font-size: var(--fs-lg); }
body#entry_check table.chk-table th[colspan] { width: auto; background: var(--warn-bg) !important; color: var(--warn-ink) !important; }
body#entry_check .chk-req { color: var(--danger); font-weight: 800; }
body#entry_check .pc_nowrap { white-space: normal; }
body#entry_check .smp_width_max { display: block; font-weight: 500; }
body#entry_check .chk-opt {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: var(--tap);
  margin: 0 1.5rem 0 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  cursor: pointer;
}
body#entry_check .chk-opt input.form-check-input {
  float: none;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0 !important;
  border: 2px solid var(--line);
  cursor: pointer;
}
body#entry_check .chk-opt input.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
body#entry_check table.chk-table select { width: 100%; max-width: 24rem; min-height: var(--tap); font-size: var(--fs-lg); }
body#entry_check .btn_submit { flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0 .5rem; }
body#entry_check .btn_submit button { min-width: 10rem; }
body#entry_check .btn_submit button.btn_back { background: var(--paper); color: var(--primary); }
body#entry_check .btn_submit button.btn_back:hover { background: var(--primary-bg); color: var(--primary-hover); }
body#entry_check .btn_back a { display: block !important; margin: -.5rem -1.5rem; padding: .5rem 1.5rem; color: inherit !important; text-decoration: none; }
@media (max-width: 767.98px) {
  body#entry_check table.chk-table tr,
  body#entry_check table.chk-table th,
  body#entry_check table.chk-table td { display: block; width: 100% !important; }
  body#entry_check table.chk-table th { border-bottom: 0; padding-bottom: .4rem; }
  body#entry_check table.chk-table td { padding-top: 0; }
  body#entry_check .btn_submit button { width: 100%; max-width: none; }
}

/* 完了・結果画面のメッセージ。VB が出す <font color='blue'|'red'> は旧デザインの青・赤そのままなので、
   新デザインの色（成功＝緑、失敗＝赤）と太さに寄せる。色だけに頼らないよう太字にする。 */
font[color="blue"] { color: var(--ok) !important; font-weight: 800; }
.m-card font[color="red"],
#thanks_mess font[color="red"],
.contBox font[color="red"] { color: var(--danger) !important; font-weight: 800; }
.m-card #thanks_mess .page_desc {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}
.m-card #thanks_mess + hr { margin: 1.25rem 0; }
/* メッセージ末尾の <br><br>（旧デザインの余白）でカードの下に空きができないようにする */
.m-card > br:last-child,
.m-card > br:nth-last-child(2):not(:first-child) { display: none; }