/* リセットとベース設定 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
line-height: 1.8;
color: #333;
background-color: #f5f5f5;
}
/* ヘッダー */
header {
background-color: #fff;
border-bottom: 1px solid #e0e0e0;
padding: 2rem 1rem;
}
header h1 {
max-width: 800px;
margin: 0 auto;
font-size: 1.8rem;
font-weight: 600;
color: #222;
}
/* メインコンテンツ */
main {
max-width: 800px;
margin: 2rem auto;
padding: 2rem;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 見出し */
h2 {
font-size: 1.6rem;
color: #222;
margin-top: 2.5rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 3px solid #4a90e2;
}
h2:first-child {
margin-top: 0;
}
h3 {
font-size: 1.3rem;
color: #333;
margin-top: 2rem;
margin-bottom: 0.8rem;
padding-left: 0.8rem;
border-left: 4px solid #4a90e2;
}
h4 {
font-size: 1.1rem;
color: #444;
margin-top: 1.5rem;
margin-bottom: 0.6rem;
padding-left: 0.5rem;
border-left: 3px solid #ccc;
}
/* 段落 */
p {
margin-bottom: 1.5rem;
}
/* リスト */
ul, ol {
margin-bottom: 1.5rem;
padding-left: 2rem;
}
ul li, ol li {
margin-bottom: 0.5rem;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
/* テーブル */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1.5rem;
}
/* テーブルのレスポンシブ対応用ラッパー */
.table-wrapper {
overflow-x: auto;
margin-bottom: 1.5rem;
}
table thead {
background-color: #4a90e2;
color: #fff;
}
table th, table td {
padding: 0.8rem;
text-align: left;
border: 1px solid #ddd;
}
table tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
table tbody tr:hover {
background-color: #f0f0f0;
}
/* 画像 */
img {
max-width: 100%;
height: auto;
display: block;
margin: 1.5rem auto;
}
/* フッター */
footer {
background-color: #333;
color: #fff;
padding: 2rem 1rem 1rem;
margin-top: 3rem;
}
.footer-menu {
max-width: 800px;
margin: 0 auto 2rem;
}
.footer-menu ul {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
}
.footer-menu a {
color: #fff;
text-decoration: none;
transition: opacity 0.3s;
}
.footer-menu a:hover {
opacity: 0.7;
}
.copyright {
text-align: center;
font-size: 0.9rem;
color: #aaa;
padding-top: 1rem;
border-top: 1px solid #555;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
header h1 {
font-size: 1.5rem;
}
main {
margin: 1rem;
padding: 1.5rem;
}
h2 {
font-size: 1.4rem;
}
h3 {
font-size: 1.2rem;
}
h4 {
font-size: 1rem;
}
.footer-menu ul {
flex-direction: column;
gap: 1rem;
text-align: center;
}
table {
font-size: 0.9rem;
}
table th, table td {
padding: 0.5rem;
}
}