.footer__wrap {
  /* border-top: solid 2px var(--c-ink); */
  background-color: #000;
  color: #fff;
  margin-top: 50px;
}

.footer__flex {
  display: flex;
  justify-content: space-between;
  max-width: 1100px;
  width: 95%;
  margin: 0 auto;
  padding: 30px 0 0px;
}

.footer__left {
  width: 70%;
  /* font-weight: 600;*/
}

.footer__logo {
  min-width: 104px;
  width: 200px;
}

.footer__address {
  margin: 38px 0px 0px 6px;
}

.footer__address-box {
  line-height: 1.8;
  margin-bottom: 28px;
}

.footer__right {
  width: 40%;
  margin-top: 30px;
  /* font-weight: 500;*/
}

.footer__right a {
  display: inline-block;
  white-space: nowrap;
  padding-bottom: 5px;
  color: #fff;
}

.footer__list {
  display: flex;
  margin-top: 5px;

}

.footer__ul {
  padding-left: 4.6%;
  /*border-left: solid 1px #e6e6e6;*/
  width: 200px;
}

.footer__list .footer__ul:nth-child(1) {
  padding-right: 9.3%;
}

.footer__list .footer__ul:nth-child(2) {
  padding-right: 3.5%;
}

.footer__list .footer__ul:nth-child(3) {
  /*padding-right: 0.7%;*/
  padding-right: 4%;
}

.footer__list .footer__ul:nth-child(4) {
  padding-right: 0%;
}

.footer__li:before {
  content: "";
  /* 空の要素作成 */
  width: 10px;
  /* 幅指定 */
  height: 10px;
  /* 高さ指定 */
  display: inline-block;
  /* インラインブロックにする */
  background-color: #fff;
  /* 背景色指定 */
  border-radius: 50%;
  /* 要素を丸くする */
  position: relative;
  /* 位置調整 */
  top: -1px;
  /* 位置調整 */
  margin-right: 5px;
  /* 余白指定 */
}

.footer__li-top {
  /* font-weight: 900;*/
  margin-top: 5px;
  margin-bottom: 33px;
}

.footer__li {
  font-size: 14px;
  /* font-weight: 600;*/
  margin-bottom: 21px;
  display: flex;
  align-items: baseline;
}

.footer__li:last-child {
  margin-bottom: 0px;
}

.footer__copyright {
  text-align: center;
  font-size: 14px;
  letter-spacing: .8px;
  color: #000;
  padding: 30px 0;
  background-color: #fff;
}

/*
@media screen and (max-width: 1070px) {
  .footer__flex {
    justify-content: center;
    width: 95%;
  }

  .footer__ul {
    padding-left: 2%;
  }

  .footer__list .footer__ul:nth-child(1) {
    padding-right: 4%;
  }
}

@media screen and (max-width: 880px) {
  .footer__flex {
    width: 100%;
  }

  .footer__left {
    width: 20%;
  }

  .footer__logo {
    margin-left: 10px;
  }

  .footer__right {
    width: 80%;
  }
}*/

@media screen and (max-width: 768px) {
  .footer__flex {
    width: 90%;
    flex-direction: column;
    padding: 11% 0px 8%;
  }

  .footer__left {
    width: 100%;
  }

  .footer__logo {
        min-width: auto;
        width: 100%;
        margin-left: 0;
  }

  .footer__address {
    margin: 9% 0px 0px 2%;
    font-size: 4.2vw;
  }

  .footer__address-box {
    margin-bottom: 7%;
  }

  .footer__right {
    width: 100%;
    margin-top: 3%;
  }

  .footer__list {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }

  .footer__ul {
    width: 45%;
    padding-left: 4%;
    margin-bottom: 10%;
  }

  .footer__list .footer__ul:nth-child(-n + 4) {
    padding-right: 0%;
  }

  .footer__li-top {
    font-size: 4.2vw;
    margin-top: 3%;
    margin-bottom: 18%;
  }

  .footer__li {
    font-size: 3.5vw;

    margin-bottom: 14%;
    letter-spacing: -0.3vw;
  }

  .footer__copyright {
    font-size: 3.7vw;
    font-weight: 400;
    margin-bottom: 7%;
  }
}
/* =========================================================
   フッター3カラム（完成イメージ準拠）

   左：開催情報／中央：ナビ／右：主催・共催・後援
   カラム間に細いゴールドの縦線を入れて区切る。
   ========================================================= */

#footer {
  background-color: #0B0B0B;
  color: var(--c-text-light);
  padding: clamp(64px, 6vw, 92px) 5% 0;
  border-top: 1px solid rgba(185, 149, 72, .25);
}

#footer .footer__wrap {
  max-width: 1280px;
  margin: 0 auto;
}

#footer .footer__flex {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.1fr;
  gap: 0;
  align-items: start;
}

#footer .footer__left,
#footer .footer__right {
  padding: 0 clamp(20px, 3vw, 48px);
}

#footer .footer__left {
  padding-left: 0;
}

#footer .footer__right {
  padding-right: 0;
  border-left: 1px solid rgba(185, 149, 72, .25);
}

#footer .footer__left + * {
  border-left: 1px solid rgba(185, 149, 72, .25);
}

#footer .footer__logo {
  width: 220px;
  margin-bottom: var(--sp-md);
}

#footer .footer__address {
  display: block;
}

#footer .footer__address-box {
  font-size: var(--fs-xs);
  line-height: 2;
  color: rgba(245, 245, 245, .78);
  margin-bottom: var(--sp-md);
}

#footer .footer__list {
  display: flex;
  gap: clamp(20px, 3vw, 48px);
}

#footer .footer__ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#footer .footer__li a {
  display: block;
  padding: 7px 0;
  font-size: var(--fs-xs);
  color: rgba(245, 245, 245, .82);
  text-decoration: none;
  transition: color .3s ease;
}

#footer .footer__li a:hover {
  color: var(--c-gold-deep);
}

#footer .footer__copyright {
  margin-top: clamp(48px, 5vw, 72px);
  padding: var(--sp-md) 0;
  border-top: 1px solid rgba(185, 149, 72, .25);
  text-align: center;
  font-size: var(--fs-xs);
  color: rgba(245, 245, 245, .5);
}

@media screen and (max-width: 992px) {
  #footer .footer__flex {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
  }

  #footer .footer__left,
  #footer .footer__right,
  #footer .footer__left + * {
    padding: 0;
    border-left: 0;
  }

  #footer .footer__list {
    flex-wrap: wrap;
  }
}

/* 旧テーマの背景指定が内側に残り、
   墨黒(#0B0B0B)・純黒(#000)・白 の3色が混在していたため打ち消す。
   フッターの地色は #footer の1枚だけにする。 */
#footer .footer__wrap,
#footer .footer__flex,
#footer .footer__left,
#footer .footer__right,
#footer .footer__list,
#footer .footer__ul,
#footer .footer__li,
#footer .footer__address,
#footer .footer__address-box,
#footer .footer__logo,
#footer .footer__copyright,
#footer .gtranslate_wrapper {
	background-color: transparent;
	background-image: none;
}

#footer .footer__copyright {
	color: rgba(245, 245, 245, .5);
}

#footer .footer__copyright p {
	color: inherit;
}

/* =========================================================
   スマホのフッター（2026-08-15 追記）
   ========================================================= */

@media screen and (max-width: 768px) {

  /* .footer__li が display:flex なので、10px の丸(::before)が
     flex アイテムとして潰され、細い縦棒に見えていた。
     文字数の多い項目（お問合せ／プライバシーポリシー）で顕著。 */
  #footer .footer__li::before {
    flex: 0 0 10px;
  }

  /* リンクを nowrap のままにすると列幅(約137px)を超えるため折り返す */
  #footer .footer__right a,
  #footer .footer__li a {
    white-space: normal;
  }

  /* 旧テーマの letter-spacing:-0.3vw で字送りが -1.17px まで詰まり、
     日本語がべったり繋がって読めなくなっていた。 */
  #footer .footer__li {
    letter-spacing: normal;
    font-size: var(--fs-xs);
    margin-bottom: 6px;
    align-items: baseline;
  }

  /* 住所ブロックとリンク列の間が110px空いていたので詰める。
     内訳は 住所の margin-bottom 32px ＋ グリッドの gap 64px。
     横並びのときの列間隔がそのまま縦の隙間になっていた。 */
  #footer .footer__flex {
    gap: var(--sp-md);
  }

  #footer .footer__left > .footer__address {
    margin-bottom: 0;
  }

  #footer .footer__left .footer__address-box:last-child {
    margin-bottom: 0;
  }

  #footer .footer__right {
    margin-top: 0;
  }

  #footer .footer__list {
    margin-top: 0;
    gap: var(--sp-sm) var(--sp-md);
  }

  #footer .footer__ul {
    width: calc(50% - var(--sp-md));
    padding-left: 0;
    margin-bottom: 0;
  }

  /* 固定表示の言語スイッチャーがコピーライトに重なるため下を空ける */
  #footer .footer__copyright {
    margin-bottom: 0;
    padding-bottom: 76px;
  }
}

/* =========================================================
   フッターの列割りを実体に合わせる（2026-08-17 追記）

   grid-template-columns は 1.2fr 1fr 1.1fr の3列だが、
   .footer__flex の子は .footer__left と .footer__right の2つしかない。
   3列目（主催・共催・後援）はクライアント指示でこの日に外したため、
   右端に 1.1fr の空列が残り、ナビが真ん中の 1fr に押し込まれていた。

   そこへ旧テーマの .footer__right{width:40%} が重なり、
   列のさらに40%（実測195px）まで縮小。中の <ul> は
   旧テーマの width:200px のままなので、2列＋gap で361px。
   結果、箱から約165px はみ出していた（全デスクトップページで発生）。

   追記位置は必ずファイル末尾。上のメディアクエリより後ろに
   素の指定を置くと打ち消し合うため。
   ========================================================= */

#footer .footer__flex {
  grid-template-columns: 1.2fr 1fr;
}

#footer .footer__right {
  /* 旧テーマの 40% を解除し、グリッド列いっぱいを使う */
  width: 100%;
  margin-top: 0;
}

#footer .footer__ul {
  /* 旧テーマの固定 200px を解除。中身なりの幅にして折り返せるようにする */
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

#footer .footer__list {
  /* 列に余裕ができたぶん、2列が離れすぎないよう上限を持たせる */
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 72px);
}

/* nth-child の padding-right（9.3%／3.5%／4%）は
   4列だった頃の名残で、2列では右側に不要な余白を作る */
#footer .footer__list .footer__ul {
  padding-right: 0;
  padding-left: 0;
}

@media screen and (max-width: 992px) {
  #footer .footer__flex {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   フッターの調整（2026-08-19 クライアント指摘）

   ・ナビ左の白い「●」を外す。細い線と矢印で組んだ他の要素に対して
     白丸だけが強く見えるため（指摘そのまま）。
     旧テーマの :before なので、消したぶんの余白は詰める。
   ・公式SNS（Instagram / X）のボタンをフッターにも置く。
   ========================================================= */

html body #footer .footer__li:before {
  display: none;
}

html body #footer .footer__li {
  align-items: center;
}

.footer__sns {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  gap: 12px;
}

.footer__sns li {
  margin: 0;
}

.footer__sns a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(184, 149, 69, .55);
  border-radius: 50%;
  transition: background-color .3s ease, border-color .3s ease;
}

.footer__sns a:hover,
.footer__sns a:focus-visible {
  background-color: rgba(184, 149, 69, .18);
  border-color: var(--c-gold);
}

/* Xのロゴは原寸が正方形でないため、fill だと縦に潰れる */
.footer__sns img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

@media screen and (max-width: 768px) {

  .footer__sns {
    margin-top: 18px;
    justify-content: center;
  }
}

/* Xのロゴは黒一色のwebp。ヒーローでは白い丸の上に置くので問題ないが、
   フッターは黒地に透明の丸なので、そのままでは見えない。白へ反転する。
   （Instagramはカラーのままにするので、Xだけに当てる） */
.footer__sns-x {
  filter: brightness(0) invert(1);
}

/* =========================================================
   2026-08-25｜フッターのロゴに height:auto を明示する
   ---------------------------------------------------------
   同日、CLS（読み込み中のガタつき）対策として footer.php のロゴに
   原寸 width=800 height=138 を書き足した。
   ところが幅は CSS（#footer .footer__logo で 220px）が上書きするのに、
   高さは CSS に指定が無く HTML の 138px がそのまま使われるため、
   220×138 に引き伸ばされてしまった（ヘッダー側は .header__logo img に
   height:auto があったので無事だった）。

   height を auto に戻せば、属性から縦横比だけを受け取って
   220×38 の正しい形に戻る。属性は残るので CLS 対策は効いたまま。
   ========================================================= */

.footer__logo img,
#footer .footer__logo img {
	height: auto;
}