@charset "UTF-8";

.bg-drink{
  padding:0;
  background: #f1f1f0;
}

/* ドリンク共通 --------------*/
.drinkContainer{
  padding: 5rem 1.5rem;
  background: url(../menu-drink/img/bg-drink.png) no-repeat left bottom;
  background-size: contain;
}

/* h3 共通 SP 
----------------------------- */
.drinkContainer h3{
  margin: 0 0 2rem;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 2px;
  font-size: 2.1rem;
  color: #674101;
}
.drinkContainer h3 span{
  display: block;
  padding: 0;
  letter-spacing: 0;
  font-size: 1.4rem;
}

/* Wineセクション SP 
------------------------- */
.wine-flex{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wine-flex section{
  width: auto;
}
.wineSec section h4{
  display: flex;
  align-items: center;
  border-top: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  margin: 0 0 3rem;
  padding: 1rem 0;
}
.wineSec section h4 span{
  display: block;
}
.wineSec section h4 span:first-child{
  padding: 0 2rem 0 1rem;
  border-right: solid 1px #ccc;
  font-family: "Castoro", serif;
  font-size: 1.6rem;
}
.wineSec section h4 span:last-child{
  font-family: "Noto Serif JP", serif;
  font-size: 1.4rem;
  padding:0 0 0 2rem;
}


.wineSec section article{
  padding: 0 0 5rem;
}
.wineBlock{
  display: flex;
  justify-content: space-between;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid #cccc;
}
/* ワイン 写真 SP ------------ */
.winePhoto{
  width: 34%;
  padding: 0 4rem 0 1rem;
  text-align: center;
}
/* 商品詳細 SP ------------ */
.wineText{
  width: 66%;
  height: auto;
}
@media screen and (min-width:750px) {
  .wineText{height: 32rem;}
}
@media screen and (min-width:1000px) {
  .wineText{height: 34rem;}
}
@media screen and (min-width:1200px) {
  .wineText{height: 30rem;}
}
@media screen and (min-width:1400px) {
  .wineText{height: 36rem;}
}
@media screen and (min-width:1600px) {
  .wineText{height: 34rem;}
}

.wineText h5{
  margin-bottom: 1rem;
  line-height: 1.5;
  letter-spacing: 1px;
}
.wineText h5 span:first-child{
  font-size: 1.4rem;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
}
.wineText h5 span:last-child{
  font-family: "Noto Serif JP", serif;
  font-size: 1.2rem;
  color: #666;
}
.wineText h5 + p{
  font-size: 1.4rem;
  line-height: 1.5;
}

/* 産地・品質 SP ----------------*/
.wineFrom{
  display: flex;
  padding: 1rem 0;
}
.wineFrom p{
  width: 20%;
  padding: 0.5rem 0 0;
}
.wineFrom div{
  width: 80%;
  padding: 0 0 0 1.5rem;
}
.wineFrom div dl{
  display: flex;
  font-size: 1.4rem;
  padding: 0 0 3px;
  line-height: 1.5;
}
.wineFrom div dl dt{
  font-weight: bold;
  text-decoration: underline;
  padding-right: 10px;
}
.wineFrom div dl dd{
  width: calc(100% - 50px);
}
.wineFrom + p{
  font-size: 1.4rem;  
  line-height: 1.5;
  letter-spacing: 1px;
}

/* 価格 SP -------------------- */
.wine-price{
  font-size: 1.3rem;
  text-align: right;
}
.wine-price span:first-child{
  padding-right: 10px;
  font-size: 1.4rem;
}
.wine-price span:nth-child(2){
  font-size: 1.8rem;
}
.wine-price span:last-child{
  padding: 0 0.2rem;
  font-size: 1.6rem;
}


/* ------------------
ドリンク SP 
-------------------- */
.drink-wrap{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.drink-leftBox,.drink-rightBox{
  width: auto;
}
.wineSec, .drinkSec{
  padding: 0 0 5rem;
}

/* ドリンク 共通 
----------------------------*/
.drinkSec section{
  padding: 0 0 2.5rem;
}
.drinkSec h4{
  margin:0 0 1rem;
  letter-spacing: 1px;
  font-size: 2rem;
  color: #aa6b03;
}
.drinkSec h4 span{
  font-size: 1.4rem;
  padding:0 0 0 1rem;
}

.drinkSec article{
  padding: 0 0 1.5rem;
}
.drinkSec article.last{
  padding: 0;
}

.drinkSec h5{
  color: #674101;
  font-size: 1.4rem;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
}

.drinkSec dl{
  display: flex;
  align-items: center;
  border-bottom: 1px dashed #666;
  padding: 0.5rem 0;
  font-size: 1.4rem;
}
.drinkSec dt{
  width: 80%;
}
.drinkSec dt span{
  display: block;
  padding: 0 0.2rem;
  font-size: 1.2rem;
  line-height: 1.2;
}
.drinkSec dd{
  width: 20%;
  text-align: right;
}
.drinkSec dd span{
  padding: 0 0.2rem;
  font-size: 1.2rem;
}

.drink-staff{
  padding: 0.5rem 0 0;
  font-size: 1.2rem;
}

/* ビール コラム SP -------------- */
.drink-text{
  display: flex;
  max-width: 48rem;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  font-size: 1.3rem;
}
.drink-text > p{
  width: 35%;
  padding: 0 3rem 0 0;
}
.drink-text div{
  width: 65%;
}
.drink-text div p:first-child{
  font-size: 1.4rem;
  padding: 0 0 0.5rem;
}
.drink-text div p:first-child span{
  color: #666;
}

/* 焼酎 SP -------------- */
.shochu h4{
  margin: 0;
}
.shochu h4 + p{
  padding: 0 0 1rem;
  font-size: 1.2rem;  
}

/* -------------------------
トッピング SP
----------------------------*/
.topping ol{
  padding: 1rem 0;
  font-size: 1.4rem;
}
.topping ol li{
  margin: 0 0 0 1.5rem;
  list-style: disc;
  list-style-position: outside;
}
.topping p{
  text-align: right;
  letter-spacing: 1px;
  border-top: 1px dashed #666;
  font-size: 1.4rem;
}
.topping p span{
  padding: 0 0 0 0.2rem;
  font-size: 1.2rem;  
}

/*----------------------------------------------------
タブレット用 750
----------------------------------------------------*/
@media screen and (min-width:750px) {

  /* h3 共通 750 
  ----------------------------- */
  .drinkContainer h3{    
    text-align: left;
  }
  .drinkContainer h3 span{
    padding: 0 0 0 1.5rem;
    display: inline;
  }

  /* Wineセクション 750 
  ------------------------- */
  .wine-flex{
    flex-direction: row;
  }
  .wine-flex section{
    width: 45%;
  }

  /* ------------------
  ドリンク 750
  -------------------- */
  .drink-wrap{
    flex-direction: row;
  }
  .drink-leftBox,.drink-rightBox{
     width: 45%;
  }

}


/*----------------------------------------------------
PC用 1000
----------------------------------------------------*/
@media screen and (min-width:1400px) {

  /* h3 共通 1400 
  ----------------------------- */
  .drinkContainer h3{
    font-size: 3rem;
  }
  .drinkContainer h3 span{
    font-size: 1.6rem;
  }

  /* ドリンク共通 --------------*/
  .drinkContainer{
    padding: 5rem 3rem;
  }
  .wineSec section h4{
    padding: 1.5rem 0;
  }
  .wineSec section h4 span:first-child{
    font-size: 2.1rem;
  }
  .wineSec section h4 span:last-child{
    font-size: 1.6rem;
  }

  /* ワイン 商品詳細 1400 ----- */
  .wineSec section article{
    padding: 0 0 5rem;
  }
  .wineBlock{
    margin: 0;
    padding: 0 0 3rem;
  }
  /* ワイン 写真 1400 ------------ */
  .winePhoto{
    width: 42%;
  }
  /* 商品詳細 1400 ------------ */
  .wineText{
    width: 58%;
  }
  .wineText h5{
    margin-bottom: 2rem;
  }
  .wineText h5 span:last-child{
    font-size: 1.6rem;
  }
  .wineText h5 + p{
    font-size: 1.6rem;
  }

  /* 産地・品質 1400 ----------------*/
  .wineFrom{
    padding: 2rem 0;
  }
  .wineFrom p{
    width: 20%;
    padding: 0.5rem 0 0;
  }
  .wineFrom div{
    width: 80%;
    padding: 0 0 0 1.5rem;
  }
  .wineFrom + p{
    line-height: 1.8;
  }


  /* 価格 1400 -------------------- */
  .wine-price{
    font-size: 1.4rem;
  }
  .wine-price span:first-child{
    font-size: 1.4rem;
  }
  .wine-price span:nth-child(2){
    font-size: 2.1rem;
  }
  .wine-price span:last-child{
    font-size: 1.8rem;
  }


  /* ------------------------
  ドリンク 共通 
  ----------------------------*/
  .drinkSec section{
    padding: 0 0 5rem;
  }

  .drinkSec h4{
    font-size: 2.4rem;
    margin:0 0 3rem;
  }
  .drinkSec h4 span{
    font-size: 1.6rem;
  }
  .drinkSec h5{
    font-size: 1.6rem;
  }
  .drinkSec dl{
    padding: 1.2rem 0;
    font-size: 1.6rem;
  }
  .drinkSec dt span{font-size: 1.4rem;}
  .drinkSec dd span{font-size: 1.4rem;}

  .drinkSec article{
    padding: 0 0 3rem;
  }

  /* -------------------------
  トッピング 1400
  ----------------------------*/
  .topping ol{
    padding: 2rem 0;
    font-size: 1.6rem;
  }
  .topping p{
    padding: 0.5rem 0 0;
    font-size: 1.6rem;
  }
  .topping p span{
    font-size: 1.4rem;  
  }

}



/*----------------------------------------------------
PC用 1400
----------------------------------------------------*/
@media screen and (min-width:1400px) {

  /* ドリンク共通 --------------*/
  .drinkContainer{
    padding: 10rem 8rem 10rem 12%;
    background: url(../menu-drink/img/bg-drink.png) no-repeat left bottom;
    background-size: 1000px;
  }

}

/*----------------------------------------------------
PC用 1600
----------------------------------------------------*/
@media screen and (min-width:1600px) {

  /* ドリンク共通 --------------*/
  .drinkContainer{
    padding: 10rem 8rem 10rem 15.8%;
  }
}