@charset "UTF-8";

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Report Archive
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#reportArticle .category span {
	background: #ccb69c;
	display: inline-block;
}
#reportArticle #content {
	text-align: left;
}
#reportArticle #content img {
	max-width: 100%;
}
#reportArticle #comment {
	background: no-repeat center center;
	background-size: cover;
}
#reportArticle #comment h2 span {
	display: block;
}
#reportArticle #comment .en {
	color: #fff;
}
#reportArticle #comment > div {
	text-align: left;
}
@media (min-width: 1000px){
	.article #main {
		margin-top: 70px;
	}
	.article .wrapper {
		padding-top: 0;
	}
	#reportArticle {
		max-width: 1000px;
		margin: 0 auto;
		padding-bottom: 100px;
	}
	#reportArticle #mainVis {
		margin-bottom: 50px;
	}
	#reportArticle #name {
		font-size: 16px;
		margin-bottom: 24px;
	}
	#reportArticle h1 {
		font-size: 30px;
		margin-bottom: 25px;
	}
	#reportArticle .date {
		font-size: 12px;
		margin-bottom: 10px;
	}
	#reportArticle .category span {
		font-size: 12px;
		padding: 0 25px;
	}
	#reportArticle #content {
		font-size: 16px;
		line-height: 30px;
		max-width: 800px;
		margin: 50px auto 0;
	}
	#reportArticle #comment {
		margin-top: 45px;
		padding: 20px 20px 55px;
		background-image: url(../images/report/bg_comment.gif);
	}
	#reportArticle #comment h2 .en {
		font-size: 34px;
	}
	#reportArticle #comment h2 .ja {
		font-size: 14px;
		font-weight: bold;
	}
	#reportArticle #comment > div {
		font-size: 16px;
		line-height: 30px;
		margin: 25px auto 0;
		max-width: 690px;
	}
}
@media (max-width: 999px){
	.article #main {
		padding-top: 50px;
	}
	body.article .blog_ttl {
		padding-bottom: 55px;
	}
	body.article .breadcrumbs {
		margin-top: 0;
		padding-bottom: 15px;
	}
	body.article .breadcrumbs_list {
		margin-bottom: 0;
	}
	.article .wrapper {
		padding-top: 0;
	}
	#reportArticle #mainVis {
		margin-bottom: 19px;
	}
	#reportArticle #name {
		font-size: 12px;
		margin-bottom: 19px;
	}
	#reportArticle h1 {
		font-size: 17px;
		font-weight: bold;
		line-height: 25px;
		margin-bottom: 22px;
	}
	#reportArticle .date {
		font-size: 12px;
	}
	#reportArticle .category span {
		font-size: 12px;
		padding: 5px 38px;
	}
	#reportArticle #content {
		font-size: 12px;
		line-height: 20px;
		margin-top: 41px;
		padding: 0 22px;
	}
	#reportArticle #comment {
		margin-top: 35px;
		padding: 25px 22px 50px;
		background-image: url(../images/report/sp/bg_comment.gif);
	}
	#reportArticle #comment h2 .en {
		font-size: 30px;
	}
	#reportArticle #comment h2 .ja {
		font-size: 14px;
	}
	#reportArticle #comment > div {
		font-size: 12px;
		line-height: 20px;
		margin-top: 25px;
	}
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Report Article
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#catList {
	background: #ccb69c;
}
#catList > p {
	cursor: pointer;
}
#catList > p span {
	height: 0;
	background: #000;
	overflow: hidden;
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
#catList > p span::before,
#catList > p span::after {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	content: "";
	margin: auto;
	display: block;
	position: absolute;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}
#catList > p span::before {
	height: 0;
	width: 100%;
}
#catList > p span::after {
	width: 0;
	height: 0;
	transition-duration: .3s;
	transition-property: height;
}
#catList > p.open span::after {
	height: 100%;
}
#catList > ul {
	text-align: left;
}
#catList > ul > li > p,
#catList > ul > li li {
	border-bottom: 1px solid #333;
}
#catList > ul > li li a::before {
	content: "―";
	margin-right: 0.2em;
	display: inline-block;
}
#catList a {
	display: block;
}
#reportList #postList {
	display: flex;
	flex-wrap: wrap;
}
#reportList #postList a {
	color: #fff;
	display: flex;
	background: #333;
	position: relative;
	flex-direction: column;
}
#reportList #postList .new {
	top: 0;
	left: 0;
	z-index: 1;
	display: block;
	position: absolute;
	background: #b9c965;
}
#reportList #postList .information {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#reportList #postList .category {
	color: #333;
	background: #ccb69c;
}
#reportList #postList .title span {
	text-align: left;
	display: inline-block;
}
#reportList #postList .more::after {
	content: "";
	width: 26px;
	height: 4px;
	margin-left: 10px;
	display: inline-block;
	background: url(../images/report/arrow_more.png) no-repeat center center;
	background-size: 100% 100%;
}
@media (min-width: 1000px){
	#inner_mainVis {
		padding-top: 170px;
		box-sizing: border-box;
		background-image: url(../images/report/main_visual.png);
	}
	#catList {
		margin-top: 12px;
		padding-bottom: 20px;
	}
	#catList > p {
		font-size: 18px;
		font-weight: bold;
		padding-top: 20px;
	}
	#catList > p span {
		width: 17px;
		padding-top: 17px;
		margin-top: -5px;
		margin-right: 0.7em;
	}
	#catList > ul {
		width: 1000px;
		display: flex;
		margin: 0 auto;
		font-size: 14px;
		max-width: 100%;
		flex-wrap: wrap;
		padding-bottom: 20px;
	}
	#catList > ul > li {
		width: 230px;
		margin-top: 20px;
		margin-right: 26px;
	}
	#catList > ul > li:nth-child(4n) {
		margin-right: 0;
	}
	#catList > ul > li li a {
		padding-left: 1em;
	}
	#catList a {
		padding: 10px 0 9px;
	}
	#catList a:hover {
		color: #fff;
	}
	#reportList {
		margin: 0 auto;
		padding: 50px 0;
		max-width: 1000px;
	}
	#reportList > h2 {
		font-size: 30px;
		margin-bottom: 45px;
	}
	#reportList #postList > li {
		width: calc(25% - 20.25px);
		margin-right: 27px;
		margin-bottom: 27px;
	}
	#reportList #postList > li:nth-child(4n) {
		margin-right: 0;
	}
	#reportList #postList > li a {
		height: 460px;
	}
	#reportList #postList figure,
	#reportList #postList .information {
		height: 50%;
	}
	#reportList #postList .information {
		padding: 15px;
		box-sizing: border-box;
	}
	#reportList #postList .new {
		width: 50px;
		height: 50px;
		line-height: 50px;
	}
	#reportList #postList .date {
		font-size: 12px;
		text-align: left;
		margin-bottom: 8px;
	}
	#reportList #postList .category {
		font-size: 12px;
		line-height: 19px;
		margin-bottom: 20px;
	}
	#reportList #postList .name {
		font-size: 14px;
		margin-bottom: 12px;
	}
	#reportList #postList .title {
		font-size: 16px;
		line-height: 26px;
	}
	#reportList #postList .more {
		font-size: 14px;
		text-align: right;
	}
}
@media (max-width: 999px){
	.archive .breadcrumbs_list {
		margin-bottom: 17px;
	}
	#catList {
		padding: 0 40px 24px;
	}
	#catList > p {
		font-size: 15px;
		padding-top: 24px;
	}
	#catList > p span {
		width: 13px;
		padding-top: 13px;
		margin-top: -4px;
		margin-right: 0.5em;
	}
	#catList > ul {
		font-size: 13px;
		padding-top: 5px;
	}
	#catList > ul > li {
		display: flex;
		margin-top: 5px;
		justify-content: space-between;
	}
	#catList > ul > li p {
		box-sizing: border-box;
		width: calc((100% - 6em) - 13px);
	}
	#catList > ul > li ul {
		width: 6em;
	}
	#catList a {
		padding-top: 11px;
		padding-bottom: 9px;
	}
	#catList > ul > li ul a {
		padding-left: 0.5em;
	}
	#reportList {
		padding: 25px 20px 0;
	}
	#reportList > h2 {
		font-size: 20px;
		margin-bottom: 17px;
	}
	#reportList #postList {
		justify-content: space-between;
	}
	#reportList #postList li {
		margin-bottom: 8px;
		width: calc(50% - 4px);
	}
	#reportList #postList li:nth-child() {
		margin-right: 8px;
	}
	#reportList #postList li .new {
		width: 33.5px;
		height: 33.5px;
		font-size: 12px;
		line-height: 33.5px;
	}
	#reportList #postList li .information {
		height: 214px;
		box-sizing: border-box;
		padding: 14px 11px 16px;
	}
	#reportList #postList li .date {
		font-size: 11px;
		text-align: left;
		margin-bottom: 6px;
	}
	#reportList #postList li .category {
		font-size: 10px;
		line-height: 25px;
		margin-bottom: 15px;
	}
	#reportList #postList li .name {
		font-size: 12px;
		margin-bottom: 15px;
	}
	#reportList #postList li .title {
		font-size: 13px;
		line-height: 20px;
	}
	#reportList #postList li .more {
		font-size: 12px;
		text-align: right;
	}
}