@charset "UTF-8";
/* CSS Document */

/* comment.css */

@media only print, only screen and (min-width: 18.75em){

#main{
  height: 420vh;
  background: url("../img/bg_comment_sp.jpg") center top no-repeat;
  background-size: auto 100%;
}

#commentList{
  color: #fff;
}

#commentList li{
  margin-bottom: 50px;
  text-align: center; 
  transform: translate3d(0,20%,0);
  opacity: 0;
  -webkit-transition: 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

#commentList li.active{
  transform: translate3d(0,0,0);
  opacity: 1;
  -webkit-transition: 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

#commentList li:last-child{
  margin-bottom: 0;
}

#commentList h3{
  margin-bottom: 10px;
  font-family: a-otf-midashi-mi-ma31-pr6n, serif;
  font-size: 4.6vw;
  line-height: 1.6;
  letter-spacing: 0.05em;
  font-feature-settings: "palt" 1;
}

#commentList h4{
  font-size: 3vw;
}

#footer{
  background: #fff;
}


}

@media only print, only screen and (min-width: 1000px){

#main{
  height: 260vw;
  background: url("../img/bg_comment.jpg") center bottom no-repeat;
  background-size: 100% auto;
}

#commentList{
  color: #fff;
}

#commentList li{
  margin-bottom: 50px;
  text-align: center; 
  transform: translate3d(0,20%,0);
  opacity: 0;
  -webkit-transition: 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

#commentList li.active{
  transform: translate3d(0,0,0);
  opacity: 1;
  -webkit-transition: 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

#commentList li:last-child{
  margin-bottom: 0;
}

#commentList h3{
  margin-bottom: 10px;
  font-family: a-otf-midashi-mi-ma31-pr6n, serif;
  font-size: 1.6vw;
  line-height: 1.6;
  letter-spacing: 0.05em;
  font-feature-settings: "palt" 1;
}

#commentList h4{
  font-size: 15px;
}

#footer{
  background: #fff;
}

}