@charset "utf-8";

/* =============================================
	students event
============================================= */

/* loading */
.loading-screen{
  position:fixed;
  top:0;
  left:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  background:#fff;
}
.loader,
.loader::after {
  width: 8em;
  height: 8em;
  border-radius: 50%;
}
.loader {
  position: relative;
  margin: 60px auto;
  font-size: 10px;
  text-indent: -9999em;
  border-top: 1.1em solid rgb(192 192 192 / 20%);
  border-right: 1.1em solid rgb(192 192 192 / 20%);
  border-bottom: 1.1em solid rgb(192 192 192 / 20%);
  border-left: 1.1em solid #c0c0c0;
  transform: translateZ(0);
  animation: load8 1.1s infinite linear;
}
@keyframes load8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* イベント一覧 */
.event-index__list.event-list{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}
.event-index__list.event-list a{
  margin: 0;
}
.event-index__list li a{
  position: relative;
  flex-direction: row;
  margin: 0 0 15px;
}
.event-index__list li a > p{
  margin: 0;
}
.event-list li {
  width: 100%;
}
.event-list li a p:first-child{
  text-align: center;
}
.event-list li a h2{
  text-align: left;
}

/* アーカイブ */
#event-list.archive{
  display: block;
}
#event-list.archive li {
  margin: 0 0 15px;
}
#event-list.archive a > p:first-child{
  display: none;
}
#event-list.archive a > div{
  padding: 20px 15px 10px;
}
#event-list{
  opacity: 1;
}
#event-list.change{
  opacity: 0;
  animation: fade-change-number 0.5s forwards
}
@keyframes fade-change-number{
  0%{
  opacity: 0;
  }
  100%{
  opacity: 1.0;
  }
}
.sys-content__main p,
.sys-content__main li{
  font-size: 1.4rem;
}
.event-nav{
  display: flex;
  gap: 15px;
  justify-content: center;
  margin: 30px 0;
}
.event-nav:first-child{
  margin-top: 0;
}
.open-event__index a{
  display: inline-block;
  padding: 10px 0;
  font-size: 1.6rem;
}
.event-nav__list{
  display: flex;
  gap: 15px;
}
.event-nav__list a{
  display: inline-block;
  font-size: 1.4rem;
  color: #525252;
  border-bottom: 1px solid #c7c7c7;
  transition: opacity 0.2s ease;
}
.event-nav__list .current a{
  font-weight: bold;
  color: var(--ict-red);
  pointer-events: none;
  border-bottom: 1px solid var(--ict-red);
}
.event-nav__list a:hover{
  border-bottom: 1px solid #ccc;
  opacity: 0.7;
}

/* ===========================================
	MediaQueries
=========================================== */

/* スマホ----------------------------- */
@media screen and (width <= 767px){
  .event-list li a,
  .solution-box a{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .sys-content__main p,
  .sys-content__main li{
    font-size: 1.4rem;
  }

  /* イベント一覧 */
  .event-list li{
    width: auto;
    padding: 0;
    margin: 0;
  }
  .event-index__list.event-list{
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

/* PC----------------------------- */
@media screen and (width >= 768px){
 /* イベント一覧 */
  .event-index__list.event-list a{
   display: grid;
   grid-template-columns: minmax(150px, 330px) 1fr;
    padding: 20px;
  }
  .event-list li a p:first-child{
    grid-row: 1 / 4;
    grid-column: 1 / 2;
    text-align: center;
  }
  .event-list li a > div{
    grid-row: 2 / 3;
    grid-column: 2 / 3;
  }
  .event-index__list.event-list li a .event-list__link{
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    margin-right: 0;
    margin-bottom: 0;
  }
  .event-list li a .event-list__link{
    grid-row: 3 / 4;
    grid-column: 2 / 3;
  }
  .event-list li a > div{
    padding: 0 20px;
  }
  .event-list li a > p{
    padding: 0;
    margin: 0;
  }
  .event-index__list.event-list li a > div{
    padding: 20px;
  }

  /* アーカイブ */
  #event-list.archive a{
    display: flex;
    padding: 30px;
  }
  #event-list.archive a > div{
    padding: 0;
  }
  #event-list.archive .event-outline div dt{
    font-size: 1.5rem;
  }
  #event-list.archive .event-outline div dd{
    font-size: 1.5rem;
  }
  .event-nav{
    display: flex;
    gap: 15px;
    justify-content: start;
    margin: 50px 0;
  }
  .event-nav:first-child{
    margin-top: 0;
  }
  .event-nav__list a{
    display: inline-block;
    font-size: 1.5rem;
  }
}