@charset "utf-8";

#petArea li div.pet_detail {
	padding: 10px 0;
	border-top: #eaeaea 1px dashed;
}
#petArea li a {
	display: block;
	float: left;
	width: 371px;
	height: 232px;
	margin: 7px 0 0 7px;
	padding: 0 10px;
	border: #e3e3e3 solid 1px;
	background-color: #FFF;
	text-decoration: none;
}
#petArea li a:hover {
	border: #e2f6ce solid 1px;
}
#petArea li div.pet_detail img {
	vertical-align: middle;
}
#petArea .img_pet {
	height: 170px;
	text-align: center;
}
#petArea li div.pet_detail .name {
	display: inline-block;
	width: 210px;
	margin-left: 5px;
	color: #9c8377;
	font-weight: bold;
}
#petArea li div.pet_detail .price {
	display: inline-block;
	width: 105px;
	color: #777;
	text-align: right;
	font-weight: bold;
}
#petArea li div.pet_detail .price img {
	margin-right: 3px;
}
.btn_searchOtherPet {
	clear: both;
}
.btn_searchOtherPet a {
	display: inline-block;
	float: right;
	margin: 10px;
	padding: 7px 10px 7px 25px;
	border-radius: 3px;
	background: #c1b597 url(/image/common/ico_arrow.png) no-repeat 12px center;
	color: #FFF!important	;
	text-decoration: none;
	text-shadow:1px 1px 0 #b5ab8e, -1px -1px 0 #b5ab8e,
	-1px 1px 0 #b5ab8e, 1px -1px 0 #b5ab8e,
	0px 1px 0 #b5ab8e,  0-1px 0 #b5ab8e,
	-1px 0 0 #b5ab8e, 1px 0 0 #b5ab8e;
	transition: 0.4s;
}
.btn_searchOtherPet a:hover {
	background: #cbbb79 url(/image/common/ico_arrow_on.png) no-repeat 12px center;
	color: #FFF!important	;
	text-shadow:1px 1px 0 #b5ab8e, -1px -1px 0 #b1a05c,
	-1px 1px 0 #b5ab8e, 1px -1px 0 #b1a05c,
	0px 1px 0 #b5ab8e,  0-1px 0 #b1a05c,
	-1px 0 0 #b5ab8e, 1px 0 0 #b1a05c;
	text-decoration: none;
}
.img_about {
	margin: 60px 0 15px;
	text-align: center;
}

/*ペット詳細*/
.petdetailBox {
	margin: 7px;
	padding: 7px;
	border: #e0ded8 1px solid;
	background-color: #FFF;
}
.petdetailBox .detail1 {
	float: right;
	width: 471px;
}
.petdetailBox .detail2 {
	float: left;
	width: 270px;
}
.pettype {
	margin-bottom: 8px;
	padding: 12px 2px 7px;
	border-bottom: #d3d3d3 dashed 1px ;
	color: #9c8377;
	font-size: 18px;
	font-weight: bold;
	line-height: 1em;
}
.pettype span {
	display: inline-block;
	width: 50px;
	margin-left: 8px;
	border-radius: 10px;
	background-color: #4e9cdf;
	color: #FFF;
	text-align: center;
	font-size: 10px;
	line-height: 1.7em;
	vertical-align: 3px;
}
.pettype span.male {
	background-color: #4e9cdf;	
}
.pettype span.female {
	background-color: #ed76a8;	
}
p.price {
	margin-left: 5px;
	margin-bottom: 25px;
	color: #777;
	font-weight: bold;
}
p.price span {
	position: relative;
	padding-left: 20px;
}
p.price span:before {
	position: absolute;
	top: 1px;
	left: 0;
	content: url(/image/shop/pet/premium/icon_coin01.gif);
}
.txt_personality {
	margin-bottom: 25px;
	color: #b79772;
	font-size: 12px;
}
.txt_personality em {
	font-weight: bold;
	font-size: 14px;
	font-style: normal;
}
.personalityArea {
	position: relative;
	width: 471px;
	height: 179px;
	background: url(/image/shop/pet/bg_personality.png) no-repeat 0 0;
}
.personalityArea .personality {
	font-size:0;
}
.personalityArea .personality span {
	display: block;
	position: absolute;
	top: 75px;
	right: 97px;
	width: 120px;
	color: #9c8377;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
.personalityArea .btn_reselect a {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 85px;
	height: 179px;
	background: url(/image/shop/pet/btn_reselect.png) no-repeat 0 0;
	font-size: 0;
	transition: 0.6s;
	opacity: 1;
}
.personalityArea .btn_reselect a:hover {
	background: url(/image/shop/pet/btn_reselect_on.png) no-repeat 0 0;
}
.personalityArea ul {
	margin: 22px 0 0 12px;
}
.personalityArea li {
	display: block;
	position: relative;
	width: 230px;
	height: 21px;
	margin-bottom: 8px;
	background-position: 0 0;
	background-repeat: no-repeat;
	text-align: right;
	font-size:0;
}
.personalityArea li:nth-child(1) {background-image: url(/image/shop/pet/bg_param_a.png);}
.personalityArea li:nth-child(2) {background-image: url(/image/shop/pet/bg_param_b.png);}
.personalityArea li:nth-child(3) {background-image: url(/image/shop/pet/bg_param_c.png);}
.personalityArea li:nth-child(4) {background-image: url(/image/shop/pet/bg_param_d.png);}
.personalityArea li:nth-child(5) {background-image: url(/image/shop/pet/bg_param_e.png);}
.personalityArea li span {
	display: block;
	position: absolute;
	top: 7px;
	right: 20px;
	width: 116px;
	height: 8px;
	background-repeat: no-repeat;
	background-position: 0 0;
}
.personalityArea li:nth-child(1) span {background-color:#f098c4;}
.personalityArea li:nth-child(2) span {background-color:#f4c193;}
.personalityArea li:nth-child(3) span {background-color:#f0ec7a;}
.personalityArea li:nth-child(4) span {background-color:#a3f493;}
.personalityArea li:nth-child(5) span {background-color:#ce98da;}
.personalityArea li span.param0 {background-image: url(/image/shop/pet/param0.png);}
.personalityArea li span.param1 {background-image: url(/image/shop/pet/param1.png);}
.personalityArea li span.param2 {background-image: url(/image/shop/pet/param2.png);}
.personalityArea li span.param3 {background-image: url(/image/shop/pet/param3.png);}
.personalityArea li span.param4 {background-image: url(/image/shop/pet/param4.png);}
.personalityArea li span.param5 {background-image: url(/image/shop/pet/param5.png);}
.personalityArea li span.param6 {background-image: url(/image/shop/pet/param6.png);}
.personalityArea li span.param7 {background-image: url(/image/shop/pet/param7.png);}
.personalityArea li span.param8 {background-image: url(/image/shop/pet/param8.png);}
.personalityArea li span.param9 {background-image: url(/image/shop/pet/param9.png);}
.personalityArea li span.param10 {background-image: url(/image/shop/pet/param10.png);}
.petdetailBox .detail2 figure {
	position: relative;
	width: 277px;
	height: 183px;
	border: #e0ded8 solid 1px;
}

.petdetailBox .detail2 figure img{
	position: relative;
	width: 160px;
	height: 160px;
    padding: 10px 0 0 55px;
}

.petdetailBox .detail2 figure canvas {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}
.txt_detail{
	width: 248px;
	height: 120px;
	margin: 5px 10px;
	padding: 0 5px;
	background-image:
	linear-gradient(
	  180deg,
	  rgba(0,0,0,0) 0%,
	  rgba(0,0,0,0) 97%,
	  #e6ded6 97%,
	  #e6ded6 100%
	);
	background-size:100% 2em;
	color: #876f53;
	line-height:2;
}
a.btn_keeppet,
a.btn_keeppet span {
	width: 226px;
}
a.btn_keeppet span,
a.btn_decision span {
	padding-left: 45px;
}
a.btn_keeppet {
	margin: 20px auto 30px;
}
a.btn_keeppet span:before,
.btn_decision span:before {
	top: 5px;
	left: 25px;
	content: url(/image/shop/pet/ico_cart.png);
}

/*他のニコペット*/
.otherPet {
	float: right;
}
.otherPet p,.otherPet ul {
	margin: 10px 0 50px 10px;
	display: inline-block;
	color: #9c8377;
	font-weight: bold;
	vertical-align: middle;
}
.otherPet li {
	display: inline-block;
	width: 58px;
	height: 58px;
}
.otherPet a {
	display: block;
	width: 58px;
	height: 58px;
	border: #e0ded8 solid 1px;
	overflow: hidden;
	text-indent: -9999em;
	box-sizing: border-box;
	transition: 0.6s;
	opacity: 1;
}
.otherPet a:hover {
	display: block;
	width: 58px;
	height: 58px;
	border: #f1f7a9 3px solid;
	box-sizing: border-box;
}
#contentsArea {
	position: relative;
}
/*モーダルウィンドウ*/
.content{
    margin: 0 auto;
    padding: 40px;
}
.modal_block{/*モーダルウィンドウ全体ラップ部分*/
    display: none;
    /*position: fixed;*/
    position: absolute;
    top: 0;
    width: 100%;
    /*height: 100vh;*/
    height: 100%;
    z-index: 1000;
}
.modal_bg{/*モーダルウィンドウを表示している時に背景をクリックしてもモーダルウィンドウを閉じられる*/
    position: absolute;
    width: 100%;
    /*height: 100vh;*/
    height: 100%;
    background: #efece4;
    opacity: 0.3;
    z-index: 1010;
}
.modal_content{/*モーダルウィンドウで表示するコンテンツ*/
    position: absolute;
    top: 50%;
    /*left: 50%;*/
    left: 48%;
	width: 744px;
    margin: 0 2% 2%;
    border: #d3d3d3 solid 2px;
    border-radius: 6px;
	background-color: #FFF;
    background: #fff;
    transform: translate(-50%,-50%);
    z-index: 1020;
}
.btn_modalclose a {
	display: block;
	position: absolute;
	top: -18px;
	right: -18px;
	width: 38px;
	height: 43px;
	background: url(/image/shop/pet/btn_close.png) no-repeat 0 0; 
	font-size: 0;
}
.btn_modalclose a:hover {
	background: url(/image/shop/pet/btn_close_on.png) no-repeat 0 0; 
	transform: translateY(2px);
	transition: 0.4s;
}

/*モーダルウインドウ内コンテンツ*/
h1.tit_modal {
	position: relative;
	margin: 1px 1px 0 1px;
	padding: 4px 0 2px 43px;
    border-bottom: #d3d3d3 solid 2px;
	border-radius: 3px 3px 0 0;	
	background-color: #f8f8f0;
	color: #777;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 2px;
}
h1.tit_modal:before {
	position: absolute;
	top: 6px;
	left: 12px;
	content: url(/image/shop/pet/ico_cart2.png);
}
.petdetailBox2 {
	margin: 10px 20px;
	border: #e9e9e9 1px solid;
	border-right: none;
	border-left: none;
	background-color: #f8f8f0;
}
.petdetailBox2 .detail1 {
	float: right;
	width: 360px;
	margin: 5px 20px 15px 0;
}
.petdetailBox2 figure {
	display: block;
	position: relative;
	float: left;
	width: 275px;
	height: 242px;
	margin: 8px 0 0 10px;
	border: #e0ded8 solid 1px;
	background-color: #FFF;
}
.petdetailBox2 figure canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}
.petdetailBox2 figure img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}
.petdetailBox2 p.price {
	margin-bottom: 10px;
}
.price_detail {
	border-bottom: #e9e9e9 solid 2px;
}
.price_detail .txt_price {
	display: inline-block;
	font-size: 14px;
	font-weight: bold;
}
.price_detail .price {
	display: inline-block;
	width: 200px;
	font-size: 14px;
	text-align: right;
}
.price_detail .price span:before {
	top:-3px;
}
.price_detail .price span {
	padding-right: 5px;
	border-image: none;
	font-size: 24px;
	font-weight: bold;
}
dl.personality {
	display: table;
	width: 306px;
	border: #c3b4ad solid 1px;
	border-radius: 10px;
	background-color: #9c8377;
}
dl.personality dt {
	display: table-cell;
	width: 115px;
	color: #FFF;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
}
dl.personality dd {
	display: table-cell;
	width: 191px;
	height: 45px;
	border-radius: 0 9px 9px 0;
	background-color: #FFF;
	color: #9c8377;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
	vertical-align: middle;
}
.petPrice {
	width: 440px;
	margin: 10px auto 5px;
	border-bottom: #e9e9e9 solid 2px;
}
.petPrice .txt_price {
	display: inline-block;
	width: 230px;
	margin-left: 20px;
	font-size: 14px;
	font-weight: bold;
}
.petPrice .price {
	display: inline-block;
	width: 145px;
	margin: 0;
	font-size: 14px;
	text-align: right;
}
.petPrice .price span:before {
	top:-3px;
}
.petPrice .price span {
	padding-right: 5px;
	border-image: none;
	font-size: 24px;
	font-weight: bold;
}
dl.balance {
	width: 440px;
	margin: 5px auto;	
}
dl.balance dt {
	display: inline-block;
	width: 255px;
	text-align: right;
}
dl.balance dd {
	display: inline-block;
	width: 140px;
	text-align: right;
}
dl.balance dd span {
	color: #e06889;
	font-size: 14px;
	font-weight: bold;	
}
.txt_confirm {
	clear: both;
	margin-bottom: 15px;
	color: #e06889;
	font-size: 14px;
	text-align: center;
	font-weight: bold;
}
a.btn_decision,
a.btn_decision span {
	width: 170px;
	letter-spacing: 5px;
}
a.btn_decision {
	margin: 10px auto 15px;
}
.btn_cancel a {
	position: absolute;
	right: 25px;
	bottom: 10px;
}

/*紹介完了*/
#pet_done .modal_content {
	width: 320px;
}
.tit_done {
	margin: 30px 0 20px;
	text-align: center;
	font-size: 14px;
}
.txt_done {
	text-align: center;
}
a.btn_gotoItembox,
a.btn_gotoItembox span {
	width: 245px;
}
a.btn_gotoItembox span {
	padding: 2px 0 0 0;
	text-align: center;
}
.btn_gotoItembox span:before {
	content: none;
}
.btn_close a {
	margin: 20px auto;
}