/* ===================== CSS ===================== */
/* ---------------------------------------------
基本リセット
--------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif; line-height: 1.7; color: #111; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }


/* ---------------------------------------------
レイアウト設定
・スマホ: 左右ぴったり（幅100%、余白なし）
・PC: 中央寄せ（最大幅480px）
--------------------------------------------- */
:root {
--content-max: 480px; /* PC版の幅を480pxに固定 */
}


.container {
width: 100%;
margin-inline: auto;
max-width: var(--content-max);
}


/* スマホ時（768px以下）は余白ゼロで両端ぴったり */
.pad {
padding: 25px;
}


@media (max-width: 768px) {
.container {
max-width: 100%; /* スマホは全幅 */
}
.pad {
padding: 25px; /* スマホは余白なし */
}
body{
margin: 13px;
}
}


/* 余白ユーティリティ（必要なら使用） */
.mt-0 { margin-top: 0; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }


/* 見出しなどの最低限スタイル */
h1, h2, h3 { line-height: 1.3; margin: 0; }
h1 { font-size: clamp(24px, 4.2vw, 40px); }
h2 { font-size: clamp(20px, 3.6vw, 28px); margin-top: 32px; }
p { margin: 16px 0 0; }


/* フッタの最小デザイン（任意） */
.l-footer { color: #666; font-size: 14px; }