@charset "utf-8";
.pc_none {
  display: none;
}
.sp_none {
  display: block;
}
@-webkit-keyframes imageBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }
  to {
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
@keyframes imageBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }
  to {
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
body {
  min-width: fit-content;
}
#suntory_contents {
  position: relative;
  max-width: 2500px;
  margin: 0 auto;
  background-image: url("../img/main_bg.jpg");
  background-size: 2500px;
  background-repeat: repeat;
  overflow: hidden;
}
#suntory_contents img {
  vertical-align: top;
}
#suntory_contentsInner {
  background-image: url("../img/main_bg2.png");
  background-size: 2138px;
  background-repeat: no-repeat;
  background-position: center 888px;
}
#mv {
  position: relative;
  max-width: 2500px;
  height: 990px;
  margin: 0 auto;
}
#mv::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 990px;
  background-image: url("../img/main_mv_bg.png");
  background-size: 2500px;
  background-repeat: no-repeat;
  background-position: center top;
  top: 0;
  opacity: 0;
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  -ms-animation-delay: 0.5s;
}
#mv.js-blurSet::after {
  -webkit-animation-name: imageBlur;
  animation-name: imageBlur;
  opacity: 1;
  transition: 7s;
}
#mvInner {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  z-index: 1;
}
#mvInner h1 {
  position: absolute;
  width: 469px;
  height: 205px;
  top: 184px;
  left: 17px;
  margin: 0;
  padding: 0;
}
#mvInner h1 img {
  width: 469px;
  height: 205px;
}
#mvTitle {
  position: relative;
  width: 943px;
  height: 505px;
  padding: 37px 0 0 17px;
}
#mvImage {
  position: absolute;
  width: 518px;
  top: 32px;
  right: 0;
}
#mvImage img {
  width: 100%;
}
#mvInner h2 {
  width: 553px;
  margin: 170px auto 0;
}
#point {
  position: relative;
  width: 960px;
  margin: 75px auto 0;
}
#point h2 {
  position: absolute;
  width: 243px;
  top: 36px;
  left: 500px;
}
#point h2 img {
  position: relative;
  z-index: 1;
}
#point h2::after {
  position: absolute;
  content: '';
  width: 487px;
  height: 91px;
  background-image: url("../img/main_point_title_bg.png");
  background-size: 487px;
  background-repeat: no-repeat;
  background-position: center top;
  top: -28px;
  left: -96px;
  opacity: 0;
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
#point h2.js-blurSet::after {
  -webkit-animation-name: imageBlur;
  animation-name: imageBlur;
  opacity: 1;
  transition: 7s;
  transform: scale(1.1);
}
#point ul {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 970px;
}
#point li {
  margin: 0;
  padding: 0;
}
#point01 .pointTitle {
  position: absolute;
  width: 167px;
  top: 165px;
  left: 564px;
}
#point01 .pointTitle::before {
  position: absolute;
  content: '';
  width: 68px;
  height: 85px;
  background-image: url("../img/main_point_icon01.png");
  background-size: 68px;
  background-repeat: no-repeat;
  background-position: center top;
  top: -32px;
  left: -80px;
}
#point01 .pointImage {
  position: absolute;
  width: 350px;
  top: 0;
  left: 112px;
}
#point01 .pointImage img {
  position: relative;
  z-index: 1;
}
#point01 .pointImage::after {
  position: absolute;
  content: '';
  width: 416px;
  height: 227px;
  background-image: url("../img/main_point_image01_bg.png");
  background-size: 416px;
  background-repeat: no-repeat;
  background-position: center top;
  top: 92px;
  left: -71px;
  opacity: 0;
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
#point01 .pointImage.js-blurSet::after {
  -webkit-animation-name: imageBlur;
  animation-name: imageBlur;
  opacity: 1;
  transition: 7s;
  transform: scale(1.1);
}
#point02 .pointTitle {
  position: absolute;
  width: 235px;
  top: 449px;
  left: 212px;
}
#point02 .pointTitle::before {
  position: absolute;
  content: '';
  width: 44px;
  height: 104px;
  background-image: url("../img/main_point_icon02.png");
  background-size: 44px;
  background-repeat: no-repeat;
  background-position: center top;
  top: -46px;
  left: -57px;
}
#point02 .pointImage {
  position: absolute;
  width: 347px;
  top: 284px;
  left: 479px;
}
#point02 .pointImage img {
  position: relative;
  z-index: 1;
}
#point02 .pointImage::after {
  position: absolute;
  content: '';
  width: 373px;
  height: 203px;
  background-image: url("../img/main_point_image02_bg.png");
  background-size: 373px;
  background-repeat: no-repeat;
  background-position: center top;
  top: 92px;
  left: 83px;
  opacity: 0;
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 1s;
  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  -o-animation-delay: 1s;
  -ms-animation-delay: 1s;
}
#point02 .pointImage.js-blurSet::after {
  -webkit-animation-name: imageBlur;
  animation-name: imageBlur;
  opacity: 1;
  transition: 7s;
  transform: scale(1.1);
}
#point03 .pointTitle {
  position: absolute;
  width: 248px;
  top: 756px;
  left: 583px;
}
#point03 .pointTitle::before {
  position: absolute;
  content: '';
  width: 110px;
  height: 100px;
  background-image: url("../img/main_point_icon03.png");
  background-size: 110px;
  background-repeat: no-repeat;
  background-position: center top;
  top: -38px;
  left: -125px;
}
#point03 .pointImage {
  position: absolute;
  width: 373px;
  top: 578px;
  left: 71px;
}
#point03 .pointImage img {
  position: relative;
  z-index: 1;
}
#point03 .pointImage::after {
  position: absolute;
  content: '';
  width: 380px;
  height: 347px;
  background-image: url("../img/main_point_image03_bg.png");
  background-size: 380px;
  background-repeat: no-repeat;
  background-position: center top;
  top: 31px;
  left: -30px;
  opacity: 0;
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 1s;
  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  -o-animation-delay: 1s;
  -ms-animation-delay: 1s;
}
#point03 .pointImage.js-blurSet::after {
  -webkit-animation-name: imageBlur;
  animation-name: imageBlur;
  opacity: 1;
  transition: 7s;
  transform: scale(1.1);
}
#point_notice {
  width: 704px;
  margin: 0 auto;
}
#point_notice p {
  margin: 0;
  padding: 0 0 13px 0;
  text-align: right;
  line-height: 0;
}
#point_notice p img {
  width: 91px;
}
#point_text {
  width: 704px;
  height: 121px;
  margin: 0 auto;
  background-image: url("../img/main_point_frame.png");
  background-size: 704px;
  background-repeat: no-repeat;
  background-position: center top;
}
#point_text p {
  width: 554px;
  margin: 0;
  padding: 32px 0 0 73px;
}
#meal {
  position: relative;
  width: 100%;
  height: 728px;
  margin: 40px auto 0;
}
#meal::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 804px;
  background-image: url("../img/main_meal_bg.png");
  background-size: 2500px;
  background-repeat: no-repeat;
  background-position: center top;
  top: 0;
  opacity: 0;
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  -ms-animation-delay: 0.5s;
}
#meal.js-blurSet::after {
  -webkit-animation-name: imageBlur;
  animation-name: imageBlur;
  opacity: 1;
  transition: 7s;
}
#mealInner {
  position: relative;
  width: 960px;
  margin: 0 auto;
  padding-top: 183px;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  z-index: 1;
}
#mealImage1 {
  width: 424px;
}
#mealText {
  position: relative;
  width: 536px;
  padding-left: 33px;
}
#mealText h2 {
  width: 420px;
  margin: 0;
  padding: 0;
}
#mealText p {
  width: 349px;
  margin: 20px 0 0;
  padding: 0;
}
#mealImage2 {
  position: absolute;
  width: 163px;
  top: 14px;
  right: 23px;
}
#lineUp {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}
#lineUp h2 {
  width: 218px;
  margin: 0 auto;
  padding: 0;
}
#lineUp ul {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
  align-content: flex-end;
}
#product01 {
  position: relative;
  width: 210px;
  margin-left: 173px;
}
#product01::after {
  position: absolute;
  content: '';
  width: 370px;
  height: 234px;
  background-image: url("../img/main_lineUp_bg01.png");
  background-size: 370px;
  background-repeat: no-repeat;
  top: -15px;
  left: -123px;
}
.productImage {
  position: relative;
  margin: 0 auto;
  z-index: 1;
}
#product01 .productImage {
  width: 199px;
}
#product02 {
  position: relative;
  width: 254px;
  margin-right: 161px;
}
#product02::after {
  position: absolute;
  content: '';
  width: 317px;
  height: 189px;
  background-image: url("../img/main_lineUp_bg02.png");
  background-size: 317px;
  background-repeat: no-repeat;
  top: 69px;
  left: -14px;
}
#product02 .productImage {
  width: 121px;
  margin-left: 58px;
}
#lineUp h3 {
  margin: 25px auto 0;
  padding: 0;
}
.productCapacity {
  margin: 15px 0 0;
  padding: 0;
  line-height: 0;
}
#product02 .productCapacity {
  width: 210px;
}
.productPrice {
  margin: 23px 0 0;
  padding: 0;
  line-height: 0;
}
#product02 .productPrice {
  width: 118px;
}
.productNotice {
  width: 207px;
  margin: 15px 0 0;
  padding: 0;
  line-height: 0;
}
#howTo {
  position: relative;
  max-width: 960px;
  margin: 115px auto 0;
}
#howTo::after {
  position: absolute;
  content: '';
  width: 929px;
  height: 714px;
  background-image: url("../img/main_howTo_bg.png");
  background-size: 929px;
  background-repeat: no-repeat;
  background-position: center top;
  right: -630px;
  top: -40px;
  opacity: 0;
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  -ms-animation-delay: 0.5s;
}
#howTo.js-blurSet::after {
  -webkit-animation-name: imageBlur;
  animation-name: imageBlur;
  opacity: 1;
  transition: 7s;
  transform: scale(1.1);
}
#howToInner {
  position: relative;
  z-index: 1;
}
#howTo h2 {
  width: 556px;
  margin: 0 auto;
  padding: 0;
}
#howTo p {
  width: 503px;
  margin: 20px auto 0;
  padding: 0;
}
#howTo ul {
  width: 816px;
  margin: -40px 0 0 95px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
  align-content: flex-end;
  height: 310px;
}
#howTo li {
  position: relative;
}
#howTo li::after {
  position: absolute;
  content: '';
  width: 12px;
  height: 24px;
  background-image: url("../img/main_howTo_arrow.svg");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center top;
  top: 40px;
  right: -55px;
}
#howTo li:nth-child(4)::after {
  display: none;
}
#howTo_step1 {
  width: 107px;
  padding-bottom: 120px;
}
#howTo_step2 {
  width: 126px;
  padding-bottom: 120px;
}
#howTo_step3 {
  width: 77px;
  padding-bottom: 120px;
}
#howTo_step4 {
  width: 175px;
}
#howTo_notice {
  position: absolute;
  width: 282px;
  bottom: 75px;
  left: 318px;
}
#movie {
  position: relative;
  width: 702px;
  height: 395px;
  margin: 0 auto 97px;
}
#movie::after {
  position: absolute;
  content: '';
  width: 709px;
  height: 395px;
  background-image: url("../img/main_movie_bg.png");
  background-size: 709px;
  background-repeat: no-repeat;
  background-position: center top;
  top: 11px;
  left: 5px;
}
#movieContentsInner {
  position: relative;
  height: 702px;
  z-index: 1;
}
.youtube {
  position: relative;
  width: 100%;
}
.youtube:before {
  content: "";
  display: block;
  padding-top: calc(9 / 16 * 100%); /*アスペクト比 16：9 -> 56.25% */
  overflow: hidden;
}
.youtube iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.youtube-center {
  margin: 0 auto; /* 中央に配置 */
}

@media screen and (max-width: 767px) {
  .pc_none {
    display: block;
  }
  .sp_none {
    display: none;
  }
  #suntory_contents {
    width: 100%;
  }
  #mv {
    position: relative;
    width: 100%;
    height: calc(100vw * 1775 / 750);
    margin: 0 auto;
  }
  #mv::after {
    position: absolute;
    content: '';
    width: 100%;
    height: calc(100vw * 1230 / 750);
    background-image: url(../img/main_mv_bg_sp.png);
    background-size: 100%;
  }
  #mvTitle {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0;
  }
  #mvInner {
    height: calc(100vw * 1775 / 750);
  }
  #mvInner::after {
    position: absolute;
    content: '';
    width: calc(100vw * 247 / 750);
    height: calc(100vw * 236 / 750);
    background-image: url("../img/main_mv_leaf_sp.png");
    background-size: calc(100vw * 247 / 750);
    background-repeat: no-repeat;
    background-position: center top;
    top: calc(100vw * 900 / 750);
    left: calc(100vw * 468 / 750);
  }
  #mvInner h1 {
    width: calc(100vw * 607 / 750);
    height: calc(100vw * 262 / 750);
    top: calc(100vw * 70 / 750);
    left: calc((100vw - (100vw * 607 / 750))/2);
    margin: 0;
    padding: 0;
  }
  #mvInner h1 img {
    width: calc(100vw * 607 / 750);
    height: calc(100vw * 262 / 750);
  }
  #mvImage {
    width: calc(100vw * 685 / 750);
    top: calc(100vw * 375 / 750);
    right: calc((100vw - (100vw * 685 / 750))/2);
  }
  #mvInner h2 {
    position: absolute;
    width: calc(100vw * 616 / 750);
    margin: 0;
    top: calc(100vw * 1284 / 750);
    left: calc((100vw - (100vw * 616 / 750))/2);
  }
  #point {
    position: relative;
    width: 100%;
    margin: calc(100vw * 165 / 750) auto 0;
  }
  #point h2 {
    position: absolute;
    width: calc(100vw * 350 / 750);
    top: 0;
    left: calc((100vw - (100vw * 350 / 750))/2);
  }
  #point h2::after {
    width: calc(100vw * 600 / 750);
    height: calc(100vw * 143 / 750);
    background-size: calc(100vw * 600 / 750);
    top: calc(-1*(100vw * 17 / 750));
    left: calc(-1*((100vw - (100vw * 500 / 750))/2));
  }
  #point ul {
    height: calc(100vw * 1716 / 750);
  }
  #point li {
    margin: 0;
    padding: 0;
  }
  #point01 .pointTitle {
    position: absolute;
    width: calc(100vw * 148 / 750);
    top: calc(100vw * 340 / 750);
    left: calc(100vw * 70 / 750);
  }
  #point01 .pointTitle::before {
    width: calc(100vw * 80 / 750);
    height: calc(100vw * 115 / 750);
    background-size: calc(100vw * 80 / 750);
    top: calc(-1*(100vw * 115 / 750));
    left: calc(100vw * 37 / 750);
  }
  #point01 .pointImage {
    position: absolute;
    width: calc(100vw * 526 / 750);
    top: calc(100vw * 160 / 750);
    ;
    left: calc(100vw * 290 / 750);
    ;
  }
  #point01 .pointImage::after {
    width: calc(100vw * 615 / 750);
    height: calc(100vw * 392 / 750);
    background-size: calc(100vw * 615 / 750);
    top: calc(100vw * 120 / 750);
    left: calc(-1*(100vw * 70 / 750));
  }
  #point02 .pointTitle {
    position: absolute;
    width: calc(100vw * 200 / 750);
    top: calc(100vw * 874 / 750);
    left: calc(100vw * 492 / 750);
  }
  #point02 .pointTitle::before {
    width: calc(100vw * 64 / 750);
    height: calc(100vw * 142 / 750);
    background-size: calc(100vw * 60 / 750);
    top: calc(-1*(100vw * 159 / 750));
    left: calc(100vw * 71 / 750);
  }
  #point02 .pointImage {
    position: absolute;
    width: calc(100vw * 534 / 750);
    top: calc(100vw * 598 / 750);
    left: calc(-1*(100vw * 70 / 750));
  }
  #point02 .pointImage::after {
    width: calc(100vw * 594 / 750);
    height: calc(100vw * 356 / 750);
    background-size: calc(100vw * 450 / 750);
    top: calc(100vw * 280 / 750);
    left: calc(-1*(100vw * 93 / 750));
  }
  #point03 .pointTitle {
    position: absolute;
    width: calc(100vw * 249 / 750);
    top: calc(100vw * 1367 / 750);
    left: calc(100vw * 50 / 750);
  }
  #point03 .pointTitle::before {
    width: calc(100vw * 140 / 750);
    height: calc(100vw * 132 / 750);
    background-size: calc(100vw * 140 / 750);
    top: calc(-1*(100vw * 144 / 750));
    left: calc(100vw * 50 / 750);
  }
  #point03 .pointImage {
    position: absolute;
    width: calc(100vw * 545 / 750);
    top: calc(100vw * 1072 / 750);
    left: calc(100vw * 318 / 750);
  }
  #point03 .pointImage img {
    position: relative;
    z-index: 1;
  }
  #point03 .pointImage::after {
    position: absolute;
    content: '';
    width: calc(100vw * 408 / 750);
    height: calc(100vw * 345 / 750);
    background-image: url("../img/main_point_image03_bg_sp.png");
    background-size: calc(100vw * 408 / 750);
    top: calc(100vw * 220 / 750);
    left: calc(100vw * 5 / 750);
  }
  #point_notice {
    width: calc(100vw * 670 / 750);
    margin: 0 auto;
  }
  #point_notice p {
    margin: 0;
    padding: 0 0 calc(100vw * 50 / 750) 0;
    text-align: right;
    line-height: 0;
  }
  #point_notice p img {
    width: calc(100vw * 198 / 750);
  }
  #point_text {
    width: calc(100vw * 670 / 750);
    height: calc(100vw * 406 / 750);
    background-image: url("../img/main_point_frame_sp.png");
    background-size: calc(100vw * 670 / 750);
  }
  #point_text p {
    width: calc(100vw * 583 / 750);
    margin: 0;
    padding: calc(100vw * 88 / 750) 0 0 calc(100vw * 45 / 750);
  }
  #meal {
    position: relative;
    width: 100%;
    height: calc(100vw * 1199 / 750);
    margin: calc(100vw * 112 / 750) auto 0;
  }
  #meal::after {
    position: absolute;
    content: '';
    width: 100%;
    height: calc(100vw * 1199 / 750);
    background-image: url("../img/main_meal_bg_sp.png");
    background-size: 100%;
  }
  #mealInner {
    position: relative;
    width: calc(100vw * 594 / 750);
    padding-top: calc(100vw * 115 / 750);
    display: block;
  }
  #mealImage1 {
    width: 100%;
  }
  #mealText {
    position: relative;
    width: 100%;
    padding-left: 0;
  }
  #mealText h2 {
    width: calc(100vw * 393 / 750);
    margin: 0;
    padding: 0;
  }
  #mealText p {
    width: calc(100vw * 526 / 750);
    margin: calc(100vw * 60 / 750) 0 calc(100vw * 44 / 750);
  }
  #mealImage2 {
    position: absolute;
    width: calc(100vw * 270 / 750);
    top: calc(-1*(100vw * 135 / 750));
    right: calc(-1*(100vw * 50 / 750));
  }
  #lineUp {
    margin: calc(100vw * 44 / 750) auto;
  }
  #lineUp h2 {
    width: calc(100vw * 307 / 750);
  }
  #lineUp ul {
    margin: calc(100vw * 78 / 750) 0 0;
    display: block;
  }
  #product01 {
    width: calc(100vw * 384 / 750);
    margin: 0 auto;
  }
  #product01::after {
    width: calc(100vw * 636 / 750);
    height: calc(100vw * 422 / 750);
    background-size: calc(100vw * 636 / 750);
    top: calc(-1*(100vw * 12 / 750));
    left: calc(-1*(100vw * 195 / 750));
  }
  #product01 .productImage {
    width: calc(100vw * 342 / 750);
  }
  #product02 {
    position: relative;
    width: calc(100vw * 450 / 750);
    margin: calc(100vw * 85 / 750) auto 0;
  }
  #product02::after {
    width: calc(100vw * 538 / 750);
    height: calc(100vw * 387 / 750);
    background-image: url("../img/main_lineUp_bg02_sp.png");
    background-size: calc(100vw * 538 / 750);
    top: calc(100vw * 51 / 750);
    left: calc(-1*(100vw * 22 / 750));
  }
  #product02 .productImage {
    width: calc(100vw * 198 / 750);
    margin: 0 auto;
  }
  #lineUp h3 {
    margin: 25px auto 0;
    padding: 0;
  }
  .productCapacity {
    margin: calc(100vw * 20 / 750) 0 0;
  }
  #product01 .productCapacity {
    width: calc(100vw * 352 / 750);
  }
  #product02 .productCapacity {
    width: calc(100vw * 356 / 750);
  }
  .productPrice {
    margin: calc(100vw * 30 / 750) 0 0;
  }
  #product02 .productPrice {
    width: calc(100vw * 220 / 750);
  }
  .productNotice {
    width: calc(100vw * 346 / 750);
    margin: calc(100vw * 23 / 750) 0 0;
  }
  #howTo {
    position: relative;
    max-width: 100%;
    margin: calc(100vw * 224 / 750) auto 0;
  }
  #howTo::after {
    position: absolute;
    content: '';
    width: calc(100vw * 1116 / 750);
    height: calc(100vw * 834 / 750);
    background-image: url("../img/main_howTo_bg.png");
    background-size: calc(100vw * 1116 / 750);
    right: auto;
    left: calc(100vw * 100 / 750);
    top: calc(100vw * 380 / 750);
  }
  #howTo h2 {
    width: calc(100vw * 400 / 750);
  }
  #howTo p {
    width: calc(100vw * 486 / 750);
    margin: calc(100vw * 40 / 750) auto 0;
    padding: 0;
  }
  #howTo ul {
    width: calc(100vw * 429 / 750);
    margin: calc(100vw * 80 / 750) auto 0;
    display: block;
    height: auto;
  }
  #howTo li::after {
    display: none;
  }
  #howTo_step1 {
    width: calc(100vw * 387 / 750);
    padding-bottom: calc(100vw * 40 / 750);
  }
  #howTo_step2 {
    width: calc(100vw * 430 / 750);
    padding-bottom: calc(100vw * 40 / 750);
  }
  #howTo_step3 {
    width: calc(100vw * 273 / 750);
    padding-bottom: calc(100vw * 30 / 750);
  }
  #howTo_step4 {
    width: calc(100vw * 358 / 750);
  }
  #howTo_notice {
    position: absolute;
    width: calc(100vw * 492 / 750);
    bottom: calc(100vw * 20 / 750);
    left: calc(100vw * 113 / 750);
  }
  #movie {
    width: calc(100vw * 574 / 750);
    height: calc(100vw * 325 / 750);
    margin: calc(100vw * 32 / 375) auto calc(100vw * 123 / 750);
  }
  #movie::after {
    position: absolute;
    content: '';
    width: calc(100vw * 565 / 750);
    height: calc(100vw * 317 / 750);
    background-image: url(../img/main_movie_bg_sp.png);
    background-size: calc(100vw * 565 / 750);
    top: calc(100vw * 20 / 750);
    left: calc(100vw * 25 / 750);
  }
  #movieContentsInner {
    height: calc(100vw * 323 / 750);
  }

}