@import url("hamburger.css");
@import url("nav.css");

@media screen and (max-width: 767px) {

    /* width */
    .sp-w80 {
        /*
        命名： w80-spは NG。
        - 急いでる時　sp-* と分かりやすく。
         */
        width: 80% !important;
    }

    .sp100vw {
        width: 100vw;
    }

    /* max-width */
    .spmax-w90 {
        max-width: 90%;
        /* wrap担当なので　センタリング はこれではしない。 */
    }

    /* none */
    .dn-sp {
        display: none;
    }

    .sp-dn {
        display: none !important;
    }

    .sp {
        display: block;
    }

    /* height */
    /*
    　　今のところ：高さは 100vh　だけ使用する。
    　　指定したくなった際は　padding　で行う。
    　　予期せぬ　余り・背景色　が　出てくる。
     */
    .sp-20vh,
    .sp20vh {
        height: 20vh !important;
    }

    .sp-25vh,
    .sp25vh {
        height: 25vh !important;
    }

    /* pixel */
    .fs2rem-sp {
        font-size: 2rem;
    }

    /* padding */
    .sp-py20,
    .py20-sp {
        padding: 20px 0;
    }

    .pb20-sp {
        padding-bottom: 20px;
    }

    /* margin */
    .m0a-sp {
        margin: 0 auto;
    }

    /* text */
    .tac-sp {
        text-align: center;
    }

    /* flex */
    .aic-sp {
        align-items: center !important;
    }

    .fcc-sp,
    .dfc-sp {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* gap */
    .sp-gap10,
    .spgap10 {
        gap: 10px !important;
    }

    .sp-gap20,
    .spgap20 {
        gap: 20px !important;
    }

    .card-wrap {
        flex-wrap: wrap;
    }

    /* grid/col */
    .sp-grid1,
    .sp-col1,
    .grid1-sp,
    .spgrid1 {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .sp-col1-flex {
        flex-direction: column;
    }

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

    .col2 {
        /* display grid だと 画像だった場合 1:1 で間延びか 隙間が空く為 display:flexで flex-direc: colmun */
        display: flex;
        flex-direction: column;
        gap: 20px 20px;
    }


}