/* 麹町共通レイアウト（2026-10-30）。PCとスマホで本文余白・固定位置を分離。 */
@font-face {
  font-family: KojimachiNumbers;
  src: url("./fonts/oswald-regular.ttf") format("truetype");
  font-display: swap;
}
html[data-po-location="kojimachi"] {
  --kj-header-bottom: 0px;
  --kj-content-space: 0px;
  --kj-view-height: 100svh;
  --kj-jump-height: 36px;
}
html[data-po-location="kojimachi"] #wrapper {
  padding-top: var(--kj-content-space) !important;
}
html[data-po-location="kojimachi"] #po-renewal {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
html[data-po-location="kojimachi"] footer > .pagetop,
html[data-po-location="kojimachi"] .po-back-to-top {
  display: none !important;
}
html[data-po-location="kojimachi"] #po-dmn-gallery .filters {
  top: var(--kj-header-bottom);
}
html[data-po-location="kojimachi"] #po-dmn-gallery #categories {
  scroll-margin-top: var(--kj-header-bottom);
}
/* 2026-10-31 通常位置と固定位置を分離。バーは全幅・常時1段。 */
/* バーの本来の高さをスペーサーが保持するため、固定に切り替えても本文が跳ねない。 */
.po-jump-slot {
  position: relative;
  width: 100%;
  height: var(--kj-jump-height);
  z-index: 900;
}
#po-renewal .po-jump {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid #d9d9d2;
  box-sizing: border-box;
  background: #eaeae3;
  color: #171717;
  z-index: 900;
}
/* 固定中は実際のヘッダー下端に接する。背景で隙間を塗りつぶさない。 */
#po-renewal .po-jump.po-jump-fixed {
  position: fixed;
  top: var(--kj-header-bottom);
  bottom: auto;
}
#po-renewal .po-jump .po-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: safe center;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#po-renewal .po-jump .po-wrap::-webkit-scrollbar {
  display: none;
}
#po-renewal .po-jump a {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 36px;
  box-sizing: border-box;
  padding: 8px 14px 5px;
  border: 0;
  border-radius: 0;
  color: #171717;
  background: transparent;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  white-space: nowrap;
  text-decoration: none !important;
  transition: color 0.2s, background-color 0.2s;
}
#po-renewal .po-jump a::before,
#po-renewal .po-jump a::after {
  content: none !important;
}
#po-renewal .po-jump a:hover,
#po-renewal .po-jump a:focus-visible {
  background: #171717;
  color: #fff;
  transform: none;
  text-decoration: none !important;
}
#po-renewal .po-jump a:hover span,
#po-renewal .po-jump a:focus-visible span {
  color: #fff;
}
#po-renewal .po-jump-number,
.po-section-number {
  font-family: KojimachiNumbers, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: #b3312a;
}
#po-renewal .po-title-ja .po-section-number {
  display: inline;
  margin-right: 0.65em;
  font-size: 12px;
}
#po-renewal .po-dark .po-section-number {
  color: #c18a85;
}
#po-renewal .po-overview-section-label {
  text-align: center;
  font-size: 12px;
  margin: -18px 0 24px;
}
#po-renewal section[id] {
  scroll-margin-top: calc(var(--kj-header-bottom) + var(--kj-jump-height) + 16px);
}
/* 写真の高さは幅・向きの変更時だけ再計算。ズームのtransformは既存演出専用。 */
#po-renewal .po-hero-media img {
  height: calc(var(--kj-view-height) + 108px) !important;
  min-height: calc(var(--kj-view-height) + 108px) !important;
}
#po-renewal .po-photo-band img {
  height: calc(100% + 440px) !important;
  max-height: none;
  transform: translate3d(0, var(--kj-band-shift, 0px), 0);
  animation: none;
  transition: none;
}
/* SCROLLの文字・縦棒は操作対象にしない。矢印だけクリック可能。 */
.kj-screen-scroll {
  position: fixed;
  left: 50%;
  bottom: calc(max(8px, env(safe-area-inset-bottom)) + 6px);
  z-index: 99990;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  user-select: none;
  font:
    10px/1.4 KojimachiNumbers,
    sans-serif;
  letter-spacing: 0.12em;
}
.kj-screen-scroll i {
  display: block;
  position: relative;
  width: 1px;
  height: 24px;
  overflow: hidden;
}
.kj-screen-scroll i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  animation: kj-scroll-line 2s ease-in-out infinite;
}
@keyframes kj-scroll-line {
  0% {
    transform: translateY(-105%);
  }
  100% {
    transform: translateY(105%);
  }
}
.kj-screen-scroll button {
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  margin: 0 0 -14px;
  width: 44px;
  height: 32px;
  display: grid;
  place-items: center;
  pointer-events: auto;
  cursor: pointer;
}
.kj-screen-scroll button[hidden] {
  display: none;
}
.kj-screen-scroll svg {
  width: 18px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
html[data-po-page="gallery"] .kj-screen-scroll {
  mix-blend-mode: difference;
}
html[data-po-page="gallery"] .kj-screen-scroll button {
  margin: 0;
}
/* スマホ：旧70pxの固定値を使わず、実際のヘッダーを測る。5mm加算は一度だけ。 */
@media (max-width: 1024px) {
  /* スマホの共通ヘッダーに残る5pxの黒い影をギャラリーだけ除去する。 */
  html[data-po-page="gallery"] header .sp,
  html[data-po-page="gallery"] header #menu {
    box-shadow: none !important;
  }
  #po-renewal .po-hero-media img {
    height: var(--kj-view-height) !important;
    min-height: 0 !important;
  }
}
@media (max-width: 1024px) {
  /* 小さな画面では文字サイズのみ変更し、バーの折返し指定は増やさない。 */
  #po-renewal .po-jump a {
    min-height: 36px;
    padding: 8px 14px;
    font-size: 11px;
    gap: 1em;
  }
  #po-renewal .po-title-ja .po-section-number {
    font-size: 11px;
  }
}
@media (max-width: 760px) {
  .kj-screen-scroll {
    gap: 3px;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 6px + 5mm);
  }
  .kj-screen-scroll i {
    height: 18px;
  }
}
@media (pointer: coarse) {
  .kj-screen-scroll button {
    height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kj-screen-scroll i::after {
    animation: none;
  }
}