/* ============================================================ コインランドリーかんぶん — サイト固有スタイル quark2 の base.html.twig は custom.css を最後（priority 80）に 読み込むので、ここでの :root 再宣言が theme.css と の インライン accent 定義の両方に勝つ。!important は不要。 ============================================================ */ /* ---------- 配色：明るく清潔感のあるアクアブルー ---------- */ :root, :root[data-theme="light"] { --q2-accent: #0ea5b7; --q2-accent-contrast: #ffffff; --q2-link: #0b8fa0; --q2-focus-ring: rgba(14, 165, 183, 0.45); --q2-bg: #f2f9fb; --q2-bg-elev: #ffffff; --q2-bg-muted: #e4f3f6; --q2-bg-inverse: #0d2027; --q2-text: #22333a; --q2-text-strong: #0d2027; --q2-text-muted: #64808a; --q2-text-inverse: #ffffff; --q2-border-ring: rgba(13, 90, 102, 0.12); --q2-border-strong: rgba(13, 90, 102, 0.2); --q2-divider: rgba(13, 90, 102, 0.1); --q2-nav-bg: rgba(255, 255, 255, 0.86); --q2-nav-border: rgba(13, 90, 102, 0.12); /* サイト固有 */ --kb-open: #0ea5b7; --kb-busy: #94a9b1; --kb-warn: #e08a1e; } :root[data-theme="dark"] { --q2-accent: #3fc7d8; --q2-accent-contrast: #06232a; --q2-link: #5ed3e2; --q2-focus-ring: rgba(63, 199, 216, 0.45); --q2-bg: #07171c; --q2-bg-elev: #10262d; --q2-bg-muted: #17323b; --q2-text: #e6f1f3; --q2-text-strong: #ffffff; --q2-text-muted: #93aeb6; --q2-border-ring: rgba(255, 255, 255, 0.09); --q2-border-strong: rgba(255, 255, 255, 0.16); --q2-divider: rgba(255, 255, 255, 0.09); --q2-nav-bg: rgba(7, 23, 28, 0.86); --q2-nav-border: rgba(255, 255, 255, 0.09); --kb-open: #3fc7d8; --kb-busy: #6b8892; --kb-warn: #f0a63c; } /* 日本語は Inter に字形が無いため OS のゴシックへフォールバックさせる */ :root { --pico-font-family-sans-serif: "Inter", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif; --pico-font-family-display: "Cal Sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif; } /* 日本語は行長が詰まりやすいので少しゆとりを持たせる */ body { line-height: 1.85; } /* 禁則の都合で単語途中改行は避ける */ h1, h2, h3, h4, h5, h6 { line-break: strict; overflow-wrap: anywhere; } /* ---------- 見出しのマーク ---------- quark2 は h2 の上に黒い横棒を出すが、見出しの印というより ただの線に見えてしまうので、行頭に置くアイコンへ差し替える。 インラインなので縦の余白を増やさない。 フッター・法的表示・店舗一覧の県見出しなど、独自の飾りを持つ見出しは それぞれの場所で content: none にしてある。 */ h2::before { content: '\f0da'; /* Font Awesome: caret-right（右向きの三角） */ font-family: 'Font Awesome 7 Free', 'Font Awesome 6 Free'; font-weight: 900; display: inline-block; width: auto; height: auto; margin: 0 0.45em 0 0; background: none; border-radius: 0; color: var(--q2-accent); font-size: 0.78em; line-height: 1; vertical-align: 0.1em; opacity: 1; } /* 本文で h1 のすぐ下に来る h2 を、親テーマはサブタイトル扱いにして 詰めてアクセント色にするが、うちの原稿では節の見出しなので、 ほかの h2 と同じ見え方に戻す。トップのヒーローの副題はそのまま。 */ #body-wrapper .content-item h1 + h2 { margin-top: 2.2rem; color: var(--q2-text-strong); } #body-wrapper .content-item h1 + h2::before { display: inline-block; } /* 横スクロールの発生を防ぐ最終防衛線 */ html, body { overflow-x: hidden; } img { max-width: 100%; height: auto; } /* ---------- ロゴ ---------- */ .kb-brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--q2-text-strong); font-weight: 700; } .kb-brand:hover { color: var(--q2-accent); } .kb-brand__mark { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none; border-radius: var(--q2-radius-sm); background: var(--q2-accent); color: var(--q2-accent-contrast); font-size: 0.95rem; } .kb-brand__text { font-family: var(--pico-font-family-display); font-size: 1.15rem; letter-spacing: 0.01em; white-space: nowrap; } @media (max-width: 400px) { .kb-brand__text { font-size: 1rem; } } /* ---------- 共通パーツ ---------- */ .kb-lead { font-size: clamp(1rem, 2.4vw, 1.15rem); color: var(--q2-text-muted); max-width: 42em; } .kb-section-title { text-align: center; margin-bottom: 0.5rem; } .kb-section-title + .kb-lead { margin-inline: auto; text-align: center; margin-bottom: 2.5rem; } .kb-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; } .kb-actions.center { justify-content: center; } /* 状態チップ（営業中／稼働状況などで共用） */ .kb-chip { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.2em 0.7em; border-radius: var(--q2-radius-pill); font-size: 0.8125rem; font-weight: 600; line-height: 1.6; white-space: nowrap; } .kb-chip-open { background: color-mix(in oklab, var(--kb-open) 16%, transparent); color: color-mix(in oklab, var(--kb-open) 78%, var(--q2-text-strong)); } .kb-chip-busy { background: var(--q2-bg-muted); color: var(--q2-text-muted); } .kb-chip-warn { background: color-mix(in oklab, var(--kb-warn) 18%, transparent); color: color-mix(in oklab, var(--kb-warn) 72%, var(--q2-text-strong)); } /* 要確認マーカー（納品前に消す箇所を目立たせる） */ .kb-todo, mark.kb-todo { background: color-mix(in oklab, var(--kb-warn) 22%, transparent); color: inherit; padding: 0.1em 0.35em; border-radius: var(--q2-radius-xs); } /* ---------- 使い方：ステップ ---------- ページのフロントマターに body_classes: kb-guide を入れると、 本文の一番外側の番号付きリストが手順カードとして表示される。 編集者は普通の Markdown の「1. 」だけ書けばよい。 */ .kb-steps, .kb-guide #body-wrapper .content-item > ol { counter-reset: kb-step; list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; } .kb-steps > li, .kb-guide #body-wrapper .content-item > ol > li { counter-increment: kb-step; position: relative; background: var(--q2-bg-elev); border: 1px solid var(--q2-border-ring); border-radius: var(--q2-radius-md); padding: 1.25rem 1.25rem 1.25rem 4rem; box-shadow: var(--q2-shadow-card); } .kb-steps > li::before, .kb-guide #body-wrapper .content-item > ol > li::before { content: counter(kb-step); position: absolute; left: 1.25rem; top: 1.25rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--q2-accent); color: var(--q2-accent-contrast); font-weight: 700; font-size: 0.95rem; line-height: 1; } .kb-steps > li > :first-child, .kb-guide #body-wrapper .content-item > ol > li > :first-child { margin-top: 0; } .kb-steps > li > :last-child, .kb-guide #body-wrapper .content-item > ol > li > :last-child { margin-bottom: 0; } .kb-steps h3, .kb-steps h4, .kb-guide #body-wrapper .content-item > ol > li strong:first-child { font-size: 1.0625rem; margin-bottom: 0.35rem; } /* 手順カードの1行目（**強調**）を見出しらしく見せる */ .kb-guide #body-wrapper .content-item > ol > li > p:first-child > strong:only-child { display: block; color: var(--q2-text-strong); font-size: 1.0625rem; margin-bottom: 0.35rem; } /* ---------- ICカード特典パネル ---------- 元は画像（laundry_otoku_03.svg）だった内容を、画像を使わずに組んだもの。 文字が拡大でぼやけず、読み上げにも乗り、文言も管理画面から直せる。 元画像はマゼンタ基調だが、サイトの配色に合わせてアクア＋ゴールドにしている。 */ .kb-otoku { --kb-gold: #e8a900; margin: 2.5rem 0; padding: clamp(1.25rem, 4vw, 2rem); border-radius: var(--q2-radius-lg); border: 2px solid var(--q2-accent); background: radial-gradient( ellipse 70% 100% at 50% 0%, color-mix(in oklab, var(--q2-accent) 10%, transparent), transparent 70% ), var(--q2-bg-elev); } .kb-otoku__eyebrow { margin: 0; text-align: center; font-size: 0.95rem; font-weight: 600; color: var(--q2-text-muted); } .kb-otoku__eyebrow em { font-style: normal; color: var(--q2-accent); border-bottom: 2px solid var(--q2-accent); padding-bottom: 0.05em; } .kb-otoku__title { margin: 0.5rem 0 0; text-align: center; font-size: clamp(1.4rem, 5vw, 2rem); display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; } /* quark2 の見出し装飾ダッシュはここでは邪魔 */ .kb-otoku__title::before, .kb-otoku__head::before { content: none; } .kb-otoku__title b { color: var(--q2-accent); } .kb-otoku__mark { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--q2-accent); color: var(--q2-accent-contrast); font-size: 0.62em; } .kb-otoku__lead { margin: 1rem auto 0; max-width: 40em; text-align: center; font-size: 0.9375rem; line-height: 1.85; color: var(--q2-text-muted); } .kb-otoku__lead b { color: var(--q2-accent); } .kb-otoku__list { list-style: none; counter-reset: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .kb-otoku__item { margin: 0; padding: 1rem 1.1rem 1.15rem; border-radius: var(--q2-radius-md); background: var(--q2-bg-muted); display: flex; flex-direction: column; gap: 0.6rem; } .kb-otoku__no { margin: 0; display: inline-flex; align-items: center; gap: 0.4em; align-self: flex-start; padding: 0.2em 0.75em; border-radius: var(--q2-radius-pill); background: var(--q2-accent); color: var(--q2-accent-contrast); font-size: 0.8125rem; font-weight: 700; } .kb-otoku__no span { display: grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--q2-accent-contrast); color: var(--q2-accent); font-size: 0.9em; line-height: 1; } /* 元画像の「お札 → チャージ → コイン」の流れを図形で表す */ .kb-otoku__flow { margin: 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .kb-otoku__chip { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.35em 0.75em; border-radius: var(--q2-radius-sm); background: var(--q2-bg-elev); border: 1px solid var(--q2-border-ring); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; } .kb-otoku__chip i { color: var(--q2-text-muted); } .kb-otoku__chip--accent { border-color: var(--q2-accent); color: var(--q2-accent); } .kb-otoku__chip--accent i { color: var(--q2-accent); } .kb-otoku__arrow { font-size: 0.7rem; color: var(--q2-text-muted); flex: none; } .kb-otoku__coin { display: inline-flex; align-items: baseline; justify-content: center; gap: 0.1em; width: 3.4em; height: 3.4em; flex: none; border-radius: 50%; background: var(--kb-gold); border: 2px solid color-mix(in oklab, var(--kb-gold) 70%, #7a5a00); color: #4a3300; font-weight: 800; font-size: 0.95rem; line-height: 3.4; white-space: nowrap; } .kb-otoku__coin small { font-size: 0.72em; } .kb-otoku__coin--up { line-height: 1; align-items: center; gap: 0.15em; } .kb-otoku__head { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.55; color: var(--q2-text-strong); } .kb-otoku__desc { margin: 0; font-size: 0.875rem; line-height: 1.75; color: var(--q2-text-muted); } .kb-otoku__desc strong { color: var(--q2-accent); font-size: 1.05em; } /* ---------- 手順動画（1080×1080 の正方形・HLS） ---------- data-src が空のあいだはプレースホルダーを出し、URL を入れると video.js が再生できる状態に切り替える。 */ .kb-video { margin: 2rem 0; max-width: 480px; } .kb-video__frame { position: relative; aspect-ratio: 1 / 1; border-radius: var(--q2-radius-md); overflow: hidden; background: var(--q2-bg-muted); border: 1px solid var(--q2-border-ring); } .kb-video__player { position: absolute; inset: 0; width: 100%; height: 100%; display: none; background: #000; object-fit: contain; } .kb-video.is-ready .kb-video__player { display: block; } .kb-video.is-ready .kb-video__placeholder { display: none; } /* 未設定・再生不可のときの表示 */ .kb-video__placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.5rem; padding: 1.5rem; text-align: center; color: var(--q2-text-muted); border: 2px dashed var(--q2-border-strong); border-radius: var(--q2-radius-md); } .kb-video__placeholder i { font-size: 2.25rem; color: color-mix(in oklab, var(--q2-accent) 45%, var(--q2-text-muted)); } .kb-video__placeholder-title { font-weight: 700; font-size: 0.95rem; color: var(--q2-text); } .kb-video__placeholder-note { font-size: 0.78rem; font-variant-numeric: tabular-nums; } .kb-video__caption { margin-top: 0.6rem; font-size: 0.8125rem; color: var(--q2-text-muted); line-height: 1.7; } .kb-video.is-error .kb-video__placeholder i { color: var(--kb-warn); } /* ---------- 店舗の立地・併設施設バッジ ---------- */ .kb-facilities { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; } .kb-facility { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.22em 0.7em; border-radius: var(--q2-radius-pill); font-size: 0.8125rem; font-weight: 600; line-height: 1.6; background: var(--q2-bg-muted); color: var(--q2-text-muted); } .kb-facility i { font-size: 0.9em; color: var(--q2-accent); } /* 立地の性格が一目で分かるよう、種類ごとに色を変える */ .kb-facility--mall { background: color-mix(in oklab, #7c6bd6 14%, transparent); color: color-mix(in oklab, #7c6bd6 72%, var(--q2-text-strong)); } .kb-facility--mall i { color: #7c6bd6; } .kb-facility--homecenter { background: color-mix(in oklab, var(--q2-accent) 14%, transparent); color: color-mix(in oklab, var(--q2-accent) 76%, var(--q2-text-strong)); } .kb-facility--homecenter i { color: var(--q2-accent); } .kb-facility--ss { background: color-mix(in oklab, var(--kb-warn) 16%, transparent); color: color-mix(in oklab, var(--kb-warn) 72%, var(--q2-text-strong)); } .kb-facility--ss i { color: var(--kb-warn); } .kb-facility--solo i { color: var(--q2-text-muted); } /* 所在地の県。立地バッジとは性格が違うので、塗らず枠線だけにして区別する */ .kb-facility--pref { background: transparent; border: 1px solid var(--q2-border-strong); color: var(--q2-text-strong); padding-block: calc(0.22em - 1px); } .kb-facility--pref i { color: var(--q2-text-muted); } .kb-facilities--compact .kb-facility--pref { padding-block: calc(0.15em - 1px); } .kb-facilities--compact { margin-top: 0; gap: 0.3rem; } .kb-facilities--compact .kb-facility { font-size: 0.75rem; padding: 0.15em 0.6em; } /* ---------- 店舗一覧 ---------- */ /* 県ごとのまとまり。店舗が増えても、住所の県が変われば見出しが自動で増える。 */ .kb-store-group + .kb-store-group { margin-top: 2.75rem; } .kb-store-group__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; margin: 2rem 0 0; font-size: 1.25rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--q2-accent); } .kb-store-group__title::before { content: none; } .kb-store-group__count { font-size: 0.8125rem; font-weight: 500; color: var(--q2-text-muted); } /* 見出しが上に付くぶん、カードとの間は詰める */ .kb-store-group .kb-store-grid { margin-top: 1.25rem; } .kb-store-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); margin-top: 2rem; } .kb-store-card { display: flex; flex-direction: column; background: var(--q2-bg-elev); border: 1px solid var(--q2-border-ring); border-radius: var(--q2-radius-md); overflow: hidden; box-shadow: var(--q2-shadow-card); transition: box-shadow 0.2s ease, transform 0.2s ease; } .kb-store-card:hover, .kb-store-card:focus-within { box-shadow: var(--q2-shadow-raised); transform: translateY(-2px); } .kb-store-card__media { aspect-ratio: 4 / 3; background: var(--q2-bg-muted); overflow: hidden; } .kb-store-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .kb-store-card__media--empty { display: grid; place-items: center; color: var(--q2-text-muted); font-size: 2rem; } .kb-store-card__body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .kb-store-card__name { margin: 0; font-size: 1.15rem; font-weight: 700; } /* quark2 が見出しの前に出す装飾ダッシュはカード内では邪魔なので消す */ .kb-store-card__name::before, .ls-panel__title::before { content: none; } .kb-store-card__name a { text-decoration: none; color: var(--q2-text-strong); } .kb-store-card__name a:hover { color: var(--q2-link); } .kb-store-card__meta { margin: 0; font-size: 0.9rem; color: var(--q2-text-muted); line-height: 1.7; display: flex; gap: 0.5em; align-items: baseline; } .kb-store-card__meta i { color: var(--q2-accent); width: 1em; flex: none; } .kb-store-card__telnote { font-size: 0.8125rem; color: var(--q2-text-muted); } .kb-store-card__foot { margin-top: auto; padding-top: 0.75rem; } /* ---------- 店舗一覧：スマホはカードをやめて詰まったリストにする ---------- 写真は情報量のわりに縦を食いすぎるので、640px 未満では出さない。 */ @media (max-width: 640px) { .kb-store-grid { display: block; margin-top: 1.5rem; border: 1px solid var(--q2-border-ring); border-radius: var(--q2-radius-md); background: var(--q2-bg-elev); overflow: hidden; box-shadow: var(--q2-shadow-card); } .kb-store-card { display: block; border: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--q2-divider); } .kb-store-card:last-child { border-bottom: 0; } .kb-store-card:hover, .kb-store-card:focus-within { box-shadow: none; transform: none; background: var(--q2-bg-muted); } .kb-store-card__media { display: none; } .kb-store-card__body { padding: 0.9rem 1rem; gap: 0.3rem; } .kb-store-card__name { font-size: 1.05rem; } /* リストでは行の左端をそろえたいのでアイコンの幅を固定する */ .kb-store-card__meta { font-size: 0.85rem; line-height: 1.6; } .kb-store-card__meta i { width: 1.1em; text-align: center; } /* 行全体がリンクとして機能するので、末尾のボタンは省く */ .kb-store-card__foot { display: none; } /* 店舗名を行全体まで広げてタップしやすくする */ .kb-store-card__name a::after { content: ''; position: absolute; inset: 0; } .kb-store-card { position: relative; } /* 電話リンクは行リンクより手前に置いて個別にタップできるようにする */ .kb-store-card__meta a[href^='tel:'] { position: relative; z-index: 1; } /* 行の右端に「>」を出して、押せることを分かるようにする */ .kb-store-card__body::after { content: '\f054'; font-family: 'Font Awesome 7 Free', 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 1rem; top: 1rem; font-size: 0.8rem; color: var(--q2-text-muted); } } /* ---------- 店舗ページ ---------- */ /* 店舗ページは地図と情報を横並びにするため content-item の白カードを使わず、 ここで独自に読みやすい幅へ制限する。 */ .kb-store { max-width: 1060px; margin-inline: auto; } .kb-store > h1 { margin-top: 0; } /* 本文は行長を抑えて読みやすくする */ .kb-store-body { max-width: 46em; margin-top: 2.5rem; } /* 元写真は横470px。拡大するとぼやけるので、幅を実寸以下に抑えて くっきり見せる（ページ幅いっぱいには広げない）。 */ .kb-store-hero { border-radius: var(--q2-radius-md); overflow: hidden; background: var(--q2-bg-muted); margin-bottom: 2rem; max-width: 470px; box-shadow: var(--q2-shadow-card); } .kb-store-hero img { width: 100%; height: auto; display: block; } /* 基本情報は行長を抑えて読みやすくする（地図の埋め込みは置かない） */ .kb-store-info { max-width: 40rem; } .kb-info { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.1rem 1rem; align-items: baseline; } .kb-info dt { font-weight: 600; color: var(--q2-text-muted); font-size: 0.875rem; padding-block: 0.55rem; white-space: nowrap; } .kb-info dd { margin: 0; padding-block: 0.55rem; border-bottom: 1px solid var(--q2-divider); min-width: 0; overflow-wrap: anywhere; } /* 電話番号に続けて出す「どこにつながるか・受付時間」。 行を増やさず、同じ行に括弧書きで添える。 */ .kb-info__note { font-size: 0.8125rem; color: var(--q2-text-muted); margin-left: 0.15em; } .kb-info dt + dd:last-child, .kb-info dd:last-of-type { border-bottom: 0; } @media (max-width: 480px) { .kb-info { grid-template-columns: minmax(0, 1fr); gap: 0; } .kb-info dt { padding-bottom: 0; } .kb-info dd { padding-top: 0.15rem; padding-bottom: 0.75rem; } } /* 本文中の補足ボックス（機材ページの注意書きなど） */ .kb-note { margin: 1.25rem 0; padding: 0.9rem 1.1rem; border-left: 3px solid var(--q2-accent); border-radius: 0 var(--q2-radius-sm) var(--q2-radius-sm) 0; background: var(--q2-bg-muted); font-size: 0.9rem; line-height: 1.8; } .kb-note > :first-child { margin-top: 0; } .kb-note > :last-child { margin-bottom: 0; } /* ---------- 機材紹介 ---------- */ .kb-equipment { max-width: 900px; margin-inline: auto; } .kb-equipment > h1 { margin-top: 0; } .kb-eq-grid { display: grid; gap: 0.9rem; margin-top: 2rem; } @media (min-width: 720px) { .kb-eq-grid { grid-template-columns: 1fr 1fr; } } .kb-eq-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 1rem; padding: 1.1rem 1.15rem; border: 1px solid var(--q2-border-ring); border-radius: var(--q2-radius-md); background: var(--q2-bg-elev); box-shadow: var(--q2-shadow-card); text-decoration: none; color: inherit; transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } .kb-eq-card:hover, .kb-eq-card:focus-visible { box-shadow: var(--q2-shadow-raised); border-color: var(--q2-accent); transform: translateY(-2px); } .kb-eq-card__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--q2-radius-md); background: color-mix(in oklab, var(--q2-accent) 12%, transparent); color: var(--q2-accent); font-size: 1.2rem; } .kb-eq-card__body { display: grid; gap: 0.2rem; min-width: 0; } .kb-eq-card__name { font-weight: 700; font-size: 1.05rem; color: var(--q2-text-strong); line-height: 1.4; } .kb-eq-card__cap { font-size: 0.8125rem; font-weight: 600; color: var(--q2-accent); } .kb-eq-card__sum { font-size: 0.875rem; color: var(--q2-text-muted); line-height: 1.6; } .kb-eq-card__where { font-size: 0.78rem; color: var(--q2-text-muted); margin-top: 0.15rem; } .kb-eq-card__where i { margin-right: 0.35em; } .kb-eq-card__chevron { color: var(--q2-text-muted); font-size: 0.8rem; } /* ---------- 機材の個別ページ ---------- */ .kb-machine__back { margin: 0 0 1.25rem; font-size: 0.875rem; } .kb-machine__back a { text-decoration: none; color: var(--q2-text-muted); } .kb-machine__back a:hover { color: var(--q2-link); } .kb-machine__back i { margin-right: 0.4em; } .kb-machine__head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .kb-machine__icon { display: grid; place-items: center; width: 3.75rem; height: 3.75rem; flex: none; border-radius: var(--q2-radius-md); background: color-mix(in oklab, var(--q2-accent) 12%, transparent); color: var(--q2-accent); font-size: 1.5rem; } .kb-machine__headtext { min-width: 0; flex: 1 1 16rem; } .kb-machine__headtext h1 { margin: 0; font-size: clamp(1.5rem, 4.5vw, 2rem); } .kb-machine__headtext h1::before { content: none; } .kb-machine__summary { margin: 0.35rem 0 0; color: var(--q2-text-muted); } /* 機材写真。photo.webp は 1200×800px の差し替え用ダミー。 */ .kb-machine__photo { margin: 1.75rem 0 0; border-radius: var(--q2-radius-md); overflow: hidden; background: var(--q2-bg-muted); box-shadow: var(--q2-shadow-card); } .kb-machine__photo img { width: 100%; height: auto; display: block; } .kb-machine__spec { margin-top: 1.75rem; padding: 0.25rem 1.15rem; border: 1px solid var(--q2-border-ring); border-radius: var(--q2-radius-md); background: var(--q2-bg-muted); } .kb-machine__models { font-family: var(--pico-font-family-monospace, monospace); font-size: 0.9em; } .kb-machine__body { margin-top: 2.5rem; } .kb-machine__stores { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } /* Blades が li に list-style: square を直接あてるため、ul 側の list-style: none だけでは勝てない（継承ではなく上書きになるため）。 footer のバレット消しと同じ理由・同じ直し方。 */ .kb-machine__stores li { list-style: none; } .kb-machine__stores li::marker { content: none; } .kb-machine__stores a { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.35em 0.85em; border-radius: var(--q2-radius-pill); border: 1px solid var(--q2-border-ring); background: var(--q2-bg-elev); font-size: 0.875rem; font-weight: 600; text-decoration: none; color: var(--q2-text-strong); } .kb-machine__stores a:hover { border-color: var(--q2-accent); color: var(--q2-accent); } .kb-machine__stores i { color: var(--q2-accent); font-size: 0.85em; } /* 容量の目安表はスマホで枠内スクロールさせ、ページ自体は横に伸ばさない */ .kb-equipment table { display: block; overflow-x: auto; max-width: 100%; white-space: nowrap; } @media (min-width: 640px) { .kb-equipment table { display: table; white-space: normal; } } /* ---------- 法的表示 ---------- フロントマターに body_classes: kb-legal を入れると、各項目の見出しに アクセント色の下線がつき、表示項目の区切りが読み取りやすくなる。 */ .kb-legal #body-wrapper .content-item h2 { font-size: 1.05rem; margin-top: 2.25rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--q2-accent); } .kb-legal #body-wrapper .content-item h2::before { content: none; } .kb-legal #body-wrapper .content-item h2 + * { margin-top: 0.85rem; } .kb-legal #body-wrapper .content-item { font-size: 0.95rem; } /* ---------- モジュラー：ヒーロー ---------- */ /* 背景画像が無いトップのヒーローでも読みやすい淡いグラデーションを敷く */ .modular-hero:not([style*="background-image"]) { background: radial-gradient( ellipse 80% 60% at 50% 0%, color-mix(in oklab, var(--q2-accent) 16%, transparent), transparent 70% ), var(--q2-bg); } .modular-hero h1 { overflow-wrap: anywhere; } /* ---------- モジュラー：テキスト ---------- */ /* 画像のないテキストモジュールは 1200px いっぱいに広がって 一行が長くなりすぎるため、読みやすい幅に抑える。 */ .modular-text .columns > .column:only-child { max-width: 46em; } /* ---------- フッター ---------- */ /* Blades CSS が p / li に --pico-color を直接あてるため、 #footer への color 指定だけでは継承されない。子要素にも明示する。 */ #footer { background: var(--q2-bg-inverse); color: var(--q2-text-inverse); border-top: 0; text-align: left; } #footer p, #footer li, #footer h2 { color: var(--q2-text-inverse); } #footer a { color: color-mix(in oklab, var(--q2-accent) 55%, #ffffff); } #footer a:hover { color: #ffffff; } .kb-footer-grid { display: grid; gap: 1.75rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .kb-footer-grid h2 { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; margin: 0 0 0.7rem; opacity: 0.62; } /* quark2 は見出しの前に装飾のダッシュを出すが、フッターでは邪魔なので消す */ .kb-footer-grid h2::before { content: none; } .kb-footer-grid p { margin: 0; font-size: 0.875rem; line-height: 1.8; opacity: 0.78; } /* Blades のリスト装飾を打ち消すため #footer 側で指定して詳細度を上げる */ #footer .kb-footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-size: 0.9rem; } #footer .kb-footer-grid li { margin: 0; padding: 0; } #footer .kb-footer-grid li::marker { content: none; } .kb-footer-contact { display: grid; gap: 0.2rem; } .kb-footer-contact__dept { font-size: 0.875rem; opacity: 0.78; } #footer .kb-footer-contact__tel { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; width: fit-content; } .kb-footer-contact__tel i { font-size: 0.8em; } .kb-footer-contact__hours { font-size: 0.8125rem; opacity: 0.7; } .kb-footer-legal { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.14); } .kb-footer-legal p { margin: 0.25rem 0; font-size: 0.8125rem; opacity: 0.6; }