﻿
.select_tab{
	border-bottom:1px solid #e3e3e3;
}
.select_tab >ul{
	display:flex;
	justify-content: center;
	align-items: flex-end;
	max-width:980px;
	margin-right:auto;
	margin-left:auto;
	
}
.select_tab >ul li{
	text-align:center;
	color:#ffffff;
	line-height: 1;
	cursor: pointer;
	border-bottom:1px solid #e3e3e3;
	margin-bottom:-1px;
	box-sizing: border-box;
	transition:padding 0.3s,background-color 0.3s;
}
.select_tab >ul li:last-child{
	margin-right:0;
}
.select_tab >ul #on_dog{
	background-color:#79c0e8;
}
.select_tab >ul #on_cat{
	background-color:#e2a6cb;
}
.select_tab >ul #on_anim{
	background-color:#93cb86;
}
/*.select_tab >ul li:hover,*/.select_tab >ul li.active{
	border:1px solid #e3e3e3;
	border-bottom:1px solid #ffffff;
	background-color:#ffffff!important;
	color:#333333;
}
.itembnr{
	text-align:center;
	line-height:0;
}
.select_animals:not(:first-of-type){
	display:none;
}
.select_animals h3{
	text-align:center;
	letter-spacing:0.1em;
	color:#333333
}
.select_animals ul{
	max-width:980px;
	margin-right:auto;
	margin-left:auto;
	display: flex;
	flex-wrap: wrap;
}
.select_animals li{
	border-width:3px;
	border-style:solid;
	box-sizing: border-box;
	overflow:hidden;
	text-align:center;
}
.select_animals ul a{
	display:block;
	position:relative;
}
.select_animals ul a:before{
	content:"";
	display:block;
	width:100%;
	position:absolute;
	top:0;
	transform:rotate(45deg);
	z-index:1;
}
.select_animals figcaption{
	font-weight:200;
	color:#333333;
	vertical-align: middle;
	transition:color 0.3s;
}
.select_animals figcaption i{
	display:inline-block;
	font-size:0.5em;
	margin-right:7px;
}
.select_animals a:after{
	font-family:icomoon;
	content:"\e902";
	display:block;
	line-height: 1;
	width:1em;
	height:1em;
	color:#ffffff;
	position:absolute;
	z-index:2;
}
.on_dog ul li{
	border-color:#79c0e8;
}
.on_cat ul li{
	border-color:#e2a6cb;
}
.on_anim ul li{
	border-color:#93cb86;
}
.on_dog h3 i,.on_dog figcaption i,.on_dog h3 i,.on_dog a:hover figcaption{
	color:#79c0e8;
}
.on_cat h3 i,.on_cat figcaption i,.on_cat a:hover figcaption{
	color:#e2a6cb;
}
.on_anim h3 i,.on_anim figcaption i,.on_anim a:hover figcaption{
	color:#93cb86;
}
.on_dog ul a:before{
	background:#79c0e8;
}
.on_cat ul a:before{
	background:#e2a6cb;
}
.on_anim ul a:before{
	background:#93cb86;
}
#attention{
	display:none;
}
#attention{
	position:fixed;
	width:100vw;
	height:100vh;
	z-index: 99999;
	top:0;
	bottom:0;
	right:0;
	left:0;
}
#attention >.a_overlay{
	position: absolute;
	width:100vw;
	height:100vh;
	top:0;
	bottom:0;
	right:0;
	left:0;
	background:url(../image/cont_bg1.png);
	opacity:0.9;
}
#attention .contents{
	position: absolute;
	right:0;
	left:0;
	margin:auto;
	top:25vh;
	background:#ffffff;
	box-sizing:border-box;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
#attention p{
	text-align:center;
}

#attention .btn_wrap{
	display:table;
	table-layout:fixed;
	box-sizing:border-box;
	margin:auto;
}
#attention .btn_wrap a{
	display:block;
	color:#ffffff;
	border-radius:10px;
	transition:all 0.2s;
	margin-bottom:3px;
	letter-spacing:0.1em;
	text-align:center;
}
#attention .btn_wrap .yes a{
	background:#2089c5;
	box-shadow:0 3px 0 #157db5;
}
#attention .btn_wrap .yes a:hover{
	background:#157db5;
	box-shadow:0 0 0 #157db5;
}
#attention .btn_wrap .no a{
	background:#757575;
	box-shadow:0 3px 0 #606060;
}
#attention .btn_wrap .no a:hover{
	background:#606060;
	box-shadow:0 0 0 #606060;
}



@media screen and (min-width:1081px),print{
	.main_content{
		padding-bottom:110px;
	}
	.select_tab{
		margin-bottom:70px;
	}
	.select_tab >ul li{
		width:300px;
		margin-right:10px;
		padding-top:15px;
		padding-bottom:15px;
	}
	.select_tab >ul li.active{
		padding-top:20px;
		padding-bottom:20px;
	}
	.shoparea{
		margin-top:65px;
	}
	.select_animals h3{
		margin-bottom:45px;
	}
	.select_animals ul li{
		width:310px;
		margin-right:25px;
		margin-bottom:25px;
		border-radius:10px;
	}
	.select_animals figcaption{
		font-size:1.714em;
	}
	.select_animals ul a{
		padding-top:58px;
		padding-bottom:20px;
	}
	.select_animals ul .image{
		padding-bottom:25px;
	}
	.select_animals ul a:before{
		height:65px;
		right:-143px;
	}
	.select_animals a:after{
		top:10px;
		right:10px;
		font-size:1.643em;
	}
	#attention .contents{
		padding:5%;
	}
	#attention .btn_wrap{
		width:70%;
		padding:0 10px;
	}
	#attention p{
		font-size:1.429em;
		margin-bottom:20px;
	}
	#attention p.att{
		font-size:1em;
		margin-top:10px;
	}
	#attention .btn_wrap >div{
		display:table-cell;
	}
	#attention .btn_wrap a{
		padding:15px;
		font-size:1.143em;
	}
	#attention .btn_wrap a:hover{
		transform:translateY(3px);
		margin-bottom:0;
	}
	#attention .btn_wrap .yes a{
		margin-right:10px;
	}
	#attention .btn_wrap .no a{
		margin-left:10px;
	}

}
@media screen and (min-width:781px),print{
/*	.select_tab >ul li{
		font-size:1.143em;
	}*/
	.select_animals ul li:nth-child(3n){
		margin-right:0;
	}
	.select_animals h3{
		font-size:1.875em/*30px*/;
	}/*
	.select_animals a:after{
		font-size:1.643em;
	}*/
}
@media screen and (min-width:781px) and (max-width:1080px){
	.select_animals ul{
		font-size:calc((0.625rem + ((1vw - 7.51px) * 1.33155792276964)) * 0.69537037037037);
	}
	.select_animals li{
		width:31.3%;
		margin-right:3%;
	}
	.select_animals li a{
		padding:1.5em 2em;
	}
	.select_animals li a:before{
		height:6em;
		top:0;
		right:-17.0em;
	}
	.select_animals li a:after{
		font-size:1.7em;
		top:0.5em;
		right:0.5em;
	}
	.select_animals figcaption{
		font-size:2.0em;
	}
	#attention p{
		font-size:1.143em;
	}
	#attention p.att{
		font-size:1em;
	}
	#attention .btn_wrap{
		width:90%;
	}
}
@media screen and (max-width:1080px){
	.main_content{
		padding-bottom:7%;
	}
	.select_tab{
		margin-bottom:7%;
	}
	.select_tab >ul{
		justify-content: space-around;
	}
	.select_tab >ul li{
		width:30%;
		padding-top:1em;
		padding-bottom:1em;
	}
	.select_tab >ul li.active{
		padding-top:1.5em;
		padding-bottom:2em;
	}
	.select_animals{
		padding-right:5%;
		padding-left:5%;
	}
	.select_animals li{
		border-radius:1em;
		margin-bottom:3%;
	}
	.select_animals .image{
		width:75%;
		margin-right:auto;
		margin-left:auto;
	}
	.select_animals h3{
		margin-bottom:3%;
	}
	.shoparea{
		margin-top:7%;
	}
	#attention .contents{
		padding:30px;
	}
	#attention p{
		margin-bottom:3%;
	}
	#attention p.att{
		margin-top:1%;
		margin-bottom:0;
	}
	#attention .btn_wrap a{
		padding:3%;
	}
	#attention .btn_wrap .yes{
		margin-bottom:2%;
	}

}
@media screen and (max-width:780px),print{
	.select_animals h3{
		font-size:4.0em;
	}
	.select_tab,.select_animals{
		font-size:calc((0.625rem + ((1vw - 3.2px) * 3.125)) * 0.426666666666667
		);
	}
	.select_tab li{
		font-size:2.4em;
	}
	.select_animals li{
		width:49%;
		margin-right:2%;
		margin-bottom:2%;
		border-width:2px;
	}
	.select_animals li a{
		padding:2.5em 2em;
	}
	.select_animals li a:before{
		height:6em;
		top:0;
		right:-15.0em;
	}
	.select_animals li a:after{
		font-size:2em;
		top:0.7em;
		right:0.7em;
	}
	.select_animals li:nth-child(2n){
		margin-right:0;
	}
	.select_animals .image{
		margin-bottom:1em;
	}
	.select_animals figcaption{
		font-size:2.4em;
	}
	#attention p.att{
		font-size:0.800em;
	}
	#attention .btn_wrap{
		width:100%;
	}

}
