@charset "utf-8";
/*********************************
HOBBY ROUND 33 2025.11.03 STYLE-INDEX
last update - 2025.07.21
*********************************/ 
.main {

}
/*-------------------------------
 COMMON PARTS
---------------------------------*/
.cont-title h2 {
  font-family: 'M PLUS 1p', sans-serif;
  font-size: calc(var(--fs) * 5);
  text-align: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
  padding: 2.4rem 0;
  @media (max-width: 768px) {
    font-size: calc(var(--fs) * 4);
  }
  &:before {
    font-size: 2.2em;
    white-space: nowrap;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: transparent;
    -webkit-text-stroke: 1px rgb(255 255 255 / 40%);
    text-stroke: 1px rgb(255 255 255 / 40%);
    pointer-events: none;
    z-index: -1;
  }
}
@scope (.ticket) {
  .cont-title h2 {
    &:before {
      -webkit-text-stroke: 1px rgb(255 255 255 / 60%);
      text-stroke: 1px rgb(255 255 255 / 60%);
    }
  }
}
/*-------------------------------
 MAIN IMAGE
---------------------------------*/
.main {
  position: relative;
}
.main_vis {
  display: grid;
  position: absolute;
  inset: 0;
  img {
    grid-area: 1/1;
    &:first-of-type {
      width: min(55% , 600px);
      margin: 20px auto 0;
      @media (max-width: 630px) {
        width: 70%;
      }
    }
    &:last-of-type {
      width: min(95% , 660px);
      margin: 55% auto 0;
      filter: drop-shadow(2px 4px 6px rgb(255 255 255));
      @media (max-width: 630px) {
        margin: 80% auto 0;
      }
    }
  }
}
/*-------------------------------
 TICKET CONTENTS
---------------------------------*/
.ticket {
  container-type: inline-size;
  max-width: 96rem;
  padding: calc(var(--rs) * 6) 2vw;
  background: #F8CE3D;
}
.ticket-title {
  color: #333;
  &:before {
    content: "TICKET";
    @media (max-width: 768px) {
      
    }
  }
}
.ticket-lead {
  font-size: calc(var(--fs) * 2.2);
  font-weight: bold;
  inline-size: fit-content;
  margin-inline: auto;
}
/* チケット情報 */
.ticket-cards-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
  gap: calc(var(--fs) * 2);
  padding: 2.5rem 0 1rem;
}
/* チケット情報 */
.ticket-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  &:hover {
    box-shadow: 0 4px 4px rgb(0 0 0 / 15%);
    transform: translateY(-5px);
  }
}
.pre-sale-card {
  background-color: #fff;
  .ticket-info {
    background-color: var(--c-main);
    color: #fff;
  }
  .price-value {
    font-size: calc(var(--fs) * 2.4);
    color: var(--c-main);
  }
}
.at-door-card {
  background-color: #fefefe;
  .ticket-info {
    background-color: #E6F2FF;
    color: #444;
  }
  .price-value {

  }
}
.ticket-info {
  font-size: calc(var(--fs) * 2);
  margin: 0 0 2rem 0;
  padding: 2rem 1.5rem 1.6rem;
  letter-spacing: 0.5px;
  text-align: center;
  background-color: #d8eaff;
  border-radius: 12px 12px 0 0;
  line-height: 1;
}
.info-group {
  margin: 0 1.5rem 1.5rem;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 1rem;
  display: grid;
  grid-template-columns: max-content 1fr;
  justify-items: flex-start;
  align-items: center;
  gap: 1em;
  &:last-of-type {
    border-bottom: none;
  }
}
.info-label {
  font-weight: bold;
  color: #888;
  text-transform: uppercase;
  text-align-last: justify;
  width: 4em;
}
.info-value {
  color: #333;
  line-height: 1.4;
}
.price-value {
  font-weight: bold;
}
@media (max-width: 768px) {
  .main-header {
      border-radius: 0;
  }
  .ticket-cards-wrapper {
    padding: 1.5rem 0rem;
    gap: 1.5rem;
  }
  .ticket-card {
    padding: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transform: none;
    &:hover {

    }
  }
  .pre-sale-card {
    background-image: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  }
.ticket-info {
    text-align: left;
    margin: 0;
  }
  .price-value {
    
  }
  .info-group {
    padding: 1.6rem 1.5rem 1rem;
    margin: 0;
  }
}
/* チケット注意事項 */
.ticket-note {
  font-size: calc(var(--fs) * 1.4);
  padding: 2rem 0 3rem;
  li {
    text-indent: -1em;
    padding: 0 0 0.5rem 1em;
    line-height: 1.3;
  }
}
/*-------------------------------
 INFO CONTENTS
---------------------------------*/
.information {
  container-type: inline-size;
  max-width: 96rem;
  padding: calc(var(--rs) * 6) 2vw;
  background: var(--c-main);
}
.info-title {
  color: #fff;
  &:before {
    content: "INFORMATION";
    @media (max-width: 768px) {
      content: "INFO";
    }
  }
}
.date-outline {
  background: #fff;
  padding: calc(var(--rs) * 1) calc(var(--rs) * 2) calc(var(--rs) * 2);
  @media (max-width: 767px) {
    
  }
}
.date-tbl {
  font-size: calc(var(--fs) * 1.8);
  width: 100%;
  tr {
    display: block grid;
    grid-template-columns: max-content 1fr;
    gap: 2cqw;
    &:has(iframe) {
      display: revert;
    }
    &:nth-of-type(-n + 3),
    &:nth-last-of-type(1) {
      border-bottom: 1px solid #e0e0e0;
    }
    @media (max-width: 767px) {
      gap: 0;
      grid-template-columns: 1fr;
    }
  }
  th {
    padding: 1.5rem 0;
    @media (max-width: 767px) {
      padding: 1.5rem 0 0;
    }
  }  
  td {
    padding: 1.5rem 0;
    &:has(iframe) {
      padding: 0 0 0;
    }
    iframe {
      block-size: revert-layer;
      max-height: 50rem;
      @media (max-width: 768px) {
        max-height: 30rem;
      }
    }
    @media (max-width: 767px) {
      padding: 0 0 1.5rem;
    }
  }
}
.access-trans {
  padding: 0.5rem 0 0;
  div:not(:last-of-type) {
    padding-bottom: 0.5em;
  }
  dt {
    position: relative;
    &:before {
      content: "●";
      color: var(--c-main);
    }
  }
}
/* join */
.join-price {
  display: flex;
  align-items: flex-end;
  li {
    &:first-of-type {
      font-size: 110%;
      font-weight: bold;
      color: var(--c-main);
    } 
  }
  @media (max-width: 768px) {
    align-items: flex-start;
    flex-direction: column;
  }
}
/*-------------------------------
 NEWS CONTENTS
---------------------------------*/
.news {
  container-type: inline-size;
  max-width: 96rem;
  padding: calc(var(--rs) * 6) 2vw;
  background: var(--c-blue);
}
.news-title {
  color: #fff;
  &:before {
    content: "NEWS";
  }
}
.news-wrap {
  color: #fff;
  display: grid;
  grid-template-columns: max-content 1fr;
  li {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    column-gap: 2cqw;
    padding-block: 1rem;
    overflow: hidden;
    opacity: 1;
    max-height: 500px;
    transition: max-height 0.5s linear, opacity 0.5s linear, padding 0.5s linear; 
    &.hidden-item {
      max-height: 0;
      opacity: 0;
      padding-block: 0;
      border-block-start: none !important;
    }
    &.visually-hidden {
      display: none;
    }
    &:not(:first-of-type) {
      border-block-start: 1px solid #554d90;
    }
    time {
      color: var(--c-blue);
      text-align: center;
      text-wrap: balance;
      background: #fff;
      padding-inline: 2rem;
      align-self: start;
    }
  }
}
.more-btn {
  color: var(--c-link--b);
  display: block;
  margin-block-start: 2rem;
  margin-inline-start: auto;
  margin-inline-end: calc(var(--rs) * 1);
  padding: 0 1.5rem 0 0;
  position: relative;
  @media (any-hover: hover) {
    &:hover {
      color: var(--c-link--b-hover);
    }
  }
  &::after {
    font-size: 1em;
    line-height: 1;
    content: '';
    position: absolute;
    right: calc(0rem - calc(var(--rs) * 1));
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
  }
  &.more-btn-expand::after {
    content: '▼';
  }
  &.more-btn-collapse::after {
    content: '▲';
  }
}
/*-------------------------------
 EVENT CONTENTS
---------------------------------*/
.event {
  container-type: inline-size;
  max-width: 96rem;
  padding: calc(var(--rs) * 6) 2vw calc(var(--rs) * 10);
  background: var(--c-main);
}
.event-title {
  color: #fff;
  &:before {
    content: "EVENT LIST";
    @media (max-width: 768px) {
      content: "EVENT";
    }
  }
}
.event_list {
  --_multiples: 6;
  --_column: 1;
  display: grid;
  grid-template-columns: repeat(var(--_multiples), 1fr);
  gap: calc(var(--rs) * 2) calc(var(--rs) * 2);
  padding: 1rem 0 calc(var(--rs) * 6);
  & > * {
    grid-column: span calc(var(--_multiples) / var(--_column));
  }
  & > :nth-child(-n + 3) {
    --_column: 1;
  }
  /*;
  & > :nth-child(n + 4) {
    --_column: 3;
  }
  */
  & > :nth-child(n + 4) {
    --_column: 3;
  }
  @container (640px <= inline-size) {

  }
  @media (max-width: 768px) {
    & > :nth-child(n + 4) {
      --_column: 2;
    }
  }
  figure figcaption {
    font-size: calc(var(--fs) * 1.8);
    font-weight: bold;
    color: #fff;
    margin-block-start: calc(var(--rs) * 0.5);
    position: relative;
    &:before {
      content: "●";
    }
    &:hover {
      color: var(--c-link-hover);
    }
  }
}
.event_label:has(.event_outline) {
  background: #fff;
  display: grid;
  grid-template-columns: minmax(auto, 360px) 1fr;
  column-gap: 2cqw;
  @media (max-width: 767px) {
    grid-template-columns: 1fr;
  }
}
.event_outline {
  display: flex;
  flex-direction: column;
  padding: calc(var(--rs) * 2) ;
  padding-left: 0;
  h3 {
    font-size: calc(var(--fs) * 2.2);
    position: relative;
    &:before {
      content: "●";
    }
  }
  p {
    padding-bottom: 1rem;
  }
  dl {
    font-size: calc(var(--fs) * 1.4);
    padding: calc(var(--rs) * 1);
    margin: 0 0 calc(var(--rs) * 1.5) 0;
    background: #f8f8f8;
    dt {
      font-weight: bold;
      padding: 0 0 0.5rem 0;
    }
    dd:not(:last-of-type) {
      border-bottom: 0.1rem dotted #ebebeb;
      padding-bottom: 0.3rem;
    }
  }
  button {
    margin-block-start: auto;
    margin-inline-start: auto;
    margin-inline-end: 0;
  }
  button a {
    font-size: calc(var(--fs) * 1.4);
    color: #fff;
    background: var(--c-link);
    border-radius: 0.5rem;
    position: relative;
    padding: 0.3rem 2em 0;
    &:hover {
      background: var(--c-link-hover);
    }
    &:after {
      content: "";
      clip-path: var(--triangle--right);
      width: calc(var(--fs) * 0.5);
      height: calc(var(--fs) * 0.9);
      inset-block: 0;
      inset-inline-end: calc(var(--fs) * 1);
      margin-block: auto;
      background: #fff;
      position: absolute;
    }
  }
  @media (max-width: 768px) {
    padding-left: calc(var(--rs) * 1);
    figure, .event_outline {
      grid-column: 1 / -1; 
    }
  }
}
.event_label.event_label-not a {
  pointer-events: none;
}