/* ------------------------------
 ベーススタイル
------------------------------ */
:root {
--bg-body: #f7f4f2;
--bg-header: #fff;
--bg-sidebar: #f1e6df;
--bg-main: #ffffff;
--bg-footer: #f9f3ee;
--border-soft: #e0cfc1;
--accent: #c27b7f; /* ピンクベージュ系アクセント */
--accent-deep: #8f4d54;/* 見出し・リンク用の濃い色 */
--text-main: #333333;
--text-muted: #777777;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: var(--bg-body);
color: var(--text-main);
font-family: "Meiryo", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
line-height: 1.7;
}
a {
color: var(--accent-deep);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
height: auto;
}
/* ------------------------------
 レイアウト
------------------------------ */
.site-wrapper {
max-width: 1120px;
margin: 0 auto;
padding: 0 16px 40px;
}
header.site-header {
background: var(--bg-header);
padding: 24px 0 16px;
border-bottom: 3px solid var(--accent);
}
header.site-header h1 {
margin: 0;
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--accent-deep);
}
header.site-header p.site-subtitle {
margin: 8px 0 0;
font-size: 0.95rem;
color: var(--text-muted);
}
/* ヘッダー画像（任意） */
.header-image {
margin-top: 18px;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border-soft);
}
/* メインコンテンツ＋サイドバー */
.content-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 24px;
margin-top: 24px;
}
aside.sidebar {
background: var(--bg-sidebar);
border-radius: 12px;
padding: 16px 18px 20px;
border: 1px solid var(--border-soft);
}
.sidebar-title {
margin: 0 0 10px;
font-size: 1.05rem;
font-weight: 700;
color: var(--accent-deep);
}
.sidebar p {
margin: 0 0 10px;
font-size: 0.9rem;
color: var(--text-muted);
}
.sidebar-nav ul {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px dashed rgba(0,0,0,0.07);
}
.sidebar-nav li {
border-bottom: 1px dashed rgba(0,0,0,0.07);
}
.sidebar-nav a {
display: block;
padding: 10px 2px;
font-size: 0.95rem;
position: relative;
}
.sidebar-nav a::before {
content: "";
font-size: 0.65rem;
color: var(--accent);
margin-right: 6px;
}
main.content-area {
background: var(--bg-main);
border-radius: 12px;
padding: 20px 20px 28px;
border: 1px solid var(--border-soft);
max-width: 820px;
}
/* ------------------------------
 本文エリア（見出し・本文・リスト・テーブル等）
------------------------------ */
main.content-area p {
margin: 0 0 1.2em;
font-size: 0.98rem;
}
main.content-area img {
display: block;
margin: 18px auto;
border-radius: 8px;
}
/* H2?H4 見出し装飾 */
main.content-area h2 {
margin: 1.8em 0 0.8em;
padding: 0.6em 0.9em;
border-left: 6px solid var(--accent);
background: linear-gradient(to right, #fdf7f5, #f8ece7);
font-size: 1.25rem;
font-weight: 700;
color: var(--accent-deep);
}
main.content-area h3 {
margin: 1.6em 0 0.6em;
padding-bottom: 0.3em;
border-bottom: 2px solid rgba(194, 123, 127, 0.3);
font-size: 1.1rem;
font-weight: 600;
color: #503337;
}
main.content-area h4 {
margin: 1.2em 0 0.5em;
padding: 0.3em 0.6em;
border-radius: 999px;
background: #f4e5e3;
font-size: 1rem;
font-weight: 600;
display: inline-block;
color: #5a4042;
}
/* リスト */
main.content-area ul {
padding-left: 1.4em;
margin: 0 0 1.2em;
}
main.content-area ul li {
margin: 0.2em 0;
padding-left: 0.2em;
}
main.content-area ol {
padding-left: 1.6em;
margin: 0 0 1.2em;
}
main.content-area ol li {
margin: 0.2em 0;
}
/* テーブル */
main.content-area table {
width: 100%;
border-collapse: collapse;
margin: 1.4em 0;
font-size: 0.95rem;
background: #fff;
border-radius: 10px;
overflow: hidden;
border: 1px solid #ebddd0;
}
main.content-area th,
main.content-area td {
padding: 10px 12px;
border-bottom: 1px solid #f0e2d8;
vertical-align: top;
}
main.content-area th {
background: linear-gradient(to bottom, #f7e8e4, #f1d8d1);
font-weight: 600;
color: #5a383b;
text-align: left;
white-space: nowrap;
}
main.content-area tr:nth-child(even) td {
background: #fdf8f6;
}
main.content-area tr:last-child th,
main.content-area tr:last-child td {
border-bottom: none;
}
/* 強調 */
main.content-area strong {
font-weight: 700;
color: #5a3538;
}
/* ------------------------------
 フッター
------------------------------ */
footer.site-footer {
margin-top: 32px;
padding: 20px 0 28px;
background: var(--bg-footer);
border-top: 1px solid var(--border-soft);
font-size: 0.85rem;
color: var(--text-muted);
}
.footer-inner {
max-width: 1120px;
margin: 0 auto;
padding: 0 16px;
}
.footer-sitemap-title {
font-size: 0.9rem;
font-weight: 600;
margin: 0 0 6px;
color: #5c4a3d;
}
nav.footer-sitemap {
margin-bottom: 10px;
}
nav.footer-sitemap ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
}
nav.footer-sitemap li a {
font-size: 0.85rem;
position: relative;
padding-left: 12px;
}
nav.footer-sitemap li a::before {
content: "";
position: absolute;
left: 0;
top: 0;
}
.footer-disclaimer {
margin: 10px 0 4px;
line-height: 1.6;
}
.footer-copy {
margin: 6px 0 0;
font-size: 0.8rem;
color: #a0907f;
}
/* ------------------------------
 レスポンシブ
------------------------------ */
@media (max-width: 768px) {
.site-wrapper {
padding: 0 12px 32px;
}
header.site-header {
padding: 18px 0 12px;
}
header.site-header h1 {
font-size: 1.4rem;
}
.content-layout {
display: block;
margin-top: 18px;
}
/* SPでは左メニューを非表示にし、フッターにメニューを集約 */
aside.sidebar {
display: none;
}
main.content-area {
padding: 16px 14px 22px;
border-radius: 10px;
}
main.content-area h2 {
font-size: 1.15rem;
padding: 0.55em 0.8em;
}
main.content-area h3 {
font-size: 1.02rem;
}
footer.site-footer {
padding-top: 16px;
}
nav.footer-sitemap ul {
flex-direction: column;
gap: 4px;
}
}