@charset "UTF-8";
.l-main {
  position: static;
}

.l-header {
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
  z-index: 3;
}

.l-header__logo {
  position: relative;
  top: 50px;
}
@media screen and (max-width: 900px) {
  .l-header__logo {
    top: 25px;
  }
}

.p-story {
  padding: 140px 0 0;
  z-index: 0;
}
.--niwa .p-story {
  background: url(../img/stories/01/bg_ptn_01a.png) repeat left top/800px;
}
.--sasaki .p-story {
  background: url(../img/stories/02/bg_ptn_02a.png) repeat left top/800px;
}
.--koi .p-story {
  background: url(../img/stories/03/bg_ptn_03a.png) repeat left top/800px;
}
.--shikaku .p-story {
  background: url(../img/stories/04/bg_ptn_04a.png) repeat left top/800px;
}
.--ningyo .p-story {
  background: url(../img/stories/05/bg_ptn_05a.png) repeat left top/800px;
}
.--girl .p-story {
  background: url(../img/stories/06/bg_ptn_06a.png) repeat left top/800px;
}
.--nayuta .p-story {
  background: url(../img/stories/07/bg_ptn_07a.png) repeat left top/800px;
}
.--imouto .p-story {
  background: url(../img/stories/08/bg_ptn_08a.png) repeat left top/800px;
}
@media screen and (max-width: 900px) {
  .p-story {
    padding: 82px 0 0;
  }
}

.p-story__text-item {
  font-family: var(--font-outfit);
  font-size: 1.5rem;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.8s var(--ease-main), transform 0.7s var(--ease-main);
}
.is-load .p-story__text-item {
  opacity: 1;
}
.--niwa .p-story__text-item {
  color: var(--color-story_text-niwa);
}
.--sasaki .p-story__text-item {
  color: var(--color-story_text-sasaki);
}
.--koi .p-story__text-item {
  color: var(--color-story_text-koi);
}
.--shikaku .p-story__text-item {
  color: var(--color-story_text-shikaku);
}
.--ningyo .p-story__text-item {
  color: var(--color-story_text-ningyo);
}
.--girl .p-story__text-item {
  color: var(--color-story_text-girl);
}
.--nayuta .p-story__text-item {
  color: var(--color-story_text-nayuta);
}
.--imouto .p-story__text-item {
  color: var(--color-story_text-imouto);
}
@media screen and (max-width: 900px) {
  .p-story__text-item {
    font-size: 1rem;
  }
}
.p-story__text-item:nth-of-type(1) {
  left: 30px;
  writing-mode: vertical-lr;
  transform: translateY(-50%) rotate(180deg);
}
@media screen and (max-width: 900px) {
  .p-story__text-item:nth-of-type(1) {
    left: 8px;
  }
}
.p-story__text-item:nth-of-type(2) {
  right: 30px;
  writing-mode: vertical-lr;
}
@media screen and (max-width: 900px) {
  .p-story__text-item:nth-of-type(2) {
    right: 8px;
  }
}

@media screen and (min-width: 901px) {
  .--shikaku .p-story__contents {
    margin-top: 28px;
  }
}
.p-story__contents-visual {
  position: relative;
}
.p-story__contents-visual-bg {
  width: 100%;
  height: 135px;
  transition: -webkit-clip-path 0.8s var(--ease-main);
  transition: clip-path 0.8s var(--ease-main);
  transition: clip-path 0.8s var(--ease-main), -webkit-clip-path 0.8s var(--ease-main);
  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
.is-load .p-story__contents-visual-bg {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
@media screen and (min-width: 901px) {
  .p-story__contents-visual-bg {
    position: absolute;
    left: 0;
    bottom: 12.7%;
  }
  .--shikaku .p-story__contents-visual-bg {
    bottom: 10.6%;
  }
}
@media screen and (max-width: 900px) {
  .p-story__contents-visual-bg {
    margin-top: 30px;
    height: 90px;
  }
}
@keyframes loopImage {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -750px;
  }
}
.--niwa .p-story__contents-visual-bg {
  background: url(../img/stories/01/loop_image.png) repeat-x left top/1000px 135px;
  animation: loopImageNiwa 15s linear infinite;
}
@keyframes loopImageNiwa {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -1000px;
  }
}
@media screen and (max-width: 900px) {
  .--niwa .p-story__contents-visual-bg {
    background: url(../img/stories/01/loop_image.png) repeat-x left top/666.6666666667px 90px;
  }
  @keyframes loopImageNiwa {
    0% {
      background-position-x: 0;
    }
    100% {
      background-position-x: -666.6666666667px;
    }
  }
}
.--sasaki .p-story__contents-visual-bg {
  background: url(../img/stories/02/loop_image.png) repeat-x left top/1000px 135px;
  animation: loopImageSasaki 15s linear infinite;
}
@keyframes loopImageSasaki {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -1000px;
  }
}
@media screen and (max-width: 900px) {
  .--sasaki .p-story__contents-visual-bg {
    background: url(../img/stories/02/loop_image.png) repeat-x left top/666.6666666667px 90px;
  }
  @keyframes loopImageSasaki {
    0% {
      background-position-x: 0;
    }
    100% {
      background-position-x: -666.6666666667px;
    }
  }
}
.--koi .p-story__contents-visual-bg {
  background: url(../img/stories/03/loop_image.png) repeat-x left top/1000px 135px;
  animation: loopImageKoi 15s linear infinite;
}
@keyframes loopImageKoi {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -1000px;
  }
}
@media screen and (max-width: 900px) {
  .--koi .p-story__contents-visual-bg {
    background: url(../img/stories/03/loop_image.png) repeat-x left top/666.6666666667px 90px;
  }
  @keyframes loopImageKoi {
    0% {
      background-position-x: 0;
    }
    100% {
      background-position-x: -666.6666666667px;
    }
  }
}
.--shikaku .p-story__contents-visual-bg {
  background: url(../img/stories/04/loop_image.png) repeat-x left top/1000px 135px;
  animation: loopImageShikaku 15s linear infinite;
}
@keyframes loopImageShikaku {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -1000px;
  }
}
@media screen and (max-width: 900px) {
  .--shikaku .p-story__contents-visual-bg {
    background: url(../img/stories/04/loop_image.png) repeat-x left top/666.6666666667px 90px;
  }
  @keyframes loopImageShikaku {
    0% {
      background-position-x: 0;
    }
    100% {
      background-position-x: -666.6666666667px;
    }
  }
}
.--ningyo .p-story__contents-visual-bg {
  background: url(../img/stories/05/loop_image.png) repeat-x left top/1000px 135px;
  animation: loopImageNingyo 15s linear infinite;
}
@keyframes loopImageNingyo {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -1000px;
  }
}
@media screen and (max-width: 900px) {
  .--ningyo .p-story__contents-visual-bg {
    background: url(../img/stories/05/loop_image.png) repeat-x left top/666.6666666667px 90px;
  }
  @keyframes loopImageNingyo {
    0% {
      background-position-x: 0;
    }
    100% {
      background-position-x: -666.6666666667px;
    }
  }
}
.--girl .p-story__contents-visual-bg {
  background: url(../img/stories/06/loop_image.png) repeat-x left top/1250px 135px;
  animation: loopImageGirl 18s linear infinite;
}
@keyframes loopImageGirl {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -1250px;
  }
}
@media screen and (max-width: 900px) {
  .--girl .p-story__contents-visual-bg {
    background: url(../img/stories/06/loop_image.png) repeat-x left top/833.3333333333px 90px;
  }
  @keyframes loopImageGirl {
    0% {
      background-position-x: 0;
    }
    100% {
      background-position-x: -833.3333333333px;
    }
  }
}
.--nayuta .p-story__contents-visual-bg {
  background: url(../img/stories/07/loop_image.png) repeat-x left top/1250px 135px;
  animation: loopImageNayuta 18s linear infinite;
}
@keyframes loopImageNayuta {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -1250px;
  }
}
@media screen and (max-width: 900px) {
  .--nayuta .p-story__contents-visual-bg {
    background: url(../img/stories/07/loop_image.png) repeat-x left top/833.3333333333px 90px;
  }
  @keyframes loopImageNayuta {
    0% {
      background-position-x: 0;
    }
    100% {
      background-position-x: -833.3333333333px;
    }
  }
}
.--imouto .p-story__contents-visual-bg {
  background: url(../img/stories/08/loop_image.png) repeat-x left top/1000px 135px;
  animation: loopImageImout 15s linear infinite;
}
@keyframes loopImageImout {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -1000px;
  }
}
@media screen and (max-width: 900px) {
  .--imouto .p-story__contents-visual-bg {
    background: url(../img/stories/08/loop_image.png) repeat-x left top/666.6666666667px 90px;
  }
  @keyframes loopImageImout {
    0% {
      background-position-x: 0;
    }
    100% {
      background-position-x: -666.6666666667px;
    }
  }
}
.p-story__contents-visual-main {
  display: flex;
  align-items: flex-start;
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 900px) {
  .p-story__contents-visual-main {
    display: block;
    width: 84.2%;
  }
}
.--niwa .p-story__contents-visual-main {
  color: var(--color-story_text-niwa);
}
.--sasaki .p-story__contents-visual-main {
  color: var(--color-story_text-sasaki);
}
.--koi .p-story__contents-visual-main {
  color: var(--color-story_text-koi);
}
.--shikaku .p-story__contents-visual-main {
  color: var(--color-story_text-shikaku);
}
.--ningyo .p-story__contents-visual-main {
  color: var(--color-story_text-ningyo);
}
.--girl .p-story__contents-visual-main {
  color: var(--color-story_text-girl);
}
.--nayuta .p-story__contents-visual-main {
  color: var(--color-story_text-nayuta);
}
.--imouto .p-story__contents-visual-main {
  color: var(--color-story_text-imouto);
}
.p-story__contents-visual-main .p-in-image {
  width: 48.2%;
  border: 2px solid var(--color-black);
  box-sizing: border-box;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: -webkit-clip-path 1s var(--ease-main);
  transition: clip-path 1s var(--ease-main);
  transition: clip-path 1s var(--ease-main), -webkit-clip-path 1s var(--ease-main);
}
.is-load .p-story__contents-visual-main .p-in-image {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
@media screen and (max-width: 900px) {
  .p-story__contents-visual-main .p-in-image {
    width: 100%;
  }
}
.p-story__contents-visual-main .p-in-detail {
  flex: 1;
  margin-top: 113px;
  font-size: 6.3rem;
  line-height: 1.3;
  text-align: center;
  font-weight: 700;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--ease-main), transform 0.7s var(--ease-main);
}
@media screen and (min-width: 901px) {
  .--shikaku .p-story__contents-visual-main .p-in-detail {
    margin-top: 84px;
  }
}
.--girl .p-story__contents-visual-main .p-in-detail {
  font-size: 5rem;
}
.is-load .p-story__contents-visual-main .p-in-detail {
  opacity: 1;
  transform: translateY(0);
}
@media screen and (max-width: 900px) {
  .p-story__contents-visual-main .p-in-detail {
    margin-top: 23px;
    font-size: 3rem;
  }
  .--girl .p-story__contents-visual-main .p-in-detail {
    font-size: 3em;
  }
}
.p-story__contents-main {
  padding-top: 50px;
}
@media screen and (min-width: 901px) {
  .--shikaku .p-story__contents-main {
    padding-top: 180px;
  }
}
@media screen and (max-width: 900px) {
  .p-story__contents-main {
    padding-top: 60px;
  }
}
.p-story__contents-main-title {
  margin-bottom: 28px;
  text-align: center;
  font-size: 14rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--ease-main) 0.3s, transform 0.7s var(--ease-main) 0.3s;
}
.is-load .p-story__contents-main-title {
  opacity: 1;
  transform: translateY(0);
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-title {
    width: 85%;
    margin: 0 auto 18px;
    font-size: 6.6rem;
    text-align: left;
  }
}
.--niwa .p-story__contents-main-title {
  color: var(--color-story_text-niwa);
}
.--sasaki .p-story__contents-main-title {
  color: var(--color-story_text-sasaki);
}
.--koi .p-story__contents-main-title {
  color: var(--color-story_text-koi);
}
.--shikaku .p-story__contents-main-title {
  color: var(--color-story_text-shikaku);
}
.--ningyo .p-story__contents-main-title {
  color: var(--color-story_text-ningyo);
}
.--girl .p-story__contents-main-title {
  color: var(--color-story_text-girl);
}
.--nayuta .p-story__contents-main-title {
  color: var(--color-story_text-nayuta);
}
.--imouto .p-story__contents-main-title {
  color: var(--color-story_text-imouto);
}
.p-story__contents-main-lead {
  margin-bottom: 136px;
  text-align: center;
  font-size: 1.7rem;
  line-height: 2.65;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--ease-main) 0.3s, transform 0.7s var(--ease-main) 0.3s;
}
.--shikaku .p-story__contents-main-lead {
  color: var(--color-white);
}
.--koi .p-story__contents-main-lead {
  color: var(--color-white);
}
.is-load .p-story__contents-main-lead {
  opacity: 1;
  transform: translateY(0);
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-lead {
    width: 85%;
    margin: 0 auto 80px;
    font-size: 1.2rem;
    text-align: left;
    line-height: 2.7;
  }
}
.p-story__contents-main-movie {
  width: 640px;
  border: 2px solid var(--color-black);
  box-sizing: border-box;
  margin: 0 auto 160px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--ease-main) 0.3s, transform 0.7s var(--ease-main) 0.3s;
}
.is-load .p-story__contents-main-movie {
  opacity: 1;
  transform: translateY(0);
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-movie {
    width: 84%;
    margin: 0 auto 80px;
  }
}
.p-story__contents-main-movie .p-in-image {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
@media screen and (min-width: 901px) {
  .p-story__contents-main-movie .p-in-image:hover .p-in-image-item {
    transform: scale(1.05);
  }
  .p-story__contents-main-movie .p-in-image:hover .p-in-icon img {
    transform: scale(0.95);
  }
}
.p-story__contents-main-movie .p-in-image-item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform 0.5s var(--ease-main);
}
.p-story__contents-main-movie .p-in-image .p-in-icon {
  width: 110px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-movie .p-in-image .p-in-icon {
    width: 22%;
  }
}
.p-story__contents-main-movie .p-in-image .p-in-icon img {
  width: 100%;
  transition: transform 0.5s var(--ease-main);
}
.p-story__contents-main-sc {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 163px 0;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: url(../img/bg_ptn_00b.jpg) repeat left top/800px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--ease-main) 0.3s, transform 0.7s var(--ease-main) 0.3s;
}
.is-load .p-story__contents-main-sc {
  opacity: 1;
  transform: translateY(0);
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-sc {
    display: block;
    padding: 68px 0 80px;
  }
}
.p-story__contents-main-sc-bg-head {
  display: flex;
  align-items: center;
  width: 100%;
  font-family: var(--font-outfit);
  font-weight: 700;
  font-size: 16.7vw;
  white-space: nowrap;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  text-align: center;
}
.p-story__contents-main-sc-bg-head .p-in-item {
  padding: 0 10px;
  animation: marqueeScTitle 20s linear infinite;
}
@keyframes marqueeScTitle {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-sc-bg-head {
    width: 230%;
    font-size: 26vw;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.p-story__contents-main-sc-block {
  width: 37%;
  margin-bottom: 80px;
}
.p-story__contents-main-sc-block:last-of-type {
  margin-bottom: 0;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-sc-block {
    width: 100%;
  }
}
.p-story__contents-main-sc-title {
  margin-bottom: 48px;
  text-align: center;
  font-size: 2rem;
  letter-spacing: 0.13em;
  font-family: var(--font-outfit);
  color: var(--color-white);
  font-weight: 700;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-sc-title {
    margin-bottom: 38px;
    font-size: 1.5rem;
    letter-spacing: 0.13em;
  }
}
.p-story__contents-main-sc-list {
  position: relative;
  z-index: 1;
}
.p-story__contents-main-sc-list-item {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  margin-bottom: 38px;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-sc-list-item {
    margin-bottom: 28px;
  }
}
.p-story__contents-main-sc-list-item:last-of-type {
  margin-bottom: 0;
}
.p-story__contents-main-sc-list-item .p-in-head {
  width: 45%;
  margin-right: 8%;
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: right;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-sc-list-item .p-in-head {
    font-size: 1.2rem;
    line-height: 1.5;
  }
}
.p-story__contents-main-sc-list-item .p-in-text {
  width: 45%;
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  text-align: left;
  line-height: 1.3;
}
.p-story__contents-main-sc-list-item .p-in-text .u-noto {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  font-size: 2.5rem;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-sc-list-item .p-in-text .u-noto {
    font-size: 1.9rem;
  }
}
.p-story__contents-main-sc-list-item .p-in-text .p-in-br {
  display: none;
}
@media screen and (max-width: 1520px) {
  .p-story__contents-main-sc-list-item .p-in-text .p-in-br {
    display: block;
  }
}
.p-story__contents-main-sc-list-item .p-in-text .u-small {
  font-size: 1.5rem;
  vertical-align: baseline;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-sc-list-item .p-in-text {
    font-size: 1.8rem;
  }
  .p-story__contents-main-sc-list-item .p-in-text .u-small {
    font-size: 1.2rem;
  }
}
.p-story__contents-main-character {
  padding: 119px 0;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--ease-main) 0.3s, transform 0.7s var(--ease-main) 0.3s;
}
.is-load .p-story__contents-main-character {
  opacity: 1;
  transform: translateY(0);
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character {
    padding: 62px 0 79px;
  }
}
.--niwa .p-story__contents-main-character {
  color: var(--color-story-niwa);
}
.--sasaki .p-story__contents-main-character {
  color: var(--color-story-sasaki);
}
.--koi .p-story__contents-main-character {
  color: var(--color-story-koi);
}
.--shikaku .p-story__contents-main-character {
  color: var(--color-story-shikaku);
}
.--ningyo .p-story__contents-main-character {
  color: var(--color-story-ningyo);
}
.--girl .p-story__contents-main-character {
  color: var(--color-story-girl);
}
.--nayuta .p-story__contents-main-character {
  color: var(--color-story-nayuta);
}
.--imouto .p-story__contents-main-character {
  color: var(--color-story-imouto);
}
.p-story__contents-main-character-title {
  margin-bottom: max(13%, 160px);
  text-align: center;
  font-size: 14rem;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-title {
    width: 84%;
    margin: 0 auto;
    font-size: 6.4rem;
    text-align: left;
  }
  .p-story__contents-main-character-title span {
    position: relative;
    top: -6px;
  }
}
.--niwa .p-story__contents-main-character-title {
  color: var(--color-story_text-niwa);
}
.--sasaki .p-story__contents-main-character-title {
  color: var(--color-story_text-sasaki);
}
.--koi .p-story__contents-main-character-title {
  color: var(--color-story_text-koi);
}
.--shikaku .p-story__contents-main-character-title {
  color: var(--color-story_text-shikaku);
}
.--ningyo .p-story__contents-main-character-title {
  color: var(--color-story_text-ningyo);
}
.--girl .p-story__contents-main-character-title {
  color: var(--color-story_text-girl);
}
.--nayuta .p-story__contents-main-character-title {
  color: var(--color-story_text-nayuta);
}
.--imouto .p-story__contents-main-character-title {
  color: var(--color-story_text-imouto);
}
.p-story__contents-main-character-change {
  width: 124px;
  position: absolute;
  left: 10.4%;
  top: 38px;
  z-index: 2;
  cursor: pointer;
  opacity: 0;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-change {
    width: 19.1%;
    position: absolute;
    left: 8.2%;
    top: 9%;
  }
}
.p-story__contents-main-character-change .p-in-item {
  width: 100%;
  position: relative;
  z-index: 1;
}
.p-story__contents-main-character-change .p-in-item:nth-of-type(1) {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.p-story__contents-main-character-pagination {
  width: 51.4%;
  margin-left: auto;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 901px) {
  .p-story__contents-main-character-pagination {
    margin-left: auto;
    position: absolute;
    right: 0;
    top: 30%;
  }
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-pagination {
    width: 14.8%;
    position: absolute;
    top: 150px;
    right: 8.5%;
  }
}
.p-story__contents-main-character-pagination-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-pagination-list {
    display: block;
  }
}
.p-story__contents-main-character-pagination-list-item {
  width: 90px;
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  transition: transform 0.5s var(--ease-main);
}
@media screen and (min-width: 901px) {
  .p-story__contents-main-character-pagination-list-item:hover {
    transform: scale(0.96);
  }
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-pagination-list-item {
    width: 100%;
    margin-right: 3.3%;
    margin-bottom: 3.3%;
  }
  .p-story__contents-main-character-pagination-list-item:nth-of-type(2n) {
    margin-right: 0;
  }
}
.p-story__contents-main-character-pagination-list-item:last-of-type {
  margin-right: 0;
}
.p-story__contents-main-character-pagination-list-item.is-current {
  pointer-events: none;
}
.p-story__contents-main-character-pagination-list-item.is-current .p-in-item:nth-of-type(2) {
  opacity: 1;
}
.p-story__contents-main-character-pagination-list-item.is-current .p-in-focus-deco {
  opacity: 1;
}
.p-story__contents-main-character-pagination-list-item .p-in-focus {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid var(--color-black);
  box-sizing: border-box;
  z-index: 1;
  pointer-events: none;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-pagination-list-item .p-in-focus {
    border: 1px solid var(--color-black);
  }
}
.p-story__contents-main-character-pagination-list-item .p-in-focus::before, .p-story__contents-main-character-pagination-list-item .p-in-focus::after {
  content: "";
  display: block;
  width: 16%;
  padding-top: 16%;
  box-sizing: content-box;
  position: absolute;
  top: 5.7%;
  z-index: 1;
  pointer-events: none;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-pagination-list-item .p-in-focus::before, .p-story__contents-main-character-pagination-list-item .p-in-focus::after {
    width: 10%;
    padding-top: 10%;
    top: 2.8%;
  }
}
.p-story__contents-main-character-pagination-list-item .p-in-focus::before {
  left: 5.7%;
  border-top: 1px solid var(--color-black);
  border-left: 1px solid var(--color-black);
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-pagination-list-item .p-in-focus::before {
    left: 2.8%;
  }
}
.p-story__contents-main-character-pagination-list-item .p-in-focus::after {
  right: 5.7%;
  border-top: 1px solid var(--color-black);
  border-right: 1px solid var(--color-black);
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-pagination-list-item .p-in-focus::after {
    right: 2.8%;
  }
}
.p-story__contents-main-character-pagination-list-item .p-in-focus-corner::before, .p-story__contents-main-character-pagination-list-item .p-in-focus-corner::after {
  content: "";
  display: block;
  width: 16%;
  padding-top: 16%;
  box-sizing: content-box;
  position: absolute;
  bottom: 5.7%;
  z-index: 1;
  pointer-events: none;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-pagination-list-item .p-in-focus-corner::before, .p-story__contents-main-character-pagination-list-item .p-in-focus-corner::after {
    width: 10%;
    padding-top: 10%;
    bottom: 2.8%;
  }
}
.p-story__contents-main-character-pagination-list-item .p-in-focus-corner::before {
  left: 5.7%;
  border-bottom: 1px solid var(--color-black);
  border-left: 1px solid var(--color-black);
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-pagination-list-item .p-in-focus-corner::before {
    left: 2.8%;
  }
}
.p-story__contents-main-character-pagination-list-item .p-in-focus-corner::after {
  right: 5.7%;
  border-bottom: 1px solid var(--color-black);
  border-right: 1px solid var(--color-black);
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-pagination-list-item .p-in-focus-corner::after {
    right: 2.8%;
  }
}
.p-story__contents-main-character-pagination-list-item .p-in-focus-deco {
  width: 20%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-main);
}
.p-story__contents-main-character-pagination-list-item .p-in-focus-deco svg {
  fill: var(--color-black);
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-pagination-list-item .p-in-focus-deco {
    width: 20%;
  }
}
.p-story__contents-main-character-pagination-list-item img {
  width: 100%;
}
.p-story__contents-main-character-pagination-list-item .p-in-item {
  width: 100%;
  border: 2px solid var(--color-black);
  position: relative;
  transition: opacity 0.5s var(--ease-main);
}
.p-story__contents-main-character-pagination-list-item .p-in-item:nth-of-type(1) {
  position: relative;
}
.p-story__contents-main-character-pagination-list-item .p-in-item:nth-of-type(2) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.p-story__contents-main-character-inner {
  margin-top: -12.7%;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-inner {
    margin-top: -4%;
  }
}
.p-story__contents-main-character-list-item {
  position: relative;
}
.p-story__contents-main-character-list-item .p-in-bg {
  width: 100%;
  padding-top: 420px;
  position: absolute;
  top: 56.5%;
  left: 0;
  transform: translateY(-50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.--niwa .p-story__contents-main-character-list-item .p-in-bg {
  background: url(../img/stories/01/bg_ptn_01b.png) repeat left top/400px;
}
.--sasaki .p-story__contents-main-character-list-item .p-in-bg {
  background: url(../img/stories/02/bg_ptn_02b.png) repeat left top/400px;
}
.--koi .p-story__contents-main-character-list-item .p-in-bg {
  background: url(../img/stories/03/bg_ptn_03b.png) repeat left top/400px;
}
.--shikaku .p-story__contents-main-character-list-item .p-in-bg {
  background: url(../img/stories/04/bg_ptn_04b.png) repeat left top/400px;
}
.--ningyo .p-story__contents-main-character-list-item .p-in-bg {
  background: url(../img/stories/05/bg_ptn_05b.png) repeat left top/400px;
}
.--girl .p-story__contents-main-character-list-item .p-in-bg {
  background: url(../img/stories/06/bg_ptn_06b.png) repeat left top/400px;
}
.--nayuta .p-story__contents-main-character-list-item .p-in-bg {
  background: url(../img/stories/07/bg_ptn_07b.png) repeat left top/400px;
}
.--imouto .p-story__contents-main-character-list-item .p-in-bg {
  background: url(../img/stories/08/bg_ptn_08b.png) repeat left top/400px;
}
.p-story__contents-main-character-list-item .p-in-bg-item {
  width: 100%;
  height: 100%;
  max-width: 1400px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-list-item .p-in-bg-item {
    left: 40%;
  }
}
.p-story__contents-main-character-list-item .p-in-bg-item img {
  width: 60%;
  max-width: 840px;
  position: absolute;
  left: -13.2%;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-list-item .p-in-bg-item img {
    width: 115%;
    max-width: 840px;
    position: absolute;
    left: -28.2%;
  }
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-list-item .p-in-bg {
    padding-top: 56%;
    position: absolute;
    top: 25.2%;
    transform: translate(0);
  }
}
.p-story__contents-main-character-list-item .p-in-block {
  display: flex;
  align-items: center;
  width: 83%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-list-item .p-in-block {
    display: block;
    width: 100%;
  }
}
.p-story__contents-main-character-list-item .p-in-image {
  width: 51.2%;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-list-item .p-in-image {
    width: 85%;
    margin: 0 auto;
  }
}
.p-story__contents-main-character-list-item .p-in-detail {
  flex: 1;
  margin-top: 2.2%;
  margin-left: -3%;
}
.--shikaku .p-story__contents-main-character-list-item .p-in-detail {
  color: var(--color-white);
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-list-item .p-in-detail {
    width: 84%;
    margin: 6% auto 0;
  }
}
.p-story__contents-main-character-list-item .p-in-detail-name {
  margin-bottom: 23px;
  font-size: 6.6rem;
  letter-spacing: -0.1em;
  font-weight: 700;
}
.--koi .p-story__contents-main-character-list-item .p-in-detail-name {
  letter-spacing: 0.03em;
}
.--imouto .p-story__contents-main-character-list-item .p-in-detail-name {
  letter-spacing: 0.03em;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-list-item .p-in-detail-name {
    margin-bottom: 11px;
    font-size: 3.8rem;
  }
  .--niwa .p-story__contents-main-character-list-item .p-in-detail-name {
    color: var(--color-story_text-niwa);
  }
  .--sasaki .p-story__contents-main-character-list-item .p-in-detail-name {
    color: var(--color-story_text-sasaki);
  }
  .--koi .p-story__contents-main-character-list-item .p-in-detail-name {
    color: var(--color-story_text-koi);
  }
  .--shikaku .p-story__contents-main-character-list-item .p-in-detail-name {
    color: var(--color-story_text-shikaku);
  }
  .--ningyo .p-story__contents-main-character-list-item .p-in-detail-name {
    color: var(--color-story_text-ningyo);
  }
  .--girl .p-story__contents-main-character-list-item .p-in-detail-name {
    color: var(--color-story_text-girl);
  }
  .--nayuta .p-story__contents-main-character-list-item .p-in-detail-name {
    color: var(--color-story_text-nayuta);
  }
  .--imouto .p-story__contents-main-character-list-item .p-in-detail-name {
    color: var(--color-story_text-imouto);
  }
}
.p-story__contents-main-character-list-item .p-in-detail-cv {
  font-size: 1.7rem;
}
.p-story__contents-main-character-list-item .p-in-detail-cv .u-noto {
  font-size: 1.8rem;
  vertical-align: baseline;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-list-item .p-in-detail-cv .u-noto {
    font-size: 1.35rem;
  }
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-list-item .p-in-detail-cv {
    font-size: 1.3rem;
  }
  .--niwa .p-story__contents-main-character-list-item .p-in-detail-cv {
    color: var(--color-story_text-niwa);
  }
  .--sasaki .p-story__contents-main-character-list-item .p-in-detail-cv {
    color: var(--color-story_text-sasaki);
  }
  .--koi .p-story__contents-main-character-list-item .p-in-detail-cv {
    color: var(--color-story_text-koi);
  }
  .--shikaku .p-story__contents-main-character-list-item .p-in-detail-cv {
    color: var(--color-story_text-shikaku);
  }
  .--ningyo .p-story__contents-main-character-list-item .p-in-detail-cv {
    color: var(--color-story_text-ningyo);
  }
  .--girl .p-story__contents-main-character-list-item .p-in-detail-cv {
    color: var(--color-story_text-girl);
  }
  .--nayuta .p-story__contents-main-character-list-item .p-in-detail-cv {
    color: var(--color-story_text-nayuta);
  }
  .--imouto .p-story__contents-main-character-list-item .p-in-detail-cv {
    color: var(--color-story_text-imouto);
  }
}
.p-story__contents-main-character-list-item .p-in-detail-cv .u-head {
  padding: 0 11px;
  font-size: 1.5rem;
  position: relative;
  vertical-align: baseline;
  margin-right: 8px;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-list-item .p-in-detail-cv .u-head {
    font-size: 1.1rem;
  }
}
.p-story__contents-main-character-list-item .p-in-detail-cv .u-head::before {
  content: "[";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-family: var(--font-ibm);
  font-weight: 700;
  font-size: 1.4rem;
  pointer-events: none;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-list-item .p-in-detail-cv .u-head::before {
    font-size: 1.1rem;
  }
}
.p-story__contents-main-character-list-item .p-in-detail-cv .u-head::after {
  content: "]";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-family: var(--font-ibm);
  font-weight: 700;
  font-size: 1.4rem;
  pointer-events: none;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-list-item .p-in-detail-cv .u-head::after {
    font-size: 1.1rem;
  }
}
.p-story__contents-main-character-list-item .p-in-detail-text {
  margin-top: 28px;
  font-size: 1.8rem;
  line-height: 2;
}
@media screen and (max-width: 900px) {
  .p-story__contents-main-character-list-item .p-in-detail-text {
    margin-top: 23px;
    font-size: 1.2rem;
    line-height: 2;
    color: var(--color-black);
  }
  .--shikaku .p-story__contents-main-character-list-item .p-in-detail-text {
    color: var(--color-white);
  }
  .--koi .p-story__contents-main-character-list-item .p-in-detail-text {
    color: var(--color-white);
  }
}

.p-story__nav {
  width: 85.6%;
  max-width: 1200px;
  margin: 0 auto 204px;
  padding-top: 160px;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 900px) {
  .p-story__nav {
    width: 83.6%;
    margin: 0 auto 78px;
    padding-top: 64px;
  }
}
.p-story__nav-title {
  margin-bottom: 54px;
  font-weight: 700;
  font-family: var(--font-outfit);
  font-size: 5.8rem;
  text-align: center;
}
@media screen and (max-width: 900px) {
  .p-story__nav-title {
    margin-bottom: 36px;
    font-size: 3.2rem;
  }
}
.p-story__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: min(1.35vw, 19px);
}
@media screen and (max-width: 900px) {
  .p-story__nav-list {
    gap: 2.4vw 1.6vw;
  }
}
.p-story__nav-list-item {
  width: 23.8%;
  transition: transform 0.6s var(--ease-main);
}
@media screen and (min-width: 901px) {
  .p-story__nav-list-item:hover {
    transform: scale(0.97);
  }
}
@media screen and (max-width: 900px) {
  .p-story__nav-list-item {
    width: 49%;
  }
}
@media screen and (min-width: 901px) {
  .p-story__nav-list-item .p-in-link:hover .p-in-image-focus {
    opacity: 1;
  }
}
.p-story__nav-list-item .p-in-link .p-in-image-item {
  position: relative;
}
.p-story__nav-list-item .p-in-link .p-in-image-focus {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.7s var(--ease-main);
}
.p-story__nav-list-item .p-in-link .p-in-image-focus::before, .p-story__nav-list-item .p-in-link .p-in-image-focus::after {
  content: "";
  display: block;
  width: 9%;
  padding-top: 9%;
  box-sizing: content-box;
  position: absolute;
  top: 2.7%;
  z-index: 1;
  pointer-events: none;
}
.p-story__nav-list-item .p-in-link .p-in-image-focus::before {
  left: 2.7%;
  border-top: 2px solid var(--color-red);
  border-left: 2px solid var(--color-red);
}
.p-story__nav-list-item .p-in-link .p-in-image-focus::after {
  right: 2.7%;
  border-top: 2px solid var(--color-red);
  border-right: 2px solid var(--color-red);
}
.p-story__nav-list-item .p-in-link .p-in-image-focus {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.7s var(--ease-main);
}
.p-story__nav-list-item .p-in-link .p-in-image-focus::before, .p-story__nav-list-item .p-in-link .p-in-image-focus::after {
  content: "";
  display: block;
  width: 9%;
  padding-top: 9%;
  box-sizing: content-box;
  position: absolute;
  top: 2.7%;
  z-index: 1;
  pointer-events: none;
}
.p-story__nav-list-item .p-in-link .p-in-image-focus::before {
  left: 2.7%;
  border-top: 2px solid var(--color-red);
  border-left: 2px solid var(--color-red);
}
.p-story__nav-list-item .p-in-link .p-in-image-focus::after {
  right: 2.7%;
  border-top: 2px solid var(--color-red);
  border-right: 2px solid var(--color-red);
}
.p-story__nav-list-item .p-in-link .p-in-image-corner::before, .p-story__nav-list-item .p-in-link .p-in-image-corner::after {
  content: "";
  display: block;
  width: 9%;
  padding-top: 9%;
  box-sizing: content-box;
  position: absolute;
  bottom: 2.7%;
  z-index: 1;
  pointer-events: none;
}
.p-story__nav-list-item .p-in-link .p-in-image-corner::before {
  left: 2.7%;
  border-bottom: 2px solid var(--color-red);
  border-left: 2px solid var(--color-red);
}
.p-story__nav-list-item .p-in-link .p-in-image-corner::after {
  right: 2.7%;
  border-bottom: 2px solid var(--color-red);
  border-right: 2px solid var(--color-red);
}
.p-story__nav-list-item .p-in-link .p-in-image-deco {
  width: 13%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.p-story__nav-list-item .p-in-link .p-in-image-deco svg {
  fill: var(--color-red);
}
.p-story__nav-list-item .p-in-link .p-in-image-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  background-color: var(--color-black-alpha);
}