/*
Theme Name: Lightning Child
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/
/* ==========================================================================
   社会福祉法人汰功樹会 わくわくスポーツ事業部
   カラー設定 CSS

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


/* ==========================================================================
   1. カラートークン定義
   ここの値だけを書き換えれば、サイト全体の色が一括で変わります。
   ========================================================================== */

:root {
	/* --- ブランド --- */
	--ws-key:            #1F5C3A; /* キーカラー：ヘッダー・フッター・見出し */
	--ws-key-dark:       #164429; /* キーカラー暗：ホバー時など */
	--ws-key-light:      #E8F0EB; /* キーカラー淡：タグ・アイコン背景 */

	/* --- CTA（申し込みボタン専用。他の用途に使わない） --- */
	--ws-cta:            #D2542A;
	--ws-cta-dark:       #B0431F;

	/* --- コース識別色（白文字を乗せる前提の濃さ） --- */
	--ws-course-infant:  #C4436A; /* 1 年中・年長 */
	--ws-course-primary: #B9761A; /* 2 小学1・2年生 */
	--ws-course-u12:     #1F7A4C; /* 3 小学生 U-12 */
	--ws-course-u15:     #235C99; /* 4 中学生 U-15 */
	--ws-course-nsa:     #6A489A; /* 5 放課後等デイサービス */
	--ws-course-biz:     #21807B; /* 6 園・団体 */

	/* --- 背景 --- */
	--ws-bg-base:        #FFFFFF; /* ベース */
	--ws-bg-subtle:      #F5F8F6; /* セクション背景（白と交互に敷く） */
	--ws-bg-dark:        #14211C; /* ヒーロー・濃色セクション */
	--ws-bg-footer:      #1A4D33; /* フッター */
	--ws-bg-notice:      #FDF3E3; /* お知らせ帯 */

	/* --- 文字 --- */
	--ws-text:           #1B2320; /* 見出し・本文（純黒は使わない） */
	--ws-text-sub:       #5F6B66; /* 補足・キャプション */
	--ws-text-mute:      #8D9793; /* 日付・注釈 */
	--ws-text-notice:    #8A6116; /* お知らせ帯の文字 */
	--ws-text-on-dark:   #FFFFFF; /* 濃色背景の上 */
	--ws-text-on-dark-sub: #C9D6CF;

	/* --- リンク --- */
	--ws-link:           #17714A;
	--ws-link-hover:     #0E4C31;
	--ws-link-visited:   #4A6B5C;
	--ws-link-on-dark:   #8FD3AC;

	/* --- 罫線 --- */
	--ws-border:         #E2E8E4;
	--ws-border-strong:  #C8D2CB;
}

/* Lightning G3 側の変数にも同じ値を流し込む。
   カスタマイザーのキーカラー設定を使う場合は、この2行をコメントアウトしてください。 */
:root {
	--vk-color-primary:      #1F5C3A;
	--vk-color-primary-dark: #164429;
}


/* ==========================================================================
   2. 文字色
   ========================================================================== */

body {
	color: var(--ws-text);
	background-color: var(--ws-bg-base);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-header-title {
	color: var(--ws-text);
}

/* 補足・キャプション・注釈 */
small,
figcaption,
.entry-meta,
.published,
.text-muted,
.ws-caption {
	color: var(--ws-text-sub);
}

/* 日付・投稿カテゴリなどの淡色テキスト */
.ws-date,
.vk_post_date,
.ws-note {
	color: var(--ws-text-mute);
}

/* 濃色背景の上に置く文字 */
.ws-section--dark,
.ws-hero,
.site-footer {
	color: var(--ws-text-on-dark);
}

.ws-section--dark p,
.ws-hero p,
.site-footer p,
.ws-section--dark .ws-caption,
.ws-hero .ws-caption {
	color: var(--ws-text-on-dark-sub);
}

.ws-section--dark h1, .ws-section--dark h2, .ws-section--dark h3,
.ws-hero h1, .ws-hero h2, .ws-hero h3,
.site-footer h1, .site-footer h2, .site-footer h3 {
	color: var(--ws-text-on-dark);
}


/* ==========================================================================
   3. リンク色
   本文中のリンクは色だけでなく下線も付ける（色覚特性への配慮）
   ========================================================================== */

a {
	color: var(--ws-link);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--ws-link-hover);
	text-decoration: underline;
}

a:visited {
	color: var(--ws-link-visited);
}

/* 本文中のリンクは常に下線を表示する */
.entry-body a:not(.btn):not(.ws-btn),
.post-content a:not(.btn):not(.ws-btn) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* キーボード操作時のフォーカス表示（アクセシビリティ上、消さないこと） */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--ws-link);
	outline-offset: 2px;
}

/* 濃色背景の上のリンク */
.ws-section--dark a,
.ws-hero a,
.site-footer a {
	color: var(--ws-link-on-dark);
}

.ws-section--dark a:hover,
.ws-hero a:hover,
.site-footer a:hover {
	color: var(--ws-text-on-dark);
}


/* ==========================================================================
   4. 背景
   ========================================================================== */

.ws-section--subtle {
	background-color: var(--ws-bg-subtle);
}

.ws-section--dark {
	background-color: var(--ws-bg-dark);
}

.site-footer {
	background-color: var(--ws-bg-footer);
}

/* カード共通 */
.ws-card {
	background-color: var(--ws-bg-base);
	border: 1px solid var(--ws-border);
	border-radius: 12px;
}

hr,
.ws-divider {
	border-color: var(--ws-border);
}


/* ==========================================================================
   5. ヒーロー
   写真の上に文字を乗せるため、黒の半透明レイヤーを必ず重ねる
   ========================================================================== */

.ws-hero {
	position: relative;
	background-color: var(--ws-bg-dark);
	background-size: cover;
	background-position: center;
}

.ws-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.45);
}

.ws-hero > * {
	position: relative; /* オーバーレイより前面に出す */
	z-index: 1;
}

/* タグライン（EARNEST ｜ みんなの本気がここにある。） */
.ws-hero__tagline {
	color: #8FBFA6;
	letter-spacing: 0.16em;
}


/* ==========================================================================
   6. CTAボタン（無料体験に申し込む）
   この色は申し込みボタン専用。見出しや装飾に使わない。
   ========================================================================== */

.ws-btn-cta {
	display: inline-block;
	background-color: var(--ws-cta);
	color: #FFFFFF;
	border: none;
	border-radius: 6px;
	padding: 0.85em 1.8em;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.ws-btn-cta:hover,
.ws-btn-cta:focus {
	background-color: var(--ws-cta-dark);
	color: #FFFFFF;
	text-decoration: none;
}

/* 副次的なボタン（費用を見る など） */
.ws-btn-sub {
	display: inline-block;
	background-color: transparent;
	color: var(--ws-key);
	border: 1px solid var(--ws-key);
	border-radius: 6px;
	padding: 0.85em 1.8em;
	line-height: 1.4;
	text-decoration: none;
}

.ws-btn-sub:hover,
.ws-btn-sub:focus {
	background-color: var(--ws-key);
	color: #FFFFFF;
	text-decoration: none;
}

/* 濃色背景の上に置く副次ボタン */
.ws-hero .ws-btn-sub,
.ws-section--dark .ws-btn-sub {
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.6);
}

.ws-hero .ws-btn-sub:hover,
.ws-section--dark .ws-btn-sub:hover {
	background-color: rgba(255, 255, 255, 0.12);
}

/* スマートフォンの固定バー */
@media (max-width: 767px) {
	.ws-fixed-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		background-color: var(--ws-bg-base);
		border-top: 1px solid var(--ws-border);
		padding: 0.6em 0.8em;
		padding-bottom: calc(0.6em + env(safe-area-inset-bottom));
	}
	/* 固定バーに隠れないよう本文末尾に余白を作る */
	body {
		padding-bottom: 72px;
	}
}


/* ==========================================================================
   7. コース識別色
   カードとそのコースの下層ページでのみ使う。
   トップページ全体に散らすと6色がぶつかるので注意。
   ========================================================================== */

.ws-course--infant  { --ws-course: var(--ws-course-infant); }
.ws-course--primary { --ws-course: var(--ws-course-primary); }
.ws-course--u12     { --ws-course: var(--ws-course-u12); }
.ws-course--u15     { --ws-course: var(--ws-course-u15); }
.ws-course--nsa     { --ws-course: var(--ws-course-nsa); }
.ws-course--biz     { --ws-course: var(--ws-course-biz); }

/* 白背景に色文字（トップの入口カード） */
.ws-course-card {
	background-color: var(--ws-bg-base);
	border: 1px solid var(--ws-border);
	border-top: 4px solid var(--ws-course);
	border-radius: 12px;
}

.ws-course-card__label {
	color: var(--ws-course);
	font-weight: 700;
}

.ws-course-card__title {
	color: var(--ws-text);
	font-weight: 700;
}

.ws-course-card__meta {
	color: var(--ws-text-sub);
}

/* 色背景に白文字（下層ページの見出し帯・丸アイコンなど） */
.ws-course-badge,
.ws-course-heading {
	background-color: var(--ws-course);
	color: #FFFFFF;
}

/* U-12 の緑はキーカラーと近いため、カードだけ枠線を強めて区別する */
.ws-course--u12.ws-course-card {
	border-color: var(--ws-border-strong);
}


/* ==========================================================================
   8. お知らせ帯（雨天中止などの緊急連絡）
   ========================================================================== */

.ws-notice {
	background-color: var(--ws-bg-notice);
	color: var(--ws-text-notice);
	border: none;
}

.ws-notice a {
	color: var(--ws-text-notice);
	text-decoration: underline;
}

/* カテゴリタグ */
.ws-tag {
	background-color: var(--ws-key-light);
	color: var(--ws-key);
	border-radius: 4px;
	padding: 0.2em 0.6em;
	font-size: 0.75em;
}


/* ==========================================================================
   9. 印刷用（スケジュールを印刷する対応）
   ========================================================================== */

@media print {
	.ws-fixed-cta,
	.ws-hero::before {
		display: none;
	}
	body {
		color: #000000;
		background: #FFFFFF;
		padding-bottom: 0;
	}
	a {
		color: #000000;
		text-decoration: underline;
	}
}

/* ヒーロー内のテキストを左寄せにする */
.ws-hero-inner {
	max-width: 620px;
	margin-left: 0;
	margin-right: auto;
	text-align: left;
}

@media (max-width: 767px) {
	.ws-hero-inner {
		max-width: 100%;
	}
}

/* ==========================================================================
   見出し（H2）
   使い方： <h2 class="ws-heading">選ばれる理由</h2>
   ========================================================================== */

.ws-heading {
	text-align: center;
	font-size: clamp(1.375rem, 1.05rem + 1.3vw, 1.75rem);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.03em;
	color: var(--ws-text, #1B2320);
	margin: 0 0 2.5rem;
}

/* 下の短い線 */
.ws-heading::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin: 0.9rem auto 0;
	background-color: var(--ws-key, #1F5C3A);
	border-radius: 2px;
}

/* リード文が続く場合（見出しとの間隔を詰める） */
.ws-heading--with-lead {
	margin-bottom: 0.6rem;
}

.ws-heading-lead {
	text-align: center;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--ws-text-sub, #5F6B66);
	margin: 0 0 2.5rem;
}

/* --- 以下はバリエーション。必要なものだけ使ってください --- */

/* 左寄せ */
.ws-heading--left {
	text-align: left;
}
.ws-heading--left::after {
	margin-left: 0;
	margin-right: auto;
}

/* 濃色背景の上に置く場合 */
.ws-heading--on-dark {
	color: #FFFFFF;
}
.ws-heading--on-dark::after {
	background-color: rgba(255, 255, 255, 0.7);
}

/* 線なし */
.ws-heading--plain::after {
	display: none;
}

/* スマホ */
@media (max-width: 575px) {
	.ws-heading {
		margin-bottom: 1.75rem;
	}
	.ws-heading::after {
		width: 32px;
		margin-top: 0.7rem;
	}
	.ws-heading-lead {
		font-size: 0.875rem;
		margin-bottom: 1.75rem;
	}
}
/**************************************************
 * TOP練習風景
 **************************************************/

.ws-photo {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	width: 100%;
	min-height: 260px !important;
	padding: 0 !important;
}

/* 写真そのもの */
.ws-photo .wp-block-cover__image-background {
	object-fit: cover;
	transition: transform 0.4s ease;
}

.ws-photo:hover .wp-block-cover__image-background {
	transform: scale(1.05);
}

/* 文字の下だけ暗くするグラデーション */
.ws-photo::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 0;
	right: 0;
	bottom: 0;
	height: 55%;
	background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
	pointer-events: none;
	z-index: 1;
}

/* 文字を左下に固定 */
.ws-photo .wp-block-cover__inner-container {
	position: absolute !important;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto !important;
	z-index: 2;
	width: 100%;
	padding: 0 18px 16px;
	margin: 0 !important;
	text-align: left;
}

.ws-photo__label {
	color: #FFFFFF;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* 3枚を横並びにするカラム */
.ws-photo-grid {
	gap: 20px;
}

.ws-photo-grid .wp-block-column {
	flex-basis: 0;
	flex-grow: 1;
}

@media (max-width: 575px) {
	.ws-photo {
		min-height: 200px !important;
		border-radius: 10px;
	}
	.ws-photo .wp-block-cover__inner-container {
		padding: 0 14px 12px;
	}
	.ws-photo__label {
		font-size: 0.9375rem;
	}
}
/**************************************************
 * フッター ロゴ・住所
 **************************************************/

.ws-footer-info {
	text-align: left;
}

.ws-footer-info__logo {
	display: block;
	width: 100%;
	max-width: 240px;
	height: auto;
	margin: 0 0 10px;
}

.ws-footer-info__address {
	color: #C9D6CF;
	font-size: 0.8125rem;
	line-height: 1.7;
	margin: 0;
}

.ws-footer-info__address a {
	color: #C9D6CF;
	text-decoration: none;
}

.ws-footer-info__address a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

@media (max-width: 767px) {
	.ws-footer-info {
		text-align: center;
	}
	.ws-footer-info__logo {
		margin-left: auto;
		margin-right: auto;
		max-width: 200px;
	}
}
/**************************************************
 * Instagramボタン（フッター用）
 **************************************************/

.ws-sns-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 8px;
	color: #FFFFFF !important;
	text-decoration: none !important;
	line-height: 1;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ws-sns-btn i {
	font-size: 20px;
	color: #FFFFFF !important;
}

.ws-sns-btn__id {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #FFFFFF !important;
}

.ws-sns-btn:hover {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.7);
	color: #FFFFFF !important;
}

.page-header-title,
h1.page-header-title {
	color: #FFFFFF !important;
}

/**************************************************
 * 無料体験申し込みフォーム（Contact Form 7）
 **************************************************/

.ws-form {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 4px;
}

/* 冒頭の説明 */
.ws-form__note {
	font-size: 16px;
	color: #3D4441;
	line-height: 1.9;
	margin: 0 0 36px;
	padding: 18px 22px;
	background-color: #F5F8F6;
	border-radius: 10px;
}

/* 各項目 */
.ws-form__group {
	margin-bottom: 26px;
}

.ws-form__label {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: #1B2320;
	line-height: 1.5;
	margin-bottom: 10px;
}

/* 必須・任意バッジ */
.ws-form__req,
.ws-form__opt {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	margin-left: 8px;
	padding: 3px 10px;
	border-radius: 4px;
	vertical-align: 2px;
}

.ws-form__req {
	background-color: #DB3D42;
	color: #FFFFFF;
}

.ws-form__opt {
	background-color: #E9EFEB;
	color: #5F6B66;
}

/* 補足説明 */
.ws-form__help {
	display: block;
	font-size: 14px;
	color: #8D9793;
	line-height: 1.7;
	margin-top: 8px;
}

/* 入力欄 */
.ws-form input[type="text"],
.ws-form input[type="email"],
.ws-form input[type="tel"],
.ws-form select,
.ws-form textarea {
	width: 100%;
	box-sizing: border-box;
	font-size: 17px;
	font-family: inherit;
	color: #1B2320;
	line-height: 1.6;
	padding: 14px 16px;
	background-color: #FFFFFF;
	border: 1px solid #C8D2CB;
	border-radius: 8px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ws-form textarea {
	min-height: 150px;
	resize: vertical;
}

.ws-form input::placeholder,
.ws-form textarea::placeholder {
	color: #A8B2AD;
}

.ws-form input:focus,
.ws-form select:focus,
.ws-form textarea:focus {
	outline: none;
	border-color: #1F5C3A;
	box-shadow: 0 0 0 3px rgba(31, 92, 58, 0.12);
}

/* セレクトの矢印 */
.ws-form select {
	background-image:
		linear-gradient(45deg, transparent 50%, #1F5C3A 50%),
		linear-gradient(135deg, #1F5C3A 50%, transparent 50%);
	background-position:
		calc(100% - 20px) calc(50% + 2px),
		calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 44px;
	cursor: pointer;
}

/* ラジオボタン */
.ws-form .wpcf7-radio {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.ws-form .wpcf7-list-item {
	margin: 0;
}

.ws-form .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 17px;
	color: #1B2320;
	line-height: 1.5;
	padding: 12px 22px;
	background-color: #FFFFFF;
	border: 1px solid #C8D2CB;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ws-form .wpcf7-list-item label:hover {
	border-color: #1F5C3A;
	background-color: #F5F8F6;
}

.ws-form input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: #1F5C3A;
	cursor: pointer;
}

/* プライバシーポリシー同意 */
.ws-form__group--privacy {
	margin: 36px 0 28px;
	padding: 20px 22px;
	background-color: #F5F8F6;
	border-radius: 10px;
	text-align: center;
	font-size: 16px;
	color: #3D4441;
}

.ws-form__group--privacy .wpcf7-list-item {
	margin: 0;
}

.ws-form__group--privacy label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.ws-form input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: #1F5C3A;
	cursor: pointer;
}

.ws-form__group--privacy a {
	color: #17714A;
	text-decoration: underline;
	font-weight: 700;
}

.ws-form__group--privacy a:hover {
	color: #0E4C31;
}

/* 送信ボタン */
.ws-form__submit {
	text-align: center;
	margin-top: 32px;
}

.ws-form input[type="submit"] {
	display: inline-block;
	width: 100%;
	max-width: 400px;
	font-size: 18px;
	font-weight: 700;
	font-family: inherit;
	color: #FFFFFF;
	line-height: 1.4;
	padding: 19px 32px;
	background-color: #DB3D42;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ws-form input[type="submit"]:hover {
	background-color: #C22F34;
	transform: translateY(-2px);
}

.ws-form input[type="submit"]:disabled {
	background-color: #B5BDB8;
	cursor: not-allowed;
	transform: none;
}

/* 送信中のスピナー */
.ws-form .wpcf7-spinner {
	margin: 16px auto 0;
	display: block;
}

/* エラー表示 */
.ws-form .wpcf7-not-valid-tip {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #DB3D42;
	line-height: 1.6;
	margin-top: 8px;
}

.ws-form .wpcf7-not-valid {
	border-color: #DB3D42 !important;
	background-color: #FDF5F5;
}

/* 送信結果メッセージ */
.ws-form .wpcf7-response-output {
	font-size: 16px;
	line-height: 1.8;
	margin: 28px 0 0 !important;
	padding: 18px 22px !important;
	border: none !important;
	border-radius: 10px;
	text-align: center;
}

.ws-form form.sent .wpcf7-response-output {
	background-color: #E8F0EB;
	color: #1F5C3A;
}

.ws-form form.invalid .wpcf7-response-output,
.ws-form form.failed .wpcf7-response-output,
.ws-form form.spam .wpcf7-response-output {
	background-color: #FDF0F0;
	color: #B03A3F;
}

/* スマホ */
@media (max-width: 575px) {
	.ws-form__note {
		font-size: 15px;
		padding: 16px 18px;
		margin-bottom: 28px;
	}
	.ws-form__group {
		margin-bottom: 22px;
	}
	.ws-form__label {
		font-size: 16px;
	}
	.ws-form input[type="text"],
	.ws-form input[type="email"],
	.ws-form input[type="tel"],
	.ws-form select,
	.ws-form textarea {
		font-size: 16px;
		padding: 13px 14px;
	}
	.ws-form .wpcf7-radio {
		flex-direction: column;
		gap: 8px;
	}
	.ws-form .wpcf7-list-item label {
		width: 100%;
		font-size: 16px;
		box-sizing: border-box;
	}
	.ws-form__group--privacy {
		font-size: 15px;
		padding: 18px;
		text-align: left;
	}
	.ws-form input[type="submit"] {
		font-size: 17px;
		padding: 17px 24px;
	}
}
.ws-form .ws-form__after {
	font-size: 15px;
	color: #8D9793;
	line-height: 1.9;
	margin: 18px 0 0;
	text-align: center;
}

@media (max-width: 575px) {
	.ws-form .ws-form__after {
		font-size: 14px;
		text-align: left;
	}
	.ws-form .ws-form__after br {
		display: none;
	}
}
/**************************************************
 * よくある質問｜カテゴリ見出し
 **************************************************/

.ws-faq-cat {
	position: relative;
	font-size: 22px;
	font-weight: 700;
	color: #1F5C3A;
	line-height: 1.5;
	margin: 56px 0 24px;
	padding: 0 0 14px 18px;
	border-bottom: 2px solid #E2E8E4;
	text-align: left !important;
}

.ws-faq-cat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 18px;
	width: 5px;
	background-color: #1F5C3A;
	border-radius: 3px;
}

.ws-faq-cat::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 80px;
	height: 2px;
	background-color: #1F5C3A;
}

/* 最初の見出しは上の余白を詰める */
.ws-faq-cat:first-child {
	margin-top: 0;
}

@media (max-width: 575px) {
	.ws-faq-cat {
		font-size: 19px;
		margin: 40px 0 18px;
		padding: 0 0 12px 14px;
	}
	.ws-faq-cat::before {
		width: 4px;
		bottom: 16px;
	}
	.ws-faq-cat::after {
		width: 60px;
	}
}
/**************************************************
 * グローバルメニュー｜無料体験申し込みボタン
 *
 * 対象：メニュー最後の「無料体験申し込み」項目
 * ID（#menu-item-341）とクラス（.ws-nav-cta）の両方を指定しています。
 * メニュー項目を作り直すとIDが変わるため、
 * 外観 > メニュー > 表示オプション > CSSクラス にチェックを入れ、
 * 該当項目に ws-nav-cta を設定しておくと安全です。
 **************************************************/
.ws-nav-cta > a {
	display: flex !important;
	align-items: center;
	background-color: #DB3D42;
	color: #FFFFFF !important;
	border-radius: 6px;
	padding: 10px 20px !important;
	margin-left: 12px;
	transition: background-color 0.2s ease;
}

.ws-nav-cta > a:hover {
	background-color: #C22F34;
	color: #FFFFFF !important;
}

.ws-nav-cta > a .global-nav-name {
	color: #FFFFFF !important;
}

.ws-nav-cta > a::after {
	display: none !important;
}

@media (max-width: 991px) {
	.ws-nav-cta > a {
		margin: 12px 16px !important;
		padding: 16px 20px !important;
		border-radius: 6px;
		justify-content: center;
		text-align: center;
	}
}

/**************************************************
 * 指導者紹介｜指導者カード
 **************************************************/

.ws-staff {
	height: 100%;
	background-color: #FFFFFF;
	border: 1px solid #E2E8E4;
	border-radius: 12px;
	padding: 20px;
}

/* 上部：写真＋氏名 */
.ws-staff__head {
	display: block;
	padding-bottom: 18px;
	border-bottom: 1px solid #E2E8E4;
	text-align: center;
}

.ws-staff__photo {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	overflow: hidden;
	background-color: #F5F8F6;
	margin-bottom: 16px;
}

.ws-staff__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.ws-staff__id {
	min-width: 0;
}

.ws-staff__name {
	font-size: 21px;
	font-weight: 700;
	color: #1B2320;
	line-height: 1.3;
	margin: 0 !important;
}

.ws-staff__romaji {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: #A8B2AD;
	letter-spacing: 0.14em;
	line-height: 1.4;
	margin: 4px 0 0 !important;
	text-transform: uppercase;
}

.ws-staff__role {
	font-size: 15px;
	font-weight: 700;
	color: #1F5C3A;
	line-height: 1.5;
	margin: 10px 0 0 !important;
}

/* 所属バッジ（FCトリンブル / BSCサッカースクール / ニーケースポーツアカデミック） */
.ws-staff__club {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: #FFFFFF;
	line-height: 1.4;
	margin-right: 8px;
	padding: 3px 10px;
	background-color: #1F5C3A;
	border-radius: 4px;
	vertical-align: 1px;
}

/* バッジが2つ以上並ぶ場合は縦に積む */
.ws-staff__role .ws-staff__club + .ws-staff__club {
	margin-top: 6px;
	margin-right: 0;
}

.ws-staff__post {
	font-size: 14px;
	color: #5F6B66;
	line-height: 1.5;
	margin: 2px 0 0 !important;
}

/* 下部：資格・経歴 */
.ws-staff__body {
	padding-top: 18px;
}

.ws-staff__label {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: #FFFFFF;
	line-height: 1.4;
	margin: 0 0 8px;
	padding: 4px 12px;
	background-color: #1F5C3A;
	border-radius: 4px;
}

.ws-staff__body .ws-staff__label:not(:first-child) {
	margin-top: 18px;
}

.ws-staff__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ws-staff__list li {
	position: relative;
	list-style: none !important;
	padding-left: 16px;
	font-size: 15px;
	color: #3D4441;
	line-height: 1.8;
}

.ws-staff__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 12px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: #1F5C3A;
}

.ws-staff__text {
	font-size: 15px;
	color: #3D4441;
	line-height: 1.8;
	margin: 0;
}

/* スマホ */
@media (max-width: 575px) {
	.ws-staff {
		padding: 18px 16px;
	}
	.ws-staff__photo {
		aspect-ratio: 4 / 3;
		margin-bottom: 14px;
	}
	.ws-staff__name {
		font-size: 19px;
	}
	.ws-staff__role {
		font-size: 14px;
	}
	.ws-staff__list li,
	.ws-staff__text {
		font-size: 14px;
	}
}
/* ============================================
   スマホ用ハンバーガーメニュー カスタマイズ
   対象サイト：sports.takoju.jp
   ------------------------------------------------
   ★注意★
   下記のクラス名/ID名は Lightning 標準の想定です。
   実機の検証ツールで確認したクラス名と違う場合は、
   #vk-mobile-nav-menu-btn / .vk-mobile-nav-menu-btn / .vk-mobile-nav-menu
   の部分を実際の名前に置き換えてください。
   ============================================ */

@media (max-width: 991px) {

  /* ====== ハンバーガーボタン本体 ====== */
  body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn {
    width: 52px !important;
    height: 52px !important;
    background-color: #1f5c3a !important;
    background-image: none !important;
    border-radius: 8px !important; /* 角丸 */
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
  }

  /* ホバー/タップ時：少し暗くする */
  body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn:hover,
  body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn:focus {
    background-color: #163f28 !important;
  }

  /* 「MENU」文字を消して三本線アイコンだけ見せる */
  body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn {
    font-size: 0 !important;
    text-indent: -9999px !important;
  }

  /* 三本線アイコン（疑似要素で描画・白色） */
  body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn::before,
  body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn::after {
    content: "" !important;
    display: block !important;
    width: 24px !important;
    height: 3px !important;
    background-color: #ffffff !important;
    border-radius: 2px !important;
    position: absolute !important;
  }
  body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn::before { top: 18px; }
  body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn::after  { bottom: 18px; }

  /* ====== メニューを開いた時：三本線 → ✕アイコンに変化 ======
     Lightningはメニューが開くとボタンに menu-open クラスが付与されるので、
     そのタイミングで ::before と ::after を回転させて交差させる。
  */
  body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn.menu-open::before,
  body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn.menu-open::after {
    top: 50% !important;
    bottom: auto !important;
    margin-top: -1.5px !important;
    transition: transform 0.2s ease !important;
  }
  body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn.menu-open::before {
    transform: rotate(45deg) !important;
  }
  body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn.menu-open::after {
    transform: rotate(-45deg) !important;
  }

  /* ====== 開いた時のメニュー本体 ======
     背景色・文字色は指定なしのためサイト標準のままにしています。
     変更したい場合は下記のコメントを外して色を指定してください。
  */
  /*
  body .vk-mobile-nav-menu {
    background-color: #ffffff !important;
  }

  body .vk-mobile-nav-menu a {
    color: #333333 !important;
  }
  */
}


/**************************************************
 * クラスセクション（BSC / FCトリンブル 共通）
 **************************************************/

.ws-class {
	padding: 72px 0;
	scroll-margin-top: 80px;
}

.ws-class:nth-of-type(even) {
	background-color: #F5F8F6;
}

/* 写真がないセクションは下の余白を詰める */
.ws-class--no-photo {
	padding-bottom: 40px;
}

.ws-class__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 24px;
}

/* 見出し */
.ws-class__head {
	padding-left: 20px;
	border-left: 5px solid var(--ws-course);
	margin-bottom: 36px;
}

.ws-class__label {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--ws-course);
	line-height: 1.4;
	margin-bottom: 6px;
}

.ws-class__title {
	font-size: 28px;
	font-weight: 700;
	color: #1B2320;
	line-height: 1.4;
	margin: 0 0 8px;
	text-align: left !important;
}

.ws-class__lead {
	font-size: 17px;
	color: #5F6B66;
	line-height: 1.8;
	margin: 0;
}

/* 2カラム */
.ws-class__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

.ws-class__sub {
	font-size: 19px;
	font-weight: 700;
	color: #1B2320;
	line-height: 1.4;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ws-course);
}

.ws-class__col .ws-class__sub:not(:first-child) {
	margin-top: 36px;
}

/* 表 */
.ws-class__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.ws-class__table th,
.ws-class__table td {
	padding: 14px 16px;
	font-size: 16px;
	line-height: 1.7;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid #E2E8E4;
}

.ws-class__table th {
	width: 34%;
	font-weight: 700;
	color: var(--ws-course);
	background-color: #FAFCFB;
	white-space: nowrap;
}

.ws-class__table td {
	color: #1B2320;
}

.ws-class__note {
	display: block;
	font-size: 14px;
	color: #8D9793;
	line-height: 1.7;
	margin: 10px 0 0;
}

/* リスト */
.ws-class__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ws-class__list li {
	position: relative;
	list-style: none !important;
	padding: 10px 0 10px 28px;
	font-size: 16px;
	color: #1B2320;
	line-height: 1.7;
	border-bottom: 1px solid #E2E8E4;
}

.ws-class__list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 18px;
	width: 6px;
	height: 10px;
	border-right: 2px solid var(--ws-course);
	border-bottom: 2px solid var(--ws-course);
	transform: rotate(45deg);
}

/* 写真 */
.ws-class__photo {
	margin: 40px 0 0;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 16 / 7;
}

.ws-class__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ボタン */
.ws-class__btns {
	margin-top: 36px;
	text-align: center;
}

.ws-class__btns a {
	text-decoration: none !important;
}

/* タブレット・スマホ */
@media (max-width: 767px) {
	.ws-class__body {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

@media (max-width: 575px) {
	.ws-class {
		padding: 48px 0;
	}
	.ws-class--no-photo {
		padding-bottom: 28px;
	}
	.ws-class__inner {
		padding: 0 16px;
	}
	.ws-class__head {
		padding-left: 14px;
		border-left-width: 4px;
		margin-bottom: 26px;
	}
	.ws-class__title {
		font-size: 22px;
	}
	.ws-class__lead {
		font-size: 16px;
	}
	.ws-class__sub {
		font-size: 17px;
	}
	.ws-class__table th,
	.ws-class__table td {
		padding: 12px 10px;
		font-size: 15px;
	}
	.ws-class__table th {
		width: 38%;
	}
	.ws-class__list li {
		font-size: 15px;
	}
	.ws-class__photo {
		margin-top: 28px;
		border-radius: 10px;
		aspect-ratio: 3 / 2;
	}
	.ws-class__btns a {
		display: block;
		text-align: center;
	}
}

/**************次の記事を画像なしにする**********************************/
.next-prev-prev.card-horizontal .card-body {
padding-left: 5.0rem;
}

.next-prev-next.card-horizontal .card-body {
padding-right: 5.0rem;
}

/* ==================================================================
   TOPに戻るボタン
   ================================================================== */

.page_top_btn {
	right: 20px;
	bottom: 20px;
	width: 50px;
	height: 50px;
	background-color: #1F5C3A;
	background-image: none !important;  /* 元の矢印画像を消す */
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(31, 92, 58, 0.3);
	transition: all 0.3s ease;
	opacity: 0.9;
	font-size: 0 !important;
}

/* 元の::beforeで作られているかもしれない矢印を消す */
.page_top_btn::before {
	content: none !important;
}

.page_top_btn::after {
	content: "↑";
	font-size: 20px;
	color: #FFFFFF;
	display: block;
	line-height: 50px;
	text-align: center;
	font-weight: 700;
}

.page_top_btn:hover {
	background-color: #164429;
	background-image: none !important;
	box-shadow: 0 6px 16px rgba(22, 68, 41, 0.4);
	opacity: 1;
	transform: translateY(-3px);
}


/**************************************************
 * 就労継続支援A型｜スコア表
 *
 * 見出し：見出しブロックに ws-score-title を設定
 * リスト：リストブロック（ul）に ws-score-list を設定
 *
 * 【運用】
 * 毎年、PDFをメディアライブラリにアップロードし、
 * リストブロックに行を追加してリンクを設定してください。
 * 新しい年度を上に追加していく形です。
 **************************************************/

/* --- 見出し --- */

.ws-score-title {
	font-size: 28px;
	font-weight: 700;
	color: #1F5C3A;
	line-height: 1.4;
	margin: 0 0 24px;
	text-align: center !important;
}

.ws-score-title::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin: 0.7em auto 0;
	background-color: #1F5C3A;
	border-radius: 2px;
}

/* --- リスト --- */

.ws-score-list {
	max-width: 860px;
	margin: 0 auto !important;
	padding: 0 !important;
	list-style: none !important;
}

.ws-score-list li {
	position: relative;
	list-style: none !important;
	margin: 0 !important;
	padding: 14px 0 14px 26px;
	font-size: 17px;
	line-height: 1.8;
	border-bottom: 1px solid #E2E8E4;
}

/* 行頭の丸 */
.ws-score-list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 23px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #1F5C3A;
}

.ws-score-list li a {
	color: #17714A !important;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ws-score-list li a:hover {
	color: #0E4C31 !important;
}

/* PDFへのリンクには自動で（PDF）と表示する */
.ws-score-list li a[href$=".pdf"]::after {
	content: "（PDF）";
	display: inline-block;
	margin-left: 4px;
	font-size: 14px;
	color: #8D9793;
	text-decoration: none;
}

/* --- スマホ --- */

@media (max-width: 575px) {
	.ws-score-title {
		font-size: 22px;
		margin-bottom: 18px;
	}
	.ws-score-list li {
		padding: 12px 0 12px 22px;
		font-size: 16px;
	}
	.ws-score-list li::before {
		top: 21px;
	}
}