/* テンプレート43: 和風デザイン */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600;700&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Serif JP', serif; font-size: 16px; line-height: 2.2; color: #1a237e; background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%); min-height: 100vh; }

.site-header { background: linear-gradient(180deg, #1a237e 0%, #283593 100%); padding: 40px; text-align: center; position: relative; }
.site-header::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: #c62828; }
.site-title { font-size: 2rem; font-weight: 600; color: #fff; letter-spacing: 0.3em; }
.site-subtitle { font-size: 0.85rem; color: rgba(255,255,255,0.7); margin-top: 10px; letter-spacing: 0.2em; }

/* 右固定縦書きナビ */
.vertical-nav { position: fixed; top: 50%; right: 0; transform: translateY(-50%); background: #1a237e; padding: 30px 15px; z-index: 1000; border-radius: 8px 0 0 8px; }
.vertical-nav ul { list-style: none; writing-mode: vertical-rl; }
.vertical-nav a { display: block; padding: 15px 8px; color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.9rem; letter-spacing: 0.15em; transition: all 0.3s; border-right: 2px solid transparent; }
.vertical-nav a:hover, .vertical-nav a.active { color: #fff; border-right-color: #c62828; }

.main-content { padding: 60px 0; margin-right: 60px; }
.container { max-width: 850px; margin: 0 auto; padding: 0 40px; }

.content-box { background: #fff; border-radius: 4px; padding: 50px; box-shadow: 0 3px 20px rgba(26, 35, 126, 0.08); margin-bottom: 40px; border-top: 4px solid #c62828; }
.content-box h2 { font-size: 1.5rem; color: #1a237e; margin-bottom: 25px; letter-spacing: 0.1em; position: relative; padding-left: 20px; }
.content-box h2::before { content: ''; position: absolute; left: 0; top: 5px; width: 4px; height: 25px; background: #c62828; }
.content-box p { color: #37474f; }

.single-image { text-align: center; margin: 30px 0; }
.single-image img { max-width: 100%; height: auto; max-height: 300px; border: 1px solid #e0e0e0; }

.site-footer { background: #1a237e; color: rgba(255,255,255,0.7); padding: 40px; text-align: center; margin-right: 60px; }
.footer-nav a { color: rgba(255,255,255,0.7); text-decoration: none; margin: 0 15px; letter-spacing: 0.1em; }

.back-to-top { display: none; position: fixed; bottom: 30px; right: 80px; width: 45px; height: 45px; background: #c62828; color: #fff; border: none; cursor: pointer; font-size: 1rem; z-index: 998; }

.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.8s; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

.sitemap-list { list-style: none; }
.sitemap-list li { margin-bottom: 15px; padding-left: 25px; position: relative; }
.sitemap-list li::before { content: '・'; position: absolute; left: 5px; color: #c62828; }
.sitemap-list a { color: #1a237e; text-decoration: none; }

.mobile-header { display: none; position: fixed; top: 0; left: 0; right: 0; background: #1a237e; padding: 15px 20px; z-index: 1001; }
.mobile-toggle { display: none; position: fixed; top: 15px; right: 20px; width: 35px; height: 30px; background: #c62828; border: none; color: #fff; z-index: 1002; cursor: pointer; }

@media (max-width: 768px) {
    .vertical-nav { display: none; transform: none; top: 0; right: -200px; height: 100vh; border-radius: 0; padding: 80px 20px 30px; transition: right 0.4s; }
    .vertical-nav.open { right: 0; display: block; }
    .vertical-nav ul { writing-mode: horizontal-tb; }
    .mobile-header, .mobile-toggle { display: block; }
    .main-content, .site-footer { margin-right: 0; padding-top: 80px; }
    .container { padding: 0 20px; }
    .content-box { padding: 30px 25px; }
}