/* =============================
 基本トークン（色・余白・影）
============================== */
:root{
/* “働くキラキラ”の雰囲気：清潔×上品ピンク×ニュートラル */
--bg: #fffdfd;
--fg: #1e1e1e;
--muted: #6b6b6b;
--brand: #e97ca0; /* サクラローズ */
--brand-2: #ffd3e0; /* 淡いピンク */
--accent: #f5b54c;/* やわらかゴールド */
--card: #ffffff;
--line: #f1e6ea;
--radius: 16px;
--shadow: 0 6px 20px rgba(233,124,160,0.15);
--container: clamp(960px, 86vw, 1140px);
--space-1: 8px;
--space-2: 12px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 48px;
}
/* =============================
 ベース・タイポグラフィ
============================== */
html, body { height: 100%; }
body{
margin: 0;
color: var(--fg);
background: var(--bg);
font-family: "Meiryo", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.85;
font-size: 16px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; height: auto; border: 0; }
/* =============================
 ヘッダー（ナビなし・h1のみ）
============================== */
header.site-header{
background: linear-gradient(180deg, #fff, #fff0f5);
border-bottom: 1px solid var(--line);
}
.header-inner{
max-width: var(--container);
margin: 0 auto;
padding: var(--space-5) var(--space-3) var(--space-4);
}
.site-title{
margin: 0;
font-size: clamp(22px, 2.6vw, 30px);
letter-spacing: .02em;
font-weight: 800;
display: inline-flex;
align-items: center;
gap: .55em;
}
.site-title a{ position: relative; display: inline-block; }
.site-title a::after{
content: "";
position: absolute; inset: auto 0 -2px 0;
height: 6px; border-radius: 3px;
background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
opacity: .25;
}
.tagline{ color: var(--muted); margin-top: 6px; font-size: 14px; }
/* =============================
 ヘッダー画像（任意）
 - 使わない場合はを削除
============================== */
.hero{ background: #fff; border-bottom: 1px solid var(--line); margin-top: 20px; }
.hero-inner{ max-width: var(--container); margin: 0 auto; padding: 0 var(--space-3) var(--space-4); }
.hero .hero-frame{
width: 100%;
aspect-ratio: 21/7; /* 横長推奨 */
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
background: var(--brand-2);
}
.hero .hero-frame img{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* =============================
 レイアウト（PC=2カラム：右メニュー）
============================== */
.wrap{ max-width: var(--container); margin: 0 auto; padding: var(--space-6) var(--space-3); }
.layout{
display: grid;
grid-template-columns: 1fr minmax(260px, 300px);
gap: var(--space-5);
align-items: start;
}
/* =============================
 メイン記事
============================== */
main.article{
background: var(--card);
border: 1px solid var(--line);
border-radius: calc(var(--radius) + 2px);
padding: var(--space-5);
box-shadow: var(--shadow);
}
/* 本文内の見出し（classは付与せずタグで装飾） */
.article h2{
margin: var(--space-6) 0 var(--space-3);
padding: 12px 14px;
font-size: clamp(20px, 2.3vw, 24px);
font-weight: 800;
border-left: 8px solid var(--brand);
background: linear-gradient(90deg, rgba(233,124,160,.08), rgba(245,181,76,.08));
border-radius: 10px;
}
.article h3{
margin: var(--space-5) 0 var(--space-2);
font-size: clamp(18px, 2.1vw, 20px);
font-weight: 700;
border-bottom: 2px solid var(--brand);
padding-bottom: 6px;
}
.article h4{
margin: var(--space-4) 0 var(--space-1);
font-size: 16px;
font-weight: 700;
color: #a23b63;
}
/* 段落の行間と段落間余白 */
.article p{ margin: 0 0 1.05em; }
/* 画像は中央寄せ（本文内） */
.article img{ display: block; margin: 14px auto; }
/* リスト */
.article ul, .article ol{ padding-left: 1.4em; margin: 0 0 1em; }
.article li{ margin: .4em 0; }
/* テーブル（横スクロール対応） */
.table-wrap{ width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--space-4) 0; }
.article table{ width: 100%; border-collapse: collapse; min-width: 560px; }
.article th, .article td{ border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.article thead th{ background: #fff6fa; font-weight: 800; }
.article tbody tr:nth-child(odd){ background: #fffafa; }
/* =============================
 サイドメニュー（PCのみ表示）
============================== */
aside.sidebar{
position: sticky; top: 24px; align-self: start;
background: var(--card);
border: 1px solid var(--line);
border-radius: calc(var(--radius) + 2px);
padding: var(--space-4);
box-shadow: var(--shadow);
}
.menu-title{ font-weight: 800; margin: 0 0 10px; font-size: 16px; }
.side-menu{ list-style: none; padding: 0; margin: 0; }
.side-menu li{ border-bottom: 1px dashed var(--line); }
.side-menu li:last-child{ border-bottom: none; }
.side-menu a{ display: block; padding: 10px 4px; }
.side-menu a:hover{ background: #fff6fa; border-radius: 8px; }
/* =============================
 フッター（スクロール追尾なし）
 - SPではメニューをここに表示
============================== */
footer.site-footer{
margin-top: var(--space-6);
background: #fff;
border-top: 1px solid var(--line);
}
.footer-inner{ max-width: var(--container); margin: 0 auto; padding: var(--space-5) var(--space-3); }
/* サイトマップ（共通） */
.sitemap{
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.sitemap a{ display: block; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.sitemap a:hover{ background: #fff6fa; }
/* SP用：フッターメニュー（PCでは非表示／SPで表示） */
.footer-menu{ display: none; margin: var(--space-4) 0; }
.footer-menu .menu-title{ margin-bottom: 6px; }
.footer-menu .menu-list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0; }
.footer-menu .menu-list a{ display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; text-align: center; }
.copyright{
display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
color: var(--muted); font-size: 14px;
}
.copyright a{ text-decoration: none; }
/* =============================
 レスポンシブ
============================== */
@media (max-width: 960px){
.wrap{ padding: var(--space-5) var(--space-3); }
.layout{ display: block; }
aside.sidebar{ display: none; }/* SPでは右メニュー非表示 */
.footer-menu{ display: block; }/* 代わりにフッターメニューを表示 */
.sitemap{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.article{ padding: var(--space-4); border-radius: var(--radius); }
.hero .hero-frame{ aspect-ratio: 16/9; }
}
@media (max-width: 560px){
body{ font-size: 15.5px; }
.footer-menu .menu-list{ grid-template-columns: 1fr; }
}