/* ========================================================= mesh-bg.css — JAMM large pattern 前提: 直下に特色: - 上中下に大きい白帯（2段強） - 中央ミント面が縦長に2カ所（中腹/下腹） - 左縁からシアンが差し込む ========================================================= */ /* トーン調整しやすい変数 */ :root{ /* ベース縦グラデ（薄い白→ミント→アクア） */ --mesh-top: #ffffff; --mesh-mid: #eef9f7; --mesh-btm: #c9e8f2; /* ブロブ色（αで滲み具合を調整） */ --blob-mint: rgb(106, 242, 201); /* ミント主役（強め） */ --blob-mint-soft: rgba(120, 235, 204, 0.493); /* ミント補助 */ --blob-cyan: rgba(110, 210, 240, .30); /* 左縁のシアン */ --blob-ice : rgba(200, 240, 250, .28); /* 右上/縁のアイスブルー */ --blob-white: rgba(255,255,255, .75); /* 白帯の増幅 */ } /* 本体は透明化してレイヤーを活かす */ html, body { height:100%; min-height:100%; } body, .site, #page, .bodywrap { background: transparent; } #page { position: relative; z-index: 1; } /* ===== Mesh 背景レイヤー（スクロールに追従） ===== */ #mesh-layer{ position: fixed; inset: 0; pointer-events: none; z-index: 0; /* 上から順に重ねる（最後の linear が最背面） */ background: /* ── 左上→中央にかけてのシアン差し込み（強） */ radial-gradient(85% 46% at 6% 10%, var(--blob-cyan) 0%, transparent 60%), /* ── 右上の淡い縁どり（弱） */ radial-gradient(40% 50% at 96% 6%, var(--blob-ice) 0%, transparent 66%), /* ── 第1白帯（上部の大きい白場） */ radial-gradient(120% 60% at 50% 24%, var(--blob-white) 0%, transparent 68%), /* ── 第1ミント面（中腹：縦長・やや右寄り） */ radial-gradient(55% 42% at 56% 40%, var(--blob-mint) 0%, transparent 72%), radial-gradient(70% 48% at 52% 48%, var(--blob-mint-soft) 0%, transparent 75%), /* ── 左中腹のシアン差し込み（補助） */ radial-gradient(36% 74% at 0% 52%, var(--blob-cyan) 0%, transparent 70%), /* ── 第2白帯（中央〜下の大きい白場） */ radial-gradient(130% 70% at 48% 66%, var(--blob-white) 0%, transparent 72%), /* ── 第2ミント面（下腹：縦長・やや左寄り） */ radial-gradient(58% 44% at 44% 82%, var(--blob-mint) 0%, transparent 72%), radial-gradient(70% 50% at 48% 76%, var(--blob-mint-soft) 0%, transparent 76%), /* ── 左下のシアン差し込み（強） */ radial-gradient(90% 48% at 6% 92%, var(--blob-cyan) 0%, transparent 62%), /* ── 右下の淡い縁どり */ radial-gradient(46% 40% at 98% 96%, var(--blob-ice) 0%, transparent 62%), /* ── ベース縦グラデーション */ linear-gradient(to bottom, var(--mesh-top) 0%, var(--mesh-mid) 45%, var(--mesh-btm) 100%); background-repeat: no-repeat; background-size: cover; background-attachment: scroll; /* iOS 安定 */ } /* ===== スマホ最適化（縦比率を大きく、白帯を広め） ===== */ @media (max-width: 767.98px){ #mesh-layer{ background: radial-gradient(120% 60% at 8% 8%, var(--blob-cyan) 0%, transparent 58%), radial-gradient(55% 52% at 96% 6%, var(--blob-ice) 0%, transparent 66%), radial-gradient(150% 70% at 50% 26%, var(--blob-white) 0%, transparent 72%), radial-gradient(80% 52% at 54% 38%, var(--blob-mint) 0%, transparent 74%), radial-gradient(95% 58% at 50% 46%, var(--blob-mint-soft) 0%, transparent 78%), radial-gradient(40% 90% at 0% 54%, var(--blob-cyan) 0%, transparent 70%), radial-gradient(165% 82% at 48% 66%, var(--blob-white) 0%, transparent 76%), radial-gradient(85% 56% at 46% 82%, var(--blob-mint) 0%, transparent 74%), radial-gradient(100% 60% at 50% 76%, var(--blob-mint-soft) 0%, transparent 78%), radial-gradient(115% 56% at 8% 94%, var(--blob-cyan) 0%, transparent 62%), radial-gradient(60% 46% at 98% 96%, var(--blob-ice) 0%, transparent 62%), linear-gradient(to bottom, var(--mesh-top) 0%, var(--mesh-mid) 48%, var(--mesh-btm) 100%); } } /* ===== すこし深みを出す（大画面）任意 ===== */ @media (min-width: 1440px){ :root{ --mesh-btm: #b7dcef; } } /* ===== ヒント ===== - ミントを更に強く → --blob-mint の α を .50→.56、色を rgb(80,215,170) 付近へ。 - 白帯を広げる → 第1/第2白帯の radial の "transparent 68–76%" を大きく。 - 左縁のシアンを弱める → --blob-cyan の α を .30→.22。 - 全体を白寄せ → --mesh-btm を少し明るく (#d0ecf5 など)。 */