@charset "UTF-8";
body {
  width: 100%;
  overflow-x: hidden;
}

#js-body {
  visibility: hidden;
}

#page__top {
  opacity: 0;
  transition: all .6s ease-in-out;
}

.page__fadeIn {
  opacity: 1 !important;
}

header {
  width: 100%;
  height: 90px;
  position: fixed;
  top: 0;
  z-index: 101;
  opacity: 0;
}

#target__door {
  position: absolute;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  height: 80vh;
  z-index: 1000000;
}

#target__door .cls-1 {
  stroke-width: 1px;
  stroke: #33465A;
}

#target__door02 {
  position: absolute;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  height: 80vh;
  z-index: 1000000;
}

#target__door02 .cls-1 {
  stroke-width: 1px;
  stroke: #33465A;
}

.finished {
  animation: option cubic-bezier(0.165, 0.84, 0.44, 1) 0.7s 0.1s forwards;
  background-size: cover;
}

@keyframes option {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.door {
  position: relative;
  width: 48%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center center;
  margin: auto;
  top: 0%;
  opacity: 0;
}

.js-door__fadeIn {
  animation: fadeIn cubic-bezier(0.165, 0.84, 0.44, 1) 1s forwards;
}

.js-door__zoomUp {
  animation: zoomUp cubic-bezier(0.165, 0.84, 0.44, 1) 1s forwards;
}

.js-header__fadeIn {
  animation: fadeIn 1s ease-in forwards;
}

.js-particle__fadeIn {
  animation: fadeIn 1s ease-in forwards;
}

.js-visible__top {
  animation: visible .1s forwards ease-in, scrollNone 8.6s forwards ease;
}

.js-visible {
  animation: visible .1s forwards ease-in;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes doorOpenleft {
  0% {
    transform: perspective(600px) rotateY(0deg);
  }
  100% {
    transform: perspective(600px) rotateY(50deg);
  }
}

@keyframes doorOpenright {
  0% {
    transform: perspective(600px) rotateY(0deg);
  }
  100% {
    transform: perspective(600px) rotateY(-50deg);
  }
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  98% {
    transform: scale(5);
    opacity: 1;
  }
  99% {
    opacity: 0;
    transform: scale(5);
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes visible {
  0% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

.door__imgBox {
  height: 80vh;
  transition: cubic-bezier(0.165, 0.84, 0.44, 1) 1s 0.2s;
  z-index: -1;
}

.door__imgBox img {
  height: 100%;
  object-fit: cover;
}

.door__imgBox--left {
  transform-origin: left center;
}

.door__imgBox--right {
  transform-origin: right center;
}

.js-door__imgBox--left {
  animation: doorOpenleft cubic-bezier(0.165, 0.84, 0.44, 1) 1s forwards;
}

.js-door__imgBox--right {
  animation: doorOpenright cubic-bezier(0.165, 0.84, 0.44, 1) 1s forwards;
}

@keyframes scaleUp {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  98% {
    transform: scale(1.5);
    opacity: 1;
  }
  99% {
    opacity: 0;
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

.sec10 {
  position: relative;
}

.header__inner {
  width: 90%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}

.header__ttl {
  display: flex;
  align-items: center;
  height: 100%;
  font-family: futura-pt, sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: #33465A;
}

.header__ttl img {
  height: 40%;
}

.header__list {
  display: flex;
  list-style: none;
  height: 100%;
}

.header__link {
  display: flex;
  height: 100%;
  font-size: 20px;
  color: #33465A;
  padding: 0 15px;
  align-items: center;
  transition: all .4s ease;
  cursor: pointer;
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
  background: transparent;
  font-weight: 700;
  border-bottom: 2px solid transparent;
}

.header__link:hover {
  border-bottom: 2px solid #33465A;
}

.header__linkBox {
  position: absolute;
  left: 0;
  top: 70px;
}

.header__list02 {
  width: 150px;
  background: #33465a;
  transition: all .3s ease-in-out;
  max-height: 0px;
}

.header__item.--tree {
  position: relative;
}

.header__item02 {
  padding: 15px 10px;
  transition: all .2s ease;
}

.header__item02:hover {
  background: #007ae3;
}

.header__link02 {
  color: #fff;
  font-size: 15px;
  letter-spacing: .05em;
  opacity: 0;
}

.header__item.--tree:hover .header__list02 {
  max-height: none;
}

.header__item.--tree:hover .header__link02 {
  opacity: 1;
}

.sideNav {
  position: fixed;
  width: 100vw;
  max-width: 600px;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: #1f1f1f;
  height: 100vh;
  text-align: left;
  transform: translatex(-600px);
  display: flex;
  flex-direction: column;
}

.sp__header, .sideNav {
  display: none;
}

.visible {
  transform: translateX(0px) !important;
  transition: all 0.4s;
}

.hidden {
  transform: translateX(-600px);
  transition: all 0.4s;
}

.section {
  height: 100vh;
}

.section__illustBox {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
}

.section__illustBox--left {
  left: 5%;
}

.section__illustBox--right {
  right: 5%;
}

.section__illust {
  width: 100%;
  object-fit: cover;
  transition: all 1s ease;
  transform: scale(0);
  opacity: 0;
}

.section__content {
  width: 80%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
}

.section__textBox {
  width: 45%;
  min-width: 570px;
}

.section__textBox--right {
  margin-left: auto;
}

.section__ttl {
  font-size: 48px;
  font-family: futura-pt, sans-serif;
  font-weight: 400;
  overflow: hidden;
}

.section__ttl--anime {
  display: inline-block;
  transition: cubic-bezier(0.165, 0.84, 0.44, 1) 1s 0.4s;
  transform: translateY(100%);
}

.section__sub {
  margin-top: 20px;
}

.section__sub svg {
  height: 80px;
}

.section__subttl {
  font-family: "Yu Mincho", "YuMincho", serif;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.6;
  margin-top: -20px;
  overflow: hidden;
}

.section__subttl--anime {
  display: inline-block;
  transition: cubic-bezier(0.165, 0.84, 0.44, 1) 1s 0.6s;
  transform: translateY(100%);
}

.section__desc {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
  font-size: 18px;
  line-height: 1.8;
  margin-top: 40px;
  overflow: hidden;
}

.section__desc--anime {
  display: inline-block;
  transition: cubic-bezier(0.165, 0.84, 0.44, 1) 1s 0.8s;
  transform: translateY(100%);
}

.section__btn {
  display: block;
  width: 100%;
  text-align: left;
  font-family: futura-pt, sans-serif;
  font-size: 20px;
  line-height: 2;
  margin-top: 70px;
  position: relative;
  padding-left: 0px;
  transition: all .2s ease-in-out;
  overflow: hidden;
  z-index: 100;
  cursor: pointer;
}

.section__btn--arrow {
  background: url("../img/arrow.png");
  background-size: cover;
  width: 80px;
  height: 5.9375px;
  display: inline-block;
  transition: cubic-bezier(0.165, 0.84, 0.44, 1) 1s 1.2s;
  transform: translateY(30px);
  margin-left: 20px;
}

.section__btn--anime {
  display: inline-block;
  transition: cubic-bezier(0.165, 0.84, 0.44, 1) 1s 1s;
  transform: translateY(100%);
}

.is-show .section__ttl--anime, .is-show .section__subttl--anime, .is-show .section__desc--anime, .is-show .section__btn--anime, .is-show .section__btn--arrow {
  transform: translateY(0);
}

.is-show .section__illust {
  transition-delay: .8s;
  transform: scale(0.9);
  opacity: 1;
}

.is-show .section__btn:hover {
  opacity: .4;
}

#layer, #layer2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#particles-js {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
}

.top__particles-js {
  opacity: 0;
}

.imgBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  opacity: 0;
}

.imgBox:nth-child(1) {
  animation-delay: 5.5s;
  animation-duration: 1s;
}

.imgBox:nth-child(1) img {
  transform: rotateZ(0) translateX(30px);
}

.imgBox:nth-child(2) {
  animation-delay: 5.5s;
  animation-duration: 1s;
}

.imgBox:nth-child(2) img {
  transform: rotateZ(30deg) translateX(150px);
}

.imgBox:nth-child(3) {
  animation-delay: 5.5s;
  animation-duration: 1s;
}

.imgBox:nth-child(3) img {
  transform: rotateZ(60deg) translateX(220px);
}

.imgBox:nth-child(4) {
  animation-delay: 5.8s;
  animation-duration: 1s;
}

.imgBox:nth-child(4) img {
  transform: rotateZ(90deg) translateX(60px);
}

.imgBox:nth-child(5) {
  animation-delay: 5.6s;
  animation-duration: 1s;
}

.imgBox:nth-child(5) img {
  transform: rotateZ(120deg) translateX(160px);
}

.imgBox:nth-child(6) {
  animation-delay: 5.8s;
  animation-duration: 1s;
}

.imgBox:nth-child(6) img {
  transform: rotateZ(300deg) translateX(40px);
}

.imgBox:nth-child(7) {
  animation-delay: 5.5s;
  animation-duration: 1s;
}

.imgBox:nth-child(7) img {
  transform: rotateZ(180deg) translateX(130px);
}

.imgBox:nth-child(8) {
  animation-delay: 5.5s;
  animation-duration: 1s;
}

.imgBox:nth-child(8) img {
  transform: rotateZ(210deg) translateX(30px);
}

.imgBox:nth-child(9) {
  animation-delay: 5.5s;
  animation-duration: 1s;
}

.imgBox:nth-child(9) img {
  transform: rotateZ(240deg) translateX(120px);
}

.imgBox:nth-child(10) {
  animation-delay: 5.7s;
  animation-duration: 1s;
}

.imgBox:nth-child(10) img {
  transform: rotateZ(270deg) translateX(30px);
}

.imgBox:nth-child(11) {
  animation-delay: 5.7s;
  animation-duration: 1s;
}

.imgBox:nth-child(11) img {
  transform: rotateZ(300deg) translateX(300px);
}

.imgBox:nth-child(12) {
  animation-delay: 5.5s;
  animation-duration: 1s;
}

.imgBox:nth-child(12) img {
  transform: rotateZ(330deg) translateX(330px);
}

.imgBox:nth-child(13) {
  animation-delay: 5.6s;
  animation-duration: 1s;
}

.imgBox:nth-child(13) img {
  transform: rotateZ(360deg) translateX(320px);
}

.imgBox:nth-child(14) {
  animation-delay: 5.6s;
  animation-duration: 1s;
}

.imgBox:nth-child(14) img {
  transform: rotateZ(70deg) translateX(360px);
}

.imgBox:nth-child(15) {
  animation-delay: 5.8s;
  animation-duration: 1s;
}

.imgBox:nth-child(15) img {
  transform: rotateZ(140deg) translateX(0px);
}

.imgBox:nth-child(16) {
  animation-delay: 5.9s;
  animation-duration: 1s;
}

.imgBox:nth-child(16) img {
  transform: rotateZ(210deg) translateX(70px);
}

.imgBox:nth-child(17) {
  animation-delay: 5.5s;
  animation-duration: 1s;
}

.imgBox:nth-child(17) img {
  transform: rotateZ(280deg) translateX(140px);
}

.imgBox:nth-child(18) {
  animation-delay: 5.5s;
  animation-duration: 1s;
}

.imgBox:nth-child(18) img {
  transform: rotateZ(350deg) translateX(210px);
}

.imgBox:nth-child(19) {
  animation-delay: 5.4s;
  animation-duration: 1s;
}

.imgBox:nth-child(19) img {
  transform: rotateZ(110deg) translateX(280px);
}

.imgBox:nth-child(20) {
  animation-delay: 5.7s;
  animation-duration: 1s;
}

.imgBox:nth-child(20) img {
  transform: rotateZ(220deg) translateX(30px);
}

.imgBox img {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 50px;
  height: auto;
  transition: 2000ms;
  transform-origin: 0 0;
  transform-style: preserve-3d;
}

.js-move {
  animation: move 2s ease-in 2;
}

.js-fade {
  animation: fade 4s linear forwards;
}

.js-fadeOut {
  animation: fadeOut 4s linear forwards;
}

@keyframes move {
  0% {
    transform: translateZ(-500px);
  }
  100% {
    transform: translateZ(600px);
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  50.1% {
    opacity: 1;
    transform: translateZ(-500px);
  }
  100% {
    opacity: 1;
    transform: translateZ(500px);
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  99.9% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes scrollNone {
  0% {
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100vh;
  }
  99.9% {
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100vh;
  }
  100% {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
  }
}

.fv {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  perspective: 400px;
}

.fv__img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 98%;
  height: 98%;
  margin-top: 1%;
  margin-left: 1%;
  object-fit: contain;
}

.fv__img1 {
  animation-delay: .2s;
}

.fv__img2 {
  animation-delay: 0s;
}

.fv__img3 {
  animation-delay: .2s;
}

.fv__img4 {
  animation-delay: .5s;
}

.fv__img5 {
  animation-delay: .7s;
}

.fv__img6 {
  animation-delay: .5s;
}

.fv__img7 {
  animation-delay: .7s;
}

.fv__img8 {
  animation-delay: .8s;
}

.fv__img9 {
  animation-delay: .6s;
}

.fv__img10 {
  animation-delay: .4s;
}

.fv__img11 {
  animation-delay: .4s;
}

.fv__img12 {
  animation-delay: .2s;
}

.fv__img13 {
  animation-delay: .9s;
}

.fv__img14 {
  animation-delay: .2s;
}

.fv__img15 {
  animation-delay: .9s;
}

.fv__img16 {
  animation-delay: .8s;
}

.--txt {
  width: 40vw;
  top: 50%;
  left: 5%;
}

.anime01 {
  animation-name: anime01;
  animation-duration: .6s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

.--main {
  width: 100%;
  height: 100%;
  animation-delay: 0s;
}

.layer {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

#move05 {
  width: 40vw;
  position: absolute;
  bottom: 5%;
  left: -4%;
}

@keyframes anime01 {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.is-show .fv__ttl span, .is-show .fv__desc {
  transform: translateY(0);
}

.message {
  font-family: "Yu Mincho", "YuMincho", serif;
  font-size: 18px;
  line-height: 3;
  letter-spacing: 2px;
  text-align: center;
  width: 100%;
  color: #000;
  font-weight: bold;
  z-index: 3;
}

.message__desc {
  overflow: hidden;
}

.message__desc--sp {
  display: none;
}

.message__desc span {
  display: inline-block;
  transition: cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
  transform: translateY(100%);
}

.message__desc--01 span {
  transition-delay: .2s;
}

.message__desc--02 span {
  transition-delay: .4s;
}

.message__desc--03 span {
  transition-delay: .6s;
}

.message__desc--04 span {
  transition-delay: .8s;
}

.message__desc--05 span {
  transition-delay: 1s;
}

.message__desc--06 {
  margin-top: 40px;
}

.message__desc--06 span {
  transition-delay: 1.2s;
}

.message__desc--07 span {
  transition-delay: 1.4s;
}

.message__desc--08 {
  margin-top: 40px;
}

.message__desc--08 span {
  transition-delay: 1.6s;
}

.is-show .message__desc span {
  transform: translateY(0);
}

.main {
  position: relative;
}

.pager {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  padding: 0;
}

.pager li {
  display: block;
  margin: 20px;
}

.pager li a {
  display: block;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
}

.pager .is-current a {
  background: #232323;
}

.sec03, .sec04, .sec05, .sec06, .sec07, .sec08 {
  z-index: 1;
  position: relative;
  background: transparent;
}

.section__footer {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 99;
}

.section__footerSub {
  padding-bottom: 100px;
}

.footer {
  width: 700px;
  border: 2px solid #000;
}

.footer__inner {
  width: 100%;
  height: 100%;
  padding: 30px 35px;
  display: flex;
}

.footer__ttl {
  font-size: 20px;
  font-family: futura-pt, sans-serif;
  text-align: center;
  margin-bottom: 30px;
  font-weight: 400;
}

.footer__left {
  width: 170px;
  padding-right: 35px;
  border-right: 2px solid #000;
}

.footer__listBox {
  display: flex;
  flex-direction: column;
}

.footer__list {
  margin-bottom: 20px;
}

.footer__list.--small:nth-child(1) {
  margin-top: -10px;
}

.footer__list.--small {
  list-style: inside;
  margin-bottom: 10px;
}

.footer__list:last-child {
  margin-bottom: 0px;
}

.footer__link {
  font-size: 14px;
  font-family: "Yu Mincho", "YuMincho", serif;
  color: #000;
  font-weight: bold;
  transition: all .2s ease;
}

.footer__link:hover {
  opacity: .6;
}

.footer__right {
  padding-left: 50px;
}

.footer__descBox {
  font-family: "Yu Mincho", "YuMincho", serif;
  font-size: 14px;
  font-weight: bold;
}

.footer__descBox p {
  margin-bottom: 20px;
}

.footer__zipcode a {
  color: #000;
  text-decoration: none;
}

.footer__tel a {
  color: #000;
  text-decoration: none;
}

.copyright {
  font-family: "Yu Mincho", "YuMincho", serif;
  font-size: 14px;
  color: #000;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 30px;
}

.section__member {
  position: relative;
  z-index: 100;
}

.icon {
  position: relative;
  display: flex;
  margin-right: 15%;
  z-index: 100;
}

.iconBx {
  position: relative;
  width: 180px;
  height: 360px;
  z-index: 100;
}

.iconBx img {
  width: 100%;
  object-fit: cover;
}

.iconBx img {
  width: 100%;
  filter: grayscale(1);
  transition: 0.5s;
  transform-origin: center;
  transform: scale(0.8);
}

.icon .iconBx.active img {
  filter: grayscale(0);
  transform: scale(1);
}

.contentBox {
  position: relative;
  width: 40%;
}

.contentBx {
  position: absolute;
  width: 100%;
  height: 100%;
  display: inline-block;
  justify-content: center;
  transition: cubic-bezier(0.165, 0.84, 0.44, 1) 1s 0.8s;
  margin-top: -20%;
}

.contentBx h2 {
  font-size: 58px;
  font-weight: bold;
  font-family: futura-pt, sans-serif;
  line-height: 1;
  color: #33465A;
}

.contentBx p {
  font-size: 28px;
  line-height: 1;
  font-family: futura-pt, sans-serif;
  font-family-color: #33465A;
  padding-top: 10%;
  padding-top-font-weight: bold;
}

.text {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.text h2 {
  display: inline-block;
  transform: translateY(200%);
  transition: cubic-bezier(0.165, 0.84, 0.44, 1) 1s 0.2s;
}

.text p {
  display: inline-block;
  transform: translateY(200%);
  transition: cubic-bezier(0.165, 0.84, 0.44, 1) 1s 0.3s;
}

.contentBx.active .text h2, .contentBx.active .text p {
  transform: translateY(0);
  transition-delay: .5s;
}

.section__ttl--member {
  position: absolute;
  left: 10%;
  top: 20%;
}

.contentBx__imgBox {
  position: absolute;
  overflow: hidden;
}

.contentBx__imgBox--01 {
  left: -35%;
  bottom: 0;
}

.contentBx__imgBox--02 {
  top: -25%;
  right: 0;
}

.contentBx__imgBox--03 {
  right: 40%;
}

.contentBx__img {
  transition: cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
  transform: translateY(120%);
}

.contentBx__img--01 {
  transition-delay: .2s;
}

.contentBx__img--02 {
  transition-delay: .2s;
}

.contentBx__img--03 {
  transition-delay: .2s;
}

.contentBx.active .contentBx__img {
  transform: translatey(0);
  transition-delay: .4s;
}

.menu-toggle {
  opacity: 0.6;
  background-color: transparent;
  position: fixed;
  z-index: 110;
  top: 24px;
  right: 24px;
  border: none;
  width: 40px;
  height: 30px;
  outline: none;
  transition: opacity 0.2s ease-out;
  display: none;
}

.menu-toggle:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  right: auto;
  width: 100%;
  background: linear-gradient(to bottom, #33465A, #33465A 15%, transparent 15%, transparent 40%, #33465A 40%, #33465A 55%, transparent 55%, transparent 80%, #33465A 80%, #33465A 95%, transparent 95%, transparent 100%);
  transition: opacity 0.2s ease-out, width 0.2s 0.2s ease-out;
}

.menu-toggle:after {
  opacity: 0;
  content: '×';
  color: white;
  position: absolute;
  top: 16px;
  left: -4px;
  font-family: Arial, sans-serif;
  font-size: 76px;
  line-height: 0;
  transition: opacity 0.4s ease-out;
}

.menu-toggle:active {
  transform: translateY(2px);
}

.menu-toggle:hover {
  opacity: 1;
}

.open .menu-toggle {
  opacity: 1;
}

.open .menu-toggle:before {
  opacity: 0;
  width: 0;
}

.open .menu-toggle:after {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(360deg);
  transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out;
}

nav {
  z-index: 105;
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  overflow: hidden;
}

nav:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: rgba(33, 45, 57, 0.98);
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 100%;
  transform: scale(0.04), translateY(9999px);
  overflow: hidden;
}

.open nav {
  top: 0;
}

.open nav:before {
  animation: menu-animation 0.8s ease-out forwards;
}

ul.menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  backface-visibility: hidden;
  perspective: 1000;
  color: white;
  display: flex;
  flex-direction: column;
}

ul.menu a {
  opacity: 0;
  text-align: center;
  transform: translate3d(0, 36px, 0);
  font-family: futura-pt, sans-serif;
  font-size: 48px;
  color: #fff;
  padding: 10px 20px;
}

ul.menu a:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  left: auto;
  background-color: white;
  height: 100%;
  width: 0;
  overflow: hidden;
  transition: width 0.14s ease-out;
}

ul.menu a:after {
  opacity: 0;
  content: attr(data-text);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  color: #33465A;
  overflow: hidden;
  transform: translate(-24px, 6px);
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

ul.menu a:hover:before {
  left: 0;
  right: auto;
  width: 100%;
}

ul.menu a:hover:after {
  opacity: 1;
  padding: 0 20px;
  transform: translate(0px, 6px);
  transition: transform 0.2s 0.14s ease-out, opacity 0.2s 0.14s ease-out;
}

.open ul.menu a {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.open ul.menu a:nth-child(1) {
  transition-delay: 0.75s;
}

.open ul.menu a:nth-child(2) {
  transition-delay: 0.85s;
}

.open ul.menu a:nth-child(3) {
  transition-delay: 0.95s;
}

.open ul.menu a:nth-child(4) {
  transition-delay: 1.05s;
}

.open ul.menu a:nth-child(5) {
  transition-delay: 1.15s;
}

.open ul.menu a:nth-child(6) {
  transition-delay: 1.25s;
}

.open ul.menu a:nth-child(6) {
  opacity: 0;
  margin-top: -48px;
  font-size: 28px;
  transition: all .3s ease-in-out;
  z-index: -10;
}

.open ul.menu a:nth-child(7) {
  opacity: 0;
  margin-top: -48px;
  font-size: 28px;
  transition: all .4s ease-in-out;
  z-index: -11;
}

.open ul.menu a:nth-child(8) {
  opacity: 0;
  margin-top: -48px;
  font-size: 28px;
  transition: all .5s ease-in-out;
  z-index: -12;
}

.open ul.menu a:nth-child(9) {
  transition-delay: 1.25s;
}

.main {
  transition: 0.2s ease-out;
}

.open .main {
  transform: scale(0.92);
  transition: transform 0.2s 0.41s ease-out;
}

@keyframes menu-animation {
  0% {
    opacity: 0;
    transform: scale(0.04) translateY(300%);
  }
  40% {
    transform: scale(0.04) translateY(0);
    transition: ease-out;
  }
  40% {
    transform: scale(0.04) translateY(0);
  }
  60% {
    opacity: 1;
    transform: scale(0.02) translateY(0px);
  }
  61% {
    transform: scale(0.04);
  }
  99.9% {
    height: 0;
    padding-bottom: 100%;
    border-radius: 100%;
  }
  100% {
    transform: scale(2);
    height: 100%;
    padding-bottom: 0;
    border-radius: 0;
  }
}

.menu__small {
  font-size: 24px;
}

.menu__open {
  opacity: 1 !important;
  margin: 0 !important;
  z-index: 10;
}

.newsBox {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  transition: cubic-bezier(0.165, 0.84, 0.44, 1) 1s 0.6s;
  transform: translateY(50%);
  opacity: 0;
}

.newsBox__desc {
  padding: 10px 20px;
  background: rgba(240, 240, 240, 0.5);
  margin-top: 10px;
  transition: cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
}

.newsBox__desc:hover {
  background: gainsboro;
}

.newsBox__date {
  font-family: futura-pt, sans-serif;
  font-size: 14px;
}

.newsBox__ttl {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
  font-size: 16px;
  margin-top: 10px;
  font-weight: bold;
  line-height: 1.6;
}

.is-show .newsBox {
  transform: translateY(0);
  opacity: 1;
}

.illust__service01 {
  width: 85px;
  height: 150px;
  object-fit: cover;
  position: absolute;
  top: -5%;
  right: -5%;
  transition: all 1s ease;
  transform: scale(0);
  opacity: 0;
  transition-delay: 1.2s;
}

.illust__service02 {
  width: 179px;
  height: 150px;
  object-fit: cover;
  position: absolute;
  bottom: -15%;
  left: -5%;
  transition: all 1s ease;
  transition-delay: 1.4s;
  transform: scale(0);
  opacity: 0;
}

.illust__vision01 {
  width: 111px;
  height: 75px;
  object-fit: cover;
  position: absolute;
  bottom: -10%;
  right: 0%;
  transition: all 1s ease;
  transform: scale(0);
  opacity: 0;
  transition-delay: 1.2s;
}

.illust__vision02 {
  width: 202px;
  height: 150px;
  object-fit: cover;
  position: absolute;
  top: -15%;
  left: -5%;
  transition: all 1s ease;
  transition-delay: 1.4s;
  transform: scale(0);
  opacity: 0;
}

.illust__why01 {
  width: 120px;
  height: 110px;
  object-fit: cover;
  position: absolute;
  bottom: -7.5%;
  right: -5%;
  transition: all 1s ease;
  transform: scale(0);
  opacity: 0;
  transition-delay: 1.2s;
}

.illust__why02 {
  width: 120px;
  height: 225px;
  object-fit: cover;
  position: absolute;
  top: -15%;
  left: -5%;
  transition: all 1s ease;
  transition-delay: 1.4s;
  transform: scale(0);
  opacity: 0;
}

.illust__credo01 {
  width: 120px;
  height: 100px;
  object-fit: cover;
  position: absolute;
  bottom: -7.5%;
  left: 0%;
  transition: all 1s ease;
  transform: scale(0);
  opacity: 0;
  transition-delay: 1.2s;
}

.illust__credo02 {
  width: 150px;
  height: 100px;
  object-fit: cover;
  position: absolute;
  top: -5%;
  right: -5%;
  transition: all 1s ease;
  transition-delay: 1.4s;
  transform: scale(0);
  opacity: 0;
}

.illust__news01 {
  width: 80px;
  height: 130px;
  object-fit: cover;
  position: absolute;
  bottom: -10%;
  left: 0%;
  transition: all 1s ease;
  transform: scale(0);
  opacity: 0;
  transition-delay: 1.2s;
}

.illust__news02 {
  width: 85px;
  height: 100px;
  object-fit: cover;
  position: absolute;
  top: -5%;
  right: -5%;
  transition: all 1s ease;
  transition-delay: 1.4s;
  transform: scale(0);
  opacity: 0;
}

.is-show .illust__move {
  transform: scale(1);
  opacity: 1;
}

.is-show .illust__credo02 {
  transform: scale(1) rotatez(45deg);
}

.sub__menuPcOnly {
  top: 49%;
  opacity: 0;
  animation: fadeIn 1s 9s forwards ease-in;
}

#member-img01 {
  width: 202px;
  height: 150px;
}

#member-img02 {
  width: 84px;
  height: 150px;
}

#member-img03 {
  width: 150px;
  height: 114px;
}

#member-img04 {
  width: 80px;
  height: 150px;
}

#member-img05 {
  width: 120px;
  height: 105px;
}

#member-img06 {
  width: 132px;
  height: 150px;
}

#member-img07 {
  width: 90px;
  height: 150px;
}

#member-img08 {
  width: 132px;
  height: 120px;
}

.fixed__logo {
  position: fixed;
  width: 204.77px;
  height: 36px;
  top: 20px;
  left: 10%;
  z-index: 200;
}

.fixed__logo img {
  width: 100%;
  height: 100%;
}

.menu__subBtn {
  display: block;
  opacity: .6;
}

@media (max-width: 1280px) {
  .section__content {
    width: 90%;
  }
  .section__textBox {
    width: 50%;
    margin-top: 10%;
    min-width: 50%;
  }
  .section__illustBox {
    top: 55%;
    width: 35%;
  }
  .section__ttl {
    font-size: 42px;
  }
  .section__ttl.--member {
    left: 5%;
  }
  .section__sub {
    margin-top: 0px;
  }
  .section__sub svg {
    height: 60px;
  }
  .section__subttl {
    font-size: 18px;
    line-height: 1.6;
    margin-top: -15px;
  }
  .section__desc {
    font-size: 14px;
    margin-top: 20px;
    line-height: 1.6;
  }
  .section__btn {
    margin-top: 25px;
  }
  .message {
    font-size: 16px;
    line-height: 2.6;
    margin-top: 40px;
  }
  .illust__service01 {
    width: 68px;
    height: 120px;
    top: -20%;
    right: -5%;
  }
  .illust__service02 {
    width: 120px;
    height: 100px;
    bottom: -20%;
    left: 0%;
  }
  .illust__vision01 {
    width: 100px;
    height: 67px;
    bottom: -20%;
  }
  .illust__vision02 {
    width: 141px;
    height: 106px;
    top: -20%;
  }
  .illust__why01 {
    width: 96px;
    height: 88px;
    bottom: -20%;
    right: -10%;
  }
  .illust__why02 {
    width: 76px;
    height: 140px;
    top: -20%;
    left: -7%;
  }
  .illust__credo01 {
    width: 96px;
    height: 80px;
    bottom: -10%;
    left: -5%;
  }
  .illust__credo02 {
    width: 100px;
    height: 76px;
    top: -10%;
  }
  .illust__news01 {
    width: 72px;
    height: 117px;
    bottom: -30%;
  }
  .illust__news02 {
    width: 76px;
    height: 88px;
  }
  .newsBox {
    margin-top: 30px;
  }
  .newsBox__ttl {
    font-size: 14px;
    line-height: 1.4;
    margin-top: 5px;
  }
  .icon {
    margin-top: 10%;
    margin-right: 10%;
  }
  .iconBx {
    width: 135px;
    height: 270px;
  }
  .contentBx h2 {
    font-size: 48px;
  }
  .contentBx p {
    font-size: 24px;
  }
  .contentBx__imgBox--01 {
    left: -20%;
  }
  .footer__list {
    margin-bottom: 15px;
  }
  #member-img01 {
    width: 162px;
    height: 124px;
  }
  #member-img02 {
    width: 67px;
    height: 120px;
    right: -10%;
  }
  #member-img03 {
    width: 120px;
    height: 91px;
  }
  #member-img04 {
    width: 64px;
    height: 120px;
  }
  #member-img05 {
    width: 96px;
    height: 84px;
  }
  #member-img06 {
    width: 95px;
    height: 108px;
  }
  #member-img07 {
    width: 72px;
    height: 120px;
  }
  #member-img08 {
    width: 106px;
    height: 96px;
  }
}

@media (max-width: 768px) {
  header {
    height: 32px;
  }
  .header__inner {
    margin-top: 21px;
  }
  .header__ttl img {
    height: 100%;
  }
  .header__listBox {
    display: none;
  }
  .menu-toggle {
    display: block;
    opacity: 0;
    transition: all .4s ease-in-out;
  }
  .menu__fade {
    opacity: .6;
  }
  .sub__menuPcOnly {
    display: none;
  }
  .sp__header {
    width: 100%;
    height: 90px;
    background: #fff;
    display: flex;
    display: none;
  }
  .sp__header__innder {
    display: flex;
    width: 90%;
    justify-content: space-between;
    margin: 0 auto;
    align-items: center;
  }
  .sp__header__logo {
    height: 40px;
  }
  .sp__header__ttl {
    display: block;
    height: 100%;
  }
  .sp__header__menu {
    width: 50px;
  }
  .sideNav {
    display: flex;
    display: none;
  }
  .sideNav__logo {
    width: 50%;
    margin: 0 auto;
    margin-top: 10%;
    display: block;
  }
  .section__content {
    width: 90%;
  }
  .fv {
    width: 100%;
    margin-top: 0px;
  }
  #move05 {
    width: 70vw;
    bottom: 15%;
    left: -5%;
  }
  .fv__img {
    width: 100%;
    height: 50%;
    top: 30%;
    object-fit: cover;
  }
  .fv__img1 {
    top: 10%;
  }
  .fv__img2 {
    height: 80%;
    top: 10%;
  }
  .fv__img3 {
    height: 80%;
    top: 8%;
  }
  .fv__img4 {
    height: 75%;
    top: 15%;
  }
  .fv__img5 {
    height: 65%;
    top: 25%;
  }
  .fv__img6 {
    height: 65%;
    top: 22%;
  }
  .fv__img7 {
    height: 43%;
    top: 5%;
  }
  .fv__img8 {
    height: 54%;
  }
  .fv__img9 {
    height: 55%;
  }
  .fv__img10 {
    height: 75%;
    top: 5%;
    left: 0%;
  }
  .fv__img12 {
    top: 20%;
  }
  .fv__img13 {
    height: 45%;
    top: 10%;
  }
  .fv__img15 {
    height: 35%;
    top: 25%;
  }
  .--main {
    height: 50%;
    top: 20%;
  }
  .illust__service01 {
    top: -150%;
    right: 5%;
    width: 58px;
    height: 103px;
  }
  .illust__service02 {
    width: 90px;
    height: 76px;
    bottom: 5%;
    left: -100%;
  }
  .illust__vision01 {
    width: 91px;
    height: 61px;
    bottom: 90%;
    right: 0%;
  }
  .illust__vision02 {
    width: 120px;
    height: 90px;
    top: 0;
    left: -100%;
  }
  .illust__why01 {
    width: 76px;
    height: 67px;
    bottom: 370%;
    right: 5%;
  }
  .illust__why02 {
    width: 50px;
    height: 100px;
    top: 0%;
    left: -110%;
  }
  .illust__credo01 {
    width: 83px;
    height: 70px;
    top: 0;
    left: -110%;
  }
  .illust__credo02 {
    width: 80px;
    height: 60px;
    top: -320%;
  }
  .illust__news01 {
    width: 52px;
    height: 84px;
    top: 20%;
    left: -80%;
  }
  .illust__news02 {
    width: 58px;
    height: 67px;
    top: 30%;
    left: -120%;
  }
  .message {
    font-size: 13px;
    color: #262626;
    line-height: 2;
    letter-spacing: 3px;
  }
  .message__desc {
    display: none;
    margin-top: 5px;
  }
  .message__desc--sp {
    display: block;
  }
  .message__desc span {
    width: 100%;
  }
  .section__textBox {
    min-width: 100%;
    width: 100%;
    margin: 0px;
  }
  .section__illustBox {
    width: 40%;
    top: 100%;
    transform: translateY(-100%);
  }
  .section__illustBox--left {
    left: 100%;
    transform: translate(-100%, -100%);
  }
  .section__sub {
    margin-top: 0px;
  }
  .section__sub svg {
    height: 55px;
  }
  .section__subttl {
    font-size: 12px;
    margin-top: 1px;
  }
  .section__desc {
    margin-top: 25px;
    font-size: 14px;
  }
  .section__btn {
    margin-top: 10px;
  }
  .section__member {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .section__ttl--member {
    top: 15%;
    left: 5%;
    font-size: 34px;
  }
  .icon {
    margin: 0px;
    justify-content: space-between;
    margin-top: -20%;
  }
  .iconBx {
    width: 28%;
    height: auto;
  }
  .contentBox {
    width: 100%;
    margin-top: 0%;
  }
  .contentBx {
    margin-top: 3%;
  }
  .contentBx h2 {
    font-size: 38px;
  }
  .contentBx p {
    font-size: 22px;
    padding-top: 3%;
  }
  #member-img01 {
    left: 105%;
    bottom: -10vh;
    width: 120px;
    height: 100px;
    transform: translateX(-100%) scale(0.8);
  }
  #member-img02 {
    width: 45px;
    height: 85px;
    top: 19vh;
    right: 70vw;
    transform: rotateZ(-30deg);
  }
  #member-img03 {
    z-index: -1;
    left: -7%;
    bottom: -33vh;
    transform: scale(0.6);
  }
  #member-img05 {
    right: 30%;
    top: 16vh;
    width: 85px;
    height: 74px;
  }
  #member-img06 {
    left: 20%;
    bottom: -29vh;
    z-index: -1;
    width: 70px;
    height: 80px;
  }
  #member-img07 {
    top: 5vh;
  }
  #member-img08 {
    right: 30%;
    top: 9vh;
    z-index: -1;
    width: 56px;
    height: 53px;
  }
  .newsBox {
    margin-top: 0px;
  }
  .newsBox__ttl {
    font-size: 14px;
    line-height: 1.4;
  }
  .footer {
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
  }
  .footer__inner {
    padding: 30px 5px;
  }
  .footer__left {
    padding-right: 5px;
  }
  .footer__right {
    padding-left: 10px;
  }
  .footer__descBox {
    line-height: 1.6;
  }
  .footer__descBox p:last-child {
    margin-bottom: 0px;
  }
  .footer__list.--small {
    list-style: none;
  }
  .footer__link {
    font-size: 13px;
  }
  .copyright {
    bottom: 5px;
  }
  #target__door {
    width: 100%;
    height: auto;
    top: 20vh;
  }
  .door {
    width: 100%;
    height: auto;
    top: 20vh;
  }
  .door__imgBox {
    width: 50%;
    height: auto;
  }
  .door__imgBox img {
    width: 100%;
    height: auto;
  }
  .fixed__logo {
    width: 180px;
    height: 30px;
    top: 20px;
    left: 5%;
    z-index: 200;
  }
  ul.menu a {
    font-size: 24px;
  }
  .open ul.menu a:nth-child(6) {
    font-size: 20px;
    margin-top: -40px;
  }
  .open ul.menu a:nth-child(7) {
    font-size: 20px;
    margin-top: -40px;
  }
  .open ul.menu a:nth-child(8) {
    font-size: 20px;
    margin-top: -40px;
  }
  .menu__subBtn {
    display: block;
    opacity: .6;
  }
}