:root{
	--concept-color				:	dimgray;
	--font-size-pc				:	15px;
	--font-size-mobile			:	10px;
}
*{
	background-color			:	none;
	color						:	black;
	font-size					:	10px;
	font-family					:	"メイリオ","ヒラギノ角ゴ","ヒラギノ角ゴ ProN",sans-serif;
}
body{
	display						:	grid;
	grid-template-rows			:	60px auto;
	background-image			:	url(./img/p0152_m.jpg);
	background-repeat			:	repeat;
	background-size				:	100%;
}
.left{
	grid-row					:	2/3;
	grid-column					:	1/3;
}
.center{
	grid-row					:	2/3;
	grid-column					:	2/3;
	position					:	relative;
}
.right{
	grid-row					:	2/3;
	grid-column					:	3/3;
}
.menu{
	position					:	fixed;
	top							:	0;
	left						:	0;
	height						:	50px;
	width						:	100%;
	background-color			:	var(--concept-color);
	z-index						:	999;
	box-shadow					:	0 3px 3px black;
}
.banner{
	position					:	absolute;
	width						:	100px;
	height						:	50px;
	line-height					:	50px;
}
.banner a{
	display						:	block;
	width						:	100%;
	height						:	100%;
	text-decoration				:	none;
	text-align					:	center;
	font-size					:	30px;
	color						:	white;
	font-weight					:	600;
	font-family					:	"Franklin Gothic Medium";
}
.menu_contents{
	position					:	absolute;
	top							:	10px;
	left						:	100px;
	height						:	100%;
	width						:	100%;
}
.menu_content{
	width						:	1255px;
	height						:	100%;
}
.menu_content a{
	display						:	inline-block;
	width						:	80px;
	height						:	25px;
	margin						:	2px 5px 0 5px;
	line-height					:	25px;
	padding						:	0 10px 0 10px;
	border						:	1px solid white;
	border-radius				:	15px;
	text-decoration				:	none;
	text-align					:	center;
	color						:	white;
	font-weight					:	600;
	overflow					:	hidden;
	text-overflow				:	ellipsis;
	white-space					:	nowrap;
	overflow-y					:	hidden;
}
.menu_content a:hover{
	background-color			:	white;
	color						:	var(--concept-color);
	border						:	1px solid var(--concept-color);
	border-radius				:	15px;
}
.category{}
.category-name{
	margin-bottom				:	20px;
	border-left					:	solid 6px var(--concept-color);
	border-bottom				:	solid 1px var(--concept-color);
	border-radius				:	3px 0 0 3px;
	padding-left				:	10px;
	color						:	var(--concept-color);
	font-weight					:	600;
}
.site-name{
	background					:	var(--concept-color);
	opacity						:	0.7;
	border						:	solid 1px var(--concept-color);
	border-radius				:	10px 10px 0 0;
	padding-left				:	20px;
	font-weight					:	600;
	color						:	white;
}
.site-name a{
	text-decoration				:	none;
	font-weight					:	600;
	color						:	white;
}
.contents{
	margin-bottom				:	20px;
	padding						:	20px 10px 20px 30px;
	background					:	white;
	opacity						:	0.9;
	border						:	solid 1px var(--concept-color);
	border-radius				:	0 0 10px 10px;
	text-indent					:	-1.4em;
}
.content-about{
	margin-bottom				:	20px;
	padding						:	20px 10px 20px 30px;
	background					:	white;
	opacity						:	0.9;
	border						:	solid 1px var(--concept-color);
	border-radius				:	0 0 10px 10px;
}
.content-position{
	margin-top					:	-20px;
}
.content{
	color						:	chocolate;
}
.content a{
	text-decoration				:	none;
	border-bottom				:	1px dotted var(--concept-color);
}
.center-ad{
	margin-bottom				:	30px;
	text-align					:	center;
}
.center-ad img{
	height						:	auto;
}
.trends{
	margin-bottom				:	20px;
	border-left					:	solid 6px var(--concept-color);
	border-bottom				:	solid 1px var(--concept-color);
	border-radius				:	3px;
	opacity						:	0.9;
	padding-left				:	10px;
	font-weight					:	600;
	color						:	var(--concept-color);
}
.trends-category{
	background					:	var(--concept-color);
	opacity						:	0.7;
	border						:	solid 1px var(--concept-color);
	border-radius				:	10px 10px 0 0;
	padding-left				:	15px;
	font-weight					:	600;
	color						:	white;
}
.trends-content{
	margin-bottom				:	30px;
	background					:	white;
	opacity						:	0.9;
	border						:	solid 1px var(--concept-color);
	border-radius				:	0 0 10px 10px;
	text-align					:	center;
}
@media screen{
	body{
		grid-template-columns	:	auto 1050px auto;
	}
	.menu_contenst{
		overflow-x				:	hidden;
	}
	.category{
		width					:	750px;
	}
	.category-name{
		height					:	25px;
		line-height				:	25px;
		font-size				:	var(--font-size-pc);
	}
	.site-name{
		height					:	30px;
		line-height				:	30px;
		padding-top				:	3px;
		font-size				:	var(--font-size-pc);
	}
	.site-name a{
		font-size				:	var(--font-size-pc);
	}
	.content{
		font-size				:	var(--font-size-pc);
		line-height				:	30px;
	}
	.content a{
		font-size				:	var(--font-size-pc);
		line-height				:	30px;
	}
	.content-about{
		font-size				:	var(--font-size-pc);
		line-height				:	30px;
	}
	.content-about a{
		font-size				:	var(--font-size-pc);
		line-height				:	30px;
	}
	.pr{
		font-size				:	var(--font-size-pc);
	}
	.center-ad img{
		width					:	728px;
	}
	.trend-position{
		position				:	absolute;
		top						:	0;
		right					:	0;
		width					:	260px;
	}
	.trends{
		height					:	25px;
		line-height				:	25px;
		font-size				:	var(--font-size-pc);
	}
	.trends-category{
		height					:	25px;
		line-height				:	25px;
		font-size				:	var(--font-size-pc);
	}
}
@media screen and (max-width: 500px){
	body{
		grid-template-columns	:	auto 290px auto;
	}
	.menu_contents{
		overflow-x				:	auto;
	}
	.category{
		width					:	290px;
	}
	.category-name{
		height					:	25px;
		line-height				:	25px;
		font-size				:	var(--font-size-mobile);
	}
	.site-name{
		height					:	25px;
		line-height				:	25px;
		padding-top				:	0px;
		font-size				:	var(--font-size-mobile);
	}
	.site-name a{
		font-size				:	var(--font-size-mobile);
	}
	.content{
		font-size				:	var(--font-size-mobile);
		line-height				:	30px;
	}
	.content a{
		font-size				:	var(--font-size-mobile);
		line-height				:	30px;
	}
	.content-about{
		font-size				:	var(--font-size-mobile);
		line-height				:	30px;
	}
	.content-about a{
		font-size				:	var(--font-size-mobile);
		line-height				:	30px;
	}
	.pr{
		font-size				:	var(--font-size-mobile);
	}
	.center-ad img{
		width					:	100%;
	}
	.trend-position{
		display					:	none;
	}
}
@media screen and (max-height: 500px){
	body{
		grid-template-columns	:	auto 500px auto;
	}
	.menu_contents{
		overflow-x				:	auto;
	}
	.category{
		width					:	500px;
	}
	.category-name{
		height					:	25px;
		line-height				:	25px;
		font-size				:	var(--font-size-mobile);
	}
	.site-name{
		height					:	25px;
		line-height				:	25px;
		padding-top				:	0px;
		font-size				:	var(--font-size-mobile);
	}
	.site-name a{
		font-size				:	var(--font-size-mobile);
	}
	.content{
		font-size				:	var(--font-size-mobile);
		line-height				:	20px;
	}
	.content a{
		font-size				:	var(--font-size-mobile);
		line-height				:	20px;
	}
	.content-about{
		font-size				:	var(--font-size-mobile);
		line-height				:	30px;
	}
	.content-about a{
		font-size				:	var(--font-size-mobile);
		line-height				:	30px;
	}
	.pr{
		font-size				:	var(--font-size-mobile);
	}
	.center-ad img{
		width					:	100%;
	}
	.trend-position{
		display					:	none;
	}
}