@charset "UTF-8";
/* ============================================================
smuto-ui — つながり管理画面の外枠と再スキン（アイコンレール＋アンダーライン基調）
------------------------------------------------------------
色は現行のブランド 3 色をそのまま使う（#0A3D62 紺 / #D4AF37 金 / #FAF3E0 生成り）。
読み込みはいちばん最後（vanilla-base → main → nav → other → improve → これ）。
骨格は smuto-ui の既定形（3 行 × 3 列）:
ヘッダー 96px ──────────────────
左レール 56px │ 本文（ここだけスクロール） │ 右レール 56px
フッター 56px ──────────────────
レールの列は常に 56px。伸びるのは中の絶対配置だけなので、本文は 1px も動かない。
【!important について】
web-coding-rules は !important 禁止。ここで使うのは、既存 CSS が
!important で塗っている箇所を打ち消すときだけ（各所にその旨コメント）。
============================================================ */
:root {
/* 現行のブランド 3 色 */
--su-navy: #0a3d62; /* 主色: 文字・境界 */
--su-gold: #d4af37; /* アクセント: 選択中・ホバー */
--su-cream: #faf3e0; /* 面: ヘッダー・レール・パネルの地 */
--su-ink: #1c2b36; /* 本文の字 */
--su-mute: #5d6b76; /* 弱い字 */
--su-line: rgba(10, 61, 98, 0.16); /* 行のベースライン */
--su-line-strong: rgba(10, 61, 98, 0.45);/* 構造の仕切り */
--su-navy-tint: rgba(10, 61, 98, 0.12); /* ボタンのホバー地 */
--su-gold-tint: rgba(212, 175, 55, 0.16);/* 行のホバー地 */
--su-shadow: rgba(10, 61, 98, 0.3); /* 浮くものだけに使う影 */
--su-header-h: 96px; /* ヘッダー行。パネルの上端もここから読む */
--su-footer-h: 56px; /* フッター行。パネルの下端もここから読む */
--su-rail-w: 56px; /* レール幅（左右で同じにする） */
--su-rail-open-w: 264px;/* 載せたときに伸びる幅 */
--su-nav-panel-w: 284px;/* 2 段目のパネル（参照実装と同じ） */
--su-nav-w: 340px; /* レール 56 ＋ パネル 284。畳むと 56 */
--su-right-w: 56px; /* 右レールの列。開いても広がらない（パネルは重ねて出す） */
/* 右から出る枠の幅。**枠ごとに 1 つずつ**持つ。
skill は「同じ場所に出るものは同じ大きさ」を勧めているが、中身の量が違いすぎた。
会社情報 … 行き先 5 つの一覧。左サイドバーの鏡写し（340）で足りる
顧客の要約 … 名前 ＋ 値の対が 9 つと行き先 6 つ。340 では値が折り返す
引き換えに、開き替えると右の枠の幅が変わる（承知のうえで分けている）。
どちらも掴んで変えられる（下限 280 / 上限は画面幅の 6 割。smuto-ui.js）。 */
--su-panel-w: 340px; /* 会社情報 */
--su-drawer-w: 640px; /* 顧客の要約 */
--su-main-pad: 32px; /* 本文の左右ガター。中央寄せにしない（参照実装と同じ） */
/* ---- 速さ ----
skill SKILL.md「ボタンの状態・色・速度」の表から、**遅い側**を採る。
この画面は 1 日じゅう開いたままなので、素早く切り替わるより、
どこが変わったか目で追えるほうがよい。表の外の値は作らない。 */
--su-motion: 0.35s; /* レイアウトが動くもの（列の幅）。本文が組み直されるので他より短く */
/* 横から出入りする面。**左のレール・右のパネル・顧客の要約が同じ値を読む。**
ここを 1 か所直せば 3 つとも変わる（別々に書くと必ずずれる）。 */
--su-slide: 0.45s;
--su-slide-ease: ease;
--su-underline: 0.7s; /* 伸びる下線。動く距離が長いので、レイアウトより遅く */
--su-tint: 0.4s; /* 面の色（線より遅く） */
--su-color: 0.2s; /* 字だけの色（表は 0.15〜0.2s。その遅い端） */
}
/* ---------------- 0. 送り棒（スクロールバー）----------------
**見た目はここ 1 か所で決める**（skill SKILL.md「スクロールバー」）。
場所ごとに書き分けると、同じアプリの中でバーの太さと色が画面ごとに変わり、
作りかけに見える ―― ここまで指定が 1 つも無く OS 既定のままだったので、
太さも色も環境まかせで、表の中・右の枠・本文で同時に太い帯が出ていた。
**消さずに細くする。** display: none で丸ごと隠すと「まだ下に続く」ことが
分からなくなる（隠してよいのは、送れることが形から自明な
レールとパネルだけ ―― そちらはクラス側で上書き済み）。 */
* {
scrollbar-width: thin; /* Firefox */
scrollbar-color: var(--su-line-strong) transparent;
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
/* 角丸はここだけ 4px の例外を持たない ―― つまみも 4px でそろえる（基本規約 8） */
border-radius: 4px;
background: var(--su-line-strong);
/* 枠に貼り付いて見えないよう、透明な縁で 2px の余白を作る */
background-clip: padding-box;
border: 2px solid transparent;
}
/* 中にポインタがある間だけ強める＝いまどこを送っているかが分かる。
**skill の例（ink 28%）をそのまま写さない。** あちらは休んでいるときの色が
もっと薄い前提の値で、この系の --su-line-strong は既に紺 45% ある
―― 28% にすると載せたときに**薄くなって**、狙いと逆になる。
休んでいるとき 45% → 載せたとき 100% にして、確実に強くなる側へ振る。 */
*:hover::-webkit-scrollbar-thumb {
background: var(--su-navy);
background-clip: padding-box;
}
/* ---------------- 1. 骨格 ----------------
固定シェル: ページ全体は送らず、本文（.site-main）だけがスクロールする。 */
@media screen and (min-width: 769px) {
html, body {
height: 100%;
overflow: hidden;
}
}
.app {
display: grid;
grid-template-rows: var(--su-header-h) minmax(0, 1fr) var(--su-footer-h);
grid-template-columns: var(--su-nav-w) minmax(0, 1fr) var(--su-right-w);
grid-template-areas:
"header header header"
"sidebar main rail"
"footer footer footer";
height: 100vh;
background: #ffffff;
transition: grid-template-columns var(--su-motion) ease;
}
/* 畳むとパネルが消え、レールだけが残る（開き直す入口は消さない）。
var() 経由だと補間されない環境があるので、組み合わせを明示して書く。 */
:root[data-nav-collapsed] .app {
grid-template-columns: var(--su-rail-w) minmax(0, 1fr) var(--su-right-w);
}
/* 右は列を動かさない。参照実装と同じく、列として敷くのはレールの 56px だけで、
中身は .side-panel がその上に重なって出る（開いても本文の幅は 1px も動かない）。
列にすると、右から出るものが増えたときに片方だけ本文を押し出して幅が揺れる。 */
/* ナビを出さない画面（ログイン・新規登録・決済など show_navbar? が false）は 1 列。
背景を塗らない ―― ログインの演出は body の背景色を動かすため、上に白を敷くと見えなくなる */
.app--nonav {
grid-template-rows: minmax(0, 1fr);
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "main";
background: transparent;
}
/* ナビを出さない画面は地が生成り（上の .app--nonav が塗らないので body の色が出る）。
**貼り付く帯だけ白を敷くと、そこだけ別の面が乗ったように見える**
―― 見出しと操作の並びは、その画面の地に合わせる。 */
.app--nonav .page-head--sticky,
.app--nonav .form-actions {
background: var(--su-cream);
}
/* 参照実装（sys-sitechecker の .site-main）と同じ作り。
**中央寄せにしない。** 本文は列の左端から 32px のところで始まり、右へ伸びる。
中央寄せの器（max-width ＋ margin auto）を挟むと、画面幅ごとに見出しの位置が動き、
左サイドバーとの間が空いて「どこから本文か」が読めなくなる。 */
.site-main {
grid-area: main;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
/* 上端の余白は持たない。sticky な見出しの手前に余白があると、その高さぶん
**送ってから貼り付く**＝動いて見える。24px は .page-head--sticky が自分で持つ。 */
padding: 0px var(--su-main-pad) 0px var(--su-main-pad);
overflow-y: auto;
}
/* .contents は Bootstrap の .container と同じ要素で、max-width ＋ margin:auto を持つ。
参照実装は中央寄せの器を持たないので、ここで両方とも打ち消して列いっぱいに使う。
左右の余白は .site-main の padding が一度だけ持つ。 */
.site-main .contents {
display: flex;
flex-direction: column;
width: 100%;
max-width: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
flex: 1 0 auto;
min-height: 0;
}
/* main_20250912.css が `.registrations .contents / .payments .contents` に
`margin-top: 20px !important` を当てているため、**登録・決済の系統だけ本文が
20px 下がる**（実測: 見出しの上端が他の画面 96px に対して 116px）。
同じ強さで打ち消す ―― 上の shorthand ごと !important にすると、
打ち消したいのが 1 辺だけなのに 4 辺ぶん強くなる。 */
.registrations .site-main .contents,
.payments .site-main .contents {
margin-top: 0px !important;
}
/* サイドバーが無い画面（利用規約・特定商取引法に基づく表記・プライバシーポリシーなど）は、
列が 1 つしかないので本文が画面の左端に張り付き、右が大きく空いて読みにくい。
読み物なので中央に置き、1 行が長くなりすぎない幅にする。 */
.app--nonav .site-main .contents {
max-width: 920px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
/* 上端の余白は .page-head--sticky が自分で持つので、spacer は場所を取らない。
ただし共通パーツへ寄せていない画面（見出しが .page-head--sticky ではない画面）には
貼り付く見出しが無く、上端の余白を持つ者が居なくなるので、そこだけ spacer が受ける。 */
.site-main__top {
padding: 0px 0px 0px 0px;
}
.site-main:not(:has(.page-head--sticky)) .site-main__top {
padding: 0px 0px 24px 0px;
}
/* 見出し行の固定は fixed ヘッダー前提（top: 70px）だった。
スクロール枠（.site-main）の天面に付け直す */
@media screen and (min-width: 769px) {
table thead {
/* ページ見出しと絞り込みも天面に貼り付くので、その下から始める。
高さは題名の折り返し・ボタンの有無・欄の数で変わるため、smuto-ui.js が実測して渡す。 */
top: var(--su-sticky-h, 0px);
}
}
/* ---------------- 2. ヘッダー行 ---------------- */
/* nav_20251101_2.css が要素セレクタ header に fixed / 70px / z-index 999 を
当てている（旧・上部固定ヘッダー）。行として振る舞うよう明示的に戻す */
.site-header {
grid-area: header;
position: static;
width: auto;
height: auto;
display: flex;
align-items: center;
padding: 0px 40px 0px 40px;
background: var(--su-cream);
border-bottom: 1px solid var(--su-line-strong);
z-index: 20;
/* 本文の外にあって上に乗る「器」なので影を付ける（本文の中は平ら）。
近い影と遠い影の 2 枚重ね。遠い影 1 枚だとすぐ下の仕切りに飲まれて見えない。 */
box-shadow: 0px 1px 2px var(--su-shadow), 0px 6px 14px rgba(10, 61, 98, 0.12);
}
.site-header__brand {
display: block;
}
.site-header__brand img {
height: 56px;
width: auto;
}
/* ---------------- 3. フッター行（右下にログイン情報） ---------------- */
.site-footer {
grid-area: footer;
display: flex;
align-items: center;
/* 会社情報は右レールの「会社情報」へ移したので、残るログイン情報を右端に置く */
justify-content: flex-end;
padding: 0px 40px 0px 40px;
background: var(--su-gold);
border-top: 1px solid var(--su-line-strong);
z-index: 20;
font-size: 20px;
letter-spacing: 0.04em;
color: var(--su-navy);
white-space: nowrap;
overflow: hidden;
}
.site-footer__links {
display: flex;
align-items: center;
gap: 20px;
min-width: 0;
overflow: hidden;
}
.site-footer a {
color: var(--su-navy);
text-decoration: none;
}
.site-footer a:hover {
color: var(--su-cream);
}
.site-footer__meta {
display: flex;
align-items: center;
gap: 20px;
flex: 0 0 auto;
}
.site-footer__copyright {
opacity: 0.75;
}
/* ログイン情報（誰で入っているか）。右下に置く */
.site-footer__user {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 20px;
}
/* 役割の印（管理者・営業担当）。11px は、隣の名前が 20px なので**印だけが沈んで**
読み取れなかった。12px にして、その分だけ箱も高くする
―― 高さ 20px のままだと 12px の字が縁に触れて窮屈に見える。 */
.site-footer__role {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0px 8px 0px 8px;
border: 1px solid var(--su-navy);
border-radius: 4px;
font-size: 12px;
font-weight: 700;
}
/* ---------------- 4. 左サイドバー（2 段: レール ＋ パネル） ---------------- */
.site-sidebar {
grid-area: sidebar;
position: relative;
display: flex;
min-width: 0;
background: var(--su-cream);
border-right: 1px solid var(--su-line);
}
/* ---- レール（1 段目）----
レール自身は絶対配置で浮き、パネルは margin-left で 56px を空ける。
こうするとレールが伸びてもパネルと本文の幅は 1px も動かない。 */
.nav-rail {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: var(--su-rail-w);
display: flex;
flex-direction: column;
overflow: hidden; /* 閉じているあいだ節の名前はここで切られる */
background: var(--su-cream);
/* 境目は box-shadow で描く。border-right にすると罫が 56px の内側に入り、
アイコンの中心が 0.5px ずれる（箱の外に描かれる影なら幅も中心も動かない）。 */
box-shadow: 1px 0px 0px var(--su-line);
transition: width var(--su-slide) var(--su-slide-ease), box-shadow var(--su-slide) var(--su-slide-ease);
z-index: 40;
}
/* 載せている / キーボードで中に居るあいだ伸ばす。
浮いて本文に重なるので、このときだけ影を持つ（面は平ら・浮くものだけ影の規約）。
パネルが出ていても伸ばす（skill sidebar-rail-panel.md §3）。
覆ったままだとパネルを押せなくなるので、56px の帯を出た時点で JS が畳む
（smuto-ui.js の mousemove。mouseleave だけでは伸びた中を横切るあいだ閉じない）。 */
.site-sidebar[data-open="true"] .nav-rail,
.site-sidebar:has(.nav-rail :focus-visible) .nav-rail {
width: var(--su-rail-open-w);
box-shadow: 8px 0px 32px var(--su-shadow);
}
.nav-rail__list {
display: flex;
flex-direction: column;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style: none;
height: 100%;
}
/* 自分ごと（アカウント）・困りごと（サポート）・畳むボタンは下端へ寄せる。
margin-top: auto を持つのは**先頭の 1 つだけ**（複数に付けると隙間が分散する）。 */
.nav-rail__list--bottom {
margin: auto 0px 0px 0px;
border-top: 1px solid var(--su-line);
}
.nav-rail__list--stacked {
margin: 0px 0px 0px 0px;
}
.nav-rail__link {
position: relative;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
height: 48px;
/* 左 16px ＝ 56px の中で 24px の絵が中央に来る（16 ＋ 12 = 28） */
padding: 0px 16px 0px 16px;
background: transparent;
border: 0px;
text-align: left;
color: var(--su-navy);
font: inherit;
font-weight: bold;
cursor: pointer;
overflow: hidden; /* 行の箱からはみ出た名前の頭を残さない */
transition: color var(--su-color) ease;
}
.nav-rail__icon {
width: 24px;
flex: 0 0 24px;
text-align: center;
font-size: 16px;
}
/* 名前。閉じているあいだは枠の外にあって切られているので、
透明度だけで出し入れする（幅の計算には関わらせない） */
.nav-rail__label {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0;
transition: opacity var(--su-color) ease;
}
.site-sidebar[data-open="true"] .nav-rail__label,
.site-sidebar:has(.nav-rail :focus-visible) .nav-rail__label {
opacity: 1;
}
.nav-rail__link:hover {
color: var(--su-gold);
}
/* 現在地の線。左端に立て、hover / 選択中に伸びる
（パネルの項目で下線が左→右に伸びるのと同じ演出を 90° 回したもの） */
.nav-rail__link::before {
content: "";
position: absolute;
left: 0px;
top: 50%;
width: 2px;
height: 0px;
background: var(--su-gold);
transform: translateY(-50%);
transition: height 0.35s ease;
}
.nav-rail__link:hover::before {
height: 16px;
}
.nav-rail__link--active {
color: var(--su-gold);
}
.nav-rail__link--active::before {
height: 32px;
}
/* 畳むボタンの矢印は、畳んでいるあいだ向きを返す */
:root[data-nav-collapsed] .nav-rail__toggle .nav-rail__icon {
transform: rotate(180deg);
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ---- パネル（2 段目）----
いま居る節の中身。常に出ている（ホバーで出入りさせない）。 */
.nav-panel {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
margin: 0px 0px 0px var(--su-rail-w); /* レールのぶんを空ける */
padding: 16px 16px 8px 0px; /* 左は空けない＝行を列の左端まで届かせる */
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
}
.nav-panel::-webkit-scrollbar {
display: none;
}
:root[data-nav-collapsed] .nav-panel {
display: none;
}
/* 節の名前。この列でひとつだけ立つ見出しで、どの節に居るかはここでしか分からない。 */
.nav-panel__title {
margin: 0px 0px 16px 0px;
padding: 0px 16px 0px 16px;
font-size: 16px;
font-weight: 800;
line-height: 1.5;
letter-spacing: 0.02em;
color: var(--su-navy);
}
.nav-panel__list {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style: none;
}
/* 行。塗らない・状態は色と左から伸びる下線だけ
（既存の .nav-menu を流用するので nav.js のアクティブ判定はそのまま動く） */
.site-sidebar .nav-menu {
position: relative;
display: flex;
align-items: center;
height: 44px;
/* 行の高さと同じにして、中の a / ボタンを行いっぱいに伸ばしても字が中央に来るようにする。
縦中央を align-items に任せると、中身の高さが字の分（24px）で止まり、
行の上下 10px が押しても反応しない帯になる。 */
line-height: 44px;
padding: 0px 16px 0px 16px;
background: transparent;
border-bottom: 1px solid var(--su-line);
color: var(--su-navy);
font-weight: bold;
white-space: nowrap;
overflow: hidden;
transition: color var(--su-color) ease;
}
/* 「ログアウト」は form 越しに置かれている（Rails の button_to と同じ形）。
この器に場所を取らせないと、中のボタンが字の幅（80px）までしか広がらず、
行の右 2/3 を押しても何も起きない ―― 他の行は a が伸びるので、
同じ感覚で押した利用者には「ログアウトだけ反応しない」と映る。 */
.site-sidebar .nav-menu .button_to {
flex: 1 1 auto;
min-width: 0px;
display: flex;
align-self: stretch;
margin: 0px 0px 0px 0px;
}
.site-sidebar .nav-menu a,
.site-sidebar .nav-menu .logout-link {
flex: 1 1 auto;
display: block;
/* 行いっぱいまで押せるようにする（行の枠だけ広くても、受けるのは中身） */
align-self: stretch;
line-height: inherit;
padding: 0px 0px 0px 0px;
color: inherit;
background: transparent;
border: 0px;
text-align: left;
font: inherit;
font-weight: bold;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
.site-sidebar .nav-menu:hover {
color: var(--su-gold);
}
.site-sidebar .nav-menu.active {
color: var(--su-gold);
}
/* 選択中は下線が左から伸びる */
.site-sidebar .nav-menu::after {
content: "";
position: absolute;
left: 16px;
bottom: 0px;
height: 2px;
width: 0px;
background: var(--su-gold);
transition: width var(--su-underline) ease;
}
.site-sidebar .nav-menu:hover::after,
.site-sidebar .nav-menu.active::after {
width: calc(100% - 32px);
}
/* ---- ぶら下がる行（ヘルプの分類）とその開閉 ----
skill SKILL.md「アコーディオン（折りたたみグループ）」の作りに合わせる。 */
.nav-panel__acc {
list-style: none;
}
/* 開閉は height の補間。閉じているあいだは描画しない（字下げは動かさない） */
.nav-panel__sublist {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style: none;
overflow: hidden;
transition: height 0.4s ease;
}
.nav-panel__acc[data-collapsed="true"] .nav-panel__sublist {
display: none;
}
/* 覚えている「畳んだ」姿は、**最初の描画から**当てる。印は の早期インラインが立てる。
JS（ の直前）で畳むと、13 行の分類が一度描かれてから消える＝左が一瞬光る。
閉じる演出のあいだは下の [data-closing] が勝つ（詳細度 0,3,0 > 0,2,0）ので、
この指定があっても畳む動きは最後まで見える。 */
:root[data-help-collapsed] .nav-panel__sublist {
display: none;
}
/* 閉じる演出のあいだだけ描画を保つ */
.nav-panel__acc[data-closing="true"] .nav-panel__sublist {
display: block;
}
/* ＋／− は線の回転で描く（文字を差し替えない＝字形がフォントで変わらない）。
当たりは 24px 取る（12px の絵だけだと指でもカーソルでも押しにくい）。 */
.nav-panel__mark {
position: relative;
flex: 0 0 auto;
width: 24px;
height: 24px;
padding: 0px 0px 0px 0px;
border: 0px;
border-radius: 4px;
background: transparent;
cursor: pointer;
transition: background-color var(--su-tint) ease;
}
.nav-panel__mark:hover {
background: var(--su-gold-tint);
}
.nav-panel__mark::before,
.nav-panel__mark::after {
content: "";
position: absolute;
top: 50%;
left: 6px;
width: 12px;
height: 1px;
background: var(--su-navy);
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-panel__mark::before {
transform: translateY(-50%) rotate(0deg);
}
/* 開いているあいだは縦線を寝かせて「−」にする */
.nav-panel__mark::after {
transform: translateY(-50%) rotate(0deg);
}
.nav-panel__acc[data-collapsed="true"] .nav-panel__mark::after {
transform: translateY(-50%) rotate(90deg);
}
/* ヘルプの分類。1 つ上の「ヘルプ」にぶら下がる行なので、字下げして親子を見せる。
高さと字は本項目より一段落とす（同じだと、どちらが大項目か読めない）。
**.nav-menu の指定を書いたあとに置く。** 詳細度が同じ (0,2,0) なので、
先に書くと下線の left が 16px に戻される。 */
.site-sidebar .nav-panel__item--child {
height: 36px;
line-height: 36px; /* 本項目より 8px 低いので、中身を伸ばす基準もここで下げる */
padding: 0px 16px 0px 32px;
font-size: 13px;
font-weight: normal;
}
.site-sidebar .nav-panel__item--child::after {
left: 32px;
}
.site-sidebar .nav-panel__item--child:hover::after,
.site-sidebar .nav-panel__item--child.active::after {
width: calc(100% - 48px);
}
/* ---------------- 5. 右レール（56px・常時）と、そこから重ねて出す枠 ----------------
参照実装（sys-sitechecker の .site-rail / .side-panel）と同じ作り。
**列にしない。** 列にすると、右から出るものが増えたときに片方だけ本文を押し出して、
開くたびに本文の幅が変わる。列として常に敷くのはレールの 56px だけで、
中身はその上に重ねて出す（開いても本文は 1px も動かない）。
レールは畳んでも消さない ―― ここがパネルを開き直す唯一の入口で、
消すと「閉じたら閉じっぱなし」になる。 */
.site-rail {
grid-area: rail;
display: flex;
flex-direction: column;
align-items: center;
/* 上下の余白は spacer ではなく gap で作る（padding-top を使わない） */
gap: 8px;
padding: 0px 8px 8px 8px;
background: var(--su-cream);
/* 境目の 1px は box-shadow で描く。border は box-sizing: border-box で 56px の内側に
入るため、中身の幅が 55px になって絵の中心が 0.5px ずれる。左レールと同じ作法。 */
box-shadow: -1px 0px 0px 0px var(--su-line);
}
/* 上端はヘッダー直下に詰めず、左パネルの 1 行目と目線を合わせる。
padding-top は使わないので、レール自身の 1 行目を空ける spacer を持たせる。 */
.site-rail::before {
content: "";
display: block;
width: 100%;
height: 8px;
}
/* ボタンは 40×40・塗らない（枠と字の色だけ）。下線は付けない
―― 下線は行・タブ・テキストリンクのもので、枠で囲われた「面」はホバーで面の色を返す。
枠は平常時から出す。透明にしておくと、地（クリーム）にアイコンが浮いているだけで
押せる場所に見えない。薄い線（--su-line）で置き、載せたら濃く（--su-line-strong）、
開いていたら金（--su-gold）と、同じ枠の色だけで 3 段階を出す。 */
.rail__btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0px 0px 0px 0px;
border: 1px solid var(--su-line);
border-radius: 4px; /* 全体で 4px。ここだけ変えたいならこの値を直す */
background: transparent;
color: var(--su-mute);
font-size: 16px;
cursor: pointer;
transition: background-color var(--su-tint) ease, color var(--su-color) ease, border-color var(--su-color) ease;
}
.rail__btn:hover {
color: var(--su-gold);
border-color: var(--su-line-strong);
/* 色は面積が大きいぶん線よりゆっくり変える（0.4s） */
background: var(--su-gold-tint);
}
/* 開いているものは枠と字をアクセントに。状態は別クラスに持たせず aria-expanded から出す
＝読み上げと見た目が同じ属性を見る。 */
.rail__btn[aria-expanded="true"] {
color: var(--su-gold);
border-color: var(--su-gold);
}
/* ---- 右から重ねて出す枠 ----
左サイドバー（レール ＋ パネル）の鏡写しにする。左は枠も影も持たない地に溶けた列なので、
右だけ浮くカードにすると別物に見える。
・上下はヘッダー下端〜フッター上端にぴったり合わせる（左と同じ）
・幅は左サイドバーと同値（340）から始まる。掴んで変えられる
・レールの上に乗る。開いているあいだレールは押せないので、閉じる ✕ と
入口へ戻る見出しをパネル自身が持つ */
.side-panel {
position: fixed;
top: var(--su-header-h);
bottom: var(--su-footer-h);
right: 0px;
width: var(--su-panel-w);
max-width: 100vw;
z-index: 100; /* 右から出る枠は同時に 1 つだけ開く */
display: flex;
flex-direction: column;
/* 地は左サイドバーと同じ生成り。本文の上に乗るので、下を流れる文字が透けないよう
地の色そのもので塞ぐ＝面を起こす塗りではない。 */
background: var(--su-cream);
border-left: 1px solid var(--su-line-strong); /* 左サイドバーの border-right と対称 */
transform: translateX(100%);
visibility: hidden;
transition: transform var(--su-slide) var(--su-slide-ease), visibility 0s linear var(--su-slide);
}
.side-panel[data-open="true"] {
transform: translateX(0px);
visibility: visible;
/* 開くときは先に見えてから滑る（閉じるときだけ visibility を遅らせる） */
transition: transform var(--su-slide) var(--su-slide-ease), visibility 0s linear 0s;
}
/* 見出しの帯。左パネルは見出しに 16px の左右余白を持つので、そこへ合わせる。
仕切り線は引かない（左パネルも持たない）。 */
.side-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 0px 0px 16px 0px;
padding: 16px 16px 0px 16px;
}
/* 見出しは「入口へ戻る（＝閉じる）」ボタンを兼ねる。パネルがレールを覆うので、
レールを押し直して戻る道が塞がるため、その役目をここが持つ。
押せることは行やタブと同じく左から伸びる下線で示す（塗らない・枠も持たない）。 */
.side-panel__title {
position: relative;
margin: 0px 0px 0px 0px;
padding: 0px 0px 4px 0px; /* 文字と下線の隙間（近すぎ防止） */
border: 0px;
font-size: 16px; /* 左パネルの見出し（.nav-panel__title）と同じ段 */
font-weight: 800;
line-height: 1.5;
letter-spacing: 0.02em;
text-align: left;
color: var(--su-navy);
background: transparent;
cursor: pointer;
transition: color var(--su-color) ease;
}
.side-panel__title::after {
content: "";
position: absolute;
left: 0px;
bottom: 0px;
width: 0px;
height: 1px;
background: var(--su-gold);
transition: width var(--su-underline) ease;
}
.side-panel__title:hover {
color: var(--su-gold);
}
.side-panel__title:hover::after {
width: 100%;
}
/* 閉じるボタンは 2 本線の回転で描く（× の文字を置かない＝字形がフォントで変わらない）。
パネルがレールを覆うので、閉じる手段はここが受け持つ。 */
.side-panel__close {
position: relative;
width: 28px;
height: 28px;
padding: 0px 0px 0px 0px;
border: 1px solid transparent;
border-radius: 4px;
background: transparent;
cursor: pointer;
transition: background-color var(--su-tint) ease, border-color var(--su-color) ease;
}
.side-panel__close:hover {
border-color: var(--su-line-strong);
background: var(--su-navy-tint);
}
.side-panel__close::before,
.side-panel__close::after {
content: "";
position: absolute;
left: 7px;
top: 50%;
width: 12px;
height: 1px;
background: var(--su-navy);
}
.side-panel__close::before {
transform: translateY(-50%) rotate(45deg);
}
.side-panel__close::after {
transform: translateY(-50%) rotate(-45deg);
}
/* 本文の送りはここが受ける。余白は左パネル（.nav-panel）と同じ作法で、
左は空けない＝行の見た目を枠の左端まで届かせ、字下げは行自身の 16px が作る。
ここで左を空けると、見出し（.side-panel__head の 16px）と字の頭が 16px ずれる。 */
.side-panel__body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 0px 16px 8px 0px;
scrollbar-width: none;
}
.side-panel__body::-webkit-scrollbar {
display: none;
}
.side-panel__list {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style: none;
}
.side-panel__note {
margin: 24px 0px 0px 0px;
padding: 0px 16px 0px 16px;
font-size: 11px;
line-height: 1.8;
color: var(--su-mute);
}
/* 行。左のパネルと同じ作りだが、こちらは「名前 ＋ 中身 ＋ 行き先」の 3 段なので
高さを固定せず、上下対称の padding で作る（折り返す行は height だと切れる）。 */
.side-panel .nav-menu {
position: relative;
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 16px 12px 16px;
background: transparent;
border-bottom: 1px solid var(--su-line);
color: var(--su-navy);
font-weight: bold;
text-decoration: none;
transition: color var(--su-color) ease;
}
.side-panel .nav-menu:hover {
color: var(--su-gold);
}
.side-panel .nav-menu::after {
content: "";
position: absolute;
left: 16px;
bottom: 0px;
height: 2px;
width: 0px;
background: var(--su-gold);
transition: width var(--su-underline) ease;
}
.side-panel .nav-menu:hover::after {
width: calc(100% - 32px);
}
.side-panel__label {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
line-height: 1.4;
}
/* 別のタブで開くものに印を付ける（この中の画面と見分けが付くように） */
.side-panel__ext {
font-size: 10px;
color: var(--su-mute);
}
/* 何が書いてあるか。読ませたいので折り返しを許す */
.side-panel__note-line {
font-size: 11px;
font-weight: 400;
line-height: 1.6;
color: var(--su-mute);
}
/* 行き先。長いので折り返さず、入りきらない分は省略する */
.side-panel__url {
font-size: 10px;
font-weight: 400;
line-height: 1.4;
color: var(--su-mute);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.8;
}
/* ---------------- 5.5 ドロワー（一覧の行を選んだときの要約） ----------------
skill references/overlays.md §2。会社情報のパネル（居座る）とは役目が違い、
こちらは**一時的に覆って見る**もの。暗幕を敷き、上下右を 12px 空けて浮かせる
―― 画面の縁に貼り付くと「ブラウザの一部」に見え、一時的なものに見えない。
右から出る枠は**同時に 1 つだけ**（smuto-ui.js が片方を閉じる）。 */
.drawer {
position: fixed;
inset: 0px;
z-index: 100;
/* 暗幕を敷かないので、枠の外は下の一覧が受ける（別の行をそのまま押せる）。
器は場所を決めるためだけに画面いっぱいを覆っている。 */
pointer-events: none;
visibility: hidden;
/* visibility は補間しないが「遅れて切り替わる」。遅延はパネルと同じ秒数にする
―― ずれると途中で消えるか、消えた後もクリックを吸い続ける。 */
transition: visibility 0s linear var(--su-slide);
}
.drawer[data-open="true"] {
visibility: visible;
transition: visibility 0s linear 0s;
}
.drawer__panel {
pointer-events: auto;
position: absolute;
top: var(--su-header-h);
right: 0px;
bottom: var(--su-footer-h);
width: var(--su-drawer-w);
max-width: 100vw;
display: flex;
flex-direction: column;
border-left: 1px solid var(--su-line-strong);
background: var(--su-cream);
box-shadow: -2px 0px 12px var(--su-shadow);
transform: translateX(100%);
transition: transform var(--su-slide) var(--su-slide-ease); /* 出入りは同じ経路・同じ速さ */
}
.drawer[data-open="true"] .drawer__panel {
transform: translateX(0px);
}
/* 見出しは常に見えている（送るのは中身だけ） */
.drawer__head {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
height: 56px;
padding: 0px 16px 0px 16px;
border-bottom: 1px solid var(--su-line);
}
.drawer__title {
margin: 0px 0px 0px 0px;
font-size: 16px;
font-weight: 800;
line-height: 1.5;
letter-spacing: 0.02em;
color: var(--su-navy);
}
/* 閉じるは 2 本線の回転で描く（× の文字を置かない＝字形がフォントで変わらない） */
.drawer__close {
position: relative;
flex: 0 0 auto;
width: 28px;
height: 28px;
padding: 0px 0px 0px 0px;
border: 1px solid transparent;
border-radius: 4px;
background: transparent;
cursor: pointer;
transition: background-color var(--su-tint) ease, border-color var(--su-color) ease;
}
.drawer__close:hover {
border-color: var(--su-line-strong);
background: var(--su-navy-tint);
}
.drawer__close::before,
.drawer__close::after {
content: "";
position: absolute;
left: 7px;
top: 50%;
width: 12px;
height: 1px;
background: var(--su-navy);
}
.drawer__close::before {
transform: translateY(-50%) rotate(45deg);
}
.drawer__close::after {
transform: translateY(-50%) rotate(-45deg);
}
.drawer__body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 16px 16px 24px 16px;
/* 中身を縦に伸ばすため（下の「短い中身でも並びは下端」）。
送る箱そのものを flex にしておき、中の箱に伸びしろを渡す。 */
display: flex;
flex-direction: column;
}
/* **中身が短くても、操作の並びは枠の下端に置く。**
貼り付け（sticky）が効くのは「送るとき」だけなので、入力が 3 つしか無い画面
（年賀状テンプレート等）では並びが真ん中で止まり、下に大きな空きが残っていた。
中身の箱を枠いっぱいに伸ばし、並びを下へ押しやる（margin-top: auto）。
`flex: 1 0 auto` ―― 伸びるが**縮まない**。縮ませると、入力が多い画面で
枠の高さに押し込められて送れなくなる。 */
.drawer__body > .drawer-form,
.drawer__body > .detail {
flex: 1 0 auto;
display: flex;
flex-direction: column;
min-height: 0;
}
/* ---- トースト（layouts/toast）----
報せは操作を止めない。右下に積み、時間で消える（閉じるボタンでも消せる）。
**影を持ってよい数少ないもの**の 1 つ ―― 本文の外にあって上に乗るため。 */
/* 報せは**右上**に出す。目線が最初に行くのは画面の上で、
下だと本文を読んでいる間に消えてしまう。
置くのは**ヘッダー行の中**（ロゴは左端なので右側が空いている）。
ヘッダーの下に出すと、見出しやその横のボタンに重なって押せなくなる。 */
.toast-stack {
position: fixed;
right: 16px;
top: 20px;
bottom: auto;
z-index: 300; /* 右から出る枠（100）より上。モーダルの下 */
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
pointer-events: none; /* 隙間は本文を押せるまま */
}
/* 狭い画面はヘッダーが 70px の固定（main_20250912.css の .contents の余白と同じ根拠）。
クライアントは 40px。左右いっぱいに広げて読みやすくする。 */
@media screen and (max-width: 768px) {
.toast-stack {
top: 86px;
right: 12px;
left: 12px;
align-items: flex-end; /* 1 行なので、広げず中身なりの幅にする */
}
.client .toast-stack {
top: 56px;
}
}
/* vanilla-base.css が `.toast:not(.show) { display: none }` を持っている
（Bootstrap 由来。あちらは .show を付けて出す作り）。こちらは出すときに
足すクラスを持たないので、**同じ強さの指定で上書きする**（読み込みは後）。
.show を付けて回る作りにはしない ―― 出す・消すの合図が 2 系統に増える。 */
.toast-stack .toast {
display: flex;
}
/* **報せは 1 行で出す。** 折り返すと、右上の小さな面が 2〜3 行に伸びて
ヘッダーの高さを越え、読む前に目が「量」に取られる。
幅は中身なり（`width: auto`）にして、長すぎるときだけ端で切る。 */
.toast {
pointer-events: auto;
display: flex;
align-items: center; /* 1 行なので上寄せにしない */
gap: 12px;
width: auto;
max-width: calc(100vw - 32px);
padding: 14px 14px 14px 16px;
/* **面の左辺に縦線を置かない**（skill 基本規約 8）。置くと角丸を崩さざるを得ず、
4px 統一に例外ができる。種別は**枠線と文字の色**で示す。 */
border: 1px solid var(--su-line-strong);
border-radius: 4px;
background: #ffffff;
box-shadow: 0px 2px 12px var(--su-shadow);
animation: su-toast-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.toast--success { border-color: var(--su-gold); }
.toast--notice { border-color: var(--su-navy); }
.toast--alert { border-color: var(--su-gold); }
.toast--danger { border-color: #b02a37; color: #b02a37; }
.toast[data-leaving="true"] {
animation: su-toast-out 0.3s ease both;
}
/* 右上に置いたので、上から下りてきて、上へ戻って消える */
@keyframes su-toast-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0px); }
}
@keyframes su-toast-out {
from { opacity: 1; transform: translateY(0px); }
to { opacity: 0; transform: translateY(-8px); }
}
.toast__body {
flex: 1 1 auto;
min-width: 0;
}
.toast__text {
margin: 0px 0px 0px 0px;
font-size: 14px;
line-height: 1.7;
color: var(--su-ink);
/* 1 行で出す。入りきらないときは折らずに端で切る
（折ると面の高さが変わり、積んだときに下の報せが飛ぶ）。 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.toast__reasons {
margin: 8px 0px 0px 0px;
padding: 0px 0px 0px 18px;
font-size: 14px;
line-height: 1.7;
color: var(--su-ink);
}
/* 理由も 1 つにつき 1 行。件数ぶん縦に積むので、折り返すと一気に伸びる */
.toast__reasons > li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 閉じるは 2 本の線を回して描く（画像もフォントも使わない） */
.toast__close {
flex: 0 0 auto;
position: relative;
width: 24px;
height: 24px;
padding: 0px 0px 0px 0px;
border: 0px;
border-radius: 4px;
background: transparent;
cursor: pointer;
}
.toast__close::before,
.toast__close::after {
content: "";
position: absolute;
top: 50%;
left: 5px;
width: 14px;
height: 1px;
background: var(--su-mute);
transition: background-color 0.2s ease;
}
.toast__close::before { transform: translateY(-50%) rotate(45deg); }
.toast__close::after { transform: translateY(-50%) rotate(-45deg); }
.toast__close:hover::before,
.toast__close:hover::after { background: var(--su-navy); }
/* ---- ドロワーの中の編集フォーム（gifts/_drawer_form）----
フォーム側は col-7 / col-lg-4 … の桁組みで、画面幅を基準に割り付ける。
ドロワーは幅 340px 前後なので、その割合のままだとラベルも入力も潰れる。
**この枠の中だけ**桁組みを畳んで、ラベルの下に入力を置く。 */
.drawer__body .form-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0px 0px 16px 0px;
}
/* 桁の幅（col-*）と字下げ（ms-lg-5）を消す。「必須」の印と項目名は同じ行に並べる */
.drawer__body .form-list > div {
width: auto;
max-width: none;
flex: 0 0 auto;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
/* 入力の入っている桁だけ 1 行まるごと使う（項目名の下に入力を置く） */
.drawer__body .form-list > div:has(.form-control),
.drawer__body .form-list > div:has(.form-select),
.drawer__body .form-list > div:has(textarea),
/* ラジオ・チェックは .form-check / .form-check-custom と名前が割れているので、
中の input を見る（名前が増えてもここを直さずに済む） */
.drawer__body .form-list > div:has(.form-check-input) {
flex: 1 0 100%;
/* 選択肢を枠の端まで散らさない。狭い枠では両端の丸が縁に貼り付いて欠けて見える。
.justify-content-between（vanilla-base）が !important なので打ち消しにも要る。 */
justify-content: flex-start !important;
flex-wrap: wrap;
gap: 8px 24px;
}
/* 単位（「円」など）は入力の隣に置く。入力が width:100% のままだと単位だけ次の行へ折れる。
**1 行の入力だけ**を対象にする。textarea を持つ桁まで横並びにすると、備考のように
注記（「※ 1,000 文字以内（0 / 1,000）」）を連れている桁で、狭い枠では注記が
入力の左に居座って 2 行に折れ、入力もそのぶん痩せる（実測）。
桁を block のままにしておけば、注記が上・入力が下に自然に積まれる。 */
.drawer__body .form-list > div:has(.form-control):not(:has(textarea)),
.drawer__body .form-list > div:has(.form-select):not(:has(textarea)) {
display: flex;
align-items: center;
flex-wrap: nowrap; /* 単位が次の行へ落ちない。入力側が縮んで場所を空ける */
gap: 8px;
}
/* 注記は入力から少しだけ離す（行がぴったり付くと入力の縁と重なって見える） */
.drawer__body .form-list > div:has(textarea) > span {
display: block;
margin-bottom: 4px;
}
.drawer__body .form-list .form-control,
.drawer__body .form-list .form-select,
.drawer__body .form-list textarea {
flex: 1 1 auto;
min-width: 0;
}
/* .form-check-input は margin-left: -24px を持つ（.form-check の 24px 字下げと対で組む）。
.form-check-custom はその字下げを持たないので、そのぶん左へはみ出す
―― 枠の中では最初の 1 つが縁に切られて見えるので、ここで相殺する。
操作の並び（.form-actions）に置いたときも同じで、左端の四角が本文の外へ出る
（実測: 規約の同意欄で、本文が x=32 から始まるのに四角は x=8 で半分切れていた）。 */
.drawer__body .form-check-custom .form-check-input,
.form-actions .form-check-custom .form-check-input {
margin-left: 0px;
}
/* 操作の並び。上に線を引いて入力の続きと切る（線が無いと最後の項目に見える）。
**枠の下端に貼り付ける。** 入力の数は画面ごとに違い（3 項目の記念日から
10 項目のギフトまで）、流したままだと「更新する／削除がどこにあるか」が
中身の量で変わる。真ん中がいくつでも、押す場所は同じ位置に置く。
・地はパネルと同じ生成り ―― 白を敷くと帯だけ別の面に見える
・bottom は枠の padding-bottom（24px）ぶん下げる。0 だと下に隙間が空いて浮く
・左右も枠の余白ぶん外へ広げて、地と線を端まで届かせる */
.drawer-form__actions {
position: sticky;
bottom: -24px;
z-index: 1;
display: flex;
align-items: center;
gap: 12px;
/* 上が auto ＝ 余った高さを全部こちらが吸って、並びが下端へ落ちる。
中身が長くて余りが無いときは 0 になる（＝これまでどおり中身の直後）。 */
margin: auto -16px -24px -16px;
padding: 16px 16px 16px 16px;
border-top: 1px solid var(--su-line-strong);
background: var(--su-cream);
}
/* 画面本体（編集ページ）の操作の並び。**ドロワーの中と同じ形にする** ――
同じ「更新する／削除」が、ページで開いたときと枠で開いたときで
別の場所・別の強さに見えると、どちらが本当の操作か分からなくなる。
それまでは「戻る／更新する」を中央に置き、削除だけがその下にごみ箱の絵で
ぶら下がっていた。並びの外にあるものは、押すまで何が起きるか読めない。 */
.form-actions {
/* 枠の中（.drawer-form__actions）と同じく**下端に貼り付ける**。
入力が長い画面では、いちばん下まで送らないと更新するが出てこない。
送り枠は .site-main。地は本文と同じ白（パネルの生成りではない）。 */
position: sticky;
bottom: 0px;
z-index: 1;
display: flex;
align-items: center;
gap: 12px;
/* 上が auto ＝ 余った高さを全部こちらが吸って、並びが下端へ落ちる
（ドロワーの .drawer-form__actions と同じ作り）。**sticky だけでは足りない** ――
入力が少ない画面は送る余地が無いので貼り付く先が無く、並びが画面の途中で止まる
―― 実測: ギフト新規登録・記念日新規登録で、下端まで 71px 空いたところに帯が浮いていた。
中身が長くて余りが無いときは 0 になる（＝これまでどおり中身の直後）。
下の -48px は .page の padding-bottom と対。無いと、いちばん下まで送り切った
ところで帯の下に 48px の隙間が残り、貼り付いていたものが急に浮いて見える。 */
margin: auto 0px -48px 0px;
padding: 16px 0px 16px 0px;
border-top: 1px solid var(--su-line-strong);
background: #ffffff;
}
/* **ここだけ塗る。** 枠だけだと、右端の削除（赤枠）と強さが同じに見えて
どちらが主な操作か読めない。押す先を面で示す。 */
.drawer-form__actions .btn-custom,
.form-actions .btn-custom {
background-color: var(--su-navy);
border-color: var(--su-navy);
color: var(--su-cream);
}
.drawer-form__actions .btn-custom:hover,
.form-actions .btn-custom:hover {
background-color: var(--su-gold);
border-color: var(--su-gold);
color: var(--su-navy);
}
/* モーダルの主なボタンも同じ扱い（使い方のご説明「次へ」）。
**文字色を足さないと読めない。** other_20260414.css に
`.modal-footer .btn-primary { background-color: #0A3D62 }` が残っていて、
こちらの `.btn-primary`（枠だけ・文字は藍）より**詳しさが上**なので、
**背景だけ藍のまま・文字も藍**になり、ボタンの中身が消えていた。 */
.modal-footer .btn-primary {
background-color: var(--su-navy);
border-color: var(--su-navy);
color: var(--su-cream);
}
.modal-footer .btn-primary:hover {
background-color: var(--su-gold);
border-color: var(--su-gold);
color: var(--su-navy);
}
/* まだ何も変えていないあいだ（data-dirty-guard）。塗りは残したまま力を抜く
―― 枠だけに戻すと「押せない」ではなく「別のボタン」に見える。 */
.drawer-form__actions .btn-custom:disabled,
.form-actions .btn-custom:disabled {
background-color: var(--su-navy-tint);
border-color: transparent;
color: var(--su-mute);
}
/* 取り返しのつかない操作は同じ行の**右端**へ離す（隣り合わせだと押し間違える） */
.drawer-form__delete,
.form-actions__delete {
margin: 0px 0px 0px auto;
}
/* 削除の確認をドロワーの枠の中で受けるのはやめた（→ 改善レポート 全体.md 41）。
編集画面から開いたときと同じ窓（layouts/delete_confirm_modal）に寄せてある。
.drawer-form__confirm の指定はどこからも参照されなくなったので外した。 */
.drawer-form__error {
margin: 0px 0px 16px 0px;
font-size: 14px;
line-height: 1.6;
color: #b02a37;
}
.drawer__loading {
margin: 0px 0px 0px 0px;
font-size: 13px;
color: var(--su-mute);
}
/* ---- 中身（users/_panel）----
**字は 16px と 14px の 2 段だけで組む。**
16px … 項目の名前（弊社担当者・電話番号…）と件数の名前
14px … その中身
11px・10px を混ぜていたときは、名前が背景の模様のように沈んで
「どこからどこまでが 1 項目か」が読めなかった。段を 2 つに絞り、
切れ目は下線が受け持つ（大小の差ではなく線で分ける）。 */
.detail__lead {
display: flex;
align-items: center;
gap: 16px;
margin: 0px 0px 16px 0px;
}
.detail__icon {
flex: 0 0 56px;
width: 56px;
height: 56px;
border-radius: 4px;
object-fit: cover;
}
.detail__lead-text {
min-width: 0;
}
.detail__name {
margin: 0px 0px 4px 0px;
font-size: 16px;
font-weight: 800;
line-height: 1.4;
color: var(--su-navy);
}
.detail__kana {
margin: 0px 0px 4px 0px;
font-size: 14px;
line-height: 1.4;
color: var(--su-mute);
}
.detail__id {
margin: 0px 0px 0px 0px;
font-size: 14px;
line-height: 1.4;
color: var(--su-mute);
font-variant-numeric: tabular-nums;
}
.detail__badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0px 0px 16px 0px;
padding: 0px 0px 0px 0px;
list-style: none;
}
/* 状態は枠と字の色で示す（塗らない） */
.detail__badge {
display: inline-flex;
align-items: center;
gap: 4px;
height: 32px;
padding: 0px 12px 0px 12px;
border: 1px solid var(--su-line-strong);
border-radius: 4px;
font-size: 14px;
color: var(--su-mute);
}
.detail__badge--on {
border-color: var(--su-gold);
color: var(--su-gold);
}
.detail__badge--warn {
border-color: #b3261e;
color: #b3261e;
}
/* 件数も「名前 16px ＋ 中身 14px」。下の項目と同じ組み方にそろえる */
.detail__counts {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin: 0px 0px 16px 0px;
padding: 0px 0px 16px 0px;
border-bottom: 1px solid var(--su-line);
list-style: none;
}
.detail__counts li {
flex: 1 1 120px;
min-width: 0;
}
.detail__count-label {
display: block;
margin: 0px 0px 4px 0px;
font-size: 16px;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--su-mute);
}
.detail__count-value {
display: block;
font-size: 14px;
line-height: 1.7;
color: var(--su-ink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* 項目名と中身。折り返す中身があるので高さは固定しない。
**1 項目ごとに下線を引く。** 名前と中身の字の大きさは近い（16 と 14）ので、
切れ目は大小ではなく線が受け持つ。値が 2 行になっても、どこで切れているかが読める。
線は「行のベースライン」――このレイアウトで許されている 3 つの用途の 1 つ。 */
.detail__list {
margin: 0px 0px 24px 0px;
}
/* dt と dd を 1 かたまりにする。パラパラの単位を「項目」にするため
（dt / dd を別々に流すと、名前と中身がずれて出てくる）。 */
.detail__row {
display: block;
}
.detail__list dt {
margin: 0px 0px 4px 0px;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--su-mute);
}
.detail__list dd {
margin: 0px 0px 12px 0px;
padding: 0px 0px 12px 0px;
border-bottom: 1px solid var(--su-line);
font-size: 14px;
line-height: 1.7;
color: var(--su-ink);
word-break: auto-phrase;
/* 切れ目の無い字（URL・英字の連続）はどこでも折る。auto-phrase は文節で折る指定なので、
切れ目が 1 つも無い字は**折らずに伸び続ける** ―― 実測: 備考に貼られた URL 4 本で
枠の中身が 4,829px になり、枠を 4,206px はみ出していた（横に送らないと読めない）。
anywhere は「入り切らないときだけ」折るので、日本語の文節折りはそのまま残る。 */
overflow-wrap: anywhere;
}
.detail__list dd a {
color: var(--su-navy);
}
.detail__empty {
color: var(--su-mute);
}
/* 行き先。ボタンは既定の寸法（高さ 40 / 字 14 / 太さ 700）にそろえる */
.detail__links {
/* **枠の下端に貼り付ける。** 中身が長いと、いちばん下まで送らないと行き先が
出てこない（ギフト発注の要約では 4 件で 1 画面ぶん送ることになった）。
送り枠は .drawer__body / .side-panel__body なので、その中で sticky にする。
・地を敷く ―― 透明のままだと下を流れる本文と文字が重なって読めない
・上に線を引く ―― 無いと最後の項目の続きに見える
・**地はパネルと同じ生成り。** 白を敷くと、そこだけ別の面が乗ったように浮く
・最後の子なので、いちばん下まで送れば自然にそこへ収まる（浮いたままにしない） */
position: sticky;
bottom: 0px;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0px 0px 0px 0px;
padding: 16px 0px 16px 0px;
border-top: 1px solid var(--su-line-strong);
background: var(--su-cream);
}
/* 枠の内側の余白ぶん外へ広げて、地と線を端まで届かせる
（padding は .drawer__body / .side-panel__body それぞれの値と対で持つ） */
.drawer__body .detail__links {
/* bottom は枠の下の余白ぶん**下げる**。0 のままだと、貼り付く先が中身の箱の下端
（＝枠の下端より padding-bottom ぶん上）になり、下に隙間が空いて浮いて見える。
上が auto なのは、中身が短いときに並びを下端まで落とすため
（.drawer-form__actions と同じ理由）。 */
bottom: -24px;
margin: auto -16px -24px -16px;
padding: 16px 16px 16px 16px;
}
.side-panel__body .detail__links {
bottom: -8px;
margin: 0px -16px -8px 0px;
padding: 16px 16px 16px 0px;
}
.detail__links .btn {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0px 24px 0px 24px;
font-size: 14px;
font-weight: 700;
}
/* ---- 中身をパラパラと出す（skill parts/stagger）----
値は skill と同じ（薄さ 0 → 1 ／ 6px 上から ／ 0.5s ／ cubic-bezier(0.22, 1, 0.36, 1)）。
`backwards` を付けて、遅延で待っているあいだも「出る前の姿」を保つ
―― 付けないと、待っているあいだだけ最終状態で見えてしまう。
**刻みは 60ms で固定**（smuto-ui.js が animation-delay を書く）。項目数から
割り出すと、行数の違う一覧どうし・一覧と枠の中とで速さが変わり、
画面を移るたびに別の演出に見える。skill の 100ms 刻みは項目 7 つ前提で、
ここは 12 前後あるため詰めている。 */
@keyframes su-stagger-in {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0px);
}
}
/* 並んでいるものを上から順に出す。枠の中（ドロワー）だけでなく、
一覧の行・ヘルプの項目・分類の札にも同じ演出を当てる。
**隠すのは CSS（描画の時点）・出すのは JS（印と刻み）。**
JS だけで隠すと、一度出てから消えて出直すので、開くたびに行が瞬く。
隠すのは JS が動く環境だけ（ のインラインが data-js-ready を立てる）。 */
html[data-js-ready] .table-contents,
html[data-js-ready] .help-index .help-card,
html[data-js-ready] .help-group [data-help-item],
html[data-js-ready] .mypage-menu {
opacity: 0;
}
/* both ＝ 始まる前は最初の姿・終わったら最後の姿で止まる。
backwards だと終わったあと上の opacity: 0 に戻ってしまう。 */
[data-stagger] {
animation: su-stagger-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* 準備中の札（.disabled-menu）は落として見せる ―― その約束が上の演出で消えていた。
`.disabled-menu { opacity: 0.5 }`（other_20260414.css）は**通常の宣言**で、
animation が持つ値のほうが強い。su-stagger-in は opacity: 1 で終わるので、
出そろった時点で落としたはずの札が普通の札と同じ濃さに戻る
―― `pointer-events: none` は効いたままなので、**押せないのに押せそうに見える**。
終わりが 0.5 の keyframe に差し替える（パラパラの動きはそのまま）。 */
@keyframes su-stagger-in-muted {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 0.5;
transform: translateY(0px);
}
}
.disabled-menu[data-stagger] {
animation-name: su-stagger-in-muted;
}
/* ---- 規約・方針の長文（利用規約・プライバシーポリシー・特商法）----
**伏せるのは外側**。条ごとの箱（.pages-item）は smuto-ui.js が作るので、
CSS だけでは先に隠しておけない ―― 伏せずにやると、素の文章が一度見えてから
包み直されて瞬く。箱に印が付いた時点（data-staggered）で外側を戻す。
その時点で箱は animation の backwards 側（＝出る前の姿）に居る。 */
html[data-js-ready] .pages-content,
html[data-js-ready] .pages-tokushoho-content {
opacity: 0;
}
html[data-js-ready] .pages-content[data-staggered="true"],
html[data-js-ready] .pages-tokushoho-content[data-staggered="true"] {
opacity: 1;
}
/* ---- 右の枠の幅を掴んで変える（skill parts/side-panel-resize）----
左端の細い帯を掴んで動かす。**右端からの距離がそのまま幅**になる。
枠ごとに自分の変数（--su-panel-w / --su-drawer-w）を書き換える。
どの変数を書くかは JS が帯に持たせる（CSS 側には判定を置かない）。 */
.panel-resizer {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
/* 8px。細いと掴めず、太いと中身の送り棒と当たり判定が重なる */
width: 8px;
cursor: ew-resize;
z-index: 5;
}
/* 掴めることが分かる印。**常時は出さない**（飾りを増やさない）。
枠にカーソルが入ったら出す ―― 帯は細くて狙いにくいので、枠のどこに居ても分かるように。 */
.panel-resizer::after {
content: "";
position: absolute;
top: 50%;
left: 2px;
width: 2px;
height: 32px;
border-radius: 4px;
background: var(--su-line-strong);
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.15s ease;
}
.side-panel:hover .panel-resizer::after,
.drawer__panel:hover .panel-resizer::after,
.panel-resizer:hover::after {
opacity: 1;
}
/* 掴む手前で当たり判定を見せる。塗りではなく地を薄く透かすだけ */
.panel-resizer:hover {
background: var(--su-gold-tint);
}
/* 掴んでいるあいだ。字が選ばれないようにし、カーソルを画面全体で固定する
（帯から外れても掴んだままなので、カーソルが戻ると掴んでいないように見える）。 */
body.panel-resizing {
user-select: none;
cursor: ew-resize;
}
/* **遷移を切る。** 枠の出入りに掛けている 0.5s がドラッグ中も効くと、
指の位置から枠が 0.5s 遅れて付いてきて、掴んでいる感じが消える。 */
body.panel-resizing .side-panel,
body.panel-resizing .drawer__panel {
transition: none;
}
/* ---------------- 6. 画面の共通パーツ ----------------
一覧・詳細で使い回す部品。画面ごとに col-lg-N / offset-lg-N を書かない
（書いていた結果、見出しの位置と本文の幅が画面ごとにバラバラになっていた）。
対応する Blade は resources/views/components/ にある。 */
/* 本文の器。幅も左右余白も .site-main が決めるので、ここは下の余白だけ持つ。
参照実装に合わせて中央寄せにしない（max-width も margin:auto も置かない）。 */
/* 表が残りの高さを埋められるよう、縦に積む器にする。
既定は min-height ―― フォームのように中身が縦に長い画面では伸びてほしいため
（height を固定すると、はみ出した分の下に 48px の余白が付かない）。 */
.page {
display: flex;
flex-direction: column;
min-height: 100%;
width: 100%;
padding: 0px 0px 48px 0px;
}
/* 入力の器（