* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --primary-dark:#0a0a0a; --primary-light:#fff; --accent-orange:#ff6b35; --accent-teal:#00b4d8; --accent-purple:#7209b7; --text-gray:#666; --bg-light:#f8f8f8; --border-light:#e0e0e0; }
html { scroll-behavior: smooth; }
body { background:#fff; color:var(--primary-dark); line-height:1.8; }

/* 固定ヘッダー（ダーク） */
.tourism-page nav { position: fixed; top:0; width:100%; background:rgba(10,10,10,0.95); backdrop-filter: blur(10px); z-index:1000; padding:15px 30px; }
.tourism-page nav .logo, .tourism-page nav .nav-links a { color:#fff; }

/* ヒーロー */
.hero { margin-top:60px; height:400px; background: linear-gradient(135deg, var(--accent-orange), var(--accent-teal)); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; width:200%; height:200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px); background-size:50px 50px; animation: move 20s linear infinite; }
@keyframes move { 0%{transform:translate(0,0);}100%{transform:translate(50px,50px);} }
.hero-content { text-align:center; color:#fff; position:relative; z-index:1; }
.hero-title { font-size:3rem; font-weight:300; letter-spacing:0.1em; margin-bottom:15px; }
.hero-subtitle { font-size:1.2rem; opacity:0.9; }

/* レイアウト */
.main-container { max-width:1400px; margin:0 auto; display:flex; gap:50px; padding:50px 30px; }
.toc-sidebar { width:280px; position: sticky; top:100px; height: fit-content; max-height: calc(100vh - 120px); overflow-y:auto; }
.toc-container { background:var(--bg-light); border-radius:12px; padding:25px; }
.toc-title { font-size:1.1rem; font-weight:600; margin-bottom:20px; color:var(--accent-orange); display:flex; align-items:center; gap:8px; }
.toc-title::before { content:'📑'; }
.toc-list { list-style:none; }
.toc-item { margin-bottom:3px; position:relative; transition:all .3s ease; }
.toc-item.level-2 { padding-left:20px; }
.toc-item.level-3 { padding-left:40px; }
.toc-link { display:block; padding:8px 12px; color:var(--text-gray); text-decoration:none; font-size:.95rem; border-radius:6px; transition:all .3s ease; position:relative; }
.toc-link:hover { background:#fff; color:var(--accent-orange); transform: translateX(5px); }
.toc-link.active { background:#fff; color:var(--accent-orange); font-weight:500; box-shadow:0 2px 8px rgba(255,107,53,0.2); }
.toc-link.active::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:70%; background:var(--accent-orange); border-radius:2px; }
.toc-progress { margin-top:20px; padding-top:20px; border-top:1px solid var(--border-light); }
.progress-label { font-size:.85rem; color:var(--text-gray); margin-bottom:8px; }
.progress-bar { height:4px; background:var(--border-light); border-radius:2px; overflow:hidden; }
.progress-fill { height:100%; background: linear-gradient(90deg, var(--accent-orange), var(--accent-teal)); width:0%; transition: width .3s ease; }

.content { flex:1; max-width:800px; }
.content h1 { font-size:2.5rem; font-weight:300; margin-bottom:30px; padding-bottom:20px; border-bottom:2px solid var(--border-light); }
.content h2 { font-size:2rem; font-weight:400; margin:50px 0 25px; padding-bottom:10px; border-bottom:1px solid var(--border-light); position:relative; }
.content h2::before { content:''; position:absolute; bottom:-1px; left:0; width:60px; height:2px; background:var(--accent-orange); }
.content h3 { font-size:1.5rem; font-weight:500; margin:35px 0 20px; color:var(--accent-orange); }
.content p { margin-bottom:20px; color:#333; }
.content ul, .content ol { margin:20px 0; padding-left:30px; }
.content li { margin-bottom:10px; }
.content blockquote { margin:30px 0; padding:20px 25px; background:var(--bg-light); border-left:4px solid var(--accent-orange); font-style:italic; }
.content code { background:var(--bg-light); padding:2px 6px; border-radius:3px; font-family:'Courier New', monospace; }
.content pre { background:var(--primary-dark); color:#fff; padding:20px; border-radius:8px; overflow-x:auto; margin:25px 0; }
.content img { max-width:100%; height:auto; border-radius:8px; margin:20px 0; }
.highlight-box { background: linear-gradient(135deg, rgba(255,107,53,0.1), rgba(0,180,216,0.1)); border-radius:12px; padding:25px; margin:30px 0; border:1px solid rgba(255,107,53,0.2); }
.highlight-box h4 { color:var(--accent-orange); margin-bottom:15px; }

.right-sidebar { width:250px; }
.sidebar-widget { background:var(--bg-light); border-radius:12px; padding:20px; margin-bottom:25px; }
.sidebar-widget h4 { font-size:1.1rem; margin-bottom:15px; color:var(--accent-orange); }
.sidebar-widget ul { list-style:none; }
.sidebar-widget li { margin-bottom:10px; }
.sidebar-widget a { color:var(--text-gray); text-decoration:none; font-size:.95rem; transition:color .3s; }
.sidebar-widget a:hover { color:var(--accent-orange); }

.back-to-top { position:fixed; bottom:30px; right:30px; width:50px; height:50px; background:var(--accent-orange); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; pointer-events:none; transition: all .3s; }
.back-to-top.visible { opacity:1; pointer-events:all; }
.back-to-top:hover { transform: translateY(-5px); box-shadow:0 10px 30px rgba(255,107,53,0.3); }

@media (max-width:1200px){ .right-sidebar{ display:none; } }
@media (max-width:768px){ .toc-sidebar{ display:none; } .main-container{ padding:30px 20px; } .hero-title{ font-size:2rem; } .content h1{ font-size:2rem; } .tourism-page nav .nav-links{ display:none; } }