@charset "utf-8";

:root {
  --yokohama: #ec6700;
  --green: #f29300;
}

/* header */
header {
  background-image: url(../img/head_bg_sp.png?v=2027summer-official-20261015);
}
header .inner::before {
  background-image: url(../img/head_yokohama.png?v=2027summer-official-20261015);
}
.menu-trigger span {
  background: var(--yokohama);
}
#navG li a {
  color: var(--yokohama);
}

/* content */
.content_bg {
  background-image: url(../img/bg_sp.png?v=2027summer-official-20261015);
}
.coming {
  max-width: 706px;
}

/* footer */
footer {
  background: #f9c03f;
}
footer .info dt {
  color: var(--yokohama);
}

.pagetop a {
  background: rgba(236, 103, 0, .5);
}


@media (min-width: 601px) {
  /* header */
  header {
    background-image: image-set(url(../img/head_bg.png?v=2027summer-official-20261015) 1x, url(../img/head_bg@2x.png?v=2027summer-official-20261015) 2x);
  }

  /* content */
  .content_bg {
    background-image: image-set(url(../img/bg.png?v=2027summer-official-20261015) 1x, url(../img/bg@2x.png?v=2027summer-official-20261015) 2x);
  }
}


@media (min-width: 1033px) {
  header .inner::before {
    background-image: image-set(url(../img/head_yokohama.png?v=2027summer-official-20261015) 1x, url(../img/head_yokohama@2x.png?v=2027summer-official-20261015) 2x);
  }
  .bg-holder2 {
    background-image: image-set(url(../img/side/bg.png?v=2027summer-official-20261015) 1x, url(../img/side/bg@2x.png?v=2027summer-official-20261015) 2x);
  }
}

/* Official header order: Sendai, logo/emblem, then the event date.
   Reuse the original image canvases at their existing dimensions. */
header .inner::before {
  width: calc(100% - (3vw + 126px));
  background-color: #fff;
  background-image: none;
}
header h1 {
  width: calc(100% - 126px);
  max-width: 240px;
}
header h1 a {
  display: flex;
  align-items: center;
  gap: 8px;
}
header h1 a::before {
  content: '';
  display: block;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  background-image: image-set(url(../img/head_yokohama.png?v=2027summer-official-20261015) 1x, url(../img/head_yokohama@2x.png?v=2027summer-official-20261015) 2x);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: right -4.142857px center;
}
header h1 img {
  width: calc(100% - 66px);
  height: auto;
  flex-shrink: 0;
}

@media (min-width: 1033px) {
  header .inner::before {
    width: 657px;
  }
  header h1 {
    width: calc(650px - 3vw);
    max-width: none;
  }
  header h1 a {
    gap: 20px;
  }
  header h1 a::before {
    flex-basis: 140px;
    width: 140px;
    height: 140px;
    background-position: right -10px center;
  }
  header h1 img {
    width: calc(100% - 160px);
  }
}

/* Align HOME with the B in the first desktop ABOUT tile.
   Its unchanged 240x470 artwork places B at x=86. The cover scale is
   max(tile width/240, tile height/470); account for the grid's 1px border.
   Keep the existing narrow desktop and mobile navigation dimensions. */
@media (min-width: 1280px) {
  #navG {
    left: max(674px, calc(56.25% + .875px - max(calc(1.770833333% - .035416667px), calc(3.617021277vh - 4.846808511px))));
    right: 2vw;
    width: auto;
  }
}