@charset "utf-8";
/* Sendai supplied feedback, 2026-10-15. */
/* Keep navigation rules continuous above every tile, including fractional widths. */
#gridNav {
  isolation: isolate;
}
#gridNav::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  border: 1px solid var(--sendai-yellow);
  background:
    linear-gradient(var(--sendai-yellow), var(--sendai-yellow)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--sendai-yellow), var(--sendai-yellow)) 0 25% / 100% 1px no-repeat,
    linear-gradient(var(--sendai-yellow), var(--sendai-yellow)) 0 50% / 100% 1px no-repeat,
    linear-gradient(var(--sendai-yellow), var(--sendai-yellow)) 0 75% / 100% 1px no-repeat;
}
#gridNav .sidebar-item-wrapper {
  border: 0;
}
@media (min-width: 601px) {
  #gridNav::after {
    background:
      linear-gradient(var(--sendai-yellow), var(--sendai-yellow)) 25% 0 / 1px 100% no-repeat,
      linear-gradient(var(--sendai-yellow), var(--sendai-yellow)) 50% 0 / 1px 100% no-repeat,
      linear-gradient(var(--sendai-yellow), var(--sendai-yellow)) 75% 0 / 1px 100% no-repeat,
      linear-gradient(var(--sendai-yellow), var(--sendai-yellow)) 0 50% / 100% 1px no-repeat;
  }
}
@media (min-width: 1033px) {
  #gridNav {
    padding: 0;
    top: 140px !important;
    height: calc(100vh - 140px);
    height: calc(100dvh - 140px);
  }
  #gridNav > .row {
    margin: 0;
    width: 100%;
    border: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  /* The supplied 480 x 880 illustration contains 42 px white side margins.
     Cover the visible 396 px artwork; keep the source canvas and proportions. */
  .page .sticky-top {
    padding: 0 !important;
    overflow: hidden;
  }
  .page .bg-holder2::after {
    top: 0;
    height: 100%;
    background-size: max(121.212122%, calc((100vh - 140px) * .5454545455)) auto;
    background-size: max(121.212122%, calc((100dvh - 140px) * .5454545455)) auto;
    background-position: center 57%;
  }
}

/*
 * Supplied HISTORY artwork: 287.397 x 449.691, corner radius 33.429,
 * 1 px outline. Preserve the existing 372:584 card and its content box;
 * an inset shadow draws the outline without changing cqw font sizing.
 */
#history .history-card {
  clip-path: none;
  border: 0;
  border-radius: 11.631645% / 7.409199%;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--history-card-color);
}
#history .history-card::before {
  display: none;
}

/* Supplied CONTACT button: radius 10 px on both desktop and mobile. */
#contact .contact_form button {
  clip-path: none;
  border-radius: 10px;
}

/* Restore the supplied 2027 artwork shapes without altering image pixels.
   Shared body/type sizes remain in force. Native artwork references:
   ABOUT/SPONSOR 289.819 x 37.968; ticket/FAQ bands 840 x 75;
   vote photo selection 936 x 622 inside its retained 1028 x 343 canvas. */

.about_info dt,
#sponsor h3 {
  width: 12.0758em;
  min-width: 0;
  max-width: 100%;
  padding: .2em .5em .3em;
  transform: none;
  border-radius: 0;
}
.about_info dt p,
#sponsor h3 span {
  transform: none;
}

/* The original bands are rectangles with two small L-shaped accents. */
.ticket_info > dl > dd dt,
#faq .faq_list dt {
  --sendai-band-corner: #fac03d;
  position: relative;
  width: 100%;
  padding: .6875em 1.125em .65625em;
  transform: none;
  border-radius: 0;
}
.ticket_info > dl > dd dt div,
#faq .faq_list dt p {
  position: relative;
  z-index: 1;
  transform: none;
}
.ticket_info > dl > dd dt::before,
.ticket_info > dl > dd dt::after,
#faq .faq_list dt::before,
#faq .faq_list dt::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: 1em;
  height: 1em;
  pointer-events: none;
}
.ticket_info > dl > dd dt::before,
#faq .faq_list dt::before {
  top: 0;
  left: 0;
  border-top: .25em solid var(--sendai-band-corner);
  border-left: .25em solid var(--sendai-band-corner);
}
.ticket_info > dl > dd dt::after,
#faq .faq_list dt::after {
  right: 0;
  bottom: 0;
  border-right: .25em solid var(--sendai-band-corner);
  border-bottom: .25em solid var(--sendai-band-corner);
}
#faq .faq_list dt {
  text-align: left;
}
#faq .faq_list dl:nth-of-type(3) dt {
  --sendai-band-corner: #e9b800;
}

/* The preliminary explanation is one rounded card with a patterned upper
   edge, a two-stage diagram and a full-width, pale caution area. */
#ticket .yosen_stage_about {
  --sendai-ticket-panel-padding: clamp(16px, 3vw, 58px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(34px, 5.3vw, 102px) var(--sendai-ticket-panel-padding) 0;
  border-radius: clamp(14px, 3vw, 42px);
  border-width: 1px;
  background: #fff;
}
#ticket .yosen_stage_about::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 840 / 310;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='840' height='310' viewBox='0 0 840 310'%3E%3Cpath d='M0 45H27V76H65V137H0Z' fill='%23f7c99f' fill-opacity='.75'/%3E%3Cpath d='M50 0V97H105V37H173V0' fill='none' stroke='%23f7b98c' stroke-width='6'/%3E%3Cpath d='M0 166H88V208H50V237H0' fill='none' stroke='%23f29300' stroke-width='6'/%3E%3Cpath d='M682 0V55H767V0' fill='none' stroke='%23e9b800' stroke-width='6'/%3E%3Cpath d='M840 115H791V170H743V229H840' fill='none' stroke='%23f6b689' stroke-width='6'/%3E%3Cpath d='M840 199H783V256H811V289H840' fill='%23f7c99f' fill-opacity='.75'/%3E%3C/svg%3E") center top / 100% auto no-repeat;
}
#ticket .yosen_stage_about h3.yosen_stage_txt {
  margin-top: 0;
  margin-bottom: 1.4em;
  width: 100%;
  max-width: none;
  color: var(--sendai-orange, #ec6700);
}
#ticket .yosen_stage_intro {
  position: relative;
  font-weight: 700;
}
#ticket .yosen_stage_intro em {
  color: var(--sendai-orange, #ec6700);
  font-style: normal;
}
#ticket .yosen_stage_flow {
  position: relative;
  width: 75%;
  max-width: 480px;
  margin: 1.8em auto 0;
}
#ticket .yosen_stage_flow_step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 77.08333%;
  padding: .45em .25em .5em;
  color: #fff;
  line-height: 1.15;
  border-radius: .4em;
}
#ticket .yosen_stage_flow_step--preliminary {
  background: var(--sendai-amber, #f29300);
}
#ticket .yosen_stage_flow_step--final {
  background: var(--sendai-orange, #ec6700);
}
#ticket .yosen_stage_flow_step span {
  white-space: nowrap;
}
#ticket .yosen_stage_flow_step strong {
  font-family: "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 1.5em;
  line-height: 1.1;
}
#ticket .yosen_stage_flow_arrow {
  display: block;
  width: 9%;
  height: 1.5em;
  margin-left: 34.04167%;
  background: var(--sendai-orange, #ec6700);
  clip-path: polygon(0 30%, 100% 30%, 50% 75%);
}
#ticket .yosen_stage_flow_result {
  width: 100%;
  padding: .75em .25em;
  color: #fff;
  line-height: 1.3;
  background: var(--sendai-orange, #ec6700) url(/sendai/assets2026wtr/img/head_bg.png?v=2027summer-official-20261015) center / cover no-repeat;
}
#ticket .yosen_stage_flow_selection {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 14.58333%;
  height: calc(100% - 3.2em);
  min-height: 65%;
  padding: .65em .2em 1.2em;
  color: var(--sendai-orange, #ec6700);
  line-height: 1.1;
  writing-mode: vertical-rl;
  background: var(--sendai-peach, #fbe1cc);
  clip-path: polygon(15% 0, 85% 0, 85% 84%, 100% 84%, 50% 100%, 0 84%, 15% 84%);
}
#ticket .yosen_stage_flow_selection span {
  font-size: .7em;
  white-space: nowrap;
}
#ticket .yosen_stage_caution {
  position: relative;
  margin: 2.2em calc(-1 * var(--sendai-ticket-panel-padding)) 0;
  padding: 2.5em .5em 1.5em;
  color: var(--sendai-orange, #ec6700);
  background: #fdf0e5;
  line-height: 1.55;
}
#ticket .yosen_stage_caution::before {
  content: "";
  position: absolute;
  top: -.8em;
  left: 15.5%;
  width: 14.5%;
  aspect-ratio: 72 / 64;
  background: url(/sendai/assets2026wtr/img/ticket/caution.png?v=2027summer-official-20261015) center / contain no-repeat;
  pointer-events: none;
}
#ticket .yosen_stage_caution p + p {
  margin-top: .65em;
}

/* Existing vote backgrounds already carry rounded corners. Remove the old
   octagonal masks; the price strip is a straight, inset rectangle. */
#vote .special_vote_wrap,
#vote .special_vote_box {
  clip-path: none;
  border-radius: clamp(14px, 3vw, 42px);
  overflow: hidden;
}
#vote .special_vote_box dt,
#vote .special_vote_box dt div {
  transform: none;
}
#vote .special_vote_box dt {
  width: 100%;
  border-radius: 0;
}

/* Retain the image's exact pixels while removing its transparent letterbox
   from the layout. The native illustration region is 936 x 622. */
#vote .vote_img {
  position: relative;
  width: 100%;
  max-width: 936px;
  aspect-ratio: 936 / 622;
  overflow: hidden;
}
#vote .vote_img img {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  transform: translateX(-50%);
}

.ticket_info .yosen_stage_note { text-wrap: balance; }

/* Source AI text: 32 px with 56.427 px leading on an 840 px card. */
#ticket .yosen_stage { container-type: inline-size; }
#ticket .yosen_stage_intro {
  font-size: 3.809524cqw;
  line-height: 1.763344;
}
