@charset "UTF-8";
/* CSS Document */
/* ------------------------------
	RESET
------------------------------ */
html, body, img, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, hr, pre, form, p, span, a, a:hover, blockquote, fieldset, input, abbr, article, aside, command, details, figcaption, figure, footer, header, hgroup, mark, meter, nav, output, progress, section, summary, time {
  margin: 0;
  padding: 0;
  border: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

main, article, header, footer, div, iframe {
  width: 100%;
  white-space: normal;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

main, article, header, footer, div {
  height: auto;
}

/* ------------------------------
	BASE STYLE
------------------------------ */
h1, h2, h3, h4, h5, h6 {
  color: rgb(0, 0, 0);
  font-weight: 600;
}

p, a, a:hover, li, dt, dd {
  color: rgb(50, 50, 50);
}

span {
  color: rgb(100, 100, 100);
}

a, a:hover {
  display: block;
  text-decoration: underline;
}

footer a, footer a:hover, header a, header a:hover {
  text-decoration: none;
}

a:hover {
  cursor: pointer;
}

blockquote {
  font-size: 10px;
}

sab, sap {
  font-size: 8px;
}

hr {
  width: 100%;
  border: 1px solid rgb(200, 200, 200);
  margin: 30px auto;
}

/*ul {list-style-type: disc; list-style-position: inside;}*/
ul, ol, dl {
  white-space: normal;
}

ol {
  list-style-type: decimal;
  list-style-position: inside;
}

li {
  line-height: 0;
}

/* ------------------------------
	RESPONSIVE
------------------------------ */
/* ------------------------------
	BASE CLASS
------------------------------ */
.fixed {
  overflow: hidden;
}

.hidden,
.preload {
  opacity: 0;
}

.disabled {
  display: none;
  pointer-events: none;
}

a[tabindex="-1"] {
  text-decoration: none;
  cursor: auto;
}

/* ------------------------------
	ANIMATION STYLE
------------------------------ */
/*
①-name
「アニメーション名 animation-sample」
②-duration
「1回分の時間 3秒」
③-timing
「変化のタイミング ゆっくり開始する」
④-delay
「3秒後にアニメーションがスタート」
⑤-iteration
「実行回数 無限に繰り返し」infinite（それ以外は回数を指定）
⑥-direction
「再生方向 偶数回で逆再生」
⑦-fill
「実行前後 @keyframesの100%の状態」
⑧-play
「状態 アニメーションを再生中にする」
*/
/* ③-timing
ease（初期値）	開始時と終了時の動きをなめらかにする
ease-in	開始時だけなめらかにする
ease-out	終了時だけなめらかにする
ease-in-out	easeよりもゆっくり変化させる
linear	一定の速度で変化させる
steps	コマ送りのように変化させる
cubic-bezier	変化の度合いをX軸・Y軸で変化させる
*/
/* ⑥-derection
normal（初期値）	通常通りの動き
reverse	逆方向の動き
alternate	奇数回で通常、偶数回で逆の動き
alternate-reverse	奇数回で逆、偶数回で通常の動き
*/
/* ⑦-fill
none	スタイルを指定しません。アニメーション再生後は、元のスタイルが適用されます。animation-delayプロパティを指定している場合、再生までの時間は元のスタイルが適用されます。
backwards	アニメーション再生後は、最初のキーフレーム（0%）のスタイルが適用されます。animation-delayプロパティを指定している場合、再生までの時間は最初のキーフレーム（0%）のスタイルが適用されます。
forwards	アニメーション再生後は、最後のキーフレーム（100%）のスタイルが適用されます。animation-delayプロパティを指定している場合、再生までの時間は元のスタイルが適用されます。
both	アニメーション再生後は、最後のキーフレーム（100%）のスタイルが適用されます。animation-delayプロパティを指定している場合、再生までの時間は最初のキーフレーム（0%）のスタイルが適用されます。
*/
[class*=is-remain] {
  -webkit-animation: faderemain 11s cubic-bezier(0, 0, 0.21, 1) 0s 1 normal forwards;
          animation: faderemain 11s cubic-bezier(0, 0, 0.21, 1) 0s 1 normal forwards;
  z-index: 1;
} /* 4s */
[class*=is-remain] img {
  -webkit-animation: show 11s cubic-bezier(0, 0, 0.21, 1) 0s 1 normal forwards;
          animation: show 11s cubic-bezier(0, 0, 0.21, 1) 0s 1 normal forwards;
} /* 4s */
[class*=is-active] {
  -webkit-animation: fade 13s cubic-bezier(0, 0, 0.21, 1) 0s 1;
          animation: fade 13s cubic-bezier(0, 0, 0.21, 1) 0s 1;
  z-index: 1;
} /* 6s */
[class*=is-active] img {
  -webkit-animation: show 13s cubic-bezier(0, 0, 0.21, 1) 0s 1;
          animation: show 13s cubic-bezier(0, 0, 0.21, 1) 0s 1;
} /* 6s */
[class*=sq-1] > li.end {
  -webkit-animation: slide1 13s cubic-bezier(0, 0, 0.21, 1) 0s 1 normal forwards;
          animation: slide1 13s cubic-bezier(0, 0, 0.21, 1) 0s 1 normal forwards;
} /* 6s */
[class*=sq-1] > li:not(.end) {
  -webkit-animation: slide4 13s cubic-bezier(0, 0, 0.21, 1) 0s 1 normal forwards;
          animation: slide4 13s cubic-bezier(0, 0, 0.21, 1) 0s 1 normal forwards;
} /* 6s */
[class*=sq-2] > li {
  -webkit-animation: slide2 13s cubic-bezier(0, 0, 0.21, 1) 0s 1 normal forwards;
          animation: slide2 13s cubic-bezier(0, 0, 0.21, 1) 0s 1 normal forwards;
} /* 6s */
[class*=sq-3] > li {
  -webkit-animation: slide3 13s cubic-bezier(0, 0, 0.21, 1) 0s 1 normal forwards;
          animation: slide3 13s cubic-bezier(0, 0, 0.21, 1) 0s 1 normal forwards;
} /* 6s */
[class*=is-center] p {
  -webkit-animation: slideopen 13s cubic-bezier(0, 0, 0.21, 1) 0s 1 normal forwards;
          animation: slideopen 13s cubic-bezier(0, 0, 0.21, 1) 0s 1 normal forwards;
} /* 6s */
.text-slide {
  -webkit-animation: textslide 0.5s cubic-bezier(0, 0, 0.21, 1) 0s 1 normal forwards;
          animation: textslide 0.5s cubic-bezier(0, 0, 0.21, 1) 0s 1 normal forwards;
  position: relative;
}

[class*=blur] {
  -webkit-animation: blur 0.8s cubic-bezier(0, 0, 0.21, 1) 0.1s 1;
          animation: blur 0.8s cubic-bezier(0, 0, 0.21, 1) 0.1s 1;
}

[class*=ani_slideup_delay] {
  -webkit-animation: slideup 0.8s cubic-bezier(0, 0, 0.21, 1) 1s 1 normal forwards;
          animation: slideup 0.8s cubic-bezier(0, 0, 0.21, 1) 1s 1 normal forwards;
}

[class*=ani_slideup_soon] {
  -webkit-animation: slideup 0.8s cubic-bezier(0, 0, 0.21, 1) 0.1s 1 normal forwards;
          animation: slideup 0.8s cubic-bezier(0, 0, 0.21, 1) 0.1s 1 normal forwards;
}

[class*=more]:hover {
  /* 4s */
}
[class*=more]:hover > svg {
  -webkit-animation: expansion 0.5s cubic-bezier(0, 0, 0.21, 1) 0s 1 normal forwards;
          animation: expansion 0.5s cubic-bezier(0, 0, 0.21, 1) 0s 1 normal forwards;
}

@-webkit-keyframes faderemain {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes faderemain {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  } /* 10% */
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  } /* 10% */
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes show {
  0% {
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    transform: translate(-50%, 0) scale(1.085);
  }
}
@keyframes show {
  0% {
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    transform: translate(-50%, 0) scale(1.085);
  }
}
@-webkit-keyframes slide1 {
  0% {
    transform: translate(100%, 0);
  }
  10% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes slide1 {
  0% {
    transform: translate(100%, 0);
  }
  10% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@-webkit-keyframes slide2 {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
@keyframes slide2 {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
@-webkit-keyframes slide3 {
  0% {
    transform: translate(-100%, 0);
  }
  10% {
    transform: translate(-200%, 0);
  }
  100% {
    transform: translate(-200%, 0);
  }
}
@keyframes slide3 {
  0% {
    transform: translate(-100%, 0);
  }
  10% {
    transform: translate(-200%, 0);
  }
  100% {
    transform: translate(-200%, 0);
  }
}
@-webkit-keyframes slide4 {
  0% {
    transform: translate(-200%, 0);
  }
  10% {
    transform: translate(-300%, 0);
  }
  100% {
    transform: translate(-300%, 0);
  }
}
@keyframes slide4 {
  0% {
    transform: translate(-200%, 0);
  }
  10% {
    transform: translate(-300%, 0);
  }
  100% {
    transform: translate(-300%, 0);
  }
}
@-webkit-keyframes slideopen {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slideopen {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes textslide {
  0% {
    opacity: 0;
    right: -1.5rem;
  }
  100% {
    opacity: 1;
    right: 0;
  }
}
@keyframes textslide {
  0% {
    opacity: 0;
    right: -1.5rem;
  }
  100% {
    opacity: 1;
    right: 0;
  }
}
@-webkit-keyframes blur {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blur {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes slideup {
  0% {
    transform: translate(0, 50px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes slideup {
  0% {
    transform: translate(0, 50px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes expansion {
  0% {
    transform: scale(50%);
    opacity: 0.3;
  }
  100% {
    transform: scale(120%);
    opacity: 1;
  }
}
@keyframes expansion {
  0% {
    transform: scale(50%);
    opacity: 0.3;
  }
  100% {
    transform: scale(120%);
    opacity: 1;
  }
}
/*

.timedelay>.preload {
	opacity: 0;
	transform: translate(0,50px);
}
.timedelay>:not(.preload) {
	opacity: 1;
	transform: translate(0,0);
	transition: 1s;
}

*//*# sourceMappingURL=base.css.map */