/*
 * スマホ・タブレット表示改善 共通スタイル（docs/superpowers/specs/2026-09-08-responsive-design.md）。
 * layouts.admin / layouts.public / layouts.public2 の 3 レイアウトすべてが素の <link> で読み込む
 * （admin は Vite ビルド有無に関わらず必ず効かせるため、あえて Vite を経由しない静的ファイルにしている）。
 * 見た目の応答性のみを扱う。機能・文言・ルートには触れない。
 */

/* ---------------------------------------------------------------------
 * 1. タップ対象 44px（ガイドライン §1 のスニペットそのまま）
 * --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .btn, .btn-sm, .page-link { min-height: 44px; padding-top: .5rem; padding-bottom: .5rem; }
  .page-link { display: flex; align-items: center; }
  table .actions a, table td > a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 .5rem; }
  /* 公開レイアウト（public / public2）は Bootstrap を読み込まないため .btn ではなく
   * .bk-btn / .or-btn / .ce-btn / .link-button / 素の button・submit 系がタップ対象になる。
   * 既存の width 指定（inline style 等）はそのまま。管理画面のハンバーガー（.navbar-toggler）は
   * Bootstrap 側で既にサイズ調整済みのため対象から除外。 */
  .bk-btn, .or-btn, .ce-btn, .link-button,
  input[type=submit], input[type=button],
  button:not(.navbar-toggler) {
    min-height: 44px;
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
}

/* ---------------------------------------------------------------------
 * 2. table-responsive / img-fluid 相当のユーティリティ。
 * 管理画面は Bootstrap 5（CDN）が同名クラスを提供するが、公開レイアウト
 * （public / public2）は Bootstrap を読み込んでいないためここで自前定義する。
 * 値は Bootstrap 5.3 の定義とほぼ同一（併用しても衝突しない）。
 * --------------------------------------------------------------------- */
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.img-fluid {
  max-width: 100%;
  height: auto;
}
/* ラッパー div を新設しにくい既存テーブルに、直接テーブルへ付けるだけで
 * 横スクロールを効かせるための簡易版（.table-responsive のラップ版と等価）。 */
table.table-responsive-self {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 先頭列を横スクロール中も固定表示（一覧テーブル用）。
 * table-striped の縞模様・現行の altrow / nth-child(2n) 縞模様の両方に
 * 背景色を追従させる（行の状態色を上書きしないよう specificity に注意）。 */
.table-sticky-col > :not(caption) > * > :first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: #fff;
}
.table-sticky-col.table-striped > tbody > tr:nth-of-type(odd) > :first-child {
  background-color: #f5f5f5;
}
.table-sticky-col tr.altrow > :first-child,
.table-sticky-col tr:nth-child(2n) > :first-child {
  background-color: #f5f5f5;
}

/* ---------------------------------------------------------------------
 * 3. フォーム下部の追従アクションバー（保存ボタン等。§5）。
 * Bootstrap 5.3 の sticky-bottom と同等だが、Bootstrap 未読込の公開画面
 * でも効くよう自前クラスにしている。
 * --------------------------------------------------------------------- */
.rwd-sticky-actions {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #ddd;
  padding: .5rem 0;
  z-index: 20;
}

/* ---------------------------------------------------------------------
 * 4. 分割入力（郵便番号3+4・電話3分割 等）。§5「input-group で1行に収め、
 * スマホでも折り返さない」の実装。固定 px 幅ではなく flex の比率で縮める。
 * --------------------------------------------------------------------- */
.rwd-split-fields {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .25rem;
  max-width: 100%;
}
.rwd-split-fields input {
  min-width: 0;
  flex: 1 1 auto;
}
.rwd-split-fields .rwd-field-sm { flex-grow: 2; }
.rwd-split-fields .rwd-field-md { flex-grow: 3; }
.rwd-field-off { ime-mode: inactive; }
.rwd-field-on { ime-mode: active; }

/* ---------------------------------------------------------------------
 * 5. reCAPTCHA が枠からはみ出す幅では縮小する（§7）。
 * --------------------------------------------------------------------- */
@media (max-width: 359.98px) {
  .g-recaptcha { transform: scale(.92); transform-origin: 0 0; }
}

/* ---------------------------------------------------------------------
 * 6. public.blade.php（現行 default.ctp）が読み込む common.css の
 * 固定 2 カラムレイアウトを解除する。デスクトップの見え方は変えず
 * （max-width で同じ 900px 上限を維持）、992px 未満のみ 1 カラムに
 * 縦積みする（タブレットの 2 カラムは任意のため、より安全な 1 カラム
 * に倒す）。
 * --------------------------------------------------------------------- */
div#container {
  width: 100%;
  max-width: 900px;
}
@media (max-width: 991.98px) {
  div#header div#left, div#header div#right {
    float: none;
    width: 100%;
  }
  div#content-left-col, div#content-right-col {
    float: none;
    width: 100%;
  }
}

/* ---------------------------------------------------------------------
 * 7. 公開レイアウトのメッセージ表示（オーナー指摘 2026-09-13）。
 * partials/flash_public が現行 CakePHP と同じ
 * <div id="noticeMessage" class="message"> を出すので、箱の見た目そのものは
 * cake.generic.css の div.message ＋ common.css の div#noticeMessage /
 * div#errorMessage がそのまま効く。ここではその 2 つに載っていない分
 * （バリデーション一覧の箱と箇条書き）だけを足す。
 * 管理レイアウト（#page）は Bootstrap の .alert なので対象外。
 * --------------------------------------------------------------------- */
#container div.message-error {
  clear: both;
  font-size: 120%;
  font-weight: bold;
  color: #fff;
  margin: 0 0 1em 0;
  padding: 8px 8px 8px 35px;
  background: #c73e14 url(../img/exclamation.png) 5px 8px no-repeat;
}
#container div.message ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#container div.message ul li + li {
  margin-top: .25em;
}

/* ---------------------------------------------------------------------
 * 8. 公開画面のボタンの形をそろえる（オーナー指摘 2026-09-13）。
 * .bk-btn / .or-btn / .ce-btn は移植時に付いたクラスだが CSS が無く、
 * div.actions 配下の <a> だけ cake.generic.css のボタン見た目になり、
 * <button> は素のボタンのまま＝同じクラスなのに形が違っていた。
 * <a> でも <button> / <input type=submit> でも同じ箱になるようにする。
 * div.actions ul li a（0,1,4）に勝つ必要があるので #container を付ける。
 * 管理レイアウト（#page）は Bootstrap の .btn を使うので対象外。
 * --------------------------------------------------------------------- */
#container .bk-btn,
#container .or-btn,
#container .ce-btn {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;               /* 親が幅を持つときは横いっぱい。float 内では中身なり */
  min-height: 44px;
  padding: 10px 12px;
  font-size: 100%;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  text-shadow: #fff 0 1px 0;
  color: #333;
  background: #e6e49f;
  background-image: linear-gradient(#f1f1d4, #e6e49f);
  border: 1px solid #aaac62;
  border-radius: 8px;
  cursor: pointer;
}
#container .bk-btn:hover,
#container .or-btn:hover,
#container .ce-btn:hover {
  text-decoration: none;
  background: #f0f09a;
  background-image: linear-gradient(#f7f7e1, #eeeca9);
}
/* div.actions は li が float して横並びになる。中身なりの幅に戻す。 */
#container div.actions ul li .bk-btn,
#container div.actions ul li .or-btn,
#container div.actions ul li .ce-btn {
  width: auto;
}
/* 送信バー（.submit / .submit-large）では中央に置き、広がりすぎないようにする。 */
#container .submit .bk-btn,
#container .submit-large .bk-btn,
#container .rwd-sticky-actions .bk-btn {
  max-width: 280px;
  margin: 0 auto;
  display: block;
}

/* ---------------------------------------------------------------------
 * 9. 公開画面のチェックボックス・ラジオを大きく押しやすくする
 * （オーナー要望 2026-09-13。現行踏襲ではなく改善）。
 * public2（#wrapper）は styles/style.css が画像チェックボックスを当てているので
 * 触らないよう、公開レイアウト（#container）だけに絞る。管理（#page）も対象外。
 * スマホでは §1 と同じ 44px のタップ領域をラベル側で確保する。
 * --------------------------------------------------------------------- */
#container input[type="checkbox"],
#container input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 .4em 0 0;
  vertical-align: -.25em;
  accent-color: #000080;     /* サイトのアクセント色（div#login-box の枠と同じ） */
  cursor: pointer;
}
#container input[type="checkbox"] + label,
#container input[type="radio"] + label {
  cursor: pointer;
  margin-right: .8em;
}
@media (max-width: 767.98px) {
  #container input[type="checkbox"],
  #container input[type="radio"] {
    width: 1.5rem;
    height: 1.5rem;
  }
  #container input[type="checkbox"] + label,
  #container input[type="radio"] + label {
    box-sizing: border-box;
    display: inline-block;
    min-height: 44px;
    padding: .55em .4em .55em 0;
    line-height: 1.4;
  }
}

/* ---- チェックボックス・ラジオの文字を大きく（オーナー指摘 2026-09-13） ----
   このサイトは html { font-size: 62.5% }（1rem = 10px）。1.8rem = 18px 相当。
   四角の大きさは input 側が自前の font-size（1.6rem）を持っているので変わらない。 */
body.public-site .check-box label,
body.public-site .check-box > div,
body.public-site #contact .contact-form dl dd.input_radio label,
body.public-site #UserRegisterForm dl dd label,
body.public-site #CustomerRegisterForm dl dd label,
#wrapper .check-box label,
#wrapper .check-box > div {
  font-size: 1.8rem;
}

/* ---- 操作列のボタンを現行と同じ見た目にする（オーナー指摘 2026-09-13） ----
   現行は td.actions の中がリンク（a）で、style.css の
   「#login-list table td.actions a { background:#000; color:#fff }」が効いて黒いボタンに見えていた。
   移行版は CSRF 対策のため form + button にしたので、同じ見た目を button にも当てる。 */
#login-list table td.actions button,
#login-list table td.actions .link-button,
#item-detail-list-all td.actions button {
  display: inline-block;
  background-color: #000;
  color: #fff;
  border: 0;
  padding: 0.5em 1em;
  font: inherit;
  cursor: pointer;
}
#login-list table td.actions button:hover,
#item-detail-list-all td.actions button:hover { opacity: .85; }
#login-list table td.actions form { display: inline; margin-right: .4em; }

/* ---------------------------------------------------------------------
 * 送信ボタン: reCAPTCHA を掛けるときだけ <button> になるので、現行の
 * .submitBox input（styles/style.css）と同じ見た目にそろえる（2026-09-26）
 * --------------------------------------------------------------------- */
.submitBox button {
  background-color: #111111; width: 13.4rem; height: 40px; color: #fff !important;
  border-style: none; cursor: pointer; border-radius: 5px; transition: 0.2s;
}
.submitBox button:hover { opacity: 0.75; }
/* 会員登録の青い幅広ボタン（.submitBox2 input）も reCAPTCHA のときは <button> になるのでそろえる（2026-09-29） */
.submitBox2 button {
  background: #003B93; width: 100%; height: 47px; color: #fff !important;
  border-style: none; cursor: pointer; border-radius: 5px;
}
@media print, screen and (min-width: 768px) { .submitBox2 button { max-width: 335px; } }
/* POST で送るリンク型ボタン（カゴの変更・削除など）を .link_box .btn_link の <a> と同じ見た目に（2026-09-26） */
.link_box button.btn_link { border: 0; cursor: pointer; font-family: inherit; line-height: inherit; }

/* ヘッダーのキーワード検索: 入力した文字が枠に貼り付かないよう左右に余白（オーナー指摘 2026-09-26）。
   以前は placeholder の先頭の全角スペースで余白に見せていただけで、入力した文字には余白が無かった。 */
#keyword-search input[type=text] {
  box-sizing: border-box;
  padding: 0 1.2rem;
}

/* 製品ページ・一覧のタグの間隔（オーナー指摘 2026-09-26「タグ表示がきつい」）。
   style.css の a.tag は float＋余白 3px で詰まって見えたので、折り返しを flex にして上下左右に余白を取る。 */
#tag-box,
div.item-detail-list-tag-ari .tag-area {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 0.8rem;
}
#tag-box a.tag,
div.item-detail-list-tag-ari .tag-area a.tag {
  float: none;
  margin: 0;
}
#tag-box a.tag {
  padding: 0.4rem 1.2rem;
}
div.item-detail-list-tag-ari .tag-area {
  padding-bottom: 1.2rem;
}
div.item-detail-list-tag-ari .tag-area::after {
  content: none;
}

/* 公開画面の入力欄・選択欄（製品検索フォーム・お問い合わせ等）: style.css に内側の余白が無く、
   入力した文字が枠に貼り付いていた（オーナー指摘 2026-09-26）。ヘッダーの検索欄は上の規則で別に指定。 */
#wrapper input[type=text]:not(#keyword_input),
#wrapper input[type=email],
#wrapper input[type=tel],
#wrapper input[type=password],
#wrapper input[type=number],
#wrapper textarea,
#wrapper select {
  /* 幅は各画面の指定のまま（電話番号欄は 40px など狭い）なので、余白は幅の外側に足す（content-box） */
  box-sizing: content-box;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
/* 製品検索フォームの入力欄は幅 100% 指定なので、余白を幅の内側に取る（外側に足すとはみ出す） */
#wrapper .search-vox input[type=text]:not(#keyword_input),
#wrapper .search-vox select {
  box-sizing: border-box;
}

/* 入力エラーの赤い帯（「必須項目です」など）: 文字が帯の左端に貼り付いていたので内側に余白（オーナー指摘 2026-09-26） */
div.error-message {
  padding: 0.4em 0.8em;
}