const style=document.createElement('style');
style.textContent=`
/* ==========================================================================
1. 変数定義 (Design Tokens)
========================================================================== */
:root {
/* ==================== カラーパレット ==================== */
/* --- ブランドカラー / アクセント --- */
--color-main: #004080; /* メインカラー */
--color-accent: #50c6ff; /* アクセント補助色 */
--color-primary: #2b6cb0; /* プライマリーカラー */
--color-error: #d9534f; /* エラー強調色 */
--color-ui-active: #abc3d9; /* UIの強調・アクティブ時の質感用 */
/* --- テキスト / リンク --- */
--color-text: #2d3748; /* 汎用文字色 */
--color-auxiliary: #8290a1; /* 補助文字色 / 注意書きなど */
--color-link: #0056b3; /* リンク文字色 */
--color-white: #f5faf9; /* 白系文字色 */
/* --- 背景色 --- */
--bg-card: #fcfcfc;
--bg-header: rgba(230, 242, 255, 0.98); /* ヘッダー背景 */
--bg-dark: rgba(20, 25, 30, 0.9); /* ダーク背景 */
--bg-light: rgba(230, 239, 248, 0.9); /* ライト背景 */
--bg-error: #fff5f5; /* エラー背景 */
--bg-hover: rgba(255, 255, 255, 0.1); /* ホバー時背景 */
--bg-input: #f8fafc ; /* 入力フィールド背景 */
--bg-button: #596674; /* ボタン背景 */
--bg-button-hover: #6b7b92; /* ボタンホバー背景 */
--bg-subtitle: #525b6c; /* サブタイトル背景 */
--bg-subtitle-hover: #3d4a5e; /* サブタイトルホバー背景 */
--border-color: #cfdde6; /* ボーダー色 */
/* ==================== タイポグラフィ ==================== */
--main-font: 'Segoe UI', sans-serif;
/* --- フォントサイズ --- */
--fz-small: 0.675rem; /* 10.8px */
--fz-normal: 0.75rem; /* 12px */
--fz-medium: 0.875rem; /* 14px */
--fz-body: 1rem; /* 16px */
/* --- フォントウェイト --- */
--fw-normal: 400;
--fw-medium: 500;
--fw-semi-bold: 600;
--fw-bold: 700;
--fw-extra-bold: 800;
/* ==================== シャドウ / 視覚効果 ==================== */
--glow-blue: rgba(0, 100, 255, 0.25);
--glow-accent: 0 0 15px rgba(0, 229, 255, 0.4);
--shadow-light: rgba(255, 255, 255, 0.8);
--shadow-dark: rgba(174, 194, 224, 0.6);
/* --- 外側の影（浮き出し・Neumorphism） --- */
--box-shadow-normal: 2px 2px 4px rgba(80, 120, 160, 0.25),
-2px -2px 4px rgba(255, 255, 255, 0.4);
--box-shadow-raise: 4px 4px 10px rgba(163, 177, 198, 0.4),
-4px -4px 10px rgba(255, 255, 255, 0.9);
/* --- 発光エフェクト（Glow） --- */
--box-shadow-glow: 0 0 8px rgba(80, 198, 255, 0.4),
0 0 16px rgba(80, 198, 255, 0.1),
inset 0 0 4px rgba(80, 198, 255, 0.2);
/* --- 内側の影（窪み・Focus） --- */
--box-shadow-inset: inset 2px 2px 4px rgba(80, 120, 160, 0.25),
inset -2px -2px 4px rgba(255, 255, 255, 0.4);
--box-shadow-focus: inset -1px -1px 3px rgba(255, 255, 255, 0.8),
inset 1px 1px 3px rgba(0, 0, 0, 0.05),
0 0 18px var(--glow-blue);
/* ==================== レイアウト / サイズ ==================== */
--w-container: 70rem; /* 最大コンテナ幅 */
--block-size: 0.5625rem; /* 基本単位(9px) */
/* --- 角丸 --- */
--radius-small: 8px;
--radius-normal: 1rem;
--radius-large: 2rem;
/* ==================== アニメーション設定 ==================== */
--dur-action: 0.1s; /* フォーカス・クリック時（爆速） */
--dur-snappy: 0.15s; /* 通常のホバー・切り替え（キビキビ） */
--dur-open: 0.25s; /* アコーディオン・フェードイン（滑らか） */
--ease-snappy: ease-out; /* 初動が速い */
--ease-torne: cubic-bezier(0.4, 0, 0.2, 1); /* torne風の滑らかな加減速 */
/* フォーム用トランジションセット */
--tr-form: background var(--dur-snappy) var(--ease-snappy),
box-shadow var(--dur-snappy) var(--ease-snappy),
color var(--dur-snappy) var(--ease-snappy),
transform var(--dur-snappy) var(--ease-snappy);
/* ==================== アイコン / 画像パス ==================== */
--search-icon-path-white: url('data:image/svg+xml;utf8,');
--search-icon-path-black: url('data:image/svg+xml;utf8,');
--close-btn-icon-path: url('data:image/svg+xml;utf8,');
}
/* フェードインアニメーション */
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* ==========================================================================
2. ベーススタイル / リセット
========================================================================== */
*, *::before, *::after {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent; /* スマホのデフォルト機能である「タップした時に出る半透明の青い四角」を消しています */
}
body {
/* 1. 配置・レイアウト（要素をどこに置くか） */
display: flex;
flex-direction: column;
/* justify-content: center; */
align-items: stretch;
min-height: 100vh;
margin: 0;
padding: 0;
/* 2. 背景・外観（箱の見た目） */
background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
/* 3. タイポグラフィ（中身の文字のルール） */
color: var(--color-text);
font-family: var(--main-font);
line-height: 1.6;
letter-spacing: 0.16px;
word-break: break-all;
/* --- ここを追加（ガタつきの調整） --- */
opacity: 0; /* 最初は隠しておく */
animation: fadeIn var(--dur-open) ease-out forwards; /* forwardsで最後の状態（不透明）を維持 */
}
/* --- リンク文字（シンプル・最適化版） --- */
a {
/* 文字装飾 */
color: var(--color-link);
font-weight: var(--fw-bold);
text-decoration: none;
opacity: 0.8;
/* 文章中での折り返し設定 */
word-break: break-word;
}
/* hover / focus-visible */
/* :focus ではなく :focus-visible を使うことで、キーボード操作時のみ枠線が出る現代的な仕様になります */
a:hover,
a:focus-visible {
outline: none;
opacity: 1;
}
a:active {
opacity: 0.7;
transition: opacity var(--dur-action) var(--ease-snappy);
}
/* リンク先がないもの、または自分自身を指すリンク（#）で色を変えたくない場合のみ、
以下のように個別に上書きする方が管理が楽です */
a:not([href]),
a[href="#"] {
opacity: 1;
color: inherit;
cursor: default;
}
menu, ol, ul {
list-style: none;
margin: 0;
padding: 0;
}
/* ==========================================================================
3. レイアウト・共通コンテナ
========================================================================== */
.u-container {
--size: var(--w-container);
--padding: 1.5rem;
inline-size: 100%;
margin-inline: auto;
max-inline-size: calc(var(--size) + var(--padding) * 2);
padding-inline: var(--padding);
}
/* --- mainBody --- */
.mainBody {
display: grid;
align-items: start;
grid-template-columns: 260px 1fr;
gap: 1.25rem;
--size: var(--w-container);
--padding: 1.25rem;
inline-size: 100%;
margin-inline: auto;
padding-inline: var(--padding);
margin: 10px auto;
}
@media screen and (max-width: 1360px) {
.mainBody {
display: block;
/* 変数の中身を「上下 左右」の形式にする */
--padding-v: 20px;
--padding-h: 15px;
/* 実際に適用するプロパティ */
padding: var(--padding-v) var(--padding-h);
/* もし inline-size: 100% を使っているなら、
box-sizing: border-box; が効いていることを確認してください */
}
}
/* ヘッダー */
.header {
width: 100%;
/* background-color: rgba(255, 255, 255, 0.88); */
position: sticky;
top: 0;
z-index: 1;
overflow: auto;
word-break: normal;
/* box-shadow: 5px 5px 6px #c9d6e6, -5px -5px 6px #ffffff; */
}
.header::before {
content: "";
position: absolute;
inset: 0;
backdrop-filter: blur(0.5rem);
-webkit-backdrop-filter: blur(0.5rem);
z-index: -1;
}
.header__content {
display: flex;
justify-content: space-between;
align-items: center;
}
.header__nav {
display: flex;
align-items: center;
}
.header-menu {
display: flex;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
}
.header-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding-block: var(--block-size);
background: none;
border: none;
appearance: none;
color: var(--color-text);
font-size: 0.875rem;
/* ≒ 14px */
font-weight: var(--fw-semi-bold);
letter-spacing: 0.04em;
line-height: 1;
text-align: left;
text-decoration: none;
cursor: pointer;
}
/* ==========================================================================
4. 見出し・テキスト装飾
========================================================================== */
h1 {
font-size: 1.625rem;
font-weight: var(--fw-bold);
color: var(--color-main);
margin-bottom: 1.5rem;
line-height: 1.5;
}
h2.title {
font-size: 1.25rem;
font-weight: var(--fw-bold);
color: var(--color-primary);
margin-top: 2rem;
padding-left: 0.75rem;
}
h2.title::before {
content: "◆ ";
color: var(--color-accent);
}
h3 {
font-size: 1.063rem;
font-weight: var(--fw-bold);
letter-spacing: .68px;
line-height: 1.88235;
margin: auto 0;
}
/* メッセージボックス（通知・エラー） */
p.header_text, p.header_rmesg, p.header_emesg {
font-size: 0.9rem;
padding: 1rem;
margin-bottom: 1.5rem;
border-radius: var(--radius-small);
}
p.header_text {
border: 1px solid #b3d7f5;
border-left: 4px solid var(--color-accent);
color: var(--color-main);
}
p.header_rmesg {
background-color: #e7f4ff;
border: 1px solid #a3d1ff;
color: #005fa3;
}
p.header_emesg {
background-color: var(--bg-error);
border: 1px solid var(--bc-error);
color: var(--color-error);
}
span {
line-height: 1.85;
}
@media (max-width: 768px) {
h1 {
font-size: 1.1rem;
}
}
/* ==========================================================================
5. フォーム基本要素 (Input, Select, Textarea)
========================================================================== */
/* 入力フィールド共通（ネオモーフィズム風） */
input[type="text"],
textarea,
select,
.data.file input[type="file"] {
width: auto;
padding: 0.3rem;
border: none;
border-radius: var(--radius-large);
background: var(--bg-light);
box-shadow: var(--box-shadow-inset);
font-family: var(--main-font);
font-size: var(--fz-normal) !important;
color: currentColor;
transition: var(--tr-form);
overflow-anchor: none;
scrollbar-width: thin;
scrollbar-color: #b1b9c4 #f0f4f7;
}
/* テキストエリア個別設定 */
textarea {
width: 100% !important;
min-width: clamp(180px, 30%, 100%);
min-height: clamp(100px, 30%, 100%);
border-radius: var(--radius-small);
font-size: 0.85rem;
color: var(--color-text) !important;
}
/* セレクトボックス個別設定 */
select {
/* 1. 配置・表示（ブラウザ標準の矢印を消す） */
appearance: none;
-webkit-appearance: none;
/* 2. 余白（右側に矢印があるため、右パディングを少し広げる） */
/* padding: 0.3rem 1rem 0.3rem 0.3rem; */
/* 3. 背景（個別に指定してアイコンを守る） */
/* background-color: var(--bg-light); */ /* ここはあえて個別のまま */
/* background-image: url('data:image/svg+xml;charset=UTF-8,'); */
/* background-repeat: no-repeat; */
/* background-position: right 0.4rem center; */
/* background-size: 0.6rem; */
cursor: pointer;
/* 4. タイポグラフィ */
text-align: center;
}
/* 1. ファイル入力エリア本体 */
.data.file input[type="file"] {
/* 1. 配置・表示（ボックスモデルの根幹） */
display: block; /* もし未設定なら追加推奨 */
position: relative;
min-height: 6rem;
margin-bottom: 1rem;
/* 2. 余白・枠線（箱の形を整える） */
padding: 3.5rem 2rem 0;
border-radius: var(--radius-normal);
/* 3. 背景・カーソル（表面のデザイン） */
background: var(--bg-light); /* 共通設定にあると思いますがここでも意識 */
cursor: pointer;
/* 4. テキスト・フォント（中身の見た目） */
color: var(--color-main);
font-size: smaller;
font-weight: var(--fw-bold);
line-height: 1.2;
text-align: left;
}
/* 2. 「＋」アイコンの演出 */
.data.file input[type="file"]::before {
content: "+";
position: absolute;
top: 1rem;
left: 50%;
transform: translateX(-50%);
font-size: 2rem;
font-weight: var(--fw-bold);
color: var(--color-accent);
line-height: 1;
pointer-events: none;
transition: opacity 0.2s ease;
}
/* 3. 標準ボタンの非表示（共通設定） */
.data.file input[type="file"]::file-selector-button,
.data.file input[type="file"]::-webkit-file-upload-button {
display: none;
}
/* 4. 操作時（クリック中や選択直後）に「＋」を消す */
.data.file input[type="file"]:focus::before,
.data.file input[type="file"]:active::before {
opacity: 0;
}
/* フォーカス時共通 */
input[type="text"]:focus,
textarea:focus,
select:focus,
.data.file input[type="file"]:focus {
outline: none;
background-color: var(--bg-input);
box-shadow: var(--box-shadow-focus);
transition-duration: var(--dur-action);
}
/* ==========================================================================
6. ラジオボタン・チェックボックス (ボタン風スタイル)
========================================================================== */
/* ラベル全体のスタイル */
label {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0.3rem;
border-radius: var(--radius-large);
background: var(--bg-light);
box-shadow: var(--box-shadow-inset);
cursor: pointer;
transition: var(--tr-form);
position: relative; /* for absolute input */
}
/* --- input本体を非表示に --- */
label input[type="radio"],
label input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* チェックされた時のスタイル（has対応ブラウザ） */
label:has(input:checked) {
background: var(--color-accent);
color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) inset;
transition-duration: var(--dur-action);
}
/* inputにフォーカスが当たったら、それを含むlabelにスタイルを当てる */
label:has(input:focus-visible) {
box-shadow: 0 0 8px var(--glow-blue);
}
/* テキスト部分のスタイル */
label>span {
display: flex;
align-items: center;
justify-content: center;
}
/* ==========================================================================
7. フォームの各ラベルとバリデーション
========================================================================== */
/* 一覧検索フォーム
-------------------------*/
table.smp-search-form-table {
width: 100%;
margin: 0 auto; /* センタリング */
border-radius: var(--radius-normal);
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 64, 128, 0.1);
}
/* 基本設定 */
table.smp-search-form-table tr {
width: 100% !important;
}
table.smp-search-form-table td {
padding: 5px 0px !important;
border: none !important; /* 罫線を一旦消す */
background: var(--bg-card) !important;
font-size: var(--fz-small) !important;
color: var(--color-auxiliary);
}
/* 項目タイトルtdの基本設定 */
table.smp-search-form-table td.smp-sf-head {
display: block;
width: 100% !important;
padding: 5px !important;
background: var(--bg-header) !important;
font-size: var(--fz-normal) !important;
font-weight: var(--fw-semi-bold) !important;
color: var(--color-main) !important;
line-height: 140%;
text-align: center;
}
/* 入力欄tdの基本設定 */
table.smp-search-form-table td.smp-sf-body {
display: block;
width: 100% !important;
padding: 5px !important;
background: var(--bg-card) !important;
line-height: 140%;
}
table.smp-search-form-table td.smp-sf-body .notice {
font-size: var(--fz-small) !important;
}
/* inputを入力しやすくする */
table.smp-search-form-table td.smp-sf-body input {
width: 39%;
margin: 5px 0;
padding: 0.6rem;
color: var(--color-text) !important;
}
table.smp-search-form-table td.smp-sf-body input:focus {
outline: none;
background: var(--bg-input);
box-shadow: var(--box-shadow-focus);
}
/* チェックボックスを見やすくする */
table.smp-search-form-table td.smp-sf-body label {
display: inline;
margin: 5px 0px;
}
/* 検索ボタンを大きくする */
table.smp-search-form-table input[type="submit"] {
margin: 10px auto !important;
padding: 8px 40px;
border: none;
border-radius: var(--radius-large);
outline: none;
color: var(--color-white);
font-size: var(--fz-medium);
font-weight: var(--fw-bold);
background-color: var(--bg-button);
box-shadow: var(--box-shadow-normal);
cursor: pointer;
transition: var(--tr-form);
}
table.smp-search-form-table input[type="submit"]:hover {
}
table.smp-search-form-table input[type="submit"]:focus {
outline: none;
box-shadow: var(--box-shadow-focus);
}
table.smp-search-form-table input[type="submit"]:active {
box-shadow: var(--box-shadow-inset);
transform: scale(0.98);
transition:
transform var(--dur-action) var(--ease-snappy),
box-shadow var(--dur-action) var(--ease-snappy),
filter var(--dur-action) var(--ease-snappy);
}
table.smp-search-form-table select {
}
/* 一覧表
-------------------------*/
table.smp-table {
width: 100%;
border-collapse: collapse; /* 隙間をなくして一体感を出す */
border-spacing: 0;
/* 背景色は指定せず、枠線も各画面のtdに任せる */
background: transparent;
}
/* ソート行の基本設定 */
table.smp-table tr.smp-row-sort {
position: sticky;
top: 2rem;
z-index: 1;
background: var(--bg-header);
color: var(--color-main);
/* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); */
border: solid var(--border-color);
border-width: 0 0 2px 0;
}
table.smp-table td {
border: none !important;
font-size: var(--fz-normal) !important;
}
table.smp-table td.smp-cell-sort {
text-align: left;
padding: 10px 3px !important;
line-height: 140%;
background: transparent !important;
color: currentColor !important;
font-size: var(--fz-small) !important;
letter-spacing: 0.1em;
/* text-transform: uppercase; */
}
/* ソート行のリンクデザイン */
table.smp-table td.smp-cell-sort a {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
margin: 0 auto !important;
color: currentColor;
}
/* table.smp-table td.smp-cell-sort a:hover {
-webkit-line-clamp: unset;
display: block;
white-space: normal;
max-height: 1000px;
} */
/* データ行の基本設定 */
table.smp-table td.smp-cell-data {
/* 1. レイアウト・配置 */
text-align: left;
/* 2. サイズ・余白 */
padding: 10px 3px !important;
line-height: 140%;
/* 3. 背景・枠線 */
background: none !important;
/* 4. 文字装飾 */
color: var(--color-auxiliary) !important;
font-weight: var(--fw-medium);
}
/* データ行のリンクデザイン */
table.smp-table td.smp-cell-data a {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
margin: 0 auto !important;
width: 100%;
min-width: clamp(30px, 30%, 100%);
}
/* table.smp-table td.smp-cell-data a:hover {
-webkit-line-clamp: unset;
display: block;
white-space: normal;
max-height: 1000px;
} */
table.smp-table tr.smp-row-sort td.smp-cell:last-child,
table.smp-table tr.smp-row-data td.smp-cell:last-child {
padding: 0;
border: none;
}
/* 奇数行目と偶数行目で背景色を変更 */
table.smp-table tr.smp-row-data:nth-child(odd) {
background: var(--bg-card);
}
table.smp-table tr.smp-row-data:nth-child(even) {
background: var(--bg-card);
}
table.smp-table tr.smp-row-data {
border: solid var(--bg-header);
border-width: 0 0 1px 0;
transition: box-shadow var(--dur-action) var(--ease-snappy);
}
table.smp-table tr.smp-row-data:hover {
--bg-hover: rgba(220, 238, 255, 1);
background: var(--bg-hover);
}
/* 変更選択時の色 */
table.smp-table tr.smp-be-operate td.smp-cell-data {
background: rgba(222, 245, 237, 0.9) !important;
}
/* 表以外の基本設定 */
table.smp-table tr.smp-row-normal td {
padding-top: 0;
border: none !important; /* 不要な罫線の削除 */
color: currentColor !important;
font-size: 0.8125rem !important;
font-weight: var(--fw-medium) !important;
letter-spacing: .13px;
}
/* 一覧表の付属ボタン */
table.smp-table input[name="smp-table-submit-button"],
table.smp-table .smp-table-button {
}
table.smp-table input[name="smp-table-submit-button"]:hover,
table.smp-table .smp-table-button:hover {
}
/* 件数セレクトの調整 */
table.smp-table tr.smp-row-normal select {
margin: 0 5px;
padding: 5px 10px 5px 10px;
background-color: transparent;
color: var(--color-auxiliary);
font-weight: var(--fw-medium);
}
table.smp-table tr.smp-row-normal select:focus {
background-color: var(--bg-input);
color: var(--color-auxiliary);
}
/* 編集列テキストフィールドの調整 */
table.smp-table td.smp-cell-data input[type=text] {
width: 100% !important;
border-radius: var(--radius-small);
}
/* 編集列テキストエリアの調整 */
table.smp-table td.smp-cell-data textarea {
}
table.smp-table td.smp-cell-data input[type=text]:focus,
table.smp-table td.smp-cell-data textarea:focus {
background-color: var(--bg-input) !important;
}
/* 編集列セレクトの調整 */
table.smp-table td.smp-cell-data select {
width: fit-content !important;
margin: 0 auto;
font-size: var(--fz-small) !important;
color: var(--color-auxiliary) !important;
}
@media screen and (max-width: 960px) {
table.smp-table td.smp-cell-data select {
width: 100% !important;
}
}
/* 一覧表ページャー
-------------------------*/
table.smp-table tr.smp-row-normal table.smp-pager {
display: flex;
justify-content: flex-end;
float: right;
margin: 10px auto;
border-collapse: separate;
border-spacing: 5px 10px !important;
}
table.smp-pager tbody tr {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.3rem;
}
/* ページャー基本設定 */
table.smp-table tr.smp-row-normal table.smp-pager { /* 除外 td.smp-page */
font-size: 16px;
line-height: 1;
text-align: center;
}
/* リンクエリア拡張 */
table.smp-table tr.smp-row-normal table.smp-pager td.smp-page a {
display: block;
padding: 5px 15px;
border-radius: var(--radius-normal);
color: var(--color-auxiliary);
text-decoration: none;
box-shadow: var(--box-shadow-normal);
}
table.smp-table tr.smp-row-normal table.smp-pager td.smp-page a:focus {
outline: none;
color: var(--color-auxiliary);
box-shadow: var(--box-shadow-focus);
transition-duration: var(--dur-action);
}
table.smp-table tr.smp-row-normal table.smp-pager td.smp-page a:active {
color: var(--color-ui-active);
box-shadow: var(--box-shadow-inset);
transform: scale(0.98);
transition: transform var(--dur-action) linear,
box-shadow var(--dur-action) linear,
color var(--dur-action) linear;
}
/* 現在のページ */
table.smp-table tr.smp-row-normal table.smp-pager td.smp-current-page {
display: block;
padding: 5px 15px;
border-radius: var(--radius-normal);
color: var(--color-ui-active) !important;
font-weight: var(--fw-bold) !important;
text-decoration: none;
box-shadow: var(--box-shadow-inset);
}
/* 省略記号 */
table.smp-table tr.smp-row-normal table.smp-pager td.smp-page-space {
border: none !important;
}
/* 表のtdをスマホ用に段組み */
@media screen and (max-width: 960px) {
colgroup {
display: block;
}
table.smp-table td.smp-cell-sort {
padding: 0 !important;
}
table.smp-table td.smp-cell-sort:first-child {
display: none; /* チェックを消す */
}
table.smp-table tr.smp-row-sort {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
padding: 0.625rem;
gap: 0.25rem;
margin: 1rem auto;
position: unset;
border: none;
border-radius: var(--radius-normal);
background: transparent;
box-shadow: var(--box-shadow-inset);
}
table.smp-table tr.smp-row-sort::before {
content: "ソート:";
font-weight: var(--fw-bold);
font-size: var(--fz-small);
}
table.smp-table td.smp-cell-sort a {
-webkit-line-clamp: 1;
padding-inline: 0.3rem;
}
/* データ行をレスポンシブに */
table.smp-table td {
display: block;
width: 100%;
}
/* ページャーのtableへの影響を元に戻す */
table.smp-table tr.smp-row-normal table.smp-pager td {
display: table-cell;
width: auto;
}
/* データ行の文字揃えを左寄りにして、罫線を消す */
table.smp-table td.smp-cell-data {
display: grid;
grid-template-columns: minmax(140px, 40%) 1fr;
gap: 12px;
align-items: center;
border-width: 0 !important;
font-size: var(--fz-medium) !important;
}
table.smp-table td.smp-cell-data:first-child {
padding: 0.8rem 0.6rem !important;
--bg-header: rgba(220, 238, 255, 1);
background: var(--bg-header) !important;
}
/* 3. その他のデータ項目（下のリスト部分） */
table.smp-table td.smp-cell-data:not(:first-child) {
padding: 0.4rem 0.6rem !important;
}
table.smp-table td.smp-cell-data:last-child {
padding-bottom: 1rem !important;
}
table.smp-table tr.smp-row-data {
display: block;
margin: 1.5rem auto;
border-radius: var(--radius-normal);
border: solid var(--border-color);
border-width: 1px 1px 1px 1px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 64, 128, 0.1);
}
table.smp-table tr.smp-row-data:hover {
/* background: var(--bg-card); */ /* スマホでは背景色を変えず */
}
/* trの中の、一番最初のtd要素(first-child)の中にある 変更選択時の色 */
table.smp-table tr.smp-be-operate td.smp-cell-data:first-child {
}
table.smp-table tr.smp-row-normal table.smp-pager {
display: flex;
justify-content: center;
}
table.smp-table tr.smp-row-normal table.smp-pager td.smp-page a,
table.smp-table tr.smp-row-normal table.smp-pager td.smp-current-page {
display: flex;
justify-content: center;
align-items: center;
width: 2rem;
aspect-ratio: 1 / 1;
padding: 0;
}
/* 一覧項目タイトルのデザイン */
.subtitle {
display: flex;
align-items: center;
height: 100%;
padding: 2px 8px;
border-radius: 4px;
background: var(--bg-subtitle);
font-size: 0.7rem;
color: #fff;
font-weight: var(--fw-bold);
letter-spacing: 0.05em;
}
/* trの中の、一番最初のtd要素(first-child)の中にある .subtitle だけを指定 */
table.smp-table tr.smp-row-data td:first-child .subtitle {
}
/* 変更選択時（行全体が緑系になった時）の微調整 */
table.smp-table tr.smp-be-operate .subtitle {
/* ラベルの色を少しだけ明るく、または緑に寄せると「選択中」がより強調されます */
background: var(--bg-subtitle-hover);
/* box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); */ /* わずかな縁取り */
}
}
@media screen and (max-width: 767px) {
table.smp-table td.smp-cell-data {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.3rem;
}
table.smp-table td.smp-cell-data:first-child {
padding: 0.4rem 0.6rem !important;
}
}
/* ==========================================================================
8. 送信・操作ボタン
========================================================================== */
/* 一覧表の付属ボタン */
table.smp-table input[type="button"],
table.smp-table input[type="submit"],
table.smp-table .smp-table-button,
table.smp-table input[name="smp-table-submit-button"],
input[type="button"] {
margin: 5px 0;
padding: 5px 15px;
border: none;
border-radius: var(--radius-large);
outline: none;
color: var(--color-auxiliary);
font-size: var(--fz-normal);
font-weight: var(--fw-bold);
background: transparent;
box-shadow: var(--box-shadow-normal);
cursor: pointer;
transition: var(--tr-form);
}
table.smp-table input[type="button"]:focus,
table.smp-table input[type="submit"]:focus,
table.smp-table .smp-table-button:focus,
table.smp-table input[name="smp-table-submit-button"]:focus,
input[type="button"]:focus {
outline: none;
box-shadow: var(--box-shadow-focus);
transition-duration: var(--dur-action);
}
table.smp-table input[type="button"]:active,
table.smp-table input[type="submit"]:active,
table.smp-table .smp-table-button:active,
table.smp-table input[name="smp-table-submit-button"]:active,
input[type="button"]:active {
box-shadow: var(--box-shadow-inset);
transform: scale(0.98);
transition:
transform var(--dur-action) var(--ease-snappy),
box-shadow var(--dur-action) var(--ease-snappy),
color var(--dur-action) var(--ease-snappy);
}
/* ==========================================================================
9. 特殊レイアウト (定義リスト・インライン入力・表)
========================================================================== */
.searchToggleBtn {
/* デフォルトは非表示、必要な時だけメディアクエリで display を変える */
display: none;
cursor: pointer;
/* レイアウト・形状（あらかじめ記述） */
width: 60px;
height: 60px;
border-radius: 50%;
/* 質感・色（あらかじめ記述） */
background-color: var(--bg-button);
background-image: var(--search-icon-path-white);
background-repeat: no-repeat;
background-position: center;
background-size: 16px; /* アイコンを少し大きくしても良いかも */
box-shadow: var(--box-shadow-normal);
/* その他 */
z-index: 1; /* 他の要素に隠れないように */
font-size: 0;
transition: var(--tr-form);
}
.searchToggleBtn:hover {
outline: none;
box-shadow: var(--box-shadow-focus);
}
.searchToggleBtn:active {
box-shadow: var(--box-shadow-inset);
transform: scale(0.98);
transition:
transform var(--dur-action) var(--ease-snappy),
box-shadow var(--dur-action) var(--ease-snappy),
filter var(--dur-action) var(--ease-snappy);
}
.smp-search-form {
position: sticky;
top: 2rem;
overflow: auto;
height: calc(100vh - 60px);
padding-bottom: 2rem;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: #b1b9c4 #f0f4f7;
}
.smp-sf-body div div {
display: flex;
flex-direction: column;
width: 33.333%;
white-space: nowrap;
text-overflow: ellipsis;
}
/* --- メディアクエリ --- */
@media screen and (max-width: 1360px) {
.searchToggleBtn {
display: flex; /* ここで初めて表示させる */
position: fixed;
bottom: 20px;
right: 20px;
}
.smp-search-form {
position: fixed;
inset: 0;
display: none;
height: 100vh;
z-index: 2000;
justify-content: center;
align-items: unset;
overflow-y: auto;
}
.smp-search-form.is-show {
display: flex;
z-index: 2;
}
.smp-search-form form {
position: relative;
z-index: 2;
width: 100%;
max-width: 400px;
margin: 20px;
padding: 1rem;
border-radius: 5px;
}
.smp-search-form .panel_bg {
content: "";
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.7);
}
.smp-search-form form .close_btn {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: -5px;
right: 5px;
width: 30px;
height: 30px;
border-radius: 30px;
background-color: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}
.smp-search-form form .close_btn::before,
.smp-search-form form .close_btn::after {
content: "";
position: absolute;
width: 2px;
height: 15px;
background-color: var(--color-auxiliary);
transform: rotate(-45deg);
}
.smp-search-form form .close_btn::after {
transform: rotate(45deg);
}
.smp-sf-body div div {
width: 25%;
}
}
/* --- smp popup --- */
div.smp-popup-filter {
background: rgba(0, 0, 0, 0.7);
z-index: 2;
}
div.smp-popup-wrapper {
top: 20%;
color: var(--color-auxiliary);
z-index: 2;
}
div.smp-popup-header,
div.smp-popup-content {
background: rgba(255, 255, 255, 0.25);
}
/* ==========================================================================
10. フッター
========================================================================== */
/* --- spiralSeal --- */
.spiralSeal {
grid-column: 2;
display: grid;
justify-content: center;
align-items: center;
color: var(--color-auxiliary);
width: 100% !important;
margin-top: 2rem;
}
.spiralSeal table {
background: transparent !important;
border: none !important;
}
/* リンクも目立たないように色を調整 */
.spiralSeal a {
color: inherit;
text-decoration: underline;
}
/* trの中にあるtdをすべて縦並びにする */
.spiralSeal tr td {
/* display: block; */ /* 横並びのセルを縦並びに変える */
}
/* ==========================================================================
11. サイドバー(使用時はbody直下が良い)
========================================================================== */
.side-header {
/* 1. 配置・レイアウト (一番重要な「固定」の定義) */
position: fixed;
z-index: 999;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
/* 2. サイズ・形状 */
width: var(--nav-width);
height: 100vh;
/* 3. 背景・見た目 */
--current-rgb: 80, 198, 255;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
}
/* ---------------------------------------------------------
1. 事業者登録（Master）：期の色を「上」にする