@charset "utf-8";

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 pageNation 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.pageNation { font-size: 0; line-height: 0; text-align: center; margin-top: 80px; }
.pageNation a,
.pageNation span { display: inline-block; font-size: 2rem; line-height: 4.8rem; color: #666666; }
.pageNation a { text-decoration: none; }
.pageNation a:not(.next,.prev),
.pageNation .current { width: 50px; border: solid 1px #666666; }
.pageNation a:not(.next,.prev),
.pageNation .current,
.pageNation span { margin-right: 7px; margin-left: 7px; }
.pageNation a.prev,
.pageNation a.next { position: relative; }
.pageNation a.prev { padding-left: 16px; margin-right: 7px; }
.pageNation a.next { padding-right: 16px; margin-left: 7px; }
.pageNation a.prev::before,
.pageNation a.next::before { position: absolute; top: 0; bottom: 0; display: block; width: 14px; height: 14px; border: solid #666666; border-width: 0 2px 2px 0; content: ""; margin-top: auto; margin-bottom: auto; }
.pageNation a.prev::before { left: 0; transform: rotate(135deg); }
.pageNation a.next::before { right: 0; transform: rotate(-45deg); }
.pageNation .current { background-color: #666666; color: #ffffff; }

@media screen and (min-width: 821px) {
	.pageNation a,
	.pageNation a.prev::before,
	.pageNation a.next::before { transition: 0.2s ease; }
	.pageNation a:hover.prev,
	.pageNation a:hover.next { color: #000000; }
	.pageNation a:hover:not(.next,.prev) { background-color: #666666; color: #ffffff; }
	.pageNation a:hover.prev::before,
	.pageNation a:hover.next::before { border-color: #000000; }
}

@media screen and (max-width: 767px) {
	.pageNation { padding-bottom: 40px; margin-top: 20px; }
	.pageNation a,
	.pageNation span { font-size: 1.6rem; line-height: 3.2rem; }
	.pageNation a:not(.next,.prev),
	.pageNation .current { width: 34px; }
	.pageNation a:not(.next,.prev),
	.pageNation .current,
	.pageNation span { margin-right: 3px; margin-left: 3px; }
	.pageNation a.prev { padding-left: 12px; margin-right: 2px; }
	.pageNation a.next { padding-right: 12px; margin-left: 2px; }
	.pageNation a.prev::before,
	.pageNation a.next::before { width: 10px; height: 10px; border-width: 0 1px 1px 0; }
}





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 searchResult 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.searchResult { max-width: 1000px; margin-right: auto; margin-left: auto; }
.searchResult .search-form { overflow: hidden; width: 400px; border: solid 1px #000000; border-radius: 30px; font-size: 0; line-height: 0; margin: 0 auto 30px; }
.searchResult .search-form input[type=text] { width: calc( 100% - 78px ); height: 58px; border: 0; font-size: 2rem; line-height: 2rem; padding-right: 15px; padding-left: 15px; }
.searchResult .search-form input[type=text]::placeholder { color: #8a8a8a; font-weight: 700; }
.searchResult .search-form input[type=submit] { width: 78px; height: 58px; background: url(../images/search_icon.svg) no-repeat center center #ffffff; background-size: 30px; }
.searchResult .searchTitle { font-size: 2.6rem; line-height: 4rem; font-weight: 700; margin-bottom: 50px; }
.searchResult .searchList { border-top: solid 1px #cccccc; }
.searchResult .searchList a { overflow: hidden; display: block; border-bottom: solid 1px #cccccc; text-decoration: none; padding: 50px 0; }
.searchResult .searchList a .ListL { float: left; width: 240px; border: solid 1px #cccccc; }
.searchResult .searchList a .ListR { float: right; width: calc( 100% - 320px ); }
.searchResult .searchList a .ListR .cat { font-size: 1.6rem; line-height: 2.4rem; font-weight: 700; margin-bottom: 10px; }
.searchResult .searchList a .ListR .cat.cat-interview { color: #d60000; }
.searchResult .searchList a .ListR .cat.cat-about { color: #15a946; }
.searchResult .searchList a .ListR .cat.cat-asset { color: #15a946; }
.searchResult .searchList a .ListR .cat.cat-case { color: #194799 }
.searchResult .searchList a .ListR .cat.cat-info { color: #f39c1f; }
.searchResult .searchList a .ListR .cat.cat-advertising { color: #a49e45 }
.searchResult .searchList a .ListR .cat.cat-solution { color: #333333 }
.searchResult .searchList a .ListR .tit { overflow: hidden; display: -webkit-box; font-size: 2.2rem; line-height: 3rem; font-weight: 700; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin-bottom: 10px; }
.searchResult .searchList a .ListR .ext { overflow: hidden; display: -webkit-box; font-size: 1.8rem; line-height: 3rem; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.searchResult .searchList a .ListR .cle { display: none; }

@media screen and (max-width: 1100px) {
	.searchResult .searchList a .ListR { width: calc( 100% - 280px ); }
}

@media screen and (min-width: 821px) {
	.searchResult .searchList a { position: relative; }
	.searchResult .searchList a::before { opacity: 0; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: linear-gradient(#f1fdff 0%, #ffffff 30%); content: ""; transition: 0.2s ease; z-index: -1; }
	.searchResult .searchList a:hover::before { opacity: 1; }
}

@media screen and (max-width: 767px) {
	.searchResult { max-width: 500px; }
	.searchResult .search-form { width: 230px; border-radius: 20px; margin-bottom: 20px; }
	.searchResult .search-form input[type=text] { width: calc( 100% - 38px ); height: 38px; font-size: 1.5rem; }
	.searchResult .search-form input[type=submit] { width: 38px; height: 38px; background-image: url(../images/header_search.svg); background-size: 16px; }
	.searchResult .searchTitle { font-size: 1.8rem; line-height: 3rem; margin-bottom: 25px; }
	.searchResult .searchList a { padding: 25px 0; }
	.searchResult .searchList a .ListL { float: none; width: 240px; margin: 0 auto 20px; }
	.searchResult .searchList a .ListR { float: none; width: 100%; }
	.searchResult .searchList a .ListR .tit { font-size: 1.8rem; line-height: 2.6rem; -webkit-line-clamp: 2; }
	.searchResult .searchList a .ListR .ext { font-size: 1.6rem; line-height: 2.4rem; -webkit-line-clamp: 4; }
}