@charset "UTF-8";

img.top_main_bg{
    position: relative;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

img.top_main_text{
    position: absolute;
    top: 3vw;
    left: 23vw;
    width: 10vw;
}


/*お得企画、イベントバナー*/

.event_bg{
    background: url(../img/top/bg_yellow.png);
    background-size: 82px 82px;
    padding: 60px 0;
}

.event ul li{
    width: 32%;
    margin-bottom:30px;
}

.event ul li a{
    display: block;
    width: 100%;
}

.event ul li a:hover{filter: brightness(1.2); transform: scale(1.02); opacity: 1;}



/*intro*/

.intro{
    background: url(../img/top/hokkaido_bg.png) no-repeat, #FFFCF4;
    background-size: 320px ,100%;
    background-position: top 120px center,center;
    padding: 90px 0 0 0;
}
.intro_content{
    position: relative;
    padding: 60px 0 120px 0;
}

.intro_content .tl{
    width: 300px;
    position: absolute;
    top: -120px;
    left: -70px;
}

.intro_content .bl{
    width: 250px;
    position: absolute;
    bottom: -10px;
    left: -30px;
}

.intro_content .tr{
    width: 300px;
    position: absolute;
    top: -100px;
    right: -100px;
}

.intro_content .br{
    width: 280px;
    position: absolute;
    bottom: -20px;
    right: -90px;
}

@media screen and (min-width: 751px) and (max-width: 900px){
    .intro_content .tl{
        width: 250px;
        position: absolute;
        top: -80px;
        left: -70px;
    }
    
    .intro_content .bl{
        width: 200px;
        position: absolute;
        bottom: -60px;
        left: -80px;
    }
    
    .intro_content .tr{
        width: 250px;
        position: absolute;
        top: -30px;
        right: -150px;
    }
    
    .intro_content .br{
        width: 180px;
        position: absolute;
        bottom: -50px;
        right: -50px;
    }
}

.intro_title{
    width: 640px;
    margin: 0 auto 50px auto;
}

.intro_content p{
    text-align: center;
    font-size: 1.15rem;
    line-height: 2.6rem;
}


/*ブース*/

.booth_bg{
    background: url(../img/top/bg_blue.png);
    background-size: 82px 82px;
    padding: 120px 0;
}

.booth_content h2{
    width: 85%;
    margin: 0 auto 30px auto;
}

.booth_content ul li{
    width: 32%;
    background: #fff;
    box-sizing: border-box;
    padding: 24px;
    border-radius: 16px;
}

.booth_content ul li h3{
    font-size: 1.2rem;
    font-weight: 700;
    padding: 0 0 5px 0;
    margin: 0 0 8px 0;
    color: #1270B3;
    border-bottom: 2px solid #1270B3;
}

.booth_content ul li h3 span{
    display: inline-block;
    background: #A7CBEA;
    color: #000;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 0 10px;
    margin: 0 5px 0 0;
    font-size: 1.1rem;
    font-weight: 500;
}

.booth_content ul li .k1{
    width: 70%;
    margin: 0 auto;
}


.booth_content ul li img{
    margin: 5px 0 10px 0;
}

@media screen and (min-width: 751px) and (max-width: 930px){
    .booth_content ul li{
        width: 48%;
        margin: 0 0 30px 0;
    }
}


/*サッポロビールプレゼンツ*/
.s_beer_bg{
    background: #333333;
}

.s_beer_content{
    padding: 120px 0;
}

.s_beer_content h2{
    width: 605px;
    margin: 0 auto 45px auto;
}


.gatya_item{
    width: 55%;
    position: relative;
}

.gatya_item .title{
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: 20px 0;
    margin: 0 0 20px 0;
}

.gatya_item .title .hazure{
    position: absolute;
    width: 68px;
    top: -20px;
    left: -30px;
}

.gatya_item .title h3 img{
    width:140px;
    margin: 0 0 0 50px;
}

.gatya_item p{
    color: #fff;
    margin: 0 0 35px 0;
}

.gatya_item p span{
    color: #FAC02C;
}

.gatya_item .info{justify-content: flex-start;}
.gatya_item .info img:nth-child(1){width: 154px; margin: 0 20px 0 0;}
.gatya_item .info img:nth-child(2){width: 188px;}



.gatya_img{
    width: 43%;
}

.off_store h3{
    font-size: 1.25rem;
    letter-spacing: 0.05rem;
    margin: 0 0 15px 0;
    font-weight: 700;
    color: #fff;
}

.off_store table{
    width: 100%;
    box-sizing: border-box;
    border-collapse: separate;
    border-spacing: 5px;
    margin: 0 0 90px 0;
}

.off_store table tr{width: 100%;}

.off_store table tr:not(:nth-child(1)){
position: relative;
}

.off_store table tr:not(:nth-child(1))::after{
    position: absolute;
    bottom: -2px;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background: #969696;
    }

.off_store table tr th,
.off_store table tr td{
    color: #fff;
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 500;
}

.off_store table tr th{
    border: 1px solid #969696;
    padding: 5px 0;
}

.off_store table tr td{
    padding: 10px 0px;
}

.off_store table tr td:nth-child(1) span{
    text-align: center;
    width: 40%;
    color: #000;
    background: #FFF000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    line-height: 1rem;
    padding: 5px 10px;
}


.hokkaido_spot{width: 48%;}


.desital_item{
    width: 45%;
    position: relative;
}

.desital_item .title{
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: 20px 0;
    margin: 0 0 20px 0;
}

.desital_item .title .beer{
    position: absolute;
    width: 111px;
    bottom: 40px;
    right: 0px;
}

.desital_item .title h3{
    text-align: center;
}

.desital_item .title h3 img{
    width:333px;
    margin: 0 auto;
}

.desital_item p{
    width: 60%;
    color: #fff;
    margin: 0 0 35px 0;
}





/*イベント概要*/
.about{padding: 160px 0 60px;}
.about .title01{
    width: 200px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 30px;
}


.about table{
    width: 100%;
    width: 100%;
    box-sizing: border-box;
    border-collapse: collapse;
}

.about table tr{
    border-bottom: 1px solid #CECECE;
}

.about table tr th,
.about table tr td{
    padding: 20px 0;
    text-align: left;
    vertical-align: top;
    font-size: 1rem;
    line-height: 1.875rem;
    letter-spacing: 0.05rem;
}

.about table tr th{width: 20%; font-weight: 500;}
.about table tr td{width: 80%;}


/*会場アクセス*/
.access_bg{
    padding: 35px 0;
    background-color: #F7F7F7;
}

.access{padding: 120px 0;}
.access .title01{
    width: 200px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 30px;
}

.access .item01{width: 35%;}
.access .item01 h3{
    font-size: 0.9rem;
    line-height: 2rem;
    letter-spacing: 0.05rem;
    margin: 0 0 25px 0;
}

.access .item01 h3 span{
    display: block;
    font-weight: 500;
    font-size: 1.375rem;
}


.access .item01 p span:nth-child(1){
    width: 65px;
    box-sizing:border-box;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    background: #09A3B3;
    padding: 5px 0;
    font-size: 0.9rem;
    line-height: 0.9rem;
    letter-spacing: 0.1rem;
    color: #fff;
    margin: 0 10px 10px 0;
}

.access .item01 p span:nth-child(2){
    width: calc(100% - 80px);
    display: inline-block;
    vertical-align: top;
    letter-spacing: 0.05rem;
    line-height: 1.4rem;
}

/*googlemap*/
.access .item02{width: 60%;}

.access .item02 iframe{
    width: 100%;
    height: 400px;
}

.access .content.flex{
    align-items: center;
}


/*電子マネー*/
.chashless .w768{
    padding: 45px;
    box-sizing: border-box;
    margin: 0 auto;
    border: 1px solid #09A3B3;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 120px;
}

.chashless .w768 h2{
    text-align: center;
    font-size: 1.55rem;
    font-weight: 500;
    line-height: 2.2rem;
    letter-spacing: 0.1rem;
    color: #09A3B3;;
    border-bottom: 2px solid #09A3B3;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.chashless .w768 img{
    width: 574px;
    margin-bottom: 30px;
}



/* SNS */
.sns_box{
    overflow: hidden;
}
.sns_box ul{box-sizing: border-box;}
.sns_box ul li{
width: 47%;
height: 480px;
}

.sns_box ul li a{
    border-radius: 30px;
}