/* ================== PopPastel Layout Kit (unique naming & structure) ================== */
:root{
/* パステルのカラフル系（自由に調整可） */
--pp-pink:#ffd6e7;
--pp-yellow:#fff5b8;
--pp-mint:#c9f1e3;
--pp-sky:#cfe9ff;
--pp-lilac:#e8d7ff;
--pp-apple:#dff7c9;
--pp-ink:#3b3b44;
--pp-ink-soft:#5a5a68;
--pp-paper:#ffffff;
--pp-ring: #7aa4ff99;
--pp-shadow: 0 10px 26px rgba(50,60,90,.12);
--pp-radius-xl: 22px;
--pp-radius-lg: 16px;
--pp-radius-md: 12px;
--pp-lh: 1.9;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
color:var(--pp-ink);
background:
radial-gradient(1200px 500px at 10% -10%, var(--pp-pink), transparent 65%),
radial-gradient(900px 400px at 90% -10%, var(--pp-sky), transparent 65%),
linear-gradient(180deg, #fff, #fff);
font-family: "Noto Sans JP", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
line-height:var(--pp-lh);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
a{color:#3555aa; text-decoration:underline dotted currentColor; text-underline-offset:3px}
a:hover{opacity:.9}
/* 1カラム（最大幅720px） */
.soda-wrap{
max-width:720px;
margin-inline:auto;
padding-inline:18px;
}
/* ================== Header ================== */
.marsh-header{
position:sticky; top:0; z-index:50;
backdrop-filter: blur(8px) saturate(120%);
background:
linear-gradient(120deg, var(--pp-yellow), var(--pp-mint));
border-bottom:2px dashed rgba(0,0,0,.06);
box-shadow: var(--pp-shadow);
}
.marsh-header__inner{
padding:14px 0 10px;
display:grid;
grid-template-columns: 1fr auto;
gap:12px;
align-items:center;
}
/* h1 = サイトタイトル */
.marsh-brand{
margin:0;
font-size:clamp(22px,4.6vw,30px);
font-weight:900;
letter-spacing:.02em;
color:var(--pp-ink);
padding:.35rem .7rem;
border-radius:var(--pp-radius-lg);
background:
conic-gradient(from 180deg, var(--pp-pink), var(--pp-yellow), var(--pp-mint), var(--pp-sky), var(--pp-lilac), var(--pp-pink)) border-box;
-webkit-background-clip: text;
background-clip:text;
color:transparent; /* テキストにグラデをのせる */
border:0;
}
.marsh-brand::selection{background:var(--pp-sky); color:#111}
/* サイトマップリンク（ヘッダー右側） */
.crumb-link{
justify-self:end;
display:inline-flex; align-items:center; gap:.45rem;
font-size:14px; font-weight:700;
padding:.5rem .8rem;
background:linear-gradient(180deg, var(--pp-paper), #f7faff);
border:1.5px solid #d9e6ff;
border-radius:999px;
text-decoration:none;
box-shadow:0 3px 0 rgba(30,60,150,.06);
}
.crumb-link::before{
content:"";
font-size:1rem;
line-height:1;
}
/* ================== Main ================== */
.candy-main{
padding:22px 0 30px;
}
/* 段落間の行間を適度に */
.candy-main p{margin:0}
.candy-main p + p{margin-top:1.05rem}
/* 本文画像はデフォルト中央寄せ */
.candy-main img{
max-width:100%; height:auto; display:block; margin:1.1rem auto;
border-radius:14px;
box-shadow: var(--pp-shadow);
}
/* 見出し（H2-H4） ? タグにclass付与せず親で装飾 */
.candy-main h2, .candy-main h3, .candy-main h4{
color:var(--pp-ink);
line-height:1.35;
margin:1.8rem 0 .9rem;
position:relative;
}
/* H2：レインボー帯＆ドット縁取り */
.candy-main h2{
font-size:clamp(20px,4.4vw,28px);
padding:14px 16px;
border-radius:var(--pp-radius-xl);
background:
linear-gradient(100deg, var(--pp-pink), var(--pp-yellow), var(--pp-mint), var(--pp-sky), var(--pp-lilac));
-webkit-mask:
radial-gradient(circle 12px at 12px 12px, #0000 98%, #000) 0 0 / 24px 24px,
linear-gradient(#000 0 0);
mask:
radial-gradient(circle 12px at 12px 12px, #0000 98%, #000) 0 0 / 24px 24px,
linear-gradient(#000 0 0);
color:#1c2230;
box-shadow: inset 0 1px 0 rgba(255,255,255,.8), var(--pp-shadow);
border:2px dotted rgba(0,0,0,.08);
}
/* H3：パステルタブ＋下線キャンディライン */
.candy-main h3{
font-size:clamp(18px,3.8vw,22px);
padding:10px 12px;
display:inline-block;
border-radius:12px;
background:linear-gradient(180deg, #fff, var(--pp-apple));
border:1.5px solid #cfe9b9;
box-shadow:0 6px 16px rgba(80,120,80,.12);
}
.candy-main h3::after{
content:"";
display:block; height:8px; margin-top:10px; border-radius:999px;
background:
repeating-linear-gradient(90deg,
var(--pp-pink) 0 12px,
var(--pp-yellow) 12px 24px,
var(--pp-mint) 24px 36px,
var(--pp-sky) 36px 48px,
var(--pp-lilac) 48px 60px);
opacity:.6;
}
/* H4：ピル型ラベル＋左側キャンディピン */
.candy-main h4{
font-size:clamp(16px,3.4vw,19px);
padding:6px 12px 6px 16px;
border-radius:999px;
background:linear-gradient(180deg,#fff,var(--pp-sky));
border:1.5px dashed #bcd8ff;
display:inline-block;
}
.candy-main h4::before{
content:"";
margin-right:.5rem;
}
/* リスト（ul/ol） */
.candy-main ul, .candy-main ol{
margin:1rem 0 1.2rem 1.1rem;
padding:0;
}
.candy-main ul{list-style:disc}
.candy-main li{margin:.45rem 0}
.candy-main li::marker{color:#ff8ab8}
.candy-main ol{counter-reset:pop}
.candy-main ol > li{counter-increment:pop}
.candy-main ol > li::marker{
content: counters(pop, ".") ". ";
color:#6a76ff; font-weight:800;
}
/* テーブル（タグ素のまま） */
.candy-main table{
width:100%;
border-collapse:separate; border-spacing:0;
background:var(--pp-paper);
border-radius:14px;
overflow:hidden;
box-shadow: var(--pp-shadow);
border:2px solid #f0e8ff;
}
.candy-main caption{
caption-side:top; text-align:left; font-weight:800; color:var(--pp-ink-soft);
padding:.6rem .6rem;
background:linear-gradient(90deg, var(--pp-lilac), #fff);
}
.candy-main thead th{
text-align:left; color:#253048; font-weight:900;
padding:.8rem .8rem;
background:linear-gradient(90deg, var(--pp-mint), var(--pp-sky));
border-bottom:2px solid #bfe6ff;
}
.candy-main thead th + th{border-left:1px dashed rgba(0,0,0,.08)}
.candy-main tbody td{
padding:.75rem .8rem; vertical-align:top;
background:#fff;
border-top:1px solid #f0f3ff;
}
.candy-main tbody tr:nth-child(odd) td{background:#fbfdff}
/* 引用 */
.candy-main blockquote{
margin:1.1rem 0; padding:1rem 1.1rem;
border-radius:var(--pp-radius-md);
background:linear-gradient(180deg, #fff, var(--pp-yellow));
border-left:10px solid #ffd76b;
box-shadow: var(--pp-shadow);
}
/* ================== Footer ================== */
.gum-footer{
margin-top:28px;
background:
linear-gradient(120deg, var(--pp-sky), var(--pp-lilac));
border-top:2px dashed rgba(0,0,0,.06);
}
.gum-footer__inner{padding:18px 0}
.gum-menu{
display:flex; flex-wrap:wrap; gap:10px 12px;
list-style:none; margin:0; padding:0;
}
.gum-menu a{
display:inline-block;
padding:.5rem .8rem;
border-radius:12px;
text-decoration:none;
background:#fff;
border:1.5px solid #e7e7ff;
box-shadow:0 2px 0 rgba(0,0,0,.05);
font-weight:700; font-size:14px;
}
.gum-meta{
margin-top:10px; font-size:12.5px; color:var(--pp-ink-soft);
}
/* アクセシビリティ */
:focus-visible{outline:3px solid var(--pp-ring); outline-offset:2px}
/* ちょいレスポンシブ */
@media (max-width:480px){
.marsh-header__inner{grid-template-columns: 1fr; gap:8px}
.crumb-link{justify-self:start}
}