@charset "UTF-8";
@import url(normalize.css);
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
common 2023.06
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*--------------------------------------------------------------
|
| reset css
|
--------------------------------------------------------------*/

h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:bold;margin:0;padding:0;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;}
	
a {text-decoration:none;}
img {border:none;
 -webkit-backface-visibility: hidden;}
hr {display:none;clear:both;}
ul {margin:0;padding:0;}
li {margin:0;padding:0;list-style:none;}
dl {margin:0;padding:0;}
dt {margin:0;padding:0;}
dd {margin:0;padding:0;}

p {margin:0;padding:0; }

* {-webkit-appearance:none;}

* {-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;}
 
body{margin: 0;}

#winesoda_top {height: 0;font-size: 0;}


/*--------------------------------------------------------------
|
| main
|
--------------------------------------------------------------*/



.preload{
width: 0px;	
height: 0px;
background-image:url("../images/bg_01.png") ,url("../images/lineup.png") , url("../images/kodawari.png") , url("../images/tanoshimi.png") ,url("../images/lineup-hover.png") , url("../images/kodawari-hover.png") , url("../images/tanoshimi-hover.png") ,url("../images/bg_02.png"),url("../images/bg_10-2.png"),url("../images/bg_03.png"),url("../images/bg_04.png"),url("../images/bg_05.png"),url("../images/bg_06.png"),url("../images/bg_07.png"),url("../images/bg_08.png"),url("../images/bg_09.png"),url("../images/bg_sp.png");}


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


.topmv_slider-container{
position: relative;
width: 100%;
margin-bottom: -40px;    
}

.swiper-slide img{
width: 100%;
height: auto;    
object-fit: contain;}

.swiper-button-prev, .swiper-button-next {
  width: 35px;
  margin-top: -32px; }

  .swiper-button-prev:after, .swiper-button-next:after {
    position: absolute;
    display: block;
    content: "";
    width: 8px !important;
    height: 8px !important;
    border-top: 2px solid black;
    border-right: 2px solid black;
    opacity: .6;
    transform: rotate(45deg);
    margin-left: -3px; }
  .swiper-button-prev:before, .swiper-button-next:before {
    content: "";
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5); }

.swiper-button-prev, .swiper-button-next {
  width: 35px;
  margin-top: -32px; }

  .swiper-button-prev:after, .swiper-button-next:after {
    position: absolute;
    display: block;
    content: "";
    width: 8px !important;
    height: 8px !important;
    border-top: 2px solid black;
    border-right: 2px solid black;
    opacity: .6;
    transform: rotate(45deg);
    margin-left: -3px; }
  .swiper-button-prev:before, .swiper-button-next:before {
    content: "";
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5); }

.swiper-button-prev:after {
  margin-left: 3px;
  transform: rotate(-135deg); }

.swiper-pagination {
  position: relative;
  width: 100%;
  height: 40px;
  bottom: 40px !important;
  padding: 12px 0;
  background-size: cover;
  background-repeat: no-repeat; }
  @media screen and (max-width: 767px) {
    .swiper-pagination {
      height: 20px;
      bottom: 20px !important;
      padding: 0; } }



.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: rgba(255,255,255,0.7);
  opacity: 1;
  margin: 0 10px !important; }
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: white; }
  @media screen and (max-width: 767px) {
    .swiper-pagination-bullet {
      width: 8px;
      height: 8px;
      margin: 0 6px !important; } }

#pcheader{
position: sticky;
top:-1px;
z-index: 18;
}



.header-container{
background-image:url("../images/bg_01.png");
	background-position: top right;
	background-size:cover;
	background-repeat: no-repeat; 
    padding: 10px 0;
	background-color: rgba(255,255,255,0);
}


.headerlistspWrap .column_a {
display: none;
}    


/*------anime------*/

.fade-in {
  opacity: 0;
  transition-duration: 1s;
 transition-delay: 0.3s;
  transition-property: opacity, transform;
}

.fade-in_b {
  opacity: 0;
  transition-duration: 3s;
 transition-delay: 0.5s;
transition-property: opacity, transform;
}

.fade-in_c {
  opacity: 0;
  transition-duration: 1s;
 transition-delay: 0.5s;
transition-property: opacity, transform;
}

.item_a {
  opacity: 0;
  transition-duration: 1s;
  transition-delay:0.7s;
  transition-property: opacity, transform;
}

.item_b {
  opacity: 0;
  transition-duration: 1s;
 transition-delay:0.9s;
  transition-property: opacity, transform;
}

.item_c {
  opacity: 0;
  transition-duration: 1s;
 transition-delay:1.1s;
  transition-property: opacity, transform;
}

.item_d {
  opacity: 0;
  transition-duration: 1s;
 transition-delay:1.3s;
  transition-property: opacity, transform;
}

.fade-in-up {  
  transform: translate(0, 30px);
}

.fade-in-down { 
  transform: translate(0, -50px);
}

.fade-in-left {  
  transform: translate(-50px, 0);
}

.fade-in-right { 
  transform: translate(50px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

.item-new:before {
    content: "";
    display: inline-block;
    background: url("../images/new.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 20px;
    top: 30px;
}



/*------content-------*/

.content-wrap_a{
width: 100%;
max-width: 1080px;
margin: 0 auto;    
}

#header .content-wrap_a{
padding:10px 0px; 
    
}

.column_a{   
width: 100%;     
 display: flex;   
justify-content: space-between;
align-items: stretch;       
}

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

.lineup{   
width:auto;  
cursor: pointer;
height:31%;
background-image:url("../images/lineup.png");
background-size:contain;
background-repeat: no-repeat;  
background-position:center center;  
}


.lineup:hover{    
transition: 0.1s ease;
background-image:url("../images/lineup-hover.png");  
}

.kdwr{width:auto;  
height:31%;
cursor: pointer;    
background-image:url("../images/kodawari.png");
background-size:contain;
background-repeat: no-repeat;  
background-position:center center;  }


.kdwr:hover{
cursor: pointer;   
transition: 0.1s ease;    
background-image:url("../images/kodawari-hover.png");}

.tnsmkt{
width:auto;  
cursor: pointer;    
height:31%;
background-image:url("../images/tanoshimi.png");
background-size:contain;
background-repeat: no-repeat;  
background-position:center center;     
}

.tnsmkt:hover{
cursor: pointer;   
transition: 0.1s ease;    
background-image:url("../images/tanoshimi-hover.png");    
}

.winesoda_a{
width: 35%; 
align-items: stretch;      
display: flex;  
border-right: 1px solid #231815;    
padding-right:20px;}

.winesoda_b{
width: 65%;  
padding: 0 18px;    
display: flex;  
justify-content: space-between;
align-items: center;    
height:100%;    
border-right: 1px solid #231815;    
padding-right: 20px;        }

.winesoda_b-img{
width: 55%;
display: flex;      
}
.winesoda_b_pcimg {
    padding-top: 7px;
}

.winesoda_b ul{
width: 43%;
height: 100%;
display: flex;
justify-content:flex-end;    
flex-direction:column;
}

.bodernone{
padding-left: 20px;
padding-right: 0px;      
border: none;    
}



.ws_item_a{
width: 50%;   
     
justify-content: space-between;    
display: flex;  
   
}


.ws_item_a img{
width: 100%;   
object-fit: contain;
}


.bg_a{
	background-color: #68060A;
	background-image: url("../images/bg_02.png");
	height:900px;
position: relative;
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
}



#winesoda_a img{   
object-fit: contain;   }

#winesoda_a h2{
width: 90%;
display: flex;
flex-direction: column;    
justify-content: center;    
align-items: center;    
margin: 100px auto;    
position: relative;
}

#winesoda_a .content-wrap_a{
padding: 40px 50px 50px;    
width: 100%;
height: 100%;
 background-image:url("../images/backbord.png");
background-size:contain;
background-repeat: no-repeat;  
background-position:center center;      
}

img.wa_a{
width: 90%;  
margin-bottom: 0px;}

img.wa_b{
width: 95%;    }

img.wa_c{
position: absolute;
bottom: -10%;
width: 70%;    }

img.wa_d{
margin: 20px 0;
width: 100%;    }


img.wa_e{
width: 55%;    }



.bg_b{
	background-color: #68060A;
	background-image: url("../images/bg_03.png");
	height:710px;
position: relative;
	background-attachment: fixed;
	background-size: cover;
    background-position: center center;
	background-repeat: no-repeat;
}

.anchor{ 
padding-top: 120px;
margin-top:-120px;}

.anchor-b{
  padding-top:50px;
  margin-top:-50px;    
}

img.wb_a{
position: absolute;
bottom: 0; 
height: 200px;    
object-fit: cover;    
width: 100%;
}

#winesoda_lineup{
 padding-top: 120px;   
position: relative;
}

#winesoda_lineup h2{
width: 65%;    
text-align:   center;
margin: 0px auto 0;   
padding-top: 0px;
}

#winesoda_lineup h2 img {
    width: 100%;
    padding-top: 40px;
    margin-bottom: -60px;
    object-fit: contain;
}

.wb_column{
position: relative;      
width: 60%; 
margin: 0 auto;
margin-top: 50px;
display: flex;
align-items: flex-end;    
justify-content: space-between;    
}

.wb_column_item {
    width: 40%;
}
.wb_column_item_img{
    width: 100%; 
    object-fit: contain;    
    }
@media screen and (max-width: 780px) {
    .wb_column_item_img {
        width:45%;
        object-fit: contain;
    }    
}

.wb_column_item_new {
    width: 60%;
    position: absolute;
    top: -60px;
    left: -30px;
}
@media screen and (max-width: 1080px) {
    .wb_column_item_new {
        width: 60%;
        position: absolute;
        top: -15%;
        left: -30px;
    }
}
@media screen and (max-width: 780px) {
    .wb_column_item {
        width: 100%;
    }
    .wb_column_item_new {
        width: 20%;
        position: absolute;
        top: 10px;
        left: 120px;
    }
}
@media screen and (max-width: 500px) {
    .wb_column_item_new {
        width: 20%;
        position: absolute;
        top: 30px;
        left: 80px;
    }
}


.wb_column_shop{
display: flex;
width: 60%;
height: 286px;
justify-content: space-between;
align-items: center;    
margin: 0 auto;    
bottom: 80px;
position: relative; }

.wcs_a{
position: relative;
width:40%; 
display: flex;
align-items: center;
flex-direction: column; 
padding: 13px 10px 8px; 
border-radius: 10px;
background-color: rgba(255,255,255,0.9)
}

.wcs_a img{
height: 45px;
margin-bottom: 5px;    
object-fit:contain; 
}

.wcs_a img.wca_img_b{
height: 50px;    
}

img.gentei{
position: absolute;
width:80px!important; 
height: auto!important;    
object-fit: contain;    
right:-16%;
top:-52%;
}

img.gentei-b{
    position: absolute;
    width: 62px!important;
    height: auto!important;
    object-fit: contain;
    right: -5%;
    top: -58%;
}

img.wca_img{
width: 100%; 
}

.product_date {
    width: 80%;
}



.onlinebutton {
width: 100%; 
height: 45px;
}

.onlinebutton img{
object-fit: contain;
width: 100%;     
}




.bg_c{
	background-color: #0A201D;
	background-image: url("../images/bg_05.png");
	height:920px;
position: relative;
	background-attachment: fixed;
	background-size: cover;
    background-position: center center;
	background-repeat: no-repeat;
    z-index: -2;
}


#winesoda_obsession .content-wrap_a h2{
display: flex;
align-items: center;    
/* padding: 120px 0 100px;     */
padding: 160px 0 100px;    
flex-direction: column;
justify-content: center;    
}



#winesoda_obsession .content-wrap_a h2 img{
object-fit: contain;    
}

img.wc_a{
width: 80%;
margin-bottom: 40px;    
}

img.wc_b{
width: 80%;
}

img.wc_c{
width: 40%;
margin-bottom: 30px;
}

img.wc_d{
width: 44%;
}



.bg_d{
	background-color: #68060A;
	background-image: url("../images/bg_06.png");
	height:710px;
position: relative;
	background-attachment: fixed;
	background-size: cover;
    background-position: bottom center;
	background-repeat: no-repeat;
}

.wb_flex{
position: relative;
display: flex; 
padding-top: 50px;    
}

.wb_flex h2 img{
width: 100%;    
object-fit: contain;   
}


.wb_flex h2{
width: 30%;
margin-right: 20px;

}

.wb_flex .wb_column_b{
width: 68%;
display: flex;
justify-content: space-between;
margin-top: 65px;    
}
@media screen and (max-width: 780px) {
    .wb_flex .wb_column_b{
        margin-top: 0;    
        }
}



.wb_flex .wb_column_b img{
width:48%;
}

#winesodabase_lineup .wb_column_shop {
    display: flex;
    width: 1050px;
    height: 286px;
    justify-content:flex-end;
    align-items: center;
    margin: 0 auto;
    bottom: 85px;
    position:relative;
}

#winesodabase_lineup img.wb_a {
    position: absolute;
    bottom: 0;
    height: 180px;
    object-fit: cover;
    width: 100%;
}

#winesodabase_lineup .wcs_a {
    position: relative;
    width: 35%;
    display: flex;
margin-left: 30px;
    align-items: center;
    flex-direction: column;
    padding: 13px 10px 8px;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.9);
}


.bg_e{
	background-color: #0A201D;
	background-image: url("../images/bg_05.png");
	height:1300px;
position: relative;
	background-attachment: fixed;
	background-size: cover;
    background-position: center center;
	background-repeat: no-repeat;
    z-index: -1;
}


#winesodabase_obsession{
position: relative;
      z-index: -1;
}

#winesodabase_obsession .content-wrap_a{
padding:120px 0;   
}

#winesodabase_obsession img{
object-fit: contain;    
}

.wb_b{
display: flex;
justify-content: space-between;}

img.wb_img-a{
width: 30%;    }

img.wb_img-b{
width: 70%;    }

img.wb_img-c{
width: 46%;    }

img.wb_img-d{
width: 53%;    }

img.wb_img-e{
width: 78%;    }

img.wb_img-f{
width: 22%;    }

img.wb_img-g{
width: 78%;    }

img.wb_img-h{
width: 19%;    }

span.wb_line-a{
width: 85%; 
margin: 20px 0;    
display: block;}

span.wb_line-b{
width: 90%; 
padding-right: 20px;    
margin: 20px 0 20px auto;    
display: block;}

span.wb_line-c{
width: 84%;    
margin: 20px 0 30px auto;    
display: block;}

span.wb_line-d{
width: 90%;   
margin: 30px 0;      
display: block;}

span.wb_line-a img{
width:100%; }

span.wb_line-b img{
width:100%; }

span.wb_line-c img{
width:100%; }

span.wb_line-d img{
width:100%; }

.wb_c{
display: flex;
justify-content: space-between;}

.wb_d{
width: 83%;
margin: 0 0 0 auto;  
display: flex;
justify-content: space-between;}

.wb_e{
width: 90%;
display: flex;
align-items:flex-end;     
justify-content: space-between;}

.wb_bottom{
width: 100%;
top:-7px;
position: relative;
z-index: 5;
font-size: 0px;
}

.wb_bottom img{
width: 100%;  
object-fit: contain;    
}

.wb_bottom_b{
width: 100%;
top:-7px;
position: relative;
z-index: 5;
font-size: 0px;
}

.wb_bottom_b img{
width: 100%;  
object-fit: contain;    
}


.bg_f{
	background-color: #0A201D;
	background-image: url("../images/bg_08.png");
	height:1280px;
position: relative;
	background-attachment: fixed;
	background-size: cover;
    background-position: center center;
	background-repeat: no-repeat;
}

#winesodabase_enjoy{
margin-top: -130px;    
}

#winesodabase_enjoy .content-wrap_a{
padding: 100px 0;    
}

#winesodabase_enjoy .content-wrap_a img{
object-fit: contain;  }

img.wb_c_img-a{
width: 100%;   }

.stepcolumn{
margin-top: 50px;  
margin-bottom: 50px;
display: flex;
justify-content: space-between;    
}


img.wb_c_img-b{
width: 25%;   }

.stepcolumn ul{
width: 70%; 
justify-content: space-between;    
display:flex;
}

.stepcolumn ul li{
width: 23%;    
}

.stepcolumn ul li img{
width: auto;
height:350px;   
}

img.wb_c_img-c{
width: 48%;    
}

.arrange ul{
margin-top: 20px;
display: flex;
justify-content: space-between;    
}

.arrange ul li{
width: 32%;   
}

.arrange ul li:hover{
transition: 0.3s ease;
opacity: 0.8; 
}

.arrange ul li img{
object-fit: contain;
width: 100%;    
}

.arrange_modal img{
width: 50%;
object-fit: contain;    
}

.arrange_modal{
display: flex;    
}

.hide-area{
  display: none;}

#winesoda_enjoymenu{
margin-top: -60px;    
}


.bg_g{
	background-color: #0A201D;
	background-image: url("../images/bg_09.png");
	height:1550px;    
position: relative;
	background-attachment: fixed;
	background-size: contain;
 background-size: 100%;
	background-repeat: repeat;
}

#winesoda_enjoymenu .content-wrap_a{
padding: 150px 80px;    
width: 100%;
height: 100%;
 background-image:url("../images/bg_10-2.png");
background-size:contain;
background-repeat: no-repeat;  
background-position:center center;      
}

#winesoda_enjoymenu .content-wrap_a img{
object-fit: contain;
}

img.wbd_img-a{
width: 100%; }

.wbd_menu{
margin-top: 10px;
display: flex;
align-items: flex-end;
justify-content: space-between;  }


img.wbd_img-b{
padding-top: 50px;
width: 20%; }

img.wbd_img-c{
padding-bottom: 30px;
width: 52%; }

img.wbd_img-d{
padding-top: 50px;    
width: 20%; }

.recipe ul{
display: flex;
margin-top: 25px;
margin-bottom: 25px;
justify-content: space-between;    
}

.recipe ul li{
width: 31%; 
}

.recipe ul li img{
width:100%; 
}

img.wbd_img-e{
width: 100%;}

.wbd_menu-b{
margin-top: 10px;
display: flex;
align-items:center;
justify-content: space-between;  }

.wbd_menu-b img{
padding: 0;
 }

.ex{
margin-top: 5px;    
text-align: right;
}

.ex img{
width: 15%;
}





/*--------------------------------------------------------------
|
| 1600PX 以上
|
--------------------------------------------------------------*/

@media (min-width: 1600px) {
 
    
    
    
}


/*--------------------------------------------------------------
|
| 1080PX
|
--------------------------------------------------------------*/

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

.content-wrap_a{
width: 85%;
max-width:100%;
margin: 0 auto;    
}    
    
.bg_a{
	background-color: #68060A;
	background-image: url("../images/bg_02.png");
	height:auto;
position: relative;
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
    padding: 30px 0;
}
    
#winesoda_a .content-wrap_a {
    padding: 40px 50px 50px;
    width: 100%;
    height: 100%;
    background-image: url(../images/backbord.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}    
    
  #winesoda_a h2{
width: 90%;
display: flex;
flex-direction: column;    
justify-content: center;    
align-items: center;    
margin: 60px auto;   
}

img.wa_a{
    width: 80%;    
}

img.wa_b{
    width: 80%;
}
  
img.wa_c{
    width: 65%;
    bottom: -8%;
}
 
.bg_b{
	background-color: #68060A;
	background-image: url("../images/bg_03.png");
	height:590px;
position: relative;
	background-attachment: fixed;
	background-size: cover;
    background-position: center center;
	background-repeat: no-repeat;
}
   
  .wb_column_shop{
display: flex;
width: 65%;
height: 286px;
justify-content: space-between;
align-items: center;    
margin: 0 auto;   
bottom: 100px;

position: relative; }
  
 
#winesoda_lineup h2{
width: 450px;    
text-align:   center;
margin: 0px auto 0;   
padding-top: 30px;
}
 
.wb_column{
position: relative;      
width: 65%;
padding: 10px 10px 20px;
margin: 0 auto;
display: flex;
align-items: flex-end;    
justify-content: space-between;    
}   
    
img.wb_a{
position: absolute;
bottom: 0; 
height: 180px;    
object-fit: cover;    
width: 100%;
}   
.product_date {
    width: 80%;
}
    
.bg_c{
	background-color: #0A201D;
	background-image: url("../images/bg_05.png");
	height:850px;
position: relative;
	background-attachment: fixed;
	background-size: cover;
    background-position: center center;
	background-repeat: no-repeat;
}    
    
#winesoda_obsession .content-wrap_a h2{
display: flex;
align-items: center;    
padding: 120px 0 100px;    
flex-direction: column;
justify-content: center;    
}

#winesoda_obsession .content-wrap_a h2 img{
object-fit: contain;    
}

img.wc_a{
width: 100%;
margin-bottom: 40px;    
}

img.wc_b{
width: 100%;
}

img.wc_c{
width: 60%;
margin-bottom: 30px;
}


img.wc_d{
width: 60%;
}
    

#winesoda_obsession .content-wrap_a h2{
display: flex;
align-items: center;    
padding: 120px 0 100px;    
flex-direction: column;
justify-content: center;    
}



#winesoda_obsession .content-wrap_a h2 img{
object-fit: contain;    
}

img.wc_a{
width: 80%;
margin-bottom: 40px;    
}

img.wc_b{
width: 80%;
}

img.wc_c{
width: 40%;
margin-bottom: 30px;
}

img.wc_d{
width: 40%;
}
    
    

.bg_c{
	background-color: #0A201D;
	background-image: url("../images/bg_05.png");
	height:auto;
position: relative;
	background-attachment: initial;
	background-size: cover;
    background-position: center center;
	background-repeat: no-repeat;
}


#winesoda_obsession .content-wrap_a h2{
display: flex;
align-items: center;    
padding: 115px 0 95px;     
flex-direction: column;
justify-content: center;    
}



#winesoda_obsession .content-wrap_a h2 img{
object-fit: contain;    
}

img.wc_a{
width: 100%;
margin-bottom: 40px;    
}

img.wc_b{
width: 90%;
}

img.wc_c{
width: 50%;
margin-bottom: 30px;
}

img.wc_d{
width: 56%;
}

 #winesoda_lineup h2 img {
    width: 100%;
    padding-top: 15px;
     margin-bottom: -7px;
    object-fit: contain;
}   


.bg_d{
	background-color: #68060A;
	background-image: url("../images/bg_06.png");
	height:560px;
position: relative;
	background-attachment: fixed;
	background-size: cover;
    background-position: bottom center;
	background-repeat: no-repeat;
}

.wb_flex{
position: relative;
display: flex; 
height: 560px;
padding-bottom: 70px;    
padding-top: 50px; 
margin-right: 20px;
}

.wb_flex h2 img{
width: auto; 
height: 100%;
object-fit: contain;   
}
    
    .wcs_a img{
       height: 45px;   
    }
    
    .wcs_a img.wca_img_a {
  width: 80%;
    object-fit: contain;
}
    



.wcs_a img.wca_img_b {
    height: 42.5px;
    width: 100%;
}    
    
img.gentei {
    position: absolute;
    width: 60px!important;
    height: auto!important;
    object-fit: contain;
    right: -14%;
    top: -40%;
}    
    
img.gentei-b {
    position: absolute;
    width: 50px!important;
    height: auto!important;
    object-fit: contain;
    right: -14%;
    top: -48%;
}    
    

.wb_flex h2{
height: 270px;
margin-right: 0px;

}

.wb_flex .wb_column_b{
width: 50%;
display: flex;
justify-content: space-between;    
}


.wb_flex .wb_column_b img{
width:auto;
height: 100%;
padding-right: 10px;    
}
.wb_flex .wb_column_b img:last-child {
    margin-left: 30px;
}
    
#winesodabase_lineup .wb_column_shop {
    display: flex;
    width: 100%;
    justify-content:flex-end;
    align-items: center;
    margin: 0 auto;
  
    bottom: 150px;
    position: relative;
}

#winesodabase_lineup img.wb_a {
    position: absolute;
    bottom: 0;
    height: 180px;
    object-fit: cover;
    width: 100%;
}

#winesodabase_lineup .wcs_a {
    position: relative;
    width: 37%;
    display: flex;
margin-left: 20px;
    align-items: center;
    flex-direction: column;
    padding: 13px 10px 8px;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.9);
}
    
.bg_e{
	background-color: #0A201D;
	background-image: url("../images/bg_05.png");
	height:auto;
position: relative;
	background-attachment: fixed;
	background-size: cover;
    background-position: center center;
	background-repeat: no-repeat;
}
    
    
#winesodabase_obsession .content-wrap_a{
padding:120px 0 70px;   
}

.wb_bottom {
    width: 100%;
    position: relative;
    z-index: 5;
    top: -15px;
}   
    
.wb_bottom_b{
width: 100%;
  top: -43px;
position: relative;
z-index: 5;    
}

.wb_bottom_b img{
width: 100%;
object-fit: contain;    
}
    
    
    
.bg_f {
    background-color: #0A201D;
    background-image: url(../images/bg_08.png);
    height:auto;
    position: relative;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}  
    
    
#winesodabase_enjoy .content-wrap_a {
    padding: 80px 0 100px;
} 
    
.stepcolumn ul li img {
    width: 100%;
    height: auto;
}   
    
.stepcolumn ul li:nth-child(1){
width: 22.6%;    
}  
    
    .stepcolumn ul li:nth-child(2){
width: 22.5%;    
}    
    
.stepcolumn ul li:nth-child(3){
width: 22.5%;    
} 
    
.stepcolumn ul li:nth-child(4){
width: 24.2%;    
}        
    
    
.bg_g {
    background-color: #0A201D;
    background-image: url(../images/bg_09.png);
    height:auto;
    position: relative;
    background-attachment: fixed;
    background-size: contain;
    background-size: 100%;
    background-repeat: repeat;
}    

    
#winesoda_enjoymenu .content-wrap_a {
    padding: 110px 80px;
    width: 100%;
    height: 100%;
    background-image: url(../images/bg_10-2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}  
    
.anchor {
    padding-top: 80px;
    margin-top: -80px;
}    
    
#winesoda_lineup {
    padding-top: 80px;
    position: relative;
}    
    
.anchor-b {
    padding-top: 40px;
    margin-top: -40px;
}    

  
    
}


/*--------------------------------------------------------------
|
| 900PX
|
--------------------------------------------------------------*/

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

  .wb_flex{
position: relative;
display: flex; 
width: 100%;    
height:auto;
justify-content: space-between;
padding-bottom: 70px; 
    margin-right: 0px;
      padding-top: 30px;
}


.wb_flex h2 img{
width:100%;
height: auto;
object-fit: contain;   
}


.wb_flex h2{
width: 30%;
height:auto;
margin-right: 0px;

}
    
#winesodabase_lineup .wb_column_shop {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    margin: 0 auto;
    height: 0px;
    bottom: 0px;
    position: relative;
}    
    

.wb_flex .wb_column_b{
width: 70%;
display: flex;
justify-content: space-between;    
}


.wb_flex .wb_column_b img{
width:50%;
height: auto;}

.wb_flex .wb_column_b img:last-child {
    margin-left: 0;
}
      
    

.bg_d{
	background-color: #68060A;
	background-image: url("../images/bg_06.png");
	height:auto;
position: relative;
	background-attachment: fixed;
	background-size: cover;
    background-position: bottom center;
	background-repeat: no-repeat;
}    

 .bg_b {
    background-color: #68060A;
    background-image: url(../images/bg_03.png);
    height: 560px;
    position: relative;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}   
    
    

}

/*--------------------------------------------------------------
|
| 780PX
|
--------------------------------------------------------------*/

@media screen and (max-width: 780px) {
    
 .sp{display:block!important;}
.pc{display:none!important;}   
    
   
 /*------　header　------*/
    
.hamburger{
  display : block;
  position: absolute;
  z-index : 50;
  right : 13px;
  top   : 12px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;}
    
  .hamburger.active{

  position: fixed;
  }  
    
   .header.active img.h_sp-logo {

    position: fixed;
  
} 

    
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #231815;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;}
    
.hamburger span:nth-child(1) {
  top: 10px;}
    
.hamburger span:nth-child(2) {
  top: 20px;}
    
.hamburger span:nth-child(3) {
  top: 30px;}
    

.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#231815;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  background :#231815;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);}

 
ul.headerlist {
display: none;}


ul.headerlist li {
   display: none; }
    


.headerlistsp.active{
display: flex;
text-align: left;    
  opacity: 100;
        position:fixed;
    z-index: 49;
 top: 0;
    left: 0;
    color: #000000;
    background: rgba(255,255,255,1);
margin: 0;
    width: 100%!important;
    transition: opacity .6s ease, visibility .6s ease;
    font-size: 1rem;
    flex-direction: column;  
}  
    
 
.headerlistsp.active{
    width: 100%;}       
    
.child_menu{
    display: none;    
    }    
    

.header  {
height: 70px;
top:0;
display: flex;
align-items: center;        
    width: 100%;    
z-index:1000;        
padding-left: 2%;           
    position:sticky;  
background-image:url("../images/bg_01.png");
	background-position: top right;
	background-size:cover;
	background-repeat: no-repeat;     
    } 
    
.header.active {
      height:auto;    
    width: 100%;    
z-index:1000;  
display: block;
    }  
    
    .header-container{
    display: none;    
    }    
    
    img.h_sp-logo{
    object-fit: contain;
height:60px;
position: absolute;
    z-index: 100; 
    top:5px;
        left: 20px;    
    }    
    
.headerlistspWrap .lineup {
width: 100%;
    cursor: pointer;
    height: 50px;
    background-image: url(../images/lineup.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}    
    
.headerlistspWrap .kdwr {
width: 100%;
    height:50px;
    cursor: pointer;
    background-image: url(../images/kodawari.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}     
    
.headerlistspWrap .tnsmkt {
width: 100%;
    cursor: pointer;
    height:50px;
    background-image: url(../images/tanoshimi.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}   
    

.headerlistspWrap .lineup:hover{   
transition: 0.1s ease;   
background-image:url("../images/lineup-hover.png");  
}
    
    .headerlistspWrap .winesoda_b-img {
    width: 51%;
    display: flex;
}



.headerlistspWrap .kdwr:hover{ 
cursor: pointer;     
transition: 0.1s ease;    
background-image:url("../images/kodawari-hover.png");}


.headerlistspWrap .tnsmkt:hover{ 
cursor: pointer;    
transition: 0.1s ease;    
background-image:url("../images/tanoshimi-hover.png");    
}
    
    

.headerlistspWrap.active{
  margin: 0px auto 0;
display: block;
  width: 100%;
padding: 60px 0;
        height:100%; 
background-image:url("../images/bg_sp.png");
	background-position: top right;
	background-size:cover;
	background-repeat: no-repeat;       

}    
    
.headerlistspWrap.active .column_a {
    width: 90%;
      overflow:auto; 
    margin: 0 auto;    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
}    
    
.headerlistspWrap .ws_item_a {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-direction: column;
}
    
.headerlistspWrap .winesoda_b {
    width: 100%;
    padding: 0 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    border-right: none;
      border-bottom: 2px solid #231815;
    padding-right: 0px;
padding-bottom: 35px;
padding-top: 35px;    
}   
    
.headerlistspWrap .winesoda_b ul {
    width: 43%;
    height: 100%;
    display: flex;
    justify-content:center;
    flex-direction: column;
}    
    
    
.headerlistspWrap .winesoda_b ul li{
margin-bottom: 15px;
}  
    
    .headerlistspWrap .winesoda_b ul li:last-child{
margin-bottom: 0px;
}       
    
.headerlistspWrap .winesoda_a {
    width: 50%;
        margin: 0 auto;
    padding-left: 0;
    align-items: center;
    justify-content: center;
    display: flex;
    text-align: center;
    border-right: none;
padding-top: 35px;
    padding-right: 0px;
}    
    


 /*-------content--------*/    
  
 .bg_a {
    background-color: #68060A;
    background-image: url(../images/bg_02.png);
    height:auto;
    position: relative;
    background-attachment: initial;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 60px 0;
}
    
    
.content-wrap_a{
width: 90%;
max-width:100%;
margin: 0 auto;    
}        
    
#winesoda_a .content-wrap_a {
    padding: 40px 40px 50px;
    width: 90%;
    height: auto;
    background-image: url("../images/backbord-sp.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;}    
       
    
    
 .topmv_slider-container {
    position: relative;
    width: 100%;
    margin-bottom: -20px;}   
    
#winesoda_a h2 {
    width: 93%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px auto 10px;
}    
    
img.wa_a {
    width: 90%;
    margin-top: 0;
    margin-bottom: 30px;
}  
    
#winesoda_lineup h2 {
    text-align: center;
    width: 90%;
    margin: 0px auto 0;
    padding-top: 0px;
    padding-bottom: 30px;
}    
    
.wb_column {
    position: relative;
    
    width: 100%;
    margin: 0 auto;
    display: flex;
    padding:40px 0 200px;
    align-items: center;
    justify-content: center;
}   
    
/* .wb_column img {
    width:45%;
    object-fit: contain;
}     */
    
img.wb_a {
    position: absolute;
    bottom: 0;
    height: 320px;
    object-fit: cover;
    width: 100%;
}    

    
  .wb_column_shop {
    display: flex;
    width: 65%;
    height: 0px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    bottom: 120px;

 
}
    
.wcs_a img {
    /* width: 95%; */
    height: auto;
    object-fit: contain;
}
.product_date {
    width: 70%;
    margin: 10px auto;
}

.onlinebutton {
width: 100%; 
height: 50px;
}
    
.onlinebutton img {
    margin-top: 10px;
    object-fit: contain;
    width: 100%!important;
}    
    
.wcs_a {
    position: relative;
    width: 80%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20px 10px 15px;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.9);
}   
    
.bg_b {
    background-color: #68060A;
    background-image: url(../images/bg_03.png);
    height: auto;
    position: relative;
    background-attachment: initial;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}   
    
img.gentei {
    position: absolute;
    width: 30%!important;
    height: auto!important;
    object-fit: contain;
    right: -10%;
    top: -60%;
}   

img.wa_b{
    width: 100%;
}
    
img.wc_a {
    width: 95%;
    margin-bottom: 40px;
}    
    
img.wc_b {
    width: 100%;
}    
    
img.wc_c {
    width: 70%;
    margin-bottom: 0px;
    margin-top: 50px;
}    
    
#winesoda_obsession .content-wrap_a h2 {
    display: flex;
    align-items: center;
    padding: 80px 0 95px;
    flex-direction: column;
    justify-content: center;
}    
    
img.spimgtop{
width: 85%;
margin: 0 auto;
padding: 20px 0;
object-fit: contain;    
    }  
    
.wb_flex .wb_column_b {
    width: 100%;
    display: flex;
    justify-content: center;
padding-bottom: 90px;    
}    
    
.wb_flex .wb_column_b img {
    width: 60%;
    height: auto;
object-fit: contain;
    padding-right: 0px;    
}    
  
#winesodabase_lineup .wb_column_shop {
    display: flex;
    width: 65%;
      height: 0px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    bottom: 100px;


}    
    
#winesodabase_lineup img.wb_a {
    position: absolute;
    bottom: 0;
    height: 260px;
    object-fit: cover;
    width: 100%;
}   
    
#winesodabase_lineup .wcs_a {
    position: relative;
    width: 80%;
    display: flex;
    margin-left: 0px;
    align-items: center;
    flex-direction: column;
    padding: 13px 10px 8px;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.9);
}    
    
.wb_b {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}    
    
img.wb_img-a {
    width: 90%;
}    
    
#winesodabase_obsession .content-wrap_a {
    padding: 70px 0 70px;
}  
    
    
 .wb_c {
    display: flex;
    flex-direction: column;
justify-content: center;
align-items: center; 
}  
    
span.wb_line-a {
    width: 100%;
    margin: 20px 0;
    display: block;
}   
    
img.wb_img-c {
    width: 88%;
margin-top: 15px;
}   
    
img.wb_img-d {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 30px
}    
    
span.wb_line-b {
    width: 100%;
    padding-right: 0px;
    margin: 0 auto;
    display: block;
}    
    
.wb_d {
    width: 100%;
   padding-top: 35px; 
padding-bottom: 25px;    
    margin: 0 auto;
    display: flex;
    flex-direction: column;
justify-content: center;
align-items: center; 
}    
    
img.wb_img-e {
    width: 95%;}    
    
 img.wb_img-f {
    width: 45%;
    margin-top: 25px;}   
    
span.wb_line-c {
    width: 100%;
    margin:0 auto;
    display: block;}  
    
    
 .wb_e {
    width: 100%;
   padding-top: 35px; 
    margin: 0 auto;
    display: flex;
    flex-direction: column;
justify-content: center;
align-items: center; } 
    
img.wb_img-g {
    width: 80%;}    
    
 img.wb_img-h {
    width: 100%;
    margin-top: 40px;
}   
 
span.wb_line-d {
    width: 100%;
    margin: 0px auto 20px;
    display: block;
}   
    
img.wb_c_img-a {
    width: 90%;
    margin: 0 auto;}   
    
.stepcolumn {
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;}    
    
.stepcolumn ul {
    width: 92%;
    justify-content: center;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;}    
    
.stepcolumn ul li {
    margin-bottom: 40px;
    width: 45%!important;}   
    
 .stepcolumn ul li:nth-child(1){
margin-right: 5%;}     
    
  .stepcolumn ul li:nth-child(3){
margin-right: 5%;}  
    
   .stepcolumn ul li:nth-child(4){
      width: 48.5%!important;     
margin-right: -5%;}   
    
 img.wb_c_img-b {
    width: 85%;
    margin-bottom: 35px;}   
    
 img.wb_c_img-c {
    width: 75%;
    margin: 0 auto;}   
    
.arrange ul {
    margin: 50px auto 0;
    display: flex;
    width: 90%;
    flex-direction: column;
    justify-content: center;
    align-items: center;}    
    
  .arrange ul li {
    width: 100%;
      margin-bottom: 50px;}  
    
    
#winesodabase_enjoy .content-wrap_a {
    padding: 80px 0 70px;}  
    
#winesoda_enjoymenu .content-wrap_a {
        padding: 50px 30px;
    width: 90%;
    height: auto;
    background-image: url(../images/bg_05.png);
    background-size: cover;
    background-repeat: no-repeat;
      background-attachment: initial;
    background-position: center center;}    
    
    
.bg_g {
    padding: 50px 0 60px;
    background-color: #0A201D;
    background-image: url(../images/bg_09.png);
    height: auto;
    position: relative;
    background-attachment: initial;
    background-size: contain;
    background-size: 100%;
    background-repeat: repeat;
}
    
.wb_bottom {
width: 100%;
  top: -10px;
position: relative;
z-index: 5;  }   
    
.wb_bottom img{
width: 100%;
height: 7px;
object-fit: cover;  }  
    
.wb_bottom_b{
width: 100%;
  top: -54px;
position: relative;
z-index: 5;    
}

.wb_bottom_b img{
width: 100%;
height: 7px;
object-fit: cover;    
}    
    
    
 #winesoda_enjoymenu {
    margin-top: -55px;}   
    
    .wd_bottom{
      width: 90%;
    margin: 0 auto -10px;    
    }  
    
    .wd_bottom img{
width: 100%;
height: 7px;
object-fit: cover;        
    }   
    
    .redwine{
   position: absolute;
    width: 24%;
    right: -7%;    
    }    
    
.wbd_menu {
    position: relative;
    margin-top: 35px;
    display: flex;
    align-items: center;
    justify-content:center;
}    
    
  img.wbd_img-c {
    padding-bottom: 0px;
    width: 73%;
} 
    
.recipe ul {
    display: flex;
width: 70%;
    flex-direction: column;
    margin: 25px auto 25px;
    align-items: center;
    justify-content: space-between;
}    
    
.recipe ul li {
    width: 100%;
    margin-bottom: 30px;
}   
    
.wbd_menu-b {
    position: relative;
    margin-top: 35px;
    display: flex;
    align-items: center;
    justify-content:center;
}   
    
.ex {
    margin-top: 7px;
    text-align: right;}
    
.ex img {
    width: 30%;}   
    
    .wd_top{
      width: 90%;
    margin: -10px auto 0px;    
    }  
    
    .wd_top img{
width: 100%;
height: 7px;
object-fit: cover;        
    }       
    
.arrange_modal {
    display: flex;
    flex-direction: column;
}    
    
.arrange_modal img {
    width: 100%;
    object-fit: contain;
}    
    
    
#winesoda_lineup {
    padding-top: 70px;
    position: relative;
}    
    
.anchor {
    padding-top: 70px;
    margin-top: -70px;
}   
    
    
.bg_e {
    background-color: #0A201D;

    height: auto;
    position: relative;
    background-attachment: initial;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
	
	padding-bottom: 50px;
} 
    
.bg_f {
    background-color: #0A201D;

    height: auto;
    position: relative;
     background-attachment: initial;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}    
    
.bg_d {
    background-color: #68060A;
  
    height: auto;
    width: 100%;
    position: relative;
    background-attachment: initial;
    background-size: cover;
    background-position: right -300px bottom 200px;
    background-repeat: no-repeat;
}    
    
img.gentei-b {
    position: absolute;
    width: 22%!important;
    height: auto!important;
    object-fit: contain;
    right: -10%;
    top: -48%;
}   
    
img.wa_d{
    width: 80%;
    margin: 10px 0 0;
}
    
 
}


/*--------------------------------------------------------------
|
| 600PX
|
--------------------------------------------------------------*/
@media screen and (max-width: 600px) {
    
img.gentei {
    position: absolute;
    width: 60px!important;
    height: auto!important;
    object-fit: contain;
    right: -7%;
    top: -30%;
} 


}        
    




/*--------------------------------------------------------------
|
| 500PX
|
--------------------------------------------------------------*/

@media screen and (max-width: 500px) {
 
     
.headerlistspWrap .lineup {
width: 100%;
    cursor: pointer;
    height: 9vw;
    background-image: url(../images/lineup.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}    
    
.headerlistspWrap .kdwr {
width: 100%;
  height: 9vw;
    cursor: pointer;
    background-image: url(../images/kodawari.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}     
    
.headerlistspWrap .tnsmkt {
width: 100%;
    cursor: pointer;
    height: 9vw;
    background-image: url(../images/tanoshimi.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}      
    
 .headerlistspWrap .winesoda_b-img {
    width: 48%;
    display: flex;
}   
    
.headerlistspWrap .winesoda_b ul li {
    margin-bottom: 10px;
}    
    
.headerlistspWrap .winesoda_b ul {
    width: 48%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}  
    
.headerlistspWrap .winesoda_b {
    width: 100%;
    padding: 0 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    border-right: none;
    border-bottom: 2px solid #231815;
    padding-right: 0px;
    padding-bottom: 35px;
    padding-top: 35px;
}    
    
.headerlistspWrap .winesoda_a {
    width: 60%;
    margin: 0 auto;
    padding-left: 0;
    align-items: center;
    justify-content: center;
    display: flex;
    text-align: center;
    border-right: none;
    padding-top:35px;
    padding-right: 0px;
}   
    
    .headerlistspWrap.active {
    margin: 0px auto 0;
    display: block;
    width: 100%;
    padding: 80px 0 50px;
    height: 100%;
    overflow: auto;
    background-image: url(../images/bg_sp.png);
    background-position: top right;
    background-size: cover;
    background-repeat: no-repeat;
}
    
 .wb_column {
    position: relative;
    
    width: 100%;
    margin: 0 auto;
    display: flex;
padding:53px 0 200px;
    align-items: center;
    justify-content: center;
}   
    
/* .wb_column img {
    width: 50%;
    object-fit: contain;
}     */

	
img.gentei {
    position: absolute;
    width: 30%!important;
    height: auto!important;
    object-fit: contain;
    right: -10%;
    top: -47%;
}
	
.wcs_a {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20px 10px 15px;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.9);
}  
	
#winesodabase_lineup .wcs_a {
    position: relative;
    width: 100%;
    display: flex;
    margin-left: 0px;
    align-items: center;
    flex-direction: column;
    padding: 13px 10px 8px;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.9);
}    
    
img.gentei-b {
    position: absolute;
    width: 24%!important;
    height: auto!important;
    object-fit: contain;
    right: -15%;
    top: -45%;
}    
    
    

}



/*--------------------------------------------------------------
|
| 400PX
|
--------------------------------------------------------------*/

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


    
}