@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: 64.062%;
    margin-top: 30px;
  }
}
@media screen and (max-width: 767px) {
  .suntory_contents.col-2 {
    padding-bottom: 0;
  }
}
.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-3 .s_pc{
	position: relative;
}
.col-2-3-btn {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, -50%);
}
.col-2-3-btn img {
	width: 700px;
}
@media screen and (min-width: 768px) and ( max-width: 1164px) {
  .col-2-3-btn img {
    max-width: 500px;
  }
}
.col-2-3-btn img:hover {
	opacity: 0.8;
}
@media screen and (max-width: 767px) {
	.col-2-3 .s_sp{
		position: relative;
	}
	.col-2-3-btn {
		position: absolute;
		bottom: 0;
		width: 100%;
	}
	.col-2-3-btn img {
		width: 76.5%;
	}
}
.col-2-6 img {
  width: 1068px;
}
@media screen and (max-width: 767px) {
  .col-2-6 img {
    width: 85.333%;
    margin-top: 30px;
  }
}
.col-2-1 img {
  width: 640px;
}
@media screen and (max-width: 767px) {
  .col-2-1 img {
    width: 85.93%;
  }
}
.col-2-1 {
  position: relative;
}
@media screen and (max-width: 767px) {
  .col-2-1 {
    position: inherit;
  }
}
.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 {
    width: 85.333%;
    margin-top: 30px;
  }
}
.col-2-1 .col-2-1-pic {
  position: absolute;
  right: 110px;
  bottom: -40px;
}
@media screen and (max-width: 1164px) {
  .col-2-1 .col-2-1-pic {
    position: inherit;
    margin-top: 30px;
    right: 0;
    bottom: 0;
  }
}
.col-2-1 .col-2-1-pic img {
  width: 195px;
  height: auto;
}
.col-2-7 img {
  width: 715px;
}
@media screen and (max-width: 767px) {
	.col-2-7 img {
		width: 70.31%;
	}
}
.col-3-1 img {
  width: 517px;
}
@media screen and (max-width: 767px) {
  .col-3-1 img {
    width: 65.93%;
  }
}
.col-3-2 img {
  width: 896px;
}
@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: 65.62%;
  }
}
.col-3-3 img {
  width: 1003px;
}
@media screen and (min-width: 768px) and ( max-width: 1164px) {
  .col-3-3 img {
    width: 90%;
  }
}
@media screen and (max-width: 767px) {
  .col-3-3 img {
    width: 87.5%;
  }
}
.col-3-4 img {
  width: 806px;
}
@media screen and (max-width: 767px) {
  .col-3-4 img {
    width: 81.56%;
  }
}
.col-4-1 img {
  width: 642px;
}
@media screen and (max-width: 767px) {
	.col-4-1 img {
    width: 60.93%;
	}
}
/* ------ helper ------ */
.mxwL {
  width: 1300px;
}
@media screen and (max-width: 767px) {
  .mxwL {
    width: 100%;
  }
}
/* ------ モーダル ------ */
/*html.modalset {
  overflow: hidden;
}*/
.modal {
  display: none;
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
}
.modal-wrap {
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
}
.modal-wrap::-webkit-scrollbar {
  display: none;
}
.modal-wrap:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 100%;
}
.modal-bg {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(51, 51, 51, 0.8);
  width: 100%;
  height: 100%;
}
.modal-box {
  width: 100%;
  max-width: 960px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.modal-box .inner {
  padding: 0;
  text-align: left;
}
.modal-box .inner > :first-child {
  margin-top: 0;
}
.modalimgWrap {
	display: flex;
	justify-content: space-between;
}
.modalimgWrap img {
	width: 49%;
}
@media screen and (min-width: 768px) and ( max-width: 1164px) {
  .modal-box {
    width: 80%;
  }
}
@media screen and (max-width: 767px) {
	.modal-box {
		width: 80%;
	}
	.modalimgWrap img {
		width: 100%;
	}
	.modalimgWrap img:first-child {
		margin-bottom: 20px;
	}
	.modal-wrap {
		white-space: inherit;
	}
	.modalimgWrap {
		display: contents;
	}
}
.modal-close-btn {
	position: absolute;
	right: 0;
	top: -65px;
	cursor: pointer;
}
@media screen and (max-width: 767px) {
	.modal-close-btn {
		top: -45px;
	}
}
.modal-close-btn:hover {
	opacity: 0.8;
}
.modal-close {
  display: block;
  position: relative;
  width: 50px;
  height: 50px;
  border: 2px solid #333;
  border-radius: 50%;
  background: #fff;
}
@media screen and (max-width: 767px) {
	.modal-close {
		width: 30px;
		height: 30px;
	}
}
.modal-close::before, .modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 34px;
  background: #333;
}
@media screen and (max-width: 767px) {
	.modal-close::before, .modal-close::after {
		height: 22px;
	}
}
.modal-close::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
.modal-close::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}

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

/* ------ 動画追加202507 ------ */
.videoWrap {
	width: 85.38%;
	margin: 0 auto;
}
@media screen and (max-width: 767px) {
	.videoWrap {
		width: 100%;
	}
}
.video {
  position: relative;
  width:100%;
  height:0;
  padding-top: 56.25%;
}
.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}