:root { --primary: #90caf9; --dark: #42a5f5; --bg: #f0f7ff; --text: #1a3a5c; --muted: #5a7a9a; --card: #fff; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Segoe UI", Meiryo, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
a { color: var(--dark); }
img { max-width: 100%; height: auto; display: block; }
.mega-header { background: var(--card); border-bottom: 1px solid #d0e4f7; position: sticky; top: 0; z-index: 50; }
.mega-inner { max-width: 1140px; margin: 0 auto; padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 2rem; }
.mega-logo { font-weight: 800; font-size: 1.4rem; color: var(--dark); cursor: pointer; border: none; background: none; font: inherit; }
.mega-nav { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.mega-nav > div { position: relative; }
.mega-nav > div > button { padding: 0.6rem 1rem; border: none; background: none; font: inherit; cursor: pointer; color: var(--text); }
.mega-nav > div:hover > button { color: var(--dark); }
.mega-drop { display: none; position: absolute; top: 100%; left: 0; background: #fff; box-shadow: 0 12px 40px rgba(66,165,245,0.15); border-radius: 8px; padding: 1rem; min-width: 200px; z-index: 60; }
.mega-nav > div:hover .mega-drop { display: block; }
.mega-drop button { display: block; width: 100%; text-align: left; padding: 0.5rem; border: none; background: none; font: inherit; cursor: pointer; }
html { scroll-behavior: smooth; }
.block { scroll-margin-top: 70px; padding: 2rem 1.5rem; max-width: 1140px; margin: 0 auto; }
.block h2 { color: var(--dark); margin-bottom: 1.25rem; font-size: 1.4rem; }
.detail-grid { display: flex; flex-direction: column; gap: 2rem; }
.detail-item { display: flex; gap: 2rem; flex-wrap: wrap; background: var(--card); border: 1px solid #d0e4f7; border-radius: 8px; padding: 1.5rem; }
.detail-item img { width: 280px; height: 220px; object-fit: cover; border-radius: 8px; }
.mega-nav a { padding: 0.6rem 1rem; color: var(--text); text-decoration: none; }
.mega-nav a:hover { color: var(--dark); }
.full-hero { position: relative; }
.full-hero img { width: 100%; height: 420px; object-fit: cover; }
.full-hero .overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(240,247,255,0.95) 40%, transparent); display: flex; align-items: center; padding: 2rem 4rem; }
.full-hero h1 { font-size: 2.2rem; color: var(--dark); max-width: 400px; }
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 1140px; margin: 2rem auto; padding: 0 1.5rem; }
@media (max-width: 900px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
.tile { background: var(--card); border-radius: 8px; overflow: hidden; border: 1px solid #d0e4f7; cursor: pointer; transition: transform 0.15s; }
.tile:hover { transform: scale(1.02); }
.tile img { height: 200px; width: 100%; object-fit: cover; }
.tile .meta { padding: 1rem; }
.tile .price { color: var(--dark); font-weight: 700; }
.content-box { max-width: 720px; margin: 2rem auto; padding: 0 1.5rem; }
.content-box h1 { color: var(--dark); margin-bottom: 1rem; }
.content-box p { color: var(--muted); margin-bottom: 0.7rem; }
.detail-panel { max-width: 1140px; margin: 2rem auto; padding: 0 1.5rem; display: flex; gap: 3rem; flex-wrap: wrap; }
.detail-panel img { flex: 1; min-width: 300px; max-width: 500px; height: 400px; object-fit: cover; border-radius: 8px; }
.site-foot { background: #fff; padding: 1.5rem; text-align: center; color: var(--muted); font-size: 0.9rem; border-top: 1px solid #d0e4f7; }