@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;
}
.col-2-2 .note {
	text-align: center;
}
.col-3-4 .note {
  width: 700px;
}
@media screen and (max-width: 767px) {
  .note {
    font-size: 0.8em;
  }
  .note ul {
    margin: 0;
    padding: 0;
  }
  .col-3-4 .note {
    width: 85%;
  }

	.col-2-2 .note {
		text-align: left;
	}
}
/* ------ 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: 65%;
    margin-top: 30px;
  }
}
@media screen and (max-width: 767px) {
  .suntory_contents.col-2 {
    padding-bottom: 0;
  }
}
.col-2-1 img {
  width: 867px;
}
@media screen and (min-width: 768px) and ( max-width: 1164px) {
  .col-2-1 img {
    width: 90%;
  }
}
@media screen and (max-width: 767px) {
  .col-2-1 img {
    width: 76.562%;
  }
}
.col-2-2 img,
.col-2-3 img {
  width: 1000px;
}
@media screen and (min-width: 768px) and ( max-width: 1164px) {
  .col-2-2 img,
  .col-2-3 img {
    width: 90%;
  }
}
@media screen and (max-width: 767px) {
  .col-2-2 img {
    width: 92.812%;
  }
}
@media screen and (max-width: 767px) {
  .col-2-3 img {
    width: 86.562%;
  }
}
.col-2-4 img {
  width: 683px;
}
@media screen and (max-width: 767px) {
  .col-2-4 {
    margin-bottom: 60px;
  }
}
.col-2-5 img {
  width: 1068px;
}
@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,
  .col-2-4 img {
    width: 85.333%;
    margin-top: 30px;
  }
  .col-2-6 {
    width: 18.75%;
    margin:  30px auto 0;
  }
}
.col-2-7 img {
  width: 106px;
}
@media screen and (max-width: 767px) {
	.col-2-7 img {
		width: 15.87%;
	}
}
.col-2-8 img {
  width: 278px;
}
@media screen and (max-width: 767px) {
	.col-2-8 img {
		width: 43.75%;
	}
}
/* ------ col-3 ------ */
.col-3-1 img {
  width: 504px;
}
@media screen and (max-width: 767px) {
  .col-3-1 img {
    width: 62.812%;
  }
}
.col-3-2 img {
  width: 1000px;
}
@media screen and (min-width: 768px) and ( max-width: 1164px) {
  .col-3-2 img {
    width: 90%;
  }
}
@media screen and (max-width: 767px) {
  .col-3-2 img {
    width: 57.187%;
  }
}
.col-3-3 img {
  width: 600px;
}
@media screen and (max-width: 767px) {
  .col-3-3 img {
    width: 87.5%;
  }
}
.col-3-3 img:hover {
  opacity: 0.8;
}
.col-3-4 img {
  width: 730px;
}
@media screen and (max-width: 767px) {
  .col-3-4 img {
    width: 69.375%;
  }
}
.col-3-5 img {
  width: 728px;
}
@media screen and (max-width: 767px) {
  .col-3-5 img {
    width: 56.25%;
  }
}
/* ------ col-4 ------ */
.col-4-1 img {
  width: 983px;
}
@media screen and (min-width: 768px) and ( max-width: 1164px) {
  .col-4-1 img {
    width: 90%;
  }
}
@media screen and (max-width: 767px) {
  .col-4-1 .no02-01 img {
    width: 51.25%;
  }
  .col-4-1 .no02-02 {
    text-align: right;
    margin-right: 3px;
  }
  .col-4-1 .no02-02 img {
    width: 94.375%;
    margin-top: 20px;
  }
}
/* ------ 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;
	}
}