/* =========================================
 * CREATPS Layout 基本トークン
 * （数値はプロジェクトごとに調整）
 * =======================================*/
:root {
  /* ブレイクポイント */
    --bp-pc: 768px;

    /* セクション上下余白（SP基準） */
    --space-section-xs: 32rem;
    --space-section-sm: 30rem;
    --space-section-md: 40rem;
    --space-section-ml: 60rem;
    --space-section-lg: 80rem;
    --space-section-xl: 100rem;

    /* 縦スタック用 gap */
    --space-stack-xs: 12rem;
    --space-stack-sm: 16rem;
    --space-stack-md: 24rem;
    --space-stack-lg: 32rem;
    --space-stack-xl: 40rem;

    /* コンテンツ最大幅 */
    --maxw-narrow: 1024rem;
    --maxw-content: 1240rem;
    --maxw-wide: 1440rem;

    /* 横ガター */
    --gutter-sp: 20rem;
    --gutter-pc: 20rem;
}

/* PC でだけ数値を変えたい場合はここで上書き */
@media (min-width: 768px) {
    :root {
        /* 例：PC ではセクションを少し大きめに */
        --space-section-sm: 40rem;
        --space-section-md: 60rem;
        --space-section-ml: 100rem;
        --space-section-lg: 120rem;
        --space-section-xl: 160rem;
    }
}


/* =========================================
 * 1. セクションレイアウト（天地距離）
 * =======================================*/

/* 基本セクション：ページを縦に区切る単位 */
.l-section {
    margin: 0; /* セクション間の距離は margin ではなく padding で管理 */
    padding-block: var(--space-section-md);
}

/* 余白バリエーション（上下とも） */
.l-section--xs { padding-block: var(--space-section-xs); }
.l-section--sm { padding-block: var(--space-section-sm); }
.l-section--ml { padding-block: var(--space-section-ml); }
.l-section--lg { padding-block: var(--space-section-lg); }
.l-section--xl { padding-block: var(--space-section-xl); }

/* 上下どちらかを広げる狭める */
.l-section--top-sm { padding-block-start: var(--space-section-sm); }
.l-section--top-ml { padding-block-start: var(--space-section-ml); }
.l-section--top-lg { padding-block-start: var(--space-section-lg); }
.l-section--top-xl { padding-block-start: var(--space-section-xl); }
.l-section--bottom-sm { padding-block-end: var(--space-section-sm); }
.l-section--bottom-ml { padding-block-end: var(--space-section-ml); }
.l-section--bottom-lg { padding-block-end: var(--space-section-lg); }
.l-section--bottom-xl { padding-block-end: var(--space-section-xl); }


/* 余白を詰めたい・特殊なケース用 */
.l-section--flush { padding-block: 0; }          /* 上下とも 0 */
.l-section--no-top { padding-top: 0; }          /* 上だけ 0 */
.l-section--no-bottom { padding-bottom: 0; }    /* 下だけ 0 */


/* =========================================
 * 2. セクション内コンテナ（横方向の器）
 * =======================================*/

/* セクション内の「中身」を包む器
 * 横方向の max-width / ガターはユーティリティで付与する前提
 */
.l-section__inner {
    width: 100%;
}

/* 「ただの div だけどコンテンツコンテナとして使いたい」場合用 */
.l-container {
    width: 100%;
}


/* =========================================
 * 3. 幅・センタリング系ユーティリティ
 * =======================================*/

.u-maxw-narrow  { max-width: var(--maxw-narrow); }
.u-maxw-content { max-width: var(--maxw-content); }
.u-maxw-wide    { max-width: var(--maxw-wide); }
.u-maxw-full    { max-width: none; }   /* 制限なし */

.u-mx-auto      { margin-inline: auto; }
.u-w-full       { width: 100%; }


/* =========================================
 * 4. 横方向パディング（ガター）ユーティリティ
 * =======================================*/

/* デフォルト：SP のガター */
.u-rem-gutter {
    padding-inline: var(--gutter-sp);
}

/* PC でガターを変える */
@media (min-width: 768px) {
    .u-rem-gutter {
        padding-inline: var(--gutter-pc);
    }
}

/* ガター弱め／強め（必要なら） */
.u-rem-gutter-sm {
  padding-inline: calc(var(--gutter-sp) * 0.5);
}
.u-rem-gutter-lg {
  padding-inline: calc(var(--gutter-sp) * 1.5);
}
@media (min-width: 768px) {
    .u-rem-gutter-sm {
        padding-inline: calc(var(--gutter-pc) * 0.5);
    }
    .u-rem-gutter-lg {
        padding-inline: calc(var(--gutter-pc) * 1.5);
    }
}

/* 常に左右 0 */
.u-rem-none {
    padding-inline: 0;
}

/* SP だけ左右 0（PC はガターあり、などの差分用） */
@media (max-width: 767.98px) {
    .u-rem-none--sp {
        padding-inline: 0;
    }
}

/* PC だけ左右 0（SP はガターあり、などの差分用） */
@media (min-width: 768px) {
    .u-rem-none--pc {
        padding-inline: 0;
    }
}


/* =========================================
 * 5. 縦方向スタックレイアウト（要素間距離）
 * =======================================*/

/* 汎用縦積みレイアウト：子要素を縦に並べ、gap で調整 */
.l-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-stack-md);
}

/* gap バリエーション */
.l-stack--xs { gap: var(--space-stack-xs); }
.l-stack--sm { gap: var(--space-stack-sm); }
.l-stack--lg { gap: var(--space-stack-lg); }
.l-stack--xl { gap: var(--space-stack-xl); }

/* 特定の場面で一時的に gap を変えたい場合は CSS 変数でも可：
 * .l-stack--custom { --space-stack-md: 48rem; }
 */


/* =========================================
 * 6. 補助
 * =======================================*/

/* セクションを画面端までフルブリードにしたいときのベース
 * （背景色や画像を .hero などの BEM block 側で指定）
 */
.l-section--full-bleed {
  /* デフォルト padding はそのまま。背景だけ端まで伸ばす想定 */
}

/* 背景に区切り線を入れるときなどの共通パターン（必要なら） */
/*
.l-section--divider {
    border-block-end: 1rem solid rgba(0,0,0,0.08);
}
*/