* {
	font-family: 'Noto Sans JP', sans-serif;
}

body {
	background-color: #fff4f4;
}

.content-card {
	margin-bottom: 20px;
}

.card {
	background-color:rgba(255,255,255,0.6);
}

.movie-wrap {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.movie-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* 桜を表示するコンテナのスタイル */
.cherry-blossom-container {
	position: relative;
	height: 100%; /* コンテナの高さ */
	width: 100%; /* コンテナの横幅 */
	overflow: hidden; /* コンテナからはみ出した要素を隠す */
}
  
/* 桜の花びらのスタイル */
.petal {
	position: absolute;
	background-color: #ffc0cb; /* 花びらの色 */
	border-radius: 150% 0 150% 0;
	animation: animate-petal 20s linear;
	z-index: -1;
}
  
.petal::after {
	content: "";
	position: absolute;
	top: -14%;
	left: -10%;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #ffc0cb;
	border-radius: 150% 0 150% 0;
	transform: rotate(15deg);
}
  
/* 花びらが降るアニメーション */
@keyframes animate-petal {
	0% {
		top: 0;
		opacity: 0;
		transform: rotate(0deg);
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		top: 100%;
		transform: rotate(3000deg);
	}
}

/* 検定用ボタン色カスタマイズ */
/* 通常のボタン色 */
.kentei-btn,
.kentei-btn.disabled, .kentei-btn:disabled {
  color: #fff;
  background-color: #ffe7eb;
  border-color: #ffe7eb;
}

/* focusされた時の枠線の色 */
.kentei-btn:focus, .kentei-btn.focus,
.kentei-btn:not(:disabled):not(.disabled):active:focus, .kentei-btn:not(:disabled):not(.disabled).active:focus,
.show > .kentei-btn.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgb(255, 193, 217);
}

/* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定） */
.kentei-btn:hover {
  color: #fff;
  background-color: #ffc0cb;
  border-color: #ffc0cb;
}

/* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */
.kentei-btn:not(:disabled):not(.disabled):active, .kentei-btn:not(:disabled):not(.disabled).active,
.show > .kentei-btn.dropdown-toggle {
  color: #fff;
  background-color: #ffc0cb;
  border-color: #ffc0cb;
}