img{
  width: initial;
}

.bk-img {
  width: 100%;
}

.bb-custom-wrapper {
  position: relative;
  margin: 0 auto;
  text-align: center;
}

.bb-custom-wrapper .bb-bookblock {
  box-shadow: 0 12px 20px -10px rgba(81, 64, 49, 0.6);
}

.bb-custom-wrapper h3 {
  font-size: 1.4em;
  font-weight: 300;
  margin: 0.4em 0 1em;
}

.bb-custom-wrapper nav {
  width: 100%;
  position: absolute;
  top: 40%;
  z-index: 1;
}

.pre_btn {
  position: absolute;
  left: 2rem;
}

.pre_btn li,
.post_btn li {
  margin: 0.8rem 0;
}

.post_btn {
  position: absolute;
  right: 2rem;
}

#bb-custom-wrapper.bb-custom-wrapper-page-first .pre_btn a img:first-of-type,
#bb-custom-wrapper.bb-custom-wrapper-page-last  .post_btn a img:first-of-type,
#bb-custom-wrapper:not(.bb-custom-wrapper-page-first) .pre_btn a img:last-of-type,
#bb-custom-wrapper:not(.bb-custom-wrapper-page-last) .post_btn a img:last-of-type {display: none;}

#bb-custom-wrapper:not(.bb-custom-wrapper-page-first) .pre_btn a,
#bb-custom-wrapper:not(.bb-custom-wrapper-page-last) .post_btn a {cursor: pointer;}

/* No JS */
.no-js .bb-custom-wrapper {
  height: auto;
}

.no-js .bb-custom-content {
  height: 470px;
}

.bb-bookblock {
  width: 1020px;
  height: 596px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  -webkit-perspective: 1300px;
  perspective: 1300px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bb-page {
  position: absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
}

.bb-vertical .bb-page {
  width: 50%;
  height: 100%;
  left: 50%;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}

.bb-horizontal .bb-page {
  width: 100%;
  height: 50%;
  top: 50%;
  -webkit-transform-origin: center top;
  transform-origin: center top;
}

.bb-page>div,
.bb-outer,
.bb-content,
.bb-inner {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bb-vertical .bb-content {
  width: 200%;
}

.bb-horizontal .bb-content {
  height: 200%;
}

.bb-page>div {
  width: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.bb-vertical .bb-back {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.bb-horizontal .bb-back {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}

.bb-outer {
  width: 100%;
  overflow: hidden;
  z-index: 999;
}

.bb-overlay,
.bb-flipoverlay {
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.bb-flipoverlay {
  background-color: rgba(0, 0, 0, 0.2);
}

.bb-bookblock.bb-vertical>div.bb-page:first-child,
.bb-bookblock.bb-vertical>div.bb-page:first-child .bb-back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.bb-bookblock.bb-horizontal>div.bb-page:first-child,
.bb-bookblock.bb-horizontal>div.bb-page:first-child .bb-back {
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

/* Content display */
.bb-content {
  background: #fff;
}

.bb-vertical .bb-front .bb-content {
  left: -100%;
}

.bb-horizontal .bb-front .bb-content {
  top: -100%;
}

/* Flipping classes */
.bb-vertical .bb-flip-next,
.bb-vertical .bb-flip-initial {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.bb-vertical .bb-flip-prev {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.bb-horizontal .bb-flip-next,
.bb-horizontal .bb-flip-initial {
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

.bb-horizontal .bb-flip-prev {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

.bb-vertical .bb-flip-next-end {
  -webkit-transform: rotateY(-15deg);
  transform: rotateY(-15deg);
}

.bb-vertical .bb-flip-prev-end {
  -webkit-transform: rotateY(-165deg);
  transform: rotateY(-165deg);
}

.bb-horizontal .bb-flip-next-end {
  -webkit-transform: rotateX(15deg);
  transform: rotateX(15deg);
}

.bb-horizontal .bb-flip-prev-end {
  -webkit-transform: rotateX(165deg);
  transform: rotateX(165deg);
}

.bb-item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background: #fff;
  overflow: hidden;
}

/* No JS */
.no-js .bb-bookblock,
.no-js ul.bb-custom-grid li {
  width: auto;
  height: auto;
}

.no-js .bb-item {
  display: block;
  position: relative;
}

/* Animation */
/*絵本1-ページ目*/
.ehon01-1 {
  width: 130px;
  position: absolute;
  bottom: 0;
  left: 160px;
  animation: fadeIn 7s backwards;
  animation-iteration-count: infinite;
  animation-delay: 4s;
}

@keyframes fadeIn {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

.ehon01-2-1 {
  position: absolute;
  bottom: 8px;
  left: 42px;
  width: 27px;
}

.ehon01-2-box {
  position: absolute;
  bottom: 42px;
  left: 298px;
  cursor: pointer;
}

.ehon01-2-box .ehon01-2-1 {
  animation: ring 3s ease infinite;
  transform-origin: 50% 0%;
}

@keyframes ring {
  0% {
    transform: rotate(-5deg)
  }

  2.85714% {
    transform: rotate(5deg)
  }

  5.71429% {
    transform: rotate(-5deg)
  }

  8.57143% {
    transform: rotate(5deg)
  }

  11.42857% {
    transform: rotate(-10deg)
  }

  14.28571% {
    transform: rotate(10deg)
  }

  17.14286% {
    transform: rotate(-5deg)
  }

  20% {
    transform: rotate(5deg)
  }

  22.85714% {
    transform: rotate(-5deg)
  }

  25.71429% {
    transform: rotate(5deg)
  }

  28.57143% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(0deg)
  }
}

.ehon01-2-2 {
  position: relative;
  width: 70px;
}

.ehon01-3 {
  width: 85px;
  position: absolute;
  bottom: 104px;
  left: 352px;
  /*transition:1s;-webkit-transition:1s;*/
}

.ehon01-4 {
  position: absolute;
  bottom: 105px;
  left: 399px;
}

.ehon01-5 {
  width: 80px;
  position: absolute;
  bottom: 166px;
  right: 386px;
  animation: spin 4s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-20deg) translateY(7px);
  }

  100% {
    transform: rotate(0deg);
  }
}


.ehon01-6 {
  width: 94px;
  position: absolute;
  bottom: 39px;
  right: 110px;
  /*transition:transform 0.3s ease-out;*/
}

.ehon01-7 {
  position: absolute;
  bottom: 81px;
  left: 358px;
}


.ehon01-8 {
  width: 156px;
  height: 300px;
  position: absolute;
  bottom: 246px;
  left: 396px;
}



.ehon01-9 {
  width: 38px;
  position: absolute;
  right: 300px;
  bottom: 146px;
}

.ehon01-10 {
  width: 70px;
  position: absolute;
  top: 51px;
  left: 136px;
}

.ehon01-11 {
  width: 83px;
  position: absolute;
  top: 32px;
  right: 14px;
  z-index: 0;
}

.ehon01-12 {
  width: 30px;
  position: absolute;
  top: 51px;
  left: 16px;
}

.ehon01-13 {
  width: 25px;
  position: absolute;
  top: 108px;
  left: 428px;
}

.ehon01-14 {
  width: 17px;
  position: absolute;
  bottom: 277px;
  right: 82px;
}

.ehon01-15 {
  width: 61px;
  position: absolute;
  top: 86px;
  left: 0px;
}

.ehon01-16 {
  width: 72px;
  position: absolute;
  top: 154px;
  left: 0px;
}

.ehon01-17 {
  width: 132px;
  position: absolute;
  bottom: 205px;
  right: 0;
}

.ehon01-18 {
  width: 24px;
  position: absolute;
  top: 142px;
  right: 15px;
}

.ehon01-19 {
  width: 81px;
  position: absolute;
  top: 66px;
  right: 14px;
  z-index: 0;
}

.ehon01-txt01 {
  width: 400px;
  position: absolute;
  top: 42%;
  left: 14px;
  z-index: 0;
}

.ehon01-txt02 {
  width: 400px;
  position: absolute;
  top: 24%;
  right: 14px;
  z-index: 0;
}

.story {
  width: 90%;
  margin: 0 auto;
  max-width: 838px;
}

.story p {
  margin-bottom: 1rem;
}

.txt01 {
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: 700;
  font-style: normal;
}

.story p.story_link {
  margin-bottom: 0px;
}

.story p.story_link a {
  margin-bottom: 0px;
}




/*----------------------------max-width:1100px------------------------------*/
@media screen and (max-width:1100px) {
  .bb-custom-wrapper nav {
    width: 100%;
    position: relative;
    z-index: 0;
    padding-top: 0.5rem;
  }

  .pre_btn {
    display: inline-block;
    position: relative;
    left: 0;
  }

  .post_btn {
    display: inline-block;
    position: relative;
    right: 0;
  }

  .pre_btn li,
  .post_btn li {
    margin: 0;
  }

  .pre_btn li:nth-child(1) {
    float: right;
    margin: 0 0.5rem;
  }

  .pre_btn li:nth-child(2) {
    float: left;
  }

  .post_btn li:nth-child(1) {
    float: left;
    margin: 0 0.5rem;
  }

  .post_btn li:nth-child(2) {
    float: right;
  }

  .bb-bookblock {
    width: 100%;
  }

  .bb-item .bk {
    width: 100%;
    height: 100%;
  }

  #container {
    min-width: 100%;
  }
}

/*----------------------------max-width:1024px------------------------------*/
@media screen and (max-width:1024px) {
  .bb-custom-wrapper {
    margin-top: 2rem;
  }

  .bb-bookblock {
    width: 980px;
    height: 573px;
  }

  .txt01 {
    position: absolute;
    top: 220px;
    line-height: 1.5;
    font-size:1.4rem;
    text-align: center;
    width: 100%;
    overflow: auto;
    height: 200px;
  }

  .txt01 p {
    margin-bottom: 0.8rem;
  }

  .ehon01-5 {
    width: 9%;
    top: 52.5%;
    right: 36%;
    bottom: initial;
  }

  .ehon01-8 {
    width: 18%;
    top: 18%;
    left: 38%;
    bottom: initial;
    height: 41%;
  }

  .ehon01-13 {
    width: 3%;
    top: 20%;
    left: 40%;
  }
}



/*----------------------------max-width:768px------------------------------*/
@media screen and (max-width:768px) {
  .bb-custom-wrapper {
    margin: 0 auto;
  }

  /* .bb-item.ehon-02 {
    height: 103%;
  } */

  .bb-custom-wrapper .bb-bookblock {
    box-shadow: none;
  }

  .bb-bookblock {
    width: 730px;
    height: 627px;
  }

  .txt01 {
    position: absolute;
    top: 440px;
  }

  .ehon01-1 {
    width: 13%;
    top: 313px;
    left: 16%;
    bottom: initial;
  }

  .ehon01-2-box {
    width: 8%;
    top: 50%;
    left: 29%;
    cursor: none;
    bottom: initial;
  }

  .ehon01-2-1 {
    width: 50%;
    top: 55%;
    left: 55%;
    bottom: initial;
  }

  .ehon01-2-2 {
    width: 100%;
  }

  .ehon01-3 {
    width: 8%;
    top: 46%;
    left: 34%;
    bottom: initial;
  }

  .ehon01-4 {
    width: 5%;
    top: 50%;
    left: 39%;
    bottom: initial;
  }

  .ehon01-5 {
    width: 9%;
    top: 36%;
    right: 37%;
    bottom: initial;
  }

  .ehon01-6 {
    width: 10%;
    top: 44%;
    right: 10%;
    bottom: initial;
  }

  .ehon01-7 {
    width: 3%;
    top: 56%;
    left: 37%;
    bottom: initial;
  }

  .ehon01-8 {
    width: 16%;
    top: 8%;
    left: 36%;
    bottom: initial;
    height: 30%;
  }

  .ehon01-9 {
    width: 4%;
    top: 44%;
    right: 30%;
    bottom: initial;
  }

  .ehon01-10 {
    width: 8%;
    top: 5%;
    left: 12%;
  }

  .ehon01-11 {
    width: 10%;
    top: 2%;
    right: 2%;
  }

  .ehon01-12 {
    width: 4%;
    top: 6%;
    left: 2%;
  }

  .ehon01-13 {
    width: 5%;
    top: 10%;
    left: 35%;
  }

  .ehon01-14 {
    width: 2%;
    top: 33%;
    right: 8%;
    bottom: initial;
  }

  .ehon01-15 {
    width: 6%;
    top: 10%;
    left: 0;
  }

  .ehon01-16 {
    width: 8%;
    top: 17%;
    left: 0;
  }

  .ehon01-17 {
    width: 14%;
    top: 33%;
    right: 0;
    bottom: initial;
  }

  .ehon01-18 {
    width: 4%;
    top: 16%;
    right: 1%;
  }

  .ehon01-19 {
    width: 9%;
    top: 6%;
    right: 1%;
  }

  .interview_title {
    font-size: 18px;
  }
}


/*----------------------------max-width:720px------------------------------*/
@media screen and (max-width:720px) {
  .bb-bookblock {
    width: 340px;
    height: 62vh;
  }

  .txt01 {
    position: absolute;
    top: 220px;
  }
}

/*----------------------------max-width:680px------------------------------*/
@media screen and (max-width:680px) {
  .bb-bookblock {
    width: 380px;
    height: 52vh;
  }

  .txt01 {
    position: absolute;
    top: 242px;
  }
}

/*----------------------------max-width:430px------------------------------*/
@media screen and (max-width:430px) {
  .bb-bookblock {
    width: 380px;
    height: 430px;
  }

  .txt01 {
    position: absolute;
    top: 240px;
  }

  .ehon01-1 {
    width: 13%;
    top: 162px;
    left: 16%;
    bottom: initial;
  }

  .ehon01-2-1 {
    width: 50%;
    top: 55%;
    left: 55%;
    bottom: initial;
  }

  .ehon01-2-2 {
    width: 100%;
  }

  .ehon01-2-box {
    width: 8%;
    top: 41%;
    left: 29%;
    cursor: none;
    bottom: initial;
  }

  .ehon01-3 {
    width: 9%;
    top: 37%;
    left: 35%;
    bottom: initial;
  }

  .ehon01-4 {
    width: 5%;
    top: 42%;
    left: 40%;
    bottom: initial;
  }

  .ehon01-5 {
    width: 9%;
    top: 30%;
    right: 38%;
    bottom: initial;
  }

  .ehon01-6 {
    width: 10%;
    top: 36%;
    right: 11%;
    bottom: initial;
  }

  .ehon01-7 {
    width: 3%;
    top: 47%;
    left: 40%;
    bottom: initial;
  }

  .ehon01-8 {
    width: 15%;
    top: 9%;
    left: 38%;
    bottom: initial;
    height: 22%;
  }

  .ehon01-9 {
    width: 5%;
    top: 33.5%;
    right: 30%;
    bottom: initial;
  }

  .ehon01-10 {
    width: 8%;
    top: 4%;
    left: 13%;
  }

  .ehon01-11 {
    width: 10%;
    top: 2%;
    right: 2%;
  }

  .ehon01-12 {
    width: 5%;
    top: 4%;
    left: 2%;
  }

  .ehon01-13 {
    width: 5%;
    top: 10%;
    left: 35%;
  }

  .ehon01-14 {
    width: 2.5%;
    top: 25%;
    right: 8%;
    bottom: initial;
  }

  .ehon01-15 {
    width: 6%;
    top: 8%;
    left: 0;
  }

  .ehon01-16 {
    width: 8%;
    top: 15%;
    left: 0;
  }

  .ehon01-17 {
    width: 14%;
    top: 28%;
    right: 0;
    bottom: initial;
  }

  .ehon01-18 {
    width: 4%;
    top: 15%;
    right: 1%;
  }

  .ehon01-19 {
    width: 10%;
    top: 5%;
    right: 1%;
  }
}

/*----------------------------max-width:380px------------------------------*/
@media screen and (max-width:380px) {
  .bb-bookblock {
    width: 360px;
    height: 400px;
  }

  .txt01 {
    position: absolute;
    top: 220px;
  }

  .ehon01-1 {
    width: 13%;
    top: 154px;
    left: 16%;
    bottom: initial;
  }

  .ehon01-2-1 {
    width: 50%;
    top: 55%;
    left: 55%;
    bottom: initial;
  }

  .ehon01-2-2 {
    width: 100%;
  }

  .ehon01-2-box {
    width: 8%;
    top: 42%;
    left: 29%;
    cursor: none;
    bottom: initial;
  }

  .ehon01-3 {
    width: 9%;
    top: 37%;
    left: 35%;
    bottom: initial;
  }

  .ehon01-4 {
    width: 5%;
    top: 42%;
    left: 40%;
    bottom: initial;
  }

  .ehon01-5 {
    width: 9%;
    top: 30%;
    right: 38%;
    bottom: initial;
  }

  .ehon01-6 {
    width: 10%;
    top: 36%;
    right: 12%;
    bottom: initial;
  }

  .ehon01-7 {
    width: 3%;
    top: 48%;
    left: 38%;
    bottom: initial;
  }

  .ehon01-8 {
    width: 15%;
    top: 9%;
    left: 38%;
    bottom: initial;
  }

  .ehon01-9 {
    width: 5%;
    top: 34%;
    right: 30%;
    bottom: initial;
  }

  .ehon01-10 {
    width: 8%;
    top: 4%;
    left: 13%;
  }

  .ehon01-11 {
    width: 10%;
    top: 2%;
    right: 2%;
  }

  .ehon01-12 {
    width: 5%;
    top: 4%;
    left: 2%;
  }

  .ehon01-13 {
    width: 5%;
    top: 10%;
    left: 35%;
  }

  .ehon01-14 {
    width: 3%;
    top: 25%;
    right: 8%;
    bottom: initial;
  }

  .ehon01-15 {
    width: 6%;
    top: 9%;
    left: 0;
  }

  .ehon01-16 {
    width: 8%;
    top: 15%;
    left: 0;
  }

  .ehon01-17 {
    width: 14%;
    top: 27%;
    right: 0;
    bottom: initial;
  }

  .ehon01-18 {
    width: 4%;
    top: 16%;
    right: 1%;
  }

  .ehon01-19 {
    width: 10%;
    top: 6%;
    right: 1%;
  }
}

/*----------------------------max-width:360px------------------------------*/
@media screen and (max-width:360px) {
  .bb-bookblock {
    width: 340px;
    height: 390px;
  }

  .txt01 {
    position: absolute;
    top: 220px;
  }

  .ehon01-1 {
    width: 13%;
    top: 146px;
    left: 16%;
    bottom: initial;
  }

  .ehon01-2-1 {
    width: 50%;
    top: 55%;
    left: 55%;
    bottom: initial;
  }

  .ehon01-2-2 {
    width: 100%;
  }

  .ehon01-2-box {
    width: 8%;
    top: 39%;
    left: 29%;
    cursor: none;
    bottom: initial;
  }

  .ehon01-3 {
    width: 9%;
    top: 35%;
    left: 35%;
    bottom: initial;
  }

  .ehon01-4 {
    width: 5%;
    top: 39.6%;
    left: 40%;
    bottom: initial;
  }

  .ehon01-5 {
    width: 9%;
    top: 28%;
    right: 38%;
    bottom: initial;
  }

  .ehon01-6 {
    width: 10%;
    top: 34%;
    right: 11%;
    bottom: initial;
  }

  .ehon01-7 {
    width: 3%;
    top: 44%;
    left: 37%;
    bottom: initial;
  }

  .ehon01-8 {
    width: 15%;
    top: 8%;
    left: 38%;
    bottom: initial;
    height: 22%;
  }

  .ehon01-9 {
    width: 5%;
    top: 32%;
    right: 30%;
    bottom: initial;
  }

  .ehon01-10 {
    width: 8%;
    top: 4%;
    left: 13%;
  }

  .ehon01-11 {
    width: 10%;
    top: 2%;
    right: 2%;
  }

  .ehon01-12 {
    width: 5%;
    top: 4%;
    left: 2%;
  }

  .ehon01-13 {
    width: 5%;
    top: 10%;
    left: 35%;
  }

  .ehon01-14 {
    width: 2%;
    top: 23%;
    right: 8%;
    bottom: initial;
  }

  .ehon01-15 {
    width: 6%;
    top: 7%;
    left: 0;
  }

  .ehon01-16 {
    width: 8%;
    top: 14%;
    left: 0;
  }

  .ehon01-17 {
    width: 14%;
    top: 26%;
    right: 0;
    bottom: initial;
  }

  .ehon01-18 {
    width: 4%;
    top: 15%;
    right: 1%;
  }

  .ehon01-19 {
    width: 10%;
    top: 6%;
    right: 1%;
  }
}

/*----------------------------max-width:320px------------------------------*/
@media screen and (max-width:320px) {
  .bb-bookblock {
    width: 300px;
    height: 348px;
  }

  .txt01 {
    position: absolute;
    top: 190px;
  }

  .ehon01-1 {
    width: 13%;
    top: 129px;
    left: 16%;
    bottom: initial;
  }

  .ehon01-2-1 {
    width: 50%;
    top: 55%;
    left: 55%;
    bottom: initial;
  }

  .ehon01-2-2 {
    width: 100%;
  }

  .ehon01-2-box {
    width: 8%;
    top: 35%;
    left: 29%;
    cursor: none;
    bottom: initial;
  }

  .ehon01-3 {
    width: 9%;
    top: 31%;
    left: 34%;
    bottom: initial;
  }

  .ehon01-4 {
    width: 5%;
    top: 35%;
    left: 40%;
    bottom: initial;
  }

  .ehon01-5 {
    width: 9%;
    top: 24%;
    right: 40%;
    bottom: initial;
  }

  .ehon01-6 {
    width: 10%;
    top: 32%;
    right: 12%;
    bottom: initial;
  }

  .ehon01-7 {
    width: 3%;
    top: 40%;
    left: 40%;
    bottom: initial;
  }

  .ehon01-8 {
    width: 14%;
    top: 8%;
    left: 38%;
    bottom: initial;
    height: 18%;
  }

  .ehon01-9 {
    width: 6%;
    top: 27%;
    right: 30%;
    bottom: initial;
  }

  .ehon01-10 {
    width: 8%;
    top: 4%;
    left: 13%;
  }

  .ehon01-11 {
    width: 10%;
    top: 2%;
    right: 2%;
  }

  .ehon01-12 {
    width: 5%;
    top: 4%;
    left: 2%;
  }

  .ehon01-13 {
    width: 5%;
    top: 10%;
    left: 35%;
  }

  .ehon01-14 {
    width: 3%;
    top: 20%;
    right: 8%;
    bottom: initial;
  }

  .ehon01-15 {
    width: 6%;
    top: 6%;
    left: 0;
  }

  .ehon01-16 {
    width: 8%;
    top: 12%;
    left: 0;
  }

  .ehon01-17 {
    width: 14%;
    top: 23%;
    right: 0;
    bottom: initial;
  }

  .ehon01-18 {
    width: 5%;
    top: 13%;
    right: 1%;
  }

  .ehon01-19 {
    width: 10%;
    top: 5%;
    right: 1%;
  }
}




/* Animation */
/* 絵本 2ページ目 */
/* ゴミ箱の手前部分 */
.ehon02-trash {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}

/* ブタさんの手の動き */
.ehon02-pighund {
  width: 100%;
  position: absolute;
  top: 0;
  left: -0.5%;
  z-index: 9;
  animation-name: animePighumd;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-delay: 3s;
}

@keyframes animePighumd {
  100% {
    left: 0;
  }
}

/* ゴミ箱へ捨てられる物 */
.ehon02-in-trash {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  animation-name: animeInTrash;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-delay: 3s;
}

@keyframes animeInTrash {
  100% {
    top: 1%;
    left: 3%;
    transform: rotate(5deg);
  }
}

/* クエスチョン */
.ehon02-question1 {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  opacity: 0;
  animation-name: anime02;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-delay: 7.5s;
}

.ehon02-question2 {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  opacity: 0;
  animation-name: anime02;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-delay: 7.9s;
}

.ehon02-question3 {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  opacity: 0;
  animation-name: anime02;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-delay: 9s;
}

/* 汗 */
.ehon02-sweat1 {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  opacity: 0;
  animation-name: anime02;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-delay: 3.5s;
}

.ehon02-sweat2 {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  opacity: 0;
  animation-name: animeSweat2;
  animation-duration: 1.6s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-delay: 4s;
  transform: rotate(7deg);
}

@keyframes animeSweat2 {
  20% {
    opacity: 0.1;
    transform: rotate(6deg);
  }

  60% {
    opacity: 1;
    transform: rotate(0);
  }

  80% {
    opacity: 0.9;
    transform: rotate(0);
  }

  100% {
    opacity: 0.8;
    transform: rotate(0);
  }
}

.ehon02-1,
.ehon02-2,
.ehon02-3,
.ehon02-4,
.ehon02-5 {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  opacity: 0;
  animation-name: anime02;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

/* テレビ前の本が消える */
.ehon02-1 {
  animation-delay: 6s;
}

/* 左端の木の手前の本が消える */
.ehon02-2 {
  animation-delay: 8.5s;
}

/* 机の上の本が消える */
.ehon02-3 {
  animation-delay: 9.2s;
}

/* 椅子が消える */
.ehon02-4 {
  animation-delay: 10.3s;
}

/* 右奥の本が消える */
.ehon02-5 {
  animation-delay: 11.6s;
}

@keyframes anime02 {
  100% {
    opacity: 1;
  }
}

/* テキスト */
.ehon02-txt01 {
  width: 450px;
  position: absolute;
  top: 37%;
  left: 44px;
  z-index: 9;
}

.ehon02-txt02 {
  width: 390px;
  position: absolute;
  top: 33%;
  right: 80px;
  z-index: 9;
}


/* Animation */
/* 絵本 3ページ目 */

.ehon03-image {
  width: 100%;
  position: absolute;
  top: -1%;
  left: -3%;
  z-index: 8;
  animation-iteration-count: 1;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  animation-name: animeTrash;
  animation-duration: 3s;
}

.ehon03-1 {
  z-index: 7;
}

.ehon03-2 {
  z-index: 6;
}

.ehon03-3 {
  z-index: 5;
}

.ehon03-4 {
  z-index: 4;
}

.ehon03-5 {
  z-index: 3;
}

@keyframes animeTrash {
  100% {
    top: 0%;
    left: 0%;
  }
}


/*あひるさんがポイっと投げられる*/
.ehon03-ahiru {
  top: 1%;
  left: 3%;
  animation-name: throwAhiru;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-timing-function: ease-in;
}

@keyframes throwAhiru {
  20% {
    top: 1%;
    left: -5%;
  }

  100% {
    transform: translateX(-15%) translateY(50%);
    opacity: 0;
  }
}

/* 捨てられる物 */
.ehon03-katamari {
  top: 0%;
  left: 0%;
  animation-name: animeKatamari;
  animation-duration: 5s;
  animation-delay: 4s;
  opacity: 1;
}

@keyframes animeKatamari {

  /* 50% { top: 3%; left: 9%;}*/
  80% {
    transform: translateX(20%) translateY(30%) rotate(20deg);
  }

  100% {
    opacity: 0;
  }
}

/* 捨てられる物 */
.ehon03-bottom {
  animation-name: animeBottomTrash;
  animation-duration: 3s;
  animation-delay: 4s;
}

@keyframes animeBottomTrash {
  100% {
    top: 0%;
    left: 0%;
  }
}

/* テキスト */
.ehon03-txt01 {
  width: 425px;
  position: absolute;
  top: 58%;
  left: 52px;
  z-index: 9;
}

.ehon03-txt02 {
  width: 390px;
  position: absolute;
  top: 11%;
  right: 70px;
  z-index: 9;
}


/* Animation */
/* 絵本 4ページ目 */

/* 画像共通 */
.ehon04-image {
  width: 100%;
  position: absolute;
  z-index: 3;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  will-change: transform;
}

/* なまけもの */
.ehon04-1 {
  top: -1px;
  left: 0;
  animation: swing 5s linear infinite;
  animation-delay: 1500ms;
}

/* ブルドーザー */
.ehon04-2 {
  width: 418px;
  top: 61%;
  left: 40%;
  animation: moveforword 5s forwards, vehicleBehavior 1s infinite;
  animation-delay: 2s;
  animation-timing-function: linear;
  z-index: 2;
}

/* 地面 */
.ehon04-3 {
  width: 640px;
  top: 64%;
  left: 25%;
  animation-name: moveforword2;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-timing-function: linear;
  z-index: 1;
}

/* 旗 */
.ehon04-4 {
  display: block;
  width: 30px;
  height: 50px;
  overflow: hidden;
  top: 48%;
  left: 82%;
  background: url(/fauna/story/ehon/images/04/parts/flag.png) no-repeat left bottom / auto 100%;
  transform: rotate(-25deg);
  animation: flag 2s steps(2) infinite;
}

.ehon04-4 img {
  width: auto;
  height: 100%;
}

/* レッサーパンダ */
.ehon04-5 {
  width: 80px;
  top: 70%;
  left: 4%;
}

/* 汗1 */
.ehon04-6 {
  width: 50px;
  top: 79%;
  left: 75.5%;
  opacity: 0;
  animation: sweat 2s infinite, sweatForword1 2s infinite;
  animation-delay: 6s;
  transform: rotate(1deg);
}

/* 汗2 */
.ehon04-7 {
  width: 35px;
  top: 67.4%;
  left: 76%;
  opacity: 0;
  animation: sweat 2s infinite, sweatForword2 2s infinite;
  animation-delay: 7s;
  transform: rotate(1deg);
}

/* テキスト */
.ehon04-txt01 {
  width: 450px;
  position: absolute;
  top: 10%;
  left: 54px;
  z-index: 4;
}

.ehon04-txt02 {
  width: 320px;
  position: absolute;
  top: 23%;
  right: 30px;
  z-index: 4;
}

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

  /* なまけもの */
  .ehon04-1 {
    top: 0;
    left: 0.5vw;
    animation: swing_sp 5s linear infinite;
    animation-delay: 1500ms;
  }

  /* ブルドーザー */
  .ehon04-2 {
    width: 40vw;
    top: 34vw;
    left: 40vw;
    animation: moveforword_sp 6s forwards, vehicleBehavior 1s infinite;
    animation-delay: 2s;
  }

  /* 地面 */
  .ehon04-3 {
    width: 57.5vw;
    top: 37.5vw;
    left: 24.3vw;
    animation: moveforword2_sp 6s forwards;
    animation-delay: 2s;
  }

  /* 旗 */
  .ehon04-4 {
    display: block;
    width: 4vw;
    height: 7vw;
    overflow: hidden;
    top: 25.5vw;
    left: 79vw;
    background: url(/fauna/story/ehon/images/04/parts/flag.png) no-repeat left bottom / auto 100%;
    transform: rotate(-25deg);
    animation: flag_sp 2s steps(2) infinite;
  }

  /* レッサーパンダ */
  .ehon04-5 {
    width: 9vw;
    top: 37vw;
    left: 3vw;
  }

  /* 汗1 */
  .ehon04-6 {
    width: 8vw;
    top: 44vw;
    left: 73vw;
    opacity: 0;
    animation: sweat 2s infinite;
    animation-delay: 6s;
    transform: rotate(1deg);
  }

  /* 汗2 */
  .ehon04-7 {
    width: 6vw;
    top: 35vw;
    left: 74vw;
    opacity: 0;
    animation: sweat 2s infinite;
    animation-delay: 7s;
    transform: rotate(1deg);
  }

}

@keyframes swing {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-8deg) translateY(-25px);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes swing_sp {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-13deg) translateY(-6%);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes moveforword {
  0% {
    left: 40%;
    top: 61%;
  }

  100% {
    left: 16%;
    top: 51%;
  }
}

@keyframes moveforword_sp {
  0% {
    left: 40vw;
    top: 34vw;
  }

  100% {
    left: 16vw;
    top: 28vw;
  }
}

@keyframes moveforword2 {
  10% {
    transform: translate(0, 0) rotate(0deg);
    left: 23%;
  }

  20% {
    transform: translate(0, -1px)rotate(1deg);
    left: 20%;
    top: 62%;
  }

  40% {
    transform: translate(0, 0) rotate(0deg);
    left: 15%;
  }

  41.2% {
    transform: translate(0, 0) rotate(0deg);
    left: 15.2%;
  }

  60% {
    transform: translate(0, 0) rotate(-1deg);
    left: 11%;
    top: 59%;
  }

  60.2% {
    transform: translate(0, 0) rotate(-1deg);
    left: 11.2%;
  }

  70% {
    transform: translate(0, 0) rotate(0deg);
    left: 8%;
  }

  70.2% {
    transform: translate(0, 0) rotate(0deg);
    left: 8.2%;
  }

  90% {
    transform: translate(0, 0) rotate(-1deg);
    left: 3%;
  }

  90.2% {
    transform: translate(0, 0) rotate(-1deg);
    left: 3.2%;
  }

  95% {
    transform: translate(0, 0) rotate(0deg);
    left: 2%;
  }

  95.3% {
    transform: translate(0, 0) rotate(0deg);
    left: 2.1%;
  }

  99% {
    transform: translate(0, 0) rotate(0deg);
    left: 1.2%;
    top: 57.2%;
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
    left: 1%;
    top: 57%;
  }
}

@keyframes moveforword2_sp {
  0% {
    transform: translate(0, 0) rotate(-1deg);
    left: 25vw;
    top: 37vw;
  }

  20% {
    transform: translate(0, -1px)rotate(1deg);
  }

  50% {
    transform: translate(0, 0) rotate(0deg);
  }

  60% {
    transform: translate(0, 0) rotate(-1deg);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
    left: 0.5vw;
    top: 32vw;
  }
}

@keyframes vehicleBehavior {
  from {
    transform: translateY(-.15px) translateZ(3px) rotate(+.17deg);
  }

  to {
    transform: translateY(+.15px) translateZ(3px) rotate(-.17deg);
  }
}

@keyframes flag {
  0% {
    background-position: 0px 0;
  }

  100% {
    background-position: -61px 0;
  }
}

@keyframes flag_sp {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -8.4vw 0;
  }
}

@keyframes sweat {
  20% {
    opacity: 0.1;
    transform: rotate(2deg);
  }

  60% {
    opacity: 1;
    transform: rotate(0);
  }

  80% {
    opacity: 0.9;
    transform: rotate(0);
  }

  100% {
    opacity: 0.8;
    transform: rotate(0);
  }
}

@keyframes sweatForword1 {
  0% {
    top: 79%;
    left: 75.5%;
  }

  100% {
    top: 78%;
    left: 76.5%;
  }
}

@keyframes sweatForword2 {
  0% {
    top: 67.4%;
    left: 76%;
  }

  100% {
    top: 66.4%;
    left: 77%;
  }
}

/*----------------------------max-width:420px------------------------------*/
@media screen and (max-width:420px) {

  /* 旗 */
  .ehon04-4 {
    top: 25vw;
    left: 76vw;
  }

  /* 汗1 */
  .ehon04-6 {
    top: 40vw;
    left: 69vw;
  }

  /* 汗2 */
  .ehon04-7 {
    top: 35vw;
    left: 70vw;
  }

  @keyframes moveforword_sp {
    0% {
      left: 40vw;
      top: 34vw;
    }

    100% {
      left: 16vw;
      top: 25.8vw;
    }
  }

  @keyframes moveforword2_sp {
    0% {
      transform: translate(0, 0) rotate(-1deg);
      left: 25vw;
      top: 37vw;
    }

    20% {
      transform: translate(0, -1px)rotate(1deg);
    }

    50% {
      transform: translate(0, 0) rotate(0deg);
    }

    60% {
      transform: translate(0, 0) rotate(-1deg);
    }

    100% {
      transform: translate(0, 0) rotate(0deg);
      left: 0.5vw;
      top: 29.8vw;
    }
  }
}

/*----------------------------max-width:380px------------------------------*/
@media screen and (max-width:380px) {

  /* 旗 */
  .ehon04-4 {
    top: 25.5vw;
    left: 79vw;
  }

  /* 汗1 */
  .ehon04-6 {
    top: 44vw;
    left: 73vw;
  }

  /* 汗2 */
  .ehon04-7 {
    top: 35vw;
    left: 74vw;
  }

  @keyframes moveforword_sp {
    0% {
      left: 40vw;
      top: 34vw;
    }

    100% {
      left: 16vw;
      top: 28.5vw;
    }
  }

  @keyframes moveforword2_sp {
    0% {
      transform: translate(0, 0) rotate(-1deg);
      left: 25vw;
      top: 37vw;
    }

    20% {
      transform: translate(0, -1px)rotate(1deg);
    }

    50% {
      transform: translate(0, 0) rotate(0deg);
    }

    60% {
      transform: translate(0, 0) rotate(-1deg);
    }

    100% {
      transform: translate(0, 0) rotate(0deg);
      left: 0.5vw;
      top: 32.5vw;
    }
  }
}

/*----------------------------max-width:360px------------------------------*/
@media screen and (max-width:360px) {

  /* 旗 */
  .ehon04-4 {
    top: 26.3vw;
    left: 79vw;
  }

  /* 汗1 */
  .ehon04-6 {
    top: 44vw;
    left: 71.5vw;
  }

  /* 汗2 */
  .ehon04-7 {
    top: 35vw;
    left: 72vw;
  }

  @keyframes moveforword_sp {
    0% {
      left: 40vw;
      top: 34vw;
    }

    100% {
      left: 16vw;
      top: 27.3vw;
    }
  }

  @keyframes moveforword2_sp {
    0% {
      transform: translate(0, 0) rotate(-1deg);
      left: 25vw;
      top: 37vw;
    }

    20% {
      transform: translate(0, -1px)rotate(1deg);
    }

    50% {
      transform: translate(0, 0) rotate(0deg);
    }

    60% {
      transform: translate(0, 0) rotate(-1deg);
    }

    100% {
      transform: translate(0, 0) rotate(0deg);
      left: 0.5vw;
      top: 31.3vw;
    }
  }
}

/*----------------------------max-width:320px------------------------------*/
@media screen and (max-width:320px) {

  /* 旗 */
  .ehon04-4 {
    top: 25vw;
    left: 77vw;
  }

  /* 汗1 */
  .ehon04-6 {
    top: 41vw;
    left: 71vw;
  }

  /* 汗2 */
  .ehon04-7 {
    top: 35vw;
    left: 70vw;
  }

  @keyframes moveforword_sp {
    0% {
      left: 40vw;
      top: 34vw;
    }

    100% {
      left: 16vw;
      top: 26.5vw;
    }
  }

  @keyframes moveforword2_sp {
    0% {
      transform: translate(0, 0) rotate(-1deg);
      left: 25vw;
      top: 37vw;
    }

    20% {
      transform: translate(0, -1px)rotate(1deg);
    }

    50% {
      transform: translate(0, 0) rotate(0deg);
    }

    60% {
      transform: translate(0, 0) rotate(-1deg);
    }

    100% {
      transform: translate(0, 0) rotate(0deg);
      left: 0.5vw;
      top: 30.5vw;
    }
  }
}

/* Animation */
/* 絵本 5ページ目 */

/* 画像共通 */
.ehon05-image {
  width: 100%;
  position: absolute;
  z-index: 1;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  will-change: transform;
}

/* フクロウ */
.ehon05-1 {
  z-index: 3;
  top: 73%;
  left: 55.5%;
  width: 48px;
}

.ehon05-1.animating {animation: swingFukuro 5s linear infinite;}

@keyframes swingFukuro {

  0%,
  100% {
    -webkit-transform-origin: bottom center;
  }

  0% {
    transform: rotate(0deg);
  }

  33.3333% {
    transform: rotate(10deg);
  }

  66.6667% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* 文鳥 */
.ehon05-2 {
  z-index: 3;
  top: 75%;
  left: 50.3%;
  width: 20px;
}

.ehon05-2.animating {animation: swingBuncho 2s linear infinite;}

@keyframes swingBuncho {

  0%,
  100% {
    -webkit-transform-origin: bottom center;
  }

  0% {
    transform: rotate(0deg);
  }

  33.3333% {
    transform: rotate(-8deg);
  }

  66.6667% {
    transform: rotate(6deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* 鳥 */
.ehon05-3 {
  z-index: 2;
}

.ehon05-3.animating {animation: circleBirds 26s linear infinite;}

@keyframes circleBirds {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

/* 雲1 */
.ehon05-4 {
  z-index: 8;
}

/* 雲2 */
.ehon05-5 {
  z-index: 5;
}

/* 雲3 */
.ehon05-6 {
  z-index: 4;
}

.ehon05-4.animating,
.ehon05-5.animating,
.ehon05-6.animating {animation: fuwaCloud linear infinite;}

.ehon05-4.animating {animation-duration: 4s;}
.ehon05-5.animating {animation-duration: 8s;}
.ehon05-6.animating {animation-duration: 6s;}

@keyframes fuwaCloud {
  0% {
    transform: translateY(0);
  }

  33.3333% {
    transform: translateY(-8px);
  }

  66.6667% {
    transform: translateY(3px);
  }

  100% {
    transform: translateY(0);
  }
}

/* 空用の枠 */
.circleSky {
  z-index: 6;
  top: 4%;
  left: 24%;
  width: 560px;
  height: 560px;
  position: absolute;
}

.circleSky.animating {animation: circleSky 60s linear infinite;}

@keyframes circleSky {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 月 */
.ehon05-7 {
  z-index: 7;
  top: 4%;
  left: 82%;
  width: 164px;
  position: absolute;
}

.ehon05-7.animating {animation: circleSatellite 60s linear infinite;}

/* 太陽 */
.ehon05-8 {
  z-index: 7;
  top: 48%;
  left: -40%;
  width: 270px;
  position: absolute;
}

.ehon05-8.animating {animation: circleSatellite 60s linear infinite;}

@keyframes circleSatellite {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

/* テキスト */
.ehon05-txt01 {
  z-index: 9;
  top: 30%;
  left: 310px;
  width: 389px;
  position: absolute;
}

.ehon05-txt02 {
  z-index: 9;
  top: 48%;
  left: 360px;
  width: 298px;
  position: absolute;
}

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

  /* フクロウ */
  .ehon05-1 {
    top: 40.5vw;
    left: 53vw;
    width: 4.56vw;
  }

  /* 文鳥 */
  .ehon05-2 {
    top: 42.2vw;
    left: 48.2vw;
    width: 1.95vw;
  }

  @keyframes fuwaCloud {
    0% {
      transform: translateY(0);
    }

    33.3333% {
      transform: translateY(-1.04vw);
    }

    66.6667% {
      transform: translateY(0.39vw);
    }

    100% {
      transform: translateY(0);
    }
  }

  /* 空用の枠 */
  .circleSky {
    top: 6vw;
    left: 21vw;
    width: 52vw;
    height: 52vw;
  }

  /* 月 */
  .ehon05-7 {
    width: 19.27vw;
  }

  /* 太陽 */
  .ehon05-8 {
    width: 26.69vw;
  }
}

/*----------------------------max-width:320px------------------------------*/
@media screen and (max-width:320px) {

  /* フクロウ */
  .ehon05-1 {
    top: 39vw;
    left: 51vw;
  }

  /* 文鳥 */
  .ehon05-2 {
    top: 41vw;
    left: 47vw;
  }

  /* 空用の枠 */
  .circleSky {
    left: 23vw;
    width: 51vw;
    height: 51vw;
  }

  .ehon05-7 {
    width: 17vw;
  }

  /* 太陽 */
  .ehon05-8 {
    width: 24vw;
  }
}

/* Animation */
/* 絵本 6ページ目 */

/* 画像共通 */
.ehon06-image {
  width: 100%;
  position: absolute;
  z-index: 1;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  will-change: transform;
}

/* 豚さん */
.ehon06-1 {
  z-index: 9;
  top: 24.5%;
  left: 28.8%;
  width: 495px;
}

/* ベローシファカ*/
.ehon06-2 {
  z-index: 2;
  top: 53.2%;
  left: 64.1%;
  width: 215px;
}

/* ハシビロコウ */
.ehon06-3 {
  z-index: 3;
  top: 74%;
  left: 9.5%;
  width: 128px;
}

/* ネガネザル */
.ehon06-4 {
  z-index: 4;
  top: 49%;
  left: 4.0%;
  width: 120px;
}

/* ネッコ */
.ehon06-5 {
  z-index: 5;
  top: 73%;
  right: 7.7%;
  width: 147px;
}

/* プレーリードッグ */
.ehon06-6 {
  z-index: 6;
  top: 73%;
  right: 0.8%;
  width: 140px;
}

/* ウサギ */
.ehon06-7 {
  z-index: 8;
  top: 66%;
  left: 21.5%;
  width: 90px;
}

/* 野原　*/
.ehon06-8 {
  z-index: 7;
  top: 87%;
  left: 0;
  width: 1000px;
}

/* テキスト */
.ehon06-txt01 {
  z-index: 10;
  top: 14%;
  left: 50px;
  width: 389px;
  position: absolute;
}

.ehon06-txt02 {
  z-index: 10;
  top: 14%;
  right: 60px;
  width: 319px;
  position: absolute;
}

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

  /* 豚さん */
  .ehon06-1 {
    top: 19vw;
    left: 28.8vw;
    width: 40vw;
  }

  /* ベローシファカ*/
  .ehon06-2 {
    top: 28.2vw;
    left: 58.1vw;
    width: 20.5vw;
  }

  /* ハシビロコウ */
  .ehon06-3 {
    top: 39vw;
    left: 8.5vw;
    width: 12.8vw;
  }

  /* ネガネザル */
  .ehon06-4 {
    top: 26vw;
    left: 4.0vw;
    width: 12.0vw;
  }

  /* ネッコ */
  .ehon06-5 {
    top: 38vw;
    right: 8.5vw;
    width: 13.7vw;
  }

  /* プレーリードッグ */
  .ehon06-6 {
    top: 38vw;
    right: 0.79vw;
    width: 14.4vw;
  }

  /* ウサギ */
  .ehon06-7 {
    top: 36.5vw;
    left: 21.15vw;
    width: 8vw;
  }

  /* 野原　*/
  .ehon06-8 {
    top: 47vw;
    width: 100vw;
  }
}

/*----------------------------max-width:414px------------------------------*/
@media screen and (max-width:414px) {

  /* 豚さん */
  .ehon06-1 {
    top: 19vw;
    left: 28.8vw;
    width: 40vw;
  }

  /* ベローシファカ*/
  .ehon06-2 {
    top: 28.2vw;
    left: 58.1vw;
    width: 20.5vw;
  }

  /* ハシビロコウ */
  .ehon06-3 {
    top: 39vw;
    left: 8.5vw;
    width: 12.8vw;
  }

  /* ネガネザル */
  .ehon06-4 {
    top: 26vw;
    left: 4.0vw;
    width: 12.0vw;
  }

  /* ネッコ */
  .ehon06-5 {
    top: 38vw;
    right: 8.5vw;
    width: 13.7vw;
  }

  /* プレーリードッグ */
  .ehon06-6 {
    top: 38vw;
    right: 0.79vw;
    width: 14.4vw;
  }

  /* ウサギ */
  .ehon06-7 {
    top: 36.5vw;
    left: 21.15vw;
    width: 8vw;
  }

  /* 野原　*/
  .ehon06-8 {
    top: 47vw;
    width: 100vw;
  }

}

/* Animation */
/* 絵本 7ページ目 */

.txt01 .right {
  text-align: right;
  padding-right: 0.5em;
}

/* 画像共通 */
.ehon07-image {
  width: 100%;
  position: absolute;
  z-index: 1;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  will-change: transform;
}

/* 豚さん */
.ehon07-1 {
  top: 55%;
  left: 11.1%;
  width: 1.5%;
}

/* ハクチョウ */
.ehon07-2 {
  z-index: 2;
  top: 82%;
  left: 25%;
  width: 4%;
}

/* ヒツジ */
.ehon07-3 {
  z-index: 3;
  top: 85%;
  left: 17%;
  width: 7%;
}

/* ネコ */
.ehon07-4 {
  z-index: 2;
  top: 69%;
  left: 19%;
  width: 3.5%;
}

/* シバ */
.ehon07-5 {
  z-index: 3;
  top: 88%;
  left: 13%;
  width: 3%;
}

/* シカ */
.ehon07-6 {
  z-index: 2;
  top: 70%;
  left: 11%;
  width: 10%;
}

/* ウサギ */
.ehon07-7 {
  z-index: 8;
  top: 91%;
  left: 23%;
  width: 2.5%;
}

/* ゾウ */
.ehon07-8 {
  z-index: 1;
  top: 70%;
  left: 16%;
  width: 10%;
}

/* テント */
.ehon07-9 {
  z-index: 2;
  top: 88.4%;
  right: 8.3%;
  width: 5.2%;
  transform-origin: center;
}

.ehon07-9:before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 25%;
}

.ehon07-9 img {
  position: absolute;
  top: 0; left: 50%;
  height: auto; width: 25%;
  transform-origin: center;
  transform: translateX(-50%);
}

.ehon07-9.animating {
  animation: tento_roll 10s infinite linear;
}

.ehon07-9 img.animating {
  animation: tento_swing 10s infinite ease-in-out;
}

@keyframes tento_roll {
  12% {transform: rotate(0deg);}
  48% { transform: rotate(360deg); }
  62% { transform: rotate(360deg); }
  98% { transform: rotate(0deg); }
}

@keyframes tento_swing {
  0% { left: 50%; top: 0; }
  10% { left: 50%; top: 0; }
  20% { top: -30%; }
  30% { left: 0; }
  40% { top: 30%; }
  50% { left: 50%; top: 0; }
  60% { left: 50%; top: 0; }
  70% { top: -30%; }
  80% { left: 100%; }
  90% { top: 30%; }
}

/* フタバ */
.ehon07-10 {
  top: 89.1%;
  right: 8%;
  width: 4%;
}

/* ナマケモノ */
.ehon07-11 {
  transform-origin: 60% 1%;
  top: 3.9%;
  right: 10%;
  width: 17%;
}

.ehon07-11.animating {
  animation: namakemono_swing 4s ease-in-out infinite alternate;
}

@keyframes namakemono_swing {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(-4deg);
  }
}

/* シズク */
.ehon07-12 {
  top: 0;
  left: 0;
}

/* テキスト */
.ehon07-txt01 {
  z-index: 10;
  top: 38%;
  left: 4.9%;
  width: 38.1%;
  position: absolute;
}

.ehon07-txt02 {
  z-index: 10;
  top: 92%;
  right: 3%;
  width: 5.9%;
  position: absolute;
}

/*----------------------------max-width:820px min-width:769px------------------------------*/
@media screen and (max-width: 820px) and (min-width: 769px) {
  .txt01.txt01-07 {
    height: 100%; width: 100%;
    top: 0; left: 0;
    position: absolute;
  }
  .txt01.txt01-07 p:first-of-type {
    top: 38%;
    left: 4.9%;
    position: absolute;
    text-align: left;
  }
  .txt01.txt01-07 p:last-of-type {
    top: 92%;
    right: 3%;
    position: absolute;
  }
}

/*----------------------------max-width:768px------------------------------*/
@media screen and (max-width:768px) {
  .ehon07-1 {top: 37.2%;}
  .ehon07-2 {top: 57%;}
  .ehon07-3 {top: 58%;}
  .ehon07-4 {top: 48%;}
  .ehon07-5 {top: 60%;}
  .ehon07-6 {top: 49%;}
  .ehon07-7 {top: 62%;}
  .ehon07-8 {top: 49%;}
  .ehon07-9 {top: 60.4%;}
  .ehon07-10 {top: 60.6%;}
  .ehon07-11 {top: 2.6%;}
}

/*----------------------------max-width:720px------------------------------*/
@media screen and (max-width:720px) {
  .ehon07-1 {top: 25%;}
  .ehon07-2 {top: 37%;}
  .ehon07-3 {top: 39%;}
  .ehon07-4 {top: 31.3%;}
  .ehon07-5 {top: 41%;}
  .ehon07-6 {top: 32%;}
  .ehon07-7 {top: 42%;}
  .ehon07-8 {top: 32%;}
  .ehon07-9 {top: 40.8%;}
  .ehon07-10 {top: 41.1%;}
  .ehon07-11 {top: 1.9%;}
}

/*----------------------------max-width:680px------------------------------*/
@media screen and (max-width:680px) {
  .ehon07-1 {top: 33.4%;}
  .ehon07-2 {top: 52%;}
  .ehon07-3 {top: 52%;}
  .ehon07-4 {top: 43.7%;}
  .ehon07-5 {top: 55%;}
  .ehon07-6 {top: 45%;}
  .ehon07-7 {top: 56%;}
  .ehon07-8 {top: 44%;}
  .ehon07-9 {top: 54.5%;}
  .ehon07-10 {top: 54.7%;}
  .ehon07-11 {top: 2.4%;}
}

/*----------------------------max-width:420px------------------------------*/
@media screen and (max-width:420px) {
  .ehon07-1 {top: 30.2%;}
  .ehon07-2 {top: 46%;}
  .ehon07-3 {top: 47%;}
  .ehon07-4 {top: 39.7%;}
  .ehon07-5 {top: 49.5%;}
  .ehon07-6 {top: 40%;}
  .ehon07-7 {top: 50.5%;}
  .ehon07-8 {top: 40%;}
  .ehon07-9 {top: 49.1%;}
  .ehon07-10 {top: 49.5%;}
  .ehon07-11 {top: 2.2%;}
}

/*----------------------------max-width:360px------------------------------*/
@media screen and (max-width:360px) {
  .ehon07-1 {top: 28.7%;}
  .ehon07-2 {top: 44%;}
  .ehon07-3 {top: 45%;}
  .ehon07-4 {top: 36%;}
  .ehon07-5 {top: 47%;}
  .ehon07-6 {top: 38%;}
  .ehon07-7 {top: 48%;}
  .ehon07-8 {top: 36%;}
  .ehon07-9 {top: 46.2%;}
  .ehon07-10 {top: 46.6%;}
  .ehon07-11 {top: 2.2%;}
}

/*----------------------------max-width:320px------------------------------*/
@media screen and (max-width:320px) {
  .ehon07-1 {top: 25.3%;}
  .ehon07-2 {top: 38.5%;}
  .ehon07-3 {top: 39.4%;}
  .ehon07-4 {top: 34%;}
  .ehon07-5 {top: 41.2%;}
  .ehon07-6 {top: 34%;}
  .ehon07-7 {top: 42%;}
  .ehon07-8 {top: 33%;}
  .ehon07-9 {top: 41.2%;}
  .ehon07-10 {top: 41.3%;}
  .ehon07-11 {top: 1.8%;}
}






.information {
    line-height: 1.6;
}



.bannar_area {
    max-width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 80px auto 0;
}

.bannar_area li + li {
    margin-top: 3em;
}

@media screen and (max-width: 1024px) {
    .bannar_area li + li {
        margin-top: 1em;
    }
}

.bannar_area a {
    transition: .2s;
}

.bannar_area a:hover {
    opacity: .8;
}

.bannar_area a img {
    max-width: 100%;
}

@media screen and (max-width: 820px) {
    .bannar_area a:hover {
        opacity: 1;
    }
}

@media screen and (max-width: 600px) {
.bannar_area {
      margin: 12vw auto 1vw;
    }
}



#contents {
    max-width: 1200px;
    margin: 0 auto 32px;
}
#contents .main{padding-top: 32px;}