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

.inner{position: relative; margin-top: 35px;}

.inner p.logo {
  position: absolute;
  width: 84px;
  top:-5px;
  left: 23px;
}

#top header{margin-bottom: 0;}
@media screen and (max-width: 480px) {
.inner p.logo {
    width: 46px;
    top: -28px;
    left: 10px;
  }
 header{min-height: 15px;}
}


#hero{
  background: linear-gradient(180deg, #e34291 0px, #e34291 400px, #fff 400px, #fff 100%);}

#hero h1{width: 197px; margin: auto; padding: 45px 0 25px;}
#hero .mv{width: 720px; margin: auto;}

#hero .lead{font-size: 16px; text-align: center; line-height: 32px; margin: 35px 0 60px;}

@media screen and (max-width: 768px) {
#hero .mv{width: 90%;}
#hero .lead{text-align: left; font-size: 15px; margin:35px 5% 50px; }
}

#timeline .logo{width: 113px; margin: auto;}
#timeline h2{width: 130px; margin: 20px auto 35px;}
#timeline .line{max-width: 1100px; margin: auto;}

#timeline .count{width: 1048px; margin: 70px auto 20px; display: flex; justify-content: space-between;}
#timeline .count li{width: 168px;}

#timeline .note{font-size: 14px; text-align: center;}

@media screen and (max-width: 768px) {
#timeline h2{width: 80%;}
#timeline .count{width: 92%; flex-wrap: wrap; justify-content: center;}
#timeline .count li{width: 46%;  margin: 0 2% 10px; }

}


#aruaru{background: #e34291; padding: 66px 0 78px; margin: 60px auto ; color: #fff;}
#aruaru h2{width: 140px; margin: auto;}
#aruaru .lead{text-align: center; margin: 35px 0 25px;}
#aruaru .mv{width:  400px; margin: 0 auto 45px;}

#aruaru .comment{display: flex; justify-content: space-between; width: 880px; margin: auto;}
#aruaru .comment li{width:420px;}

#aruaru .note{font-size: 16px; text-align: center;}

#aruaru .snsicon{display: flex; justify-content: space-between; width: 182px; margin: 30px auto 0;}
#aruaru .snsicon li{width: 37px;}

@media screen and (max-width: 768px) {

#aruaru .mv{width:80%;}
#aruaru .comment{display: block;  width: 100%; }
#aruaru .comment li{width:calc(100% - 10px); margin-left: 8px;}
}


#photo{max-width: 1100px; margin: auto; padding: 85px 0 ;}
#photo h2{width: 186px; margin: 0 auto 35px}

#photo ul{position: relative;}
#photo .slick-prev,
#photo .slick-next{position: absolute;z-index: 9;   top: 50%;    transform: translateY(-50%); width: 40px;}

#photo .slick-prev{left: 11%; }
#photo .slick-next{right: 11%; }

#photo ul li{margin: 0 5px;}

#photo .slick-slide {opacity: 0.5;}
#photo .slick-active{opacity: 1;}

@media screen and (max-width: 768px) {
#photo .slick-prev,
#photo .slick-next{width: 30px;}
}