/* ========= common start ========= */

body,html{
 font-family: 'Noto Sans CJK JP',"ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 color:#000;
}
html,body,div,section,footer,header,span,p,ul,li,ol,h1,h2,h3,h4,h5,h6,dl,dd,dt{padding:0; margin:0;}
ul,li,ol{list-style: none;}
img,a{display:block;}
img{width:100%;}
a{
 color:#000;
 text-decoration: none;
}

.sectionWarp, .footerArea{
 max-width: 1164px;
 width:95%;
 margin:auto;
}
.clearFix::before{content:''; display:block; clear:both;}
.fl{float:left;}
.fr{float:right;}

.onlySp{display:none !important;}
.disinlineB{display: inline-block;}
/* ========= common end ========= */

/* ========= head start ========= */
header#header,footer#footer,
#suntoryCommonFooter,#suntoryCommonHd{ min-width: 1164px !important; width:100%; margin:auto;}
.headerBG{background-color: #fff; position: relative; z-index: 5;}
.headerArea{
 /* display:flex;
 align-items: center;
 justify-content: space-between; */
 min-height: 36px;
 padding:21px 0 28px;
}

.headerLogo a{
 max-width:384px;
}

.navMenuArea.fr{height: 100%; line-height: 2.5;}
.navArea{margin-bottom:-5px;}
.navArea li{
 display:inline-block;
 margin-left: 40px;
}
.navArea li a{font-size: 16px;}
.navArea a:hover{text-decoration: underline;}

.s01BtnArea a,.s02BtnArea a,.s03BtnArea a,.s04ItemImg a,.ftBtnList li{transition: .5s;}
.s01BtnArea a:hover,
.s02BtnArea a:hover,
.s03BtnArea a:hover,
.s04ItemImg a:hover,
.ftBtnList li:hover{opacity: .6;}

/* ========= head end ========= */

/* ========= anchor start ========= */
.anchorArea.fixedNav{
 width:100%;
 text-align: center;
 position:fixed;
 top: 0;
 z-index: 3;
}
/* ========= anchor end ========= */

/* ========= footer start ========= */

#suntoryCommonFt_txt_link a{display: inline-block;}

footer{background-color: #E4F4F8;}
.footerArea{padding:40px 0 80px;}
.footerArea h2{
 max-width:384px;
 padding-bottom:60px;
 cursor: pointer;
}

.ftLinkArea{padding-bottom:72px;}
.disinlineB ul{display:inline-block; vertical-align: top;}
.ftLinkList > li{
 display:inline-block;
 vertical-align: top;
 line-height: 2;
}
.ftLinkList > li:last-child{margin-right: 0;}
.ftlinkSection1::after,
.ftlinkSection2::after,
.ftlinkSection3::after{
 content:'';
 display: inline-block;
 width: 1px;
 height: 158px;
 vertical-align: top;
 background-color: rgba(112, 112, 112,.16);
}
.ftlinkSection1::after{margin:-36px 48px 0 90px;}
.ftlinkSection2::after{margin:-36px 32px 0 47px;}
.ftlinkSection3::after{margin:-36px 30px 0 50px;}
.ftlinkSection:last-child::after{display: none;}

.ftLinkList h3{font-size: 18px; padding-bottom:5px;}

.ftListItem{display:inline-block;}
.mr50{margin-right: 35px;}

.ftListItem a:hover{text-decoration: underline;}

.ftBtnList{
 /* display:flex; justify-content: center; */
 display: inline-block;
 width:100%;
}
.ftBtnList li{
 display: inline-block;
 max-width:344px;
 width: 100%; height: 100%;
 background-color: #fff;
 margin-right: 19px;
 vertical-align: middle;
}
.ftBtnList li:nth-child(3){margin-right: 0px;}

.ftBtnList a span{
 font-weight: bold;
 font-size: 14px;
}


body#popup{z-index: 50;}

/* ========= footer end ========= */

@media (min-width: 768px) and (max-width: 960px){
 #suntoryCommonHd, #suntoryCommonHd_in,
 #suntoryCommonHd_01, #suntoryCommonHd_02,
 #suntoryCommonFt_wrap{width:100% !important;}
}

@media only screen and (max-width: 767px){
 .onlySp{display:block !important;}
 .onlyPc{display:none !important;}
 .sectionWarp, .footerArea{width: 92.535%;}
 .hidden {height:100%; min-height:100%; overflow:hidden !important; touch-action:none;}
 .s01BtnArea a,.s02BtnArea a,.s03BtnArea a,.s04ItemImg a{transition: 0s;}
 header#header,footer#footer,
 #suntoryCommonFooter,#suntoryCommonHd { min-width:0 !important; width:100%; margin:auto;}

 /* ========= head start ========= */

 .headerLogo.fl{height: 70%; margin-top: 4vw;}
 .navMenuArea.fr{height: 100%; line-height: 1.7;}

 .btnName{
  font-size: 4.26666vw;
  text-transform: capitalize;
  color:#2D8FC1;
  margin-bottom:1.0666vw;
 }
 .menubar{
  display: block;
  width:4.8vw;
  height:1px;
  background-color: #2D8FC1;
  margin:auto;
 }
 .navMenuArea { margin-right: -3px;}
 .menuBtn{
  width: 11.2vw;
  height: 10vw;
  margin-top:.7vw;
  z-index: 10;
  display:flex !important;
  justify-content: center;
  align-items: center;
 }
 .normalBtn{width:100%; transition: .3s;}

 .normalBtn .btneq1{
  margin-bottom:1.6vw;
 }


 @keyframes testbtn1 {
  50%{opacity: 0;}
  100%{opacity: 0; display:none;}
 }
 @keyframes testbtn2 {
  0%{margin-top:0;}
  100%{margin-top:-5vw;}
 }
 @keyframes testbtn3 {
  50%{width:5.335vw; height:2px;}
  100%{
   width:5.335vw; height:2px;
   transform: rotate(45deg); margin-bottom:-2px;
  }
 }
 @keyframes testbtn4 {
  50%{width:5.335vw; height:2px}
  100%{
   width:5.335vw; height:2px;
   transform: rotate(-45deg);
  }
 }

 @keyframes testbtn3_1 {
  0%{
   width:4.8vw; height:1px;
   transform: rotate(45deg); margin-bottom:-2px;
  }
  100%{
   transform: rotate(0deg);
   width:4.8vw; height:1px;
   margin-bottom:5px;
  }
 }
 @keyframes testbtn4_1 {
  0%{
   width:4.8vw; height:1px;
   transform: rotate(-45deg);
  }
  100%{
   width:4.8vw; height:1px;
   transform: rotate(0deg);
  }
 }
 @keyframes testbtn2_1 {
  0%{margin-top:-5vw;}
  100%{margin-top:0vw;}
 }
 @keyframes testbtn1_1 {
  50%{ display:block;}
  100%{opacity:1;}
 }

 .headerLogo a {max-width: 48vw;}
 .headerArea{
  height: 13.334vw;
  position:relative;
  padding:0;
 }

 .headerArea nav{
  display: none;
  z-index: 5;
  transform: translateX(100%);
  transition: all 0.6s;
  width: 100%;
  height:100vh;
  position:absolute;
  left:4%;
  top:13.334vw;;
 }
 .headerArea nav.openMenu{
  transform: translateX(25%);
 }

 .navArea{
  visibility: hidden;
  z-index: 10;
  width:75%;
  height: 100vh;
  background-color: #DEFEFF;
  margin-bottom: 0;
  transition: .5s;
 }

 .openMenu .navArea{visibility: visible;}

 .openMenu.navBG{
  width: 100%; height: 100vh;
  position: absolute;
  right: 0;
  top: 10%;
  background: rgba(0,0,0,.03);
  transition: 1s;
  z-index: 1;
 }
 .contents.openMenu{
  filter: blur(4px);
  transition: 1s;
 }
 .openMenu{transition: .5s;}

 .navArea li{
  width:85%; margin:auto;
  display:block;
  padding:20px 0 21px;
  border-bottom: 1px solid rgba(15, 150, 184,.32);
  background: url(/wnb/common/img/menu_arrow.png) no-repeat center right;
  background-size:11px 17px;
 }
 .navArea li a{font-size: 4.8vw;}

 /* ========= footer start ========= */
 .ftBtnList{display:block; text-align: center;}
 .footerArea{padding:30px 0 50px;}
 .footerArea h2 {
  max-width: 278px;
  padding-bottom: 38.4px;
 }
 .ftlinkSection1::after, .ftlinkSection2::after, .ftlinkSection3::after{display: none;}

 .ftLinkList > li{
  display:block;
  border-top: 1px solid #99B3B9;
  border-bottom: 1px solid #99B3B9;
 }

 .ftLinkList > li:nth-child(1),
 .ftLinkList > li:nth-child(2),
 .ftLinkList > li:nth-child(3){border-bottom:none;}

 .ftLinkList h3{
  background: url(/wnb/common/img/open_arrow.png) no-repeat center right;
  background-size: 24px;
  padding: 12px 0;
 }
 .ftLinkList .listOpen h3{
  background: url(/wnb/common/img/close_arrow.png) no-repeat center right;
  background-size: 24px;
  padding: 12px 0;
 }

 .ftListItem{
  display:none;
  font-size:16px;
  line-height:2.81;
  padding: 0 0 20px 22px;
 }
 .mr50{margin-right: 0px; padding-bottom:0px;}
 .pt0{padding-top:0px;}

 /* .listOpen{display: block;} */

 .ftLinkArea {padding-bottom: 40px;}

 .ftBtnList li{max-width: 91.735vw;}
 .ftBtnList li:nth-child(1){margin-right: auto;}
 .ftBtnList li,
 .ftBtnList li:nth-child(3){margin:auto auto 20px;}
 .ftBtnList li a{margin:auto;}

 .disinlineB{display: block;}

 }