@charset "UTF-8";

@media screen and (max-width:767px) {
   .btn_button--inner {
      padding-right: 13px
   }
}

.btn_button--inner:before {
   width: 7px;
   height: 7px;
   content: '';
   background-repeat: no-repeat;
   background-image: url(../img/shared/ico_btn_arrow.svg);
   position: absolute;
   top: 50%;
   right: 0;
   transform: translate(0, -50%)
}

#key .box {
   margin: 0 auto 80px
}

@media screen and (max-width:1100px) {
   #key .box {
      padding: 0 13px;
      margin-bottom: 40px
   }
}

.box-inner {
   max-width: 926px;
   margin: 0 auto
}

.slider-progress {
   width: 2px;
   height: 100%;
   background: #b5b5b5;
   position: relative;
   z-index: 1;
}

.slider-progress .progress {
   width: 2px;
   height: 0;
   background: #fff;
}

.bg_gray {
   background-color: #fcfcfc;
   background-image: url(../img/shared/bg_gray.png)
}

svg:not(:root) {
   overflow: hidden
}

.hidden {
   position: absolute;
   overflow: hidden;
   width: 0;
   height: 0;
   pointer-events: none
}

.content {
   position: relative;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-pack: center;
   justify-content: center;
   -ms-flex-align: center;
   align-items: center;
   min-height: 100%;
   margin: 0 auto
}

.slide-wrapper {
   display: none
}

.scene-nav {
   font-size: 1.15em;
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   border: 0;
   right: 0;
   padding: 1.5em;
   display: none
}

main {
   position: relative;
   width: 100%;
}

#canvas--wrap {
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: absolute;
   top: 0;
   left: 0
}

canvas {
   display: block;
   position: absolute;
   left: 0;
   top: 0
}

@media screen and (max-width:767px) {
   #canvas--wrap canvas {
      object-position: left;
   }
}

.box-main_visual {
   position: relative;
   height: 100%
}

@media screen and (max-width:1100px) {
   .box-main_visual {
      padding: 0
   }
}

.box-project {
   margin-bottom: 0
}

@media screen and (max-width:1100px) {
   .box-project {
      padding: 0
   }
}

@media screen and (max-width:1100px) {
   .box-project {
      padding: 0 13px
   }
}

.box-about {
   padding-top: 158px
}

@media screen and (max-width:767px) {
   .box-about {
      padding-top: 52px;
      margin-bottom: 50px
   }
}

.box-contents {
   padding-bottom: 155px;
   margin-bottom: 0
}

@media screen and (max-width:767px) {
   .box-contents {
      padding-bottom: 40px
   }
}

.box-main_visual_logo_wrap {
   position: absolute;
   top: 144px;
   left: 229px;
}

@media screen and (max-width:767px) {
   .box-main_visual_logo_wrap {
      top: 52px;
      left: 77px
   }
}

.box-main_visual_logo {
   margin-bottom: 58px
}

@media screen and (max-width:767px) {
   .box-main_visual_logo {
      width: 25.78125%;
      margin-bottom: 36px
   }
}

.box-main_visual_logo img {
   width: 100%;
   max-width: 114px
}

@media screen and (max-width:767px) {
   .box-main_visual_logo img {
      width: 106%
   }
}

.box-main_visual_txt {
   font-family: P22Underground;
   font-size: 10px;
   line-height: 17px;
   letter-spacing: .12em;
   color: rgba(255, 255, 255, .7) !important
}

@media screen and (max-width:767px) {
   .box-main_visual_txt {
      width: 65.57377%
   }

   .box-main_visual_txt br {
      display: none
   }
}

.main_visual_slick_area {
   position: relative;
   height: 100%;
   overflow: hidden
}

.main_visual_slick_area_list_item img {
   max-width: 100%;
   max-height: 100%;
   height: 100%;
   margin: 0 auto;
   opacity: 0;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}

.main_visual_slick_area_list_item a {
   width: 100%;
   min-height: 100%;
   display: block;
   background-position: center center;
   background-size: cover
}

.main_visual_slick_area_list_item a:hover {
   opacity: 1;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}

.slider-progress {
   height: 54%;
   position: absolute;
   top: 50%;
   left: 60px;
   transform: translateY(-50%);
}

@media screen and (max-width:767px) {
   .slider-progress {
      left: 4vw;
   }
}

#key .slick-prev,
#key .slick-next {
   display: none !important
}

#key .slick-dots {
   display: block;
   position: absolute;
   bottom: 96px;
   right: 38px;
   padding-top: 0;
   z-index: 1;
}

@media screen and (max-width:767px) {
   #key .slick-dots {
      right: 5.3vw;
      bottom: 10.6vw;
   }
}

#key .slick-dots li {
   width: 10px;
   height: 1px;
   margin-bottom: 7px;
}

#key .slick-dots button {
   height: 100%;
   background: #b5b5b5;
   border: 0;
}

#key .slick-dots .slick-active button {
   background: #fff;
}

.slider-ttl_area {
   position: absolute;
   right: 60px;
   bottom: 51px;
}

@media screen and (max-width:767px) {
   .slider-ttl_area {
      right: 28px;
      bottom: 34px
   }
}

.slider-ttl_area a {
   display: inline-block;
   color: #fff;
   font-size: 11px;
   font-family: Times, Times New Roman, "リュウミン M-KL", Ryumin Medium KL, serif;
   letter-spacing: .09em;
   position: relative;
   padding-right: 58px
}

@media screen and (max-width:767px) {
   .slider-ttl_area a {
      padding-right: 38px
   }
}

@media screen and (max-width:767px) {
   .slider-ttl_area a:after {
      width: 24px;
      height: 5px;
      background-size: 24px auto;
      top: 50%;
      transform: translate(0, -50%)
   }
}

.slick-counter {
   width: 30px;
   font-weight: 300;
   font-size: 15px;
   letter-spacing: 0.1em;
   line-height: 20px;
   text-align: center;
   position: absolute;
   bottom: 77px;
   right: 27px;
   z-index: 1;
}

@media screen and (max-width:767px) {
   .slick-counter {
      right: 2.6vw;
      bottom: 6vw;
   }
}