@charset "utf-8";

body{
    /*基本配色*/
    --base-color-white:#e8e8e8;
    --base-color-black:#3d3d3d;
    --theme-color-pale:#c0d8cc;
    --theme-color-middle:#7e9c7c;
    --theme-color-dark:#546953;
    --accent-color-yellow:#d5a153;
    --accent-color-red:rgb(213,105,83);
    /*色が共通のパーツ*/
    --header-background:var(--base-color-white);
    --main-background:var(--base-color-white);
    --footer-background:var(--base-color-white);
    --link-button:var(--base-color-black);
    --link-button-hover:var(--accent-color-yellow);
    --container-header:var(--theme-color-dark);
}

.img-area{
    height: 100vh;
}

/*協賛団体レイアウト*/

.company-container-wrapper{
    display: flex;
    flex-direction: row; /* 要素を横並びにする */
    align-items: flex-start; /* 上端に揃える */
    justify-content: space-between; /* 要素を均等に配置 */
    flex-wrap: wrap; /* 要素が行をまたぐ場合に折り返す */
}

.company-container{
    display: block;
    background-color: var(--base-color-white);
    border-radius: 10px;
    width: calc(20% - 20px);
    box-sizing: border-box;
    margin-bottom: 20px;
    text-align: center;
    border: var(--base-color-black) 1px solid;
}

.company-container img{
    object-fit: contain;
    width: 100%;
    height: 300px;
    padding: 1em;
}

.company-container label{
    background-color: var(--theme-color-pale);
}

/*** タブレット用レイアウト *****/

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

    .tab{
        overflow-x: auto;
    }
    
    .area{
        padding-bottom: 0;
    }

    /*協賛団体レイアウト*/
     .company-container{
        width: calc(33.333% - 20px);
    }

    .company-container img{
        object-fit: contain;
        height: 200px;
        padding: 1em;
    }
}

/*** スマホ用レイアウト *****/

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

    .tab{
        overflow-x: auto;
    }
    
    .area{
        padding-bottom: 0;
    }

    /*協賛団体レイアウト*/
    .company-container{
        width: 100%;
    }

    .company-container img{
        object-fit: contain;
        height: 150px;
        padding: 1em;
    }
}

/* プリント用レイアウト*/
@media print and (max-width:768px) {

    .company-container-wrapper{
        display: block;
    }


    .company-container{
        width: 100%;
    }
}