/* CSS Document */

/**************allsiteList******************/
#product_01{ font-size: 20px;}
.product-h2{
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
	margin-left: 10px;
	text-align: left;
}
.product-hr{ margin: 0 10px 20px 10px;}
.article-p a:after, #footer-section1:after, #footer-section1 .lists:after, #footer-section2:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.article-p { height: 100%;}
.article-p .thumbnail { text-align: center; position: relative; margin: 0 0 10px;}
.article-p .img { overflow: hidden; height: 135px;}
.article-p .img img { width: auto; height: 135px;}
.article-p h2 { font-size: 16px; margin: 0 0 5px;}
.article-contents-p{
	padding: 10px;
    box-sizing: border-box;
    /*background-image: url(../images/w-bg.gif);*/
	background: #fff;
    display: block;
    position: relative;
    height: 100%;
	border:1px solid #dedede;
}
.product-btn{
	width: 100%;
	margin:0 0 10px 0;
	padding: 0 10px 0 10px;
	overflow: hidden;
	box-sizing: border-box;
}
a p.p-anime-btn,
a p.p-movie-btn,
a p.p-cal-btn {
	box-sizing:border-box;
	display: block;
	font-size: 12px;
	width: 33.333333%;
	height: 45px;
	background-color: #fff;
	text-align: center;
	padding-top: 12px;
	float: left;
}
a p.p-anime-btn {
	color: #5dacef;
	border: 2px solid #5dacef;
}
a:hover p.p-anime-btn,
p.p-anime-btn.active {
	background-color: #5dacef;
	color: #fff;
}

a p.p-movie-btn  {
	color: #9bcd3b;
	border:2px solid #9bcd3b;
}
a:hover p.p-movie-btn,
p.p-movie-btn.active {
	background-color: #9bcd3b;
	color: #fff;
}

a p.p-cal-btn{
	padding: 2px 1px 0;
	color: #777;
	border:2px solid #777;
}
a:hover p.p-cal-btn,
p.p-cal-btn.active {
	background-color: #777;
	color: #fff;
}

/*
a p.p-anime-btn{
	display: block;
	width: 50%;
	height: 45px;
	background-color: #fff;
	color: #5dacef;
	border: 2px solid #5dacef;
	text-align: center;
	padding-top: 10px;
	float: left;
	box-sizing: border-box;
}
a:hover p.p-anime-btn{
	background-color: #5dacef;
	color: #fff;
}
a p.p-anime-btn.active{
	background-color: #5dacef;
	color: #fff;
}
a p.p-movie-btn{
	display: block;
	width: 50%;
	height: 45px;
	background-color: #fff;
	color: #9bcd3b;
	border:2px solid #9bcd3b;
	text-align: center;
	padding-top: 10px;
	float: right;
	box-sizing: border-box;
}
a:hover p.p-movie-btn{
	background-color: #9bcd3b;
	color: #fff;
}
a p.p-movie-btn.active{
	background-color: #9bcd3b;
	color: #fff;
}
*/

.product-link{
	background: url(../images/g-bg.gif);
	margin: 0 10px 30px 10px;
	padding: 5px;
	clear: both;
	border: solid 1px #dedede;
}
.product-link ul {
	display: block;
	max-width: 100%;
	background-color: #fff;
	text-align: center;
	padding: 10px;
}
.product-link ul li {
	display: inline;
	font-size: 12px;
}
.product-link ul li i {
	position: relative;
	left: -5px;
	margin-right: -5px;
}
.column-p { margin-bottom: 20px;}
.matome-article-p h2 { font-size: 16px;}
.matome-article-p .figure { width: 100px;}
.matome-article-p .headline div { margin:0 0 0 110px;}


/* ClearFix */
.hidden_content_new, .hidden_content_osusume, .hidden_content, .OpenClose { clear: both;}
.list-group:after, .items:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}


/* OpenClose */
.OpenClose {
	text-align: center;
	margin-bottom: 10px;
	padding: 10px;
}
.OpenClose img{
	display: block;
	margin: 0 auto;
}
.OpenClose img:hover{
	opacity:.7;
	-ms-filter:alpha(opacity=70);
	filter:alpha(opacity=70);
	cursor:pointer;
}


/* items */
.items { overflow: hidden;}


/* hidden_content_new */
.hidden_content_new .items { transition: all .3s cubic-bezier(.55, 0, .1, 1) 0s;}
.hidden_content_new .items { max-height: 9999px;}


/* hidden_content_osusume */
.hidden_content_osusume .items { transition: all .3s cubic-bezier(.55, 0, .1, 1) 0s;}
.hidden_content_osusume .items { max-height: 9999px;}


/* hidden_content_sp */
.hidden_content_sp { overflow: hidden;}
.hidden_content_sp.active, .hidden_content_sp.active .items { transition: all .3s cubic-bezier(.55, 0, .1, 1) 0s;}
.hidden_content_sp, .hidden_content_sp.active, .hidden_content_sp.active .items { max-height: 9999px;}
.hidden_content_sp .items { max-height: 0;}


#main .allContent { margin-bottom: 28px;}
.list-group {
	background-image: url(../images/w-bg.gif);
	border: 1px solid #ddd;
	margin: 0 0 10px;
	padding: 0 5px;
	position: relative;
}
#main .allContent .list-group h2 {
	font-size: 16px;
	line-height: 20px!important;
	padding: 15px 0 15px 10px;
}
#main .allContent .OpenClose-sp { display: none;}
#main .allContent #allsiteList .item {
	border:1px solid #ddd;
	box-sizing: border-box;
	width: calc(16.66666% - 10px);
	float: left;
	margin: 0 5px 10px;
	padding: 0 0 10px;
	background-color: #fff;
}
#main .allContent #allsiteList .item figure { margin: 0;}
#main .allContent #allsiteList .item figure	img {
	display: block;
	width: 100%;
	height: auto;
	margin:0 auto;
}


/*スマホ限定プルダウン設定*/
@media screen and (max-width: 768px){
	/* hidden_content_new */
	.hidden_content_new .items { max-height: 0;}
	.hidden_content_new.active .items { max-height: 9999px;}


	/* hidden_content_osusume */
	.hidden_content_osusume .items { max-height: 0;}
	.hidden_content_osusume.active .items { max-height: 9999px;}


	/* hidden_content_sp */
	.hidden_content_sp { max-height: 0;}
	.hidden_content_sp.active, .hidden_content_sp .items, .hidden_content_sp.active .items { max-height: 9999px;}


	#main .allContent .list-group h2 { text-align: center;}
	#main .allContent .OpenClose-sp {
		background:url(../images/bg_open.png) no-repeat;
		background-position: right;
		cursor: pointer;
		display: block !important;
		position: absolute;
		width: 96%;
		height: 50px;
		z-index: 9999;
		top:0;
		left: 0;
		background-size: 24px;
	}
	#main .allContent .OpenClose-sp.active {
		background: url(../images/bg_close.png) no-repeat;
		background-position: right;
		background-size: 24px;
	}
	#main .allContent #allsiteList .item { width: calc(50% - 10px);}
}
/*スマホ限定プルダウン設定ここまで*/


#main .allContent i{
	vertical-align: baseline !important;
}
#main .allContent #allsiteList{
	padding: 0 10px;
}
#main .allContent #allsiteList .item h3{
	font-size:14px;
	line-height:1.2em;
	max-height:4.2em;
	word-break: break-all;
	word-wrap: break-word;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	margin: 10px 10px 5px 10px;
}
#main .allContent #allsiteList .item .linkbtn {
	display:block;
	list-style:none;
	font-size: 12px;
	margin-left: 5px;
}
#main .allContent #allsiteList .item .linkbtn li { display:block;}
#main .allContent #allsiteList .item .linkbtn li i {
	position: relative;
	top:3px;
}
#main .allContent #allsiteList .item .linkbtn li a {
	display:block;
	width:100%;
	overflow:hidden;
	border:none;
	margin:0 0 0 0;
	padding:0 0 0 0;
}

@media screen and (min-width: 769px){
	#product_01{
		font-size: 24px;
	}
	.article-p .img { overflow: inherit; height: auto;}
	.article-p .img img {
		max-width: 100%;
		width: auto;
		max-height: 215px;
		height: auto;
	}
	.article-contents-p{
		border-style:solid;
		border-width:2px 1px 1px 1px;
		border-color: #e60012 #dedede #dedede #dedede;
	}

	.product-h2{
		font-size: 24px !important;
	}

	.matome-article-p figure{
		min-width: 120px;
	}

	.matome-article-p .headline div{
		margin: 20px 0 0 130px;
	}
	.product-link ul li{
		margin: 0 10px 0 10px;
	}
	.product-btn{
		/*width: 250px;*/
		height: 30px;
		margin:0 0 10px 0;
		overflow: hidden;
	}

	a p.p-anime-btn,
	a p.p-movie-btn,
	a p.p-cal-btn {
		font-size: 14px;
		width: 110px;
		height: 30px;
		padding-top: 3px;
	}
	a p.p-cal-btn {
        width: 200px;
	}
	a p.p-cal-btn br {
		display: none;
	}
	.product-link ul li{
		font-size: 14px;
	}

	.column-p .column-2{
		height: 113px !important;
	}

	.list-group{
		margin: 0 0 20px;
		padding: 0 5px;
	}
}