/* Theme Name: En LLC (合同会社縁) Theme URI: https://example.com/ Author: En LLC Description: 合同会社縁（En LLC）コーポレートサイト用の軽量WordPressテーマ。赤を基調に、沖縄の海を感じる波模様を抽象的に表現。 Version: 1.0.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: en-llc */ :root{ --brand-red:#D6001C; --ink:#0B1220; --muted:#5B6475; --bg:#ffffff; --bg-soft:#F6F8FC; --ocean-1:#0B7DB6; --ocean-3:#003B73; --reef:#1BB5B0; --coral:#FF6B6B; --sand:#FFF3D6; --sun:#FFD166; --breeze:#E8FBFF; --ocean-2:#1BB5B0; --radius:16px; --shadow:0 18px 50px rgba(12, 25, 48, .10); --border:1px solid rgba(12, 25, 48, .10); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; color:var(--ink); background: radial-gradient(900px 500px at 85% -10%, rgba(255,209,102,.35) 0%, rgba(255,209,102,0) 60%), radial-gradient(1100px 600px at 10% 0%, rgba(27,181,176,.18) 0%, rgba(27,181,176,0) 62%), linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #F3FBFF 100%); font-family: "Noto Sans JP", "Source Han Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; line-height:1.75; } /* Okinawa abstract waves (CSS-only, no photos) */ .en-ocean{ position:relative; overflow:hidden; } .en-ocean::before{ content:""; position:absolute; inset:-180px -240px auto -240px; height:520px; background: radial-gradient(1200px 420px at 15% 10%, rgba(27,181,176,.22) 0%, rgba(27,181,176,0) 62%), radial-gradient(900px 360px at 85% 0%, rgba(11,125,182,.18) 0%, rgba(11,125,182,0) 60%), radial-gradient(700px 300px at 60% 30%, rgba(255,107,107,.10) 0%, rgba(255,107,107,0) 60%), linear-gradient(135deg, rgba(214,0,28,.10), rgba(11,125,182,.10)); pointer-events:none; } /* Ryukyu-inspired geometric pattern (subtle) */ .en-ryukyu-pattern{ position:relative; overflow:hidden; } .en-ryukyu-pattern::after{ content:""; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='280' viewBox='0 0 520 280'%3E%3Cg fill='none' stroke='%23D6001C' stroke-opacity='0.12' stroke-width='2'%3E%3Cpath d='M0 120c60-80 120-80 180 0s120 80 180 0 120-80 160 0'/%3E%3Cpath d='M0 200c60-80 120-80 180 0s120 80 180 0 120-80 160 0'/%3E%3C/g%3E%3Cg fill='none' stroke='%230B7DB6' stroke-opacity='0.10' stroke-width='2'%3E%3Ccircle cx='70' cy='70' r='28'/%3E%3Ccircle cx='260' cy='40' r='18'/%3E%3Ccircle cx='420' cy='90' r='24'/%3E%3C/g%3E%3C/svg%3E"); background-size:520px 280px; background-repeat:repeat; pointer-events:none; } .en-ryukyu-pattern > *{position:relative} .en-ocean::after{ content:""; position:absolute; left:0; right:0; top:80px; height:320px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='240' viewBox='0 0 1200 240'%3E%3Cg fill='none' stroke='%230B7DB6' stroke-opacity='0.20' stroke-width='2'%3E%3Cpath d='M0 60 C 150 20, 300 100, 450 60 S 750 20, 900 60 S 1050 100, 1200 60'/%3E%3Cpath d='M0 120 C 150 80, 300 160, 450 120 S 750 80, 900 120 S 1050 160, 1200 120'/%3E%3Cpath d='M0 180 C 150 140, 300 220, 450 180 S 750 140, 900 180 S 1050 220, 1200 180'/%3E%3C/g%3E%3C/svg%3E"); background-size:1200px 240px; background-repeat:repeat-x; opacity:1; animation:en-wave 20s linear infinite; pointer-events:none; } @keyframes en-wave{from{background-position:0 0}to{background-position:-1200px 0}} a{color:inherit} .container{width:min(1120px, 92vw); margin:0 auto} .section{padding:72px 0} .badge{ display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .75rem; border-radius:999px; border:1px solid rgba(214,0,28,.20); background:rgba(214,0,28,.06); color:var(--brand-red); font-weight:700; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:12px 18px; border-radius:12px; border:1px solid rgba(214,0,28,.30); text-decoration:none; font-weight:800; } .btn-primary{background:var(--brand-red); color:#fff; box-shadow:0 14px 40px rgba(214,0,28,.20)} .btn-ghost{background:#fff} .btn:hover{transform:translateY(-1px)} .card{ background:#fff; border:var(--border); border-radius:var(--radius); box-shadow:var(--shadow); } .card-pad{padding:22px} .grid{display:grid; gap:18px} .grid-2{grid-template-columns:repeat(2, minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3, minmax(0,1fr))} @media (max-width: 900px){.grid-2,.grid-3{grid-template-columns:1fr}} h1,h2,h3{line-height:1.2; letter-spacing:.02em; margin:0 0 .6rem} h1{font-size:clamp(30px, 4vw, 52px)} h2{font-size:clamp(22px, 2.4vw, 34px)} h3{font-size:clamp(18px, 2vw, 22px)} .lead{font-size:1.05rem; color:var(--muted)} .kpi{font-weight:900; font-size:1.7rem} .small{font-size:.95rem; color:var(--muted)} /* Header */ .site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.85); backdrop-filter: blur(10px); border-bottom:1px solid rgba(12,25,48,.08)} .header-inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0} .brand{display:flex; align-items:center; gap:10px; text-decoration:none} .brand img{display:block; height:38px; width:auto} .brand .mark{display:none; height:36px} .nav{display:flex; align-items:center; gap:14px} .nav a{padding:10px 10px; border-radius:10px; text-decoration:none; font-weight:800; color:rgba(11,18,32,.85)} .nav a:hover{background:rgba(214,0,28,.06); color:var(--brand-red)} /* Menu list (WP outputs