@charset "UTF-8";
/* トップページ設定
================================================== */
/* アニメーションのための設定
-------------------------------------------------- */
.wrapper {
  opacity: 0;
}

/* メイン
-------------------------------------------------- */
main {
  background-image: url("/lp/mioclip_30th_anniversary/assets/img/cmn/bg_main_pc.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 400px;
  position: relative;
  height: min(47.395834dvw, 910px);
}
@media screen and (max-width: 768px) {
  main {
    background-image: url("/lp/mioclip_30th_anniversary/assets/img/cmn/bg_main_sp.jpg");
    background-repeat: repeat-y;
    background-position: top -117.333333dvw center;
    background-size: contain;
    height: auto;
    min-height: initial;
  }
}

.main__inner {
  display: flex;
  height: 100%;
  margin: 0 auto;
  padding-top: 73px;
  position: relative;
  width: min(83.333334dvw, 1600px);
}
@media screen and (max-width: 768px) {
  .main__inner {
    display: block;
    margin: 0 auto;
    padding: 60px 0 80px;
    width: 76dvw;
  }
}

/* 背表紙
-------------------------------------------------- */
.spineWrap {
  overflow: clip;
  height: 100%;
  width: min(46.875dvw, 900px);
}
@media screen and (max-width: 768px) {
  .spineWrap {
    display: none;
  }
}

.spine__list {
  display: flex;
  justify-content: right;
  padding-top: min(2.083334dvw, 40px);
}
.spine__list li {
  width: min(5.208334dvw, 100px);
}
.spine__list li a {
  display: block;
  transition: transform 0.6s;
}
.spine__list li:hover a {
  transform: translateY(min(2.604167dvw, 50px));
}
.spine__list li.is-active a {
  transform: translateY(min(2.604167dvw, 50px));
}

/* 本
-------------------------------------------------- */
/*
スライダー初期設定
----------------------------*/
/*右から左へ */
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/* 左から右へ */
@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
.book__slide {
  display: flex;
  overflow: hidden;
}

.book__slide__list {
  display: flex;
  flex-shrink: 0;
}

@media screen and (max-width: 768px) {
  .is-active .book__slide__list--left {
    animation: infinity-scroll-left 30s infinite linear 0.1s both;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
  }
}
@media screen and (min-width: 769px) {
  .is-active .book__slide__list--left {
    animation: infinity-scroll-left 30s infinite linear 0.5s both;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
  }
}
@media screen and (max-width: 768px) {
  .is-active .book__slide__list--right {
    animation: infinity-scroll-right 30s infinite linear 0.1s both;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
  }
}
@media screen and (min-width: 769px) {
  .is-active .book__slide__list--right {
    animation: infinity-scroll-right 30s infinite linear 0.5s both;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
  }
}

/*----------------------------*/
/* pc */
@media screen and (min-width: 769px) {
  .bookWrap {
    height: 100%;
    width: min(36.458334dvw, 700px);
  }
  .book {
    height: 100%;
    position: relative;
  }
  .book > li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: 1s ease;
    visibility: hidden;
  }
  .book > li.is-active {
    opacity: 1;
    visibility: visible;
  }
  .book > li .inner {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .book__main .inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .book__main__ttl {
    margin-bottom: min(1.666667dvw, 32px);
    text-align: center;
  }
  .book__main__ttl .img {
    display: block;
    margin: 0 auto;
    width: min(21.302084dvw, 409px);
  }
  .book__main__ttl .lead {
    display: block;
    font-size: min(1.614584dvw, 31px);
    font-weight: 400;
    line-height: 1.4517;
    margin-top: min(1.458334dvw, 28px);
  }
  .book__main__ttl .lead sup {
    line-height: 1;
  }
  .book__main__txt {
    font-size: min(1.770834dvw, 34px);
    line-height: 2;
    text-align: center;
  }
  .book :not(.book__main)[data-book] {
    justify-content: flex-start;
  }
  .book :not(.book__main)[data-book] .inner {
    display: block;
    filter: drop-shadow(0 0 min(0.833334dvw, 16px) rgba(0, 0, 0, 0.16));
    padding: min(2.8125dvw, 54px) 0 min(1.666667dvw, 32px);
    height: min(38.90625dvw, 747px);
    width: min(32.8125dvw, 630px);
    position: relative;
  }
  .book :not(.book__main)[data-book] .inner::after {
    content: "";
    background-image: url("/lp/mioclip_30th_anniversary/assets/img/top/icon_click_pc.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: min(1.40625dvw, 27px);
    width: min(4.34375dvw, 83.4px);
    position: absolute;
    bottom: min(1.041667dvw, 20px);
    right: min(2.083334dvw, 40px);
  }
  .book :not(.book__main)[data-book] .inner:hover {
    opacity: 0.6;
  }
  .book .book__ttl {
    margin: 0 auto min(0.729167dvw, 14px);
    text-align: center;
  }
  .book .book__txt {
    margin: 0 auto min(1.302084dvw, 25px);
    text-align: center;
  }
  .book [data-book^="01"] .inner {
    background: linear-gradient(#d7f4fe 0%, #aceafd 50.62%, #d7f4fe 100%);
    padding-top: min(3.437501dvw, 66px);
  }
  .book [data-book^="01"] .book__ttl {
    width: min(23.68698dvw, 454.79px);
  }
  .book [data-book^="01"] .book__txt {
    width: min(19.210417dvw, 368.84px);
  }
  .book [data-book^="02"] .inner {
    background: linear-gradient(#c5e3ff 0%, #a3d2fd 50.2%, #c5e3ff 100%);
  }
  .book [data-book^="02"] .book__ttl {
    width: min(23.68698dvw, 454.79px);
  }
  .book [data-book^="02"] .book__txt {
    width: min(13.434376dvw, 257.94px);
  }
  .book [data-book^="03"] .inner {
    background: linear-gradient(#ffe2f7 0%, #f7cdec 45.6%, #ffe2f7 100%);
  }
  .book [data-book^="03"] .book__ttl {
    margin-bottom: min(1.25dvw, 24px);
    width: min(23.68698dvw, 454.79px);
  }
  .book [data-book^="03"] .book__txt {
    margin: 0 auto min(1.197917dvw, 23px);
    width: min(12.265105dvw, 235.49px);
  }
  .book [data-book^="04"] .inner {
    background: linear-gradient(#ffdcef 0%, #fdb8de 49.79%, #ffdcef 100%);
  }
  .book [data-book^="04"] .book__ttl {
    width: min(23.68698dvw, 454.79px);
  }
  .book [data-book^="04"] .book__txt {
    width: min(16.303125dvw, 313.02px);
  }
  .book [data-book^="05"] .inner {
    background: linear-gradient(#f7fbe3 0%, #f3facf 48.53%, #f7fbe3 100%);
  }
  .book [data-book^="05"] .book__ttl {
    margin-bottom: min(1.25dvw, 24px);
    width: min(23.68698dvw, 454.79px);
  }
  .book [data-book^="05"] .book__txt {
    margin: 0 auto min(1.197917dvw, 23px);
    width: min(12.864584dvw, 247px);
  }
  .book [data-book^="06"] .inner {
    background: linear-gradient(#fcf1e7 0%, #f9e9da 48.53%, #fcf1e7 100%);
    padding-top: min(3.177084dvw, 61px);
  }
  .book [data-book^="06"] .book__ttl {
    margin-bottom: min(1.25dvw, 24px);
    width: min(25.594271dvw, 491.41px);
  }
  .book [data-book^="06"] .book__txt {
    margin: 0 auto min(1.197917dvw, 23px);
    width: min(16.24948dvw, 311.99px);
  }
  .book [data-book^="07"] .inner {
    background: linear-gradient(#f9efff 0%, #eedafa 50.2%, #f9efff 100%);
  }
  .book [data-book^="07"] .book__ttl {
    width: min(23.68698dvw, 454.79px);
  }
  .book [data-book^="07"] .book__txt {
    width: min(19.641667dvw, 377.12px);
  }
  .book [data-book^="08"] .inner {
    background: linear-gradient(#EADFFF 0%, #DDCDFE 50%, #EADFFF 100%);
  }
  .book [data-book^="08"] .book__ttl {
    width: min(23.68698dvw, 454.79px);
  }
  .book [data-book^="08"] .book__txt {
    width: min(12.563542dvw, 241.22px);
  }
  .book [data-book^="09"] .inner {
    background: linear-gradient(#daf6ee 0%, #b6e6d9 50.2%, #daf6ee 100%);
    padding-top: min(3.541667dvw, 68px);
  }
  .book [data-book^="09"] .book__ttl {
    width: min(22.713542dvw, 436.1px);
  }
  .book [data-book^="09"] .book__txt {
    width: min(20.197396dvw, 387.79px);
  }
  /* スライド */
  .book__slide {
    background-color: #fff;
    padding: min(0.520834dvw, 10px) 0;
    height: min(11.875dvw, 228px);
  }
  .book__slide .book__slide__img {
    padding: 0 min(0.416667dvw, 8px);
    height: min(10.9375dvw, 210px);
    width: auto;
  }
  .book__slide .book__slide__img > img {
    height: 100%;
    width: auto;
  }
  .book__slide--02 {
    margin-top: min(1.041667dvw, 20px);
  }
  .book__slide--03,
  .book__slide--04 {
    display: none;
  }
}
/* sp */
@media screen and (max-width: 768px) {
  .book {
    display: flex;
    flex-direction: column;
    gap: 8.533334dvw 0;
  }
  .book .inner {
    display: flex;
    flex-direction: column;
    padding: 8dvw 0 18.666667dvw;
    position: relative;
    height: 100%;
  }
  .book__main .inner {
    padding: 8dvw 0 0;
  }
  .book__main__ttl {
    text-align: center;
    margin-bottom: 1.333334dvw;
  }
  .book__main__ttl .img {
    display: block;
    margin: 0 auto;
    width: 41.066667dvw;
  }
  .book__main__ttl .lead {
    display: block;
    font-size: 4dvw;
    font-weight: 400;
    line-height: 2;
    margin-top: 1.066667dvw;
  }
  .book__main__txt {
    font-size: 4dvw;
    line-height: 2;
    text-align: center;
  }
  .book :not(.book__main)[data-book] {
    height: 90.933334dvw;
    position: relative;
  }
  .book :not(.book__main)[data-book]::before {
    content: "";
    background-image: url("/lp/mioclip_30th_anniversary/assets/img/top/icon_flower_sp.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 12.8dvw;
    width: 12.8dvw;
    position: absolute;
    top: 0;
    right: 0;
  }
  .book :not(.book__main)[data-book]::after {
    content: "";
    background-image: url("/lp/mioclip_30th_anniversary/assets/img/top/icon_leaf_sp.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 14.666667dvw;
    width: 14.666667dvw;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .book :not(.book__main)[data-book] .inner::after {
    content: "";
    background-image: url("/lp/mioclip_30th_anniversary/assets/img/top/icon_click_sp.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 5.333334dvw;
    width: 13.600001dvw;
    position: absolute;
    bottom: 2.666667dvw;
    right: 8dvw;
  }
  .book :not(.book__main)[data-book] .book__ttl {
    margin: 0 auto 4.266667dvw;
    width: 40.677334dvw;
  }
  .book :not(.book__main)[data-book] .book__txt {
    margin: 0 auto auto;
  }
  .book [data-book^="01"] {
    background: linear-gradient(#d7f4fe 0%, #aceafd 50.62%, #d7f4fe 100%);
  }
  .book [data-book^="01"] .book__txt {
    width: 54.642667dvw;
  }
  .book [data-book^="02"] {
    background: linear-gradient(#c5e3ff 0%, #a3d2fd 50.2%, #c5e3ff 100%);
  }
  .book [data-book^="02"] .book__txt {
    width: 38.213334dvw;
  }
  .book [data-book^="03"] {
    background: linear-gradient(#ffe2f7 0%, #f7cdec 45.6%, #ffe2f7 100%);
  }
  .book [data-book^="03"] .book__txt {
    width: 34.888dvw;
  }
  .book [data-book^="04"] {
    background: linear-gradient(#ffdcef 0%, #fdb8de 49.79%, #ffdcef 100%);
  }
  .book [data-book^="04"] .book__txt {
    width: 46.373334dvw;
  }
  .book [data-book^="05"] {
    background: linear-gradient(#f7fbe3 0%, #f3facf 48.53%, #f7fbe3 100%);
  }
  .book [data-book^="05"] .book__txt {
    width: 36.592dvw;
  }
  .book [data-book^="06"] {
    background: linear-gradient(#fcf1e7 0%, #f9e9da 48.53%, #fcf1e7 100%);
  }
  .book [data-book^="06"] .book__ttl {
    width: 45.322667dvw;
  }
  .book [data-book^="06"] .book__txt {
    width: 49.072001dvw;
  }
  .book [data-book^="07"] {
    background: linear-gradient(#f9efff 0%, #eedafa 50.2%, #f9efff 100%);
  }
  .book [data-book^="07"] .book__txt {
    width: 55.869334dvw;
  }
  .book [data-book^="08"] {
    background: linear-gradient(#EADFFF 0%, #DDCDFE 50%, #EADFFF 100%);
  }
  .book [data-book^="08"] .book__txt {
    width: 35.736dvw;
  }
  .book [data-book^="09"] {
    background: linear-gradient(#daf6ee 0%, #b6e6d9 50.2%, #daf6ee 100%);
  }
  .book [data-book^="09"] .book__ttl {
    width: 44.141334dvw;
  }
  .book [data-book^="09"] .book__txt {
    width: 38.464001dvw;
  }
  /* スライド */
  .book__slide {
    background-color: #fff;
    padding: 2.666667dvw 0;
    height: 40dvw;
  }
  .book__slide .book__slide__img {
    padding: 0 1.333334dvw;
    height: 34.666667dvw;
    width: auto;
  }
  .book__slide .book__slide__img > img {
    height: 100%;
    width: auto;
  }
  .book__slide--01,
  .book__slide--02 {
    display: none;
  }
}
/* 
-------------------------------------------------- */