@charset "UTF-8";
/* =========================================================
   八王子まつり特設ページ 固有スタイル
   ※共通パーツは style.css を継承。本ファイルは page-hachiojimatsuri.php 専用。
   カラー: main #01a29a / accent #006275 / accent2 #e85454
   ブレイクポイント: m 767px / l 999px / xl 1199px
   ========================================================= */

#hachiojimatsuri {
  padding-top: 80px;
}

/* アンカー到達時に上部の余白を確保 */
#hachiojimatsuri [id^="sec"] {
  scroll-margin-top: 20px;
}

/* ヒーロー画像：表示位置を中央より少し上に */
#hachiojimatsuri .headline-A figure img {
  object-position: center 47%;
}

/* ヒーロータイトル：折返し時の行重なりを防ぐ（継承line-heightが20px固定のため） */
#hachiojimatsuri .headline-A .title h2 {
  line-height: 1.4;
}

/* ヒーロー吹き出し：改行させない */
/* 位置は上基準に変更（共通CSSのbottom基準だと、タイトルが折り返して背が高くなった際に
   吹き出しが相対的に下がりタイトルへ重なるため。画像高さはPC570px/SP410px固定） */
#hachiojimatsuri .arrow_box_A {
  white-space: nowrap;
  width: fit-content;
  max-width: none;
  padding-left: 24px;
  padding-right: 24px;
  top: 470px;
  bottom: auto;
}
@media screen and (max-width: 767px) {
  #hachiojimatsuri .arrow_box_A {
    top: 310px;
  }
}

/* 内側ラッパー（大画面では2000pxで固定、それ以下は画面いっぱい） */
.hachioji-wrap {
  width: 100%;
  max-width: 2700px;
  margin: 0 auto;
  padding: 0;
  background-color: #f2efe6;
}

/* ---- リード文（/about #about .about-text と同一スタイル） ---- */
#hachiojimatsuri .readWrap {
  padding: 70px 0 110px;
}
#hachiojimatsuri .readWrap__text {
  font-size: 1.8rem;
  line-height: 4.2rem;
  font-weight: 700;
  letter-spacing: -0.12rem;
  padding: 0 20px;
  max-width: 1400px;
  margin-bottom: 26px;
}
#hachiojimatsuri .readWrap__text:last-child {
  margin-bottom: 0;
}
#hachiojimatsuri .readWrap__text:lang(en-US) {
  font-size: 1.6rem;
}
/* 強調（.text-color）を周囲テキストと同サイズに（共通CSS *{font-size:13px} 対策） */
#hachiojimatsuri .readWrap__text .text-color {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* ---- リード（キャッチコピー／ページタイトル見出し） ---- */
#hachiojimatsuri h2.readWrap__text.hachioji-catch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  color: #01a29a;
  font-size: 3rem;
  line-height: 1.5;
  font-weight: 700;
  text-align: center;
  margin: 0 auto 20px;
  padding-bottom: 0;
  letter-spacing: 0.15rem;
}
/* 内側span（SP改行用ラッパー）は見出しと同サイズに（共通CSS *{font-size:13px} 対策） */
#hachiojimatsuri h2.readWrap__text.hachioji-catch span {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}
/* 見出し左右の飾りライン（about の has-lines と同モチーフ） */
#hachiojimatsuri h2.readWrap__text.hachioji-catch::before,
#hachiojimatsuri h2.readWrap__text.hachioji-catch::after {
  content: "";
  flex: 0 0 auto;
  width: 70px;
  height: 2px;
}
#hachiojimatsuri h2.readWrap__text.hachioji-catch::before {
  background: linear-gradient(90deg, transparent, #01a29a);
}
#hachiojimatsuri h2.readWrap__text.hachioji-catch::after {
  background: linear-gradient(90deg, #01a29a, transparent);
}
@media screen and (max-width: 767px) {
  #hachiojimatsuri h2.readWrap__text.hachioji-catch {
    font-size: 2rem;
    gap: 14px;
  }
  #hachiojimatsuri h2.readWrap__text.hachioji-catch::before,
  #hachiojimatsuri h2.readWrap__text.hachioji-catch::after {
    width: 26px;
  }
}

/* ---- 日本遺産「桑都物語」デジタルマップ（掲載期間限定・0717指示） ---- */
.hachioji-digimap {
  width: 100%;
  margin: 0 auto 10px;
  padding: 0;
}

/* ---- 宮神輿写真(mikoshi-01)は被写体を中央に ---- */
#hachiojimatsuri img[src*="mikoshi-01"] {
  object-position: center center;
}

/* ---- 強調（.text-color）を親テキストと同サイズに（ページ全域・共通 *{font-size:13px} 対策） ---- */
#hachiojimatsuri .text-color {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* ---- ルビ（共通 *{font-size:13px} 対策） ---- */
#hachiojimatsuri ruby {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
}
#hachiojimatsuri rt {
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

/* ---- セクション見出し（構成文化財）余白 ---- */
.hachioji-section-title {
  padding-top: 80px;
}
/* 折返し時の行重なりを防ぐ（継承line-heightが20px固定のため） */
#hachiojimatsuri .common-title-01 h2 {
  line-height: 1.5;
}
/* 英語ページのみ字間を詰める */
#hachiojimatsuri .common-title-01 h1:lang(en-US),
#hachiojimatsuri .common-title-01 h2:lang(en-US) {
  letter-spacing: 0.3rem;
}
.hachioji-lead {
  max-width: 900px;
  margin: 30px auto;
  padding: 0 10px;
}
.hachioji-lead p {
  font-size: 1.8rem;
  line-height: 4.2rem;
  font-weight: 700;
  letter-spacing: -0.12rem;
  text-align: center;
}
.hachioji-lead p:lang(en-US) {
  font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
  .hachioji-lead p {
    text-align: left;
  }
}

/* ---- セクション見出し ---- */
/* headline-01/02 のmarginを統一（共通CSSは 02 のみ下80pxのため） */
#hachiojimatsuri .headline-01,
#hachiojimatsuri .headline-02 {
  margin: 50px 0;
}

/* 長いタイトルでも折り返す（共通CSSの nowrap を当ページ限定で解除） */
/* line-height: 継承値が20px固定（html line-height:200%）のため、折返し時の行重なりを防ぐ */
#hachiojimatsuri .headline-01 .title h2,
#hachiojimatsuri .headline-02 .title h2 {
  white-space: normal;
  line-height: 1.2;
  /* 光学中央補正：letter-spacing(0.3rem)が末尾にも付き、中央揃え時に文字が半字分左へ寄るため */
  margin-right: -0.3rem;
}
#hachiojimatsuri .headline-01 .title > span,
#hachiojimatsuri .headline-02 .title > span {
  /* 同上：共通 * { letter-spacing:0.1rem } の末尾分 */
  margin-right: -0.1rem;
}
/* 韓国語ページのみ：ナンバーバッジの幅を縮小 */
#hachiojimatsuri .headline-02 .parallel-quadrangle-02:lang(ko-KR),
#hachiojimatsuri .parallel-quadrangle-01:lang(ko-KR) {
  width: 200px;
}

/* 英語ページのみ：ナンバーバッジを帯の下端基準に配置 */
#hachiojimatsuri .headline-02 .parallel-quadrangle-02:lang(en-US),
#hachiojimatsuri .parallel-quadrangle-01:lang(en-US) {
  top: auto;
  bottom: 0;
}

/* 英語ページのみ見出しを縮小（英文タイトルが長く折り返しやすいため） */
#hachiojimatsuri .headline-01 .title h2:lang(en-US),
#hachiojimatsuri .headline-02 .title h2:lang(en-US) {
  font-size: 2.7rem;
  letter-spacing: 0.1rem;
  /* 光学中央補正も字間0.1remに合わせて調整 */
  margin-right: -0.1rem;
}
/* SP時：画像付き見出しのh2が共通CSSの3.2remのままだと大きすぎるため縮小 */
@media screen and (max-width: 999px) {
  #hachiojimatsuri .headline-01 .title h2,
  #hachiojimatsuri .headline-02 .title h2,
  #hachiojimatsuri .headline-01 .title h2:lang(en-US),
  #hachiojimatsuri .headline-02 .title h2:lang(en-US) {
    font-size: 2.2rem;
  }
}

/* 見出し帯の写真：1199px以下は「画像上・タイトル下」に積み、高さ固定で帯内に収める
   （共通CSSは flex横並びのまま img width:100% になり、写真がはみ出すため） */
@media screen and (max-width: 1199px) {
  #hachiojimatsuri .headline-01 .flex.wrap,
  #hachiojimatsuri .headline-02 .flex.wrap {
    display: block;
  }
  #hachiojimatsuri .headline-01 .flex.wrap figure,
  #hachiojimatsuri .headline-02 .flex.wrap figure {
    width: 100%;
  }
  #hachiojimatsuri .headline-01 .flex.wrap figure img,
  #hachiojimatsuri .headline-02 .flex.wrap figure img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    margin: 0;
  }
  #hachiojimatsuri .headline-01 .title,
  #hachiojimatsuri .headline-02 .title {
    width: 85%;
    margin: 0 auto;
    text-align: center;
    padding: 30px 0;
  }
}
/* アイキャッチ（見出し画像）のPC/SP切替を1200pxに前倒し（共通CSSは999px切替のため、
   1000〜1199pxの帯のみ表示を反転。見出し以外の pc-only/sp-only には影響しない） */
@media screen and (min-width: 1000px) and (max-width: 1199px) {
  #hachiojimatsuri .headline-01 figure img.pc-only,
  #hachiojimatsuri .headline-02 figure img.pc-only {
    display: none;
  }
  #hachiojimatsuri .headline-01 figure img.sp-only,
  #hachiojimatsuri .headline-02 figure.sp-only {
    display: block;
  }
}

/* スマホ版（sp-only画像の表示域）はタイトル画像をさらに細く */
@media screen and (max-width: 999px) {
  #hachiojimatsuri .headline-01 .flex.wrap figure img,
  #hachiojimatsuri .headline-02 .flex.wrap figure img {
    height: 200px;
  }
}

/* ---- セクション見出し（画像なし見出し・現在は01のみ） ---- */
#hachiojimatsuri .hachioji-head .flex.wrap {
  justify-content: center;
}
#hachiojimatsuri .hachioji-head .title {
  width: auto;
  max-width: 72%;
  margin: 0 auto;
  padding: 48px 0;
  text-align: center;
}
/* 01のタイトルのみ横幅制限なし（SPの80%指定にも勝つよう2ID） */
#hachiojimatsuri #sec01 .hachioji-head .title {
  max-width: none;
}
#hachiojimatsuri .hachioji-head .title h2 {
  white-space: normal;
  font-size: 3rem;
}
@media screen and (max-width: 999px) {
  #hachiojimatsuri .hachioji-head .title {
    max-width: 80%;
    padding: 34px 0;
  }
  #hachiojimatsuri .hachioji-head .title h2 {
    font-size: 2rem;
  }
}

/* ---- セクション間の余白 ---- */
#hachiojimatsuri .hachioji-section {
  padding-bottom: 110px;
}

/* ---- スマホ時の左右余白（見出し帯 headline-01/02 は全幅のまま） ---- */
@media screen and (max-width: 767px) {
  #hachiojimatsuri .mainText,
  .hachioji-district-row,
  .hachioji-side-row,
  .hachioji-reference {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* 横並びラッパー内の本文は二重に余白を付けない */
  #hachiojimatsuri .hachioji-side-row__body .mainText {
    padding-left: 0;
    padding-right: 0;
  }
  /* パンフレットカードは端に接しないよう外側に余白 */
  #hachiojimatsuri .hachioji-pamphlet {
    margin-left: 20px;
    margin-right: 20px;
  }
}

/* ---- 本文まわり ---- */
#hachiojimatsuri .mainText {
  max-width: 1400px;
  width: 95%;
  margin: 0 auto;
  font-size: 15px;
  line-height: 34px;
  font-weight: bold;
}
#hachiojimatsuri .mainText p {
  font-size: 15px;
  line-height: 34px;
  font-weight: bold;
}
/* ---- ※注記 ---- */
#hachiojimatsuri .hachioji-note {
  font-size: 1.3rem;
  line-height: 2.2rem;
  color: #666;
  font-weight: 400;
  margin-top: 10px;
}

/* ---- 地区ごと（写真＋表）レイアウト ---- */
.hachioji-district-row {
  display: flex;
  flex-direction: column;
  gap: 60px;
  max-width: 1400px;
  margin: 60px auto 0;
}
/* 各地区内で「画像 ｜ 表」を横並び */
.hachioji-district {
  display: flex;
  width: 95%;
  margin: 0 auto;
  align-items: flex-start;
  gap: 32px;
}
/* 1つ目=画像左、2つ目=画像右…と交互（横並び時のみ） */
@media screen and (min-width: 901px) {
  .hachioji-district:nth-child(even) {
    flex-direction: row-reverse;
  }
}
.hachioji-district__img {
  flex: 0 0 55%;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  margin: 0;
  border: 5px solid #fff;
  box-shadow: 0 10px 26px rgba(0, 98, 117, 0.16);
}
.hachioji-district .hachioji-sched__col {
  flex: 1 1 0;
  min-width: 0;
}
.hachioji-district__img img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}
/* 900px以下で縦並びに */
@media screen and (max-width: 900px) {
  .hachioji-district-row {
    gap: 30px;
  }
  .hachioji-district {
    flex-direction: column;
    gap: 16px;
  }
  .hachioji-district__img {
    flex: 0 0 auto;
    width: 100%;
  }
  .hachioji-district__img img {
    height: 240px;
  }
}

/* ---- 本文＋表の横に画像（05〜07） ---- */
.hachioji-side-row {
  display: flex;
  flex-direction: row-reverse; /* DOM順は本文→画像のまま、表示は画像を左に */
  align-items: flex-start;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
}
/* 反転（05・07）：テキスト左・画像右 */
.hachioji-side-row--flip {
  flex-direction: row;
}
.hachioji-side-row__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
/* 内包した本文の中央寄せ幅指定を解除 */
.hachioji-side-row__body .mainText {
  max-width: none;
  margin: 0;
}
.hachioji-side-row .hachioji-district__img {
  flex: 0 0 45%;
}
/* 画像＋枠外注記のラッパー（06） */
.hachioji-side-row .hachioji-side-row__figcol {
  flex: 0 0 45%;
  min-width: 0;
}
.hachioji-side-row .hachioji-side-row__figcol .hachioji-district__img {
  flex: none;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .hachioji-side-row {
    flex-direction: column;
    gap: 24px;
  }
  .hachioji-side-row .hachioji-district__img,
  .hachioji-side-row .hachioji-side-row__figcol {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* ---- スケジュール（カードUI） ---- */
.hachioji-sched__col {
  flex: 1 1 0;
  min-width: 260px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
/* 地区見出し帯：大きくリッチに */
.hachioji-sched__area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: #01a29a;
  color: #fff;
  font-size: 2.1rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.5rem;
  padding: 16px 20px;
  border-radius: 6px;
}
.hachioji-sched__area::before,
.hachioji-sched__area::after {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.65);
}
/* 項目タイトル：白ボックスで囲まず、下線＋余白で表現 */
.hachioji-sched__card .ttl {
  font-size: 2.3rem;
  font-weight: 700;
  color: #006275;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid #01a29a;
}
.hachioji-sched__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px 22px;
  margin: 0;
}
.hachioji-sched__meta dt {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  background-color: #01a29a;
  border-radius: 3px;
  padding: 6px 20px;
  height: fit-content;
  white-space: nowrap;
  letter-spacing: 0.15rem;
}
.hachioji-sched__meta dd {
  font-size: 2rem;
  line-height: 3.4rem;
  font-weight: 500;
  margin: 0;
}
/* （）内の補足は少し小さく */
.hachioji-sched__meta dd small {
  font-size: 0.75em;
}
@media screen and (max-width: 767px) {
  .hachioji-sched__col {
    min-width: 100%;
    gap: 22px;
  }
  .hachioji-sched__area {
    font-size: 1.7rem;
    letter-spacing: 0.3rem;
    padding: 13px 16px;
    gap: 12px;
  }
  .hachioji-sched__area::before,
  .hachioji-sched__area::after {
    width: 18px;
  }
  .hachioji-sched__card .ttl {
    font-size: 1.9rem;
  }
  .hachioji-sched__meta dt {
    font-size: 1.5rem;
    padding: 4px 14px;
  }
  .hachioji-sched__meta dd {
    font-size: 1.7rem;
    line-height: 2.8rem;
  }
}

/* ---- 音声ガイドアプリ紹介（0716追記） ---- */
.hachioji-appguide {
  position: relative;
  overflow: hidden;
  max-width: 1400px;
  margin: 70px auto 0;
  background-color: #fff;
  border: 1px solid #e3ddcf;
  border-radius: 8px;
  padding: 44px 48px;
  box-shadow: 0 10px 28px rgba(0, 98, 117, 0.1);
}
.hachioji-appguide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #01a29a, #006275);
}
/* タイトルの左隣にアイコン */
.hachioji-appguide__head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 7px;
}
.hachioji-appguide__head .hachioji-appguide__ttl {
  margin-bottom: 0;
}
.hachioji-appguide__icon {
  flex: 0 0 100px;
  width: 100px;
  margin: 0;
}
.hachioji-appguide__icon img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.hachioji-appguide__body {
  flex: 1 1 auto;
  min-width: 0;
}
.hachioji-appguide__ttl {
  font-size: 2.4rem;
  font-weight: 700;
  color: #006275;
  line-height: 1.5;
  margin-bottom: 14px;
}
.hachioji-appguide__desc {
  font-size: 1.6rem;
  line-height: 2.8rem;
  font-weight: 700;
}
.hachioji-appguide__list {
  list-style: none;
  padding: 0;
  margin: 6px 0;
}
.hachioji-appguide__list li {
  position: relative;
  font-size: 1.6rem;
  line-height: 2.8rem;
  font-weight: 700;
  padding-left: 1.2em;
}
.hachioji-appguide__list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #01a29a;
}
/* 本文(左)＋紹介動画(右)の2カラム */
.hachioji-appguide__cols {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 30px;
}
.hachioji-appguide__main {
  flex: 1 1 auto;
  min-width: 0;
}
.hachioji-appguide__movie {
  margin-bottom: 10px;
  font-size: 1.5rem;
  font-weight: 700;
}
.hachioji-appguide__video {
  flex: 0 0 45%;
  max-width: 560px;
  min-width: 0;
}
.hachioji-appguide__video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 8px;
}
.hachioji-appguide__dl-ttl {
  margin-top: 22px;
  margin-bottom: 10px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #006275;
}
.hachioji-appguide__btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hachioji-appguide__btns .common-button02 {
  margin: 0;
  width: auto;
  max-width: none;
  font-size: 1.5rem;
  padding: 12px 100px 12px 24px;
}
@media screen and (max-width: 767px) {
  .hachioji-appguide {
    margin-left: 20px;
    margin-right: 20px;
    padding: 26px 18px;
    text-align: center;
  }
  .hachioji-appguide__head {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
  }
  .hachioji-appguide__icon {
    flex: 0 0 auto;
    width: 90px;
    margin: 0 auto;
  }
  .hachioji-appguide__ttl {
    font-size: 1.8rem;
  }
  .hachioji-appguide__list li {
    text-align: left;
  }
  .hachioji-appguide__cols {
    flex-direction: column;
    gap: 20px;
    padding: 0;
  }
  .hachioji-appguide__main,
  .hachioji-appguide__video {
    flex: 0 0 auto;
    width: 100%;
  }
  .hachioji-appguide__main {
    text-align: left;
  }
  .hachioji-appguide__video iframe {
    margin: 0 auto;
  }
  .hachioji-appguide__btns {
    justify-content: center;
  }
  .hachioji-appguide__btns .common-button02 {
    width: 100%;   
    padding: 15px 60px 15px 16px;
  }
  .hachioji-appguide__btns .common-button02::after {
    width: 30px;
    height: 9px;
    right: 12px;
  }
}

/* ---- パンフレット ダウンロード ---- */
.hachioji-pamphlet {
  position: relative;
  overflow: hidden;
  max-width: 1400px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #e3ddcf;
  border-radius: 8px;
  padding: 56px 60px;
  box-shadow: 0 10px 28px rgba(0, 98, 117, 0.1);
}
/* トップアクセントバー */
.hachioji-pamphlet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #01a29a, #006275);
}
.hachioji-pamphlet__inner {
  display: flex;
  align-items: center;
  gap: 56px;
}
.hachioji-pamphlet figure {
  flex: 0 0 340px;
}
.hachioji-pamphlet figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 5px solid #fff;
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  transform: rotate(-2deg);
}
.hachioji-pamphlet__body {
  flex: 1 1 auto;
}
.hachioji-pamphlet__ttl {
  font-size: 2.4rem;
  font-weight: 700;
  color: #006275;
  margin-bottom: 14px;
}
.hachioji-pamphlet__desc {
  font-size: 1.7rem;
  line-height: 3rem;
  color: #221714;
  margin-bottom: 58px;
}
.hachioji-pamphlet .common-button02 {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.6;
  max-width: 560px;
  padding-top: 16px;
  padding-bottom: 16px;
}
/* 高画質/軽量版 ダウンロードブロック（縦並び） */
.hachioji-pamphlet__dls {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hachioji-pamphlet__note {
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #666;
  margin-top: 8px;
  padding-left: 7px;
}
.hachioji-pamphlet .pdf-icon {
  width: 22px;
  height: auto;
  margin-right: 10px;
  vertical-align: middle;
}
/* スマホ時：カードを縦積み・中身を中央揃え・ボタンを小型化 */
@media screen and (max-width: 767px) {
  .hachioji-pamphlet {
    padding: 24px 18px;
  }
  .hachioji-pamphlet__inner {
    flex-direction: column;
    gap: 20px;
  }
  .hachioji-pamphlet figure {
    flex: 0 0 auto;
    max-width: 180px;
  }
  .hachioji-pamphlet__body {
    width: 100%;
    text-align: center;
  }
  .hachioji-pamphlet__dl {
    text-align: center;
  }
  .hachioji-pamphlet__dl .common-button02 {
    margin: 0 auto;
    padding: 10px 48px 10px 16px;
  }
  .hachioji-pamphlet__dl .common-button02::after {
    width: 30px;
    height: 9px;
    right: 12px;
  }
  .hachioji-pamphlet__dl .hachioji-pamphlet__note {
    text-align: center;
    padding-left: 0;
  }
}

/* ---- 参考文献（フッター直上・シンプル表記） ---- */
.hachioji-reference {
  max-width: 1380px;
  margin: 0 auto;
  margin-top: 30px;
}
.hachioji-reference h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #221714;
  margin-bottom: 6px;
}
.hachioji-reference ul {
  list-style: none;
  padding: 0;
}
.hachioji-reference li {
  position: relative;
  font-size: 1.3rem;
  line-height: 2.4rem;
  color: #555;
  padding-left: 1.2em;
}
.hachioji-reference li::before {
  content: "・";
  position: absolute;
  left: 0;
}
.hachioji-reference a {
  color: #01a29a;
  text-decoration: underline;
}

/* ---- 番号バッジ：共通CSSの1460px切替を1600pxに前倒し（1461〜1600px帯のみ補完） ---- */
/* 値は style.css の @media (max-width:1460px) 定義と同一。min-width で下限を切り、
   1460px以下（999px以下の right:-50px 等を含む）の共通挙動には干渉しない */
@media screen and (min-width: 1461px) and (max-width: 1600px) {
  #hachiojimatsuri .parallel-quadrangle-01 {
    width: 140px;
    padding: 15px 0;
    padding-left: 20px;
    height: 50px;
    right: 0;
    top: auto;
    bottom: 0px;
  }
  #hachiojimatsuri .headline-02 .parallel-quadrangle-02 {
    width: 140px;
    padding: 15px 0;
    height: 50px;
    left: auto;
    top: auto;
    bottom: 0px;
  }
}

/* ---- 関連する構成文化財（question/answer00 の poster-related と同一デザイン） ---- */
#hachiojimatsuri .poster-related {
  margin-top: 80px;
  padding-top: 100px;
  padding-bottom: 50px;
  background-color: #fff;
  /* wrap の内側から画面幅いっぱいに広げる */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
#hachiojimatsuri .poster-related-title {
  max-width: 1000px;
  width: 95%;
  margin: 0 auto;
  position: relative;
  top: -40px;
  color: #fff;
  background-color: #01a29a;
  transform: skewX(150deg);
  text-align: center;
  padding: 30px 0;
}
#hachiojimatsuri .poster-related-title span {
  display: block;
  font-weight: bold;
  transform: skewX(-150deg);
  font-size: 24px;
}
#hachiojimatsuri .poster-related-title::after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  pointer-events: none;
  border: solid transparent;
  border-top-width: 15px;
  border-bottom-width: 15px;
  border-left-width: 19px;
  border-right-width: 1px;
  border-top-color: #01a29a;
  margin: auto;
  right: 0;
  left: 0;
  top: 97%;
}
#hachiojimatsuri .poster-related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  max-width: 1000px;
  width: 95%;
  margin: 0 auto;
  padding-top: 30px;
}
#hachiojimatsuri .poster-related-list li {
  width: calc(100% / 3 - 14px);
}
#hachiojimatsuri .poster-related-list a {
  display: block;
  transition: 0.2s all;
}
#hachiojimatsuri .poster-related-list a:hover {
  opacity: 0.8;
}
#hachiojimatsuri .poster-related-list img {
  width: 100%;
  height: 223px;
  object-fit: cover;
  border-radius: 5px;
  object-position: top;
}
#hachiojimatsuri .poster-related-list h3 {
  font-weight: bold;
  padding-top: 5px;
}
@media only screen and (max-width: 999px) {
  #hachiojimatsuri .poster-related-list li {
    width: calc(100% / 2 - 14px);
  }
}
@media only screen and (max-width: 767px) {
  #hachiojimatsuri .poster-related-list li {
    width: 100%;
  }
}