/* =========================================================
 * CREATPS layout.css
 * [目次]
 * 0. デザイントークン (CSS変数)
 * 1. セクションレイアウト (.l-section)
 * 2. セクション内コンテナ (.l-section__inner)
 * 3. 幅・センタリング系ユーティリティ (.u-maxw, .u-mx)
 * 4. 横方向パディング（ガター）ユーティリティ (.u-rem-gutter)
 * 5. 縦方向スタックレイアウト (.l-stack)
 * 6. グリッドレイアウト (.l-grid)
 * 7. 2カラム分割 (.l-split)
 * 8. 横並びの「塊」レイアウト (.l-cluster)
 * 9. センタリングの器（.l-center）
 * 10. その他・補助 (Others)
 * ========================================================= */



/* =========================================
 * 0. 基本デザイントークン
 * （数値はプロジェクトごとに調整）
 * =======================================*/

:root {
    /* セクション上下余白（l-section） */
    --space-section-xs: 20rem;
    --space-section-sm: 30rem;
    --space-section-md: 40rem;
    --space-section-ml: 60rem;
    --space-section-lg: 80rem;
    --space-section-xl: 100rem;

    /* 縦スタック(l-stack)用 gap */
    --space-stack-xxs: 5rem;
    --space-stack-xs: 10rem;
    --space-stack-sm: 15rem;
    --space-stack-md: 20rem;
    --space-stack-ml: 30rem;
    --space-stack-lg: 40rem;
    --space-stack-xl: 50rem;
    --space-stack-2xl: 60rem;

    --space-stack-none: 0;

    /* グリッド（l-grid）用 gap */
    --space-grid-xxs: 8rem;
    --space-grid-xs: 12rem;
    --space-grid-sm: 16rem;
    --space-grid-md: 24rem;
    --space-grid-ml: 32rem;
    --space-grid-lg: 40rem;
    --space-grid-xl: 60rem;

    /* 2カラム（l-split）用 column-gap */
    --space-split-xxs: 8rem;
    --space-split-xs: 12rem;
    --space-split-sm: 16rem;
    --space-split-md: 24rem;
    --space-split-ml: 32rem;
    --space-split-lg: 40rem;
    --space-split-xl: 60rem;
    --space-split-2xl:80rem;

    --space-split-none: 0;

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

    /* 横ガター */
    --gutter-sm: 10rem;
    --gutter-md: 20rem;
    --gutter-lg: 30rem;

    --gutter-none: 0;
}

/* PC でだけ数値を変えたい場合はここで上書き */
@media (min-width: 768px) {
    :root {
        /* セクション上下余白（l-section） */
        --space-section-sm: 40rem;
        --space-section-md: 60rem;
        --space-section-ml: 100rem;
        --space-section-lg: 120rem;
        --space-section-xl: 160rem;

        /* 縦スタック(l-stack)用 gap */
        --space-stack-xxs: 12rem;
        --space-stack-xs: 24rem;
        --space-stack-sm: 32rem;
        --space-stack-md: 48rem;
        --space-stack-ml: 64rem;
        --space-stack-lg: 80rem;
        --space-stack-xl: 160rem;

        /* グリッド（l-grid）用 gap */
        --space-grid-xxs: 12rem;
        --space-grid-xs: 24rem;
        --space-grid-sm: 32rem;
        --space-grid-md: 48rem;
        --space-grid-ml: 64rem;
        --space-grid-lg: 80rem;
        --space-grid-xl: 160rem;

        /* 2カラム（l-split）用 row-gap */
        --space-split-xxs: 12rem;
        --space-split-xs: 24rem;
        --space-split-sm: 32rem;
        --space-split-md: 48rem;
        --space-split-ml: 64rem;
        --space-split-lg: 80rem;
        --space-split-xl: 160rem;

        /* 横ガター */
        --gutter-sm: 10rem;
        --gutter-md: 20rem;
        --gutter-lg: 30rem;
    }
}

@media (min-width: 1024px) {
    :root {
        /* 縦スタック(l-stack)用 gap */
        --space-stack-2xl: 300rem;

        /* 2カラム（l-split）用 row-gap */
        --space-split-2xl: 300rem;
    }
}

/* =========================================
 * 1. セクションレイアウト（天地距離）
    - セクション間の距離は margin ではなく padding で管理
    - 基本セクション：ページを縦に区切る単位
 * =======================================*/

/* 基本定義  */
.l-section {
    margin: 0;
    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--md { padding-block: var(--space-section-md); }
.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); }

/* 個別方向の余白調整（top / bottom） */
.l-section--top-xs { padding-block-start: var(--space-section-xs); }
.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-xs { padding-block-end: var(--space-section-xs); }
.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 */

/* pc環境専用の余白調整 */
@media (min-width: 768px) {
    /* pcのみ値を変更する */
    .l-section--pc-xs { padding-block: var(--space-section-xs); }
    .l-section--pc-sm { padding-block: var(--space-section-sm); }
    .l-section--pc-md { padding-block: var(--space-section-md); }
    .l-section--pc-ml { padding-block: var(--space-section-ml); }
    .l-section--pc-lg { padding-block: var(--space-section-lg); }
    .l-section--pc-xl { padding-block: var(--space-section-xl); }

    .l-section--pc-top-xs { padding-block-start: var(--space-section-xs); }
    .l-section--pc-top-sm { padding-block-start: var(--space-section-sm); }
    .l-section--pc-top-ml { padding-block-start: var(--space-section-ml); }
    .l-section--pc-top-lg { padding-block-start: var(--space-section-lg); }
    .l-section--pc-top-xl { padding-block-start: var(--space-section-xl); }
    .l-section--pc-bottom-xs { padding-block-end: var(--space-section-xs); }
    .l-section--pc-bottom-sm { padding-block-end: var(--space-section-sm); }
    .l-section--pc-bottom-ml { padding-block-end: var(--space-section-ml); }
    .l-section--pc-bottom-lg { padding-block-end: var(--space-section-lg); }
    .l-section--pc-bottom-xl { padding-block-end: var(--space-section-xl); }

    /* pc環境のみ余白 0*/
    .l-section-none-top--pc { padding-top: 0; } 
    .l-section-none-bottom--pc { padding-bottom: 0; } 
}


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

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

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


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

/* 最大値の制限（max-width） */
.u-maxw-compact  { max-width: var(--maxw-compact); }
.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-md);
}

/* ガターバリエーション */
.u-rem-gutter--sm { padding-inline: var(--gutter-sm);}
.u-rem-gutter--md { padding-inline: var(--gutter-md);}
.u-rem-gutter--lg { padding-inline: var(--gutter-lg);}

/* sp,pc共に左右padding 0（ガターリセット） */
.u-rem-none { padding-inline: var(--gutter-none);}


/* pc環境専用のガター調整 */
@media (min-width: 768px) {
    /* pcのみ値を変更する */
    .u-rem-gutter--pc-sm { padding-inline: var(--gutter-sm);}
    .u-rem-gutter--pc-md { padding-inline: var(--gutter-md);}
    .u-rem-gutter--pc-lg { padding-inline: var(--gutter-lg);}

    /* pc環境のみ左右パディング 0*/
    .u-rem-none--pc {
        padding-inline: 0;
    }
}


/* =========================================
 * 5. 縦方向スタックレイアウト（要素間距離）
 * - 汎用縦積みレイアウト：子要素を縦に並べ、gap で調整
 * =======================================*/

/* 基本定義  */
.l-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-stack-md);
}

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

/* sp,pc共にgap 0（余白リセット） */
.l-stack--no-gap { gap: var(--space-stack-none); }

/* pc環境専用の余白調整 */
@media (min-width: 768px) {
    /* pcのみ値を変更する */
    .l-stack--pc-xxs { gap: var(--space-stack-xxs); }
    .l-stack--pc-xs { gap: var(--space-stack-xs); }
    .l-stack--pc-sm { gap: var(--space-stack-sm); }
    .l-stack--pc-md { gap: var(--space-stack-md); }
    .l-stack--pc-ml { gap: var(--space-stack-ml); }
    .l-stack--pc-lg { gap: var(--space-stack-lg); }
    .l-stack--pc-xl { gap: var(--space-stack-xl); }

    /* pc環境のみgap 0 */
    .l-stack--no-pc { gap: 0; }    /* pcだけ 0 */
}

/* 大型pc環境専用の余白調整 */
@media (min-width: 1024px) {
    .l-stack--pc-2xl { gap: var(--space-stack-2xl); }
}

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



/* =========================================================
 * 6. グリッドレイアウト（l-grid）
 * - カード2枚、記事3枚、画像2枚などの「列」を担当
 * - 余白は gap で統一管理
 * =======================================================*/

/* 基本定義  */
.l-grid {
    display: grid;
    gap: var(--space-grid-md);
}

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

/* pc環境での分割数指定 */
@media (min-width: 768px) {
    .l-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .l-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .l-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* =========================================================
 * 7. 2カラム分割（l-split）
 * - 「左ラベル / 右コンテンツ」や「テキスト / 画像」など
 * - SP: column, PC: row
 * - 追加の寄せ方・間隔は modifier で単一クラス運用
 * =======================================================*/

/* 基本定義 (sp: 縦積み)  */
.l-split {
    display: flex;
    flex-direction: column;
    gap: var(--space-stack-md);
}

.l-split__primary{
    width: 100%;
}
.l-split__secondary {
    width: 100%;
}

@media (min-width: 768px) {
    /* 基本定義 (pc: 横並び)  */
    .l-split {
        flex-direction: row;
        align-items: flex-start;
        column-gap: var(--space-split-md);
    }

    .l-split__primary {
        flex: 0 0 auto;
    }

    .l-split__secondary {
        flex: 1 1 0%;
        min-width: 0;
    }
}

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

/* sp,pc共にgap 0 */
.l-split--no-gap { gap: var(--space-split-none); }


@media (min-width: 768px) {
    /* pcのみ値を変更する */
    .l-split--gap-pc-xxs { gap: var(--space-split-xxs); }
    .l-split--gap-pc-xs { gap: var(--space-split-xs); }
    .l-split--gap-pc-sm { gap: var(--space-split-sm); }
    .l-split--gap-pc-md { gap: var(--space-split-md); }
    .l-split--gap-pc-ml { gap: var(--space-split-ml); }
    .l-split--gap-pc-lg { gap: var(--space-split-lg); }
    .l-split--gap-pc-xl { gap: var(--space-split-xl); }

    /* pc環境のみgap 0*/
    .l-split--no-pc { gap: 0; }    /* pcだけ 0 */
}

/* 大型pc環境専用の余白調整 */
@media (min-width: 1024px) {
    .l-split--gap-pc-2xl { gap: var(--space-split-2xl); }
}

/* 反転・寄せ・揃え（単一クラス） */
@media (min-width: 768px) {
    .l-split--reverse { flex-direction: row-reverse; }

    .l-split--start   { justify-content: flex-start; }
    .l-split--center  { justify-content: center; }
    .l-split--between { justify-content: space-between; }
    .l-split--end     { justify-content: flex-end; }

    .l-split--items-start  { align-items: flex-start; }
    .l-split--items-center { align-items: center; }
    .l-split--items-end    { align-items: flex-end; }
}


/* =========================================================
 * 8. 横並びの「塊」レイアウト（l-cluster）
 * - ボタン群、タグ、アイコン+テキスト、パンくずなどの横並び
 * - flex-wrap あり（折り返す前提）
 * =======================================================*/

/* 基本定義  */
.l-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-stack-sm);
    align-items: center;
}

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

/* sp,pc共にgap 0（余白リセット） */
.l-cluster--no-gap { gap: var(--space-stack-none); }

/* pc環境専用の余白調整 */
@media (min-width: 768px) {
    /* pcのみ値を変更する */
    .l-cluster--gap-pc-xxs { gap: var(--space-stack-xxs); }
    .l-cluster--gap-pc-xs { gap: var(--space-stack-xs); }
    .l-cluster--gap-pc-sm { gap: var(--space-stack-sm); }
    .l-cluster--gap-pc-md { gap: var(--space-stack-md); }
    .l-cluster--gap-pc-ml { gap: var(--space-stack-ml); }
    .l-cluster--gap-pc-lg { gap: var(--space-stack-lg); }
    .l-cluster--gap-pc-xl { gap: var(--space-stack-xl); }

    /* pc環境のみgap 0 */
    .l-cluster--gap-no-pc { gap: 0; }    /* pcだけ 0 */
}

/* 大型pc環境専用の余白調整 */
@media (min-width: 1024px) {
    .l-cluster--gap-pc-2xl { gap: var(--space-stack-2xl); }
}

/* =========================================================
 * 9. センタリングの器（l-center）
 * - セクション外でも「中央寄せの器」がほしい場面用
 * =======================================================*/

.l-center {
    width: 100%;
    margin-inline: auto;
}

/* max-width 付きのセンター（必要なときだけ使用） */
.l-center--compact { max-width: var(--maxw-compact); }
.l-center--narrow  { max-width: var(--maxw-narrow); }
.l-center--content { max-width: var(--maxw-content); }
.l-center--wide    { max-width: var(--maxw-wide); }


/* =========================================================
 * 10.その他・補助 (Others)
 * =======================================================*/

/* 文字量の長い子要素のはみ出し保険
- grid/flex 内での overflow 対策として便利 */
.u-minw-0 { min-width: 0; }
.u-ov-hidden { overflow: hidden; }

/* セクションを画面端までフルブリードにしたいときのベース
 * （背景色や画像を .hero などの BEM block 側で指定）*/

/* デフォルト padding はそのまま。背景だけ端まで伸ばす想定 */
.l-section--full-bleed {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

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