@charset "UTF-8";
/*
 * base.css
 * body・共通タグのベーススタイル
 *
 * @package ds-basketballclub-2026
 */

/* =============================================
   ボディ
   ============================================= */
html,
body {
	overflow-x: hidden;
}

body {
	font-family: var(--font-ja);
	font-size: 16px;
	color: var(--color-black);
	background-color: var(--color-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: calc(var(--vh, 1vh) * 100);
}

/* =============================================
   フォント読み込み（Google Fonts）
   ============================================= */
/* Inter / Zen Kaku Gothic Antique はheader.phpで<link>として読み込む */

/* =============================================
   見出し
   ============================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-ja);
	line-height: 1.4;
}

/* =============================================
   英字テキスト
   ============================================= */
.en {
	font-family: var(--font-en);
}

/* =============================================
   リンク
   ============================================= */
a {
	transition: opacity 0.2s ease;
}

@media (hover: hover) {
	a:hover {
		opacity: 0.7;
	}
}

/* =============================================
   画像
   ============================================= */
img {
	height: auto;
}

/* =============================================
   下層ページ共通タイポグラフィ
   使い方: HTMLに .page-title / .page-body 等を付与するだけ
   font-size は variables.css の --page-* 変数で一元管理
   ============================================= */

/* ページ・記事タイトル（h1） */
.page-title {
	font-family: var(--font-ja);
	font-size: var(--page-h1-pc);
	font-weight: 700;
	line-height: 1.6;
}

/* 一覧記事タイトル */
.list-title {
	font-family: var(--font-ja);
	font-size: var(--list-title-pc);
	font-weight: 700;
	line-height: 1.6;
}

/* 本文 */
.page-body {
	font-family: var(--font-ja);
	font-size: var(--page-body-pc);
	font-weight: 400;
	line-height: 1.9;
}

/* 本文内 h2 */
.page-body h2 {
	font-size: var(--page-h2-pc);
	font-weight: 700;
}

/* 本文内 h3 */
.page-body h3 {
	font-size: var(--page-h3-pc);
	font-weight: 700;
}

/* タブレット（〜1024px） */
@media screen and (max-width: 1024px) {
	.page-title {
		font-size: var(--page-h1-tab);
	}

	.page-body {
		font-size: var(--page-body-tab);
	}
}

/* SP（〜768px） */
@media screen and (max-width: 768px) {
	.page-title {
		font-size: var(--page-h1-sp);
	}

	.list-title {
		font-size: var(--list-title-sp);
	}

	.page-body {
		font-size: var(--page-body-sp);
	}

	.page-body h2 {
		font-size: var(--page-h2-sp);
	}

	.page-body h3 {
		font-size: var(--page-h3-sp);
	}
}

/* iOSズーム防止: フォームフィールドは16px未満だとiOSが自動ズームする */
@media screen and (max-width: 768px) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	input[type="search"],
	input[type="password"],
	select,
	textarea {
		font-size: 16px;
	}
}