@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti:wght@700&&family=Noto+Sans+JP:wght@400;700;900&family=Zen+Kaku+Gothic+New:wght@500&display=swap');
/*
font-family: "Kaisei Opti", serif;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 700;
*/

#container {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-size: min(1.429vw, 20px);
  /* font-size: clamp(12px, 1.429vw, 20px); */
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 2;
  text-align: center;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  /* padding-bottom: 100px; */
  position: relative;
  width: 100vw;
  /* inview */
  /* blocks */
  /* About */
  /* Banner */
  /* Jump */
  /* Lineup */
  /* Main */
  /* Orange */
  /* Recipe */
}

@media print, screen and (min-width: 768px) {
  #container {
    padding-bottom: 200px;
  }
}

#container picture {
  display: block;
  height: auto;
  width: 100%;
}

#container a {
  text-decoration: none;
}

@media print, screen and (max-width: 767px) {
  #container .pc {
    display: none !important;
  }
}

@media print, screen and (min-width: 768px) {
  #container .sp {
    display: none !important;
  }
}

#container .js-inview {
  opacity: 0;
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition: 500ms ease-out;
  transition: 500ms ease-out;
}

#container .js-inview.-show {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

#container .js-inviewDeco {
  -webkit-filter: opacity(0%) blur(10px);
  filter: opacity(0%) blur(10px);
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition: 800ms ease-out;
  transition: 800ms ease-out;
}

#container .js-inviewDeco.-show {
  -webkit-filter: opacity(100%) blur(0px);
  filter: opacity(100%) blur(0px);
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

#container .scroll{
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}
#container .ico.scroll{
  transform: translateY(80px);
  transition: all 1s ease;
}
#container .scroll.active{
  opacity: 1;
  transform: translateY(0);
}
#container h2,#container h3,#container h4{
  font-family: "Kaisei Opti", serif;
  font-weight: 700;
}
#container h2,#container .about h3{
  font-size: 70px;
  font-size: min(3.5vw, 70px);
}
#container .main{
  background:url(../images/main_bg.png)no-repeat top center;
  background-size:cover;
  position: relative;
}
#container .main img.ttl{
  height:auto;
}
#container .main img.pkg1,
#container .main img.pkg2,
#container .main img.pkg3{
  width:26.2vw;
  height:auto;
  position: absolute;
  bottom:3.3vw;
}
#container .main img.pkg1{
  left:calc(50% - 30.2vw);
}
#container .main img.pkg2{
  left:calc(50% - 12.5vw);
}
#container .main img.pkg3{
  left:calc(50% + 5.1vw);
}
#container .main img.ico1{
  width:15.95vw;
  height:auto;
  position: absolute;
  top:-1.3vw;
  left:calc(50% - 36vw);
  transition-delay: .2s;
}
#container .main img.ico2{
  width:11.6vw;
  height:auto;
  position: absolute;
  top:16.75vw;
  left:calc(50% - 35.15vw);
}
#container .main img.ico3{
  width:15.65vw;
  height:auto;
  position: absolute;
  bottom:5.3vw;
  left:calc(50% - 46.2vw);
  transition-delay: .1s;
}
#container .main img.ico4{
  width:19.15vw;
  height:auto;
  position: absolute;
  top:-.5vw;
  left:calc(50% + 27.2vw);
}
#container .main img.ico5{
  width:9.65vw;
  height:auto;
  position: absolute;
  top:17.5vw;
  left:calc(50% + 26vw);
  transition-delay: .3s;
}
#container .main img.ico6{
  width:18.75vw;
  height:auto;
  position: absolute;
  top:30.5vw;
  left:calc(50% + 28.15vw);
  transition-delay: .4s;
}
#container .about{

}
#container .about > div{
  background:#5bcbff url(../images/about_bg1.png)repeat-y top left -80px;
  position: relative;
}
#container .about > div.about2,
#container .about > div.about4{
  background:#5bcbff url(../images/about_bg2.png)repeat-y top right -80px;
}
#container .about .about1 p.ico{
  position: absolute;
  top:4.1vw;
  left:calc(50% - 38.35vw);
}
#container .about .about1 p.ico img{
  width:14.8vw;
  height:auto;
}
#container .about .about1 p.ico.active img{
  animation: popup .5s ease-in forwards 1s;
}
#container .about .about2 p.ico{
  position: absolute;
  top:4.1vw;
  left:calc(50% + 22.5vw);
}
#container .about .about2 p.ico img{
  width:14.8vw;
  height:auto;
}
#container .about .about2 p.ico.active img{
  animation: tilt .5s ease-in forwards 1s;
}
#container .about .about3 p.ico{
  position: absolute;
  top:4.1vw;
  left:calc(50% - 42.75vw);
}
#container .about .about3 p.ico img{
  width:16.5vw;
  height:auto;
}
#container .about .about3 p.ico.active img{
  animation: tilt 1.5s ease-in forwards 1s;
}
#container .about .about4 p.ico{
  position: absolute;
  top:4.1vw;
  left:calc(50% + 22.5vw);
}
#container .about .about4 p.ico img{
  width:10.75vw;
  height:auto;
}
#container .about .about4 p.ico.active img{
  animation: popup .5s ease-in forwards 1s;
}
@keyframes popup {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes tilt {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-14deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#container .about h3{
  line-height: 1.2;
  margin-bottom: .4em;
}
#container .about h3 span{
  letter-spacing: -0.1em;
}
#container .about h4{
  font-size: 40px;
  font-size: min(2vw, 40px);
  /* font-size: clamp(32px, 2vw, 40px); */
  line-height: 1;
  margin-top: .5em;
}
#container .about p{
  line-height: 1.5;
}
#container .about p.kome{
  font-size: 15px;
  font-size: min(1vw, 15px);
  /* font-size: clamp(10px, 0.75vw, 15px); */
  line-height: 1.33;
  margin-top: 1em;
}
#container .about .about1 p.kome{
  margin-top: 1.8em;
}
#container .about .about2 img.pic,
#container .about .about4 img.pic{
  left:auto;
  right:calc(50% - 2.5vw);
}
#container .about .about1 img.text{
  width:22.85vw;
  height:auto;
  margin:.7vw 0 1vw;
}
#container .about .about3 img.pkg1,
#container .about .about3 img.pkg2,
#container .about .about3 img.pkg3{
  width:15vw;
  height:auto;
  position: absolute;
  left:calc(50% + 1vw);
  z-index:1;
}
#container .about .about3 img.pkg1{
  bottom:calc(33.33% + 1.3vw);
}
#container .about .about3 img.pkg2{
  bottom:calc(66.66% + 1.3vw);
}
#container .about .about3 img.pkg3{
  bottom:1.4vw;
}
#container .about .about4 ul{
  display:inline-block;
  margin-top: 1em;
}
#container .about .about4 ul li{
  background:#fffeb7;
  border-radius: 10px;
  line-height: 1.1;
  padding: .7em 1.5em .8em;
  margin-bottom: 10px;
}
#container .about .about4 p.ico.active img{
  animation: popup .5s ease-in forwards 1s;
}
#container .about a.btn{
  color:#001e75;
  font-weight: 900;
  line-height: 1;
  letter-spacing:0.05em;
  width:60%;
  border:clamp(2px,0.2vw,4px) solid #001e75;
  border-radius:100vh;
  display:inline-block;
  position: relative;
  padding: 1.1em 0;
  box-shadow:4px 4px 10px rgba(0, 0, 0, 0.2);
  margin-top: 2em;
}
#container .about a.btn::after {
  content: '';
  display:block;
  width:1.1vw;
  height:0.9vw;
  background:url(../images/about_btn_arr.png)no-repeat;
  background-size:contain;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%) translateX(0);
  transition: transform 0.3s ease;
}
#container .movie{
  background:#62d5ff url(../images/movie_bg.png)repeat-x bottom -1px left;
  padding: 5vw 0 7.5vw;
  position: relative;
  overflow: hidden;
}
#container .movie .youtube{
  width:90%;
  max-width:980px;
  position:relative;
  margin:0 auto;
  border:min(10px,1.333vw) solid #fff;
}
#container .movie .youtube:before{
  content:'';
  display:block;
  padding-top:calc(9 / 16 * 100%)
}
#container .movie .youtube iframe{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}
#container .movie .ico1{
  /* width:7.1vw;
  height:auto; */
  position: absolute;
  bottom:3vw;
  left:calc(50% - 660px);
  animation: shakeY 3s ease-out infinite;
}
#container .movie .ico2{
  /* width:11.6vw;
  height:auto; */
  position: absolute;
  bottom:4vw;
  left:calc(50% + 510px);
  animation: shakeY2 5s ease-out infinite 1s;
}
@keyframes shakeY {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-7px); }
  60%  { transform: translateY(7px); }
  100% { transform: translateY(0); }
}
@keyframes shakeY2 {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-12px); }
  60%  { transform: translateY(12px); }
  100% { transform: translateY(0); }
}
#container .movie p{
  line-height: 1.75;
}
#container .award{
  padding: 4.5vw 0 4vw;
}
#container .award div{
  display:inline-block;
  position: relative;
}
#container .award div img{
  /* width:28.5vw; */
  width:30vw;
  height:auto;
}
#container .award h2{
  font-size: 50px;
  font-size: min(2.5vw, 50px);
  /* font-size: clamp(32px, 2.5vw, 50px); */
  line-height: 1.4;
  margin-top: -.2em;
  margin-bottom: .8em;
}
#container .award h2 strong{
  color:#e83421;
  font-size: 160%;
  background-image: linear-gradient(
  -70deg,
  rgb(232, 52, 33, 1)  45%,
  #fff 50%,
  rgb(232, 52, 33, 1) 55%
  );
  background-size: 500% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shine 5s infinite;
}
@keyframes shine {
  0% {
    background-position: 100% 50%;
  }
  40% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
#container .award h2 small{
  font-size: 80%;
}
#container .award h3{
  font-size: 22px;
  font-size: min(1.571vw, 22px);
  /* font-size: clamp(18px, 1.1vw, 22px); */
  line-height: 1.6;
  margin-bottom: 1.2em;
}
#container .award ul{
  display:inline-block;
  text-align:left;
  margin-left: 1.5em;
}
#container .award ul li{
  line-height: 1.6;
  list-style:none;
  position: relative;
  padding-left: 3.5vw;
  margin-bottom: 1.2em;
}
#container .award ul li::before{
  content:'';
  display: block;
  width: 2.7vw;
  height: 2vw;
  background: url(../images/h2_ico.png) no-repeat;
  background-size: contain;
  position: absolute;
  top:0;
  left:0;
}
#container .award p{
  line-height: 1.75;
}
#container .recipe{
  background:#61d7ff url(../images/recipe_bg.png)repeat-y;
  padding:4.5vw 0 5.75vw;
}
#container .recipe h2{
  line-height: 1;
  background:url(../images/recipe_h2_line.png)no-repeat bottom center;
  background-size:contain;
  display:inline-block;
  padding: 0 .2em .5em;
  margin-bottom: 1.2em;
}
#container .recipe h2 span{
  display:inline-block;
  width:2.95vw;
  height:2.2vw;
  background:url(../images/h2_ico.png)no-repeat;
  background-size:contain;
  margin:0 .5vw;
}
/* #container .recipe h2::after{
  content:'';
  display:inline-block;
  width:791px;
  height:22px;
  background:url(../images/recipe_h2_line.png)no-repeat;
  background-size:contain;

  margin:0 .5vw;
} */
.slider {
}
.slick-slide {
  padding-top: 0.6vw;
  position: relative;
}
.slick-slide a:focus {
  outline: none;
}
.slick-slide a {
  color:#000;
  background:#fff;
  border-radius:1.5vw;
  display:block;
  position: relative;
  margin:0 1.25vw;
  overflow:hidden;
}
.slick-slide img {
  width:100%;
  height:auto;
}
.slick-slide p {
  font-size: 1.25vw;
  line-height: 1.4;
  height: 5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.slick-slide img.ico{
  position: absolute;
  top:0;
  left:0.75vw;
  width:4.3vw;
  height:3.15vw;
  z-index:1;
}
.slick-center {

}
#container .lineup{
  padding-top: 5vw;
}
#container .lineup h2{
  line-height: 1;
}
#container .lineup h2::before,
#container .lineup h2::after{
  content:'';
  display:inline-block;
  width:2.95vw;
  height:2.2vw;
  background:url(../images/h2_ico.png)no-repeat;
  background-size:contain;
  margin:0 2vw;
}
@media screen and (min-width: 768px) {
  #container .lineup ul{
  	display: flex;
  	justify-content: center;
    gap:min(3vw, 60px);
  }
  #container .lineup ul li{
    width:min(25vw, 350px);
  }
}
#container .lineup ul{
  margin-top: -4vw;
}
#container .lineup ul li{
  position: relative;
}
#container .lineup ul li a{
  display:block;
}
#container .lineup ul li img{
  /* max-width:100%; */
  width:120%;
  height:auto;
  margin-left: -8%;
  margin-bottom: 1.5vw;
  display:block;
}
#container .lineup ul li p{
  font-size: 25px;
  font-weight: 700;
  font-size: clamp(15px, 1.25vw, 25px);
  line-height: 1.2;
  border-radius:100vh;
  padding: .9em 0 1.1em;
}
#container .lineup ul li.prod1 p{
  color:#222495;
  border:clamp(2.5px,0.357vw,5px) solid #222495;
}
#container .lineup ul li.prod2 p{
  color:#ae8409;
  border:clamp(2.5px,0.357vw,5px) solid #ae8409;
}
#container .lineup ul li.prod3 p{
  color:#b72909;
  border:clamp(2.5px,0.357vw,5px) solid #b72909;
}
@media screen and (min-width: 1025px) {
  #container .about a.btn:hover {
    background:rgba(255, 255, 255, 0.9);
   box-shadow:0 0 0 rgba(0, 0, 0, 0.2);
  transform: translateY(3px);
  }
  #container .about a.btn:hover::after {
    transform: translateY(-50%) translateX(5px);
  }
  .slick-slide a:hover img {
    opacity:.8;
  }
  .slick-slide a:hover p {
    opacity:.8;
    background:#fffeb7;
  }
  .slick-slide:hover img.ico {
    opacity:.8;
  }
  #container .lineup ul li a:hover{
    opacity:.7;
  }
}
@media screen and (min-width: 768px) {
  #container .main{
    min-height:46.5vw;
    padding-top: 4.5vw;
  }
  #container .main img.ttl {
    width: 53.85vw;
    max-width: 1077px;
  }
  #container .about > div{
    height:40vw;
  }
  #container .about > div > div{
    width:33.5%;
    max-width:670px;
    height:100%;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
  }
  #container .about > div > div{
    position: absolute;
    top:0;
    right:50%;
    z-index:1;
  }
  #container .about .about2 > div,
  #container .about .about4 > div{
    right:auto;
    left:50%;
  }
  #container .about .about3 > div{
    width:40%;
    max-width:800px;
  }
  #container .about .about2 > div{
    left:calc(50% + 1vw);
  }
  #container .about img.pic{
    position: absolute;
    top:0;
    left:calc(50% - 2.5vw);
    height:100%;
  }
}
@media screen and (max-width: 1920px) and (min-width: 768px){
  #container .about > div > div {
      width: 50% !important;
  }
  #container .about .about4 h3 br{
    margin-bottom: .3em;
  }
}
@media screen and (max-width: 1600px) and (min-width: 768px){
  #container .about .about4 a.btn{
    margin-top: .5em;
  }
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
  #container .about .about2 > div{
    left: 50%;
  }
  #container .about h3{
    margin-bottom: .2em;
  }
  #container .about p.kome{
    margin-top: .5em;
  }
  #container .about .about4 h3 br{
    display:none;
  }
}
@media screen and (max-width: 767px) {
  #container{
    font-size: 3.33vw;
  }
  #container h2{
    font-size: 8vw;
  }
  #container .main{
    background:url(../images/sp/main_bg.png)no-repeat top center;
    background-size:cover;
  }
  #container .main img.ttl{
    width:100%;
  }
  #container .main img.ico1{
    width:25.2%;
    left:20.2%;
    top:-3.4vw;
  }
  #container .main img.ico2{
    width:17%;
    left:4.26%;
    top:57vw;
  }
  #container .main img.ico3{
    width:14.26%;
    left:-2%;
    top:7.4vw;
  }
  #container .main img.ico4{
    width:28.13%;
    left:auto;
    right:-3.6%;
    top:-0.05vw;
  }
  #container .main img.ico5{
    width:17.86%;
    left:auto;
    right:1.8%;
    top:56.5vw;
  }
  #container .main img.ico6{
    width:17.86%;
    left:auto;
    right:29%;
    top:8vw;
  }
  #container .main img.pkg1,
  #container .main img.pkg2,
  #container .main img.pkg3{
    width:59vw;
    height:auto;
    position: absolute;
  }
  #container .main img.pkg1{
    left:calc(50% - 28.8vw);
    bottom:8vw;
  }
  #container .main img.pkg2{
    left:-5.3vw;
    bottom:20.8vw;
  }
  #container .main img.pkg3{
    left:auto;
    right:-5.8vw;
    bottom:20.8vw;
  }
  #container .about > div{
    background:#5bcbff url(../images/sp/about_bg.png)no-repeat top left;
    background-size:100% auto;
    padding-top: 13.333vw;
  }
  #container .about p.ico{
    text-align: left;
  }
  #container .about .about1 p.ico{
    top:11vw;
    left:-13vw;
  }
  #container .about .about1 p.ico img{
    width:39.467vw;
  }
  #container .about .about2 p.ico{
    top:29.867vw;
    left:auto;
    right:-6vw;
  }
  #container .about .about2 p.ico img{
    width:31.467vw;
  }
  #container .about .about3 p.ico{
    top:2.667vw;
    left:-9vw;
  }
  #container .about .about3 p.ico img{
    width:37.2vw;
  }
  #container .about .about4 p.ico{
    top:8.667vw;
    left:auto;
    right:3.5vw;
  }
  #container .about .about4 p.ico img{
    width:28.667vw;
  }
  #container .about h3{
    font-size: 11vw;
  }
  #container .about h3 small{
    display:inline-block;
    font-size: 77.77%;
    line-height:1.3;
    padding-top: .2em;
  }
  #container .about h4{
    font-size: 6.5vw;
  }
  #container .about img.pic{
    width:100%;
    vertical-align: bottom;
    margin-top: 8vw;
  }
  #container .about .about1 img.text{
    width:78.93%;
  }
  #container .about p.kome{
    font-size: 2.667vw;
  }
  #container .about .about3 img.pkg1,
  #container .about .about3 img.pkg2,
  #container .about .about3 img.pkg3{
    width:37.5vw;
    height:auto;
    position: absolute;
    left:-0.2vw;
    z-index:1;
  }
  #container .about .about3 img.pkg1{
    bottom:29vw;
  }
  #container .about .about3 img.pkg2{
    bottom:57.2vw;
  }
  #container .about .about3 img.pkg3{
    bottom:1.1vw;
  }
  #container .about .about4 ul{
    width:92%;
  }
  #container .about a.btn {
    width:auto;
    min-width:66.66%;
    font-size: 5.333vw;
    padding: .8em 2.5em;
    margin-top: 1em;
  }
  #container .about a.btn::after {
    width:3.867vw;
    height:3.2vw;
  }
  #container .movie {
    background-size:30% auto;
    padding-bottom: 17vw;
  }
  #container .movie .ico1{
    width:8vw;
    left:7%;
    animation: shakeY 5s ease-out infinite;
  }
  #container .movie .ico2{
    width:18vw;
    bottom:-2vw;
    left:auto;
    right:6.5%;
    animation: shakeY2 8s ease-in infinite;
  }
  #container .award div img{
    width:65%;
  }
  #container .award div::after{
    width:28vw;
    height:28vw;
    bottom:3vw;
    right:2vw;
  }
  #container .award h2{
    font-size:5vw;
  }
  #container .award h3{
    font-size:3.8vw;
  }
  #container .award ul{
    margin-left: .7em;
  }
  #container .award ul li{
    padding-left: 7.8vw;
    padding-right: .7em;
    margin-bottom: .7em;
  }
  #container .award ul li:last-child{
    margin-bottom: 0;
  }
  #container .award ul li::before{
    width: 6.4vw;
    height: 4.8vw;
    top:.1em;
    left:0;
  }
  .slick-slide {
    padding-top: 1.6vw;
  }
  .slick-slide a {
    margin:0 3.33vw;
  }
  .slick-slide p {
    height:13.333vw;
    font-size: 3.333vw;
  }
  .slick-slide img.ico {
    width:11.467vw;
    height:8.4vw;
  }
  #container .recipe{
    padding: 9.333vw 0;
  }
  #container .recipe h2{
    letter-spacing: -0.1em;
    display:inline-block;
    padding: 0 .1em .5em;
  }
  #container .recipe h2 span{
    width:6.933vw;
    height:5.067vw;
    margin-left: 1.5vw;
  }
  #container .lineup{
    padding-top: 13.333vw;
  }
  #container .lineup h2::before,
  #container .lineup h2::after{
    width:6.933vw;
    height:5.067vw;
  }
  #container .lineup ul{
    margin:-4vw 14vw 0;
  }
  #container .lineup ul li{
    margin-top: -16vw;
  }
  #container .lineup ul li img{
    width:100%;
    margin-left: 2.5%;
    /* width:105%;
    margin-left: -0.5%; */
    margin-bottom: 3vw;
  }
  #container .lineup ul li p{
    font-size: 4.667vw;
    padding: .4em 0 .5em;
  }
}