@charset "utf-8";
.pc_none {
  display: none;
}
.sp_none {
  display: block;
}
#suntory_contents {
  min-width: 960px;
  font-family: YuGothic, "Yu Gothic", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 500;
  background: #fff;
  overflow-x: hidden;
}
#suntory_contents img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
#suntory_contents a {
  transition: .3s;
}
#mv {
  padding: 130px 0 120px;
  background: #000;
}
#mv h1 {
  position: relative;
  max-width: 1118px;
  margin: 0 auto;
}
#mv h1 img {
  margin-left: -32px;
}
#concept {
  background: #A0A5AA;
  background-image: url(../img/concept_bg.jpg);
  background-repeat: repeat;
  background-position: center top;
  padding: 80px 0 85px;
}
#concept_title {
  width: 240px;
  margin: 0 auto;
}
#concept_copy {
  width: 444px;
  margin: 52px auto 0;
}
#concept_image {
  width: 836px;
  margin: 52px auto 0;
}
#concept_image img {
  padding-left: 31px;
}
#products {
  background: #A0A5AA;
  background-image: url(../img/products_bg.jpg);
  background-repeat: repeat;
  background-position: center top;
  padding: 98px 0;
}
#products_title {
  width: 275px;
  margin: 0 auto;
}
#products_point {
  width: 960px;
  margin: 45px auto 0;
}
#products_black {
  width: 960px;
  margin: 68px auto 0;
}
#products_white {
  width: 960px;
  margin: 68px auto 0;
}
#products_notice {
  width: 790px;
  margin: 98px auto 0;
}
#campaign {
  background: #D2B307;
  background-image: url(../img/campaign_bg.jpg);
  background-repeat: repeat;
  background-position: center top;
  background-size: cover;
  padding: 98px 0 80px;
  margin-top: 15px;
}
#campaign_title {
  width: 260px;
  margin: 0 auto;
}
#campaign_list {
  margin: 68px auto 0;
  padding: 0;
  width: 800px;
  list-style: none;
}
#campaign_list li {
  display: block;
  margin-top: 68px;
}
#pageTop {
  width: 195px;
  margin: 68px auto 0;
}
#products #pageTop {
  margin-top: 100px;
}

.fadeIn {
  animation-name: fadeUpAnime1;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime1 {
  from {
    opacity: 0;
    transform: translateY(0px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeUp {
  animation-name: fadeUpAnime2;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime2 {
  from {
    opacity: 0;
    transform: translateY(200px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.slideIn {
  animation-name: fadeUpAnime3;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime3 {
  from {
    opacity: 0;
    transform: translateX(200px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger {
  opacity: 0;
}
@media screen and (min-width: 769px) {
  #suntory_contents a:hover {
    opacity: 0.7;
  }
}
@media screen and (max-width: 768px) {
  .pc_none {
    display: block;
  }
  .sp_none {
    display: none;
  }
  #suntory_contents {
    min-width: 100%;
  }
  #mv {
    padding: 0;
  }
  #mv h1 img {
    margin-left: 0;
  }
  #concept {
    background-image: url(../img/concept_bg_sp.jpg);
    padding: 16% 0;
    background-size: cover;
  }
  #concept_title {
    width: 46%;
  }
  #concept_copy {
    width: 70%;
    margin: 10% auto 0;
  }
  #concept_image {
    width: 88%;
    margin: 7.5% auto 0;
  }
  #concept_image img {
    padding-left: 0;
  }
  #products {
    background-image: url(../img/products_bg_sp.jpg);
    padding: 16% 0 0;
    background-size: cover;
  }
  #products_title {
    width: 52.4%;
  }
  #products_point {
    width: 54.1%;
    margin: 8% auto 0;
  }
  #products_point img {
    margin-left: -5%;
  }
  #products_pointList {
    width: 81.33333333333333%;
    list-style: none;
    margin: 7.3% auto 16%;
    padding: 0;
  }
  #products_pointList li {
    display: block;
    width: 100%;
    margin-bottom: 15%;
  }
  #products_black {
    width: 100%;
    margin: 0 auto;
  }
  #products_white {
    width: 100%;
    margin: 0 auto;
  }
  #products_notice {
    width: 100%;
    margin: 0 auto;
  }
  #campaign {
    background-image: url(../img/campaign_bg_sp.jpg);
    background-size: cover;
    padding: 16% 0;
    margin-top: 6%;
    overflow: hidden;
  }
  #campaign_title {
    width: 50.4%;
  }
  #campaign_list {
    margin: 0 auto;
    padding: 0;
    width: 81.33333333333333%;
    list-style: none;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
  }
  #campaign_list li {
    display: block;
    width: 100%;
    margin-top: 15%;
  }
  #pageTop {
    width: 37.33333333333333%;
    margin: 15% auto 0;
  }
  #products #pageTop {
    margin: 15% auto 0;
    padding-bottom: 20%;
}
}