@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : top.css
Description : トップ
===================================================================== */
/* =====================================================================
    mv
======================================================================*/
.mv {
  padding: 8rem 0 11.3rem;
}
.mv-footprints01 {
  position: absolute;
  display: block;
  bottom: -5.2rem;
  right: -11rem;
  width: 64.4rem;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .mv-footprints01 {
    bottom: 1rem;
    right: 1rem;
  }
}
@media screen and (min-width: 768px) {
  .mv {
    padding: 28rem 0 22rem;
  }
}
.mv h1 {
  margin: 0 auto 8rem;
  width: calc(524 / 680 * 100%);
}
@media screen and (min-width: 768px) {
  .mv h1 {
    margin: 0 calc(79 / 1280 * 100%) 0 0;
    width: calc(487 / 1280 * 100%);
  }
}
.mv-ttl {
  margin: 0 auto;
  width: calc(541 / 680 * 100%);
}
@media screen and (min-width: 768px) {
  .mv-ttl {
    margin: 9.6rem 0 0;
    width: 100%;
  }
}
.mv .btn01 {
  margin-top: 11.2rem;
}
@media screen and (min-width: 768px) {
  .mv .btn01 {
    text-align: right;
    margin-top: 8rem;
  }
}
.mv .btn01 a {
  font-size: 3.6rem;
}
.mv .btn01 a::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transform-origin: left top;
          transform-origin: left top;
}
@media screen and (min-width: 768px) {
  .mv .btn01 a {
    font-size: 2.7rem;
  }
}
@media screen and (min-width: 768px) {
  .mv-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .mv-column-right {
    width: calc(623 / 1280 * 100%);
  }
}

/* =====================================================================
    movie
======================================================================*/
.movie {
  background: url(../images/common/bg_pattern02.jpg) repeat top center/80rem auto;
}
.movie > .inner {
  padding: 12rem 0 47.9rem;
}
@media screen and (min-width: 768px) {
  .movie > .inner {
    padding: 12rem 0;
  }
}
@media screen and (min-width: 768px) {
  .movie .sec-ttl {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin: 0 0 0 calc(10 / 1600 * 100%);
    -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
            writing-mode: vertical-lr;
    font-size: 14.8rem;
  }
}
.movie-wrap {
  position: relative;
  -webkit-box-shadow: 0 4rem 8rem 0 rgba(64, 0, 5, 0.5);
          box-shadow: 0 4rem 8rem 0 rgba(64, 0, 5, 0.5);
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .movie-wrap {
    margin-left: calc(400 / 1600 * 100%);
    width: calc(800 / 1600 * 100%);
  }
}
.movie-illust img, .movie-illust02 img {
  -webkit-filter: drop-shadow(0 8rem 8rem rgba(64, 0, 5, 0.7));
          filter: drop-shadow(0 8rem 8rem rgba(64, 0, 5, 0.7));
}
.movie-illust {
  position: absolute;
  bottom: -51.5rem;
  left: -7.6rem;
  width: 96rem;
}
@media screen and (min-width: 768px) {
  .movie-illust {
    bottom: -25.1rem;
    left: -24.1rem;
  }
}
.movie-illust02 {
  position: absolute;
  top: -1rem;
  right: -14.4rem;
  width: 29.4rem;
}
@media screen and (min-width: 768px) {
  .movie-illust02 {
    top: auto;
    bottom: -1.4rem;
    right: -5.8rem;
    width: 35.4rem;
  }
}
@media screen and (min-width: 768px) {
  .movie-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

/* =====================================================================
    intro
======================================================================*/
.intro {
  padding: 34rem 0 54rem;
  overflow: visible;
}
@media screen and (min-width: 768px) {
  .intro {
    padding: 20rem 0 18rem;
  }
}
.intro::before {
  content: "";
  position: absolute;
  display: block;
  top: 0.8rem;
  left: 0;
  width: 100%;
  height: 86.9rem;
  background: url(../images/top/bg_intro_brick01.jpg) no-repeat top center/auto 100%;
}
@media screen and (min-width: 768px) {
  .intro::before {
    top: 0.4rem;
    background-position: top left;
  }
}
.intro::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 0.6rem;
  left: 0;
  width: 100%;
  height: 26.4rem;
  background: url(../images/top/bg_intro_brick02.jpg) no-repeat top left/auto 100%;
}
@media screen and (min-width: 768px) {
  .intro::after {
    background-position: top right;
  }
}
.intro-footprints01 {
  position: absolute;
  display: block;
  top: -5.9rem;
  left: -20.1rem;
  width: 64.4rem;
  -webkit-transform: scale(-1, -1);
          transform: scale(-1, -1);
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .intro-footprints01 {
    top: -10.1rem;
    left: 1rem;
  }
}
.intro-footprints02 {
  position: absolute;
  display: block;
  bottom: -17.5rem;
  right: -18.5rem;
  width: 78.2rem;
  z-index: 1;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .intro-footprints02 {
    bottom: -18.1rem;
    right: 0;
  }
}
.intro-ttl {
  text-align: center;
  margin-bottom: 5rem;
}
.intro-ttl h2 {
  display: inline;
  font-size: 150%;
  font-weight: 800;
  color: #cc0011;
  line-height: 1.4;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #fff100));
  background: linear-gradient(transparent 60%, #fff100 60%);
}
@media screen and (min-width: 768px) {
  .intro-ttl h2 {
    font-size: 3.7rem;
    line-height: 1.6;
  }
}
.intro-ttl h2 em {
  font-style: normal;
  font-size: 151%;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .intro-ttl h2 em {
    font-size: 135%;
  }
}
.intro-text {
  position: relative;
  margin: 0 auto;
  width: calc(640 / 680 * 100%);
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .intro-text {
    width: calc(800 / 1280 * 100%);
    font-size: 2.4rem;
  }
}
.intro-text::before {
  content: "";
  position: absolute;
  display: block;
  top: 12.3rem;
  right: -17.8rem;
  width: 40.2rem;
  height: 61.1rem;
  background: url(../images/top/img_badge.png) no-repeat center/contain;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .intro-text::before {
    top: -29.7rem;
    right: -33.8rem;
  }
}
.intro-text::after {
  content: "";
  position: absolute;
  display: block;
  bottom: -20rem;
  left: -17.6rem;
  width: 50.3rem;
  height: 44.5rem;
  background: url(../images/top/img_glasses.png) no-repeat center/contain;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .intro-text::after {
    bottom: -2.4rem;
    left: -41.8rem;
  }
}
.intro-text > *:not(:last-child) {
  margin-bottom: 1.4em;
}
.intro-text .color01 {
  font-weight: 800;
  color: #2458b2;
}
.intro-text .color02 {
  font-weight: 800;
  color: #cc0011;
}
.intro-text em {
  font-style: normal;
  font-weight: 800;
  font-size: 150%;
  line-height: 1;
}
.intro-text strong {
  font-weight: 800;
  font-size: 150%;
  letter-spacing: 0.075em;
  color: #2458b2;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #fff100));
  background: linear-gradient(transparent 60%, #fff100 60%);
}
@media screen and (min-width: 768px) {
  .intro-text strong {
    font-size: 190%;
  }
}
.intro-illust {
  position: absolute;
  bottom: calc(-54rem - 0.2em);
  left: 0.24em;
  font-size: 38.7rem;
  width: 1em;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .intro-illust {
    bottom: calc(-18rem - 0.2em);
    left: auto;
    right: -0.112em;
    font-size: 40rem;
  }
}

/* =====================================================================
    project 
======================================================================*/
.project {
  padding: 20rem 0 21.5rem;
}
.project .anime-slide-inner > * {
  background-image: url(../images/common/bg_illust03.jpg);
}
.project .sec-ttl {
  color: #ffffff;
}
.project-pickup {
  position: relative;
  counter-reset: number 0;
  margin-bottom: 8rem;
}
@media screen and (min-width: 768px) {
  .project-pickup {
    margin: 0 auto;
    max-width: 1200px;
  }
}
.project-pickup .slick-list {
  background-color: #ffffff;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .project-pickup .slick-list {
    overflow: visible;
    margin: 0 calc(50% - 50vw);
  }
}
@media screen and (min-width: 768px) {
  .project-pickup {
    margin-bottom: 4.8rem;
  }
}
.project-pickup .slick-slide:nth-child(n+10) .project-pickup-item::before {
  content: "PICK UP " counter(number);
}
.project-pickup-item {
  position: relative;
  counter-increment: number 1;
  width: 100%;
  padding: 8rem 9.5rem;
}
@media screen and (min-width: 768px) {
  .project-pickup-item {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 6rem;
  }
}
.project-pickup-item::before {
  content: "PICK UP 0" counter(number);
  position: absolute;
  display: block;
  top: 8rem;
  right: 3.5rem;
  font-family: "Quantico", sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  letter-spacing: 0;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
}
@media screen and (min-width: 768px) {
  .project-pickup-item::before {
    top: 6rem;
    right: 6rem;
  }
}
.project-pickup-item > a,
.project-pickup-item > figure {
  margin: 0 0 4rem -17.2727272727%;
  width: 119.0909090909%;
}
@media screen and (min-width: 768px) {
  .project-pickup-item > a,
  .project-pickup-item > figure {
    margin: 0 calc(40 / 1080 * 100%) 0 0;
    width: calc(560 / 1080 * 100%);
  }
}
.project-pickup-item h3 {
  margin-bottom: 0.6em;
  font-size: 120%;
  font-weight: 800;
  color: #cc0011;
  line-height: 1.555;
}
@media screen and (min-width: 768px) {
  .project-pickup-item h3 {
    font-size: 110%;
  }
}
.project-pickup-item p {
  line-height: 1.666;
}
@media screen and (min-width: 768px) {
  .project-pickup-item p {
    font-size: 90%;
  }
}
.project-pickup-item time {
  display: block;
  margin-top: 4rem;
  font-family: "Quantico", sans-serif;
  font-size: 80%;
  color: #2458b2;
}
@media screen and (min-width: 768px) {
  .project-pickup-item time {
    margin-top: 5rem;
    font-size: 90%;
  }
}
@media screen and (min-width: 768px) {
  .project-pickup-right {
    padding: 0 0 3rem;
    width: calc(400 / 1080 * 100%);
  }
}
.project-pickup .slick-disabled {
  display: none !important;
}
.project-pickup .slick-arrow {
  display: block;
  position: absolute;
  bottom: calc(100% - 60rem);
  width: 1em;
  height: 1em;
  font-size: 7.2rem;
  background-color: #000000;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .project-pickup .slick-arrow {
    bottom: 6rem;
    font-size: 5.6rem;
    cursor: pointer;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
  }
  .project-pickup .slick-arrow:hover {
    background-color: #fff100;
  }
}
.project-pickup .slick-arrow::before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 0.25em;
  height: 0.25em;
  -webkit-mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 17"><path d="M1.5,17c-.2,0-.4,0-.7-.2-.5-.3-.8-.8-.8-1.3V1.5C0,.9.3.4.8.2,1.4,0,2,0,2.4.3l9,7c.4.3.6.7.6,1.2s-.2.9-.6,1.2l-9,7c-.3.2-.6.3-.9.3ZM3,4.6v7.9l5.1-3.9-5.1-3.9Z" /></svg>');
          mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 17"><path d="M1.5,17c-.2,0-.4,0-.7-.2-.5-.3-.8-.8-.8-1.3V1.5C0,.9.3.4.8.2,1.4,0,2,0,2.4.3l9,7c.4.3.6.7.6,1.2s-.2.9-.6,1.2l-9,7c-.3.2-.6.3-.9.3ZM3,4.6v7.9l5.1-3.9-5.1-3.9Z" /></svg>');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: #cc0011;
}
.project-pickup .slick-arrow.prev {
  left: 0;
  margin-left: calc(-35 / 680 * 100%);
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}
@media screen and (min-width: 768px) {
  .project-pickup .slick-arrow.prev {
    left: auto;
    right: 0;
    margin: 0 18% 0 0;
  }
}
.project-pickup .slick-arrow.next {
  right: 0;
  margin-right: calc(-35 / 680 * 100%);
}
@media screen and (min-width: 768px) {
  .project-pickup .slick-arrow.next {
    margin-right: 11.6666666667%;
  }
}
.project-pickup .slick-dots {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  bottom: calc(100% - 45rem);
  right: 0.3rem;
  margin-top: 0.15em;
  font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
  .project-pickup .slick-dots {
    right: 6rem;
    bottom: 6rem;
    font-size: 1.2rem;
  }
}
.project-pickup .slick-dots li {
  display: inline-block;
  margin: 1em 0 0;
  width: 1em;
  height: 1em;
}
.project-pickup .slick-dots li button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: transparent;
}
.project-pickup .slick-dots li button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border: 0.3em solid #000000;
  border-radius: 50%;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}
.project-pickup .slick-dots li.slick-active button::before {
  background-color: #cc0011;
  border-color: #cc0011;
}
.project-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 768px) {
  .project-list {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.project-list li {
  width: calc(640 / 680 * 100%);
  -webkit-box-shadow: 0 4rem 8rem 0 rgba(0, 19, 51, 0.9);
          box-shadow: 0 4rem 8rem 0 rgba(0, 19, 51, 0.9);
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .project-list li:not(:last-child) {
    margin-bottom: 4rem;
  }
}
@media screen and (min-width: 768px) {
  .project-list li {
    margin: 0 calc(24 / 1280 * 100%) 4.8rem;
    width: calc(368 / 1280 * 100%);
  }
  .project-list li:nth-last-child(-n+3) {
    margin-bottom: 0;
  }
}
.project-list li a {
  padding: 6.25%;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  .project-list li a {
    padding: 6.5217391304%;
    -webkit-transition-property: background-color;
    transition-property: background-color;
  }
  .project-list li a:hover {
    opacity: 1;
    background-color: #fff100;
  }
}
.project-list li a[tabindex="-1"] {
  pointer-events: none;
}
.project-list li figure {
  position: relative;
  font-size: 2.4rem;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .project-list li figure {
    font-size: 1.8rem;
  }
}
.project-list li time {
  position: relative;
  display: block;
  padding: 0.28em 0;
  font-family: "Quantico", sans-serif;
  font-weight: 800;
  font-size: 186%;
  color: #fff100;
  letter-spacing: 0;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .project-list li time {
    font-size: 3.8rem;
  }
}
.project-list li time::before {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  margin-left: -10%;
  width: 120%;
  height: calc(100% + 8rem);
  background-color: #cc0011;
  z-index: -1;
}
.project-list li time small {
  display: inline-block;
  margin: -0.35em 0.9em 0 0;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  font-size: 33%;
  vertical-align: middle;
}
.project-list li p {
  margin-top: 0.9em;
  line-height: 1.625;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
@media screen and (min-width: 768px) {
  .project-list li p {
    font-size: 90%;
  }
}
.project-list li.end figure::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.project-list li.end figure::after {
  content: "終了しました";
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  padding: 0.8em 1.8em;
  color: #808080;
  white-space: nowrap;
  background-color: #000000;
  border-radius: 3em;
}
.project-list li.new figure::after {
  content: "";
  position: absolute;
  display: inline-block;
  top: -0.833em;
  right: -0.833em;
  width: 4.833em;
  height: 3.583em;
  background: url(../images/common/icon_NEW.png) no-repeat center/contain;
}
.project-cs-catch {
  position: relative;
  margin-bottom: 12rem;
}
@media screen and (min-width: 768px) {
  .project-cs-catch {
    margin-left: auto;
    margin-right: auto;
    width: calc(1000 / 1280 * 100%);
  }
  .project-cs-catch::before {
    top: -11.8rem;
    width: 147.9%;
  }
}
.project-cs-catch span {
  display: block;
  text-align: center;
  padding: 1.5em 0;
  width: 100%;
  font-family: "Quantico", sans-serif;
  font-size: 6.4rem;
  letter-spacing: 0;
  color: #cc0011;
  background-color: #000000;
  -webkit-box-shadow: 0 4rem 8rem 0 rgba(0, 19, 51, 0.5);
          box-shadow: 0 4rem 8rem 0 rgba(0, 19, 51, 0.5);
}
.project-cs-text {
  text-align: center;
  font-size: 133%;
  font-weight: 800;
  line-height: 1.5 !important;
  color: #274271;
}
@media screen and (min-width: 768px) {
  .project-cs-text {
    font-size: 3.6rem;
  }
}

/* =====================================================================
    ティザー用
======================================================================*/
.teaser .mv-bg {
  position: absolute;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.teaser .mv-bg-item {
  background: url(../images/common/bg_illust01.jpg) repeat left center/auto 100%;
}
@media screen and (min-width: 768px) {
  .teaser .mv-bg-item {
    background-position: top center;
  }
}
.teaser .mv-bg-item:nth-child(even) {
  background-position: right center;
}
.teaser .movie {
  background-image: url(../images/common/bg_pattern01.jpg);
}
.teaser .movie .sec-ttl {
  color: #ffffff;
}
.teaser .movie-wrap {
  -webkit-box-shadow: 0 4rem 8rem 0 rgba(0, 19, 51, 0.9);
          box-shadow: 0 4rem 8rem 0 rgba(0, 19, 51, 0.9);
}
.teaser .movie-illust {
  bottom: -33.4rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 32.2rem;
}
@media screen and (min-width: 768px) {
  .teaser .movie-illust {
    bottom: -16.1rem;
    left: 3.5rem;
    right: auto;
    margin: 0;
  }
}
.teaser .movie-illust img {
  -webkit-filter: drop-shadow(0 8rem 8rem rgba(0, 19, 51, 0.9));
          filter: drop-shadow(0 8rem 8rem rgba(0, 19, 51, 0.9));
}
@media screen and (max-width: 767px) {
  .teaser .intro {
    padding-top: 16rem;
  }
}
.teaser .project {
  background: #f2f2f2;
}
.teaser .project .sec-ttl {
  color: #274271;
}
.teaser .project-pickup::before, .teaser .project-cs-catch::before {
  content: "";
  position: absolute;
  display: block;
  top: -9.7rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: calc(750 / 680 * 100%);
  height: 48.7rem;
  background: url(../images/top/bg_project_brick.jpg.jpg) no-repeat center/auto 100%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .teaser .project-pickup::before, .teaser .project-cs-catch::before {
    top: -6rem;
    width: 123.25%;
  }
}
.teaser .project-list > li {
  -webkit-box-shadow: 0 4rem 8rem 0 rgba(0, 19, 51, 0.2);
          box-shadow: 0 4rem 8rem 0 rgba(0, 19, 51, 0.2);
}/*# sourceMappingURL=top.css.map */