*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --navy:#1a2744; --navy-light:#243456; --navy-dark:#111b30;
  --gold:#d4a843; --gold-light:#e8c96a;
  --white:#f0f0f0; --gray:#b0b8c8;
  --card-bg:#1e2f4d; --border:#2e4470;
  --sidebar-w:220px; --accent:#e94560;
}

.light-mode {
  --navy:#f5f5f5; --navy-light:#e8e8e8; --navy-dark:#ffffff;
  --gold:#1a5276; --gold-light:#2471a3;
  --white:#333333; --gray:#666666;
  --card-bg:#ffffff; --border:#dddddd;
}

html { font-size:14px; }
body { font-family:"Helvetica Neue","Hiragino Kaku Gothic ProN","Meiryo",sans-serif; background:var(--navy-dark); color:var(--white); line-height:1.6; display:flex; min-height:100vh; }

.sidebar { width:var(--sidebar-w); min-height:100vh; background:var(--navy); border-right:2px solid var(--gold); display:flex; flex-direction:column; position:fixed; top:0; left:0; overflow-y:auto; }
.sidebar-header { padding:20px 16px; text-align:center; border-bottom:1px solid var(--border); }
.sidebar-header h1 { font-size:1.3rem; color:var(--gold); }
.subtitle { font-size:0.75rem; color:var(--gray); margin-top:4px; }
.nav-list { list-style:none; flex:1; padding:8px 0; }
.nav-link { display:block; padding:10px 20px; color:var(--gray); text-decoration:none; font-size:0.9rem; border-left:3px solid transparent; }
.nav-link:hover { color:var(--white); background:var(--navy-light); }
.nav-link.active { color:var(--gold); border-left-color:var(--gold); background:var(--navy-light); }
.sidebar-footer { padding:12px 16px; border-top:1px solid var(--border); }

.btn { padding:0.5rem 1rem; border:none; border-radius:6px; cursor:pointer; font-size:0.85rem; transition:opacity 0.2s; }
.btn:hover { opacity:0.85; }
.btn-outline { background:transparent; color:var(--gold-light); border:1px solid var(--gold); width:100%; margin-bottom:6px; }
.btn-small { padding:0.3rem 0.8rem; font-size:0.8rem; background:var(--navy-light); color:var(--gold-light); border:1px solid var(--border); border-radius:4px; cursor:pointer; margin-top:8px; }
.theme-toggle { width:100%; margin-top:8px; padding:0.4rem 0.8rem; background:transparent; color:var(--gray); border:1px solid var(--border); border-radius:4px; cursor:pointer; font-size:0.8rem; }

.main-content { margin-left:var(--sidebar-w); flex:1; padding:24px 32px; min-height:100vh; }
.page { display:none; }
.page.active { display:block; }
.page-title { font-size:1.4rem; color:var(--gold); margin-bottom:16px; padding-bottom:8px; border-bottom:2px solid var(--gold); }

.intro-card { background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:20px 24px; margin-bottom:16px; }
.intro-card ul { padding-left:20px; margin:12px 0; }
.intro-card li { margin-bottom:6px; color:var(--gray); }
.intro-note { color:var(--gold-light); font-weight:600; margin-top:12px; }

.form-section { background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:24px; margin-bottom:16px; }
.form-section h3 { color:var(--gold); font-size:1.05rem; margin:20px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.form-section h3:first-child { margin-top:0; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.form-group { margin-bottom:12px; }
.form-group label { display:block; font-size:0.85rem; color:var(--gray); margin-bottom:4px; }
.form-input { width:100%; padding:8px 12px; background:var(--navy-dark); color:var(--white); border:1px solid var(--border); border-radius:6px; font-size:0.9rem; }
.form-input:focus { outline:none; border-color:var(--gold); }
.form-input.full-width { grid-column:1/-1; }
.form-textarea { width:100%; padding:10px 12px; background:var(--navy-dark); color:var(--white); border:1px solid var(--border); border-radius:6px; font-size:0.9rem; resize:vertical; }
.form-textarea:focus { outline:none; border-color:var(--gold); }
.form-note { font-size:0.8rem; color:var(--gray); margin:8px 0; }
.repeater-item { padding:12px 0; border-bottom:1px dashed var(--border); }
.repeater-item:last-child { border-bottom:none; }
.btn-remove { margin-top:4px; padding:0.2rem 0.6rem; font-size:0.75rem; background:transparent; color:var(--gray); border:1px solid var(--border); border-radius:4px; cursor:pointer; }
.btn-remove:hover { color:var(--accent); border-color:var(--accent); }

/* ガイド・FAQページ */
.guide-text { color:var(--gray); margin-bottom:8px; }
.guide-list { padding-left:20px; margin:12px 0; }
.guide-list li { margin-bottom:8px; color:var(--gray); }
.form-section p { margin-bottom:10px; }
.faq-item { padding:14px 0; border-bottom:1px dashed var(--border); }
.faq-item:last-child { border-bottom:none; }
.faq-item h3 { color:var(--gold); font-size:1rem; margin-bottom:6px; }
.faq-item p { color:var(--gray); }

/* アフィリエイト枠（PRカード） */
.ad-card { position:relative; background:var(--card-bg); border:1px solid var(--gold); border-radius:8px; padding:20px 24px; margin:16px 0; }
.ad-label { position:absolute; top:10px; right:12px; font-size:0.7rem; color:var(--navy-dark); background:var(--gold); padding:2px 8px; border-radius:3px; font-weight:700; letter-spacing:0.05em; }
.ad-body h4 { color:var(--gold-light); font-size:1.05rem; margin-bottom:8px; padding-right:40px; }
.ad-body p { color:var(--gray); font-size:0.9rem; margin-bottom:12px; }
.btn-cta { display:inline-block; background:var(--gold); color:var(--navy-dark); font-weight:700; text-decoration:none; padding:0.6rem 1.4rem; border-radius:6px; }
.btn-cta:hover { background:var(--gold-light); }

/* サイドバーのブログリンク・フッター */
.sidebar-blog-link { display:block; margin-top:10px; text-align:center; font-size:0.8rem; color:var(--gold-light); text-decoration:none; }
.sidebar-blog-link:hover { text-decoration:underline; }
.site-footer { margin-top:32px; padding:16px 0; border-top:1px solid var(--border); font-size:0.75rem; color:var(--gray); text-align:center; }
.site-footer a { color:var(--gold-light); }

@media print {
  .sidebar { display:none; }
  .main-content { margin-left:0; }
  .page { display:block !important; page-break-after:always; }
  .info-page, .ad-card, .site-footer { display:none !important; }
  body { background:#fff; color:#000; }
  .form-section { border:1px solid #ccc; }
  .form-input, .form-textarea { border:1px solid #ccc; background:#fff; color:#000; }
  .btn, .theme-toggle, .btn-remove { display:none; }
}

@media (max-width:768px) {
  .sidebar { width:100%; min-height:auto; position:relative; flex-direction:row; flex-wrap:wrap; }
  .sidebar-header { width:100%; }
  .nav-list { display:flex; flex-wrap:wrap; padding:4px; }
  .nav-link { padding:6px 12px; font-size:0.8rem; }
  .sidebar-footer { width:100%; display:flex; flex-wrap:wrap; gap:4px; }
  .sidebar-footer .btn, .sidebar-footer .theme-toggle { width:auto; flex:1; }
  .main-content { margin-left:0; padding:16px; }
  .form-grid { grid-template-columns:1fr; }
}