/* ポップアップウィンドウ */
.popup {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: 0.6s;
}

.popup.is-show {
	opacity: 1;
	visibility: visible;
}

.popup .close-btn_top {
	position: absolute;
	left: 50%;
	bottom: 3%;
	transform: translate(-50%, 0);
	width: 90%;
	max-width: 1000px;
	z-index: 3;
	text-align: right;
	padding: 10px 0;
	height: 5vh;
}

.popup .close-btn_top img {
	height: 5vh;
	width: auto;
	cursor: pointer;
}

.popup .popup-inner {
	position: absolute;
	left: 50%;
	top: 46%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 1000px;
	max-height: 90%;
	overflow-y: auto;
	overflow-x: hidden;
	background-color: #fff;
	border-radius: 10px;
	z-index: 100;
	padding: 25px;
	box-shadow:
		0px 8px 16px -2px rgba(10, 10, 10, 0.1),
		5px 5px 5px 0px rgba(10, 10, 10, 0.02);
}

.popup .black-background {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 1;
	cursor: pointer;
}

/*アニメマーカー*/

.marker.active {
	background-position: -100% 0.8em;
}

.marker_ani {
	background-repeat: repeat-x;
	background-size: 200% 1em;
	background-position: 0 0.5em;
	transition: all 2s ease;
	font-weight: bold;
}

.mk_orange_ani {
	background-image: -webkit-linear-gradient(
		left,
		transparent 10%,
		rgb(255, 168, 78) 80%
	);
	background-image: -moz-linear-gradient(
		left,
		transparent 10%,
		rgb(255, 168, 78) 80%
	);
	background-image: -ms-linear-gradient(
		left,
		transparent 10%,
		rgb(255, 168, 78) 80%
	);
	background-image: -o-linear-gradient(
		left,
		transparent 10%,
		rgb(255, 168, 78) 80%
	);
	background-image: linear-gradient(
		left,
		transparent 10%,
		rgb(255, 168, 78) 80%
	);
}

.mk_red_ani {
	background-image: -webkit-linear-gradient(
		left,
		transparent 10%,
		rgb(255, 78, 78) 80%
	);
	background-image: -moz-linear-gradient(
		left,
		transparent 10%,
		rgb(255, 78, 78) 80%
	);
	background-image: -ms-linear-gradient(
		left,
		transparent 10%,
		rgb(255, 78, 78) 80%
	);
	background-image: -o-linear-gradient(
		left,
		transparent 10%,
		rgb(255, 78, 78) 80%
	);
	background-image: linear-gradient(
		left,
		transparent 10%,
		rgb(255, 78, 78) 80%
	);
}

/* 固定マーカー */
.mk_orange {
	display: inline-block;
	background: linear-gradient(transparent 60%, #facd89 60%);
	text-decoration: none;
}

.mk_pink {
	display: inline-block;
	background: linear-gradient(transparent 60%, #f9a3cf 60%);
	text-decoration: none;
}

.mk_yellow {
	display: inline-block;
	background: linear-gradient(transparent 60%, #fffb86 60%);
	text-decoration: none;
}

/* スクロール連動表示エフェクト */
/* エフェクト：下から */
.effect-fade {
	opacity: 0;
	transform: translate(0, 80px);
	transition: all 600ms;
}

.effect-fade.effect-scroll {
	opacity: 1;
	transform: translate(0, 0);
}

/* エフェクト：上から */
.effect-fade_T {
	opacity: 0;
	transform: translate(0, -80px);
	transition: all 600ms;
}

.effect-fade_T.effect-scroll {
	opacity: 1;
	transform: translate(0, 0);
}

/* エフェクト：左から */
.effect-fade_L {
	opacity: 0;
	transform: translateX(-80px);
	transition: all 600ms;
}

.effect-fade_L.effect-scroll {
	opacity: 1;
	transform: translate(0, 0);
}

/* エフェクト：右から */
.effect-fade_R {
	opacity: 0;
	transform: translateX(45px);
	transition: all 500ms;
}

.effect-fade_R.effect-scroll {
	opacity: 1;
	transform: translate(0, 0);
}

/* 文字色 */
.fc_red {
	color: #ff3030;
}

/* 標準フォント */
.ft_go {
	font-family:
		"Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
		"メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.ft_min {
	font-family:
		"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3",
		"Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/* 動画のアスペクト比 */
.movie {
	text-align: center;
}

.movie {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.movie video {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.caption {
	text-align: center;
	font-size: 15px;
	margin-top: 1em;
	line-height: 1.6;
}

.caption a {
	font-size: 1em;
	font-weight: bold;
	text-decoration: underline;
}

@media only screen and (max-width: 769px) {
	.caption {
		text-align: left;
		font-size: 13px;
	}
}