@charset "UTF-8";
@import "reset5.css";

body { color:#000; line-height:1;  padding: 0; position: relative; min-height: 100%; background: #fff; }
html { min-height: 100%; }

* {word-wrap: break-word; }
img { -ms-interpolation-mode: bicubic; }
/* !font-size 14px default setting */
body { font-size: 14px; letter-spacing: 0; font-family: "Helvetica, Arial, hiragino-kaku-gothic-pron", sans-serif; }
p, th, td, li, dt, dd, span { line-height: 1.6em; font-weight: 600; }
h2, h3, h4, h5 { font-family: "Helvetica, Arial, hiragino-kaku-gothic-pron", sans-serif; line-height: 1.6; letter-spacing: 0; font-style: normal; font-weight: bold; }


/* !clearfix */
hr { display: none; }

.cfix { zoom:1; }
.cfix:after{
    content:"";
    clear:both;
    display:block;
    height:0;
	font-style:italic
}

/* スクロールバーの有無によるズレ対策 */
html {
	overflow-y: scroll;
}

img { vertical-align: bottom; }


.fltR { float: right; }
.fltL { float: left; }

.txtR { text-align: right; }
.txtL { text-align: left; }
.txtC { text-align: center; }

.pc_none { display: none }
.sp_none { display: block }


/* !Links */
a { color: #000; font-weight: 600; cursor: pointer }
a:hover { text-decoration: none; }


#wrapper { position: relative; width: 100%; text-align: left; min-height: 100%; overflow: hidden }


/* リストの高さ揃える */
.list-flex { display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap; }


.red { color: #DA0132; }


/* main */
.main { position: relative; }
.main p { font-size: 0.9vw; font-weight: bold; padding: 0; position: absolute; bottom: 4.6vw; left: 31.8vw; width: 37vw; }
.main a {font-weight: bold; }


/* intro */
.intro { text-align: center; }
.intro .inner { max-width: 1000px; margin: 0 auto; padding: 35px 4.4vw 40px; }
.intro p { font-size: 14px; padding: 10px 0 25px; }
.intro .btn a { color: #DA0132; font-size: 14px; text-decoration: none; border: 1px solid #DA0132; border-radius: 60px; padding: 10px 20px 10px 50px; display: inline-block; position: relative; transition: all 0.2s; }
.intro .btn a:hover { transform: scale(1.06); }
.intro .btn .arw { position: absolute; top: calc(50% - 8px); left: 20px; }
.intro .inner h2 { font-size: 1.5em; }


/* campaign */
.campaign { text-align: center; }
.campaign .bg-gray { background: url("../img/bg_pc.jpg") repeat; background-size: cover; padding: 40px 0; }
.campaign .inner { max-width: 1000px; margin: 0 auto; padding: 0 4.4vw; position: relative; }
.campaign h2 { color: #007A3D; font-size: 40px; line-height: 1.2em; }
.campaign .menu ul { margin: 40px 0 0 -40px; }
.campaign .menu ul li { width: calc(50% - 40px); float: left; margin: 0 0 0 40px; border-top: 2px solid #DA0132; position: relative; }
.campaign .menu ul li .num { text-align: left; margin: 0 0 0 20px; }
.campaign .menu ul li h3 { font-size: 30px; line-height: 1.4em; padding: 5px 0 0; }
.campaign .menu ul li h3 .shoulder { font-size: 16px; text-align: left; position: absolute; top: 5px; left: 90px; display: block; }
.campaign .menu ul li a { display: block; transition: all 0.1s; padding: 30px 0 }
.campaign .menu a:hover { transform: translateY(5px); }
.campaign .ico_insta { vertical-align: middle; margin: 0 10px 0 0; }
.campaign .detail { text-align: left; position: relative; }
.campaign .ttl { position: absolute; top: 35px; left: calc(160px + 4.4vw); z-index: 4; }
.campaign .ttl h3 { font-size: 36px; line-height: 1.2em; margin: 0 0 25px; }
.campaign .ttl h3 .shoulder { font-size: 18px; display: block; }
.campaign .ttl .term { font-size: 18px; line-height: 1em; margin: 0 0 8px; padding: 4px 0 0 200px; position: relative; }
.campaign .ttl .term span { font-size: 14px; line-height: 1em; text-align: center; padding: 5px 0 3px; border: 1px solid #000; width: 188px; display: block; position: absolute; top: 0; left: 0; }
.campaign .pic { position: relative; }
.campaign .pic .mrk { position: absolute; bottom: -40px; left: 20px; }
.campaign .pic .item { border-radius: 20px; }
#campaign01 .campaign_A { padding: 50px 0 0; }
#campaign01 .campaign_A h4 { font-size: 30px; line-height: 1.4em; }
#campaign01 .campaign_A h4 span { font-size: 22px; }
#campaign01 .campaign_A .winners { color: #DA0132; font-size: 18px; padding: 10px 0 0 110px; }
#campaign01 .campaign_A .box { border-top: 1px solid #000; padding: 20px 0 0; margin: 30px 0 0; }
#campaign01 .campaign_A .box p {  font-size: 14px; padding: 20px 0 0; }
#campaign02 .campaign_A { padding: 80px 0 0; position: relative; z-index: 4; }
#campaign02 .campaign_A h4 { font-size: 30px; line-height: 1.4em; margin: 10px 0 0; }
#campaign02 .campaign_A .winners { color: #DA0132; font-size: 18px; padding: 50px 0 0 90px; }
#campaign02 .campaign_A .pic { position: relative; width: calc(50% - 20px); }
#campaign02 .campaign_A .pic span { position: absolute; left: 20px; top: 20px; font-size: 24px }
#campaign02 .campaign_A .txt { position: absolute; top: 80px; left: 51%; }
#campaign02 .campaign_A .txt .mrk { position: absolute; top: 0; left: 0; }
#campaign02 .campaign_A p.mt { margin-top: 1em }
#campaign02 .item { border: 2px solid #EBC9D0; }
#campaign02 h4 span { font-size: 14px; font-weight: 400; display: block }
.campaign .detail ul { margin: 0 0 0 -40px; position: relative; z-index: 4; }
.campaign .detail ul li { width: calc(50% - 40px); float: left; margin: 50px 0 0 40px; }
.campaign .detail ul li h4 { font-size: 22px; line-height: 1.4em; padding: 10px 0 0; }
.campaign .detail ul li h4 span { font-size: 18px; }
.campaign .detail ul li .winners { color: #DA0132; font-size: 18px; padding: 10px 0 0 100px; }
.campaign .detail ul li .notes { font-size: 12px; margin: 5px 0 10px; }
.campaign .btn a { color: #DA0132; font-size: 14px; text-decoration: none; line-height: 1em; border: 1px solid #DA0132; border-radius: 60px; padding: 10px 15px 10px 45px; display: inline-block; position: relative; transition: all 0.2s; }
.campaign .btn a:hover { transform: scale(1.06); }
.campaign .btn .arw { position: absolute; top: calc(50% - 8px); left: 20px; }
.campaign .remarks { margin: 20px 0 0 -20px !important; }
.campaign .remarks li { width: calc(100% - 40px)!important; float: none !important; margin: 0 0 0 40px !important; text-indent: -20px; }


/* howto */
.howto { position: relative; }
.howto .bg { position: relative; z-index: 1; }
.howto h5 { color: #fff; font-size: 24px; line-height: 1.4em; }
.howto h5 span { font-size: 14px; display: block; padding: 0 0 0 40px; }
.howto h5 .ill { position: absolute; top: -30px; left: -60px; }
.howto .frame { background: #DA0132; padding: 40px 0 80px; position: relative; z-index: 4; }
.howto ul { margin: 0 0 0 -35px; }
.howto ul li { width: calc(33.333% - 35px); float: left; background: #fff; padding: 30px 0 20px; margin: 0 0 0 35px; position: relative; }
.howto ul li .step { position: absolute; top: -15px; left: calc(50% - 62.5px); }
.howto ul li p { font-size: 18px; }
.howto ul li p span { color: #DA0132; }
.howto ul li .notes { font-size: 12px; }
.howto .btn-form { margin: 40px 0 0; }
.howto .btn-form a { color: #fff; font-size: 28px; text-decoration: none; background: #000; padding: 30px 35px 30px 90px; border-radius: 60px; display: inline-block; position: relative; transition: all 0.2s; }
.howto .btn-form a:hover { transform: scale(1.06); }
.howto .btn-form .arw { position: absolute; top: calc(50% - 14px); left: 40px; }
.howto .btn-form p { font-size: 18px; margin: 5px 0 0; }
#campaign01 .howto h5 { position: absolute; top: -105px; right: calc(40px + 4.4vw); z-index: 3; }
#campaign02 .howto h5 { position: absolute; top: -105px; left: calc(60px + 4.4vw); z-index: 3; }
#campaign01 .howto ul li:nth-child(1) p { margin: 0 0 50px; }
#campaign01 .howto ul li:nth-child(3) p { margin: 0 0 30px; }
#campaign02 .howto ul li:nth-child(1) .arw { transform: rotate(90deg); }
#campaign02 .howto ul li:nth-child(1) .notes { margin: 0 0 10px; }
#campaign02 .howto ul li:nth-child(2) p { margin: 0 0 10px; }
#campaign02 .howto ul li:nth-child(3) p { margin: 0 0 30px; }
#campaign02 .howto { margin: 50px 0 0; }

.kazari01 { position: absolute; top: -375px; right: -40px; z-index: 1; }
.kazari02 { position: absolute; top: 40px; right: -40px; z-index: 1; }

.stores { }
.stores .stores-inner { max-width: 1000px; margin: 0 auto; padding: 80px 4.4vw; text-align: left }
.stores .prefecture { padding: 20px 0 }
.stores .prefecture h3 { font-size: 18px; color: #707070; margin-bottom: 1em }
.stores .prefecture .city { margin-top: 30px }
.stores .prefecture .city h3 { font-size: 18px; color: #000; margin-bottom: 1em }
.stores .prefecture .city ul {}
.stores .prefecture .city ul li.hd span { display: block; width: calc(70% - 1px); border-right: solid 1px #707070; float: left; padding: 5px 0; text-align: center; background: #F2F2F2 } 
.stores .prefecture .city ul li.hd span:last-child { width: 30%; border-right: none }
.stores .prefecture .city ul li .store-wrapper { padding: 30px 0; border-bottom: dotted 1px #707070 }
.stores .prefecture .city ul li .store-wrapper .store { float: left; width: 70% }
.stores .prefecture .city ul li .store-wrapper .store h4 { font-size: 18px; margin-bottom: 0.5em  }
.stores .prefecture .city ul li .store-wrapper .store p { color: #707070; line-height: 2em  }
.stores .prefecture .city ul li .store-wrapper .store a.gmap { display: inline-block; position: relative; padding: 0 0.5em 0 20px }
.stores .prefecture .city ul li .store-wrapper .store a.gmap img { display: block; position: absolute; left: 2px; top: 4px; width: 12px; height: 18px; background: url("../img/pointer.png") no-repeat; background-size: contain }
.stores .prefecture .city ul li .store-wrapper .period { float: left; width: 30%; text-align: center }
.stores .prefecture .city ul li .store-wrapper .period p { font-weight: bold; font-size: 18px }
.stores .area { margin: 0 0 40px; padding: 40px 0; border-bottom: solid 1px #707070; text-align: left }
.stores .area ul { margin: 0 -20px }
.stores .area ul li.l { float: left; width: 33.33%; line-height: 2 }
.stores .area ul li.l .inner { padding: 0 20px; }
.stores .area ul li.l .pt10 { padding-top: 10px }
.stores .area select { width: 100% !important; }
.stores .area select li { width: 100% !important }
.stores .area { margin-top: 10px } 
.btn_search { font-size: 16px }
.btn_search a { background: #000; color: #fff; text-align: center; padding: 10px 0; border-radius: 30px; display: block }
.btn_search a:hover { background: #e5e5e5; color: #000; }

.stores .tasting_block {margin-top: 20px; color:#B33E5C;}
.stores .tasting_block span{display:block; width: 100%; font-size: 0.7em; background:#B33E5C; color:#FFF; margin-bottom:10px;line-height:2.5;}


/* footer */
#footer { text-align: center; padding: 80px 0 0; background: url("../img/bg_pc.jpg") repeat; background-size: cover; }
#footer h4 { font-size: 15px; margin: 0 0 0px; }
#footer .inquiry { padding: 0 0 50px; }
#footer .inquiry .box { display: inline-block; position: relative; }
#footer .inquiry .box  p { font-size: 15px; text-align: left; display: inline-block; padding: 20px 0 0 160px; position: relative; }
#footer .inquiry .box .logo { position: absolute; top: 10px; left: 60px; }
#footer .support ul { font-size: 0; padding: 10px 0 50px; }
#footer .support ul li { display: inline-block; border-left: 1px solid #707070; }
#footer .support ul li:nth-child(1) { border-left: none; }
#footer .support ul li a { padding: 0 50px; }
#footer .support ul li a:hover { opacity: 0.5; }
#footer .support .sponsorship { margin: 20px 0 0; }
#footer .copy { border-top: 1px solid #000; padding: 20px 40px 40px; margin: 80px 0 0; position: relative; }
#footer .copy p { font-size: 12px; text-align: left; }
#footer .copy .copyright { position: absolute; top: 20px; right: 40px; }
#backto { position: fixed; right: 20px; bottom: 20px; z-index: 10000 }
#backto a { display: block; transition: all 0.2s }
#backto a:hover { transform: scale(1.08) }


@media screen and (max-width: 820px) {
	.kazari01 { position: absolute; top: -275px; right: -20px; z-index: 1; width: 400px; }
	.kazari02 { position: absolute; top: 200px; right: 0; z-index: 1; width: 200px; }
	#footer .support ul li a img { width: 140px; }
	#footer .copy { border-top: 1px solid #000; padding: 20px 40px 40px; margin: 40px 0 0; position: relative; }
	#footer .copy .copyright { position: static; margin: 10px 0 0; text-align: center; }
} 



@media screen and (max-width: 780px) {
	
    body { font-size: 13px; line-height: 1.6; -webkit-text-size-adjust: none; }
	
    a { text-decoration:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-touch-callout:none; }

    .pc_none { display: block }
    .sp_none { display: none }
	
	
	/* main */
	.main p { font-size: 2.7vw; position: absolute; bottom: 32vw; left: 13vw; width: 76vw; }


	/* intro */
	.intro .inner { padding: 25px 8.8vw 30px; }
	.intro p { font-size: 16px; padding: 10px 0 15px; }
	.intro .btn a:hover { transform: scale(1.0); }

	
	/* campaign */
	.campaign h2 { font-size: 22px; }
	.campaign .bg-gray { padding: 30px 0; background: url("../img/bg_sp.jpg") repeat; background-size: contain; }	
	.campaign .menu ul { margin: 30px 4.4vw 0; }
	.campaign .menu ul li { width: 100%; margin: 0 0 20px; }
	.campaign .menu ul li:last-child { margin: 0; }
	.campaign .menu ul li .num { text-align: left; margin: 0; position: absolute; top: 0; left: 0; }
	.campaign .menu ul li .num img { width: 40px; }	
	.campaign .menu ul li h3 { font-size: 20px; line-height: 1.4em; padding: 5px 0 0; }
	.campaign .menu ul li h3 .shoulder { font-size: 14px; position: static; padding: 0 0 10px 55px; }
    .campaign .menu ul li a { padding: 20px 0 }
	.campaign .menu ul li .arw { width: 24px; }
	.campaign .menu a:hover { transform: translateY(0); }
	.campaign .ico_insta { margin: 0 10px 0 0; width: 24px; }
	.campaign .num { position: absolute; top: 0; left: 4.4vw; }
	.campaign .num img { width: 50px; }
	.campaign .ttl { position: static; }
	.campaign .ttl h3 { font-size: 24px; margin: 0 0 15px; text-align: center; }
	.campaign .ttl h3 .shoulder { font-size: 14px; text-align: left; padding: 10px 0 20px 65px; }
	.campaign .ttl .term { font-size: 15px; margin: 0 0 8px; padding: 3px 0 0 0; text-align: center; }
	.campaign .ttl .term span { font-size: 12px;  width: 140px; position: static; padding: 5px 0; margin: 0 auto 8px; }
	.campaign .pic .mrk { position: absolute; bottom: -30px; left: 10px; width: 56px; }
	#campaign01 .campaign_A { padding: 30px 0 0; }
	#campaign01 .campaign_A h4 { font-size: 18px; margin: 10px 0 0; }
	#campaign01 .campaign_A h4 span { font-size: 15px; }
	#campaign01 .campaign_A .winners { font-size: 14px; padding: 5px 0 0 80px; }
	#campaign01 .campaign_A .box { padding: 10px 0 0; margin: 20px 0 0; }
	#campaign01 .campaign_A .box p {  font-size: 12px; padding: 15px 0 0; }
	#campaign01 .campaign_A .box img { width: 176px; }
	#campaign01 .campaign_A .pic .mrk { width: 64px; }
	#campaign02 .campaign_A { padding: 30px 0 0; }
	#campaign02 .campaign_A h4 { font-size: 18px; margin: 10px 0 0; }
	#campaign02 .campaign_A .winners { font-size: 14px; padding: 5px 0 0 80px; }
	#campaign02 .campaign_A .pic { width: 100%; }
    #campaign02 .campaign_A .pic span { position: absolute; left: 15px; top: 15px; font-size: 18px }
	#campaign02 .campaign_A .txt { position: static; }
	#campaign02 .campaign_A .txt .mrk { display: none; }
	#campaign02 .campaign_A .pic .mrk { width: 64px; }
	.campaign .detail ul { margin: 0; }
	.campaign .detail ul li { width: 100%; margin: 35px 0 0 0; }
	.campaign .detail ul li h4 { font-size: 16px; padding: 10px 0 0; }
	.campaign .detail ul li h4 span { font-size: 15px; }
	.campaign .detail ul li .winners { font-size: 14px; padding: 5px 0 0 80px; }
	.campaign .detail ul li  .notes { font-size: 12px; margin: 5px 0 10px; }
	.campaign .btn a { font-size: 12px; }
	.campaign .btn a:hover { transform: scale(1.0); }
	.campaign .remarks { margin: 10px 0 0 16px !important; }
	.campaign .remarks li { width: 100%!important; margin: 0 !important; text-indent: -16px; font-size: 12px; }	
	
	
	/* howto */
	.howto { position: relative; margin: 100px 0 0; }
	.howto h5 { font-size: 18px; }
	.howto h5 span { font-size: 12px; }
	.howto h5 .ill { position: absolute; top: -10px; left: -40px; width: 30px; }
	.howto .frame { padding: 90px 0 60px; }
	.howto ul { margin: 0; padding: 4.4vw; }
	.howto ul li { width: 100%; padding: 30px 0; margin: 0 0 20px; }
	.howto ul li:last-child { margin: 0 !important; }
	.howto ul li .step { position: absolute; top: -10px; left: calc(50% - 50px); width: 100px; }
	.howto ul li p { font-size: 17px; }
	.howto .btn-form { margin: 40px 0 0; }
	.howto .btn-form a { font-size: 18px; padding: 25px 0 25px 20px; width: calc(100% - 20px); }
	.howto .btn-form a:hover { transform: scale(1.0); }
	.howto .btn-form .arw { position: absolute; top: calc(50% - 10px); left: 50px; width: 18px; }
	#campaign01 .howto h5 { position: absolute; top: -80px; right: 8.8vw; }
	#campaign02 .howto h5 { position: absolute; top: -80px; left: calc(60px + 4.4vw); }
	#campaign01 .howto ul li:nth-child(1) p { margin: 0 0 20px; }
	#campaign01 .howto ul li:nth-child(2) p { margin: 0 0 10px; }
	#campaign01 .howto ul li:nth-child(3) p { margin: 0; }
	#campaign02 .howto ul li:nth-child(2) p { margin: 0 0 10px; }
	#campaign02 .howto ul li:nth-child(3) p { margin: 0; }
	#campaign02 .howto { margin: 90px 0 0; }
    
	
	.kazari01 { position: absolute; top: -135px; right: -20px; z-index: 1; width: 190px; }
	.kazari02 { position: absolute; top: inherit; bottom: -155px; right: 0; z-index: 1; width: 114px; }
    
    .stores { }
    .stores .stores-inner { max-width: inherit; margin: 0 auto; padding: 40px 4.4vw; }
    .stores .prefecture h3 { font-size: 16px; }
    .stores .prefecture .city { margin-top: 20px }
    .stores .prefecture .city h3 { font-size: 16px; }
    .stores .prefecture .city ul li.hd span { padding: 3px 0; font-size: 12px } 
    .stores .prefecture .city ul li .store-wrapper { padding: 20px 0; }
    .stores .prefecture .city ul li .store-wrapper .store h4 { font-size: 16px; }
    .stores .prefecture .city ul li .store-wrapper .period p { font-size: 15px }
    .stores .area { margin: 0 0 20px; padding: 20px 10px 20px 0; }
    .stores .area ul { margin: 0 }
    .stores .area ul li.l { float: none; width: 100%; margin-bottom: 10px }
    .stores .area ul li.l .inner { padding: 0; }
    .stores .area select { width: 100% !important }
    .stores .area select li { width: 100% !important }
    .btn_search { font-size: 15px }
    .btn_search a { padding: 10px 0; }


	/* footer  */
	#footer { text-align: center; padding: 60px 0 0; background: url("../img/bg_sp.jpg") repeat; background-size: contain; }
	#footer .inquiry { padding: 0 0 40px; }
	#footer .inquiry .box  p { font-size: 14px; padding: 10px 0 0 0; }
	#footer .inquiry .box .logo { position: static; margin: 10px 0 0; }
	#footer .support ul { padding: 20px 0 0;}
	#footer .support ul li { border-left: none; display: block; }
	#footer .support ul li:nth-child(1) a { padding: 0 0 20px; display: block; }
	#footer .support ul li:nth-child(2) a { margin: -20px 0 0; display: block; }	
	#footer .copy { padding: 20px 4.4vw; margin: 80px 0 0; }
	#footer .copy .copyright { position: static; text-align: center; margin: 10px 0 0; }
	#footer .u-line { width: 150px; height: 1px; background: #707070; margin: 0 auto; }
	#footer .support ul li a img { width: 200px; }
    #backto { position: fixed; right: 5px; bottom: 10px; }
    #backto a img { width: 40px }
}



@media screen and (max-width: 380px) {
	/* intro */
	.intro .inner { padding: 35px 2.2vw 40px; }
	.intro p { font-size: 14px; }
}