@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}
html{ font-size: 62.5%; }
body {
	margin: 0;
	padding: 0;
	background-color: #FFF;
	line-height: 1.6;
	text-align: left;
	word-break: break-all;
	font-family: "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , sans-serif;
	font-weight: 500;
	font-size: 1.6rem;
	color: #000;
}
input, textarea {
	padding: 5px 10px;
	width: 100%;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 3px;
	box-sizing: border-box;
	font-family: "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , sans-serif;
}
button, a{ outline: none; }
a{ color: #000; }
img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
ul, ol{
	margin-left: 0;
	list-style: none;
}
table{
	margin: 30px 0;
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
th, td{ border: 1px solid #ececec; }
th{ background: #f6f6f6; }

.h1_wrap, .eyecatch{ background: #ececec; }
#slider{ display: none; }
#slider.slick-initialized{ display: block; }
header .flx{ justify-content: space-between; }
#logo a{
	display: block;
	width: 250px;
	height: 70px;
	background: url(images/logo.png) 0 0 no-repeat;
	background-size: 250px 70px;
	text-indent: 200%;
	white-space: nowrap;
	overflow: hidden;
}
.eyecatch{ padding: 10px 0; }
.slick-slider{ position: relative; }
.slick-arrow{
	position: absolute;
	width: 40px;
	height: 40px;
	background: url(images/controls.png) no-repeat;
	background-size: 80px 40px;
	border: 0;
	text-indent: 200%;
	white-space: nowrap;
	overflow: hidden;
	z-index: 1;
}
.slick-prev{
	left: 10px;
	background-position: 0 0;
}
.slick-next{
	right: 10px;
	background-position: -40px 0;
}
.slick-dots{
	display: flex;
	justify-content: space-between;
}
.slick-dots li{ margin: 10px 5px 0; }
.slick-dots li img{ opacity: .4; }
.slick-dots li.slick-active img{ opacity: 1; }
.cat_tab{ border-bottom: 5px solid #f85455; }
.cat_tab li a{
	position: relative;
	display: block;
	background-repeat: no-repeat;
	text-decoration: none;
}
.cat_tab li a:after{
	position: absolute;
	content: "";
	width: 8px;
	height: 8px;
	border-top: 2px solid;
	border-right: 2px solid;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.cat_tab li.dog a{
	background-image: url(images/icon-dog.png);
	background-color: #f85455;
	border-color: #f85455;
	color: #fff;
}
.cat_tab li.cat a{ background-image: url(images/icon-cat.png); }
.ranking h2{
	background-repeat: no-repeat;
	background-size: 50px 40px;
	border-bottom: 5px solid;
}
.ranking h2.dog{
	background-image: url(images/icon-dog-ranking.png);
	color: #004f85;
}
.ranking h2.cat{
	background-image: url(images/icon-cat-ranking.png);
	color: #f31c00;
}
.ranking li a{
	position: relative;
	display: block;
	text-decoration: none; 
}
.ranking li a:before{
	position: absolute;
	content: "";
	width: 45px;
	height: 36px;
	background: url(images/sprite.png) no-repeat;
}
.ranking li strong{
	display: block;
	margin-bottom: 5px;
	text-decoration: underline;
	font-weight: normal;
}

@media screen and (min-width:641px){
	.sp{ display: none; }
	a:hover{ color: #e00000; }
	.inner{
		margin: auto;
		width: 960px;
	}
	.flx{ display: flex; }
	header .inner{ padding: 15px 0; }
	h1{
		font-weight: normal;
		font-size: 1.4rem;
	}
	.slick-arrow{
		top: 200px;
		cursor: pointer;
	}
	main{ padding: 50px 0 100px; }
	.cat_tab li a{
		padding: 10px 30px 10px 60px;
		background-position: 10px center;
		background-size: 37px 22px;
		border-top: 1px solid #ececec;
		border-right: 1px solid #ececec;
	}
	.cat_tab li a:after{
		top: 17px;
		right: 10px;
	}
	.cat_item{
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.cat_item li{
		margin: 20px 0;
		width: 16%;
		text-align: center;
	}
	.cat_item .thumb, .ranking .thumb{ margin-bottom: 10px; }
	.ranking h2{
		margin-bottom: 20px;
		padding: 10px 0 10px 60px;
		background-position: 0 0;
		font-size: 2rem;
	}
	.ranking ul{
		display: flex;
		justify-content: space-between;
	}
	.ranking li{
		margin: 0 10px;
		width: 20%;
	}
	.ranking li a{
		padding-top: 46px;
		font-size: 1.4rem;
	}
	.ranking li a:before{
		position: absolute;
		content: "";
		top: 0;
		left: 50%;
		width: 45px;
		height: 36px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.ranking li.rank1 a:before{ background-position: -72px -128px; }
	.ranking li.rank2 a:before{ background-position: -117px -128px; }
	.ranking li.rank3 a:before{ background-position: -162px -128px; }
	.ranking li.rank4 a:before{ background-position: -207px -128px; }
	.ranking li.rank5 a:before{ background-position: -252px -128px; }
	.ranking li a:hover{ color: #000; }
	.ranking li a:hover strong{ color: #e00000; }
}

@media screen and (max-width: 640px){
	.sp{ display: block; }
	h1{
		padding: 2px 5px;
		font-weight: normal;
		font-size: 1.2rem;
	}
	header .inner{ padding: 0 10px; }
	.slick-arrow{ top: 30%; }
	main{ padding: 20px 0 50px; }
	.cat_tab, .cat_item, .cat_item li a, .ranking li a{ display: flex; }
	.cat_tab li, .cat_item li{ width: 50%; }
	.cat_tab li a{
		padding: 65px 10px 5px;
		background-position: center 15px;
		background-size: 70px 42px;
		border-top: 1px solid #ececec;
		text-align: center;
	}
	.cat_item{ flex-wrap: wrap; }
	.cat_item li a{
		padding: 10px;
		border-bottom: 1px solid #dadada;
		text-decoration: none;
		line-height: 1.4;
		font-size: 3.6vw;
		align-items: center;
	}
	.cat_item li:nth-of-type(odd) a{ border-right: 1px solid #dadada; }
	.cat_tab li a:after{
		top: 50%;
		right: 10px;
		-webkit-transform: translateY(-50%) rotate(45deg);
		transform: translateY(-50%) rotate(45deg);
	}
	.cat_item li .thumb{
		flex: 0 0 60px;
		padding-right: 5px;
	}
	.ranking h2{
		margin-top: 30px;
		padding: 0 10px 10px 65px;
		background-position: 5px 3px;
		line-height: 1.3;
		font-size: 2rem;
	}
	.ranking li a{
		padding:  15px 10px 15px 40px;
		border-bottom: 1px solid #dadada;
		font-size: 3.4vw;
	}
	.ranking li a:before{
		top: 50%;
		left: 5px;
		width: 30px;
		height: 24px;
		background-size: 341px auto;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.ranking li.rank1 a:before{ background-position: -48px -85px; }
	.ranking li.rank2 a:before{ background-position: -78px -85px; }
	.ranking li.rank3 a:before{ background-position: -108px -85px; }
	.ranking li.rank4 a:before{ background-position: -138px -85px; }
	.ranking li.rank5 a:before{ background-position: -168px -85px; }
	.ranking li .thumb{
		flex: 0 0 80px;
		padding-right: 10px;
	}
	.ranking li strong{ font-size: 4.6vw; }
}

.mb10{ margin-bottom: 10px!important; }
.mb30{ margin-bottom: 30px!important; }
.p0{ padding: 0!important; }
.pl15{ padding-left: 15px!important; }
.pr15{ padding-right: 15px!important; }
.al-c{ text-align: center; }
.hide{ display: none; }

/* コンテンツ */
.column h2, .refine h2{
	text-align: center;
	font-weight: normal;
}
.btn_more{
	margin: 20px 0;
	text-align: center;
}
.btn_more a{
	display: inline-block;
	padding: 15px;
	border: 1px solid #000;
	border-radius: 5px;
	text-decoration: none;
}
#searchform .tab_list{ font-size: 0; }
#searchform .tab_list li{
	position: relative;
	display: inline-block;
	margin-bottom: -2px;
	border: 2px solid;
	border-radius: 5px 5px 0 0;
}
#searchform .tab_list li:before{
	position: absolute;
	content: "";
	width: 36px;
	height: 36px;
	background: url(images/sprite.png) no-repeat;
	background-size: 140.625px auto;
}
#searchform .tab_list input[type=button]{
	background: none;
	border: 0;
	font-size: 2.4rem;
	color: #fff;
	outline: none;
	cursor: pointer;
}
#searchform .tab_list li.select input[type=button]{ color: #000; }
#searchform .tab_cnt{ border: 2px solid; }
#searchform .tab_list li.dog{
	background: #39b4c4;
	border-color: #39b4c4;
	border-bottom-color: #ff4747;
}
#searchform .tab_list li.dog:before{ background-position: 0 -59px; }
#searchform .tab_list li.dog.select:before{ background-position: 0 0; }
#searchform .tab_cnt.dog{ border-color: #39b4c4; }
#searchform .tab_list li.cat{
	background: #ff4747;
	border-color: #ff4747;
	border-bottom-color: #39b4c4;
}
#searchform .tab_list li.cat:before{ background-position: -36px -58px; }
#searchform .tab_list li.cat.select:before{ background-position: -36px 1px; }
#searchform .tab_cnt.cat{ border-color: #ff4747; }
#searchform .tab_list li.select{
	background: #fff;
	border-bottom-color: #fff;
}
#searchform h3{
	margin-bottom: 15px;
	padding: 10px;
	background: #ececec;
	border: 0;
	font-size: 1.6rem;
}
.search_item{ font-size: 0; }
.search_item label{
	position: relative;
	display: inline-block;
	margin: 0 1% 10px 0;
	border: 1px solid #ececec;
	border-radius: 5px;
	box-sizing: border-box;
	vertical-align: top;
	cursor: pointer;
}
.search_item label:before, .search_item label:after{
	position: absolute;
	content: "";
}
.search_item label:before{
	width: 10px;
	height: 10px;
	background: #ececec;
	border: 1px solid #ddd;
	border-radius: 3px;
}
.search_item label.checked:after{
	width: 3px;
	height: 8px;
	border-bottom: 3px solid #e7211a;
	border-right: 3px solid #e7211a;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.search_item label input{ display: none; }
.btn_refine{
	margin: 30px auto;
	background: #fea734;
	border-radius: 5px;
}
.btn_refine input{
	padding: 10px;
	background: none;
	border: 0;
	font-size: 1.8rem;
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
}
footer{
	padding: 30px 0;
	background: #ececec;
}
#copyright{
	text-align: center;
	font-size: 1.2rem;
}
#pagetop{
	position: fixed;
	right: 10px;
	bottom: 100px;
	padding: 5px;
	width: 48px;
	height: 48px;
	border: 1px solid #e7211a;
	border-radius: 5px;
	text-align: center;
	line-height: 1.2;
	font-size: 1.2rem;
	color: #e7211a;
}
#pagetop i{ font-size: 1.6rem; }
#pop{
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .5);
	z-index: 1;
}
.pop_wrap{
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.pop_box{
	padding-bottom: 10px;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
}
.pop_ttl{
	background: #e00000;
	border-radius: 5px 5px 0 0;
	padding: 10px;
	color: #fff;
}
.pop_box .flx, .pop_box p, .pop_box .btn_return{
	margin: 15px;
}
.pop_box .flx{
	display: flex;
	justify-content: space-between;
}
.pop_box .dog, .pop_box .cat{ width: 48%; }
.pop_box .flx .ttl span{
	position: relative;
	padding: 2px 0 5px 30px;
}
.pop_box .flx .ttl span:before{
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 25px;
	height: 20px;
	background: 0 0 no-repeat;
	background-size: 25px 20px;
}
.pop_box .flx .dog .ttl span:before{ background-image: url(images/icon-dog-ranking.png); }
.pop_box .flx .cat .ttl span:before{ background-image: url(images/icon-cat-ranking.png); }
.pop_box .flx img{ border-radius: 5px; }
.pop_box .flx .btn a{
	position: relative;
	display: block;
	margin: 10px 0;
	padding: 10px 15px 10px 10px;
	border-radius: 5px;
	text-decoration: none;
	line-height: 1.2;
	color: #fff;
}
.pop_box .flx .btn a:after, .btn_return:after{
	position: absolute;
	content: "\f054";
	top: 50%;
	right: 10px;;
	font-family: "Font Awesome 5 free";
	font-weight: 900;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.pop_box .flx .dog .btn a{ background: #39b4c4; }
.pop_box .flx .cat .btn a{ background: #ff4747; }
.pop_box p{
    position: relative;
    z-index: 0;
}
.pop_box p:after{
	position: absolute;
	content: "";
	top: 50%;
	left: 50%;
	width: 58px;
	height: 48px;
	background: url(images/sprite.png) 0 -164px no-repeat;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: -1;
}
.btn_return{
	position: relative;
	background: #e00000;
	padding: 10px;
	border-radius: 5px;
	color: #fff;
}
.pop_box .bnr{
	margin-bottom: -10px;
	border-radius: 5px;
}
.pop_close{
	display: inline-block;
	margin: 20px auto 0;
	padding: 2px 50px;
	border: 1px solid #fff;
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
}

@media screen and (min-width: 641px){
	.column, .refine{ margin: 80px 0 0; }
	.column h2, .refine h2{
		margin: 0 0 30px;
		font-size: 2.4rem;
	}
	#index .column .slick-prev{ left: 0; }
	#index .column .slick-next{ right: 0; }
	#index .column .slick-slide{
		display: inline-block;
		margin: 10px;
		padding: 5px 0;
		width: 204px;
	}
	#index .column .slick-slide a{
		display: block;
		height: 304px;
		border-radius: 5px;
		box-shadow: 0 1px 3px #ccc;
	}
	#index .column .slick-slide .thumb img{
		width: 204px;
		height: 204px;
		border-radius: 5px 5px 0 0;
		object-fit: cover;
	}
	#index .column .slick-slide .txt{ padding: 10px; }
	.btn_more a:hover{
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
		-webkit-transition: .3s;
		transition: .3s;
	}
	#searchform .tab_list li:before{
		top: 8px;
		left: 50px;
	}
	#searchform .tab_list input[type=button]{
		padding: 8px 0 5px 30px;
		width: 230px;
	}
	#searchform .tab_cnt{ padding: 20px 30px; }
	.search_item label{
		padding: 10px 3px 10px 24px;
		width: 19.2%;
		font-size: 1.4rem;
	}
	.search_item label:nth-of-type(5n){ margin-right: 0;}
	.search_item label:before{
		top: 15px;
		left: 8px;
	}
	.search_item label.checked:after{
		top: 14px;
		left: 13px;
	}
	.search_item label:hover{
		background: #f6f6f6;
		-webkit-transition: .3s;
		transition: .3s;
	}
	.btn_refine{ width: 500px; }
	.btn_refine:hover{
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
		-webkit-transition: .3s;
		transition: .3s;
	}
	footer .law{
		float: right;
		font-size: 1.2rem;
	}
	#pagetop{ cursor: pointer; }
	#pagetop:hover{
		background: #e7211a;
		color: #fff;
		-webkit-transition: .3s;
		transition: .3s;
	}
	.pop_wrap{ width: 600px; }
	.pop_box a:hover, .btn_return:hover{
		opacity: .8;
		-webkit-transition: .3s;
		transition: .3s;
	}
	.btn_return{ cursor: pointer; }
}

@media screen and (max-width:640px){
	.column, .refine{
		margin: 50px 0 0;
		padding: 0 15px;
	}
	.column h2, .refine h2{ margin-bottom: 15px; }
	#index .column section a{
		position: relative;
		display: table;
		padding: 10px 20px 10px 0;
		width: 100%;
		border-bottom: 1px solid #ececec;
		box-sizing: border-box;
		text-decoration: none;
	}
	#index .column section a:last-child{ border-bottom: 0; }
	#index .column section a:before{
		position: absolute;
		content: "\f054";
		top: 50%;
		right: 0;
		font-family: "Font Awesome 5 free";
		font-weight: 900;
		color: #e7211a;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	#index .column section .thumb, #index .column section .txt{
		display: table-cell;
		vertical-align: middle;
	}
	#index .column section .thumb{
		padding-right: 10px;
		width: 80px;
	}
	#index .column section .thumb img{
		width: 80px;
		height: 80px;
		object-fit: cover;
	}
	#index .column section a:first-child, #index .column section a:first-child .thumb,
	#index .column section a:first-child .txt{ display: block; }
	#index .column section a:first-child{ padding: 0 0 10px; }
	#index .column section a:first-child:before{
		top: auto;
		bottom: 10px;
		-webkit-transform: translateY(0);
	}
	#index .column section a:first-child .thumb{
		padding: 0 0 5px 0;
		width: 100%;
	}
	#index .column section a:first-child .thumb img{
		width: 100%;
		height: 200px;
	}
	#searchform .tab_list li{
		width: 50%;
		box-sizing: border-box;
	}
	#searchform .tab_list li:before{
		top: 5px;
		left: 10px;
	}
	#searchform .tab_list input[type=button]{
		padding: 8px 0 5px 24px;
		width: 100%;
	}
	#searchform .tab_cnt{ padding: 10px 15px; }
	.search_item label{
		padding: 10px 3px 10px 16px;
		width: 49.5%;
		font-size: 2.5vw;
	}
	.search_item label:nth-of-type(even){ margin-right: 0;}
	.search_item label:before{
		top: 13px;
		left: 3px;
	}
	.search_item label.checked:after{
		top: 11px;
		left: 6px;
	}
	#sort label{
		margin: 0 1%;
		width: 31.3333333%
	}
	footer .law{
		text-align: center;
		font-size: 1.2rem;
	}
	.pop_wrap{ width: 95%; }
    .pop_box .flx .ttl span{ font-size: 3.4vw; }
	.pop_box .flx .btn a{ font-size: 3.6vw; }
}