@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

html {
  font-size: 62.5%;
  height: 100%;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", "verdana", sans-serif;
}

body {
  font-size: 1.6rem;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", "verdana", sans-serif;
  color: #333333;

}


#granola2021 {
  position: relative;
}
#granola2021 main {
  width: 100%;
  height: 100vh;
  position:absolute;
  /* top:0; */
  /* left: 0; */
  background: #000;
}
#granola2021 section {
  position:absolute;
  height:100%;
  width:100%;
}


#granola2021 section.sec01 {
  background: url("../img/sec01_bg.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: 7;
}
.s #granola2021 section.sec01 {
  background: url("../img/sec01_bg_sp.jpg") no-repeat;
  background-size: cover;
  background-position: center center;  
}
#granola2021 section.sec02 {
  background: url("../img/sec02_bg.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: 6;
}
.s #granola2021 section.sec02 {
  background: url("../img/sec02_bg_sp.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
}
#granola2021 section.sec03 {
  background: url("../img/sec03_bg.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: 5;
}
.s #granola2021 section.sec03 {
  background: url("../img/sec03_bg_sp.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
}
#granola2021 section.sec04 {
  background: url("../img/sec04_bg.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: 4;
}
.s #granola2021 section.sec04 {
  background: url("../img/sec04_bg_sp.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
}
#granola2021 section.sec05 {
  background: url("../img/sec05_bg.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: 3;
}
.s #granola2021 section.sec05 {
  background: url("../img/sec05_bg_sp.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
}
#granola2021 section.sec06 {
  background: url("../img/sec06_bg.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: 2;
}
.s #granola2021 section.sec06 {
  background: url("../img/sec06_bg_sp.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
}
#granola2021 section.sec07 {
  background: url("../img/sec07_bg.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: 1;
}
.s #granola2021 section.sec07 {
  background: url("../img/sec07_bg_sp.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
}


#granola2021 .section-inner-item {
  position: absolute;
  opacity : 0;
  transition : all 2000ms;
  -ms-filter: blur(6px);
  filter: blur(6px);
}
#granola2021 .section-inner-item img {
  /* width: 100%; */
}
.s #granola2021 .section-inner-item img {
  width: 100%;
}
#granola2021 .section-inner-item._fadein{
	opacity : 1;
  -ms-filter: blur(0px);
  filter: blur(0px);
}

/*******sec01*******/
#granola2021 section.sec01 .sec01-item01 {
  top:20px;
  left: 20px;
}
#granola2021 section.sec01 .sec01-item01 {
  top:20px;
  left: 20px;
}
#granola2021 section.sec01 .sec01-item02 {
  top: 0.588%;
  left: 50%;
  transform: translate(-50%, -0.588%);
  -webkit-transform: translate(-50%, -0.588%);
  -ms-transform: translate(-50%, -0.588%);
  /* width: 58.052%; */
}
.s #granola2021 section.sec01 .sec01-item02 {
  top: 17%;
  width: 77.813%;
  z-index: 3;
}

.s #granola2021 section.sec01 .sec01-item03 {
  width: 48%;
  top: 73%;
  left: 66%;
  transform: translate(-50%, -70%);
  -webkit-transform: translate(-50%, -70%);
  -ms-transform: translate(-50%, -70%);
  z-index: 2;
}
#granola2021 section.sec01 .sec01-item04 {
  bottom: 80px;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  animation: baloon 1.8s linear 0s infinite;
}

#granola2021 section.sec01 .sec01-item04  > img {
  width: 90%;
}

.s #granola2021 section.sec01 .sec01-item04 {
  bottom: 40px;
  text-align: center;
}

.s #granola2021 section.sec01 .sec01-item04  > img {
  width: 60%;
}

@keyframes baloon {
    0% { transform: translate(-50%,0);opacity: 1; }
    100% { transform: translate(-50%,20px);opacity: 0; }
}



/*******sec02*******/
#granola2021 section.sec02 .sec02-item01 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  /* width: 76.664%; */
}
.s #granola2021 section.sec02 .sec02-item01 {
  width: 76.664%;
}


/*******sec03*******/
#granola2021 section.sec03 .sec03-item01 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  /* width: 37.408%; */
  /* max-width: 809px; */
}
.s #granola2021 section.sec03 .sec03-item01 {
  width: 84.333%;
}

#granola2021 .sec03-item01-btn-wrap {
  width: 560px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
#granola2021 .sec03-item01-btn-position {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#granola2021 .sec03-item01-btn {
  margin-top: -120px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  width: 74%;
  margin-left: 20px;
  margin-right: 20px;
}
.s #granola2021 .sec03-item01-btn-wrap {
  width: 74%;
}
.s #granola2021 .sec03-item01-btn-position div {
  width: 45%;
}
.s #granola2021 .sec03-item01-btn {
  margin-top: -120px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.s #granola2021 .sec03-item01-btn {
  /* top: 73%; */
  /* width: 42.666%!important; */
  margin-top: -70px;
}
#granola2021 .sec03-item01-btn-ripples {
  position: absolute;
  /* bottom: 40px; */
  bottom: 137.5%;
  left: -55%;
  right: 0;
  margin: auto;
  background: rgba(211, 210, 210, 0.414);
  width: 200px;
  height: 75px;
  border-radius: 52px;
  animation: light 2s linear 0s infinite;
}
#granola2021 .sec03-item01-btn-ripples._left {
  position: absolute;
  /* bottom: 40px; */
  bottom: 137.5%;
  left: -55%;
  right: 0;
  margin: auto;
  background: rgba(211, 210, 210, 0.414);
  width: 200px;
  height: 75px;
  border-radius: 52px;
  animation: light 2s linear 0s infinite;
}
#granola2021 .sec03-item01-btn-ripples._right {
  position: absolute;
  /* bottom: 40px; */
  bottom: 137.5%;
  right: -55%;
  left: 0;
  margin: auto;
  background: rgba(211, 210, 210, 0.414);
  width: 200px;
  height: 75px;
  border-radius: 52px;
  animation: light 2s linear 0s infinite;
}
.s #granola2021 .sec03-item01-btn-ripples {
  /* width: 49.666%!important; */
  width: 60%!important;
  height: 80px;
  left:0;
  right:0;
  bottom:1%;
  margin:auto;
  padding-top:17.62%;
}
.s #granola2021 .sec03-item01-btn-ripples._left {
  /* width: 49.666%!important; */
    width: 50%!important;
    height: 50px;
    left: -54.5%;
    right: 0;
    bottom: 102%;
    margin: auto;
    padding-top: 17.62%;
}
.s #granola2021 .sec03-item01-btn-ripples._right {
  /* width: 49.666%!important; */
    width: 50%!important;
    height: 50px;
    right: -54.5%;
    left: 0;
    bottom: 86%;
    margin: auto;
    padding-top: 17.62%;
}
@keyframes light {
  0%   { transform: scale(0.8);opacity: 1; }
  100%   { transform: scale(1.2);opacity: 0; }
}
/* #granola2021 section.sec03 .sec03-item02 {
  top:  72.549%;
  left: 50%;
  transform: translate(-50%, -72.549%);
  -webkit-transform: translate(-50%, -72.549%);
  -ms-transform: translate(-50%, -72.549%);
  cursor: pointer;
  width: 13.469%;
}
.s #granola2021 section.sec03 .sec03-item02 {
  top: 73%;
  width: 30.666%;
} */

/*******sec04*******/
#granola2021 section.sec04 .sec04-item01 {
  top: 13.071%;
  left: 50%;
  transform: translate(-50%, -13.071%);
  -webkit-transform: translate(-50%, -13.071%);
  -ms-transform: translate(-50%, -13.071%);
  /* width: 52.049%; */
}
.s #granola2021 section.sec04 .sec04-item01 {
  top: 10%;
  width: 100%;
}

/*******sec05*******/
#granola2021 section.sec05 .sec05-item01 {
  top: 16.071%;
  left: 50%;
  transform: translate(-50%, -16.071%);
  -webkit-transform: translate(-50%, -16.071%);
  -ms-transform: translate(-50%, -16.071%);
  /* width: 39.897%; */
}
.s #granola2021 section.sec05 .sec05-item01 {
  top: 18%;
  width: 100%;
}

/*******sec06*******/
#granola2021 section.sec06 .sec06-item01 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  /* width: 11.932%; */
  width: 163px;
  text-align: center;
}
.s #granola2021 section.sec06 .sec06-item01 {
  width: 38%;
}
#granola2021 .sec06-item01-btn {
  margin-top:  40px;
  cursor: pointer;
}
.s #granola2021 .sec06-item01-btn {
  width: 35%!important;
  margin-top:20px;
}
/* #granola2021 section.sec06 .sec06-item02 {
  top: 49.673%;
  left: 50%;
  transform: translate(-50%, -49.673%);
  -webkit-transform: translate(-50%, -49.673%);
  -ms-transform: translate(-50%, -49.673%);
  width: 5.27%;
  cursor: pointer;
}
.s #granola2021 section.sec06 .sec06-item02 {
  top: 50%;
  width: 13%;
} */

/*******sec07*******/
#granola2021 section.sec07 .sec07-item01 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  /* width: 13.323%; */
}
.s #granola2021 section.sec07 .sec07-item01 {
  /* top: 33%; */
  width: 100%;
}
.s #granola2021 section.sec07 .sec07-item01-title {
  width: 42.533%;
}
#granola2021 section.sec07 .sec07-item01-share {
  margin-top:60px;
}
.s #granola2021 section.sec07 .sec07-item01-share {
  margin-top:40px;
}
.s #granola2021 section.sec07 .sec07-item01-share img {
  width: 20.8%;
}
#granola2021 section.sec07 .sec07-item01-sns {
  margin-top:40px;
}
.s #granola2021 section.sec07 .sec07-item01-sns {
  margin-top:20px;
}
#granola2021 section.sec07 .sec07-item01-sns a {
  margin-left:20px;
  text-decoration: none;
}
.s #granola2021 section.sec07 .sec07-item01-sns a {
  width:13.866%;
  display: inline-block;
}
#granola2021 section.sec07 .sec07-item01-sns a:first-child {
  margin-left:0;
}
/* #granola2021 section.sec07 .sec07-item02 {
  top: 57.066%;
  left: 50%;
  transform: translate(-50%, -57.066%);
  -webkit-transform: translate(-50%, -57.066%);
  -ms-transform: translate(-50%, -57.066%);
  cursor: pointer;
  width: 7.833%;
}
.s #granola2021 section.sec07 .sec07-item02 {
  top: 58%;
  width: 20.8%;
} */
/* #granola2021 section.sec07 .sec07-item02-sns {
  top: 65.333%;
  left: 50%;
  transform: translate(-50%, -65.333%);
  -webkit-transform: translate(-50%, -65.333%);
  -ms-transform: translate(-50%, -65.333%);
  width:100%;
  text-align: center;
} */
.s #granola2021 section.sec07 .sec07-item02-sns { 
  top: 68.333%;
}
#granola2021 section.sec07 .sec07-item02-sns a {
  /* width: 4.978%; */
  margin-left: 2.296%;
  cursor: pointer;
  display: inline-block;
}
/* #granola2021 section.sec07 .sec07-item03 a img {
  width: 100%;
}
.s #granola2021 section.sec07 .sec07-item03 a {
  width: 13.866%;
}
#granola2021 section.sec07 .sec07-item03 a:first-child {
  margin-left: 0;
} */
#granola2021 section.sec07 .sec07-item04 {
  bottom: 30px;
  font-size: 14px;
  text-align: center;
  color: #b2a7a1;
  width: 100%;
}


#granola2021 .topFixArea {
  position: fixed;
  top:70px;
  right: 10px;
  z-index: 9;
  display: flex;
  align-items: center;
}
#granola2021 .topFixArea .sound {
  cursor: pointer;
}


#granola2021 .pagenation {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index:10;
}
.s #granola2021 .pagenation {
  right: 20px;
}
#granola2021 .pagenation li {
  width: 12px;
  height: 8px;
  background: url("../img/nav.png")no-repeat;
  margin-top:20px;
}
.s #granola2021 .pagenation li {
  margin-top:10px;
}

#granola2021 .pagenation li:first-child {
  margin-top:0;
}
#granola2021 .pagenation li._active {
  background: url("../img/nav_active.png")no-repeat;
}




#granola2021 .musicArea {
  width: 100%;
  height: 100%;
  position:fixed;
  top:0;
  left: 0;
  background: url("../img/sound_bg.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
}
#granola2021 .musicArea .musicArea-inner {
  opacity: 0;
  transition : all 2000ms;
  -ms-filter: blur(6px);
  filter: blur(6px);
}
#granola2021 .musicArea .musicArea-inner._fadeIn {
	opacity : 1;
  -ms-filter: blur(0px);
  filter: blur(0px);
}
.s #granola2021 .musicArea {
  background: url("../img/sound_bg_sp.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
}
#granola2021 .musicArea-text2 {
  text-align: center;
  margin-top: 75px;
}
.s #granola2021 .musicArea-text2 {
  margin-top: 35px;
}
#granola2021 .musicArea-btnArea {
  text-align: center;
  margin-top: 40px;
}
.s #granola2021 .musicArea-btnArea {
  margin-top: 20px;
}
#granola2021 .musicArea-btnArea img {
  cursor: pointer;

}



#granola2021 .modal {
  display: none;
  position: fixed;
  left: 0;
  top:0;
  width:100%;
  height: 100%;
  z-index: 12;
}
#granola2021 .modal-bg {
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.8);
}
#granola2021 .modal .modal-inner {
  width: 860px;
  height: 521px;
  position: absolute;
  top:  50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.s #granola2021 .modal .modal-inner {
  width: 85%;
  height: auto;
}
#granola2021 .modal .modal-close {
  position: absolute;
  top:-15px;
  right:-15px;
  cursor: pointer;
}
.s #granola2021 .modal .modal-close {
  top:-20px;
  right:-20px;
}
#granola2021 .modal .modal-item01 {
  display: none;
}
#granola2021 .modal .modal-item01 img {
  width: 100%;
}
#granola2021 .modal .modal-item02 {
  display: none;
}
#granola2021 .modal .modal-item02 img {
  width: 100%;
}
#granola2021 .modal .modal-item03 {
  display: none;
  width:100%;              /*横幅いっぱいにwidthを指定*/
  padding-bottom: 56.25%;  /*高さをpaddingで指定(16:9)*/
  height:0px;              /*高さはpaddingで指定するためheightは0に*/
  position: relative;

}
#granola2021 .modal .modal-item03 iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}