/* ===== #title(index.html)===== */
.title {
padding: var(--space-5) var(--gutter) calc(var(--space-5) + var(--underline-w) * 3);
text-align: center;
}
.title__inner {
display: inline-block;
padding-inline: var(--space-4);
padding-bottom: var(--space-2);
/* 赤・青・緑の三重下線(ボッチャの赤球・青球・コート) */
box-shadow:
0 var(--underline-w) 0 var(--color-red),
0 calc(var(--underline-w) * 2) 0 var(--color-blue),
0 calc(var(--underline-w) * 3) 0 var(--color-green);
}
.title__edition {
display: block;
margin-bottom: var(--space-1);
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-title-sub);
letter-spacing: 0.1em;
}
.title__name {
display: block;
font-family: var(--font-body);
font-weight: 900;
font-size: var(--text-title);
line-height: 1.2;
letter-spacing: 0.04em;
}
@media (max-width: 768px) {
.title { padding-top: var(--space-4); padding-bottom: calc(var(--space-4) + var(--underline-w) * 3); }
.title__name { line-height: 1.3; }
}
/* ===== #buttons(index.html)===== */
.buttons {
background: var(--color-green) url("../images/grass.jpg") top repeat;
padding: var(--space-section) var(--gutter);
}
.buttons__inner {
max-width: var(--container);
margin-inline: auto;
}
.buttons__final {
width: min(100%, var(--btn-final-w));
margin: 0 auto var(--space-6);
}
.buttons__groups .btn { padding-block: var(--space-2); }
.buttons__groups {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-3);
list-style: none;
margin: 0;
padding: 0;
}
.buttons__groups + .buttons__groups { margin-top: var(--space-6); }
@media (max-width: 768px) {
.buttons { padding: var(--space-section-sp) var(--gutter); }
.buttons__final { margin-bottom: var(--space-4); }
.buttons__groups { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.buttons__groups + .buttons__groups { margin-top: var(--space-4); }
}
/* ===== #winner(index.html)===== */
.winner__band {
background: var(--color-dark);
color: var(--color-white);
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-band);
letter-spacing: 0.06em;
text-align: center;
padding: var(--space-2) var(--gutter);
}
.winner .sheet { min-height: var(--winner-h); }
.winner .sheet td { font-size: var(--text-cell-lg); }
.winner .sheet col:nth-child(1) { width: 10%; }
.winner .sheet col:nth-child(2) { width: 40%; }
.winner .sheet col:nth-child(3) { width: 10%; }
.winner .sheet col:nth-child(4) { width: 40%; }
@media (max-width: 768px) {
.winner .sheet { min-height: 0; }
.winner .sheet tr { height: var(--winner-row-h-sp); }
.winner .sheet col:nth-child(1),
.winner .sheet col:nth-child(3) { width: 8%; }
.winner .sheet col:nth-child(2),
.winner .sheet col:nth-child(4) { width: 42%; }
}
/* ===== #footer(index.html)===== */
.footer {
padding: var(--space-section-sp) var(--gutter);
text-align: center;
}
.footer__logo {
width: var(--logo-w);
margin-inline: auto;
}
/* ===== #league(group.html)===== */
.league .sheet { height: 100vh; height: 100dvh; }
/* 列幅(9 列): B = 16%、C〜F = 13.5%、G〜J(勝・得失点・総得点・順位)= 7.5% */
.league .sheet col:nth-child(1) { width: 16%; }
.league .sheet col:nth-child(n + 2) { width: 13.5%; }
.league .sheet col:nth-child(n + 6) { width: 7.5%; }
/* 行高: 1行目 20%、偶数行 13%、奇数行 7% */
.league .sheet tr:nth-child(1) { height: 20%; }
.league .sheet tr:nth-child(2n) { height: 13%; }
.league .sheet tr:nth-child(2n + 3) { height: 7%; }
.league__nav {
padding: var(--space-section-sp) var(--gutter);
text-align: center;
}
.league__nav a { display: inline-block; padding: var(--space-1) var(--space-2); text-decoration: underline; }
@media (max-width: 768px) {
.league .sheet col:nth-child(1) { width: 14%; }
.league .sheet col:nth-child(n + 2) { width: 11.5%; }
.league .sheet col:nth-child(n + 6) { width: 10%; }
.league .sheet td { padding: var(--space-1); }
}
/* ===== #board(board.html)===== */
.board { height: 100vh; height: 100dvh; }
.board__slides { position: relative; height: 100%; }
/* 組(スライド)は全部重ねて置き、is-active だけフェードで見せる。裏の表も更新は続く */
.board__slide {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(var(--board-cols), 1fr);
grid-template-rows: repeat(var(--board-rows), 1fr);
gap: var(--board-gap);
padding: var(--board-gap);
opacity: 0;
transition: opacity var(--board-fade);
pointer-events: none;
}
.board__slide.is-active { opacity: 1; pointer-events: auto; }
.board__item {
display: grid;
grid-template-rows: auto 1fr;
min-width: 0;
min-height: 0;
margin: 0;
overflow: hidden; /* 長いチーム名で表が膨らんでも隣の表に重ねない */
}
.board__name {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
font-size: var(--text-board-name);
line-height: 1.2;
color: var(--color-white);
padding-inline: var(--space-2);
}
.board__item--red .board__name { background: var(--color-red); }
.board__item--blue .board__name { background: var(--color-blue); }
.board__item .sheet { height: 100%; min-height: 0; }
/* 列幅・行高は group.html と同じ比率。文字は「画面幅 ÷ 列数」に合わせて縮める */
.board .sheet col:nth-child(1) { width: 16%; }
.board .sheet col:nth-child(n + 2) { width: 13.5%; }
.board .sheet col:nth-child(n + 6) { width: 7.5%; }
.board .sheet tr:nth-child(1) { height: 20%; }
.board .sheet tr:nth-child(2n) { height: 13%; }
.board .sheet tr:nth-child(2n + 3) { height: 7%; }
.board .sheet td {
font-size: calc(var(--text-cell-board) / var(--board-cols));
padding: var(--space-1);
line-height: 1.1;
}
/* 見出し行(チーム名)は折り返しで膨らみやすいので詰める */
.board .sheet tr:nth-child(1) td { line-height: 1; padding-block: 0; }
.board__nav { padding: var(--space-section-sp) var(--gutter); text-align: center; }
.board__nav ul { list-style: none; padding: 0; margin-block: var(--space-3); }
.board__nav a { display: inline-block; padding: var(--space-1) 0; text-decoration: underline; }
.board__nav code { font-family: inherit; font-weight: 700; margin-inline: var(--space-1); white-space: nowrap; }
/* ===== #bracket(taurnament/index.html)===== */
.bracket {
height: 100vh;
height: 100dvh;
width: 100%;
overflow: hidden;
background: var(--color-dark); /* セーフエリアや読み込み前に白が見えないように */
}
/* grid にすると横長画面で行が画像の比率分の高さに伸び、下が切れるため block で箱いっぱいにする */
.bracket__img {
display: block;
width: 100%;
height: 100%;
object-fit: contain; /* 比率を保ったまま画面内に収める */
}