/*=====================
共通
=====================*/
/*フォント*/
div#container {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*フォントサイズ統一 10px=1rem*/
main#page-body {
  font-size: 10px;
}

/*=====================
mv
=====================*/

/* ========== Hero 土台 ========== */
.c-hero {
  position: relative;
}

.c-hero .splide__track {
  height: clamp(280px, 45vw, 900px);
  overflow: hidden;
}


.c-hero .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c-hero__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.c-hero__svg {
  width: min(70vw, 680px);
  height: auto;
  opacity: .95;
}

.c-hero__title {
  margin: 0;
  color: #fff;
  font-weight: 800;
  letter-spacing: .1em;
  font-size: 4.5rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

.c-hero__subtitle {
  margin: .2em 0 0;
  color: #fff;
  letter-spacing: .18em;
  font-weight: 700;
  font-size: 2rem;
}

/* ========== 上書き用トークン（CSS変数） ========== */
.c-hero__svg {
  --map-stroke: #fff;
  --map-stroke-width: 2.0;
  --map-fill: rgba(255, 255, 255, .20);
  --reveal-dur: 1.8s;
  --reveal-delay: 0s;
  --speed-pink: #ff5fa2;
  --speed-green: #22e39e;
  --speed-dash: 60;
  --speed-gap: 220;
  --speed-dur-pink: 1s;
  --speed-dur-green: .9s;
}

/* ========== 地図：塗り＆線（マスクで左→右に描く） ========== */
/* 塗りは後からフェードイン（タイミングは reveal の 60% 後） */
.map__fill {
  opacity: 0;
  animation: map-fill .6s ease forwards;
  animation-delay: calc(var(--reveal-dur) * 0.6);
}

.map__fill * {
  fill: var(--map-fill) !important;
}

@keyframes map-fill {
  to {
    opacity: 1;
  }
}

/* 線は静的（描画はマスクで制御） */
.map__stroke * {
  fill: none !important;
  stroke: var(--map-stroke) !important;
  stroke-width: var(--map-stroke-width);
  vector-effect: non-scaling-stroke;
}

/* 左→右マスク（CSSアニメで width:0→100%） */
.reveal__rect {
  animation: reveal-lr var(--reveal-dur) ease-out forwards;
  animation-delay: var(--reveal-delay);
}

@keyframes reveal-lr {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

/* ========== 疾走ライン（右→左に流す・変数で上書き可） ========== */
.speed {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--speed-dash) var(--speed-gap);
  animation: speed-move 1s linear infinite;
  opacity: .95;
}

.speed--pink {
  stroke: var(--speed-pink);
  animation-duration: var(--speed-dur-pink);
}

.speed--green {
  stroke: var(--speed-green);
  animation-duration: var(--speed-dur-green);
}

@keyframes speed-move {
  to {
    stroke-dashoffset: calc(-1 * (var(--speed-dash) + var(--speed-gap)));
  }
}

/* ========== アニメ抑制対応 ========== */
@media (prefers-reduced-motion: reduce) {

  .reveal__rect,
  .map__fill,
  .speed {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/*=====================
navi
=====================*/
ul.navi_menu_inner {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 0 auto;
  padding: 1.5rem 0 1.5rem 0;
  background: #70707082;
  letter-spacing: 0.2rem;
}

ul.navi_menu_inner li {
  font-size: 1.8rem;
  font-weight: bold;
}

li.navigation_item a {
  color: #000;
}

ul.c-navigation__list {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  font-size: 1.8rem;
  font-weight: 300;
  padding: 2.5rem 0 2.5rem 0;
}

li.c-navigation__item a {
  color: #000;
  letter-spacing: 0.5rem;
  text-decoration: none;
}

/*=====================
スライダー
=====================*/
/* === Keyframes === */
@keyframes scrollInfinity-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes scrollInfinity-right {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}


ul.c-scrollInfinity__list.c-scrollInfinity__list--left {
  gap: 5px;

}

.c-scrollInfinity__wrap {
  display: flex;
  overflow: hidden;
}

.c-scrollInfinity__list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  will-change: transform;
}

.c-scrollInfinity__list--left {
  animation: scrollInfinity-left 80s linear infinite;
}

.c-scrollInfinity__list--right {
  animation: scrollInfinity-right 90s linear infinite;
}

.c-scrollInfinity--text .c-scrollInfinity__list--right {
  animation-direction: reverse;
}

.c-scrollInfinity--photo .c-scrollInfinity__item {
  width: calc(150vw / 6);
  flex: 0 0 auto;
}

.c-scrollInfinity--photo .c-scrollInfinity__item>img {
  width: 100%;
  display: block;
}

.c-scrollInfinity--text .c-scrollInfinity__item {
  flex: 0 0 auto;
  font-family: 'M PLUS 1p';
  font-weight: bold;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 8vw, 20rem);
  color: #E5F2F9;
  -webkit-text-stroke: .05em currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .c-scrollInfinity__list {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/*=====================
はじめのあいさつ
=====================*/
.l-center p {
  font-size: 2.0rem;
  text-align: center;
}

.l-left p {
  font-size: 2.0rem;
  text-align: left;
}

section#purpose {
  background: url(../image/yamaneko_31/bg-wave.png) center / cover no-repeat;
  padding-block: clamp(32px, 6vw, 80px);
}

h2#news-heading {
  text-align: center;
  font-size: 3.2rem;
}

/*=====================
新着情報
=====================*/
span.font-c-skyblue {
  display: block;
  font-size: 1.8rem;
  color: #45B3EE;
}


/*お知らせ一覧*/

/* レイアウト */
.l-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}

/*本体 */
.c-news {
  margin-top: 5.1rem;
  margin-bottom: 10.3rem;
}

.c-news__title {
  font-weight: 700;
  margin-bottom: 3.1rem;
}

/* リスト外枠の点線（上端・下端） */
.c-news__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px dotted var(--line, #BFBFBF);
}

/* 行の背景と内部グリッド */
.c-news__item {
  background: var(--row-bg, #f5fbff);
}

.c-news__item+.c-news__item {
  border-top: 1px dotted var(--line, #cfdbe3);
}

.c-news__link {
  display: grid;
  grid-template-columns: 16ch 1fr;
  gap: 2rem;
  align-items: baseline;
  padding: 20px 20px;
  text-decoration: none;
  color: inherit;
  font-size: 1.5rem;
}

.c-news__date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 本文は1行省 */
.c-news__headline {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-news__link:hover {
  opacity: .9;
}

.c-news__link:focus-visible {
  outline: 2px solid var(--focus, #009a93);
  outline-offset: 2px;
}

li.c-news__item a {
  text-decoration: none;
}

.c-news__container {
  margin: 0 auto;
}

/* actions コンテナ*/
.news__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2.8rem;
  justify-content: center;
}

/* 共通ボタン */
.news__actions .c-btn {
  display: inline-flex;
  align-items: center;
  padding: 2.5rem 5.5em;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: 0.2rem;
  line-height: 1;
  text-decoration: none;
  border: 0;
  transition: background-color .2s ease, box-shadow .2s ease, transform .06s ease, filter .2s ease;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.news__actions .c-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(67, 182, 240, .35);
}

.news__actions .c-btn:active {
  transform: translateY(1px);
}

/*RSS*/
.news__actions .c-btn.c-btn--ghost {
  background: #EAF5FB;
  color: #111827;
}

.news__actions .c-btn.c-btn--ghost:hover {
  filter: brightness(.97);
}

/* プライマリ*/
.news__actions .c-btn.c-btn--primary {
  background: #43B6F0;
  color: #fff;
}

.news__actions .c-btn.c-btn--primary:hover {
  background: #2CA4E6;
}

/* モバイル */
@media (max-width:480px) {
  .news__actions {
    gap: 10px;
  }

  .news__actions .c-btn {
    padding: .64em 1.1em;
    font-size: 15px;
  }
}

/*=====================
第31回 竹富町やまねこマラソン大会
=====================*/
h2#overview-heading {
  text-align: center;
  font-size: 3.4rem;
  background: #ffffff82;
  padding: 3.0rem 0 3.0rem 0;
}

p.c-event-overview__place-label {
  font-size: 2.2rem;
  margin-top: 1.5rem;
}

p.c-event-overview__place-name {
  font-size: 2.8rem;
}

.c-event-overview__place {
  text-align: center;
}


/* カード本体（青い背景） */
.c-event-card {
  background: #1667C6;
  color: #fff;
  border-radius: 24px;
  padding: 22px 24px 20px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .1);
  width: 45%;
}

/* レイアウト */
.c-event-card__item-flex {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
}

/* 白い数字タイル */
.c-event-card__tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border-radius: 20px;
  padding: 12px 22px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
  width: 50%;
}

.c-event-overview__cta {
  text-align: center;
}

.c-event-card__digit {
  font-weight: 900;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1;
  color: #0F59A8;
  letter-spacing: .02em;
}

.c-event-overview__cta a {
  text-decoration: none;
  font-size: 2.0rem;
  padding: 2.0rem 0 2.0rem 0;
  border: 4px solid #4CB6EE;
  display: block;
  border-radius: 51px;
  width: 33%;
  text-align: center;
  margin: 2.5rem auto 0;

}

/* 中央の点線 */
.c-event-card__sep {
  width: 0;
  border-left: 2px solid rgb(0 96 198 / 45%);
  border: 1px dotted #1667c6;
  height: 65px;
  width: 0;
}

/* 右側「km」 */
.c-event-card__unit {
  font-weight: 800;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1;
  white-space: nowrap;
}

/* 下の定員 */
.c-event-card__cap {
  margin: 14px 0 0;
  text-align: center;
  font-size: clamp(14px, 1.3vw, 18px);
}

.c-event-card__cap strong {
  font-weight: 800;
}


p.c-event-overview__total {
  font-size: 2.8rem;
  background: #ffffff8a;
  padding: 1.2rem 0 1.2rem 0;
  border-radius: 23px;
  text-align: center;
}

span.font-size-l.font-c-blue {
  font-size: 4.2rem;
  font-weight: bold;
  color: #004B9F;
}

ul.c-event-overview__cards {
  display: flex;
  gap: 20px;
  justify-content: center;
}

/* スマホ調整 */
@media (max-width:600px) {
  .c-event-card {
    padding: 18px;
  }

  .c-event-card__item-flex {
    gap: 14px;
  }

  .c-event-card__tile {
    padding: 10px 16px;
    gap: 14px;
  }
}


/*=====================
テーブル
=====================*/
/* 視覚的に隠す（アクセシビリティ用） */
.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
}

/* テーブル（定義表） */
.c-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.c-table--def {
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
  border-left: none;
  border-right: none;
}


table.c-table.c-table--def {
  margin-top: 8rem;
}

.c-table--def th {
  border-left: none;
}

.c-table--def tbody tr+tr {
  border-top: 1px solid #E5E7EB;
}

.c-table__key,
.c-table__val {
  padding: 12px 16px;
  vertical-align: top;
}

/* 左列（青・太字・固定幅） */
.c-table__key {
  width: 8em;
  color: #004097;
  font-weight: 700;
  font-size: 1.8rem;
  text-align: left;
  white-space: nowrap;
}

/* 右列（本文） */
.c-table__val {
  color: #111827;
  line-height: 1.9;
  font-size: 1.8rem;
}

th.c-table__key {
  background: #fff;
}

/* モバイル：縦積み */
@media (max-width:640px) {
  .c-table--def {
    border-top: none;
    border-bottom: none;
  }

  .c-table--def tbody tr+tr {
    border-top: 1px solid #E5E7EB;
  }

  .c-table__key {
    display: block;
    width: auto;
    padding: 12px 0 4px;
  }

  .c-table__val {
    display: block;
    padding: 0 0 12px;
  }
}

/* 竹富やまねこ「大会関係団体」テーブルだけに適用 */
.p-yamaneko-marathon__meta .c-table__key {
  position: relative;
  /* 擬似要素の基準にする */
  padding-right: 16px;
  /* 線との余白 */
  border-right: 0;
  /* 既存の区切り線を無効化（あれば） */
}

.p-yamaneko-marathon__meta .c-table__key::after {
  content: "";
  position: absolute;
  right: 0;
  top: 8px;
  /* ← 短さ調整（上の余白）*/
  bottom: 8px;
  /* ← 短さ調整（下の余白）*/
  width: 1px;
  background: #D1D5DB;
  /* 線の色 */
}

.p-yamaneko-marathon__meta .c-table__val {
  padding-left: 16px;
  /* 線から本文を少し離す */
}

@media (max-width: 640px) {
  .p-yamaneko-marathon__meta .c-table__key::after {
    display: none;
  }

  /* 縦積み時は非表示 */
}

td.c-table__val {
  border-left: none;
  border-right: none;
}

/*=====================
協賛バナー
=====================*/
/* 見出しを視覚的に隠す（他で使ってるのと同じ） */
.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
}

/* セクションの余白はサイト基準に合わせて調整してOK */
.c-sponsors {
  padding: 12px 0 24px;
}

/* グリッド：PCは4列、狭いときは2列へ */
.c-sponsors__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  margin-bottom: 17.8rem;
}

/* ロゴアイテムの箱（高さを揃えてセンター） */
.c-sponsors__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 86px;
  /* ロゴの見た目高さに合わせて微調整 */
}

/* PNGロゴは縦の最大値で揃えて、横は比率維持 */
.c-sponsors__img {
  display: block;
  max-width: 100%;
  max-height: 56px;
  /* ここを変えると全体の揃い感が変わる */
  width: auto;
  height: auto;
  object-fit: contain;
}

/* 2列ブレイク */
@media (max-width: 720px) {
  .c-sponsors__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 20px;
  }

  .c-sponsors__item {
    min-height: 72px;
  }

  .c-sponsors__img {
    max-height: 48px;
  }
  .c-event-overview__item {
  display: block;
  justify-content: center;
  gap: 30px;
  max-width: 100%;
  margin: 2.9rem auto 3.6rem;
}
}

.cp-btn {
  width: 60%;
  margin: 10rem auto 10rem;
}
@media (max-width: 720px) {
  .cp-btn {
  width: 60%;
  margin: 10rem auto 10rem;
}
}


img.overview__item {
  width: 35%;
}

section.c-event-overview.p-yamaneko-marathon__overview {
  background: url(../image/yamaneko_31/bk02.jpg) center / cover no-repeat;
  padding-block: clamp(32px, 6vw, 80px);
}

/*ボタン*/
.c-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 1em 2.5em;
  font-size: 1.25rem;
  font-weight: 600;
  color: #222;
  text-decoration: none;
  border-radius: 9999px;
  background-color: #fff;
  line-height: 1.4;
  transition: all 0.3s ease;
}

.c-btn--outline {
  border: 3px solid #4db6f2;
}

.c-btn--outline:hover {
  background-color: #E8F5FF;
  color: #000;
}

/* 1920px 以上（ワイド画面） */
@media screen and (min-width: 1920px) {
  .c-btn {
    padding: 1.2em 3.5em;
    font-size: 1.5rem;
  }
}

/* 1280px 以下（ノートPCサイズ） */
@media screen and (max-width: 1280px) {
  .c-btn {
    padding: 0.9em 2em;
    font-size: 1.125rem;
  }
}

/*mv追随*/
.c-navigation {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.7);
  /* ← 白を70%透かす */
  backdrop-filter: blur(6px);
  /* ← 背景をぼかす（サポートブラウザで有効） */
  -webkit-backdrop-filter: blur(6px);
  /* Safari対応 */
}

.c-navigation__list {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 1rem;
  margin: 0;
  list-style: none;
}

.c-navigation__item a {
  font-weight: 600;
  color: #222;
  text-decoration: none;
}

.c-hero .c-navigation {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  z-index: 30;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}


.c-navigation.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  transform: none;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}


/*ヘッダー*/
/* ヒーローの上に重ねる前提 */
.c-hero {
  position: relative;
}

/* 帯全体（上部に薄く被せる） */
.c-hero__head {
  position: absolute;
  width: 100%;
  z-index: 40;
  background: linear-gradient(180deg, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .70) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}

/* 中身のレイアウト */
.c-hero__headInner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px clamp(12px, 3vw, 24px);
  margin-top: 10px;
  margin-bottom: 10px;
}

.head__brand {
  position: relative;
  /* 擬似要素の基準に */
  display: inline-block;
  isolation: isolate;
  /* ← ここが肝 */
}

.head__brand::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 180px;
  height: 180px;
  right: 100%;
  background: #ffffffab;
  border-radius: 50%;
  z-index: 0;
  mix-blend-mode: multiply;
}

.head__logo {
  position: relative;
  z-index: 1;
  /* 画像を前面に */
  width: clamp(100px, 20vw, 160px);
  /* レスポンシブ対応 */
  height: auto;
}


/* 左：ロゴ＋タイトル */
.head__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.head__title {
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .02em;
  color: #145bb6;
  /* 濃いめの青 */
  font-size: clamp(18px, 2.2vw, 28px);
}

/* 右：日付ピル */
.head__badge {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .95);
  white-space: nowrap;
}

.head__badge em {
  font-style: normal;
  font-weight: 700;
  color: #2a78c9;
  font-size: 2.5em;
}

.head__badge strong {
  font-weight: 800;
  color: #1e4ea4;
  font-size: 3.2rem;
}

/* 下辺の細い青ライン（スクショの“境界”） */
.head__rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
}

/* 1280↔1920のサイズ感チューニング */
@media (min-width: 1920px) {
  .c-hero__head {
    width: 100%;
  }

  .head__badge {
    padding: 10px 18px;
  }
}

@media (max-width: 768px) {
  .c-hero__headInner {
    padding-block: 6px;
    position: relative;
  }

  .head__badge {
    font-size: .9rem;
  }

  .u-sp {
    display: none;
  }
}

img.head__logo {
  width: 50%;
  position: relative;
  left: 22%;
}

img.head__logo.top-logo-icon {
    width: 13%;
    top: -5px;
    position: absolute;
    /*left: 2.3%;*/
  left: 5%
}

span.head__badge {
  font-size: 3.5rem;
  font-weight: bolder;
  color: #00489E;
  -webkit-text-stroke: 0.9px currentColor;
  letter-spacing: 0.1rem;
  border: 1px solid #BFBFBF;
}

span.c-count__num {
  font-size: 2.5rem;
}

span.c-count {
  letter-spacing: -0.1rem;
}

/*余白なくし*/
.c-scrollInfinity--text .c-scrollInfinity__item {
  line-height: 1.0;
  margin: 0;
}

img.btn-sp {
  display: none;
}

@media(max-width:780px) {
  img.btn-sp {
    display: block;
  }

  img.btn-pc {
    display: none;
  }

}

/* ===== MV上のPNGエントリーボタン ===== */
.c-hero {
  position: relative;
  --nav-h: 56px;
}

/* ナビの高さ（重なり回避用） */

.c-entryPng {
    position: fixed;
    right: min(8vw, 110px);
    bottom: calc(var(--nav-h) + 16px);
    z-index: 60;
    display: block;
    width: clamp(96px, 14vw, 350px);
    aspect-ratio: 1 / 1;
    transform: translateZ(0);
    transition: transform .15s ease, filter .2s ease;
    top: 25vw;
}

.c-entryPng img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .25));
}

.c-entryPng:hover {
  transform: translateY(-2px) scale(1.02);
}

.c-entryPng:active {
  transform: translateY(-1px) scale(.99);
}

@media (max-width: 768px) {
  .c-hero {
    --nav-h: 44px;
  }

  .c-entryPng {
    right: 12px;
    bottom: calc(var(--nav-h) + 12px);
    width: clamp(84px, 20vw, 140px);
  }
}

/*テスト*/
/* ====== アニメ全体のタイミング ====== */
.c-hero__svg {
  --trace-dur: 2.2s;
  /* 線を1周描く時間 */
  --settle-delay: 0s;
  /* 必要なら待機を足す */
}

/* ====== 線：1周トレース → 定着 ====== */
.map__stroke * {
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.map__stroke path {
  /* pathLength="1" を使って 0…1 で制御 */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: map-trace var(--trace-dur) linear forwards;
  animation-delay: var(--settle-delay);
}

@keyframes map-trace {
  to {
    stroke-dashoffset: 0;
  }

  /* 描き終わって定着 */
}

/* 下→上に現れる（マスク矩形を拡大） */
.revealY {
  transform: scaleY(0);
  transform-origin: 50% 100%;
  animation: revealY var(--trace-dur) ease-out forwards;
}




@keyframes revealY {
  to {
    transform: scaleY(1);
  }
}

/* ====== 塗り：線が描かれた直後にふわっと浮き上がる ====== */
.map__fill {
  opacity: 0;
  transform: translateY(8px) scale(.985);
  filter: blur(8px) saturate(120%);
  transition: none;
  animation: fill-lift .7s ease-out forwards;
  animation-delay: calc(var(--trace-dur) - .2s);
}

@keyframes fill-lift {
  to {
    opacity: .4;
    /* 既存opacityと同等 */
    transform: none;
    filter: none;
  }
}

/* ====== 疾走ライン ====== */
.speedlines {
  opacity: .95;
}

.speedlines .speed-base line {
  stroke: rgba(255, 255, 255, .18);
  stroke-width: 2;
  stroke-linecap: round;
}

.speedlines .speed-colored line {
  stroke: url(#speedGrad);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 60 210;
  /* 画像イメージに近い短いフラグメント */
  animation: dash-move 1.2s linear infinite;
}

/* ラインごとに少し位相と長さをズラす */
.speedlines .speed-colored line:nth-child(3n+1) {
  stroke-dasharray: 50 230;
  animation-duration: 1.1s;
}

.speedlines .speed-colored line:nth-child(3n+2) {
  stroke-dasharray: 70 200;
  animation-duration: 1.3s;
}

.speedlines .speed-colored line:nth-child(4n) {
  stroke-dasharray: 40 250;
  animation-duration: 0.95s;
}

@keyframes dash-move {
  to {
    stroke-dashoffset: -270;
  }
}

/* アニメ抑制 */
@media (prefers-reduced-motion: reduce) {

  .revealY,
  .map__stroke path,
  .map__fill,
  .speedlines .speed-colored line {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ---- 地図の線：描画品質 & スタイル ---- */
.c-hero__svg {
  --trace-dur: 2400ms;
}

/* 速度はお好みで */
.map__stroke path {
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 2;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
  paint-order: stroke;
  /* アンチエイリアスのにじみ軽減 */
  will-change: stroke-dashoffset;
  /* ここでは transition は JS 側で入れる（次フレームで発火させるため） */
}

/* 下→上の露出（マスク矩形の拡大）  */
.revealY {
  transform: scaleY(0);
  transform-origin: 50% 100%;
  animation: revealY var(--trace-dur) ease-out forwards;
}

@keyframes revealY {
  to {
    transform: scaleY(1);
  }
}

/* 塗り：線が描き終わった直後に浮き上がる */
.map__fill {
  opacity: 0;
  transform: translateY(8px) scale(.985);
  filter: blur(8px) saturate(120%);
  transition: opacity .6s ease-out, transform .6s ease-out, filter .6s ease-out;
}

.map__fill.is-revealed {
  opacity: .4;
  /* もとの 0.4 に戻す */
  transform: none;
  filter: none;
}

/* 疾走ラインは以前のままでOK（お好みで） */

/* ========================================
   重要なお知らせ
======================================== */
.c-important {
  /* カラーテーマ：通常はブルー。緊急時は .c-important--emergency を付与 */
  --impt-color: #0a58b5;
  /* 外枠・タイトル色 */
  --impt-bg: #fff;
  --impt-radius: 8px;

  margin: clamp(16px, 5vw, 48px) 0;
}

.c-important__box {
  background: var(--impt-bg);
  border: 11px solid var(--impt-color);
  padding: clamp(12px, 2.5vw, 24px);
}

.c-important__title {
  margin: 0 0 .6em;
  font-size: 2.4rem;
  ;
  font-weight: 700;
  color: var(--impt-color);
  letter-spacing: .02em;
  line-height: 1.3;
}

.c-important__content {
  line-height: 1.5;
}

/* 複数件パターン */
.c-important__list {
  margin: 0;
  padding: .25rem 0 0;
  list-style: none;
}

.c-important__item {
  display: flex;
  gap: .75rem;
  padding: .5rem 0;
  border-top: 1px dashed rgba(0, 0, 0, .18);
}

.c-important__item:first-child {
  border-top: 0;
}

.c-important__date {
  white-space: nowrap;
  font-feature-settings: "palt";
  font-size: .9375rem;
  color: #555;
}

.c-important__link {
  flex: 1;
  text-decoration: none;
}

.c-important__link:hover {
  text-decoration: underline;
}

/* 緊急カラー（赤）に即切替用：セクションに .c-important--emergency を足すだけ */
.c-important--emergency {
  --impt-color: #c62828;
}

/* ===== Footer base ===== */
#yamaneko_footer {
  margin-top: 160px;
}
.c-footer {
  --footer-bg: url('/image/yamaneko_31/footer-bk.jpg');
  position: relative;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .20)),
    var(--footer-bg) center/cover no-repeat;
  color: #fff;
  min-height: clamp(260px, 42vw, 440px);
  display: flex;
  align-items: center;
  padding-block: clamp(28px, 6vw, 64px);
}

/* 幅管理（precssの l-） */
.l-container {
  width: min(1200px, 100%);
  margin-inline: auto;
  padding-inline: 16px;
}

/* 中央配置 */
.c-footer__inner {
  text-align: center;
  display: grid;
  gap: clamp(8px, 1.6vw, 16px);
}

/* バッジ（ネコPNG） */
.c-footer__badge img {
  width: clamp(92px, 14vw, 150px);
  height: auto;
  display: block;
  margin-inline: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .25));
}

/* 役場リンク（チップ） */
.c-chipLink {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .45em 1em;
  border-radius: 9999px;
  background: #fff;
  color: #0F59A8;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .03em;
}

.c-chipLink:hover {
  filter: brightness(.98);
}

/* 住所・連絡先 */
.c-footer__address {
  margin: .3em 0 0;
  font-style: normal;
  /* addressの斜体解除 */
  line-height: 1.9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .15);
  font-size: clamp(12px, 1.5vw, 16px);
}

.c-footer__org {
  font-weight: 800;
  font-size: clamp(14px, 1.8vw, 18px);
}

.c-footer__mail {
  color: #fff;
  text-decoration: underline;
}

/* 下部バー */
.c-footer__bar {
  background: #1667C6;
  color: #fff;
  text-align: center;
  padding: .9rem 1rem;
}

.c-footer__copy {
  margin: 0;
  font-size: clamp(11px, 1.2vw, 14px);
  letter-spacing: .02em;
}

/* Utility */
.u-nowrap {
  white-space: nowrap;
}

/* ========================================
重要なお知らせ
======================================== */

/* === Footer Scroll Pin : faithful v2 (place LAST) === */
#yamaneko_footer .c-footer {
  position: relative;
  overflow: visible;
}

#yamaneko_footer .c-footer__scroll {
  --pin: 140px;
  position: absolute;
  left: 50%;
  top: -5%;
  transform: translate(-50%, -50%);
  width: var(--pin);
  height: var(--pin);
  z-index: 5;
  display: block;
  text-decoration: none;
  pointer-events: auto;
  mix-blend-mode: multiply;
}

/* 半円の淡青 */
#yamaneko_footer .c-footer__scrollBg {
  position: absolute;
  inset: 0;
  background: #E6F4FE;
  border-radius: 50%;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .04);
}

/* 「1」の縦線（極細・濃青） */
#yamaneko_footer .c-footer__scrollStem {
  position: absolute;
  left: 50%;
  top: calc(var(--pin)*.19);
  width: 3px;
  height: calc(var(--pin)*.61);
  background: #145BB6;
  border-radius: 2px;
  transform: translateX(-50%);
}

#yamaneko_footer .c-footer__scrollTick {
  position: absolute;
  left: calc(49% - var(--pin)*0.065);
  top: calc(29% - var(--pin)*0.12);
  width: 3px;
  height: calc(37% - var(--pin)*.22);
  background: #145BB6;
  border-radius: 2px;
  transform: rotate(25deg);
  transform-origin: bottom left;
}

/* 白い尻尾（半円の外へ） */
#yamaneko_footer .c-footer__scrollTail {
  position: absolute;
  left: 50%;
  bottom: calc(var(--pin)*.11);
  width: 4px;
  height: calc(var(--pin)*0.24);
  background: #ffffff;
  border-radius: 0px;
  transform: translateX(-50%);
}

/* 先端の白い点 */
#yamaneko_footer .c-footer__scroll {
  --pin: 174px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--pin);
  height: var(--pin);
  z-index: 5;
  display: block;
  text-decoration: none;
  pointer-events: auto;
}

/* 縦書き “Scroll”（右側） */
#yamaneko_footer .c-footer__scrollLabel {
  position: absolute;
  left: calc(62% - var(--pin)*.09);
  top: calc(65% - var(--pin) * .09);
  transform: rotate(-90deg) !important;
  transform-origin: left top;
  font: 700 20px/1 "M PLUS 1p", system-ui, sans-serif;
  letter-spacing: .06em;
  color: #145BB6;
  user-select: none;
  mix-blend-mode: multiply;
}

/* 英字ラベルを水平ミラーに */
.c-footer__scrollLabel {
  transform: scaleX(-1) rotate(90deg);
  transform-origin: left top;
}

span.c-footer__org.t-m30 {
  display: inline-block;
  margin-top: 15px;
}

/* 触感アップ（微ホバー） */
#yamaneko_footer .c-footer__scroll:hover .c-footer__scrollBg {
  filter: brightness(1.02);
}

/* 旧版クラスが残っている環境でも崩さないための殺し屋 */
#yamaneko_footer .c-footer__scrollLine,
#yamaneko_footer .c-footer__scrollArrow {
  display: none !important;
}

/* モバイル縮小（任意） */
@media (max-width:560px) {
  #yamaneko_footer .c-footer__scroll {
    --pin: 112px;
  }
}

/*footerのデザイン*/
/* ===== Footer bar : 2-tone with diagonal split ===== */
.c-footer__bar {
  /* 調整用トークン */
  --bar-h: 22px;
  /* 帯の高さ */
  --left: #0F59A8;
  /* 左の青 */
  --right: #2C8ED6;
  /* 右の青 */
  --cut: 34px;
  /* 中央の斜め“食い込み”量（大きいほど鋭角） */

  position: relative;
  padding: 0;
  /* 文字の上下に余白を入れたいならここを増やす */
  height: var(--bar-h);
  line-height: var(--bar-h);
  background: transparent;
  /* 背景は擬似要素で描く */
  overflow: visible;
}

/* 左側（全面をまず濃い青で塗る） */
.c-footer__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--left);
}

/* 右側（全面に右の青を敷いて、中央を斜め形状でクリップ） */
.c-footer__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--right);
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 47% 100%, calc(46% + var(--cut)) 50%);
}

/* テキストは帯の上に乗せる */
.c-footer__copy {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
}

/* モバイル：少し細めに（任意） */
@media (max-width: 560px) {
  .c-footer__bar {
    --bar-h: 18px;
    --cut: 26px;
  }
}


/*mobile調整*/
/*ナビゲーション*/
ul.c-navigation__list {
  display: none;
}

/* === SPメニューボタン === */
.head__menuBtn {
  position: relative;
  width: 38px;
  height: 34px;
  border: 0;
  background: transparent;
  padding: 0;
}

.head__menuBtn span {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 3px;
  background: #145BB6;
  border-radius: 2px;
  transition: .2s;
}

.head__menuBtn span:nth-child(1) {
  top: 8px;
}

.head__menuBtn span:nth-child(2) {
  top: 15px;
}

.head__menuBtn span:nth-child(3) {
  top: 22px;
}

/* PCでは非表示・SPで表示 */
@media (min-width: 769px) {
  .head__menuBtn {
    display: none;
  }
}

@media (max-width: 768px) {
  .head__menuBtn {
    display: inline-block;
  }
}

/* === ドロワー本体 === */
.spDrawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.spDrawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  opacity: 0;
  transition: opacity .2s ease;
}

.spDrawer__panel {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: min(86vw, 320px);
  background: linear-gradient(180deg, #0F59A8, #2C8ED6);
  color: #fff;
  transform: translateX(-100%);
  transition: transform .25s ease;
  box-shadow: 2px 0 18px rgba(0, 0, 0, .18);
  padding: 18px 14px 24px;
}

/* 開いた時 */
.spDrawer.is-open {
  pointer-events: auto;
}

.spDrawer.is-open .spDrawer__backdrop {
  opacity: 1;
}

.spDrawer.is-open .spDrawer__panel {
  transform: translateX(0);
}

/* 閉じるボタン */
.spDrawer__close {
  position: absolute;
  right: 10px;
  top: 8px;
  width: 36px;
  height: 36px;
  background: transparent;
  color: #fff;
  border: 0;
  font-size: 26px;
  line-height: 1;
}

/* メニュー */
.spDrawer__list {
  list-style: none;
  margin: 24px 0 16px;
  padding: 0;
}

.spDrawer__list li {
  border-bottom: 1px dotted rgba(255, 255, 255, .35);
}

.spDrawer__list a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 14px 8px;
  font-size: 16px;
}

/* CTA ボタン群（既存の .c-btn を再利用） */
.spDrawer__cta {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

/*sp*/
.br-sp {
  display: none;
}

@media(max-width:780px) {
  .br-sp {
    display: block;
  }
}

/* スライダーのベース */
.p-yamaneko-hero__inner {
  position: relative;
}

.p-yamaneko-hero__slider {
  list-style: none;
  padding: 0;
  margin: 0;
}

.p-yamaneko-hero__slide {
  outline: none;
}

/* フォーカス時の不要なアウトラインを抑制（必要なら調整） */
.p-yamaneko-hero__slide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* bxSlider が生成する .bx-wrapper にスタイルを当てたい場合は上書き */
.bx-wrapper {
  max-width: 100%;
}

.bx-wrapper .bx-viewport {
  height: auto !important;
}

/* 追記：各リストの末尾に gap と同じ幅のダミー要素を作る */
.c-scrollInfinity--photo .c-scrollInfinity__list::after {
  content: "";
  flex: 0 0 3px;
  /* ← ulのgapと同値にする */
}

section#purpose {
  padding-block-start: clamp(10px, 5vw, 10px);
  padding-block-end: clamp(25px, 7vw, 70px);
  padding-inline: 0;
}

/*試し*/
.head__brand::before {
  --cut: 80%;
  -webkit-mask-image: linear-gradient(to bottom,
      #000 0,
      #000 calc(100% - var(--cut)),
      transparent calc(100% - var(--cut)),
      transparent 100%);
  mask-image: linear-gradient(to bottom, #ffffff 0, #000 calc(100% - var(--cut)), transparent calc(100% - var(--cut)), transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transform: rotate(var(--angle)) translateY(0.5px);
  --angle: -180deg;
  transform: rotate(var(--angle));
  transform-origin: 50% 50.2%;
}

/*新着情報*/
.c-news__container.l-center {
  max-width: 960px;
  margin: 0 auto;
}

/*メインビジュアル*/
/* === bxSlider: MV 高さ/フィット最小セット === */
.c-hero .bx-wrapper {
  max-width: 100%;
  margin: 0 auto;
  border: 0;
  box-shadow: none;
  background: none;
}

.c-hero .bx-wrapper .bx-viewport {
  height: clamp(280px, 45vw, 900px) !important;
  overflow: hidden;
}

.c-hero .bx-wrapper img {
  width: 100%;
  height: 830px;
  object-fit: cover;
  display: block;
}

.c-hero .bx-wrapper .bx-viewport {
  height: clamp(280px, 45vw, 900px) !important;
  overflow: hidden;
}

/* ラッパー自体の幅上限 */
.c-hero .bx-wrapper {
  max-width: 100%;
  margin: 0 auto;
  border: 0;
  box-shadow: none;
  background: none;
}

/* 前後ボタン／ドットの色味（必要ならトーン合わせ） */
.c-hero .bx-wrapper .bx-prev,
.c-hero .bx-wrapper .bx-next {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}

.c-hero .bx-wrapper .bx-pager.bx-default-pager a {
  background: rgba(255, 255, 255, .55);
}

.c-hero .bx-wrapper .bx-pager.bx-default-pager a.active {
  background: #fff;
}


/*mv*/
/* bx のラッパーをMV用に調整（初期は隠す→onSliderLoadで出す） */
.c-hero .bx-wrapper {
  max-width: 100%;
  margin: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  position: relative;
  z-index: 10;
  opacity: 0;
  transition: opacity .2s ease-in;
}

.c-hero .bx-wrapper .bx-viewport {
  height: clamp(280px, 45vw, 900px) !important;
  /* MVの高さ */
  overflow: hidden;
}

/* 黒いフィルター（HTMLを触らず :after で重ねる） */
.p-yamaneko-hero__inner {
  position: relative;
}

.p-yamaneko-hero__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .25);
  z-index: 15;
  pointer-events: none;
}

/* テキストオーバーレイをフィルターより上に */
.c-hero__overlay {
  z-index: 20;
}

.c-scrollInfinity--photo .c-scrollInfinity__list--left {
  animation-direction: reverse;
}

.c-hero {
  position: relative;
}

.p-yamaneko-hero__inner {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}

/* bxSliderのUL */
.p-yamaneko-hero__slider {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* スライド領域の高さはLIで規定（CLS対策） */
.p-yamaneko-hero__slide {
  height: clamp(280px, 45vw, 560px);
}

/* 画像はクラス無し：親から子セレクタで制御 */
.p-yamaneko-hero__slide>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

/* bxSlider生成ラッパも角丸・オーバーフローを同期 */
.bx-wrapper .bx-viewport {
  border: 0;
  box-shadow: none;
  border-radius: 16px;
  overflow: hidden;
}

/* オーバーレイ（SVGは背景画像で読み込み） */
.c-hero__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;
}

.c-footer__mail {
  color: #fff;
  text-decoration: none;
}

a.c-footer__mail:hover {
  color: #ffffff;
}
.c-hero {
  position: relative;
}

.c-hero .bx-wrapper {
  position: relative;
  z-index: 1;
}

.c-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}


/* 画像のフィット：中身を確実に見せる */
.p-yamaneko-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ハンバーガーメニューのスタイル */
/*.hamburger {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  cursor: pointer;
  z-index: 10;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #333;
  margin: 5px 0;
  transition: 0.4s;
}*/

/* メニューのスタイル */
.menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 250px;
  height: 100%;
  background-color: #fafad2;
  opacity: 0;
  /* 初期状態は透明 */
  pointer-events: none;
  /* クリック不可 */
  transition: opacity 0.5s ease;
  /* フェードインのアニメーション */
  padding: 20px;
  box-sizing: border-box;
  z-index: 5;
}

/* メニューが開いたとき */
.menu.open {
  opacity: 1;
  /* 不透明にする */
  pointer-events: auto;
  /* クリック可能にする */
}


/* MV：bxのラッパーをフラットに（角丸・枠・灰色背景を無効化） */
.c-hero .bx-wrapper {
  max-width: 100%;
  margin: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  /* ← 灰色を消す */
  opacity: 0;
  /* 初期は隠す（onSliderLoadで1に） */
  transition: opacity .2s ease-in;
}

.c-hero .bx-wrapper .bx-viewport {
  height: clamp(280px, 45vw, 560px) !important;
  /* MV高さ：お好みで */
  overflow: hidden;
  border: 0;
  /* bxの余計な枠を消す */
  border-radius: 0;
  /* ← 角丸を消す */
  background: transparent;
  /* 念のため */
}

/* スライド内の画像は角丸なし・全幅フィット */
.p-yamaneko-hero__slide {
  height: clamp(280px, 45vw, 560px);
}

.p-yamaneko-hero__slide>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  /* ← 角丸を消す */
}

/*試し*/
/* === MVを「幅：画面いっぱい」「高さ：画面いっぱい(=100%)」にする最終上書き === */

/* 0) まず“全画面用の高さトークン”を用意（モバイルも安定） */
:root {
  --mv-h: 100dvh;
}

/* 100vhよりdvh/svhの方がスマホで安定 */

/* 1) セクション自体をフルブリード（左右の余白をぶち抜く） */
.c-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.p-yamaneko-hero__slide {
  opacity: 1;
}
/* 2) bxまわり：幅は100%、背景/角丸ナシのまま */
.c-hero .bx-wrapper {
  margin: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  opacity: 1;
  max-width: none;
  width: 100%;
}

.c-hero .bx-wrapper .bx-viewport {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  width: 100%;
  height: var(--mv-h);
}


.p-yamaneko-hero__slide {
  height: var(--mv-h);
}

.p-yamaneko-hero__slide>img,
.c-hero .bx-wrapper img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 0;
  max-width: none;
}

/* 4) 内側の余白や黒いフィルターは不要なら消す */
.p-yamaneko-hero__inner {
  padding: 0;
}

.p-yamaneko-hero__inner::after {
  display: none;
}

/* 5) 横はみ出しスクロール防止（フルブリード時の保険） */
html,
body {
  overflow-x: hidden;
}

/* ==== ヒーロー画像の高さを増やす（例：80vh） ==== */
.c-hero .bx-wrapper .bx-viewport,
.p-yamaneko-hero__slide {
  height: 100vh !important;
  /* 好みで 70vh / 90vh / 100vh に */
  min-height: 560px;
  /* 下限を入れておくとPCで痩せない */
}

/* 画像は枠にフィット */
.p-yamaneko-hero__slide>img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* bx-wrapperの初期チラつき防止（JSで1に戻す） */
.bx-wrapper {
  opacity: 0;
}

/* アニメ用の器と画像の下準備 */
.js-heroSlider>li {
  overflow: hidden;
}

.js-heroSlider>li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  will-change: transform;
}

/* アクティブ<li>だけ縮小アニメを走らせる */
.js-heroSlider>li.is-kenburns img {
  animation: kbShrink var(--kb-dur, 4600ms) linear forwards;
}

/* ゆっくり「縮小」して静止（開始を少し大きめ→等倍） */
@keyframes kbShrink {
  from {
    transform: scale(1.08);
  }

  to {
    transform: scale(1.00);
  }
}

/* 動きに弱い環境配慮 */
@media (prefers-reduced-motion: reduce) {
  .js-heroSlider>li.is-kenburns img {
    animation: none !important;
  }
}



/*念のためのやつ*/

/* ========== mv ========== */

ul.c-heroNav__list {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  color: #000;
  padding: 1.5rem 0;
}

a.c-heroNav__link {
  color: #000;
  font-size: 1.5rem;
}

/* ========== Hero 共通 ========== */
.c-hero {
  position: relative;
}

.p-yamaneko-hero__inner {
  position: relative;
}

/* bxSliderの初回チラつき防止（ヒーロー領域だけに限定） */
.c-hero .bx-wrapper {
  opacity: 0;
}

/* オーバーレイ（SVGやPNGを重ねる土台） */
.c-hero__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  /* 背景扱い：クリック貫通 */
  z-index: 2;
}

/* 固定PNG：中央寄り・やや下に配置 */
.c-hero__badge {
  position: absolute;
  left: 50%;
  top: 58%;
  /* ←「やや下」。調整は 55%～62% 程度で */
  transform: translate(-50%, -50%);
  width: min(70vw, 680px);
  z-index: 3;
  pointer-events: none;
  /* 飾りなので非アクティブ */
}

.c-hero__badge img {
  display: block;
  width: 100%;
  height: auto;
}

/* ====== ヒーロー内ナビ帯 ====== */
.c-heroNav {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(92vw, 1240px);
  z-index: 4;
  /* スライダー・バッジより前面 */
}

.c-heroNav__inner {
  -webkit-backdrop-filter: blur(6px);

}

.c-heroNav {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  z-index: 4;
  background: rgba(255,255,255,0.75);
}

.c-heroNav__link {
  display: inline-block;
  padding: 6px 4px;
  font-size: 15px;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: opacity .2s ease;
}

.c-heroNav__link:hover,
.c-heroNav__link:focus {
  opacity: .85;
  outline: none;
}

.c-heroNav__link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .8);
  outline-offset: 2px;
}

.c-hero__svg {
  width: min(70vw, 70%);
  aspect-ratio: 68 / 39;
  background: center/contain no-repeat url("/image/yamaneko_31/mv-txt.png");
  opacity: .95;
}
@media (max-width: 768px) {
  .c-hero__svg {
    width: min(120vw, 200%);
  }
}


/* ========== @media (<= 960px) ========== */
@media (max-width: 960px) {
  .c-hero__badge {
    width: min(78vw, 560px);
    top: 60%;
  }

  .c-heroNav__list {
    gap: 18px 24px;
    padding: 10px 12px;
  }

  .c-heroNav__link {
    font-size: 14px;
  }
}

/* ========== @media (<= 768px) ========== */
/* スクロール可能な横並び帯に変更（崩れ防止） */
@media (max-width: 768px) {
  .c-hero__badge {
    width: min(84vw, 520px);
    top: 60%;
  }


  .c-heroNav__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 16px;
  }

  .c-heroNav__item {
    flex: 0 0 auto;
  }

  .c-heroNav__link {
    font-size: 13px;
    padding: 6px 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bx-wrapper .bx-viewport {
    scroll-behavior: auto;
  }
}


@media(max-width:2048px){
.c-entryPng {
    top: 30vw;
}

.c-hero__svg {
    aspect-ratio: 72 / 50;
}

/*.head__meta {
    display: none;
}*/
}


/* @media (min-width:1240px) {
  .head__brand::before {
    transform-origin: 46.5% 49.2%;
  }

  .c-event-overview__item {
    width: 860px;
  }

  .cp-btn {
    width: 860px;
    margin: 7rem auto 7rem;
  }

  .l-container {
    width: min(860px, 100%);
  }

  .c-sponsors {
    padding: 8.6rem 0 0px;
  }

  img.head__logo.top-logo-icon {
    width: 13%;
    top: -27px;
    left: 2.3%;
}

.head__brand::before {
    width: 138px;
    height: 142px;

}
img.head__logo {
    width: 49%;
    position: relative;
    left: 17%;
}
img.head__logo {
    width: 40%;
    position: relative;
    left: 18%;
}
.head__brand::before {
  --cut: 86%;
    width: 140px;
    height: 150px;
    right: 100%;
}
.c-hero__headInner {
    margin-top: 0px;
}
} */

@media (max-width:480px) {
nav.c-heroNav.js-heroNav {
    display: none;
}
ul.c-heroNav__list {
    display: none;
}
.bx-pager.bx-default-pager {
    display: none;
}

    .c-entryPng {
        top: 134vw;
    }
    /*.c-entryPng {
        right: 31%;
        width: clamp(180px, 20vw, 141px);
    }*/
  .c-entryPng {
    right: 0;
    width: clamp(125px, 20vw, 140px);
    bottom: 75px;
    top: auto;
  }
    .c-important__box {
    border: 5px solid var(--impt-color);
}
.l-left p {
    font-size: 1.8rem;
}
.head__brand::before{
  display: none;
}
.l-center p {
    font-size: 1.5rem;
    text-align: center;
}
}
@media (max-width:1024px) {
  .hamburger {
      position: absolute;
      display: block;
      width: 38px;
      height: 27px;
      z-index: 99999;
      box-sizing: border-box;
      right: 10px;
      top: 18px;
  }
  .hamburger.active {
      height: 20px;
  }
  .hamburger  span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #333;
    margin: 0 auto;
  }
  .hamburger  span:nth-of-type(1) {
    top: 0;
  }
  .hamburger  span:nth-of-type(2) {
    top: 13px;
  }
  .hamburger  span:nth-of-type(3) {
    bottom: 0;
  }
  .hamburger  span:nth-of-type(1) {
    -webkit-animation: menu-ber01 .75s forwards;
    animation: menu-ber01 .75s forwards;
  }
  .hamburger  span:nth-of-type(2) {
    transition: all .25s .25s;
    opacity: 1;
  }
  .hamburger  span:nth-of-type(3) {
    -webkit-animation: menu-ber02 .75s forwards;
    animation: menu-ber02 .75s forwards;
  }
  .active span:nth-of-type(1) {
    -webkit-animation: active-menu-ber01 .75s forwards;
    animation: active-menu-ber01 .75s forwards;
  }
  .active span:nth-of-type(2) {
    opacity: 0;
  }
  .active span:nth-of-type(3) {
    -webkit-animation: active-menu-ber03 .75s forwards;
    animation: active-menu-ber03 .75s forwards;
  }
}
@-webkit-keyframes menu-ber01 {
  0% {
    -webkit-transform: translateY(8px) rotate(45deg);
  }
  50% {
    -webkit-transform: translateY(8px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}


@keyframes menu-ber01 {
  0% {
    transform: translateY(8px) rotate(45deg);
  }
  50% {
    transform: translateY(8px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}


@-webkit-keyframes menu-ber02 {
  0% {
    -webkit-transform: translateY(-8px) rotate(-45deg);
  }
  50% {
    -webkit-transform: translateY(-8px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}


@keyframes menu-ber02 {
  0% {
    transform: translateY(-8px) rotate(-45deg);
  }
  50% {
    transform: translateY(-8px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}


@-webkit-keyframes active-menu-ber01 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(10px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(10px) rotate(45deg);
  }
}


@keyframes active-menu-ber01 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(10px) rotate(0);
  }
  100% {
    transform: translateY(10px) rotate(45deg);
  }
}


@-webkit-keyframes active-menu-ber03 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(-8px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(-8px) rotate(-45deg);
  }
}


@keyframes active-menu-ber03 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-8px) rotate(0);
  }
  100% {
    transform: translateY(-8px) rotate(-45deg);
  }
}



/*---------------------------------------------------------------------
	navigation
---------------------------------------------------------------------*/
#navigation{
  position: fixed;
  display: none;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 10;
}
#navigation .navigation_inner{
  display: table;
  width: 100%;
  height: 100%;
}
#navigation .navigation_inner .navigation_menu{
  display: table-cell;
  vertical-align: middle;
}
#navigation .navigation_inner .navigation_menu .navigation_item{
  margin: 16px auto 0 auto;
}
#navigation .navigation_inner .navigation_menu .navigation_item:first-child{
  margin-top: 0;
}
#navigation .navigation_inner .navigation_menu .navigation_item a {
    display: block;
    position: relative;
    text-decoration: none;
    font-size: 130%;
    color: #333;
    line-height: 34px;
    text-align: center;
}
#navigation .navigation_inner .navigation_menu .navigation_item a::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #666;
  transition: .3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
#navigation .navigation_inner .navigation_menu .navigation_item a:hover::before{
  width: 50%;
}

/*詳細header*/
.gnavi,
.gnavi_yamaneko {
  padding-bottom: 1px;
  border-bottom: 1px solid #bbb;
  margin-top: 110px;
  background: #F5F5F5;
}
/*詳細*/
.dir_yamaneko .page_ttl_wrap {
  padding: 30px 15px;
  background-color: #00489E;
  background-image: none;
}
.topic_path_top {
  margin: 0;
}
.pagebody_wrap {
  background: url(../image/yamaneko_31/bk02.jpg) center top;
    background-size: auto;
  padding-block: clamp(32px, 6vw, 80px);
  background-size: 100% auto;
  margin-top: 0;
}

.dir_yamaneko .pagebody_inner {
  margin: 0 auto;
  max-width: 1000px;
  background: #fff;
  border-radius: 20px;
  padding: 50px;
}
.dir_yamaneko .page_ttl {
  color: #fff;
}
@media (max-width:1024px) {
  #yamaneko_header {
    max-width: 768px;
    margin: 0 auto;
    position: relative;
  }
  .head__brand::before {
    width: 0;
  }
  #pagebody {
    padding-top: 17% !important;
  }
  .pagebody_wrap {
    background: url(../image/yamaneko_31/bk02.jpg) center top;
    background-size: 100% auto;
    margin-top: 0;
    padding: 20px;
  }
  .dir_yamaneko .pagebody_inner {
    padding: 25px;
  }
}
.link_prev_next > li a,
.link_prev_prev > li a { color: #145BB6; }
.link_prev_next > li a:hover,
.link_prev_prev > li a:hover { background-color: #145BB6; }

.table_scroll {
  overflow-x: scroll;
  white-space: nowrap;
  width: 100%;
}
.table_scroll table {
  white-space: nowrap;
}