/* 共通スタイル（2000年代風レトロ） */

/* リセット */
* { box-sizing: border-box; }
body, h1, h2, h3, p, ul, li, a { margin: 0; padding: 0; list-style: none; text-decoration: none; }

/* ベーススタイル */
body {
    background: repeating-linear-gradient(45deg, #f6f3e8 0px, #f6f3e8 10px, #efe9d6 10px, #efe9d6 20px);
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #222;
    line-height: 1.6;
}

/* レイアウト */
header { text-align: center; padding: 1rem 0 0.5rem; border-bottom: 3px solid #999; background: linear-gradient(#fff, #f2f2f2); }
.site-title { font-size: 2.2rem; letter-spacing: 2px; margin-bottom: 0.4rem; }

.main-nav ul { display: inline-flex; gap: 1rem; background: #e0e0e0; padding: 0.3rem 0.6rem; border: 2px inset #c8c8c8; border-radius: 4px; }
.main-nav a { color: #0044cc; font-weight: bold; }

.social { margin-top: 0.5rem; font-size: 0.9rem; }
.social a { color: #444; }

/* 中央カラム */
.content { width: 92%; max-width: 980px; margin: 1.2rem auto; padding: 0 0.5rem; }

.hero { background: #fff; padding: 0.8rem; border: 2px solid #ddd; margin-bottom: 1rem; box-shadow: 3px 3px 0 rgba(0,0,0,0.05); }
.hero p { font-size: 1.05rem; }

.blog-links { background: #fff; padding: 0.8rem; border: 2px dashed #ccc; margin-bottom: 1rem; }
.blog-links h2 { margin-bottom: 0.6rem; font-size: 1.1rem; }
.status { color: #880000; font-weight: bold; }

/* 動画レイアウト（横並び・レスポンシブ） */
.video-section { background: #fff; padding: 0.8rem; border: 2px solid #ddd; }
.video-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: start; }
.video-wrap { border: 1px solid #bbb; padding: 0.4rem; background: #fafafa; max-width: none; }
.video-wrap h3 { margin-bottom: 0.4rem; font-size: 1rem; }
.video-wrap iframe { width: 100%; aspect-ratio: 16/9; height: auto; display: block; border: none; }
@media (max-width: 900px) {
    .video-container { grid-template-columns: 1fr; }
    .video-wrap iframe { aspect-ratio: 16/9; height: auto; }
}

/* フッター */
footer { text-align: center; padding: 0.8rem 0; margin-top: 1rem; border-top: 3px solid #999; background: linear-gradient(#f2f2f2, #fff); }
.footer-copyleft { font-weight: bold; }

/* 小さな装飾で2000年代らしさ */
hr.retro { border: none; border-top: 2px dotted #999; margin: 1rem 0; }

/* 決してローカル専用の機能は追加しない（注記） */
/* No localStorage/sessionStorage usage; no local comment system */