@media screen and (min-width: 768px) { /* PC・タブレット */

.slider-container {
 position: relative;
 width: 100%;
 min-width:1100px;
 height: 630px;
 padding-bottom:20px;
 overflow: hidden;
 background-image: url('../common/light.jpg');
 background-repeat: no-repeat;
 background-position:center -50px;
 background-size:max(1300px, 100vw) auto;
}
.slide-track {
 position: absolute;
 display: flex;
 will-change: transform;
}
.slide-track.s1,.slide-track.s1p { top:35%;z-index:80; }
.slide-track.s2,.slide-track.s2p { bottom:10%;z-index:70; }
.slide-track.s3,.slide-track.s3p { top:2%;z-index:60; }
.slide-track.s4 { top:14%;z-index:50; }
.slide-track.s5 { top:28%;z-index:40; }
.slide-track.s6 { bottom:1%;z-index:30; }
.slide-track.s7 { top:20%;z-index:20; }
.slide-track.s8 { top:60%;z-index:10; }
.slide-track.s20 { top:42%;z-index:65; }
.slide-track.s21 { top:5%;z-index:91; }
.slide-track.s22 { top:30%;z-index:45; }
.slide-track.s23 { top:60%;z-index:90; }
.slide-track.s24 { top:0%;z-index:84; }
.slide-track.s25 { top:50%;z-index:55; }
.slide-track.s26 { top:27%;z-index:35; }
.slide-track.s27 { top:19%;z-index:55; }
.slide-track.s28 { top:42%;z-index:45; }
.slide-track.s29 { top:11%;z-index:45; }
.slide {
 object-fit: cover;
 flex-shrink: 0;
 mask-image: radial-gradient(ellipse at center, black 20%, transparent 100%);
 -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 100%);
 opacity:0,7;
}
.slide.anime { border-radius:0px;opacity:1;mask-image:none;  }
.s1 .slide,.s1p .slide { width:350px;margin-right:calc(100vw - 0px);filter: blur(0.2px) brightness(1.2) saturate(0.8); }
.s2 .slide,.s2p .slide { width:300px;margin-right:calc(100vw - -0px);filter: blur(0.4px) brightness(1.3) saturate(0.8); }
.s3 .slide,.s3p .slide { width:250px;margin-right:calc(100vw - 300px);filter: blur(0.6px) brightness(1.3) saturate(0.8); }
.s4 .slide { width:200px;margin-right:calc(100vw - 250px);filter: blur(0.8px) ; }
.s5 .slide { width:150px;margin-right:calc(100vw - 200px);filter: blur(1.0px) brightness(1.3) saturate(0.8); }
.s6 .slide { width:125px;margin-right:calc(100vw - 150px);filter: blur(1.2px) brightness(1.3) saturate(0.8); }
.s7 .slide { width:100px;margin-right:calc(100vw - 100px);filter: blur(1.4px) brightness(1.3) saturate(0.8); }
.s8 .slide { width:75px;margin-right:calc(100vw - 70px);filter: blur(1.6px) brightness(1.3) saturate(0.8); }
.s20 .slide { width:90px;margin-right:calc(100vw - -50vw); }
.s21 .slide { width:200px;margin-right:calc(100vw - -50vw); }
.s22 .slide { width:120px;margin-right:calc(100vw - -50vw); }
.s23 .slide { width:110px;margin-right:calc(100vw - -50vw); }
.s24 .slide { width:60px;margin-right:calc(100vw - -50vw);animation: fuwafuwa 2s ease-in-out infinite; }
.s25 .slide { width:50px;margin-right:calc(100vw - -50vw); }
.s26 .slide { width:50px;margin-right:calc(100vw - -50vw); }
.s27 .slide { width:70px;margin-right:calc(100vw - -50vw); }
.s28 .slide { width:70px;margin-right:calc(100vw - -50vw); }
.s29 .slide { width:100px;margin-right:calc(100vw - -50vw); }
.fade-in-section {
 opacity: 0;
 transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}
@keyframes fuwafuwa {
  0%   { transform: translateY(0) rotate(-30deg); }
  50%  { transform: translateY(20px) rotate(-30deg); }
  100% { transform: translateY(0) rotate(-30deg); }
}

 #message {
  position:absolute;
  bottom:40px;right:0;left:0;
  margin:auto;
  width:600px;
  padding:15px 20px;
  color:white;
  font-size:16px;
  background:black;
  opacity:0.7;
  z-index:95;
  border:solid 5px white;
  border-radius: 12px;
  text-align:left;
 }
 #message div {
  display:inline-block;
 }
 #top {
  width:100%;
  min-width:1100px;
  font-size:16px;
  text-align:left;
  transition:0.5s;
  background:#1e90ff;
 }
 #top.white {background:white;}
 #top.blue {background:#1e90ff;}
 #top .more {
  position:absolute;
  width:100%;
  padding-top:40px;
  color:#1e90ff;
  font-size:50px;
  text-align:center;
  animation: blink-opacity 5s infinite;
 }
 @keyframes blink-opacity {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
 }
 #top .category-container {
  width:100%;
  min-width:1100px;
  padding:200px 0;
 }
 #top .category-container.white { background:white }
 #top .category-container.blue { background:#1e90ff }
 #top .category-container.mini {
  text-align:center;
  padding:100px 0;
 }
 #top .category {
  position:relative;
  margin:0 auto;
  width:1100px;height:350px;
  padding:20px 0;
 }
 #top .text {
  position:absolute;
  font-size:40px;
  font-weight:bold;
 }
 #top .about .text { left:30px;color:white; }
 #top .member .text { right:30px; }
 #top .event .text { left:30px;color:white; }
 #top .title {
  position:absolute;
  width:250px;height:60px;
  text-align:center;
  font-size:40px;
  font-weight:bold;
  background:#1e90ff;
  z-index:20;
  transition:0.3s;
 }
 #top .title:hover {
  transform:scale(1.1);
 }
 #top .title a {
  display:block;
  width:100%;
  color:#1e90ff;
  background:white;
 }
 #top .about .title { top:180px;left:30px;color:white; }
 #top .member .title {
  top:180px;right:180px;
  color:#1e90ff;
  background:white; }
 #top .member .title a { color:white;background:#1e90ff; } 
 #top .event .title { top:180px;left:30px; }
 #top .detail {
  position:absolute;
  top:250px;
  width:450px;
  font-size:16px;
 }
 #top .detail div { display:inline-block; }
 #top .about .detail { top:280px;left:30px;color:white; }
 #top .member .detail { width:430px;top:280px;right:0px; }
 #top .event .detail { top:280px;left:30px;color:white; }
 #top .photo img {
  position:absolute;
  right:10px;
  height:90%;
  border-radius:40px;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.8);
 }
 #top .member .photo img { left:10px; }
 #top #player {
  display:block;
  width:1026px;
  height:577px;
  margin:0 auto 20px auto;
  background:#000;
  border-radius:15px;
 }
 #top .minicategory {
  position:relative;
  display:inline-block;
  margin:0 20px;
  width:450px;height:180px;
  padding:20px;
  background:#1e90ff;
 }
 #top .minicategory .title {
  position:relative;
  top:10px;
  margin:0 auto;
  background:white;
  color:#1e90ff;
 }
 #top .minicategory .title a { color:#1e90ff; }
 #top .minicategory .detail {
  top:110px;left:10%;
  width:80%;
  font-size:16px;
  text-align:left;
  color:white;
 }
 #copyright {
  font-size:14px;
 }

} @media screen and (max-width: 767px) {  /* スマホ */

 .slider-container {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height:80vw;
  padding-bottom:50px;
  overflow: hidden;
  overflow: hidden;
  background-image: url('../common/light.jpg');
  background-repeat: no-repeat;
  background-position: center -50px;
  background-size:auto calc(100% + 50px);
 }
 .slide-track {
  position: absolute;
  display: flex;
  will-change: transform;
 }
 .slide-track.s1,.slide-track.s1p { top:34%;z-index:61; }
 .slide-track.s2,.slide-track.s2p { top:80%;z-index:22; }
 .slide-track.s3,.slide-track.s3p { top:1%;z-index:23; }
 .slide-track.s4 { top:55%;z-index:24; }
 .slide-track.s5 { top:22%;z-index:25; }
 .slide-track.s6 { top:70%;z-index:26; }
 .slide-track.s7 { top:15%;z-index:27; }
 .slide-track.s8 { top:45%;z-index:28; }
 .slide-track.s20 { top:36%;z-index:65; }
 .slide-track.s21 { top:5%;z-index:75; }
 .slide-track.s22 { top:27%;z-index:45; }
 .slide-track.s23 { top:55%;z-index:90; }
 .slide-track.s24 { top:0;z-index:35; }
 .slide-track.s25 { top:50%;z-index:55; }
 .slide-track.s26 { top:27%;z-index:35; }
 .slide-track.s27 { top:19%;z-index:55; }
 .slide-track.s28 { top:37%;z-index:34; }
 .slide-track.s29 { top:12%;z-index:36; }
 .slide-track.s99 { bottom:10%;z-index:96; }/**jolly**/
 .slide {
  object-fit: cover;
  flex-shrink: 0;
  mask-image: radial-gradient(ellipse at center, black 10%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 10%, transparent 100%);
 }
 .slide.anime { border-radius:0px;opacity:1;mask-image:none; }
 .s1 .slide,.s1p .slide { width:45vw;margin-right:calc(100vw - 0vw);filter: blur(0.2px) brightness(1.3) saturate(0.8); }
 .s2 .slide,.s2p .slide { width:40vw;margin-right:calc(100vw - -20vw);filter: blur(0.3px) brightness(1.3) saturate(0.8); }
 .s3 .slide,.s3p .slide { width:35vw;margin-right:calc(100vw - -10vw);filter: blur(0.4px) brightness(1.3) saturate(0.8); }
 .s4 .slide { width:30vw;margin-right:calc(100vw - 30vw);filter: blur(0.5px) ;}
 .s5 .slide { width:25vw;margin-right:calc(100vw - 25vw);filter: blur(0.6px) brightness(1.3) saturate(0.8); }
 .s6 .slide { width:20vw;margin-right:calc(100vw - 20vw);filter: blur(0.7px) brightness(1.3) saturate(0.8); }
 .s7 .slide { width:15vw;margin-right:calc(100vw - 15vw);filter: blur(0.8px) brightness(1.3) saturate(0.8); }
 .s8 .slide { width:10vw;margin-right:calc(100vw - 10vw);filter: blur(0.9px) brightness(1.3) saturate(0.8); }
 .s20 .slide { width:17vw;margin-right:calc(100vw - -70vw); }
 .s21 .slide { width:25vw;margin-right:calc(100vw - -70vw); }
 .s22 .slide { width:14vw;margin-right:calc(100vw - -70vw); }
 .s23 .slide { width:20vw;margin-right:calc(100vw - -70vw); }
 .s24 .slide { width:9vw;margin-right:calc(100vw - -70vw);animation: fuwafuwa 2s ease-in-out infinite; }
 .s25 .slide { width:7vw;margin-right:calc(100vw - -70vw); }
 .s26 .slide { width:7vw;margin-right:calc(100vw - -70vw); }
 .s27 .slide { width:11vw;margin-right:calc(100vw - -70vw); }
 .s28 .slide { width:10vw;margin-right:calc(100vw - -70vw); }
 .s29 .slide { width:12vw;margin-right:calc(100vw - -70vw); }
 .s99 .slide { width:30px;margin-right:calc(100vw - 30px);opacity:0.3 !important; }/**jolly**/
 .fly-away {
  animation: flyAway 1s ease-out forwards;
 }
 @keyframes flyAway {/**jolly**/
  to {
    transform: translateY(-500px) rotate(720deg);
    opacity: 0;
  }
 }
 .fade-in-section {
  opacity: 0;
  transform: translateY(30px);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
 }
 .fade-in-section.visible {
   opacity: 1;
   transform: translateY(0);
 }
 @keyframes fuwafuwa {
  0%   { transform: translateY(0) rotate(-30deg); }
  50%  { transform: translateY(10px) rotate(-30deg); }
  100% { transform: translateY(0) rotate(-30deg); }
 }

 #message {
  position:absolute;
  bottom:5%;right:0;left:0;
  margin:auto;
  width:77%;
  padding:15px 20px;
  color:white;
  font-size:12px;
  background:black;
  opacity:0.7;
  z-index:95;
  border:solid 2px white;
  border-radius: 12px;
  text-align:left;
 }
 #message div {
  display:inline-block;
 }
 #top {
  width:100%;
  color:#222222;
  font-size:16px;
  text-align:left;
  transition:0.5s;
 }
 #top.black {background:#111111;}
 #top.white {background:white;}
 #top.blue {background:#1e90ff;}
 #top .more {
  position:absolute;
  width:100%;
  padding-top:40px;
  color:#1e90ff;
  font-size:5vw;
  text-align:center;
  animation: blink-opacity 5s infinite;
 }
 @keyframes blink-opacity {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
 }
 #top .category-container {
  width:100%;
  padding:20vh 0;
 }
 #top .category-container.white { background:white }
 #top .category-container.blue { background:#1e90ff }
 #top .category-container.mini {
  text-align:center;
  padding:60px 0;
 }
 #top .category {
  position:relative;
  margin:0 auto;
  padding:10vh 0;
  min-height:100vw;
 }
 #top .photo img {
  position:relative;
  top:0;left:5%;
  width:90%;
  border-radius:20px;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.8);
 }
 #top .text {
  position:relative;
  left:5%; 
  margin-top:15px;
  width:90%;
  font-size:6vw;
  font-weight:bold;
 }
 #top .about .text { color:white; }
 #top .member .text { text-align:right; }
 #top .event .text { color:white; }
 #top .title {
  position:relative;
  margin-top:10px;
  width:50%;
  padding:5px 0;
  text-align:center;
  font-size:7vw;
  font-weight:bold;
  color:white;
  z-index:20;
 }
 #top .title a {
  display:block;
  width:100%;
  background:white;
  color:#1e90ff; }
 #top .about .title { left:5%; }
 #top .member .title {
  right:5%;
  margin-left:50%; }
 #top .member .title a {
  background:#1e90ff;
  color:white; } 
 #top .event .title { left:5%; }
 #top .detail {
  position:relative;
  margin-top:15px;
  left:5%;
  width:90%;
  font-size:clamp(14px,3vw,20px);
 }
 #top .detail div { display:inline-block; }
 #top .about .detail { left:5%;color:white; }
 #top .member .detail { right:5%;text-align:right; }
 #top .event .detail { left:5%;color:white; }
 #top #player {
  display:block;
  width:90vw;
  height:57.7vw;
  margin:0 auto 20px auto;
  background:#000;
  border-radius:5px;
 }
 #top .minicategory {
  position:relative;
  left:5%;
  margin:30px 0;
  padding:10px 0;
  width:90%;
  background:#1e90ff;
 }
 #top .minicategory .title {
  position:relative;
  top:10px;
  margin:0 auto;
  background:white;
  color:#1e90ff;
 }
 #top .minicategory .title a { color:#1e90ff; }
 #top .minicategory .detail {
  width:90%;
  left:5%;
  margin-top:25px;
  font-size:clamp(14px,3vw,30px);
  text-align:left;
  color:white;
 }
 #copyright {
  font-size:10px;
 }

}