/* 
    画面幅や配置やグリッドなど
    inner幅やflexやgridなどを、ここでコーディングする
*/

/* div */

.div-width-100 {
    width: 100%;
}

/* 縦横センター揃え */

.XYCenter {
    display: grid;
    place-items: center;
}

/* gridレイアウト */

.grid-col1,
.grid-col2,
.grid-col3,
.grid-col4 {
    width: 100%;
    display: grid;
    justify-content: center;
    align-items: start;
    gap: 40px;
}

.grid-col2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-col3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-col4 {
    grid-template-columns: repeat(4, 1fr);
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .grid-col2,
    .grid-col3,
    .grid-col4 {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* flexレイアウト */

.flex {
    display: flex;
    align-items: center;
    column-gap: 16px;
}


/* 要素の幅 */

.inner-XLarge,
.inner-large,
.inner-medium,
.inner-small,
.inner-XSmall {
    width: 100%;
    display: grid;
    place-items: center;
    row-gap: 32px;
}

.inner-XLarge {
    max-width: var(--inner-xlarge);
}

.inner-large {
    max-width: var(--inner-large);
}

.inner-medium {
    max-width: var(--inner-medium);
}

.inner-small {
    max-width: var(--inner-small);
}

.inner-XSmall {
    max-width: var(--inner-xsmall);
}

/* 3rd Party */

.googleMap {
    display: block;
}