@charset 'Shift_JIS';
p a,p a:link{ text-decoration: underline;}
p a:hover{ text-decoration:underline;}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

common

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.campainwrap *,
.campainwrap{margin: 0; padding: 0; box-sizing:border-box; font-weight:300; -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}
.campainwrap{font-family:'Noto Sans JP',"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;font-weight:400;line-height: 2em;text-align:center;font-size: 1rem;-webkit-font-smoothing: antialiased;letter-spacing: 0.05em;color: #000000;position: relative;}
.campainwrap a{ text-decoration: none;}
.campainwrap a,.campainwrap a:link, .campainwrap a:visited { color:#000000; }
.campainwrap a:active, .campainwrap a:hover { color:#000000; }
.campainwrap a:hover{color:#000000; }
.campainwrap li { list-style-type: none; }
.campainwrap dl,.campainwrap dt,.campainwrap dd { margin: 0; padding: 0; }
.campainwrap p {margin: 0 0 1.5625vw;padding: 0;text-align:left;}
.campainwrap img {border: 0; line-height: 0; vertical-align: bottom;}
.campainwrap hr { display: none; }
.campainwrap table { margin: 0; padding: 0; }
.campainwrap th { text-align: left; font-weight: 400; margin: 0; }
.campainwrap td { margin: 0; }
.campainwrap em {font-style: normal;}
.campainwrap form { margin: 0; padding: 0; }
.campainwrap label { margin: 0; padding: 0;}
.campainwrap input.btn { margin: 0 0.5em; padding: 0 1em; }
.campainwrap main { display: block; }

.campainwrap select::-ms-expand { display: none;}
.campainwrap select {-webkit-appearance: none;-moz-appearance: none;	appearance: none;	line-height: 1.5em;	border: none;}

@media screen and (max-width: 1200px) {
	.campainwrap{line-height: 2em;}
}

@media screen and (max-width: 900px) {
	.campainwrap{line-height: 1.8em;}
}

@media screen and (max-width: 600px) {
	.campainwrap p{ font-size: 0.9rem;}
}


/***************************************************

wrap

**************************************************/
.campainwrap .container-wrap{display: block; overflow: hidden;}
.campainwrap .wrapper{display: block;position: relative;width: 80vw;max-width: 950px;margin: 0 auto;}
.campainwrap.wrapper:first-of-type{ padding-top: 0;}
.campainwrap .wrapper:last-child{margin-bottom: 0;}
.campainwrap .container{display: block;position: relative;width:60vw;max-width: 900px;margin: 0 auto;padding-bottom: 10vw;}
.campainwrap .container:last-child{margin-bottom: 0;}
.campainwrap .contents{width:40vw; max-width: 640px; margin: 0 auto;}
.campainwrap .contents:last-child{margin-bottom: 0;}
.campainwrap .column{}
.campainwrap .column:last-child{margin-bottom: 0;}

@media screen and (min-width: 901px){
}
@media screen and (max-width: 1140px){
	.campainwrap .contents{ width: 60vw;min-width: 500px;}
	.campainwrap .container{width: 70vw;}
}
@media screen and (max-width: 900px){
	.campainwrap .container{width: 80vw;}
}
@media screen and (max-width: 600px){
	.campainwrap .wrapper{width: 90%;}
	.campainwrap .container{width: 100%;}
	.campainwrap .contents{width: 100%; min-width: inherit;}
	.campainwrap #whats .titleArea p{text-align: left!important;}
	.campainwrap #whats .titleArea p br{ display: none;}
}


/* column ////////////////////////////////////////////////////////////////////////////////////////////*/
.column-flex{display:none; display: -webkit-flex!important;display: flex!important;-webkit-flex-wrap: wrap!important;flex-wrap: wrap!important;-webkit-box-pack: justify;justify-content: space-between;}
.row-revers { flex-direction: row-reverse;}
.justify-start {-webkit-box-pack: start; justify-content: start; }
.box-column-half{width: 100%; max-width:500px; display:block; margin: 0 auto;}
.container .box-column1,
.container.box-column1{ display: block; max-width: 1000px; width: auto; margin: 0 6.25vw 6.25vw;}

.box-column2 .box-column-size1 {width: calc(48.5%);}
.box-column3 .box-column-size1 {width: calc(30%);}
.box-column3 .box-column-size2 { width: calc(63%); }

.box-column-size1,
.box-column-size2,
.box-column-size3,
.box-column-size4{position: relative;}

@media screen and (min-width: 901px){
}
@media screen and (max-width: 1000px){
}
@media screen and (max-width: 1140px){
}
@media screen and (max-width: 900px){
}
@media screen and (max-width: 600px){
	.box-column2 .box-column-size1,
	.box-column3 .box-column-size1,
	.box-column3 .box-column-size2{width: 100%;}
}

/* box ////////////////////////////////////////////////////////////////////////////////////////////*/

/* //////////////////////////////////////////////////////////////////////////////////////////

img

////////////////////////////////////////////////////////////////////////////////////////////*/

/*imgwrap*/
.campainwrap img{max-width: 100%; width: auto; height: auto;}
.campainwrap .img-wrap{ overflow: hidden; position: relative;}
.column-flex .img-wrap{ width: 100%; display: block; position:relative; left: 0; top: 0;}
.campainwrap .wrapper .column-flex .img-wrap{width: 100%; }
.campainwrap .wrapper .column-flex .column-flex .img-wrap{position: relative;}
.campainwrap .wrapper .column-flex .img-wrap.fiximg{position: relative;}
.campainwrap .wrapper .column-flex .img-wrap.fiximg img{width: auto;height: 100%;position: absolute;left: 50%;top:50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);}
.campainwrap .wrapper .column-flex .img-wrap.fiximg.w img{ width: 100%; height: auto;}

/*text*/
.campainwrap .text-wrap{position: relative;padding-right: 0;display:block;width: 100%;margin: 0;text-align: left;}
.campainwrap .text-wrap *:last-child{ margin-bottom: 0;}

@media screen and (min-width: 901px){
}
@media screen and (max-width: 1000px){
}
@media screen and (max-width: 1140px){
}
@media screen and (max-width: 900px){
}
@media screen and (max-width: 600px){
}


/* box ////////////////////////////////////////////////////////////////////////////////////////////*/
.campainwrap .box-wrap{background:#FFF;}
.campainwrap .box-wrap > *:last-child{}
.campainwrap .box-wrap .box-innner{box-sizing:border-box;margin: 0 4vw;padding: 4vw 0;display: block;width: 100%;}
.campainwrap .box-wrap .box-innner *{ color:#000;}
.campainwrap .box-wrap .box-innner > *:last-child{ margin-bottom:0;}

@media screen and (min-width: 901px){
}
@media screen and (max-width: 1000px){
}
@media screen and (max-width: 1140px){
}
@media screen and (max-width: 900px){
}
@media screen and (max-width: 600px){
}


/* title ////////////////////////////////////////////////////////////////////////////////////////////*/
.campainwrap .title2{font-size: 20px;text-align: left;line-height: 1.5em;margin-bottom:25px;letter-spacing: 0em;font-weight: 700;letter-spacing: 0.1em;}
.campainwrap .title3{font-size:18px;text-align: left;line-height: 1.8em;margin-bottom:20px;font-weight: bold; display: block;}
.campainwrap .title4{font-size:16px;text-align: left;line-height: 1.5em;margin-bottom:15px;}
.campainwrap .title5{font-size:1rem;text-align: left;line-height:2em;margin-bottom:10px;font-weight: 500;}

@media screen and (min-width: 901px){
}
@media screen and (max-width: 1000px){
}
@media screen and (max-width: 1140px){
	.campainwrap .title2{font-size: 18px;text-align: left;line-height: 1.5em;margin-bottom:25px;letter-spacing: 0em;font-weight: 700;letter-spacing: 0.1em;}
	.campainwrap .title3{font-size:15px;text-align: left;line-height: 1.8em;margin-bottom:20px;font-weight: bold; display: block;}
	.campainwrap .title4{font-size:15px;text-align: left;line-height: 1.5em;margin-bottom:15px;}
	.campainwrap .title5{font-size:0.9rem;text-align: left;line-height:2em;margin-bottom:10px;font-weight: 500;}
}
@media screen and (max-width: 900px){
}
@media screen and (max-width: 600px){
	.campainwrap .title2{font-size: 15px;text-align: left;line-height: 1.5em;margin-bottom:25px;letter-spacing: 0em;font-weight: 700;letter-spacing: 0.1em;}
	.campainwrap .title3{font-size:1rem;text-align: left;line-height: 1.8em;margin-bottom:20px;font-weight: bold; display: block;}
	.campainwrap .title4{font-size:1rem;text-align: left;line-height: 1.5em;margin-bottom:15px;}
	.campainwrap .title5{font-size:0.9rem;text-align: left;line-height:2em;margin-bottom:10px;font-weight: 500;}
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

btn

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.campainwrap .btnarea{display: block; width: 100%; overflow: hidden; justify-content: start;}
.campainwrap .btn{width: auto;background: #000;padding: 10px 2em;display: block;margin-top: 5px;}
.campainwrap .btn span{font-size: 18px;line-height: 1em;color: #fff;display: block;letter-spacing: 0.05em;}
.campainwrap .btn span.jp{font-size: 0.9rem;}
.campainwrap .btnarea .btn{margin-right: 5px;}
.campainwrap .btnarea .btn:last-child{margin-right: 0;}
.campainwrap .btnarea.fukusuu .btn{margin-right: 5px; width: calc(50% - 5px);}
.campainwrap .btnarea.fukusuu .btn.long{margin-right: 5px; width: calc(100% - 5px);}

@media screen and (min-width: 901px){
	.campainwrap .btn:hover{opacity: 0.8; transition: 0.3s linear;}
}
@media screen and (max-width: 1000px){
}
@media screen and (max-width: 1140px){
}
@media screen and (max-width: 900px){
	.campainwrap .btnarea .btn{margin-right: 5px; padding: 10px 0.5em;}
	.campainwrap .btn span{font-size: 14px;}
	.campainwrap .btn span.jp{font-size: 0.8rem;}
}
@media screen and (max-width: 600px){
	.campainwrap .btnarea .btn{margin-right: 3px;padding: 6px 0.5em;margin-top: 3px;}
	.campainwrap .btn span.jp{font-size: 0.8rem;}
}

/* //////////////////////////////////////////////////////////////////////////////////////////

 list

 ////////////////////////////////////////////////////////////////////////////////////////////*/

.campainwrap ul.list{}
.campainwrap ul.list > li {text-align: left; padding:0; }
.campainwrap ul.list > li:last-child{margin-bottom: 0;}



/* header ////////////////////////////////////////////////////////////////////////////////////////////*/
.campainwrap .logo img{width: 100%; height: auto;}
.campainwrap .logo.fix{width: 15vw;position: absolute;left: 2.5vw;top: 2.5vw;z-index: 2;}
.campainwrap .engtitle{text-align: center; display: block;}
.campainwrap .engtitle img{height: 24px; width: auto;}
@media screen and (max-width: 1140px){
	.campainwrap .engtitle img{height: 20px; width: auto;}
}
@media screen and (max-width: 900px){
	.campainwrap .logo.fix{min-width: 150px; top: 5vw;}
}
@media screen and (max-width: 600px){
	.campainwrap .logo.fix{min-width: 100px;}
	.campainwrap .engtitle img{height: 16px;}
}

/*/////////////////////////////////////////////////////////////////////////

footer

////////////////////////////////////////////////////////////////////////*/
.campainwrap #footer-wrapper {}
.campainwrap .footer-copyright{text-align: center;font-size: 0.8rem;display: block;line-height: 1.5em;margin: 0;}
.campainwrap .footer-copyright small{/* padding-bottom: 10px; */display: block;}
.campainwrap .footer-copyright img{width:auto; height: 13px;}



.campainwrap .rellax{transition: 2s ease-out;  }
_::-webkit-full-page-media, _:future, :root .rellax {transition: unset;}

.campainwrap #main{position: relative;display: block;width: 100%;height: calc(100vh - 115px);}
.campainwrap #main .main-img{width: 100%; height: 100%;  position: absolute;left: 0;top: 0; background: url(../img/main.jpg) no-repeat center; background-size: cover;}
.campainwrap #main .main-img img{width: 100%; height: auto;}
.campainwrap #main .logo{width: 40vw;height: auto;position: absolute;left: 50%;bottom: 0vw;transform: translateX(-50%) translateY(-50%);}
.campainwrap #main .logo .lead{width: 380px;height: auto;display: block;margin: 1.25vw auto 0;}
.campainwrap #main .logo .lead img{width: 100%; height: auto;}

.campainwrap.portrait #main{height: auto;margin-bottom: 0;}
.campainwrap.portrait #main .main-img{padding-top: 100%; background: url(../img/main_sp.jpg) no-repeat center; background-size: cover;  height: auto; position: relative; left: inherit; top: inherit;}
.campainwrap.portrait #main .logo{transform: translateX(-50%) translateY(-50%);width: 50%;}

@media screen and (min-width: 901px){
}
@media screen and (max-width: 1140px){
.campainwrap #main .logo .lead{width: 60%;}
}
@media screen and (max-width: 900px){
}
@media screen and (max-width: 600px){
	.campainwrap.portrait #main{margin-bottom: 0;}
	.campainwrap.portrait #main .logo{width: 80%;transform: translateX(-50%) translateY(-25%);}
	.campainwrap #main .logo .lead{width: 70%;}
}

.campainwrap #whats{position: relative;}
.campainwrap #whats .wrapper{position: relative; z-index: 1;}
.campainwrap #whats .engtitle{margin-bottom: 3vw;}
.campainwrap #whats .engtitle img{height: 30px;width: auto;}
.campainwrap #whats .titleArea{padding: 10vw 0;}
.campainwrap #whats .titleArea .leadimg{ height: auto; width: 100%;}
.campainwrap #whats .titleArea h2{display: block; margin-bottom: 2.5vw;}
.campainwrap .pointwrap .point{margin: 0;position: relative;text-align: left;/* overflow: hidden; */margin-bottom: 10vw;}
.campainwrap .pointwrap .point .pointinnner{width: 65%;display: block;position: relative;padding-left: 10vw;}
.campainwrap .pointwrap .point:nth-child(2n) .pointinnner{width: 55%;}
.campainwrap .pointwrap .point:nth-child(2n) {display: flex; flex; justify-content:flex-end;}
.campainwrap .pointwrap .point h3{display: block; line-height: 0; margin-bottom: 25px;}
.campainwrap .pointwrap .point .num{width: 5vw;display: block;position: absolute;left: 0;top: 0;}
.campainwrap .pointwrap .point .num img{width: 100%; height: auto;}
.campainwrap .pointeng {margin-bottom: 25px; display: block;}
.campainwrap .pointeng img{height: 34px; width: auto;}
.campainwrap .pointjp{height: 21px; width: auto;}

@media screen and (min-width: 901px){
}
@media screen and (max-width: 1140px){
	.campainwrap #whats .titleArea h2{margin-bottom: 5vw;}
	.campainwrap .pointeng{margin-bottom: 20px;}
	.campainwrap .pointwrap .point .pointinnner{width: 70%;}
	.campainwrap .pointwrap .point:nth-child(2n) .pointinnner{width: 70%;}
	.campainwrap .pointeng img{height: 30px;}
	.campainwrap .pointjp{height: 16px;}
	.campainwrap .pointwrap .point .num{transform: translateY(-15%);}
}
@media screen and (max-width: 900px){
}
@media screen and (max-width: 600px){
	.campainwrap #whats{padding-top: 10vw;}
	.campainwrap #whats .titleArea{padding: 0vw 0 20vw;}
	.campainwrap #whats .engtitle{margin-bottom: 6.5vw;}
	.campainwrap #whats .titleArea h2{margin-bottom: 10vw;}
	.campainwrap .pointeng{margin-bottom: 10px;}
	.campainwrap .pointeng img{height: 25px;}
	.campainwrap .pointwrap .point{margin-bottom: 20vw;}
	.campainwrap .pointwrap .point .num{transform: translateY(-10%);}
	.campainwrap .pointwrap .point .pointinnner{width: 90%;}
	.campainwrap .pointwrap .point:nth-child(2n) .pointinnner{width: 90%;}
	.campainwrap .pointwrap .point h3{margin-bottom: 15px;}
	.campainwrap .pointjp{height: 14px;}
	
}

.ballwrap{opacity: 0; transition:1s opacity ease;}
.campainwrap.whats #whats .ballwrap{opacity: 1;}
.campainwrap.red #red .ballwrap{opacity: 1;}
.campainwrap.green #green .ballwrap{opacity: 1;}
.campainwrap.orange #orange .ballwrap{opacity: 1;}
.campainwrap.strowberry #strowberry .ballwrap{opacity: 1;}
.campainwrap.information #information .ballwrap{opacity: 1;}

#whats .ballwrap{position: absolute;left: 0;top: 0;z-index: 0;width: 100%;height: 100%;display: block;}
#whats .ballwrap .z0 *{z-index: 0; opacity: 0.5;}
#whats .ballwrap .z1 *{z-index: 1;}
#whats .ballwrap .z2 *{z-index: 2; }
#whats .ballwrap .z2 .pine{width: 30%;max-width: 600px;height: auto;position: absolute;left: 90%;top: 28%;transform: translateX(-50%) translateY(-50%);}
#whats .ballwrap .z2 .kiwi{width: 23%;max-width: 600px;height: auto;position: absolute;left: 12%;top: 72%;transform: translateX(-50%) translateY(-50%);}
#whats .ballwrap .z1 .peach{width: 10%;max-width: 300px;height: auto;position: absolute;left: 74%;top: 0%;transform: translateX(-50%) translateY(-50%);}
#whats .ballwrap .z1 .kiwi{width: 8%;max-width: 300px;height: auto;position: absolute;left: 43%;top: 8%;transform: translateX(-50%) translateY(-50%);}
#whats .ballwrap .z1 .orange{width: 10%;max-width: 300px;height: auto;position: absolute;left: 62%;top: 35%;transform: translateX(-50%) translateY(-50%);}
#whats .ballwrap .z0 .orange{width: 6%;max-width: 200px;height: auto;position: absolute;left: 15%;top: 0%;transform: translateX(-50%) translateY(-50%);}
#whats .ballwrap .z0 .watermelon{width: 6%;max-width: 200px;height: auto;position: absolute;left: 66%;top: 23%;transform: translateX(-50%) translateY(-50%);}
#whats .ballwrap .z0 .strowberry{width: 8%;max-width: 200px;height: auto;position: absolute;left: 27%;top: 23%;transform: translateX(-50%) translateY(-50%);}
#whats .ballwrap .z0 .pine{width: 6%;max-width: 200px;height: auto;position: absolute;left: 85%;top: 50%;transform: translateX(-50%) translateY(-50%);}

@media screen and (min-width: 901px){
}
@media screen and (max-width: 1140px){
	#whats .engtitle img{height: 22px;}
	#whats .titleArea .leadimg{width: 80%; height: auto;}
}
@media screen and (max-width: 900px){
	#whats .ballwrap .z2 .pine{width: 50%;max-width: 600px;height: auto;position: absolute;left: 90%;top: 11%;transform: translateX(-50%) translateY(-50%);}
	#whats .ballwrap .z2 .kiwi{width: 40%;max-width: 600px;height: auto;position: absolute;left: 12%;top: 35%;transform: translateX(-50%) translateY(-50%);}
	#whats .ballwrap .z1 .peach{width: 14%;max-width: 300px;height: auto;position: absolute;left: 82%;top: 0%;transform: translateX(-50%) translateY(-50%);}
	#whats .ballwrap .z1 .kiwi{width: 15%;max-width: 300px;height: auto;position: absolute;left: 43%;top: 8%;transform: translateX(-50%) translateY(-50%);}
	#whats .ballwrap .z1 .orange{width: 12%;max-width: 300px;height: auto;position: absolute;left: 18%;top: 40%;transform: translateX(-50%) translateY(-50%);}
	#whats .ballwrap .z0 .orange{width: 5%;max-width: 200px;height: auto;position: absolute;left: 15%;top: 17%;transform: translateX(-50%) translateY(-50%);}
	#whats .ballwrap .z0 .watermelon{width: 5%;max-width: 200px;height: auto;position: absolute;left: 8%;top: 12%;transform: translateX(-50%) translateY(-50%);}
	#whats .ballwrap .z0 .strowberry{width: 7%;max-width: 200px;height: auto;position: absolute;left: 66%;top: 21%;transform: translateX(-50%) translateY(-50%);}
	#whats .ballwrap .z0 .pine{width: 5%;max-width: 200px;height: auto;position: absolute;left: 79%;top: 13%;transform: translateX(-50%) translateY(-50%);}
}
@media screen and (max-width: 600px){
	#whats .engtitle img{height: 12px;}
}



.campainwrap #flavors{padding-top: 10vw;padding-bottom: 10vw;display: block;}
.campainwrap #flavors .engtitle{display: block;margin: 0 auto 10vw;z-index: 1;position: relative;}
.campainwrap .flavorWrap{position: relative;margin-bottom: 15vw;}
.campainwrap .flavorWrap .floverInnner{position: relative;z-index: 1;}
.campainwrap .flavorWrap .flavor-title{display: block;position: absolute;z-index: 1;}
.campainwrap .flavorWrap .flavor-title img{ height: 77px; width: auto;}
.campainwrap .flavorWrap .point-wrap{display:inline-block; position: absolute; }
.campainwrap .flavorWrap .point-wrap img{ height: 400px; width: auto;}

.campainwrap #orange.flavorWrap .flavor-title .seasonIcon{width: 100px;height: auto;display: block;position: absolute;left: 0;top: -20px;transform: translateX(0) translateY(-100%);}
.campainwrap #strowberry.flavorWrap .flavor-title .seasonIcon{width: 100px;height: auto;display: block;position: absolute;right: 0;top: -20px;transform: translateX(0) translateY(-100%);}


.campainwrap .flavorWrap .point-wrap::before{content: ""; width: 18px; height: 52px; display: block; position: absolute; }
.campainwrap .beerimg{width: 20vw;max-width: 300px; position: relative;}
.campainwrap .fruitsList{width: 20vw;max-width: 250px;display: block;border-top: 1px solid #fe496a;position: absolute;}
.campainwrap .fruitsList li{border-bottom: 1px solid #fe496a; padding: 20px 0; position: relative; display:none; display: -webkit-flex!important;display: flex!important;-webkit-flex-wrap: wrap!important;flex-wrap: wrap!important;-webkit-box-pack: justify;justify-content: space-between;}
.campainwrap .ficon{width: 50px;height: 50px;display: block;}
.campainwrap .ficon img{width: 100%; height: auto; }
.campainwrap .fname{width: calc(100% - 75px);display: block;text-align: left;color: #fe496a;font-weight: bold;line-height: 2em;}
.campainwrap .fname .eng{display: block;margin-top: 5px;font-size: 14px;line-height: 1em;}
.campainwrap .flavorWrap > *{z-index: 1;}



.campainwrap .flavorWrap:nth-child(odd) .flavor-title{left: 0;top: 0;}
.campainwrap .flavorWrap:nth-child(odd) .fruitsList{left: 0;top: calc(77px + 5vw);}
.campainwrap .flavorWrap:nth-child(odd) .point-wrap{right: 0; top: 0; padding-right: 40px;}
.campainwrap .flavorWrap:nth-child(even) .flavor-title{right: 0;top: 0; z-index: 1;}
.campainwrap .flavorWrap:nth-child(even) .fruitsList{right: 0;top: calc(77px + 5vw);}
.campainwrap .flavorWrap:nth-child(even) .point-wrap{left: 0; top: 0; padding-left: 40px;}

@media screen and (min-width: 901px){
}
@media screen and (max-width: 1140px){
	.campainwrap .flavorWrap .flavor-title img{ height: 50px; width: auto;}
	.campainwrap .flavorWrap::after{width: 200px; height: 200px;}
	.campainwrap .flavorWrap .point-wrap::before{width: 12px; height: 35px;}
	.campainwrap .fruitsList li{padding: 10px 0;}
	.campainwrap .flavorWrap .point-wrap img{height: 300px;}
	.campainwrap .flavorWrap:nth-child(odd) .fruitsList,
	.campainwrap .flavorWrap:nth-child(even) .fruitsList{top: calc(50px + 5vw);}
	.campainwrap .campainwrap .flavorWrap:nth-child(odd) .point-wrap{padding-right: 25px;}
	.campainwrap .flavorWrap:nth-child(odd) .point-wrap{padding-right: 25px;}
	.campainwrap .flavorWrap:nth-child(even) .point-wrap{padding-left: 25px;}
	.campainwrap .ficon{width: 45px; height: 45px;}
	.campainwrap .fname{width: calc(100% - 60px);}
	.campainwrap #orange.flavorWrap .flavor-title .seasonIcon{width: 75x;}
	.campainwrap #strowberry.flavorWrap .flavor-title .seasonIcon{width: 75px;}
}

@media screen and (max-width: 900px){
	.campainwrap .flavorWrap::after{width: 100px; height: 100px;}
	.campainwrap .flavorWrap .flavor-title img{height: 40px;}
	.campainwrap .flavorWrap .fruitsList{min-width: 160px;}
	.campainwrap .flavorWrap:nth-child(odd) .fruitsList{top: calc(40px + 5vw);}
	.campainwrap .flavorWrap:nth-child(even) .fruitsList{top: calc(40px + 5vw);}
	.campainwrap .ficon{width: 40px; height: 40px;}
	.campainwrap .fname{width: calc(100% - 50px);}
	.campainwrap .flavorWrap .point-wrap img{ height: 250px;}
	.campainwrap #orange.flavorWrap .flavor-title .seasonIcon{width: 62px; top: -10px;}
	.campainwrap #strowberry.flavorWrap .flavor-title .seasonIcon{width: 62px; top: -10px;}
	.campainwrap .fname .eng{font-size: 12px;}
}

@media screen and (max-width: 600px){
	.campainwrap .flavorWrap{ margin-bottom: 25vw;}
	.campainwrap .flavorWrap::after{width: 60px;height: 60px;}
	.campainwrap .flavorWrap .flavor-title img{height: 25px;}
	.campainwrap .flavorWrap .fruitsList{min-width: auto;width: 100%;position: relative; margin: 0 auto;}
	.campainwrap .flavorWrap:nth-child(odd) .fruitsList,
	.campainwrap .flavorWrap:nth-child(even) .fruitsList{top: inherit;}
	.campainwrap .flavorWrap .point-wrap img{ height: 200px;}
	.campainwrap .beerimg{width: 35%; margin-bottom: 5vw;}
	.campainwrap #orange.flavorWrap .flavor-title .seasonIcon{width: 50px; top: -10px;}
	.campainwrap #strowberry.flavorWrap .flavor-title .seasonIcon{width: 50px; top: -10px;}
}



#red .point-wrap::before{background: url(../img/point_red.png) no-repeat; background-size: contain; right: 0; top: 0;}
#green .point-wrap::before{background: url(../img/point_green.png) no-repeat; background-size: contain; left: 0; top: 0;}
#orange .point-wrap::before{background: url(../img/point_orange.png) no-repeat; background-size: contain; left: 0; top: 0;}
#strowberry .point-wrap::before{background: url(../img/point_strowberry.png) no-repeat; background-size: contain; right: 0; top: 0;}

#red.flavorWrap::after{background: url(../img/bg_red.png) no-repeat; background-size: contain; left: 50%;transform: translateX(-5%) translateY(-30%);}
#green.flavorWrap::after{background: url(../img/bg_green.png) no-repeat; background-size: contain; right: 50%;transform: translateX(5%) translateY(-30%);}
#orange.flavorWrap::after{background: url(../img/bg_orange.png) no-repeat; background-size: contain; left: 50%;transform: translateX(-5%) translateY(-30%);}
#strowberry.flavorWrap::after{background: url(../img/bg_strowberry.png) no-repeat; background-size: contain; right: 50%;transform: translateX(5%) translateY(-30%);}

#red .fruitsList{border-top: 1px solid #fe496a;}
#red .fruitsList li{border-bottom: 1px solid #fe496a;}
#red .fname{ color: #fe496a;}
#green .fruitsList{border-top: 1px solid #67ce67;}
#green .fruitsList li{border-bottom: 1px solid #67ce67;}
#green .fname{ color: #67ce67;}
#orange .fruitsList{border-top: 1px solid #ffb346;}
#orange .fruitsList li{border-bottom: 1px solid #ffb346;}
#orange .fname{ color: #ffb346;}
#strowberry .fruitsList{border-top: 1px solid #ff2d4e;}
#strowberry .fruitsList li{border-bottom: 1px solid #ff2d4e;}
#strowberry .fname{color: #ff2d4e;}

/**/
.flavorWrap .ballwrap{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; z-index: 0;}
.flavorWrap .ballwrap img{position: absolute; left: 0; top: 0; transform: translateX(-50%) translateY(-50%);}
#red .ballwrap img:nth-child(1n){width: 15%;max-width: 300px;height: auto;position: absolute;left: 32%;top: -105%;transform: translateX(-50%) translateY(-50%);}
#red .ballwrap img:nth-child(2n){width: 10%;max-width: 300px;height: auto;position: absolute;left: 90%;top: -123%;transform: translateX(-50%) translateY(-50%);}
#red .ballwrap img:nth-child(3n){width: 8%;max-width: 300px;height: auto;position: absolute;left: 10%;top: -175%;transform: translateX(-50%) translateY(-50%);z-index: 0;}

#green .ballwrap img:nth-child(1n){width: 10%;max-width: 300px;height: auto;position: absolute;left: 70%;top: -241%;transform: translateX(-50%) translateY(-50%);opacity: 0.8;}
#green .ballwrap img:nth-child(2n){width: 17%;max-width: 300px;height: auto;position: absolute;left: 12%;top: -60%;transform: translateX(-50%) translateY(-50%);opacity: 1;}
#green .ballwrap img:nth-child(3n){width: 8%;max-width: 300px;height: auto;position: absolute;left: 86%;top: -208%;transform: translateX(-50%) translateY(-50%);z-index: 0;opacity: 0.5;}

#orange .ballwrap img:nth-child(1n){width: 10%;max-width: 300px;height: auto;position: absolute;left: 14%;top: -216%;transform: translateX(-50%) translateY(-50%);opacity: 0.8;}
#orange .ballwrap img:nth-child(2n){width: 17%;max-width: 300px;height: auto;position: absolute;left: 88%;top: -91%;transform: translateX(-50%) translateY(-50%);opacity: 1;}
#orange .ballwrap img:nth-child(3n){width: 8%;max-width: 300px;height: auto;position: absolute;left: 37%;top: -354%;transform: translateX(-50%) translateY(-50%);z-index: 0;opacity: 0.5;}

#strowberry .ballwrap img:nth-child(1n){width: 7%;max-width: 300px;height: auto;position: absolute;left: 62%;top: -500%;transform: translateX(-50%) translateY(-50%);opacity: 0.5;}
#strowberry .ballwrap img:nth-child(2n){width: 9%;max-width: 300px;height: auto;position: absolute;left: 85%;top: -268%;transform: translateX(-50%) translateY(-50%);opacity: 1;}
#strowberry .ballwrap img:nth-child(3n){width: 17%;max-width: 300px;height: auto;position: absolute;left: 19%;top: -111%;transform: translateX(-50%) translateY(-50%);z-index: 0;opacity: 0.8;}
/**/

@media screen and (min-width: 901px){
}
@media screen and (max-width: 1140px){
}
@media screen and (max-width: 900px){
#red .ballwrap img:nth-child(1n){width: 15%;max-width: 300px;height: auto;position: absolute;left: 35%;top: -118%;transform: translateX(-50%) translateY(-50%);}
#red .ballwrap img:nth-child(2n){width: 10%;max-width: 300px;height: auto;position: absolute;left: 73%;top: -120%;transform: translateX(-50%) translateY(-50%);}
#red .ballwrap img:nth-child(3n){width: 8%;max-width: 300px;height: auto;position: absolute;left: 10%;top: -228%;transform: translateX(-50%) translateY(-50%);z-index: 0;}

#green .ballwrap img:nth-child(1n){width: 10%;max-width: 300px;height: auto;position: absolute;left: 32%;top: -209%;transform: translateX(-50%) translateY(-50%);opacity: 0.8;}
#green .ballwrap img:nth-child(2n){width: 17%;max-width: 300px;height: auto;position: absolute;left: 18%;top: -152%;transform: translateX(-50%) translateY(-50%);opacity: 1;}
#green .ballwrap img:nth-child(3n){width: 8%;max-width: 300px;height: auto;position: absolute;left: 76%;top: -347%;transform: translateX(-50%) translateY(-50%);z-index: 0;opacity: 0.5;}

#orange .ballwrap img:nth-child(1n){width: 10%;max-width: 300px;height: auto;position: absolute;left: 33%;top: -249%;transform: translateX(-50%) translateY(-50%);opacity: 0.8;}
#orange .ballwrap img:nth-child(2n){width: 17%;max-width: 300px;height: auto;position: absolute;left: 68%;top: -177%;transform: translateX(-50%) translateY(-50%);opacity: 1;}
#orange .ballwrap img:nth-child(3n){width: 8%;max-width: 300px;height: auto;position: absolute;left: 12%;top: -372%;transform: translateX(-50%) translateY(-50%);z-index: 0;opacity: 0.5;}

#strowberry .ballwrap img:nth-child(1n){width: 7%;max-width: 300px;height: auto;position: absolute;left: 29%;top: -516%;transform: translateX(-50%) translateY(-50%);opacity: 0.5;}
#strowberry .ballwrap img:nth-child(2n){width: 9%;max-width: 300px;height: auto;position: absolute;left: 85%;top: -340%;transform: translateX(-50%) translateY(-50%);opacity: 1;}
#strowberry .ballwrap img:nth-child(3n){width: 17%;max-width: 300px;height: auto;position: absolute;left: 19%;top: -249%;transform: translateX(-50%) translateY(-50%);z-index: 0;opacity: 0.8;}
}
@media screen and (max-width: 600px){
#red .ballwrap img:nth-child(1n){width: 17%;max-width: 300px;height: auto;position: absolute;left: 12%;top: -95%;transform: translateX(-50%) translateY(-50%);}
#red .ballwrap img:nth-child(2n){width: 12%;max-width: 300px;height: auto;position: absolute;left: 71%;top: -145%;transform: translateX(-50%) translateY(-50%);}
#red .ballwrap img:nth-child(3n){width: 10%;max-width: 300px;height: auto;position: absolute;left: 26%;top: -191%;transform: translateX(-50%) translateY(-50%);z-index: 0;}
	

#green .ballwrap img:nth-child(1n){width: 15%;max-width: 300px;height: auto;position: absolute;left: 83%;top: -220%;transform: translateX(-50%) translateY(-50%);opacity: 0.8;}
#green .ballwrap img:nth-child(2n){width: 17%;max-width: 300px;height: auto;position: absolute;left: 16%;top: -58%;transform: translateX(-50%) translateY(-50%);opacity: 1;}
#green .ballwrap img:nth-child(3n){width: 12%;max-width: 300px;height: auto;position: absolute;left: 76%;top: -218%;transform: translateX(-50%) translateY(-50%);z-index: 0;opacity: 0.5;}

#orange .ballwrap img:nth-child(1n){width: 14%;max-width: 300px;height: auto;position: absolute;left: 17%;top: -390%;transform: translateX(-50%) translateY(-50%);opacity: 0.8;}
#orange .ballwrap img:nth-child(2n){width: 17%;max-width: 300px;height: auto;position: absolute;left: 58%;top: -210%;transform: translateX(-50%) translateY(-50%);opacity: 0.5;}
#orange .ballwrap img:nth-child(3n){width: 10%;max-width: 300px;height: auto;position: absolute;left: 29%;top: -432%;transform: translateX(-50%) translateY(-50%);z-index: 0;opacity: 0.5;}

#strowberry .ballwrap img:nth-child(1n){width: 7%;max-width: 300px;height: auto;position: absolute;left: 32%;top: -739%;transform: translateX(-50%) translateY(-50%);opacity: 0.5;}
#strowberry .ballwrap img:nth-child(2n){width: 9%;max-width: 300px;height: auto;position: absolute;left: 85%;top: -453%;transform: translateX(-50%) translateY(-50%);opacity: 0.5;}
#strowberry .ballwrap img:nth-child(3n){width: 17%;max-width: 300px;height: auto;position: absolute;left: 62%;top: -175%;transform: translateX(-50%) translateY(-50%);z-index: 0;opacity: 0.8;}
}

.campainwrap .awaBg{background: url(../img/awa_bg.jpg) center;}
.campainwrap .beerBg{background: url(../img/beer_bg.jpg) center;}
#information{padding-bottom: 200px;position: relative;}
#information .awaBg{padding: 0 0 200px;position: relative;}
#information .awaBg .engtitle{position: relative;z-index: 1;}
#information .awaBg::before{content: "";width: 100%;height: 500px;background: url(../img/awa_top.png) center no-repeat;position: absolute;top: -150px;left: 50%;transform: translateX(-50%);}
#information .beerBg{padding: 0;position: relative;width: 100%;height: calc(100% - 230px);display: block;position: absolute;left: 0;top: 230px;}
#information .beerBg::before{content: "";width: 100%;height: 500px;background: url(../img/beer_top.png) center no-repeat;position: absolute;top: -150px;left: 50%;transform: translateX(-50%);}

.campainwrap #information .infobox .btn{width: auto;background: #000;padding:15px 3em;display:inline-block;}
.campainwrap #information .infobox .btn span{font-size: 16px;line-height: 1em;color: #fff;display: block;letter-spacing: 0.05em;}
.campainwrap #information .infobox .column{margin-bottom:3vw;}
.campainwrap #information .infobox .entry figure,
.campainwrap #information .infobox .entry p{margin-bottom: 1.5vw;}
.campainwrap #information .infobox .entry figure:last-child, .campainwrap #information .infobox .entry p:last-child{margin-bottom: 0;}

@media screen and (min-width: 901px){
}
@media screen and (max-width: 1140px){
	#information{padding-bottom: 100px;}
	#information .awaBg{padding: 0 0 100px;}
	#information .awaBg::before{top: -100px;}
	#information .beerBg { height: calc(100% - 130px);top: 130px;}
	#information .beerBg::before{top: -100px;}
}
@media screen and (max-width: 900px){
	#information .awaBg{background-size: 585px;}
	#information .beerBg{background-size: 585px;}
	#information .awaBg::before{background-size: 974px;height: 250px;}
	#information .beerBg::before{background-size: 974px;height: 250px;}
	
	#information{padding-bottom: 100px;}
	#information .awaBg{padding: 0 0 10vw;}
	#information .awaBg::before{top: -50px;}
	#information .beerBg {height: calc(100% - 80px);top: 80px;}
	#information .beerBg::before{top: -50px;}
}
@media screen and (max-width: 600px){
	#information{padding-bottom: 15vw;}
	.campainwrap #information .infobox .entry figure, .campainwrap #information .infobox .entry p{margin-bottom: 3vw;}
	.campainwrap #information .infobox .btn{width: 100%;}
}

.campainwrap .infobox{background: #fff;padding: 2.5vw;margin-bottom: 2.5vw;border-radius: 25px;clear: both;}
.campainwrap .infobox:nth-child(odd){transform: translateX(0vw);float: left;}
.campainwrap .infobox:nth-child(even){transform: translateX(0vw);float: right;}
.campainwrap .infobox .innner{position: relative;}
.campainwrap .infobox .innner .title2{padding-right: 80px;}
.campainwrap .infobox .innner .days{ position: absolute; right: 0; top:0em;}
.campainwrap .infobox .innner *:last-child{margin-bottom: 0;}
.campainwrap .infowrap{margin-bottom: 10vw;position: relative;z-index: 1;overflow: hidden;}

.campainwrap #information .footarea{z-index: 1;padding-bottom: 0;}
.campainwrap .footarea .footlogo{width: 40vw;height: auto; display: block; margin:0 auto 2.5vw;}
.campainwrap .footarea .btn{width: 30vw;max-width: 400px;background: #000;padding: 20px 0;margin: 0 auto;}
.campainwrap .footarea .btn span{font-size: 30px;line-height: 1em;color: #fff;display: block;letter-spacing: 0.05em;}
.campainwrap #photo{width: 100%; height: 600px; display: block; background: url(../img/foot_img.jpg) center; animation: photoloop 40s linear infinite; position: relative;
    z-index: 2;}



.beerBg .ballwrap {  mix-blend-mode: multiply;}
.beerBg .ballwrap img{width: 12%;height: auto;max-width: 200px;position: absolute;transform: translateX(-50%) translateY(-50%);opacity: 0.9;}
.beerBg .ballwrap img:nth-child(1){width: 10%;left: 69%;top: -140%;opacity: 0.3;}
.beerBg .ballwrap img:nth-child(2){width: 9%;left: 93%;top: -60%;}
.beerBg .ballwrap img:nth-child(3){width: 11%;left: 10%;top: -100%;}
.beerBg .ballwrap img:nth-child(4){width: 11%;left: 87%;top: 62%;opacity: 0.45;}
.beerBg .ballwrap img:nth-child(5){width: 9%;left: 24%;top: -14%;opacity: 0.25;}
.beerBg .ballwrap img:nth-child(6){width: 10%;left: 73%;top: 41%;}

@keyframes photoloop {
    0% { background-position: 0 0;}
  100% { background-position: 2400px 0;}
}

@media screen and (min-width: 901px){
}
@media screen and (max-width: 1140px){
	.infobox{background: #fff; padding: 5vw; margin-bottom: 5vw;}
	.footarea .btn span{font-size: 24px;}
	#photo{height: 400px; background-size: 1600px;}
	@keyframes photoloop {
		0% { background-position: 0 0;}
	  100% { background-position: 1600px 0;}
	}
}
@media screen and (max-width: 900px){
	.campainwrap .footarea .footlogo{width: 50vw; margin-bottom: 5vw;}
	.campainwrap .infobox:nth-child(odd){transform: translateX(0vw);}
.campainwrap .infobox:nth-child(even){transform: translateX(0vw);}
	.campainwrap #photo{ height: 300px; background-size: 1200px;}
	
	@keyframes photoloop {
		0% { background-position: 0 0;}
	  100% { background-position: 1200px 0;}
	}
	.beerBg .ballwrap img:nth-child(1){width: 10%;left: 69%;top: -98%;opacity: 0.3;}
.beerBg .ballwrap img:nth-child(2){width: 9%;left: 93%;top: -60%;}
.beerBg .ballwrap img:nth-child(3){width: 11%;left: 10%;top: -70%;}
.beerBg .ballwrap img:nth-child(4){width: 11%;left: 87%;top: 12%;opacity: 0.45;}
.beerBg .ballwrap img:nth-child(5){width: 9%;left: 24%;top: 15%;opacity: 0.25;}
.beerBg .ballwrap img:nth-child(6){width: 10%;left: 73%;top: 41%;}
}
@media screen and (max-width: 600px){
	.campainwrap .footarea .footlogo{width: 80%;}
	.campainwrap .infobox{padding: 5vw;margin-bottom: 5vw;border-radius: 15px;}
	.campainwrap .infobox .innner .title2{padding-right: 0; margin-bottom: 2.5vw;}
	.campainwrap .infobox .innner .days{position: relative; right: inherit; top: inherit; margin-bottom: 5vw; display: block; text-align: left;}
	.campainwrap #photo{height: 150px;background-size: 600px;}
	.campainwrap .footarea .btn{ width: 70%;    padding: 15px 0;}
	.campainwrap .footarea .btn span{    font-size: 18px;}
	@keyframes photoloop {
		0% { background-position: 0 0;}
	  100% { background-position: 600px 0;}
	}
}

.campainwrap .sns a{width: 30px; height: 30px; display: block; }
.campainwrap #footer-wrapper{padding: 5vw 0;}
.campainwrap #footer-wrapper .sns{width: 110px;display: block;margin: 0 auto 5vw;overflow:hidden;}
.campainwrap #footer-wrapper .sns a{margin-right: 10px; float: left;}
.campainwrap #footer-wrapper .sns a:last-child{margin-right: 0;}
.campainwrap .sns.fix{width: 30px;display: block;position: absolute;right: 5vw;top: 2.5vw;transform: translateX(50%);}
.campainwrap .sns.fix a{margin-bottom: 10px;}

/*shoplist*/
.campainwrap #shoplist{position: relative;}
.campainwrap #shoplist .engtitle img{    height: 40px;}
.campainwrap #shoplist > *{position: relative; z-index: 1;}
.campainwrap #shoplist .awaBg{padding: 200px 0;position: relative; z-index: 0;}
.campainwrap #shoplist .beerBg{padding: 50px 0 0;position: absolute;width: 100%;height: calc(100% - 440px);top: 440px;left: 0; z-index: 0;}
.campainwrap #shoplist .beerBg::before{content: "";width: 100%;height: 500px;background: url(../img/beer_top.png) center no-repeat;position: absolute;top: -150px;left: 50%;transform: translateX(-50%);}

.campainwrap #shoplist .infobox .innner .title2{padding-right: 0;}

.campainwrap .shopimg{width: 20vw;min-height: 13vw;display: block;position: relative;overflow: hidden;}
.campainwrap .shopimg img{height: auto;width: 100%;position: absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);}
.campainwrap .shopinfo{width: calc(100% - 22.5vw);}

.campainwrap .closebtn{position: relative;}
.campainwrap .closebtn::before{content: ""; width: 30px; height: 30px; display: block; position: absolute; left: 30px; top: 50%; transform: translateY(-50%); background: url(../img/home.svg) no-repeat; background-size: contain;}

.campainwrap .closebtn.fix{position: absolute;right: 0;top: 0;font-size: 12px;display: block;width: 80px;height: 80px;padding: 0;margin: 0;z-index: 100;/* border-radius: 50%; */top: 2.5vw;right: 2.5vw;}
.campainwrap .closebtn.fix::before{position: relative;left: inherit;top: 0;transform: none;margin: 10px auto 5px;}

@media screen and (min-width: 901px){
	.campainwrap h4{text-align: left; margin-top: 15px; }
	.campainwrap .tonden .shopimg img {top: 16%;}
}
@media screen and (max-width: 1140px){
	.campainwrap #shoplist .infobox .innner .title2{margin-bottom: 15px;}
}
@media screen and (max-width: 900px){
	.campainwrap #shoplist .engtitle img{ height: 20px;}
	.campainwrap #shoplist .infobox .innner .title2{ margin-bottom: 15px; font-size: 14px;}
	.campainwrap .shopimg{width: 40%;}
	.campainwrap .shopinfo{width: 55%;}
	.campainwrap #shoplist .awaBg{background-size: 585px;}
	.campainwrap #shoplist .beerBg{background-size: 585px;}
	.campainwrap #shoplist .awaBg::before{background-size: 974px;height: 250px;}

	.campainwrap #shoplist .beerBg::before{background-size: 974px;height: 250px;}
	
	.campainwrap #shoplist{padding-bottom: 100px;}
	.campainwrap #shoplist .awaBg{padding: 15vw 0 10vw;}
	.campainwrap #shoplist .awaBg::before{top: -50px;}
	.campainwrap #shoplist .beerBg {height: calc(100% - 25vw + 24px);top: calc(25vw + 24px);}
	.campainwrap #shoplist .beerBg::before{top: -50px;}
	.campainwrap h4{text-align: left; margin-top: 15px; }
	.campainwrap .tonden .shopimg img {top: 13%;}
}
@media screen and (max-width: 600px){
	.campainwrap .closebtn.fix{width: 50px; height: 50px; font-size: 10px;}
	.campainwrap .closebtn.fix::before{width: 20px;height: 20px;margin: 7px auto 3px;}
	.campainwrap .closebtn.fix .eng{font-size: 10px; text-align: center; }
	.campainwrap .shopimg{width: 100%;margin-bottom: 15px;padding-top: 60%;min-height: initial;}
	.campainwrap .shopinfo{width: 100%;}
	.campainwrap #shoplist .awaBg{padding: 25vw 0 15vw;}
	.campainwrap #shoplist .beerBg{height: calc(100% - 40vw + 24px);top: calc(40vw + 24px);}
	.campainwrap .tonden .shopimg img {top: 50%;}
}

/**/
.campainwrap .awa_beer{position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.campainwrap .awa_beer span{position: absolute; display: block; width: 100%; height: 100%; display: block; left: 0; top: 0;}
.campainwrap .awa_beer span:nth-child(1){ background: url(../img/awa_big.png) center;  animation: bgiLoop 5s linear infinite;}
.campainwrap .awa_beer span:nth-child(2){ background: url(../img/awa_mini.png) center;  animation: bgiLoop 3s linear infinite;}
@keyframes bgiLoop {
    0% { background-position: 0 0;}
	10% { background-position: 1px -86px;}
	20% { background-position: -1px -172px;}
	30% { background-position: 1px -258px;}
	40% { background-position: -1px -344px;}
	50% { background-position: 1px -430px;}
	60% { background-position: -1px -516px;}
	70% { background-position: 1px -602px;}
	80% { background-position: -1px -688px;}
	90% { background-position: 1px -774px;}
  100% { background-position: -1px -860px;}
}
.campainwrap #information .awa_beer{height: calc(100% + 150px);}

.campainwrap  .pc{ display:inline-block;}
.campainwrap  .sp{ display:none!important;}

@media screen and (max-width:900px){
	.campainwrap  .pc{ display:none!important; }
	.campainwrap  .sp{ display:block!important;}
}

/*font*/
.campainwrap .days,
.campainwrap .eng{font-family: 'Bebas Neue', cursive;}
.campainwrap .eng.bold{font-weight: bold;}
.campainwrap .bold{font-weight: bold;}

.campainwrap .t-center { text-align: center !important; }
.campainwrap .t-right { text-align: right !important; }
.campainwrap .t-left { text-align: left !important; }
/*color*/
.campainwrap .white-coler{ color: #fff; }
/*bg*/
.campainwrap .white-bg{ background: #fff;}

/*shadow*/
.campainwrap .shadow{-webkit-box-shadow: rgba(0,0,0,.5) 0 1px 2px 1px; -moz-box-shadow: rgba(0,0,0,.5) 0 1px 2px 1px; box-shadow: rgba(0,0,0,.5) 0 1px 2px 1px;}

.caption{display: block; padding-left: 1.5em!important; position: relative; font-size: 0.96em;}
.caption::before{content: "��"; display: inline-block; position: absolute; left: 0;top: 0;}

.campainwrap a[target="_blank"]{ position: relative;}
.campainwrap a[target="_blank"]::after { content:""; width: 11px; height: 10px; background: url(../img/blank.gif) no-repeat; display: block; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}
.campainwrap .btn span.eng{margin: 0 30px;}
.campainwrap .closebtn.fix span.eng{margin: 0;}

@media screen and (max-width:900px){
	.campainwrap a[target="_blank"]::after { content:""; width: 8px; height: 7.5px; right: 5px; background: url(../img/blank.gif) no-repeat; background-size: 8px; }
}