@charset "utf-8";

/*============================================================

Layout

============================================================*/


/*============================================================
Inner
============================================================*/

/*
左右の基本余白
セクション・パンくず・本文など共通で使用
*/

.l-inner {
    width: 100%;
    padding-left: var(--inner-padding-sp, 15px);
    padding-right: var(--inner-padding-sp, 15px);
}


/* Tablet */
@media screen and (min-width: 679px) {

    .l-inner {
        padding-left: var(--inner-padding, 20px);
        padding-right: var(--inner-padding, 20px);
    }

}


/*============================================================
Container
============================================================*/

/*
サイト全体の最大横幅
*/

.l-container {
    width: 100%;
    max-width: var(--container-width, 1200px);
    margin-left: auto;
    margin-right: auto;
}


/* 広いコンテナ */

.l-container-wide {
    width: 100%;
    max-width: var(--container-width-wide, 1400px);
    margin-left: auto;
    margin-right: auto;
}

/* 狭いコンテナ */

.l-container-wide-narrow {
    width: 100%;
    max-width: var(--container-width-narrow, 800px);
    margin-left: auto;
    margin-right: auto;
}




/*============================================================
Responsive Content Width
============================================================*/

/* SP・Tablet：0〜1024px */

.l-content-400 {
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.l-content-600 {
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.l-content-800 {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}


/* PC：1025px〜 */

@media screen and (min-width: 1025px) {

    .l-content-400,
    .l-content-600,
    .l-content-800 {
        max-width: none;
    }

}


/*============================================================
Page Layout
============================================================*/

/* 1カラム */

.l-one-column {
    width: 100%;
}


/* 2カラム：SPでは1カラム */

.l-two-column {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--column-gap-sp, 20px);
}


/* PC */
@media screen and (min-width: 1025px) {

    .l-two-column {
        grid-template-columns:
            minmax(0, 1fr)
            var(--sidebar-width, 300px);

        gap: var(--column-gap, 40px);
    }

}


/*============================================================
Column
============================================================*/

/* 2カラム：SPでは1列 */

.l-column-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--column-gap-sp, 20px);
}


/* 3カラム：SPでは1列 */

.l-column-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--column-gap-sp, 20px);
}


/* Tablet */

@media screen and (min-width: 679px) {

    .l-column-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--column-gap-small, 30px);
    }

    .l-column-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--column-gap-small, 30px);
    }

}


/* PC */

@media screen and (min-width: 1025px) {

    .l-column-2 {
        gap: var(--column-gap, 40px);
    }

    .l-column-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--column-gap-small, 30px);
    }

}