/* Theme Name: peppy/value  */

@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; }
table{
	margin: 30px 0;
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
th, td{ border: 1px solid #ececec; }
th{ background: #f6f6f6; }

/* ------------------------------------------------
 header
------------------------------------------------ */
header .inner{ display: table; }
#logo, .header_menu{
	display: table-cell;
	vertical-align: middle;
}
#logo{ font-size: 3rem; }
#logo a{
	display: block;
	width: 250px;
	height: 70px;
	background: url(images/logo.png) 0 center no-repeat;
	background-size: 250px 70px;
	text-indent: 110%;
	white-space: nowrap;
	overflow: hidden;
}
.header_menu{
	text-align: right;
	font-size: 0;
}
.header_menu li{ display: inline-block; }
.header_menu li a{
	position: relative;
	display: block;
	text-decoration: none;
}
.header_menu li a:before{
	position: absolute;
	content: "";
	top: 0;
	background: url(images/sprite.png) no-repeat;
}
.header_menu li.dog a:before{ background-position: 0 0; }

/* ------------------------------------------------
 breadcrumbs
------------------------------------------------ */
#breadcrumbs{ padding: 10px 0; }
#breadcrumbs li{
	display: inline-block;
	vertical-align: top;
	font-size: 1.2rem;
}
#breadcrumbs li:after{
	content: "＞";
	margin-left: 5px;
}
#breadcrumbs li:last-child:after{ content: ""; }

/* ------------------------------------------------
 main
------------------------------------------------ */
h2, h3, h4{ line-height: 1.4; }
h2{
	margin: 50px 0;
	border-bottom: 5px solid #ececec;
	font-size: 2.4rem;
}
h3{
	margin: 30px 0;
	padding-left: 10px;
	border-left: 5px solid #e7211a;
	font-size: 2rem;
}
h4{
	margin: 30px 0;
	font-size: 2rem;
}
main p{ margin: 20px 0; }

/* ------------------------------------------------
 footer
------------------------------------------------ */
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; }

/* min-width: 641px 
------------------------------------------------ */
@media screen and (min-width: 641px){
	a:hover{ text-decoration: none; }
	a:hover img{
		opacity: .7;
		-webkit-transition: .3s;
		transition: .3s;
	}
	th, td{
		padding: 10px 15px;
		font-size: 1.4rem;
	}
	.inner{
		margin: auto;
		width: 1200px;
	}
	header{ height: 80px; }
	header a:hover{ opacity: .7; }
	#logo{
		padding: 15px 0;
		width: 224px;
		height: 30px;
	}
	.header_menu li{ font-size: 1.6rem; }
	.header_menu li a{ padding: 10px 20px 10px 58px; }
	.header_menu li a:before{
		left: 0;
		width: 48px;
		height: 48px;
		background-size: 187.5px auto;
	}
	.header_menu li.cat a:before{ background-position: -48px 1px; }
	main h1{
		margin-bottom: 20px;
		font-size: 2.4rem;
	}
	footer .law{
		float: right;
		font-size: 1.2rem;
	}
	#pagetop{ cursor: pointer; }
	#pagetop:hover{
		background: #e7211a;
		color: #fff;
		-webkit-transition: .3s;
		transition: .3s;
	}
}

/* max-width: 640px
------------------------------------------------ */
@media screen and (max-width: 640px){
	th,td{ padding: 10px 5px; }
	header{ height: 50px; }
	header .inner{ width: 100%; }
	#logo{
		padding: 0 10px;
		width: 150px;
		height: 20px;
	}
	#logo a{ background-size: 150px 20px; }
	.header_menu li{
		text-align: center;
		font-size: 3vw;
	}
	.header_menu li a{
		padding: 30px 0 0;
		width: 50px;
		height: 50px;
		box-sizing: border-box;
	}
	.header_menu li a:before{
		top: 5px;
		left: 50%;
		width: 24px;
		height: 24px;
		background-size: 93.75px auto;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.header_menu li.cat a:before{ background-position: -24px 1px; }
	#breadcrumbs{
		margin-bottom: 20px;
		padding: 5px 10px 0 10px;
		background: #ececec;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		overflow-scrolling: touch;
		white-space: nowrap;
	}
	main{ padding: 0 15px 50px; }
	main h1{
		margin-bottom: 10px;
		line-height: 1.4;
		font-size: 6vw;
	}
	footer .law{
		text-align: center;
		font-size: 1.2rem;
	}
}

/* ------------------------------------------------
 index
------------------------------------------------ */
#slider{ position: relative; }
.slick-slider button{
	background: none;
	border: 0;
	text-indent: 110%;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	-webkit-appearance: none;
}
.slick-slider .slick-prev, .slick-slider .slick-next{
	position: absolute;
	border-top: 5px solid #000;
	border-right: 5px solid #000;
	z-index: 1;
}
.slick-slider .slick-prev{
	-webkit-transform: rotate(225deg);
	transform: rotate(225deg);
}
.slick-slider .slick-next{
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#slider .slick-slide{ margin: 0 20px; }
#slider .slick-dots{
	position: absolute;
	left: 50%;
	bottom: -30px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#slider .slick-dots li{
	position: relative;
	display: inline-block;
	margin: 0 5px;
}
#slider .slick-dots li:before{
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 16px;
	height: 16px;
	background: url(images/sprite.png) 1px -54px no-repeat;
	background-size: 222px auto;
}
#slider .slick-dots li.slick-active:before{ background-position: -16px -54px; }
#slider .slick-dots li button{
	position: relative;
	width: 16px;
	height: 16px;
}
#index article{ position: relative; }
#index article:before{
	position: absolute;
	content: "";
	bottom: 0;
	left: 50%;
	background: url(images/sprite.png) no-repeat;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#index h2{
	border-bottom: 0;
	text-align: center;
	font-weight: normal;
}
#index .ranking h2 span{
	position: relative;
	font-size: 4.8rem;
	color: #e7211a;
}
#index .ranking h2 span:before{
	position: absolute;
	content: "";
	left: 50%;
	width: 200px;
	height: 2px;
	background: #ececec;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#index .ranking h2 span:after{
	position: absolute;
	content: "";
	left: 0;
	background: url(images/sprite.png) no-repeat;
}
#index li a{ text-decoration: none; }
#index li .thumb{ margin-bottom: 5px; }
#index li .thumb img{ object-fit: cover; }
#index .ranking li{
	position: relative;
	padding-top: 46px;
}
#index .ranking li:before{
	position: absolute;
	content: "";
	top: 0;
	left: 50%;
	width: 45px;
	height: 36px;
	background: url(images/sprite.png) no-repeat;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#index .ranking li.rank1:before{ background-position: -72px -128px; }
#index .ranking li.rank2:before{ background-position: -117px -128px; }
#index .ranking li.rank3:before{ background-position: -162px -128px; }
#index .ranking li.rank4:before{ background-position: -207px -128px; }
#index .ranking li.rank5:before{ background-position: -252px -128px; }
#index .ranking li .price{ color: #e7211a; }
#index .ranking li .price span{
	font-size: .8em;
	color: #000;
}
#index .category .dog_list, #index .category .cat_list{ border-radius: 5px; }
#index .category .dog_list{ border: 2px solid #39b4c4; }
#index .category .cat_list{ border: 2px solid #ff4747; }
#index .category h3{
	margin: 20px 0;
	border-left: 0;
	text-align: center;
	font-weight: normal;
	font-size: 2.4rem;
}
#index .category h3 span{
	position: relative;
	padding-left: 46px;
}
#index .category h3 span:before{
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 36px;
	height: 36px;
	background: url(images/sprite.png) no-repeat;
	background-size: 140.625px auto;
}
#index .category .dog_list h3 span:before{ background-position: 0 0; }
#index .category .cat_list h3 span:before{ background-position: -36px 1px; }
#index .category li{ width: 50%; }
#index .category li a{ padding: 5px 10px 5px 0; }
#index .category li .tbl_l{ padding-right: 10px; }
#index .category li .tbl_l img{
	border-radius: 100%;
	object-fit: cover;
}
.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;
}
#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{
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
}
.pop_box .wait{
	font-weight: bold;
	font-size: 2.4rem;
	color: #e7211a;
}
.pop_box .dog, .pop_box .cat{ margin: 20px 0; }
.pop_box .ttl span{
	position: relative;
	padding-left: 16px;
	font-weight: bold;
}
.pop_box .ttl span:before{
	position: absolute;
	content: "";
	top: -10px;
	left: 0;
	width: 36px;
	height: 36px;
	background: url(images/sprite.png) no-repeat;
	background-size: 140.625px auto;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);	
}
.pop_box .btn a{
	position: relative;
	display: block;
	padding: 10px;
	border-radius: 5px;
	text-decoration: none;
	font-size: 1.8rem;
	color: #fff;
}
.pop_box .btn a:before{
	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 .dog span:before{ background-position: -72px 0; }
.pop_box .cat span:before{ background-position: -109.125px 0; }
.pop_box .dog .btn a{ background: #34b4c4; }
.pop_box .cat .btn a{ background: #ff4747; }
.pop_close{
	display: inline-block;
	margin: 20px auto 0;
	padding: 2px 50px;
	border: 1px solid #fff;
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
}

/* min-width: 641px 
------------------------------------------------ */
@media screen and (min-width: 641px){
	#slider{
		margin-bottom: 100px;
		padding: 30px 0;
		background: #eee;
	}
	#slider .slick-prev{ right: 90%; }
	#slider .slick-next{ left: 90%; }
	.slick-slider .slick-prev, .slick-slider .slick-next{
		top: 50%;
		width: 36px;
		height: 36px;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.slick-slider .slick-prev{
		-webkit-transform: rotate(225deg);
		transform: rotate(225deg);
	}
	.slick-slider .slick-next{
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#index article{
		margin: 50px 0;
		padding: 50px 0 100px;
	}
	#index article:before{
		width: 300px;
		height: 48px;
		background-position: 0 -164px;
	}
	#index h2{
		margin: 0 0 50px;
		font-size: 3.6rem;
	}
	#index .ranking h2{ font-size: 2.4rem; }
	#index .ranking h2 span{
		padding-left: 58px;
		color: #e7211a;
	}
	#index .ranking h2 span:before{ bottom: 6px; }
	#index .ranking h2 span:after{
		top: 0;
		width: 64px;
		height: 64px;
		background-size: 250px auto;
	}
	#index .ranking h2.dog span:after{ background-position: -128px 2px; }
	#index .ranking h2.cat span:after{ background-position: -194px 0; }
	#index ul{ font-size : 0; }
	#index li{
		display: inline-block;
		vertical-align: top;
		font-size: 1.6rem;
	}
	#index li a:hover{ text-decoration: underline; }
	#index .ranking li{
		margin-right: 20px;
		width: 224px;
	}
	#index .ranking li:last-child{ margin-right: 0; }
	#index .ranking li .thumb img{
		width: 224px;
		height: 224px;
	}
	#index .category .wrap{ font-size: 0; }
	#index .category .dog_list, #index .category .cat_list{
		display: inline-block;
		margin-right: 40px;
		padding: 20px;
		width: 580px;
		box-sizing: border-box;
		vertical-align: top;
	}
	#index .category .cat_list{ margin-right: 0; }
	#index .category li .tbl_l{ width: 64px; }
	#index .category li .tbl_l img{
		width: 64px;
		height: 64px;
	}
	#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;
	}
	.pop_box{ padding: 20px 30px; }
}

/* max-width: 640px
------------------------------------------------ */
@media screen and (max-width: 640px){
	#slider{ margin-bottom: 50px; }
	#slider .slick-prev{ left: 20px; }
	#slider .slick-next{ right: 20px; }
	.slick-slider .slick-prev, .slick-slider .slick-next{
		top: 36%;
		width: 24px;
		height: 24px;
	}
	#slider img{ width: 100%; }
	#index article{
		margin: 50px 0;
		padding-bottom: 60px;
	}
	#index article:before{
		width: 150px;
		height: 24px;
		background-position: 0 -80px;
		background-size: 250px auto;
	}
	#index h2{
		margin-bottom: 20px;
		font-size: 7vw;
	}
	#index .ranking .slick-prev{ left: 0; }
	#index .ranking .slick-next{ right: 0; }
	#index .ranking h2 span{
		padding-left: 36px;
		font-size: 6.5vw;
	}
	#index .ranking h2 span:before{ bottom: 0; }
	#index .ranking h2 span:after{
		width: 36px;
		height: 36px;
		background-size: 140.625px auto;
	}
	#index .ranking h2.dog span:after{ background-position: -72px 1px; }
	#index .ranking h2.cat span:after{ background-position: -108px 1px; }
	#index .ranking .slick-slide{ margin: 0 5px; }
	#index .category .dog_list{ margin-bottom: 30px; }
	#index .category ul{
		padding: 0 10px 10px;
		font-size: 0;
	}
	#index .category li{
		display: inline-block;
		line-height: 1.4;
		font-size: 1.4rem;
	}
	#index .category li .tbl_l{ width: 48px; }
	#index .category li .tbl_l img{
		width: 48px;
		height: 48px;
	}
	#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;
	}
	.pop_wrap{ width: 90%; }
	.pop_box{ padding: 15px; }
}

/* ------------------------------------------------
 search
------------------------------------------------ */
#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;
}
#sort{
	margin: 20px 0;
	text-align: right;
	font-size: 0;
}
#sort label{
	position: relative;
	display: inline-block;
	padding: 8px 10px;
	border: 1px solid #ececec;
	border-radius: 5px;
	box-sizing: border-box;
	text-align: left;
	font-size: 1.3rem;
	cursor: pointer;
}
#sort label span{
	float: right;
	margin-top: 2px;
	font-size: 1rem;
	color: #e7211a;
}
#sort label input{ display: none; }

/* min-width: 641px 
------------------------------------------------ */
@media screen and (min-width: 641px){
	#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;
	}
	#sort label{
		margin-left: 5px;
		width: 120px;
	}
	#sort label:hover{ border-color: #e7211a; }
}

/* max-width: 640px
------------------------------------------------ */
@media screen and (max-width: 640px){
	#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%
	}
}

/* ------------------------------------------------
 single
------------------------------------------------ */
#item .price{
	text-align: right;
	color: #e7211a;
}
#item .price span{ color: #000; }
#item .variation{
	margin: 20px 0;
	font-size: 0;
}
#item .variation li{
	display: inline-block;
	margin: 0 2% 10px 0;
	width: 18.4%;
	border: 5px solid #ececec;
	box-sizing: border-box;
}
#item .variation li:nth-of-type(5n){ margin-right: 0; }
#item .info{ font-size: 1.4rem; }
#item .spec th, #item .spec td{ text-align: center; }
.btn_cv a{
	position: relative;
	display: block;
	background: #31bc00;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	color: #fff;
}
.btn_cv a:before{
	position: absolute;
	content: "\f054";
	top: 50%;
	right: 10px;
	font-family: "Font Awesome 5 free";
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
#item .relate ul{ font-size: 0; }
#item .relate li{
	display: inline-block;
	vertical-align: top;
}
#item .category ul{
	border-radius: 5px;
	font-size: 0;
}
#item .category h2{ position: relative; }
#item .category h2:before{
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	background: url(images/sprite.png) no-repeat;
}
#item .category.dog ul{ border: 2px solid #39b4c4; }
#item .category.cat ul{ border: 2px solid #ff4747; }
#item .category li .tbl_l{
	padding-right: 10px;
	width: 64px;
}
#item .category li .tbl_l img{
	width: 64px;
	height: 64px;
	border-radius: 100%;
	object-fit: cover;
}
#single img{
	display: block;
	margin: auto;
}
#single .eyecatch img{
	max-height: 400px;
	object-fit: cover;
}
#single .osusume{
	position: relative;
	margin: 30px 0;
	border: 2px solid #e7211a;
	border-radius: 5px;
	box-shadow: 0 1px 3px #ccc;
}
#single .osusume a{ text-decoration: none; }
#single .osusume .ttl{
	position: absolute;
	display: inline-block;
	background: #e7211a;
	top: 8px;
	left: -5px;
	padding: 5px 15px;
	font-size: 1.4rem;
	color: #fff;
	z-index: 1;
}
#single .osusume .ttl:before{
	position: absolute;
	content: "";
	bottom: 0;
	right: 0;
	border: 5px solid #fff;
	border-top-color: #ff4747;
	border-left-color: #ff4747;
}
#single .osusume a{ padding: 50px 10px 10px; }
#single .osusume .tbl_l{
	padding-right: 15px;
	width: 100px;
}
#single .osusume .tbl_r b{
	background: -webkit-linear-gradient(transparent 60%, #ff0 60%);
	background: linear-gradient(transparent 60%, #ff0 60%);
	font-size: 1.4rem;
}
#single .osusume .btn{ text-align: right; }
#single .osusume .btn span{
	display: inline-block;
	padding: 5px 10px;
	background: #e7211a;
	border-radius: 5px;
	font-size: 1.4rem;
	color: #fff;
}
#single .relate{ background: #f6f6f6; }
#single .relate h2{ margin: 0; }
#single .relate li{ border-bottom: 1px solid #ececec; }
#single .relate li:last-child{ border-bottom: 0; }
#single .relate li a{
	padding: 10px 0;
	text-decoration: none;
}
#single .wpcf7-submit{
	padding: 20px;
	background: #fea734;
	border: 0;
	border-radius: 5px;
	font-weight: bold;
	font-size: 1.8rem;
	color: #fff;
}

/* min-width: 641px 
------------------------------------------------ */
@media screen and (min-width: 641px){
	#item .detail{
		display: table;
		width: 100%;
	}
	#item .detail .image, #item .detail .txt{
		display: table-cell;
		vertical-align: top;
	}
	#item .detail .image{
		padding-right: 40px;
		width: 600px;
	}
	#item .price{
		margin-bottom: 20px;
		font-size: 2.4rem;
	}
	#item .price span{ font-size: 1.6rem; }
	#item .variation li{ cursor: pointer; }
	.btn_cv a{
		padding: 20px;
		font-size: 2rem;
	}
	.btn_cv a:hover{
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
		-webkit-transition: .3s;
		transition: .3s;
	}
	#item .relate, #item .category{ margin: 100px 0; }
	#item .relate li{
		margin-right: 25px;
		width: 128px;
		font-size: 1.4rem;
	}
	#item .relate li:nth-of-type(8n){ margin-right: 0; }
	#item .category h2{ padding-left: 46px; }
	#item .category h2:before{
		width: 36px;
		height: 36px;
		background-size: 140.625px auto;
	}
	#item .category.dog h2:before{ background-position: 0 0; }
	#item .category.cat h2:before{ background-position: -36px 1px; }
	#item .category ul{ padding: 20px; }
	#item .category li{
		display: inline-block;
		margin-right: 2%;
		width: 23.5%;
		font-size: 1.4rem;
	}
	#item .category li:nth-of-type(4n){ margin-right: 0; }
	#item .category li a{ padding: 5px 10px 5px 0; }
	#item h2{ margin: 0 0 20px; }
	#single{
		margin: 30px auto 100px;
		width: 700px;
	}
	#single .relate{
		margin: 50px 0;
		padding: 20px 30px;
	}
	#single .relate .tbl_l{
		padding-right: 15px;
		width: 100px;
	}
	#single .wpcf7-submit{ cursor: pointer; }
	#single .wpcf7-submit:hover{
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
		-webkit-transition: .3s;
		transition: .3s;
	}
}

/* max-width: 640px
------------------------------------------------ */
@media screen and (max-width: 640px){
	#item .image{ margin-bottom: 10px; }
	#item .price{
		margin: 15px 0;
		font-size: 2rem;
	}
	#item .price span{ font-size: 1.6rem; }
	.btn_cv a{ padding: 20px 20px 20px 10px; }
	#item .relate li{
		display: inline-block;
		margin: 0 2% 10px 0;
		width: 23.5%;
		font-size: 1.2rem;
	}
	#item .relate li:nth-of-type(4n){ margin-right: 0;}
	#item .relate h2, #item .category h2{ margin: 50px 0 20px; }
	#item .category ul{ padding: 10px; }
	#item .category li{
		display: inline-block;
		margin-right: 2%;
		width: 49%;
		font-size: 1.4rem;
	}
	#item .category li:nth-of-type(even){ margin-right: 0; }
	#item .category li a{
		padding: 5px 10px 5px 0;
		text-decoration: none;
	}
	#single .relate{
		margin: 30px 0;
		padding: 10px;
	}
	#single .relate .tbl_l{
		padding-right: 10px;
		width: 80px;
	}
}

/* ------------------------------------------------
 archive
------------------------------------------------ */
#category h1{
	margin-bottom: 20px;
	padding: 10px;
	border-top: 2px solid #ececec;
	border-bottom: 2px solid #ececec;
}
.item_list{ font-size: 0; }
.item_list li{
	display: inline-block;
	vertical-align: top;
}
.item_list li a, .column_list li a{
	display: block;
	text-decoration: none;
}
.item_list li .thumb{ margin-bottom: 5px; }
.item_list li .price{ color: #e7211a; }
.item_list li .price span{
	font-size: .8em;
	color: #000;
}
.pagenation{ margin: 30px 0 50px; }
.pagenation ul{
	margin-left: 0;
	list-style: none;
	text-align: center;
	font-size: 0;
}
.pagenation li{
	display: inline-block;
	margin-right: 10px;
	font-size: 1.4rem;
}
.pagenation li.active, .pagenation li a{
	width: 36px;
	height: 36px;
	border: 1px solid #000;
	border-radius: 3px;
	line-height: 36px;
}
.pagenation li.active{ background: #ececec;}
.pagenation li a{
	display: block;
	text-decoration: none;
}
#ranking{ margin-bottom: 100px; }
#ranking h1{
	text-align: center;
	font-weight: normal;
}
#ranking h1 span{
	position: relative;
	color: #e7211a;
}
#ranking h1 span:before{
	position: absolute;
	content: "";
	left: 50%;
	width: 200px;
	height: 2px;
	background: #ececec;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#ranking h1 span:after{
	position: absolute;
	content: "";
	left: 0;
	background: url(images/sprite.png) no-repeat;
}
#ranking ul{ font-size : 0; }
.ranking1, .ranking2, .ranking3,
#ranking li{
	position: relative;
	padding-top: 46px;	
}
.ranking1 a, .ranking2 a, .ranking3 a,
#ranking li a{
	display: block;
	text-decoration: none;
}
#ranking li{
	display: inline-block;
	vertical-align: top;
}
.ranking1:before, .ranking2:before, .ranking3:before,
#ranking li:before{
	position: absolute;
	content: "";
	top: 0;
	left: 50%;
	width: 45px;
	height: 36px;
	background: url(images/sprite.png) no-repeat;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.ranking1:before{ background-position: -72px -128px; }
.ranking2:before{ background-position: -117px -128px; }
.ranking3:before{ background-position: -162px -128px; }
#ranking li.rank4:before{ background-position: -207px -128px; }
#ranking li.rank5:before{ background-position: -252px -128px; }
#ranking li.rank6:before{ background-position: -297px -128px; }
#ranking li.rank7:before{ background-position: -342px -128px; }
#ranking li.rank8:before{ background-position: -387px -128px; }
#ranking li.rank9:before{ background-position: -432px -128px; }
#ranking li.rank10:before{ background-position: -432px -164px; }
.ranking2 .thumb, .rnaking3 .thumb,
#ranking li .thumb{ margin-bottom: 10px; }
.ranking1 .price, .ranking2 .price, .ranking3 .price,
#ranking li .price{ color: #e7211a; }
.ranking1 .price span, .ranking2 .price span, .ranking3 .price span,
#ranking li .price span{
	font-size: .8em;
	color: #000;
}
.ranking1 .btn_cv, .ranking2 .btn_cv, .ranking3 .btn_cv{ margin-top: 20px; }

/* min-width: 641px 
------------------------------------------------ */
@media screen and (min-width: 641px){
	.column_list{ font-size: 0; }
	.item_list li, .column_list li{
		margin: 0 20px 50px 0;
		width: 224px;
		font-size: 1.6rem;
	}
	.column_list li{
		display: inline-block;
		vertical-align: top;
	}
	.item_list li:nth-of-type(5n), .column_list li:nth-of-type(5n){ margin-right: 0; }
	.item_list li a:hover, .column_list li a:hover{ text-decoration: underline; }
	.column_list li a{
		display: block;
		height: 324px;
		border-radius: 5px;
		box-shadow: 0 1px 3px #ccc;
	}
	.column_list li .thumb img{
		width: 224px;
		height: 224px;
		border-radius: 5px 5px 0 0;
		object-fit: cover;
	}
	.column_list li .txt{ padding: 10px; }
	.pagenation li a:hover{
		background: #e7211a;
		border-color: #e7211a;
		color: #fff;
		-webkit-transition: .3s;
		-transition: .3s;
	}
	#ranking{
		margin: auto;
		width: 960px;
	}
	#ranking h1{
		margin: 0 0 50px;
		font-size: 2.4rem;
	}
	#ranking h1 span{
		padding-left: 58px;
		font-size: 4.8rem;
		color: #e7211a;
	}
	#ranking h1 span:before{ bottom: 6px; }
	#ranking h1 span:after{
		top: 0;
		width: 64px;
		height: 64px;
		background-size: 250px auto;
	}
	#ranking h1.dog span:after{ background-position: -128px 2px; }
	#ranking h1.cat span:after{ background-position: -194px 0; }
	.ranking1, .ranking2_3{ margin-bottom: 50px; }
	.ranking1{
		display: table;
		width: 100%;
	}
	.ranking1 .thumb, .ranking1 .txt{
		display: table-cell;
		vertical-align: top;
	}
	.ranking1 .thumb{
		padding-right: 50px;
		width: 480px;
	}
	.ranking1 .txt b{ font-size: 2.4rem; }
	.ranking1 .price{
		margin: 20px 0;
		text-align: right;
	}
	.ranking2_3{ font-size: 0; }
	.ranking2, .ranking3{
		display: inline-block;
		width: 440px;
		vertical-align: top;
		font-size: 1.6rem;
	}
	.ranking2{ margin-right: 80px; }
	#ranking li{
		margin: 0 20px 50px 0;
		width: 224px;
		font-size: 1.6rem;
	}
	#ranking li a:hover{ text-decoration: underline; }
	#ranking li:nth-of-type(4n){ margin-right: 0; }
	#ranking li .thumb img{
		width: 224px;
		height: 224px;
	}
}

/* max-width: 640px
------------------------------------------------ */
@media screen and (max-width: 640px){
	.item_list li{
		margin: 0 4% 30px 0;
		width: 48%;
		font-size: 1.4rem;
	}
	.item_list li:nth-of-type(even){ margin-right: 0; }
	.column_list li{ border-bottom: 1px solid #ececec; }
	.column_list li:last-child{ border-bottom: 0; }
	.column_list li a{
		position: relative;
		display: table;
		padding: 10px 20px 10px 0;
		width: 100%;
		box-sizing: border-box;
	}
	.column_list li 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%);
	}
	.column_list li .thumb, .column_list li .txt{
		display: table-cell;
		vertical-align: middle;
	}
	.column_list li .thumb{
		padding-right: 10px;
		width: 80px;
	}
	.column_list li .thumb img{
		width: 80px;
		height: 80px;
		object-fit: cover;
	}
	.ranking1, .ranking2, .ranking3{ margin-bottom: 50px; }
	.ranking1 .thumb{ margin-bottom: 10px; }
	.ranking1 .txt b, .ranking2 .txt b, .ranking3 .txt b{
		font-size: 2rem;
	}
	#ranking h1{ margin-bottom: 20px; }
	#ranking h1 span{
		padding-left: 36px;
		font-size: 6.5vw;
	}
	#ranking h1 span:before{ bottom: 0; }
	#ranking h1 span:after{
		width: 36px;
		height: 36px;
		background-size: 140.625px auto;
	}
	#ranking h1.dog span:after{ background-position: -72px 1px; }
	#ranking h1.cat span:after{ background-position: -108px 1px; }
	#ranking li{
		margin: 0 4% 30px 0;
		width: 48%;
		font-size: 1.4rem;
	}
	#ranking li:nth-of-type(even){ margin-right: 0; }
	#ranking li:nth-of-type(-n+3) .thumb{ text-align: center; }
}

/* ------------------------------------------------
 styles
------------------------------------------------ */
.hide{ display: none; }
.li_n{ list-style: none; }
.tbl{
	display: table;
	width: 100%;
	box-sizing: border-box;
}
.tbl_l, .tbl_r{
	display: table-cell;
	vertical-align: middle;
}

.al-c{ text-align: center; }
.ml0{ margin-left: 0; }
.f08em{ font-size: .8em; }
.red{ color: #e7211a; }