/* ポップアップウィンドウ */
.popup {
	position  : fixed;
	left      : 0;
	top       : 0;
	width     : 100%;
	height    : 100%;
	z-index   : 9999;
	opacity   : 0;
	visibility: hidden;
	transition: .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, .8);
	z-index         : 1;
	cursor          : pointer;
}


/*アニメマーカー*/

.marker.active {
	background-position: -100% .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  : 16px;
	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 {
		font-size: 14px;
	}
}