/* ===================================================================== RDMB 会員エリア — member.css 2テーマ対応（トークン駆動 / で切替） - dark : 黒基調のラグジュアリー（漆黒 × 深紅 / ブランド赤）※既定 - light : 白基調（元のライトアプリUI） テーマ依存の値はすべて CSS 変数に集約し、data-theme で差し替える。 ===================================================================== */ /* ---- 既定テーマ: dark（黒基調ラグジュアリー） ---- */ :root { color-scheme: dark; --m-bg: #0b0b0d; /* 漆黒ベース */ --m-card: #15151a; /* チャコールカード */ --m-card-2: #1b1b21; /* やや明るい面 */ --m-soft: #1d1d23; /* ソフト面 */ --m-ink: #f3f3f5; /* 主要テキスト */ --m-ink-2: #d8d8de; /* 副テキスト */ --m-muted: #9b9ba4; /* ミュート */ --m-faint: #6b6b74; /* 控えめ（装飾/プレースホルダ専用） */ --m-line: rgba(255,255,255,.07); /* ヘアライン */ --m-line-2: rgba(255,255,255,.12); /* 強めのヘアライン */ --m-accent: #e1132b; /* 深紅（ブランド赤） */ --m-accent-dark: #b00d20; --m-accent-2: #ff5e72; /* ダーク上のテキスト/リンク用の明るめ赤 */ --m-accent-soft: rgba(225,19,43,.14); --m-good: #4ecb8a; --m-warn: #d9a441; --m-side: linear-gradient(180deg, #141417 0%, #0c0c0e 100%); --m-side-line: rgba(255,255,255,.10); /* サイドバー右縁（常に暗色面のため半透明白で固定） */ --m-shadow: 0 18px 44px rgba(0,0,0,.55); --m-glow: 0 10px 30px rgba(225,19,43,.35); /* テーマ依存の追加トークン */ --m-body-image: radial-gradient(120% 90% at 50% -12%, #1a1a20 0%, rgba(26,26,32,0) 46%), radial-gradient(80% 50% at 100% 0%, rgba(225,19,43,.06) 0%, rgba(225,19,43,0) 55%); --m-topbar-bg: rgba(11,11,13,.72); --m-input-bg: #1d1d23; --m-hover: rgba(255,255,255,.03); --m-ghost-bg: rgba(255,255,255,.04); --m-ghost-bg-hover: rgba(255,255,255,.06); --m-chart-grid: rgba(255,255,255,.07); --m-card-hi: rgba(255,255,255,.04); /* カード上端のインナーハイライト */ --m-login-img: radial-gradient(70% 55% at 50% 0%, rgba(225,19,43,.18) 0%, rgba(225,19,43,0) 60%), radial-gradient(120% 90% at 50% 120%, #16161c 0%, rgba(22,22,28,0) 50%); /* テーマ非依存トークン */ --m-radius: 14px; --m-side-w: 250px; --m-top-h: 60px; --m-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; --m-en: "Montserrat", var(--m-font); } /* ---- light テーマ（白基調 / 元のライトUI） ---- */ [data-theme="light"] { color-scheme: light; --m-bg: #f1f2f5; --m-card: #ffffff; --m-card-2: #f6f7f9; --m-soft: #f6f7f9; --m-ink: #2b2f36; --m-ink-2: #4a4f57; --m-muted: #646b75; /* AA: 白カード上で約5.4:1（旧 #868d97 は3.3:1で未達） */ --m-faint: #aab0b8; --m-line: #e7e9ee; --m-line-2: #dfe2e8; --m-accent: #f31717; --m-accent-dark: #c00d0d; --m-accent-2: #e0102a; --m-accent-soft: #fdecec; --m-good: #1bbf6b; --m-warn: #c0821a; --m-side: linear-gradient(180deg, #1b0000 0%, #2c0606 60%, #3a0808 100%); --m-side-line: rgba(255,255,255,.10); /* ライトでもサイドバーは暗赤グラデなので白縁を浮かせない */ --m-shadow: 0 1px 2px rgba(20,20,45,.04); --m-glow: 0 6px 16px rgba(243,23,23,.28); --m-body-image: none; --m-topbar-bg: rgba(255,255,255,.86); --m-input-bg: #ffffff; --m-hover: rgba(0,0,0,.025); --m-ghost-bg: #ffffff; --m-ghost-bg-hover: #f6f7f9; --m-chart-grid: #e6e8ec; --m-card-hi: transparent; --m-login-img: linear-gradient(180deg, #1b0000 0%, #2c0606 60%, #3a0808 100%); } * { box-sizing: border-box; } .m-body { margin: 0; font-family: var(--m-font); color: var(--m-ink); background-color: var(--m-bg); background-image: var(--m-body-image); background-attachment: fixed; line-height: 1.7; -webkit-font-smoothing: antialiased; transition: background-color .25s ease, color .25s ease; } .m-body a { color: inherit; text-decoration: none; } img { max-width: 100%; } /* スクリーンリーダー専用（chat のラベル等） */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -60px; left: 12px; z-index: 300; background: var(--m-accent); color: #fff; padding: 10px 16px; border-radius: 6px; font-weight: 700; transition: top .2s ease; } .skip-link:focus { top: 12px; } .m-icon { width: 20px; height: 20px; flex: none; } /* ---------------------------------------------------------------- theme toggle */ .m-theme-toggle { background: none; border: 0; color: var(--m-muted); padding: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; transition: color .2s ease, background .2s ease, border-color .2s ease; } .m-theme-toggle:hover { color: var(--m-ink); background: var(--m-hover); } .m-theme-toggle:focus-visible { outline: 2px solid var(--m-accent-2); outline-offset: 2px; } .m-theme-toggle .icon-sun, .m-theme-toggle .icon-moon { display: none; } /* dark時=「ライトへ」太陽 / light時=「ダークへ」月 を表示 */ :root .m-theme-toggle .icon-sun { display: inline-flex; } [data-theme="light"] .m-theme-toggle .icon-sun { display: none; } [data-theme="light"] .m-theme-toggle .icon-moon { display: inline-flex; } /* ログイン画面用フローティング配置 */ .m-theme-toggle--float { position: fixed; top: 16px; right: 16px; z-index: 20; width: 42px; height: 42px; background: var(--m-card); border: 1px solid var(--m-line-2); box-shadow: var(--m-shadow); } .m-theme-toggle--float:hover { color: var(--m-accent-2); } /* ---------------------------------------------------------------- sidebar */ .m-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--m-side-w); background: var(--m-side); color: #fff; display: flex; flex-direction: column; z-index: 120; padding: 22px 16px; border-right: 1px solid var(--m-side-line); box-shadow: inset -1px 0 0 rgba(255,255,255,.02); } .m-sidebar__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 22px; } .m-sidebar__logo { font-family: var(--m-en); font-weight: 800; font-size: 24px; letter-spacing: .16em; color: #fff; text-shadow: 0 0 18px rgba(225,19,43,.35); } .m-sidebar__ver { margin-left: 8px; font-family: var(--m-en); font-size: 10px; font-weight: 600; letter-spacing: .06em; color: rgba(255,255,255,.45); text-shadow: none; vertical-align: bottom; } /* ロゴ脇タグ（管理は ADMIN）が付くサイドバーは、RDMB+タグ を1行目・Ver. を2行目に縦積みし、 Ver. を ADMIN バッジの下へ右寄せで置く。横並びだと閉じる(×)ボタンが 250px のサイドバー幅から 溢れるため。修飾子はテンプレ側(panel.blade.php)が $panelLogoTag の有無で付与するので、 CSS の読込順や admin.css の有無に依存しない（会員側はタグ無し＝横並びのまま）。 */ .m-sidebar__logo--tagged { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.05; } .m-sidebar__logo--tagged .m-sidebar__ver { margin-top: 3px; } /* margin-left:8px は flex-end では不可視のため触れない */ .m-sidebar__close { display: none; background: none; border: 0; color: #fff; padding: 6px; cursor: pointer; } .m-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; } .m-nav__link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; color: rgba(255,255,255,.66); font-size: 14px; font-weight: 500; border: 1px solid transparent; transition: background .2s ease, color .2s ease, border-color .2s ease; } .m-nav__link:hover { background: rgba(255,255,255,.06); color: #fff; } .m-nav__link.is-active { background: linear-gradient(135deg, var(--m-accent), var(--m-accent-dark)); color: #fff; box-shadow: var(--m-glow); } .m-nav__link.is-active .m-icon { color: #fff; } .m-sidebar__foot { border-top: 1px solid rgba(255,255,255,.14); padding-top: 16px; margin-top: 8px; } .m-user { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .m-user__avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--m-accent), var(--m-accent-dark)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px; box-shadow: 0 4px 14px rgba(225,19,43,.4); } .m-user__meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } .m-user__name { font-size: 13.5px; font-weight: 700; } .m-user__id { font-size: 11.5px; color: rgba(255,255,255,.5); font-family: var(--m-en); } .m-logout { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,.05); color: #fff; border: 1px solid rgba(255,255,255,.14); padding: 10px; border-radius: 10px; font-family: var(--m-font); font-size: 13px; cursor: pointer; transition: background .2s ease, border-color .2s ease; } .m-logout:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); } .m-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.66); z-index: 110; display: none; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .drawer-open .m-overlay { display: block; } /* キーボードフォーカスの可視化 */ .m-nav__link:focus-visible, .m-quick a:focus-visible, .m-news__item:focus-visible, .m-faq__q:focus-visible, .m-coupon:focus-visible, .m-periodtoggle__btn:focus-visible, .m-monthnav__btn:focus-visible, .m-monthnav__select:focus-visible, a.m-badge:focus-visible, .m-login__back:focus-visible { outline: 2px solid var(--m-accent-2); outline-offset: 2px; } .m-nav__link:focus-visible { outline-color: rgba(255,255,255,.7); background: rgba(255,255,255,.1); } .m-topbar__menu:focus-visible, .m-topbar__chat:focus-visible { outline: 2px solid var(--m-accent-2); outline-offset: 2px; border-radius: 6px; } .m-sidebar__close:focus-visible, .m-logout:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; } .m-btn:focus-visible, .m-chat__send:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(225,19,43,.4); } /* ---------------------------------------------------------------- shell / topbar */ .m-shell { margin-left: var(--m-side-w); min-height: 100vh; display: flex; flex-direction: column; } .m-topbar { position: sticky; top: 0; z-index: 90; height: var(--m-top-h); background: var(--m-topbar-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--m-line); display: flex; align-items: center; gap: 8px; padding: 0 20px; } .m-topbar__menu, .m-topbar__chat { background: none; border: 0; color: var(--m-ink); padding: 6px; cursor: pointer; display: inline-flex; } .m-topbar__menu { display: none; } .m-topbar__title { font-size: 17px; font-weight: 700; margin: 0; flex: 1; letter-spacing: .02em; } .m-topbar__chat { color: var(--m-muted); transition: color .2s ease; } .m-topbar__chat:hover { color: var(--m-accent-2); } /* 未読バッジ（ヘッダーのお知らせベル／サイドバーのナビ項目で共用） */ .m-topbar__badged { position: relative; } .m-badge-dot, .m-badge-nav { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font-family: var(--m-en); font-size: 10px; font-weight: 800; line-height: 1; border-radius: 999px; background: linear-gradient(135deg, var(--m-accent), var(--m-accent-dark)); color: #fff; } .m-badge-dot { position: absolute; top: -3px; right: -5px; border: 2px solid var(--m-topbar-bg); } .m-badge-nav { margin-left: auto; box-shadow: var(--m-glow); } .m-main { padding: 24px clamp(16px, 3vw, 40px) 64px; width: 100%; } /* フラッシュメッセージはフローティング表示（レイアウトを押し下げない＝消えても要素が動かない）。 left/right インセット＋max-width＋margin auto により、PCは中央寄せ・SPは画面幅をしっかり使う。 */ .m-flash { position: fixed; top: 16px; left: 16px; right: 16px; margin: 0 auto; max-width: 520px; z-index: 1000; display: flex; align-items: center; gap: 8px; /* 背景は不透明（カード色）にし、色付きボーダー＋文字色で意味を表す */ background: var(--m-card); color: var(--m-good); border: 1px solid rgba(78,203,138,.5); padding: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 500; box-shadow: var(--m-shadow); cursor: pointer; animation: m-flash-in .3s ease; transition: opacity .35s ease, transform .35s ease; } .m-flash .m-icon { width: 18px; height: 18px; flex-shrink: 0; } .m-flash--error { color: var(--m-accent); border-color: rgba(225,19,43,.5); } .m-flash--hide { opacity: 0; transform: translateY(-12px); pointer-events: none; } @keyframes m-flash-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } /* モーダル（native ） */ .m-modal { margin: auto; padding: 22px 24px; width: calc(100% - 32px); max-width: 420px; background: var(--m-card); color: var(--m-ink); border: 1px solid var(--m-line-2); border-radius: 14px; box-shadow: var(--m-shadow); } .m-modal::backdrop { background: rgba(0,0,0,.55); } .m-modal__title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; margin: 0 0 10px; } .m-modal__title .m-icon { width: 20px; height: 20px; color: var(--m-warn); flex-shrink: 0; } .m-modal__body { color: var(--m-muted); font-size: 14px; line-height: 1.7; margin: 0 0 22px; } .m-modal__actions { display: flex; gap: 10px; justify-content: flex-end; } /* 記録詳細モーダル（日付クリックで開く: 当日の記録＋目標比較） */ .m-modal--wide { max-width: 560px; max-height: 85vh; overflow-y: auto; } .m-linkbtn { background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; } .m-recordmodal__title { justify-content: flex-start; gap: 10px; flex-wrap: wrap; } .m-recordmodal__stats { display: flex; gap: 26px; margin: 2px 0 16px; } .m-recordmodal__stats > div { display: flex; flex-direction: column; gap: 2px; } .m-recordmodal__k { font-size: 12px; color: var(--m-muted); } .m-recordmodal__v { font-family: var(--m-en); font-weight: 700; font-size: 18px; color: var(--m-ink); } .m-recordmodal__table { font-size: 13px; } .m-recordmodal__table th, .m-recordmodal__table td { padding: 8px 10px; } /* 目標列（3列目）は長い値（例: 摂取カロリーの範囲）を折り返してコンパクトに表示 */ .m-recordmodal__table td:nth-child(3) { white-space: normal; line-height: 1.35; } .m-recordmodal__cond { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; margin: 0; } .m-recordmodal__cond > div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--m-line); padding: 4px 0; } .m-recordmodal__cond dt { color: var(--m-muted); font-size: 12px; } .m-recordmodal__cond dd { margin: 0; font-size: 13px; font-weight: 600; } .m-recordmodal__memo { font-size: 13px; color: var(--m-ink-2); margin: 6px 0 0; white-space: pre-wrap; } /* メモ等と下部ボタンが近づきすぎないよう区切りと余白を確保 */ .m-recordmodal__actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--m-line); } /* ---------------------------------------------------------------- common bits */ .m-pagehead { margin-bottom: 20px; } .m-pagehead h2 { font-size: 21px; margin: 0 0 4px; letter-spacing: .01em; overflow-wrap: anywhere; } /* 長いメールアドレス等の不可分トークンでも横溢れしないよう折り返す */ .m-pagehead p { margin: 0; color: var(--m-muted); font-size: 13.5px; overflow-wrap: anywhere; } .m-card { background: var(--m-card); border: 1px solid var(--m-line); border-radius: var(--m-radius); padding: 22px; box-shadow: inset 0 1px 0 var(--m-card-hi), var(--m-shadow); } .m-card + .m-card, .m-block + .m-block { margin-top: 18px; } .m-card__title { font-size: 15px; font-weight: 700; margin: 0 0 16px; display: flex; align-items: center; gap: 8px; letter-spacing: .01em; } .m-card__title .m-icon { width: 18px; height: 18px; color: var(--m-accent-2); } /* カード内の共通タイポトークン（面談日付・お知らせ等のインラインstyleを置換） */ .m-card__figure { font-family: var(--m-en); font-size: 24px; font-weight: 800; line-height: 1.1; margin: 0 0 4px; } .m-card__date { font-family: var(--m-en); font-size: 12px; color: var(--m-muted); margin: 0 0 4px; } .m-card__lead { font-weight: 700; margin: 0 0 8px; } .m-card__lead a:hover { color: var(--m-accent-2); } .m-card__note { color: var(--m-muted); font-size: 13px; margin: 0; } .m-card__cta { margin-top: 14px; } .m-section-title { font-size: 17px; font-weight: 800; margin: 28px 0 14px; letter-spacing: .02em; } .m-section-title--tight { margin-top: 8px; } /* 見出し＋右寄せ導線（例: 最近の記録｜すべての記録を見る） */ .m-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 0 14px; flex-wrap: wrap; } .m-section-head .m-section-title { margin: 0; } /* カード先頭の見出しは card の padding 上端で十分。28px の上マージンを詰めて余白を抑える */ .m-card > .m-section-head:first-child { margin-top: 0; } /* 目標未設定などの空状態＋主CTA */ .m-emptycta { text-align: center; } .m-emptycta p { color: var(--m-muted); margin: 0 0 16px; font-size: 13.5px; } .m-grid { display: grid; gap: 18px; } .m-grid--2 { grid-template-columns: repeat(2, 1fr); } .m-grid--3 { grid-template-columns: repeat(3, 1fr); } /* ダッシュボード: グラフを主役にした非対称2カラム（右の面談/お知らせの余白を抑える） */ .m-grid--dash { grid-template-columns: minmax(0, 1.6fr) 1fr; } .m-muted { color: var(--m-muted); } .m-empty { color: var(--m-muted); text-align: center; padding: 40px 0; } /* buttons */ .m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--m-font); font-weight: 700; font-size: 14px; padding: 11px 22px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease; } .m-btn:hover { transform: translateY(-1px); } .m-btn--primary { background: linear-gradient(135deg, var(--m-accent), var(--m-accent-dark)); color: #fff; box-shadow: var(--m-glow); } /* として使う primary ボタンは .m-body a { color: inherit } に負けて文字が黒くなるため明示的に白へ */ .m-body a.m-btn--primary { color: #fff; } .m-btn--primary:hover { background: linear-gradient(135deg, var(--m-accent), var(--m-accent-dark)); filter: brightness(1.06); box-shadow: 0 12px 34px rgba(225,19,43,.5); } .m-btn--ghost { background: var(--m-ghost-bg); color: var(--m-ink); border-color: var(--m-line-2); } .m-btn--ghost:hover { border-color: var(--m-accent); color: var(--m-accent-2); background: var(--m-ghost-bg-hover); } .m-btn--block { width: 100%; } /* badges / pills */ .m-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--m-accent-soft); color: var(--m-accent-2); } .m-badge--cat { background: rgba(127,127,140,.14); color: var(--m-muted); } .m-badge--good { background: rgba(78,203,138,.14); color: var(--m-good); } .m-badge--warn { background: rgba(217,164,65,.16); color: var(--m-warn); } .m-badge--bad { background: var(--m-accent-soft); color: var(--m-accent-2); } .m-badge--used { background: rgba(127,127,140,.18); color: var(--m-muted); } /* リンクとして使う badge には押下のアフォーダンスを与える */ a.m-badge { cursor: pointer; transition: filter .15s ease, background .15s ease; } a.m-badge:hover { filter: brightness(1.08); background: var(--m-accent-soft); } /* 変化量バッジ（現在の状態カードの体重・体脂肪率で使用。delta パーシャル経由） */ .m-stat__delta { font-size: 12px; font-weight: 700; margin-top: 3px; display: inline-flex; align-items: center; gap: 3px; } .m-stat__delta.is-down { color: var(--m-good); } .m-stat__delta.is-up { color: var(--m-warn); } /* 増加=要注意はアンバー。深紅はブランドアクセント専用に温存 */ /* 変化なし(±0) と、良し悪しを色で断定しない指標(体重など)は中立色 */ .m-stat__delta.is-flat, .m-stat__delta.is-neutral { color: var(--m-muted); } /* goal card（栄養目標を1枚に集約：カロリー見出し＋PFC/微量の2列リスト） */ .m-goalcard { padding: 15px 18px; } .m-goalcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; /* 狭幅でカロリー(範囲)が見出し行を溢れさせないよう折り返す */ padding-bottom: 11px; border-bottom: 1px solid var(--m-line); } .m-goalcard__label { font-size: 13px; font-weight: 700; color: var(--m-muted); } .m-goalcard__cal { font-family: var(--m-en); font-size: 30px; font-weight: 800; line-height: 1; color: var(--m-ink); min-width: 0; overflow-wrap: anywhere; } .m-goalcard__cal small { font-size: 14px; font-weight: 700; color: var(--m-muted); margin-left: 4px; } .m-goalgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; margin: 4px 0 0; } .m-goalgrid__item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--m-line); } /* 最終行（2列ぶん）の下線は省く */ .m-goalgrid__item:nth-last-child(-n+2) { border-bottom: 0; } .m-goalgrid__label { font-size: 13.5px; color: var(--m-muted); margin: 0; } .m-goalgrid__value { font-family: var(--m-en); font-size: 19px; font-weight: 800; color: var(--m-ink); margin: 0; } .m-goalgrid__value small { font-size: 12px; font-weight: 700; color: var(--m-muted); margin-left: 3px; } /* status card（サマリー＋現在の値を集約：体重・体脂肪率を主役に、その他を副指標として並べる） */ .m-status { padding: 15px 18px; } .m-status__hero { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; padding-bottom: 13px; border-bottom: 1px solid var(--m-line); } .m-status__label { font-size: 12.5px; color: var(--m-muted); margin: 0 0 2px; } .m-status__value { font-family: var(--m-en); font-size: 30px; font-weight: 800; line-height: 1.05; color: var(--m-ink); margin: 2px 0 5px; } .m-status__value small { font-size: 14px; font-weight: 700; color: var(--m-muted); margin-left: 3px; } .m-status__since { color: var(--m-muted); font-weight: 600; margin-left: 5px; } /* 変化量の色には乗せず控えめに */ .m-status__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; margin: 6px 0 0; } .m-status__sub { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 9px 0; } .m-status__sublabel { font-size: 12.5px; color: var(--m-muted); margin: 0; } .m-status__subvalue { font-family: var(--m-en); font-size: 17px; font-weight: 800; color: var(--m-ink); margin: 0; } .m-status__subvalue small { font-size: 12px; font-weight: 700; color: var(--m-muted); margin-left: 2px; } /* chart */ .m-chart { width: 100%; height: auto; display: block; } .m-chart__grid { stroke: var(--m-chart-grid); } .m-chart__dot { fill: var(--m-card); } .m-chart__label { fill: var(--m-muted); } .m-chart__empty, .m-chart-empty { color: var(--m-muted); text-align: center; padding: 30px 0; font-size: 14px; } /* Chart.js canvas */ .m-canvas-wrap { position: relative; width: 100%; height: 360px; } .m-canvas-wrap--tall { height: 440px; } /* max-width:100% で Chart.js がセットする canvas のピクセル幅が親(カード)を超えても溢れさせない */ .m-canvas-wrap canvas { display: block; max-width: 100%; } /* 描画前のスケルトン（JS で .is-chart-ready が付くと消える） */ .m-canvas-wrap::after { content: "読み込み中…"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--m-faint); font-size: 13px; background: var(--m-soft); border-radius: 10px; transition: opacity .25s ease, visibility .25s ease; } .m-canvas-wrap.is-chart-ready::after { opacity: 0; visibility: hidden; } /* グラフのヘッダーバー（タイトル＋期間トグル / 期間キャプション） */ .m-chartbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .m-chartbar .m-card__title { margin: 0; } .m-chart__period { font-size: 12px; color: var(--m-muted); font-family: var(--m-en); margin: 0; } /* 期間トグル（直近1ヶ月 / 月毎） */ .m-periodtoggle { display: inline-flex; border: 1px solid var(--m-line-2); border-radius: 8px; overflow: hidden; } .m-periodtoggle__btn { font-family: var(--m-font); font-weight: 700; font-size: 12.5px; color: var(--m-muted); background: transparent; border: 0; padding: 6px 12px; cursor: pointer; transition: background .15s, color .15s; } .m-periodtoggle__btn + .m-periodtoggle__btn { border-left: 1px solid var(--m-line-2); } .m-periodtoggle__btn:hover:not(.is-active) { color: var(--m-ink); background: var(--m-hover); } .m-periodtoggle__btn.is-active { background: linear-gradient(135deg, var(--m-accent), var(--m-accent-dark)); color: #fff; } /* 月切替ナビ（月毎モード時のみ、トグルの下の行に表示）。 独立した行なので、表示/非表示でトグル自体の位置は動かない。 */ .m-monthnav__ctrl { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 12px; } .m-monthnav__ctrl[hidden] { display: none; } .m-monthnav__btn { font-family: var(--m-font); font-weight: 700; font-size: 12.5px; color: var(--m-ink); background: var(--m-ghost-bg); border: 1px solid var(--m-line-2); border-radius: 8px; padding: 6px 12px; cursor: pointer; transition: border-color .15s, color .15s, opacity .15s; } .m-monthnav__btn:hover:not(:disabled) { border-color: var(--m-accent); color: var(--m-accent-2); } .m-monthnav__btn:disabled { opacity: .4; cursor: not-allowed; } .m-monthnav__select { font-family: var(--m-en); font-weight: 700; font-size: 14px; color: var(--m-ink); background: var(--m-input-bg); border: 1px solid var(--m-line-2); border-radius: 8px; padding: 7px 12px; min-width: 130px; cursor: pointer; transition: border-color .15s; } /* マウス操作時は枠線のみ強調。キーボード時は上の :focus-visible のアウトラインを優先する */ .m-monthnav__select:focus:not(:focus-visible) { outline: none; border-color: var(--m-accent); } /* 小サイズボタン（テーブル内の編集ボタンなど） */ .m-btn--xs { padding: 6px 12px; font-size: 12px; border-radius: 8px; } .m-btn--xs:hover { transform: none; } /* ページネーション */ .m-table-foot { padding: 14px; border-top: 1px solid var(--m-line); } .m-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; } .m-pagination__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; font-family: var(--m-en); font-weight: 700; font-size: 13px; color: var(--m-ink); background: var(--m-ghost-bg); border: 1px solid var(--m-line-2); border-radius: 8px; text-decoration: none; transition: border-color .15s, color .15s, background .15s; } a.m-pagination__btn:hover { border-color: var(--m-accent); color: var(--m-accent-2); background: var(--m-ghost-bg-hover); } .m-pagination__btn.is-active { background: linear-gradient(135deg, var(--m-accent), var(--m-accent-dark)); color: #fff; border-color: transparent; } .m-pagination__btn.is-disabled { opacity: .4; cursor: not-allowed; } .m-pagination__gap { color: var(--m-muted); padding: 0 2px; } /* 必須/任意マーク（赤=必須 / 灰=任意）。ラベル横の小さなドットアイコン */ .m-mark { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; margin-left: 5px; } .m-mark--req { background: var(--m-accent); } .m-mark--opt { background: var(--m-muted); } .m-legend-marks { display: inline-flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; } .m-legend-marks > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--m-muted); } .m-legend-marks .m-mark { margin-left: 0; } /* 開閉セクション（データ入力の詳細項目） */ .m-collapse { border: 1px solid var(--m-line-2); border-radius: 10px; margin-bottom: 16px; background: var(--m-soft); overflow: hidden; } .m-collapse > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 13px 16px; font-weight: 700; font-size: 13.5px; color: var(--m-ink); } .m-collapse > summary::-webkit-details-marker { display: none; } .m-collapse > summary:hover { background: var(--m-hover); } .m-collapse__chev { margin-left: auto; color: var(--m-muted); transition: transform .2s ease; } .m-collapse[open] > summary .m-collapse__chev { transform: rotate(180deg); } .m-collapse__body { padding: 4px 16px 14px; } .m-collapse__body .m-field:last-child { margin-bottom: 4px; } /* チャット: ページ全体スクロールを無効化し、ストリーム内のみスクロール */ .m-body--noscroll { overflow: hidden; } .m-body--chat .m-shell { height: 100vh; height: 100dvh; min-height: 0; } .m-body--chat .m-main { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding-top: 18px; padding-bottom: 16px; } .m-body--chat .m-chat { height: auto; flex: 1; min-height: 0; } /* tables */ /* position:relative で内部の絶対配置要素(.sr-only 等)の包含ブロックをこのスクロール枠に固定する。 これが無いと表が画面幅を超えた際、表内の position:absolute な .sr-only(「操作」列の見出し等)が 包含ブロック=初期包含ブロック(ビューポート)基準となり、overflow-x:auto のスクロール枠でクリップされず 表の右端(画面外)に居座る。結果ページ全体へ横スクロールが漏れるため、枠を包含ブロックにして閉じ込める。 */ .m-table-wrap { overflow-x: auto; position: relative; } .m-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .m-table th, .m-table td { padding: 12px 14px; text-align: left; white-space: nowrap; } .m-table thead th { color: var(--m-muted); font-weight: 700; font-size: 12px; border-bottom: 2px solid var(--m-line-2); } /* テーブル共通の揃え（統一ルール）。全データテーブルに .m-table--centerhead を付けて使う: 見出し=中央 / データ列(数値・日付・タグ・状態・操作)=中央 / 文章列(.m-cell-left=氏名・メモ・タイトル等)=左 */ .m-table--centerhead thead th { text-align: center; } .m-table--centerhead td { text-align: center; } .m-table--centerhead td .a-actions { justify-content: center; } .m-table--centerhead td.m-cell-left { text-align: left; } .m-table--centerhead td.m-cell-left .a-actions { justify-content: flex-start; } .m-table tbody tr { border-bottom: 1px solid var(--m-line); } .m-table tbody tr:last-child { border-bottom: 0; } .m-table tbody tr:hover { background: var(--m-hover); } .m-table td.num { font-family: var(--m-en); font-weight: 600; } /* 行頭の日付から編集へ入れるリンク */ .m-table__datelink { font-family: var(--m-en); font-weight: 700; color: var(--m-ink); } .m-table__datelink:hover { color: var(--m-accent-2); text-decoration: underline; } /* 本文中のテキストリンク（ボタンではない通常のリンク）。 .m-body a の color:inherit / text-decoration:none リセット（詳細度 0,1,1）に勝つよう a.m-link で指定する。 色はテーマのリンク用カラー（--m-accent-2: ダーク=明るい赤 / ライト=濃い赤）に追従させる。 */ .m-body a.m-link { color: var(--m-accent-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 600; transition: filter .15s ease, text-decoration-thickness .15s ease; } .m-body a.m-link:hover { filter: brightness(1.12); text-decoration-thickness: 2px; } .m-body a.m-link:focus-visible { outline: 2px solid var(--m-accent-2); outline-offset: 2px; border-radius: 3px; } /* データなし(=未入力)の「--」。情報なので装飾色 faint ではなく可読な muted を使う */ .m-na { display: block; text-align: center; color: var(--m-muted); } /* 非同期読み込み中のディマー（チャートの月切替 / 記録履歴のページング） */ [data-periodchart].is-loading .m-canvas-wrap, [data-ajax-history].is-loading { opacity: .5; pointer-events: none; transition: opacity .15s ease; } /* forms */ .m-field { margin-bottom: 16px; } .m-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; } .m-field .hint { color: var(--m-muted); font-weight: 400; font-size: 12px; margin-left: 6px; } .m-input, .m-textarea, .m-select { width: 100%; font-family: var(--m-font); font-size: 15px; color: var(--m-ink); background: var(--m-input-bg); border: 1px solid var(--m-line-2); border-radius: 10px; padding: 11px 14px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .m-input::placeholder, .m-textarea::placeholder { color: var(--m-faint); } .m-input:focus, .m-textarea:focus, .m-select:focus { outline: none; border-color: var(--m-accent); box-shadow: 0 0 0 3px rgba(225,19,43,.18); } .m-textarea { min-height: 96px; resize: vertical; } /* 単一行の入力欄（テキスト/日付/時刻/数値/セレクト）は高さを 46px に固定し全て同一サイズに揃える */ .m-input, .m-select { height: 46px; } /* line-height はテキスト系のみに当てる。日付/時刻入力は値を ::-webkit-date-and-time-value で 描画するため line-height を当てると値が縦にずれる（高さは上の共通ルールで揃う）ので除外する。 */ .m-input:not([type="date"]):not([type="time"]):not([type="datetime-local"]), .m-select { line-height: 1.2; } /* iOS Safari の日付・時刻入力はネイティブ装飾で幅・高さが他の入力欄とずれる（特に幅が固有値で溢れる）ため正規化する */ .m-input[type="date"], .m-input[type="time"], .m-input[type="datetime-local"] { -webkit-appearance: none; appearance: none; width: 100%; } .m-input[type="date"]::-webkit-date-and-time-value, .m-input[type="time"]::-webkit-date-and-time-value, .m-input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; margin: 0; } .m-input[type="date"]::-webkit-calendar-picker-indicator, .m-input[type="time"]::-webkit-calendar-picker-indicator, .m-input[type="datetime-local"]::-webkit-calendar-picker-indicator { margin-left: auto; } .m-field__error { color: var(--m-accent-2); font-size: 12.5px; margin-top: 6px; } .m-form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .m-form-row--3 { grid-template-columns: repeat(3, 1fr); } /* PFC・クイック記録の3列（スマホで1列） */ .m-input-unit { position: relative; } .m-input-unit span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--m-muted); font-size: 13px; } .m-input-unit .m-input { padding-right: 42px; } /* dashboard quick links */ .m-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .m-quick a { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; background: var(--m-card); border: 1px solid var(--m-line); border-radius: var(--m-radius); padding: 18px; font-size: 13.5px; font-weight: 700; color: var(--m-ink); box-shadow: inset 0 1px 0 var(--m-card-hi), var(--m-shadow); transition: border-color .15s, transform .15s, box-shadow .15s; } .m-quick a:hover { border-color: var(--m-accent); transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--m-card-hi), 0 14px 32px rgba(225,19,43,.18); } .m-quick .m-icon { width: 26px; height: 26px; color: var(--m-accent-2); } /* training */ .m-menu { background: var(--m-card); border: 1px solid var(--m-line); border-radius: var(--m-radius); overflow: hidden; box-shadow: inset 0 1px 0 var(--m-card-hi), var(--m-shadow); } .m-menu + .m-menu { margin-top: 16px; } .m-menu__head { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--m-line); } .m-menu__title { font-size: 16px; font-weight: 700; margin: 0; } .m-menu__desc { color: var(--m-muted); font-size: 13px; margin: 14px 20px 0; } .m-ex { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; } .m-ex th, .m-ex td { padding: 12px 20px; text-align: left; border-top: 1px solid var(--m-line); } .m-ex th { color: var(--m-muted); font-size: 12px; font-weight: 700; } .m-ex td:first-child { font-weight: 700; } .m-ex .num { font-family: var(--m-en); } /* お手本動画（種目行の「▶お手本」で開く展開行）。テーブル内ではなく colspan のフル幅行に出す。 */ .m-ex__play { margin-left: 10px; vertical-align: middle; } .m-ex__videorow td { padding: 0 20px 16px; border-top: 0; } /* YouTube 埋め込み（管理プレビュー・会員表示で共用）。16:9・テーマ変数準拠。 */ .m-video { position: relative; width: 100%; max-width: 720px; margin: 0; aspect-ratio: 16 / 9; background: var(--m-soft); border: 1px solid var(--m-line); border-radius: var(--m-radius); overflow: hidden; } .m-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* SP: 4列テーブルは狭幅で窮屈になるため、種目ごとのカード型に積み上げる */ @media (max-width: 560px) { .m-ex thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .m-ex, .m-ex tbody, .m-ex tr, .m-ex td { display: block; width: auto; } /* display:block(著者) は [hidden] の display:none を上書きするため、動画パネルの開閉が効くよう復元 */ .m-ex tr[hidden] { display: none; } .m-ex tbody tr:not(.m-ex__videorow) { padding: 13px 18px; border-top: 1px solid var(--m-line); } .m-ex td { padding: 3px 0; border-top: 0; } /* 種目名（＋お手本ボタン）はカード見出しとして左右に配置 */ .m-ex tbody tr:not(.m-ex__videorow) > td:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .m-ex__exname { font-weight: 700; font-size: 15px; } .m-ex__play { margin: 0; white-space: nowrap; flex: none; } /* セット/回数/備考は「ラベル: 値」の行に */ .m-ex tbody tr:not(.m-ex__videorow) > td[data-label] { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-align: right; } .m-ex td[data-label]::before { content: attr(data-label); color: var(--m-muted); font-size: 12px; font-weight: 700; text-align: left; } .m-ex tbody tr:not(.m-ex__videorow) > td[data-label]:empty { display: none; } /* 備考が空の行は出さない（flex指定より高詳細度で確実に） */ /* お手本動画は種目カード直下にフル幅で */ .m-ex__videorow td { display: block; padding: 0 18px 14px; border-top: 0; } } /* coupons */ .m-coupons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .m-coupon { position: relative; background: var(--m-card); border: 1px solid var(--m-line); border-radius: var(--m-radius); padding: 20px; border-left: 5px solid var(--m-accent); box-shadow: inset 0 1px 0 var(--m-card-hi), var(--m-shadow); } /* 使用済み: ステータスバッジは読めるまま、本文だけ控えめに */ .m-coupon.is-used { border-left-color: var(--m-faint); box-shadow: none; } .m-coupon.is-used .m-coupon__title, .m-coupon.is-used .m-coupon__desc, .m-coupon.is-used .m-coupon__code, .m-coupon.is-used .m-coupon__exp { opacity: .55; } .m-coupon__title { font-size: 15px; font-weight: 700; margin: 10px 0 8px; } .m-coupon__desc { font-size: 13px; color: var(--m-muted); margin: 0 0 14px; } .m-coupon__code { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; /* 長いクーポンコードでもバッジが折り返り、横溢れしない */ background: var(--m-soft); border: 1px dashed var(--m-line-2); border-radius: 8px; padding: 8px 12px; font-family: var(--m-en); font-weight: 700; letter-spacing: .04em; color: var(--m-ink); } .m-coupon__code > span:first-child { min-width: 0; overflow-wrap: anywhere; word-break: break-word; } .m-coupon__exp { font-size: 12px; color: var(--m-muted); margin-top: 10px; } /* chat */ .m-chat { display: flex; flex-direction: column; height: calc(100vh - var(--m-top-h) - 48px); height: calc(100dvh - var(--m-top-h) - 48px); min-height: 420px; } .m-chat__stream { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 4px 4px 16px; } .m-chat__loader { align-self: center; flex: none; margin: 2px 0; font-size: 12px; color: var(--m-muted); } .m-chat__loader[hidden] { display: none; } .m-msg { max-width: 78%; } .m-msg__bubble { padding: 11px 15px; border-radius: 14px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; } .m-msg__time { font-size: 11px; color: var(--m-muted); margin-top: 4px; } .m-msg--coach { align-self: flex-start; } .m-msg--coach .m-msg__bubble { background: var(--m-soft); border: 1px solid var(--m-line-2); color: var(--m-ink); border-top-left-radius: 4px; } .m-msg--member { align-self: flex-end; text-align: right; } .m-msg--member .m-msg__bubble { background: linear-gradient(135deg, var(--m-accent), var(--m-accent-dark)); color: #fff; border-top-right-radius: 4px; box-shadow: 0 6px 18px rgba(225,19,43,.3); } .m-msg__sender { font-size: 11.5px; color: var(--m-muted); margin-bottom: 4px; } .m-chat__form { display: flex; gap: 10px; align-items: flex-end; padding-top: 12px; border-top: 1px solid var(--m-line); } .m-chat__form .m-textarea { min-height: 46px; } .m-chat__send { flex: none; width: 48px; height: 48px; border-radius: 12px; border: 0; background: linear-gradient(135deg, var(--m-accent), var(--m-accent-dark)); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: var(--m-glow); transition: filter .15s ease; } .m-chat__send:hover { filter: brightness(1.1); } /* notifications */ .m-news { background: var(--m-card); border: 1px solid var(--m-line); border-radius: var(--m-radius); overflow: hidden; box-shadow: inset 0 1px 0 var(--m-card-hi), var(--m-shadow); } .m-news__item { display: block; padding: 18px 20px; border-bottom: 1px solid var(--m-line); transition: background .15s; } .m-news__item:last-child { border-bottom: 0; } .m-news__item:hover { background: var(--m-hover); } /* 未読のお知らせは左に赤帯＋NEWタグで強調 */ .m-news__item.is-unread { box-shadow: inset 3px 0 0 var(--m-accent); } .m-news__new { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; font-family: var(--m-en); font-size: 9.5px; font-weight: 800; letter-spacing: .04em; line-height: 1; border-radius: 999px; background: linear-gradient(135deg, var(--m-accent), var(--m-accent-dark)); color: #fff; } .m-news__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .m-news__date { font-size: 12px; color: var(--m-muted); font-family: var(--m-en); } .m-news__title { font-size: 14.5px; font-weight: 700; margin: 0; } .m-news__body { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; line-height: 1.9; color: var(--m-ink-2); } /* faq */ .m-faq { background: var(--m-card); border: 1px solid var(--m-line); border-radius: var(--m-radius); overflow: hidden; box-shadow: inset 0 1px 0 var(--m-card-hi), var(--m-shadow); } .m-faq__item { border-bottom: 1px solid var(--m-line); } .m-faq__item:last-child { border-bottom: 0; } .m-faq__q { list-style: none; -webkit-appearance: none; appearance: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 18px 20px; font-weight: 700; font-size: 14.5px; } .m-faq__q::-webkit-details-marker { display: none; } .m-faq__q .badge { flex: none; width: 26px; height: 26px; border-radius: 6px; background: linear-gradient(135deg, var(--m-accent), var(--m-accent-dark)); color: #fff; display: grid; place-items: center; font-family: var(--m-en); font-weight: 700; font-size: 13px; box-shadow: 0 4px 12px rgba(225,19,43,.3); } .m-faq__q .plus { margin-left: auto; position: relative; width: 14px; height: 14px; flex: none; } .m-faq__q .plus::before, .m-faq__q .plus::after { content: ""; position: absolute; background: var(--m-muted); transition: transform .2s, opacity .2s; } .m-faq__q .plus::before { top: 6px; left: 0; width: 14px; height: 2px; } .m-faq__q .plus::after { left: 6px; top: 0; width: 2px; height: 14px; } .m-faq__item[open] .plus::after { transform: rotate(90deg); opacity: 0; } .m-faq__a { padding: 0 20px 20px 58px; color: var(--m-ink-2); line-height: 1.9; } /* ---------------------------------------------------------------- login */ .m-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background-color: var(--m-bg); background-image: var(--m-login-img); } .m-login__card { width: 100%; max-width: 400px; background: var(--m-card); border: 1px solid var(--m-line-2); border-radius: 18px; padding: 40px 32px; box-shadow: inset 0 1px 0 var(--m-card-hi), 0 40px 90px rgba(0,0,0,.45); } .m-login__logo { text-align: center; font-family: var(--m-en); font-weight: 800; font-size: 32px; letter-spacing: .16em; color: var(--m-ink); text-shadow: 0 0 24px rgba(225,19,43,.4); margin: 0; } .m-login__sub { text-align: center; color: var(--m-muted); font-size: 13px; margin: 6px 0 28px; } /* 汎用アラート枠。フォームのエラー表示(admin/partials/form-errors)とログインで共用。 */ .m-alert, .m-login__alert { background: var(--m-accent-soft); color: var(--m-accent-2); border: 1px solid rgba(225,19,43,.4); border-radius: 10px; padding: 11px 14px; font-size: 13px; margin-bottom: 18px; } /* 記録テーブルの操作列(編集+削除)。会員ページは admin.css 非依存のため member.css 側に定義。 */ .m-record-actions { display: inline-flex; gap: 8px; align-items: center; flex-wrap: nowrap; } .m-inline-form { display: inline; } .m-login__demo { margin-top: 20px; padding: 12px 14px; background: var(--m-soft); border: 1px solid var(--m-line); border-radius: 10px; font-size: 12.5px; color: var(--m-muted); text-align: center; } .m-login__demo b { color: var(--m-ink); font-family: var(--m-en); } .m-login__back { display: block; text-align: center; margin-top: 18px; font-size: 13px; color: var(--m-muted); transition: color .15s ease; } .m-login__back:hover { color: var(--m-accent-2); } .m-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--m-muted); margin-bottom: 18px; } .m-check input { accent-color: var(--m-accent); } /* ---------------------------------------------------------------- responsive */ @media (max-width: 900px) { .m-sidebar { transform: translateX(-100%); transition: transform .28s ease; box-shadow: 0 0 50px rgba(0,0,0,.6); } .drawer-open .m-sidebar { transform: translateX(0); } .m-sidebar__close { display: inline-flex; } .m-shell { margin-left: 0; } .m-topbar__menu { display: inline-flex; } .drawer-open { overflow: hidden; } .m-quick { grid-template-columns: repeat(2, 1fr); } /* minmax(0,1fr) で各セルが中身の最小幅(固定px の canvas 等)に押し広げられても トラックが画面幅を超えないようにする（1fr 既定の min-width:auto による溢れを防ぐ） */ .m-grid--2, .m-grid--3, .m-grid--dash { grid-template-columns: minmax(0, 1fr); } .m-coupons { grid-template-columns: 1fr; } } @media (max-width: 520px) { .m-form-row, .m-form-row--3 { grid-template-columns: 1fr; } .m-main { padding-bottom: 48px; } /* 長い氏名でも崩れにくいよう挨拶見出しを縮小 */ .m-pagehead h2 { font-size: 18px; } /* 目標カードは1列に。下線も1列基準で引き直す（最終1件のみ省略） */ .m-goalgrid { grid-template-columns: 1fr; gap: 0; } .m-goalgrid__item:nth-last-child(-n+2) { border-bottom: 1px solid var(--m-line); } .m-goalgrid__item:last-child { border-bottom: 0; } /* 現在の状態カードの副指標は2列に（活動代謝/クーポン等のラベルが詰まらない幅を確保） */ .m-status__grid { grid-template-columns: repeat(2, 1fr); } .m-status__value { font-size: 26px; } /* 目標カロリー(範囲)を狭幅で1行に収めやすくする */ .m-goalcard__cal { font-size: 24px; } /* SPではグラフのカード余白を詰め、高さも約半分にして縦長を緩和。 左右paddングは他カード(22px)と差が出すぎないよう12pxに留める */ .m-card--chart { padding: 14px 12px; } .m-canvas-wrap { height: 190px; } .m-canvas-wrap--tall { height: 230px; } /* 月ナビはトグル下の行で全幅に広げる */ .m-monthnav__ctrl { justify-content: space-between; } /* 記録詳細モーダル: SPでは左右余白とセル余白を詰めて 項目/実績/目標 テーブルの幅を確保 */ .m-modal--wide { padding: 18px 12px; } .m-recordmodal__table th, .m-recordmodal__table td { padding: 7px 6px; } .m-recordmodal__stats { gap: 18px; } } /* 極狭幅ではクイックリンクを1列にして高さの不揃いを解消 */ @media (max-width: 380px) { .m-quick { grid-template-columns: 1fr; } }