/* ============================================================
森修平 標準デザイン定義書 — コンポーネントCSS v1.3
(2026-09-12 / v1.2 改訂 2026-09-16 / v1.3 改訂 2026-09-18)
前提: tokens.css を先に読み込むこと
ルール:
- このファイルのクラスをそのまま使う。案件ごとに再発明しない
- 変更が必要になったら定義書(index.html)に追記してから変更する
============================================================ */
/* ------------------------------------------------------------
ボタン(C-01)
------------------------------------------------------------ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
font-family: var(--font-sans);
font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-ui);
min-height: 48px; padding: 0 var(--sp-6);
border-radius: var(--r-s); border: 2px solid transparent;
cursor: pointer; text-decoration: none;
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn-primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn-primary:hover { background: var(--c-primary-dark); }
.btn-secondary { background: var(--c-white); color: var(--c-primary); border-color: var(--c-primary); }
.btn-secondary:hover { background: var(--c-primary-pale); }
.btn-text { background: transparent; color: var(--c-link); text-decoration: underline; min-height: 44px; }
.btn-text:hover { color: var(--c-primary-dark); }
.btn-danger { background: var(--c-error); color: #fff; }
.btn-danger:hover { background: #A32420; }
.btn:disabled { background: var(--c-gray-200); color: var(--c-gray-400); border-color: transparent; cursor: not-allowed; }
.btn-s { min-height: 36px; font-size: var(--fs-small); padding: 0 var(--sp-4); }
/* LPの申込ボタン(L-01・v1.3 追加)
高さ56px・ピル型。C-01ボタンの角丸8pxの例外(LPの申込ボタンに限る)
文字は12字以内(320px機種で1行に収まる上限)
濃い地の上は .is-inverse。ブランドに明るい差し色がある案件はその色に差し替えてよい */
.btn-lp {
display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
width: 100%; max-width: 400px; min-height: 56px; padding: 0 var(--sp-4);
border-radius: var(--r-full); background: var(--c-primary); color: var(--c-on-primary);
font-family: var(--font-sans); font-size: var(--fs-body-l); font-weight: var(--fw-bold); line-height: var(--lh-ui);
text-decoration: none; cursor: pointer;
transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn-lp:hover { background: var(--c-primary-dark); }
.btn-lp:active { transform: scale(0.98); }
.btn-lp.is-inverse { background: var(--c-white); color: var(--c-primary); }
.btn-lp.is-inverse:hover { background: var(--c-primary-pale); }
/* 送信中(処理中)状態 */
.btn.is-loading { pointer-events: none; opacity: 0.85; }
.btn.is-loading::before {
content: ""; width: 16px; height: 16px; flex-shrink: 0;
border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
border-radius: 50%; animation: mds-spin 0.8s linear infinite;
}
@keyframes mds-spin { to { transform: rotate(360deg); } }
/* ------------------------------------------------------------
フォーム(C-01)
------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label { font-size: var(--fs-small); font-weight: var(--fw-bold); }
.field label .req {
font-size: var(--fs-caption); color: var(--c-error); font-weight: var(--fw-bold);
border: 1px solid var(--c-error); border-radius: 4px; padding: 0 5px; margin-left: var(--sp-2);
}
.field .help { font-size: var(--fs-caption); color: var(--c-gray-500); }
/* 入力欄の文字は16px以上(--fs-body)。16px未満だとiOS Safariがフォーカス時に画面を自動拡大する */
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="password"], .field input[type="number"], .field input[type="search"],
.field textarea, .field select {
font-family: var(--font-sans); font-size: var(--fs-body);
min-height: 48px; padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--c-gray-300); border-radius: var(--r-s);
background: var(--c-white); color: var(--c-ink);
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--c-gray-500); }
/* フォーカス(入力欄)。黄×黒リングは出さず、枠線を primary に(1px枠＋内側1pxの影で見た目2px・レイアウト不変)。
iOSは入力欄をタップしただけでも :focus-visible が点くため(A-01)。エラー中の欄は赤枠を優先する */
.field input:focus, .field textarea:focus, .field select:focus {
outline: none; border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary);
}
.field.error input, .field.error textarea, .field.error select { border: 2px solid var(--c-error); background: var(--c-error-bg); box-shadow: none; }
.field .err-msg { font-size: var(--fs-small); color: var(--c-error); font-weight: var(--fw-bold); display: flex; align-items: center; gap: 6px; }
/* ------------------------------------------------------------
カード(C-01)
------------------------------------------------------------ */
.card {
background: var(--c-white); border-radius: var(--r-s); box-shadow: var(--sh-low);
overflow: hidden;
transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
a.card, .card.is-clickable { cursor: pointer; text-decoration: none; color: inherit; display: block; }
a.card:hover, .card.is-clickable:hover { box-shadow: var(--sh-mid); transform: translateY(-2px); }
.card .card-body { padding: var(--sp-4) var(--sp-6) var(--sp-6); }
/* ------------------------------------------------------------
タグ・バッジ(C-01)
------------------------------------------------------------ */
.tag-pill {
display: inline-flex; align-items: center;
font-size: var(--fs-caption); font-weight: var(--fw-bold); line-height: var(--lh-ui);
padding: 4px 12px; border-radius: var(--r-full);
background: var(--c-primary-pale); color: var(--c-primary);
}
.tag-pill.success { background: var(--c-success-bg); color: var(--c-success); }
.tag-pill.error { background: var(--c-error-bg); color: var(--c-error); }
.tag-pill.warning { background: var(--c-warning-bg); color: var(--c-warning); }
.tag-pill.neutral { background: var(--c-gray-100); color: var(--c-gray-700); }
/* ------------------------------------------------------------
通知パネル(C-01)
------------------------------------------------------------ */
.notice { display: flex; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); border-radius: var(--r-s); font-size: var(--fs-small); }
.notice svg { flex-shrink: 0; margin-top: 2px; }
.notice.info { background: var(--c-info-bg); color: #08407e; }
.notice.success { background: var(--c-success-bg); color: #115C38; }
.notice.warning { background: var(--c-warning-bg); color: #6E4A00; }
.notice.error { background: var(--c-error-bg); color: #92211D; }
.notice b { display: block; margin-bottom: 2px; }
/* トースト(一時通知・画面下中央・3秒で消す) */
.toast {
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
background: var(--c-ink); color: #fff;
font-size: var(--fs-small); font-weight: var(--fw-bold);
padding: var(--sp-3) var(--sp-6); border-radius: var(--r-full);
box-shadow: var(--sh-high);
opacity: 0; transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
pointer-events: none; z-index: 200;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ------------------------------------------------------------
タブ(C-01)
------------------------------------------------------------ */
.tabs { display: flex; gap: var(--sp-2); border-bottom: 2px solid var(--c-gray-200); }
.tabs button {
font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-ui);
color: var(--c-gray-500); background: none; border: none; cursor: pointer;
padding: var(--sp-3) var(--sp-4); margin-bottom: -2px;
border-bottom: 3px solid transparent;
transition: color var(--t-fast) var(--ease);
}
.tabs button:hover { color: var(--c-ink); }
.tabs button.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
/* ------------------------------------------------------------
アコーディオン(C-01) — / で使う
------------------------------------------------------------ */
.acc { border: 1px solid var(--c-gray-200); border-radius: var(--r-s); overflow: hidden; background: var(--c-white); }
.acc details + details { border-top: 1px solid var(--c-gray-200); }
.acc summary {
list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
padding: var(--sp-4) var(--sp-6); font-weight: var(--fw-bold); font-size: var(--fs-body); cursor: pointer;
transition: background var(--t-fast) var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: var(--c-gray-50); }
.acc summary::after {
content: ""; width: 9px; height: 9px; flex-shrink: 0;
border-right: 2px solid var(--c-gray-500); border-bottom: 2px solid var(--c-gray-500);
transform: rotate(45deg); margin-top: -4px;
transition: transform var(--t-base) var(--ease);
}
.acc details[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.acc .acc-body { padding: 0 var(--sp-6) var(--sp-4); font-size: var(--fs-small); color: var(--c-gray-700); }
/* ------------------------------------------------------------
データテーブル(C-01)
------------------------------------------------------------ */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: var(--lh-dense); background: var(--c-white); }
.tbl th { background: var(--c-gray-50); font-weight: var(--fw-bold); text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-gray-300); white-space: nowrap; }
.tbl td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-gray-200); }
.tbl tr:hover td { background: var(--c-gray-50); }
.tbl .num { font-family: var(--font-mono); text-align: right; }
/* ------------------------------------------------------------
ページネーション(C-01)
------------------------------------------------------------ */
.pager { display: flex; gap: var(--sp-2); align-items: center; }
.pager a, .pager .cur, .pager .dots {
min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-s); font-size: var(--fs-small); text-decoration: none; color: var(--c-ink);
transition: background var(--t-fast) var(--ease);
}
.pager a:hover { background: var(--c-gray-100); }
.pager .cur { background: var(--c-primary); color: #fff; font-weight: var(--fw-bold); }
.pager .dots { color: var(--c-gray-400); }
/* ------------------------------------------------------------
選択チップ(C-02) — 検索・絞り込み
------------------------------------------------------------ */
.chip {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-sans); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: var(--lh-ui);
padding: 10px 16px; border-radius: var(--r-full);
border: 1px solid var(--c-gray-300); background: var(--c-white); color: var(--c-gray-700); cursor: pointer;
transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--c-gray-500); }
.chip.selected { background: var(--c-primary-pale); border-color: var(--c-primary); color: var(--c-primary); }
/* ------------------------------------------------------------
スケルトン(C-02) — データ取得中の骨組み表示
------------------------------------------------------------ */
.skel { position: relative; overflow: hidden; background: var(--c-gray-100); border-radius: var(--r-s); }
.skel::after {
content: ""; position: absolute; inset: 0; transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
animation: mds-skel 1.4s infinite;
}
@keyframes mds-skel { to { transform: translateX(100%); } }
/* ------------------------------------------------------------
空状態(C-02) — アイコン + 説明 + 次の行動
------------------------------------------------------------ */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-16) var(--sp-6); text-align: center; color: var(--c-gray-500); }
.empty svg { color: var(--c-gray-300); }
.empty b { font-size: var(--fs-h4); color: var(--c-ink); }
.empty p { font-size: var(--fs-small); margin: 0; }
/* ------------------------------------------------------------
下部タブバー(C-02) — 2〜5項目・アイコン+ラベル必須
------------------------------------------------------------ */
.tabbar {
display: flex; background: var(--c-white); border-top: 1px solid var(--c-gray-200);
/* 高さは「56px + セーフエリア」。border-box 環境で height:56px にすると余白が内側に入り、
iPhone(ホームバー余白34px)でボタン域が約21pxに潰れる(v1.2で修正) */
height: calc(var(--h-tabbar) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar.is-fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; }
.tabbar a {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--c-gray-500); text-decoration: none;
transition: color var(--t-fast) var(--ease);
}
.tabbar a:hover { color: var(--c-gray-700); }
.tabbar a.active { color: var(--c-primary); }
/* ------------------------------------------------------------
スワイプカード アクションボタン(C-02)
スワイプ操作のボタン代替。カード本体のドラッグ実装はJS側
------------------------------------------------------------ */
.swipe-actions { display: flex; gap: var(--sp-6); justify-content: center; }
.swipe-actions button {
width: 56px; height: 56px; border-radius: var(--r-full); border: 1px solid var(--c-gray-300);
background: var(--c-white); cursor: pointer; display: flex; align-items: center; justify-content: center;
box-shadow: var(--sh-low);
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.swipe-actions button:hover { transform: translateY(-2px); box-shadow: var(--sh-mid); }
.swipe-actions .no svg { color: var(--c-gray-500); }
.swipe-actions .yes { border-color: var(--c-primary); background: var(--c-primary); }
.swipe-actions .yes svg { color: #fff; }