@charset "utf-8";


/* 基本 */
.p-loading-screen {
  position:fixed; bottom: 0; left: 0; right: 0; top: 0; z-index: 99999;
  width:100%; width:100vw; height:100%; height:100vh;
  background:#fff;
}
.p-loading-screen__inner {
  width:100%; height:100%;
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
  -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
}


/* サークル */
.p-loading-screen__circle { width:60px; }
@media screen and (max-width:767px) {
  .p-loading-screen_circle { width:40px; }
}
.p-loading-screen__circle-icon {
  width:100%; height:100%; vertical-align: bottom;
  -webkit-animation: circular_loader_rotate 2s linear infinite; animation: circular_loader_rotate 2s linear infinite;
}
.p-loading-screen__circle-path {
  stroke-dasharray: 1, 200; stroke-dashoffset: 0; stroke-linecap: round; stroke: #000;
  -webkit-animation: circular_loader_dash 1.5s ease-in-out infinite; animation: circular_loader_dash 1.5s ease-in-out infinite;
}
@-webkit-keyframes circular_loader_rotate {
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes circular_loader_rotate {
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes circular_loader_dash {
  0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124; }
}
@keyframes circular_loader_dash {
  0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124; }
}



/* スクエア */
.p-loading-screen__square { width:60px; height:60px; }
@media screen and (max-width:767px) {
  .p-loading-screen__square { width:40px; height:40px; }
}
.p-loading-screen__square-icon {
  background-color: #000;
  width:33%; height:33%; float:left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}
.p-loading-screen__square-icon--1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.p-loading-screen__square-icon--2 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.p-loading-screen__square-icon--3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.p-loading-screen__square-icon--4 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.p-loading-screen__square-icon--5 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.p-loading-screen__square-icon--6 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.p-loading-screen__square-icon--7 { -webkit-animation-delay: 0s; animation-delay: 0s; }
.p-loading-screen__square-icon--8 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.p-loading-screen__square-icon--9 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); }
  35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); }
}
@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); }
  35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); }
}


/* ドット */
.p-loading-screen__dot { width:60px; height:60px; position:relative; }
@media screen and (max-width:750px) {
  .p-loading-screen__dot { width:40px; height:40px; }
}

.p-loading-screen__dot-icon { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.p-loading-screen__dot-icon span {
  display: block; width: 15%; height: 15%; margin: 0 auto; background-color: #000; border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.p-loading-screen__dot-icon--2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); }
.p-loading-screen__dot-icon--3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); }
.p-loading-screen__dot-icon--4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
.p-loading-screen__dot-icon--5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); }
.p-loading-screen__dot-icon--6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); }
.p-loading-screen__dot-icon--7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
.p-loading-screen__dot-icon--8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); }
.p-loading-screen__dot-icon--9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); }
.p-loading-screen__dot-icon--10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); }
.p-loading-screen__dot-icon--11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); }
.p-loading-screen__dot-icon--12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); }
.p-loading-screen__dot-icon--2 span { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.p-loading-screen__dot-icon--3 span { -webkit-animation-delay: -1s; animation-delay: -1s; }
.p-loading-screen__dot-icon--4 span { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.p-loading-screen__dot-icon--5 span { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
.p-loading-screen__dot-icon--6 span { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
.p-loading-screen__dot-icon--7 span { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }
.p-loading-screen__dot-icon--8 span { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }
.p-loading-screen__dot-icon--9 span { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }
.p-loading-screen__dot-icon--10 span { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; }
.p-loading-screen__dot-icon--11 span { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; }
.p-loading-screen__dot-icon--12 span { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0); transform: scale(0);
  } 40% {
    -webkit-transform: scale(1); transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0); transform: scale(0);
  } 40% {
    -webkit-transform: scale(1); transform: scale(1);
  }
}


/* ロゴ */
.p-loading-screen__logo { text-align: center; }
.p-loading-screen__logo-image__sp { display:none; }
@media screen and (max-width:767px) {
  .p-loading-screen__logo-image__sp { display:block; }
  .p-loading-screen__logo-image__sp + .p-loading-screen__logo-image__pc { display:none; }
}

/* キャッチフレーズ */
.p-loading-screen__catch {
  font-size:30px; color:#fff; line-height: 1.6; text-align:center;
  width:100%; padding: 0 40px;
}
* + .p-loading-screen__catch { margin-top:calc(50px - 0.3em); }
.p-loading-screen__catch-sp { display:none; }
@media screen and (max-width:767px) {
  * + .p-loading-screen__catch { margin-top:calc(20px - 0.3em); }
  .p-loading-screen__catch-pc { display:none; }
  .p-loading-screen__catch-sp { display:block; }
}


/* アニメーション シンプルアイコン */
.p-loading-screen--simple {}
.p-loading-screen--simple-icon { transition:opacity 0.3s ease 0s; }
.close_loading_screen .p-loading-screen--simple-icon { opacity:0; }

/* アイコンアニメーション */

/* type1 フェード */
.p-loading-screen--splash .p-loading-screen__logo-animation--type1 img { opacity:0; transition:opacity 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s; }
.p-loading-screen--splash.is-start .p-loading-screen__logo-animation--type1 img,
.close_loading_screen .p-loading-screen--splash .p-loading-screen__logo-animation--type1 img { opacity:1; transition-delay:0.5s; }

/* type2 マスキング */
.p-loading-screen--splash .p-loading-screen__logo-animation--type2 img { clip-path: inset(0 100% 0 0); transition:clip-path 0.7s cubic-bezier(0.65,0.05,0.36,1) 0s; }
.p-loading-screen--splash.is-start .p-loading-screen__logo-animation--type2 img,
.close_loading_screen .p-loading-screen--splash .p-loading-screen__logo-animation--type2 img { clip-path: inset(0); transition-delay:0.5s; }

/* type3 スケール */
.p-loading-screen--splash .p-loading-screen__logo-animation--type3 img { transform: scale(0.4); opacity:0; transition:transform 0.7s cubic-bezier(0.65,0.05,0.36,1) 0s, opacity 0.7s cubic-bezier(0.65,0.05,0.36,1) 0s; }
.p-loading-screen--splash.is-start .p-loading-screen__logo-animation--type3 img,
.close_loading_screen .p-loading-screen--splash .p-loading-screen__logo-animation--type3 img { opacity:1; transform: scale(1); transition-delay:0.5s; }


/* キャッチフレーズのアニメーション */
.p-loading-screen--splash .p-loading-screen__catch { opacity:0; transition:opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s; }
.p-loading-screen--splash.is-start .p-loading-screen__catch,
.close_loading_screen .p-loading-screen--splash .p-loading-screen__catch { opacity:1; transition-delay:1s; }


/* 背景アニメーション */

/* type1 - フェードアウト */
.p-loading-animation--type1 .p-loading-screen--simple { transition:opacity 1s ease 0s; }
.p-loading-animation--type1 .p-loading-screen--splash { transition:opacity 1s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.7s; }
.p-loading-animation--type1.close_loading_screen .p-loading-screen { opacity:0; pointer-events: none; }

/* type2 - フェードアウト + 背景アニメーション */
.p-loading-animation--type2 .p-loading-screen { transition:opacity 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.5s; }
.p-loading-animation--type2.close_loading_screen .p-loading-screen { opacity:0; pointer-events: none; }
.p-loading-animation--type2 .p-loading-animation-target { transform: translate3d(0px, -40px, 0px); transition: transform 0.9s cubic-bezier(0.17,0.84,0.44,1) 0.5s; }
.p-loading-animation--type2.close_loading_screen .p-loading-animation-target { transform: translate3d(0px, 0px, 0px); }

/* type3 - スライドアウト 左から右 */
.p-loading-animation--type3 .p-loading-screen { clip-path: inset(0 0 0 0); transition:clip-path 0.7s cubic-bezier(.83,0,.17,1) 0.7s; }
.p-loading-animation--type3.close_loading_screen .p-loading-screen { clip-path: inset(0 0 0 100%); pointer-events: none; }

/* type4 - スライドアウト 上から下 */
.p-loading-animation--type4 .p-loading-screen { clip-path: inset(0 0 0 0); transition:clip-path 0.8s cubic-bezier(.83,0,.17,1) 0.7s; }
.p-loading-animation--type4.close_loading_screen .p-loading-screen { clip-path: inset(0 0 100% 0); pointer-events: none; }