/* * EMMU 音楽ツール(/tools 配下)共通スタイル。 * * デザイントークンは EMMU-tools-port-brief-v2.md §2(ライト)/§6(ダーク)の確定値。 * est- 系クラスの構造は EMMUS(emmus.jp)のツール実装と共通で、 * 度数の色・指板の色・ドットのサイズは EMMUS と一致させる(変更禁止)。 * * テーマはで切り替える。 * 初期適用は tools/layout.blade.php のインラインスクリプト(FOUC対策)、 * 以降は resources/js/tools/core/theme.js が管理する。 */ /* ============ ページ骨格 ============ */ :root { --tools-bg: radial-gradient(120% 90% at 15% 0%, #ffffff 0%, #eef1fa 62%); --tools-t1: #141A38; --tools-t2: #3d4468; --tools-t3: #5a628c; --tools-t4: #6f77a0; --tools-line: #e3e6f2; --tools-line2: #cfd4e8; --tools-pane: #ffffff; --tools-pane-shadow: 0 1px 2px rgba(20, 26, 56, .04), 0 8px 24px rgba(20, 26, 56, .05); --tools-grad: linear-gradient(100deg, #B8D62E, #A78BFA 52%, #7DD3FC); --tools-on-accent: #0f1a2e; } :root[data-theme="dark"] { --tools-bg: radial-gradient(120% 90% at 15% 0%, #1C2450 0%, #0B1020 60%); --tools-t1: #ffffff; --tools-t2: #C2C8EE; --tools-t3: #9AA2D4; --tools-t4: #8B93C8; --tools-line: rgba(255, 255, 255, .09); --tools-line2: rgba(255, 255, 255, .14); --tools-pane: rgba(255, 255, 255, .05); --tools-pane-shadow: none; } .tools-page { margin: 0; min-height: 100vh; background: var(--tools-bg); background-attachment: fixed; color: var(--tools-t2); font-family: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } .tools-shell { max-width: 1240px; margin: 0 auto; padding: 0 16px 48px; } /* ---- 上部バー(ブランド / 一覧リンク / テーマ切替) ---- ヘッダーはシェルの外(全幅 wrap)にあり、既定では従来のシェル内配置と同じ位置になる寸法(max-width 1236 = 1240-4 / padding 22 18 16)を持たせる。一覧ページ(.tools-index-page)だけ wrap に面を付けて全幅バーにする。 */ .tools-topbar-wrap { /* 既定は透明(ツール各ページ)。一覧ページで面と下線を付ける */ } .tools-topbar { max-width: 1236px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 22px 18px 16px; } @media (max-width: 600px) { .tools-topbar { padding: 16px 10px; /* ボタンは折り返してよいが、各ボタンの文字は必ず1行に収める */ flex-wrap: wrap; row-gap: 8px; } .tools-topbar-nav, .tools-topbar-nav a, .tools-auth__btn, .tool-theme-toggle { white-space: nowrap; } .tool-theme-toggle { flex: none; } .tools-shell { padding: 0 8px 36px; } /* 各ツールページはフレームを画面幅いっぱいに出す(一覧ページは2列カードのため対象外) */ .tools-page:not(.tools-index-page) .tools-shell { padding-left: 0; padding-right: 0; } /* フレーム外に出る相互リンクだけは端に貼り付かないよう余白を残す */ .tools-page:not(.tools-index-page) .tool-links { margin-left: 12px; margin-right: 12px; } } .tools-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tools-t1); font-weight: 900; font-size: 18px; letter-spacing: .06em; } .tools-brand img { width: 30px; height: 30px; border-radius: 8px; display: block; } .tools-topbar-nav { display: inline-flex; align-items: center; gap: 16px; font-size: 13px; font-weight: 700; } .tools-topbar-nav a { color: var(--tools-t3); text-decoration: none; } .tools-topbar-nav a:hover { color: var(--tools-t1); } .tools-topbar-spacer { margin-left: auto; } .tool-theme-toggle { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--tools-t3); background: var(--tools-pane); border: 1px solid var(--tools-line2); border-radius: 999px; padding: 8px 14px; cursor: pointer; box-shadow: var(--tools-pane-shadow); } .tool-theme-toggle:hover { color: var(--tools-t1); } .tool-theme-toggle .tool-theme-icon { font-size: 13px; line-height: 1; } /* ---- 上部バーのログイン状態(EMMU web のサイドパネル表示と同趣旨) ---- */ .tools-auth { display: inline-flex; align-items: center; gap: 10px; } .tools-auth__status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--tools-t2); white-space: nowrap; } .tools-auth__dot { width: 8px; height: 8px; border-radius: 50%; background: #a0bc00; } .tools-auth__form { margin: 0; } .tools-auth__btn { display: inline-flex; align-items: center; font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--tools-t2); background: var(--tools-pane); border: 1px solid var(--tools-line2); border-radius: 999px; padding: 8px 16px; cursor: pointer; text-decoration: none; box-shadow: var(--tools-pane-shadow); } .tools-auth__btn:hover { color: var(--tools-t1); } /* 上部バーのホームボタン(ログイン中のみ)。見た目はログインボタンと同じで、アイコンはボトムメニューのホームと同一形状 */ .tools-topbar-nav .tools-home-btn { gap: 5px; white-space: nowrap; color: var(--tools-t2); } /* 一覧ページはヘッダーの配色が別系統(.tools-topbar-nav a が優先される)なので、要素セレクタ込みで指定してログインボタンと同じ色に合わせる */ .tools-index-page .tools-topbar-nav a.tools-home-btn { color: var(--ei-sub); } .tools-index-page .tools-topbar-nav a.tools-home-btn:hover { color: var(--ei-ink); } .tools-home-btn svg { width: 15px; height: 15px; display: block; flex: none; } /* 画面幅が狭いときはログイン状態を縦並びにし、ボタンの文字を折り返さない */ @media (max-width: 600px) { .tools-auth { flex-direction: column; align-items: center; gap: 4px; } .tools-auth__status { font-size: 11px; } .tools-auth__btn { white-space: nowrap; padding: 6px 14px; } } /* ---- EMMU web と同一デザインのドロップダウン(efc-dd / GlassDropdownBase) ---- 値は resources/css/web/form-controls.css の efc-dd と同一。ダークは body.st-dark の値を [data-theme=dark] に対応付け。 */ .tools-page .efc-dd__native { display: none !important; } .tools-page .efc-dd { position: relative; width: 100%; min-width: 0; } /* 下向き三角(efc-dd__ic)は置かない(2026-08-05: その分ラベルの文字を表示する)。左右 padding は「メジャーペンタトニック」(全角11文字)が 196px 幅のボックスに収まる 8px にしている */ .tools-page .efc-dd__field { display: flex; align-items: center; width: 100%; height: 40px; padding: 0 8px; border: none; border-radius: 14px; background: #f5f5f5; font-family: inherit; cursor: pointer; box-sizing: border-box; } [data-theme="dark"] .tools-page .efc-dd__field { background: #333333; } /* 選択中ラベルの省略(…)は禁止: 収まらないときは dropdown.js が文字サイズを自動縮小して全文を表示する(2026-08-05) */ .tools-page .efc-dd__label { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 16px; font-weight: 400; color: #333333; white-space: nowrap; overflow: hidden; } [data-theme="dark"] .tools-page .efc-dd__label { color: #ffffff; } .tools-page .efc-dd__label--ph { color: #999999; } /* メニューは項目が収まる幅まで広がる(最低はボックス幅)。画面右端からのはみ出しは dropdown.js が右寄せに反転して防ぐ。高さは 10 項目程度でスクロールに切り替わる寸法。 */ .tools-page .efc-dd__menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 320; min-width: 100%; width: max-content; max-width: min(360px, calc(100vw - 24px)); max-height: 340px; overflow-y: auto; padding: 6px; border-radius: 18px; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10); box-sizing: border-box; } [data-theme="dark"] .tools-page .efc-dd__menu { background: rgba(51, 51, 51, 0.97); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26); } .tools-page .efc-dd__menu[hidden] { display: none !important; } /* 上下の余白は EMMU web の半分(高さ40→28)にして一覧性を上げる(2026-08-05) */ .tools-page .efc-dd__item { display: block; width: 100%; height: 28px; margin: 2px 0; padding: 0 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #333333; font-size: 16px; font-weight: 400; font-family: inherit; line-height: 26px; text-align: center; white-space: nowrap; cursor: pointer; box-sizing: border-box; } [data-theme="dark"] .tools-page .efc-dd__item { color: #ffffff; } .tools-page .efc-dd__item:hover { background: rgba(160, 188, 0, 0.08); } .tools-page .efc-dd__item--sel { font-weight: 700; background: rgba(160, 188, 0, 0.14); border-color: rgba(160, 188, 0, 0.42); } .tools-page .efc-dd__sep { display: block; height: 1px; margin: 0 12px; background: rgba(0, 0, 0, 0.05); } [data-theme="dark"] .tools-page .efc-dd__sep { background: rgba(255, 255, 255, 0.08); } /* optgroup の見出し(EMMU web の efc-dd はフラット構成のため小見出しで補完)。埋もれないよう帯にする。ライム系は選択中項目の色と紛らわしいためライトブルー系(2026-08-05) */ .tools-page .efc-dd__group { margin: 6px 2px 2px; padding: 5px 10px; border-radius: 8px; background: rgba(56, 152, 224, .13); font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; color: #1d6ca8; text-align: left; } [data-theme="dark"] .tools-page .efc-dd__group { background: rgba(125, 211, 252, .20); color: #a5dcff; } /* ---- ツール下のアフィリエイトバナー。広い画面は左右並び・600px以下は縦並び ---- .tool-ads / .tool-ads__item は管理画面「アフィリエイト管理」で保存される広告 HTML(DB)から参照されるクラス。削除・改名しないこと。 */ /* PR 表記(A8 の利用規約で求められる開示文)。広告の真上に出る。管理画面で未設定なら PHP 側がこの要素ごと出さない。 */ .tools-page .tool-ads-pr { margin: 18px 0 0; font-size: 11px; line-height: 1.6; text-align: center; color: var(--et-text3, #9A9387); } .tools-page .tool-ads-pr + .tool-ads { margin-top: 6px; } .tools-page .tool-ads { display: flex; justify-content: center; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-top: 18px; } .tools-page .tool-ads__item { line-height: 0; text-align: center; } .tools-page .tool-ads a { display: inline-block; line-height: 0; } .tools-page .tool-ads img { max-width: 100%; height: auto; border: 0; } @media (max-width: 600px) { .tools-page .tool-ads { flex-direction: column; align-items: center; } } /* 「スマホとPCで分ける」モード(--split): 1枠目(--sp)=600px以下のみ、 2枠目(--pc)=600pxより広い画面のみ表示 */ .tools-page .tool-ads--split .tool-ads__item--sp { display: none; } @media (max-width: 600px) { .tools-page .tool-ads--split .tool-ads__item--sp { display: block; } .tools-page .tool-ads--split .tool-ads__item--pc { display: none; } } /* ---- 指板図/鍵盤図の全画面表示(スマホのみ。core/board-fullscreen.js が制御) ---- */ /* 開くボタンはフレーム左上。スマホ幅でのみ出す */ .board-fs-btn { display: none; } .board-fs-btn__ic { display: block; width: 15px; height: 15px; } .board-fs-btn__ic svg { width: 100%; height: 100%; display: block; } @media (max-width: 600px) { /* ボタンの分だけ上に余白を足し、指板/鍵盤と重ならないようにする (後方の .est-board-wrap { padding: 12px } に負けないよう詳細度を上げる) */ .tools-page .est-board-wrap, .tools-page .ept-board-wrap { position: relative; padding-top: 42px; } /* 操作パネル(プルダウン/切替ボタン)はスマホでも2列に並べる */ .tools-page .est-controls, .tools-page .ept-controls { grid-template-columns: 1fr 1fr; gap: 8px; } .tools-page .est-field, .tools-page .ept-field { min-width: 0; } .board-fs-btn { position: absolute; z-index: 5; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid var(--et-line2); border-radius: 999px; background: var(--et-pane); color: var(--et-t2); font-family: inherit; font-size: 11px; font-weight: 800; line-height: 1; cursor: pointer; box-shadow: var(--et-pane-shadow); } } /* 全画面表示中: フレームを画面全体に広げる(DOM は動かさない) */ .est-board-wrap.is-fs, .ept-board-wrap.is-fs { position: fixed; inset: 0; z-index: 9998; margin: 0; padding: 0; border: none; border-radius: 0; background: var(--est-card); display: grid; place-items: center; overflow: hidden; } .est-board-wrap.is-fs .board-fs-btn, .ept-board-wrap.is-fs .board-fs-btn { display: none; } /* 図は回転させない(端末を横にすれば OS 側の回転でそのまま横長になる)。画面に収まる最大サイズへ拡大する */ .est-board-wrap.is-fs > div, .ept-board-wrap.is-fs > div { max-width: 100%; } .est-board-wrap.is-fs > div > svg, .ept-board-wrap.is-fs > div > svg { width: calc(100vw - 16px); height: auto; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); } /* 回転ボタンで図だけ90度回す(端末を回さずに横長で見るため)。回転前の幅が画面幅を超えるとグリッドの中央寄せが効かないので、絶対配置で中心を合わせる */ .est-board-wrap.is-fs.is-rot > div, .ept-board-wrap.is-fs.is-rot > div { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: none; } .est-board-wrap.is-fs.is-rot > div > svg, .ept-board-wrap.is-fs.is-rot > div > svg { transform: rotate(90deg); width: calc(100vh - 16px); max-width: none; max-height: calc(100vw - 64px); } /* 全画面時の操作バー(回転 / 再生・停止 / 閉じる) バーは body 直下に置く(全画面の図より前面に出すため)。ツールのテーマ変数は .emmu-scale-tool / .emmu-piano-tool に定義されていて body までは届かないので、var(--et-*) は解決できない。そこでバー自身に色を持たせる(値は各ツールのトークンと同値)。面色だけは浮遊 UI 用に不透明のものを使う(半透明の --et-pane 系だと全画面の図に溶けて見えなくなる)。 */ .board-fs-bar { --fsbar-pane: #ffffff; --fsbar-line: #cfd4e8; --fsbar-ink: #3d4468; --fsbar-play: #6a7c00; position: fixed; z-index: 9999; right: 12px; top: 12px; display: flex; align-items: center; gap: 8px; } /* 再生中の色(--fsbar-play)はテーマで変えない。白のアイコンを乗せるので両テーマとも濃い側のライムを使う */ [data-theme="dark"] .board-fs-bar { --fsbar-pane: #1C2450; --fsbar-line: rgba(255, 255, 255, .14); --fsbar-ink: #C2C8EE; } .board-fs-bar__btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--fsbar-line); border-radius: 50%; background: var(--fsbar-pane); color: var(--fsbar-ink); cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); } .board-fs-bar__btn svg { width: 20px; height: 20px; display: block; } .board-fs-bar__btn[hidden] { display: none; } /* 再生中は停止(■)として目立たせる */ .board-fs-bar__btn--play.is-playing { background: var(--fsbar-play); border-color: transparent; color: #ffffff; } /* 図だけ90度回した状態: バーも同じ向きにして押しやすくする */ body.board-fs-rot .board-fs-bar { top: 50%; right: 10px; flex-direction: column-reverse; transform: translateY(-50%); } /* 全画面中は背後をスクロールさせない */ body.board-fs-open { overflow: hidden; } /* ---- ツールページのフッター(EMMUS への相互リンク) ---- */ .tool-links { margin: 22px 2px 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; font-weight: 700; } .tool-links a { color: var(--tools-t3); text-decoration: none; border-bottom: 1px solid var(--tools-line2); padding-bottom: 2px; } .tool-links a:hover { color: var(--tools-t1); } /* ============ ツール一覧(/tools) — emmu-tools-5a デザイン ============ */ /* 一覧ページ(.tools-index-page)専用。ライトの色値はデザイン HTML の oklch を sRGB に変換した同値。ダークは同系(黄緑寄りの暖色)で対応付けた追加設計。 */ .tools-page.tools-index-page { --ei-key: #a0bc00; /* ブランドライム(両テーマ共通) */ --ei-keyd: #607615; /* oklch(.53 .12 122) 濃い抹茶(ドット・アクセント) */ --ei-go-on: #A0BC00; /* カード丸ボタンのアクティブ地色(ブランドライム) */ --ei-on-key: #1b1f0c; /* ライム上の文字色 */ --ei-bg: #f7f7f1; /* oklch(.975 .008 110) */ --ei-ink: #1f2019; /* oklch(.24 .012 110) */ --ei-sub: rgba(0, 0, 0, .5); --ei-faint: rgba(0, 0, 0, .45); --ei-surface: #ffffff; --ei-border: #e1e2d9; /* oklch(.91 .012 110) */ --ei-border2: #dbdcd3; /* oklch(.89 .012 110) */ --ei-btn: #f2f2ec; /* oklch(.96 .008 110) */ --ei-win: #f1f1ee; /* 絵エリアの面(ほぼ無彩色のライトグレー=消灯) */ --ei-win-hov: #fbd79c; /* ホバー時はオレンジ寄りのアンバー=点灯 */ --ei-art: rgba(0, 0, 0, .32); /* イラストの主線 */ --ei-art2: rgba(0, 0, 0, .26); /* イラストの弦・バー(明るい面でも見える濃さ) */ --ei-artf: rgba(0, 0, 0, .09); /* イラストのフレット(淡) */ --ei-wkey: #ffffff; --ei-wkey-line: rgba(0, 0, 0, .22); --ei-bkey: #2e2e28; /* oklch(.3 .012 110) */ --ei-shadow: 0 16px 30px -18px rgba(70, 80, 20, .45); background: var(--ei-bg); color: var(--ei-ink); } [data-theme="dark"] .tools-page.tools-index-page { --ei-keyd: #c3dd3d; --ei-bg: #15160f; --ei-ink: #ecebe0; --ei-sub: rgba(255, 255, 255, .55); --ei-faint: rgba(255, 255, 255, .45); --ei-surface: #1e1f16; --ei-border: rgba(255, 255, 255, .10); --ei-border2: rgba(255, 255, 255, .16); --ei-btn: rgba(255, 255, 255, .07); /* 絵エリアは VU メーターの照明に見立て、ホバー(アクティブ)で点灯させる。非アクティブは消灯したパネルのクリーム寄りグレー */ --ei-win: #b9b2a5; --ei-win-hov: #f2b75f; --ei-art: rgba(255, 255, 255, .42); --ei-art2: rgba(255, 255, 255, .26); --ei-artf: rgba(255, 255, 255, .12); --ei-wkey: #e9e7da; --ei-wkey-line: rgba(0, 0, 0, .35); --ei-bkey: #11110c; --ei-shadow: 0 16px 30px -18px rgba(0, 0, 0, .65); } /* ---- ヘッダー(全幅の白バー化と書体) ---- */ .tools-index-page .tools-topbar-wrap { background: var(--ei-surface); border-bottom: 1px solid var(--ei-border); } .tools-index-page .tools-topbar { max-width: 1272px; box-sizing: border-box; padding: 14px 40px; gap: 24px; } .tools-index-page .tools-brand { font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; font-weight: 600; font-size: 17px; letter-spacing: .2em; color: var(--ei-ink); } .tools-index-page .tools-topbar-nav { font-size: 12px; font-weight: 400; letter-spacing: .14em; } .tools-index-page .tools-topbar-nav a { color: var(--ei-faint); } .tools-index-page .tools-topbar-nav a:hover { color: var(--ei-ink); } .tools-index-page .tools-auth { gap: 16px; } .tools-index-page .tools-auth__status { font-weight: 500; font-size: 11.5px; color: var(--ei-sub); } .tools-index-page .tools-auth__dot { width: 6px; height: 6px; background: var(--ei-keyd); } .tools-index-page .tools-auth__btn, .tools-index-page .tool-theme-toggle { font-weight: 500; font-size: 11.5px; letter-spacing: 0; color: var(--ei-sub); background: var(--ei-btn); border: none; border-radius: 8px; padding: 8px 13px; box-shadow: none; } .tools-index-page .tools-auth__btn:hover, .tools-index-page .tool-theme-toggle:hover { color: var(--ei-ink); } /* ---- ヒーロー(見出し + 絞り込みチップ) ---- */ .ei-hero { padding: 38px 24px 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; } .ei-eyebrow { margin: 0 0 16px; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 400; letter-spacing: .34em; color: var(--ei-keyd); } .ei-title { margin: 0; font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; font-weight: 400; font-size: 56px; line-height: 1.14; letter-spacing: .04em; color: var(--ei-ink); } .ei-chips { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; } /* 非選択はフラット、選択中だけ3Dガラス調にする。 isolation + z-index:-1 でグロスを「地色の上・文字の下」に敷く */ .ei-chip { position: relative; isolation: isolate; overflow: hidden; font-family: inherit; font-size: 11.5px; font-weight: 400; line-height: 1; padding: 9px 14px; border-radius: 999px; background: var(--ei-surface); border: 1px solid var(--ei-border); color: var(--ei-sub); cursor: pointer; box-shadow: none; transition: background .3s, border-color .3s, box-shadow .3s, color .3s; } /* 上半分のグロス(下端が楕円にカーブした白ハイライト)。選択中のみ表示 */ .ei-chip::before { content: ""; position: absolute; z-index: -1; left: 2px; right: 2px; top: 1px; height: 52%; border-radius: 999px 999px 60% 60% / 999px 999px 10px 10px; pointer-events: none; opacity: 0; transition: opacity .3s; background: linear-gradient(180deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .38) 55%, rgba(255, 255, 255, .06) 100%); } .ei-chip:hover { color: var(--ei-ink); } /* 選択中はライムに点灯し、球面のような陰影で押し出て見せる */ .ei-chip.is-on { background: var(--ei-go-on); border-color: var(--ei-go-on); color: var(--ei-on-key); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -4px 7px -3px rgba(0, 0, 0, .3), 0 3px 7px -3px rgba(70, 80, 20, .5); } .ei-chip.is-on::before { opacity: 1; } /* ---- カードグリッド ---- */ .ei-grid { padding: 20px 24px 44px; display: grid; /* 最小でも2列(1列にしない): 列の最小幅を「半分の幅-ギャップ分」まで縮められるようにし、広い画面では従来どおり330px基準で3〜4列になる */ grid-template-columns: repeat(auto-fill, minmax(min(330px, calc(50% - 9px)), 1fr)); gap: 18px; } .ei-card { display: block; /* 中のイラストは固定幅なので、min-content で列が押し広げられないようにする */ min-width: 0; text-decoration: none; color: var(--ei-ink); background: var(--ei-surface); border: 1px solid var(--ei-border); border-radius: 16px; padding: 16px 16px 18px; transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s; } .ei-card:hover { transform: translateY(-3px); border-color: var(--ei-key); box-shadow: var(--ei-shadow); } .ei-win { position: relative; height: 88px; border-radius: 11px; background: var(--ei-win); /* 面の膨らみ(上端の光・下方の落ち込み・外への柔らかい影) */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 -14px 20px -14px rgba(0, 0, 0, .13), 0 1px 3px rgba(70, 80, 20, .1); display: grid; place-items: center; overflow: hidden; transition: background .3s; } /* 重なり順: イラスト(奥) < ::before(ガラスのグロス) < ::after(ガラスの縁と艶)。グロスをイラストの手前に置くことで「ガラスの奥に絵がある」ように見せる。イラストは position の有無がツールごとに違うため、ここで明示する */ .ei-win .ei-art { position: relative; z-index: 1; /* ガラス越しの減衰(奥にある見え方)。わずかに沈ませるだけで図は読める */ filter: saturate(.94) brightness(.97); } /* [ガラス面] アクアボタン風の上半分グロス(参考画像のジェルボタン)。下端を楕円にカーブさせた白いハイライト。イラストの手前に重ねるので絵が透けて見える濃度(上端で約6割)に抑える */ .ei-win::before { content: ""; position: absolute; left: 3px; right: 3px; top: 2px; height: 47%; z-index: 3; border-radius: 8px 8px 60% 60% / 8px 8px 22px 22px; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .58) 42%, rgba(255, 255, 255, .24) 78%, rgba(255, 255, 255, .06) 100%); transition: background .3s; } /* アクティブ時はさらに強く反射させ、ガラスが手前にあることをはっきり見せる */ .ei-card:hover .ei-win::before, .ei-card:focus-visible .ei-win::before { background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .72) 42%, rgba(255, 255, 255, .32) 78%, rgba(255, 255, 255, .1) 100%); } /* [ガラスの縁] 上端のエッジ光・下端の照り返し・周辺の減光(厚みで暗くなる縁) */ .ei-win::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4; background: /* 斜めに走る反射(ガラスが手前にある手がかり)。左寄りを通す */ linear-gradient(100deg, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, .5) 17%, rgba(255, 255, 255, .16) 25%, rgba(255, 255, 255, 0) 36%), radial-gradient(78% 46% at 50% 112%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, 0) 22%); transition: background .3s; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 6px 12px -8px rgba(60, 40, 10, .18), inset 0 0 14px rgba(60, 40, 10, .06), inset 0 -1px 0 rgba(0, 0, 0, .07); } /* アクティブ時は斜めの反射も強める */ .ei-card:hover .ei-win::after, .ei-card:focus-visible .ei-win::after { background: linear-gradient(100deg, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, .72) 17%, rgba(255, 255, 255, .24) 25%, rgba(255, 255, 255, 0) 36%), radial-gradient(78% 46% at 50% 112%, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 22%); } /* ダークでも絵エリアはアンバーに光るため、光沢はライトと同じ白のまま使う。面が明るくなる分、中のイラストの線色だけライト相当(暗い線)へ切り替える */ [data-theme="dark"] .ei-win { --ei-ink: #3d2f14; --ei-faint: rgba(55, 36, 8, .8); --ei-keyd: #3a4a08; --ei-art: rgba(55, 36, 8, .75); --ei-art2: rgba(55, 36, 8, .68); --ei-artf: rgba(55, 36, 8, .26); --ei-wkey: #fffdf4; --ei-wkey-line: rgba(55, 36, 8, .4); --ei-bkey: #33291a; } .ei-card:hover .ei-win { background: var(--ei-win-hov); } .ei-card-body { padding: 16px 4px 0; } /* ツール名 + 丸ボタンの行(ボタンは右端に固定し、名前は残り幅を使う) */ .ei-name-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ei-cat { margin-bottom: 9px; font-size: 11px; letter-spacing: .1em; color: var(--ei-keyd); } .ei-name { margin: 0; min-width: 0; font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; font-weight: 600; font-size: 22px; line-height: 1.35; color: var(--ei-ink); } .ei-desc { margin: 7px 0 0; font-size: 13px; line-height: 1.75; color: var(--ei-sub); text-wrap: pretty; } .ei-go { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ei-border2); display: grid; place-items: center; overflow: hidden; transition: background .3s, border-color .3s, box-shadow .3s; } /* 丸ボタンの3Dガラス光沢レイヤー(アクティブ時のみ表示)。上方の映り込み + 下方の落ち込みで球面のガラスに見せる */ .ei-go::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .3s; background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .14) 40%, rgba(255, 255, 255, 0) 56%), radial-gradient(58% 42% at 34% 16%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 72%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -3px 6px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .28); } /* ツール別アイコン(SVG を mask で塗るので元の色は無関係)。通常は黒系、カードがアクティブ(ホバー/フォーカス)なら緑地に白 */ .ei-go-icon { display: block; width: 24px; height: 24px; background-color: var(--ei-ink); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: background-color .3s; } .ei-card:hover .ei-go, .ei-card:focus-visible .ei-go { background: var(--ei-go-on); border-color: var(--ei-go-on); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .45); } .ei-card:hover .ei-go::after, .ei-card:focus-visible .ei-go::after { opacity: 1; } .ei-card:hover .ei-go-icon, .ei-card:focus-visible .ei-go-icon { background-color: #ffffff; } /* ---- カード内ミニイラスト(座標はツール本体コード由来。tool-card-art.blade.php 参照) ---- */ .ei-art i { display: block; } /* メトロノーム: 振り子(ホバーで反対へ振れる) */ .ei-met { position: relative; width: 80px; height: 58px; } .ei-met-rod { position: absolute; left: 50%; bottom: 0; width: 2px; height: 54px; background: var(--ei-art); transform-origin: bottom center; transform: rotate(-16deg); transition: transform 1s cubic-bezier(.45, 0, .55, 1); } .ei-card:hover .ei-met-rod { transform: rotate(16deg); } .ei-met-w { position: absolute; top: 10px; left: -4px; width: 10px; height: 8px; border-radius: 2px; background: var(--ei-keyd); } .ei-met-base { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 2px; background: var(--ei-art2); } /* キー・BPM: 波形バー + 判定ラベル */ .ei-kb { display: flex; flex-direction: column; align-items: center; gap: 8px; } .ei-kb-bars { display: flex; align-items: flex-end; gap: 5px; height: 38px; } .ei-bar { width: 5px; border-radius: 2px; background: var(--ei-art2); transition: background .3s; } .ei-card:hover .ei-bar { background: var(--ei-keyd); } .ei-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 10px; letter-spacing: .1em; color: var(--ei-faint); } .ei-mono--xs { font-size: 9px; letter-spacing: .14em; } /* チューナー: 目盛りと針(ホバーで 0 セントへ) */ .ei-tun { position: relative; width: 170px; height: 46px; } .ei-tun-scale { position: absolute; top: 6px; left: 0; right: 0; height: 22px; background: repeating-linear-gradient(90deg, var(--ei-art2) 0 1px, transparent 1px 10px); } .ei-tun-needle { position: absolute; top: 0; left: 40px; width: 2px; height: 34px; background: var(--ei-keyd); transition: left .7s cubic-bezier(.2, .9, .2, 1); } .ei-card:hover .ei-tun-needle { left: 84px; } .ei-tun-label { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; } /* 音域チェック: 音域バー(中央 6 本が測定域) */ .ei-vr { display: flex; align-items: center; gap: 4px; height: 52px; } .ei-vbar { width: 4px; border-radius: 2px; background: var(--ei-art2); } .ei-vbar.is-on { background: var(--ei-keyd); transition: transform .3s cubic-bezier(.2, 1.4, .4, 1); } .ei-card:hover .ei-vbar.is-on { transform: scaleY(1.12); } /* 録音・再生: スタンドマイクと音の輪(座標・色は SVG 側。アプリの絵と同一) */ .ei-rec { width: 158px; height: 76px; } .ei-rec svg { display: block; } /* 指板(共通): 横線=弦(上が1弦)・縦線=フレット。ドットはインライン座標 */ .ei-fret { position: relative; } .ei-fret--g { height: 56px; background: repeating-linear-gradient(180deg, var(--ei-art2) 0 1px, transparent 1px 11px), repeating-linear-gradient(90deg, var(--ei-artf) 0 1px, transparent 1px 28px); } .ei-fret--b { height: 56px; background: repeating-linear-gradient(180deg, var(--ei-art2) 0 2px, transparent 2px 18px), repeating-linear-gradient(90deg, var(--ei-artf) 0 1px, transparent 1px 30px); } .ei-fret--u { height: 55px; background: repeating-linear-gradient(180deg, var(--ei-art2) 0 1px, transparent 1px 18px), repeating-linear-gradient(90deg, var(--ei-artf) 0 1px, transparent 1px 28px); } .ei-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--ei-keyd); transition: transform .3s cubic-bezier(.2, 1.4, .4, 1); } .ei-fret--b .ei-dot, .ei-fret--u .ei-dot { width: 10px; height: 10px; } .ei-dot.is-deg { opacity: .45; } .ei-card:hover .ei-dot { transform: scale(1.18); } /* 鍵盤(共通): 白鍵は border-box でピッチ=幅+隙間2px。黒鍵・印はインライン座標 */ .ei-keys { position: relative; display: flex; gap: 2px; align-items: flex-start; height: 50px; } .ei-wk { box-sizing: border-box; width: 12px; height: 50px; border-radius: 0 0 3px 3px; background: var(--ei-wkey); border: 1px solid var(--ei-wkey-line); } .ei-keys--sc .ei-wk { width: 9px; } .ei-wk.is-on { background: var(--ei-key); border-color: rgba(0, 0, 0, .12); } .ei-bk { position: absolute; top: 0; width: 8px; height: 31px; border-radius: 0 0 2px 2px; background: var(--ei-bkey); } .ei-keys--sc .ei-bk { width: 6px; } .ei-kdot { position: absolute; top: 41px; width: 5px; height: 5px; border-radius: 50%; background: var(--ei-keyd); transition: transform .3s cubic-bezier(.2, 1.4, .4, 1); } .ei-kdot.is-deg { opacity: .45; } .ei-card:hover .ei-kdot { transform: scale(1.18); } /* 移調読み替え: 楽譜 B♭ → 実音 A♭(B♭管) */ .ei-tp { display: flex; align-items: center; gap: 16px; } .ei-tp-col { text-align: center; } .ei-tp-note { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 24px; line-height: 1; color: var(--ei-ink); } .ei-tp-note.is-key { color: var(--ei-keyd); } .ei-tp-cap { margin-top: 7px; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; letter-spacing: .16em; color: var(--ei-faint); } .ei-tp-line { width: 26px; height: 2px; background: var(--ei-art2); transition: background .3s; } .ei-card:hover .ei-tp-line { background: var(--ei-keyd); } /* ---- フッター ---- */ .ei-footer { border-top: 1px solid var(--ei-border); } .ei-footer-in { max-width: 1272px; box-sizing: border-box; margin: 0 auto; padding: 26px 40px 34px; display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--ei-faint); } .ei-footer-in a { color: inherit; text-decoration: none; } .ei-footer-in a:hover { color: var(--ei-ink); } @media (prefers-reduced-motion: reduce) { .ei-card, .ei-card * { transition: none !important; } } /* 中間幅: 余白をデザインの 24px 相当へ(シェル16 + 8) */ @media (max-width: 900px) { .tools-index-page .tools-topbar { padding: 12px 24px; } .ei-hero { padding: 28px 8px 6px; } .ei-grid { padding: 16px 8px 36px; } .ei-footer-in { padding: 22px 24px 28px; } .ei-title { font-size: 42px; } } /* スマホ幅: 縦一列にせず2列を維持し、カード間と画面端の余白を詰める(広い幅は不変) */ @media (max-width: 600px) { .tools-index-page .tools-shell { padding: 0 8px 0; } .tools-index-page .tools-topbar { flex-wrap: wrap; row-gap: 10px; padding: 12px 12px; gap: 12px; } /* 新ヘッダーは横並びのまま折り返す(ボタン文字は折り返さない) */ .tools-index-page .tools-auth { flex-direction: row; gap: 10px; } .ei-hero { padding: 20px 4px 4px; } .ei-eyebrow { margin-bottom: 10px; } .ei-title { font-size: 34px; } .ei-chips { padding-bottom: 2px; } .ei-chip { padding: 8px 12px; font-size: 11px; } .ei-grid { padding: 12px 0 28px; /* minmax(0,..) にしないとイラストの固定幅で列が広がり横スクロールになる */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .ei-card { padding: 10px 10px 12px; border-radius: 14px; } .ei-win { height: 72px; } /* 幅の広いイラスト(チューナー170px等)もカード幅に収める */ .ei-win .ei-art { transform: scale(.78); } .ei-card-body { padding: 10px 2px 0; } .ei-name-row { gap: 8px; } .ei-cat { font-size: 10px; margin-bottom: 5px; } .ei-name { font-size: 15px; } .ei-desc { margin-top: 4px; font-size: 11px; line-height: 1.6; } .ei-go { width: 28px; height: 28px; } .ei-go-icon { width: 18px; height: 18px; } .ei-footer-in { padding: 18px 12px 22px; } } /* ============ est 系ツール本体(EMMUS 共通構造) ============ */ /* ライトテーマの値は EMMUS の LIGHT SKIN 適用後の最終状態と同値 */ .emmu-scale-tool { /* 指板・音符(両テーマ共通、EMMUS と一致・変更禁止) */ --est-wood: #e9dbc7; --est-wood-edge: #c6b296; --est-string: #8c8070; --est-nut: #463c30; --est-accent: #f0b429; /* テキスト・面 */ --est-ink: #1f2937; --est-muted: #6b7280; --est-faint: #a79f8f; --est-border: #e3e6f2; --est-card: #fff; --est-cream: #f7f8fc; --et-t1: #141A38; --et-t2: #3d4468; --et-t3: #5a628c; --et-t4: #6f77a0; --et-line: #e3e6f2; --et-line2: #cfd4e8; --et-seg-track: #eef1fa; --et-seg-btn: #ffffff; --et-select-bg: #ffffff; --et-option-bg: #ffffff; /* ライトは中間の紫を省いた2色(2026-08-05)。ダーク側で3色に戻す */ --et-grad: linear-gradient(100deg, #B8D62E, #7DD3FC); --et-on-accent: #0f1a2e; --et-glow: rgba(184, 214, 46, .30); --et-active-shadow: 0 8px 22px rgba(184, 214, 46, .30), 0 3px 12px rgba(167, 139, 250, .22); --et-pane-shadow: 0 1px 2px rgba(20, 26, 56, .04), 0 8px 24px rgba(20, 26, 56, .05); /* 非アクティブドットの塗り(SVG から参照) */ --est-dot-bg: #ffffff; /* PNG 書き出しの配色(png.js から参照。ライトは EMMUS 既定と同値) */ --est-png-bg: #ffffff; --est-png-caption: #12395e; --est-png-credit: #6b7280; --est-png-rule: #e5e0d5; } [data-theme="dark"] .emmu-scale-tool { /* セグメントの選択色はダークのみ3色グラデーション(ライトは2色) */ --et-grad: linear-gradient(100deg, #B8D62E, #A78BFA 52%, #7DD3FC); /* 指板(暗色の木目)。度数の色(ドット)は変えない */ --est-wood: #4a3524; --est-wood-edge: #2a1d12; --est-string: #b9a88f; --est-nut: #e8dcc8; --est-ink: #C2C8EE; --est-muted: #9AA2D4; --est-faint: #cbbfa8; /* 弦ラベル: 暗い木目の上でも読める色 */ --est-border: rgba(255, 255, 255, .09); --est-card: rgba(255, 255, 255, .05); --est-cream: transparent; --et-t1: #ffffff; --et-t2: #C2C8EE; --et-t3: #9AA2D4; --et-t4: #8B93C8; --et-line: rgba(255, 255, 255, .09); --et-line2: rgba(255, 255, 255, .14); --et-seg-track: rgba(255, 255, 255, .04); --et-seg-btn: rgba(255, 255, 255, .08); --et-select-bg: rgba(255, 255, 255, .06); --et-option-bg: #1C2450; --et-glow: rgba(184, 214, 46, .16); --et-active-shadow: 0 8px 22px rgba(184, 214, 46, .18), 0 3px 12px rgba(167, 139, 250, .14); --et-pane-shadow: none; --est-dot-bg: #141b34; --est-png-bg: #0B1020; --est-png-caption: #e8ecff; --est-png-credit: #8B93C8; --est-png-rule: #2a3157; } .emmu-scale-tool, .emmu-scale-tool * { box-sizing: border-box; } .emmu-scale-tool { font-family: inherit; color: var(--et-t2); background: transparent; border: 1px solid var(--et-line); border-radius: 24px; padding: 26px; max-width: 1240px; margin: 0 auto; position: relative; overflow: hidden; } .emmu-scale-tool::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; pointer-events: none; top: -90px; right: -70px; filter: blur(6px); background: radial-gradient(circle, var(--et-glow), rgba(255, 255, 255, 0) 66%); } .emmu-scale-tool > * { position: relative; } .est-head { background: transparent; border: 0; padding: 0; margin-bottom: 22px; } .est-head .est-title { margin: 0; font-size: 30px; font-weight: 900; color: var(--et-t1); letter-spacing: .3px; line-height: 1.35; } .est-head p { margin: 10px 0 0; font-size: 11px; letter-spacing: 3.08px; color: var(--et-t3); } .est-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; } .est-field { background: var(--est-card); border: 1px solid var(--et-line); border-radius: 16px; padding: 14px; box-shadow: var(--et-pane-shadow); } .est-field label { display: block; font-size: 11px; font-weight: 800; color: var(--et-t4); margin-bottom: 6px; letter-spacing: 1.54px; } .est-field select { width: 100%; font-size: .95rem; padding: 11px 10px; border: 1px solid var(--et-line2); border-radius: 12px; background: var(--et-select-bg); color: var(--et-t1); font-family: inherit; } .est-field select option { background: var(--et-option-bg); color: var(--et-t1); } .est-seg { display: flex; gap: 6px; flex-wrap: wrap; background: var(--et-seg-track); border: 1px solid var(--et-line); border-radius: 14px; padding: 3px; } .est-seg button { flex: 1 1 auto; min-width: 60px; font-family: inherit; font-size: .86rem; padding: 10px 12px; cursor: pointer; border: 0; background: var(--et-seg-btn); color: var(--et-t3); border-radius: 11px; font-weight: 800; letter-spacing: .4px; transition: transform .12s, filter .12s; } /* ベーススケールの弦数(4/5/6弦)は折り返さず3等分の1行で表示(2026-08-05) */ .emmu-scale-tool #estStrings { flex-wrap: nowrap; } .emmu-scale-tool #estStrings button { flex: 1 1 0; min-width: 0; padding: 10px 6px; } .est-seg button:hover { color: var(--et-t1); } .est-seg button:active { transform: translateY(1px); } .est-seg button[aria-pressed="true"] { background: var(--et-grad); color: var(--et-on-accent); box-shadow: var(--et-active-shadow); } .emmu-scale-tool input[type=range] { accent-color: #A0BC00; } .est-board-wrap { background: var(--est-card); border: 1px solid var(--et-line); border-radius: 18px; padding: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-color: #A0BC00 var(--et-seg-track); box-shadow: var(--et-pane-shadow); } .est-board-wrap::-webkit-scrollbar-track { background: var(--et-seg-track); } .est-board-wrap svg { display: block; } .est-hint { font-size: .72rem; color: var(--et-t4); margin: 6px 2px 0; } .est-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; } .est-panel { background: var(--est-card); border: 1px solid var(--et-line); border-radius: 18px; padding: 16px; box-shadow: var(--et-pane-shadow); } .est-info > .est-panel-wide { grid-column: 1 / -1; } .est-panel .est-plabel { margin: 0 0 8px; font-size: 11px; font-weight: 800; color: var(--et-t4); letter-spacing: 1.54px; } .est-notes { display: flex; flex-wrap: wrap; gap: 8px; } .est-note { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 44px; color: var(--et-t3); } .est-chip { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .78rem; } .est-note small { font-size: .72rem; color: var(--est-muted); } .est-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--et-t3); } .est-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; color: var(--est-ink); } .est-swatch { width: 16px; height: 16px; border-radius: 50%; display: inline-block; } .est-meta { font-size: .78rem; color: var(--et-t2); line-height: 1.7; margin: 0; } .est-meta b { color: var(--et-t1); } .est-foot { font-size: .7rem; color: var(--et-t4); margin: 12px 2px 0; padding-top: 10px; border-top: 1px solid var(--et-line); text-align: right; } /* ============ ept 系(鍵盤ツール)。est 系と同一の見た目を ept- クラスで再現 ============ */ .emmu-piano-tool { --est-ink: #1f2937; --est-muted: #6b7280; --est-card: #fff; --et-t1: #141A38; --et-t2: #3d4468; --et-t3: #5a628c; --et-t4: #6f77a0; --et-line: #e3e6f2; --et-line2: #cfd4e8; --et-seg-track: #eef1fa; --et-seg-btn: #ffffff; --et-select-bg: #ffffff; --et-option-bg: #ffffff; /* ライトは中間の紫を省いた2色(2026-08-05)。ダーク側で3色に戻す */ --et-grad: linear-gradient(100deg, #B8D62E, #7DD3FC); --et-on-accent: #0f1a2e; --et-glow: rgba(184, 214, 46, .30); --et-active-shadow: 0 8px 22px rgba(184, 214, 46, .30), 0 3px 12px rgba(167, 139, 250, .22); --et-pane-shadow: 0 1px 2px rgba(20, 26, 56, .04), 0 8px 24px rgba(20, 26, 56, .05); } [data-theme="dark"] .emmu-piano-tool { /* セグメントの選択色はダークのみ3色グラデーション(ライトは2色) */ --et-grad: linear-gradient(100deg, #B8D62E, #A78BFA 52%, #7DD3FC); --est-ink: #C2C8EE; --est-muted: #9AA2D4; --est-card: rgba(255, 255, 255, .05); --et-t1: #ffffff; --et-t2: #C2C8EE; --et-t3: #9AA2D4; --et-t4: #8B93C8; --et-line: rgba(255, 255, 255, .09); --et-line2: rgba(255, 255, 255, .14); --et-seg-track: rgba(255, 255, 255, .04); --et-seg-btn: rgba(255, 255, 255, .08); --et-select-bg: rgba(255, 255, 255, .06); --et-option-bg: #1C2450; --et-glow: rgba(184, 214, 46, .16); --et-active-shadow: 0 8px 22px rgba(184, 214, 46, .18), 0 3px 12px rgba(167, 139, 250, .14); --et-pane-shadow: none; } .emmu-piano-tool, .emmu-piano-tool * { box-sizing: border-box; } .emmu-piano-tool { font-family: inherit; color: var(--et-t2); background: transparent; border: 1px solid var(--et-line); border-radius: 24px; padding: 26px; max-width: 1240px; margin: 0 auto; position: relative; overflow: hidden; } .emmu-piano-tool::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; pointer-events: none; top: -90px; right: -70px; filter: blur(6px); background: radial-gradient(circle, var(--et-glow), rgba(255, 255, 255, 0) 66%); } .emmu-piano-tool > * { position: relative; } .ept-head { background: transparent; border: 0; padding: 0; margin-bottom: 22px; } .ept-head .ept-title { margin: 0; font-size: 30px; font-weight: 900; color: var(--et-t1); letter-spacing: .3px; line-height: 1.35; } .ept-head p { margin: 10px 0 0; font-size: 11px; letter-spacing: 3.08px; color: var(--et-t3); } .ept-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; } .ept-field { background: var(--est-card); border: 1px solid var(--et-line); border-radius: 16px; padding: 14px; box-shadow: var(--et-pane-shadow); } .ept-field label { display: block; font-size: 11px; font-weight: 800; color: var(--et-t4); margin-bottom: 6px; letter-spacing: 1.54px; } .ept-field select { width: 100%; font-size: .95rem; padding: 11px 10px; border: 1px solid var(--et-line2); border-radius: 12px; background: var(--et-select-bg); color: var(--et-t1); font-family: inherit; } .ept-field select option { background: var(--et-option-bg); color: var(--et-t1); } .ept-seg { display: flex; gap: 6px; flex-wrap: wrap; background: var(--et-seg-track); border: 1px solid var(--et-line); border-radius: 14px; padding: 3px; margin-top: 6px; } .ept-field label + .ept-seg { margin-top: 0; } .ept-seg button, .ept-btn { flex: 1 1 auto; min-width: 60px; font-family: inherit; font-size: .86rem; padding: 10px 12px; cursor: pointer; border: 0; background: var(--et-seg-btn); color: var(--et-t3); border-radius: 11px; font-weight: 800; letter-spacing: .4px; transition: transform .12s, filter .12s; } .ept-seg button:hover, .ept-btn:hover { color: var(--et-t1); } .ept-seg button:active, .ept-btn:active { transform: translateY(1px); } .ept-seg button[aria-pressed="true"] { background: var(--et-grad); color: var(--et-on-accent); box-shadow: var(--et-active-shadow); } .ept-btn { border: 1px solid var(--et-line); } .emmu-piano-tool input[type=range] { accent-color: #A0BC00; width: 100%; margin-top: 8px; } .ept-board-wrap { background: var(--est-card); border: 1px solid var(--et-line); border-radius: 18px; padding: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-color: #A0BC00 var(--et-seg-track); box-shadow: var(--et-pane-shadow); } .ept-board-wrap::-webkit-scrollbar-track { background: var(--et-seg-track); } .ept-board-wrap svg { display: block; border-radius: 8px; } .ept-hint { font-size: .72rem; color: var(--et-t4); margin: 6px 2px 0; } .ept-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; } .ept-panel { background: var(--est-card); border: 1px solid var(--et-line); border-radius: 18px; padding: 16px; box-shadow: var(--et-pane-shadow); } .emmu-piano-tool .ept-info > .ept-panel-wide { grid-column: 1 / -1; } .ept-panel .ept-plabel { margin: 0 0 8px; font-size: 11px; font-weight: 800; color: var(--et-t4); letter-spacing: 1.54px; } .ept-notes { display: flex; flex-wrap: wrap; gap: 8px; } .ept-note { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 44px; color: var(--et-t3); } .ept-chip { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .78rem; } .ept-note small { font-size: .72rem; color: var(--est-muted); } .ept-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--et-t3); } .ept-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; color: var(--est-ink); } .ept-swatch { width: 16px; height: 16px; border-radius: 50%; display: inline-block; } .ept-meta { font-size: .78rem; color: var(--et-t2); line-height: 1.7; margin: 0; } .ept-meta b { color: var(--et-t1); } .ept-foot { font-size: .7rem; color: var(--et-t4); margin: 12px 2px 0; padding-top: 10px; border-top: 1px solid var(--et-line); text-align: right; } /* 調号(五線譜)パネル。譜面は常に白地(SVG 内で白背景を描く) */ .ept-sig { background: #fff; border: 1px solid var(--et-line); border-radius: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .ept-sig svg { display: block; } /* 鍵盤・ドットはタップで発音できる */ .emmu-piano-tool [data-m] { cursor: pointer; } /* 表示セグを3等分固定 */ .emmu-piano-tool #eptMode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex-wrap: nowrap; } .emmu-piano-tool #eptMode button { min-width: 0; width: 100%; padding-left: 2px; padding-right: 2px; } @media (max-width: 600px) { .emmu-piano-tool { padding: 18px 9px; border-radius: 18px; } .ept-head .ept-title { font-size: 22px; } .ept-head p { letter-spacing: 2px; } } /* 発音中のハイライト(EMMUS と同値)。系統ごとに est-play / ect-play / ept-play */ .emmu-scale-tool .est-play, .emmu-scale-tool .ect-play, .emmu-piano-tool .ept-play { stroke: #f0b429; stroke-width: 3.5; } /* ============ フェーズ2共通スキン(.emmu-tool)。EMMUS の et- ダーク意匠をテーマ変数化 ============ */ /* ダーク = EMMUS 実装の実値そのまま(見た目の一致が優先)。ライトはフェーズ1トークンで対応付け */ .emmu-tool { --et-ink: #0B1020; --et-lime: #A0BC00; --et-lime-br: #C9E64A; --et-lime-dim: #B7C97E; --et-strong: #fff; --et-t2: #C2C8EE; --et-t3: #9AA2D4; --et-t4: #8B93C8; --et-t5: #7A83BD; --et-t6: #606BA6; --et-on-accent: #08101F; --et-pane0: rgba(255, 255, 255, .03); --et-pane: rgba(255, 255, 255, .04); --et-pane2: rgba(255, 255, 255, .05); --et-pane3: rgba(255, 255, 255, .06); --et-pane4: rgba(255, 255, 255, .08); --et-line: rgba(255, 255, 255, .09); --et-line2: rgba(255, 255, 255, .14); --et-grad: linear-gradient(100deg, #A0BC00, #7B6BFF 55%, #29E0FF); --et-grad2: linear-gradient(140deg, #A0BC00, #7B6BFF); --et-card-bg: radial-gradient(120% 90% at 15% 0%, #1C2450 0%, #0B1020 60%); --et-glow: rgba(160, 188, 0, .4); --et-option-bg: #141A36; font-family: inherit; -webkit-font-smoothing: antialiased; } [data-theme="light"] .emmu-tool { --et-lime-br: #6a7c00; --et-lime-dim: #7d8f1a; --et-strong: #141A38; --et-t2: #3d4468; --et-t3: #5a628c; --et-t4: #6f77a0; --et-t5: #7a82ab; --et-t6: #8a91b8; --et-pane0: #f7f8fc; --et-pane: #ffffff; --et-pane2: #f4f6fb; --et-pane3: #eef1fa; --et-pane4: #e8ecf7; --et-line: #e3e6f2; --et-line2: #cfd4e8; --et-card-bg: radial-gradient(120% 90% at 15% 0%, #ffffff 0%, #eef1fa 62%); --et-glow: rgba(160, 188, 0, .25); --et-option-bg: #ffffff; } .emmu-tool, .emmu-tool * { box-sizing: border-box; } .emmu-tool .et-mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } .emmu-tool .et-card { position: relative; border-radius: 24px; padding: 26px; overflow: hidden; color: var(--et-t2); background: var(--et-card-bg); border: 1px solid var(--et-line); } /* スマホはフレーム内側の左右余白を上下の半分にして表示領域を稼ぐ */ @media (max-width: 600px) { .emmu-tool .et-card { padding: 26px 13px; } .emmu-tool .ebk-card { padding: 26px 10px 24px; } } /* 動作中(rec)のカード背景(EMMUS: 紫寄りの radial に変わる) */ .emmu-tool .et-card[data-s="rec"] { background: radial-gradient(120% 90% at 50% 0%, #26205C 0%, #0B1020 62%); } [data-theme="light"] .emmu-tool .et-card[data-s="rec"] { background: radial-gradient(120% 90% at 50% 0%, #f0edff 0%, #eef1fa 62%); } .emmu-tool .et-glow { position: absolute; width: 260px; height: 260px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, var(--et-glow), rgba(0, 0, 0, 0) 65%); top: -90px; right: -70px; filter: blur(6px); } .emmu-tool .et-eyebrow { font-size: 11px; letter-spacing: 3.08px; color: var(--et-t4); margin: 0 0 8px; } .emmu-tool .et-h { font-size: 30px; font-weight: 900; color: var(--et-strong); letter-spacing: .3px; margin: 0; line-height: 1.35; } .emmu-tool .et-chip { display: inline-flex; align-items: center; gap: 7px; border-radius: 99px; padding: 7px 14px; font-size: 11px; letter-spacing: 1.54px; background: var(--et-pane4); border: 1px solid var(--et-line2); color: var(--et-t2); } .emmu-tool .et-pane { background: var(--et-pane); border: 1px solid var(--et-line); border-radius: 20px; padding: 22px; } .emmu-tool .et-label { font-size: 10px; letter-spacing: 1.76px; color: var(--et-t5); margin: 0; } .emmu-tool .et-note { font-size: 12.5px; color: var(--et-t5); text-align: center; margin: 12px 0 0; line-height: 1.7; } .emmu-tool p:empty { display: none !important; margin: 0 !important; } .emmu-tool .et-chip.is-rec { background: rgba(160, 188, 0, .16); border-color: rgba(160, 188, 0, .45); color: var(--et-lime-br); font-weight: 800; letter-spacing: 1.98px; } .emmu-tool .et-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--et-lime); animation: etpulse 1.1s infinite; } @keyframes etpulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } .emmu-tool .et-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: 0; cursor: pointer; border-radius: 18px; padding: 20px 18px; font-family: inherit; font-size: 19px; font-weight: 900; letter-spacing: .84px; color: var(--et-on-accent); background: var(--et-grad); position: relative; overflow: hidden; box-shadow: 0 10px 34px rgba(160, 188, 0, .22), 0 4px 14px rgba(41, 224, 255, .16); transition: transform .12s, filter .12s; } .emmu-tool .et-btn:hover { filter: brightness(1.06); } .emmu-tool .et-btn:active { transform: translateY(1px); } .emmu-tool .et-btn::after { content: ""; position: absolute; inset: 0; width: 26%; background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, .55), rgba(0, 0, 0, 0)); transform: translateX(-140%); animation: etshine 3.4s infinite; } @keyframes etshine { 0% { transform: translateX(-140%); } 55% { transform: translateX(480%); } 100% { transform: translateX(480%); } } .emmu-tool .et-btn.ghost { background: transparent; border: 1px solid var(--et-line2); color: var(--et-t2); box-shadow: none; font-weight: 800; } .emmu-tool .et-btn.ghost::after { display: none; } .emmu-tool .et-btn:disabled { opacity: .4; cursor: default; filter: none; } .emmu-tool .et-hint { background: var(--et-pane2); border: 1px dashed var(--et-line2); border-radius: 14px; padding: 16px; font-size: 14.5px; font-weight: 700; color: var(--et-t2); display: flex; align-items: center; justify-content: center; gap: 9px; } /* ==== ギターチューナー固有(.emmu-gt)。EMMUS 実装の逐語移植(色のみ変数化) ==== */ .emmu-gt .gt-title { font-size: 26px; font-weight: 900; color: var(--et-strong); margin: 2px 0 10px; line-height: 1.3; } .emmu-gt h1.gt-title { font-size: 26px; } .emmu-gt .gt-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; } .emmu-gt .gt-tab { background: var(--et-pane2); border: 1px solid var(--et-line2); border-radius: 14px; color: var(--et-t3); font-family: inherit; font-size: 13.5px; font-weight: 800; padding: 11px 6px; cursor: pointer; } .emmu-gt .gt-tab.is-on { background: rgba(160, 188, 0, .18); border-color: rgba(160, 188, 0, .5); color: var(--et-strong); } /* 楽器の切替ボタンと本体の間に置く枠。上下にゆとりを持たせる */ .emmu-gt .gt-shiftrow { margin: 24px 0; } .emmu-gt .gt-shiftrow .et-label { margin: 0 0 2px; } .emmu-gt .gt-shiftval { font-size: 15px; font-weight: 900; color: var(--et-lime-br); letter-spacing: .5px; margin-left: 8px; } .emmu-gt .gt-chg-ctrl { display: flex; align-items: center; gap: 10px; } .emmu-gt .gt-stepbtn { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 99px; background: var(--et-pane4); border: 1px solid var(--et-line2); color: var(--et-strong); font-size: 17px; font-weight: 900; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; } .emmu-gt .gt-stepbtn:active { border-color: #A0BC00; } .emmu-gt .gt-sliderwrap { position: relative; flex: 1; padding-top: 26px; } .emmu-gt .gt-mark { position: absolute; top: 26px; width: 2px; height: 20px; border-radius: 2px; background: rgba(160, 188, 0, .55); transform: translateX(-1px); pointer-events: none; } .emmu-gt .gt-mark-label { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; line-height: 1.2; font-weight: 700; color: var(--et-lime-br); letter-spacing: 1px; pointer-events: none; white-space: nowrap; } .emmu-gt .gt-slider { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; border-radius: 99px; background: var(--et-line2); outline: none; margin: 0; } .emmu-gt .gt-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 99px; background: linear-gradient(140deg, #A0BC00, #7B6BFF); border: 2px solid #FFFFFF; cursor: pointer; } .emmu-gt .gt-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 99px; background: linear-gradient(140deg, #A0BC00, #7B6BFF); border: 2px solid #FFFFFF; cursor: pointer; } .emmu-gt .gt-shifthint { font-size: 11.5px; color: var(--et-t6); /* 直上の目盛りと近すぎないよう間隔を広げる */ margin: 14px 0 0; } .emmu-gt .gt-bassrow { display: flex; justify-content: flex-start; gap: 8px; margin-bottom: 8px; } /* 4弦/5弦の切替はベース選択時のみ表示(tuner-tool.js が hidden を管理。 display:flex が UA の [hidden] を打ち消していたため明示する) */ .emmu-gt .gt-bassrow[hidden] { display: none; } .emmu-gt .gt-bassrow .gt-stab { flex: 0 0 auto; width: auto; min-width: 104px; padding: 10px 18px; } .emmu-gt .gt-stab { background: var(--et-pane2); border: 1px solid var(--et-line2); border-radius: 12px; color: var(--et-t3); font-family: inherit; font-size: 12px; font-weight: 800; padding: 10px 4px; cursor: pointer; } .emmu-gt .gt-stab.is-on { background: rgba(160, 188, 0, .18); border-color: rgba(160, 188, 0, .5); color: var(--et-strong); } .emmu-gt .et-pane.gt-main { margin-top: 6px; } .emmu-gt .gt-main { padding: 18px 16px 16px; } .emmu-gt .gt-staterow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-height: 26px; } .emmu-gt .gt-status { font-size: 12.5px; color: var(--et-t4); line-height: 1.6; } .emmu-gt .gt-note { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin: 2px 0 16px; } .emmu-gt .gt-hzcol { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding-bottom: 6px; } .emmu-gt .gt-kana { font-size: 14px; color: var(--et-t5); min-height: 18px; font-weight: 700; line-height: 1; } .emmu-gt .gt-notename { font-size: 68px; font-weight: 800; color: var(--et-strong); line-height: 1; } .emmu-gt .gt-notename.ok { color: var(--et-lime-br); text-shadow: 0 0 24px rgba(160, 188, 0, .45); } .emmu-gt .gt-hz { font-size: 14px; color: var(--et-t5); } .emmu-gt .gt-meterwrap { max-width: 430px; margin: 0 auto; } .emmu-gt .gt-meter { position: relative; height: 14px; border-radius: 99px; background: var(--et-pane3); } .emmu-gt .gt-zone { position: absolute; left: 45%; width: 10%; top: 0; bottom: 0; background: rgba(160, 188, 0, .22); border-radius: 99px; } .emmu-gt .gt-center { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: #29E0FF; transform: translateX(-1px); border-radius: 2px; } .emmu-gt .gt-dot { position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(140deg, #A0BC00, #7B6BFF); transform: translate(-11px, -11px); box-shadow: 0 0 14px rgba(160, 188, 0, .5); transition: left .12s linear; } .emmu-gt .gt-dot.off { background: var(--et-line2); box-shadow: none; } .emmu-gt .gt-scale { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 1.5px; color: var(--et-t5); margin-top: 8px; } .emmu-gt .gt-readout { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0 4px; min-height: 30px; } .emmu-gt .gt-cents { font-size: 15px; color: var(--et-t2); } .emmu-gt .gt-okchip { background: rgba(160, 188, 0, .16); border: 1px solid rgba(160, 188, 0, .5); border-radius: 99px; color: var(--et-lime-br); font-size: 12.5px; font-weight: 800; padding: 4px 12px; } .emmu-gt .gt-advice { text-align: center; font-size: 13.5px; color: var(--et-t3); min-height: 22px; line-height: 1.7; } .emmu-gt .gt-strings { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 16px; } .emmu-gt .gt-str { background: var(--et-pane2); border: 1px solid var(--et-line2); border-radius: 14px; color: var(--et-t3); font-size: 18px; font-weight: 700; padding: 9px 16px; text-align: center; } .emmu-gt .gt-strk { font-style: normal; font-size: 16px; margin-left: 6px; } .emmu-gt .gt-strn { display: block; font-size: 13px; color: var(--et-t5); font-weight: 700; margin-bottom: 1px; } .emmu-gt .gt-strhz { display: block; font-size: 15px; color: var(--et-t5); margin-top: 2px; font-weight: 400; } .emmu-gt .gt-str b { color: var(--et-t2); font-weight: 800; } .emmu-gt .gt-str.is-on { background: rgba(160, 188, 0, .16); border-color: rgba(160, 188, 0, .55); color: var(--et-lime-br); } .emmu-gt .gt-str.is-on b, .emmu-gt .gt-str.is-on .gt-strn, .emmu-gt .gt-str.is-on .gt-strhz { color: var(--et-lime-br); } .emmu-gt .et-btn { width: 100%; margin-top: 2px; } .emmu-gt .et-hint { margin-top: 12px; } /* ==== メトロノーム固有(.emmu-mtn)。EMMUS 実装の逐語移植(色のみ変数化) ==== */ .emmu-mtn .et-pane.sm { border-radius: 16px; padding: 16px; background: var(--et-pane2); } .emmu-mtn .et-btn.is-stop { background: transparent; border: 1px solid var(--et-line2); color: var(--et-t2); box-shadow: none; } .emmu-mtn .et-btn.is-stop::after { display: none; } .emmu-mtn .mtn-bpmpane { padding: 12px 14px 15px; } .emmu-mtn .mtn-bpmrow { display: flex; align-items: baseline; justify-content: center; gap: 9px; margin: 3px 0 0; } .emmu-mtn .mtn-bpm { font-size: 56px; font-weight: 800; color: var(--et-strong); line-height: 1.02; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; width: 3.3ch; max-width: 200px; background: transparent; border: 0; border-bottom: 2px dashed var(--et-line2); border-radius: 0; text-align: center; padding: 0 0 3px; margin: 0; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; height: auto; min-height: 0; } .emmu-mtn .mtn-bpm:focus { border-bottom-color: var(--et-lime-br); color: var(--et-lime-br); background: transparent; box-shadow: none; } .emmu-mtn .mtn-bpm::-webkit-outer-spin-button, .emmu-mtn .mtn-bpm::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .emmu-mtn .mtn-unit { font-size: 12px; font-weight: 800; color: var(--et-t4); letter-spacing: 2.2px; } .emmu-mtn .mtn-tempo { text-align: center; font-size: 11.5px; letter-spacing: 1px; color: var(--et-lime-br); font-weight: 800; margin: 1px 0 11px; min-height: 17px; } .emmu-mtn .mtn-ctrl { display: flex; align-items: center; gap: 10px; } .emmu-mtn .mtn-stepbtn { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 99px; background: var(--et-pane4); border: 1px solid var(--et-line2); color: var(--et-strong); font-size: 19px; font-weight: 900; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; touch-action: manipulation; -webkit-user-select: none; user-select: none; } .emmu-mtn .mtn-stepbtn:active { background: var(--et-line2); } .emmu-mtn .mtn-sliderwrap { position: relative; flex: 1; min-width: 0; } .emmu-mtn .mtn-slider { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; border-radius: 99px; background: var(--et-line2); outline: none; margin: 0; } .emmu-mtn .mtn-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 99px; background: linear-gradient(140deg, #A0BC00, #7B6BFF); border: 2px solid #FFFFFF; cursor: pointer; } .emmu-mtn .mtn-slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 99px; background: linear-gradient(140deg, #A0BC00, #7B6BFF); border: 2px solid #FFFFFF; cursor: pointer; } .emmu-mtn .mtn-scale { display: flex; justify-content: space-between; margin: 7px 2px 0; font-size: 10px; letter-spacing: 1.2px; color: var(--et-t6); } .emmu-mtn .mtn-dots { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 13px 0 0; min-height: 20px; } .emmu-mtn .mtn-dot { width: 15px; height: 15px; border-radius: 50%; background: var(--et-pane4); border: 1px solid var(--et-line2); transition: transform .09s ease-out, background .18s, box-shadow .18s, border-color .18s; } .emmu-mtn .mtn-dot.is-acc { border-color: rgba(160, 188, 0, .45); width: 17px; height: 17px; } .emmu-mtn .mtn-dot.on { background: var(--et-lime-br); border-color: var(--et-lime-br); box-shadow: 0 0 15px rgba(160, 188, 0, .7); transform: scale(1.3); } .emmu-mtn .mtn-dot.is-acc.on { background: var(--et-strong); border-color: var(--et-strong); box-shadow: 0 0 20px rgba(160, 188, 0, .85); transform: scale(1.4); } .emmu-mtn .mtn-main { margin: 12px 0 0; } .emmu-mtn .mtn-beatpane { margin: 12px 0 0; } /* 拍子(左)とアクセントのスイッチ(右)を1つの枠に並べる。枠幅は音色設定と同じ */ .emmu-mtn .mtn-beatgrid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; } /* 右の列は見出しの幅で決まるので、字間を詰めて拍子ボタンの幅を稼ぐ */ .emmu-mtn .mtn-accentcol .et-label { letter-spacing: .4px; } .emmu-mtn .mtn-accentcol .mtn-toggle { justify-content: center; /* 左の拍子ボタンと高さを揃える */ padding: 9px 13px; } /* 小型スマホでも拍子ボタンが1行に収まるようにする */ @media (max-width: 360px) { .emmu-mtn .mtn-beatgrid { gap: 8px; } .emmu-mtn .mtn-seg { gap: 4px; } .emmu-mtn .mtn-seg button { font-size: 12px; } } .emmu-mtn .mtn-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 9px 0 0; } .emmu-mtn .mtn-seg button { font-family: inherit; border-radius: 12px; padding: 11px 0; font-size: 13px; font-weight: 800; cursor: pointer; background: var(--et-pane2); border: 1px solid var(--et-line); color: var(--et-t3); touch-action: manipulation; } .emmu-mtn .mtn-seg button.on { background: rgba(160, 188, 0, .18); border-color: rgba(160, 188, 0, .5); color: var(--et-lime-br); } .emmu-mtn .mtn-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; font-family: inherit; cursor: pointer; background: var(--et-pane2); border: 1px solid var(--et-line); border-radius: 12px; padding: 11px 13px; color: var(--et-t3); font-size: 13px; font-weight: 800; margin: 9px 0 0; touch-action: manipulation; } .emmu-mtn .mtn-sw { width: 40px; height: 23px; border-radius: 99px; background: var(--et-line2); position: relative; flex: 0 0 40px; transition: background .16s; } .emmu-mtn .mtn-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform .16s; } .emmu-mtn .mtn-toggle.on { background: rgba(160, 188, 0, .16); border-color: rgba(160, 188, 0, .45); color: var(--et-lime-br); } .emmu-mtn .mtn-toggle.on .mtn-sw { background: var(--et-lime); } .emmu-mtn .mtn-toggle.on .mtn-sw::after { transform: translateX(17px); } .emmu-mtn .mtn-soundpane { margin: 10px 0 0; } .emmu-mtn .mtn-voices { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; } .emmu-mtn .mtn-voices button { flex: 1 1 28%; min-width: 0; font-family: inherit; border-radius: 12px; padding: 11px 4px; font-size: 12px; font-weight: 800; cursor: pointer; background: var(--et-pane2); border: 1px solid var(--et-line); color: var(--et-t3); touch-action: manipulation; white-space: nowrap; min-height: 42px; } .emmu-mtn .mtn-voices button.on { background: rgba(160, 188, 0, .18); border-color: rgba(160, 188, 0, .5); color: var(--et-lime-br); } @media (min-width: 620px) { .emmu-mtn .mtn-bpm { font-size: 74px; } .emmu-mtn .mtn-voices button { flex: 1 1 21%; font-size: 13px; } } /* ==== 音域チェック固有(.emmu-vr)。EMMUS 実装の逐語移植(色のみ変数化) ==== */ .emmu-vr .et-btn.sm { font-size: 16px; border-radius: 16px; padding: 16px; } .emmu-vr .et-btn.lime { background: rgba(160, 188, 0, .18); border: 1px solid rgba(160, 188, 0, .45); color: var(--et-lime-br); box-shadow: none; font-weight: 900; border-radius: 16px; } .emmu-vr .et-btn.lime::after { display: none; } .emmu-vr .et-track { height: 24px; border-radius: 99px; background: var(--et-pane3); position: relative; overflow: hidden; } .emmu-vr .et-fill { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: var(--et-grad2); } .emmu-vr .et-fill.other { background: var(--et-line2); } .emmu-vr .vr-gauge { position: relative; width: 236px; height: 236px; margin: 0 auto; cursor: pointer; } .emmu-vr .vr-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 150deg, var(--et-line2) 0deg, var(--et-line2) 240deg, rgba(0, 0, 0, 0) 240deg); } .emmu-vr[data-s="rec"] .vr-ring { background: conic-gradient(from 150deg, #29E0FF 0deg, #7B6BFF calc(var(--p, 0) * .5), #A0BC00 var(--p, 0deg), var(--et-pane4) var(--p, 0deg), var(--et-pane4) 240deg, rgba(0, 0, 0, 0) 240deg); } .emmu-vr .vr-hole { position: absolute; inset: 16px; border-radius: 50%; background: var(--et-hole-bg, #0C1226); border: 1px solid var(--et-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } [data-theme="light"] .emmu-vr .vr-hole { --et-hole-bg: #f2f4fb; } .emmu-vr .vr-now { font-size: 10.5px; letter-spacing: 2.52px; color: var(--et-t5); } .emmu-vr .vr-note { font-size: 52px; font-weight: 800; color: var(--et-strong); line-height: 1.1; } .emmu-vr .vr-hz { font-size: 14px; color: var(--et-t3); } .emmu-vr .vr-mic { width: 26px; height: 40px; opacity: .85; } .emmu-vr .vr-tap { font-size: 14px; font-weight: 700; color: var(--et-t6); } .emmu-vr .vr-mm { display: flex; gap: 12px; margin-top: 14px; } .emmu-vr .vr-mmbox { flex: 1; background: var(--et-pane2); border: 1px solid var(--et-line); border-radius: 14px; padding: 12px 14px; } .emmu-vr .vr-mmbox.hot { background: linear-gradient(140deg, rgba(160, 188, 0, .22), rgba(41, 224, 255, .14)); border-color: rgba(160, 188, 0, .4); } .emmu-vr .vr-mmv { font-size: 26px; font-weight: 800; color: var(--et-strong); line-height: 1.1; margin-top: 4px; } .emmu-vr .vr-mmbox.hot .vr-mmv { color: var(--et-lime-br); } .emmu-vr .vr-wave { display: flex; align-items: center; gap: 2px; height: 126px; padding: 12px; background: var(--et-pane2); border: 1px solid var(--et-line); border-radius: 16px; } .emmu-vr .vr-wave i { flex: 1; min-width: 2px; border-radius: 2px; height: 4px; background: linear-gradient(180deg, #29E0FF, #A0BC00); transition: height .08s; } .emmu-vr .vr-big { font-size: 76px; font-weight: 800; color: var(--et-strong); line-height: .95; } .emmu-vr .vr-rank { display: inline-flex; align-items: center; gap: 8px; border-radius: 99px; padding: 9px 18px; background: var(--et-grad2); color: var(--et-on-accent); font-size: 15px; font-weight: 900; } .emmu-vr .vr-kb { position: relative; height: 112px; border-radius: 8px; overflow: hidden; background: #E9E6DF; display: flex; } .emmu-vr .vr-w { position: relative; flex: 1; border-right: 1px solid rgba(11, 16, 32, .18); background: #E9E6DF; } .emmu-vr .vr-w.on { background: linear-gradient(180deg, rgba(160, 188, 0, .35), #A0BC00); } .emmu-vr .vr-b { position: absolute; top: 0; width: 62%; height: 62%; background: #0B1020; border-radius: 0 0 3px 3px; transform: translateX(50%); z-index: 2; } .emmu-vr .vr-b.on { background: linear-gradient(180deg, #5d6b12, #8aa300); } .emmu-vr .vr-kbl { display: flex; gap: 0; justify-content: space-between; margin-top: 8px; } .emmu-vr .vr-kbl span { font-size: 10px; color: var(--et-t5); } /* 結果判定のバー行: ラベルの下にバーを縦積みし、バーをペイン幅いっぱいに広げて上の鍵盤マップと左右端を揃える(2026-08-05) */ .emmu-vr .vr-cmp { display: block; } .emmu-vr .vr-cmp span { display: block; text-align: left; margin: 0 0 6px; font-size: 13.5px; color: var(--et-t3); } .emmu-vr .vr-cmp span.me { color: var(--et-lime-br); font-weight: 900; } .emmu-vr .vr-cmp .et-track { margin-bottom: 14px; } .emmu-vr .vr-cmp .et-track:last-child { margin-bottom: 0; } /* 結果画面下のアフィリエイトバナー。600px以下はスマホ用(--sp)に切替。 .vr-ad 系クラスは管理画面「アフィリエイト管理」で保存される広告 HTML(DB)から参照される。削除・改名しないこと。 */ .emmu-vr .vr-ad { margin-top: 18px; text-align: center; } .emmu-vr .vr-ad a { display: inline-block; line-height: 0; } .emmu-vr .vr-ad img { max-width: 100%; height: auto; border: 0; } .emmu-vr .vr-ad--sp { display: none; } @media (max-width: 600px) { .emmu-vr .vr-ad--pc { display: none; } .emmu-vr .vr-ad--sp { display: block; } } .emmu-vr .vr-share { display: flex; gap: 10px; flex-wrap: wrap; } .emmu-vr .vr-share a, .emmu-vr .vr-share button { flex: 1; min-width: 140px; text-decoration: none; text-align: center; background: var(--et-pane2); border: 1px solid var(--et-line2); border-radius: 14px; padding: 15px 10px; font-family: inherit; font-size: 14px; font-weight: 800; color: var(--et-t3); cursor: pointer; } .emmu-vr .vr-share a.x { color: var(--et-strong); } .emmu-vr .vr-share a.line { color: #2eb56e; } .emmu-vr [hidden] { display: none !important; } @media (max-width: 600px) { .emmu-vr .vr-gauge { width: 196px; height: 196px; } .emmu-vr .vr-note { font-size: 42px; } .emmu-vr .vr-big { font-size: 58px; } .emmu-vr .vr-cmp span { font-size: 12px; } .emmu-vr .vr-kb { height: 88px; } } /* ==== 移調ツール固有(.emmu-tr)。EMMUS 実装の逐語移植(色のみ変数化) ==== */ .emmu-tr .et-card { margin: 0 0 18px; } .emmu-tr + .emmu-tr { margin-top: 26px; } .emmu-tr .tr-title { font-size: 20px; font-weight: 900; color: var(--et-strong); line-height: 1.4; margin: 2px 0 10px; } .emmu-tr h1.tr-title { font-size: 20px; } .emmu-tr .tr-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .emmu-tr .tr-pane { display: flex; flex-direction: column; gap: 16px; padding: 18px; } .emmu-tr .tr-field > .et-label { display: block; margin-bottom: 8px; } .emmu-tr .tr-select { width: 100%; appearance: none; -webkit-appearance: none; background: var(--et-pane3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239AA2D4' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center; border: 1px solid var(--et-line2); border-radius: 10px; color: var(--et-strong); font-family: inherit; font-size: 15px; font-weight: 700; padding: 13px 40px 13px 14px; cursor: pointer; } .emmu-tr .tr-select:focus { outline: 2px solid rgba(160, 188, 0, .5); outline-offset: 1px; } .emmu-tr .tr-select option, .emmu-tr .tr-select optgroup { background: var(--et-option-bg); color: var(--et-strong); font-style: normal; font-weight: 800; } .emmu-tr .tr-toggle { display: flex; gap: 8px; } .emmu-tr .tr-tab { flex: 1; background: var(--et-pane2); border: 1px solid var(--et-line2); border-radius: 14px; color: var(--et-t3); font-family: inherit; font-size: 14.5px; font-weight: 800; padding: 12px 10px; cursor: pointer; } .emmu-tr .tr-tab.is-on { background: rgba(160, 188, 0, .18); border-color: rgba(160, 188, 0, .5); color: var(--et-strong); } .emmu-tr .tr-notes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .emmu-tr .tr-notebtn { background: var(--et-pane2); border: 1px solid var(--et-line2); border-radius: 12px; padding: 9px 2px 7px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; } .emmu-tr .tr-nl { font-size: 16px; font-weight: 800; color: var(--et-strong); line-height: 1.1; } .emmu-tr .tr-nk { font-size: 10px; color: var(--et-t5); line-height: 1.1; } .emmu-tr .tr-notebtn.is-on { background: linear-gradient(140deg, #A0BC00, #7B6BFF); border-color: transparent; } .emmu-tr .tr-notebtn.is-on .tr-nl { color: #08101F; } .emmu-tr .tr-notebtn.is-on .tr-nk { color: rgba(8, 16, 31, .7); } .emmu-tr .tr-feat { margin: 14px 0 0; padding: 14px 16px; background: linear-gradient(140deg, rgba(160, 188, 0, .16), rgba(41, 224, 255, .08)); border: 1px solid rgba(160, 188, 0, .4); border-radius: 14px; font-size: 14.5px; line-height: 1.9; color: var(--et-t2); } .emmu-tr .tr-feat b { color: var(--et-strong); } .emmu-tr .tr-feat .tr-fbig { font-size: 20px; color: var(--et-lime-br); font-family: "JetBrains Mono", monospace; } .emmu-tr .tr-fi { font-weight: 900; color: var(--et-strong); } .emmu-tr .tr-note { font-size: 12px; color: var(--et-t5); line-height: 1.8; margin: 12px 0 0; } .emmu-tr .tr-ba { display: flex; align-items: stretch; gap: 10px; margin: 14px 0 0; } .emmu-tr .tr-ba > div { flex: 1; background: var(--et-pane2); border: 1px solid var(--et-line); border-radius: 14px; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .emmu-tr .tr-ba .tr-arrow { flex: 0 0 26px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: #7B6BFF; font-size: 22px; font-weight: 800; padding: 0; } .emmu-tr .tr-balabel { font-size: 9.5px; letter-spacing: 1px; color: var(--et-t5); } .emmu-tr .tr-bak { font-size: 17px; font-weight: 900; color: var(--et-strong); } .emmu-tr .tr-ban { font-size: 14px; color: var(--et-t3); } .emmu-tr .tr-bas { font-size: 12px; color: var(--et-t4); } .emmu-tr .tr-lime { color: var(--et-lime-br) !important; } .emmu-tr .tr-baph { font-size: 12.5px; color: var(--et-t6); line-height: 1.9; } /* 早見表(主役) */ .emmu-tr .tr-tbl { border: 1px solid var(--et-line2); border-radius: 12px; overflow: hidden; margin: 0 0 16px; background: var(--et-pane0); } .emmu-tr .tr-tbl table { width: 100%; border-collapse: collapse; margin: 0; table-layout: fixed; } .emmu-tr .tr-tbl col { width: 20%; } .emmu-tr .tr-tbl th { background: var(--et-pane2); font-size: 13px; letter-spacing: 1px; color: var(--et-t4); font-weight: 800; padding: 8px 2px; text-align: center; border-bottom: 1px solid var(--et-line2); width: 20%; } .emmu-tr .tr-tbl td { padding: 8px 2px; text-align: center; border-top: 1px solid var(--et-line); cursor: pointer; width: 20%; } .emmu-tr .tr-tbl tbody tr:first-child td { border-top: none; } .emmu-tr .tr-cm { display: block; font-size: 26px; font-weight: 800; color: var(--et-strong); line-height: 1.25; white-space: nowrap; } .emmu-tr .tr-ck { font-style: normal; font-family: "Zen Kaku Gothic New", -apple-system, sans-serif; font-size: 14px; font-weight: 700; color: var(--et-t3); margin-left: 5px; } .emmu-tr .tr-cs { display: block; font-size: 13px; color: var(--et-t5); line-height: 1.2; } .emmu-tr .tr-tbl td.tr-lbl .tr-cm { color: var(--et-t2); } .emmu-tr .tr-tbl td.is-hl { background: rgba(160, 188, 0, .12); } .emmu-tr .tr-tbl td.is-hl .tr-cm { color: var(--et-lime-br); } .emmu-tr .tr-tbl td.is-hl .tr-ck { color: var(--et-lime-dim); } .emmu-tr .tr-tbl th.is-col { border-left: 2px solid rgba(160, 188, 0, .65); border-right: 2px solid rgba(160, 188, 0, .65); border-top: 2px solid rgba(160, 188, 0, .65); color: var(--et-lime-br); } .emmu-tr .tr-tbl td.is-col { border-left: 2px solid rgba(160, 188, 0, .65); border-right: 2px solid rgba(160, 188, 0, .65); background: rgba(160, 188, 0, .06); } .emmu-tr .tr-tbl tbody tr:last-child td.is-col { border-bottom: 2px solid rgba(160, 188, 0, .65); } .emmu-tr .tr-tbl td.is-hit { background: linear-gradient(140deg, #A0BC00, #7B6BFF); } .emmu-tr .tr-tbl td.is-hit .tr-cm { color: #08101F; } .emmu-tr .tr-tbl td.is-hit .tr-ck, .emmu-tr .tr-tbl td.is-hit .tr-cs { color: rgba(8, 16, 31, .72); } .emmu-tr .tr-tbl .tr-thspan { color: var(--et-lime-br); letter-spacing: 4px; font-size: 12px; } .emmu-tr .tr-tbl thead tr:first-child th { border-bottom: 1px solid var(--et-line); } /* 早見表バー(左=向き/長短調、右=表示・配色) */ .emmu-tr .tr-tblbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 8px; flex-wrap: wrap; row-gap: 8px; } .emmu-tr .tr-tblbar .tr-toggle { gap: 4px; } .emmu-tr .tr-tblbar .tr-tab { flex: 0 0 auto; font-size: 12.5px; padding: 7px 12px; border-radius: 10px; } .emmu-tr .tr-disp { display: flex; gap: 4px; background: var(--et-pane2); border: 1px solid var(--et-line2); border-radius: 10px; padding: 3px; } .emmu-tr .tr-dbtn { border: 0; background: transparent; color: var(--et-t3); font-family: inherit; font-size: 12.5px; font-weight: 800; padding: 6px 14px; border-radius: 8px; cursor: pointer; } .emmu-tr .tr-dbtn.is-on { background: rgba(160, 188, 0, .22); color: var(--et-strong); } /* 変換パネルの五線譜(常に白地) */ .emmu-tr .tr-staff { display: block; width: 100%; max-width: 170px; background: #fff; border-radius: 8px; padding: 3px 6px; margin: 8px auto 2px; box-sizing: border-box; } .emmu-tr .tr-staff svg { display: block; width: 100%; height: auto; } /* 早見表ライト配色(印刷・スクショ用のツール内切替。ページテーマとは独立) */ .emmu-tr .tr-tbl.is-light { background: #fff; border-color: rgba(20, 26, 46, .22); } .emmu-tr .tr-tbl.is-light th { background: #eef0f5; color: #4a5268; border-bottom-color: rgba(20, 26, 46, .18); } .emmu-tr .tr-tbl.is-light th.tr-thspan { color: #5a6a00; } .emmu-tr .tr-tbl.is-light td { border-top-color: rgba(20, 26, 46, .10); } .emmu-tr .tr-tbl.is-light .tr-cm { color: #1f2430; } .emmu-tr .tr-tbl.is-light .tr-ck { color: #5d6579; } .emmu-tr .tr-tbl.is-light .tr-cs { color: #5d6579; } .emmu-tr .tr-tbl.is-light td.tr-lbl .tr-cm { color: #1f2430; } .emmu-tr .tr-tbl.is-light td.is-hl { background: rgba(160, 188, 0, .22); } .emmu-tr .tr-tbl.is-light td.is-hl .tr-cm { color: #3c4600; } .emmu-tr .tr-tbl.is-light th.is-col { border-left-color: #7a8f00; border-right-color: #7a8f00; border-top-color: #7a8f00; color: #5a6a00; } .emmu-tr .tr-tbl.is-light td.is-col { border-left-color: #7a8f00; border-right-color: #7a8f00; background: rgba(160, 188, 0, .10); } .emmu-tr .tr-tbl.is-light tbody tr:last-child td.is-col { border-bottom-color: #7a8f00; } .emmu-tr .tr-tbl.is-light td.is-hit { background: linear-gradient(140deg, #A0BC00, #7B6BFF); } .emmu-tr .tr-tbl.is-light td.is-hit .tr-cm { color: #08101F; } .emmu-tr .tr-tbl.is-light td.is-hit .tr-cs { color: rgba(8, 16, 31, .72); } @media (max-width: 600px) { .emmu-tr .tr-notes { grid-template-columns: repeat(4, 1fr); } .emmu-tr .tr-pane { padding: 14px; } .emmu-tr .tr-cm { font-size: 19px; white-space: normal; } .emmu-tr .tr-ck { font-size: 9.5px; margin-left: 3px; } .emmu-tr .tr-cs { font-size: 9px; } .emmu-tr .tr-tbl th { font-size: 10px; padding: 7px 1px; } .emmu-tr .tr-tbl td { padding: 6px 1px; } } /* 表示セグ(度数/音名/ドレミ)を3等分の横並びに固定 */ .emmu-scale-tool #estMode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex-wrap: nowrap; } .emmu-scale-tool #estMode button { min-width: 0; width: 100%; padding-left: 2px; padding-right: 2px; } @media (max-width: 600px) { /* フレーム内側の左右余白は上下の半分にして表示領域を稼ぐ */ .emmu-scale-tool { padding: 18px 9px; border-radius: 18px; } .est-head .est-title { font-size: 22px; } .est-head p { letter-spacing: 2px; } } /* ==== キー・BPM検出固有(.emmu-ebk)。EMMUS 実装の機械変換テーマ化(色→変数) ==== */ /* EMMUS の --ebk-* トークンを共通テーマ変数へ対応付ける(ライト/ダーク両対応) */ .emmu-ebk { --ebk-bg: var(--et-ink); --ebk-lime: #A0BC00; --ebk-purple: #7B6BFF; --ebk-cyan: #29E0FF; --ebk-lime-bright: var(--et-lime-br); --ebk-lime-pale: #D8EE7E; --ebk-line-green: #4FE39A; --ebk-t-max: var(--et-strong); --ebk-t-strong: var(--et-t2); --ebk-t-body: var(--et-t3); --ebk-t-sub: var(--et-t4); --ebk-t-label: var(--et-t5); --ebk-t-faint: var(--et-t6); --ebk-btn-dark: #08101F; --ebk-f-jp: inherit; --ebk-f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-family: var(--ebk-f-jp); line-height: 1.6; } .emmu-ebk button { font-family: var(--ebk-f-jp); cursor: pointer; } .emmu-ebk [hidden] { display: none !important; } .emmu-ebk .ebk-privacy { font-size: 12.5px; color: var(--ebk-t-strong); background: var(--et-pane2); border: 1px dashed var(--et-line2); border-radius: 14px; padding: 10px 14px; margin-bottom: 18px; } /* ---------- カード ---------- */ .emmu-tool .ebk-card{ border-radius:24px; padding:26px 20px 24px; color:var(--ebk-t-body); background:var(--et-card-bg); overflow:hidden; } .emmu-tool .ebk-card[data-state="measuring"]{background:radial-gradient(120% 90% at 50% 0%, #26205C 0%, #0B1020 62%)} .emmu-tool .ebk-card[data-state="result"]{background:radial-gradient(120% 80% at 50% 0%, #2C2166 0%, #0B1020 58%)} /* ---------- ヘッダー ---------- */ .emmu-tool .ebk-toplabel{ font-family:var(--ebk-f-mono);font-size:11px;font-weight:400; letter-spacing:3.2px;color:var(--ebk-t-sub);margin-bottom:10px; } .emmu-tool .ebk-title{ font-size:26px;font-weight:900;color:var(--ebk-t-max); line-height:1.35;margin-bottom:12px; } .emmu-tool .ebk-chip{ display:inline-flex;align-items:center;gap:6px; font-size:11.5px;font-weight:700;color:var(--ebk-t-strong); background:var(--et-pane4); border:1px solid var(--et-line2); border-radius:99px;padding:5px 12px; } .emmu-tool .ebk-chip--lime{ color:var(--ebk-lime-bright); background:rgba(160,188,0,.16); border:1px solid rgba(160,188,0,.4); } .emmu-tool .ebk-chip--rec{color:#FF7A8A;background:rgba(255,90,110,.14);border-color:rgba(255,90,110,.4)} /* ---------- タブ ---------- */ .emmu-tool .ebk-tabs{display:flex;gap:8px;margin-bottom:18px} .emmu-tool .ebk-tab{ flex:1;border-radius:16px;padding:10px 8px 9px; background:transparent;border:1px solid var(--et-line2); color:var(--ebk-t-sub);font-size:14px;font-weight:800;line-height:1.3; } .emmu-tool .ebk-tab .ebk-tab-nw{display:inline-block;white-space:nowrap} .emmu-tool .ebk-tab .ebk-tab-sub{ display:block;font-family:var(--ebk-f-mono);font-weight:400; font-size:10px;letter-spacing:1.6px;margin-top:2px;color:var(--ebk-t-faint); } .emmu-tool .ebk-tab.is-active{ background:rgba(160,188,0,.18); border:1px solid rgba(160,188,0,.5); color:var(--ebk-t-max); } .emmu-tool .ebk-tab.is-active .ebk-tab-sub{color:var(--ebk-lime-bright)} /* ---------- パネル共通 ---------- */ .emmu-tool .ebk-panel{ background:var(--et-pane); border:1px solid var(--et-pane4); border-radius:20px;padding:18px 16px; } .emmu-tool .ebk-sec-label{ font-family:var(--ebk-f-mono);font-size:11px;letter-spacing:3px; color:var(--ebk-t-sub);margin-bottom:8px; } .emmu-tool .ebk-hint{ font-size:12px;color:var(--ebk-t-faint); background:var(--et-pane2); border:1px dashed var(--et-line2); border-radius:14px;padding:9px 13px;margin-top:12px; } .emmu-tool .ebk-hint a,.emmu-tool .ebk-keyshift-hint a{color:var(--ebk-cyan)} /* ---------- ドロップゾーン ---------- */ .emmu-tool .ebk-drop{ background:var(--et-pane); border:1.5px dashed rgba(255,255,255,.25); border-radius:20px;padding:28px 16px 24px;text-align:center; transition:border-color .15s,background .15s; } .emmu-tool .ebk-drop.is-over{border-color:var(--ebk-lime);background:rgba(160,188,0,.08)} .emmu-tool .ebk-drop-ico{ width:52px;height:52px;margin:0 auto 10px;border-radius:99px; background:linear-gradient(140deg,#A0BC00,#7B6BFF); color:var(--ebk-btn-dark);font-size:24px;font-weight:900; display:flex;align-items:center;justify-content:center; } .emmu-tool .ebk-drop-main{font-size:16px;font-weight:900;color:var(--ebk-t-max);margin-bottom:4px} .emmu-tool .ebk-drop-sub{font-size:12px;color:var(--ebk-t-label);margin-bottom:16px} /* ---------- ボタン ---------- */ .emmu-tool .ebk-btn{ display:inline-flex;align-items:center;justify-content:center; border:none;border-radius:18px;padding:13px 26px; font-size:16px;font-weight:900;line-height:1;white-space:nowrap; } .emmu-tool .ebk-btn--primary{ background:linear-gradient(100deg,#A0BC00,#7B6BFF 55%,#29E0FF); color:var(--ebk-btn-dark);position:relative;overflow:hidden; } .emmu-tool .ebk-btn--primary::after{ content:"";position:absolute;top:0;left:-80%;width:60%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); animation:ebkShine 2.8s ease-in-out infinite; } .emmu-tool .ebk-btn--secondary{ background:transparent;border:1px solid rgba(255,255,255,.3); color:var(--ebk-t-strong);border-radius:16px; } .emmu-tool .ebk-btn--ghost{ background:transparent;border:1px solid var(--et-line2); color:var(--ebk-t-sub);border-radius:14px;padding:10px 20px;font-size:13px;font-weight:700; } .emmu-tool .ebk-btn--x{ background:#FFFFFF;color:#0B1020;border-radius:12px;padding:11px 18px;font-size:13.5px; } .emmu-tool .ebk-btn--line{ background:rgba(79,227,154,.16);border:1px solid rgba(79,227,154,.45); color:var(--ebk-line-green);border-radius:14px;padding:11px 18px;font-size:13.5px; } /* ---------- 解析中 ---------- */ .emmu-tool .ebk-analyzing{text-align:center;padding:24px 16px} .emmu-tool .ebk-anlz-label{ font-family:var(--ebk-f-mono);font-size:11px;letter-spacing:3px; color:var(--ebk-cyan);margin-bottom:10px; display:flex;align-items:center;justify-content:center;gap:7px; } .emmu-tool .ebk-rec-dot{ width:8px;height:8px;border-radius:99px;background:#FF5A6E; display:inline-block;animation:ebkBlink 1s ease-in-out infinite; } .emmu-tool .ebk-anlz-file{ font-family:var(--ebk-f-mono);font-size:12px;color:var(--ebk-t-strong); margin-bottom:14px;word-break:break-all; } .emmu-ebk .ebk-progress{ height:10px;border-radius:99px;background:var(--et-pane3); overflow:hidden;margin-bottom:10px; } .emmu-ebk .ebk-progress-bar{ height:100%;width:0%;border-radius:99px; background:linear-gradient(90deg,#A0BC00,#7B6BFF 55%,#29E0FF); transition:width .2s; } .emmu-tool .ebk-anlz-status{font-size:13px;color:var(--ebk-t-body);margin-bottom:16px} /* ---------- 結果 ---------- */ .emmu-tool .ebk-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px} .emmu-tool .ebk-valcard{ background:var(--et-pane2); border:1px solid var(--et-pane4); border-radius:14px;padding:16px 14px;text-align:center; } .emmu-tool .ebk-val-label{ font-family:var(--ebk-f-mono);font-size:11px;letter-spacing:2px; color:var(--ebk-t-label);margin-bottom:6px; } .emmu-tool .ebk-val-big{ font-family:var(--ebk-f-mono);font-weight:800;font-size:56px; color:var(--ebk-t-max);line-height:1.05;margin-bottom:6px; } .emmu-tool .ebk-val-sub{font-size:12.5px;color:var(--ebk-t-body);margin-bottom:8px} .emmu-tool .ebk-conf{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px} .emmu-tool .ebk-conf-label{font-size:10.5px;color:var(--ebk-t-faint)} .emmu-tool .ebk-conf-dots{font-family:var(--ebk-f-mono);font-size:12px;letter-spacing:2px;color:var(--ebk-lime-bright)} .emmu-tool .ebk-val-alt{font-size:11px;color:var(--ebk-t-faint)} .emmu-tool .ebk-alt-chip{ font-family:var(--ebk-f-mono);font-size:11px;font-weight:800; color:var(--ebk-t-strong);background:var(--et-pane4); border:1px solid var(--et-line2);border-radius:99px; padding:3px 10px;margin-left:6px; } .emmu-tool .ebk-alt-chip:active{border-color:var(--ebk-lime)} /* ---------- テンポ・キーチェンジャー ---------- */ .emmu-tool .ebk-chg{margin-bottom:12px} .emmu-tool .ebk-chg-title{font-size:16px;font-weight:900;color:var(--ebk-t-max);margin-bottom:14px} .emmu-tool .ebk-chg-row{margin-bottom:14px} .emmu-tool .ebk-chg-label{ font-size:13px;font-weight:800;color:var(--ebk-t-strong);margin-bottom:8px; } .emmu-tool .ebk-chg-val{ font-family:var(--ebk-f-mono);font-weight:800;font-size:20px; color:var(--ebk-lime-bright);margin-left:8px; } .emmu-tool .ebk-chg-unit{ font-family:var(--ebk-f-mono);font-size:11px;color:var(--ebk-t-label);margin-left:4px; } .emmu-tool .ebk-chg-ratio{ font-family:var(--ebk-f-mono);font-size:12px;font-weight:800; color:var(--ebk-cyan);margin-left:10px; } .emmu-tool .ebk-chg-ctrl{display:flex;align-items:center;gap:10px} .emmu-tool .ebk-chg-sliderwrap{position:relative;flex:1;padding-top:26px} .emmu-tool .ebk-chg-slider{display:block;width:100%} .emmu-tool .ebk-chg-mark{ position:absolute;top:26px;width:2px;height:20px;border-radius:2px; background:rgba(201,230,74,.55);transform:translateX(-1px); pointer-events:none; } .emmu-tool .ebk-chg-mark-label{ position:absolute;top:0;transform:translateX(-50%); font-size:11px;line-height:1.2;font-weight:700;color:var(--ebk-lime-bright); letter-spacing:1px;pointer-events:none;white-space:nowrap; } .emmu-tool .ebk-stepbtn{ width:38px;height:38px;flex:0 0 38px;border-radius:99px; background:var(--et-pane4);border:1px solid var(--et-line2); color:var(--ebk-t-max);font-size:17px;font-weight:900;line-height:1; display:inline-flex;align-items:center;justify-content:center; } .emmu-tool .ebk-stepbtn:active{border-color:var(--ebk-lime)} .emmu-tool .ebk-chg-slider{ -webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:99px; background:var(--et-line2);outline:none;margin:0; } .emmu-tool .ebk-chg-slider::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:99px; background:linear-gradient(140deg,#A0BC00,#7B6BFF);border:2px solid #FFFFFF;cursor:pointer; } .emmu-tool .ebk-chg-slider::-moz-range-thumb{ width:22px;height:22px;border-radius:99px; background:linear-gradient(140deg,#A0BC00,#7B6BFF);border:2px solid #FFFFFF;cursor:pointer; } .emmu-tool .ebk-chg-range{font-size:11px;color:var(--ebk-t-faint);margin-top:6px} .emmu-tool .ebk-chg-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px} .emmu-tool .ebk-chg-btns .ebk-btn{flex:1;min-width:110px} .emmu-tool .ebk-chg-status{font-size:12px;color:var(--ebk-t-faint);margin-top:6px} .emmu-tool .ebk-chg-prog{margin-top:8px} /* ---------- シェア ---------- */ .emmu-tool .ebk-share{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px} .emmu-tool .ebk-share .ebk-btn{flex:1;min-width:96px;padding-left:10px;padding-right:10px} .emmu-tool .ebk-again{width:100%} /* ---------- マイク ---------- */ .emmu-tool .ebk-mic{text-align:center;padding:22px 16px} .emmu-tool .ebk-mic-head{ display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px;min-height:28px; } .emmu-tool .ebk-mic-timer{font-family:var(--ebk-f-mono);font-size:13px;font-weight:800;color:var(--ebk-t-strong)} .emmu-tool .ebk-mic-bpm{font-size:72px} .emmu-tool .ebk-level{ height:8px;border-radius:99px;background:var(--et-pane3); overflow:hidden;margin:12px auto 12px;max-width:260px; } .emmu-tool .ebk-level-bar{ height:100%;width:0%;border-radius:99px; background:linear-gradient(90deg,#A0BC00,#29E0FF); transition:width .1s linear; } .emmu-tool .ebk-mic-status{font-size:12.5px;color:var(--ebk-t-body);margin-bottom:16px} .emmu-tool .ebk-mic .ebk-btn{margin:0 4px} /* ---------- タップBPM ---------- */ .emmu-tool .ebk-tap{margin-top:12px;text-align:center} .emmu-tool .ebk-tap-row{ display:flex;align-items:center;justify-content:center;gap:18px;margin:6px 0 10px; } .emmu-tool .ebk-btn--tap{ width:92px;height:92px;border-radius:99px; background:linear-gradient(140deg,#A0BC00,#7B6BFF); color:var(--ebk-btn-dark);font-family:var(--ebk-f-mono); font-size:20px;font-weight:800;letter-spacing:1.5px; transition:transform .06s; } .emmu-tool .ebk-btn--tap:active{transform:scale(.93)} .emmu-tool .ebk-tap-out{min-width:90px} .emmu-tool .ebk-tap-bpm{ font-family:var(--ebk-f-mono);font-weight:800;font-size:40px; color:var(--ebk-t-max);line-height:1.1; } .emmu-tool .ebk-tap-hint{font-size:11.5px;color:var(--ebk-t-faint)} /* ---------- エラー ---------- */ .emmu-tool .ebk-error{ margin-top:14px;font-size:13px;color:#FFB3BC; background:rgba(255,90,110,.1); border:1px solid rgba(255,90,110,.35); border-radius:14px;padding:11px 14px; } @media (max-width:430px){ .emmu-tool .ebk-result-grid{grid-template-columns:1fr} .emmu-tool .ebk-card{padding:22px 7px 20px} .emmu-tool .ebk-title{font-size:22px} .emmu-tool .ebk-val-big{font-size:48px} .emmu-tool .ebk-mic-bpm{font-size:64px} } [data-theme="light"] .emmu-ebk .ebk-card[data-state="measuring"]{background:radial-gradient(120% 90% at 50% 0%, #f0edff 0%, #eef1fa 62%)} [data-theme="light"] .emmu-ebk .ebk-card[data-state="result"]{background:radial-gradient(120% 80% at 50% 0%, #efeaff 0%, #eef1fa 58%)} /* ============ 見出し書体: メイリオ(2026-08-05 確定) ============ 一覧ページの見出し類(音楽ツール/カード名/EMMU ロゴ文字)は各所の font-family で直接メイリオ指定。ここでは各ツールのタイトルを統一する (EMMUS 由来のツール本体でタイトルのみ app 独自の書体)。 Meiryo の無い Mac/iPhone/Android は Hiragino 系等にフォールバック。 */ .emmu-tool .et-h, .est-head .est-title, .emmu-gt .gt-title, .emmu-tr .tr-title, .emmu-tool .ebk-title { font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; }