/*
Theme Name: CDP Athlete Presentation
Theme URI: https://career-design-project.jp/
Author: Career Design Project
Description: CAREER DESIGN PROJECT アスリートプレゼンテーション案内サイト用WordPressテーマ。
Version: 2.0.0
Text Domain: cdp-ap
*/

/* ==========================================================================
   Brand Palette (CDP本体サイト準拠)
   ========================================================================== */
:root {
	--cdp-navy: #000a66;
	--cdp-navy-2: #14226e;
	--cdp-blue: #0863a5;
	--cdp-blue-2: #008bd1;
	--cdp-cyan: #00afca;
	--cdp-sky: #a3dfff;
	--cdp-red: #da3312;
	--cdp-orange: #eb5902;
	--cdp-text: #1d2433;
	--cdp-gray: #6b7280;
	--cdp-bg: #f5f8fb;
}

/* ==========================================================================
   Global Base
   ========================================================================== */
body {
	font-family: 'Noto Sans JP', sans-serif;
	background-color: #ffffff;
	color: var(--cdp-text);
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

button {
	cursor: pointer;
}

.slide-container {
	position: relative;
	background-color: #ffffff;
	overflow-y: auto;
	overflow-x: hidden;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.slide-container::-webkit-scrollbar {
	display: none;
}

.font-oswald {
	font-family: 'Oswald', sans-serif;
}

.min-h-\[720px\] {
	min-height: 720px;
}

.min-w-\[260px\] {
	min-width: 260px;
}

.w-\[280px\] {
	width: 280px;
}

.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   共通グラデーション
   ========================================================================== */
.bg-cdp-grad {
	background: linear-gradient(115deg, var(--cdp-navy) 0%, var(--cdp-blue) 55%, var(--cdp-cyan) 100%);
}

.bg-cdp-grad-soft {
	background: linear-gradient(115deg, #eaf4fb 0%, #f7fbfe 60%, #eafafd 100%);
}

.bg-accent-grad {
	background: linear-gradient(100deg, var(--cdp-red) 0%, var(--cdp-orange) 100%);
}

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid #e5eaf1;
}

.logo-mark {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	width: 54px;
	height: 44px;
	background: linear-gradient(135deg, var(--cdp-cyan) 0%, var(--cdp-blue) 45%, var(--cdp-navy) 100%);
	clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
	color: #fff;
	font-weight: 900;
	text-align: center;
	font-size: 17px;
	letter-spacing: 0.05em;
}

.logo-text {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.04em;
	color: var(--cdp-navy);
}

.site-nav .nav-link {
	color: var(--cdp-navy);
	font-weight: 700;
	letter-spacing: 0.12em;
	font-size: 13px;
	position: relative;
	padding: 6px 2px;
}

.site-nav .nav-link::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background: linear-gradient(90deg, var(--cdp-red), var(--cdp-orange));
	transition: width 0.25s ease;
}

.site-nav .nav-link:hover::after {
	width: 100%;
}

.btn-header-cta {
	background: linear-gradient(100deg, var(--cdp-red), var(--cdp-orange));
	color: #fff !important;
	font-weight: 700;
	font-size: 13px;
	padding: 12px 22px;
	border-radius: 4px;
	letter-spacing: 0.08em;
	transition: opacity 0.2s, transform 0.2s;
	white-space: nowrap;
}

.btn-header-cta:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}

.menu-toggle {
	background: transparent;
	border: 0;
	color: var(--cdp-navy);
	display: none;
	padding: 0;
}

/* ==========================================================================
   ヒーロー（トップ）
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(115deg, var(--cdp-navy) 0%, #0b3a86 45%, var(--cdp-blue-2) 78%, var(--cdp-cyan) 100%);
	color: #fff;
}

.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(115deg, transparent 58%, rgba(255, 255, 255, 0.05) 58%, rgba(255, 255, 255, 0.05) 62%, transparent 62%),
		linear-gradient(115deg, transparent 66%, rgba(255, 255, 255, 0.07) 66%, rgba(255, 255, 255, 0.07) 69%, transparent 69%),
		linear-gradient(115deg, transparent 74%, rgba(255, 255, 255, 0.05) 74%, rgba(255, 255, 255, 0.05) 76%, transparent 76%);
	pointer-events: none;
}

.hex-pattern {
	position: absolute;
	inset: 0;
	opacity: 0.35;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg width='120' height='104' viewBox='0 0 120 104' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='1.5'%3E%3Cpath d='M30 2 L58 18 L58 50 L30 66 L2 50 L2 18 Z'/%3E%3Cpath d='M90 38 L118 54 L118 86 L90 102 L62 86 L62 54 Z'/%3E%3C/g%3E%3C/svg%3E");
}

.hero-title {
	font-size: clamp(34px, 4.4vw, 62px);
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.hero-bar {
	width: 88px;
	height: 6px;
	background: linear-gradient(90deg, var(--cdp-red), var(--cdp-orange));
}

.btn-hero-primary {
	background: linear-gradient(100deg, var(--cdp-red), var(--cdp-orange));
	color: #fff;
	box-shadow: 0 10px 24px rgba(218, 51, 18, 0.35);
	transition: transform 0.2s, box-shadow 0.2s;
}

.btn-hero-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(218, 51, 18, 0.45);
}

.btn-hero-secondary {
	border: 2px solid rgba(255, 255, 255, 0.85);
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	transition: background 0.2s;
}

.btn-hero-secondary:hover {
	background: rgba(255, 255, 255, 0.2);
}

.hero-photo {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0, 5, 40, 0.45);
}

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

/* 下層ページヒーロー */
.page-hero {
	position: relative;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(115deg, var(--cdp-navy) 0%, #0b3a86 50%, var(--cdp-blue-2) 85%, var(--cdp-cyan) 100%);
}

.breadcrumb {
	font-family: 'Oswald', sans-serif;
	font-size: 11px;
	letter-spacing: 0.18em;
}

/* ==========================================================================
   セクション見出し
   ========================================================================== */
.sec-label {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 18px;
}

.sec-label .num {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 54px;
	line-height: 1;
	background: linear-gradient(100deg, var(--cdp-blue) 0%, var(--cdp-cyan) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.sec-label .en {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.22em;
	color: var(--cdp-cyan);
	text-transform: uppercase;
}

.sec-title {
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 900;
	color: var(--cdp-navy);
	line-height: 1.35;
	letter-spacing: 0.02em;
}

.sec-bar {
	width: 64px;
	height: 4px;
	margin-top: 22px;
	background: linear-gradient(90deg, var(--cdp-red), var(--cdp-orange));
}

/* ==========================================================================
   カード・アイコン
   ========================================================================== */
.cdp-card {
	background: #fff;
	border-radius: 10px;
	border: 1px solid #e8eef5;
	box-shadow: 0 4px 18px rgba(0, 26, 90, 0.06);
	transition: transform 0.25s, box-shadow 0.25s;
}

.cdp-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0, 26, 90, 0.12);
}

.icon-badge {
	width: 52px;
	height: 52px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--cdp-blue), var(--cdp-cyan));
	color: #fff;
	font-size: 20px;
}

.icon-badge--accent {
	background: linear-gradient(135deg, var(--cdp-red), var(--cdp-orange));
}

.step-num {
	width: 56px;
	height: 56px;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Oswald', sans-serif;
	font-size: 22px;
	font-weight: 700;
	background: linear-gradient(135deg, var(--cdp-navy), var(--cdp-blue-2));
	color: #fff;
	box-shadow: 0 6px 16px rgba(8, 99, 165, 0.35);
}

.step-num--accent {
	background: linear-gradient(135deg, var(--cdp-red), var(--cdp-orange));
}

.card-hover {
	transition: all 0.3s ease;
}

.card-hover:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   アーカイブカード
   ========================================================================== */
.tag-sport {
	font-size: 11px;
	font-weight: 700;
	color: var(--cdp-blue);
	border: 1px solid var(--cdp-blue-2);
	border-radius: 3px;
	padding: 2px 8px;
}

.badge-archive {
	background: linear-gradient(100deg, var(--cdp-navy), var(--cdp-blue-2));
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 4px 12px;
	font-family: 'Oswald', sans-serif;
}

.btn-play {
	background: var(--cdp-navy);
	color: #fff;
	transition: background 0.2s;
	border: 0;
}

.btn-play:hover {
	background: var(--cdp-blue);
}

.btn-detail {
	border: 1px solid #d7dfe9;
	color: var(--cdp-gray);
	transition: background 0.2s, color 0.2s;
}

.btn-detail:hover {
	background: var(--cdp-bg);
	color: var(--cdp-blue);
}

.thumb-wrap {
	position: relative;
	overflow: hidden;
	height: 12rem;
	background: linear-gradient(135deg, #dfeefb 0%, #eef7fd 50%, #dff5fa 100%);
}

.thumb-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.cdp-card:hover .thumb-wrap img {
	transform: scale(1.06);
}

.thumb-wrap .badge-archive {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;
}

.thumb-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 10, 60, 0);
	transition: background 0.3s;
	cursor: pointer;
	width: 100%;
	border: 0;
}

.thumb-play i {
	color: #fff;
	font-size: 44px;
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.3s;
	text-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.thumb-wrap:hover .thumb-play {
	background: rgba(0, 10, 60, 0.35);
}

.thumb-wrap:hover .thumb-play i {
	opacity: 1;
	transform: scale(1);
}

/* ==========================================================================
   NEWS
   ========================================================================== */
.news-category-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 4.5rem;
	padding: 0.25rem 0.5rem;
	border-radius: 0.1875rem;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	font-family: 'Oswald', sans-serif;
	border: 0;
}

.news-category--event {
	background: var(--cdp-blue-2);
}

.news-category--report {
	background: var(--cdp-navy);
}

.news-category--media {
	background: var(--cdp-orange);
}

.news-category--recruit {
	background: var(--cdp-cyan);
}

.news-category--default {
	background: var(--cdp-gray);
}

/* ==========================================================================
   CTAバナー・フッター
   ========================================================================== */
.cta-banner {
	position: relative;
	overflow: hidden;
	background: linear-gradient(115deg, var(--cdp-navy) 0%, var(--cdp-blue) 60%, var(--cdp-cyan) 100%);
}

.cta-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(115deg, transparent 62%, rgba(255, 255, 255, 0.06) 62%, rgba(255, 255, 255, 0.06) 66%, transparent 66%),
		linear-gradient(115deg, transparent 72%, rgba(255, 255, 255, 0.08) 72%, rgba(255, 255, 255, 0.08) 75%, transparent 75%);
}

.site-footer {
	background: linear-gradient(115deg, #030b3d 0%, var(--cdp-navy) 55%, #0b2a7e 100%);
	color: #fff;
}

.site-footer a {
	color: rgba(255, 255, 255, 0.75);
	transition: color 0.2s;
}

.site-footer a:hover {
	color: #fff;
}

.site-footer .logo-text {
	color: #fff;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-item {
	border-bottom: 1px solid #e5ecf3;
}

.faq-item:last-child {
	border-bottom: none;
}

.faq-item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 8px;
	font-weight: 700;
	color: var(--cdp-navy);
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-q {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--cdp-blue), var(--cdp-cyan));
	color: #fff;
	font-family: 'Oswald', sans-serif;
	font-size: 15px;
}

.faq-item summary .faq-arrow {
	margin-left: auto;
	color: var(--cdp-cyan);
	transition: transform 0.25s;
}

.faq-item[open] summary .faq-arrow {
	transform: rotate(180deg);
}

.faq-a {
	padding: 0 8px 24px 58px;
	color: var(--cdp-gray);
	line-height: 1.9;
	font-size: 14px;
}

/* ==========================================================================
   動画モーダル（既存presentation-modal.jsを利用）
   ========================================================================== */
body.is-presentation-modal-open {
	overflow: hidden;
}

.presentation-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

.presentation-modal.is-open {
	display: flex;
}

.presentation-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(3, 8, 40, 0.82);
	backdrop-filter: blur(4px);
}

.presentation-modal__panel {
	position: relative;
	z-index: 1;
	width: min(960px, 100%);
	background: #0a1030;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.presentation-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	color: #fff;
	background: linear-gradient(100deg, var(--cdp-navy), var(--cdp-blue));
}

.presentation-modal__title {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.presentation-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	border: 0;
	border-radius: 999px;
}

.presentation-modal__body {
	aspect-ratio: 16 / 9;
	background: #000;
}

.presentation-modal__body iframe,
.presentation-modal__body video {
	width: 100%;
	height: 100%;
	display: block;
}

.presentation-modal-empty,
.presentation-modal-link {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	padding: 2rem;
}

/* ==========================================================================
   固定ページ本文（company / about など index.php フォールバック）
   ========================================================================== */
.page-plain-content {
	max-width: 80rem;
	margin: 0 auto;
	padding: 4rem 1.5rem;
}

/* ==========================================================================
   スクロールバー
   ========================================================================== */
.custom-scrollbar::-webkit-scrollbar {
	width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
	background: #f9fafb;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
	background: #9ca3af;
}

/* ==========================================================================
   Global Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.min-h-\[720px\] {
		min-height: auto;
	}
}

@media (max-width: 768px) {
	.sec-label .num {
		font-size: 40px;
	}

	.hero-title {
		font-size: 34px;
	}
}

@media (max-width: 760px) {
	body.is-menu-open {
		overflow: hidden;
	}

	.site-header {
		align-items: center;
	}

	.site-nav {
		align-items: center;
		display: flex;
		position: relative;
	}

	.site-nav .menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 2.75rem;
		min-height: 2.75rem;
		margin-left: 0.5rem;
		position: relative;
		z-index: 60;
		font-size: 1.25rem;
	}

	.site-nav .nav-link {
		display: none;
	}

	.site-nav .btn-header-cta {
		display: none;
	}

	.site-nav.is-open {
		position: static;
	}

	.site-nav.is-open .nav-link {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 55;
		padding: 1.15rem 1.5rem;
		background: rgba(255, 255, 255, 0.98);
		border-bottom: 1px solid #e5eaf1;
		color: var(--cdp-navy);
		font-size: 1rem;
		letter-spacing: 0.08em;
	}

	.site-nav.is-open .nav-link:nth-of-type(1) {
		top: 5rem;
	}

	.site-nav.is-open .nav-link:nth-of-type(2) {
		top: 8.45rem;
	}

	.site-nav.is-open .nav-link:nth-of-type(3) {
		top: 11.9rem;
	}

	.site-nav.is-open .nav-link:nth-of-type(4) {
		top: 15.35rem;
	}

	.site-nav.is-open .nav-link:nth-of-type(5) {
		top: 18.8rem;
	}

	.site-nav.is-open .btn-header-cta {
		display: block;
		position: fixed;
		left: 1.5rem;
		right: 1.5rem;
		top: 22.6rem;
		z-index: 55;
		text-align: center;
	}

	.space-x-10 > :not([hidden]) ~ :not([hidden]),
	.site-nav.space-x-8 > :not([hidden]) ~ :not([hidden]) {
		margin-left: 0;
	}

	.site-nav.is-open .nav-link,
	.site-nav.is-open .btn-header-cta {
		margin-left: 0;
	}

	.presentation-modal {
		padding: 1rem;
	}
}