@charset "UTF-8";

#suntory_content {
	padding: 0px;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}

#contents {
	padding: 0px;
  background: none;
}

/* id005
 * ========================================= */

#id005 img {
  display: block;
  width: 100%;
  height: auto;
}

#id005 #content {
  width: 100%;
  margin: 0 auto 6%;
}

#id005 .parent {
  position: relative;
}

#id005 .text01 {
  width: 52.8%;
  position: absolute;
  top: 4.5%;
  left: 28.6%;
  z-index: 0;
}

#id005 .text01::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

#id005 .text02 {
  width: 56.8%;
  position: absolute;
  top: 3.5%;
  left: 0;
  right: 0;
  margin: 0 auto;
  animation-delay: 0.7s;
}

#id005 .btn {
  width: 78%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: opacity 0.3s;
  overflow: hidden;
}

#id005 .btn::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 100%);
  transform: skewX(-25deg);
  animation: shine 3s infinite;
}

#id005 .btn01 {
  bottom: 51.5%;
}

#id005 .btn-2 {
  width: 61.87%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: opacity 0.3s;
  overflow: hidden;
}

#id005 .btn01-2 {
  bottom: 18.7%;
}

#id005 .text03 {
  width: 19.33%;
  position: absolute;
  top: 21%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#id005 .text04 {
  width: 72.53%;
  position: absolute;
  top: 34.5%;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 0;
}

#id005 .text04::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FE6D01;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

#id005 .text05 {
  width: 68.53%;
  position: absolute;
  top: 12%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#id005 .image01 {
  width: 46.93%;
  position: absolute;
  bottom: -42%;
  left: 12%;
}

#id005 .cover {
  position: relative;
  z-index: 2;
}

#id005 .text06 {
  width: 74.67%;
  position: absolute;
  bottom: 20.5%;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 0;
}

#id005 .text06::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FE6D01;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

#id005 .image02 {
  width: 5.07%;
  position: absolute;
  top: 25.8%;
  left: 22.6%;
}

#id005 .image03 {
  width: 5.07%;
  position: absolute;
  top: 34.2%;
  left: 44.2%;
}

#id005 .text07 {
  width: 25.2%;
  position: absolute;
  top: 21%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#id005 .line01 {
  width: 37.33%;
  height: 2px;
  position: absolute;
  top: 54%;
  left: 55.3%;
}

#id005 .line01::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  position: absolute;
  top: 0;
  left: 0;
}

#id005 .text08 {
  width: 65.6%;
  position: absolute;
  bottom: 6.5%;
  left: 7.8%;
}

#id005 .text09 {
  width: 48.8%;
  position: absolute;
  top: 44.5%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#id005 .text10 {
  width: 43.33%;
  position: absolute;
  top: 47.5%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#id005 .text11 {
  width: 84%;
  position: absolute;
  top: 4.5%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#id005 .text12 {
  width: 57.07%;
  position: absolute;
  top: 9%;
  left: 9.6%;
}

#id005 .text13 {
  width: 84.27%;
  position: absolute;
  top: 3%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#id005 .text14 {
  width: 56%;
  position: absolute;
  top: 52%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#id005 .text15 {
  width: 92.27%;
  position: absolute;
  top: 7%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#id005 .text16 {
  width: 92.27%;
  position: absolute;
  top: 37.6%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#id005 .text17 {
  width: 92.27%;
  position: absolute;
  bottom: 6%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#id005 .text18 {
  width: 25.73%;
  position: absolute;
  top: 34%;
  left: 6%;
}

#id005 .text19 {
  width: 25.73%;
  position: absolute;
  top: 34%;
  right: 6%;
}

#id005 .text20 {
  width: 68.53%;
  position: absolute;
  top: 6.5%;
  left: 8%;
  z-index: 0;
}

#id005 .text21 {
  width: 41.33%;
  position: absolute;
  top: 18.5%;
  left: 8%;
  z-index: 0;
}

#id005 .text20::after, #id005 .text21::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

#id005 .text21::after {
  animation-delay: 0.6s;
}

#id005 .text22 {
  width: 67.33%;
  position: absolute;
  top: 33%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#id005 .btn02 {
  bottom: 49.8%;
}

#id005 .btn02-2 {
  bottom: 12.6%;
}

#id005 .image04 {
  width: 13.33%;
  position: absolute;
  top: 75.5%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#id005 .btn03 {
  top: 27.9%;
}

#id005 .btn03-2 {
  top: 55.9%;
}

#id005 .attention {
  width: 88%;
  position: absolute;
  top: 67.5%;
  left: 0;
  right: 0;
  margin: 0 auto;
  list-style: none;
  font-size: 2.75vw;
  line-height: 1.5;
}

#id005 .attention a {
  color: inherit;
}

#id005 #bnr {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 10;
  display: none;
}

#id005 .scrollIn, #id005 .scrollInDown, #id005 .zoomIn, #id005 .scrollRtoL, #id005 .scrollLtoR {
  opacity: 0;
}

#id005 .lineIn::after {
  width: 0;
}

#id005 .imageIn {
  overflow: hidden;
}

#id005 .imageInLtoR::after {
  animation: imageInLtoR 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #E8E8E8;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.fadeInUp {
  animation: fadeInUp 0.5s ease forwards;
}

.fadeInDown {
  animation: fadeInDown 0.5s ease forwards;
}

.scaleInUp {
  animation: scaleInUp 0.5s ease forwards;
}

.fadeInRtoL {
  animation: fadeInRtoL 0.5s ease forwards;
}

.fadeInLtoR {
  animation: fadeInLtoR 0.5s ease forwards;
}

.lineInLtoR::after {
  animation: lineInLtoR 0.5s 0.2s ease forwards;
}

/* =================================================
 * animation keyframes
 * ================================================*/
@keyframes shine {
  60% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -50px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes scaleInUp {
  from {
    opacity: 0;
    transform: scale3d(0.8, 0.8, 0.8);
  }
  50% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes fadeInRtoL {
  from {
    opacity: 0;
    transform: translate3d(50px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInLtoR {
  from {
    opacity: 0;
    transform: translate3d(-50px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lineInLtoR {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes imageInLtoR {
  100% {
    transform: translateX(100%);
  }
}