body {
  font-size: 16rem;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  min-width: 375px;
  min-height: 100svh;
  max-width: 1920px;
  position: relative;
  margin: 0 auto;
  background: #fff;
  font-optical-sizing: auto;
  background: url("../../../assets/background/bg.png");
  background-size: 100%;
  background-position: top;
  background-repeat: repeat;
  width: 100%;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

section {
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

p {
  padding: 0;
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
}

a {
  cursor: pointer;
}

li {
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 0em;
  padding: 0;
}

.titan-one-regular {
  font-family: "Titan One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.long-anchor-link,
.rounded-navy-btn,
.diagonal-button {
  transition: transform 0.2s ease;
  transform-origin: center;
}

.long-anchor-link:hover,
.rounded-navy-btn:hover,
.diagonal-button:hover {
  transform: scale(1.05); /* Increases size by 30% */
  z-index: 10; /* Ensures button stays on top when scaled */
}

.white-border-layout {
  border-radius: 16px;
  background: var(--White, #fff);
  padding: 40px 64px;
}

.bg {
  width: 100vw;
  height: 100%;
  max-width: 1920px;
  position: absolute;
  top: 0;
  display: flex;
  pointer-events: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.bg img {
  width: 100%;
  object-fit: contain;
}

.logo-corner {
  position: absolute;
  display: flex;
  z-index: 3;
  width: 172.609px;
  height: 141px;
  flex-shrink: 0;
  aspect-ratio: 172.61/141;
  top: 20px;
  left: 24px;
}

li {
  margin-left: 1.2em;
}

.top-module-title-container {
  height: 261px;
  display: flex;
  justify-content: center;
  background-position: center;
  gap: 8px;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  flex-direction: column;
  margin: 120px 160px 0 160px;
  background-repeat: no-repeat;
}

.time-event-title {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 0 160px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 64px;
}

.gray-splash-top-module {
  position: absolute;
  height: 261px;
  z-index: 0;
}

.top-module-title {
  flex-direction: column;
  display: flex;
  gap: 8px;
  margin-top: 40px;
}

.top-module-title-undertext {
  color: #00125e;
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
  letter-spacing: 0.96px;
  z-index: 1;
}

.top-module-title-text {
  color: #00125e;
  text-align: center;
  font-size: 80px;
  font-style: normal;
  line-height: 100%; /* 80px */
  z-index: 1;
}

.information-detail {
  display: flex;
  padding: 80px 0px 0px 0px;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}

.time-event-detail {
  display: flex;
  padding: 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-top: 3px solid var(--smilefes_navy, #00125e);
  border-bottom: 3px solid var(--smilefes_navy, #00125e);
  margin-bottom: 64px;
}

.time-event-detail p {
  color: var(--smilefes_navy, #00125e);
  text-align: center;
  font-feature-settings: "palt" on;
  /* medium */
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
  line-height: 175%; /* 31.5px */
}

.information-text {
  color: var(--smilefes_navy, #00125e);
  text-align: center;
  font-feature-settings: "palt" on;

  /* medium */
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
  line-height: 175%; /* 31.5px */
}

.button-information-container {
  display: flex;
  margin: 0px 160px;
  max-width: 960px;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
}

.long-anchor-link {
  display: flex;
  padding: 16px 32px;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex: 1 0 0;
  border-radius: 16px;
  background: var(--smilefes_navy, #00125e);
}

.long-anchor-link p {
  color: #fff;
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
  line-height: 150%; /* 30px */
  letter-spacing: 1.2px;
  width: 100%;
  padding-left: 40px;
}

.long-anchor-link img {
  width: 24px;
  height: 24px;
  aspect-ratio: 1/1;
  position: relative;
  right: 0px;
}

.small-buttons-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  align-self: stretch;
  margin-top: 32px;
}

.table-detail-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.table-detail-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  margin-bottom: 40px;
}

.table-detail-title p {
  color: #00125e;
  text-align: center;
  font-feature-settings: "palt" on;

  /* h2 */
  font-family: "Noto Sans JP";
  font-size: 40px;
  font-style: normal;
  font-weight: 900;
  line-height: 150%; /* 60px */
  letter-spacing: 2.4px;
}

.table-detail-title img {
  height: 61px;
}

.table-information {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 16px;
  border: 1px solid var(--smilefes_navy, #00125e);
  margin: 0 160px;
  max-width: 960px;
  background: #fff;
}

.table-information-title {
  display: flex;
  padding: 20px 64px;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  border-radius: 16px 16px 0px 0px;

  background: var(--light_navy, #e5e7ef);
}

.table-information-detail {
  display: flex;
  padding: 0px 64px 32px;
  margin-top: 48px;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

/* 
  To prevent flex containers from shrinking when the content is short,
  we use a hidden dummy text via ::after to maintain max width.
  We avoided align-items: stretch due to layout alignment requirements.
 */
.table-information-detail::after {
  content: "これは最大幅を保つためのダミー文章です。これは最大幅を保つためのダミー文章です。これは最大幅を保つためのダミー文章です。";
  visibility: hidden;
  display: block;
  height: 0;
  overflow: hidden;
  font-size: 20px;
  line-height: inherit;
}

.center {
  text-align: center;
}

.navy-extra-large-text {
  color: var(--smilefes_navy, #00125e);
  font-feature-settings: "palt" on;

  /* xlarge */
  font-family: "Noto Sans JP";
  font-size: 32px;
  font-style: normal;
  font-weight: 900;
  line-height: 150%; /* 48px */
  /*letter-spacing: 3.2px;*/
}

.navy-large-text {
  color: var(--smilefes_navy, #00125e);
  font-feature-settings: "palt" on;

  /* large */
  font-family: "Noto Sans JP";
  font-size: 28px;
  font-style: normal;
  font-weight: 900;
  line-height: 175%; /* 49px */
}

.navy-medium-text {
  color: var(--smilefes_navy, #00125e);
  font-feature-settings: "palt" on;
  /* medium */
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
  line-height: 175%; /* 31.5px */
}

.navy-small-text {
  color: var(--smilefes_navy, #00125e);
  font-feature-settings: "palt" on;

  /* small */
  font-family: "Noto Sans JP";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 21px */
}

.navy-extra-small-text {
  color: #00125e;
  font-feature-settings: "palt" on;

  /* subtext */
  font-family: "Noto Sans JP";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 15.6px */
}

.navy-head-text {
  color: #00125e;
  font-feature-settings: "palt" on;
  /* head-medium */
  font-family: "Noto Sans JP";
  font-size: 24px;
  font-style: normal;
  font-weight: 900;
  line-height: 130%; /* 31.2px */
}

.navy-main-text {
  color: #00125e;
  font-feature-settings: "palt" on;

  /* maintext-bold */
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
  line-height: 150%; /* 24px */
}

.navy-main-medium-text {
  color: #00125e;
  font-feature-settings: "palt" on;
  /* maintext-medium */
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 170%; /* 27.2px */
}

.dot li {
  list-style-type: "* ";
  margin-left: 1em;
  margin-bottom: 0em;
}

.numbered li {
  list-style-type: decimal;
  margin-left: 1.2em; /* Slightly larger margin for numbers */
  margin-bottom: 0em;
  /* Add some padding for better number alignment */
}

.message-item {
  display: flex;
  flex-direction: column;
  width: fit-content;
  align-items: center;
}

.message-box {
  display: flex;
  padding: 14px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 8px;
  background: #e5e7ef;
  color: #00125e;
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
  line-height: 100%; /* 21px */
}

.iframe-screen {
  width: 100%;
  border-radius: 16px;
  background: #d9d9d9;
  aspect-ratio: 16 / 9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.iframe-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  object-position: center;
}

.test-text {
  color: var(--Gray-3, #828282);
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 40px;
  font-style: normal;
  font-weight: 900;
  line-height: 175%; /* 70px */
}

.rounded-navy-tag {
  display: flex;
  padding: 4px 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: var(--smilefes_navy, #00125e);
}

.rounded-navy-btn {
  border-radius: 999px;
  background: var(--smilefes_navy, #00125e);
  display: flex;
  width: 100%;
  max-width: 320px;
  height: 56px;
  padding: 0 32px;
  position: relative;
  align-items: center;
  align-self: center;
  justify-content: center;
  gap: 10px;
}

.rounded-navy-tag p {
  color: #fff;
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 16px;
  width: 100%;
  white-space: nowrap;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 20.8px */
}

.rounded-navy-btn p {
  color: #fff;
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 16px;
  width: 100%;
  padding-left: 34px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 20.8px */
}
.rounded-navy-btn img {
  width: 24px;
  height: 24px;
  aspect-ratio: 1/1;
}

.overview-container {
  border-top: 1px solid #00125e;
  border-bottom: 1px solid #00125e;
  display: flex;
  flex-direction: column;
  padding: 40px 0;
  align-items: center;
  margin-top: 40px;
  width: 100%;
  justify-content: center;
}

.venue-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  width: 100%;
}

.disabled-btn {
  background: #ccc;
  pointer-events: none;
  color: gray;
  text-decoration: none;
  cursor: default;
}

.gray-text {
  color: var(--gray, #777);
}

.scrollable-text {
  overflow-y: scroll;
  max-height: 248px;
  scrollbar-gutter: stable;
}

.scrollable-text::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 8px;
}

.scrollable-text::-webkit-scrollbar-track {
  background: #fff; /* replace with actual color */
  cursor: pointer;
}

.scrollable-text::-webkit-scrollbar-thumb {
  background: #00125e; /* replace with actual color */

  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0 0 1px #bdbdbd;
}

.gray-border-box {
  border-radius: 16px;
  border: 1px solid var(--gray, #777);
  background: #fff;
  display: flex;
  padding: 40px 64px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 960px;
  margin: 0 160px;
  background: #fff;
  margin-top: 40px;
}

.top-page {
  justify-content: center;
  align-items: center;
}

.mid-page {
  margin-top: 160px;
  margin-bottom: 176px;
}

/* for region page */
.mid-page-section {
  margin-top: 160px;
  justify-content: center;
  align-items: center;
}

.bottom-page-section {
  margin-bottom: 176px;
}

.small-btn {
  display: flex;
  padding: 4px 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: fit-content;
}

.small-btn p {
  color: var(--White, #fff);
  text-align: center;
  font-feature-settings: "palt" on;
  white-space: nowrap;
  width: fit-content;
  padding: 0;
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
  line-height: 175%; /* 31.5px */
}

.message-item-w-hr {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  border-bottom: 1px solid #00125e;
}

.message-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item-card-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-row: auto auto;
  grid-column-gap: 40px;
  grid-row-gap: 64px;
  margin-bottom: 40px;
  margin-top: 40px;
}

.item-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 0 0;
  width: 100%;
  max-width: 396px;
  align-self: stretch;
}

.item-card-img {
  width: 100%;
  max-width: 396px;
  flex-shrink: 0;
  display: flex;
  aspect-ratio: 1/1;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  background: #d9d9d9;
}

.item-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.item-card-detail {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
  margin-bottom: 24px;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
}
.item-card-name-container {
  margin-bottom: 8px;
}

.card-switcher-container {
  display: flex;

  width: 100%;
  max-width: 960px;
}

.tokyo-switcher {
  display: flex;
  padding: 8px 32px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
  border-radius: 16px 16px 0px 0px;
  border-top: 3px solid var(--dark_blue, #00a6bd);
  border-right: 3px solid var(--dark_blue, #00a6bd);
  border-left: 3px solid var(--dark_blue, #00a6bd);
  background: var(--White, #fff);
  cursor: pointer;
}

.switcher-text {
  color: var(--dark_blue, #00a6bd);
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 40px;
  font-style: normal;
  font-weight: 900;
  line-height: 150%; /* 60px */
  letter-spacing: 2.4px;
}

.osaka-text {
  color: #dae000;
}

.osaka-switcher {
  display: flex;
  padding: 8px 32px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
  border-radius: 16px 16px 0px 0px;
  background: var(--White, #fff);
  border-top: 3px solid #dae000;
  border-right: 3px solid #dae000;
  border-left: 3px solid #dae000;
  cursor: pointer;
}

.osaka-switcher.active {
  background: var(--smilefes_lime, #dae000);
  border-top: 3px solid #dae000;
  border-right: 3px solid #dae000;
  border-left: 3px solid #dae000;
}

.tokyo-switcher.active {
  background: var(--smilefes_blue, #5dc2d0);
  border-top: 3px solid var(--smilefes_blue, #5dc2d0);
  border-right: 3px solid var(--smilefes_blue, #5dc2d0);
  border-left: 3px solid var(--smilefes_blue, #5dc2d0);
}

.tokyo-switcher.active .switcher-text,
.osaka-switcher.active .switcher-text {
  color: var(--White, #fff) !important;
  text-align: center;
  font-feature-settings: "palt" on;
}

.venue-detail-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.venue-region-container {
  display: flex;
  padding: 64px 0px;
  gap: 120px;
  width: 100%;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  background: url("../../assets/overviewBG/osaka-background.png") repeat center/150%, #dae000;
}

.venue-region-container.blue {
  background: url("../../assets/overviewBG/tokyo-background.png") repeat center/150%, #5dc2d0;
}

#osaka-detail {
  display: none;
}
#tokyo-detail {
  display: none;
}

#osaka-detail.active {
  display: flex;
}

#tokyo-detail.active {
  display: flex;
}

.w-graybox-container {
  display: flex;
  flex-direction: column;
}

.border-box-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  margin: 0px 160px;
}

.border-box-item {
  display: flex;
  padding: 32px 64px;
  flex-direction: column;
  align-items: center;
  border-radius: 16px;
  border: 1px solid var(--smilefes_navy, #00125e);
  background: #fff;
  width: 100%;
  max-width: 960px;
}

.no-border {
  border: unset !important;
}

.border-box-item.small-card > *:last-child,
.video-card-detail > *:last-child,
.border-box-item > *:last-child,
.table-information-detail > *:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.venue-container > *:last-child {
  padding-bottom: 0 !important;
}
.border-box-item-title {
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}

.number-circle {
  display: flex;
  width: 80px;
  height: 80px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  aspect-ratio: 1/1;
  border-radius: 999px;
  background: var(--smilefes_navy, #00125e);
}

.number-circle p {
  color: var(--White, #fff);
  font-feature-settings: "palt" on;
  font-family: "Titan One";
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 40px */
}

.diagonal-button {
  display: flex;
  width: 100%;
  max-width: 320px;
  padding: 0 32px;
  height: 45px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: var(--smilefes_navy, #00125e);
}

.px-12 {
  padding: 0 12px;
}

.diagonal-button p {
  padding-left: 28px;
  color: #fff;
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-style: normal;
  width: 100%;
  font-weight: 500;
  line-height: 130%; /* 20.8px */
}

.diagonal-button img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}

.border-box-card-container {
  max-width: 960px;
  margin: 0 160px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-row: auto auto;
  grid-column-gap: 40px;
  grid-row-gap: 64px;
}

.small-card {
  padding: 32px 24px;
}

.full-width-button {
  max-width: unset;
}

.video-card-container,
.introduction-card-container {
  display: flex;
  margin: 0px 160px;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
  max-width: 960px;
}

.introduction-card {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 64px;
  align-self: stretch;
}

.introduction-card-img {
  width: 40%;
  max-width: 380px;
  flex-shrink: 0;
  /*aspect-ratio: 4/5;*/
  border-radius: 16px;
  /*background: #d9d9d9;*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.introduction-card-img img {
  height: 100%;
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  object-position: center;
}

.introduction-card-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
}

.copyright-text {
  color: var(--gray, #777);
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 18px */
}

.video-border-card {
  display: flex;
  padding-bottom: 32px;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  align-self: stretch;
  border-radius: 16px;
  background: #fff;
  width: 100%;
  border: 1px solid var(--smilefes_navy, #00125e);
}

.video-card-timeline-container {
  display: flex;
  flex-direction: column;
  padding: 8px 0px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  background: var(--smilefes_navy, #00125e);
  border-radius: 16px 16px 0px 0px;
}

.video-card-date {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
}

.date-border-pill :nth-child(1),
.video-card-date :nth-child(1) {
  color: #fff;
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 32px;
  font-style: normal;
  font-weight: 900;
  line-height: 130%; /* 41.6px */
}

.video-card-date :nth-child(2) {
  color: #fff;
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 22px;
  font-style: normal;
  font-weight: 900;
  line-height: 130%; /* 28.6px */
}

.date-border-pill :nth-child(2) {
  color: var(--White, #fff);
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
  padding-bottom: 8px;
  line-height: 100%; /* 18px */
}

.video-card-timeline-container p {
  color: #fff;
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 20.8px */
}

.video-card-detail {
  display: flex;
  padding: 0px 64px;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}

.video-iframe {
  width: 100%;
  max-width: 832px;
  flex-shrink: 0;
  aspect-ratio: 16/9;
  border-radius: 16px;
  background: #d9d9d9;
  margin-bottom: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-iframe iframe {
  border-radius: 16px;
}

.video-iframe img {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 16px;
}

.large-btn {
  height: 56px !important;
}

.grid-three-border-product-container,
.grid-three-border-container {
  max-width: 960px;
  margin: 0 160px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row: auto auto;
  grid-column-gap: 40px;
  grid-row-gap: 64px;
}

.product-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
}

.product-item-img {
  width: 100%;
  align-self: stretch;
  display: flex;
  aspect-ratio: 1/1;
  background: #d9d9d9;
  border-radius: 16px;
  margin-bottom: 16px;
}

.product-item-img img {
  border-radius: 16px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.product-tag-container {
  display: flex;
  align-items: center;
  align-content: flex-start;
  gap: 4px;
  align-self: stretch;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.product-tag {
  display: flex;
  padding: 4px 6px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  background: var(--dark_blue, #00a6bd);
}

.product-tag p {
  color: #fff;
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 12px */
}

.yellow {
  background: var(--dark_lime, #bac002);
}

.navy {
  background: var(--smilefes_navy, #00125e);
}

.product-price-tag-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-self: end;
  width: 100%;
  height: 100%;
  margin-bottom: 16px;
}

.product-price-tag {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  min-height: 153px;
}

.tax-span {
  color: #00125e;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 15.6px */
}

.product-info-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.product-info-item {
  display: flex;
  align-items: start;
  gap: 8px;
  align-self: stretch;
}

.navy-tag-border {
  display: flex;
  padding: 6px 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  border: 1px solid var(--smilefes_navy, #00125e);
}

.navy-tag-border p {
  white-space: nowrap;
}

.navy-tag-text {
  color: #00125e;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 15.6px */
}

.p-6 {
  padding: 6px 0;
}

.max-height {
  min-height: 7.5em;
  margin-top: 16px;
  height: 100%;
}

.timeline-table-detail {
  display: flex;
  padding: 40px 64px 40px 64px;
  align-items: flex-start;
  gap: 16px;
  box-sizing: border-box;
  align-self: stretch;
}

.timeline-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  gap: 40px;
  flex: 1 0 0;
}

.date-border-pill {
  display: flex;
  padding: 8px 40px;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  border-radius: 999px;
  background: var(--smilefes_navy, #00125e);
}

.hour-timeline-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  box-sizing: border-box;
  align-items: center;
  position: relative;
}

.hour-timeline {
  display: flex;
  height: 120px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-top: 1px solid var(--gray, #777);
  position: relative;
  box-sizing: border-box;
}

.hour-timeline-half {
  height: 0px;
  flex-shrink: 0;
  align-self: stretch;
  stroke-width: 1px;
  stroke: #bdbdbd;
  z-index: 1;
}

.hour-tag-container {
  display: flex;
  padding-top: 91px;
  flex-direction: column;
  align-items: flex-start;
  gap: 103px;
}

.timeline-mb-container {
  display: flex;
  gap: 16px;
  width: 100%;
}

.hour-tag-container-mb {
  display: none;
}

.hour-text {
  color: var(--smilefes_navy, #00125e);
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 18px */
}

.timeline-1hr-box {
  display: flex;
  height: 120px;
  padding: 16px;
  margin: 0px 24px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 3;
  align-self: stretch;
  position: absolute;
  border-radius: 8px;
  background: var(--smilefes_navy, #00125e);
}

.timeline-title {
  color: var(--White, #fff);
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  line-height: 100%; /* 14px */
}

.timeline-detail {
  color: var(--White, #fff);
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 24px;
  font-style: normal;
  justify-self: center;
  font-weight: 900;
  max-height: 62px;
  line-height: 130%; /* 31.2px */
}

.timeline-30min-box {
  border-radius: 8px;
  display: flex;
  height: 60px;
  padding: 16px;
  flex-direction: column;
  margin: 0px 24px;
  justify-content: center;
  position: absolute;
  align-items: center;
  z-index: 0;
  gap: 8px;
  align-self: stretch;
  background: var(--smilefes_navy, #00125e);
}

.date-pink {
  background: var(--smilefes_pink, #e73278);
}

.ellips-text-2 {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  align-self: stretch;
  overflow: hidden;
}

.ellips-text-1 {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  align-self: stretch;
}

.full-time {
  top: 0px;
}

.half-time {
  top: 60px;
}

#footer {
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-bottom: 24px;
  margin-top: 96px;
}

.sns-first-container {
  display: flex;
  gap: 80px;
  justify-content: center;
  align-items: center;
}

.footer-logo {
  width: 240px;
  cursor: pointer;
  height: 196px;
  aspect-ratio: 60 / 49;
}

.sns-share-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.share-text {
  color: #00125e;
  text-align: center;
  font-family: "Titan One";
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 40px */
}

.share-button-list {
  display: flex;
  gap: 32px;
}

.share-button-list a {
  height: 100%;
  display: flex;
}

.sns-button {
  width: 40px;
}

.sns-second-container {
  display: flex;
  gap: 24px;
  flex-direction: column;
}

.sns-bold-text {
  color: #00125e;
  text-align: center;
  font-family: "Titan One";
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 40px */
}

.link-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.link-title-text {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.link-title-text p {
  color: #00125e;
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
  line-height: 150%; /* 24px */
  letter-spacing: 0.96px;
}

.link-list-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.link-item {
  display: flex;
  padding-bottom: 2px;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
  gap: 8px;
  align-self: stretch;
  border-bottom: 1px solid #00125e;
}

.link-item p {
  color: #00125e;
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 21px */
  letter-spacing: 0.84px;
}

.gsc-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  width: fit-content;
}

.gsc-container a {
  display: flex;
  cursor: pointer;
}

.gsc-container img {
  width: 135.304px;
  height: 40.611px;
}

.gsc-container p {
  color: var(--Gray-3, #828282);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 10px */
  letter-spacing: 0.3px;
}

.gsc-container p span {
  font-weight: 400;
}

.nav-header {
  display: flex;
  gap: 32px;
  position: fixed;
  top: 32px;
  right: 32px;
  align-items: center;
  z-index: 100;
}

.nav-lang {
  display: flex;
  flex-wrap: wrap;
  z-index: 50;
}

.nav-lang li {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  margin: 0;
}

.nav-lang li a {
  display: block;
  border: 1px solid #00125e;
  color: #00125e;
  font-size: 10px;
  line-height: 1;
  padding: 4px 16px;
  font-weight: 500;
  background: #fff;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px; /* 180% */
}

.nav-lang li:nth-of-type(1) a {
  border-radius: 20px 0 0 20px;
  border-right: none;
}

.nav-lang li:nth-of-type(3) a {
  border-radius: 0 20px 20px 0;
  border-left: none;
}

.nav-lang li a:hover {
  background: #00125e;
  color: #fff;
}

.carousel {
  max-width: 720px;
  margin: 0 auto 40px auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ham-button {
  /*ボタン内側の基点となるためrelativeを指定*/
  cursor: pointer;
  font-size: 11px;
  width: 36px;
  height: 26px;
  z-index: 9999;
  display: flex;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  opacity: 1;
}

/*ボタン内側*/
.ham-button span {
  display: inline-block;
  transition: all 0.4s;
  /*アニメーションの設定*/
  position: absolute;
  right: 0;
  height: 4px;
  border-radius: 0;
  background: #00125e;
  width: 36px;
}

.nav-menu {
  position: fixed;
  top: 0px;
  right: 0px;
  width: auto;
  min-width: 375px;
  z-index: 50;
  padding-top: 90px;
  height: 100%;
  z-index: 49;
  background: #fff;
  filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.25));
  transform: translateX(120%);
  transition: 0.3s;
  overflow-y: auto;
}

.nav-menu.active {
  transform: translateX(0%);
}

.ham-button.active span:nth-of-type(1) {
  width: 32px;
  top: 8px;
  right: -4px;
  transform: translateY(0) rotate(-45deg);
  background: #00125e;
}

.ham-button.active span:nth-of-type(2) {
  opacity: 0;
}

.ham-button.active span:nth-of-type(3) {
  width: 32px;
  top: 14px;
  right: -4px;
  transform: translateY(-6px) rotate(45deg);
  background: #00125e;
}

.nav-menu li {
  text-align: center;
  cursor: pointer;
  border-bottom: 1px solid #00125e;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  margin: 0;
}

.menu-item {
  display: block;
  color: #00125e;
  font-family: "Noto Sans JP";
  font-size: 22px;
  font-style: normal;
  font-weight: 900;
  width: 100%;
  padding: 16px 20px;
  line-height: 100%; /* 22px */
}

.menu-item:hover {
  background: #00125e;
  color: #fff;
  opacity: 1;
}

.nav-menu li:nth-of-type(1) {
  border-top: 1px solid #00125e;
}

.ham-button span:nth-of-type(1) {
  top: 0%;
}

.ham-button span:nth-of-type(2) {
  top: 0;
  bottom: 0;
  margin: auto;
}

.ham-button span:nth-of-type(3) {
  bottom: 0%;
}

.nav-menu li.nav-link {
  border: none;
  padding-top: 40px;
}

.nav-menu li.sns-link {
  padding: 64px 20px 24px 20px;
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: stretch;
  flex-direction: column;
  border: none;
}

.share-menu-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.share-menu-container p {
  color: #00125e;
  text-align: center;
  font-family: "Titan One";
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 32px */
}

.share-menu-list {
  display: flex;
  gap: 32px;
  justify-content: center;
}

.nav-link a {
  color: var(--smilefes_navy, #00125e);
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 18px */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/

.ham-button.active span:nth-of-type(1) {
  width: 32px;
  top: 8px;
  right: -4px;
  transform: translateY(0) rotate(-45deg);
  background: #00125e;
}

.ham-button.active span:nth-of-type(2) {
  opacity: 0;
}

.ham-button.active span:nth-of-type(3) {
  width: 32px;
  top: 14px;
  right: -4px;
  transform: translateY(-6px) rotate(45deg);
  background: #00125e;
}

/*text-container*/

.medium-text-container {
  display: flex;
  padding-bottom: 40px;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  align-self: stretch;
}

.medium-list-container {
  display: flex;
  padding-bottom: 40px;
  flex-direction: column;
  gap: 10px;
  align-self: stretch;
}

.small-text-container {
  display: flex;
  padding-bottom: 40px;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  align-self: stretch;
}

.small-list-container {
  display: flex;
  padding-bottom: 40px;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  align-self: stretch;
}

.large-text-container {
  display: flex;
  padding-bottom: 40px;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  align-self: stretch;
}

.time-event-text-container {
  margin-bottom: 64px;
}

.extra-large-text-container {
  margin-top: 32px;
}

.main-medium-text-container {
  margin-top: 32px;
  margin-bottom: 32px;
}

.border-box-img-container {
  margin-bottom: 32px;
  display: flex;
}

@media screen and (max-width: 1300px) {
  .bg {
    object-fit: contain;
  }
}

@media screen and (max-width: 1165px) {
  .top-page {
    padding: 0 64px;
  }

  .table-information,
  .gray-border-box,
  .border-box-card-container,
  .introduction-card-container,
  .video-card-container,
  .border-box-container,
  .grid-three-border-product-container,
  .grid-three-border-container {
    margin: 0 64px;
  }

  .gray-border-box {
    margin-top: 40px;
  }

  .time-event-title {
    margin-bottom: 32px;
    padding: 0 64px;
  }
}

@media screen and (max-width: 1024px) {
  .mid-page-section {
    margin-top: 80px;
  }

  .bottom-page-section {
    margin-bottom: 104px;
  }

  .table-detail-title img {
    height: 36px;
  }

  .table-detail-title {
    margin-bottom: 24px;
  }

  .information-detail {
    padding: 40px 0 0 0;
  }

  .logo-corner {
    width: 79.571px;
    height: 65px;
    flex-shrink: 0;
    aspect-ratio: 79.57 / 65;
  }

  .venue-region-container {
    gap: 80px;
  }

  .top-module-title-container {
    margin: 80px 20px 0px 20px;
  }

  .top-module-title-text {
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 50px */
  }

  .top-module-title-undertext {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 21px */
    letter-spacing: 0.84px;
  }

  .gray-splash-top-module {
    height: 187px;
  }

  .time-event-detail p {
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 175%; /* 28px */
  }

  .navy-medium-text {
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 175%; /* 28px */
  }

  .navy-large-text {
    font-size: 22px;
    font-style: normal;
    font-weight: 900;
    line-height: 150%; /* 33px */
  }

  .navy-extra-large-text {
    font-size: 28px;
    font-style: normal;
    font-weight: 900;
    line-height: 150%; /* 42px */
    letter-spacing: 2.8px;
  }

  .navy-small-text {
    font-family: "Noto Sans JP";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 18px */
  }

  .navy-main-text {
    font-family: "Noto Sans JP";
    font-size: 14px;
    font-style: normal;
    font-weight: 900;
    line-height: 150%; /* 21px */
  }

  .navy-main-medium-text {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 170%; /* 23.8px */
  }

  .navy-head-text {
    font-family: "Noto Sans JP";
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: 130%; /* 26px */
  }

  .message-box {
    font-size: 14px;
    font-style: normal;
    font-weight: 900;
    line-height: 100%; /* 14px */
  }

  .diagonal-button p {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    padding-left: 16px; /* 18.2px */
  }

  .table-detail-title p {
    font-family: "Noto Sans JP";
    font-size: 32px;
    font-style: normal;
    font-weight: 900;
    line-height: 130%; /* 41.6px */
    letter-spacing: 1.92px;
  }

  .date-border-pill :nth-child(1) {
    font-size: 28px;
    font-style: normal;
    font-weight: 900;
    line-height: 100%; /* 28px */
  }

  .date-border-pill :nth-child(2) {
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 100%; /* 16px */
  }

  .timeline-detail {
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    max-height: 46px;
    line-height: 130%; /* 23.4px */
  }

  .timeline-1hr-box {
    height: 100px;
    margin: 0 16px;
    padding: 16px;
    gap: 4px;
  }

  .timeline-30min-box {
    height: 50px;
    margin: 0 16px;
    padding: 16px;
    gap: 4px;
  }

  .hour-timeline {
    height: 100px;
  }

  .half-time {
    top: 50px;
  }

  .hour-tag-container {
    display: flex;
    padding-top: 67px;
    flex-direction: column;
    align-items: flex-start;
    gap: 82.5px;
  }

  .rounded-navy-tag p,
  .rounded-navy-btn p {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%; /* 18.2px */
  }

  .grid-three-border-container {
    grid-template-columns: repeat(2, 1fr);
  }

  #footer {
    margin-top: 40px;
  }

  .border-box-container {
    gap: 24px;
  }

  .video-card-container {
    gap: 24px;
  }

  .card-switcher-container {
    display: flex;
    padding: 0px 20px;
    align-items: flex-start;
    align-self: stretch;
  }

  .osaka-switcher,
  .tokyo-switcher {
    display: flex;
    padding: 8px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
  }

  .switcher-text {
    text-align: center;
    font-feature-settings: "palt" on;
    font-family: "Noto Sans JP";
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: 150%; /* 30px */
  }

  .logo-corner {
    width: 79.571px;
    height: 65px;
    flex-shrink: 0;
    aspect-ratio: 79.57/65;
  }
}

@media screen and (max-width: 960px) {
  /*text-container*/
  .large-text-container {
    padding-bottom: 32px;
  }

  .medium-text-container {
    padding-bottom: 32px;
  }

  .medium-list-container {
    padding-bottom: 32px;
  }

  .small-text-container {
    padding-bottom: 32px;
  }

  .small-list-container {
    padding-bottom: 32px;
  }

  .button-information-container,
  .table-information,
  .gray-border-box,
  .border-box-card-container,
  .introduction-card-container,
  .video-card-container,
  .border-box-container,
  .grid-three-border-product-container,
  .grid-three-border-container {
    margin: 0 20px;
  }

  .time-event-title {
    padding: 0 20px;
  }

  .time-event-detail {
    margin-bottom: 32px;
  }

  .time-event-text-container {
    margin-bottom: 32px;
  }

  .information-detail {
    padding: 40px 0px 0px 0px;
  }

  .diagonal-button {
    max-width: unset;
  }

  .timeline-table-detail {
    padding: 40px 40px 40px 40px;
  }

  .table-information-title {
    padding: 20px 40px;
  }

  .video-card-detail {
    padding: 0 40px;
  }

  .border-box-item {
    padding: 20px 40px;
  }

  .white-border-layout {
    padding: 40px;
  }

  .grid-three-border-container,
  .grid-three-border-product-container {
    grid-gap: 40px;
  }

  .border-box-item {
    padding: 20px 40px;
  }

  .table-information-detail {
    padding: 0 40px 32px;
    margin-top: 24px;
  }

  .gray-border-box {
    margin-top: 24px;
    padding: 40px;
  }

  .video-card-container {
    gap: 32px;
  }

  .mid-page {
    margin-top: 32px;
    margin-bottom: 104px;
  }
}

@media screen and (max-width: 860px) {
  .introduction-card {
    gap: 36px;
  }

  .grid-three-border-product-container {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 24px;
  }
}

@media screen and (max-width: 750px) {
  .introduction-card {
    flex-direction: column;
  }

  .introduction-card-img {
    width: 100%;
    max-width: unset;
    aspect-ratio: 335/418.75;
  }
}

@media screen and (max-width: 700px) {
  .item-card-container {
    grid-template-columns: repeat(1, 1fr);
  }

  .long-anchor-link:hover,
  .rounded-navy-btn:hover,
  .diagonal-button:hover {
    transform: scale(1.02);
    z-index: 10;
  }

  .gray-border-box {
    padding: 32px 16px;
  }

  .item-card {
    max-width: unset;
  }

  .item-card-img {
    max-width: unset;
  }

  .rounded-navy-btn {
    max-width: unset;
  }

  .table-information-title {
    flex-direction: column;
  }

  .white-border-layout,
  .border-box-item {
    padding: 32px 16px;
  }

  .number-circle {
    width: 64px;
    height: 64px;
  }

  .video-card-detail,
  .table-information-detail {
    padding: 0 16px 32px;
  }

  .border-box-card-container {
    grid-template-columns: repeat(1, 1fr);
    grid-row-gap: 24px;
  }

  .grid-three-border-container {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 24px;
  }

  .sns-first-container {
    flex-direction: column;
    gap: 24px;
  }

  .footer {
    margin-top: 64px;
  }

  .footer-logo {
    width: 200px;
    height: 163px;
    aspect-ratio: 200 / 163;
  }

  .share-text {
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
  }

  .link-title-text p {
    font-size: 14px;
    font-style: normal;
    font-weight: 900;
    line-height: 150%;
    letter-spacing: 0.84px;
  }

  .link-item p {
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 0.72px;
  }
}

@media screen and (max-width: 680px) {
  .timeline-table-detail {
    flex-direction: column;
    gap: 80px;
    padding: 40px 16px 40px 16px;
  }

  .hour-tag-container {
    display: none;
  }

  .hour-tag-container-mb {
    display: flex;
    padding-top: 60px;
    flex-direction: column;
    align-items: flex-start;
    gap: 82px;
  }

  .hour-timeline-list {
    justify-content: center;
  }

  .timeline-container {
    gap: 24px;
  }

  .timeline-1hr-box {
    align-self: center;
    width: calc(100% - 32px);
  }

  .timeline-30min-box {
    align-self: center;
    width: calc(100% - 32px);
  }

  .button-information-container {
    padding: 0;
  }
  .small-buttons-container {
    flex-direction: column;
    margin-top: 24px;
    gap: 24px;
  }
}

@media screen and (max-width: 540px) {
  .grid-three-border-product-container {
    grid-template-columns: repeat(1, 1fr);
  }

  .product-price-tag-container {
    width: 100%;
  }

  .max-height {
    min-height: unset;
  }

  .product-price-tag {
    min-height: unset;
  }
}

/*CSS section from top page*/
.overview-title-container {
  height: 261px;
  display: flex;
  justify-content: center;
  background-position: center;
  gap: 8px;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 52px;
  flex-direction: column;
  background-repeat: no-repeat;
}

.gray-splash-overview {
  position: absolute;
  width: 253px;
  height: 261px;
  z-index: 0;
  opacity: 0;
  transform: scale(0) translate3d(0, 0, 0);
  transition: opacity 0.5s cubic-bezier(0.34, 1.3, 0.64, 1), transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.gray-splash-overview.show-animated {
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0);
}

.overview-title {
  flex-direction: column;
  display: flex;
  gap: 8px;
  margin-top: 30px;
}

.overview-title-undertext {
  color: #00125e;
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
  letter-spacing: 0.96px;
  z-index: 1;
}

.overview-title-text {
  color: #00125e;
  text-align: center;
  font-size: 80px;
  font-style: normal;
  line-height: 100%; /* 80px */
  z-index: 1;
}

.second-title-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  align-items: center;
  margin-top: 22px;
}

.second-title-text {
  color: #00125e;
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 37px;
  font-style: normal;
  font-weight: 900;
  line-height: 150%; /* 55.5px */
  letter-spacing: 3.7px;
}

.second-title-undertext {
  color: #00125e;
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
}

.triangle-button-container {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 64px;
  margin-top: 64px;
}

#TOKYO-section,
#OSAKA-section {
  cursor: pointer;
  transition: transform 0.2s ease;
}

#TOKYO-section:hover,
#OSAKA-section:hover {
  transform: scale(1.05);
}

.splash-overview-yellow {
  position: absolute;
  display: flex;
  left: 11%;
  top: 10px;
}

.blue-overview-container {
  background: url("../../assets/overviewBG/tokyo-background.png") repeat center/120%, #5dc2d0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  padding: 0 160px;
  align-items: center;
}

.yellow-overview-container {
  background: url("../../assets/overviewBG/osaka-background.png") repeat center/120%, #dae000;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 160px;
  align-items: center;
}

.white-box-container {
  margin: 96px 0px;
  width: 100%;
  border-radius: 16px;
  background: #fff;
  display: flex;
  max-width: 960px;
  padding-bottom: 64px;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.title-whitebox-container {
  display: flex;
  padding: 20px 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 16px 16px 0px 0px;
  background: rgba(93, 194, 208, 0.15);
}

.title-whitebox-container p {
  color: #00a6bd;
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 28px;
  font-style: normal;
  font-weight: 900;
  line-height: 150%; /* 42px */
  letter-spacing: 2.8px;
}

.detail-whitebox-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  align-items: center;
  gap: 40px;
  padding: 0 16px;
}

.detail-whitebox-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.message-item {
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
  align-items: center;
  align-self: center;
}

.message-box-overview {
  display: flex;
  padding: 14px 80px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 8px;
  background: rgba(93, 194, 208, 0.15);
  color: #00a6bd;
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 21px;
  font-style: normal;
  font-weight: 900;
  line-height: 100%; /* 21px */
  letter-spacing: 2.1px;
}

.wave {
  width: 100vw;
  height: 59px;
  position: relative;
  top: -1px;
}

.event-time-detail {
  display: flex;
  flex-direction: column;
}

.event-time-detail p {
  color: #00a6bd;
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 21px;
  font-style: normal;
  line-height: 150%; /* 31.5px */
}

.event-time-detail :nth-child(1) {
  font-size: 28px;
  font-weight: 900;
}

.event-time-detail :nth-child(2) {
  font-size: 21px;
  font-weight: 500;
}

.access-tokyo-container {
  display: flex;
  padding: 24px 0px 0px 0px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  border-top: 1px solid #00a6bd;
}

.access-osaka-container {
  display: flex;
  padding: 24px 0px 0px 0px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  border-top: 1px solid #bac002;
}

.access-title-text {
  color: #00a6bd;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 21px;
  font-style: normal;
  font-weight: 900;
  line-height: 100%; /* 21px */
}

.access-detail-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.access-detail-text {
  color: #00a6bd;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
  align-self: stretch;
}

.access-detail-link-container {
  display: flex;
  align-items: center;
  gap: 32px;
}

.access-detail-link-container a {
  color: #00a6bd;
  text-align: center;
  font-family: "Noto Sans JP";
  cursor: pointer;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.yellow-background {
  background: rgba(198, 203, 0, 0.2) !important;
}

.yellow-text {
  color: #bac002 !important;
}

.sponsored-logo-container {
  display: flex;
  padding: 0px 160px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.sponsored-logo-title-text {
  color: var(--smilefes_navy, #00125e);
  text-align: center;
  font-feature-settings: "palt" on;
  font-family: "Noto Sans JP";
  font-size: 21px;
  font-style: normal;
  font-weight: 900;
  line-height: 150%; /* 31.5px */
  letter-spacing: 2.1px;
}

.logo-list-container {
  display: flex;
  max-width: 960px;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 28px 54px;
  flex-wrap: wrap;
}

.sponsored-logo-img {
  max-height: 64px;
}

@media screen and (max-width: 1024px) {
  .blue-overview-container,
  .yellow-overview-container {
    padding: 0px 64px;
  }

  .sponsored-logo-container {
    padding: 0 64px;
  }
}

@media screen and (max-width: 860px) {
  .white-box-container {
    margin: 96px 100px;
  }
}

@media screen and (max-width: 780px) {
  .overview-title-container {
    height: 181px;
    margin-bottom: 41px;
    background-size: contain;
    gap: 4px;
  }

  .gray-splash-overview {
    width: 181px;
    height: 171px;
  }

  .overview-title {
    margin-top: 20px;
    gap: unset;
  }

  .overview-title-undertext {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 21px */
    letter-spacing: 0.84px;
  }

  .overview-title-text {
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 50px */
  }

  .second-title-container {
    margin-top: 16px;
  }

  .second-title-text {
    font-size: 28px;
    font-style: normal;
    font-weight: 900;
    line-height: 150%; /* 42px */
    letter-spacing: 2.8px;
  }

  .second-title-undertext {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 21px */
  }

  .overview-title-text {
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 50px */
  }

  .overview-title-undertext {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 21px */
    letter-spacing: 0.84px;
  }

  .overview-title-container {
    height: 181px;
    margin-bottom: 41px;
    background-size: contain;
    gap: 4px;
  }
  .gray-splash-overview {
    width: 181px;
    height: 171px;
  }

  .exclamation-yellow-overview {
    display: none !important;
  }

  .overview-title {
    margin-top: 20px;
    gap: unset;
  }

  .second-title-container {
    margin-top: 16px;
  }

  .triangle-button-container {
    margin-top: 40px;
  }
  .overview-section {
    margin-top: 24px;
  }

  .organization-section {
    gap: 10px;
    margin-top: 40px;
  }

  .organization-title-container {
    padding: 0 24px;
    gap: 8px;
  }

  .organization-title-container :nth-child(1) {
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 150%; /* 27px */
    letter-spacing: 1.8px;
  }

  .organization-title-container :nth-child(2) {
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: 150%; /* 36px */
  }

  .organization-detail-title {
    font-size: 22px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    letter-spacing: 1.1px;
  }

  .wave {
    width: 100vw;
    height: 32px;
  }

  .white-box-container {
    gap: 32px;
    padding-bottom: 32px;
  }

  .title-whitebox-container {
    padding: 12px 10px;
  }

  .title-whitebox-container p {
    font-size: 22px;
    font-style: normal;
    font-weight: 900;
    line-height: 150%; /* 33px */
    letter-spacing: 2.2px;
  }

  .message-box-overview {
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 100%; /* 18px */
    letter-spacing: 1.8px;
    padding: 10px 80px;
  }

  .event-time-detail :nth-child(1) {
    font-size: 22px;
    font-style: normal;
    font-weight: 900;
    line-height: 150%; /* 33px */
  }

  .event-time-detail :nth-child(2) {
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 27px */
  }

  .access-title-text {
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 100%; /* 18px */
  }

  .access-detail-text {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 21px */
  }

  .access-detail-link-container {
    flex-direction: column;
    gap: 10px;
  }

  .access-detail-link-container a {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 21px */
  }
}

@media screen and (max-width: 680px) {
  .triangle-button-container {
    gap: 10px;
    margin-top: 38px;
    margin-bottom: 32px;
  }

  .triangle-button-container img {
    width: 145px;
  }

  .splash-overview-yellow {
    left: -15px;
    top: -30px;
    width: 85px;
  }

  .blue-overview-container,
  .yellow-overview-container {
    padding: 0 16px;
  }

  .white-box-container {
    margin: 24px 0px;
  }

  .detail-whitebox-item {
    width: 100%;
  }

  .sponsored-logo-container {
    padding: 0 20px;
  }
}

/*CSS section from top page*/