/*
Theme Name: CAVE BJJ Child
Theme URI: https://bjj.cave-gym.com/
Description: Update-safe customizations for CAVE BJJ
Author: CAVE BJJ
Template: VS
Version: 1.0.13
Text Domain: cave-bjj-child
*/

/* Front-page promotional video. */
#header_slider.cave-hero-video {
	position: relative;
	width: 100%;
	height: auto;
	max-height: 759px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
}

/* First-visit, full-viewport video intro. The supplied white logo stays intact. */
#cave-page-loader {
	transform: translateY(0);
	transition: transform var(--cave-exit-duration, 520ms) cubic-bezier(0.76, 0, 0.24, 1);
	will-change: transform;
	font-family: Arial, "Helvetica Neue", sans-serif;
}

#cave-page-loader.is-leaving {
	transform: translateY(-100%);
	pointer-events: none;
}

.cave-page-loader__inner {
	transform: scale(var(--cave-loader-scale, 0.6));
	transform-origin: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(24px, 4vh, 42px);
	width: min(330px, 72vw);
	padding: 24px 0;
}

.cave-page-loader__brand {
	position: relative;
	max-width: 100%;
	flex-shrink: 0;
	animation: cave-logo-arrive var(--cave-glitch-duration, 820ms) steps(1, end) 1 both;
}

.cave-page-loader__logo {
	display: block;
	width: auto;
	height: clamp(var(--cave-logo-min-height, 154px), var(--cave-logo-fluid-height, 35.2vh), var(--cave-logo-max-height, 308px));
	max-width: 100%;
	object-fit: contain;
	animation: cave-logo-reveal var(--cave-glitch-duration, 820ms) linear 1 both;
}

/* Reuse the unmodified logo in narrow slices; never flash the whole screen. */
.cave-page-loader__glitch {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	pointer-events: none;
	user-select: none;
	clip-path: inset(50% 0 50% 0);
}

.cave-page-loader__glitch--upper {
	filter: drop-shadow(-6px 0 var(--cave-loader-accent, #ed1c24));
	animation: cave-logo-slice-upper var(--cave-glitch-duration, 820ms) steps(1, end) 1 both;
}

.cave-page-loader__glitch--lower {
	filter: drop-shadow(6px 0 var(--cave-loader-accent, #ed1c24));
	animation: cave-logo-slice-lower var(--cave-glitch-duration, 820ms) steps(1, end) 1 both;
}

#cave-page-loader[data-glitch="off"] .cave-page-loader__brand,
#cave-page-loader[data-glitch="off"] .cave-page-loader__glitch { animation: none; }
#cave-page-loader[data-glitch="off"] .cave-page-loader__glitch { display: none; }
#cave-page-loader[data-glitch="off"] .cave-page-loader__logo { animation: cave-logo-fade 280ms ease-out 1 both; }
@keyframes cave-logo-fade { from { opacity: 0; } to { opacity: 1; } }

.cave-page-loader__progress {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	font-style: normal;
}

.cave-page-loader__label {
	color: var(--cave-loader-accent, #ed1c24);
	font-family: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
	font-size: clamp(36px, 8vw, 58px);
	font-weight: 200;
	line-height: 1.1;
	letter-spacing: -0.035em;
}

.cave-page-loader__percent {
	color: #fff;
	font-size: clamp(62px, 16vw, 96px);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	letter-spacing: -0.045em;
}

.cave-page-loader__track {
	display: block;
	width: 100%;
	height: 2px;
	margin-top: 18px;
	overflow: hidden;
	background: transparent;
}

.cave-page-loader__bar {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--cave-loader-accent, #ed1c24);
	transform: scaleX(0.01);
	transform-origin: left center;
	/* The fill follows the displayed number on the same animation frame. */
}

@keyframes cave-logo-reveal {
	0% { opacity: 0; clip-path: inset(48% 0 48% 0); filter: blur(5px); }
	10% { opacity: 0.65; clip-path: inset(32% 0 25% 0); filter: blur(3px); }
	25% { opacity: 0.85; clip-path: inset(14% 0 12% 0); filter: blur(1.5px); }
	45% { opacity: 1; clip-path: inset(0); filter: blur(0.6px); }
	75%, 100% { opacity: 1; clip-path: inset(0); filter: none; }
}

/* A single distorted entrance. All layers settle before the counter finishes. */
@keyframes cave-logo-arrive {
	0% { transform: translateX(calc(-26px * var(--cave-glitch-power, 1))) skewX(calc(-22deg * var(--cave-glitch-power, 1))) scale(1.45, 0.65); }
	10% { transform: translateX(calc(22px * var(--cave-glitch-power, 1))) skewX(calc(18deg * var(--cave-glitch-power, 1))) scale(1.28, 0.88); }
	22% { transform: translateX(calc(-18px * var(--cave-glitch-power, 1))) skewX(calc(-14deg * var(--cave-glitch-power, 1))) scale(0.92, 1.1); }
	35% { transform: translateX(calc(14px * var(--cave-glitch-power, 1))) skewX(calc(10deg * var(--cave-glitch-power, 1))) scale(1.14, 0.95); }
	48% { transform: translateX(calc(-9px * var(--cave-glitch-power, 1))) skewX(calc(-7deg * var(--cave-glitch-power, 1))) scale(1.05, 1.02); }
	62% { transform: translateX(calc(5px * var(--cave-glitch-power, 1))) skewX(calc(4deg * var(--cave-glitch-power, 1))) scale(1.02, 1); }
	74% { transform: translateX(calc(-2px * var(--cave-glitch-power, 1))) skewX(calc(-1deg * var(--cave-glitch-power, 1))); }
	84%, 100% { transform: none; }
}

@keyframes cave-logo-slice-upper {
	0% { opacity: 0; transform: translateX(0); clip-path: inset(50% 0 50% 0); }
	8% { opacity: 0.95; transform: translateX(calc(46px * var(--cave-glitch-power, 1))) scaleX(1.25); clip-path: inset(15% 0 60% 0); }
	20% { opacity: 0.95; transform: translateX(calc(-38px * var(--cave-glitch-power, 1))) scaleX(1.15); clip-path: inset(36% 0 44% 0); }
	34% { opacity: 0.9; transform: translateX(calc(30px * var(--cave-glitch-power, 1))); clip-path: inset(8% 0 78% 0); }
	48% { opacity: 0.85; transform: translateX(calc(-24px * var(--cave-glitch-power, 1))); clip-path: inset(53% 0 34% 0); }
	62% { opacity: 0.7; transform: translateX(calc(15px * var(--cave-glitch-power, 1))); clip-path: inset(25% 0 67% 0); }
	74% { opacity: 0.5; transform: translateX(calc(-7px * var(--cave-glitch-power, 1))); clip-path: inset(43% 0 53% 0); }
	84%, 100% { opacity: 0; transform: none; clip-path: inset(50% 0 50% 0); }
}

@keyframes cave-logo-slice-lower {
	0% { opacity: 0; transform: translateX(0); clip-path: inset(50% 0 50% 0); }
	8% { opacity: 0.95; transform: translateX(calc(-42px * var(--cave-glitch-power, 1))) scaleX(1.3); clip-path: inset(62% 0 13% 0); }
	20% { opacity: 0.95; transform: translateX(calc(36px * var(--cave-glitch-power, 1))) scaleX(1.2); clip-path: inset(42% 0 36% 0); }
	34% { opacity: 0.9; transform: translateX(calc(-28px * var(--cave-glitch-power, 1))); clip-path: inset(74% 0 10% 0); }
	48% { opacity: 0.85; transform: translateX(calc(22px * var(--cave-glitch-power, 1))); clip-path: inset(32% 0 55% 0); }
	62% { opacity: 0.7; transform: translateX(calc(-14px * var(--cave-glitch-power, 1))); clip-path: inset(68% 0 24% 0); }
	74% { opacity: 0.5; transform: translateX(calc(6px * var(--cave-glitch-power, 1))); clip-path: inset(56% 0 40% 0); }
	84%, 100% { opacity: 0; transform: none; clip-path: inset(50% 0 50% 0); }
}

.cave-hero-video__status,
.cave-hero-video__no-script {
	position: absolute;
	right: 24px;
	bottom: 24px;
	left: 24px;
	margin: 0;
	color: #fff;
	text-align: center;
	font-size: 14px;
	line-height: 1.7;
}

.cave-hero-video__status[hidden] { display: none; }

#header_slider.cave-hero-video.needs-play .cave-hero-video__control {
	top: 50%;
	right: auto;
	bottom: auto;
	left: 50%;
	width: 60px;
	height: 60px;
	transform: translate(-50%, -50%);
}

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

#index_pv iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.cave-hero-video__control {
	position: absolute;
	right: 18px;
	bottom: 18px;
	z-index: 2;
	display: grid;
	width: 44px;
	height: 44px;
	padding: 0;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.cave-hero-video__control:hover,
.cave-hero-video__control:focus-visible {
	background: rgba(0, 0, 0, 0.85);
}

.cave-hero-video__control:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

@media only screen and (max-width: 767px) {
	#header_slider.cave-hero-video {
		max-height: none;
	}

	.cave-hero-video__control {
		right: 10px;
		bottom: 10px;
		width: 40px;
		height: 40px;
	}
}

@media print {
	#cave-page-loader { display: none !important; }

	.cave-hero-video__control {
		display: none;
	}
}

@media only screen and (max-width: 767px) {
  #header_slider.cave-hero-video {
    max-height: none;
    aspect-ratio: 4 / 5;
  }

  .cave-hero-video__media {
    object-fit: contain;
  }

  /* 既存の再生ボタン設定はこの下に残す */
	
	
.top_content1 {
    margin: 20px 0 25px 0!important;
    text-align: center;
}
}

@media only screen and (min-width: 768px) {
  .cave-campaign-guide__timeline.cave-campaign-guide__timeline--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
	#cave-page-loader[data-glitch="off"] .cave-page-loader__logo { animation: none; }
	#cave-page-loader,
	.cave-page-loader__bar { transition: none; }
	.cave-page-loader__brand,
	.cave-page-loader__logo,
	.cave-page-loader__glitch { animation: none; }
	.cave-page-loader__glitch { display: none; }
}