@charset "utf-8";

/*------------------------------------------------------------
  common
------------------------------------------------------------ */

@import url(/wine/common2015/css/common.css);

#suntory_contents {
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro W3",メイリオ,Meiryo,sans-serif ;
}


/*------------------------------------------------------------
  [pc] container
------------------------------------------------------------ */
#suntory_contents #container {
    width:960px;
}

/*------------------------------------------------------------
  [pc] title
------------------------------------------------------------ */
#suntory_contents #titleKnowledge {
    margin-bottom: 40px;
}
#suntory_contents #titleKnowledge h1{
    width:241px;
    height: 28px;
    background:url(../img/title.png) no-repeat 0 0;
    text-indent: -9999px;
}

/*------------------------------------------------------------
  [pc] contents
------------------------------------------------------------ */
#suntory_contents #contents:after { content :''; display :block; clear :both; }

#suntory_contents #contents {
    //margin-bottom: 40px;
    margin-bottom: 90px;
}

#suntory_contents #contents a {
    text-decoration: none;
}

#suntory_contents #section01 {
    margin: 0 30px 0 0;
    width: 300px;
    float: left;
}
#suntory_contents #section02 {
    margin: 0 30px 0 0;
    width: 300px;
    float: left;
}
#suntory_contents #section03 {
    margin-bottom: 30px;
    width: 300px;
    float: left;
}

#suntory_contents #contents section h2 a {
    margin-bottom: 10px;
    width: 300px;
    padding: 15px 0;
    font-size:30px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    display: block;
}

#suntory_contents #contents section figure {
    margin: 0;
}
#suntory_contents #contents section figure img {
    vertical-align: bottom;
}

#suntory_contents #section01 h2 a {
    border: 1px #d4145a solid;
    background:#97004c;
    border-radius: 1px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#d3145a', endColorstr = '#97004c');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#d3145a', endColorstr = '#97004c')";
    background-image: -moz-linear-gradient(top, #d3145a, #97004c);
    background-image: -ms-linear-gradient(top, #d3145a, #97004c);
    background-image: -o-linear-gradient(top, #d3145a, #97004c);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#d3145a), to(#97004c));
    background-image: -webkit-linear-gradient(top, #d3145a, #97004c);
    background-image: linear-gradient(top, #d3145a, #97004c);
}
#suntory_contents #section01 h2 a:hover {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#97004c', endColorstr = '#d3145a');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#97004c', endColorstr = '#d3145a')";
    background-image: -moz-linear-gradient(top, #97004c, #d3145a);
    background-image: -ms-linear-gradient(top, #97004c, #d3145a);
    background-image: -o-linear-gradient(top, #97004c, #d3145a);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#97004c), to(#d3145a));
    background-image: -webkit-linear-gradient(top, #97004c, #d3145a);
    background-image: linear-gradient(top, #97004c, #d3145a);
}


#suntory_contents #section02 h2 a {
    border: 1px #8cc63f solid;
    background:#016937;
    border-radius: 1px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#8bc53f', endColorstr = '#016937');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#8bc53f', endColorstr = '#016937')";
    background-image: -moz-linear-gradient(top, #8bc53f, #016937);
    background-image: -ms-linear-gradient(top, #8bc53f, #016937);
    background-image: -o-linear-gradient(top, #8bc53f, #016937);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#8bc53f), to(#016937));
    background-image: -webkit-linear-gradient(top, #8bc53f, #016937);
    background-image: linear-gradient(top, #8bc53f, #016937);    
}
#suntory_contents #section02 h2 a:hover {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#016937', endColorstr = '#8bc53f');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#016937', endColorstr = '#8bc53f')";
    background-image: -moz-linear-gradient(top, #016937, #8bc53f);
    background-image: -ms-linear-gradient(top, #016937, #8bc53f);
    background-image: -o-linear-gradient(top, #016937, #8bc53f);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#016937), to(#8bc53f));
    background-image: -webkit-linear-gradient(top, #016937, #8bc53f);
    background-image: linear-gradient(top, #016937, #8bc53f);    
}


#suntory_contents #section03 h2 a {
    border: 1px #fbb03b solid;
    background:#ed8600;
    border-radius: 1px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fbb03a', endColorstr = '#ed8600');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fbb03a', endColorstr = '#ed8600')";
    background-image: -moz-linear-gradient(top, #fbb03a, #ed8600);
    background-image: -ms-linear-gradient(top, #fbb03a, #ed8600);
    background-image: -o-linear-gradient(top, #fbb03a, #ed8600);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#fbb03a), to(#ed8600));
    background-image: -webkit-linear-gradient(top, #fbb03a, #ed8600);
    background-image: linear-gradient(top, #fbb03a, #ed8600);
}
#suntory_contents #section03 h2 a:hover {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ed8600', endColorstr = '#fbb03a');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ed8600', endColorstr = '#fbb03a')";
    background-image: -moz-linear-gradient(top, #ed8600, #fbb03a);
    background-image: -ms-linear-gradient(top, #ed8600, #fbb03a);
    background-image: -o-linear-gradient(top, #ed8600, #fbb03a);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#ed8600), to(#fbb03a));
    background-image: -webkit-linear-gradient(top, #ed8600, #fbb03a);
    background-image: linear-gradient(top, #ed8600, #fbb03a);
}



#suntory_contents section p {
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.5;
}

#suntory_contents section li {
    margin-bottom: 10px;
}

#suntory_contents #section01 a h3,
#suntory_contents #section02 a h3,
#suntory_contents #section03 a h3 {
    font-size: 22px;
    color: #fff;
    padding: 15px 10px;
    display: block;
    text-decoration: none;
    
    border-radius: 1px;
}
#suntory_contents #section01 a:hover h3,
#suntory_contents #section02 a:hover h3,
#suntory_contents #section03 a:hover h3 {
    text-decoration: none;
}

#suntory_contents #section01 li a h3 {
    border: 1px #d4145a solid;
    background:#97004c;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#97004c', endColorstr = '#d3145a');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#97004c', endColorstr = '#d3145a')";
    background-image: -moz-linear-gradient(left, #97004c, #d3145a);
    background-image: -ms-linear-gradient(left, #97004c, #d3145a);
    background-image: -o-linear-gradient(left, #97004c, #d3145a);
    background-image: -webkit-gradient(linear, left top, right top, from(#97004c), to(#d3145a));
    background-image: -webkit-linear-gradient(left, #97004c, #d3145a);
    background-image: linear-gradient(left, #97004c, #d3145a);
}
#suntory_contents #section01 li  a:hover h3 {
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#d3145a', endColorstr = '#97004c');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#d3145a', endColorstr = '#97004c')";
    background-image: -moz-linear-gradient(left, #d3145a, #97004c);
    background-image: -ms-linear-gradient(left, #d3145a, #97004c);
    background-image: -o-linear-gradient(left, #d3145a, #97004c);
    background-image: -webkit-gradient(linear, left top, right top, from(#d3145a), to(#97004c));
    background-image: -webkit-linear-gradient(left, #d3145a, #97004c);
    background-image: linear-gradient(left, #d3145a, #97004c);
    text-decoration: none;
}
#suntory_contents #section02 li a h3 {
    border: 1px #8cc63f solid;
    background:#016937;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#016937', endColorstr = '#8bc53f');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#016937', endColorstr = '#8bc53f')";
    background-image: -moz-linear-gradient(left, #016937, #8bc53f);
    background-image: -ms-linear-gradient(left, #016937, #8bc53f);
    background-image: -o-linear-gradient(left, #016937, #8bc53f);
    background-image: -webkit-gradient(linear, left top, right top, from(#016937), to(#8bc53f));
    background-image: -webkit-linear-gradient(left, #016937, #8bc53f);
    background-image: linear-gradient(left, #016937, #8bc53f);
}
#suntory_contents #section02 li  a:hover h3 {
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#8bc53f', endColorstr = '#016937');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#8bc53f', endColorstr = '#016937')";
    background-image: -moz-linear-gradient(left, #8bc53f, #016937);
    background-image: -ms-linear-gradient(left, #8bc53f, #016937);
    background-image: -o-linear-gradient(left, #8bc53f, #016937);
    background-image: -webkit-gradient(linear, left top, right top, from(#8bc53f), to(#016937));
    background-image: -webkit-linear-gradient(left, #8bc53f, #016937);
    background-image: linear-gradient(left, #8bc53f, #016937);
    text-decoration: none;
}

#suntory_contents #section03 li a h3 {
    border: 1px #fbb03b solid;
    background:#ed8600;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#ed8600', endColorstr = '#fbb03a');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#ed8600', endColorstr = '#fbb03a')";
    background-image: -moz-linear-gradient(left, #ed8600, #fbb03a);
    background-image: -ms-linear-gradient(left, #ed8600, #fbb03a);
    background-image: -o-linear-gradient(left, #ed8600, #fbb03a);
    background-image: -webkit-gradient(linear, left top, right top, from(#ed8600), to(#fbb03a));
    background-image: -webkit-linear-gradient(left, #ed8600, #fbb03a);
    background-image: linear-gradient(left, #ed8600, #fbb03a);
}
#suntory_contents #section03 li a:hover h3 {
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#fbb03a', endColorstr = '#ed8600');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#fbb03a', endColorstr = '#ed8600')";
    background-image: -moz-linear-gradient(left, #fbb03a, #ed8600);
    background-image: -ms-linear-gradient(left, #fbb03a, #ed8600);
    background-image: -o-linear-gradient(left, #fbb03a, #ed8600);
    background-image: -webkit-gradient(linear, left top, right top, from(#fbb03a), to(#ed8600));
    background-image: -webkit-linear-gradient(left, #fbb03a, #ed8600);
    background-image: linear-gradient(left, #fbb03a, #ed8600);
    text-decoration: none;
}

/*------------------------------------------------------------
  [pc] banner
------------------------------------------------------------ */
#suntory_contents .banner_line{
	background: url(../img/line.png) 0 top repeat-x;
	padding-top: 60px;
}
@media screen and (min-width:768px){
#suntory_contents #banner {
    clear: both;
    margin: 0 auto 30px;
    width: 960px; 
}
#suntory_contents #banner ul:after { content :''; display :block; clear :both; }

#suntory_contents #banner .primary {
    width: 960px;
    overflow: hidden;
}


/* 20171116 追記 */
#suntory_contents #banner .primary{
	width: auto;
	margin-left: -29.5px}
	

#suntory_contents #banner .primary li{
	float: left;
	margin-left: 29.5px;
}
/* /20171116 追記 */


#suntory_contents #banner .secondary li{
    width: 300px;
    float:left;
}
#suntory_contents #banner .secondary li:nth-child(2){
    margin: 0 20px;
}
}
/*------------------------------------------------------------
  [pc] 201711 追記バナー分
------------------------------------------------------------ */


#suntory_contents #section01 li.new_ber a > h3,
#suntory_contents #section03 li.new_ber a > h3{
	height: 144px;
	font-size: 21px;
	line-height: 1.5;
	box-sizing: border-box;}

#suntory_contents #section01 .pc_pdT65,
#suntory_contents #section03 .pc_pdT65{
	padding-top: 65px;}

.new_icon{
	position: relative;}

#section01 .new_icon:after{
	content: "NEW!";
	position: absolute;
	top: 15px;
	left: 118px;
	font-size: 20px;
	background: #fff;
	padding: 5px;
	color: #97004c;}

#section03 .new_icon:after{
	content: "NEW!";
	position: absolute;
	top: 15px;
	left: 118px;
	font-size: 20px;
	background: #fff;
	padding: 5px;
	color: #ed8600;}

.txt_center{
	text-align: center;}
	
#suntory_contents .banner_title{
	font-size: 21px;
	margin-bottom: 25px;}


@media screen and (max-width:768px){
    
	/*------------------------------------------------------------
	  [sp] container
	------------------------------------------------------------ */
	#suntory_contents #container {
	    width:100%;
	    overflow: hidden;
	}
	#suntory_contents #breadCrumbs {
	    display: none;        
	}

    /*------------------------------------------------------------
      [sp] title
    ------------------------------------------------------------ */
    #suntory_contents #titleKnowledge {
        margin: 30px 15px;
    }
    #suntory_contents #titleKnowledge h1{
        width:241px;
        height: 28px;
        background:url(../img/title.png) no-repeat 0 0;
        background-size:240px auto;
        text-indent: -9999px;
    }
    
    /*------------------------------------------------------------
      [sp] contents
    ------------------------------------------------------------ */
    #suntory_contents #contents:after { content :''; display :block; clear :both; }

    #suntory_contents #contents {
        margin-bottom: 40px;
    }

    #suntory_contents #contents a {
        text-decoration: none;
    }

    #suntory_contents #section01 {
        margin: 0 0 30px;
        width: auto;
        float: none;
    }
    #suntory_contents #section02 {
        margin: 0 0 30px;
        width: auto;
        float: none;
    }
    #suntory_contents #section03 {
        margin: 0;
        width: auto;
        float: none;
    }

    #suntory_contents #contents section h2 a,
    #suntory_contents #contents section h2 b{
        margin-bottom: 10px;
        width: auto;
        padding: 15px 0;
        display: block;
        font-size:24px;
        color: #fff;
        text-decoration: none;
        text-align: center;
    }

    #suntory_contents #contents section figure {
        margin: 0;
        display: none;
    }
    #suntory_contents #contents section figure img {
        vertical-align: bottom;
    }

    #suntory_contents #section01 h2 a,
    #suntory_contents #section01 h2 b {
        border: 1px #d4145a solid;
        background-image: -webkit-gradient(linear, center top, center bottom, from(#d3145a), to(#97004c));
        background-image: -webkit-linear-gradient(top, #d3145a, #97004c);
        background-image: linear-gradient(top, #d3145a, #97004c);
    }
    #suntory_contents #section02 h2 a,
    #suntory_contents #section02 h2 b {
        border: 1px #8cc63f solid;
        background-image: -webkit-gradient(linear, center top, center bottom, from(#8bc53f), to(#016937));
        background-image: -webkit-linear-gradient(top, #8bc53f, #016937);
        background-image: linear-gradient(top, #8bc53f, #016937);    
    }
    #suntory_contents #section03 h2 a,
    #suntory_contents #section03 h2 b {
        border: 1px #fbb03b solid;
        background-image: -webkit-gradient(linear, center top, center bottom, from(#fbb03a), to(#ed8600));
        background-image: -webkit-linear-gradient(top, #fbb03a, #ed8600);
        background-image: linear-gradient(top, #fbb03a, #ed8600);
    }

    #suntory_contents section p {
        display: none;
        height: 0;
    }

    #suntory_contents section li {
        margin-bottom: 0;
    }

    #suntory_contents #section01 a h3,
    #suntory_contents #section02 a h3,
    #suntory_contents #section03 a h3 {
        font-size: 18px;
        color: #fff;
        padding: 15px 10px;
        display: block;
        text-decoration: none;
    }
    #suntory_contents #section01 a:hover h3,
    #suntory_contents #section02 a:hover h3,
    #suntory_contents #section03 a:hover h3 {
        text-decoration: none;
    }

    #suntory_contents #section01 li a h3 {
        border: 1px #d4145a solid;
        background: url(../img/arrow_right.png) no-repeat right center,-webkit-gradient(linear, left top, right top, from(#97004c), to(#d3145a));
        background: url(../img/arrow_right.png) no-repeat right center,-webkit-linear-gradient(left, #97004c, #d3145a);
        background: url(../img/arrow_right.png) no-repeat right center,linear-gradient(left, #97004c, #d3145a);
        background-size:30px auto,auto;
    }
    #suntory_contents #section01 li a:hover h3 {
        background: url(../img/arrow_right.png) no-repeat right center,-webkit-gradient(linear, left top, right top, from(#97004c), to(#d3145a));
        background: url(../img/arrow_right.png) no-repeat right center,-webkit-linear-gradient(left, #97004c, #d3145a);
        background: url(../img/arrow_right.png) no-repeat right center,linear-gradient(left, #97004c, #d3145a);
        background-size:30px auto,auto;
        text-decoration: none;
    }
    #suntory_contents #section02 li a h3 {
        border: 1px #8cc63f solid;
        background: url(../img/arrow_right.png) no-repeat right center,-webkit-gradient(linear, left top, right top, from(#016937), to(#8bc53f));
        background: url(../img/arrow_right.png) no-repeat right center,-webkit-linear-gradient(left, #016937, #8bc53f);
        background: url(../img/arrow_right.png) no-repeat right center,linear-gradient(left, #016937, #8bc53f);
        background-size:30px auto,auto;
    }
    #suntory_contents #section02 li a:hover h3 {
        background: url(../img/arrow_right.png) no-repeat right center,-webkit-gradient(linear, left top, right top, from(#016937), to(#8bc53f));
        background: url(../img/arrow_right.png) no-repeat right center,-webkit-linear-gradient(left, #016937, #8bc53f);
        background: url(../img/arrow_right.png) no-repeat right center,linear-gradient(left, #016937, #8bc53f);
        text-decoration: none;
        background-size:30px auto,auto;
    }

    #suntory_contents #section03 li a h3 {
        border: 1px #fbb03b solid;
        background: url(../img/arrow_right.png) no-repeat right center,-webkit-gradient(linear, left top, right top, from(#ed8600), to(#fbb03a));
        background: url(../img/arrow_right.png) no-repeat right center,-webkit-linear-gradient(left, #ed8600, #fbb03a);
        background: url(../img/arrow_right.png) no-repeat right center,linear-gradient(left, #ed8600, #fbb03a);
        background-size:30px auto,auto;
    }
    #suntory_contents #section03 li a:hover h3 {    
        background: url(../img/arrow_right.png) no-repeat right center,-webkit-gradient(linear, left top, right top, from(#ed8600), to(#fbb03a));
        background: url(../img/arrow_right.png) no-repeat right center,-webkit-linear-gradient(left, #ed8600, #fbb03a);
        background: url(../img/arrow_right.png) no-repeat right center,linear-gradient(left, #ed8600, #fbb03a);
        background-size:30px auto,auto;
        text-decoration: none;
    }

   /*------------------------------------------------------------
      [sp] banner
    ------------------------------------------------------------ */
    #suntory_contents #banner {
        display: none;
        height: 0;
    }
    
    /*------------------------------------------------------------
  [sp] 201711 追記バナー分
------------------------------------------------------------ */
.txt_center{
	text-align:left;}
	
.new_icon{
	position: relative;}

#section01 .new_icon:after{
	content: "NEW!";
	position: absolute;
	top: 18px;
	left: 1.5%;
	font-size: 15px;
	background: #fff;
	padding: 5px;
	color: #97004c;}

#section03 .new_icon:after{
	content: "NEW!";
	position: absolute;
	top: 18px;
	left: 1.5%;
	font-size: 15px;
	background: #fff;
	padding: 5px;
	color: #ed8600;}

#suntory_contents #section01 li.new_ber a > h3,
#suntory_contents #section03 li.new_ber a > h3{
	height: auto;
	padding-top: 15px;
	padding-right: 30px;}

#suntory_contents #section01 .sp_pdL79,
#suntory_contents #section03 .sp_pdL79{
	padding-left: 70px;}




#suntory_contents #banner {
	display: block;
	width: 100%;
	height: auto;}

#suntory_contents #banner .primary{
	width: 100%;
	overflow: hidden;
	text-align: center;}
	
#suntory_contents #banner .primary li{
	width: 47.65625%;
	float: left;
	margin: 0 0 5px 1.5625%;}
	
#suntory_contents #banner .primary li:nth-child(2n+1){
	clear: both;}
	
#suntory_contents #banner .primary li img{
	width: 100%;}

#suntory_contents .banner_title{
	margin-left: 10px;}


.sp_br{
	display: none;}
    
}