@charset "UTF-8";

/* 共通
---------------- */
body { padding-top: 54px;}
#content {
	overflow: hidden;
}
.thumb {
	position: relative;
}
.thumb .dummy {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.newTxt {
	margin-left: 6px;
	color: #FF4545;
}
.lower #shareLink.btmShare {
	padding-bottom: 60px;
}
#secProgram .post .desc a,
.movieSortcnt .post .desc a,
#movieList .post .desc a {
	color: #333333;
}
#nav .navJoin .linkMypage a {
	background: #ff4545;
	color: #fff13e;
}
#nav .navJoin .linkLogout a {
	background: #fff13e;
	color: #ff4545;
}
.hdr_fadein, .fadein {
	transition: all .5s linear;
}

/* btn
---------------- */
.btn a, .btn input[type="submit"],
.btn input[type="button"],
.btn .main, .btn input[type="submit"].main{
	display: block;
	background: #7dccf3;
	color: #222!important;
	text-decoration: none!important;
	text-align: center;
	font-size: 14px;
	font-weight: normal!important;
	letter-spacing: 0.05em;
	text-shadow: none!important;
	border-radius: 9px;
	-webkit-border-radius: 9px;
	border-radius: 100px;
	padding: 14px 0;
	margin: 30px auto 0;
}
.btn .sub,
.btn input[type="submit"].sub,
.btn input[type="button"].sub{
	color: #222!important;
	background: #fff;
}

/* pager
---------------- */
.block--pager{
  width: 120%;
  margin: 0 -20%;
  text-align: center;
  transform: translateX(50%);
  position: relative;
  left: -50%;
}
.block--pager li{
  float: none;
  display: inline-block;
  margin: 0 5px 0 0;
}
.block--pager li,
.block--pager li a{
  font-size: 10px;
}

/* fancybox
---------------- */
.fancybox-close { top: 5%; right: 4%; width: 50px; height: 50px; background: none; }
.fancybox-close:before,
.fancybox-close:after {
	content: '';
	display: block;
	position: absolute;
	top: 25px;
	right: 0;
	width: 40px;
	height: 4px;
	border-radius: 10px;
	background: #fff23f;
	transition: all .1s ease;
}
.fancybox-close:before {
	transform: rotate(45deg);
}
.fancybox-close:after {
	transform: rotate(-45deg);
}
.fancybox-close:hover:before,
.fancybox-close:hover:after {
	width: 44px;
	right: 3px;
}

/* index
---------------- */
a.pickup {
	text-decoration: none;
}
.home .indexJoin {
	margin-bottom: 35px;
	padding: 0 8%;
}
.home .indexJoin li {
	width: 50%;
	float: none;
}
.home .indexJoin a {
	display: block;
	height: 36px;
	margin: 0 4%;
	padding: 0 22px;
	border-radius: 18px;
	color: #fff;
	font-size: 11px;
	text-align: center;
	text-decoration: none;
	line-height: 36px;
}
.home .indexJoin .linkMypage a,
.home .indexJoin .linkJoin a {
	background: #000000;
}
.home .indexJoin .linkLogout a,
.home .indexJoin .linkLogin a {
	background: #7DCCF3;
}
.home .indexJoin .linkMypage{
	width: 70%;
	margin: 0 auto;
	float: none;
}
.home #secReccomend .post {
	display: block;
	float: left;
}
.home #secReccomend .post .title{
	display: -webkit-box;
	overflow : hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	text-overflow: ellipsis;
}
.home .streamThumb img {
	background-size: cover;
	background-position: center;
}
.streamBanner .streamOverlay .inner {
	top: 50%;
	left: 50%;
	margin: 0;
	transform: translate(-50%,-50%);
}
.home .slick-arrow {
	margin-top: -43px;
}
.home .streamBanner .ph {
	width: 100%;
	height: 100%;
	background: no-repeat center;
	background-size: cover;
}
.home .streamBanner .streamOverlay img.ph {
	display: block;
	width: 100%;
}

/* media
---------------- */
#secMedia .mediaMenu li a {
	color: #ffffff;
	text-decoration: none;
}

/* disco
---------------- */
#content .discoCnt .dicoList li .jacket {
	margin-bottom: 8px;
}

/* wp
---------------- */
.single.download .sml {
	margin: 20px 0 0;
	text-align: left;
	line-height: 1.5em;
	font-size: 11px;
}

/* movie
---------------- */
video {
	width: 100%;
	height: 60%;
	padding: 0;
	background: #444444;
}
.movie embed {
	width: 100% !important;
	height: 100%;
}
.movie .moviePlayer {
	margin-top: 20px;
}
.movie .movieDetail {
	margin: 0 0 60px;
	margin-bottom: 12vh;
}
.movie .subTxt {
	margin-top: 10px;
	color: #999999;
	font-size: 10px;
	line-height: 1.3em;
}
#UlizaApp {
	margin :30px 0 0;
}
#UlizaApp .tit {
	font-size: 14px;
	text-align: center;
}
#UlizaApp .steptit {
	display: block;
	margin: 0 0 15px;
	padding: 10px 5px;
	border-radius: 2px;
	color: #FF4545;
	font-weight: bold;
	font-size: 19px;
	text-align: center;
	line-height: 100%;
}
#UlizaApp .stepbox {
	display: block;
	margin: 10px 0;
	padding: 20px 20px 20px;
	background: #eaf8ff;
}
#UlizaApp .ph {
	display: none;
}
#UlizaApp .steparrow {
	text-align: center;
}
#UlizaApp .steparrow img {
	width: 20px;
	height: auto;
	margin: 0 auto;
}
.movie .txt {
	margin: 0 0 10px;
	line-height: 1.6em;
}
.movie #movieList .movieSortcnt .secProgram > ul li:first-of-type {
	display: none;
}
.movieDetail .btn a {
	margin-top: 20px;
}
.movie .blockSearch {
	margin: 0 auto 40px;
}
.movie .blockSearch .searchBox {
	margin-bottom: 20px;
}
.movie .blockSearch form {
	position: relative;
}
.movie .blockSearch input {
	display: inline-block;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
}
.movie .blockSearch input[type="text"]:hover,
.movie .blockSearch input[type="text"]:active,
.movie .blockSearch input[type="text"]:focus {
	outline: none;
}
.movie .blockSearch input[type="text"] {
	width: 100%;
	padding: 11px 35px 10px 18px;
	border: solid 1px #7b7b7b;
	border-radius: 30px;
	font-size: 15px;
	line-height: 1;
}
.movie .blockSearch form label.submit {
	position: absolute;
	right: 0;
}
.movie .blockSearch form label.submit input[type="submit"] {
	position: absolute;
	top: -2px;
	right: 0;
	width: 50px;
	height: 50px;
	background: none;
	font-family: FontAwesome;
	font-size: 20px;
	cursor: pointer;
}
.movie .blockSearch form label.submit input[type="submit"]:hover {
	color: #ff4545;
}
.movie #movieList .blockSearch .movieSortlist {
	margin: 0;
}
.movie #movieList .blockSearch .movieSortlist li {
	width: 18vw;
	margin: 0 1vw;
}
.movie #movieList .blockSearch .movieSortlist li span {
	line-height: 30px;
	height: 30px;
	border-radius: 15px;
}
.movie.lower #content .programTitle {
	margin-bottom: 60px;
}
.movie .blockTagList {
	padding-top: 20px;
}
.movie .blockTagList .listTag li {
	display: inline-block;
	margin-right: 3px;
	list-style: none;
}
.movie .blockTagList .listTag li:last-child {
	margin-right: 0;
}
.movie .blockTagList .listTag li a {
	display: block;
	margin-bottom: 9px;
	padding: 7px 5px 5px;
	border: solid 1px;
	border-radius: 40px;
	color: #333;
	font-size: 12px;
	text-decoration: none;
	line-height: 1;
	letter-spacing: .05em;
}
.movie .blockTagList .listTag li a:hover {
	background: #ff4545;
	border-color: #ff4545;
	color: #fff;
}

/* faq
---------------- */
.page.faq .qalist { margin-left: 2em; }
.page.faq .qalist li { list-style: decimal; line-height: 1.5em; }
.page.faq .qalist a { color: #222!important; display: block; padding: 8px 0; }
.page.faq #pageContent.faqDetail .secTitle {margin: 0 0 20px;}
.page.faq .faqDetail .question {color: #18468e;}
.page.faq .faqDetail .answer {color: #FE4C48;}
.page.faq .faqDetail dt {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.04em;
	color: #18468E;
	margin: 0 0 20px;
}
.page.faq .faqDetail dl { border-bottom: 1px solid #666; padding: 0 0 30px; margin: 0 0 30px; }
.page.faq .faqDetail .question+div{ display: inline; }
.singleForm .selectWrap select {background: #fff; border-radius: 3px; -webkit-border-radius: 3px;}

/* privacy
---------------- */
.page.policy #pageContent .desc { margin: 0 0 20px; }

/* 利用規約
---------------- */
.terms dd ul { padding: 10px 0 10px 20px; }
.terms  dd .decimal li { list-style: decimal outside none; padding: 0; margin: 0 0 5px; }
.terms dd .disc li { list-style: disc outside none; padding: 0; margin: 0 0 5px;  }

/* 推奨環境
---------------- */
.device #header { background: url(/static/funassyi/fanclub-pc/header_13_systemrequirement.png) center top repeat-x; }
.device .deviceList dt { background: #7dccf3; line-height: 30px; padding-left: 10px; margin: 40px 0 15px; }

/* about
---------------- */
.about .secIntro .btnJoin { color: #ff4545!important; padding: 0; }
.about #join {position: relative;}
.about #anchorJoin { position: absolute; top: -60px; }
.about #aboutCont .secJoin .blockJoin dt a { color: #ff4545; }

/* アンケート
---------------- */
.questionnaire .thumb { margin: 0 0 25px; }
.questionnaire p img { max-width: 100%; }
.questionnaire .tit { font-size: 18px; line-height: 20px; color: #ff4545; margin-bottom: 13px; }
.questionnaire .guidance { font-size: 15px; padding: 0 10%; margin: 0 0 30px; }
.questionnaire .errorList { color: red; border: 1px solid red; padding: 8px; margin: 0 10% 30px; }
.questionnaire .errorList li { line-height: 1.4em; text-indent: -1em; margin: 0 0 5px 1em; }
.questionnaire .errorList li:last-child {margin-bottom: 0;}
.questionnaire .errorList:empty {display: none;}
.questionnaire .answer.radio label,
.questionnaire .answer.checkbox label { margin: 0 0 5px; display: block; }
.questionnaire input[type="radio"],
.questionnaire input[type="checkbox"] { vertical-align: -2px; margin-right: 5px; }
.questionnaire input.sub,
.questionnaire .btn.sub {
	display: block;
	width: 200px;
	height: 44px;
	margin: 0 auto 20px;
	color: #333;
	font-size: 12px;
	text-align: center;
	text-decoration: none;
	line-height: 44px;
	background: #fff;
	border: none;
	border-radius: 22px;
}

/* blog
---------------- */
.lower.blog .postDesc .fancybox { position: relative; display: block; margin: 25px auto; }
.lower.blog #content .postDesc .fancybox img {margin: 0;}
.lower.blog .postDesc .fancybox:after{
	content: '\f00e';
	position: absolute;
	right: 6px;
	bottom: 6px;
	color: #fff;
	font-family: 'FontAwesome';
	font-weight: normal;
	font-size: 18px;
	text-shadow: 0 0 3px rgba(0,0,0,0.6);
}

/* errorページ
---------------- */
.lower.errorPage {
	opacity: 0;
}

/* 年会費認証エラーページ追加 */
#content.yearlyError {
	padding: 0 10% 50px;
}
.yearlyError .txt {
	margin: 0 0 30px;
}

/* 年会費フラグ・無料動画 追加
---------------- */
.postdate .year,
.postDate .year,
.postdate .free,
.postDate .free {
	display: inline-block;
	margin-left: 10px;
	color: #5bc6fb;
	font-size: 11px;
	letter-spacing: 0;
}
.postdate .free,
.postDate .free {
	margin-left: 6px;
	padding: 0 4px;
	background: #fb4544;
	color: #ffffff;
	font-size: 10px;
	line-height: 13px;
	vertical-align: 1px;
}
.postDate .free {
	vertical-align: -2px;
}
.home .postDate .free{
  vertical-align: 1px;
}

/* お気に入り機能
---------------- */
.btnFavorite::before,
.btnFavorite::after,
#header .navFavorite a::before {
	content: "\f004";
	color: #ff4545;
	font-family: 'FontAwesome';
}
/* favoriteList */
.favo .nosearch {
	text-align: center;
}
/* movieDetail */
.btnFavorite {
	display: flex;
	align-items: center;
	position: fixed;
	right: -50px;
	bottom: 22vw;
	z-index: 10;
	height: 60px;
	padding: 0 5.5em 0 4.5em;
	background: #ffffff;
	border-radius: 60px 0 0 60px;
	font-size: 13px;
	line-height: 60px;
	transform: translateX(100%);
	transition: all .4s ease-out, color 0.1s ease;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 20px -5px;
	cursor: pointer;
}
.favoApper .btnFavorite{transform: translateX(0);}
.favoApper .btnFavorite .txt{margin-bottom: 0;}
.favoApper .btnFavorite.hidden {transform: translateX(58%);}
.btnFavorite::before,
.btnFavorite::after {
	position: absolute;
	top: 19px;
	left: 1em;
	font-size: 22px;
	line-height: 1;
	transition: all .2s ease-out;
}
.btnFavorite::before {color: #ccc;}
.btnFavorite::after {transform: scale(0);}
.btnFavorite.like::after {transform: scale(1);}
.btnFavorite .txt::after {content:'お気に入りに登録する';}
.btnFavorite.like .txt::after {content:'お気に入りに登録済み';}
.btnFavorite button {display: none;}
/* gNav */
#header .navFavorite {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	padding: 10px 18px;
	text-align: center;
}
#header .navFavorite a {
	display: block;
	position: relative;
	color: #fff;
	font-size: 11px;
	text-decoration: none;
	line-height: 1;
}
#header .navFavorite a::before {
	display: block;
	margin: 0 0 4px;
	font-size: 20px;
}