@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=Teko:wght@600&display=swap');
:root { --c-dark: #111827; --c-yellow: #facc15; --c-white: #ffffff; --c-gray: #f3f4f6; }
body { font-family: 'Noto Sans JP', sans-serif; background-color: var(--c-white); color: #333; margin: 0; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
.header { background: var(--c-dark); color: var(--c-white); padding: 0 5%; display: flex; justify-content: space-between; align-items: center; height: 80px; }
.logo { font-size: 1.5rem; font-weight: 900; letter-spacing: 0.05em; display:flex; align-items:center; gap:10px; }
.logo::before { content: ''; display:inline-block; width:8px; height:24px; background:var(--c-yellow); transform: skewX(-15deg); }
.nav { display: flex; gap: 30px; font-weight: 700; }
.nav a:hover { color: var(--c-yellow); }
.hero { height: calc(100vh - 80px); position: relative; overflow: hidden; background: #000; }
.hero-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; mix-blend-mode: luminosity; }
.hero-content { position: absolute; top: 50%; left: 10%; transform: translateY(-50%); color: var(--c-white); }
.hero-title { font-size: 4rem; font-weight: 900; line-height: 1.2; margin: 0 0 20px 0; text-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.hero-title span { color: var(--c-yellow); }
.hero-subtitle { font-size: 1.2rem; font-weight: 700; background: var(--c-yellow); color: var(--c-dark); display: inline-block; padding: 10px 20px; transform: skewX(-10deg); }
.btn-strong { display: inline-block; background: var(--c-yellow); color: var(--c-dark); font-weight: 900; padding: 20px 50px; font-size: 1.2rem; transform: skewX(-10deg); transition: 0.3s; margin-top:40px; }
.btn-strong:hover { background: var(--c-white); }
.btn-strong span { display: inline-block; transform: skewX(10deg); }
.section { padding: 100px 10%; }
.title-bg { font-family: 'Teko', sans-serif; font-size: 6rem; color: var(--c-gray); line-height: 0.8; position: absolute; z-index: -1; }
.title-main { font-size: 2.5rem; font-weight: 900; margin: 0; padding-top: 40px; }
.service-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 60px; }
.card { background: var(--c-dark); color: var(--c-white); padding: 40px; border-bottom: 5px solid var(--c-yellow); transition: 0.3s; }
.card:hover { transform: translateY(-10px); }
.card h3 { font-size: 1.5rem; margin-top:0; border-bottom: 2px solid #333; padding-bottom: 15px; }