@charset "UTF-8";
* {
  letter-spacing: .25em
}
html {
  font-size: 58% !important
}
body {
  min-width: 1000px;
  width: 100%;
  margin: 0 auto;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: 400;
  letter-spacing: .2em;
  color: #232323;
  font-size: 2rem;
  overflow: hidden;
  line-height: 2.8;
  word-break: break-all;
  -webkit-font-feature-settings: "palt"1;
  font-feature-settings: "palt"1
}
* html body {
  font-size: 75%
}
.l-header {
  position: relative;
  z-index: 1
}
.l-header .header_menu {
  position: fixed;
  left: 3rem;
  top: 3rem
}
.l-header .header_menu .tit {
  margin-bottom: 1.5rem;
  font-size: 1rem;
  background: rgba(255, 255, 255, .8);
  text-align: center
}
.l-header .header_menu .link nav ul li {
  line-height: 1;
  -webkit-transition: all .3s;
  transition: all .3s
}
.l-header .header_menu .link nav ul li.active {
  padding: 1rem 0;
}
.l-header .header_menu .link nav ul li.active a {
  padding-left: 7rem;
}
.l-header .header_menu .link nav ul li.active a::before {
  width: 5rem;
}
.l-header .header_menu .link nav ul li.active a span {
  opacity: 1 !important;
  color: #999999;
}
.l-header .header_menu .link nav ul li:hover a span {
  opacity: 1;
}
.l-header .header_menu .link nav ul li a {
  display: block;
  position: relative;
  padding-left: 5rem;
  font-size: 1.3rem;
}
.l-header .header_menu .link nav ul li a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3rem;
  height: 2px;
  /* background: #232323; */
  background: #999999;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%)
}
.l-header .header_menu .link nav ul li a span {
  opacity: 0;
  color: #999999;
}
.section_wrap {
  position: relative;
  padding: 14rem 0;
  z-index: 0
}
.content_wrap {
  position: relative;
  max-width: 145rem;
  margin: 0 auto;
  z-index: 0
}
#first_view {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000
}
#first_view .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: #232323;
  -webkit-animation: first_view_bg cubic-bezier(.34, 1.56, .64, 1) 4.3s 1 normal forwards;
  animation: first_view_bg cubic-bezier(.34, 1.56, .64, 1) 4.3s 1 normal forwards;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  z-index: -1
}
#first_view .logo {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 0
}
#first_view .logo img {
  width: 23rem;
  opacity: 0;
  -webkit-animation: first_view_logo cubic-bezier(.34, 1.56, .64, 1) 4s 1 normal forwards;
  animation: first_view_logo cubic-bezier(.34, 1.56, .64, 1) 4s 1 normal forwards;
  -webkit-animation-delay: .5s;
  animation-delay: .5s
}
@-webkit-keyframes first_view_bg {
  0% {
    opacity: 1
  }
  95% {
    opacity: 0
  }
  100% {
    display: none;
    opacity: 0
  }
}
@keyframes first_view_bg {
  0% {
    opacity: 1
  }
  95% {
    opacity: 0
  }
  100% {
    display: none;
    opacity: 0
  }
}
@-webkit-keyframes first_view_logo {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }
  70% {
    opacity: 1
  }
  100% {
    display: none;
    opacity: 0
  }
}
@keyframes first_view_logo {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }
  70% {
    opacity: 1
  }
  100% {
    display: none;
    opacity: 0
  }
}
@media screen and (min-width:1401px) and (max-width:1600px) {
  html {
    font-size: 53% !important
  }
}
@media screen and (min-width:1201px) and (max-width:1400px) {
  html {
    font-size: 50% !important
  }
}
@media screen and (min-width:1024px) and (max-width:1300px) {
  html {
    font-size: 47% !important
  }
  .content_wrap {
    margin: 0 10rem
  }
}
@media screen and (max-width:1023px) {
  * {
    letter-spacing: .15em
  }
  html {
    font-size: 42% !important
  }
  body {
    min-width: 1px;
    line-height: 2.3
  }
  .l-header .header_menu {
    left: 2rem;
    top: 2rem
  }
  .l-header .header_menu .tit {
    padding: .2rem
  }
  .l-header .header_menu .link nav ul li {
    line-height: .8
  }
  .l-header .header_menu .link nav ul li:hover a span {
    opacity: 0
  }
  .section_wrap {
    padding: 9rem 0
  }
  .content_wrap {
    margin: 0 4.8rem;
    width: auto
  }
}
@media screen and (max-width:320px) {
  html {
    font-size: 43% !important
  }
  .content_wrap {
    margin: 0 1.8rem
  }
}
.top #main_visual {
  position: relative;
  min-height: 100vh;
  overflow: hidden
}
.top #main_visual.sc_animation.is-animated .bg {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1
}
.top #main_visual.sc_animation.is-animated .logo img {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0)
}
.top #main_visual .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../img/top/main_visual_bg.jpg) no-repeat center center;
  background-size: cover;
  -webkit-transition: all 4s;
  transition: all 4s;
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
  opacity: 0
}
.top #main_visual .logo {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden
}
.top #main_visual .logo img {
  width: 30rem;
  -webkit-transform: translate(0, 100%);
  transform: translate(0, 100%);
  -webkit-transition: all 1.5s;
  transition: all 1.5s;
  -webkit-transition-delay: 3s;
  transition-delay: 3s
}
@media screen and (max-width:1023px) {
  .top #main_visual .logo img {
    max-width: 26rem
  }
}
.sc_animation.ShowIn, .sc_animation.ShowInScale, .sc_animation.ShowInUp, .sc_animation.SlideLeft, .sc_animation.SlideRight, .sc_animation.SlideUp {
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s
}
.sc_animation.is-animated.SlideLeft {
  -webkit-animation: SlideLeft cubic-bezier(.34, .8, .64, 1) 1.4s 1 normal forwards;
  animation: SlideLeft cubic-bezier(.34, .8, .64, 1) 1.4s 1 normal forwards
}
.sc_animation.is-animated.SlideRight {
  -webkit-animation: SlideRight cubic-bezier(.34, .8, .64, 1) 1.4s 1 normal forwards;
  animation: SlideRight cubic-bezier(.34, .8, .64, 1) 1.4s 1 normal forwards
}
.sc_animation.is-animated.SlideUp {
  -webkit-animation: SlideUp cubic-bezier(.34, 1.56, .64, 1) 1.6s 1 normal forwards;
  animation: SlideUp cubic-bezier(.34, 1.56, .64, 1) 1.6s 1 normal forwards
}
.sc_animation.is-animated.ShowIn {
  -webkit-animation: ShowIn cubic-bezier(.34, 1.56, .64, 1) 5s 1 normal forwards;
  animation: ShowIn cubic-bezier(.34, 1.56, .64, 1) 5s 1 normal forwards
}
.sc_animation.is-animated.ShowInScale {
  -webkit-animation: ShowInScale cubic-bezier(.34, 1.56, .64, 1) 1.6s 1 normal forwards;
  animation: ShowInScale cubic-bezier(.34, 1.56, .64, 1) 1.6s 1 normal forwards
}
.sc_animation.is-animated.ShowInUp {
  -webkit-animation: ShowInUp cubic-bezier(.34, .9, .5, 1) 1.6s 1 normal forwards;
  animation: ShowInUp cubic-bezier(.34, .9, .5, 1) 1.6s 1 normal forwards
}
.sc_animation.ShowUpImg {
  overflow: hidden
}
.sc_animation.ShowUpImg img {
  opacity: 0;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all 2s;
  transition: all 2s
}
.sc_animation.ShowUpImg.is-animated img {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1)
}
.sc_animation.ShowUpImg02 {
  position: relative;
  overflow: hidden;
  z-index: 0
}
.sc_animation.ShowUpImg02::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #232323;
  z-index: 1;
  -webkit-transition: all .6s;
  transition: all .6s
}
.sc_animation.ShowUpImg02 img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all 1s;
  transition: all 1s
}
.sc_animation.ShowUpImg02.is-animated::before {
  width: 0
}
@-webkit-keyframes SlideLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate(30%, 0);
    transform: translate(30%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }
}
@keyframes SlideLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate(30%, 0);
    transform: translate(30%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }
}
@-webkit-keyframes SlideRight {
  0% {
    opacity: 0;
    -webkit-transform: translate(-30%, 0);
    transform: translate(-30%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }
}
@keyframes SlideRight {
  0% {
    opacity: 0;
    -webkit-transform: translate(-30%, 0);
    transform: translate(-30%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }
}
@-webkit-keyframes SlideUp {
  0% {
    -webkit-transform: translate(0, 2rem);
    transform: translate(0, 2rem)
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }
}
@keyframes SlideUp {
  0% {
    -webkit-transform: translate(0, 2rem);
    transform: translate(0, 2rem)
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }
}
@-webkit-keyframes ShowIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@keyframes ShowIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@-webkit-keyframes ShowInScale {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0)
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}
@keyframes ShowInScale {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0)
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}
@-webkit-keyframes ShowInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%)
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1
  }
}
@keyframes ShowInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%)
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1
  }
}
.animation-delay1 {
  -webkit-animation-delay: .1s !important;
  animation-delay: .1s !important
}
.animation-delay2 {
  -webkit-animation-delay: .2s !important;
  animation-delay: .2s !important
}
.animation-delay3 {
  -webkit-animation-delay: .3s !important;
  animation-delay: .3s !important
}
.animation-delay4 {
  -webkit-animation-delay: .4s !important;
  animation-delay: .4s !important
}
.animation-delay5 {
  -webkit-animation-delay: .5s !important;
  animation-delay: .5s !important
}
.animation-delay6 {
  -webkit-animation-delay: .6s !important;
  animation-delay: .6s !important
}
.animation-delay7 {
  -webkit-animation-delay: .7s !important;
  animation-delay: .7s !important
}
.animation-delay8 {
  -webkit-animation-delay: .8s !important;
  animation-delay: .8s !important
}
.animation-delay9 {
  -webkit-animation-delay: .9s !important;
  animation-delay: .9s !important
}
.animation-delay10 {
  -webkit-animation-delay: 1s !important;
  animation-delay: 1s !important
}