@charset "UTF-8";

.top_main{position: relative;}

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

img.top_main_text{
    position: absolute;
    top: 3vw;
    left: 2vw;
    width: 27vw;
    transform: rotate(5deg);
}

img.top_main_date{
    position: absolute;
    bottom: 0vh;
    left: 0;
    right: 0;
    width: 100%;
}

/*イベント*/

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


.event ul li{
    width: 100%;
    margin: 0 0 15px 0;
}

.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: 213px ,100%;
    background-position: top 20px center,center;
}
.intro_content{
    padding: 70px 0;
}


.intro_title{
    width: 100%;
    margin: 0 auto 30px auto;
}

.intro_content p{
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.95rem;
    margin: 0 0 15px 0;
}




/*ブース*/

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

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

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

.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 img{
    margin: 0 0 10px 0;
}






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

.s_beer_content{
    padding: 70px 0 120px 0;
}

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


.gatya_item{
    width: 100%;
    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: -25px;
    left:-10px;
}

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

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

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

.gatya_item p span{
    color: #FAC02C;
}

.gatya_item .info{justify-content: center; margin: 0 0 30px 0;}
.gatya_item .info img:nth-child(1){width: 124px; margin: 0 20px 0 0;}
.gatya_item .info img:nth-child(2){width: 158px;}



.gatya_img{
width: 100vw;
margin: 0 calc(50% - 50vw);
margin-bottom: 50px;
}
.off_store h3{
    font-size: 1.25rem;
    letter-spacing: 0.05rem;
    margin: 0 0 15px 0;
    font-weight: 700;
    color: #fff;
}

.tablebox{    margin: 0 0 90px 0;}

.tablebox table{
    width: 750px;
    height: 500px;
    box-sizing: border-box;
    border-collapse: separate;
    border-spacing: 5px;
}

.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:nth-child(1){width: 15%;}
.off_store table tr td:nth-child(2){width: 35%;}
.off_store table tr td:nth-child(3){width: 38%;}
.off_store table tr td:nth-child(4){width: 12%;}

.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: 100%;
}


.desital_item{
    width: 100%;
    position: relative;
    margin: 0 0 60px 0;
}

.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: 100px;
    bottom: 30px;
    right: 0px;
}

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

.desital_item .title h3 img{
    width:95%;
    margin: 0 auto;
}

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





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


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

.about table tr{
    display: block;
    margin: 0 0 50px 0;
}

.about table tr th,
.about table tr td{
    width: 100%;
    display: block;
    text-align: left;
    font-size: 1rem;
    line-height: 1.875rem;
    letter-spacing: 0.05rem;
}

.about table tr th{
    text-align: center;
    font-weight: 500;
    padding: 10px 0px;
    background: #E6F6F7;
    border-radius: 5px;
}

.about table tr td{margin: 10px 0 0 0;}

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

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

.access .item01{width: 100%; text-align: center; margin: 0 0 15px 0;}
.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{text-align: left;}
.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: 100%;}

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

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


/*電子マネー*/
.chashless .w768{
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    padding: 25px;
    box-sizing: border-box;
    margin: 0 auto;
    border: 1px solid #09A3B3;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 90px;
}

.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: 100%;
    margin-bottom: 30px;
}



/* SNS */
.sns_box{
    overflow: hidden;
}
.sns_box ul{box-sizing: border-box;}
.sns_box ul li{
width: 100%;
height: 380px;
padding: 0 0 100px 0;
margin: 0 0 60px 0;
}