@charset "utf-8";

.loaded {
 opacity: 0;
 visibility: hidden;
}

#loader-wrap,
#loader-wrap01 {
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 width: 100vw;
 height: 100vh;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 10001;
}

div.logo_w img {
 max-width: 200px;
 max-height: 70px;
 object-fit: cover;
}

@media only screen and (max-width: 767px) {
 #loading div.logo_w {
  top: 30%;
 }
}

.logo-text {
 margin-top: 30px;
}

/* ローディングパターン01 */
#loader-wrap01 {
 background-color: var(--l-bg-color) !important;
}

.logo-text {
 color: var(--l-txt-color) !important;
}

#loader-wrap01 {
 transition: opacity 0.5s ease-in-out;
}

.loader03 {
 width: 64px;
 height: 64px;
 border-radius: 50%;
 perspective: 800px;
 margin-top: 25px;
}

.inner {
 position: absolute;
 box-sizing: border-box;
 width: 100%;
 height: 100%;
 border-radius: 50%;
}

.inner.one {
 left: 0%;
 top: 0%;
 animation: rotate-one 1s linear infinite;
 border-bottom: 3px solid var(--l-txt-color) !important;
}

.inner.two {
 right: 0%;
 top: 0%;
 animation: rotate-two 1s linear infinite;
 border-right: 3px solid var(--l-txt-color) !important;
}

.inner.three {
 right: 0%;
 bottom: 0%;
 animation: rotate-three 1s linear infinite;
 border-top: 3px solid var(--l-txt-color) !important;
 opacity: 0.3;
}

@keyframes rotate-one {
 0% {
  transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
 }

 100% {
  transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
 }
}

@keyframes rotate-two {
 0% {
  transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
 }

 100% {
  transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
 }
}

@keyframes rotate-three {
 0% {
  transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
 }

 100% {
  transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
 }
}

.top-wrap {
 background-color: #fff;
}

.top-op,
.top-op2 {
 position: fixed;
 top: 0;
 left: 0;
 margin: 0 auto;
 width: 100%;
 height: 100vh;
}

.top-op {
 z-index: 9999;
 background: #f2f2f2;
 animation-duration: 0.4s;
 animation-delay: 0.6s;
 animation-fill-mode: forwards;
 animation-name: top-op;
}

.top-op2 {
 z-index: 10000;
 background: #e2e2e2;
 animation-duration: 0.3s;
 animation-delay: 0.2s;
 animation-fill-mode: forwards;
 animation-name: top-op2;
}

@keyframes top-op {
 0% {
  width: 100%;
  left: 0;
 }

 50% {
  width: 100%;
 }

 100% {
  width: 0%;
  left: 100%;
 }
}

@keyframes top-op2 {
 0% {
  width: 100%;
  left: 0;
 }

 50% {
  width: 100%;
 }

 100% {
  width: 0%;
  left: 100%;
 }
}

.top-wrap.hidden {
 display: none;
}

/* ローディングパターン02 */
.logo-text {
 color: var(--l-txt-color) !important;
}

.loader02 {
 font-size: 10px;
 margin-top: 75px;
 width: 1em;
 height: 1em;
 border-radius: 50%;
 text-indent: -9999em;
 -webkit-animation: load4 1.3s infinite linear;
 animation: load4 1.3s infinite linear;
 -webkit-transform: translateZ(0);
 -ms-transform: translateZ(0);
 transform: translateZ(0);
}

@-webkit-keyframes load4 {

 0%,
 100% {
  box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
 }

 12.5% {
  box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
 }

 25% {
  box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
 }

 37.5% {
  box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
 }

 50% {
  box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
 }

 62.5% {
  box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
 }

 75% {
  box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
 }

 87.5% {
  box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
 }
}

@keyframes load4 {

 0%,
 100% {
  box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
 }

 12.5% {
  box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
 }

 25% {
  box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
 }

 37.5% {
  box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
 }

 50% {
  box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
 }

 62.5% {
  box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
 }

 75% {
  box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
 }

 87.5% {
  box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
 }
}

/* パターン02 オープニングシャッター */
div.top-wrap:not(.hidden) .shutter {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: var(--l-bg-color);
 z-index: 10000;
}

div.top-wrap:not(.hidden) .shutter::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 color: var(--l-txt-color);
 margin: auto;
 width: 0;
 height: 1px;
 z-index: 10000;
}

#loader-wrap {
 background-color: var(--l-bg-color) !important;
}

.loader02 {
 color: var(--l-txt-color) !important;
}

.shutter {
 background-color: var(--l-bg-color) !important;
}

.shutter::before {
 background-color: var(--l-txt-color) !important;
}

div.top-wrap:not(.hidden) .shutter {
 -webkit-animation: byeShutter 1.0s forwards;
 animation: byeShutter 1.0s forwards;
 z-index: 10000;
}

div.top-wrap:not(.hidden) .shutter::before {
 -webkit-animation: shutterOpen 1.0s forwards;
 animation: shutterOpen 1.0s forwards;
 z-index: 10000;
}

div.top-wrap:not(.hidden) .content {
 -webkit-animation: contentScale 1.0s forwards;
 animation: contentScale 1.0s forwards;
}

@keyframes byeShutter {
 70% {
  opacity: 1;
 }

 100% {
  opacity: 0;
  display: none;
  z-index: -1;
 }
}

@keyframes shutterOpen {
 0% {
  width: 0;
  height: 1px;
 }

 50% {
  width: 100%;
  height: 1px;
 }

 90% {
  width: 100%;
  height: 100%;
 }

 100% {
  width: 100%;
  height: 100%;
 }
}

#loader-wrap.loaded {
 display: none;
}

/* ローディングパターン03 */
.logo-text {
 color: var(--l-txt-color, #000000) !important;
}

#loading_barWrap {
 margin-top: 50px;
}

#loading {
 width: 100vw;
 height: 100vh;
 background: var(--l-bg-color, #ffffff) !important;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 9999;
 display: flex;
 flex-direction: column;
 justify-content: center;
 transition: opacity 0.5s ease-in-out;
}

.text {
 text-align: center;
 color: var(--l-txt-color, #000000) !important;
}

.logo_w {
 text-align: center;
 color: var(--l-txt-color, #000000) !important;
}

#bar {
 margin: 15px auto;
 max-width: 400px;
}

.loading-bar {
 background: #ccc;
 height: 5px;
 position: relative;
 margin-bottom: 20px;
}

.loading-bar::before {
 -webkit-animation: width-0to100 1s infinite ease-out;
 -moz-animation: width-0to100 1s infinite ease-out;
 -o-animation: width-0to100 1s infinite ease-out;
 -ms-animation: width-0to100 1s infinite ease-out;
 animation: width-0to100 1s infinite ease-out;
 background: var(--l-txt-color, #000000) !important;
 content: '';
 height: 5px;
 left: 0;
 position: absolute;
 top: 0;
}

@keyframes width-0to100 {
 0% {
  width: 0;
 }

 100% {
  width: 100%;
 }
}

/* ローディングパターン04 */
/* パターン04 */
#scroll_text {
 display: grid;
 align-content: center;
}

@supports (animation-range: 0vh 90vh) {
 #scroll_open {
  position: fixed;
  top: 0;
  animation: sticky-parallax-header-move-and-size linear forwards;
  animation-timeline: scroll();
  animation-range: 0vh 90vh;
 }
}

#scroll_open {
 color: #fff;
 height: 100vh;
 width: 100%;
 background-image: var(--loading-bg);
 background-color: var(--l-bg-color);
 background-size: cover;
 background-position: 50% 50%;
 background-blend-mode: soft-light;
 display: grid;
 place-items: center;
 text-align: center;
 z-index: 1;
}

@supports(animation-range: 0vh 90vh) {
 @keyframes sticky-parallax-header-move-and-size {
  from {
   background-position: 50% 0;
  }

  to {
   background-position: 50% 100%;
   height: 0;
   opacity: 0;
  }
 }

 #scroll_open {
  position: fixed;
  top: 0;
  animation: sticky-parallax-header-move-and-size linear forwards;
  animation-timeline: scroll();
  animation-range: 0vh 90vh;
 }

 body.page-home:has(#scroll_open) {
  padding-top: 100vh;
 }
}

/* スクロール矢印 */
.scroll {
 display: block;
 padding-top: 70px;
 position: relative;
 text-align: center;
}

.scroll .txt {
 color: var(--l-txt-color, #222);
}

.scroll::before {
 animation: scroll 1.5s infinite;
 border: solid var(--l-txt-color, #222);
 border-width: 0 0 1px 1px;
 content: "";
 display: inline-block;
 margin: auto;
 position: absolute;
 top: 0;
 right: 0;
 left: 0;
 transform: rotate(-45deg);
 width: 20px;
 height: 20px;
}

@keyframes scroll {
 0% {
  transform: rotate(-45deg) translate(0, 0);
 }

 80% {
  transform: rotate(-45deg) translate(-30px, 30px);
 }

 0%,
 80%,
 100% {
  opacity: 0;
 }

 40% {
  opacity: 1;
 }
}