/* テニス調整くんのブランドの印（D-207・2026-10-11 本人が案 2 を選んだ）。
   「テニス調整くん」の文字（ロゴ画像と同じ緑 #71C622 と紺 #081B37）の上に英字「TENNIS CHOUSEI KUN」、下にコートの線と
   真ん中の印、右に名前を指さすキャラ（D-206 の切り抜きの絵）。英字は 1 文字ずつ並べて日本語の幅いっぱいに広げる
   （端末の書体が違っても幅がそろう）。英字とキャラは飾りなので読み上げない。ロゴなので文字のコントラストの基準の外。
   大きさは --tc-jp（日本語の字の大きさ）で決め、ほかはその比で決める。暗い地は .tc-mark--dark（白とライム）。 */

/* ロゴ画像の帯だった所（使い方ガイド・予定を作る・コート割りの道具・履歴・記録・スコア）。 */
.tc-brand { display: flex; justify-content: center; align-items: center; padding: 9px 12px 8px; border-bottom: 1px solid #E7EFD9; text-decoration: none; }

.tc-mark { --tc-jp: 21px; display: inline-flex; align-items: center; gap: calc(var(--tc-jp) * .2); line-height: 1; vertical-align: middle; text-decoration: none; }
.tc-mark--sm { --tc-jp: 15px; }
.tc-mark--lg { --tc-jp: 26px; }
.tc-lockup { position: relative; display: inline-grid; justify-items: stretch; padding-bottom: calc(var(--tc-jp) * .33); }
.tc-en { display: flex; justify-content: space-between; margin: 0 0 calc(var(--tc-jp) * .24); font-family: "Outfit", system-ui, sans-serif; font-weight: 600; font-size: calc(var(--tc-jp) * .405); color: rgba(8, 27, 55, .55); }
.tc-jp { font-family: "Zen Kaku Gothic New", system-ui, sans-serif; font-weight: 900; font-size: var(--tc-jp); letter-spacing: .02em; white-space: nowrap; }
.tc-jp .g { color: #71C622; }
.tc-jp .n { color: #081B37; }
/* コートの線（ベースライン）と真ん中の印（センターマーク）。 */
.tc-lockup::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; border-radius: 2px; background: #A9D62E; }
.tc-lockup::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 1.5px; height: calc(var(--tc-jp) * .24); margin-left: -.75px; border-radius: 2px; background: #A9D62E; }
.tc-ball { display: block; flex: none; height: calc(var(--tc-jp, 21px) * 2.2); aspect-ratio: 230 / 192; margin-top: calc(var(--tc-jp, 21px) * -.2); background: url("/assets/mascot-ball.webp") center / contain no-repeat; }

/* うまくいった時のキャラ（D-208）。予定を作り終えた画面（大きく真ん中）と、予定のページの回答の知らせ（お礼の行の頭）。 */
.tc-ball--hero { height: 76px; margin: 0 auto 12px; }
.tc-thanks { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; text-align: left; }
.tc-thanks > .tc-ball { height: 44px; margin: 0; }
.tc-thanks__text { word-break: keep-all; overflow-wrap: anywhere; }

/* 印を包むリンクの下線は中の文字まで付くので外す。印のある見出しは、印のコートの線と重ねないよう、
   style.css の見出しの白い飾りの線（.header::after）を出さない。 */
a:has(.tc-mark) { text-decoration: none; }
.header:has(.tc-mark)::after { content: none; }

.tc-mark--dark .tc-en { color: rgba(255, 255, 255, .72); }
.tc-mark--dark .tc-jp .g { color: #C7ED45; }
.tc-mark--dark .tc-jp .n { color: #FFFFFF; }
.tc-mark--dark .tc-lockup::after, .tc-mark--dark .tc-lockup::before { background: #C7ED45; }