@charset "UTF-8";

/* ================================================================
   base.css - サイト共通ベーススタイルシート
   ================================================================
   このファイルはサイト全体で使用される基盤スタイルを定義します。

   【構成】
   1. CSSアニメーション (@keyframes)
      - 矢印移動アニメーション (arrowRight / arrowLeft / arrowUp / arrowDown 等)
      - X線エフェクト (xLineGrow)
      - テキストティッカー (MoveLeft)
   2. CSSカスタムプロパティ (:root)
      - カラーパレット、フォント、間隔、角丸、トランジション等
   3. ベース要素スタイル
      - body, a, button, input, textarea 等のリセットと初期値
   4. スクロールアニメーション ([data-animation])
   5. ユーティリティクラス (u-* プレフィックス)
      - レイアウト: u-inner, u-section
      - タイポグラフィ: u-title, u-title-highlight, u-clamp
      - フォーム: u-button, u-select-wrap, u-checkbox, u-radio
      - テーブル: u-table, u-table-blue, u-dot-table
      - 画像: u-switch-image, u-fit-image
      - エディター: u-editor (WYSIWYG出力の整形)
      - 表示切替: u-sp-block, u-tablet-block 等
   6. レスポンシブ対応 (@media)
      - 1599px以下: 高解像度調整
      - 1399px以下: 中解像度調整
      - 1364px以下: 低解像度調整
      - 999px以下:  タブレット対応
      - 767px以下:  スマートフォン対応
      - 374px以下:  小型スマートフォン対応
      - ホバー対応:  PC向けホバーエフェクト
   ================================================================ */

/* ================================================================
   1. CSSアニメーション (@keyframes)
   ================================================================ */

/* --- 矢印アニメーション: 右方向に飛び出して左から戻る --- */
@keyframes arrowRight {
	0% {
		transform: translate3d(0, 0, 0);
	}
	49% {
		transform: translate3d(100%, 0, 0);
	}
	50% {
		transform: translate3d(100%, 0, 0);
		visibility: hidden;
	}
	51% {
		transform: translate3d(-100%, 0, 0);
		visibility: hidden;
	}
	52% {
		transform: translate3d(-100%, 0, 0);
		visibility: visible;
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

/* --- 矢印アニメーション: 右上方向に飛び出して左下から戻る --- */
@keyframes arrowRightTop {
	0% {
		transform: translate3d(0, 0, 0);
	}
	49% {
		transform: translate3d(100%, -100%, 0);
	}
	50% {
		transform: translate3d(100%, -100%, 0);
		visibility: hidden;
	}
	51% {
		transform: translate3d(-100%, 100%, 0);
		visibility: hidden;
	}
	52% {
		transform: translate3d(-100%, 100%, 0);
		visibility: visible;
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

/* --- 矢印アニメーション: 左方向に飛び出して右から戻る --- */
@keyframes arrowLeft {
	0% {
		transform: translate3d(0, 0, 0);
	}
	49% {
		transform: translate3d(-100%, 0, 0);
	}
	50% {
		transform: translate3d(-100%, 0, 0);
		visibility: hidden;
	}
	51% {
		transform: translate3d(100%, 0, 0);
		visibility: hidden;
	}
	52% {
		transform: translate3d(100%, 0, 0);
		visibility: visible;
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

/* --- 矢印アニメーション: 上方向に飛び出して下から戻る --- */
@keyframes arrowUp {
	0% {
		transform: translate3d(0, 0, 0);
	}
	49% {
		transform: translate3d(0, -100%, 0);
	}
	50% {
		transform: translate3d(0, -100%, 0);
		visibility: hidden;
	}
	51% {
		transform: translate3d(0, 100%, 0);
		visibility: hidden;
	}
	52% {
		transform: translate3d(0, 100%, 0);
		visibility: visible;
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

/* --- 矢印アニメーション: 下方向に飛び出して上から戻る --- */
@keyframes arrowDown {
	0% {
		transform: translate3d(0, 0, 0);
	}
	49% {
		transform: translate3d(0, 100%, 0);
	}
	50% {
		transform: translate3d(0, 100%, 0);
		visibility: hidden;
	}
	51% {
		transform: translate3d(0, -100%, 0);
		visibility: hidden;
	}
	52% {
		transform: translate3d(0, -100%, 0);
		visibility: visible;
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

/* --- X線アニメーション: clip-pathで線が左から右へ伸びるエフェクト --- */
@keyframes xLineGrow {
	0% { clip-path: inset(0 100% 0 0); }
	100% { clip-path: inset(0 0 0 0); }
}
/* --- X線アニメーション（逆方向）: 線が右から左へ伸びるエフェクト --- */
@keyframes xLineGrowReverse {
	0% { clip-path: inset(0 0 0 100%); }
	100% { clip-path: inset(0 0 0 0); }
}
/*
   ヒーローセクションのX字型装飾ライン
   ::before / ::after で2本の斜線を描画し、交差させてX字を形成する。
   .is-visible クラス付与でフェードイン表示される。
*/
.hero-xlines {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
	transition: opacity 1s ease;
}
.hero-xlines.is-visible {
	opacity: 0.5;
}
.hero-xlines::before,
.hero-xlines::after {
	content: "";
	position: absolute;
	top: 0;
	left: 45%;
	width: 300%;
	height: 100px;
	transform-origin: center center;
	transform: translate(-50%, 0) rotate(var(--xline-angle1, 40deg));
	background: linear-gradient(90deg, var(--color-accent) 0%, #fff 30%, rgba(255,255,255,0) 60%);
	box-shadow: 0 0 6px 2px rgba(74, 178, 230, 0.15), 0 0 15px 4px rgba(74, 178, 230, 0.08);
	filter: blur(1px);
}
.hero-xlines::before,
.hero-xlines::after {
	mix-blend-mode: lighten;
}
.hero-xlines::after {
	left: 90%;
	transform: translate(-50%, 0) rotate(var(--xline-angle2, -30deg));
	background: linear-gradient(90deg, rgba(255,255,255,0) 40%, #fff 70%, var(--color-accent) 100%);
}

/* --- テキストティッカー: 水平方向に無限ループでスクロールするアニメーション --- */
@keyframes MoveLeft {
	from { transform: translateX(100%); }
	to { transform: translateX(-100%); }
}
/* --- テキストティッカー（偶数番目用）: 開始位置をずらして隙間なくループさせる --- */
@keyframes MoveLeft2 {
	from { transform: translateX(0); }
	to { transform: translateX(-200%); }
}

/*
   ヒーローティッカー
   ヒーロー領域の背景に大文字テキストを水平スクロールさせる装飾。
   奇数/偶数の子要素に異なるアニメーションを適用し、途切れなくループする。
*/
.hero-ticker {
	position: absolute;
	top: 35%;
	left: 0;
	right: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	display: flex;
	width: 100%;
	opacity: 0.5;
}
.hero-ticker_item {
	flex-shrink: 0;
	white-space: nowrap;
	font-size: 180px;
	font-weight: 900;
	color: #fff;
	line-height: 1;
	text-transform: uppercase;
	font-family: var(--font-jetbranins);
}
.hero-ticker:not(.no-tick) .hero-ticker_item:nth-child(odd) {
	animation: MoveLeft var(--tick-duration, 24s) var(--tick-delay, -12s) infinite linear;
}
.hero-ticker:not(.no-tick) .hero-ticker_item:nth-child(even) {
	animation: MoveLeft2 var(--tick-duration, 24s) infinite linear;
}

/* ================================================================
   2. CSSカスタムプロパティ (:root)
   ----------------------------------------------------------------
   サイト全体で参照されるデザイントークン。
   色・フォント・間隔・角丸・トランジション・コンテナ幅などを
   変数として一元管理し、テーマ変更を容易にしている。
   ================================================================ */
:root {
	/* --- カラーパレット（ここを変えるだけでサイト全体の配色が変わる） --- */
	--color-primary: #0071bc;         /* メインカラー */
	--color-primary-light: #f2f4f7;   /* メインカラー薄・セクション背景 */
	--color-accent: #4ab2e6;          /* アクセントカラー */
	--color-highlight: #E3F9B0;       /* ハイライト（旧 --color-yellow） */
	--color-bg: #fff;                 /* ページ背景色 */
	--color-text: #333;               /* 本文テキスト色 */
	--color-white: #fff;
	--color-black: #000;
	--color-red: #FF0000;

	/* --- セクション背景 --- */
	--color-section-alt: #f2f4f7;     /* 交互セクション背景 */
	--color-section-soft: #dce5f0;    /* ソフトセクション背景 */

	/* --- ぼかし背景 --- */
	--bg-blur-size: 70px;             /* ぼかし強度 */
	--bg-blur-base: #d2e6f4;          /* ベース背景色 */

	/* --- 格子模様 --- */
	--bg-grid-size: 22px;             /* マス目のサイズ */
	--bg-grid-color: rgba(255, 255, 255, 0.30);  /* 線の色・透明度 */

	/* --- グラデーション --- */
	--gradient-dark: #013384;         /* グラデーション暗色端 */
	--gradient-mid: #2b7cc9;          /* グラデーション中間 */
	--gradient-light: #4ab2e6;        /* グラデーション明色端 */
	--gradient-primary: linear-gradient(115deg, var(--gradient-dark) 2%, var(--gradient-mid) 68%, var(--gradient-light) 129%);
	--gradient-primary-reverse: linear-gradient(292deg, var(--gradient-light) -46%, var(--gradient-mid) 79%, var(--gradient-dark) 128%);

	/* --- ボーダー・罫線 --- */
	--color-border: #E5E5E5;          /* 旧 --color-light-gray */
	--color-border-light: rgba(0, 0, 0, 0.10);  /* 薄い罫線 */
	--color-line-gray: #ddd;

	/* --- フォーム --- */
	--color-form-placeholder: #B5B5B5;
	--color-form-check: #666;

	/* --- ボタン --- */
	--btn-bg: var(--color-accent);
	--btn-color: var(--color-white);
	--btn-border: var(--color-accent);
	--btn-radius: 6px;
	--btn-height: 60px;
	--btn-font-size: 16px;
	--btn-hover-bg: var(--color-white);
	--btn-hover-color: var(--color-accent);

	/* --- 角丸 --- */
	--radius-sm: 5px;
	--radius-md: 6px;
	--radius-lg: 10px;

	/* --- トランジション --- */
	--transition-fast: .2s;
	--transition-base: .3s;
	--transition-slow: .5s;

	/* --- コンテナ幅 --- */
	--width-container: 1280px;
	--width-container-wide: 1490px;

	/* --- ヘッダー --- */
	--header-logo-width: 199px;

	/* --- フッター --- */
	--footer-bg: var(--color-primary);
	--footer-color: var(--color-white);

	/* --- シャドウ --- */
	--shadow-header: inset 0 -1px 0 rgba(0, 0, 0, 0.07);

	/* --- ヒーロー・ページ背景 --- */
	--hero-bg: var(--color-section-alt);
	--page-hero-bg: var(--color-section-alt);

	/* --- フォント --- */
	--font-gothic: "IBM Plex Sans JP", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	--font-mincho: "游明朝", YuMincho, "ヒラギノ明朝 Pr6 W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	--font-jetbranins: "JetBrains Mono", "IBM Plex Sans JP", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

	/* --- 後方互換エイリアス（旧変数名→新変数名） --- */
	--color-dark-blue: var(--color-primary);
	--color-light-blue: var(--color-primary-light);
	--color-blue: var(--color-accent);
	--color-yellow: var(--color-highlight);
	--color-light-gray: var(--color-border);
}

/* ================================================================
   3. ベース要素スタイル
   ----------------------------------------------------------------
   body, a, button, input 等のHTML要素に対する初期スタイル。
   ページ全体の背景（ぼかしブロブ + グリッド模様）もここで定義。
   ================================================================ */

/* --- body: 全体の背景色・フォント・行間を設定 --- */
body {
	background: var(--bg-blur-base);
	color: var(--color-dark-blue);
	font-family: var(--font-gothic);
	font-size: 16px;
	line-height: 2;
	overflow-wrap: break-word;
	font-weight: 500;
	position: relative;
}
/*
   body::before - ぼかし背景レイヤー
   radial-gradient で白・シアン系のブロブ（丸い色面）を複数配置し、
   filter: blur() で柔らかい水彩画風の背景を生成する。
   position: fixed で常に画面全体を覆う。
*/
body::before {
	content: "";
	position: fixed;
	inset: -80px;
	z-index: -1;
	background:
		/* 白ブロブ: 不規則に散在 */
		radial-gradient(ellipse 52% 44% at 35% 30%, rgba(255,255,255,0.93) 0%, transparent 100%),
		radial-gradient(ellipse 37% 48% at 62% 52%, rgba(255,255,255,0.82) 0%, transparent 100%),
		radial-gradient(ellipse 44% 30% at 18% 65%, rgba(255,255,255,0.65) 0%, transparent 100%),
		/* シアンブルーブロブ: 中間トーン */
		radial-gradient(ellipse 55% 35% at 72% 15%, rgba(135,205,240,0.45) 0%, transparent 100%),
		radial-gradient(circle 90vmin at 6% 32%, rgba(90,180,230,0.60) 0%, transparent 100%),
		radial-gradient(ellipse 42% 30% at 88% 70%, rgba(110,195,235,0.50) 0%, transparent 100%),
		radial-gradient(ellipse 32% 45% at 50% 88%, rgba(125,200,238,0.38) 0%, transparent 100%),
		/* やや濃いシアンブロブ: アクセント */
		radial-gradient(circle 70vmin at 8% 10%, rgba(75,170,225,0.65) 0%, transparent 100%),
		radial-gradient(ellipse 25% 20% at 95% 5%, rgba(90,185,232,0.48) 0%, transparent 100%),
		radial-gradient(ellipse 28% 22% at 3% 92%, rgba(100,190,235,0.42) 0%, transparent 100%),
		radial-gradient(ellipse 40% 35% at 92% 85%, rgba(75,170,225,0.65) 0%, transparent 100%),
		radial-gradient(ellipse 30% 25% at 85% 95%, rgba(90,180,230,0.55) 0%, transparent 100%),
		var(--bg-blur-base);
	filter: blur(var(--bg-blur-size));
	pointer-events: none;
}
/*
   body::after - 格子模様（グリッド）レイヤー
   repeating-linear-gradient で縦横の細線を繰り返し、
   方眼紙風のグリッドパターンをページ全体に重ねる。
*/
body::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background-image:
		repeating-linear-gradient(0deg, var(--bg-grid-color) 0, var(--bg-grid-color) 1px, transparent 1px, transparent var(--bg-grid-size)),
		repeating-linear-gradient(90deg, var(--bg-grid-color) 0, var(--bg-grid-color) 1px, transparent 1px, transparent var(--bg-grid-size));
	background-size: var(--bg-grid-size) var(--bg-grid-size);
	pointer-events: none;
}
/* --- リンク: デフォルトの文字色をアクセントカラーに --- */
a {
	color: var(--color-blue);
}

/* --- ボタン: テキストカーソル（キャレット）を非表示に --- */
button {
	caret-color: rgba(255, 255, 255, 0);
}

/* --- リンクのフォーカス表示: キーボード操作時のアウトライン --- */
a:focus-visible {
	outline-color: #025ecc;
	outline-offset: 1px;
	outline-style: auto;
}
/* --- 電話番号リンク: PC時はクリック無効化（SPでは media query で有効化） --- */
a[href^="tel:"] {
	cursor: default;
	text-decoration: none;
	color: inherit;
	pointer-events: none;
}

/* --- ボタン: キャレット非表示（重複定義だが安全のため残す） --- */
button {
	caret-color: rgba(255, 255, 255, 0);
}

/* --- ボタンのフォーカス表示: キーボード操作時のアウトライン --- */
button:focus-visible {
	outline-width: 1px;
	outline-style: auto;
	outline-color: #025ecc;
	outline-offset: 1px;
}
/* --- フォーム入力欄: テキスト系 input / textarea の共通スタイル --- */
textarea,
[type="search"],
[type="date"],
[type="tel"],
[type="email"],
[type="number"],
[type="password"],
[type="text"] {
	-webkit-appearance: none;
	appearance: none;
	font-size: inherit;
	padding: 19px 19px;
	border: 1px solid var(--color-light-gray);
	border-radius: var(--radius-sm);
	box-sizing: border-box;
	width: 100%;
	line-height: inherit;
	resize: vertical;
	display: block;
	line-height: 24px;
	font-size: 18px;
}
/* ================================================================
   4. スクロールアニメーション ([data-animation])
   ----------------------------------------------------------------
   JSからdata-animation属性を "after" に切り替えることで、
   要素が画面内に入った時にフェード系アニメーションを発動させる。
   data-animation-type で方向やスケール効果を切り替える。
   ================================================================ */

/* --- 初期状態: 透明で非表示 --- */
[data-animation] {
	transition-duration: 1s;
	transition-delay: .2s;
	transition-property: opacity;
	opacity: 0;
}
/* --- アニメーション後: 不透明度を1にして表示 --- */
[data-animation="after"] {
	opacity: 1;
}

/* --- fadeInRight: 左からスライドしながらフェードイン --- */
[data-animation][data-animation-type="fadeInRight"] {
	transition-property: opacity, transform;
	transform: translateX(-20px);
}
[data-animation="after"][data-animation-type="fadeInRight"] {
	transform: translateX(0);
}
/* --- fadeInLeft: 右からスライドしながらフェードイン --- */
[data-animation][data-animation-type="fadeInLeft"] {
	transition-property: opacity, transform;
	transform: translateX(20px);
}
[data-animation="after"][data-animation-type="fadeInLeft"] {
	transform: translateX(0);
}
/* --- fadeInUp: 下からスライドしながらフェードイン --- */
[data-animation][data-animation-type="fadeInUp"] {
	transition-property: opacity, transform;
	transform: translateY(20px);
}
[data-animation="after"][data-animation-type="fadeInUp"] {
	transform: translateY(0);
}
/* --- fadeZoomOut: 拡大状態から通常サイズに戻りながらフェードイン --- */
[data-animation][data-animation-type="fadeZoomOut"] {
	transition-property: opacity, transform;
	transform: scale(1.05);
}
[data-animation="after"][data-animation-type="fadeZoomOut"] {
	transform: scale(1);
}
/* --- プレースホルダーテキストの色（ブラウザ互換対応） --- */
::-webkit-input-placeholder {
	color: var(--color-form-placeholder);
}
:-ms-input-placeholder {
	color: var(--color-form-placeholder);
}
::placeholder {
	color: var(--color-form-placeholder)
}

/* ================================================================
   5. ユーティリティクラス (u-* プレフィックス)
   ----------------------------------------------------------------
   サイト全体で再利用される汎用的なスタイルクラス群。
   レイアウト・タイポグラフィ・フォーム・テーブル・画像・エディター
   出力の整形など、目的別にグループ化されている。
   ================================================================ */

/* ========================================
   アイコン共通
   ======================================== */
.icon {
	vertical-align: middle;
	display: inline-block;
	position: relative;
	min-width: 1em;
}
.icon::before {
	display: block;
}

/* ========================================
   u-inner - コンテナ（内側余白）
   中央寄せの最大幅コンテナ。左右にパディングを持つ。
   ======================================== */
.u-inner {
	max-width: var(--width-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: 35px;
	padding-right: 35px;
}

/* ========================================
   u-title - セクション見出し
   英語サブタイトル (_en) + 日本語メインタイトル (_main) の
   2段構成。flex-direction: column-reverse で表示順を逆転し、
   DOMでは英語→日本語の順でも画面では日本語が上に表示される。
   ======================================== */
.u-title {
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 60px;
	font-weight: 600;
	color: var(--color-blue);
	display: flex;
	flex-direction: column-reverse;
}
.u-title_en {
	display: block;
	font-family: var(--font-jetbranins);
	font-size: 16px;
	padding-left: 0;
	line-height: 1.5;
	position: relative;
	word-wrap: break-word;
	word-break: break-all;
	margin-top: 5px;
	font-weight: 500;
}
.u-title_en_text[data-animation] {
	opacity: 1;
}
.u-title_main {
	display: block;
	margin-top: 0;
	font-size: 48px;
	font-weight: bold;
	line-height: 1.3;
}

/* ========================================
   u-table - 汎用テーブル
   ボーダー付きの定義リスト風テーブル。
   th（見出し列）は固定幅、td（値列）は残りの幅を使う。
   ======================================== */
.u-table {
	width: 100%;
	border-bottom: 1px solid var(--color-border-light);
}
.u-table > thead {}
.u-table > thead > tr {}
.u-table > thead > tr > th {
	padding: 7px 10px;
	border: 1px solid #ddd;
	white-space: nowrap;
	background: #efefef;
	font-weight: normal;
	vertical-align: middle;
}
.u-table > tbody {}
.u-table > tbody > tr {
	border-top: 1px solid var(--color-border-light);
}
.u-table > tbody > tr:first-child {
	border-top: none;
}
.u-table > tbody > tr > th {
	padding: 38px 20px;
	padding-left: 0;
	text-align: left;
	width: 195px;
	vertical-align: top;
	font-size: 125%;
	font-weight: 600;
	box-sizing: border-box;
}
.u-table > tbody > tr > td {
	padding: 38px 20px;
	padding-right: 0;
}

/* ========================================
   u-table-wrap - テーブル横スクロールラッパー
   テーブルが画面幅を超える場合に横スクロールを有効にする。
   _caution はSP時にスクロール可能であることを示す注意文。
   ======================================== */
.u-table-wrap {
	overflow: auto;
}
.u-table-wrap_caution {
	display: none;
}

/* ========================================
   u-list - ドット付きリスト
   デフォルトのリストマーカーを非表示にし、
   ::before 疑似要素でアクセントカラーの小さな正方形を表示。
   ======================================== */
.u-list {
	list-style: none;
}
.u-list > li {
	position: relative;
	z-index: 1;
	padding-left: 20px;
}
.u-list > li:first-child {}
.u-list > li::before {
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	width: 6px;
	height: 6px;
	background-color: var(--color-blue);
	left: 0;
	top: 1em;
	transform: translateY(-50%);
}

/* ========================================
   u-section - セクション（アンカーリンク用オフセット余白）
   ヘッダー固定表示分の高さをpadding-top/margin-topで相殺し、
   ページ内リンクでジャンプした際に見出しが隠れないようにする。
   ======================================== */
.u-section {
	padding-top: 86px;
	margin-top: -86px;
}

/* ========================================
   u-button - 汎用ボタン
   CSS変数でカラー・角丸・高さ等を制御する共通ボタン。
   バリエーション: -cancel（キャンセル）, -arrow（矢印付き）,
   -whiteBorder（白枠）, -blue（青枠）, -border, -white 等。
   ======================================== */
.u-button {
	display: flex;
	text-decoration: none;
	text-align: center;
	width: 100%;
	cursor: pointer;
	border-radius: var(--btn-radius);
	padding: 10px 28px;
	line-height: 1.2;
	background: var(--btn-bg);
	justify-content: flex-start;
	align-items: center;
	transition-duration: var(--transition-base);
	transition-property: background-color, color, border-color;
	position: relative;
	z-index: 1;
	color: var(--btn-color);
	min-height: var(--btn-height);
	font-family: var(--font-jetbranins);
	font-weight: bold;
	font-size: var(--btn-font-size);
	border: 1px solid var(--btn-border);
	box-sizing: border-box;
}
.u-button:active {}

/* --- u-button-cancel: キャンセル・戻る用ボタン（グレー背景） --- */
.u-button-cancel {
	background: var(--color-form-check);
	color: var(--color-white);
}

/* ========================================
   u-select-wrap - カスタムセレクトボックス
   ブラウザデフォルトの外観をリセットし、独自の矢印アイコンを配置。
   ======================================== */
.u-select-wrap {
	position: relative;
}
.u-select-wrap > .icon-arrowDown {
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	top: 32px;
	right: 30px;
	transform: translateY(-50%);
	pointer-events: none;
	font-size: 11px;
}
.u-select-wrap::after {}
.u-select-wrap select {
	margin: 0;
	padding: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: 0 0;
	border: 0;
	line-height: 62px;
	height: 64px;
	width: 100%;
	border-right: 25px solid rgba(0, 0, 0, 0);
	border-radius: 0;
	cursor: pointer;
	padding-left: 19px;
	display: block;
	border: 1px solid var(--color-light-gray);
	border-radius: var(--radius-sm);
	padding-right: 55px;
	font-family: inherit;
	background-color: var(--color-white);
	color: inherit;
	font-size: 18px;
}
.u-select-wrap select::-ms-expand {
	display: none;
}

/* ========================================
   u-checkbox - カスタムチェックボックス
   ネイティブcheckboxを透明にして非表示にし、
   _icon 疑似要素でカスタムデザインのチェックマークを描画。
   :checked 時に ::after のチェックマークをフェードイン表示。
   ======================================== */
.u-checkbox {
	position: relative;
	display: block;
	padding: 5px 0;
	padding-left: 30px;
	line-height: 1.6;
}
.u-checkbox > [type="checkbox"] {
	position: absolute;
	z-index: 2;
	opacity: 0;
	top: 0;
	left: 0;
}
.u-checkbox_icon {
	display: block;
	width: 22px;
	height: 22px;
	background: #fff;
	margin-right: 4px;
	transition-duration: var(--transition-base);
	transition-property: background-color, color;
	box-sizing: border-box;
	border: 1px solid var(--color-form-check);
	position: absolute;
	z-index: 0;
	top: calc(5px + 0.8em);
	transform: translateY(-50%);
	left: 0;
}
.u-checkbox > [type="checkbox"]:focus-visible + .u-checkbox_icon {
	outline-width: 1px;
	outline-style: auto;
	outline-color: #025ecc;
	outline-offset: 1px;
}
.u-checkbox_icon::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 8px;
	box-sizing: border-box;
	border: 3px solid var(--color-form-check);
	border-top: none;
	border-right: none;
	transform: translate(-50%, -50%) rotate(-39deg);
	opacity: 0;
	transition-duration: var(--transition-base);
	transition-property: opacity;
	margin-top: -2px;
}
.u-checkbox_text {
	display: block;
	font-weight: normal;
}
.u-checkbox > [type="checkbox"]:checked + .u-checkbox_icon {}
.u-checkbox > [type="checkbox"]:checked + .u-checkbox_icon::after {
	opacity: 1;
}

/* ========================================
   u-radio - カスタムラジオボタン
   チェックボックスと同様の手法でネイティブradioを非表示にし、
   _icon で円形のカスタムデザインを描画。
   :checked 時に内側の丸をフェードイン表示。
   ======================================== */
.u-radio {
	position: relative;
	display: block;
	padding: 5px 0;
	padding-left: 30px;
	line-height: 1.6;
}
.u-radio > [type="radio"] {
	position: absolute;
	z-index: 1;
	opacity: 0;
	top: 0;
	left: 0;
}
.u-radio_icon {
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	margin-right: 4px;
	transition-duration: var(--transition-base);
	transition-property: background-color, color;
	border: 1px solid var(--color-form-check);
	box-sizing: border-box;
	position: absolute;
	z-index: 0;
	top: calc(0.8em + 5px);
	left: 0;
	transform: translateY(-50%);
}
.u-radio_icon::after {
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	background: var(--color-form-check);
	border-radius: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
	transition-duration: var(--transition-base);
	transition-property: opacity;
}
.u-radio > [type="radio"]:focus-visible + .u-radio_icon {
	outline-width: 1px;
	outline-style: auto;
	outline-color: #025ecc;
	outline-offset: 1px;
}
.u-radio > [type="radio"]:checked + .u-radio_icon {}
.u-radio > [type="radio"]:checked + .u-radio_icon::after {
	opacity: 1;
}
.u-radio_text {
	display: block;
	font-weight: normal;
}

/* ========================================
   u-hidden-svg - SVGスプライト非表示コンテナ
   SVGシンボル定義を画面外に隠す。<use> で参照するためDOMに必要。
   ======================================== */
.u-hidden-svg {
	height: 0;
	width: 0;
	overflow: hidden;
	position: absolute;
}

/* ========================================
   u-sp-* - スマートフォン時の表示切り替え
   デフォルトで非表示、767px以下でblock/inlineに切り替わる。
   逆に u-sp-none はSP時に非表示になる。
   ======================================== */
.u-sp-block {
	display: none;
}
.u-sp-inline {
	display: none;
}

/* ========================================
   u-tablet-* - タブレット時の表示切り替え
   デフォルトで非表示、999px以下でblock/inlineに切り替わる。
   逆に u-tablet-none はタブレット以下で非表示になる。
   ======================================== */
.u-tablet-block {
	display: none;
}
.u-tablet-inline {
	display: none;
}

/* ========================================
   u-sps-* - 小型スマートフォン時の表示切り替え
   デフォルトで非表示、374px以下でinlineに切り替わる。
   ======================================== */
.u-sps-inline {
	display: none;
}

/* ========================================
   u-lowres-* - 低解像度時の表示切り替え
   デフォルトで非表示、1364px以下でinlineに切り替わる。
   ======================================== */
.u-lowres-inline {
	display: none;
}

/* ========================================
   u-clamp - テキスト行数制限（2行で省略）
   -webkit-line-clamp でテキストを最大2行に制限し、
   超過分は「...」で省略表示する。カード等の概要表示に使用。
   ======================================== */
.u-clamp {
	max-height: 3.6em;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -webkit-box;
}

/* ========================================
   u-switch-image - PC/SP画像切り替え
   2枚の<img>を内包し、PC時はfirst-child（PC用画像）を表示、
   SP時(767px以下)はlast-child（SP用画像）に切り替える。
   ======================================== */
.u-switch-image > img:first-child {}
.u-switch-image > img:last-child {
	display: none;
}

/* ========================================
   u-fit-image - アスペクト比固定のフィット画像
   padding-bottom で正方形（100%）のアスペクト比を確保し、
   内部の img を object-fit: cover で隙間なく表示する。
   ======================================== */
.u-fit-image {
	position: relative;
	z-index: 1;
	padding-bottom: 100%;
	overflow: hidden;
}
.u-fit-image > img {
	display: block;
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ========================================
   u-editor - エディター（WYSIWYG）出力コンテンツの整形
   CMSのリッチエディター（WordPress等）から出力されるHTML要素
   (h2〜h5, p, ul, ol, table, blockquote, img 等) に対して
   統一的なタイポグラフィとスペーシングを適用する。
   ======================================== */
.u-editor {
	word-break: break-all;
}
.u-editor::after {
	content: "";
	display: block;
	clear: both;
}
.u-editor div {
	max-width: 100%;
}
.u-editor img {
	max-width: 100%;
	height: auto;
}
.u-editor iframe {
	max-width: 100%;
}
.u-editor video {
	max-width: 100%;
	height: auto;
}
.u-editor blockquote {
	background-color: #f6f6f6;
	padding: 30px;
	position: relative;
	z-index: 1;
}
.u-editor blockquote::before {
	content: "“";
	font-size: 50px;
	color: #999;
	position: absolute;
	left: 5px;
	top: 5px;
	line-height: 1;
}
.u-editor blockquote::after {
	content: "”";
	font-size: 50px;
	color: #999;
	position: absolute;
	right: 5px;
	bottom: -15px;
	line-height: 1;
}

/* ========================================
   u-arrow - 矢印アイコンアニメーションラッパー
   overflow: hidden で矢印の飛び出し部分をクリップし、
   ホバー時に @keyframes arrowRight 等を適用して
   矢印が飛び出して戻るループアニメーションを実現する。
   ======================================== */
.u-arrow {
	overflow: hidden;
	width: 1em;
	height: 1em;
	display: block;
}
.u-arrow_item {
	display: block;
}
.u-arrow_item-rightTop {}

/* ========================================
   u-border - ホバー時アンダーラインアニメーション
   background-image で下線を描画し、background-size を
   0%→100% に変化させることで線が伸びるエフェクトを実現。
   親要素（a等）のホバー時に background-size を切り替える。
   ======================================== */
.u-border {
	background-image: linear-gradient(to top, currentColor 1px, rgba(255, 255, 255, 0) 1px);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 0% 1px;
	transition-duration: var(--transition-base);
	transition-property: background-size;
}

/* ========================================
   u-title-highlight - 見出しハイライト（標準サイズ）
   背景色付きのインラインテキスト見出し。
   box-decoration-break: clone で改行時も背景が途切れない。
   ======================================== */
.u-title-highlight {
	font-size: 26px;
	font-weight: 600;
	margin-bottom: 21px;
	line-height: 1.8;
}
.u-title-highlight_main {
	background-color: var(--color-dark-blue);
	color: var(--color-white);
	padding: 0 .1em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ========================================
   u-title-highlight-sm - 見出しハイライト（小サイズ: 20px）
   ======================================== */
.u-title-highlight-sm {
	line-height: 1.5;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 20px;
}
.u-title-highlight-sm_main {
	background-color: var(--color-dark-blue);
	color: var(--color-white);
	padding: 0 0.1em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ========================================
   u-title-highlight-lg - 見出しハイライト（大サイズ: 58px）
   ヒーロー領域等で使用する大型見出し。
   ======================================== */
.u-title-highlight-lg {
	line-height: 1.3;
	font-size: 58px;
	font-weight: 600;
	margin-bottom: 98px;
	display: flex;
}
.u-title-highlight-lg_main {
	color: var(--color-dark-blue);
	background-color: var(--color-white);
	display: block;
	padding-top: 0.1em;
	padding-right: 0.15em;
	padding-left: 0.2em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ========================================
   u-title-highlight-xs - 見出しハイライト（極小サイズ）
   スタイルは親クラスから継承。必要に応じてオーバーライド用。
   ======================================== */
.u-title-highlight-xs {}
.u-title-highlight-xs_main {}

/* ========================================
   u-title-small - 小見出し
   JetBrains Monoフォントを使用するアクセントカラーの小見出し。
   ======================================== */
.u-title-small {
	font-size: 25px;
	line-height: 1.5;
	font-family: var(--font-jetbranins);
	color: var(--color-blue);
	margin-bottom: 25px;
	font-weight: 500;
}
/* --- u-button-arrow: 右側に矢印アイコンを配置するボタンの右パディング確保 --- */
.u-button-arrow {
	padding-right: 55px;
}

/* --- u-button_arrow: ボタン内の矢印アイコン（丸背景の中央配置） --- */
.u-button_arrow {
	font-size: 11px;
	width: 28px;
	height: 28px;
	background-color: var(--color-white);
	border-radius: var(--radius-md);
	color: var(--color-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 16px;
	transition-duration: var(--transition-base);
	transition-property: background-color, color, border-color;
}
/* --- u-button_arrow-left: 矢印を左側に配置する場合 --- */
.u-button_arrow-left {
	left: 16px;
}

/* --- u-button-whiteBorder: 白枠・透明背景のボタンバリエーション --- */
.u-button-whiteBorder {
	background-color: rgba(255, 255, 255, 0);
	border-color: var(--color-white);
}

/* ========================================
   u-point-text - 強調ポイントテキスト（黄色背景）
   テキストにハイライトカラー背景を付けて強調する。
   改行時も背景が途切れないよう box-decoration-break を適用。
   ======================================== */
.u-point-text {
	background-color: var(--color-yellow);
	color: var(--color-dark-blue);
	padding: 0 .1em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ========================================
   u-dot-table - ドット付きタイムラインテーブル
   th列にステップ番号、td列に説明テキストを配置。
   th::after で縦線、.u-dot-circle で接続点の丸を描画し、
   タイムライン風のレイアウトを実現する。
   ======================================== */
.u-dot-table {
	width: 100%;
}
.u-dot-table > tbody {}
.u-dot-table > tbody > tr {}
.u-dot-table > tbody > tr > th {
	white-space: nowrap;
	font-size: 38px;
	color: rgba(26, 115, 240, 0.15);
	font-family: var(--font-jetbranins);
	font-weight: bold;
	width: 194px;
	box-sizing: border-box;
	text-align: left;
	vertical-align: top;
	padding: 24px 10px;
	padding-left: 0;
	position: relative;
	line-height: 38px;
	letter-spacing: -0.05em;
}
.u-dot-table > tbody > tr > th::after {
	content: "";
	display: block;
	width: 2px;
	height: 100%;
	position: absolute;
	top: 35px;
	left: 100%;
	background-color: var(--color-blue);
}
.u-dot-table > tbody > tr:last-child > th::after {
	display: none;
}
.u-dot-table > tbody > tr > td {
	padding: 24px 40px;
	vertical-align: top;
}

/* ========================================
   u-dot-circle - ドットテーブルの接続点丸印
   タイムライン縦線上に配置するアクセントカラーの丸印。
   ======================================== */
.u-dot-circle {
	display: block;
	position: absolute;
	width: 10px;
	height: 10px;
	background-color: var(--color-blue);
	border-radius: 50%;
	left: 100%;
	top: 35px;
	transform: translateX(-50%);
	margin-left: 1px;
}
/* --- u-button-blue: 青枠・透明背景のボタンバリエーション --- */
.u-button-blue {
	border-color: var(--color-blue);
	background-color: rgba(255, 255, 255, 0);
	color: var(--color-blue);
	min-height: 46px;
	padding-left: 20px;
	font-weight: bold;
}
/* --- u-arrow-right: ボタン内右端に配置する矢印アイコン --- */
.u-arrow-right {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 15px;
	font-size: 10px;
}
/* --- ハイライト見出しの白背景バリエーション --- */
.u-title-highlight_main-white {
	color: var(--color-dark-blue);
	background-color: var(--color-white);
}
.u-title-highlight-sm_main-white {
	color: var(--color-dark-blue);
	background-color: var(--color-white);
}

/* ========================================
   u-category - カテゴリーラベル（タグ風バッジ）
   記事一覧やカード上に表示するカテゴリー名ラベル。
   data-slug 属性でカテゴリー種別ごとに背景色を切り替える。
     - upcoming: メインカラー背景
     - ongoing:  ハイライト（黄色）背景
     - closed/ended: 半透明グレー背景
   ======================================== */
.u-category {
	color: var(--color-white);
	background-color: var(--color-blue);
	line-height: 22px;
	padding: 0px 3px;
	font-size: 14px;
	font-weight: 600;
	box-sizing: border-box;
	text-decoration: none;
	transition-duration: var(--transition-base);
	transition-property: opacity;
}
.u-category-large {
	font-size: 16px;
}

/* ========================================
   u-update - 更新日・投稿日の日付表示
   JetBrains Monoフォントで等幅の日付テキストを表示。
   ======================================== */
.u-update {
	color: rgba(4, 55, 111, 0.50);
	font-family: var(--font-jetbranins);
	line-height: 22px;
	letter-spacing: 0.04em;
}
.u-update > time {
	display: block;
}
/* --- u-editor 内の見出し階層スタイル (h2〜h5) --- */
.u-editor h2 {
	font-size: 36px;
	font-weight: bold;
	line-height: 1.6;
	margin-bottom: 40px;
	margin-top: 40px;
}
.u-editor h3 {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.5;
	margin-top: 30px;
	margin-bottom: 30px;
}
.u-editor h3 > span {
	background-color: var(--color-light-blue);
	padding-left: 0.1em;
	padding-right: 0.1em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.u-editor h5 {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 20px;
	margin-top: 20px;
}
.u-editor h4 {
	color: var(--color-blue);
	font-size: 24px;
	font-weight: bold;
	line-height: 1.5;
	position: relative;
	padding-left: 20px;
	margin-bottom: 30px;
	margin-top: 30px;
}
.u-editor h4::before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	background-color: currentColor;
	position: absolute;
	top: 0.75em;
	left: 0;
	transform: translateY(-50%);
}
/* --- u-editor 内の順序付きリスト: カスタム番号付き --- */
.u-editor ol {
	font-weight: normal;
	counter-reset: number;
	list-style: none;
	margin-top: 30px;
	margin-bottom: 30px;
}
.u-editor ol > li {
	counter-increment: number;
	position: relative;
	padding-left: 28px;
}
.u-editor ol > li::before {
	content: counter(number)".";
	display: block;
	font-family: var(--font-jetbranins);
	color: var(--color-blue);
	position: absolute;
	top: 1em;
	transform: translateY(-50%);
	left: 0;
}
.u-editor ol > li:nth-child(n+2) {
	margin-top: 8px;
}
.u-editor ol > li:nth-child(n+10) {
	padding-left: 36px;
}
/* --- u-editor 内の順序なしリスト: カスタムドットマーカー --- */
.u-editor ul {
	list-style: none;
	font-weight: normal;
}
.u-editor ul > li {
	position: relative;
	padding-left: 25px;
}
.u-editor ul > li::before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	background-color: var(--color-blue);
	position: absolute;
	top: 1em;
	transform: translateY(-50%);
	left: 0;
}
.u-editor ul > li:nth-child(n+2) {
	margin-top: 8px;
}
/* --- u-editor 内のテーブル: ボーダー付き整形テーブル --- */
.u-editor table {
	width: 100%;
	font-weight: normal;
	line-height: 1.5;
	border-top: 1px solid var(--color-line-gray);
	border-bottom: 1px solid var(--color-line-gray);
}
.u-editor table > thead {
	border-bottom: none;
}
.u-editor table > thead > tr {}
.u-editor table > thead > tr > th {
	text-align: center;
	width: 33%;
	background-color: var(--color-light-blue);
	padding: 18px;
	border-left: 1px solid var(--color-line-gray);
	border-right: 1px solid var(--color-line-gray);
	border-top: none;
	border-bottom: none;
}
.u-editor table > thead > tr > th:first-child {}
.u-editor table > thead > tr > td {}
.u-editor table > tbody {}
.u-editor table > tbody > tr {
	border-top: 1px solid var(--color-line-gray);
}
.u-editor table > tbody > tr > td {
	text-align: left;
	padding: 20px;
	border: none;
	border-left: 1px solid var(--color-line-gray);
	border-right: 1px solid var(--color-light-gray);
}
.u-editor table > tbody > tr > td:first-child {}
/* --- u-editor 内の段落: 上下マージンで間隔を確保 --- */
.u-editor p {
	margin-top: 15px;
	margin-bottom: 15px;
}
.u-editor p:first-child {
	margin-top: 0;
}
.u-editor p:last-child {
	margin-bottom: 0;
}
.u-editor p > a {}
/* --- カテゴリーラベルの種別バリエーション --- */
.u-category[data-slug="upcoming"] {
	background-color: var(--color-dark-blue);
}
.u-category[data-slug="ongoing"] {
	background-color: var(--color-yellow);
	color: var(--color-dark-blue);
}
.u-category[data-slug="closed"] {
	background-color: rgba(0, 0, 0, 0.20);
	color: var(--color-dark-blue);
}
.u-category[data-slug="ended"] {
	background-color: rgba(0, 0, 0, 0.20);
}

/* ========================================
   u-sps-none - 小型SP時に非表示にする要素
   デフォルトはblock表示。374px以下で display: none に切り替わる。
   ======================================== */
.u-sps-none {
	display: block;
}

/* ========================================
   u-title-dot - ドット付き見出し
   左側にアクセントカラーの小さな正方形マーカーを配置した見出し。
   ======================================== */
.u-title-dot {
	font-size: 16px;
	font-weight: 600;
	color: var(--color-blue);
	line-height: 1.5;
	position: relative;
	padding-left: 20px;
}
.u-title-dot::before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	background-color: var(--color-blue);
	position: absolute;
	top: 0.75em;
	left: 0;
	transform: translateY(-50%);
}
/* --- WordPress ブロックエディター固有要素のスタイル --- */
.u-editor .wp-element-caption {
	font-size: 14px;
	line-height: 1.75;
	margin-bottom: 0;
	margin-top: 15px;
}
.u-editor .wp-block-table {
	margin-top: 30px;
	margin-bottom: 30px;
}
.u-editor .wp-block-columns {
	margin: 40px 0;
}
/* --- ハイライト見出しの青背景バリエーション --- */
.u-title-highlight_main-blue {
	background-color: var(--color-blue);
}

/* ========================================
   u-ordered-list - 番号付きリスト
   CSSカウンターで自動採番し、アクセントカラーで番号を表示。
   u-editor 外で使用する独立したユーティリティ版。
   ======================================== */
.u-ordered-list {
	list-style: none;
	counter-reset: number;
}
.u-ordered-list > li {
	counter-increment: number;
	position: relative;
	padding-left: 29px;
}
.u-ordered-list > li::before {
	content: counter(number)".";
	display: block;
	color: var(--color-blue);
	position: absolute;
	top: 0;
	left: 0;
}
.u-ordered-list > li:nth-child(n+2) {
	margin-top: 8px;
}
.u-ordered-list > li:nth-child(n+10) {
	padding-left: 36px;
}

/* ========================================
   u-table-blue - 青テーブル（ヘッダー行がプライマリカラー背景）
   thead が濃い青背景・白文字、tbody の th が薄い青背景。
   一覧表・比較表などで使用する装飾テーブル。
   ======================================== */
.u-table-blue {
	width: 100%;
	border: 1px solid var(--color-light-gray);
	line-height: 1.5;
}
.u-table-blue > thead {}
.u-table-blue > thead > tr {}
.u-table-blue > thead > tr > th {
	background-color: var(--color-primary);
	color: var(--color-white);
	font-weight: bold;
	padding: 20px 10px;
	border-left: 1px solid var(--color-light-gray);
}
.u-table-blue > thead > tr > th:first-child {
	border-left: none;
}
.u-table-blue > tbody {}
.u-table-blue > tbody > tr {
	border-bottom: 1px solid var(--color-light-gray);
}
.u-table-blue > tbody > tr:last-child {
	border-bottom: none;
}
.u-table-blue > tbody > tr > th {
	font-weight: bold;
	text-align: left;
	padding: 20px 15px;
	vertical-align: middle;
	box-sizing: border-box;
	width: 400px;
	background-color: var(--color-light-blue);
}
.u-table-blue > tbody > tr > td {
	text-align: left;
	vertical-align: middle;
	padding: 20px 15px;
	box-sizing: border-box;
	border-left: 1px solid var(--color-light-gray);
}
/* --- u-title_en_arrow: 英語タイトル横の矢印（デフォルト非表示） --- */
.u-title_en_arrow {
	display: none;
}

/* --- u-button-border: 白背景・青文字のボーダーボタン --- */
.u-button-border {
	background-color: var(--color-white);
	color: var(--color-blue);
}
/* --- u-button_arrow-white: 白背景ボタン用の青背景矢印 --- */
.u-button_arrow-white {
	background-color: var(--color-blue);
	color: var(--color-white);
}

/* ========================================
   u-midres-inline - 中解像度時のインライン表示
   デフォルトで非表示、1399px以下でinlineに切り替わる。
   ======================================== */
.u-midres-inline {
	display: none;
}

/* ========================================
   u-hires-inline - 高解像度時のインライン表示
   デフォルトで非表示、1599px以下でinlineに切り替わる。
   ======================================== */
.u-hires-inline {
	display: none;
}
/* --- u-title_en-large: 英語サブタイトルの大きめサイズ --- */
.u-title_en-large {
	font-size: 18px;
}

/* ========================================
   u-swiper-pager - Swiperスライダーのページネーション
   スライダー下部に表示するドットインジケーター。
   現在のスライドをアクセントカラーでハイライトする。
   ======================================== */
.u-swiper-pager {
	position: static;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: 14px;
}
.u-swiper-pager .swiper-pagination-bullet {
	display: block;
	width: 6px;
	height: 6px;
	border: 6px solid rgba(255, 255, 255, 0);
	box-sizing: content-box;
	background-clip: content-box;
	background-color: var(--color-white);
	border-radius: 50%;
	transition-duration: var(--transition-base);
	transition-property: background-color, color;
	opacity: 1;
	caret-color: rgba(255, 255, 255, 0);
	box-shadow: none;
}
.swiper .u-swiper-pager .swiper-pagination-bullet {
	margin: 0;
}
.u-swiper-pager .swiper-pagination-bullet-active {
	background-color: var(--color-blue);
}
/* --- u-button-white: 白背景・青文字のボタンバリエーション --- */
.u-button-white {
	background-color: var(--color-white);
	color: var(--color-blue);
}

/* --- u-editor 内のエントリー見出し（記事詳細ページ用） --- */
.u-editor h2.entry_headline {
	font-size: 52px;
	line-height: 1.5;
	color: var(--color-blue);
	position: relative;
	padding-left: 35px;
	margin-bottom: 58px;
}
.u-editor h2.entry_headline > .icon {
	position: absolute;
	top: 0.75em;
	left: 0;
	transform-origin: left center;
	transform: translateY(-50%) scale(0.6);
}
/* --- u-editor 内のエントリーサブ見出し（背景色付き） --- */
.u-editor h3.entry_subhead {
	font-size: 26px;
	font-weight: 600;
	color: var(--color-white);
	margin-bottom: 23px;
}
.u-editor h3.entry_subhead .entry_subhead_inner {
	background-color: var(--color-dark-blue);
	padding: 0 0.1em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
/* --- ハイライト見出しの薄い青背景バリエーション --- */
.u-title-highlight_main-light {
	background-color: var(--color-light-blue);
	color: var(--color-dark-blue);
}

/* ================================================================
   6. レスポンシブ対応 (@media)
   ----------------------------------------------------------------
   ブレークポイントごとにフォントサイズ・余白・レイアウトを調整。
   モバイルファーストではなくデスクトップファーストで設計されており、
   max-width で順に小さい画面に対応していく。
   ================================================================ */

/* --- レスポンシブ: 1599px以下 ---
   高解像度ディスプレイ向けの改行位置調整。
   u-hires-inline をインライン表示に切り替える。
--- */
@media screen and (max-width:1599px) {
	.u-hires-inline {
		display: inline;
	}
}

/* --- レスポンシブ: 1399px以下 ---
   中解像度向け。u-midres-inline をインライン表示に切り替える。
--- */
@media screen and (max-width:1399px) {
	.u-midres-inline {
		display: inline;
	}
}

/* --- レスポンシブ: 1364px以下 ---
   低解像度PC/大型タブレット向け。
   - u-lowres-inline をインライン表示に、u-lowres-none を非表示に切り替え
   - img に max-width: 100% を適用してはみ出し防止
   - セクションメインタイトルのフォントサイズを縮小 (48px → 44px)
--- */
@media screen and (max-width:1364px) {
	.u-lowres-inline {
		display: inline;
	}
	.u-lowres-none {
		display: none;
	}
	img {
		max-width: 100%;
		height: auto;
	}
	.u-title_main {
		font-size: 44px;
	}
}

/* --- PC ホバーエフェクト ---
   min-width: 1000px かつ hover: hover に対応するデバイスのみ適用。
   タッチデバイスではホバー効果を無効にし、PC操作時のみ発動する。

   主な効果:
   - ボタン: 背景色と文字色の反転（hover-bg / hover-color）
   - 矢印アイコン: 各方向のアニメーション再生
   - u-border: アンダーラインが0%→100%に伸びるアニメーション
   - カテゴリーラベル: 透明度変化
   - リンク: text-decoration を解除
--- */
@media screen and (min-width: 1000px) and (hover: hover) {
	.u-swiper-pager .swiper-pagination-bullet:hover {
		background-color: var(--color-blue);
	}
	a.u-category:hover,
	a:hover > u-category {
		opacity: 0.7;
	}
	.u-editor > p > a:hover {}
	.u-button:hover .u-button_arrow {
		background-color: var(--color-blue);
		color: var(--color-white);
	}
	.u-button:hover .u-button_arrow-white {}
	a:hover {
		text-decoration: none;
	}
	.u-button:hover {
		background-color: var(--btn-hover-bg);
		color: var(--btn-hover-color);
	}
	.u-button-white:hover {
		background-color: var(--color-blue);
		color: var(--color-white);
	}
	.u-button-cancel:hover {
		background: #555;
		color: var(--color-white);
	}
	button:hover .u-arrow_item,
	a:hover .u-arrow_item {
		display: block;
		animation-name: arrowRight;
		animation-duration: .6s;
		animation-fill-mode: backwards;
		animation-iteration-count: 1;
	}
	button:hover .u-arrow_item-up,
	a:hover .u-arrow_item-up {
		animation-name: arrowUp;
	}
	button:hover .u-arrow_item-down,
	a:hover .u-arrow_item-down {
		animation-name: arrowDown;
	}
	button:hover .u-arrow_item-rightTop,
	a:hover .u-arrow_item-rightTop {
		animation-name: arrowRightTop;
	}
	button:hover .u-arrow_item-left,
	a:hover .u-arrow_item-left {
		animation-name: arrowLeft;
	}
	a:hover .u-border {
		background-position: left bottom;
		background-size: 100% 1px;
	}
	.u-button-whiteBorder:hover {}
	.u-button-blue:hover {
		background-color: var(--color-blue);
		color: var(--color-white);
	}
	.u-button-border:hover {
		background-color: var(--color-blue);
		color: var(--color-white);
	}
	.u-button:hover .u-button_arrow-white {
		background-color: var(--color-white);
		color: var(--color-blue);
	}
}

/* --- レスポンシブ: タブレット以下 (999px以下) ---
   タブレット端末向けの調整。
   - u-inner の左右パディングを縮小 (35px → 20px)
   - セクション見出し・ハイライト見出しのフォントサイズを縮小
   - テーブルの列幅・パディングを調整
   - u-tablet-block / u-tablet-inline を表示、u-tablet-none を非表示
   - 電話番号リンク (tel:) のクリックを有効化
   - u-editor 内の見出し・テーブル等のフォントサイズを調整
--- */
@media screen and (max-width:999px) {
	body {}
	a {}
	a[href^="tel:"] {
		pointer-events: auto;
	}
	textarea,
	[type="search"],
	[type="date"],
	[type="tel"],
	[type="email"],
	[type="number"],
	[type="password"],
	[type="text"] {}
	label [type="checkbox"],
	label [type="radio"] {}
	label {}
	label:last-child {}
	.u-mincho {}
	.u-inner {
		padding-left: 20px;
		padding-right: 20px;
	}
	.u-title {
		margin-bottom: 40px;
		font-size: 15px;
	}
	.u-title_en {
		font-size: 15px;
	}
	.u-title_main {
		font-size: 40px;
	}
	.u-table {}
	.u-table > thead {}
	.u-table > thead > tr {}
	.u-table > thead > tr > th {}
	.u-table > tbody {}
	.u-table > tbody > tr {}
	.u-table > tbody > tr > th {
		font-size: 110%;
		width: 175px;
		padding: 20px;
		padding-left: 0;
	}
	.u-table > tbody > tr > td {
		padding: 20px;
		padding-right: 0;
	}
	.u-table-wrap {}
	.u-table-wrap_caution {}
	.u-list {}
	.u-list > li {}
	.u-list > li:first-child {}
	.u-list > li::before {}
	.u-section {
		padding-top: 76px;
		margin-top: -76px;
	}
	.u-button {}
	.u-button:active {}
	.u-button-cancel {}
	.u-select-wrap {}
	.u-select-wrap > .icon-arrowDown {}
	.u-select-wrap::after {}
	.u-select-wrap select {}
	.u-checkbox {}
	.u-checkbox > [type="checkbox"] {}
	.u-checkbox_icon {}
	.u-checkbox_icon::after {}
	.u-checkbox_text {}
	.u-checkbox > [type="checkbox"]:checked + .u-checkbox_icon {}
	.u-checkbox > [type="checkbox"]:checked + .u-checkbox_icon::after {}
	.u-radio {}
	.u-radio > [type="radio"] {}
	.u-radio_icon {}
	.u-radio_icon::after {}
	.u-radio_text {}
	.u-radio > [type="radio"]:checked + .u-radio_icon {}
	.u-fit-image {}
	.u-fit-image > img {}
	.u-tablet-block {
		display: block;
	}
	.u-tablet-inline {
		display: inline;
	}
	.u-tablet-none {
		display: none;
	}
	.u-editor {}
	.u-editor::after {}
	.u-editor div {}
	.u-editor img {}
	.u-editor blockquote {}
	.u-editor blockquote::before {}
	.u-editor blockquote::after {}
	.u-arrow {}
	.u-arrow_item {}
	.u-arrow_item-rightTop {}
	.u-border {}
	.u-title-highlight {
		font-size: 24px;
		margin-bottom: 15px;
	}
	.u-title-highlight_main {}
	.u-title-highlight-sm {}
	.u-title-highlight-sm_main {}
	.u-title-highlight-lg {
		font-size: 46px;
		margin-bottom: 60px;
	}
	.u-title-highlight-lg_main {}
	.u-title-highlight-xs {}
	.u-title-highlight-xs_main {}
	.u-title-small {
		font-size: 21px;
		margin-bottom: 15px;
	}
	.u-button-arrow {}
	.u-dot-table {}
	.u-dot-table > tbody {}
	.u-dot-table > tbody > tr {}
	.u-dot-table > tbody > tr > th {
		font-size: 32px;
		line-height: 32px;
		width: 165px;
	}
	.u-dot-table > tbody > tr > th::after {}
	.u-dot-table > tbody > tr > td {}
	.u-dot-circle {}
	.u-button-blue {}
	.u-arrow-right {}
	.u-title-highlight_main-white {}
	.u-category {}
	.u-update {}
	.u-update > time {}
	.u-editor h2 {
		font-size: 28px;
	}
	.u-editor h3 {
		font-size: 24px;
	}
	.u-editor h3 > span {}
	.u-editor h5 {
		font-size: 18px;
	}
	.u-editor h4 {
		font-size: 21px;
	}
	.u-editor h4::before {}
	.u-editor ol {}
	.u-editor ol > li {}
	.u-editor ol > li::before {}
	.u-editor ol > li:nth-child(n+2) {}
	.u-editor ol > li:nth-child(n+10) {}
	.u-editor ul {}
	.u-editor ul > li {}
	.u-editor ul > li::before {}
	.u-editor ul > li:nth-child(n+2) {}
	.u-editor table {}
	.u-editor table > thead {}
	.u-editor table > thead > tr {}
	.u-editor table > thead > tr > th {}
	.u-editor table > thead > tr > th:first-child {}
	.u-editor table > thead > tr > td {}
	.u-editor table > tbody {}
	.u-editor table > tbody > tr {}
	.u-editor table > tbody > tr > td {}
	.u-editor table > tbody > tr > td:first-child {}
	.u-editor p {}
	.u-editor p > a {}
	.u-title-dot {}
	.u-ordered-list {}
	.u-ordered-list > li {}
	.u-ordered-list > li::before {}
	.u-table-blue {
		font-size: 14px;
	}
	.u-table-blue > thead {}
	.u-table-blue > thead > tr {}
	.u-table-blue > thead > tr > th {}
	.u-table-blue > tbody {}
	.u-table-blue > tbody > tr {}
	.u-table-blue > tbody > tr > th {
		width: 280px;
	}
	.u-table-blue > tbody > tr > td {}
	.u-title_en_arrow {}
	.u-editor h2.entry_headline {
		font-size: 42px;
		margin-bottom: 35px;
	}
	.u-editor h2.entry_headline > .icon {}
	.u-editor h3.entry_subhead {
		font-size: 22px;
		margin-bottom: 20px;
	}
	.u-editor h3.entry_subhead .entry_subhead_inner {}
}

/* --- レスポンシブ: スマートフォン (767px以下) ---
   スマートフォン向けの大幅なレイアウト変更。
   - body の最小幅を320pxに設定
   - フォーム入力欄のサイズ・パディングを縮小
   - u-table をブロック表示に変換（縦並びレイアウトに）
   - u-sp-block / u-sp-inline を表示、u-sp-none を非表示
   - u-switch-image で SP用画像に切り替え
   - セクション見出しをさらに縮小 (40px → 30px)
   - u-editor 内全体のフォントサイズ・余白を SP 向けに調整
   - セレクトボックスの高さ・パディングを縮小
--- */
@media screen and (max-width:767px) {
	body {
		min-width: 320px;
	}
	a {}
	a[href^="tel:"] {}
	textarea,
	[type="search"],
	[type="date"],
	[type="tel"],
	[type="email"],
	[type="number"],
	[type="password"],
	[type="text"] {
		font-size: 16px;
		padding: 12px 15px;
	}
	label [type="checkbox"],
	label [type="radio"] {}
	label {}
	label:last-child {}
	.u-mincho {}
	.u-inner {}
	.u-title {
		font-size: 14px;
		margin-bottom: 25px;
	}
	.u-title_en {
		font-size: 14px;
	}
	.u-title_main {
		font-size: 30px;
	}
	.u-table {
		display: block;
	}
	.u-table > thead {}
	.u-table > thead > tr {}
	.u-table > thead > tr > th {}
	.u-table > tbody {
		display: block;
	}
	.u-table > tbody > tr {
		display: block;
		margin-bottom: 15px;
		padding-top: 15px;
	}
	.u-table > tbody > tr > th {
		width: auto;
		padding: 0;
		display: block;
		margin-bottom: 10px;
	}
	.u-table > tbody > tr > td {
		padding: 0;
		display: block;
	}
	.u-table-wrap {}
	.u-table-wrap_caution {
		margin: 0 5px 0 0;
		font-size: 13px;
	}
	.u-list {}
	.u-list > li {}
	.u-list > li:first-child {}
	.u-list > li::before {}
	.u-section {}
	.u-button {}
	.u-button:active {}
	.u-button-cancel {}
	.u-select-wrap {}
	.u-select-wrap > .icon-arrowDown {
		top: 25px;
		right: 15px;
		font-size: 10px;
	}
	.u-select-wrap::after {}
	.u-select-wrap select {
		font-size: 16px;
		height: 50px;
		line-height: 48px;
		padding-left: 15px;
		padding-right: 37px;
	}
	.u-checkbox {}
	.u-checkbox > [type="checkbox"] {}
	.u-checkbox_icon {}
	.u-checkbox_icon::after {}
	.u-checkbox_text {}
	.u-checkbox > [type="checkbox"]:checked + .u-checkbox_icon {}
	.u-checkbox > [type="checkbox"]:checked + .u-checkbox_icon::after {}
	.u-radio {}
	.u-radio > [type="radio"] {}
	.u-radio_icon {}
	.u-radio_icon::after {}
	.u-radio_text {}
	.u-radio > [type="radio"]:checked + .u-radio_icon {}
	.u-sp-block {
		display: block;
	}
	.u-sp-inline {
		display: inline;
	}
	.u-sp-none {
		display: none;
	}
	.u-switch-image {}
	.u-switch-image > img:first-child {
		display: none;
	}
	.u-switch-image > img:last-child {
		display: block;
	}
	.u-fit-image {}
	.u-fit-image > img {}
	.u-editor {}
	.u-editor::after {}
	.u-editor div {}
	.u-editor img {}
	.u-editor blockquote {}
	.u-editor blockquote::before {}
	.u-editor blockquote::after {}
	.u-arrow {}
	.u-arrow_item {}
	.u-arrow_item-rightTop {}
	.u-border {}
	.u-title-highlight {
		font-size: 20px;
		margin-bottom: 10px;
	}
	.u-title-highlight_main {}
	.u-title-highlight-sm {
		font-size: 18px;
	}
	.u-title-highlight-sm_main {}
	.u-title-highlight-lg {
		font-size: 28px;
		margin-bottom: 25px;
	}
	.u-title-highlight-lg_main {}
	.u-title-highlight-xs {}
	.u-title-highlight-xs_main {}
	.u-title-small {
		font-size: 17px;
		margin-bottom: 10px;
	}
	.u-button-arrow {}
	.u-dot-table {
		line-height: 1.8;
		font-size: 15px;
	}
	.u-dot-table > tbody {}
	.u-dot-table > tbody > tr {}
	.u-dot-table > tbody > tr > th {
		font-size: 18px;
		line-height: 24px;
		width: 90px;
		padding: 12px 10px;
		padding-left: 0;
	}
	.u-dot-table > tbody > tr > th::after {
		top: 25px;
		width: 1px;
	}
	.u-dot-table > tbody > tr > td {
		padding: 12px 15px;
		padding-right: 0;
	}
	.u-dot-circle {
		top: 20px;
		width: 8px;
		height: 8px;
	}
	.u-button-blue {}
	.u-arrow-right {}
	.u-title-highlight_main-white {}
	.u-category {
		font-size: 12px;
		line-height: 17px;
		padding-top: 1px;
	}
	.u-update {
		font-size: 14px;
	}
	.u-update > time {}
	.u-editor h2 {
		margin-top: 30px;
		margin-bottom: 30px;
		font-size: 22px;
	}
	.u-editor h3 {
		font-size: 20px;
	}
	.u-editor h3 > span {}
	.u-editor h5 {
		font-size: 17px;
	}
	.u-editor h4 {
		font-size: 18px;
		padding-left: 16px;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.u-editor h4::before {
		margin-top: -1px;
	}
	.u-editor ol {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.u-editor ol > li {}
	.u-editor ol > li::before {}
	.u-editor ol > li:nth-child(n+2) {}
	.u-editor ol > li:nth-child(n+10) {}
	.u-editor ul {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.u-editor ul > li {}
	.u-editor ul > li::before {}
	.u-editor ul > li:nth-child(n+2) {}
	.u-editor table {
		margin-top: 25px;
		margin-bottom: 25px;
	}
	.u-editor table > thead {}
	.u-editor table > thead > tr {}
	.u-editor table > thead > tr > th {
		padding: 10px;
		text-align: left;
	}
	.u-editor table > thead > tr > th:first-child {}
	.u-editor table > thead > tr > td {}
	.u-editor table > tbody {}
	.u-editor table > tbody > tr {}
	.u-editor table > tbody > tr > td {
		padding: 10px;
	}
	.u-editor table > tbody > tr > td:first-child {}
	.u-editor p {}
	.u-editor p > a {}
	.u-title-dot {}
	.u-ordered-list {}
	.u-ordered-list > li {}
	.u-ordered-list > li::before {}
	.u-table-blue {}
	.u-table-blue > thead {}
	.u-table-blue > thead > tr {}
	.u-table-blue > thead > tr > th {
		padding: 15px 10px;
	}
	.u-table-blue > tbody {}
	.u-table-blue > tbody > tr {}
	.u-table-blue > tbody > tr > th {
		padding: 15px;
		width: 160px;
	}
	.u-table-blue > tbody > tr > td {}
	.u-title_en_arrow {}
	.u-editor h2.entry_headline {
		font-size: 26px;
		padding-left: 23px;
		margin-bottom: 18px;
	}
	.u-editor h2.entry_headline > .icon {}
	.u-editor h3.entry_subhead {
		font-size: 16px;
		margin-bottom: 10px;
	}
	.u-editor h3.entry_subhead .entry_subhead_inner {}
}

/* --- レスポンシブ: 小型スマートフォン (374px以下) ---
   iPhone SE 等の小画面向け最終調整。
   - body のフォントサイズを 16px → 15px に縮小
   - u-sps-inline を表示、u-sps-none を非表示
   - 大型見出し・メインタイトルのフォントサイズをさらに縮小
--- */
@media screen and (max-width:374px) {
	body {
		font-size: 15px;
	}
	.u-inner {}
	.u-sps-inline {
		display: inline;
	}
	.u-sps-none {
		display: none;
	}
	.u-title-highlight-lg {
		font-size: 23px;
	}
	.u-title_main {
		font-size: 26px;
	}
	.u-title-highlight {
		font-size: 17px;
	}
}