@charset "UTF-8";


.header-logo {
  opacity: 0;
}


.main-visual {
  position: relative;
  margin-bottom: 88px;


}


.fade {
  max-width: 90%;
  margin: 0 auto 0px;
  padding: 0;
  position: relative;
}

.fade img {
  width: 100%;
  height: 600px;
  object-fit: cover;
}

.h1-title {
  width: 260px;
  position: absolute;
  bottom: 8px;
  left: 82px;
  z-index: 10;
}

/*------------ 

扉

--------------*/

.door_cover {
  position: fixed;
  background-color: #fff;
  width: 100vw;
  height: 100vh;
  z-index: 1000;

}

.door {

  width: 100%;
  height: 100%;
  padding-top: 108px;

}

.door-inner {
  width: 500px;
  margin: 0 auto;
}

.door-img {
  position: relative;
}

.closedoor {
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 500px;
  padding-top: 320px;

}


.opendoor {
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 500px;
  padding-top: 320px;
  opacity: 0;
  transition: all 4.5s ease;
}

.opendoor.active {
  opacity: 1 !important;
}

.door-text {
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  padding-top: 400px;
}



/*------------ 

//////扉

--------------*/



/* -------

導入

----------*/

.introduction {
  margin-bottom: 120px;
}

.introduction-inner {
  max-width: 988px;
  margin: 0 auto;
}

.intro-bg {
  background-image: url(../images/home/bg_senga@2x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 510px;

}

.text-inner {
  position: relative;
  padding-top: 100px;
  padding-bottom: 120px;
  max-width: 580px;
  margin: 0 auto;

}

.introduction-title {
  margin-bottom: 44px;
}

.introduction-article {
  position: absolute;
  top: 100px;
  right: 0;
  z-index: 5;
}

.intro-bg2 {
  position: absolute;
  top: -32px;
  right: -22px;
  z-index: 0;
  width: 100%;
}

.introduction-text {
  margin-bottom: 48px;
}


/* -------

エピソード

----------*/

/* .episode{
  margin-bottom: 120px;
}

.episode-contents{
  margin-bottom: 72px;
} */


/* -------

新着図鑑

----------*/

.new {
  padding-bottom: 120px;
  background-image: url(../images/common/suisai_bg02@2x.png), url(../images/common/suisai_bg03@2x.png);
  background-position: top 83% left 0%, bottom -6% left 5%;
  background-size: 32%;
  background-repeat: no-repeat;
}

.new-flex {
  display: flex;
  justify-content: space-between;
}



/* -------

図鑑

----------*/



.book {
  margin-bottom: 120px;
  background-image: url(../images/common/suisai_bg04_r@2x\ .png);
  background-position: top 62% right 0%;
  background-size: 32%;
  background-repeat: no-repeat;
}

.book-inner {
  max-width: 830px;
  margin: 0 auto;
}


.bookshelf-position {
  position: relative;
}

.book-pc {
  width: 766px;
}

.book-icon_1 {
  width: 172px;
  position: absolute;
  top: 68px;
  right: 466px;
}

.book-hover_1 {
  width: 132px;
  position: absolute;
  top: 78px;
  right: 486px;
  opacity: 0;
  transition: all 0.4s ease;
}

.book-hover_1:hover {
  opacity: 1;
}

.book-icon_2 {
  width: 172px;
  position: absolute;
  top: 68px;
  right: 270px;
}

.book-hover_2 {
  width: 132px;
  position: absolute;
  top: 78px;
  right: 290px;
  opacity: 0;
  transition: all 0.3s ease;
}

.book-hover_2:hover {
  opacity: 1;
}

.book-icon_3 {
  width: 172px;
  position: absolute;
  top: 288px;
  right: 412px;
}

.book-hover_3 {
  width: 132px;
  position: absolute;
  top: 298px;
  right: 432px;
  opacity: 0;
  transition: all 0.3s ease;
}

.book-hover_3:hover {
  opacity: 1;
}

.book-icon_4 {
  width: 172px;
  position: absolute;
  top: 288px;
  right: 210px;
}

.book-hover_4 {
  width: 132px;
  position: absolute;
  top: 298px;
  right: 230px;
  opacity: 0;
  transition: all 0.3s ease;
}

.book-hover_4:hover {
  opacity: 1;
}

.book-icon_5 {
  width: 172px;
  position: absolute;
  top: 512px;
  right: 306px;
}

.book-hover_5 {
  width: 132px;
  position: absolute;
  top: 524px;
  right: 328px;
  opacity: 0;
  transition: all 0.3s ease;
}

.book-hover_5:hover {
  opacity: 1;
}



@media screen and (max-width:767px) {
  /* スマホ向け */

  .header-logo {
    opacity: 1;
  }

  .fade img {
    height: 656px;
  }

  .main-visual {
    margin-bottom: 12px;
  }

  .door {
    padding-top: 124px;
  }

  .door-inner {
    width: 320px;
    margin: 0 auto;
  }

  .door-text {
    padding-top: 370px;
  }


  /*-------- 

  導入
  
  ----------*/

  .introduction {
    margin-bottom: 182px;
  }

  .intro-bg {
    background-image: url(../images/home/bg_senga_sp@2x.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .introduction-inner {
    width: 100%;
    margin: 0 auto;
  }

  .intro-bg2 {
    position: absolute;
    top: 228px;
    right: 7px;
    z-index: 0;
    width: 100%;
  }

  .introduction-article {
    top: 34px;
    right: 6%;
  }

  .introduction-title {
    margin-bottom: 194px;
  }

  .introduction-shadow {
    text-shadow: 1px 1px 3px #fff;
  }

  .introduction-text {
    letter-spacing: 0.03em;
    margin-bottom: 28px;
  }

  /*-------- 

  ///導入
  
  ----------*/



  .new-flex {
    display: block;

  }

  .new {
    background-position: top 60% left 0%, bottom 7% left 214%;
    background-size: 72%;
  }

  /* -----------

図鑑

-------------*/

  .book {
    background-size: 132%;
  }

  .book-inner {
    max-width: 94%;
    margin: 0 auto;
  }


  .book-icon_1 {
    width: 33%;
    top: 11%;
    right: 52%;
  }

  .book-hover_1 {
    width: 25%;
    top: 12%;
    right: 56%;
  }

  .book-icon_2 {
    width: 33%;
    top: 11%;
    right: 18%;
  }

  .book-hover_2 {
    width: 25%;
    top: 12%;
    right: 22%;
  }

  .book-icon_3 {
    width: 33%;
    top: 42%;
    right: 40%;
  }

  .book-hover_3 {
    width: 25%;
    top: 43%;
    right: 44%;
  }


  .book-icon_4 {
    width: 33%;
    top: 42%;
    right: 9%;
  }

  .book-hover_4 {
    width: 25%;
    top: 43%;
    right: 13%;
  }


  .book-icon_5 {
    width: 33%;
    top: 73%;
    right: 23%;
  }

  .book-hover_5 {
    width: 25%;
    top: 74%;
    right: 27%;
  }



  /* -----------

////図鑑

-------------*/

}