@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  font-family: "futura-pt", "zen-kaku-gothic-new", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-feature-settings: "palt" 1;
}

body {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0;
  font-size: 1.5rem;
  color: #fff;
  background-color: #000;
  background-image: url(../PNG/bg-rect.png);
  background-repeat: repeat;
  background-size: 13px 13px;
  background-position: calc(50% + 6.5px) calc(50% + 6.5px);
  overflow: hidden auto;
}
@media screen and (min-width: 769px) {
  body {
    animation: body-bg-anim-h 3s linear infinite normal;
  }
}
@media screen and (max-width: 768px) {
  body {
    animation: body-bg-anim-v 3s linear infinite normal;
  }
}

@keyframes body-bg-anim-h {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -13px 0;
  }
}
@keyframes body-bg-anim-v {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 13px 13px;
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: auto;
  font-size: 5rem;
  font-family: "futura-pt", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.g_header {
  position: fixed;
  top: calc(clamp(3rem, 2.5vw, 48px) * 1.1);
  left: calc(clamp(3rem, 2.5vw, 48px) * 1.1);
  height: calc(clamp(3rem, 2.5vw, 48px) * 2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: width 0.6s cubic-bezier(0.87, 0, 0.13, 1), height 0.6s cubic-bezier(0.87, 0, 0.13, 1), top 0.6s cubic-bezier(0.87, 0, 0.13, 1), left 0.6s cubic-bezier(0.87, 0, 0.13, 1);
  pointer-events: none;
  z-index: 100;
}
@media screen and (max-width: 768px) {
  .g_header {
    top: clamp(3rem, 2.5vw, 48px);
    left: clamp(3rem, 2.5vw, 48px);
  }
}
.g_header img {
  display: block;
  width: 90%;
  height: auto;
  margin: auto;
}
.g_header.mw-active {
  width: 8rem;
  height: 8rem;
}
.g_header.mw-active .GILogo-wrapper {
  width: 6rem;
  height: 6rem;
}
.g_header.loading-3rd {
  pointer-events: auto;
  top: calc(clamp(3rem, 2.5vw, 48px) * 1);
  left: calc(clamp(3rem, 2.5vw, 48px) * 1);
  width: calc(100vw - clamp(3rem, 2.5vw, 48px) * 2);
  height: calc(100dvh - clamp(3rem, 2.5vw, 48px) * 2);
}
.g_header.loading-3rd.loading-2nd {
  opacity: 1;
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.g_header.loading-3rd.loading-2nd.loading-1st {
  opacity: 0;
}

.GILogo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(clamp(3rem, 2.5vw, 48px) * 1.9);
  height: calc(clamp(3rem, 2.5vw, 48px) * 1.9);
  -o-object-fit: contain;
     object-fit: contain;
  transition: width 0.6s cubic-bezier(0.87, 0, 0.13, 1), height 0.6s cubic-bezier(0.87, 0, 0.13, 1);
  pointer-events: auto;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .GILogo-wrapper {
    width: calc(clamp(3rem, 2.5vw, 48px) * 2);
    height: calc(clamp(3rem, 2.5vw, 48px) * 2);
  }
}
.GILogo-wrapper.loading-3rd {
  width: 100%;
  height: 5rem;
  pointer-events: none;
  cursor: none;
}
.GILogo-wrapper:active::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: -1;
}

.GILogo-wrapper:hover .GILogo,
.GILogo-wrapper.active .GILogo {
  -webkit-clip-path: path("M50,0 h0 A50,50 0 0,1 50,100 h0 A50,50 0 0,1 50,0 h0 Z");
          clip-path: path("M50,0 h0 A50,50 0 0,1 50,100 h0 A50,50 0 0,1 50,0 h0 Z");
  transition: -webkit-clip-path 0.6s cubic-bezier(0.87, 0, 0.13, 1);
  transition: clip-path 0.6s cubic-bezier(0.87, 0, 0.13, 1);
  transition: clip-path 0.6s cubic-bezier(0.87, 0, 0.13, 1), -webkit-clip-path 0.6s cubic-bezier(0.87, 0, 0.13, 1);
}
.GILogo-wrapper:hover .GILogo-ACD-h,
.GILogo-wrapper.active .GILogo-ACD-h {
  /* clip-path: path("M24.25,0 h100 v22.75 h-100Z M0,25.75 h100 v22.75 h-100Z M0,51.5 h100 v22.75 h-100Z M0,77.25 h100 v22.75 h-100Z"); */
  -webkit-clip-path: path("M25,0 h100 v22 h-100Z M0,26 h100 v22 h-100Z M0,52 h100 v22 h-100Z M0,78 h100 v22 h-100Z");
          clip-path: path("M25,0 h100 v22 h-100Z M0,26 h100 v22 h-100Z M0,52 h100 v22 h-100Z M0,78 h100 v22 h-100Z");
}
.GILogo-wrapper:hover .GILogo-ACD-v,
.GILogo-wrapper.active .GILogo-ACD-v {
  /* clip-path: path("M0,0 h22.75 v100 h-22.75 ZM51.5,1.5 h0 a35,50 0 0,1 0,97 h0 ZM50,-1.5 h50 v103 h-50 a36.5,52.125 0 0,0 0,-103 Z"); */
  -webkit-clip-path: path("M0,0 h22 v100 h-22 ZM52,2 h0 a35,50 0 0,1 0,96 h0 ZM50,-2 h50 v104 h-50 a37,52.7 0 0,0 0,-104 Z");
          clip-path: path("M0,0 h22 v100 h-22 ZM52,2 h0 a35,50 0 0,1 0,96 h0 ZM50,-2 h50 v104 h-50 a37,52.7 0 0,0 0,-104 Z");
  background-color: #fff;
}
.GILogo-wrapper:hover .GILogo-B,
.GILogo-wrapper.active .GILogo-B {
  /* clip-path: path("M25.75,0 h22.75 v25.75 h-22.75 ZM25.75,22.75 h22.75 v28.75 h-22.75 ZM25.75,48.5 h22.75 v28.75 h-22.75 ZM25.75,74.25 h22.75 v25.75 h-22.75 Z"); */
  -webkit-clip-path: path("M26,0 h22 v26 h-22 ZM26,22 h22 v30 h-22 ZM26, 48 h22 v30 h-22 ZM26, 74 h22 v26 h-22 Z");
          clip-path: path("M26,0 h22 v26 h-22 ZM26,22 h22 v30 h-22 ZM26, 48 h22 v30 h-22 ZM26, 74 h22 v26 h-22 Z");
  background-color: #fff;
}

#next-event {
  display: flex;
  justify-content: space-around;
  padding: calc(clamp(3rem, 2.5vw, 48px) * 2) clamp(3rem, 2.5vw, 48px);
  gap: clamp(3rem, 2.5vw, 48px);
  width: 100%;
  min-height: 70dvh;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000 calc(clamp(3rem, 2.5vw, 48px) * 2) calc(100% - clamp(3rem, 2.5vw, 48px) * 2), rgba(0, 0, 0, 0) 100%);
  transition: background-image 0.3s cubic-bezier(0.87, 0, 0.13, 1);
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #next-event {
    flex-direction: column;
  }
}
#next-event .nextBanner {
  flex-shrink: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding-right: 1rem;
  padding-left: 1rem;
  font-size: 3rem;
  font-weight: 600;
  font-style: italic;
}
@media screen and (min-width: 769px) {
  #next-event .nextBanner {
    max-height: calc(100dvh - clamp(3rem, 2.5vw, 48px) * 4);
  }
}
@media screen and (max-width: 768px) {
  #next-event .nextBanner {
    width: 100%;
  }
}
#next-event .nextBanner p {
  text-align: center;
}
#next-event .next-item {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: stretch;
  gap: clamp(3rem, 2.5vw, 48px);
}
@media screen and (max-width: 1365px) {
  #next-event .next-item {
    flex-direction: column;
  }
}
#next-event .next-item img {
  max-width: calc(70dvw - clamp(3rem, 2.5vw, 48px) * 3);
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (max-width: 768px) {
  #next-event .next-item img {
    width: calc(100dvw - clamp(3rem, 2.5vw, 48px) * 2);
    max-width: unset;
  }
}
#next-event .next-item .item-desc {
  position: relative;
  display: flex;
  flex-direction: column;
}
#next-event .next-item .item-desc .item-title {
  display: inline-block;
  font-size: 4rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
#next-event .next-item .item-desc .item-title time {
  display: block;
  font-size: 2rem;
}
#next-event .next-item .item-desc .item-title time span {
  display: inline-block;
  white-space: nowrap;
}
#next-event .next-item .item-desc .item-title time .next-date {
  margin-right: 0.5rem;
  padding: 0 0.5rem;
  font-size: 3rem;
  color: #000;
  background-color: #fff;
  transform: translateY(-0.9rem);
}
#next-event .next-item .item-desc p {
  text-align: right;
}
#next-event .next-item .item-desc p span {
  font-weight: 600;
  margin-right: 1rem;
  padding: 0 0.5rem;
  color: #000;
  background-color: #fff;
}
#next-event .next-item .item-desc p.item-big {
  font-size: 3rem;
}
#next-event .next-item .item-desc p.item-big span {
  display: block;
  width: 6.5rem;
  margin: 0.5rem 0;
  margin-right: 0;
  margin-left: auto;
  padding: 0.5rem 1rem;
  font-size: 2rem;
}
#next-event .next-item .item-desc p:last-child {
  margin-bottom: 0;
}
#next-event .next-item .item-desc .SNS {
  position: absolute;
  display: inline-block;
  left: 1rem;
  bottom: 1rem;
  width: 5rem;
  text-align: center;
  font-size: 3rem;
  color: #000;
  background-image: url(../items/X.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

#grid {
  width: 100%;
  max-width: 1920px;
  margin: 0;
  padding: clamp(3rem, 2.5vw, 48px);
  display: grid;
  grid-template-columns: repeat(5, calc((100% - clamp(3rem, 2.5vw, 48px) * 4) / 5));
  grid-template-rows: calc(244 * min(100vw - 18px, 1920px) / 1920) calc(102 * min(100vw - 18px, 1920px) / 1920) calc(176 * min(100vw - 18px, 1920px) / 1920) calc(212 * min(100vw - 18px, 1920px) / 1920) calc(66 * min(100vw - 18px, 1920px) / 1920) calc(23 * min(100vw - 18px, 1920px) / 1920) calc(234 * min(100vw - 18px, 1920px) / 1920) calc(109 * min(100vw - 18px, 1920px) / 1920) calc(462 * min(100vw - 18px, 1920px) / 1920) calc(44 * min(100vw - 18px, 1920px) / 1920) calc(234 * min(100vw - 18px, 1920px) / 1920) calc(174 * min(100vw - 18px, 1920px) / 1920) calc(240 * min(100vw - 18px, 1920px) / 1920) calc(191 * min(100vw - 18px, 1920px) / 1920) calc(222 * min(100vw - 18px, 1920px) / 1920) calc(192 * min(100vw - 18px, 1920px) / 1920) calc(234 * min(100vw - 18px, 1920px) / 1920) calc(180 * min(100vw - 18px, 1920px) / 1920) calc(242 * min(100vw - 18px, 1920px) / 1920) calc(5 * min(100vw - 18px, 1920px) / 1920) calc(156 * min(100vw - 18px, 1920px) / 1920) calc(253 * min(100vw - 18px, 1920px) / 1920) calc(408 * min(100vw - 18px, 1920px) / 1920) calc(200 * min(100vw - 18px, 1920px) / 1920);
  gap: clamp(3rem, 2.5vw, 48px);
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #grid {
    display: flex;
    flex-direction: column;
    height: unset;
    margin-top: calc(clamp(3rem, 2.5vw, 48px) * 3);
  }
}

.item {
  position: relative;
  height: -moz-fit-content;
  height: fit-content;
  background-color: #000;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1333333333);
  font-size: 0;
  overflow: hidden;
  cursor: pointer;
}
.item .item-title {
  display: block;
  text-align: right;
  font-size: 2rem;
  font-weight: 500;
  padding-top: 0.8rem;
  padding-right: 1rem;
  padding-bottom: 0.8rem;
}
.item .item-title time {
  display: block;
  font-size: 1.4rem;
}
@media screen and (min-width: 769px) {
  .item .item-title {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding-right: 1rem;
    font-size: 3rem;
    background-color: rgba(34, 34, 34, 0.7333333333);
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .item .item-title.s {
    font-size: 2rem;
  }
}
@media screen and (min-width: 1536px) {
  .item .item-title {
    font-size: 3vw;
  }
  .item .item-title.s {
    font-size: 2vw;
  }
  .item .item-title time {
    font-size: 1vw;
  }
}
.item video,
.item img {
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.item:hover:not(.mw-active-content) .item-title {
  opacity: 1;
}
@media screen and (min-width: 769px) {
  .item:hover:not(.mw-active-content) video,
  .item:hover:not(.mw-active-content) img {
    transform: scale(1.05);
  }
}
.item.confirm::after {
  content: "確認後SEDOSounderへ連絡";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 0;
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2rem;
  white-space: nowrap;
  background-color: rgba(78, 0, 0, 0.8);
  z-index: 10;
  animation: confirm 2s cubic-bezier(0.87, 0, 0.13, 1) 0s infinite normal;
  overflow: hidden;
}
.item.mw-active-content.confirm::after {
  content: none;
}
@keyframes confirm {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  40% {
    opacity: 1;
    left: 0;
    width: 100%;
  }
  60% {
    opacity: 1;
    left: 0;
    width: 100%;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.bg {
  position: relative;
  top: calc(0px - clamp(3rem, 2.5vw, 48px) * 2);
  bottom: calc(0px - clamp(3rem, 2.5vw, 48px) * 2);
  left: calc(0px - clamp(3rem, 2.5vw, 48px) * 2);
  right: calc(0px - clamp(3rem, 2.5vw, 48px) * 2);
  display: flex;
  align-items: center;
  width: calc(100% + clamp(3rem, 2.5vw, 48px) * 4);
  height: calc(100% + clamp(3rem, 2.5vw, 48px) * 4);
  z-index: -1;
  mix-blend-mode: screen;
  overflow: hidden;
}
.bg video,
.bg img {
  width: 100%;
  overflow: hidden;
}
.bg::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(90deg, black 1px, rgba(0, 0, 0, 0.3333333333) calc(clamp(3rem, 2.5vw, 48px) * 3) calc(100% - clamp(3rem, 2.5vw, 48px) * 3), black calc(100% - 1px)), linear-gradient(0deg, black 1px, rgba(0, 0, 0, 0.3333333333) calc(clamp(3rem, 2.5vw, 48px) * 3) calc(100% - clamp(3rem, 2.5vw, 48px) * 3), black calc(100% - 1px));
}

footer {
  margin-bottom: 1rem;
  text-align: center;
  color: #777;
  mix-blend-mode: screen;
}

.font-Light {
  font-family: "futura-pt", "zen-kaku-gothic-new", sans-serif;
  font-weight: 300;
}

.font-Medium {
  font-family: "futura-pt", "zen-kaku-gothic-new", sans-serif;
  font-weight: 500;
}

.font-Bold {
  font-family: "futura-pt", "zen-kaku-gothic-new", sans-serif;
  font-weight: 650;
}

#loadingCover {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0);
  opacity: 0;
  z-index: 30;
  transition: opacity 0.7s cubic-bezier(0.87, 0, 0.13, 1), background-color 0.7s cubic-bezier(0.87, 0, 0.13, 1);
}
#loadingCover * {
  height: 5rem;
}
#loadingCover .loading-square {
  width: 5rem;
  height: 5rem;
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.87, 0, 0.13, 1);
  z-index: 40;
}
#loadingCover .loading-title {
  position: relative;
  width: 10rem;
  height: 5rem;
  padding: 0;
  -webkit-clip-path: path("M0,0 h100 v50 h-100Z");
          clip-path: path("M0,0 h100 v50 h-100Z");
  transition: -webkit-clip-path 1s 0.6s cubic-bezier(0.87, 0, 0.13, 1);
  transition: clip-path 1s 0.6s cubic-bezier(0.87, 0, 0.13, 1);
  transition: clip-path 1s 0.6s cubic-bezier(0.87, 0, 0.13, 1), -webkit-clip-path 1s 0.6s cubic-bezier(0.87, 0, 0.13, 1);
  overflow: hidden;
}
#loadingCover .loading-title img {
  display: inline-block;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#loadingCover .loading-title.loading-3rd {
  -webkit-clip-path: path("M0,0 h100 v50 h-100Z");
          clip-path: path("M0,0 h100 v50 h-100Z");
}
#loadingCover .loading-title.loading-3rd.loading-1st {
  -webkit-clip-path: path("M0,0 h100 v0 h-100Z");
          clip-path: path("M0,0 h100 v0 h-100Z");
}
#loadingCover .loading-mesh {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../PNG/bg-rect.png");
  background-repeat: repeat;
  background-position: calc(50% + 6.5px) calc(50% + 6.5px);
  background-size: 13px 13px;
  opacity: 0;
  transition: opacity 1s 0.6s cubic-bezier(0.87, 0, 0.13, 1);
}
#loadingCover.loading {
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 1;
}
#loadingCover.loading .loading-square {
  opacity: 1;
}
#loadingCover.loading-3rd {
  opacity: 1;
  background-color: black;
}
#loadingCover.loading-3rd .loading-mesh {
  opacity: 1;
}
#loadingCover.loading-3rd .loading-square {
  opacity: 0;
}
#loadingCover.loading-3rd.loading-1st .loading-square {
  opacity: 0.3;
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .sm-hidden {
    display: none;
  }
}

.hidden {
  display: none;
}/*# sourceMappingURL=style.css.map */