/* ────────────────────────────────────────────────────────────── Lancers Cards Template - Shared Base Styles 共通ベース: body class で theme (brand) と layout (type) を切替使い方: ────────────────────────────────────────────────────────────── */ /* ── Theme: NOOK (beige / gold) ── */ .theme-nook { --bg-from: #FAFAF8; --bg-to: #ECE6DC; --accent: #C4A96A; --accent-soft: rgba(196, 169, 106, 0.06); --card-shadow: 0 18px 40px rgba(60, 50, 30, 0.10), 0 4px 12px rgba(60, 50, 30, 0.06); --image-sp: url('nook-375w.png'); --image-pc: url('nook-1440w.png'); } /* ── Theme: FIKA (beige / gold - same palette as NOOK) ── */ .theme-fika { --bg-from: #FAFAF8; --bg-to: #ECE6DC; --accent: #C4A96A; --accent-soft: rgba(196, 169, 106, 0.06); --card-shadow: 0 18px 40px rgba(60, 50, 30, 0.10), 0 4px 12px rgba(60, 50, 30, 0.06); --image-sp: url('fika-375w.png'); --image-pc: url('fika-1440w.png'); } /* ── Theme: Hidamari Dental (blue) ── */ .theme-hidamari { --bg-from: #F6F8FA; --bg-to: #E8ECF0; --accent: #5B8DB8; --accent-soft: rgba(91, 141, 184, 0.06); --card-shadow: 0 18px 40px rgba(40, 60, 90, 0.12), 0 4px 12px rgba(40, 60, 90, 0.06); --image-sp: url('hidamari-375w.png'); --image-pc: url('hidamari-1440w.png'); } /* ── Theme: KURO Coffee (dark / gold) ── */ .theme-kuro { --bg-from: #2A2A2A; --bg-to: #1A1A1A; --accent: #D4A574; --accent-soft: rgba(212, 165, 116, 0.08); --text: #F0F0F0; --text-muted: #999; --card-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3); --image-sp: url('kuro-375w.png'); --image-pc: url('kuro-1440w.png'); --main-badge-bg: rgba(255, 255, 255, 0.12); } /* ── Theme: Fujioka Shinkyuu (green) ── */ .theme-fujioka { --bg-from: #F6F9F6; --bg-to: #E8EDE8; --accent: #6A9B7A; --accent-soft: rgba(106, 155, 122, 0.06); --card-shadow: 0 18px 40px rgba(40, 70, 50, 0.12), 0 4px 12px rgba(40, 70, 50, 0.06); --image-sp: url('fujioka-shinkyuu-375w.png'); --image-pc: url('fujioka-shinkyuu-1440w.png'); } /* ── Global defaults (overridable per theme) ── */ :root { --text: #1A1A1A; --text-muted: #888; --main-badge-bg: rgba(255, 255, 255, 0.7); } * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 1000px; height: 782px; overflow: hidden; font-family: 'Noto Sans JP', sans-serif; color: var(--text); } .container { width: 1000px; height: 782px; position: relative; background: linear-gradient(160deg, var(--bg-from) 0%, var(--bg-to) 100%); overflow: hidden; } /* ── Decorative bg ── */ .bg-circle { position: absolute; border-radius: 50%; background: var(--accent-soft); pointer-events: none; } .bg-circle-1 { width: 520px; height: 520px; top: -180px; left: -160px; } .bg-circle-2 { width: 380px; height: 380px; bottom: -140px; right: -100px; } .bg-line { position: absolute; background: var(--accent); opacity: 0.15; } .bg-line-h { width: 80px; height: 1px; } .bg-line-v { width: 1px; height: 80px; } .bg-line-1 { top: 50px; left: 60px; } .bg-line-2 { bottom: 60px; right: 80px; } /* ── Header ── */ .header { position: absolute; top: 38px; left: 0; right: 0; text-align: center; z-index: 10; } .brand-logo { font-size: 11px; font-weight: 400; letter-spacing: 0.4em; color: var(--accent); margin-bottom: 6px; } /* 日本語ブランドは明朝で組版 */ .theme-hidamari .brand-logo, .theme-fujioka .brand-logo { font-family: 'Shippori Mincho B1', serif; font-size: 12px; font-weight: 500; } .header-title { font-family: 'Shippori Mincho B1', serif; font-size: 22px; font-weight: 500; letter-spacing: 0.14em; margin-bottom: 4px; } .header-sub { font-size: 10px; font-weight: 300; color: var(--text-muted); letter-spacing: 0.12em; } /* ── Strip rail (共通) ── */ .rail { position: absolute; top: 130px; left: 0; right: 0; bottom: 70px; display: flex; justify-content: center; align-items: center; z-index: 5; } .layout-mobile .rail { gap: 22px; padding: 0 50px; } .layout-desktop .rail { gap: 18px; padding: 0 36px; } .layout-mixed .rail { gap: 20px; padding: 0 36px; } /* ── SP card (layout-mobile: .strip / layout-mixed: .sp-card) ── */ .strip, .sp-card { border-radius: 18px; overflow: hidden; background-color: #fff; background-image: var(--image-sp); background-size: 100% auto; background-repeat: no-repeat; box-shadow: var(--card-shadow); position: relative; flex-shrink: 0; } .layout-mobile .strip { width: 158px; height: 560px; } .layout-mixed .sp-card { width: 138px; } /* ── PC card (browser frame) ── */ .pc-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: var(--card-shadow); display: flex; flex-direction: column; flex-shrink: 0; position: relative; } .layout-desktop .pc-card { width: 172px; height: 560px; border-radius: 10px; } .layout-mixed .pc-card { width: 280px; border-radius: 12px; } .pc-toolbar { background: #F5F5F5; border-bottom: 1px solid #E8E8E8; display: flex; align-items: center; flex-shrink: 0; } .layout-desktop .pc-toolbar { height: 16px; padding: 0 6px; gap: 4px; } .layout-mixed .pc-toolbar { height: 18px; padding: 0 8px; gap: 4px; } .pc-dot { border-radius: 50%; } .pc-dot--red { background: #FF5F57; } .pc-dot--yellow { background: #FFBD2E; } .pc-dot--green { background: #28C840; } .layout-desktop .pc-dot { width: 5px; height: 5px; } .layout-mixed .pc-dot { width: 6px; height: 6px; } .pc-screen { flex: 1; background-color: #fff; background-image: var(--image-pc); background-size: 100% auto; background-repeat: no-repeat; } /* ── Section labels under each card ── */ .strip::after, .sp-card::after, .pc-card::after { content: attr(data-label); position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font-size: 8px; font-weight: 500; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; } /* ────────────────────────────────────────────────────────────── Layout: MOBILE (5 SP strips, organic moodboard) ────────────────────────────────────────────────────────────── */ .layout-mobile .strip:nth-child(1) { height: 540px; transform: translateY(-12px); background-position: 0 0%; } .layout-mobile .strip:nth-child(2) { height: 580px; transform: translateY(8px); background-position: 0 25%; } .layout-mobile .strip:nth-child(3) { height: 560px; transform: translateY(-6px); background-position: 0 50%; } .layout-mobile .strip:nth-child(4) { height: 580px; transform: translateY(10px); background-position: 0 75%; } .layout-mobile .strip:nth-child(5) { height: 540px; transform: translateY(-10px); background-position: 0 100%; } /* ────────────────────────────────────────────────────────────── Layout: DESKTOP (5 PC browser cards) ────────────────────────────────────────────────────────────── */ .layout-desktop .pc-card:nth-child(1) { height: 540px; transform: translateY(-12px); } .layout-desktop .pc-card:nth-child(1) .pc-screen { background-position: 0 0%; } .layout-desktop .pc-card:nth-child(2) { height: 580px; transform: translateY(8px); } .layout-desktop .pc-card:nth-child(2) .pc-screen { background-position: 0 25%; } .layout-desktop .pc-card:nth-child(3) { height: 560px; transform: translateY(-6px); } .layout-desktop .pc-card:nth-child(3) .pc-screen { background-position: 0 50%; } .layout-desktop .pc-card:nth-child(4) { height: 580px; transform: translateY(10px); } .layout-desktop .pc-card:nth-child(4) .pc-screen { background-position: 0 75%; } .layout-desktop .pc-card:nth-child(5) { height: 540px; transform: translateY(-10px); } .layout-desktop .pc-card:nth-child(5) .pc-screen { background-position: 0 100%; } /* ────────────────────────────────────────────────────────────── Layout: MIXED (SP - SP - PC(big center) - SP - SP) ────────────────────────────────────────────────────────────── */ .layout-mixed .sp-card:nth-child(1) { height: 530px; transform: translateY(-14px); background-position: 0 0%; } .layout-mixed .sp-card:nth-child(2) { height: 570px; transform: translateY(10px); background-position: 0 30%; } .layout-mixed .pc-card:nth-child(3) { height: 600px; transform: translateY(-4px); } .layout-mixed .pc-card:nth-child(3) .pc-screen { background-position: 0 50%; } .layout-mixed .sp-card:nth-child(4) { height: 570px; transform: translateY(10px); background-position: 0 70%; } .layout-mixed .sp-card:nth-child(5) { height: 530px; transform: translateY(-14px); background-position: 0 100%; } /* MAIN バッジ（mixed layout のみ） */ .layout-mixed .pc-card::before { content: 'MAIN'; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 8px; font-weight: 600; letter-spacing: 0.2em; color: var(--accent); background: var(--main-badge-bg); padding: 2px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } /* ── Footer credit ── */ .footer { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; z-index: 10; } .footer-line { display: inline-block; width: 28px; height: 1px; background: var(--accent); vertical-align: middle; margin: 0 12px; } .footer-text { display: inline-block; font-family: 'Shippori Mincho B1', serif; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; color: var(--text); vertical-align: middle; } .footer-sub { margin-top: 4px; font-size: 9px; font-weight: 300; color: var(--text-muted); letter-spacing: 0.1em; }