@charset "UTF-8";
/* ==========================================================================
   Mainvisual
========================================================================== */
.mv-bg {
  content: "";
  width: 100%;
  inset: 0;
  position: fixed;
  background: url(/iinachan/assets/img/top/mainvisual-bg.png) no-repeat center center / 192rem auto;
  pointer-events: none;
  z-index: -1;
}
.mv-bg.is-unpinned {
  position: absolute;
  height: 100lvh;
  bottom: auto;
}
.sec-mainvisual {
  width: 100%;
  height: 100svh;
  position: relative;
  z-index: 1;
}
.sec-mainvisual .screen-block {
  width: 100%;
  height: 100svh;
  position: absolute;
}
.sec-mainvisual .logo {
  width: clamp(16rem, 20vw, 38.2rem);
  position: absolute;
  left: 4rem;
  top: 4rem;
}
.sec-mainvisual .logo img {
  width: 100%;
}
.sec-mainvisual .iinachan {
  width: clamp(20rem, 24vw, 46.4rem);
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -30vh;
  transform: translateX(-50%);
}
.sec-mainvisual .iinachan img {
  --floating-distance: 5rem;
  width: 100%;
  animation: floating 2s ease-in-out infinite;
}
.sec-mainvisual .page-navi {
  width: min(100%, 123.2rem);
  padding: 0 1.6rem;
  position: absolute;
  left: 50%;
  bottom: 4vw;
  transform: translateX(-50%);
  z-index: 9;
}
@media screen and (max-width: 1280px) and (min-width: 769px) {
  .sec-mainvisual .page-navi {
    width: 76rem;
  }
}
@media screen and (max-width: 768px) {
  .mv-bg {
    background: url(/iinachan/assets/img/top/mainvisual-bg-sp.png) no-repeat center bottom / cover;
  }
  .sec-mainvisual .iinachan {
  }
  .sec-mainvisual .page-navi {
    bottom: 4rem;
  }
}
/* ==========================================================================
  Intro
========================================================================== */
.sec-intro {
  padding: 14rem 0;
  text-align: center;
  position: relative;
  z-index: 1;
}
.sec-intro .balloons {
  width: min(100%, 120rem);
  aspect-ratio: 120/107;
  margin: 6rem auto 0;
  position: relative;
}
.sec-intro .balloons:after {
  content: "";
  height: 36.2rem;
  aspect-ratio: 435/358;
  background: url(/iinachan/assets/img/top/intro-iinachan.png) no-repeat center center/contain;
  position: absolute;
  left: 46%;
  bottom: 4rem;
  transform: translateX(-50%);
  z-index: 4;
}
.sec-intro .balloons li {
  position: absolute;
}
.sec-intro .balloons .birthday {
  width: 23.87%;
  left: calc(5% - .7rem);
  bottom: 5.11%;
  z-index: 1;
}
.sec-intro .balloons .name {
  width: 26.554%;
  left: calc(10.176% - .7rem);
  bottom: 42.46%;
}
.sec-intro .balloons .personality {
  width: 38.32%;
  left: calc(29.4% - .7rem);
  bottom: 25.13%;
  z-index: 1;
}
.sec-intro .balloons .slogan {
  width: 33.192%;
  left: calc(42% - .7rem);
  bottom: 57.14%;
}
.sec-intro .balloons .hobby {
  width: 28.91%;
  left: calc(69.6% - .7rem);
  bottom: 14.36%;
}
.sec-intro h3 {
  max-width: 81rem;
  margin: 6rem auto 4rem;
}
.sec-intro p {
  font-size: 2.4rem;
  line-height: 1.8;
  text-shadow: 2px 2px 5px #fff, -2px -2px 2px #fff;
}
.sec-intro p + p {
  margin-top: 2.4rem;
}
.sec-intro p em {
  color: var(--color-orange);
}
@media screen and (max-width: 768px) {
  .sec-intro {
    padding: 6rem 1.6rem 8rem;
  }
  .sec-intro .balloons {
    aspect-ratio: unset;
    padding-bottom: 65rem;
  }
  .sec-intro .balloons:after {
    width: 24.4rem;
    height: auto;
    left: 45%;
    bottom: 0;
  }
  .sec-intro .balloons .birthday {
    width: 14.4rem;
    z-index: 3;
    left: -1.7rem;
    bottom: 14rem;
  }
  .sec-intro .balloons .name {
    width: 17rem;
    left: -2.7rem;
    bottom: 36rem;
  }
  .sec-intro .balloons .personality {
    width: 23rem;
    z-index: 2;
    left: 7.3rem;
    bottom: 24rem;
  }
  .sec-intro .balloons .slogan {
    width: 19rem;
    z-index: 3;
    left: 19.3rem;
    bottom: 40rem;
  }
  .sec-intro .balloons .hobby {
    width: 17.8rem;
    left: 20.3rem;
    bottom: 8rem;
  }
  .sec-intro h3 {
    width: 26rem;
    margin: 5rem auto 2rem;
  }
  .sec-intro p {
    font-size: 1.4rem;
    line-height: 2;
  }
  .sec-intro p + p {
    margin: 0;
  }
}
/* ==========================================================================
  Movie
========================================================================== */
.sec-movie {
  padding: 14rem 1.6rem 22rem;
  margin-top: -0.4rem; /* remove white space */
  background: url(/iinachan/assets/img/common/bg-grassfield.png) repeat-y center top/ 192rem auto;
  position: relative;
  z-index: 1;
}
.sec-movie button {
  display: block;
  max-width: 96.4rem;
  margin: 4rem auto;
}
.sec-movie p {
  max-width: 80rem;
  margin: auto;
  text-align: center;
  font-size: 2.4rem;
  line-height: 1.8;
  text-shadow: 2px 2px 5px #fff, -2px -2px 2px #fff;
}
.sec-movie .ani-paramanga {
  --para-aspect-ratio-width: 434;
  --para-aspect-ratio-height: 610;
  --para-height: 15.2rem;
}
.sec-movie .ani-paramanga span{
  background: url(/iinachan/assets/img/top/movie-paramanga.png) no-repeat 0 0/ 100% auto;
}
@media screen and (max-width: 768px) {
  .sec-movie {
    padding: 2rem 1.6rem 14rem;
  }
  .sec-movie figure {
    margin: 0 auto 2rem;
  }
  .sec-movie p {
    font-size: 1.4rem;
    text-align: justify;
  }
  .sec-movie .ani-paramanga {
    --para-height: 7.9rem;
  }
}
/* ==========================================================================
  Clips
========================================================================== */
.sec-clips {
  padding: 16rem 0;
  background: url(/iinachan/assets//img/top/clips-bg.png) repeat center top;
  position: relative;
}
.clips-slider .splide__track {
  margin: 8rem auto 6rem;
}
.clips-slider .splide__list {
  align-items: center;
  min-height: 58rem;
}
.clips-slider .slide-inner {
  width: 32.4rem;
  aspect-ratio: 324/576;
  border-radius: 1.6rem;
  background-color: var(--color-orange-light);
  transition: all 0.5s;
  border: 0.8rem solid transparent;
  transform: scale(0.82);
  transform-origin: left center;
  position: relative;
  overflow: hidden;
}
.clips-slider .splide__slide.is-move ~ .splide__slide .slide-inner {
  transform-origin: right center;
}
.clips-slider .splide__slide .slide-inner.comingsoon {
  background-image: radial-gradient(circle, rgba(255 255 255 /0.16) 0.28rem, transparent 0.28rem);
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.clips-slider .splide__slide .slide-inner.comingsoon:before {
  content: "";
  --floating-distance: 1rem;
  width: 22rem;
  aspect-ratio: 464/320;
  margin-bottom: 2rem;
  background: url(/iinachan/assets/img/top/mainvisual-iinachan.png) no-repeat center center/contain;
  animation: floating 2s ease-in-out infinite;
  pointer-events: none;
}
.clips-slider .splide__slide .slide-inner.comingsoon:after {
  content: "COMING SOON...";
  display: block;
  color: #fff;
  text-align: center;
  font-size: 4.5rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
  pointer-events: none;
}
.clips-slider .slide-inner button {
  display: block;
  height: 100%;
  position: relative;
  opacity: 1 !important;
}
.clips-slider .slide-inner button:after {
  content: "";
  width: 8rem;
  aspect-ratio: 1 / 1;
  background: var(--color-orange);
  border-radius: 999rem;
  border: none;
  background: url(/iinachan/assets/img/common/ico-play.svg) var(--color-orange) no-repeat center center/2.4rem auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.clips-slider .slide-inner iframe,
.clips-slider .splide__slide .slide-inner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.8rem;
}
.clips-slider .splide__slide.is-move .slide-inner {
  transform: scale(1);
  transform-origin: center center;
}
.clips-slider .splide__slide.is-move .slide-inner:has(:not(.comingsoon)) {
  border-color: var(--color-orange);
}

.clips-slider .controller {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}
.clips-slider .controller .splide__arrow {
  all: revert;
  width: 8rem;
  aspect-ratio: 1/1;
  background: var(--color-orange);
  border-radius: 999rem;
  border: none;
  cursor: pointer;
  background-position: center center;
  background-size: 2.4rem auto;
  background-repeat: no-repeat;
}
.clips-slider .controller .splide__arrow svg {
  display: none;
}
.clips-slider .controller .splide__arrow--prev {
  background-image: url(/iinachan/assets/img/common/ico-arrow-left.svg);
}
.clips-slider .controller .splide__arrow--next {
  order: 99;
  background-image: url(/iinachan/assets/img/common/ico-arrow-right.svg);
}
.clips-slider .controller .splide__pagination {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 0;
}
.clips-slider .controller .splide__pagination li {
  margin: 0;
  line-height:0;
}
.clips-slider .controller .splide__pagination li button {
  all: revert;
  width: 2rem;
  aspect-ratio: 1/1;
  background: var(--color-orange);
  border-radius: 999rem;
  border: 0.4rem solid var(--color-orange);
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.clips-slider .controller .splide__pagination li button.is-active {
  background: #fff;
  border-color: var(--color-orange);
  width:2.4rem;
}

@media screen and (max-width: 768px) {
  .sec-clips {
    padding: 8rem 0 0;
  }
  .clips-slider .splide__track {
    margin: 4rem auto;
  }
  .clips-slider .splide__list {
    min-height: 0;
  }
  .clips-slider .slide-inner {
    width: 18rem;
    border-radius: 1.2rem;
    border-width: 0.4rem;
    transform: scale(0.85);
  }
  .clips-slider .splide__slide .slide-inner.comingsoon {
    background-image: radial-gradient(circle, rgba(255 255 255 /0.16) 0.14rem, transparent 0.14rem);
    background-size: 0.8rem 0.8rem;
  }
  .clips-slider .splide__slide .slide-inner.comingsoon:before {
    width: 12rem;
  }
  .clips-slider .splide__slide .slide-inner.comingsoon:after {
    font-size: 2rem;
  }
  .clips-slider .slide-inner button:after {
    width: 4rem;
    background-size: 1.2rem auto;
  }
  .clips-slider .controller {
    gap: 2rem;
  }
  .clips-slider .controller .splide__arrow {
    width: 4rem;
    background-size: 1.6rem auto;
  }
  .clips-slider .controller .splide__pagination {
    gap: 1rem;
  }
  .clips-slider .controller .splide__pagination li button {
    width: 1rem;
    border-width: 0.2rem;
  }
  .clips-slider .controller .splide__pagination li button.is-active {
    width:1.2rem;
  }
}
/* ==========================================================================
  Topics
========================================================================== */
.sec-topics {
  padding: 10rem 0 18rem;
  background: url(/iinachan/assets//img/top/clips-bg.png) repeat center top;
}
.topics-slider .splide__track {
  margin: 8rem auto 0;
}
.topics-slider .splide__slide .slide-inner {
  width: min(65vw, 100rem);
  margin: 0 3rem;
}
.topics-slider .splide__slide .slide-inner figure {
  background: #ddd;
  aspect-ratio: 16/9;
  border-radius: 2rem;
  overflow: hidden;
  transform: scale(0.8);
  transform-origin: center center;
  transition: all 0.7s;
}
.topics-slider .splide__slide .slide-inner figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.topics-slider .splide__slide.is-move .slide-inner figure {
  transform: scale(1);
}
.topics-slider .splide__slide .slide-inner .info {
  width: 80%;
  margin: 6rem auto 0;
  font-size: 2.4rem;
  opacity: 0;
  transform: scale(0.8);
  transform-origin: center center;
  transition: all 0.5s 0.2s;
}
.topics-slider .splide__slide.is-move .slide-inner .info {
  opacity: 1;
  transform: scale(1);
}
.topics-slider .splide__slide .slide-inner .info time {
  display: block;
  margin: 0 0 2rem;
  font-size: 1.6rem;
}
.topics-slider .splide__slide .slide-inner .info .btn {
  width: min(100%, 36rem);
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding-inline: 2.4rem 1.6rem;
  margin: 6rem auto 0;
  border-radius: 999rem;
  background: var(--color-orange);
  font-size: 2rem;
  color: #fff;
}
.topics-slider .splide__slide .slide-inner .info .btn:after {
  content: "";
  width: 2.4rem;
  aspect-ratio: 1;
  border-radius: 999rem;
  background: url(/iinachan/assets/img/common/ico-chevron-right.svg) #fff no-repeat center center / 0.8rem auto;
}
.topics-slider .splide__arrow {
  all: revert;
  width: min(6vw, 8rem);
  aspect-ratio: 1/1;
  background: var(--color-orange);
  border-radius: 999rem;
  border: none;
  cursor: pointer;
  background-position: center center;
  background-size: 2.4rem auto;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 2;
  top: calc((min(37vw, 56.3rem) / 2) - 4rem);
  --offset-inline: calc(50% - (min(65vw, 100rem) / 2) - min(9vw, 12rem));
}
.topics-slider .splide__arrow svg {
  display: none;
}
.topics-slider .splide__arrow--prev {
  background-image: url(/iinachan/assets/img/common/ico-arrow-left.svg);
  left: var(--offset-inline);
}
.topics-slider .splide__arrow--next {
  order: 99;
  background-image: url(/iinachan/assets/img/common/ico-arrow-right.svg);
  right: var(--offset-inline);
}

@media screen and (max-width: 768px) {
  .sec-topics {
    padding: 8rem 0;
  }
  .topics-slider .splide__track {
    margin: 4rem auto 0;
  }
  .topics-slider .splide__slide .slide-inner {
    width: 32.5rem;
  }
  .topics-slider .splide__slide .slide-inner figure {
    border-radius: 1rem;
    transition: all 0.5s 0.2s;
  }
  .topics-slider .splide__slide .slide-inner .info {
    width: 100%;
    margin: 2.4rem 0 0;
    font-size: 1.4rem;
  }
  .topics-slider .splide__slide .slide-inner .info time {
    margin: 0 0 1rem;
    font-size: 1.2rem;
  }
  .topics-slider .splide__slide .slide-inner .info .btn {
    width: 25.5rem;
    height: 5rem;
    margin-top: 3rem;
    font-size: 1.4rem;
  }
  .topics-slider .splide__slide .slide-inner .info .btn:after {
    background-position: 55% center;
  }
  .topics-slider .splide__arrow {
    width: 4rem;
    background-size: 1.6rem auto;
    top: 7.5rem;
  }
  .topics-slider .splide__arrow--prev {
    left: 0.5rem;
  }
  .topics-slider .splide__arrow--next {
    right: 0.5rem;
  }
}
/* ==========================================================================
  Download
========================================================================== */
.sec-download {
  padding: 8.5% 8% 30rem;
  background: url(/iinachan/assets/img/common/bg-grassfield.png) repeat-y center top/ 100% auto;
  text-align: center;
  position: relative;
}
.sec-download > * {
  position: relative;
  z-index: 1;
}
.sec-download .text {
  margin: 16rem auto 6rem;
}
.sec-download .accordion {
  margin-top: 10rem;
}
.sec-download .accordion .btn-trigger {
  display: none;
}
.sec-download .download-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6rem 4rem;
  max-width: 138.4rem;
  margin: 6rem auto 0;
}
.sec-download .download-list li {
  flex: 0 1 calc(25% - 4rem);
}
.sec-download .download-list li a {
  --border-radius: 2.4rem;
  display: block;
  border-radius: var(--border-radius);
  position: relative;
  opacity: 1 !important;
  transition: all 0.2s;
}
.sec-download .download-list li a:hover {
  transform: rotate(5deg);
}
.sec-download .download-list li a:after {
  content: "";
  width: 4rem;
  aspect-ratio: 1;
  border-radius: 999rem;
  background: url(/iinachan/assets/img/common/ico-download.svg) var(--color-orange) no-repeat center center / 2.4rem auto;
  position: absolute;
  right: 1.6rem;
  bottom: 1.6rem;
}
.sec-download .download-list li p {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.2rem 0.4rem;
  background-color: var(--color-orange);
  color: #fff;
  font-size: min(1.15vw, 2rem);
  letter-spacing: -0.02em;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.sec-download .download-list li figure {
  /* aspect-ratio: 316/376; */
  border: 0rem solid var(--color-orange);
  border-top: none;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  overflow: hidden;
  transition: border 0.1s;
}
.sec-download .download-list:not(.large) li a:hover figure {
  border-width: 0.5rem;
}
.sec-download .download-list li figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sec-download .deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.sec-download .deco.iinachan {
  max-width: 67.5rem;
  width: clamp(25rem, 35.16%, 67.5rem);
  left: -6%;
  top: -7%;
}
.sec-download .deco.ben {
  width: clamp(10rem, 17.55%, 31.6rem);
  right: 0;
  top: 3%;
}
.sec-download .deco.alice {
  width: clamp(14rem, 17.55%, 33.7rem);
  left: -3%;
  top: 24%;
}
.sec-download .deco.nekomata {
  width: clamp(16rem, 23.54%, 45.2rem);
  right: -4%;
  top: 34%;
}
.sec-download .ani-paramanga {
  --para-aspect-ratio-width: 270;
  --para-aspect-ratio-height: 68;
  --para-height: 20rem;
}
.sec-download .ani-paramanga span {
  background: url(/iinachan/assets/img/top/download-paramanga.png) no-repeat 0 0/ 100% auto;
  animation-duration: 1s, 15s;
}
@media screen and (min-width: 769px) {
  .sec-download .download-list.large {
    gap: 8rem;
    max-width: 104rem;
  }
  .sec-download .download-list.large li {
    flex: 0 1 calc(50% - 8rem);
  }
  .sec-download .download-list.large li figure {
    border-radius: inherit;
    border: 0.8rem solid var(--color-orange);
  }
  .sec-download .download-list.large li a:after {
    width: 8rem;
    background-size: 4.8rem auto;
    right: 3rem;
    bottom: 3rem;
  }
}
@media screen and (max-width: 1200px) {
  .sec-download .download-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem 2.4rem;
  }
  .sec-download .deco.iinachan {
    left: -10%;
    top: -5%;
  }
}
@media screen and (max-width: 768px) {
  .sec-download {
    padding: 20rem 1.6rem 16rem;
  }
  .sec-download .text {
    margin: 8rem auto 4rem;
  }
  .sec-download .accordion {
    margin-top: 3rem;
  }
  .sec-download .accordion .btn-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    width: 25.5rem;
    height: 5rem;
    padding-inline: 2.4rem 1.6rem;
    margin: 0 auto 4rem;
    border-radius: 999rem;
    background: var(--color-orange);
    font-size: 1.4rem;
    color: #fff;
  }
  .sec-download .accordion .btn-trigger:after {
    content: "";
    width: 2.4rem;
    aspect-ratio: 1;
    border-radius: 999rem;
    background: url(/iinachan/assets/img/common/ico-plus.svg) #fff no-repeat center center / 1.4rem auto;
  }
  .sec-download .accordion .btn-trigger.is-open:after {
    background: url(/iinachan/assets/img/common/ico-minus.svg) #fff no-repeat center center / 1.4rem auto;
  }
  .sec-download .accordion h3 img {
    height: 5.6rem;
  }
  .sec-download .accordion .contents {
    display: none;
  }
  .sec-download .accordion .contents.is-open {
    display: block;
  }
  .sec-download .download-list {
    gap: 3rem;
    margin: 3rem auto 8rem;
  }
  .sec-download .download-list li {
    flex: 0 0 20rem;
  }
  .sec-download .download-list li:nth-of-type(n + 5) {
    display: none;
  }
  .sec-download .download-list.show-all li:nth-of-type(n + 5) {
    display: block !important;
  }
  .sec-download .download-list li a {
    --border-radius: 1.6rem;
    grid-template-rows: auto;
  }
  .sec-download .download-list li a:after {
    width: 3rem;
    background-size: 1.6rem auto;
    right: 1.2rem;
    bottom: 1.2rem;
  }
  .sec-download .download-list li p {
    padding: 1.2rem 0.8rem;
    font-size: 1.2rem;
  }
  .sec-download .download-list.large li figure {
    border-radius: inherit;
    border: 0.4rem solid var(--color-orange);
  }
  .sec-download .download-list.large li a {
    display: block;
  }
  .sec-download .deco.iinachan {
    top: -5rem;
  }
  .sec-download .deco.ben {
    top: 25rem;
  }
  .sec-download .deco.alice {
    top: 44rem;
  }
  .sec-download .deco.nekomata {
    top: 67rem;
  }
  .sec-download .ani-paramanga {
    --para-height: 8.1rem;
  }
}