/* 10周年 */

:root {
  --top-yellow:        80;
  --offset-yellow:    250;
  --width-yellow:     166;
  --top-pink:         950;
  --offset-pink:      270;
  --width-pink:       152;
  --top-orange:      1100;
  --offset-orange:   -360;
  --width-orange:     141;
  --top-pair:        1500;
  --offset-pair:      220;
  --width-pair:       236;

  --width-epoch:     4362;
  --height-epoch:    1590;

  --height-epoch:    1590;
  --width-slider:     834;
  --top-slider:      1800;
  --top-information: 2300;
 
}

* {
}

body {
  background-color: white;
}

a:hover {
  cursor: pointer;
  filter: alpha(opacity=80);
  opacity: 0.8;
}

.container-fluid {
  max-width: 100%;
  padding: 0;
}

.hidden {
  opacity: 0;
}
.appear {
  transition: all 1s;
  opacity: 1;
}


/* --- */

.background {
  width: 100%;
  height: 2804px;
  background: url('../../images/portal/10th/background.jpg');		/* ※ */
  background-position: center;
  margin-top: -10px;
  animation: anim-scroll 20s linear infinite;

  position: relative;
}
/*
※
background.pngにすると iPhone/safari で再起動や「問題が繰り返し起きました」となる
中身が同じで「.jpg」ならばOK
あるいは.jpgにすることでファイルサイズが小さくなったのでそれが原因の可能性あり
*/


.epoch-frame {
  overflow-x: hidden;
  height: calc(var(--height-epoch) * 1px);
position: relative;
}

.epoch {
  position: absolute;
  left: calc(50vw - calc(var(--width-epoch) * 1px) / 2);
  top: 0;

}

.cuplin {
  position: absolute;
}
.cuplin-yellow {
  left: calc(50% + calc(var(--offset-yellow) * 1px));
  top: calc(var(--top-yellow) * 1px);
  animation: anim-cuplin-yellow 3s linear infinite;
}
.cuplin-pink {
  left: calc(50% + calc(var(--offset-pink) * 1px));
  top: calc(var(--top-pink) * 1px);
  animation: anim-cuplin-pink 2s linear infinite;
}
.cuplin-orange {
  left: calc(50% + calc(var(--offset-orange) * 1px));
  top: calc(var(--top-orange) * 1px);
  animation: anim-cuplin-orange 1s linear infinite;
}
.cuplin-pair {
  left: calc(50% + calc(var(--offset-pair) * 1px));
  top: calc(var(--top-pair) * 1px);
  animation: anim-cuplin-pair 4s linear infinite;
}


.slider {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: calc(var(--top-slider) * 1px);

  width: calc(var(--width-slider) * 1px);
}
.information {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  z-index: 2;

  top: calc(var(--top-information) * 1px);
}

.logo {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 2.5%;
}


/* 1001px未満 */
@media screen and (max-width: 1000px) {
  .background {
    background-size: contain;
    width: 100vw;
    height: calc(2804 / 1000 * 100vw * 1.0);
  }
  .epoch-frame {
    height: calc(var(--height-epoch) / 1000 * 100vw * 1.0);
    overflow-y: hidden;

  }
  .epoch {
    width: calc(var(--width-epoch) / 1000 * 100vw * 1.0);
    left: calc(50vw - calc(var(--width-epoch) / 1000 * 100vw * 1.0) / 2);
  }
  .cuplin-yellow {
    width: calc(var(--width-yellow) / 1000 * 100vw * 1.0);
    left: calc(50% + calc(var(--offset-yellow) / 1000 * 100vw * 1.0));
    top: calc(var(--top-yellow) / 1000 * 100vw * 1.0);
  }
  .cuplin-pink {
    width: calc(var(--width-pink) / 1000 * 100vw * 1.0);
    left: calc(50% + calc(var(--offset-pink) / 1000 * 100vw * 1.0));
    top: calc(var(--top-pink) / 1000 * 100vw * 1.0);
  }
  .cuplin-orange {
    width: calc(var(--width-orange) / 1000 * 100vw * 1.0);
    left: calc(50% + calc(var(--offset-orange) / 1000 * 100vw * 1.0));
    top: calc(var(--top-orange) / 1000 * 100vw * 1.0);
  }
  .cuplin-pair {
    width: calc(var(--width-pair) / 1000 * 100vw * 1.0);
    left: calc(50% + calc(var(--offset-pair) / 1000 * 100vw * 1.0));
    top: calc(var(--top-pair) / 1000 * 100vw * 1.0);
  }

  .slider {
    top: calc(var(--top-slider) / 1000 * 100vw * 1.0);
    width: calc(var(--width-slider) / 1000 * 100vw * 1.0);
  }
  .information {
    top: calc(var(--top-information) / 1000 * 100vw * 1.0);
    width: 60vw;
  }
  .panel {
    width: calc(826 / 1000 * 100vw * 1.0);
  }
  .logo {
    width: calc(246 / 1000 * 100vw * 1.0);
  }
}


/* ----- スライダー ----- */

.slick-slide {
  height: auto;
}

.slick-dots {
  bottom: initial;

  width: 100vw;
  margin: -800px calc((50vw - 50%) * -1) 0;
  display: flex;
  justify-content: center;
}

.slick-dots li {
  width: 141px;
  height: 54px;
  margin: 0 5px;
}
.slick-dots li button {
  width: 100%;
  height: 100%;
}

.slick-dots li button:before {
  content: '';
  width: 100%;
  height: 100%;
  opacity: 1;
  filter: opacity(100%);
}

.slick-dots li:nth-of-type(1) button:before {
  background: url("../../images/portal/10th/buttons/1.png") no-repeat;
}
.slick-dots li:nth-of-type(2) button:before {
  background: url("../../images/portal/10th/buttons/2.png") no-repeat;
}
.slick-dots li:nth-of-type(3) button:before {
  background: url("../../images/portal/10th/buttons/3.png") no-repeat;
}
.slick-dots li:nth-of-type(4) button:before {
  background: url("../../images/portal/10th/buttons/4.png") no-repeat;
}
.slick-dots li:nth-of-type(5) button:before {
  background: url("../../images/portal/10th/buttons/5.png") no-repeat;
}

/* ----- スライダー・1001px未満 ----- */
 
@media screen and (max-width: 1000px) {
  .slick-dots {
    margin: calc(-800 / 1000 * 100vw * 1.0) calc((50vw - 50%) * -1) 0;
    width: 98vw;
  }
  .slick-dots li:nth-of-type(1) button:before,
  .slick-dots li:nth-of-type(2) button:before,
  .slick-dots li:nth-of-type(3) button:before,
  .slick-dots li:nth-of-type(4) button:before,
  .slick-dots li:nth-of-type(5) button:before {
    background-size: calc(141 / 1000 * 100vw * 1.0);
  }
}


/* ----- アニメーション ----- */
@keyframes anim-scroll {
  0% {
      background-position: 0 0;
  }
  100% {
      background-position: -1550px 0; /* -1550px: 画像横幅 */
  }
}

@keyframes anim-cuplin-yellow {
  0%   { transform: translateY(0) }
  50%  { transform: translateY(-30px) }
  100% { transform: translateY(0) }
}
@keyframes anim-cuplin-pink {
  0%   { transform: translateY(0) }
  50%  { transform: translateY(-40px) }
  100% { transform: translateY(0) }
}

@keyframes anim-cuplin-orange {
  0%   { transform: translateY(0) }
  50%  { transform: translateY(-20px) }
  100% { transform: translateY(0) }
}

@keyframes anim-cuplin-pair {
  0%   { transform: translateY(0) }
  50%  { transform: translateY(-15px) }
  100% { transform: translateY(0) }
}