@charset "UTF-8";

/* outline
--------------------------------------------------*/
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 400;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Bold");
	font-weight: bold;
}
body {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica", "Segoe UI", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	line-height: 1.8;
	color: #333;
}

body p{
	font-size: 1.5rem;
}

h2{
	font-weight: bold;
	font-size: 2.2rem;
	margin-bottom: 20px;
}

@media screen and (max-width: 767px){
	h2{
		margin-bottom: 0px;
	}
}

/* --------------------------------------------------
KV
-------------------------------------------------- */
main.catTop{
	padding-top:0px;
}
main.catTop .mainvisual {
	position: inherit;
  top: 0px;
}
main.catTop .mainvisual figure {
	height: 450px;
}
.pageTitCattop{
	font-size: 5.6rem;
	top: 170px;
}
@media screen and (max-width: 767px) {
	.mainvisual{
		background-size: cover;
	}
	.pageTitCattop{
		font-size: 4.6rem;
		line-height: 1.5;
		top: 145px;
	}
}

@media screen and (max-width: 1000px) {
	.pageTitCattop .container {
	    width: calc(100% - 26px);
	}
}
@media screen and (min-width: 1001px) {
	.pageTitCattop .container {
	    width: auto;
			min-width: 1000px;
			max-width: 1250px;
	}
}
/* --------------------------------------------------
タグ検索エリア
-------------------------------------------------- */

/* struct
-------------------- */
.case_search {
	font-size: 1.5rem;
}
.case_search_inner {
	margin: 0 auto;
	padding: 40px 20px;
	box-sizing: border-box;
}

@media screen and (max-width: 767px) {
	.case_search_inner {
		width: 100%;
		min-width: 100%;
		padding: 30px 20px 0;
	}
}

@media screen and (min-width: 768px) {
	.case_search_inner {
		padding-bottom: 0;
		width: 1000px;
	}
}

@media screen and (min-width: 1001px) {
	.case_search_inner {
		padding: 40px 0 0 0;
		width: auto;
		min-width: 1000px;
		max-width: 1250px;
	}
}

/* categories
-------------------- */
.search_cat {
	display: flex;
	display: -ms-flexbox;
	padding:20px 0 10px;
	border-bottom: 1px solid #CCCCCC;
}
.search_cat_tit {
	width: 170px;
	font-weight: bold;
}
.search_cat_cnt {
	width: calc( 100% - 170px - 65px );
	overflow: hidden;
	height: 40px;
	box-sizing: border-box;
	padding-top: 1px;
	padding-right: 30px;
}
.search_cat_toggle {
	margin-top: auto;
	padding-bottom: 10px;
	width: 65px;
	font-size: 1.3rem;
	line-height: 30px;
}

.lang_en .search_cat_toggle {
	width: 75px;
}

.search_cat_toggle span{
	position: relative;
}

.search_cat_toggle span::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 17px;
	background-image: url(/-/media/image/msg/case/icon_plus.png);
	background-size: contain;
	margin-right: 5px;
	position: absolute;
	top: -1px;
	left: -21px;
}

.is-open span::before {
	background-image: url(/-/media/image/msg/case/icon_minus.png);
}

@media screen and (max-width: 767px) {
	.search_cat {
		display: block;
		padding: 13px 0;
	}
	.search_cat_tit {
		width: 100%;
		margin-bottom: 5px;
	}
	.search_cat_cnt {
		width: 100%;
		padding-right: 0px;
	}
	.search_cat_toggle,
	.lang_en .search_cat_toggle {
		width: 100%;
		line-height: inherit;
		padding-bottom: 0px;
		text-align: right;
	}
}

/* taglist
-------------------- */
.tag_list {
	overflow: hidden;
	transform: all .2s ease-in-out;
}

.is-open .tag_list {
	height: 100%;
}

.tag_list > li {
	float: left;
	display: block;
}

.tag_list > li a {
	display: block;
	margin: 0 10px 10px 0;
	height: 30px;
	padding: 0 10px;
	border: 1px solid #3B85CE;
	color: #3B85CE;
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 29px;
	box-sizing: border-box;
}

.tag_list > li a:hover {
	color: #fff;
	background: #3B85CE;
	text-decoration: none;
}

.tag_list > li.is-selected a {
	color: #fff;
	background: #3B85CE;
}

/* form
-------------------- */
.search_cat_keywords{
	margin-bottom: 40px;
}
.search_cat_keywords .search_cat_tit{
	line-height: 3.33333;
}

.search_cat_keywords .search_cat_cnt{
	height: 50px;
}

.search_cat_cnt form{
	background: #eee;
	position: relative;
}

.search_cat_cnt .search_input{
	border: none;
	height: 50px;
	width: calc(100% - 50px);
	vertical-align: middle;
	background: #eee;
	padding:0 10px;
}

.search_cat_cnt .search_input:focus{
	outline: none;
}

.search_cat_cnt .search_submit{
	width: 50px;
	height: 50px;
	background: url(/-/media/image/msg/case/icon_search.png) center no-repeat;
	background-size: 16px;
	border:none;
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
	position: absolute;
	top:0;
	right: 0;
}

.search_cat_cnt .search_submit:focus{
	outline: none;
}

@media screen and (max-width: 767px){
	.search_cat_keywords .search_cat_tit{
		line-height: inherit;
	}

	.search_cat_keywords{
		padding-bottom: 20px;
	}
}

/* --------------------------------------------------
検索結果エリア（件数とタグ）
-------------------------------------------------- */

/* struct
-------------------- */
.case_result {
	font-size: 1.5rem;
}
.case_result_inner {
	margin: 0 auto;
	padding: 40px 20px;
	box-sizing: border-box;
}

@media screen and (max-width: 767px) {
	.case_result_inner {
		width: 100%;
		min-width: 100%;
		padding: 0 20px 10px;
	}
}

@media screen and (min-width: 768px) {
	.case_result_inner {
		padding-bottom: 0;
		width: 1000px;
	}
}

@media screen and (min-width: 1001px) {
	.case_result_inner {
		padding: 0;
		width: auto;
		min-width: 1000px;
		max-width: 1250px;
	}
}


/* search_cat_chcKeywords
-------------------- */
.search_cat_chcKeywords{
	border: none;
	display: flex;
	padding: 10px 0 10px 0;
}

.search_cat_chcKeywords .search_cat_tag > li {
	display: inline-block;
	margin: 0 10px 0 0;
	padding: 0;
	border: 1px solid #3B85CE;
	background: #3B85CE;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	line-height: 1;
}

.search_cat_chcKeywords .search_cat_tag span {
	display: inline-block;
	padding: 8px 0 8px 10px;
}

.search_cat_chcKeywords .search_cat_tag a {
	position: relative;
	display: inline-block;
	padding: 8px 10px 7px 10px;
	color: inherit;
	font-size: 0;
	vertical-align: bottom;
}

.search_cat_chcKeywords .search_cat_tag a::before {
	display: inline-block;
	content: '';
	width: 14px;
	height: 14px;
	border-bottom: 1px solid #3B85CE;
	background: url(/-/media/image/msg/case/icon_close.png) no-repeat;
	background-size: 14px auto;
}

.search_cat_chcKeywords .search_cat_tag a:hover {
	cursor: pointer;
}

.search_cat_chcKeywords .search_cat_tag a:hover::before {
	border-bottom-color: #fff;
}

.search_cat_chcKeywords .search_cat_result{
	text-align: right;
	font-weight: bold;
	width: 65px;
}

@media screen and (max-width: 767px){
	.search_cat_chcKeywords {
		flex-wrap:wrap;
	}

	.search_cat_chcKeywords .search_cat_tit{
		width: 80%;
	}

	.search_cat_chcKeywords .search_cat_result{
		margin-top: 0px;
		width: 20%;
	}
}


/* --------------------------------------------------
検索結果エリア（リスト）
-------------------------------------------------- */
/* list
-------------------- */
.case_list{
	padding: 20px 0 50px;
}

.case_list .list {
	padding: 0 20px;
	box-sizing: border-box;
	}

.case_list .list a{
	margin: 0 30px 50px 0;
	width: calc((100% - 60px) / 3);
	display: flex;
	flex-direction: column;
}

.case_list .list a:nth-child(3n){
	margin: 0 0 50px 0;
}

.case_list .list a:hover {
	background: #fff;
	color:inherit;
	text-decoration: none;
}

.case_list .list a:hover figure:after {
	opacity: 0;
}

.case_list .list a div{
	padding: 20px 0 0;
}

.case_list .list a div h3{
	margin-bottom: 10px;
}

ul.tagList{
	margin:10px 0 20px;
}

ul.tagList li{
	margin: 0 10px 10px 0;
	padding: 7px 10px;
	border: 1px solid #3B85CE;
	background: #3B85CE;
	color: #fff;
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 1;
}

.case_list a .btn{
	text-align: center;
	border: 1px solid #000;
	padding:10px 0;
	position: relative;
	margin-top: auto;
}

.case_list a:hover .btn{
	border: 1px solid #3B85CE;
	color: #3B85CE;
}

.case_list a .btn:after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 18px;
    right: 13px;
}

.case_list a:hover .btn:after {
    border-top: 2px solid #3B85CE;
    border-right: 2px solid #3B85CE;
}

@media screen and (min-width: 1001px) {
	.case_list .list {
		padding: 0;
		width: auto;
		min-width: 1000px;
		max-width: 1250px;
	}
}

@media screen and (max-width: 767px) {
	.case_list{
		padding-top: 0px;
	}

	.case_list .list a{
		width: 100%;
		margin:0 0 40px;
	}

	.case_list .list a figure{
		width: 100%;
	}

	.case_list .list a div h3{
		float: none;
		width: 100%;
		font-size: 1.7rem;
		padding: 0;
	}
}

/* pager
-------------------- */
.pager{
	margin-top: 30px;
	display: flex;
	justify-content: center;
}

.pager li{
	width: 50px;
	border-top: 1px solid #3B85CE;
	border-bottom: 1px solid #3B85CE;
}

.pager li:last-child{
	border-right: 1px solid #3B85CE;
}

.pager li a {
	border-left: 1px solid #3B85CE;
	border-right: none;
	border-top: none;
	border-bottom: none;
	line-height: 50px;
	width: 50px;
	margin: 0px;
	background: #fff;
	color: #3B85CE;
	font-size: 1.5rem;
}

.pager li a.current, .pager li a:hover {
  background: #3B85CE;
  color: #fff;
}

.pager li a.prev, .pager li a.next{
	border-left: 1px solid #3B85CE;
}

.pager li a.prev:after {
	width: 8px;
	height: 8px;
	border-top: 2px solid #3B85CE;
	border-right: 2px solid #3B85CE;
	top: 20px;
	left: 20px;
}

.pager li a:hover.prev:after {
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}

.pager li a.next:after {
	width: 8px;
	height: 8px;
	border-top: 2px solid #3B85CE;
	border-right: 2px solid #3B85CE;
	top: 20px;
	left: 18px;
}

.pager li a:hover.next:after {
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}

.pager li a.prev.off, .pager li a.next.off {
    opacity: 1;
}