@charset "UTF-8";

/*=============================================

	スマートフォン用（画面幅 767px 以下のときだけ有効）
	2026-10 復旧時に追加。PC の見た目は変えない
	ページ専用CSS（head に出力）より後に効かせたい指定は !important

==============================================*/

/* PC ではハンバーガーメニューを出さない */
#sp-menu-btn,
#sp-menu,
.sp-carousel,
.sp-slider-dots {
	display: none;
}

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

/*------------------------
	body
--------------------------*/

html {
	-webkit-text-size-adjust: 100%;
}

body {
	font-size: 14px;
	line-height: 1.6;
	min-width: 0;
	background: #ffffff;
}

img {
	max-width: 100%;
	height: auto;
}

/*------------------------
	header
	（ロゴ・協会名＋右上にメニューボタン。登録ボタン・検索・メニューはハンバーガーメニューの中）
--------------------------*/

header,
#head .wrapper,
.h_wrap {
	position: relative;
	width: auto;
	height: auto;
}

#head .wrapper.cf {
	display: block;
}

/* 旧スマホ版と同じく、赤い帯にロゴと MENU ボタンだけ */
header {
	background: #ab0611;
}

h1 a {
	top: 8px;
	left: 10px;
	width: 120px;
	height: 44px;
	background-size: contain;
}

#head .g_name {
	visibility: hidden;
	float: none;
	height: 60px;
	padding: 0;
}

/* PC 用のボタン・検索・グローバルメニューはスマホでは出さない（ハンバーガーメニューに複製して表示） */
#head .tj_link,
#head .tj_link02,
#head div.search,
#global-navi {
	display: none;
}

/*------------------------
	ハンバーガーメニュー
	（中身は js/sp-menu.js が PC のメニューを複製して作る）
--------------------------*/

#sp-menu-btn {
	display: block;
	position: absolute;
	top: 6px;
	right: 6px;
	width: 50px;
	height: 50px;
	padding: 6px 8px 0;
	border: none;
	background: none;
	cursor: pointer;
	box-sizing: border-box;
}

#sp-menu-btn span {
	display: block;
	height: 3px;
	margin-bottom: 6px;
	border-radius: 2px;
	background: #ffffff;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
}

#sp-menu-btn span:nth-child(3) {
	margin-bottom: 0;
}

#sp-menu-btn:after {
	content: "MENU";
	display: block;
	margin-top: 3px;
	color: #ffffff;
	font-size: 10px;
	line-height: 1;
	text-align: center;
}

body.sp-menu-open #sp-menu-btn span:nth-child(1) {
	-webkit-transform: translateY(9px) rotate(45deg);
	transform: translateY(9px) rotate(45deg);
}

body.sp-menu-open #sp-menu-btn span:nth-child(2) {
	opacity: 0;
}

body.sp-menu-open #sp-menu-btn span:nth-child(3) {
	-webkit-transform: translateY(-9px) rotate(-45deg);
	transform: translateY(-9px) rotate(-45deg);
}

body.sp-menu-open #sp-menu {
	display: block;
	padding: 10px 0 0;
	border-top: 3px solid #9B0926;
	background: #1a1a1a;
	text-align: left;
}

#sp-menu .tj_link,
#sp-menu .tj_link02 {
	display: inline-block;
	position: static;
	margin: 0 0 10px 10px;
	padding: 0;
	text-align: left;
}

#sp-menu .tj_link a,
#sp-menu .tj_link02 a {
	display: inline-block;
	padding: 6px 16px;
	font-size: 12px;
}

#sp-menu .sp-search {
	padding: 0 10px 10px;
}

#sp-menu .sp-search input.text {
	width: 75%;
	height: 28px;
	font-size: 14px;
}

#sp-menu .sp-search input {
	vertical-align: middle;
}

/* 1段目（日本代表・楽しむ・関わる・育てる・JBA）：タップで開閉 */
#sp-menu ul.sp-gnav > li > a {
	display: block;
	position: relative;
	padding: 13px 40px 13px 15px;
	border-top: 1px solid #444444;
	color: #ffffff;
	font-size: 15px;
	font-weight: bold;
	background: #9B0926;
}

#sp-menu ul.sp-gnav > li.has-child > a:after {
	content: "＋";
	position: absolute;
	top: 13px;
	right: 15px;
}

#sp-menu ul.sp-gnav > li.open > a:after {
	content: "－";
}

#sp-menu ul.sp-gnav ul {
	display: none;
}

#sp-menu ul.sp-gnav > li.open > ul,
#sp-menu ul.sp-gnav > li.open > ul ul {
	display: block;
}

/* 2段目 */
#sp-menu ul.sp-gnav ul.child_nav_area li a {
	display: block;
	padding: 11px 15px 11px 20px;
	border-top: 1px solid #333333;
	color: #ffffff;
	font-size: 14px;
	font-weight: bold;
}

#sp-menu ul.sp-gnav ul.child_nav_area li span.allow {
	display: none;
}

/* 3段目 */
#sp-menu ul.sp-gnav ul.g-child_nav_area {
	background: #4D0413;
}

#sp-menu ul.sp-gnav ul.g-child_nav_area li.line-break {
	display: none;
}

#sp-menu ul.sp-gnav ul.g-child_nav_area li a {
	padding: 10px 15px 10px 35px !important;
	border-top: 1px solid #6b2433;
	font-size: 13px;
	font-weight: normal;
	line-height: 1.4;
}

/*------------------------
	container
--------------------------*/

#container {
	overflow-x: hidden;
}

#container .wrapper {
	display: block;
	width: auto;
	padding: 10px 10px 0;
}

#primary-contents,
#primary-contents-top,
#primary-contents.wide-contents {
	float: none;
	width: auto;
}

#secondary-contents {
	float: none;
	width: auto;
	margin-top: 30px;
}

#thirdly-contents {
	width: auto;
}

/*------------------------
	下層共通
--------------------------*/

.lower-content h2,
.wide-contents h2 {
	width: auto !important;
	height: auto !important;
	padding: 14px 10px 12px 22px;
	line-height: 1.3;
	background-size: auto 100%;
}

.lower-content .pdf-download {
	position: static;
	margin-bottom: 10px;
}

/* 本文中の幅指定（width 属性・style）を画面幅までに抑える */
.lower-content [style*="width"],
.lower-content div,
.lower-content iframe,
.lower-content video,
.lower-content embed,
.lower-content object {
	max-width: 100% !important;
	box-sizing: border-box;
}

.lower-content iframe[src*="youtube"],
.lower-content iframe[src*="vimeo"] {
	height: auto;
	aspect-ratio: 16 / 9;
}

/* 長い URL などは途中で折り返す */
.lower-content a {
	overflow-wrap: anywhere;
}

/* 選手・スタッフのプロフィール（Q&A 枠）の固定幅・左余白を外す */
.lower-content div#qatext {
	width: auto !important;
	margin: 20px 0 0 !important;
}

/* 記事のアイキャッチ画像は本文の上に全幅で */
#news #photo-box {
	float: none !important;
	width: auto !important;
	margin: 0 0 15px !important;
}

/* フォームの入力欄 */
.lower-content input[type="text"],
.lower-content input[type="email"],
.lower-content input[type="tel"],
.lower-content textarea,
.lower-content select {
	max-width: 100% !important;
	box-sizing: border-box;
}

/* 表：画面幅いっぱい。列の幅指定は外して自動で折り返す */
.lower-content table {
	width: 100% !important;
	max-width: 100%;
	font-size: 12px;
	table-layout: auto !important;
}

.lower-content th,
.lower-content td {
	width: auto !important;
	min-width: 0 !important;
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* 横に並べたボックス（float）は縦に並べる */
.lower-content .photo {
	float: none !important;
	width: auto !important;
	margin: 0 0 15px !important;
	text-align: center;
}

.lower-content .intro .text,
.lower-content .fl,
.lower-content .fr,
.lower-content .left,
.lower-content .right,
.lower-content .alignleft,
.lower-content .alignright {
	float: none !important;
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*------------------------
	footer（旧スマホ版と同じく赤地。SNS アイコン → リンク一覧（濃い赤の枠）→ Copyright）
--------------------------*/

footer {
	height: auto;
	padding: 0 0 15px;
	border-top: none;
	background: #ab0611;
}

/* PAGE TOP は右下のボールではなく、フッターの上に「ページトップへ」 */
#page-top {
	position: static;
	padding: 10px 15px 15px;
	background: #ffffff;
	text-align: right;
}

#page-top a,
#page-top a:hover {
	display: inline;
	margin: 0;
	padding: 0;
	background: none;
	color: #1c743f;
	font-size: 0;
	font-weight: normal;
	opacity: 1;
}

#page-top a:before {
	content: "▲ ページトップへ";
	font-size: 14px;
}

footer div#sns_link ul {
	flex-wrap: nowrap;
	justify-content: space-between;
	padding: 20px 15px 0;
}

footer div#sns_link li {
	margin: 0;
	width: 14%;
}

footer div#sns_link img {
	width: 100%;
}

footer div#footer_link {
	width: auto;
	margin: 20px 15px 0;
	padding: 5px 0;
	border-radius: 6px;
	background: #89050e;
}

footer div#footer_link ul {
	display: block;
}

footer div#footer_link li {
	margin: 0;
}

/* 「＞JBAについて」の先頭の「＞」は、左にずらして枠の外に隠す */
footer div#footer_link a {
	display: block;
	overflow: hidden;
	margin-left: 25px;
	padding: 6px 0;
	font-size: 14px;
	text-indent: -1em;
	white-space: nowrap;
}

footer div#copyright p {
	display: none;
}

address {
	margin-top: 15px;
	color: #ffffff;
	font-size: 11px;
}

/*------------------------
	トップページ（js/sp-top.js が body に class="sp-top" を付ける）
--------------------------*/

body.sp-top #container .wrapper {
	padding: 0;
}

/* 背景のボール模様は出さない */
body.sp-top #container {
	background: #ffffff;
}

/* メインスライダー：白地・余白なし（縮小は js/sp-slider.js） */
body.sp-top #primary-topics-top {
	margin-bottom: 0;
	padding: 0;
	border-radius: 0;
	background: #ffffff;
}

/* スライダー内の矢印・ボタン・一時停止・キャプションは隠し、下にドットを出す */
body.sp-top #slider .arrow-navigation,
body.sp-top #slider .buttons-navigation,
body.sp-top #slider .slideshow-controls,
body.sp-top #slider .caption-container,
body.sp-top #slider canvas {
	display: none !important;
}

.sp-slider-dots {
	display: block;
	margin: 0;
	padding: 18px 0 28px;
	text-align: center;
	font-size: 0;
}

.sp-slider-dots li {
	display: inline-block;
	width: 11px;
	height: 11px;
	margin: 0 5px;
	border-radius: 50%;
	background: #888888;
	cursor: pointer;
}

.sp-slider-dots li.on {
	background: #9b0926;
}

/* 見出し：黒い帯＋ボール */
body.sp-top #top-pickup h2,
body.sp-top #top-news h2,
body.sp-top #thirdly-contents .t_partner {
	height: auto !important;
	margin: 0 !important;
	padding: 10px 10px 10px 42px !important;
	border: none !important;
	color: #ffffff !important;
	font-size: 18px !important;
	font-weight: bold !important;
	line-height: 1.3;
	text-shadow: none !important;
	background: #130505 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='10.2'/%3E%3Cpath d='M1.8 12h20.4M12 1.8v20.4M4.8 4.8c3.4 3 3.4 11.4 0 14.4M19.2 4.8c-3.4 3-3.4 11.4 0 14.4'/%3E%3C/svg%3E") no-repeat 10px center !important;
	background-size: 24px 24px !important;
}

body.sp-top #top-pickup h2 span,
body.sp-top #top-news h2 span {
	display: none;
}

body.sp-top #primary-contents-top .article-box {
	margin-bottom: 30px;
	border: none;
}

body.sp-top #primary-contents-top .article-box .inner {
	padding: 0;
	border: none;
}

/* ニュースの行：1行目に日付（右にカテゴリ）、2行目にタイトル。点線で区切る */
body.sp-top #primary-contents-top .article-box table,
body.sp-top #primary-contents-top .article-box tbody {
	display: block;
	width: 100%;
}

body.sp-top #primary-contents-top .article-box tr {
	display: block;
	position: relative;
	padding: 6px 10px 8px;
	border-bottom: 1px dotted #1c743f;
	background: #ffffff !important;
}

body.sp-top #primary-contents-top .article-box td {
	display: block;
	padding: 0;
	border: none;
	background: none;
}

body.sp-top #primary-contents-top .article-box td.date {
	width: auto;
	color: #999999;
	font-size: 12px;
}

body.sp-top #primary-contents-top .article-box td.title {
	width: auto;
	font-size: 14px;
	line-height: 1.5;
}

body.sp-top #primary-contents-top .article-box td.title a {
	color: #222222;
}

body.sp-top #primary-contents-top .article-box td.category {
	position: absolute;
	top: 4px;
	right: 4px;
	width: auto;
}

body.sp-top .news-cat {
	width: 64px;
	padding: 2px 0;
	font-size: 12px;
	line-height: 16px;
}

/* ニュース：カテゴリのタブ・RSS は出さず、全カテゴリの新しい5件と「ニュース一覧へ」 */
body.sp-top #top-news {
	position: relative;
	padding-bottom: 50px;
}

body.sp-top #top-news ul.tabs,
body.sp-top #top-news a#rss,
body.sp-top #top-news [id^="content_"] {
	display: none !important;
}

body.sp-top #top-news #content_1 {
	display: block !important;
}

body.sp-top #top-news #content_1 tr:nth-child(n+6) {
	display: none;
}

body.sp-top #top-news a.tolist {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	top: auto;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 0 !important;
	border: none;
	border-radius: 0;
	background: #e6e6e6 !important;
	color: #1c743f;
	font-size: 0;
	line-height: 24px;
	text-indent: 0;
	text-align: center;
}

body.sp-top #top-news a.tolist:before {
	content: "ニュース一覧へ ▶";
	font-size: 15px;
}

/* 注目コンテンツ・特設サイト：PC のバナー並びは隠し、1枚ずつのスライド（js/sp-top.js）を出す */
body.sp-top #thirdly-contents {
	margin-top: 0;
}

body.sp-top #contents-group {
	margin-top: 0 !important;
	padding-bottom: 0 !important;
}

body.sp-top #contents-group > ul,
body.sp-top #slide {
	display: none;
}

.sp-carousel {
	display: block;
	position: relative;
	margin: 20px 0 30px;
}

.sp-c-view {
	overflow: hidden;
	margin: 0 50px;
}

.sp-c-track {
	display: flex;
	-webkit-transition: -webkit-transform .4s ease;
	transition: transform .4s ease;
}

.sp-carousel li {
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.sp-c-track li {
	flex: 0 0 100%;
	width: 100% !important;
	min-height: 60px;
	text-align: center;
}

.sp-c-track img {
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
}

.sp-c-prev,
.sp-c-next {
	position: absolute;
	top: 0;
	bottom: 30px;
	width: 50px;
	font-size: 0;
}

.sp-c-prev {
	left: 0;
}

.sp-c-next {
	right: 0;
}

.sp-c-prev:before,
.sp-c-next:before {
	content: "";
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	border-top: 2px solid #222222;
	border-left: 2px solid #222222;
}

.sp-c-prev:before {
	left: 20px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.sp-c-next:before {
	right: 20px;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

.sp-c-dots {
	margin-top: 12px;
	text-align: center;
	font-size: 0;
}

.sp-c-dots li {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 4px;
	border-radius: 50%;
	background: #bbbbbb;
	cursor: pointer;
}

.sp-carousel .sp-c-dots li {
	margin: 0 5px !important;
}

.sp-c-dots li.on {
	background: #9b0926;
}

/* 協賛企業：1社ずつ縦に並べる */
body.sp-top #executive-partner-group-flex .partner-flex__list {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
}

body.sp-top #executive-partner-group-flex .partner-flex__list:first-of-type {
	padding-top: 15px !important;
}

body.sp-top #executive-partner-group-flex .partner-flex__item {
	display: block;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 8px 0 !important;
	text-align: center;
}

body.sp-top #executive-partner-group-flex .partner-flex__item a {
	display: inline-block;
	width: 65%;
}

body.sp-top #executive-partner-group-flex .partner-flex__item img {
	display: block;
	width: 100% !important;
	max-width: none;
	height: auto !important;
	margin: 0 auto !important;
}

/* OFFICIAL LINKS */
body.sp-top #bottom-banner01,
body.sp-top #bottom-banner02 {
	width: auto;
	margin: 0;
	padding: 15px 10px 0;
}

body.sp-top #bottom-banner01 ul {
	gap: 4% !important;
}

body.sp-top #bottom-banner01 li {
	width: 22%;
	margin: 0;
}

body.sp-top #bottom-banner01 img {
	width: 100% !important;
	height: auto;
}

body.sp-top #bottom-banner02 ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}

body.sp-top #bottom-banner02 li {
	float: none;
	width: 45%;
	margin: 10px 0;
	text-align: center;
}

body.sp-top #bottom-banner02 img {
	width: 100% !important;
	height: auto;
	margin: 0 !important;
}


/* ニュース一覧（/date/2026 など）：日付が1文字ずつ折り返さないように */
#news .tabarea td.date {
	white-space: nowrap;
	padding-left: 6px;
	padding-right: 6px;
}

}