@charset "utf-8";

/************************************************************************************************************/
/* [01] リスト要素divタグ(.listbox)の共通設定 */
/************************************************************************************************************/
[class^="listbox0"]{width:calc(100% - 24px);display: table;margin-bottom:12px;text-align:left;}
.boxr01 [class^="listbox0"]{width:calc(100%);}

/* インクルード(listbox)共有設定　*/
/*==========================================================================================================*/
[id^="read"] [class^="listbox0"]{width:calc(100% - 12px);}

#footer [id^="read"] .listbox05{width:calc(100% - 8px);}

#naviL [id^="read"] [class^="listbox0"]{width:calc(100%);}

#naviL [id^="read"] .listbox00 p,
#naviL [id^="read"] .listbox03 p{margin-bottom:6px;width: 100%;}
#naviL [id^="read"] .listbox05 p{margin-bottom:6px;width:calc(100% - 12px);}

#naviL [id^="read"] .listbox01 .article > a,#naviL [id^="read"] .listbox02 .article > a,#naviL [id^="read"] .listbox06 .article > a
{margin-right: 4px;}

#naviL [id^="read"] .listbox03 .article p{padding-top:0;}

#naviL [id^="read"] .listbox04 .article > a{margin-left: 4px;}

#naviL [id^="read"] .listbox05 .article{width:calc(100%);}

#naviL [id^="read"] .listbox05 .article > div{overflow: visible;}
#naviL [id^="read"] .listbox05 .article img{margin-bottom:8px;margin-right:4px;}
#naviL [id^="read"] .listbox06{-moz-columns: 1;-webkit-columns: 1;}

@media screen and (min-width: 481px) and (max-width: 1080px) {
[id^="read"] [class^="listbox0"]{width:calc(100% - 12px);}
.boxr01 [class^="listbox0"]{width:calc(100% - 48px);margin-left:24px;}
}

@media screen and (max-width: 480px) {
[id^="read"] [class^="listbox0"]{width:calc(100% - 8px);}
.boxr01 [class^="listbox0"]{width:calc(100% - 24px);margin-left:12px;}
}

.article{
	width:calc(100%);
	float:left;
	margin:0 12px 8px 0;
	border-bottom:1px solid rgba(0,0,0, 0.2);
}

.article h3{
	display:block;
	margin-bottom:8px;
	font-size:14px;
	}
	
.article > a{
	float:left;
	display:inline-block;
	margin-right:12px;
	margin-bottom:12px;
	}

.w376L .article > a{margin-right:12px;}
.w176R .article > a{margin-right:8px;}
	
#footer .article > a{width:calc(100%/16*2);}
#naviL .article > a{width:calc(100%/12*4);margin-right: 8px;}
#naviL .listbox03 .article > a,#naviL .listbox04 .article > a{width:calc(100%/12*4);margin-right: 0px;}

/*リスト内画像サイズ指定*/
.article > a.aw32{width:calc(100%/12*1);}
.article > a.aw48{width:calc(100%/12*2);}
.article > a.aw64{width:calc(100%/12*3);}
.article > a.aw80{width:calc(100%/12*4);}
.article > a.aw96{width:calc(100%/12*5);}
.article > a.aw112{width:calc(100%/12*6);}
.article > a.aw128{width:calc(100%/12*7);}
.article > a.aw176{width:calc(100%/12*8);}
.article > a.aw276{width:calc(100%/12*9);}

/*インクルード*/
[id^="rom"] .article a{width:calc(100%/12*2);}
[id^="rom"] .article p{font-weight:normal !important;}
[id^="rom"] .article p br{display:none;}
[id^="rom"] .article a.alink{width:auto;}

.w176R .article > a{margin-bottom:0px;}
.w776 .article > a{width:calc(100%/12*2);}

.article h3 a:hover{opacity:0.7;}

.article p{
	overflow:hidden;
	margin:6px 0 24px 0;
	text-align: justify;
	line-height: 1.6;
}

.article .alink{text-align:left;}

.article .subtitle{font-size:10px;vertical-align:5%;}
.article .subtitle:after{content: " ] ";}
.article .subtitle:before{content: "[ ";}
.article > div{display:block;overflow:hidden;}

/* ★Media Queries指定★(p)共有設定*/
/*==========================================================================================================*/
@media screen and (min-width: 481px) and (max-width: 732px) {
.w176R .article > a{margin-bottom:0;}
.w776 .article > a{width:calc(100%/12*2.5);}
}

@media screen and (max-width: 480px) {
[class^="listbox0"]{width:calc(100% - 12px);margin-bottom:8px;}
.w176R .article > a{margin-bottom:0px;}
.w776 .article > a{width:calc(100%/12*3);}
}

/************************************************************************************************************/
/* [01] リスト要素内本文サイズ listbox00-listbox06の設定 */
/************************************************************************************************************/
.article h3 a::before,[class^="p0"] .alink::before{
content: "LINK";
color: #fff;
padding: 2px 4px;
border-radius: 2px;
margin-right: 4px;
vertical-align: 2px;
font-size: 9px;
font-weight: initial;
}
.w376L .article h3 a:after,.w176R .article h3 a:after{display:table;margin-top:4px;}
.headmark01 > span:after,.headmark02,.headmark03,.headmark04,.headmark05,.headmark06{content: "…";}

/* ★Media Queries指定★(p)共有設定　*/
/*==========================================================================================================*/
@media screen and (max-width: 732px) {
.article h3 a:after{font-size:8px;}
}

@media screen and (max-width: 480px) {
.article h3 a:after,.article h3 a:after{display:table;margin:2px 0 8px 0px;}
.article > a{margin-bottom:8px;}
}

.p00 .alink,[class^="listbox0"] .alink,.etlink1{
	display:inline-block;
	margin-top:0;
	padding:8px;
	border:1px solid rgba(0,0,0,0.2);
	background:#fff;
	border-radius: 2px;
	font-size:12px;
	font-weight: 600;
	}
	
[class^="listbox0"] a{text-decoration:none;border:none;}
[class^="listbox0"] .article p br{display:none;}

/************************************************************************************************************/
/* リスト要素内本文サイズ listbox01の設定 */
/************************************************************************************************************/
.listbox00 .article p{margin: 0 0 12px 0;}
.listbox00 .article.listbtm{margin-bottom:12px;}
.listbox00 .article:nth-child(1){padding-top:8px;border-top:1px solid rgba(0,0,0, 0.2);}
.listbox00 .article.listbtm:nth-child(1){padding-top:12px;}

.listbox01 .article{
	margin-bottom:2px;
	border:1px solid rgba(0,0,0, 0.15);
	background:#fff;
	border-radius:2px;
	}
.listbox01 .article.listbtm{margin-bottom:12px;}

.listbox01 .article h3 a:after{vertical-align:16%;}
.listbox01 .article p{padding:0 24px 0 12px;}
.listbox01 .article [class*="fontt"]{margin: 12px 24px 24px 12px;}

.listbox01 .article > div{
	padding:8px 12px 0 12px;
	background:rgba(0,0,0, 0.05);
	}
.listbox01 .article > a{margin:0;}

/************************************************************************************************************/
/* リスト要素内本文サイズ listbox02の設定 */
/************************************************************************************************************/
.listbox02 .article{border:none;margin-bottom:2px;}
.listbox02 .article.listbtm{margin-bottom:12px;}

.listbox02 .article a{margin-right: 2px;}
.listbox02 .article h3 a:hover{opacity:0.7;}
.listbox02 .article h3 a:after{vertical-align:16%;}

.listbox02 .article p{padding:0 0 0 6px;}

.listbox02 .article > div{
	padding:8px 8px 0 8px;
	background:rgba(0,0,0, 0.05);
	border-radius:2px;}

.listbox02 .article .alink{}
/*.listbox02 .article h3 a > span{color:#fff;}*/

/************************************************************************************************************/
/* リスト要素内本文サイズ listbox03の設定 */
/************************************************************************************************************/
.listbox03 .article{margin: 0px 12px 6px 0px;border-bottom:2px groove rgba(255,255,255, 0.7);}
.listbox03 .article:nth-child(1){padding-top:6px;border-top:2px groove rgba(255,255,255, 0.7);}

.listbox03 .article h3 a{font-weight: 500;}
.listbox03 .article h3 a:hover{opacity:0.7;}
.listbox03 .article h3 a:after{vertical-align:16%;}
.listbox03 .article p{margin: 12px 0 24px 0;}

.w176R .listbox03 .article p{border:none;padding-top: 0px;}

.listbox03 .article > a{float:right;margin-left:12px;margin-right:0;margin-bottom:8px;}
.w776 .listbox03 .article > a{width:calc(100%/12*2);}

@media screen and (max-width: 480px) {
.listbox03 .article p{padding-top: 0px;overflow:visible;}
}

/************************************************************************************************************/
/* リスト要素内本文サイズ listbox04の設定 */
/************************************************************************************************************/
.listbox04 .article{border:none;margin-bottom:0;}
.listbox04 .article.listbtm{margin-bottom:24px;}
.listbox04 .article:nth-child(1){padding-top:6px;border-top:2px dotted rgba(0,0,0, 0.4);}
.listbox04 .article.listbtm:nth-child(1){border-top:none;}

.listbox04 .article h3 {padding-bottom:6px;border-bottom: 2px dotted rgba(0,0,0, 0.4);}
.listbox04 .article h3 a{
	margin-bottom:0px;
	}

.listbox04 .article h3 a:hover{opacity:0.7;}
.listbox04 .article h3 a:after{vertical-align:16%;}
.listbox04 .article p{padding-top:0;margin: 0 0 24px 0;}

.listbox04 .article > div{padding:0;}

.listbox04 .article > a{float:right;margin-left:12px;margin-right: 0px}
.w776 .listbox04 .article > a{width:calc(100%/12*2);}
.w376L .listbox04 .article > a{float:right;margin-left:12px;margin-right: 0px;margin-bottom:4px;}
.w176R .listbox04 .article > a{float:right;margin-left:4px;margin-right: 0px;margin-bottom:4px;}

.listbox04 .article h3 a:after,
.listbox04 .article .subtitle{display:inline-block;margin-right:4px;}

@media screen and (max-width: 480px) {
.listbox04 .article p{overflow:visible;}
.listbox04 .article > a{width:calc(100%/12*3);}
}

/************************************************************************************************************/
/* リスト要素内本文サイズ listbox05の設定 */
/************************************************************************************************************/
.listbox05{width:calc(100% - 12px);}
.listbox05 .article > a{width:calc(100%);}

.listbox05 .article{
	width:calc(100%/4 - 6px);
	padding:1px;
	border:1px solid rgba(0,0,0, 0.1);
	background:#fff;border-radius:2px;
	margin-bottom:4px;
	margin-right:4px;
}

#footer #read1 .listbox05 .article,#footer #read2 .listbox05 .article,#footer #read3 .listbox05 .article{width:calc(100%/4 - 4px);}
#footer #read1 .listbox05 .article > a,#footer #read2 .listbox05 .article > a,#footer #read3 .listbox05 .article > a{width: calc(100%);}
#footer #read1 .listbox06 .article > a,#footer #read2 .listbox06 .article > a,#footer #read3 .listbox06 .article > a{width: calc(100%/3);}

.w776 .listbox05 .article{width:calc(100%/6 - 5px);}
.w376L .listbox05 .article{width:calc(100%/3 - 6px);}
.w176R .listbox05 .article{width:calc(100%/2 - 7px);}

.listbox05 .article h3{font-size:12px;margin-bottom: 4px;line-height: 1.6;}
.listbox05 .article h3 a:after{vertical-align:16%;}

.listbox05 .article p{
	margin:0 8px 8px 8px;
	padding: 8px 0 8px 0;
	font-size:12px;
	border-top:1px solid rgba(0,0,0, 0.1);
	}

.listbox05 .article > div{margin:8px 8px 0 8px;}
.listbox05 .article > a{display: block;float:none;margin-bottom:0px;}

@media screen and (min-width: 481px) and (max-width: 840px) {
.listbox05{width:calc(100%);}
.listbox05 .article{width:calc(100%/4 - 8px);}
.w776 .listbox05 .article{width:calc(100%/4 - 8px);}
.w576R .listbox05 .article{width:calc(100%/4 - 9px);}
.w376L .listbox05 .article{width:calc(100%/3 - 10px);}
.w176R .listbox05 .article{width:calc(100%/1 - 20px);}
}

@media screen and (max-width: 480px) {
.listbox05{width:calc(100%);}
.listbox05 .article{width:calc(100%/2 - 7px);}
.w776 .listbox05 .article{width:calc(100%/2 - 7px);}
.w576R .listbox05 .article{width:calc(100%/2 - 7px);}
.w376L .listbox05 .article{width:calc(100%/2 - 7px);}
}

/************************************************************************************************************/
/* リスト要素内本文サイズ listbox06の設定 */
/************************************************************************************************************/
.listbox06{width:calc(100%);}

.listbox06 .article{
	width:calc(100%/2 - 24px);
	float:left;
	border:none;
	margin-right:24px;	
	}
.w176R .listbox06 .article,
.w376L .listbox06 .article{width:calc(100% - 24px);}

.listbox06 .article > a{
	display:block;
	width:calc(100%);
	margin-right:12px;
	margin-bottom: 6px;
	}

.listbox06 .article h3{margin-top:0px;}
.listbox06 .article p{
	overflow:hidden;
	padding-top:8px;
	margin: 0 0 12px 0;
}

.listbox06 .article p span{display: block;}
.listbox06 .article h3 a{
	font-weight:400;
}

.listbox06 .article p:after{display:block;padding-bottom:12px;}
.listbox06 .article > div{display: inline-block;width: 100%;border-bottom:1px solid rgba(0,0,0, 0.1);}

@media screen and (min-width: 481px) and (max-width: 1080px) {

	.w576R .listbox06 .article{width:calc(100%/2 - 24px);}
}
@media screen and (max-width: 480px) {
.w576R .listbox06 .article{width:calc(100% - 12px);}
}

/************************************************************************************************************/
/* 自動リスト用aタグ(headmark)の共通設定 */
/************************************************************************************************************/
.article h3 a [class^="headmark0"]{color:inherit;}
[class^="headmark0"]:before{margin-right:4px;vertical-align:2px;font-size:9px;}

.headmark01:before{
	content: "NEW!!";
	color:#d35464;
	font-weight:bold;
}

.headmark02:before{
	content: "NEW!!";
	color:#fff;
	font-weight:bold;
	text-shadow: 1px 1px 1px #aaa; 
	padding:3px;
	background:#d35464;
	border-radius: 2px;
}

.headmark03:before{
	content: "オススメ!!";
	color:#d35464;
	font-weight:bold;
	letter-spacing:-0.02em;
}

.headmark04:before{
	content: "オススメ!!";
	color:#fff;
	font-weight:bold;
	letter-spacing:-0.02em;
	text-shadow: 1px 1px 1px #aaa; 
	padding:2px 3px 1px 3px;
	background:#d35464;
	border-radius: 2px;
}

.headmark05:before{
	content: "check!!";
	color:#d35464;
	font-weight:bold;
	vertical-align:middle;
}

.headmark06:before{
	display: inline-block;
	font-family: FontAwesome;
	content: "Check!! \f0a4";
	color:#d35464;
	text-shadow: 1px 1px 1px #aaa; 
	margin-right:4px;
}

/************************************************************************************************************/
/* listbox00-listbox06共有resultbox01の設定 */
/************************************************************************************************************/
.resultbox01{overflow:hidden;display:block;width: calc(100% - 12px);text-align:center;padding-top:24px;}
.resultbox01 p{margin:0 auto;display: inline-block;}
.resultbox01 p a{margin-right:4px;}

.resultbox01 a.thispage,
.resultbox01 a.page,
.resultbox01 a.nextpage,
.resultbox01 a.previouspage{
	display:inline-block;
	padding:6px 12px;
	margin-top:8px;
	border:1px solid #bbb;
	background: rgba(255,255,255,0.8);
	border-radius: 2px;
	font-size:16px;
	font-family:Homenaje;
}
.resultbox01 a.thispage{background:#bbb;color:#fff;}

/* ★Media Queries指定★ (layout用)共有設定*/
/*==========================================================================================================*/
@media screen and (min-width: 481px) and (max-width: 1080px) {
.w776 .resultbox01,
.w576R .resultbox01,
.w376L .resultbox01,
.w176R .resultbox01{width: calc(100% - 12px);}
}

@media screen and (max-width: 480px) {
.w776 .resultbox01,
.w576R .resultbox01,
.w376L .resultbox01,
.w176R .resultbox01{width: calc(100% - 12px);}
}

/*リスト内指定の均一化*/
[class^="listbox0"] [class*="font"],[class^="listbox0"] [class*="kei"]{
	font-size:inherit;
	font-family:inherit;
	font-weight:inherit;
	font-style:inherit;
	color:inherit;
	}

[class^="listbox0"] .article [class*="fontt"]{
	display:inherit;
	float:none;
	width:auto;
}

[class^="listbox0"] [class^="fonts"],[class^="listbox0"] [class^="fontb"],[class^="listbox0"] [class^="fontc"]{display:inherit;}
	
[class^="listbox0"] .article [class*="fontt"],[class^="listbox0"] [class*="wbox"]{padding:10px;}
[class^="listbox0"] h3 br,[class^="listbox0"] .alink br{display:none;}
[class^="listbox0"] .alink{padding:3px 12px;}
[class^="listbox0"] font{letter-spacing:0;line-height:1.8;}

[class^="listbox0"] font[size="3"],
[class^="listbox0"] font[size="4"]{font-size:15px;}
[class^="listbox0"] font[size="5"],
[class^="listbox0"] font[size="6"],
[class^="listbox0"] font[size="7"],
[class^="listbox0"] font[size="8"],
[class^="listbox0"] font[size="9"]{font-size:16px;}