/* ---- Design Tokens ---- */
*{
  max-width: 100%;
  box-sizing: border-box;
}



.booth-list{
  width: 100%;
  display: flex;
  --gap: 2em;
  --listitem-length:2;
  margin: 2em auto;
  flex-wrap: wrap;
  gap:var(--gap);

  li{
    display: flex;
    gap: 1em;
    list-style: none;
    width: calc((100% - var(--gap) * (var(--listitem-length) - 1)) / var(--listitem-length));
    background: #f9f9f9;
    padding: 1.5rem;
    border: 4px solid var(--txtcolor);
    transition:0.3s;
    border-radius: 10px;

    &:nth-child(1){--txtcolor:#6fb5a1;}
    &:nth-child(2){--txtcolor:#4dc9f2;}
    &:nth-child(3){--txtcolor:#f3abcb;}
    &:nth-child(4){--txtcolor:#b352a8;}
    &:nth-child(5){--txtcolor:#b5f2ac;}
    &:nth-child(6){--txtcolor:#7fc08f;}
    &:nth-child(7){--txtcolor:#c2a365;}
    &:nth-child(8){--txtcolor:#cd8282;}
    &:nth-child(9){--txtcolor:#3f744c;}

    .booth-img{width: 25%;flex-shrink: 0;}

        .booth-title {
          font-size: 1.4rem;
          margin-bottom: 0.5em;
        }
    
        span {
          font-size: 1rem;
          line-height: 1.3;
          display: block;
          color: gray;
          font-weight: normal;
        }
        p{
          text-align: justify;
        }
      }
    }


/* ======================================
   EVENTS
   ====================================== */
#events {
  background: var(--cream);
}

.events-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.event-item {
  width: calc((100% - 2rem) / 2);
  align-self: flex-start;

  background: var(--white);
  border-radius: 16px;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex-wrap: wrap;
  box-shadow: 0 2px 12px rgba(92, 58, 30, 0.06);
  border-left: 5px solid var(--orange);
  transition: 0.3s;
}

.event-item:hover {
  box-shadow: 0 8px 32px rgba(192, 78, 16, 0.12);
  transform: translateX(4px);
}

.event-price{
  background: var(--orange-pale);
  padding: 0.3em 0.8em;
  border-radius: 0.3em;
  color: var(--orange-deep);
  width: fit-content;
  margin-top: 0.5em;
  font-weight: bold;
}

.event-title {
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--dark);
  margin: 0.4rem 0;
}

.event-desc {
  font-family: var(--font-sub);
  font-size: 0.82rem;
  color: var(--gray);
  line-height: 1.85;
}

.event-details{
  margin: 1em 0;
  padding: 1em;
  background: var(--orange-pale);
  summary{
    width: 100%;
    cursor: pointer;
    text-align: center;
  }
}

.event-btn {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sub);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--white);
  background: linear-gradient(135deg, var(--orange), var(--orange-light));
  padding: 0.7rem 1.4rem;
  border-radius: 50px;
  text-decoration: none;
  white-space: nowrap;
  align-self: center;
  box-shadow: 0 4px 14px rgba(240, 112, 48, 0.35);
  transition: box-shadow 0.25s, transform 0.2s;
&:hover {
  box-shadow: 0 6px 20px rgba(240, 112, 48, 0.5);
  transform: scale(1.04);
}
&::after {
  content: '→';
}
}
.events-note {
  margin: 2rem auto;
  font-family: var(--font-sub);
  font-size: 1.2rem;
  color: var(--gray);
  text-align: center;
  line-height: 2;
}




/* ======================================
   RESPONSIVE
   ====================================== */

/* タブレット：ヒーローを上下積みに */
@media (max-width: 900px) {
  .section-inner{
    width: 100%;
    max-width: 95%;
  }

  .events-list{
    flex-direction: column;
    .event-item{width: 100%;}
  }

  .booth-list{
    --listitem-length:1;
    li{
      flex-direction: column;
      gap: 0.5em;
      p{
        font-size: 0.9rem;
        line-height: 1.5;
      }
    }
  }

}

@media (max-width: 600px) {

  .event-item{
    width: 100%;
  }

}