/* 年度ごとの要素追加に使用 */
/* 各年の1月にコメントアウトを増やしてください*/

/* ._2018, */
/* ._2019, */
/* ._2020, */
/* ._2021, */
/* ._2022, */
/* ._2023, */
/* ._2024, */
/* ._2025, */
._2026,
._2027,
._2028,
._2029 {
  display: none;
}

/* 共通設定 */
html {
  overscroll-behavior: none;
}

a {
  text-decoration: none;
}

a:visited,
a:link {
  color: inherit;
}

body {
  margin: 0;
  background: black;
}

small {
  font-size: 40%;
}

/* ハンバーガーメニューボタン */
input.hamburger {
  display: none;
}

label.hamburger {
  position: relative;
  display: block;
  z-index: 1000;
  width: 3rem;
  height: 3rem;
  margin: 0.5rem;
  margin-left: auto;
  background: black;
  border-radius: 0.5rem;
  border: solid 2px #00ffff;
  box-shadow: 0 0 1rem #00ffff;
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.5s ease;
}

label.hamburger:hover {
  opacity: 1;
}

label.hamburger > span,
label.hamburger > span::before,
label.hamburger > span::after {
  content: "";
  position: absolute;
  display: block;
  width: 2.6rem;
  height: calc(3rem * 0.12);
  background: #aaaaaa;
  border-radius: 0.2rem;
  transform-origin: center center;
  transition: all 0.2s ease;
}

label.hamburger > span {
  top: calc(3rem * (1 - 0.12) * 0.5);
  left: 0.2rem;
}

label.hamburger > span::before {
  top: calc(-3rem * 0.25);
}

label.hamburger > span::after {
  top: calc(3rem * 0.25);
}

#nav-open:checked ~ .hamburger > span {
  background: rgba(0, 0, 0, 0);
}

#nav-open:checked ~ .hamburger > span::before {
  transform: translateY(calc(3rem * 0.25)) rotate(45deg);
}

#nav-open:checked ~ .hamburger > span::after {
  transform: translateY(calc(-3rem * 0.25)) rotate(-45deg);
}

/* メニュー */
#menu {
  overflow-x: hidden;
  overflow-y: scroll;
  font-size: 1.5rem;
  background: url("../img/menu_pattern.jpg");
  background-repeat: repeat;
}

.menu-logo {
  margin: 0.5rem;
  height: 3rem;
}

.menu-list {
  padding: 0;
  padding-bottom: 8rem;
  list-style: none;
  color: white;
  margin: 0;
}

.menu-list-block {
  display: block;
  padding: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  transition: all 0.5s ease;
}

.menu-list-block * {
  vertical-align: middle;
}

.menu-list-block img {
  width: 1rem;
  margin: 0.5rem;
}

.menu-list ul {
  font-size: 1.2rem;
  max-height: 0;
  transition: all 0.6s ease-in-out;
  overflow: hidden;
}

.menu-list ul .menu-list-block {
  background: #0d7ab9;
  text-shadow: 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0rem -0.2rem 0.5rem rgba(0, 0, 0, 0.2) inset;
  border: initial;
  border-top-left-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}

.menu-list ul .menu-list-block:hover {
  background: #05a3ff;
}

.menu-list ul .menu-list-block::before {
  vertical-align: middle;
  display: inline-block;
  content: "";
  background: url("../img/icon_finger.svg") no-repeat;
  margin: 0 0.5rem;
  background-size: contain;
  width: 1rem;
  height: 1rem;
  transform: translateY(-0.1rem);
}

#menu-home-input:checked + .menu-list-block,
#menu-event-input:checked + .menu-list-block,
#menu-team-input:checked + .menu-list-block,
#menu-contact-input:checked + .menu-list-block {
  background: rgba(0, 0, 0, 0.5);
  text-shadow: 0 0 1rem red, 0 0 1rem red;
  padding-left: 2rem;
}

.menu-list-block:hover {
  background: rgba(0, 0, 0, 0.5);
  text-shadow: 0 0 1rem red, 0 0 1rem red;
}

/* メニューの要素を増やすときに用変更 */
#menu-home-input:checked ~ ul {
  max-height: calc(2.8rem * 7);
}

#menu-event-input:checked ~ ul {
  max-height: calc(2.8rem * 1);
}

#menu-team-input:checked ~ ul {
  max-height: calc(2.8rem * 7);
}

#menu-contact-input:checked ~ ul {
  max-height: calc(2.8rem * 1);
}

/* メインコンテンツ */
#content {
  color: white;
  overflow: scroll;
  overflow-x: hidden;
  transform-origin: bottom left;
  transition: 0.5s ease;
  transition-property: transform, filter;
  scroll-behavior: smooth;
  text-align: center;
  border-left: double 3px white;
  margin-left: -3px;
}

#nav-open:checked ~ #content {
  transform: translateX(16rem);
}

#nav-open:checked ~ #content > * {
  filter: sepia(100%);
}

.main {
  min-height: calc(100vh - 8rem);
}

/* フッター */
footer {
  background: rgba(17, 17, 17);
  height: 8rem;
}

footer > iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* スプラッシュ */
.splash {
  position: relative;
}

.splash > div {
  position: absolute;
}

.splash video {
  opacity: 0;
  animation: splash 2s ease 4s 1 normal;
  animation-fill-mode: forwards;
}

.splash svg {
  max-width: 30rem;
  width: 70%;
  height: 100%;
  transform: scale(0);
  opacity: 0;
  animation: splash-logo 1s ease-in-out forwards;
}

.splash svg path {
  stroke: black;
  stroke-dasharray: 1000;
  animation: splash-stroke 3s linear forwards;
  animation-fill-mode: forwards;
}

.splash svg path:nth-child(1) {
  animation: splash-stroke-C 3s linear forwards;
}

.splash svg path:nth-child(2),
.splash svg path:nth-child(3) {
  animation: splash-stroke-SR 3s linear forwards;
}

@keyframes splash {
  100% {
    opacity: 1;
  }
}

@keyframes splash-logo {
  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}

@keyframes splash-stroke {
  0% {
    fill: rgba(255, 255, 255, 0);
    stroke-dashoffset: 1000;
  }

  10% {
    stroke-dashoffset: 1000;
  }

  70% {
    stroke-dashoffset: 970;
  }

  80% {
    fill: rgba(0, 0, 0, 0);
  }

  100% {
    stroke-dashoffset: 970;
    fill: rgba(0, 0, 0, 1);
  }
}

@keyframes splash-stroke-SR {
  10% {
    stroke-dashoffset: 1000;
  }

  70% {
    stroke-dashoffset: 940;
  }

  80% {
    fill: rgba(0, 0, 0, 0);
  }

  100% {
    stroke-dashoffset: 940;
    fill: rgba(0, 0, 0, 1);
  }
}

@keyframes splash-stroke-C {
  10% {
    stroke-dashoffset: 1000;
  }

  70% {
    stroke-dashoffset: 800;
  }

  80% {
    fill: rgba(0, 0, 0, 0);
  }

  100% {
    stroke-dashoffset: 800;
    fill: rgba(0, 0, 0, 1);
  }
}

/* ------------index.html------------ */
.scroll-nav {
  position: relative;
  padding-top: calc(100vh - 4rem);
}

.scroll-nav > div {
  padding-top: 1.5rem;
  text-align: center;
  height: 5rem;
  background: linear-gradient(#000, #222);
  clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0% 100%, 0% 25%);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0% 100%, 0% 25%);
}

.main-back {
  background: url("../img/kairo.jpg") fixed repeat;
  background-size: 100% auto;
}

/* ニュース */
.news {
  background: #080808;
}

.news li {
  display: block;
  border-bottom: solid 1px #333;
  padding: 0.5rem;
  text-align: left;
}

.news li .news-thumbnail {
  border: solid 1px white;
  width: 8rem;
  height: 4.5rem;
}

.news h2 {
  font-size: 1rem;
  margin: 0rem;
}

.news h3 {
  font-size: 0.6rem;
  line-height: 0.8rem;
  color: #aaa;
  margin: 0rem;
}

.news p {
  text-align: left;
  font-size: 1rem;
}

.news li a {
  color: #15a4f9;
  box-sizing: content-box;
  font-size: 1rem;
}

/* 班構成 */
.box-3d {
  position: relative;
  perspective: 50rem;
  --box-size: 8.01rem;
  transform-style: preserve-3d;
}

.box-3d > div > div {
  margin: 3rem auto;
  transform-style: preserve-3d;
  width: calc(8.01rem * 2);
  height: calc(8.01rem * 2);
  transition: transform 1s ease;
  transform: translateZ(-8.01rem) rotateY(0deg) rotateX(0deg);
}

.box-3d > div {
  transform-style: preserve-3d;
}

.box-3d img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#team-pro:checked ~ .box-3d > div > div {
  transform: translateZ(-8.01rem) rotateY(0deg) rotateX(0deg);
}

#team-snd:checked ~ .box-3d > div > div {
  transform: translateZ(-8.01rem) rotateZ(90deg) rotateY(-90deg);
}

#team-2d:checked ~ .box-3d > div > div {
  transform: translateZ(-8.01rem) rotateY(180deg) rotateX(0deg);
}

#team-3d:checked ~ .box-3d > div > div {
  transform: translateZ(-8.01rem) rotateZ(-90deg) rotateY(90deg);
}

#team-mm:checked ~ .box-3d > div > div {
  transform: translateZ(-8.01rem) rotateZ(180deg) rotateX(90deg);
}

#team-at:checked ~ .box-3d > div > div {
  transform: translateZ(-8.01rem) rotate(90deg) rotateX(-90deg);
}

.box-3d > div > div > div {
  position: absolute;
  top: 0;
  width: calc(8.01rem * 2);
  height: calc(8.01rem * 2);
  text-align: center;
  color: white;
  background: black;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: box-shadow ease 0.5s;
}

.box-3d > div > div > div:hover {
  box-shadow: 0 0 0.5rem red;
}

/* ゲームプログラミング班 */
.box-3d > div > div > div:nth-child(1) {
  transform: translateZ(8.01rem);
}

/* サウンド班 */
.box-3d > div > div > div:nth-child(2) {
  transform: translateX(8.01rem) rotateX(-90deg) rotateY(90deg);
}

/* 2D班 */
.box-3d > div > div > div:nth-child(3) {
  transform: translateZ(-8.01rem) rotateY(180deg);
}

/* 3D班 */
.box-3d > div > div > div:nth-child(4) {
  transform: translateX(-8.01rem) rotateX(-90deg) rotateY(-90deg);
}

/* デザイン版 */
.box-3d > div > div > div:nth-child(5) {
  transform: translateY(8.01rem) rotateZ(180deg) rotateX(90deg);
}

/* AT班 */
.box-3d > div > div > div:nth-child(6) {
  transform: translateY(-8.01rem) rotateZ(180deg) rotateY(90deg) rotateX(-90deg);
}

/* 班のボタン */

.team-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  justify-content: center;
}

.team-card {
  width: 300px;
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.team-card:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-block;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 4px;
  margin: 8px 8px;
}

/* ギャラリー */
.gallery-wall {
  background: url("../img/wallpaper.jpg");
  min-height: 100vh;
}

.gallery-list {
  max-width: 100vh;
  margin: 0 auto;
}

.gallery-list > li {
  display: block;
  width: 100%;
  padding-top: 3rem;
}

.aspect-wrapper {
  position: relative;
  width: 100%;
}

.aspect-wrapper::before {
  content: "";
  display: block;
  padding-top: 76.025390625%;
}

.frame {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url("../img/frame.jpg");
  background-size: 100% 100%;
  padding: 9.47265625%;
  box-shadow: 0 0 2vw black;
  overflow: hidden;
}

.frame * {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
}

.frame img,
.frame video {
  object-fit: contain;
}

.frame > iframe {
  width: 100%;
  height: 100%;
}

.gallery-panel {
  background: rgb(231, 231, 231);
  color: black;
  margin: 2rem 5%;
  border: solid 2px white;
  border-bottom-color: grey;
  border-right-color: grey;
  padding: 1rem;
}

.gallery-panel > .title {
  font-size: 1.3rem;
  line-height: 100%;
  font-weight: bold;
}

.gallery-panel > .artist {
  font-size: 0.8rem;
}

.gallery-panel > .desc {
  font-size: 1rem;
  text-align: left;
}

.gallery-panel a {
  color: #00639c;
  overflow-wrap: break-word;
}

/* event.html */

.event-table {
  border: solid 1px lightgreen;
  font-size: 0.8rem;
  width: 100%;
  border-spacing: 0;
  table-layout: fixed;
  text-align: left;
}

.event-table tr > td:nth-child(1) {
  width: 3em;
  padding-left: 0.5em;
}

.event-table td a {
  display: inline-block;
  background: #0d7ab9;
  line-height: 0.8rem;
  font-size: 0.8rem;
  padding: 0.2rem 0.4rem;
  border-radius: 0.4rem;
  font-weight: bold;
  color: white;
  margin: 0 0.5rem;
}

/* 班ページトップ　スライドショー */
.slideshow {
  height: 56vw;
  max-height: 70vh;
  position: relative;
  overflow: hidden;
}

.slideshow > ul {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
}

.slideshow > ul > li {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
  transition: all 1s ease;
  background: black;
  animation: autoslide 30s ease-in-out infinite;
}

@keyframes autoslide {
  0% {
    transform: translateX(000%);
  }

  30% {
    transform: translateX(000%);
  }

  33% {
    transform: translateX(-100%);
  }

  63% {
    transform: translateX(-100%);
  }

  66% {
    transform: translateX(-200%);
  }

  97% {
    transform: translateX(-200%);
  }

  100% {
    transform: translateX(0%);
  }
}

@keyframes slidebtn {
  0% {
    background: black;
    box-shadow: none;
  }

  64% {
    background: black;
    box-shadow: none;
  }

  66% {
    background: greenyellow;
    box-shadow: 0 0 1rem greenyellow;
  }

  98% {
    background: greenyellow;
    box-shadow: 0 0 1rem greenyellow;
  }

  99% {
    background: black;
    box-shadow: none;
  }

  100% {
    background: black;
    box-shadow: none;
  }
}

.slideshow > div {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  background: rgba(37, 37, 37, 0.9);
  line-height: 0;
  padding: 0.5rem;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

.slideshow > div > span {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin: 0.3rem;
  background: black;
  border-radius: 100%;
  border: solid 1px grey;
}

.slideshow > div > span:nth-child(1) {
  animation: slidebtn 30s ease-in-out -20s infinite;
}

.slideshow > div > span:nth-child(2) {
  animation: slidebtn 30s ease-in-out -10s infinite;
}

.slideshow > div > span:nth-child(3) {
  animation: slidebtn 30s ease-in-out -0s infinite;
}

/* equipment.html */

.equip-list {
  margin: 2rem;
}

.equip-list > li {
  display: inline-block;
  position: relative;
  width: 90%;
  max-width: 20rem;
  background: #ccc;
  margin: 0.2rem 0.5rem;
  border-radius: 1rem;
  box-shadow: 0 0 1vw rgb(255, 255, 255);
  overflow: hidden;
  font-size: 0;
}

.equip-list li > div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  color: black;
  font-size: 1rem;
  text-align: left;
  padding: 1rem;
  background: white;
  overflow: hidden;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.equip-list li > div:hover {
  opacity: 1;
}

/* book2.html */

.book-table {
  width: 100%;
  color: white;
  border-spacing: 0px;
  border-collapse: collapse;
}

.book-table td {
  border: solid 1px #888;
  padding: 0 0.5rem;
}

.syazi {
  width: 30rem;
  background: black;
  text-align: center;
  vertical-align: middle;
  padding: 2rem;
  transform-origin: left bottom;
  bottom: 0;
  border: double 3px white;
  margin: 2rem;
}

@media screen and (min-width: 450px) {
  #nav-open:checked ~ #content {
    transform: translateX(15rem) translateY(1rem) rotate(5deg) scale(1.2);
  }

  .box-3d {
    --box-size: 10rem;
  }

  .news li {
    display: flex;
  }

  .news li > div:first-child {
    flex: 1;
  }

  #twitter {
    width: 70%;
    margin: 0 auto;
  }

  label.hamburger {
    margin-right: 2rem;
  }

  .equip-panel {
    width: 40%;
  }
}

.back {
  display: block;
  text-align: right;
}