@charset "utf-8"; /* ============================================================================= JEMS 環境マネジメント事業サイト｜共通デザインシステム ----------------------------------------------------------------------------- Concept : 複雑な環境課題を、理解し、判断し、行動できる情報へ。 Theme : 1つの共通システム＋3テーマ（data-theme = jems / waste / circular）テーマは色・ラベル・図解モチーフのみを切り替える。レイアウト／グリッド／タイポ／余白／角丸／線／影／構造は全テーマ共通。 Usage : あるいは任意のラッパー要素に data-theme。 CSS変数は継承するため、部分適用も可能。 ========================================================================== */ /* ============================================================================= 1. TOKENS ========================================================================== */ :root { /* --- Theme palette : JEMS全体（グリーン / 既存コーポレートサイト #238700 由来） --- */ --jems-50:#f0f7ee; --jems-100:#dbeed6; --jems-200:#b6dcab; --jems-500:#238700; --jems-600:#1d7300; --jems-700:#186000; --jems-900:#0e3a06; /* 2026-09-06：テーマカラー方針の変更により、廃棄物マネジメントと資源循環マネジメントのパレットを入れ替えた。変数名は色ではなく事業領域を指すため、名前は据え置き値のみ交換。 */ /* --- Theme palette : 廃棄物マネジメント（Circular Mint） --- 2026-09-06のカンプ更新にあわせ、汎用パレット（--t-* 経由でフォーカスリング等が参照）も --fg-waste-* と同じエレベーションに揃えた。2系統で色がずれないようにするため */ --waste-50:#ebfbf4; --waste-100:#d3f9e9; --waste-200:#96f6d2; --waste-500:#33b890; --waste-600:#269f7b; --waste-700:#1d8466; --waste-900:#145a45; /* --- Theme palette : 資源循環マネジメント（青寄りの青緑 / public-ict の #053c58・#08add6 由来） --- */ --circ-50:#eef4fa; --circ-100:#d7e6f4; --circ-200:#b0cde6; --circ-500:#1a6ea8; --circ-600:#17679b; --circ-700:#13547f; --circ-900:#0b3049; /* --- CV color : 全テーマ共通。問い合わせ・資料請求の強いCTAだけに使う --- */ --cv-50:#fdf3e6; --cv-100:#fbe3c4; --cv-200:#f2c88d; --cv-500:#c86f0c; --cv-600:#a85c0b; --cv-700:#8a4a07; --cv-900:#4d2903; /* --- Figma由来トークン（JEMS様_環境マネサイトリニューアル / ヘッダー・FV） --- デザインファイルの変数名に対応。ページ側で16進を直書きしない。 */ --fg-charcoal:#354341; /* JEMS/Color/Charcoal・Text/Primary */ --fg-canvas:#ffffff; /* JEMS/Color/Canvas */ --fg-gray:#f1f5f9; /* JEMS/Color/gray（FV・アクティブタブ背景） */ --fg-pale-green:#f2f8f0; /* JEMS/Color/Pale Green */ --fg-mantis-500:#41af38; /* JEMS/Color/Mantis/500 */ /* 文字に使う緑。Mantis 400/500 は白地でコントラスト比2.1〜2.8止まりで読みづらいので、テキスト用に濃い段を1つ持つ。白地 5.6:1／淡青の帯（--fg-closing-bg）でも 4.8:1 で、いずれもWCAG AAを満たす */ --fg-mantis-600:#2c7724; /* JEMS/Color/Mantis/600（緑の文字・アイコン）。白と 5.57:1 */ /* 廃棄物マネジメントのキーカラー。2026-09-06のテーマ入替で Picton Blue → Circular Mint へ差し替え、同日のカンプ更新でエレベーションを再調整した（低濃度側の蛍光感を抑え、高濃度側を沈ませすぎない）。 2026-09-13（0909CL ②「色の発光を抑える。視認性の向上。」）：ランプ全体を再調整。旧ランプは400段以下がsRGBで出せる彩度上限の89〜99%を占め、色域の縁に張り付いて蛍光的に見えていた。色相を168°へ固定してぶれ（旧164〜180°）を止め、明度を知覚的に等間隔へ組み直したうえで、彩度ではなく明度を下げて発光を抑えている（彩度で抑えると中間段が白茶けるため）。あわせて明度がほぼ同じで潰れていた 300/400を分離した。正本：Figma「Color / Circular Mint Elevation」546:187 ／調整案 764:2（採用＝案2 明度で沈める） */ --fg-waste-600:#269f7b; /* JEMS/Circular Mint/600（旧 #06B680） */ --fg-waste-200:#96f6d2; /* JEMS/Circular Mint/200（旧 #AEFFE5） */ --fg-nav-bg:#fafbfa; /* プライマリナビ背景 */ --fg-nav-line:#e7ecef; /* タブ罫線 */ --fg-band-line:#ededed; /* 実績帯の罫線 */ --fg-heading:var(--fg-charcoal); /* FV見出し（黒系はCharcoalに統一） */ --fg-metric:var(--fg-charcoal); /* 実績帯の文字（同上） */ --fg-grad-from:#63c95a; /* green-gradation */ --fg-grad-to:#a1e79b; --fg-grad: linear-gradient(87.2deg, var(--fg-grad-from) 25.24%, var(--fg-grad-to) 112.81%); /* 廃棄物マネジメント側のFVボタン。テーマ入替でミントのグラデーションになる。 2026-09-09：カンプ調整（Figma 658:2629）で全体を1段濃く。 400→200 では白飛びして白文字とのコントラストが足りなかったため 500→400 へ。 */ --fg-waste-grad: linear-gradient(87.2deg, var(--fg-waste-500) 25.24%, var(--fg-waste-400) 112.81%); --fg-news-line:#e3e3e3; /* FVお知らせ帯の上下罫線 */ --fg-news-date:#838383; /* 同・日付 */ --fg-news-title:#3c4043; /* 同・見出し */ --fg-shadow-header:0 8px 14px rgba(0,0,0,.05); --fg-radius-tab:6px; /* ナビタブの上角丸（Figma指定） */ --fg-mantis-50:#f3fbf2; /* JEMS/Color/Mantis/50（サービスセクション背景） */ --fg-mantis-200:#c7efc3; /* JEMS/Color/Mantis/200（カルーセル非選択ドット・ローカルナビ罫線） */ --fg-mantis-300:#9ae194; /* JEMS/Color/Mantis/300（プライマリナビアクティブ罫線） */ --fg-card-tint:#f9fcff; /* JEMS/Color/Surface/Card Tint（業種カードの地色） */ --fg-card-line:#dfe3e8; /* 同・枠線 */ --fg-closing-bg:#e7f0f9; /* JEMS/Color/Surface/Closing Band（S4締めブロックの地色・Figma 271:3186） */ /* S3-bカード帯の地色。スクロールで1枚目→2枚目にフェードする（Figma 221:1020 → 271:3277） */ --fg-svc-bg-waste:var(--fg-waste-300); /* 廃棄物管理支援（入替後：Circular Mint 300） */ --fg-svc-bg-circ:var(--fg-circ-300); /* 資源循環支援（入替後：Picton Blue 300）旧値 #4fdcb3 の直書きをやめ、テーマのランプに揃えた */ /* S8 CTAの地色。cta-gradation（Figma 215:80） 2026-09-13（0909CL ⑰「背景色の調整してほしい」）：旧値（#82D47B → #63C95A）は白文字とのコントラストが 1.80:1／2.09:1 しか出ず、見出し・リード・注記のいずれも WCAG AA に届いていなかった。帯には注記（12px）まで乗るので基準は本文と同じ 4.5:1。白文字で 4.5:1 を満たす緑の明度上限は 55% で、ここが動かせない下限になる。 Mantis 600/700（色相142°）まで沈めると渋くなりトンマナから外れたため、明度は上限いっぱいの55%に置いたまま、色相を 142°→150° へ振って青みを足し、彩度を少し落として抜け感を出している。JEMSグリーンと Circular Mint の中間にあたり、どちらの領域から来ても地続きに見える。Mantisランプ上の色ではないのでCTA専用で持つ。さらに明るくするには白文字をやめて濃い文字へ変える必要がある。体系：2テーマのCTA帯は「上端＝明度55%（白文字の上限）／下端＝明度49%」で共通。違うのは色相だけで、グリーンが150°、ミントが168°（--fg-waste-700 → 800）。 */ --fg-cta-grad-from:#1d8743; /* 白と 4.57:1（明度55%＝白文字が成立する上限） */ --fg-cta-grad-to:#187338; /* 白と 5.92:1（明度49%） */ /* 160deg：真下方向だと帯が平板なので、わずかに斜めにして光の当たりを作る */ --fg-cta-grad:linear-gradient(160deg, var(--fg-cta-grad-from) 0%, var(--fg-cta-grad-to) 100%); --fg-mantis-400:#63c95a; /* JEMS/Color/Mantis/400（選択ドット・実績数値） */ --fg-waste-300:#63e7bb; /* JEMS/Circular Mint/300（点線コネクタ・区切り／旧 #78F8D2） */ --fg-waste-400:#46d1a5; /* JEMS/Circular Mint/400（アクセント線・バー／旧 #3DEBB8） */ --fg-waste-500:#33b890; /* JEMS/Circular Mint/500（基準色・面／旧 #0FD99C）白地 2.50:1。文字には使えないので700/800を使うこと */ --fg-waste-50:#ebfbf4; /* JEMS/Circular Mint/50（最淡の面・タグの地／旧 #EDFFF9） */ --fg-waste-100:#d3f9e9; /* JEMS/Circular Mint/100（接続帯の地／旧 #D5FFF2 相当） */ /* 資源循環マネジメントのキーカラー。同じく入替で Circular Mint → Picton Blue */ --fg-circ-300:#7acbff; /* JEMS/Picton Blue/300（枠線） */ --fg-circ-400:#34b1fd; /* JEMS/Picton Blue/400（白地ボタンの枠線） */ --fg-circ-500:#0897ef; /* JEMS/Picton Blue/500（箇条書きドット） */ --fg-circ-600:#0078cc; /* JEMS/Picton Blue/600（白地ボタンの文字） */ --fg-circ-50:#f0f8ff; /* JEMS/Picton Blue/50（丸矢印の地） */ --fg-circ-100:#dff0ff; /* JEMS/Picton Blue/100（概念図パネルの枠・区切り） */ --fg-circ-200:#b8e2ff; /* JEMS/Picton Blue/200 */ --fg-circ-label:#1f8fd6; /* 資源循環カードのラベル（旧 #28bf93 のブルー相当） */ /* 濃い段。白文字を載せる面と、白地に置く文字に使う。ミントは同じ段数でもブルーより明るく、Circular Mint 500 に白を載せても 2.50:1 までしか出ない（2026-09-13の再調整で 1.8:1 から改善したがまだ不足）。明るい面と読める文字は同じ1段では両立しないので、面は500前後、文字と白文字ボタンはここから選ぶ。WCAG AA は 4.5:1、大きな文字は 3:1。 */ /* 2026-09-13：700は「白文字が成立する明度の上限」に固定した段（明度55%）。グリーン側のCTA帯の上端（--fg-cta-grad-from・色相150°）と同じ明度で、 2つのテーマは色相だけが違う同じ体系になる。ここを動かすと白文字が基準を割る。旧 #1E8768 は明度55.8%で 4.45:1 とわずかに基準未満だったため0.9pt沈めた */ --fg-waste-700:#1d8466; /* 白地の文字・白文字ボタンの面・CTA帯の上端。白と 4.62:1（AA） */ --fg-waste-800:#176f55; /* 淡色地の文字（企業名ピル）・CTA帯の下端。白と 6.10:1 */ --fg-waste-900:#145a45; /* 白と 8.15:1 */ --fg-waste-950:#0d4635; /* 最濃。白と 10.8:1 */ --fg-circ-700:#005fa5; /* 以下ブルー側の同じ段（対称に持たせる） */ --fg-circ-800:#045188; --fg-circ-900:#094371; --fg-radius-card:20px; /* カードの角丸 */ --fg-radius-block:40px; /* セクション上端の大きな角丸 */ --fg-shadow-card:24px 24px 90px rgba(182,220,171,.3); /* ニューモーフィック影（FV副ボタン・小カード共通） */ --fg-shadow-neu: -16px 16px 32px rgba(222,225,229,.2), 16px -16px 32px rgba(222,225,229,.2), -16px -16px 32px rgba(255,255,255,.9), 16px 16px 40px rgba(222,225,229,.9), inset 1px 1px 2px rgba(255,255,255,.3), inset -1px -1px 2px rgba(222,225,229,.5); /* --- Neutral（全テーマ共通） --- */ --ink:#354341; /* 見出し（JEMS/Color/Charcoal に統一） */ --ink-body:#354341; /* 本文（同上） */ --ink-muted:#64696e; /* 補足 */ --ink-disabled:#9aa0a6; /* 無効 */ --ink-invert:#ffffff; --surface:#ffffff; --surface-sub:#f5f7f8; /* グレー背景（表・注記） */ --surface-disabled:#eceff1; --line:#dfe3e6; /* 罫線 */ --line-strong:#c7ccd1; /* 強い罫線・区切り */ --line-input:#aeb4ba; /* 入力欄 */ /* --- Semantic（テーマカラーとは独立。状態表示にのみ使用） --- */ --ok:#157f3e; --ok-bg:#e8f5ec; --ok-ink:#0f6b33; --warn:#a06a00; --warn-bg:#fff4d6; --warn-ink:#7a5100; --ng:#c0362c; --ng-bg:#fdecea; --ng-ink:#a02a22; --info:#4a5b6a; --info-bg:#eef1f4; --info-ink:#3b4c5c; /* --- Typography --- */ --font:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif; --font-num:"Helvetica Neue",Arial,"Noto Sans JP",sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* --- Layout : コンテナ幅 --------------------------------------------------- 役割ごとに使い分ける。ページ側に個別の数値を書かない。 .jw 通常コンテンツ 1200px .jw--wide 大型ビジュアル・カード一覧 1280px .jw--narrow 比較表・フォーム等 880px .jw--read 見出し＋本文などの文章領域 840px max-width は「左右paddingを含む外寸」で算出するため、 1440px 幅のとき .jw の左右には 80px（=(1440-1200-40*2)/2）の余白が残る。 */ --container-default:1200px; --container-wide:1280px; --container-form:880px; --container-text:840px; --page-padding-pc:40px; --page-padding-tab:32px; --page-padding-sp:20px; /* TOPのFVだけに使う広幅コンテナ（.jw--fv）。他セクションには使わない。上限を大きく取り、左右paddingで端の余白を確保する全幅寄りの設計。 paddingは1280px以下では通常と同じ40pxに揃え（FVが本文より狭くならないように）、以降は画面が広がるほど余白も広げる（最大80px）。 */ --container-fv:1600px; --page-padding-fv:clamp(40px, calc((100vw - 1280px) / 8 + 40px), 80px); /* 実効値（メディアクエリで切り替え／.jw--* で上書き） */ --container:var(--container-default); --page-padding:var(--page-padding-pc); /* 旧トークン（互換用エイリアス。新規実装では --container-* を使う） */ --w-max:var(--container-default); --w-narrow:var(--container-form); --w-read:var(--container-text); --gutter:var(--page-padding); --sec-gap:72px; /* セクション間隔（PC） */ --sec-gap-sp:48px; /* --- Spacing（4pxベース・7段） --- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; /* --- Radius（4段のみ） --- */ --r-sm:4px; --r-md:8px; --r-lg:12px; --r-full:999px; /* --- Border --- */ --bd:1px solid var(--line); --bd-strong:1px solid var(--line-strong); /* --- Shadow（2段のみ。既定はborderで、影は浮かせる要素だけ） --- */ --sh-1:0 1px 3px rgba(16,24,32,.06), 0 1px 2px rgba(16,24,32,.04); --sh-2:0 6px 20px rgba(16,24,32,.10); /* --- Icon --- */ --ico-sm:16px; --ico-md:20px; --ico-lg:24px; --ico-xl:40px; /* --- Motion --- */ --dur:.18s; --dur-slow:.3s; --ease:cubic-bezier(.2,.6,.3,1); /* --- Focus ring --- */ --focus:2px solid var(--t-700); --focus-offset:2px; } /* --- テーマ適用（既定は JEMS全体） ------------------------------------------ */ :root, [data-theme="jems"] { --t-50:var(--jems-50); --t-100:var(--jems-100); --t-200:var(--jems-200); --t-500:var(--jems-500); --t-600:var(--jems-600); --t-700:var(--jems-700); --t-900:var(--jems-900); --t-name:"JEMS環境マネジメント"; } [data-theme="waste"] { --t-50:var(--waste-50); --t-100:var(--waste-100); --t-200:var(--waste-200); --t-500:var(--waste-500); --t-600:var(--waste-600); --t-700:var(--waste-700); --t-900:var(--waste-900); --t-name:"廃棄物マネジメント"; } [data-theme="circular"] { --t-50:var(--circ-50); --t-100:var(--circ-100); --t-200:var(--circ-200); --t-500:var(--circ-500); --t-600:var(--circ-600); --t-700:var(--circ-700); --t-900:var(--circ-900); --t-name:"資源循環マネジメント"; } /* ============================================================================= 2. BASE ========================================================================== */ *,*::before,*::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } } body { margin:0; background:var(--surface); color:var(--ink-body); font-family:var(--font); font-size:16px; line-height:1.8; -webkit-font-smoothing:antialiased; overflow-wrap:break-word; } h1,h2,h3,h4,h5 { margin:0; font-weight:700; line-height:1.45; color:var(--ink); } p,ul,ol,dl,figure,table { margin:0; } ul,ol { padding:0; list-style:none; } img,svg { display:block; max-width:100%; } a { color:var(--t-700); text-decoration:underline; text-underline-offset:.18em; } a:hover { text-decoration:none; } button { font:inherit; color:inherit; } :focus-visible { outline:var(--focus); outline-offset:var(--focus-offset); border-radius:var(--r-sm); } [id] { scroll-margin-top:var(--header-h,80px); } /* ============================================================================= 3. LAYOUT ========================================================================== */ /* コンテナ：背景はセクション側で全幅に敷き、その内側に .jw を置く */ .jw { width:100%; max-width:calc(var(--container) + var(--page-padding) * 2); margin-inline:auto; padding-inline:var(--page-padding); } .jw--wide { --container:var(--container-wide); } .jw--narrow { --container:var(--container-form); } .jw--read { --container:var(--container-text); } /* TOP FV専用（PC以上でのみ広幅・広paddingに切り替える） */ @media (min-width:1024px) { .jw--fv { --container:var(--container-fv); --page-padding:var(--page-padding-fv); } } /* 全幅で敷いた帯の内側などで左右paddingを外す */ .jw--flush { --page-padding:0px; } .jsec { padding-block:var(--sec-gap); } .jsec--tint { background:var(--t-50); } .jsec--sub { background:var(--surface-sub); } .jgrid { display:grid; gap:var(--sp-5); } .jgrid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .jgrid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .jgrid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); } .jgrid--tight { gap:var(--sp-4); } .jstack > * + * { margin-top:var(--sp-4); } .jrow { display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; } .j2col { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--sp-7); align-items:start; } /* ============================================================================= 4. TYPOGRAPHY SCALE ========================================================================== */ .t-display { font-size:clamp(30px,4.2vw,44px); line-height:1.35; letter-spacing:.01em; color:var(--ink); font-weight:700; } .t-h1 { font-size:clamp(26px,3.2vw,34px); line-height:1.4; color:var(--ink); font-weight:700; } .t-h2 { font-size:clamp(21px,2.4vw,26px); line-height:1.45; color:var(--ink); font-weight:700; } .t-h3 { font-size:19px; line-height:1.5; color:var(--ink); font-weight:700; } .t-h4 { font-size:16px; line-height:1.6; color:var(--ink); font-weight:700; } .t-lead { font-size:17px; line-height:1.9; color:var(--ink-body); } .t-body { font-size:16px; line-height:1.9; color:var(--ink-body); } .t-small { font-size:14px; line-height:1.8; color:var(--ink-body); } .t-caption { font-size:13px; line-height:1.7; color:var(--ink-muted); } .t-num { font-family:var(--font-num); font-size:40px; font-weight:700; line-height:1.1; color:var(--t-700); letter-spacing:-.01em; } .t-num .u { font-size:.45em; margin-left:2px; } .t-btnlabel { font-size:15px; font-weight:700; line-height:1.4; } .t-taglabel { font-size:12px; font-weight:700; line-height:1.5; letter-spacing:.02em; } /* ============================================================================= 5. HEADINGS / LABELS ========================================================================== */ /* 領域ラベル：色に加えて「名称＋アイコン」で領域を示す（色依存の回避） */ .area-label { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; line-height:1.5; letter-spacing:.02em; color:var(--t-700); background:var(--t-100); border-radius:var(--r-sm); padding:4px 10px; } .area-label .ico { width:var(--ico-sm); height:var(--ico-sm); flex:none; } .area-label--solid { color:#fff; background:var(--t-600); } .area-label--line { background:transparent; border:1px solid var(--t-200); } /* セクション見出し：英字ラベル＋日本語見出し。英字は小さく従属させる文章領域なので、コンテナ幅とは別に読みやすい幅で止める */ .sec-head { margin-bottom:var(--sp-5); max-width:var(--container-text); } .sec-head--center { margin-inline:auto; text-align:center; } .sec-head__en { display:block; font-family:var(--font-num); font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--fg-mantis-600); margin-bottom:6px; text-transform:uppercase; } /* セクションH2は全て32px（SPは24px）に統一 */ .sec-head__title { font-size:32px; line-height:1.45; color:var(--ink); } .sec-head__lead { margin-top:var(--sp-3); font-size:16px; line-height:1.9; color:var(--ink-body); max-width:44em; } .sec-head--rule .sec-head__title { padding-bottom:var(--sp-3); border-bottom:2px solid var(--t-200); } /* サブセクション見出し：左の短い罫のみ。塗り面にしない */ .subsec { font-size:18px; line-height:1.5; color:var(--ink); padding-left:12px; border-left:4px solid var(--t-500); margin-bottom:var(--sp-4); } /* ページタイトル（下層ページヘッダー） */ .page-hero { background:var(--t-50); border-bottom:1px solid var(--t-200); padding-block:var(--sp-6) var(--sp-6); } .page-hero__label { margin-bottom:var(--sp-3); } .page-hero__title { font-size:clamp(24px,3vw,32px); line-height:1.4; color:var(--ink); } .page-hero__desc { margin-top:var(--sp-3); font-size:16px; line-height:1.9; color:var(--ink-body); max-width:42em; } .page-hero__meta { margin-top:var(--sp-4); display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); font-size:13px; color:var(--ink-muted); } /* ============================================================================= 6. BUTTONS ========================================================================== */ .jbtn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 24px; border-radius:var(--r-md); font-family:var(--font); font-size:15px; font-weight:700; line-height:1.4; text-align:center; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .jbtn .ico { width:var(--ico-sm); height:var(--ico-sm); flex:none; } .jbtn--primary { background:var(--t-600); color:#fff; } .jbtn--primary:hover { background:var(--t-700); } .jbtn--secondary { background:#fff; color:var(--t-700); border-color:var(--t-200); } .jbtn--secondary:hover { background:var(--t-50); border-color:var(--t-500); } .jbtn--ghost { background:transparent; color:var(--t-700); min-height:auto; padding:6px 2px; text-decoration:underline; } .jbtn--ghost:hover { text-decoration:none; } /* CVボタン：領域テーマから独立した共通CVカラー。角丸・高さ・書体は他と共通 */ .jbtn--cv { background:var(--cv-600); color:#fff; } .jbtn--cv:hover { background:var(--cv-700); } .jbtn--cv-outline { background:#fff; color:var(--cv-700); border-color:var(--cv-200); } .jbtn--cv-outline:hover { background:var(--cv-50); border-color:var(--cv-500); } .jbtn--lg { min-height:56px; padding:16px 32px; font-size:16px; } .jbtn--sm { min-height:40px; padding:8px 16px; font-size:14px; } .jbtn--block { display:flex; width:100%; } .jbtn[aria-disabled="true"], .jbtn:disabled { background:var(--surface-disabled); color:var(--ink-disabled); border-color:var(--line); cursor:not-allowed; } /* テキストリンク（ボタンと明確に区別する） */ .jlink { color:var(--t-700); font-size:15px; font-weight:700; text-decoration:underline; text-underline-offset:.2em; display:inline-flex; align-items:center; gap:6px; } .jlink:hover { text-decoration:none; } .jlink .ico { width:14px; height:14px; flex:none; } /* ============================================================================= 7. TAGS / BADGES ========================================================================== */ .jtag { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; line-height:1.5; letter-spacing:.02em; padding:4px 10px; border-radius:var(--r-sm); color:var(--t-700); background:var(--t-100); } .jtag--plain { color:var(--ink-body); background:var(--surface-sub); border:1px solid var(--line); font-weight:400; } .jtag--line { color:var(--t-700); background:transparent; border:1px solid var(--t-200); } .jtag-row { display:flex; flex-wrap:wrap; gap:6px; } /* 開催ステータス等：色＋文言の両方で状態を示す */ .jstatus { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:var(--r-sm); } .jstatus::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; } .jstatus--open { color:var(--ok-ink); background:var(--ok-bg); } .jstatus--soon { color:var(--warn-ink); background:var(--warn-bg); } .jstatus--closed { color:var(--ink-muted); background:var(--surface-sub); } .jstatus--note { color:var(--info-ink); background:var(--info-bg); } /* ============================================================================= 8. NAVIGATION ========================================================================== */ .jheader { background:#fff; border-bottom:1px solid var(--line); } .jheader__inner { display:flex; align-items:center; gap:var(--sp-5); min-height:64px; } .jbrand { display:inline-flex; align-items:baseline; gap:8px; text-decoration:none; color:var(--ink); flex:none; } .jbrand__mark { font-family:var(--font-num); font-size:22px; font-weight:700; letter-spacing:.06em; color:var(--jems-600); } .jbrand__sub { font-size:11px; color:var(--ink-muted); letter-spacing:.04em; } .jgnav { display:flex; gap:var(--sp-5); margin-left:auto; } .jgnav a { font-size:14px; font-weight:700; color:var(--ink-body); text-decoration:none; } .jgnav a:hover { color:var(--t-700); text-decoration:underline; } .jheader__cv { display:flex; gap:var(--sp-2); flex:none; } /* 事業領域ナビ：現在の領域を色＋下線＋aria-currentで示す */ .area-nav { display:flex; gap:var(--sp-5); border-bottom:1px solid var(--line); } .area-nav a { display:inline-flex; align-items:center; gap:6px; padding:12px 2px; font-size:14px; font-weight:700; color:var(--ink-muted); text-decoration:none; border-bottom:3px solid transparent; margin-bottom:-1px; } .area-nav a:hover { color:var(--ink); } .area-nav a[aria-current="page"] { color:var(--t-700); border-bottom-color:var(--t-600); } .area-nav .ico { width:var(--ico-sm); height:var(--ico-sm); } .jcrumb { font-size:13px; color:var(--ink-muted); display:flex; flex-wrap:wrap; gap:4px 8px; } .jcrumb a { color:var(--ink-muted); } .jcrumb .sep { color:var(--line-strong); } .jcrumb [aria-current="page"] { color:var(--ink-body); } /* ページ内アンカー */ .anchor-nav { display:flex; flex-wrap:wrap; gap:var(--sp-2); padding:var(--sp-4); background:var(--surface-sub); border-radius:var(--r-md); } .anchor-nav a { font-size:14px; font-weight:700; color:var(--t-700); text-decoration:none; padding:6px 12px; background:#fff; border:1px solid var(--line); border-radius:var(--r-full); } .anchor-nav a:hover { border-color:var(--t-500); } .jpager { display:flex; gap:6px; justify-content:center; align-items:center; } .jpager a, .jpager span { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:var(--r-md); font-size:14px; color:var(--ink-body); text-decoration:none; } .jpager a:hover { border-color:var(--t-500); background:var(--t-50); } .jpager [aria-current="page"] { background:var(--t-600); color:#fff; border-color:var(--t-600); font-weight:700; } .jpager .is-off { color:var(--ink-disabled); border-color:var(--line); } /* モバイルメニュー（構造見本） */ .jmobile-menu { border:var(--bd); border-radius:var(--r-lg); overflow:hidden; max-width:360px; background:#fff; } .jmobile-menu__bar { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); } .jmobile-menu__list li { border-bottom:1px solid var(--line); } .jmobile-menu__list a { display:flex; align-items:center; gap:8px; padding:14px 16px; font-size:15px; font-weight:700; color:var(--ink); text-decoration:none; } .jmobile-menu__list .sub a { padding-left:34px; font-weight:400; font-size:14px; color:var(--ink-body); } .jmobile-menu__cv { display:grid; gap:8px; padding:16px; background:var(--surface-sub); } /* ============================================================================= 9. CARDS ========================================================================== */ .jcard { background:#fff; border:var(--bd); border-radius:var(--r-lg); padding:var(--sp-5); } .jcard__title { font-size:17px; line-height:1.5; color:var(--ink); } .jcard__text { margin-top:var(--sp-2); font-size:14px; line-height:1.8; color:var(--ink-body); } .jcard__foot { margin-top:var(--sp-4); } .jcard--link { transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .jcard--link:hover { border-color:var(--t-500); box-shadow:var(--sh-1); } .jcard__thumb { aspect-ratio:16/9; background:var(--surface-sub); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; color:var(--ink-muted); font-size:12px; margin-bottom:var(--sp-3); border:1px solid var(--line); } /* 主要ソリューションカード：大・厚い・説明量が多い＝主導線 */ .sol-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--t-200); border-top:4px solid var(--t-600); border-radius:var(--r-lg); padding:var(--sp-5); } .sol-card__no { display:block; font-family:var(--font-num); font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--t-600); } .sol-card__title { margin-top:6px; font-size:20px; line-height:1.45; color:var(--ink); } .sol-card__text { margin-top:var(--sp-3); font-size:15px; line-height:1.9; color:var(--ink-body); } .sol-card__list { margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--line); display:grid; gap:8px; } .sol-card__list li { position:relative; padding-left:20px; font-size:14px; line-height:1.7; color:var(--ink-body); } .sol-card__list li::before { content:""; position:absolute; left:2px; top:.62em; width:8px; height:8px; border-radius:2px; background:var(--t-500); } .sol-card__foot { margin-top:auto; padding-top:var(--sp-5); } /* ピックアップカード：小・1行説明・横並び＝補助導線 */ .pickup-card { display:flex; align-items:center; gap:var(--sp-3); background:#fff; border:var(--bd); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); text-decoration:none; } .pickup-card:hover { border-color:var(--t-500); background:var(--t-50); } .pickup-card__ico { width:32px; height:32px; flex:none; color:var(--t-600); } .pickup-card__body { min-width:0; display:block; } .pickup-card__title { display:block; font-size:15px; font-weight:700; color:var(--ink); line-height:1.5; } .pickup-card__text { display:block; font-size:12px; color:var(--ink-muted); line-height:1.6; margin-top:2px; } .pickup-card__arrow { margin-left:auto; width:16px; height:16px; flex:none; color:var(--t-600); } /* 事業領域カード（ハブTOP） */ .area-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--t-200); border-radius:var(--r-lg); overflow:hidden; text-decoration:none; } .area-card__band { height:6px; background:var(--t-600); } .area-card__body { padding:var(--sp-5); display:flex; flex-direction:column; flex:1; } .area-card__ico { width:var(--ico-xl); height:var(--ico-xl); color:var(--t-600); margin-bottom:var(--sp-3); } .area-card__title { display:block; font-size:19px; color:var(--ink); } .area-card__text { display:block; margin-top:var(--sp-2); font-size:14px; line-height:1.8; color:var(--ink-body); } .area-card__foot { margin-top:auto; padding-top:var(--sp-4); } /* CMSカード（事例・コラム・ニュース・セミナー・資料） */ .cms-card { display:flex; flex-direction:column; background:#fff; border:var(--bd); border-radius:var(--r-lg); overflow:hidden; } .cms-card__body { padding:var(--sp-4); display:flex; flex-direction:column; flex:1; } .cms-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:var(--sp-2); } .cms-card__date { font-family:var(--font-num); font-size:12px; color:var(--ink-muted); } .cms-card__title { font-size:16px; line-height:1.6; color:var(--ink); } .cms-card__text { margin-top:var(--sp-2); font-size:13px; line-height:1.8; color:var(--ink-muted); } .cms-card__foot { margin-top:auto; padding-top:var(--sp-3); } /* ニュースは一覧性優先でカードにしない（罫線リスト） */ .news-list li { display:grid; grid-template-columns:110px 150px minmax(0,1fr); gap:var(--sp-3); align-items:center; padding:var(--sp-4) 0; border-bottom:1px solid var(--line); } .news-list li:first-child { border-top:1px solid var(--line); } .news-list__date { font-family:var(--font-num); font-size:13px; color:var(--ink-muted); } .news-list__title { font-size:15px; color:var(--ink); font-weight:700; text-decoration:none; } .news-list__title:hover { text-decoration:underline; } /* プランカード */ .plan-card { background:#fff; border:var(--bd); border-radius:var(--r-lg); padding:var(--sp-4); display:flex; flex-direction:column; } .plan-card--rec { border-color:var(--t-500); border-width:2px; } .plan-card__name { display:block; font-family:var(--font-num); font-size:18px; font-weight:700; color:var(--t-700); } .plan-card__for { margin-top:6px; font-size:13px; line-height:1.7; color:var(--ink-muted); } .plan-card__scope { margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--line); font-size:13px; line-height:1.8; color:var(--ink-body); } .plan-card__foot { margin-top:auto; padding-top:var(--sp-4); } /* 関連ページカード */ .rel-card { display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-4); border:var(--bd); border-radius:var(--r-md); background:#fff; text-decoration:none; } .rel-card:hover { border-color:var(--t-500); } .rel-card__why { display:block; font-size:12px; font-weight:700; color:var(--t-700); line-height:1.6; } .rel-card__title { display:block; margin-top:4px; font-size:15px; font-weight:700; color:var(--ink); line-height:1.6; } /* ============================================================================= 10. SERVICE CONTENT ========================================================================== */ /* 課題・背景 */ .issue-card { background:#fff; border:var(--bd); border-radius:var(--r-md); padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); } .issue-card__q { font-size:15px; font-weight:700; line-height:1.7; color:var(--ink); } .issue-card__a { font-size:13px; line-height:1.8; color:var(--ink-body); padding-top:var(--sp-2); border-top:1px dashed var(--line-strong); } /* 支援内容 */ .support-item { display:grid; grid-template-columns:44px minmax(0,1fr); gap:var(--sp-3); padding:var(--sp-4) 0; border-bottom:1px solid var(--line); } .support-item__ico { width:44px; height:44px; border-radius:var(--r-md); background:var(--t-50); color:var(--t-600); display:flex; align-items:center; justify-content:center; } .support-item__ico svg { width:var(--ico-lg); height:var(--ico-lg); } .support-item__title { font-size:16px; font-weight:700; color:var(--ink); } .support-item__text { margin-top:4px; font-size:14px; line-height:1.8; color:var(--ink-body); } /* 機能一覧・対応範囲 */ .feature-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; } .feature-list li { background:#fff; padding:var(--sp-3) var(--sp-4); font-size:14px; line-height:1.7; color:var(--ink-body); display:flex; gap:8px; align-items:flex-start; } .feature-list .ico { width:var(--ico-sm); height:var(--ico-sm); color:var(--t-600); flex:none; margin-top:4px; } /* 導入効果（before → after） */ .effect { display:grid; grid-template-columns:1fr 40px 1fr; gap:var(--sp-3); align-items:stretch; } .effect__box { border-radius:var(--r-md); padding:var(--sp-4); font-size:14px; line-height:1.8; } .effect__box--before { background:var(--surface-sub); border:1px solid var(--line); color:var(--ink-muted); } .effect__box--after { background:var(--t-50); border:1px solid var(--t-200); color:var(--ink-body); } .effect__box b { display:block; font-size:12px; margin-bottom:6px; letter-spacing:.04em; } .effect__box--before b { color:var(--ink-muted); } .effect__box--after b { color:var(--t-700); } .effect__arrow { display:flex; align-items:center; justify-content:center; color:var(--t-500); } .effect__arrow svg { width:24px; height:24px; } /* 数値実績 */ .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; } .stat { background:#fff; padding:var(--sp-5) var(--sp-3); text-align:center; min-width:0; } .stat__num { font-family:var(--font-num); font-size:clamp(24px,3.4vw,38px); font-weight:700; line-height:1.15; color:var(--t-700); letter-spacing:-.01em; white-space:nowrap; } .stat__num .u { font-size:.45em; margin-left:2px; white-space:nowrap; } .stat__lbl { margin-top:6px; font-size:13px; color:var(--ink-muted); line-height:1.6; } /* 比較表 */ .jtable-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; } .jtable { width:100%; border-collapse:collapse; font-size:14px; min-width:640px; } .jtable th, .jtable td { border:1px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top; line-height:1.7; } .jtable thead th { background:var(--t-50); color:var(--ink); font-weight:700; white-space:nowrap; } .jtable tbody th { background:var(--surface-sub); color:var(--ink); font-weight:700; width:190px; } .jtable td .mk { font-weight:700; } .jtable td .mk--yes { color:var(--ok-ink); } .jtable td .mk--part { color:var(--warn-ink); } .jtable td .mk--no { color:var(--ink-disabled); } .jtable-legend { margin-top:var(--sp-3); font-size:13px; color:var(--ink-muted); display:flex; flex-wrap:wrap; gap:var(--sp-4); } /* 導入ステップ */ .steps { counter-reset:step; display:grid; gap:var(--sp-3); } .steps li { counter-increment:step; position:relative; background:#fff; border:var(--bd); border-radius:var(--r-md); padding:var(--sp-4) var(--sp-4) var(--sp-4) 64px; } .steps li::before { content:"STEP " counter(step); position:absolute; left:0; top:0; bottom:0; width:52px; display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--font-num); font-size:10px; font-weight:700; letter-spacing:.06em; color:#fff; background:var(--t-600); border-radius:var(--r-md) 0 0 var(--r-md); } .steps__title { font-size:15px; font-weight:700; color:var(--ink); } .steps__text { margin-top:4px; font-size:14px; line-height:1.8; color:var(--ink-body); } .steps__who { display:inline-block; margin-top:8px; font-size:12px; font-weight:700; color:var(--t-700); background:var(--t-100); border-radius:var(--r-sm); padding:2px 8px; } /* FAQ */ .faq { border-top:1px solid var(--line); } .faq details { border-bottom:1px solid var(--line); } .faq summary { display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-4) 40px var(--sp-4) 0; position:relative; cursor:pointer; font-size:16px; font-weight:700; color:var(--ink); line-height:1.7; list-style:none; } .faq summary::-webkit-details-marker { display:none; } .faq summary::before { content:"Q"; font-family:var(--font-num); flex:none; width:26px; height:26px; border-radius:50%; background:var(--t-100); color:var(--t-700); display:flex; align-items:center; justify-content:center; font-size:13px; } .faq summary::after { content:""; position:absolute; right:8px; top:50%; width:11px; height:11px; margin-top:-8px; border-right:2px solid var(--t-600); border-bottom:2px solid var(--t-600); transform:rotate(45deg); transition:transform var(--dur) var(--ease); } .faq details[open] summary::after { transform:rotate(-135deg); margin-top:-3px; } .faq__a { display:flex; gap:var(--sp-3); padding:0 0 var(--sp-4); font-size:15px; line-height:1.9; color:var(--ink-body); } .faq__a::before { content:"A"; font-family:var(--font-num); flex:none; width:26px; height:26px; border-radius:50%; background:var(--surface-sub); color:var(--ink-muted); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; } /* 監修・出典 */ .credit { background:var(--surface-sub); border-left:4px solid var(--line-strong); border-radius:0 var(--r-md) var(--r-md) 0; padding:var(--sp-4); font-size:13px; line-height:1.8; color:var(--ink-muted); } .credit b { color:var(--ink-body); } /* ============================================================================= 11. CMS LIST UI ========================================================================== */ .jtabs { display:flex; flex-wrap:wrap; gap:var(--sp-2); border-bottom:1px solid var(--line); } .jtabs a { padding:10px 16px; font-size:14px; font-weight:700; color:var(--ink-muted); text-decoration:none; border-bottom:3px solid transparent; margin-bottom:-1px; } .jtabs a:hover { color:var(--ink); } .jtabs a[aria-current="true"] { color:var(--t-700); border-bottom-color:var(--t-600); } .jfilter { background:var(--surface-sub); border:var(--bd); border-radius:var(--r-md); padding:var(--sp-4); } .jfilter__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--sp-3); } .jfilter__foot { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3); } .jresult { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) 0; } .jresult__count { font-size:14px; color:var(--ink-body); } .jresult__count b { font-family:var(--font-num); font-size:19px; color:var(--ink); } .jsort { display:flex; gap:var(--sp-2); } .jsort a { font-size:13px; padding:6px 12px; border:1px solid var(--line); border-radius:var(--r-full); color:var(--ink-body); text-decoration:none; background:#fff; } .jsort a[aria-current="true"] { background:var(--t-600); color:#fff; border-color:var(--t-600); font-weight:700; } .jempty { border:1px dashed var(--line-strong); border-radius:var(--r-md); padding:var(--sp-7) var(--sp-4); text-align:center; color:var(--ink-muted); font-size:14px; } .jempty__title { font-size:16px; font-weight:700; color:var(--ink); margin-bottom:var(--sp-2); } /* ============================================================================= 12. CTA ========================================================================== */ /* 共通CTA：領域テーマの濃色面＋CVボタン。全ページで構造は同一 */ .jcta { background:var(--t-900); color:#fff; border-radius:var(--r-lg); padding:var(--sp-6); } .jcta__title { font-size:clamp(19px,2.2vw,24px); line-height:1.5; color:#fff; } .jcta__text { margin-top:var(--sp-3); font-size:15px; line-height:1.9; color:rgba(255,255,255,.86); max-width:40em; } .jcta__btns { margin-top:var(--sp-5); display:flex; flex-wrap:wrap; gap:var(--sp-3); } .jcta__note { margin-top:var(--sp-4); font-size:12px; line-height:1.7; color:rgba(255,255,255,.7); } .jcta .jbtn--cv-outline { background:transparent; color:#fff; border-color:rgba(255,255,255,.5); } .jcta .jbtn--cv-outline:hover { background:rgba(255,255,255,.1); border-color:#fff; } /* 2択CTA：役割の違いを説明つきで並べる */ .jcta-dual { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4); } .jcta-dual__item { background:#fff; border:var(--bd); border-radius:var(--r-lg); padding:var(--sp-5); display:flex; flex-direction:column; } .jcta-dual__item--primary { border-color:var(--cv-200); background:var(--cv-50); } .jcta-dual__role { display:block; font-size:12px; font-weight:700; color:var(--ink-muted); } .jcta-dual__title { margin-top:4px; font-size:18px; color:var(--ink); } .jcta-dual__text { margin-top:var(--sp-2); font-size:14px; line-height:1.8; color:var(--ink-body); } .jcta-dual__foot { margin-top:auto; padding-top:var(--sp-4); } /* 記事末CTA：控えめ・横1本 */ .jcta-inline { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); background:var(--t-50); border:1px solid var(--t-200); border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5); } .jcta-inline__text { flex:1 1 260px; font-size:15px; line-height:1.8; color:var(--ink-body); } .jcta-inline__text b { color:var(--ink); } /* サイドCTA */ .jcta-side { background:#fff; border:var(--bd); border-top:4px solid var(--cv-600); border-radius:var(--r-md); padding:var(--sp-4); } .jcta-side__title { font-size:16px; color:var(--ink); } .jcta-side__text { margin-top:var(--sp-2); font-size:13px; line-height:1.8; color:var(--ink-body); } .jcta-side__foot { margin-top:var(--sp-4); display:grid; gap:var(--sp-2); } /* ============================================================================= 13. FORMS ========================================================================== */ .jfield { display:block; margin-bottom:var(--sp-5); } .jfield__label { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--ink); margin-bottom:6px; } .jfield__note { font-size:13px; color:var(--ink-muted); margin-bottom:6px; } .jreq { font-size:11px; font-weight:700; color:#fff; background:var(--ng); border-radius:var(--r-sm); padding:2px 7px; letter-spacing:.02em; } .jopt { font-size:11px; font-weight:700; color:var(--ink-muted); background:var(--surface-sub); border:1px solid var(--line); border-radius:var(--r-sm); padding:1px 7px; } .jinput, .jselect, .jtextarea { width:100%; min-height:48px; padding:12px 14px; font-family:var(--font); font-size:16px; line-height:1.6; color:var(--ink); background:#fff; border:1px solid var(--line-input); border-radius:var(--r-md); } .jtextarea { min-height:120px; resize:vertical; } .jselect { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-muted) 50%),linear-gradient(135deg,var(--ink-muted) 50%,transparent 50%); background-position:calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size:6px 6px; background-repeat:no-repeat; padding-right:40px; } .jinput:focus, .jselect:focus, .jtextarea:focus { outline:2px solid var(--t-600); outline-offset:1px; border-color:var(--t-600); } .jinput::placeholder, .jtextarea::placeholder { color:var(--ink-disabled); } .jfield--error .jinput, .jfield--error .jselect, .jfield--error .jtextarea { border-color:var(--ng); background:var(--ng-bg); } .jerror { display:flex; align-items:flex-start; gap:6px; margin-top:6px; font-size:13px; font-weight:700; color:var(--ng-ink); } .jerror .ico { width:var(--ico-sm); height:var(--ico-sm); flex:none; margin-top:3px; } .jchoice { display:flex; flex-wrap:wrap; gap:var(--sp-2); } .jchoice label { display:flex; align-items:flex-start; gap:8px; min-height:48px; padding:12px 16px; border:1px solid var(--line-input); border-radius:var(--r-md); font-size:15px; line-height:1.5; cursor:pointer; background:#fff; } .jchoice label:hover { border-color:var(--t-500); background:var(--t-50); } .jchoice input { margin-top:3px; width:18px; height:18px; accent-color:var(--t-600); flex:none; } .jchoice--stack { flex-direction:column; } .jchoice--stack label { width:100%; } .jform-section { border-top:2px solid var(--t-200); padding-top:var(--sp-4); margin-top:var(--sp-6); } .jform-section__title { font-size:16px; font-weight:700; color:var(--t-700); margin-bottom:var(--sp-4); } .jsteps-nav { display:flex; align-items:center; gap:var(--sp-2); } .jsteps-nav li { display:flex; align-items:center; gap:var(--sp-2); font-size:13px; font-weight:700; color:var(--ink-disabled); } .jsteps-nav li::before { content:""; width:24px; height:24px; border-radius:50%; border:2px solid currentColor; display:flex; } .jsteps-nav li[aria-current="step"] { color:var(--t-700); } .jsteps-nav li[aria-current="step"]::before { background:var(--t-600); border-color:var(--t-600); } .jsteps-nav li.is-done { color:var(--ink-muted); } .jsteps-nav li.is-done::before { background:var(--ink-muted); border-color:var(--ink-muted); } .jsteps-nav li.bar { width:28px; height:2px; background:var(--line-strong); flex:none; } .jsteps-nav li.bar::before { display:none; } .jconfirm dl { display:grid; grid-template-columns:200px minmax(0,1fr); border-top:1px solid var(--line); } .jconfirm dt, .jconfirm dd { padding:14px 16px; border-bottom:1px solid var(--line); font-size:15px; margin:0; } .jconfirm dt { background:var(--surface-sub); color:var(--ink-muted); font-size:14px; font-weight:700; } .jconfirm dd { color:var(--ink); } .jconsent { background:var(--surface-sub); border:var(--bd); border-radius:var(--r-md); padding:var(--sp-4); } .jconsent__box { max-height:120px; overflow-y:auto; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-3); font-size:13px; line-height:1.8; color:var(--ink-muted); margin-bottom:var(--sp-3); } .jcomplete { text-align:center; border:1px solid var(--t-200); background:var(--t-50); border-radius:var(--r-lg); padding:var(--sp-7) var(--sp-5); } .jcomplete__ico { width:56px; height:56px; margin:0 auto var(--sp-4); color:var(--t-600); } .jcomplete__title { font-size:22px; color:var(--ink); } .jcomplete__text { margin-top:var(--sp-3); font-size:15px; line-height:1.9; color:var(--ink-body); } /* フォーム補助情報（右カラム） */ .jform-aside { display:grid; gap:var(--sp-4); } .jlogo-wall { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; } .jlogo-wall div { background:#fff; aspect-ratio:5/2; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--ink-disabled); } /* ============================================================================= 14. FIGURE / DIAGRAM（図解の共通ルール：意味＝色。色数を増やさない） ========================================================================== */ .jfig { border:var(--bd); border-radius:var(--r-lg); background:#fff; padding:var(--sp-5); } .jfig__cap { margin-top:var(--sp-3); font-size:12px; color:var(--ink-muted); } .jfig-legend { display:flex; flex-wrap:wrap; gap:var(--sp-4); font-size:12px; color:var(--ink-body); margin-top:var(--sp-3); } .jfig-legend span { display:inline-flex; align-items:center; gap:6px; } .jfig-legend i { width:12px; height:12px; border-radius:3px; display:block; } /* ============================================================================= 15. FOOTER ========================================================================== */ .jfooter { background:var(--surface-sub); border-top:1px solid var(--line); color:var(--ink-body); } .jfooter__inner { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--sp-5); padding-block:var(--sp-7) var(--sp-5); } .jfooter h4 { font-size:13px; color:var(--ink); margin-bottom:var(--sp-3); } .jfooter a { font-size:13px; color:var(--ink-body); line-height:2; text-decoration:none; } .jfooter a:hover { text-decoration:underline; } .jfooter__copy { border-top:1px solid var(--line); padding-block:var(--sp-4); font-size:12px; color:var(--ink-muted); text-align:center; } /* ============================================================================= 16. UTILITY ========================================================================== */ .u-mt-2 { margin-top:var(--sp-2); } .u-mt-3 { margin-top:var(--sp-3); } .u-mt-4 { margin-top:var(--sp-4); } .u-mt-5 { margin-top:var(--sp-5); } .u-mt-6 { margin-top:var(--sp-6); } .u-muted { color:var(--ink-muted); } .u-tnote { font-size:12px; line-height:1.7; color:var(--ink-muted); } .u-vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .u-flag { display:inline-block; font-size:11px; font-weight:700; color:var(--warn-ink); background:var(--warn-bg); border:1px solid #e8d3a0; border-radius:var(--r-sm); padding:1px 6px; } /* ============================================================================= 17. RESPONSIVE ========================================================================== */ @media (max-width:1023px) { :root { --sec-gap:56px; --page-padding:var(--page-padding-tab); } .j2col { grid-template-columns:minmax(0,1fr); gap:var(--sp-5); } .jgrid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); } .jgrid--3 { grid-template-columns:repeat(2,minmax(0,1fr)); } .jfooter__inner { grid-template-columns:1fr 1fr; } } @media (max-width:767px) { :root { --sec-gap:var(--sec-gap-sp); --page-padding:var(--page-padding-sp); } body { font-size:16px; } .jgrid--2, .jgrid--3, .jgrid--4 { grid-template-columns:minmax(0,1fr); } .jcta-dual { grid-template-columns:minmax(0,1fr); } .effect { grid-template-columns:minmax(0,1fr); } .effect__arrow { transform:rotate(90deg); height:28px; } .jconfirm dl { grid-template-columns:minmax(0,1fr); } .jconfirm dt { border-bottom:none; padding-bottom:0; background:transparent; } .jconfirm dd { padding-top:6px; } .news-list li { grid-template-columns:minmax(0,1fr); gap:6px; } .jgnav { display:none; } .jcta { padding:var(--sp-5); } .jcta__btns .jbtn { width:100%; } .stat__num { font-size:30px; } .jfooter__inner { grid-template-columns:1fr; } .steps li { padding:var(--sp-4); padding-top:38px; } .steps li::before { right:auto; bottom:auto; width:auto; height:26px; padding:0 10px; border-radius:var(--r-md) 0 var(--r-md) 0; } }