#feature
{
	overflow: hidden;
}
/*********************************
style-header.phpの上書き
*********************************/
.section-title-span
{
    line-height: 1;
}
.span-4
{
	color: unset;
	font-family: "Jost", sans-serif;
    font-size: 26px;
    font-weight: 300;
    letter-spacing: 1px;
    margin-left: 15px;
}
.div-wrap
{
    padding-bottom: 120px;
}
/*********************************
特集
*********************************/
/* スライドショーのかたまり */
.feature-div {
	background-color: #333;
	height: auto;
}
.container-feature
{
    display: flex;
	flex-wrap: nowrap;
    overflow-x: scroll;
}
.slick-slide
{
    width: calc(100% / 4);
    flex: 0 0 auto;
}
.container-box-feature-img
{
    width: 100%;
}
/* 画像部分 */
.container-box-feature-img:hover
{
    opacity: 0.5;
    transition: 0.3s;
}
.container-box-feature-img img {
	object-fit: cover;
    width: 100%;
	height: 200px;
	margin: 0 auto;
	display: block;
}
/*********************************
検索エリア
*********************************/
.search-kodawari
{
    max-width: 1100px;
    margin: 0 auto;
	margin-top: 8px;
	margin-bottom: 8px;
}
.search-kodawari-title
{
margin-top: 8px;
margin-bottom: 8px;
}
.div-flex
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 1;
}
.btn-set-div
{
	display: flex;
	justify-content: flex-start;
	width: auto;
}
/* その他の条件div */
.p-set
{
	width: auto;
}
.p-link
{
	margin-right: 10px;
    font-size: 12px;
    text-align: end;
}
.p-link a
{
	font-weight: normal;
}
/* 探すボタン */
.btn-link-all-search-drama,
.btn-link-all-search-movie,
.btn-link-all-search-person,
.btn-link-all-search-person2
{
	position: relative;
	font-size: 11px;
	line-height: 1.2;
    background-color: #fff;
    border-radius: 3px;
	padding: 0px 30px;
	width: calc(98% / 4);
	/* box-shadow: 0 1px 4px 0 rgba(0,0,0,.2); */
	transition: 0.2s ;
	letter-spacing: 1px;
	border: thin solid;
	color: #fff;
}
.btn-link-all-search-drama .word,
.btn-link-all-search-movie .word,
.btn-link-all-search-person .word,
.btn-link-all-search-person2 .word
{
	font-size: 16px;
}
.btn-link-all-search-drama i,
.btn-link-all-search-movie i,
.btn-link-all-search-person i,
.btn-link-all-search-person2 i
{
	position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
/* 各種ボタンの色 */
.btn-link-all-search-drama
{
	background-color: #7ab359;
}
.btn-link-all-search-movie
{
	background-color:  #af9b65;
}
.btn-link-all-search-person
{
	background-color:  #597ab3;
}
.btn-link-all-search-person2
{
	background-color:  #b25979;
}
/* hoverの時 */
.btn-link-all-search-drama:hover,
.btn-link-all-search-movie:hover,
.btn-link-all-search-person:hover,
.btn-link-all-search-person2:hover
{
	opacity: 0.5;
}
/* 探すボタンのdiv */
.container-btn-box
{
	display: flex;
    justify-content: space-between;
    height: 50px;
}

/*********************************
コンテンツ
*********************************/
#contents
{
	/* margin-top: 60px; */
	margin-top: 40px;
}
.section-p,
.section-p2,
.section-p3,
.section-p4
{
	font-size: 12px;
    color: #7ab359;
    font-weight: normal;
	line-height: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}
.section-p2
{
    color: #af9b65;
}
.section-p3
{
    color: #597ab3;
}
.section-p4
{
    color: #b25979;
}


.svg-img
{
	width: 14px;
	float: right;
}
/*********************************
新作おすすめ、本日の誕生日
*********************************/
/* スライドショーの全体 */
.area {
    height: 0px;
    opacity: 0;
    /* overflow-y: hidden; */
    pointer-events: none;
}
/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;
    height: auto;
	opacity: 1;
    pointer-events: auto;
} 
/* スライドショーのかたまり */
.container {
	z-index: 1;
    border-radius: 3px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    /* justify-content: space-between; */
	justify-content: center;

}
/* 作品ひとつひとつ */
.container-box {
    width: calc(100% / 7);
    /* flex: 0 0 auto; */
    display: inline-block;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
    transition: opacity .2s ease;
    border-radius: 3px;
    margin: 8px 0;
    margin-right: 4px;
    font-size: 14px;
}
.container4-box-link {
    display: block;
    height: 100%;
}
/* 画像部分 */
.container-box-img:hover
{
    opacity: 0.5;
}
.container-box-img img {
	object-fit: cover;
	width: 100%;
    height: 120px;
	height: 240px;
	margin: 0 auto;
	display: block;
	margin-bottom: 1px;
}
/* テキスト部分 */
.container-box-text {
	padding: 10px;
	background-color: #fff;
}
/* 名 */
.container-box-text-title {
	height: 50px;
	font-size: 14px;
    font-weight: normal;
	line-height: 1.6;
	/* 2行表示 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}
.container-box-text-title:hover
{
    opacity: 0.5;
}
/* タイトル以外のテキスト */
.container-box-text-other
{
	display: flex;
    font-size: 14px;
    font-weight: normal;
    color: #696969;
}
/* vodボタンエリア */
.vod-btn-area
{
	height: 30px;
}
/* vodボタンエリア */
.vod-btn-area-flex
{
    display: flex;
    width: 100%;
    text-align: center;
}
/* vodボタン */
.vod-btn-area-div
{
    width: 28%;
    margin-right: 4px;
    border: none;
}
.vod-btn-area-div:hover {
	/* border: 3px solid #ddd; */
    opacity: 0.5;
}
/* vodボタン内の余白 */
.vod-btn-area-div-in {
	display: flex;
    justify-content: center;
	margin: 3px 8px;
}
/* vod画像 */
.vod-btn-area-div-in img{
	display: block;
	width: 100%;
	background-color: #fff;
	border-radius: 3px;
}
/*********************************
【定番】傑作ドラマ
*********************************/
.container2
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.container2-box
{
	position: relative;
    width: -webkit-calc(98% / 8);
    width: calc(98% / 8);
    font-size: 14px;
}
.container2-box:hover
{
	cursor: pointer;
}
/* 画像部分 */
.container2-box-img
{
	height: 200px;
}
.container2-box-img:hover
{
	opacity: 0.5;
}
.container2-box-img img
{
	object-fit: cover;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	display: block;
	margin-bottom: 1px;
	border-radius: 3px;
}
/* テキスト部分 */
.container2-box-text
{
	text-align: center;
	padding: 4px;
	line-height: 1.4;
}
/* タイトル */
.container2-box-text-title
{
	font-size: 14px;
	line-height: 1.6;
	/* 1行表示 */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}
.container2-box-text-title:hover
{
    opacity: 0.5;
}
/*********************************
人気の監督・脚本家から探す
*********************************/
.container3 {
	display: flex;
    flex-wrap: wrap;
	justify-content: flex-start;
    border-radius: 3px;
	margin-bottom: 12px;
}
.container3-box {
	display: flex;
	position: relative;
	width : -webkit-calc(99% / 3);
    width : calc(99% / 3);
    margin-bottom: 6px;
	height: 200px;
	font-size: 14px;
	border-radius: 3px;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
}
/* 画像枠 */
.container3-box-img {
	width: 35%;
}
.container3-box-img:hover
{
	opacity: 0.5;
}
.container3-box-img img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	display: block;
	margin-bottom: 1px;
}
/* テキスト枠 */
.container3-box-text {
	width: 65%;
	text-align: center;
    padding: 10px;
	line-height: 1.4;
	background-color: #fff;
}
/* 職業 */
.container3-box-text-job {
	margin-top: 10px;
	margin-bottom: 10px;
}
.container3-box-text-job button
{
	font-size: 12px;
	line-height: 1;
    padding: 5px 5px;
    margin-bottom: 6px;
	border-radius: 3px;
	background-color: #333;
	color: #fff;
}
/* 名前 */
.container3-box-text-title {
	font-size: 16px;
	margin-bottom: 20px;
}
.container3-box-text-title:hover
{
	opacity: 0.5;
}

.container3-box-text-main {
	margin-bottom: 10px;
}
/* 代表作 */
.main-work {
	font-size: 12px;
	text-align: left;
    border-bottom: thin solid #eee;
    padding: 2px 10px;
	margin-bottom: 10px;
	color: #696969;
}
.main-work-div {
	font-size: 12px;
	text-align: left;
	/* padding: 2px 10px; */
}
.main-work-div p a
{
	font-weight: normal;
}
/*********************************
【受賞歴数】ランキング
*********************************/
.container4 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.container4-box {
	display: block;
    height: 100%;
	font-size: 14px;
	position: relative;
    width: -webkit-calc(98% / 8);
    width: calc(98% / 8);
    border: thin solid #eeece4;
    margin-bottom: 10px;
}
/* 1つのカード全体をリンク化 */
.container4-box-link {
    display: block;
    height: 100%;
}
.container4-box:hover {
	cursor: pointer;
}
/* 画像部分 */
.container4-box-img {
    height: 200px;
	/* height: 160px; */
}
.container4-box-img:hover
{
	opacity: 0.5;
}

.container4-box-img img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	display: block;
	margin-bottom: 1px;
	border-radius: 3px;
}
/* テキスト部分 */
.container4-box-text {
	text-align: center;
	padding: 10px;
	line-height: 1.4;
}
.actor-name {
	font-size: 14px;
    font-weight: bold;
    color: #0066c0;
}
.actor-name:hover
{
	opacity: 0.5;
}

/* タイトル */
.container4-box-text-title {
	font-size: 14px;
    font-weight: normal;
	line-height: 1.6;
	/* 1行表示 */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}
.year-p
{
	margin-bottom: 10px;
    font-weight: normal;
}
.no-link-style {
	font-size: 14px;
    font-weight: normal;
    color: #696969;
}
/*********************************
その他のランキング
*********************************/
.container20
{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.container20-box
{
	position: relative;
    width: -webkit-calc(98% / 3);
    width: calc(98% / 3);
    font-size: 14px;
	margin-right: 10px;
}
.container20-box:nth-child(3n)
{
	margin-right: 0;
}
.container20-box:hover
{
	cursor: pointer;
}
/* 画像 */
#articles-ranking-div .container-box-feature-img img {
    height: 170px;
}
.container20-box-img:hover
{
	opacity: 0.5;
}
.container20-box-img
{
	height: 160px;
}
.container20-box-img img
{
	object-fit: cover;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	display: block;
	margin-bottom: 1px;
	border-radius: 3px;
}
/* テキスト部分 */
.container20-box-text
{
	text-align: center;
	padding: 4px;
	line-height: 1.4;
}
/* タイトル */
.container20-box-text-title
{
	font-size: 14px;
	line-height: 1.6;
	/* 1行表示 */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}
.container20-box-text-title:hover
{
    opacity: 0.5;
}
/* --------------------------------------------------------
レスポンシブ
最大幅820px以下の画面に対して適用
---------------------------------------------------------*/
@media (max-width: 820px) {

	.slick-slide
	{
		width: calc(100% / 1);
	}

	/*********************************
	style-header.phpの上書き
	*********************************/
	.div-wrap:first-of-type
	{
		padding-bottom: 0;
	}
	.div-wrap-100vw
	{
		border-top: none;
		border-bottom: none;
	}
	.div-wrap
	{
		padding-bottom: 0;
	}
	/*********************************
	特集エリア
	*********************************/
	.search-kodawari
	{
		padding: 10px;
		background-color: #fff;
		border-radius: 10px;
		width: 90%;
		box-shadow: 0 8px 24px 0 rgba(0,0,0,.12);
		box-shadow: 0 8px 24px rgba(0,0,0,.05), 0 0 6px rgba(0,0,0,.15);
	}
	/*********************************
	検索エリア
	*********************************/
	/* 探すボタン */
	.container-btn-box
	{
		margin-top: 0;
		margin-bottom: 0;
		background-color: #fff;
		border-bottom: thin solid #ddd;
		height: 70px;
	}
	.btn-link-all-search-drama,
	.btn-link-all-search-movie,
	.btn-link-all-search-person,
	.btn-link-all-search-person2
	{
		background-color: none;
		border-radius: 3px;
		width: 100%;
		box-shadow: none;
		letter-spacing: 0;
		border: none;
		font-weight: normal;
		color: #fff;
		margin: 10px;
	}
	.btn-link-all-search-drama
	{
		background-color: #7ab359;
	}
	.btn-link-all-search-movie
	{
		background-color: #af9b65;
	}
	.btn-link-all-search-person
	{
		background-color: #597ab3;
	}
	.btn-link-all-search-person2
	{
		background-color: #b25979;
	}
	/*********************************
	コンテンツ
	*********************************/
	#contents
	{
		margin-top: 10px;
	}
	/*********************************
	新作おすすめ
	*********************************/
    /* スライドショーのかたまり */
    .container
    {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: scroll;
		justify-content: flex-start;
        /* padding-top: 14px; */
        padding-bottom: 20px;
        margin-bottom: 10px;
        margin-left: 10px;
    }
    /* 作品ひとつひとつ */
    .container-box
    {
        width: calc(100% / 2.5);
        flex: 0 0 auto;
        margin: 0;
        margin-right: 4px;
        box-shadow: none;
    }
    .container-box:last-child
    {
        margin-right: 10px;
    }

    .container-box img
    {
        height: 240px;
        border-radius: 3px;
    }
    /* テキスト部分 */
    .container-box-text
    {
        padding: 4px;
        line-height: 1.4;
    }
	/* 名 */
	.container-box-text-title
	{
		height: auto;
		/* font-size: 4.73vmin; */
		font-size: 16px;
		font-weight: normal;
		/* 1行表示 */
		-webkit-line-clamp: 1;
	}
	.container4-box-link
	{
		font-weight: normal;
		color: #333;
	}
	/* タイトル以外のテキスト */
	.container-box-text-other
	{
		/* font-size: 2.93vmin; */
		font-size: 11px;
		color: #aaa;
	}
	/*********************************
	【定番】傑作ドラマ
	*********************************/
    .container2
    {
        flex-wrap: nowrap;
        overflow-x: scroll;
        margin-left: 10px;
        /* padding-bottom: 20px; */
        margin-bottom: 40px; 
    }
	.container2-box
    {
		width: -webkit-calc(100% / 2.5);
		width: calc(100% / 2.5);
        flex: 0 0 auto;
        margin-right: 4px;
	}
    .container2-box:last-child
    {
        margin-right: 10px;
	}
	/* 画像部分 */
	.container2-box-img {
		height: 240px;
	}
	/* テキスト部分 */
	.container2-box-text {
		text-align: left;
	}
	/* タイトル */
	.container2-box-text-title
	{
		font-size: 16px;
	}
	.container2-box-text-title a
	{
		font-weight: normal;
		color: #333;
	}
	/*********************************
	人気の監督・脚本家から探す
	*********************************/
	.container3
	{
		display: block;
		margin-bottom: 0;
	}
	.container3-box
	{
		width : 100%;
		height: 200px;
		border-top: thin solid #eee;
		padding: 10px;
		box-shadow: none;
		margin: 0;
		border-radius: 0;
	}
	/* 画像枠 */
	.container3-box-img
	{
		width: 30%;
	}
	/* テキスト枠 */
	.container3-box-text {
		width: 70%;
		text-align: left;
		padding: 0;
		padding-left: 10px;
	}
	/* 職業 */
	.container3-box-text-job {
		margin-top: 0px;
	}
	/* 名前 */
	.container3-box-text-title
	{
		margin-bottom: 20px;
		/* font-size: 4.73vmin; */
		font-size: 16px;
	}
	.container3-box-text-title a
	{
		font-weight: normal;
		color: #333;
	}
	.container3-box-text-job button
	{
		margin-bottom: 20px;
	}
	/* 代表作 */
	.main-work
	{
		padding: 0px;
		color: #666;
		font-size: 11px;
	}
	.main-work-div
	{
		padding: 0px;
	}
	.main-work-div p
	{
		font-size: 14px;
	}
	.main-work-div p a
	{
		font-size: 14px;
	}
    /*********************************
    【受賞歴数】ランキング
    *********************************/
    .container4
    {
        flex-wrap: nowrap;
        overflow-x: scroll;
        /* padding-top: 14px; */
        /* padding-bottom: 20px; */
        margin-bottom: 10px;
        margin-left: 10px;
    }
    .container4-box {
        width: -webkit-calc(100% / 2.5);
        width: calc(100% / 2.5);
        flex: 0 0 auto;
        margin-right: 4px;
		border: none;
    }
    /* 画像部分 */
    .container4-box-img {
        height: 240px;
    }
    /* テキスト部分 */
    .container4-box-text {
        padding: 2px;
		text-align: left;
    }
    .actor-name
	{
        font-size: 13px;
		color: #333;
    }
	.actor-name a
	{
		color: #333;
    }

    /* タイトル */
    .container4-box-text-title
	{
		/* font-size: 4.73vmin; */
		font-size: 16px;
		/* margin-top: 6px; */
		font-weight: normal;
    }
	.container4-box-text-title a
	{
		font-weight: normal;
		color: #333;
    }
	.year-p
	{
		/* font-size: 2.93vmin; */
		font-size: 11px;
		margin-bottom: 1px;
		color: #666;
	}
	
    .no-link-style {
		font-size: 11px;
		color: #666;
    }
	/*********************************
	その他のランキング
	*********************************/
	.container20
	{
		display: block;
	}
	.container20-box
	{
		width: 100%;
		font-size: 14px;
		margin-right: 10px;
	}
	/* 画像 */
	#articles-ranking-div .container-box-feature-img img
	{
		height: 170px;
	}
		/* タイトル */
	.container20-box-text-title
	{
		/* font-size: 4.73vmin; */
		font-size: 16px;
	}
	.container20-box-text-title a
	{
		font-weight: normal;
		color: #333;
	}
	/* テキスト部分 */
	.container20-box-text
	{
		text-align: left;
		padding: 4px 10px 10px 10px;
		line-height: 1.4;
	}
	

	/*********************************
	受賞歴数ドラマランキング
	*********************************/
	.area-person-award.is-active,
	.area-person-all.is-active {
		padding-top: 10px;
	}
	/*********************************
	タブ
	*********************************/
	/*********************************
	もっと見るボタン
	*********************************/
	.btn-link-all2
	{
		width: 100%;
		padding: 20px 10px;
		text-align: center;
		border: none;
		border-top: thin solid #eeece4;
		border-radius: 0;
		font-size: 14px;
		color: #af9b65;
		background-color: #fff;
	}
	.btn-link-all2:hover
	{
		color: #af9b65;
		background-color: none;
		opacity: 0.5;
	}
	.p-comment3
	{
		width: 180px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		margin-top: 14px;
		margin-bottom: 20px;
		line-height: 1.4;
		font-size: 14px;
		/* border: thin solid #666; */
		/* border-radius: 16px; */
		border-radius: 3px;
		background-color: #333;
	}
	.p-comment3 a
	{
		display: inline-block;
		border-bottom: none;
		font-size: 14px;
		padding: 10px;
		width: 100%;
		height: 100%;
		text-align: center;
		/* color: #666; */
		color: #fff;
	}
}