/* ============================================================
改善（Laravel のみ）で足したスタイル
Rails は据え置きなので、この 1 枚を読むかどうかだけで差が出るようにしてある。
既存 3 枚（main / nav / other）のあとに読ませ、!important を使わずに上書きする。
→ docs/s-muto/改善レポート/
============================================================ */
/* ---- モーダル: 上中下（ヘッダー・本文・フッター）を同じ幅で揃える ----
Bootstrap の既定は header/body/footer それぞれが自前の padding を持つため、
中身の縦線（左右の余白）が段ごとにズレて見える。
19 か所ある .modal-content.text-center すべてに効かせて、
左右の padding を 1 つに統一し、段の区切りは横のラインで見せる。 */
.modal-content.text-center .modal-header,
.modal-content.text-center .modal-body,
.modal-content.text-center .modal-footer {
padding-right: 24px;
padding-left: 24px;
}
.modal-content.text-center .modal-header {
padding-top: 16px;
padding-bottom: 16px;
/* 段の区切りは 1px の横ライン。左右いっぱいに渡す（padding の内側で切らない） */
border-bottom: 1px solid #D4AF37;
}
.modal-content.text-center .modal-body {
padding-top: 20px;
padding-bottom: 20px;
}
/* ---- 日本語の折り返しで単語の途中が切れるのを防ぐ ----
CSVインポート失敗時など、管理IDや行番号で毎回文字数が変わる動的な文言は
あらかじめ改行位置を決められない（固定文言のような
調整ができない）。
ブラウザは既定（word-break: normal）だと日本語をほぼ1文字ごとに折り返すため、
「郵便」のような複合語の途中で切れてしまう。
keep-all にすると、句読点・記号の直後など自然な区切りでのみ折り返す。
overflow-wrap: break-word は、区切りが無い長い連続文字列でもモーダル幅を
突き破らないための保険。
それでも「（説明）」の直後など、文法的には正しいが読みにくい位置で
折り返されることがあるため、そこは各メッセージ側で明示的に折る
（$errors[] は
、モデルの errorsAdd() は \n）。 */
.modal-content.text-center .modal-body {
word-break: keep-all;
overflow-wrap: break-word;
}
/* \n を実際の改行として効かせる（通常の modal-body は白紙文字を詰めるので \n は無視される）。
modal-body 全体ではなく本文の span だけに付ける。
modal-body に付けると、直前の Blade コメントが残す改行まで空行として表示され、
本文の上に余白が空いてしまう（実測: 上に約 20px 余分な空行）。 */
.modal-content.text-center .modal-body .flash-body-text {
white-space: pre-line;
}
/* 既存のモーダルは footer に .border-0 と .mt-3 を付けている（19 か所すべて）。
どちらも Bootstrap のユーティリティで !important 付きなので、
同じく !important でないと上書きできない。
.border-0 → border: 0 !important … 区切り線が消える
.mt-3 → margin-top: 1rem !important … 線の上に余白が乗って段がズレる
このファイルで !important を使うのはこの 2 つだけ。 */
.modal-content.text-center .modal-footer.border-0,
.modal-content.text-center .modal-footer {
border-top: 1px solid #D4AF37 !important;
margin-top: 0 !important;
}
.modal-content.text-center .modal-footer {
padding-top: 16px;
padding-bottom: 16px;
}
/* ボタンの横並びは既存の指定に任せる。
18 か所が .justify-content-evenly（= space-evenly !important）、
1 か所が .justify-content-center を持っており、どちらも !important なので
ここで center を指定しても勝てない。無理に揃えず、既存の意図を残す。 */
/* Bootstrap は footer の子要素へ .5rem の margin を配る。
段の左右を 24px にそろえたので、その分の出っぱりを消す
（ここはユーティリティではないので !important は要らない）。 */
.modal-content.text-center .modal-footer > * {
margin-right: 0;
margin-left: 0;
}
/* ボタンが 2 つ並ぶモーダル（やめる／実行する）は間隔だけ空ける */
.modal-content.text-center .modal-footer > * + * {
margin-left: 16px;
}
@media screen and (max-width: 768px) {
/* 狭い画面では左右を詰める。既存の other_20260414.css が
.modal-header 等へ padding: 0px 5px を当てているので、それに合わせる */
.modal-content.text-center .modal-header,
.modal-content.text-center .modal-body,
.modal-content.text-center .modal-footer {
padding-right: 12px;
padding-left: 12px;
}
}
/* ---- フラッシュのモーダルに出す「失敗した理由」 ----
本文は中央寄せだが、理由は複数行になるので左寄せ（.text-start）にして読みやすくする。
ul の既定の左インデントぶんだけ、中央寄せの本文に対して左へずれて見えるので詰める。 */
.modal-content.text-center .flash-reasons {
display: inline-block;
margin-top: 12px;
margin-bottom: 0;
padding-left: 20px;
}
.modal-content.text-center .flash-reasons > li + li {
margin-top: 4px;
}
/* ---- 何も変えていないときの「更新する」----
Bootstrap の :disabled は opacity: .65 だけなので、紺色（#0A3D62）が
薄まって見えるだけで「押せない」ようには読めない。灰色に振り直す。
（どのフォームに効かせるかは form[data-dirty-guard] 側で決める） */
.btn-custom:disabled {
background-color: #9AA0A6;
border-color: #9AA0A6;
color: #F1F1F1;
opacity: 1;
}
/* ---- エラー文言の中の改行を活かす ----
長い文言は読みやすいところで折りたいが、
を混ぜると出力を
エスケープしたまま出せない。文言側は改行文字にしておき、ここで見せる。 */
.modal-content.text-center .flash-reasons > li,
#error_explanation li {
white-space: pre-line;
}
/* ---- 絞り込みと検索ボタンを 1 行に並べる（ギフト発注一覧）----
Bootstrap の .form-select / .form-control は width:100% なので、
flex の中に置くと行いっぱいまで伸びて 1 行に収まらない。
中身に合わせた幅に直し、狭くなりすぎないよう下限だけ決める。 */
.search-inline .form-select {
width: auto;
}
/* input は width:auto だと size 属性の既定（20 文字ぶん・約 190px）まで広がる。
1 行に収めたいので、実際に入る文字数に合わせて狭くする
（請求番号は 8 文字・お客様ID は 4 桁） */
.search-inline .form-control {
width: 128px;
}
/* 請求月は「全年」「全月」の 2 つ並ぶので、そのぶん狭くてよい */
.search-inline #search_year,
.search-inline #search_month {
min-width: 84px;
}
@media screen and (max-width: 991px) {
/* 1 行に収まらない幅では、ラベルの右をいっぱいまで使う縦積みに戻す */
.search-inline .form-select,
.search-inline .form-control {
width: 100%;
min-width: 0;
}
.search-inline > div > label {
min-width: 6em;
}
}
/* ---- 押しても何も起きない行に、押せる見た目を出さない ----
.table-contents は指カーソルと金色ホバーが付くが、遷移先（data-href）は
画面によって入っていない。入っていない行では見た目も戻す。
例: ギフト一覧を営業担当で開くと編集できないので data-href が無い。 */
.table-contents:not([data-href]) {
cursor: default;
}
@media (hover: hover) {
/* main_20250912.css の .table-contents:hover が #D4AF37 を !important で塗るので、
打ち消すにはこちらも !important が要る。縞（.table-striped）はセル側の
box-shadow で描かれているため、行の背景を透明にしても見た目は変わらない。 */
.table-contents:not([data-href]):hover {
background-color: transparent !important;
}
}
/* ---- スマホのドロワーメニュー: アクティブ項目の下線が浮いて見える ----
nav_20251101_2.css の .drawer-content .nav-menu.active::after は
li（行全体。margin: 20px 0 で上下に大きく空く）を基準に bottom: -6px / width: 110% と、
PC ナビ（flex 行で隙間が無い）と同じ値を流用している。
ドロワーは行間が広いぶん、線が文字から離れた「行と行の間の空白」に浮いて見え、
幅も li 全体基準なので文字より大きく右へはみ出す（実測: 文字の直下でなく
隣の項目との間の中間あたりに見える）。
→ docs/s-muto/改善レポート/_原稿/管理者.md
アイコン列（col-2）ぶんだけ右にずらし、文字列（col-10）の幅に合わせて、
文字のすぐ下に来るよう詰める。nav_20251101_2.css の後に読むので
!important 無しで上書きできる（同じセレクタ・同じ詳細度）。 */
.drawer-content .nav-menu.active::after {
bottom: -2px;
left: 16.667%; /* col-2（アイコン）ぶん */
width: 83.333%; /* col-10（文字）ぶん。110% だと li 全体基準ではみ出す */
}
/* ---- footer がページの下端に固定されず、コンテンツ量で位置が変わる ----
main_20250912.css の .footer は margin-top: 100px だけで、コンテンツに
続けて置かれているだけ（sticky footer ではない）。ヘッダー（）は
position: fixed で流れの外にあるので、コンテンツが短い画面
（新規登録フォーム等）では footer がビューポートの途中で止まり、
その下に何もない余白が残る（実測: 縦 1257px の画面で footer の下に 173px の空白）。
ページによって footer の高さ位置がバラバラに見えるのはこのため。
→ docs/s-muto/改善レポート/_原稿/全体.md
古典的な sticky footer で直す。 は fixed なので flex 化しても影響しない。 */
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container.contents {
flex: 1 0 auto;
}
footer.footer {
flex-shrink: 0;
}
/* ---- 自動入力された欄だけ色が変わる ----
Chrome / Safari は自動入力（保存した住所・メール・予測変換の確定）を
**薄い青の背景**で塗る。この画面の入力欄はクリーム色（#fcf7f0）なので、
自動入力した欄だけが青くなり、**打ち間違いのようにも、選べない欄のようにも見える**。
背景色は上書きできない仕様（`background-color` は無視される）なので、
内側に大きな影を敷いて塗りつぶすという定石で合わせる。
文字色も同じ理由で `-webkit-text-fill-color` を使う。 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
textarea:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fcf7f0 inset;
box-shadow: 0 0 0 1000px #fcf7f0 inset;
-webkit-text-fill-color: #212529;
caret-color: #212529;
transition: background-color 9999s ease-in-out 0s;
}
/* ---- footer の帯を画面の端まで伸ばす ----
footer は .site-main の中にあり、左右の余白（--su-main-pad）を受け取る。
そのため**金色の帯が両端で 32px 手前で切れて**、白い縁が残っていた
（帯は全幅で敷くもので、途中で切れると「崩れている」ように見える）。
余白ぶんだけ外へ出して、中の文字は余白を持たせ直す。 */
.site-main > footer.footer {
margin-left: calc(var(--su-main-pad) * -1);
margin-right: calc(var(--su-main-pad) * -1);
padding-left: var(--su-main-pad);
padding-right: var(--su-main-pad);
}
/* ---- ログイン画面のロゴが 769px〜799px の幅で欠ける ----
#logo-landscape は other_20260414.css で width: 800px 固定。
モバイル判定（@media max-width: 768px で width: 350px に切り替わる）が効くまでの
769px〜799px の間だけ、800px 固定幅が画面より広くなり、
#animation-wrapper の overflow: hidden で左右が同じだけ欠けて見える
（実測: 780px 幅で left: -10px, right: 790px）。
#final-content は width: auto（中身に合わせて伸縮）で、%指定の max-width は
絶対配置の基準（#animation-wrapper）に対して解決されるため意図通りに効かない。
ビューポート基準の vw なら祖先のサイズに関係なく効くので、これで縮められる。
→ docs/s-muto/改善レポート/_原稿/全体.md */
#logo-landscape {
max-width: 90vw;
}
/* ---- いま誰のページを見ているか（layouts/viewing_as）----
管理者・営業担当は他人の代わりに /users/{id}/… を開けるが、Rails / 移植初版は
どの画面にも対象者を出しておらず、手がかりが URL だけだった。
見出しの直下に帯で出す。見出しより弱く、本文より強い、という強さにしたいので
背景は薄い金色（既存のアクセント #D4AF37 系）にとどめ、枠線は左だけにする。
→ docs/s-muto/改善レポート/_原稿/全体.md */
.viewing-as {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
padding: 8px 16px;
border-left: 4px solid #D4AF37;
background-color: #FBF6E6;
border-radius: 4px;
/* px で書く。0.9rem = 14.4px は決めてある大きさ（…15 / 14 / 13…）に無く、
中の .viewing-as-id が em で更に掛かって 12.24px という値まで出ていた。 */
font-size: 14px;
color: #0A3D62;
}
.viewing-as-name {
font-weight: 700;
}
.viewing-as-id {
color: #6B7280;
font-size: 12px;
}
/* 「マイページ」への戻り口。行の右端に寄せる（左の氏名から離して読み分けやすくする） */
.viewing-as-link {
margin-left: auto;
color: #0A3D62;
text-decoration: underline;
}
@media screen and (max-width: 768px) {
/* 狭い画面では 2 段に折れるので、戻り口の右寄せをやめて詰める */
.viewing-as {
gap: 8px;
padding: 8px 12px;
}
.viewing-as-link {
margin-left: 0;
}
}
/* 一覧の見出しを語の途中で折らない（改善・Laravel のみ）
実測（PC 1280px 幅）で、次の 3 つが語の途中で折れていた。
ギフトリスト 「配送方法」 → 「配送方」「法」
ギフト発注履歴 「合計金額(税込)」→ 「合計金額(税」「込)」
ギフト一覧 「卸価格（税抜）」→ 「卸価格（税」「抜）」
日本語は単語の区切りが無いので、幅が足りないと 1 文字だけ次の行に落ちる。
見出しは短い語なので、折らずに列幅のほうを合わせるのが読みやすい。
SP は見出しを自分で 3 段に組んでいる（in_table）ので、PC 幅だけに効かせる。
→ docs/s-muto/改善レポート/_原稿/全体.md */
@media screen and (min-width: 992px) {
.table thead th {
white-space: nowrap;
}
}
/* 変えていないうちの送信ボタン（改善・Laravel のみ）
更新の画面は開いた時点で全項目が埋まっている。何も変えずに押しても
中身は同じままなので、押せない状態を見た目でも示す。
押せる状態との差が分かるよう、色を落として矢印も変える。
→ docs/s-muto/改善レポート/_原稿/全体.md */
.btn.is-unchanged,
.btn-custom.is-unchanged {
background-color: #C9C7C1;
border-color: #C9C7C1;
color: #FFFFFF;
cursor: not-allowed;
}
/* ---- ログインしていない状態で開く画面（ログイン／パスワードの再設定）----
→ docs/s-muto/改善レポート/_原稿/全体.md 38
もとは「ログイン画面だけ」の作りだったが、パスワードを忘れた方・再設定の画面も
同じ形（layouts/auth.blade.php）にまとめたので、名前を .auth-* にしてある。
左に「つながり」の面、右に用件。レイアウトの .container の中にいるので、
画面幅いっぱいへはみ出させている。footer の帯はこの画面群では出さない。 */
/* 画面幅いっぱいに広げる。100vw ＋ 負のマージンで外へはみ出させる手はよく使われるが、
100vw は縦スクロールバーの幅を含むぶん viewport より広く、**横のスクロールバーが出る**。
ここでは器（.contents）の左右の余白と .row の負マージンを 0 にして、
100% のまま画面幅いっぱいにする（はみ出しが原理的に起きない）。 */
.auth-split {
display: flex;
width: 100%; max-width: none !important; flex: 1 1 100%;
margin-left: 0; margin-right: 0; padding: 0 !important;
}
/* 2 面を画面の下端まで伸ばす。body は sticky footer のため縦 flex（上の body 規則）で、
.container.contents が flex: 1 で余りを取る。その余りを .row → .auth-split まで受け渡し、
画面の高さがいくつでも隙間が出ないようにする（固定の calc(100vh - N) だと帯が残る）。 */
body:has(.auth-split) .contents { margin-top: 0; display: flex; flex-direction: column; } /* ナビ用の上余白（90px / 70px）は不要 */
body:has(.auth-split) .contents > .row:last-child { flex: 1 0 auto; margin-left: 0; margin-right: 0; }
/* 左サイドバーの枠（smuto-ui）の中でも同じ見え方にする。
- .site-main .contents は margin を 0 に固定するが、それだと Bootstrap の .container の
中央寄せ（margin: auto）まで消えて、上の calc(50% - 50vw) が 70px ほど左にずれる
- .site-main__top はサイドバー用の上余白。2 面のレイアウトには要らない
- 高さの受け渡しは body → .app → .site-main → .contents と繋ぐ */
/* 上の余白は打ち消す。狭い画面では smuto-ui 側の .app--nonav .site-main .contents が
24px を与えており、こちらの body:has(...) .contents より強いので、ここでも指定して勝たせる。 */
body:has(.auth-split) .site-main .contents { margin: 0 auto; max-width: none; padding-left: 0; padding-right: 0; }
/* 本文の前に置いてある報せの枠（トースト・確認モーダル）は、出ていないときも
.container の升目のぶん高さを持ち、2 面の上に 24px の帯を作っていた。
トーストは position: fixed なので、枠の高さを 0 にしても出方は変わらない。 */
body:has(.auth-split) .contents > .row:first-child { height: 0; min-height: 0; margin: 0; padding: 0; overflow: visible; }
body:has(.auth-split) .contents > .row:first-child > * { padding-top: 0; padding-bottom: 0; }
/* サイドバーの外枠が持つ上の余白。2 面のレイアウトには要らない
（スマートフォン幅では .site-main の padding が 24px の帯になっていた） */
body:has(.auth-split) .site-main { padding: 0; }
body:has(.auth-split) .site-main__top { display: none; margin: 0; }
body:has(.auth-split) .app { flex: 1 0 auto; }
body:has(.auth-split) .site-main { display: flex; flex-direction: column; }
/* 念のための押さえ。上の作りで横にはみ出さないはずだが、
端末や拡大率の丸めで 1px 出ることがあるので、この画面群では横方向を止めておく
（body だけに掛けると html 側で受け止められて横のスクロールバーが残る）。 */
html:has(.auth-split),
body:has(.auth-split) { overflow-x: hidden; }
/* 左: ブランドの面 */
.auth-brand {
position: relative; overflow: hidden; flex: 0 0 46%;
background: radial-gradient(120% 90% at 18% 18%, #145a8c 0%, #0A3D62 52%, #062a45 100%);
color: #FAF3E0; display: flex; align-items: flex-end; padding: 56px 48px 52px;
}
.auth-brand-calligraphy { /* 筆文字ロゴを薄く大きく敷く */
position: absolute; right: -8%; top: -6%; height: 120%; width: auto;
opacity: .14; filter: saturate(.7) brightness(1.15); pointer-events: none; user-select: none;
}
.auth-brand-env { /* 環境名（development など）。production では描画されない */
position: absolute; left: 48px; top: 40px;
font-family: 'Libre Baskerville', serif; font-size: 13px; letter-spacing: .38em;
color: #D4AF37; border: 1px solid rgba(212, 175, 55, .65); padding: 7px 10px 7px 16px;
}
.auth-brand-text { position: relative; }
.auth-brand-name { font-family: 'Shippori Mincho', serif; font-size: 64px; line-height: 1.1; letter-spacing: .12em; color: #FAF3E0; }
.auth-brand-tagline { font-family: 'Shippori Mincho', serif; font-size: 18px; letter-spacing: .2em; margin-top: 14px; color: #D4AF37; }
.auth-brand-desc { font-size: 13px; letter-spacing: .06em; margin-top: 10px; color: rgba(250, 243, 224, .72); }
/* 右: 用件の面 */
.auth-main { flex: 1 1 54%; background: #fff; display: flex; align-items: center; justify-content: center; padding: 48px 32px; }
.auth-form { width: 100%; max-width: 400px; }
.auth-form-wide { max-width: 560px; } /* 項目が多い画面用（@section('auth_wide')） */
.auth-title { font-family: 'Shippori Mincho', serif; font-size: 26px; color: #0A3D62; letter-spacing: .12em; margin: 0 0 22px; }
/* 入口をタブで 1 つずつ出す。JS が動くまで（[data-ready] が付くまで）は全部出しておく */
.auth-tabs { display: flex; border-bottom: 1px solid #e6dcc3; margin: 0 0 18px; }
.auth-tab { flex: 1 1 0; padding: 10px 4px 12px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
font-family: 'Shippori Mincho', serif; font-size: 14px; letter-spacing: .06em; color: #707070; cursor: pointer; }
.auth-tab:hover { color: #0A3D62; }
/* 押したあとに残る黒い枠（ブラウザ既定）を画面の色に合わせる。
キーボードで辿るときは見えないと困るので、消さずに置き換える。 */
.auth-tab:focus { outline: none; }
.auth-tab:focus-visible { outline: 2px solid #0A3D62; outline-offset: -4px; border-radius: 2px; }
.auth-tab.is-active { color: #0A3D62; border-bottom-color: #D4AF37; font-weight: bold; }
/* 選ばれている 1 つだけ出す。is-active は Blade が最初から付けているので、
JS を待たずに 1 つだけになる（3 つ見えてから減るちらつきが無い）。
JavaScript が無い環境は