@charset "utf-8";

@import url("../../style/variables.css");/*変数定義*/
	
:root{
  --event-color:#0058ea;
}

.schedule{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:20px;
  section{
    padding:20px;
    border:1px solid var(--event-color);
    border-radius: 10px;
    position:relative;
    p{
      text-align: left;
      margin:.5em auto 0 auto;
      &:has(span){
        margin:0 auto;
        span{
          font-size: 1rem;
          margin:0 .5em 0 0;
          display:inline-block;
          padding:.1em .5em;
          background:var(--event-color);
          color:white;
          border-radius: 5px;
        }
      }
    }
    h3{
      font-size: 1.5rem;
      font-weight: 600;
      text-align: left;
      color:var(--event-color);
      margin:.3em auto 0 auto;
    }
    figure{
      position:absolute;
      top:-5px;
      right:-5px;
    }
  }
  @container (max-width: 650px) {
    grid-template-columns: repeat(1,1fr);
  }
}

#sakura{
  --event-color:#ff2482;
}

#gw{
  --event-color:#1ca664;
}

#ajisai{
  --event-color:#9254ed;
}

#natu{
  --event-color:#0075df;
}

#aki{
  --event-color:#ff250d;
}

#fuyu{
  --event-color:#f25b00;
}

#event_ph_list{
  ul{
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(min(200px,100%),1fr));
    gap:20px;
    li{
      figure{
        span{
          aspect-ratio: 4 / 3;
	        position:relative;
	        overflow: hidden;
          display:block;
          border-radius: 10px;
	        img{
		        min-width:100%;
						min-height:100%;
						object-fit: cover;
						position: absolute;
						top: 50%;
						transform: translate(-50%, -50%);
          }
        }
        figcaption{
          font-size: .9em;
          margin:.5em auto 0 auto;
          inline-size: fit-content;
          margin-inline: auto;
          text-align: left;
        }
      }
    }
  }
}