@charset "UTF-8";
*{margin:0; padding:0;}
.serif{font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;}

body{background-color:#f3eeea;}

h1{display:none;}

section.review4 h2{
    width: 100%;
  background-image: linear-gradient(90deg, rgba(123, 54, 114, 1), rgba(166, 84, 156, 1) 30%, rgba(123, 54, 114, 1) 50%, rgba(166, 84, 156, 1) 70%, rgba(123, 54, 114, 1));
    text-align:center;
    color:#FFF;
    padding:0.5em 0;
    font-size:24px;
    font-weight:bold;
}

h3{border-bottom:1px dashed #CCC;
   padding-bottom:5px;
   font-size:16px;}

h3 a{color:#3366cc;
    text-decoration:none;
    font-weight:bold !important;}
h3 a:hover{text-decoration:underline;}

h4{margin-bottom:0.5em;
   font-size:16px;}


main{width:1200px;
margin:auto;
    background-color:#FFF;
}

section#kv{margin-bottom:20px;
           margin-top:112px;}

section#kv p{box-sizing: border-box;
            text-align:right;
            padding-right:1em;
            font-size:12px;}


section.review4{
    padding-bottom:50px;
}

section.review4 ul{
    padding:2em 2em 0 2em;
}


section.review4 ul li{
    list-style-type:none;
    display:flex;
    padding:30px 0;
}

section.review4 ul li:not(:last-child){
    border-bottom:1px solid #eee;
}

section.review4 ul li figure.item{
    width:200px;
    height:200px;
    text-align:center;
    padding:10px;
    border:1px solid #CCC;
}

section.review4 ul li figure img{
    height:200px;
}

.item_detail{
    margin-left:20px; margin-right:20px;
    width:700px;}

.item_detail .country{
    font-size:14px;
    display: flex;
    align-items: center;
    margin-bottom:0.5em;
}

.item_detail .country .flag{width:25px;height:auto;margin-right:1em;}

.item_detail .picup_comment{
    display: flex;
    /*align-items: flex-start;*/
    margin-top:1em
}

.item_detail .picup_comment figure{
    width:115px;
    height:115px;
    text-align:center;
}

.item_detail .picup_comment figure img{
    width:115px;
    height:115px;
}

.item_detail .picup_comment figure figcaption{
    font-size:12px;
}

.item_detail .picup_comment figure figcaption p{
    color:#FFDD00;
}


/*コメントふきだし*/
.balloon-008 {
/*    display: flex;
    flex-flow: column;*/
    border: 1px solid #000000;
    position: relative;
    margin-left: 15px;
    padding: .8em 1.2em;
    border-radius: 8px;
    background-color: #fff;
    color: #333333;
    width:100%;
}

.balloon-008::before,
.balloon-008::after {
    position: absolute;
    left: -15px;
    width: 15px;
    height: 20px;
    top:40%;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    content: '';
}

.balloon-008::before {
    background-color: #FFF;
}

.balloon-008::after {
    left: -15px;
    background-color: #000;
}
/*コメントふきだし　ここまで*/

p.comment{
    font-size:14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 行数を指定 */
}

.item_price{border-left:1px solid #eeece6;
            padding:1em 1em;}

.item_price .price{
    font-weight:bold;
    font-size:20px;
    text-align: center;
}
.item_price .price:after{
    font-size:70%;
    content:'円（税込）';
}


/*カートボタン*/
.bt_cart{
  display:block;
  width:150px;
  height:35px;
  margin:0.5em;
  font-size:12px;
  line-height:35px;
  background:#edb500;/*←←←←←←←←←←←←←←←←←←←←カートに入れるボタン背景色←←←←←←←←←←←←←←←←←←←←*/
  color:#000;
  font-weight:bold;
  border-radius:30px;
  text-decoration:none;
  text-align:center;
  transition : .1s
}

.bt_detail{
  display:block;
  width:150px;
  height:35px;
  margin:0.5em;
  font-size:12px;
  line-height:35px;
  background:#FFF;
  color:#000000;/*←←←←←←←←←←←←←←←←←←←←詳細を見るボタン文字色←←←←←←←←←←←←←←←←←←←←*/
  font-weight:bold;
  border-radius:30px;
  text-decoration:none;
  text-align:center;
  border-width:1px;
  border-style:solid;
  border-color: #EFB500;/*←←←←←←←←←←←←←←←←←←←←詳細を見るボタン線色←←←←←←←←←←←←←←←←←←←←*/
  transition : .1s

}

.bt_cart:hover,
.bt_detail:hover{
    opacity: 0.7;
	transition : .1s;
}

/*その他のワインはこちら*/
.button_other a {
    background: #7b3672;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 500px;
    padding: 20px 25px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 700;
    font-size:18px;
    margin:0 auto;
}

.button_other a:hover {
    background: #a6549c;
    color: #FFF;
}
.button_other a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #FFF;
    border-right: 3px solid #FFF;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.button_other a:hover:after {
    border-color: #FFF;
}




/*KVレスポンシブ*/
figure.pc { display: block !important; }
figure.sp { display: none; }


/*スマホで改行*/
.sma{display: none;}

/*=====================================↓↓↓ここからスマホ版設定↓↓↓========================================*/

@media only screen and (max-width: 850px) {
    
main{width:100%;}
    
h2{
    font-size:5vw;
    }
    
h4{font-size:14px;}
    
section#kv{margin-top:112px;
           padding-top:30px;}
    
section#kv p{text-align:center;
            font-size:11px;
            padding-right:1em;
            padding-left:1em;}
    
section.review4 ul{
    padding:1em;
}
    
section.review4 ul li{
    flex-flow: column;
    margin:15px auto;
    padding-bottom:15px;
}   
    
ul li figure.item{
    margin:0 auto 10px auto;
    width:250px !important;
    height:250px !important;
}

ul li figure.item img{
        height:250px !important;
}
    
.item_detail .picup_comment figure figcaption{
    font-size:10px;
}
    
.item_detail .picup_comment figure figcaption p{
     font-size:12px;
}    
    
.item_detail{
    width:100%;
    margin:0 auto;}   
    
.item_detail .country{
    font-size:12px;
    margin-top:0.5em;    
    
}
    
.item_detail .picup_comment figure{
    width:80px;
    height:80px;
}   
    
.item_detail .picup_comment figure img{
    width:80px;
    height:80px;} 
    
p.comment{
    font-size:12px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5; /* 行数を指定 */
}
    
.item_price{
    border:none;
    width:90%;} 
    
.item_price .price{
        font-size:24px;
    }
    
.bt_cart,
.bt_detail{
    width:100%;
    margin:.5em auto;
    font-size:16px;
    padding:0.3em 0;
    } 
    
    
.button_other{width:90%;
    padding:10px 10px;
    margin:0 auto;
    text-align:center;}
.button_other a{max-width:100%;}
    
    

/*KVレスポンシブ*/    
figure.pc { display: none!important; }
figure.sp { display: block;}
figure.sp img{width:100%;height:auto;}

.spview{display:none;}    

/*スマホで改行*/ 
.sma{display: block;}
}