@charset "utf-8";

/*****************************
 * テキストアイコンなど
 *****************************/
/* ランキング順位 */
.titles-ranking-text {
	display: inline-block;
	font-size: 140%;
	color: #444;
}

/* ランキング変動アイコン */
.titles-ranking-up-icon,
.titles-ranking-down-icon,
.titles-ranking-level-icon,
.titles-ranking-new-icon {
	display: inline-block;
	position: relative;
	font-size: 140%;
}
.titles-ranking-up-icon:after {
	content: '↑';
	display: inline-block;
	color: #ff0000;
}
.titles-ranking-down-icon:after {
	content: '↓';
	display: inline-block;
	color: #0000ff;
}
.titles-ranking-level-icon:after {
	content: '→';
	display: inline-block;
	color: #00ff00;
}
.titles-ranking-new-icon:after {
	content: 'NEW';
	display: inline-block;
	color: #ff0000;
}

/* titles-headline-box */
.titles-headline-box {
	display: block;
	padding: 2px 3px 1px;
	text-align: center;
	font-size: 120%;
	color: white;
}
.titles-headline-box.titles-new-icon		{ background-color: #92d050; }
.titles-headline-box.titles-update-icon		{ background-color: #558ed5; }
.titles-headline-box.titles-free-info-icon	{ background-color: #fb6c03; }
.titles-headline-box.titles-push-info-icon	{ background-color: #00afaa; }
.titles-headline-box.titles-pack-info-icon	{ background-color: #0698f2; }
.titles-headline-box.titles-pack-off-icon	{ background-color: #fb6c03; }
.titles-headline-box.titles-point-info		{ background-color: #606060; }

/* titles-status-box */
.titles-status-box .titles-new-icon,
.titles-status-box .titles-update-icon,
.titles-status-box .titles-open-status-icon {
	display: inline-block;
	padding: 2px 3px 1px;
	font-size: 120%;
}
.titles-status-box .titles-new-icon			{ color: white;	background-color: #92d050; }
.titles-status-box .titles-update-icon		{ color: white;	background-color: #558ed5; }
.titles-status-box .titles-open-status-icon { color: #f62b2b; }

/* titles-attr-box */
.titles-attr-box .titles-open-status-icon,
.titles-attr-box .titles-free-info-icon,
.titles-attr-box .titles-pack-info-icon,
.titles-attr-box .titles-attr-info-icon,
.titles-attr-box .titles-push-info-icon {
	display: inline-block;
	padding: 2px 1px 1px;
	margin-top: 3px;
	margin-right: 3px;
	font-size: 90%;
	border: 1px solid transparent;
}
.titles-attr-box .titles-open-status-icon	{ border-color: #f62b2b; color: #f62b2b; }
.titles-attr-box .titles-free-info-icon		{ border-color: #fb6c03; color: #fb6c03; }
.titles-attr-box .titles-pack-info-icon		{ border-color: #0698f2; color: #0698f2; }
.titles-attr-box .titles-attr-info-icon		{ border-color: #483d8b; color: #483d8b; }
.titles-attr-box .titles-push-info-icon		{ border-color: #00afaa; color: #00afaa; }
.titles-attr-box .titles-pack-off-icon,
.titles-attr-box .titles-point-info {
	display: inline-block;
	padding: 2px 1px 1px;
	margin-top: 3px;
	margin-right: 3px;
	font-size: 100%;
}
.titles-attr-box .titles-pack-off-icon 		{ background-color: #fb6c03; color: white; }
.titles-attr-box .titles-point-info			{ color: #666; padding-left: 0; padding-right: 0; font-size: 115%; }
.titles-logo-icon-box {
	font-size: 125%;
	color: #444444;
	text-align: right;
}
.titles-logo-icon-box .titles-logo-icon {
	height: 1em;
	width: auto;
	vertical-align: bottom;
}

/*****************************
 * スライド
 *****************************/
.titles-slide-box {
	background-color: ;
}
.titles-slide-box .swiper-container {
}
.titles-slide-data-box {
	display: block;
	padding-bottom: 0px;
	overflow: hidden;
}
.titles-slide-data-box > .titles-slide-thumb-box {
	display: block;
	position: relative;
	text-align: center;
	overflow: hidden;
	background-color: #fff;
}
.titles-slide-data-box > .titles-slide-title-box {
	position: relative;
	margin: 3px 3px 9px 0;
	line-height: 1.2;
	font-size: 11px;
	color: #444;
	overflow: hidden;
}
.supported-browser .titles-slide-data-box > .titles-slide-title-box {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	text-overflow: ellipsis;
	z-index: 1;
}
.supported-browser .titles-slide-data-box > .titles-slide-title-box .line-clamp-mask {
	height: 0.1em;
	margin-top: -0.1em;
}

/*ここ変更したよ↓*/

.supported-browser .titles-slide-data-box > .titles-slide-title-box.line2 {
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	text-overflow: ellipsis;
	z-index: 1;
}
.unsupported-browser .titles-slide-data-box > .titles-slide-title-box {
	display: block;
	height: 1.2em;
}
.unsupported-browser .titles-slide-data-box > .titles-slide-title-box.line2 {
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	text-overflow: ellipsis;
	z-index: 1;
}

.titles-slide-data-box .titles-attr-box {
	margin-left: 3px;
}
.titles-slide-grid-box > ul:not(:first-child) {
	margin-top: 6px;
}
.titles-slide-grid-box .titles-slide-grid-col {
	display: inline-block;
	vertical-align: top;
}
.titles-slide-grid-box .titles-slide-data-box {
	padding-bottom: 2px;
}

/*****************************
 * グリッド
 *****************************/
.titles-grid-box {
	display: block;
}
.titles-grid-box > ul {
	display: table;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 6px 0;
	width: 100%;
}
.titles-grid-box > ul > li {
	display: table-row;
}
.titles-grid-box > ul > li.titles-grid-row-padding {
	display: table-row;
	height: 6px;
}
.titles-grid-box > ul > li > .titles-grid-cell-box {
	position: relative;
	display: table-cell;
	vertical-align: top;
	background-color: white;
}
.titles-grid-box > ul > li > .titles-grid-cell-box.no-data {
	background-color: transparent;
}
.titles-grid-data-box {
	display: block;
}
.titles-grid-data-box .titles-rank-box {
	margin-bottom: 3px;
	text-align: center;
}
.titles-grid-data-box .titles-rank-box .titles-rank-icon {
	width: 36px;
	height: 24px;
	vertical-align: bottom;
}
.titles-grid-data-box .titles-grid-thumb-box .titles-grid-img-box {
	display: block;
	position: relative;
}
.titles-grid-data-box .titles-grid-info-box {
	padding-bottom: 3px;
}
.titles-grid-data-box .titles-grid-info-box:before,
.titles-grid-data-box .titles-grid-info-box:after { content: ""; display: table; width: 0; height: 0; border-collapse: separate; border-spacing: 0 0; }
.titles-grid-data-box .titles-grid-title-box {
	position: relative;
	margin: 3px 3px 0;
	line-height: 1.2;
	font-size: 115%;
	color: #444;
	overflow: hidden;
}
.supported-browser .titles-grid-title-box {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	text-overflow: ellipsis;
	z-index: 1;
}
.supported-browser .titles-grid-data-box .titles-grid-title-box .line-clamp-mask {
	height: 0.1em;
	margin-top: -0.1em;
}
.titles-grid-data-box .titles-grid-title-box .line-clamp-mask {
	background-color: white;
}
.supported-browser .titles-grid-data-box .titles-grid-title-box.line2 {
	-webkit-line-clamp: 2;
}
.supported-browser .titles-grid-data-box .titles-grid-title-box.line3 {
	-webkit-line-clamp: 3;
}
.supported-browser .titles-grid-data-box .titles-grid-title-box.line4 {
	-webkit-line-clamp: 4;
}
.supported-browser .titles-grid-data-box .titles-grid-title-box.line5 {
	-webkit-line-clamp: 5;
}
.unsupported-browser .titles-grid-title-box {
	display: block;
	height: 1.2em
}
.unsupported-browser .titles-grid-data-box .titles-grid-title-box.line2 {
	height: 2.4em
}
.unsupported-browser .titles-grid-data-box .titles-grid-title-box.line3 {
	height: 3.6em
}
.unsupported-browser .titles-grid-data-box .titles-grid-title-box.line4 {
	height: 4.8em
}
.unsupported-browser .titles-grid-data-box .titles-grid-title-box.line5 {
	height: 6.0em
}
.titles-grid-data-box .titles-attr-box {
	margin-left: 3px;
}

/*****************************
 * 一覧
 *****************************/
.titles-list-box > ul {
	display: block;
}
.titles-list-box > ul > li:not(:first-child) {
	padding-top: 6px;
}

/* 一覧中の作品情報の外枠 */
.titles-data-box {
	background-color: white;
}
.titles-article-box {
	display: table;
	table-layout: fixed;
	width: 100%;
}
.titles-article-box .titles-thumbnail-box {
	display: table-cell;
 	vertical-align: top;
}
.titles-article-box .titles-thumbnail-box.titles-thumbnail-middle {
 	vertical-align: middle;
}
.titles-article-box .titles-thumbnail-box .titles-thumbnail-img-box {
	position: relative;
}
.titles-article-box .titles-info-box {
	display: table-cell;
	vertical-align: top;
	padding: 3px 3px 3px 6px;
}
.titles-article-box .titles-info-box .titles-status-box {
	margin-bottom: 3px;
	text-align: right;
}
.titles-article-box .titles-info-box .titles-status-box:after {
	content: '';
	display: table;
	clear: both;
}
.titles-article-box .titles-info-box .titles-status-box .titles-ranking-text,
.titles-article-box .titles-info-box .titles-status-box .titles-ranking-up-icon,
.titles-article-box .titles-info-box .titles-status-box .titles-ranking-down-icon,
.titles-article-box .titles-info-box .titles-status-box .titles-ranking-level-icon,
.titles-article-box .titles-info-box .titles-status-box .titles-ranking-new-icon,
.titles-article-box .titles-info-box .titles-status-box .titles-new-icon,
.titles-article-box .titles-info-box .titles-status-box .titles-update-icon {
	float: left;
	margin-right: 3px;
}
.titles-article-box .titles-info-box .titles-rank-box {
	display: inline-block;
	float: right;
}
.titles-article-box .titles-info-box .titles-rank-box .titles-rank-text {
	margin-left: 6px;
	margin-bottom: 6px;
	font-size: 220%;
}
.titles-article-box .titles-info-box .titles-rank-box .titles-rank-text.rank1,
.titles-article-box .titles-info-box .titles-status-box .titles-ranking-text.rank1 {
	color: #ffd700;
}
.titles-article-box .titles-info-box .titles-rank-box .titles-rank-text.rank2,
.titles-article-box .titles-info-box .titles-status-box .titles-ranking-text.rank2 {
	color: #c0c0c0;
}
.titles-article-box .titles-info-box .titles-rank-box .titles-rank-text.rank3,
.titles-article-box .titles-info-box .titles-status-box .titles-ranking-text.rank3 {
	color: #c47222;
}
.titles-article-box .titles-info-box .titles-rank-box .titles-rank-icon {
	margin-left: 6px;
	margin-bottom: 6px;
	width: 36px;
	height: 24px;
	vertical-align: bottom;
}
.titles-article-box .titles-info-box .titles-title-box {
	line-height: 1.1;
	font-size: 130%;
	color: #444;
}

/*****************************
 * グリッド / 一覧 共通
 *****************************/
/* アウトライン */
.titles-outline-box {
	position: relative;
	margin-top: 4px;
	padding-top: 3px;
	border-top: 1px dashed #e0e0e0;
	font-size: 110%;
	line-height: 1.3;
	color: #666;
	overflow: hidden;
}
.titles-grid-data-box .titles-outline-box {
	margin-left: 3px;
	margin-right: 3px;
}
.supported-browser .titles-outline-box {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	z-index: 1;
}
.supported-browser .titles-outline-box .line-clamp-mask {
	height: 0.15em;
	margin-top: -0.15em;
}
.titles-list-box .titles-outline-box .line-clamp-mask,
.titles-grid-data-box .titles-outline-box .line-clamp-mask {
	background-color: white;
}
.supported-browser .titles-outline-box.line1 {
	-webkit-line-clamp: 1;
}
.supported-browser .titles-outline-box.line2 {
	-webkit-line-clamp: 2;
}
.supported-browser .titles-outline-box.line3 {
	-webkit-line-clamp: 3;
}
.supported-browser .titles-outline-box.line4 {
	-webkit-line-clamp: 4;
}
.supported-browser .titles-outline-box.line5 {
	-webkit-line-clamp: 5;
}
.supported-browser .titles-outline-box.line6 {
	-webkit-line-clamp: 6;
}
.supported-browser .titles-outline-box.line7 {
	-webkit-line-clamp: 7;
}
.supported-browser .titles-outline-box.line8 {
	-webkit-line-clamp: 8;
}
.supported-browser .titles-outline-box.line9 {
	-webkit-line-clamp: 9;
}
.supported-browser .titles-outline-box.line10 {
	-webkit-line-clamp: 10;
}
.unsupported-browser .titles-outline-box {
	display: display;
}
.unsupported-browser .titles-outline-box.line1 {
	height: 1.3em;
}
.unsupported-browser .titles-outline-box.line2 {
	height: 2.6em;
}
.unsupported-browser .titles-outline-box.line3 {
	height: 3.9em;
}
.unsupported-browser .titles-outline-box.line4 {
	height: 5.2em;
}
.unsupported-browser .titles-outline-box.line5 {
	height: 6.5em;
}
.unsupported-browser .titles-outline-box.line6 {
	height: 7.8em;
}
.unsupported-browser .titles-outline-box.line7 {
	height: 9.1em;
}
.unsupported-browser .titles-outline-box.line8 {
	height: 10.4em;
}
.unsupported-browser .titles-outline-box.line9 {
	height: 11.7em;
}
.unsupported-browser .titles-outline-box.line10 {
	height: 13.0em;
}
.supported-browser .titles-outline-box.no-limit {
	display: block;
}
.supported-browser .titles-outline-box.no-limit .line-clamp-mask {
	display: none;
}
.unsupported-browser .titles-outline-box.no-limit {
	height: auto;
}

/* アウトラインの先頭に出す headline と末尾に出す note */
.titles-outline-box .headline {
	color: #f62b2b;
}
.titles-outline-box .note {
	color: #ec6b00;
}

/******************************************************
 * もっとみる
 ******************************************************/
.titles-more-box {
	margin-top: 12px;
}
.titles-more-box > div {
	width: 60%;
	margin: 0 auto;
}