@charset "utf-8";
/*================================================
CSS トップページ向けCSS
2015 atali.inc(telime)
This style is released under the MIT License
use "Twitter Bootstrap v3.0.2"
================================================*/

/* === FIRST VIEW (2026 ポスター KV) ===
 素材: img/bg/kv_*（ポスター書き出しパーツを Web 用に縮小・改名したもの。原本は projects/beppu/design/ の .ai）
 992px 以上: 写真を中央に置き、左上にキャッチ、右上に別府けいりん、下部にタイトル群（ポスターの構図を横に広げたもの）
   各パーツの大きさは写真の幅（--kv-p）を基準に決める
 991px 以下: ポスターと同じ縦構図（写真全幅。タブレットは幅 640px で中央寄せし、左右の端をぼかす）
*/
.first-view {
  --kv-h: clamp(640px, 100vh, 900px);
  --kv-header: 71px; /* #page-header（fixed-top）の高さ */
  position: relative;
  overflow: hidden;
  background: var(--bg-poster);
}

@supports (height: 100svh) {
  .first-view {
    --kv-h: clamp(640px, 100svh, 900px);
  }
}

/* 写真下端を白へ溶かし、日付を読ませる（ポスターと同じ処理）。全幅にかけて左右の背景ともなじませる */
.first-view::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 30%;
  background: linear-gradient(to bottom, rgba(var(--c-white-rgb), 0) 0%, rgba(var(--c-white-rgb), 0.85) 62%, rgba(var(--c-white-rgb), 0.95) 100%);
  pointer-events: none;
}

.kv {
  position: relative;
}

.kv__photo {
  display: block;
  max-width: none;
}

.kv__catch,
.kv__grade,
.kv__title,
.kv__date img,
.kv__beppu {
  display: block;
  height: auto;
}

.kv__catch,
.kv__lockup,
.kv__beppu {
  position: absolute;
  z-index: 2;
}

.kv__lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, 0.5vw, 6px);
  margin: 0 auto;
}

.kv__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, 0.5vw, 6px);
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

.kv__title {
  width: 100%;
  margin: -1% 0 -1.3%; /* 画像上下の光彩の余白（約 1%）を詰める */
}

.kv__date {
  margin: 0;
  line-height: 0;
}

.kv__date img {
  width: 100%;
}

/* 992px 以上: 写真中央の横構図 */
@media (min-width: 992px) {
  .kv {
    --kv-p: calc(var(--kv-h) * 2 / 3); /* 写真の表示幅（元画像 2:3） */
    height: var(--kv-h);
  }

  .kv__photo {
    position: absolute;
    top: 0;
    left: 50%;
    width: auto;
    height: 100%;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, var(--c-black) 14%, var(--c-black) 86%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, var(--c-black) 14%, var(--c-black) 86%, transparent 100%);
  }

  .kv__catch {
    top: calc(var(--kv-header) + var(--kv-h) * 0.06);
    left: max(2%, calc(50% - var(--kv-p) * 0.82));
    width: calc(var(--kv-p) * 0.6);
  }

  .kv__beppu {
    top: calc(var(--kv-header) + var(--kv-h) * 0.05);
    right: calc(50% - var(--kv-p) * 0.82);
    width: calc(var(--kv-p) * 0.4);
  }

  .kv__lockup {
    right: 0;
    bottom: 3.5%;
    left: 0;
    width: min(calc(var(--kv-p) * 1.4), 92vw);
  }

  .kv__grade {
    width: 46%;
  }

  .kv__date {
    width: 52%;
  }
}

/* 991px 以下: 縦構図 */
@media (max-width: 991px) {
  .first-view::after {
    height: 26%;
  }

  .kv {
    max-width: 640px;
    margin: 0 auto;
  }

  .kv__photo {
    width: 100%;
    height: auto;
  }

  .kv__catch {
    top: 3%;
    left: 3%;
    width: 46%;
  }

  .kv__lockup {
    right: 3%;
    bottom: 3.5%;
    left: 3%;
    gap: clamp(2px, 0.6vw, 6px);
  }

  .kv__heading {
    gap: clamp(2px, 0.6vw, 6px);
  }

  .kv__grade {
    width: 64%;
  }

  .kv__date {
    width: 82%;
  }

  /* 別府けいりん: PC と同じく右上（キャッチの対角） */
  .kv__beppu {
    top: 4%;
    right: 4%;
    width: 30%;
  }
}

/* 767px 以下: 右上固定のハンバーガー（上 10px・右 10px・44×44px）の左に、上下中央をそろえて置く */
@media (max-width: 767px) {
  .kv__beppu {
    top: 32px; /* ハンバーガーの中心 = 10px + 44px / 2 */
    right: 70px; /* 10px + 44px + 間隔 16px */
    width: 28%;
    transform: translateY(-50%);
  }
}

/* 写真が画面幅より狭くなる幅（641〜991px）: 写真の左右端を背景色へぼかす */
@media (min-width: 641px) and (max-width: 991px) {
  .kv__photo {
    -webkit-mask-image: linear-gradient(to right, transparent 0, var(--c-black) 12%, var(--c-black) 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, var(--c-black) 12%, var(--c-black) 88%, transparent 100%);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .first-view {
    padding-top: var(--kv-header);
  }
}

/* 背景の選手（kv_player を左右に 2 分割した kv_player-l / -r）: 写真の左右の余白を埋める。SP（767px 以下）は出さない
   左に帯の左半分（7・黄・白）、右に右半分（3・2）を置き、左右で同じ選手が出ないようにする。
   画像は写真側の端を写真のぼかし幅（--kv-o）だけ写真の下に潜らせ、そこから 2 倍の幅で透明へ（写真の縁と重ねない）。
   外側の端も軽くぼかす。半透明にして背景色（左＝空色、右＝桃色）をなじませ、写真より奥に置く */
.kv-players {
  display: none;
}

@media (min-width: 768px) {
  .kv-players {
    position: absolute;
    bottom: 0;
    display: block;
    aspect-ratio: 2027 / 2311; /* 分割後の画像の縦横比。高さを決めると幅が決まる */
    opacity: 0.5;
    pointer-events: none;
  }

  .kv-players img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
  }

  .kv-players--left {
    right: calc(50% + var(--kv-pw) * 0.5 - var(--kv-o));
    -webkit-mask-image: linear-gradient(to right, transparent 0, var(--c-black) 8%, var(--c-black) calc(100% - var(--kv-o) * 2), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, var(--c-black) 8%, var(--c-black) calc(100% - var(--kv-o) * 2), transparent 100%);
  }

  .kv-players--right {
    left: calc(50% + var(--kv-pw) * 0.5 - var(--kv-o));
    -webkit-mask-image: linear-gradient(to left, transparent 0, var(--c-black) 8%, var(--c-black) calc(100% - var(--kv-o) * 2), transparent 100%);
    mask-image: linear-gradient(to left, transparent 0, var(--c-black) 8%, var(--c-black) calc(100% - var(--kv-o) * 2), transparent 100%);
  }
}

/* PC: 写真幅 --kv-p、写真の左右ぼかし 14%。帯の高さは FV の 60% */
@media (min-width: 992px) {
  .first-view {
    --kv-p: calc(var(--kv-h) * 2 / 3); /* .kv と同じ値（.kv の外にある選手の帯でも使う） */
    --kv-pw: var(--kv-p);
    --kv-o: calc(var(--kv-p) * 0.14);
  }

  .kv-players {
    height: 60%;
  }
}

/* タブレット: 写真は幅 640px・中央、左右ぼかし 12%。写真下半分の選手と高さをそろえる */
@media (min-width: 768px) and (max-width: 991px) {
  .first-view {
    --kv-pw: 640px;
    --kv-o: 77px; /* 640px × 12% */
  }

  .kv-players {
    height: 50%;
  }

  .kv__photo {
    position: relative; /* 選手（absolute）より手前に重ねる */
  }
}

/* 登場アニメーション（動きを減らす設定では出さない） */
@media (prefers-reduced-motion: no-preference) {
  .kv__catch {
    animation: kv-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
  }

  .kv__lockup {
    animation: kv-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
  }
}

@keyframes kv-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.navbar {
  margin-bottom: 0;
}

/* === TOPICS ===*/
.panle {
  margin-bottom: 16px;
}

.topics {
  width: 80%;
  margin: 0 auto;
  display: block;
  height: auto;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  z-index: 0;
  border-radius: var(--radius-15);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ホバー: 浮き上がり + 光の帯が左上から右下へ横切る（ポスターの照明・紙吹雪の光沢を意識） */
.topics::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  z-index: 1;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, rgba(var(--c-white-rgb), 0) 0%, rgba(var(--c-white-rgb), 0.45) 50%, rgba(var(--c-white-rgb), 0) 100%);
  transform: translateX(0) rotate(20deg);
  pointer-events: none;
}

.topics h1 {
  position: relative;
  z-index: 2;
}

.topics:hover {
  text-decoration: none;
}

.topics h1 {
  font-size: 32px;
  line-height: 1.3;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  word-break: keep-all; /* 「ファンサー/ビス」のような語中の折り返しを防ぐ（改行は <br> で指定） */
  overflow-wrap: anywhere; /* 収まらないときだけ折り返す保険 */
}

@media (min-width: 992px) and (max-width: 1199px) {
  .topics h1 {
    font-size: 26px;
  }
}

@media (min-width: 576px) and (max-width: 991px) {
  .topics h1 {
    font-size: 20px;
  }
}

@media (max-width: 575px) {
  .topics h1 {
    font-size: min(15px, 4.2vw);
  }
}

.topics-event {
  background: linear-gradient(to bottom, rgba(var(--c-red-rgb), 0.95) 25%, rgba(var(--c-red-rgb), 0.7) 60%, rgba(var(--c-red-rgb), 0.95) 100%),
    url("../img/topics/panle_bg_event.png") center center no-repeat;
  background-size: cover;
}

.topics-access {
  background: linear-gradient(to bottom, rgba(var(--c-navy-rgb), 0.95) 25%, rgba(var(--c-navy-rgb), 0.7) 60%, rgba(var(--c-navy-rgb), 0.95) 100%),
    url("../img/topics/panle_bg_access.png") center center no-repeat;
  background-size: cover;
}

.topics-seat {
  background: linear-gradient(to bottom, rgba(var(--c-navy-rgb), 0.95) 25%, rgba(var(--c-navy-rgb), 0.7) 60%, rgba(var(--c-navy-rgb), 0.95) 100%),
    url("../img/topics/panle_bg_seat.jpg") center center no-repeat;
  background-size: cover;
}

.topics-keirinjp {
  background: var(--c-blue);
  background-size: cover;
}

.text-fff {
  color: var(--c-white);
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.04em;
}

.topics:before {
  content: '';
  display: block;
  width: 100%;
  height: 21px;
  position: absolute;
  top: 15px;
  right: 0;
  z-index: 10;
  background: transparent none no-repeat scroll top right;
  -webkit-background-size: auto 100%;
  background-size: auto 100%;
}

a.topics:hover,
a.topics:focus-visible {
  color: var(--c-white);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

a.topics:focus-visible {
  outline: 3px solid var(--c-navy);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  a.topics:hover::after,
  a.topics:focus-visible::after {
    animation: topics-shine 0.7s cubic-bezier(0.45, 0, 0.55, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .topics {
    transition: none;
  }

  a.topics:hover,
  a.topics:focus-visible {
    transform: none;
  }
}

@keyframes topics-shine {
  from {
    transform: translateX(0) rotate(20deg);
  }

  to {
    transform: translateX(560%) rotate(20deg);
  }
}

/*スマホサイズ*/
@media (max-width: 767px) {
  .topics h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
  }
}

/* === label ===*/

/* === date style ===*/

h2 {
  padding-bottom: 20px;
  padding-top: 20px;
  margin-top: 0px;
  margin-bottom: 40px;
  color: var(--c-navy);
  background: linear-gradient(135deg, var(--c-red) 0%, var(--c-red) 15%, var(--c-white) 15%, var(--c-white) 85%, var(--c-navy) 85%, var(--c-navy) 100%);
}

.pb-30 {
  padding-bottom: 30px;
}

@media (min-width: 768px) {
  h2 {
    font-size: 52px !important;
    padding-bottom: 20px;
    padding-top: 20px;
    margin-top: 0px;
    margin-bottom: 40px;
    background: linear-gradient(135deg, var(--c-red) 0%, var(--c-red) 20%, var(--c-white) 20%, var(--c-white) 80%, var(--c-navy) 80%, var(--c-navy) 100%);
  }

  .pb-30 {
    padding-bottom: 30px;
  }
}

/*================================================
 Media Query
 デバイスの幅毎にCSS値変更
================================================*/
@media (max-width: 767px) {
  .topics {
    height: auto;
    -webkit-border-radius: var(--radius-7);
    -moz-border-radius: var(--radius-7);
    border-radius: var(--radius-7);
  }

  .topics:before {
    right: -10px;
    top: 0;
  }
}

/* SP・タブレット: パネルを列いっぱいに広げ、縦横の間隔を 12px にそろえる */
@media (max-width: 991px) {
  .topics-row {
    --bs-gutter-x: 12px;
  }

  .panle {
    margin-bottom: 12px;
  }

  .topics {
    width: 100%;
  }
}

/* タブレット: パネルの高さ */
@media (min-width: 768px) and (max-width: 991px) {
  .topics h1 {
    height: 120px;
  }
}

/* === clearfix (旧 top_rwd.css から移設。#page-links.banner で使用) === */
.banner:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}