/* ===== 画面幅ごとの余白・最大幅 =====
数値は下の変数だけ変えれば全体に反映されます */
:root {
--page-gutter: 24px; /* スマホ：左右余白 */
--page-max: 100%; /* スマホ：最大幅 */
--page-pad-y: 32px; /* 上下余白 */
}
/* タブレット（768px〜1023px） */
@media (min-width: 768px) {
:root {
--page-gutter: 64px;
--page-max: 680px;
--page-pad-y: 56px;
}
}
/* PC（1024px〜） */
@media (min-width: 1024px) {
:root {
--page-gutter: 64px;
--page-max: 760px;
--page-pad-y: 80px;
}
}
html, body { overflow-x: hidden; }
.l-main {
box-sizing: border-box;
width: 100%;
max-width: var(--page-max);
margin: 0 auto;
padding: var(--page-pad-y) var(--page-gutter);
}
/* ドラッグ&ドロップエリアの行・セクションがはみ出さないようにする */
.l-main .dnd-section,
.l-main .row-fluid {
box-sizing: border-box;
max-width: 100%;
}
.l-main .dnd-section {
padding-left: 0;
padding-right: 0;
}
/* HubSpotフォーム：入力欄をコンテナ幅いっぱいに揃える */
.l-main .hs-form fieldset { max-width: 100% !important; }
.l-main .hs-form .input { margin-right: 0 !important; }
.l-main .hs-form input:not([type="checkbox"]):not([type="radio"]),
.l-main .hs-form select,
.l-main .hs-form textarea {
box-sizing: border-box;
width: 100% !important;
max-width: 100%;
}
.l-main img { max-width: 100%; height: auto; }