/* DevTools入門 - ベーススタイル */

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

body {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    line-height: 2.0;
    color: #333;
    background: #fdfcf9;
    font-size: 16px;
}

main, .main-content { max-width: 800px; margin: 0 auto; padding: 40px 20px; }
p { text-align: justify; margin-bottom: 1.2em; }

h1 { font-size: 1.75rem; font-weight: bold; margin-bottom: 1rem; color: #1a365d; border-bottom: 2px solid #1a365d; padding-bottom: 1rem; }
h2 { font-size: 1.4rem; color: #1a365d; margin: 2.5rem 0 1rem 0; padding-bottom: 0.5rem; border-bottom: 1px solid #d4c5a9; }
h3 { font-size: 1.15rem; color: #2c5282; margin: 2rem 0 0.8rem 0; }
h4 { font-size: 1rem; color: #2c5282; margin: 1.5rem 0 0.5rem 0; }

header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid #1a365d; }
header h1 { border-bottom: none; padding-bottom: 0; margin-bottom: 0.5rem; }
header .small { font-size: 0.9rem; color: #666; margin-bottom: 1rem; }
header .lead, .lead { background: #f8f6f1; padding: 1.2rem; border-left: 4px solid #1a365d; margin-top: 1rem; font-size: 0.95rem; }

.breadcrumb { background: #f8f6f1; padding: 0.75rem 1rem; font-size: 0.9rem; margin-bottom: 2rem; border-radius: 4px; }
.breadcrumb a { color: #1a365d; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

a { color: #1a365d; text-decoration: none; }
a:hover { text-decoration: underline; }

table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9rem; }
th, td { border: 1px solid #d4c5a9; padding: 0.6rem; text-align: left; }
th { background: #f8f6f1; font-weight: bold; color: #1a365d; }

code { font-family: "Consolas", "Monaco", monospace; background: #f0ede6; padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.9em; color: #c7254e; }
pre { background: #2d2d2d; color: #f8f8f2; padding: 1rem 1.2rem; border-radius: 6px; overflow-x: auto; margin: 1.5rem 0; font-size: 0.9rem; line-height: 1.6; }
pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

.shortcut { display: inline-block; background: linear-gradient(180deg, #f5f5f5 0%, #e0e0e0 100%); border: 1px solid #ccc; border-radius: 4px; padding: 0.15rem 0.5rem; font-family: "Consolas", monospace; font-size: 0.85em; color: #333; box-shadow: 0 2px 0 #999; margin: 0 0.1rem; }

.note { background: #f8f6f1; border-left: 4px solid #1a365d; padding: 1rem 1.2rem; margin: 1.5rem 0; font-size: 0.9rem; }
.note strong { display: block; color: #1a365d; margin-bottom: 0.5rem; }
.warning { background: #fffbeb; border-left: 4px solid #d97706; padding: 1rem 1.2rem; margin: 1.5rem 0; font-size: 0.9rem; }
.warning strong { display: block; color: #92400e; margin-bottom: 0.5rem; }
.tip { background: #ecfdf5; border-left: 4px solid #10b981; padding: 1rem 1.2rem; margin: 1.5rem 0; font-size: 0.9rem; }
.tip strong { display: block; color: #065f46; margin-bottom: 0.5rem; }
.success { background: #f0fdf4; border-left: 4px solid #22c55e; padding: 1rem 1.2rem; margin: 1.5rem 0; font-size: 0.9rem; }
.success strong { display: block; color: #166534; margin-bottom: 0.5rem; }

.steps { background: #fafafa; border: 1px solid #e0e0e0; border-radius: 6px; padding: 1.5rem; margin: 1.5rem 0; }
.steps h4 { margin-top: 0; color: #1a365d; }
.steps ol { margin: 0; padding-left: 1.5rem; }
.steps li { margin-bottom: 0.75rem; line-height: 1.8; }

.page-navigation { display: flex; justify-content: space-between; margin: 3rem 0 2rem 0; padding-top: 2rem; border-top: 1px solid #d4c5a9; }
.page-navigation a { color: #1a365d; text-decoration: none; padding: 0.5rem 1rem; border: 1px solid #d4c5a9; border-radius: 4px; transition: background 0.2s; font-size: 0.9rem; }
.page-navigation a:hover { background: #f8f6f1; text-decoration: none; }

.refs { background: #f8f6f1; padding: 1.2rem; margin-top: 2rem; font-size: 0.85rem; border-radius: 4px; }
.refs strong { display: block; color: #1a365d; margin-bottom: 0.75rem; }

ul, ol { margin: 1rem 0; padding-left: 1.5rem; }
li { margin-bottom: 0.5rem; }

@media (max-width: 768px) {
    body { font-size: 15px; }
    main, .main-content { padding: 1rem; }
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.2rem; }
    pre { font-size: 0.8rem; padding: 0.75rem; }
    .page-navigation { flex-direction: column; gap: 1rem; }
    .page-navigation a { text-align: center; }
    .shortcut { font-size: 0.75em; padding: 0.1rem 0.3rem; }
}