/* テンプレート51: パネル型 */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Roboto Condensed', 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 1.8; color: #1a1a1a; background: #f5f5f5; }

.site-header { background: #1a1a1a; padding: 0 30px; display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.5rem; font-weight: 700; color: #ffd000; padding: 20px 0; text-transform: uppercase; letter-spacing: 0.15em; }
.main-nav ul { list-style: none; display: flex; }
.main-nav a { display: block; padding: 25px 20px; color: #fff; text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; transition: all 0.3s; border-bottom: 3px solid transparent; }
.main-nav a:hover { color: #ffd000; border-bottom-color: #ffd000; }

.hero-panel { background: linear-gradient(135deg, #ffd000 0%, #ffea00 100%); padding: 100px 30px; position: relative; overflow: hidden; }
.hero-panel::before { content: ''; position: absolute; top: -50%; right: -20%; width: 80%; height: 200%; background: rgba(0,0,0,0.05); transform: rotate(-15deg); }
.hero-content { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
.hero-content h1 { font-size: 3rem; color: #1a1a1a; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px; }
.hero-content p { font-size: 1.2rem; color: #333; }

.main-content { padding: 60px 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 30px; }

/* パネルグリッド */
.panel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.panel { background: #fff; border-left: 5px solid #ffd000; position: relative; overflow: hidden; transition: all 0.4s; }
.panel.fade-in { opacity: 0; transform: translateY(30px); }
.panel.fade-in.visible { opacity: 1; transform: translateY(0); }
.panel:hover { transform: translateX(10px); box-shadow: -10px 10px 30px rgba(0,0,0,0.1); }
.panel-number { position: absolute; top: 20px; right: 20px; font-size: 4rem; font-weight: 700; color: rgba(255, 208, 0, 0.2); line-height: 1; }
.panel-body { padding: 40px; }
.panel-body h2 { font-size: 1.5rem; color: #1a1a1a; text-transform: uppercase; margin-bottom: 15px; }
.panel-body p { color: #666; }
.panel-image { height: 200px; }
.panel-image img { width: 100%; height: 100%; object-fit: cover; }

.full-panel { background: #1a1a1a; color: #fff; padding: 60px 40px; margin-top: 50px; }
.full-panel h2 { color: #ffd000; font-size: 1.8rem; text-transform: uppercase; margin-bottom: 20px; }
.full-panel p { color: rgba(255,255,255,0.8); }

.site-footer { background: #1a1a1a; color: #fff; padding: 50px 30px; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.footer-nav a { color: #ffd000; text-decoration: none; margin-left: 30px; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; }

.hamburger { display: none; width: 30px; height: 24px; position: relative; cursor: pointer; }
.hamburger span { display: block; position: absolute; width: 100%; height: 3px; background: #ffd000; transition: all 0.3s; }
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 10px; }
.hamburger span:nth-child(3) { top: 20px; }
.mobile-nav { display: none; position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: #1a1a1a; padding: 80px 30px; transition: right 0.4s; z-index: 999; }
.mobile-nav.open { right: 0; }
.mobile-nav a { display: block; padding: 15px 0; color: #ffd000; text-decoration: none; border-bottom: 1px solid #333; text-transform: uppercase; font-weight: 700; }

.back-to-top { display: none; position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: #ffd000; color: #1a1a1a; border: none; cursor: pointer; font-size: 1.2rem; font-weight: 700; z-index: 998; }

.sitemap-list { list-style: none; }
.sitemap-list li { margin-bottom: 15px; padding-left: 25px; position: relative; font-weight: 700; text-transform: uppercase; }
.sitemap-list li::before { content: '▸'; position: absolute; left: 0; color: #ffd000; }
.sitemap-list a { color: #1a1a1a; text-decoration: none; }

@media (max-width: 900px) {
    .panel-grid { grid-template-columns: 1fr; }
    .main-nav { display: none; }
    .hamburger { display: block; }
    .mobile-nav { display: block; }
    .hero-content h1 { font-size: 2rem; }
    .footer-inner { flex-direction: column; gap: 20px; }
}