/* SP 画面用スタイル（mock: temp/mock/sp_mock.html から移植）
   project の style.css には未配置なクラスを集約。 */

:root {
  --sp-primary:       #004B9E;
  --sp-primary-mid:   #1a6abf;
  --sp-primary-light: #e8eef7;
}

/* style.css:888 は `*, *::before, *::after { box-sizing: inherit }` で
   html の border-box を全要素に継承させる方式だが、CDN から読み込む
   jquery-ui.css / select2.min.css が途中で継承を断ち切り、その配下が
   content-box に落ちる。そうなると width:100% に padding と border が
   上乗せされ、入力欄が親からはみ出す。SP 配下は直接指定して防ぐ。 */
.sp-page,
.sp-page *,
.sp-page *::before,
.sp-page *::after,
.sp-flow-page,
.sp-flow-page *,
.sp-flow-page *::before,
.sp-flow-page *::after {
  box-sizing: border-box;
}

/* ===== フォーム（c-form） =====
   1項目 = 1ブロック。ラベル（上）→ 入力 → 補足文／エラー（下）の縦積み。
   区切りは罫線ではなく余白でとる。テーブルを使わないので、スマホで
   縦積みにするための細工が要らず、ラベルが「全幅の帯」に見えることもない。 */
.c-form__group {
  background: #fff;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  padding: 18px 16px;
}
.c-form__legend {
  font-size: 1.3rem;
  font-weight: 700;
  color: #24365e;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.c-form__field + .c-form__field {
  margin-top: 26px;
}
/* 表示専用（入力欄が無く .c-form__static だけ）の項目は、ラベルと値を
   同じ行に置いて高さを半分にする。施設コード・申込No のような確認用の値が
   入力項目と同じ縦幅を取ると、本当に編集すべき項目が下に押し出される。
   :has 非対応ブラウザでは従来どおり縦積みになるだけで崩れない。 */
.c-form__field--inline {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.c-form__field--inline > .c-form__labelRow {
  flex: 0 0 auto;
  margin-bottom: 0;
}
.c-form__field--inline > .c-form__control {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}
.c-form__field--inline .c-form__static {
  padding: 0;
  font-weight: 700;
}
.c-form__field.is-marked {
  background: #fff5f5;
  border-left: 3px solid #c0392b;
  margin-left: -16px;
  margin-right: -16px;
  padding: 12px 16px 12px 13px;
}

.c-form__labelRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.c-form__label {
  font-size: 1.3rem;
  font-weight: 700;
  color: #24365e;
  margin-right: 0;
}
/* 必須が大半の画面なので、目立たせるのは「任意」側にする */
.c-form__badge {
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 3px;
  padding: 2px 6px;
  line-height: 1.4;
}
/* この画面は大半が必須なので、赤ベタが並ぶと「どれも同じ警告」に見えて
   情報量がゼロになる。必須は輪郭だけの控えめな表示にとどめる。 */
.c-form__badge--required {
  background: none;
  color: #b04a3e;
  border: 1px solid #e3b9b3;
  padding: 1px 5px;
}
.c-form__badge--optional {
  background: #f0f0f0;
  color: #666;
}
.c-form__badge--fix {
  background: #c0392b;
  color: #fff;
}

/* 入力欄。font-size は 16px 未満だと iOS Safari がフォーカス時に
   自動ズームするため、16px を下回らせない。 */
.c-form__input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: #fff;
  border: 1px solid #b9c4d6;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.5;
  color: #1a1a2e;
  min-height: 44px;
}
.c-form__input:focus {
  border-color: var(--sp-primary, #004B9E);
  box-shadow: 0 0 0 3px rgba(0, 75, 158, 0.12);
  outline: none;
}
.c-form__input::placeholder {
  color: #aab2c0;
}
.c-form__textarea {
  min-height: 140px;
  resize: vertical;
}
/* 入力ではなく表示専用の値 */
.c-form__static {
  font-size: 1.4rem;
  color: #1a1a2e;
  padding: 4px 0;
  word-break: break-all;
}

.c-form__help {
  font-size: 1.15rem;
  color: #8a96ad;
  margin-top: 6px;
  line-height: 1.6;
}
/* エラーは補足文と同じ位置に出す（視線を動かさない）。
   サイズ・色は旧フォームの .e-txt--error（style.css）に合わせる。
   同じ画面に両方が出るので、片方だけ強いと指摘の重さが違って見える。 */
.c-form__error {
  font-size: 1.3rem;
  color: #C00;
  font-weight: 700;
  margin-top: 6px;
}

/* ラジオ・チェックの並び */
.c-form__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

/* 日付レンジ。開始日・終了日・「期間指定なし」は1つの項目なので、
   内側に余白を取ってひとまとまりに見せる。地色は付けない（色を足すと
   項目ごとに面が並んで画面がうるさくなる）が、余白は維持すること。
   padding を外すと入力欄が横いっぱいに広がってまとまりが消える。 */
.c-form__dateRange {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.c-form__dateRow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.c-form__subLabel {
  flex: 0 0 auto;
  font-size: 1.2rem;
  color: #4a5a7a;
  min-width: 4em;
  margin-right: 0;
}
.c-form__dateRow .c-form__input {
  flex: 1 1 auto;
}
/* 時刻は固定値の「表示」であって入力欄ではない。入力欄と同じ高さの箱に
   すると打てるように見えるので、面を持たせず小さい文字で添える。 */
.c-form__timeChip {
  flex: 0 0 auto;
  background: none;
  border-radius: 0;
  padding: 0;
  font-size: 1.15rem;
  color: #8a96ad;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.c-form__noLimit {
  margin-left: 0 !important;
  padding-left: calc(4em + 8px);
}

/* URL + 表示名 のような入れ子項目 */
.c-form__subField + .c-form__subField {
  margin-top: 12px;
}
.c-form__subField .c-form__subLabel {
  display: block;
  margin-bottom: 4px;
}
.c-form__subField .c-form__input + .c-form__subLabel {
  margin-top: 8px;
}

@media only screen and (min-width: 768.1px) {
  /* PC は従来の表組み（c-table--responsive + th/td）の見た目を再現する。
     HTML は div になったが、出力される DOM は1つなので、
     「スマホは縦積み・PC は表組み」の切り替えは CSS 側で行う。
     旧実装の値: table は border 1px #ccc / 背景白、
     th は #f2f5fb・文字 #2c3e6b・幅 300px、th/td は border 1px #dde3ec・padding 10px。 */
  .c-form__group {
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 0;
    background: #fff;
  }
  .c-form__legend {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ec;
    margin-bottom: 0;
  }
  .c-form__field {
    display: grid;
    grid-template-columns: 300px 1fr;
    align-items: stretch;
    border-bottom: 1px solid #dde3ec;
  }
  .c-form__field:last-child {
    border-bottom: none;
  }
  .c-form__field + .c-form__field {
    margin-top: 0;
  }
  /* ラベル列＝旧 th。グレー地・中央寄せ・右に区切り線。 */
  .c-form__labelRow {
    grid-row: 1 / span 3;
    grid-column: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #f2f5fb;
    color: #2c3e6b;
    border-right: 1px solid #dde3ec;
    padding: 10px;
    margin-bottom: 0;
  }
  .c-form__label {
    font-size: 1.4rem;
  }
  /* 値の列＝旧 td。
     エラーは入力欄の「上」（1行目）に出す。下に出すと、項目が縦に長い画面では
     どの入力欄に対する指摘か辿りにくい。エラーが無いときは1行目が空になるが、
     中身が無い行は高さを持たないのでレイアウトは変わらない。
     ラベル列は grid-row: 1 / span 3 で3行分を占めているので、行数は据え置き。 */
  .c-form__control {
    grid-column: 2;
    grid-row: 2;
    padding: 10px;
  }
  .c-form__error {
    grid-column: 2;
    grid-row: 1;
    padding: 10px 10px 0;
    margin-top: 0;
  }
  .c-form__help {
    grid-column: 2;
    grid-row: 3;
    padding: 0 10px 10px;
    margin-top: 0;
  }
  .c-form__static {
    padding: 0;
  }
  /* 要修正マークは旧実装と同じく行全体をピンクにする */
  .c-form__field.is-marked {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    background: #fff0f0;
    border-left: none;
  }
  .c-form__field.is-marked .c-form__labelRow {
    background: #ffe9e9;
  }
  /* 入力欄も旧 .e-textbox input の見た目に戻す
     （16px / 44px はスマホでの iOS 自動ズーム対策なので PC では不要）。 */
  .c-form__input {
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1.3rem;
    min-height: 40px;
    padding: 10px;
  }
  .c-form__input:focus {
    border-color: var(--color-primary, #2567AB);
    box-shadow: none;
  }
  .c-form__textarea {
    min-height: 150px;
  }
  /* スマホで付けた余白はスマホ限定の処置なので PC では解除し、
     旧テーブルどおり td の中に横一列で置く。 */
  .c-form__dateRange {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 0;
  }
  .c-form__noLimit {
    padding-left: 0;
  }
  .c-form__timeChip {
    background: #eef2f8;
    border-radius: 4px;
    padding: 5px 8px;
    color: #5b6b8c;
  }
  .c-form__badge--required {
    background: #fdecea;
    border: none;
    padding: 2px 6px;
  }
  /* 表示専用項目の1行化もスマホ限定（PC は th/td グリッドのまま） */
  .c-form__field--inline {
    display: grid;
  }
  .c-form__field--inline > .c-form__control {
    text-align: left;
  }
  .c-form__field--inline .c-form__static {
    font-weight: 400;
  }
  .c-form__dateRow .c-form__input {
    max-width: 200px;
  }
  .c-form__subField {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .c-form__subField .c-form__subLabel {
    display: inline-block;
    margin-bottom: 0;
  }
  .c-form__subField .c-form__input {
    max-width: 300px;
  }
  .c-form__subField .c-form__input + .c-form__subLabel {
    margin-top: 0;
  }
}

/* ===== ボタン ===== */
.e-btn--secondary {
  background: #004B9E;
  border: 1px solid #004B9E;
  color: #ffffff !important;
  border-radius: 4px;
  font-size: 1.35rem;
  padding: 6px 14px;
  height: auto;
  min-width: 0;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
}
.e-btn--secondary:hover {
  background: #1a6abf;
  border-color: #1a6abf;
  text-decoration: none;
}

/* サービスカード（施設一覧）の SP 専用表現は、PC 表示を staging と一致させるため
   ファイル末尾の「サービスカード: SP 専用の見せ方」ブロック（メディアクエリ内）に集約している。
   ここには PC にも当たるルールを置かないこと。 */

/* SP でだけ出す代替表現は、既定（PC 幅）では隠しておく。 */
.sp-product-card__meta--sp,
.sp-benefit-empty {
  display: none;
}

@media only screen and (max-width: 768px) {
  /* 入力フォーム（1行 = th:項目名 + td:入力）をスマホで縦積みにしたとき、
     th が中央寄せの全幅バーになり「項目名」ではなく「セクション見出し」に見える。
     左寄せ・軽い地色にして、ラベルとして読めるようにする。

     :not(.c-table--stack) で一覧のカード表示を除外する。除外しないと、
     sp.css は style.css より後に読まれ詳細度も高いため、カード側の
     border: none !important を上書きして罫線が出てしまう。 */
  .sp-page .c-table--responsive:not(.c-table--stack) table th {
    text-align: left !important;
    background: #eaeff7;
    color: #24365e;
    font-weight: 700;
    font-size: 1.25rem;
    padding: 8px 12px;
    width: auto !important;
    min-width: 0 !important;
    border-bottom: 1px solid #cfd8e6 !important;
  }
  /* 入力欄の背後は淡いグレーにして、白い入力欄を浮かせる。
     td も白のままだと入力欄の輪郭が背景と同化して見分けがつかない。 */
  .sp-page .c-table--responsive:not(.c-table--stack) table td {
    padding: 12px;
    background: #fbfcfe;
  }
  /* 入力欄は全幅・タップしやすい高さに。
     枠線をはっきりさせないと白背景に同化して、どこが入力欄か分からない。 */
  .sp-page .c-table--responsive:not(.c-table--stack) td input[type="text"],
  .sp-page .c-table--responsive:not(.c-table--stack) td input[type="number"],
  .sp-page .c-table--responsive:not(.c-table--stack) td input[type="email"],
  .sp-page .c-table--responsive:not(.c-table--stack) td input[type="tel"],
  .sp-page .c-table--responsive:not(.c-table--stack) td input[type="password"],
  .sp-page .c-table--responsive:not(.c-table--stack) td select,
  .sp-page .c-table--responsive:not(.c-table--stack) td textarea,
  .sp-page .c-table--responsive:not(.c-table--stack) td .e-textbox {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .sp-page .c-table--responsive:not(.c-table--stack) td input[type="text"],
  .sp-page .c-table--responsive:not(.c-table--stack) td input[type="number"],
  .sp-page .c-table--responsive:not(.c-table--stack) td input[type="email"],
  .sp-page .c-table--responsive:not(.c-table--stack) td input[type="tel"],
  .sp-page .c-table--responsive:not(.c-table--stack) td input[type="password"],
  .sp-page .c-table--responsive:not(.c-table--stack) td select,
  .sp-page .c-table--responsive:not(.c-table--stack) td textarea,
  .sp-page .published-date input {
    background: #fff;
    border: 1px solid #b9c4d6 !important;
    border-radius: 4px;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 1.35rem;
    color: #1a1a2e;
  }
  .sp-page .c-table--responsive:not(.c-table--stack) td input:focus,
  .sp-page .c-table--responsive:not(.c-table--stack) td select:focus,
  .sp-page .c-table--responsive:not(.c-table--stack) td textarea:focus,
  .sp-page .published-date input:focus {
    border-color: var(--sp-primary, #004B9E) !important;
    box-shadow: 0 0 0 3px rgba(0, 75, 158, 0.12);
    outline: none;
  }
  .sp-page .c-table--responsive:not(.c-table--stack) td input::placeholder,
  .sp-page .c-table--responsive:not(.c-table--stack) td textarea::placeholder {
    color: #aab2c0;
  }
  /* 固定時刻は入力値ではないことが分かるようにバッジ状にする */
  .sp-page .published-date .row > span[id$="TimeLabel"],
  .sp-page .published-date .row span[id$="ToField"] > span[id$="TimeLabel"] {
    background: #eef2f8;
    border-radius: 4px;
    padding: 4px 8px;
    color: #5b6b8c !important;
  }
  /* 日付レンジ行。ラベル・入力・固定時刻が1行に収まらず潰れるため折り返す。 */
  .sp-page .published-date .row {
    flex-wrap: wrap;
    gap: 6px 8px;
  }
  .sp-page .published-date .ttl {
    width: 3.5em;
  }
  .sp-page .published-date input {
    flex: 1 1 6em;
    min-width: 0;
    width: auto;
  }
  /* 固定時刻（10:00:00 / 23:59:59）は入力欄と同じ行に置く */
  .sp-page .published-date .row > span[id$="TimeLabel"] {
    flex: 0 0 auto;
    white-space: nowrap;
    margin-left: 0 !important;
  }
  .sp-page .published-date .e-checkbox {
    margin-left: 0 !important;
    flex: 1 0 100%;
  }
  /* 終了日は「ラベル + 入力 + 時刻」が span でまとまっているため、
     その span 自体を行として扱う */
  .sp-page .published-date .row > span[id$="ToField"] {
    display: flex;
    align-items: center;
    gap: 6px 8px;
    flex: 1 1 100%;
    min-width: 0;
  }
  /* 補足文（※…）は本文と区別がつくよう一段落とす */
  .sp-page .c-table--responsive:not(.c-table--stack) td .f12 {
    color: #8a96ad;
  }
  /* 1項目 = th + td の塊が分かるよう、td の下で区切る */
  .sp-page .c-table--responsive:not(.c-table--stack) table td {
    border-bottom: 3px solid #e3e9f2 !important;
  }
  .sp-page .c-table--responsive:not(.c-table--stack) table tr:last-child td {
    border-bottom: none !important;
  }

  /* 施設ヘッダー: 見出しとボタンを同じ行に置くと見出しが折り返すため縦積みに。
     ボタンは2つ横並びで等幅にする。 */
  .sp-facility-head {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .sp-facility-head__actions {
    width: 100%;
  }
  .sp-facility-head__actions > a {
    flex: 1 1 0;
    min-width: 0 !important;
    font-size: 1.25rem;
  }
}

/* ステータスバッジは SP 幅でのみ淡い地色＋濃い文字に統一する
   （ベタ塗りだと一覧で色が主張しすぎ、申請履歴側と見た目も揃わない）。
   PC 幅は staging と同じベタ塗りのままにするため、必ずこのメディアクエリ内に置くこと。 */
@media only screen and (max-width: 768px) {
  .sp-page .e-status--public {
    background-color: #e8f0fb;
    color: #2567AB;
  }
  .sp-page .e-status--check {
    background-color: #fff3e0;
    color: #b06000;
  }
  .sp-page .e-status--unsupported {
    background-color: #fdecea;
    color: #c0392b;
  }
  .sp-page .e-status--draft {
    background-color: #f0f0f0;
    color: #666;
  }
}

.e-btn--facility {
  background: #ffffff;
  border: 1px solid #c5cdd9;
  color: #5a6477;
  border-radius: 4px;
  font-size: 1.3rem;
  padding: 6px 14px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}
.e-btn--facility:hover {
  background: #f0f3f7;
  text-decoration: none;
}

/* 下書き保存ボタン */
.sp-btn--draft-save {
  background: #6c7a8d;
  border: 1px solid #6c7a8d;
  color: #fff;
}

/* ===== 特典アコーディオン ===== */
.sp-benefit-toggle {
  background: none;
  border: 1px solid var(--sp-primary);
  color: var(--sp-primary);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 1.3rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.sp-benefit-toggle:hover {
  background: var(--sp-primary);
  color: #fff;
}
.sp-benefit-toggle__arrow {
  font-size: 0.85em;
  display: inline-block;
}
.sp-benefit-toggle[aria-expanded="true"] .sp-benefit-toggle__arrow {
  transform: rotate(180deg);
}

.sp-benefit-accordion {
  margin-top: 10px;
  border-top: 1px solid #e0e5ef;
  padding-top: 10px;
}

.sp-benefit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 5px;
  background: #f7f9fc;
  margin-bottom: 6px;
}
.sp-benefit-row--disabled { opacity: 0.6; }
.sp-benefit-row__info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.sp-benefit-row__name { font-weight: bold; }
.sp-benefit-row__period { font-size: 1.2rem; color: #666; }
.sp-benefit-row__status { flex-shrink: 0; }
.sp-benefit-row__btns {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.sp-benefit-add-row {
  padding: 6px 10px;
  font-size: 1.3rem;
}
.sp-benefit-add-row--section {
  border-top: 1px dashed #e0e5ef;
  margin-top: 6px;
  padding-top: 10px;
}
.sp-benefit-add-row--disabled span {
  color: #bbb;
  cursor: not-allowed;
}

/* ===== 商品カード ===== */
.sp-product-card {
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fafafa;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.sp-product-card__title {
  font-weight: bold;
  font-size: 1.4rem;
  color: #2c3e6b;
}
.sp-product-card__meta {
  font-size: 1.2rem;
  color: #666;
  margin-top: 4px;
}
.sp-product-card__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

/* ===== ステータスバッジ ===== */
.e-status {
  display: inline-block;
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 1.1rem;
  color: #fff;
}
.e-status--check       { background-color: #f90; color: #333; }  /* 申請中 */
.e-status--public      { background-color: #2a9a4a; }           /* 承認済み */
.e-status--unsupported { background-color: #c00; }              /* 差し戻し / 却下 */

/* ============================================================
   ダッシュボード：登録フロー案内バナー（mock .sp-first-banner 準拠）
   ============================================================ */
.sp-first-banner {
  background: #004B9E;
  border-radius: 10px;
  padding: 28px 32px;
  margin-bottom: 24px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.sp-first-banner__body { flex: 1 1 auto; }
.sp-first-banner__lead {
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  opacity: 0.85;
  margin-bottom: 6px;
}
.sp-first-banner__ttl {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.sp-first-banner__desc {
  font-size: 1.4rem;
  opacity: 0.9;
  line-height: 1.7;
}
.sp-first-banner__action { flex-shrink: 0; }
.sp-first-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #004B9E !important;
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.2;
  padding: 16px 32px;
  min-width: 240px;
  border-radius: 6px;
  border: 2px solid #fff;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.sp-first-banner__btn:hover { background: #eef3fb; }

/* 状態バリアント（審査中 / 完了 / 差し戻し） */
.sp-first-banner--review    { background: #e07b00; }
.sp-first-banner--completed { background: #2a7a45; }
.sp-first-banner--dismissed { background: #c0392b; }

@media screen and (max-width: 768px) {
  .sp-first-banner { flex-direction: column; align-items: stretch; padding: 20px; }
  .sp-first-banner__btn { width: 100%; min-width: 0; }
}


/* ============================================================
   サービスカード（施設一覧）: SP 専用の見せ方
   PC（769px 以上）は staging と同一。ここでの上書きは SP 幅だけに閉じること。
   ファイル後方の .sp-product-card__title 等に勝つ必要があるため、末尾に置いている。
   ============================================================ */
@media only screen and (max-width: 768px) {
  /* 期間表示・特典未登録は PC 版を隠し、SP 版に差し替える */
  .sp-product-card__meta--pc,
  .sp-benefit-empty--pc {
    display: none !important;
  }
  .sp-product-card__meta--sp {
    display: block;
  }

  /* 見出し階層: 申込Noを上に小さく逃がし、サービス名を主役にする */
  .sp-product-card__no {
    display: block;
    font-size: 1.15rem;
    font-weight: normal;
    color: #8a96ad;
    letter-spacing: 0.02em;
  }
  .sp-product-card__titleSep {
    display: none;
  }
  .sp-product-card__name {
    display: block;
    font-weight: 700;
    font-size: 1.55rem;
    color: #1a1a2e;
    line-height: 1.4;
    margin-top: 2px;
  }

  .sp-product-card__meta {
    font-size: 1.2rem;
    color: #666;
    margin-top: 6px;
  }
  .sp-product-card__unset {
    color: #aab2c0;
  }
  .sp-product-card__meta-label {
    display: inline-block;
    min-width: 2.6em;
    color: #8a96ad;
  }

  /* 特典未登録は警告ではなく案内。枠で囲わず、案内文＋全幅のボタンにする。
     テキストリンクのままだと次の一手が分かりづらく、タップ領域も足りない。 */
  .sp-benefit-empty {
    display: block;
    font-size: 1.3rem;
    color: #666;
    margin-top: 12px;
  }
  .sp-benefit-empty a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 44px;
    margin: 8px 0 0;
    padding: 0 12px;
    border: 1px solid var(--sp-primary, #004B9E);
    border-radius: 6px;
    background: #fff;
    color: var(--sp-primary, #004B9E);
    font-size: 1.35rem;
    font-weight: 700;
    text-decoration: none;
  }
  .sp-benefit-empty a:hover,
  .sp-benefit-empty a:active {
    background: #eef3fb;
    color: var(--sp-primary, #004B9E);
  }

  /* ボタンの括弧書きは幅を食うので落とす（PC では出したまま） */
  .sp-product-card__btnNote {
    display: none;
  }

  /* 主アクション（編集）だけ塗り、プレビューは枠線にして強弱をつける */
  .sp-product-card__preview {
    background: #fff;
    color: var(--sp-primary, #004B9E) !important;
    border: 1px solid var(--sp-primary, #004B9E);
  }
  .sp-product-card__preview:hover {
    background: #eef3fb;
    color: var(--sp-primary, #004B9E) !important;
    border-color: var(--sp-primary, #004B9E);
  }

  /* 通常状態のカードは白地・淡い枠。ロック中（黄）・差し戻し（赤）は状態色なので触らない。
     地色は Blade のインラインスタイルで入るため !important が要る。 */
  .sp-product-card[data-card-state="normal"] {
    background: #fff !important;
    border-color: #e0e5ef !important;
  }
}


/* ============================================================
   旧テーブルのままのフォーム（c-form へ未移行のもの）
   JS がテーブル構造に依存していて移行できない画面を、スマホでだけ
   c-form 側（「サービス情報」）の見た目に寄せる共通クラス。
   th の青い帯は「セクション見出し」の記号なので、項目ラベルには使わない。
   対象: 商品フォームの利用手順 / 施設フォーム（登録フロー・編集）
   .sp-form-table を足して、上の :not(.c-table--stack) 系より
   詳細度を1つ上げている（同じ土俵だと打ち消せない）。
   ============================================================ */
@media only screen and (max-width: 768px) {
  /* 手順ごとの枠は c-form__group と同じ白いカードにする */
  .sp-page .c-table--responsive.sp-form-table table {
    background: #fff;
    border: 1px solid #dde3ec !important;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
  }
  /* ラベル列: 帯をやめて c-form__label と同じ見え方に */
  .sp-page .c-table--responsive.sp-form-table table th {
    background: none !important;
    color: #24365e !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    text-align: left !important;
    border: none !important;
    padding: 16px 16px 6px !important;
  }
  /* 値の列: 地色を持たせず、ラベルの直下に置く */
  .sp-page .c-table--responsive.sp-form-table table td {
    background: none !important;
    border: none !important;
    padding: 0 16px 16px !important;
  }
  /* 区切りは罫線ではなく余白でとる（c-form と同じ考え方）。
     ただし手順内の項目が続くことは分かるよう、最後の行以外は間隔だけ空ける。 */
  .sp-page .c-table--responsive.sp-form-table table tr:not(:last-child) td {
    padding-bottom: 20px !important;
  }
  /* 幅ユーティリティ（.w-400 等）は min-width まで !important で固定するため、
     スマホ幅を超えてフォーム全体が横スクロールする。ここでは全幅に倒す。 */
  .sp-page .c-table--responsive.sp-form-table .w-100,
  .sp-page .c-table--responsive.sp-form-table .w-150,
  .sp-page .c-table--responsive.sp-form-table .w-170,
  .sp-page .c-table--responsive.sp-form-table .w-200,
  .sp-page .c-table--responsive.sp-form-table .w-300,
  .sp-page .c-table--responsive.sp-form-table .w-400,
  .sp-page .c-table--responsive.sp-form-table .w-450,
  .sp-page .c-table--responsive.sp-form-table .w-500 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* 横並び（日付レンジなど）は幅が足りなければ折り返す。
     nowrap のままだと上の全幅指定と噛み合って、やはり横に溢れる。
     .flex-column は除外すること。縦方向の flex に wrap を足すと
     「入りきらないぶんを横の別カラムに送る」挙動になり、選択肢が
     数文字ごとに改行される細いカラムに割れる（店舗表示方法で発生）。 */
  .sp-page .c-table--responsive.sp-form-table .d-flex:not(.flex-column) {
    flex-wrap: wrap;
  }
  /* 画像アップロード欄など、中身が固定幅を持つ箱の保険 */
  .sp-page .c-table--responsive.sp-form-table table td > * {
    max-width: 100%;
  }
  /* 電話番号・郵便番号・緯度経度は「小さい入力欄＋区切り文字」を入れ子の flex で
     組んでいる（外 .d-flex > 内 .d-flex > .e-textbox.w-100）。
     内側は幅指定が無く shrink-to-fit なので、上の全幅化（.w-100 → width:100%）が
     当たると幅が決まらず、欄がずれたりハイフンだけ改行されたりする。
     内側の箱に flex の取り分を持たせて、等分に詰める。 */
  .sp-page .c-table--responsive.sp-form-table .d-flex > .d-flex.align-items-center {
    flex: 1 1 0;
    min-width: 0;
    gap: 4px;
  }
  .sp-page .c-table--responsive.sp-form-table .d-flex > .d-flex.align-items-center > .e-textbox {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0 !important;
  }
  /* 区切りの「-」「緯度」「経度」は縮ませない */
  .sp-page .c-table--responsive.sp-form-table .d-flex > .d-flex.align-items-center > label {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
  }
  /* 郵便番号（profile/form/components/postal_code）はスマホでは「-」を出さず、
     2つの欄を折り返さずに横並びにする */
  .sp-page .c-table--responsive.sp-form-table .sp-postal {
    flex-wrap: nowrap;
  }
  .sp-page .c-table--responsive.sp-form-table .sp-postal .sp-postal__sep {
    display: none;
  }
}

/* 送信ボタン（戻る／確認画面へ）は直前の c-form__group と地続きに見えると
   誤タップしやすい。フォーム本体と操作を余白で切り離す。
   幅に関係なく詰まって見えるため、メディアクエリでは括らない。 */
.sp-page .l-default__wrap {
  margin-top: 28px;
  margin-bottom: 8px;
}

/* エラーはラベルの直下（入力欄の上）に出す。
   入力欄の下だと、キーボードが上がった状態のスマホでは画面外に隠れて
   「なぜ送信できないのか」が分からなくなる。
   DOM 順は labelRow → control → error/help のままで、並べ替えだけ order で行う
   （PC 幅は別ブロックの grid で組んでいるのでここは当たらない）。
   --inline（ラベルと値を横並びにする表示専用項目）は対象外。 */
@media only screen and (max-width: 768px) {
  .c-form__field:not(.c-form__field--inline) {
    display: flex;
    flex-direction: column;
  }
  .c-form__field:not(.c-form__field--inline) > .c-form__labelRow {
    order: 1;
  }
  .c-form__field:not(.c-form__field--inline) > .c-form__error {
    order: 2;
    margin-top: 0;
    margin-bottom: 6px;
  }
  .c-form__field:not(.c-form__field--inline) > .c-form__control {
    order: 3;
  }
  .c-form__field:not(.c-form__field--inline) > .c-form__help {
    order: 4;
  }
}

/* ============================================================
   入力内容の確認画面（product/form/input_check）
   読み取り専用の一覧。スマホでは th の青い帯が「セクション見出し」に見えて
   項目の切れ目が分からなくなるため、項目名を小さく上に、値をその下に置く。
   .sp-confirm-list で :not(.c-table--stack) 系より詳細度を1つ上げている。
   ============================================================ */
@media only screen and (max-width: 768px) {
  /* カードの枠はラッパー側で持つ。
     見出し（l-default__head）は table 直下に書かれていて foster parenting で
     table の外に出るため、table に枠を持たせると見出しが別の箱として浮く。
     ラッパーを枠にすれば、見出しと中身が1枚のカードに収まる。 */
  .sp-page .c-table--responsive.sp-confirm-list {
    background: #fff;
    border: 1px solid #dde3ec;
    border-radius: 8px;
    overflow: hidden;
    /* 利用手順は手順ごとにカードが分かれるので、カード間を空ける */
    margin-bottom: 16px;
  }
  .sp-page .c-table--responsive.sp-confirm-list table {
    background: none;
    border: none !important;
    border-radius: 0;
    margin-bottom: 0;
  }
  /* 見出しはカードのヘッダー。単独の白い箱に見えないよう枠と角丸を外す。 */
  .sp-page .c-table--responsive.sp-confirm-list .l-default__head {
    background: #f7f9fc;
    border: none;
    border-bottom: 1px solid #dde3ec;
    border-radius: 0;
    padding: 12px 16px;
    margin: 0;
  }
  /* 項目名: 帯をやめ、値の見出しとして小さく添える */
  .sp-page .c-table--responsive.sp-confirm-list table th {
    background: none !important;
    color: #8a96ad !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    text-align: left !important;
    border: none !important;
    padding: 14px 16px 2px !important;
  }
  /* 値: 地色を持たせず、項目名の直下に置く。
     未入力の項目は td の中身が空で高さを持たず、項目名のすぐ下が
     カードの下枠になってしまうため、min-height で1行分を確保する。 */
  .sp-page .c-table--responsive.sp-confirm-list table td {
    background: none !important;
    border: none !important;
    color: #1a1a2e;
    font-size: 1.35rem;
    line-height: 1.5;
    min-height: 1.5em;
    padding: 0 16px 16px !important;
    word-break: break-all;
  }
  /* 区切り線は引かない。項目ごとに線が入ると表に戻って見えるので、
     切れ目は項目名と値のまとまり＋行間の余白でとる。 */
  .sp-page .c-table--responsive.sp-confirm-list table tr:not(:last-child) td {
    padding-bottom: 18px !important;
  }
  /* 最後の項目が未入力だと、項目名のすぐ下がカードの下枠になる。
     カード下端には必ず余白を残す。 */
  .sp-page .c-table--responsive.sp-confirm-list table tr:last-child td {
    padding-bottom: 18px !important;
  }
}

/* ============================================================
   ヘッダー固定（全幅）／サイドバー固定（PC 幅のみ）
   長いフォームや一覧でスクロールしたときに、ナビゲーションを常に出す。
   .sp-page スコープなので admin には当たらない。
   fixed ではなく sticky にしている。STG ではヘッダーの上に環境帯
   （partials/environment_banner）が出るため、fixed だと top:0 に貼り付いて帯を覆い隠す。
   sticky なら初期表示は帯の下の本来の位置に置かれ、スクロール時だけ上端に留まる。
   帯自体も sticky で上端に留まるため、ヘッダー以下は帯の高さ（--env-banner-h、
   帯が出るときだけ environment_banner で定義。未定義なら 0）だけ下げて留める。
   ============================================================ */
.sp-page .c-header {
  position: sticky;
  top: var(--env-banner-h, 0px);
  /* 本文より前、スマホのドロワー .c-sidebar（z-index:1000）より後ろに置く。
     .c-header__toolbar はヘッダーの子なので、ヘッダーをサイドバーより前に出すと
     toolbar（ログアウトだけの白いパネル）がサイドバーのメニューを覆い隠す。
     サイドバーは top: var(--header-h) から始まるのでハンバーガーには重ならない。 */
  z-index: 999;
}

@media only screen and (min-width: 992.1px) {
  /* .l-default__container（flex）の子のまま sticky にする。
     align-self で本文の高さまで引き伸ばされるのを止めないと、sticky が効かない。
     sticky は親（container）の下端を越えられないため、高さを画面いっぱいに固定すると
     最下部でフッターの分だけ押し上げられる。高さは中身なりにして max-height で画面に収め、
     サイドバーの帯（地色・右線・幅は style.css の .sp-page .c-sidebar と同じ）は
     container 側の背景で下まで描く。 */
  .sp-page .l-default__container {
    background: linear-gradient(to right,
      var(--sp-sidebar-bg) 209px, #dde3ec 209px, #dde3ec 210px, transparent 210px);
  }
  .sp-page .c-sidebar {
    position: sticky;
    top: calc(var(--env-banner-h, 0px) + var(--header-h));
    align-self: flex-start;
    flex-shrink: 0;
    max-height: calc(100vh - var(--env-banner-h, 0px) - var(--header-h));
    min-height: 0;
    overflow-y: auto;
  }
}
@media only screen and (max-width: 992px) {
  /* スマホのドロワー（style.css で fixed; top: var(--header-h)）も帯の分だけ下げる */
  .sp-page .c-sidebar {
    top: calc(var(--env-banner-h, 0px) + var(--header-h));
    height: calc(100% - var(--env-banner-h, 0px) - var(--header-h));
  }
  /* ハンバーガー（style.css で fixed; top: 5px）も帯の下に出す。
     ヘッダー（z-index:999）の中にあるため、帯（z-index:1001）より前には出られない。 */
  .sp-page .e-btn-menu {
    top: calc(var(--env-banner-h, 0px) + 5px);
  }
  /* スマホではヘッダーのログアウト（style.css でドロワー状の白パネル）は使わず、
     サイドバー下部の .c-sidebar__logout に一本化する。
     以前はドロワーの背面に隠れていたが、帯の分ドロワーを下げると上の隙間から覗くため消す。 */
  .sp-page .c-header__toolbar {
    display: none;
  }
}

/* ============================================================
   申請詳細の差分表（request_history/detail）
   スマホでは3列だと1列あたりが潰れる。かといって項目名を列のまま横に並べると、
   長い項目名が幅を食うか途中で折れて不格好になる。
   そこで項目名だけ全幅の行に逃がし、比較したい「変更前 / 変更後」は
   横並びのまま残す。横スクロールは不要になる。
   インラインスタイルで書かれた表なので、打ち消しに !important が要る。
   ============================================================ */
@media only screen and (max-width: 768px) {
  /* ラッパーは横スクロール版の名残。ここでは何もしない。 */
  .sp-page .sp-diff-scroll {
    overflow-x: visible;
  }
  .sp-page table.sp-diff,
  .sp-page table.sp-diff tbody {
    display: block;
    width: auto !important;
  }
  /* 列見出しは項目ごとのラベルに置き換わるので不要 */
  .sp-page table.sp-diff thead {
    display: none;
  }
  /* 1項目 = 1カード。中で「変更前 / 変更後」を左右に並べる。 */
  .sp-page table.sp-diff tr {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #dde3ec;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 10px;
  }
  /* 項目名は全幅。長くても折り返せるので、幅を取り合わない。 */
  .sp-page table.sp-diff tbody th {
    display: block;
    flex: 0 0 100%;
    background: #f5f7fa !important;
    border: none !important;
    border-bottom: 1px solid #dde3ec !important;
    padding: 9px 14px !important;
    font-size: 1.25rem !important;
    white-space: normal !important;
    word-break: normal;
  }
  /* 変更前 / 変更後を等幅で左右に。min-width: 0 が無いと flex が縮まない。 */
  .sp-page table.sp-diff td {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    border: none !important;
    padding: 9px 12px 11px !important;
    font-size: 1.3rem;
    word-break: break-all;
  }
  /* 列見出しが無くなるぶん、どちらの値かを値の上に小さく添える */
  .sp-page table.sp-diff td::before {
    content: attr(data-label);
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #8a96ad;
    margin-bottom: 3px;
  }
  /* 変更前は元の値なので控えめに。取り消し線は値そのものが消えたと
     誤読されるので使わない。 */
  .sp-page table.sp-diff td[data-diff="before"] {
    color: #8a96ad !important;
    border-right: 1px solid #eef2f7 !important;
  }
  /* 変更後が今回の申請内容。薄く面を敷いて主役にする。 */
  .sp-page table.sp-diff td[data-diff="after"] {
    background: #f2f7f3;
    color: #1a1a2e;
    font-weight: 700;
  }
  .sp-page table.sp-diff td[data-diff="after"]::before {
    color: #4a7a5a;
  }
}

/* ============================================================
   画像アップロード（施設フォーム）
   ネイティブの input[type=file] が素のまま出ていて、周りの入力欄と揃わない。
   JS が .show() / .hide() で display を出し入れするため、CSS で display を
   固定すると「変更」を押しても開かなくなる（.show() は display:'' に戻すだけで、
   スタイルシートの none が残る）。よって表示/非表示には触れず、見た目だけ整える。
   ============================================================ */
.sp-page .image-file-input {
  width: 100%;
  max-width: 420px;
  padding: 10px 12px;
  border: 1px dashed #c5cdd9;
  border-radius: 8px;
  background: #fbfcfe;
  font-size: 1.25rem;
  color: #8a96ad;
  cursor: pointer;
}
.sp-page .image-file-input:hover {
  border-color: var(--sp-primary, #004B9E);
  background: #f4f8fd;
}
.sp-page .image-file-input:focus-visible {
  outline: none;
  border-color: var(--sp-primary, #004B9E);
  box-shadow: 0 0 0 3px rgba(0, 75, 158, 0.12);
}
/* 「ファイルを選択」のボタン部分。他の副次ボタン（プレビュー等）と同じ枠線ボタンに揃える。 */
.sp-page .image-file-input::file-selector-button {
  margin-right: 12px;
  padding: 8px 16px;
  min-height: 36px;
  border: 1px solid var(--sp-primary, #004B9E);
  border-radius: 6px;
  background: #fff;
  color: var(--sp-primary, #004B9E);
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
}
.sp-page .image-file-input::file-selector-button:hover {
  background: #eef3fb;
}
/* Safari / 旧 Chrome 用（::file-selector-button 未対応） */
.sp-page .image-file-input::-webkit-file-upload-button {
  margin-right: 12px;
  padding: 8px 16px;
  min-height: 36px;
  border: 1px solid var(--sp-primary, #004B9E);
  border-radius: 6px;
  background: #fff;
  color: var(--sp-primary, #004B9E);
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
}

/* 選択済みの表示。チェック＋ファイル名＋「変更」が地の文に見えていたので、
   1つのまとまりとして淡い面に載せる。 */
.sp-page .uploaded-file-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #f7faf8;
  font-size: 1.25rem;
  color: #3c4a63;
  max-width: 420px;
}
.sp-page .uploaded-file-info .uploaded-file-name {
  font-weight: 700;
  word-break: break-all;
}
.sp-page .uploaded-file-info .change-file-btn {
  margin-left: auto;
  color: var(--sp-primary, #004B9E);
  font-weight: 700;
  white-space: nowrap;
}

/* プレビュー枠。灰色のベタ面に「画像未選択」だけだと未完成に見えるので、
   入力欄と同じ破線の枠に合わせる。 */
.sp-page .image-preview-container {
  max-width: 100%;
  border: 1px solid #e0e5ef;
  border-radius: 8px;
  overflow: hidden;
}
.sp-page .image-placeholder {
  font-size: 1.2rem;
  color: #aab2c0;
}

/* 画像1枚 = 1カード。8枠が同じ見た目で続くので、枠と見出しで境目を示す。
   .border（1px solid）だけだと隣の枠と地続きに見えて、どこからどこまでが
   1枚ぶんの設定なのか読み取れない。 */
.sp-page .facility-image-row {
  border: 1px solid #dde3ec !important;
  border-radius: 8px;
  background: #fff;
  padding: 0 !important;
  margin-bottom: 14px !important;
  overflow: hidden;
}
.sp-page .sp-image-card__head {
  background: #f5f7fa;
  border-bottom: 1px solid #dde3ec;
  padding: 8px 14px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #24365e;
  letter-spacing: 0.04em;
}
/* カードの余白はここで持つ（.p-15 はカード全体に効いてしまい、見出しが帯にならない） */
.sp-page .facility-image-row > .d-flex {
  padding: 14px;
  margin-top: 0 !important;
}

/* 画像1枚ぶんの設定群。「選択済み → 表示順 → 期間指定なし → 期間 → クリア」が
   すべて全幅で縦に積まれて間延びしていたので、短い項目は横に並べる。 */
.sp-page .sp-image-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 16px;
}
/* ファイル選択・選択済み表示・表示期間は1行使う */
.sp-page .sp-image-settings > .mb-10:first-child,
.sp-page .sp-image-settings > .period-inputs {
  flex: 1 1 100%;
  margin-bottom: 0 !important;
}
/* 表示順（セレクト1つ）と「表示期間指定なし」は同じ行に収まる */
.sp-page .sp-image-settings__order {
  flex: 0 0 auto;
  margin-bottom: 0 !important;
}
.sp-page .sp-image-settings__order .e-select {
  width: 84px !important;
  min-width: 0 !important;
}
.sp-page .sp-image-settings__noPeriod {
  flex: 1 1 auto;
  margin-bottom: 0 !important;
  /* ラベル（表示順）のぶんだけ下揃えがずれるので、行の下端に合わせる */
  padding-bottom: 8px;
}
/* 削除・クリアは操作なので右端にまとめる */
.sp-page .sp-image-settings > .delete-checkbox-container,
.sp-page .sp-image-settings > .clear-btn-container {
  flex: 0 0 auto;
  margin-top: 0 !important;
  margin-left: auto;
}

@media only screen and (max-width: 768px) {
  /* スマホではプレビューと設定を縦に積む（300px の枠と並べる幅が無い） */
  .sp-page .image-preview-container {
    width: 100% !important;
    min-height: 180px !important;
  }
  .sp-page .image-file-input,
  .sp-page .uploaded-file-info {
    max-width: 100%;
  }
  /* 表示期間の開始・終了は横幅が足りないので、行内で等分に詰める */
  .sp-page .sp-image-settings .period-inputs .d-flex > div {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* SP提携先は「SP-ID 支店ID 名称」を半角スペースで連ねた表示専用の値。
   空白が折り返し位置になるので、ID と名称がバラけないよう1かたまりで扱う。
   入りきらないときは名称側だけが折り返す。 */
.sp-page .sp-facility-partner {
  white-space: nowrap;
  overflow-wrap: normal;
}
@media only screen and (max-width: 768px) {
  /* スマホは幅が足りないので折り返しは許すが、はみ出させない */
  .sp-page .sp-facility-partner {
    white-space: normal;
  }
}

/* ラジオ・チェックのラベルは padding-left で丸印のぶんを空けているだけなので、
   inline のままだと2行目が丸印の下（左端）まで回り込む。ブロックにして
   ぶら下げインデントを効かせ、テキストの左端を揃える。 */
.sp-page .e-radio,
.sp-page .e-checkbox {
  max-width: 100%;
}
.sp-page .e-radio label,
.sp-page .e-checkbox label {
  display: inline-block;
  vertical-align: top;
}
/* 選択肢の補足文（「店舗を個別に登録する」等の説明）はラベルの字下げに合わせる。 */
.sp-page .sp-form-table small.d-block {
  font-size: 1.15rem;
  color: #8a96ad;
  line-height: 1.6;
  margin-top: 2px;
}

/* 選択肢（ラジオ／チェック）の並びは flex をやめてブロックで組む。
   flex だと親の幅計算（shrink / wrap / align）の影響を受け、
   「実店舗あり」が数文字ごとに折り返されるなど幅が潰れる事故が起きる。
   縦に積むだけなので flex である必要がない。 */
.sp-page .sp-form-table .d-flex.flex-column {
  display: block !important;
}
/* 選択肢は縦積み。各選択肢が「ラベル＋※の補足文」の2行を持つので、
   横に並べると補足文がどのラベルに掛かるのか読み取りにくい。 */
.sp-page .sp-form-table .d-flex.flex-column > * {
  display: block;
  width: 100%;
}
.sp-page .sp-form-table .d-flex.flex-column > *:not(:last-child) {
  margin-bottom: 12px;
}
/* ラジオ自体もブロックにして、ラベルが行いっぱいを使えるようにする。 */
.sp-page .sp-form-table .e-radio,
.sp-page .sp-form-table .e-checkbox {
  display: block;
  width: 100%;
}
.sp-page .sp-form-table .e-radio label,
.sp-page .sp-form-table .e-checkbox label {
  display: block;
  width: auto;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* 申請詳細の要約テーブル（request_history/detail）。
   確認画面と同じ sp-confirm-list に乗せるが、こちらは既に l-default__box の
   中にあるので、二重のカード枠にならないよう外枠だけ外す（--plain）。
   インラインスタイルで書かれた表なので、打ち消しに !important が要る。 */
@media only screen and (max-width: 768px) {
  .sp-page .sp-confirm-list--plain {
    border: none !important;
    border-radius: 0;
    margin-bottom: 0;
  }
  .sp-page .sp-confirm-list--plain table th,
  .sp-page .sp-confirm-list--plain table td {
    width: auto !important;
    white-space: normal !important;
  }
}

/* ============================================================
   申請中バナー（各フォームのロック画面）
   インラインスタイルで flex 横並びにしていたため、スマホでは
   「申請中の履歴はこちら」が押し出されて窮屈になっていた。
   スマホでは縦に積み、ボタンは全幅にする。
   ============================================================ */
.sp-page .c-approval-banner--pending {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid #d18a00;
  background: #fff8e1;
  border-radius: 6px;
}
.sp-page .c-approval-banner--pending .c-approval-banner__icon {
  font-size: 2rem;
  flex: 0 0 auto;
}
.sp-page .c-approval-banner--pending .c-approval-banner__body {
  flex: 1 1 auto;
  min-width: 0;
}
.sp-page .c-approval-banner--pending .c-approval-banner__title {
  font-weight: bold;
  color: #7a4a00;
}
.sp-page .c-approval-banner--pending .c-approval-banner__desc {
  font-size: 1.3rem;
  color: #7a4a00;
}
.sp-page .c-approval-banner--pending .c-approval-banner__actions {
  margin-left: auto;
  flex-shrink: 0;
}
.sp-page .c-approval-banner--pending .c-approval-banner__actions .e-btn {
  white-space: nowrap;
}

@media only screen and (max-width: 768px) {
  .sp-page .c-approval-banner--pending {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  /* 申請日時とステータスは「｜」区切りの1行。幅が足りないので折り返させる。 */
  .sp-page .c-approval-banner--pending .c-approval-banner__desc {
    font-size: 1.2rem;
    line-height: 1.6;
  }
  .sp-page .c-approval-banner--pending .c-approval-banner__actions {
    flex: 1 1 100%;
    margin-left: 0;
  }
  .sp-page .c-approval-banner--pending .c-approval-banner__actions .e-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
  }
}

/* ============================================================
   サイドバーのログアウト（スマホのドロワーのみ）
   ヘッダーのログアウトはドロワー時にサイドバーの背面に隠れるため、
   サイドバーの末尾に置く。PC 幅はヘッダーにあるので出さない。
   ============================================================ */
.sp-page .c-sidebar__logout {
  display: none;
}
@media only screen and (max-width: 992px) {
  .sp-page .c-sidebar__logout {
    display: block;
    margin: 16px 16px 0;
    padding-top: 16px;
    border-top: 1px solid #dde3ec;
  }
  .sp-page .c-sidebar__logout button {
    width: 100%;
    min-height: 44px;
    border: 1px solid #dde3ec;
    border-radius: 6px;
    background: #fff;
    color: var(--sp-sidebar-link);
    font-size: 1.4rem;
    cursor: pointer;
  }
}