@charset "utf-8";
@import url("/wnb/common/css/common.css");

#suntoryCommonFt_ShareBtn{display:none;}

/* ========= main start ========= */
div#wrapper{width:100%; min-width: 1164px; margin:auto;}

/* kv area start */
.kvArea {position: relative;}
.kvImg{position:relative;}

.kvArea h2{
 position:absolute;
 top:25%; left: 50%;
 transform: translate(-50%,0);
 color:#007694;
 font-size: 2.34375vw;
 z-index: 1;
}

.anchorArea{
 width:100%;
 text-align: center;
 position:absolute;
 bottom:20%;
}

.anchorArea.fixedNav{
  width:100%;
  max-height: 79px;
}
.fixedNav .anchorList{padding:25px 0; background-color: rgba(255,255,255,.9);}

.anchorList li{
 display:inline-block;
 font-size: 20px;
 font-weight: bold;
}
.pr100{padding-right: 5.20835vw;}
.anchorList a::after{
 content:'';
 width:0.782vw;
 height:0.886vw;
 display:inline-block;
 vertical-align: middle;
 background: url(/wnb/common/img/arrow.png) no-repeat center;
 background-size: 100%;
 margin-left:6.4px;
}
.anchorList a:hover{text-decoration: underline;}

/* section01 */

.sectionWarp2{
 max-width:1140px;
 width:90%;
 margin:auto;
}

.section01{
 background-color: #FFD4CF;
 margin-top:-1.5625vw;
 padding-bottom:31px;
}
.loadBox{
  min-height: 79px;
  background-color: #FFD4CF;
}

.section01 h2{
 width:26.404%;
 margin:auto;
 padding:4.9479vw 0 3.125vw;
}

.section01 .pageLinkArea li{
display: inline-block;
vertical-align: text-top;
 width: 31.52%;
 margin-bottom:5.20835vw;
 margin-right: 1.04165vw;
}
.section01 .pageLinkArea li:last-child{margin-bottom:0px;}
/* section02 */

.sectionWarp3{
 max-width:1120px;
 width:90%;
 margin:auto;
}

.section02{
 background-color: #F0DEBA;
 padding-bottom:5.41665vw;
}

.section02 h2{
 width:18.662%;
 margin:auto;
 padding:4.166665vw 0 2.864585vw;
}

.section02 .pageLinkArea li{
 display: inline-block;
 vertical-align: text-top;
 width: 31.58%;
 margin-right: 1.04165vw;
 margin-bottom:1.5625vw;
}
.section02 .pageLinkArea li:last-child{margin-bottom:0px;}

/* section01, section02 */

.pageLinkArea{
 display: inline-block;
 width: 100%;
 margin: auto;
}
.pageAImg{transition: .5s;}
.pageAImg:hover{opacity: .6;}

.pageLinkArea li:nth-of-type(3n){margin-right: 0;}

.pageATxt h3{
 font-size:1em;
 padding:0.83335vw 0 0.52085vw;
}
.pageATxt h3 a:hover{text-decoration: underline;}
.pageATxt p{
 font-size: .9375em;
 line-height: 1.6;
}

@media only screen and (max-width: 767px){
  div#wrapper{width:100%; min-width: 0; margin:auto;}
 .kvArea h2{
  left:19%;
  transform: translate(0,0);
  font-size: 7.46666vw;
 }
 .anchorArea{top:77%;}
 .anchorList li{font-size: 4.26666vw;}
 .anchorList a::after{
  width:3.47vw; height:2.135vw;
  vertical-align: unset;
  }
  .anchorArea.fixedNav{max-height: 50px;}
  .fixedNav .anchorList{padding:3.47vw 0;}
/* section01 */
.section01{padding-bottom: 3.73333vw;}
.section01 h2{
 width:68vw;
 padding:8.8vw 0 5.3333vw;
}
.loadBox{min-height:50px;}
/* section02 */
.section02{padding-bottom:11.73333vw;}
.section02 h2{
 width:46.67vw;
 padding:15.0666vw 0 9.3333vw;
}

/* section01, section02 */
 .sectionWarp2,.sectionWarp3{width:90.67%;}
 .pageLinkArea{display:block;}
 .section01 .pageLinkArea li,
 .section02 .pageLinkArea li{width:100%;}

.pageATxt h3 {
 font-size: 4.26666vw;
 padding: 5.6vw 0 2.6666vw;
}
.pageATxt p{font-size: 4vw;}
.pageATxt { padding-bottom: 10.66667vw;}

.section01 .pageLinkArea li:nth-of-type(2n){margin-bottom:0px;}

/* media end */
}