@charset "utf-8";
/* CSS Document */

/* ------ 下層ページ ------ 
========================================================================== */
.mainWrap {
  max-width: 1300px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .mainWrap {
    max-width: 85.333%;
  }
}
/* ------ subnav ------ */
.subnav.subpage {
  margin-top: 100px;
}
@media screen and (max-width: 767px) {
  .subnav {
    width: 320px;
    margin: 0 auto;
  }
  .subnav ul {
    display: contents;
  }
  .subnav ul li {
    margin-left: 0;
    margin-bottom: 20px;
  }
  .subnav img {
    width: 100%;
    max-width: 320px;
  }
}
/* ------ f_inner ------ */
.f_inner {
  padding-bottom: 100px;
}
@media screen and (max-width: 767px) {
  .f_inner {
    padding-bottom: 0;
  }
}
.f_inner.subWrap {
  background: url("../img/bg_body_pc.png") repeat-y;
  max-width: 1300px;
  background-size: contain;
  margin-top: -5px;
}
@media screen and (min-width: 768px) and ( max-width: 1164px) {
  .f_inner.subWrap {
    width: 90%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .f_inner.subWrap {
    background: url("../img/bg_body_sp.png") repeat-y;
    width: 100%;
    background-size: contain;
    margin-top: -5px;
  }
}
.bg_top {
  background: url("../img/bg_top_pc.png") no-repeat;
  width: 1300px;
  height: 210px;
  background-size: contain;
  position: relative;
}
@media screen and (min-width: 768px) and ( max-width: 1164px) {
  .bg_top {
    width: 90%;
    height: auto;
    padding-top: 14.5%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .bg_top {
    background: url("../img/bg_top_sp.png") no-repeat;
    width: 100%;
    height: inherit;
    padding-top: 30.577%;
    background-size: contain;
  }
}
.bg_bottom {
  background: url("../img/bg_bottom_pc.png") no-repeat;
  max-width: 1300px;
  height: 75.5px;
  background-size: contain;
}
@media screen and (min-width: 768px) and ( max-width: 1164px) {
  .bg_bottom {
    width: 90%;
    height: auto;
    padding-top: 14.5%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .bg_bottom {
    background: url("../img/bg_bottom_sp.png") no-repeat;
    max-width: 100%;
    height: inherit;
    padding-top: 16.6%;
    background-size: contain;
  }
}
/* ------ col ------ */
.imgcol {
  margin-top: 120px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .imgcol {
    margin-top: 30px;
  }
}
.note {
  text-align: left;
  width: 85%;
  margin: 30px auto 0;
  text-indent: -1em;
  padding-left: 1em;
}
@media screen and (max-width: 767px) {
  .note {
    font-size: 0.8em;
  }
  .note ul {
    margin: 0;
    padding: 0;
  }
}
/* ------ col-2 ------ */
.ttl-01 img {
  width: 712px;
  margin-top: 70px;
}
@media screen and (min-width: 768px) and ( max-width: 1164px) {
  .ttl-01 img {
    width: 90%;
  }
}
@media screen and (max-width: 767px) {
  .ttl-01 img {
    width: 82.5%;
    margin-top: 30px;
  }
}
@media screen and (max-width: 767px) {
  .suntory_contents.col-2 {
    padding-bottom: 0;
  }
}
.col-2-1 img {
  width: 640px;
}
@media screen and (max-width: 767px) {
  .col-2-1 img {
    width: 85.93%;
  }
}
.col-2-2 img,
.col-2-3 img,
.col-2-4 img {
  width: 1000px;
}
@media screen and (min-width: 768px) and ( max-width: 1164px) {
  .col-2-2 img,
  .col-2-3 img,
  .col-2-4 img {
    width: 90%;
  }
}
@media screen and (max-width: 767px) {
  .col-2-2 img,
  .col-2-3 img,
  .col-2-4 img {
    width: 87.5%;
  }
}
.col-2-4 {
  position: relative;
}
.col-2-4-pic {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  width: 800px;
}
@media screen and (min-width: 768px) and ( max-width: 1164px) {
  .col-2-4-pic {
    width: 70%;
  }
}
@media screen and (max-width: 767px) {
  .col-2-4-pic {
    display: none;
  }
}
.col-2-4-pic iframe {
  width: 360px;
  height: 205px;
}
@media screen and (min-width: 768px) and ( max-width: 1164px) {
  .col-2-4-pic iframe {
    width: 45%;
    height: calc(100vw * 0.162);
  }
}
@media screen and (max-width: 767px) {
  .col-2-4-pic-sp01,
  .col-2-4-pic-sp02 {
    display: flex;
    justify-content: center;
  }
  .col-2-4-pic-sp01 iframe,
  .col-2-4-pic-sp02 iframe {
    position: absolute;
    width: 75%;
    height: 13%;
    bottom: calc(100vw * 0.63);
  }
  .col-2-4-pic-sp02 iframe {
    position: absolute;
    width: 75%;
    height: 13%;
    bottom: calc(100vw * 0.17);
  }
}
@media screen and (min-width: 767px) {
  .col-2-4-pic-sp01,
  .col-2-4-pic-sp02 {
    display: none;
  }
}
.col-2-5 img {
  width: 840px;
}
@media screen and (min-width: 768px) and ( max-width: 1164px) {
  .col-2-5 img {
    width: 90%;
  }
}
@media screen and (max-width: 767px) {
  .col-2-5 img {
    width: 87.5%;
    margin-top: 30px;
  }
}
.col-2-6 img {
  width: 791px;
}
@media screen and (min-width: 768px) and ( max-width: 1164px) {
  .col-2-6 img {
    width: 90%;
  }
}
@media screen and (max-width: 767px) {
  .col-2-6 img {
    width: 66.56%;
    margin-top: 30px;
  }
}
/* ------ helper ------ */
.mxwL {
  width: 1300px;
}
@media screen and (max-width: 767px) {
  .mxwL {
    width: 100%;
  }
}

@media screen and (min-width: 768px) and ( max-width: 1164px) {
		.imgwrap-80,
		.imgwrap-70 {
		width: 90%!important;
	}
}