@charset "utf-8";

/*----------------------------------------
common
----------------------------------------*/
body { background-image:url(/img/brand/summer_milk/back.jpg); background-size:cover; background-repeat:no-repeat; background-attachment:fixed; }
section { position:relative; top:0; text-align:center; }
.inner { max-width:33.3333%; width:100%; margin:0 auto; padding:0 6rem; position:relative; }
.cow { position:absolute; z-index:10; }
.pc { display:block; }
.sp { display:none; }

/*----------------------------------------
loading screen
----------------------------------------*/
#loading {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  background:#242424;
  z-index: 9999;
}


/*----------------------------------------
parts
----------------------------------------*/

header { position:fixed; top:0; width:100%; height:100vh; z-index:-1; }
header .head-video { max-width:33.3333%; width:100%; height:100%; display:inline-block; }
header video { width:100%; height:100%; object-fit:cover; }
header .left { position:absolute; left:5rem; top:5rem; }
header .right { 
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  max-height:90vh;
  max-width:33.3333%;
  text-align:center;
  padding:0 3rem;
}
header .right img { max-height:90vh; }

/* sec01 */
#sec01 { overflow:hidden; display:none; position:relative; }
#sec01 .fp-tableCell { vertical-align:top; }
.scroll { 
  position:absolute;
  max-width:10rem;
  width:100%;
  bottom:5rem;
  left:50%;
  transform:translateX(-50%) rotate(-90deg);
  z-index:10;
}
.scroll p { 
  background:rgb(255,255,255,.3);
  text-align:center;
  border-radius:15px;
  border:solid 1px #fff;
  color:#fff;
  position:relative;
}
.scroll p:before {
  content:"";
  display:block;
  height:1px;
  width:3rem;
  background:#fff;
  position:absolute;
  top:50%;
  right:100%;
  transform:translateY(-50%);
  
}
#sec01 .head { display:inline-block; margin-top:4rem; }
#sec01 .head ul { display:flex; flex-direction:column; align-items:center; }
#sec01 .head p { margin:2rem 0; }


/* sec02 */
#sec02 { z-index:1; position:relative; padding:5rem 0 10rem; }
#sec02 ul { display:flex; flex-direction:column; justify-content:center; align-items:center; width:88%; margin:0 auto; }
#sec02 ul li { text-align:center; }
#sec02 ul li:last-child { margin-top:3rem; }
#sec02 .cow { max-width:65%; width:100%; bottom:-40vh; left:-10vw; transform:rotate(-35deg); }

/* sec03 */
#sec03 {  }
#sec03 .inner { background:rgba(255,255,255,.9); }
#sec03 p { position:relative; }
#sec03 p span { position:absolute; max-width:100%; width:100%; }
#sec03 p span.milk1 { bottom:-10%; left:60%; max-width:100%; width:100%; }
#sec03 p span.milk2 {bottom:-1%; right:99%; max-width:14rem; width:100%; }
#sec03 ul { display:flex; justify-content:space-between; align-items:center; margin:3rem auto 0; padding-bottom:10rem; }
#sec03 ul li { width:48%; }
#sec03 ul li.flycow { position:relative; border-radius:30px; overflow:hidden; cursor:pointer; }
#sec03 ul li.flycow video { width:100%; height:100%; display:block; }
#sec03 ul li span { position:absolute; bottom:2rem; left:2rem; z-index:10; }
#sec03 ul li span img { width:70%; }

/* sec04 */
#sec04 {  }
#sec04 ul { padding-bottom:10rem; }
#sec04 ul li {  }
#sec04 ul li:nth-child(2) { margin:3rem 0; }
#sec04 .audio_btn { display:flex; align-items:flex-end; justify-content:center; margin:5rem auto; cursor:pointer; max-width:20rem; width:100%; }
#sec04 .audio_btn span { color:#fff; font-size:2rem; display:inline-block; margin-left:1rem; }

/* sec05 */
#sec05 {}
#sec05 .inner { background:url(/img/brand/summer_milk/sec05-back.png); background-size:cover; background-position:50% 50%; height:100%; padding-bottom:5rem; }
#sec05 .text { padding:0 5rem; }
#sec05 .cow { top:-35%; right:-20%; max-width:50%; width:100%; z-index:1; }

/* sec06 */
#sec06 { position:relative; }
#sec06 .inner { padding:0; }
#sec06 .video { position:relative; width:100%; height:100vh; overflow:hidden; aspect-ratio:9 / 16; }
#sec06 .video video { 
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 0%;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
#sec06 .text { 
  position:absolute;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  left:3%;
  bottom:3%;
  height:auto;
  width:15%;
}
#sec06 .text .hamanaka-btn { margin-top:2rem; }

/* sec07 */
#sec07 { height:100vh; }
#sec07 .inner { position:relative; height:100vh; padding:0; background:url(/img/brand/summer_milk/sec07-back.png); background-size:cover; background-position:50% 50%; }
#sec07 .img { display:flex; align-items:flex-end; height:100vh; }
#sec07 img { width:100%;  }
#sec07 .sp-img { display:none; }

/*----------------------------------------
responsive
----------------------------------------*/

@media screen and (max-width:1024px){}
@media screen and (max-width:768px){}
@media screen and (max-width:820px){
  
  /* common */
  main { overflow:hidden; }
  .inner { max-width:100%; position:initial; }
  .pc { display:none; }
  .sp { display:block; }
  
  /* haeder */
  header .head-video { max-width:100%; }
  header .left , header .right { display:none; }
  header video { object-fit:cover; z-index:-1; position:relative; }
  
  /* sec01 */
  #sec01 { display:block; text-align:left; }
  
  /* sec02 */
  #sec02 { padding:4rem 0 0 0; background:url(/img/brand/summer_milk/back-sp.jpg); min-height:100vh; margin:0; }
  #sec02 .inner { padding:0; }
  #sec02 ul { width:70%; margin:0 auto; }
  #sec02 ul li {}
  #sec02 ul li:first-child { padding:0 2rem; }
  #sec02 ul li:last-child { padding:0 6rem; }
  #sec02 .scroll { display:none; }
  #sec02 .cow { left:-30vw; bottom:-20vh; }
  
  /* sec03 */
  #sec03 {}
  #sec03 p span.milk1 { left:50%; }
  #sec03 p span.milk2 { right:97%; max-width:12rem; }
  #sec03 ul {}
  #sec03 ul li span { display:flex; }
    
  /* sec04 */
  #sec04 { background:url(/img/brand/summer_milk/back-sp2.png); background-repeat:no-repeat; background-position:50% 50%; background-size:cover; }
  #sec04 ul { padding-bottom:5rem; }
  
  /* sec05 */
  #sec05 .text { max-width:80%; margin:0 auto; }
  #sec05 .text img { width:100%; }
  #sec05 .cow { top:-40%; right:-20%; }
  
  /* sec07 */
  #sec07 { position:relative; z-index:999; height:100%; }
  #sec07 .inner { background:none; height:100%; }
  #sec07 .img { display:none; }
  #sec07 .sp-img { display:block; }
  /*#sec07 .img { height:auto; width:90%; position:absolute; bottom:0; left:50%; transform:translateX(-50%); }*/
  
}
@media screen and (max-width:768px){
  
  #sec05 .text { max-width:70%; }
  
  /* sec07 */
  #sec07 .img {  }
  #sec07 .img img { width:85%; margin:0 auto; }
  
}
@media screen and (max-width:600px){
  
  /* sec01 */
  #sec01 .inner { padding:0; margin:0; }
  #sec01 .head { margin:2rem; }
  #sec01 .head ul li.btn img { display:block; width:70%; margin:auto; }
  
  /* sec02 */
  #sec02 .fp-tableCell { vertical-align:top; }
  #sec02 ul { width:100%; padding-bottom:10rem; }
  #sec02 ul li:first-child { padding:0 4rem 0 2rem; }
  #sec02 .cow { transform:rotate(0); max-width:95%; left:-35%; bottom:-33%; }
  
  /* sec03 */
  #sec03 p span.milk1 { left:76%; bottom:-7%; max-width:60%; }
  #sec03 p span.milk2 { right:98%; max-width:7rem; }
  #sec03 ul li span img { width:50%; }
  
  /* sec04 */
  #sec04 ul li:last-child { padding:0 6rem; }
  
  /* sec05 */
  #sec05 .text { max-width:100%; padding:0; }
  #sec05 .cow { top:-32%; right: -17%; }
  
  /* sec06 */
  #sec06 .video { height:100%; overflow:auto; }
  #sec06 .video video { top:50%; }
  
  /* sec07 */
  #sec07 { width:100vw; display:block; }
  #sec07 .img {  }
  #sec07 .img img { width:100%; height:85%; object-fit:cover; object-position:bottom; }
  
}
@media screen and (max-width:375px){
  
  /* sec02 */
  #sec02 .cow { max-width: 70%; left: -20%; bottom: -23%; }
  
  /* sec03 */
  #sec03 p span.milk2 { right:97%; }
  
  /* sec05 */
  #sec05 .text { max-width:100%; padding:0; }
  
  /* sec07 */
  #sec07 .img img { height:95%; }
  
}