.cont__container {
  box-sizing: content-box !important;
  max-width: 1164px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (max-width: 767px) {
  .cont__container {
    max-width: 89.3333333333vw;
    padding-left: 0;
    padding-right: 0;
  }
}

.cont .detail__btn, .cont .detail__btn-accordion, .cont .detail__movie-img, .cont .detail__graphic-img, .cont .detail__bnr, .cont .detail__modal-close-new, .cont .detail__modal-close-01, .cont .detail__modal-close-02, .link {
  color: inherit;
  transition: opacity 0.3s;
  cursor: pointer;
}
.cont .detail__btn:hover, .cont .detail__btn-accordion:hover, .cont .detail__movie-img:hover, .cont .detail__graphic-img:hover, .cont .detail__bnr:hover, .cont .detail__modal-close-new:hover, .cont .detail__modal-close-01:hover, .cont .detail__modal-close-02:hover, .link:hover {
  opacity: 0.7;
}

/* reset:start */
#suntory_contents {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 768px) {
  #suntory_contents {
    position: relative;
    min-width: 960px;
    overflow: hidden;
  }
}
#suntory_contents picture {
  display: block;
  max-width: 100%;
  height: auto;
}
#suntory_contents img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
#suntory_contents p {
  margin: 0;
}
#suntory_contents ul {
  list-style: none;
}
#suntory_contents a {
  text-decoration: none;
}
#suntory_contents button {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* common:start */
[v-cloak] {
  display: none;
}

@media screen and (max-width: 767px) {
  .pcOnly {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .spOnly {
    display: none !important;
  }
}

/* .btn_wrap */
.btn_wrap {
  width: 82.8804347826%;
  height: 50px;
  margin: 4.6195652174% auto 0;
  background: #fff5cb;
  background: linear-gradient(to bottom, #fff5cb 0%, #d9b77c 57%, #b07324 100%);
  border-top: 1px #af5b11 solid;
  border-bottom: 1px #af5b11 solid;
  position: relative;
}
@media screen and (max-width: 767px) {
  .btn_wrap {
    width: 82.0895522388%;
    height: 10.6666666667vw;
    margin-top: 5.223880597%;
  }
}

.btn_wrap:before,
.btn_wrap:after {
  content: "";
  display: block;
  width: 1px;
  height: 50px;
  position: absolute;
  top: 0;
  background: #ae590d;
  background: linear-gradient(to bottom, #ae590d 0%, #dbb488 33%, #fffce9 50%, #dbb488 67%, #ae590d 100%);
}
@media screen and (max-width: 767px) {
  .btn_wrap:before,
  .btn_wrap:after {
    height: 10.6666666667vw;
  }
}

.btn_wrap:before {
  left: 0;
}

.btn_wrap:after {
  right: 0;
}

.btn_wrap:hover {
  filter: alpha(opacity=60);
  opacity: 0.6;
}

.btn_wrap .btn_addcart {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 100%;
  height: 48px;
  background: url(https://gigaplus.makeshop.jp/ienoba/original_page/campaign/mizunara2017/purchase/btn_01.png) no-repeat center center;
  text-indent: -9999px;
  cursor: pointer;
  border: 0;
  outline: none;
}
@media screen and (max-width: 767px) {
  .btn_wrap .btn_addcart {
    height: 10.4vw;
  }
}

/* common:end */
/* kv:start */
.cont .kv__ttl {
  max-width: 100%;
  margin: 0 auto;
}

/* kv:end */
.cont .detail__movie-box--large, .cont .detail__movie-box {
  display: flex;
  flex-direction: column;
  margin-top: 3.9325842697%;
}
@media screen and (max-width: 767px) {
  .cont .detail__movie-box--large, .cont .detail__movie-box {
    display: block;
    margin-top: 5.9701492537%;
  }
}
@media screen and (max-width: 767px) {
  .cont .detail__movie-box--large:last-child, .cont .detail__movie-box:last-child {
    padding-bottom: 22.3880597015%;
  }
}

.cont .detail__movie-txt--new, .cont .detail__movie-txt {
  font-size: 16px;
  line-height: 1.625;
  letter-spacing: 0.06em;
}
@media screen and (max-width: 767px) {
  .cont .detail__movie-txt--new, .cont .detail__movie-txt {
    font-size: 3.7333333333vw;
    line-height: 1.6071428571;
    letter-spacing: 0.08em;
  }
}

.cont .detail__modal-content-02, .cont .detail__modal-content-01 {
  background: linear-gradient(130deg, #D7CCE6, #C8D2E3, #CCECCC, #FFF1AB, #FFA9A9);
  background-size: 100% 1000%;
  animation: gradientAnimation 20s linear infinite;
  max-width: 95%;
  position: relative;
  z-index: 12;
}
@media screen and (max-width: 767px) {
  .cont .detail__modal-content-02, .cont .detail__modal-content-01 {
    max-width: 100%;
  }
}

.cont .detail__notice-txt, .cont .detail__notice-attention, .cont .detail__notice-recycle {
  font-size: 12px;
  line-height: 1.6666666667;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 767px) {
  .cont .detail__notice-txt, .cont .detail__notice-attention, .cont .detail__notice-recycle {
    font-size: 3.2vw;
    line-height: 1.5833333333;
  }
}

.cont .detail__modal-new, .cont .detail__movie-new--bg {
  width: 12.3595505618%;
  margin: 2.2471910112% auto 0;
}
@media screen and (max-width: 767px) {
  .cont .detail__modal-new, .cont .detail__movie-new--bg {
    width: 100%;
    margin-top: 5.9701492537%;
  }
}

/* detail:start */
.cont .detail__container {
  text-align: center;
  padding: 100px 0 115px;
  background: linear-gradient(130deg, #D7CCE6, #C8D2E3, #CCECCC, #FFF1AB, #FFA9A9);
  background-size: 100% 500%;
  animation: gradientAnimation 40s linear infinite;
}
@media screen and (max-width: 767px) {
  .cont .detail__container {
    padding: 13.3333333333% 0 12%;
  }
}
.cont .detail__content-01 {
  max-width: 890px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .cont .detail__content-01 {
    max-width: 100%;
  }
}
.cont .detail__content-02 {
  max-width: 100%;
}
.cont .detail__btns {
  display: flex;
  justify-content: center;
}
.cont .detail__btn {
  width: 34.3642611684%;
  border-radius: 35px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.24);
}
@media screen and (max-width: 767px) {
  .cont .detail__btn {
    width: 47.0149253731%;
    border-radius: 5.3333333333vw;
    box-shadow: 0 0.2666666667vw 1.6vw rgba(0, 0, 0, 0.24);
  }
}
.cont .detail__btn:first-of-type {
  margin-right: 40px;
}
@media screen and (max-width: 767px) {
  .cont .detail__btn:first-of-type {
    margin-right: 5.3333333333%;
  }
}
.cont .detail__btn-location {
  position: relative;
}
.cont .detail__btn-accordion {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
}
.cont .detail__btn-style {
  width: 89.3333333333vw;
  border-radius: 5.3333333333vw;
  background-color: #000000 !important;
  box-shadow: 0 0.2666666667vw 1.6vw rgba(0, 0, 0, 0.24) !important;
}
.cont .detail__btn-style::before {
  position: absolute;
  content: "";
  z-index: 1;
  top: 50%;
  right: 5.3333333333vw;
  transform: translateY(-50%);
  width: 5.3333333333vw;
  height: 5.3333333333vw;
  background-image: url(../img/sp/detail_btn_icon.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.cont .detail__txt-01 {
  padding-top: 13.4831460674%;
  padding-bottom: 1.1235955056%;
}
@media screen and (max-width: 767px) {
  .cont .detail__txt-01 {
    padding-top: 17.9104477612%;
    padding-bottom: 1.4925373134%;
  }
}
.cont .detail__ttl {
  margin: 0;
}
.cont .detail__movie {
  padding-top: 12.3595505618%;
}
@media screen and (max-width: 767px) {
  .cont .detail__movie {
    padding-top: 16.4179104478%;
    padding-bottom: 1.4925373134%;
  }
}
.cont .detail__movie-head-box {
  width: 100%;
  margin-top: 6.1797752809%;
}
@media screen and (max-width: 767px) {
  .cont .detail__movie-head-box {
    margin-top: 8.9552238806%;
  }
}
.cont .detail__movie-head-box:not(:first-child) {
  margin-top: 3.3707865169%;
}
@media screen and (max-width: 767px) {
  .cont .detail__movie-head-box:not(:first-child) {
    margin-top: 5.9701492537%;
  }
}
@media screen and (max-width: 767px) {
  .cont .detail__movie-head-box:not(:nth-child(-n+2)) {
    opacity: 0;
    pointer-events: none;
  }
}
.cont .detail__movie-boxs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .cont .detail__movie-boxs {
    display: block;
  }
}
.cont .detail__movie-box {
  height: 303px;
}
@media screen and (max-width: 767px) {
  .cont .detail__movie-box {
    height: auto;
  }
}
.cont .detail__movie-box--large {
  height: 329px;
}
@media screen and (max-width: 767px) {
  .cont .detail__movie-box--large {
    height: auto;
  }
}
.cont .detail__movie-button {
  padding: 0;
}
.cont .detail__movie-new {
  width: 25.8823529412%;
  margin: 4.7058823529% auto 0;
}
@media screen and (max-width: 767px) {
  .cont .detail__movie-new {
    width: 100%;
    margin-top: 5.9701492537%;
  }
}
.cont .detail__movie-txt {
  flex: 1;
  margin-top: 2.8235294118% !important;
}
@media screen and (max-width: 767px) {
  .cont .detail__movie-txt {
    margin-top: 4.4776119403% !important;
  }
}
@media screen and (max-width: 767px) {
  .cont .detail__movie-txt--new {
    margin-top: 0.7462686567% !important;
  }
}
@media screen and (max-width: 767px) {
  .cont .detail__movie-accordion {
    position: relative;
    max-height: 198.6666666667vw;
  }
  .cont .detail__movie-accordion.show .detail__btn-accordion .detail__btn-style::before {
    transform: translateY(-50%) rotate(180deg);
  }
  .cont .detail__movie-accordion.show .detail__movie-head-box:not(:first-child) {
    opacity: 1;
    pointer-events: auto;
  }
}
.cont .detail__graphic {
  padding-top: 12.9213483146%;
}
@media screen and (max-width: 767px) {
  .cont .detail__graphic {
    padding-top: 16.4179104478%;
    padding-bottom: 1.4925373134%;
  }
}
.cont .detail__graphic-photo {
  margin-top: 6.7415730337%;
}
@media screen and (max-width: 767px) {
  .cont .detail__graphic-photo {
    margin-top: 8.9552238806%;
  }
}
.cont .detail__graphic-photo:not(:first-of-type) {
  margin-top: 4.4943820225%;
}
@media screen and (max-width: 767px) {
  .cont .detail__graphic-photo:not(:first-of-type) {
    margin-top: 5.9701492537%;
  }
}
@media screen and (max-width: 767px) {
  .cont .detail__graphic-photo:not(:nth-child(-n+2)) {
    opacity: 0;
    pointer-events: none;
  }
}
.cont .detail__graphic-boxs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 4.4943820225%;
  padding: 0 2.808988764%;
}
@media screen and (max-width: 767px) {
  .cont .detail__graphic-boxs {
    margin-top: 5.9701492537%;
    padding: 0;
  }
}
@media screen and (max-width: 767px) {
  .cont .detail__graphic-box {
    width: 47.0149253731%;
  }
}
.cont .detail__graphic-box:not(:nth-child(-n+4)) {
  margin-top: 4.2857142857%;
}
@media screen and (max-width: 767px) {
  .cont .detail__graphic-box:not(:nth-child(-n+2)) {
    margin-top: 5.0746268657%;
  }
}
@media screen and (max-width: 767px) {
  .cont .detail__graphic-box:nth-child(11), .cont .detail__graphic-box:nth-child(12) {
    padding-bottom: 23.8805970149%;
  }
}
.cont .detail__graphic-txt {
  margin-top: 10.2564102564%;
}
@media screen and (max-width: 767px) {
  .cont .detail__graphic-txt {
    margin-top: 6.3492063492%;
    line-height: 1;
  }
}
@media screen and (max-width: 767px) {
  .cont .detail__graphic-accordion {
    position: relative;
    max-height: 161.3333333333vw;
  }
  .cont .detail__graphic-accordion.show .detail__btn-accordion .detail__btn-style::before {
    transform: translateY(-50%) rotate(180deg);
  }
  .cont .detail__graphic-accordion.show .detail__graphic-photo:not(:nth-child(-n+2)) {
    opacity: 1;
    pointer-events: auto;
  }
}
.cont .detail__bnr {
  display: inline-block;
  width: 400px;
  margin: 120px auto 0;
}
@media screen and (max-width: 767px) {
  .cont .detail__bnr {
    width: 82.0895522388%;
    margin-top: 16.4179104478%;
  }
}
.cont .detail__notice {
  text-align: left;
  margin-top: 10.3092783505%;
}
@media screen and (max-width: 767px) {
  .cont .detail__notice {
    margin-top: 17.9104477612%;
  }
}
.cont .detail__notice-ttl {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 0.4295532646% !important;
  padding: 0.2577319588% 0.1718213058%;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.08em;
  border: 1px solid #000000;
}
@media screen and (max-width: 767px) {
  .cont .detail__notice-ttl {
    margin-bottom: 1.0447761194% !important;
    padding: 0.2985074627%;
    font-size: 3.7333333333vw;
    border-width: 0.2666666667vw;
  }
}
.cont .detail__notice-indication {
  margin-right: 1.0309278351%;
}
@media screen and (max-width: 767px) {
  .cont .detail__notice-indication {
    margin-right: 0;
  }
}
.cont .detail__notice-img {
  display: inline-block !important;
  width: 130px;
  height: 12px !important;
}
@media screen and (max-width: 767px) {
  .cont .detail__notice-img {
    width: 35.223880597%;
    height: 3.2835820896% !important;
  }
}
.cont .detail__notice-space {
  margin-top: 3.8461538462%;
}
@media screen and (max-width: 767px) {
  .cont .detail__notice-space {
    margin-top: 4.2372881356%;
  }
}
.cont .detail__notice-attention {
  margin-bottom: 0.4295532646% !important;
  text-indent: -3.2em;
  padding-left: 3.2em;
}
@media screen and (max-width: 767px) {
  .cont .detail__notice-attention {
    margin-bottom: 2.2388059701% !important;
  }
}
.cont .detail__notice-tags {
  margin-bottom: 1.7182130584% !important;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 767px) {
  .cont .detail__notice-tags {
    margin-bottom: 5.9701492537% !important;
    font-size: 3.2vw;
  }
}
.cont .detail__notice-tag {
  display: inline-block;
  margin-right: 0.8591065292%;
  padding: 0.1718213058% 0.2577319588%;
  border: 1px solid #000000;
}
@media screen and (max-width: 767px) {
  .cont .detail__notice-tag {
    margin-right: 0;
    padding: 0.5970149254% 0.7462686567%;
    border-width: 0.2666666667vw;
  }
}
.cont .detail__notice-tag:not(:last-child) {
  margin-bottom: 0.8591065292%;
}
@media screen and (max-width: 767px) {
  .cont .detail__notice-tag:not(:last-child) {
    margin-bottom: 2.6865671642%;
  }
}
.cont .detail__modal {
  display: none;
  position: fixed;
  z-index: 1;
  overflow: auto;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cont .detail__modal.show {
  display: block;
  opacity: 1;
  z-index: 9999;
}
.cont .detail__modal-area {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cont .detail__modal-content-01 {
  width: 890px;
  padding: 60px 137px;
}
@media screen and (max-width: 1204px) {
  .cont .detail__modal-content-01 {
    width: 73.9202657807vw;
    padding: 4.9833887043vw 11.3787375415vw;
  }
}
@media screen and (max-width: 767px) {
  .cont .detail__modal-content-01 {
    width: 89.3333333333vw;
    padding: 8vw 5.3333333333vw 6.6666666667vw;
  }
}
.cont .detail__modal-content-02 {
  width: 300px;
  padding: 60px 432px 40px;
}
@media screen and (max-width: 1204px) {
  .cont .detail__modal-content-02 {
    width: 24.9169435216vw;
    padding: 4.9833887043vw 35.8803986711vw;
  }
}
@media screen and (max-width: 767px) {
  .cont .detail__modal-content-02 {
    overflow: auto;
    width: 78.6666666667vw;
    padding: 8vw 10.6666666667vw 4vw;
  }
}
.cont .detail__modal-movie {
  width: 100%;
  max-height: 100%;
  height: 501px;
  vertical-align: top;
  border: none;
}
@media screen and (max-width: 1204px) {
  .cont .detail__modal-movie {
    height: 41.6112956811vw;
  }
}
@media screen and (max-width: 767px) {
  .cont .detail__modal-movie {
    height: 50.2666666667vw;
  }
}
.cont .detail__modal-txt, .cont .detail__modal-txt--new {
  margin-top: 13px !important;
  font-size: 16px;
  line-height: 1.625;
  letter-spacing: 0.06em;
}
@media screen and (max-width: 767px) {
  .cont .detail__modal-txt, .cont .detail__modal-txt--new {
    margin-top: 4vw !important;
    font-size: 3.7333333333vw;
    line-height: 1.5714285714;
    letter-spacing: 0.08em;
  }
}
.cont .detail__modal-txt--new {
  margin-top: 0 !important;
  margin-bottom: 5px !important;
}
@media screen and (max-width: 767px) {
  .cont .detail__modal-txt--new {
    margin-bottom: 0 !important;
  }
}
@media screen and (max-width: 767px) {
  .cont .detail__modal-new {
    margin-bottom: 1.3333333333vw;
  }
}
.cont .detail__modal-name {
  margin-top: 20px;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .cont .detail__modal-name {
    margin-top: 2.6666666667vw;
  }
}
.cont .detail__modal-close-new {
  width: 28px;
  margin: 15px auto 0;
  padding: 0;
}
@media screen and (max-width: 767px) {
  .cont .detail__modal-close-new {
    margin-top: 4vw;
    width: 4.9333333333vw;
  }
}
.cont .detail__modal-close-01 {
  width: 28px;
  margin: 15px auto 0;
  padding: 0;
}
@media screen and (max-width: 767px) {
  .cont .detail__modal-close-01 {
    margin-top: 4.8vw;
    width: 4.9333333333vw;
  }
}
.cont .detail__modal-close-02 {
  width: 28px;
  margin: 38px auto 0;
  padding: 0;
}
@media screen and (max-width: 767px) {
  .cont .detail__modal-close-02 {
    margin-top: 4.8vw;
    width: 4.9333333333vw;
  }
}
.cont .detail__modal-bg {
  position: absolute;
  z-index: 11;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
@keyframes gradientAnimation {
  0% {
    background-position: 50% 100%;
  }
  50% {
    background-position: 50% 0%;
  }
  100% {
    background-position: 50% 100%;
  }
}

/* detail:end */