@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@600&display=swap");

/* ----------------------------
Design tokens
----------------------------- */
:root {
  --fair-color-link: #007fc3;
  --fair-color-text: #222222;
  --fair-color-text-sub: #333333;
  --fair-color-text-muted: #6c6c6c;
  --fair-color-bg: #ffffff;
  --fair-color-bg-gray: #f5f5f5;
  --fair-color-border: #e5e5e5;
  --fair-color-border-strong: #333333;
  --fair-color-accent-yellow: #fff880;
  --fair-color-contents-bg: #008fd6;
  --fair-color-btn-disabled: #e5e5e5;
  --fair-color-btn-disabled-text: #cccccc;
  --fair-radius-8: 8px;
  --fair-radius-16: 16px;
  --fair-radius-24: 24px;
  --fair-content-width: 1120px;
}

/* ----------------------------
Fair LP common
----------------------------- */
/*
  幅の方針:
  - PC ≤1200: ページ全体を 1200px 固定（狭い画面は横スクロール）
  - PC >1200: 全幅（MV 連動・CONTENTS 楕円のため）
  - SP: 全幅レスポンシブ
*/
@media (min-width: 768px) and (max-width: 1200px) {
  #content,
  #content .content1200 {
    width: 1200px;
    max-width: 1200px;
    overflow: visible;
  }

  .fairLp {
    width: 1200px;
    max-width: 1200px;
  }
}

@media (min-width: 1201px) {
  #content,
  #content .content1200 {
    width: 100%;
    max-width: none;
    overflow: visible;
  }
}

@media (max-width: 767px) {
  #content,
  #content .content1200 {
    width: 100%;
    max-width: none;
    overflow: visible;
  }
}

.fairLp {
  color: var(--fair-color-text);
  font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background: var(--fair-color-bg-gray);
  overflow: hidden;
}

.fairLp img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

.fairLp a {
  color: var(--fair-color-link);
}

@media (max-width: 767px) {
  .fairLp {
    font-family: 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', '游ゴシック体', YuGothic,
    '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic',
    sans-serif;
  }
}

/* ----------------------------
Hero / MV
Figma artboard 1440 × stage 661（visual y=199 基準）
≤1200px: 1200px 固定 / >1200px: ブラウザ幅に連動（縦横比維持）
----------------------------- */
.fairMv {
  --fair-mv-design-w: 1440;
  --fair-mv-design-h: 661;
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  container-type: inline-size;
  container-name: fair-mv;
}

.fairMv__inner {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.fairMv__title {
  margin: 0;
  line-height: 0;
}

.fairMv__date {
  margin: 0;
  line-height: 0;
}

.fairMv__venue {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 2.2rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--fair-color-text);
  white-space: nowrap;
}

.fairMv__venueBody {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fairMv__pin {
  display: block;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.fairMv__venueText {
  color: var(--fair-color-text);
}

.fairMv__venueParen {
  color: var(--fair-color-text-sub);
  font-weight: 300;
}

.fairMv__visual {
  line-height: 0;
  pointer-events: none;
}

.fairMv__visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* PC 共通: Figma 座標を % で配置 */
@media (min-width: 768px) {
  .fairMv {
    aspect-ratio: 1440 / 661;
  }

  .fairMv__inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .fairMv__visual {
    position: absolute;
    left: calc(472 / 1440 * 100%);
    top: 0;
    width: calc(988 / 1440 * 100%);
    z-index: 1;
  }

  .fairMv__title {
    position: absolute;
    left: calc(96 / 1440 * 100%);
    top: calc(91 / 661 * 100%);
    width: calc(528 / 1440 * 100%);
    z-index: 2;
  }

  /* date: x=87 y=692 → top 493 */
  .fairMv__date {
    position: absolute;
    left: calc(96 / 1440 * 100%);
    top: calc(493 / 661 * 100%);
    width: calc(379 / 1440 * 100%);
    z-index: 2;
  }

  /* venue: x=80 y=793 → top 594 */
  .fairMv__venue {
    position: absolute;
    left: calc(80 / 1440 * 100%);
    top: calc(594 / 661 * 100%);
    z-index: 2;
  }
}

/* ≤1200: 1200px 固定 */
@media (min-width: 768px) and (max-width: 1200px) {
  .fairMv {
    width: 1200px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .fairMv__venue {
    font-size: calc(22px * 1200 / 1440);
  }

  .fairMv__pin {
    width: calc(28px * 1200 / 1440);
    height: calc(28px * 1200 / 1440);
  }
}

/* >1200: ブラウザ全幅に連動（縦横比維持） */
@media (min-width: 1201px) {
  .fairMv {
    width: 100%;
    max-width: none;
  }

  .fairMv__venue {
    font-size: calc(22 * 100cqw / 1440);
  }

  .fairMv__pin {
    width: calc(28 * 100cqw / 1440);
    height: calc(28 * 100cqw / 1440);
  }
}

/* ----------------------------
Features
----------------------------- */
.fairFeatures {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 64px;
  width: var(--fair-content-width);
  max-width: 100%;
  margin: 48px auto 0;
  padding: 24px 16px;
  list-style: none;
  border-top: 1px dashed var(--fair-color-text-sub) ;
  border-bottom: 1px dashed var(--fair-color-text-sub);
  box-sizing: border-box;
}

.fairFeatures__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 88px;
}

.fairFeatures__icon {
  width: 72px;
  height: 72px;
}

.fairFeatures__label {
  margin: 0;
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}

/* ----------------------------
CTA
----------------------------- */
.fairCta {
  position: relative;
  width: var(--fair-content-width);
  max-width: 100%;
  margin: 32px auto 0;
  padding: 24px 16px 40px;
  background: var(--fair-color-bg);
  border-radius: var(--fair-radius-24);
  box-sizing: border-box;
}
.fairCta--top{
  margin: 48px auto 0;
}

.fairCta--bottom {
  position: relative;
  z-index: 4;
  margin: 64px auto 0;
}

.fairCta__badge {
  position: absolute;
  left: 170px;
  top: -32px;
  z-index: 2;
  line-height: 0;
}

.fairCta__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.fairCta__lead {
  margin: 0;
  text-align: center;
  position: relative;
}

.fairCta__lead::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  height: 10px;
  background-color: var(--fair-color-accent-yellow);
  z-index: 1;
}

.fairCta__leadMark {
  display: inline-block;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.5;
  color: var(--fair-color-text);
  position: relative;
  z-index: 2;
}

.fairCta__leadNum {
  font-size: 4rem;
  font-weight: bold;
  line-height: 1.5;
}

.fairCta__leadMark::before,
.fairCta__leadMark::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  background-color: var(--fair-color-text-sub);
  width: 40px;
  height: 1px;
}

.fairCta__leadMark::before {
  left: -32px;
  transform: rotate(60deg) translateX(-50%);
}

.fairCta__leadMark::after {
  right: -32px;
  transform: rotate(-60deg) translateX(50%);
}

.fairCta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  width: 350px;
  max-width: 100%;
  padding: 8px 16px;
  border-radius: var(--fair-radius-8);
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.fairCta__btn--disabled {
  background: var(--fair-color-btn-disabled);
  border: 1px solid #ccc;
  color: var(--fair-color-btn-disabled-text);
  cursor: default;
  pointer-events: none;
}

/* ref: https://doda.jp/event/fair/tokyo.html .fairTop */
.fairTop {
  margin-top: 50px;
  margin-bottom: 80px;
  text-align: center;
}

.fairTop > a {
  display: inline-block;
  padding: 15px 60px;
  background-color: #ebebeb;
  color: #353535;
  font-size: 15px;
  font-weight: bold;
  border-radius: 5px;
  text-decoration: none;
}

.fairTop > a:hover {
  text-decoration: none;
  opacity: 0.85;
}

/* ----------------------------
CONTENTS
----------------------------- */
.fairContents {
  position: relative;
  width: 100%;
  margin-top: 80px;
  padding: 114px 0 156px;
  box-sizing: border-box;
}

/* Figma Ellipse 15 — #008FD6 / 2200×927 */
.fairContents::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 0;
  width: 2200px;
  height: 100%;
  transform: translateX(-50%);
  background: var(--fair-color-contents-bg);
  border-radius: 50% 50% 0 0;
  pointer-events: none;
}

.fairContents__people {
  position: absolute;
  z-index: 5;
  line-height: 0;
  pointer-events: none;
}

/*
  Figma artboard 1440 / Ellipse15 y=1375
  left: calc(50% - 720px + x) … 中央基準でアートボード左端→x
  top: y - 1375
*/
.fairContents__people--01 {
  /* x:147.7 y:1341 → top: -34 */
  left: calc(50% - 720px + 148px);
  top: 0;
}

.fairContents__people--02 {
  /* x:230 y:1448 → top: 73 */
  left: calc(50% - 720px + 230px);
  top: 104px;
}

.fairContents__people--03 {
  /* x:149 y:1505 → top: 130 */
  left: calc(50% - 720px + 83px);
  top: 164px;
}

.fairContents__people--04 {
  /* x:1241.3 y:2122.7 → top: 748 */
  left: calc(50% - 720px + 1241px);
  bottom: 70px;
}

.fairContents__people--05 {
  /* x:1171.9 y:2212.4 → top: 837（04より約89px下・やや左） */
  left: calc(50% - 720px + 1172px);
  bottom: -42px;
}

.fairContents__inner {
  position: relative;
  z-index: 2;
  width: var(--fair-content-width);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.fairContents__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 72px;
  text-align: center;
  line-height: 0;
}

.fairContents__lead {
  margin: 0;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #ffffff;
}

.fairContents__grid {
  display: flex;
  align-items: stretch;
  gap: 48px;
}

.fairContentsCard {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 536px;
  max-width: 100%;
  padding: 48px;
  border: 1px solid var(--fair-color-border-strong);
  border-radius: var(--fair-radius-24);
  background-color: var(--fair-color-bg);
  background-image: url("https://doda.jp/cmn_web/img/e/fair/2026/contents_grid.svg");
  background-repeat: repeat;
  background-size: 20px 20px;
  background-position: 0 0;
  box-sizing: border-box;
}

/* Figma Group 626749 — Ellipse 85 + Jost SemiBold 32 / #007FC3 */
.fairContentsCard__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85px;
  height: 85px;
  border: 1px solid var(--fair-color-link);
  border-radius: 50%;
  background: var(--fair-color-bg);
  box-sizing: border-box;
  font-family: "Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--fair-color-link);
}

.fairContentsCard__title {
  position: relative;
  z-index: 0;
  margin: 0;
  font-size: 3.2rem;
  font-weight: bold;
  color: var(--fair-color-link);
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-align: center;
}

.fairContentsCard__titleText {
  display: inline;
  position: relative;
  font-size: 2.4rem;
}

.fairContentsCard__titleText::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  background-color: var(--fair-color-accent-yellow);
  z-index: -1;
}

.fairContentsCard__body {
  width: 100%;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.8;
  color: var(--fair-color-text);
}

.fairContentsCard__body p {
  margin: 0 0 1em;
}

.fairContentsCard__body p:last-child {
  margin-bottom: 0;
}

.fairContentsCard__body a {
  color: var(--fair-color-link);
  text-decoration: underline;
}

.fairContentsCard__note{
  font-weight: 500;
}

/* ----------------------------
Detail (INFO + ACCESS)
----------------------------- */
.fairDetail {
  position: relative;
  padding: 96px 0 80px;
  background-image: url(https://doda.jp/cmn_web/img/e/fair/2026/information_bg.svg);
  background-repeat: no-repeat;
  background-size: 100% 893px;
  background-attachment: fixed;
  background-position: center bottom -80px;
}

.fairInfo,
.fairAccess {
  position: relative;
  z-index: 2;
  width: var(--fair-content-width);
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.fairAccess {
  margin-top: 96px;
}

.fairAccess__people {
  position: absolute;
  right: -35px;
  bottom: -32px;
  z-index: 3;
  line-height: 0;
  pointer-events: none;
}

.fairAccess__people img {
  display: block;
  width: 283px;
  height: auto;
}

.fairInfo__head,
.fairAccess__head {
  margin-bottom: 40px;
}

.fairInfo__head picture,
.fairAccess__head picture,
.fairInfo__head > img,
.fairAccess__head > img {
  display: block;
  line-height: 0;
}

.fairInfo__ja,
.fairAccess__ja {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 0;
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.fairInfo__dot,
.fairAccess__dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fair-color-link);
  flex-shrink: 0;
}

.fairInfo__panel,
.fairAccess__panel {
  background: var(--fair-color-bg);
  border-radius: var(--fair-radius-24);
  padding: 80px;
  box-sizing: border-box;
}

.fairInfoTable {
  max-width: 880px;
  margin: 0 auto;
}

.fairInfoTable__row {
  display: flex;
  gap: 96px;
  padding: 32px 0;
  border-bottom: 1px solid var(--fair-color-border);
  margin: 0;
}

.fairInfoTable__row:first-child {
  border-top: 1px solid var(--fair-color-border);
}

.fairInfoTable__label {
  width: 150px;
  flex-shrink: 0;
  margin: 0;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
}

.fairInfoTable__value {
  flex: 1;
  margin: 0;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
}

.fairInfoTable__value a {
  text-decoration: underline;
}

.fairInfoTable__list {
  margin: 0;
  padding-left: 1.5em;
}

.fairInfoTable__list li{
  list-style-type: disc;
}

.fairInfoTable__list li + li {
  margin-top: 0.5em;
}

/* ACCESS detail — Google Map（本番 .ggMap 相当） */
.fairAccess__map {
  position: relative;
  width: 100%;
  height: 360px;
  margin-bottom: 64px;
  border-radius: var(--fair-radius-16);
  background: #e8eef2;
  overflow: hidden;
}

.fairAccess__map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.fairAccess__detail {
  display: flex;
  margin: 0 auto;
}

.fairAccess__address{
  padding-right: 44px;
}

.fairAccess__venueName {
  margin: 0 0 16px;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.5;
  color: var(--fair-color-text-sub);
}

.fairAccess__postal {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--fair-color-text-sub);
}

.fairAccess__routes {
  width: 580px;
  max-width: 100%;
  padding-left: 64px;
  border-left: 1px solid var(--fair-color-border);
  box-sizing: border-box;
}

.fairAccessRoute + .fairAccessRoute {
  margin-top: 32px;
}

.fairAccessRoute__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
}

.fairAccessRoute__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.fairAccessRoute__text {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
}

.fairAccessRouteList {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fairAccessRouteList__item {
  display: flex;
  gap: 4px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
}

.fairAccessRouteList__item + .fairAccessRouteList__item {
  margin-top: 4px;
}

.fairAccessRouteList__line {
  flex-shrink: 0;
  width: 64px;
}

.fairAccessRouteList__detail {
  flex: 1;
}

.fairAccessRouteList__detail::before {
  content: "：";
  display: inline-block;
  margin: 0 4px;
}

/* ----------------------------
SP
----------------------------- */
@media (max-width: 767px) {
  .fairMv {
    aspect-ratio: auto;
    max-width: none;
    padding-top: 24px;
  }

  .fairMv__inner {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 0;
  }

  .fairMv__title {
    position: absolute;
    z-index: 2;
    left: 20px;
    top: 30px;
    width: auto;
    display: flex;
    justify-content: center;
  }

  .fairMv__date {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    margin-top: 16px;
    display: flex;
    justify-content: center;
    order: 2;
  }

  .fairMv__venue {
    position: static;
    left: auto;
    top: auto;
    margin-top: 12px;
    justify-content: center;
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    white-space: normal;
  }

  .fairMv__pin {
    width: 20px;
    height: 20px;
  }

  .fairMv__visual {
    position: relative;
    order: 1;
    width: 100%;
    max-width: 364px;
    margin-left: auto;
  }

  .fairFeatures {
    gap: 8px;
    margin-top: 24px;
    padding: 16px 8px;
    justify-content: space-between;
    width: calc(100% - 15px);
    margin: 24px auto 0;
  }

  .fairFeatures__item {
    width: auto;
    flex: 1;
    min-width: 0;
  }

  .fairFeatures__icon {
    width: 56px;
    height: 56px;
  }

  .fairFeatures__label {
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    white-space: normal;
  }

  .fairCta {
    margin: 24px 15px 0;
    padding: 16px 15px 24px;
  }

  .fairCta--top {
    margin: 32px 0 0;
  }

  .fairCta--bottom {
    margin: 80px 0 0;
    position: relative;
    z-index: 1;
  }

  .fairCta__body{
    gap: 16px;
  }

  .fairCta__badge {
    left: 16px;
    top: -24px;
  }

  .fairCta__badge img {
    width: 72px;
    height: auto;
  }

  .fairCta__leadMark {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 8px;
    text-decoration-color: var(--fair-color-accent-yellow);
  }
  
  .fairCta__lead::before {
    content: none;
  }
 
  .fairCta__leadMark {
    font-size: 1.6rem;
  }

  .fairCta__leadNum {
    font-size: 2.4rem;
  }

  .fairCta__leadMark::before,
.fairCta__leadMark::after {
  content: "";
  width: 20px;
}

.fairCta__leadMark::before {
  left: -22px;
  transform: rotate(60deg) translateX(-50%);
}

.fairCta__leadMark::after {
  right: -22px;
  transform: rotate(-60deg) translateX(50%);
}

  .fairCta__btn {
    width: 100%;
    font-size: 1.6rem;
  }

  .fairTop {
    margin-top: 25px;
    margin-bottom: 48px;
  }

  .fairTop > a {
    padding: 15px 30px;
    font-size: 13px;
  }

  .fairContents {
    margin-top: 48px;
    padding: 48px 0 64px;
  }

  /* Figma Ellipse 16 — 600x253 / artboard 375 */
  .fairContents__bg {
    top: 0;
    width: 600px;
    height: 253px;
  }

  /* SP coords relative to Ellipse (y=914) */
  .fairContents__people--01 {
    /* x:66 y:885 */
    left: 66px;
    top: -29px;
  }

  .fairContents__people--01 img {
    width: 38px;
    height: auto;
  }

  .fairContents__people--02 {
    /* x:13 y:907 */
    left: 13px;
    top: -7px;
  }

  .fairContents__people--02 img {
    width: 49px;
    height: auto;
  }

  .fairContents__people--03 {
    display: none;
  }

  .fairContents__people--04 {
    /* x:301 y:1981 — bottom right of contents */
    right: 20px;
    left: auto;
    top: auto;
    bottom: 11px;
  }

  .fairContents__people--04 img {
    width: 54px;
    height: auto;
  }

  .fairContents__people--05 {
    /* x:268 y:2033 */
    left: auto;
    right: 73px;
    top: auto;
    bottom: -43px;
  }

  .fairContents__people--05 img {
    width: 33px;
    height: auto;
  }

  .fairContents__inner {
    padding: 0 15px;
  }

  .fairContents__head {
    gap: 16px;
    margin-bottom: 32px;
  }

  .fairContents__lead {
    font-size: 1.6rem;
    letter-spacing: 0.1em;
  }

  .fairContents__grid {
    flex-direction: column;
    gap: 16px;
  }

  .fairContentsCard {
    width: 100%;
    padding: 32px 24px;
    gap: 16px;
  }

  .fairContentsCard__num {
    width: 60px;
    height: 60px;
    font-size: 2.2rem;
  }

  .fairContentsCard__title {
    font-size: 2.4rem;
    letter-spacing: 0;
  }

  .fairContentsCard__body {
    font-size: 1.6rem;
    text-align: justify;
  }

  .fairDetail {
    padding: 56px 0 24px;
    background-size: 564px;
    background-attachment: fixed;
    background-position: center;
  }

  .fairInfo,
  .fairAccess {
    padding: 0 15px;
  }

  .fairAccess {
    margin-top: 48px;
  }

  .fairInfo__head,
  .fairAccess__head {
    margin-bottom: 24px;
  }

  .fairInfo__ja,
  .fairAccess__ja {
    margin-top: 12px;
    font-size: 1.6rem;
    gap: 8px;
  }

  .fairInfo__dot,
  .fairAccess__dot {
    width: 8px;
    height: 8px;
  }

  .fairInfo__panel,
  .fairAccess__panel {
    padding: 32px 20px;
  }

  .fairInfoTable__row {
    gap: 4px;
    padding: 24px 0;
  }

  .fairInfoTable__label {
    width: 100px;
  }

  .fairInfoTable__label,
  .fairInfoTable__value {
    font-size: 1.4rem;
  }

  .fairAccess__map {
    /* 本番 .ggMap SP: padding-bottom 16:9 相当 */
    height: 0;
    padding-bottom: 56.25%;
    margin-bottom: 32px;
  }

  .fairAccess__detail {
    flex-direction: column;
    gap: 32px;
  }

  .fairAccess__venueName {
    font-size: 1.8rem;
  }

  .fairAccess__people {
    right: 87px;
    bottom: -98px;
  }

  .fairAccess__people img {
    width: 150px;
    height: auto;
  }

  .fairAccess__routes {
    width: 100%;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--fair-color-border);
    padding-top: 24px;
  }

  .fairAccessRoute__title,
  .fairAccessRoute__text,
  .fairAccessRouteList__item {
    font-size: 1.4rem;
  }

  .fairAccessRouteList__item {
    flex-wrap: wrap;
  }

  .fairAccessRouteList__detail{
    position: relative;
    padding-left: 1em;
  }
  .fairAccessRouteList__detail::before {
    content: "：";
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
  }
}