/* 全体の基本設定 */
body {
margin: 0;
padding: 0;
background: #f8f3eb; /* 和紙っぽい薄い生成り */
color: #4a3b32;
font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, "Yu Gothic", sans-serif;
line-height: 1.8;
-webkit-text-size-adjust: 100%;
}
a {
color: #b35c4a; /* 小豆色 */
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* レイアウト枠（1カラム） */
.wrapper {
max-width: 800px;/* メインカラム最大800px */
margin: 0 auto;
padding: 16px 16px 48px; /* 下はフッターとの間に少し余白 */
box-sizing: border-box;
}
header {
margin-bottom: 24px;
text-align: center;
}
header h1 {
font-size: 1.8rem;
margin: 16px 0 8px;
font-weight: 700;
letter-spacing: 0.12em;
}
header p {
margin: 0;
font-size: 0.9rem;
color: #7a6a5c;
}
/* ヘッダー画像（着脱しやすいようにブロックで定義） */
.header-image {
margin-top: 16px;
}
.header-image img {
display: block;
width: 100%;/* メインカラムと同幅 */
height: auto;
border-radius: 8px;
}
/* 本文エリア */
main {
background: #fffdf8;
border-radius: 12px;
padding: 20px 16px 24px;
box-sizing: border-box;
box-shadow: 0 2px 4px rgba(120, 93, 72, 0.05);
}
.content p {
margin: 0 0 1.2em;
}
/* 本文内の画像はデフォルトで中央寄せ＆リサイズ */
.content img {
display: block;
max-width: 100%;
height: auto;
margin: 1.5em auto;
border-radius: 8px;
}
/* 見出し（H2〜H4）装飾：派手すぎない和菓子風 */
.content h2,
.content h3,
.content h4 {
margin: 1.8em 0 0.8em;
font-weight: 700;
color: #5b4237;
}
.content h2 {
font-size: 1.3rem;
padding: 0.6em 0.8em;
background: linear-gradient(90deg, #f4e4d6 0%, #fdf8f1 100%);
border-left: 4px solid #b35c4a;/* 小豆色の帯 */
border-radius: 6px;
}
.content h3 {
font-size: 1.1rem;
padding: 0.4em 0.6em;
border-left: 3px solid #c88a68;/* 焼き色っぽい色 */
background: #fcf5ec;
border-radius: 4px;
}
.content h4 {
font-size: 1rem;
padding-left: 0.6em;
border-left: 2px dotted #c1a38a; /* 金平糖のような点線 */
}
/* リスト（ul / ol） */
.content ul,
.content ol {
padding-left: 1.4em;
margin: 0 0 1.2em;
}
.content li {
margin: 0.2em 0;
}
.content ul li::marker {
color: #b35c4a; /* 小豆色マーカー */
}
.content ol li::marker {
color: #8c9d5b; /* 抹茶色マーカー */
}
/* テーブル装飾 */
.content table {
width: 100%;
border-collapse: collapse;
margin: 1.5em 0;
font-size: 0.95rem;
}
.content th,
.content td {
border: 1px solid #e2d4c2;
padding: 8px 10px;
text-align: left;
vertical-align: middle;
}
.content th {
background: #f3e6d7;
font-weight: 600;
white-space: nowrap;
}
.content tbody tr:nth-child(odd) {
background: #fdf8f2;
}
/* フッターメニュー */
footer {
border-top: 1px solid #e0d4c8;
background: #f5ede3;
padding: 12px 16px 16px;
}
.footer-inner {
max-width: 800px;
margin: 0 auto;
box-sizing: border-box;
font-size: 0.85rem;
color: #7a6a5c;
}
.footer-nav {
display: flex;
flex-wrap: wrap;
gap: 12px 16px;
margin-bottom: 8px;
}
.footer-nav a {
font-size: 0.9rem;
color: #7a4f3a;
text-decoration: none;
position: relative;
padding-bottom: 2px;
}
.footer-nav a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: rgba(179, 92, 74, 0.4);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.2s ease;
}
.footer-nav a:hover::after {
transform: scaleX(1);
}
.footer-copy {
text-align: right;
font-size: 0.8rem;
}
/* スマホなど横幅が狭い場合の調整 */
@media (max-width: 600px) {
.wrapper {
padding: 12px 10px 40px;
}
header h1 {
font-size: 1.5rem;
}
main {
padding: 16px 12px 20px;
}
.footer-inner {
font-size: 0.8rem;
}
.footer-nav {
flex-direction: column; /* スマホでは縦並びに */
align-items: flex-start;
}
.footer-copy {
text-align: left;
margin-top: 4px;
}
}