/* -------------------------
 Base
------------------------- */
:root{
--bg:#fffdf8;
--fg:#2a2a2a;
--muted:#666;
--brand:#36a38f; /* 明るめグリーン */
--brand-weak:#e6faf6;/* 薄いティント */
--accent:#ffd36b;/* ハイライト(明るいイエロー) */
--card:#ffffff;
--line:#e9e5da;
--radius:18px;
--shadow:0 6px 22px rgba(0,0,0,.06);
}
html,body{height:100%}
body{
margin:0;
color:var(--fg);
background:linear-gradient(180deg,#fffefb 0%, var(--bg) 120%);
font-family: "Meiryo","Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP",sans-serif;
line-height:1.78;
font-size:16px;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block;}
a{color:#0a7b68; text-decoration:underline;}
a:hover{opacity:.9}
/* -------------------------
 Layout
------------------------- */
.container{
max-width:1080px;
margin:0 auto;
padding:16px clamp(16px, 3vw, 28px) 40px;
}
header.site-header{
background:linear-gradient(135deg, var(--brand-weak), #fff);
border:1px solid var(--line);
padding:20px clamp(16px,2.5vw,28px);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.site-title{
margin:0 0 10px;
font-size:clamp(22px, 3.6vw, 34px);
letter-spacing:.02em;
line-height:1.35;
}
.site-title a{
margin:0 0 10px;
font-size:clamp(22px, 3.6vw, 34px);
letter-spacing:.02em;
line-height:1.35;
text-decoration: none;
}
.header-hero{
margin-top:14px;
border-radius:14px;
overflow:hidden;
aspect-ratio: 12/4; /* 横長の任意画像を想定。不要ならfigureごと削除 */
background:#f5fbf9;
border:1px solid var(--line);
}
.layout{
margin-top:22px;
display:flex;
gap:28px;
align-items: flex-start;
}
main{
flex: 1 1 auto;
max-width: 600px; /* 指定要件：メイン横幅は最大でも約600px */
background:var(--card);
border:1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: clamp(16px,2.6vw,28px);
}
aside.sidebar{
flex: 0 0 280px;/* PCで右カラム */
position: sticky;
top:18px;
align-self: flex-start;
}
.menu-card{
background:var(--card);
border:1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding:18px;
}
.menu-card h2{
margin:0 0 10px;
font-size:18px;
color:#0e7f6b;
}
.side-list{
list-style:none;
margin:0; padding:0;
}
.side-list li+li{margin-top:10px;}
.side-list a{
display:block;
padding:10px 12px;
border:1px solid var(--line);
border-radius:12px;
background:#fff;
text-decoration:none;
}
.side-list a:hover{background: #f7fffb;}
/* -------------------------
 Article (本文エリア)
 ※ 見出し・表・リストは class を付けずに装飾
------------------------- */
main p{
margin: 1.05em 0; /* 段落間の行間を適度に */
}
main img{
margin: 16px auto;/* デフォルト中央寄せ */
}
main h2{
margin: 28px 0 14px;
font-size: clamp(20px, 2.6vw, 24px);
line-height:1.4;
padding: 10px 14px;
border-radius: 12px;
border:1px solid var(--line);
background:
linear-gradient(180deg, #ffffff 0%, #fffdf6 60%),
radial-gradient(120% 120% at 0% 0%, #fff 0%, #fff7da 60%, transparent 60%);
box-shadow: inset 0 0 0 2px rgba(255,227,141,.35);
}
main h3{
margin: 22px 0 10px;
font-size: 18px;
padding-left: 12px;
border-left: 4px solid var(--brand);
}
main h4{
margin: 18px 0 6px;
font-size: 16px;
color: var(--muted);
}
/* リスト */
main ul, main ol{ margin: 0 0 1.1em 1.4em; }
main li{ margin: .4em 0; }
/* テーブル */
main table{
width:100%;
border-collapse: collapse;
margin: 14px 0 18px;
table-layout: fixed;
border:1px solid var(--line);
background:#fff;
border-radius:12px; /* 角丸用のラッパ対応 */
overflow:hidden;
display:block;/* 小画面で横スクロールさせないため block + overflow-auto */
}
main thead th{
background: linear-gradient(180deg, #fff7cf, #fff1b0);
color:#5b4a00;
font-weight:700;
}
main th, main td{
padding:12px 10px;
border-bottom:1px solid var(--line);
word-break: break-word;
}
main tr:nth-child(even) td{ background:#fffdf2; }
/* 表が画面からはみ出る場合に備えてラッパ */
.table-wrap{
overflow:auto;
-webkit-overflow-scrolling:touch;
}
/* 引用など補助要素（任意） */
main blockquote{
margin: 14px 0;
padding: 10px 14px;
border-left: 4px solid var(--accent);
background: #fffaf0;
border-radius: 8px;
}
/* -------------------------
 Footer
------------------------- */
footer.site-footer{
margin-top:26px;
background:#ffffff;
border:1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 14px clamp(16px,2.6vw,24px);
}
.footer-inner{
display:flex;
flex-wrap:wrap;
gap:12px 20px;
align-items:center;
justify-content:space-between;
}
.footer-links{
display:flex; gap:18px; flex-wrap:wrap;
}
.footer-links a{
text-decoration:none;
border-bottom:1px dashed #0e7f6b;
}
.copyright{color:var(--muted); font-size:.95rem}
/* SP用フッターメニュー（SPのみ表示） */
.footer-menu{
margin-top:10px;
padding-top:10px;
border-top:1px dashed var(--line);
display:none;
}
.footer-menu h2{
margin:0 0 8px;
font-size:16px;
color:#0e7f6b;
}
.footer-menu a{
display:block;
padding:10px 12px;
border:1px solid var(--line);
border-radius:12px;
background:#fff;
text-decoration:none;
}
.footer-menu a + a{ margin-top:8px;}
/* -------------------------
 Responsive
------------------------- */
@media (max-width: 960px){
.layout{
gap:18px;
}
aside.sidebar{
display:none; /* SPではメニューをフッターへ */
}
.footer-menu{
display:block;/* SPで表示 */
}
}