@charset "utf-8";

/* =============================================================================
   レイアウト
============================================================================= */





/* =============================================================================
   PAGE
============================================================================= */

.profileMain{
	position: relative;
}
.profileMain:before{
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	content: "";
	display: inline-block;
	width: 100%;
	height: 80vw;
	background: #b5e3e6;
}
.profileMainInner{
	position: relative;
	display: flex;
	flex-direction: column-reverse;
	margin: 0 auto;
	width: 100%;
	max-width: 1400px;
}
.profileMainName{
	padding: 0 8px;
}
.profileMainName:before{
	position: absolute;
	left: 8px;
	top: 8px;
	content: attr(data-name);
	color: #fff;
	opacity: .4;
	font-size: 5.5rem;
	font-weight: bold;
	line-height: 1;
	word-break: break-all;
	white-space: nowrap;
}
.profileMainName:after{
	position: absolute;
	left: 8px;
	top: 77vw;
	z-index: 1;
	content: attr(data-cat);
	color: #fff;
	opacity: .4;
	font-size: 3.0rem;
	font-weight: bold;
	line-height: 1;
	word-break: break-all;
	transform: rotate(-90deg);
	transform-origin:0 0;
}
.profileMainName_txt{
	z-index: 1;
	flex: 1;
	margin-left: 8px;
	padding-top: 8px;
	color: #0d4145;
	line-height: 1.3;
	letter-spacing: .1em;
	font-size: 3.0rem;
	font-weight: bold;
}
.profileMainName_txt span{
	margin-left: 8px;
	font-size: 1.8rem;
	font-weight: bold;
}
.profileMainName_txt span::before{
	content: "－";
	margin-right: 8px;
}

/* profileList */
.profileList{
	position: relative;
	margin: 24px 8px 0;
	padding: 32px 16px 16px;
	border-radius: 16px;
	box-shadow: 0 0 0.5em rgb(0 0 0 / 20%);
	background-color: rgba(255,255,255,0.7);
}
.profileList:before{
	position: absolute;
	left: 8px;
	top: -8px;
	content: "";
	display: inline-block;
	width: 80px;
	height: 35px;
	background: url("/profile/_images/ttl_profile_blue.png") center / 100% auto no-repeat;
}

.profileList_item{
	position: relative;
	display: flex;
	padding: 0;
}
.profileList_item:not(:first-child){
	margin-top: 16px;
	padding-top: 16px;
}
.profileList_item:not(:first-child):before{
	position: absolute;
	left: 0;
	top: -7px;
	content: "";
	display: inline-block;
	width: 100%;
	height: 14px;
	background: radial-gradient(circle farthest-side, #ddd, #ddd 30%, transparent 30%, transparent);
	background-size: 14px;
}
.profileList_item dt{
	display: flex;
	align-items: center;
	width: 140px;
	font-weight: 500;
}
.profileList_item dt .m-ico{
	margin-right: 8px;
	color: #b5e3e6;
	line-height: 1;
	font-size: 2.5rem;
}
.profileList_item dd{
	flex: 1;
}
.profileLink{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: -4px 0 0 -4px;
}
.profileLink_item{
	margin: 4px 0 0 4px;
}

.profileLink_item a{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 12px;
	width: 40px;
	height: 40px;
	color: #fff!important;
	font-size: 2.1rem;
	text-decoration: none!important;
	border-radius: 8px;
	background: #0d4145;
}

/* profileMainImg */
.profileMainImg{
	padding: 24px 24px 0;
}
.profileMainImg figure{
	position: relative;
}
.profileMainImg figure img{
	position: relative;
	z-index: 1;
}
.profileMainImg figure:before{
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	content: "";
	display: inline-block;
	width: 70%;
	height: 30vw;
	border: solid 30px #a8dbde;
	border-radius: 100%;
	background: #b5e3e6;
}
.color1 .profileMainImg figure:before{ border-color: #a8dbde; background: #b5e3e6; }
.color2 .profileMainImg figure:before{ border-color: #9fdb9b; background: #b8e6b5; }
.color3 .profileMainImg figure:before{ border-color: #cfd290; background: #dee0a5; }
.color4 .profileMainImg figure:before{ border-color: #edbeb2; background: #f0d0c8; }
.color5 .profileMainImg figure:before{ border-color: #eabcc9; background: #f0c8d3; }

/* ranking */
.rankingWp{
	margin-top: -24px;
}
.rankingBox{
	position: relative;
	margin-top: 24px;
	padding: 16px 16px 16px;
	background: #faf8ec;
}
.rankingBox:before{
	position: absolute;
	left: 8px;
	top: -8px;
	content: "";
	display: inline-block;
	width: 60px;
	height: 26px;
	background: url("/animals/profile/_images/ttl_ranking.png") center / 100% auto no-repeat;
}	
.rankingBox_ttl{
	text-align: center;
	color: #675906;
	font-size: 2.1rem;
	font-weight: bold;
}
.rankingList{
	counter-reset: listnum;
	margin-top: 8px;
}
.rankingList_item{
	display: flex;
	margin-top: 4px;
	background: #fff;
}
.rankingList_item:before{
	counter-increment: listnum;
	content: counter(listnum) "位";
	display: flex;
	justify-content: center;
	align-items: center;
	flex: none;
	width: 50px;
	color: #fff;
	font-weight: bold;
}
.rankingList_item:first-child:before{
	background: linear-gradient(135deg, #e29218 0%, #e5be69 100%);
}
.rankingList_item:nth-child(2):before{
	background: linear-gradient(135deg, #4f4e4e 0%, #838383 100%);
}
.rankingList_item:nth-child(3):before{
	background: linear-gradient(135deg, #7a3f00 0%, #c0720b 100%);
}
.rankingList_itembox{
	display: flex;
	align-items: center;
	padding: 4px 16px;
	line-height: 1.3;
	min-height: 54px;
}

/* photos */
.photos{
	background: #eef6f6;
}
.color1 .photos{ background: #eef6f6; }
.color2 .photos{ background: #f0f8ef; }
.color3 .photos{ background: #f7f7ed; }
.color4 .photos{ background: #f9f2f0; }
.color5 .photos{ background: #f9f3f5; }

.photos_ttl{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	font-size: 1.8rem;
}
.photos_ttl:before{
	content: attr(data-en);
	margin-bottom: 8px;
	padding-bottom: 7px;
	font-size: 2.4rem;
	background: url("/animals/profile/_images/photos_border.png") center bottom / 100% auto no-repeat;
}
.photosWp{
	display: flex;
	flex-wrap: wrap;
	margin: 16px 0 0 -8px;
}
.photos_item{
	margin-left: 8px;
	width: calc(100% / 3 - 8px);
}
.photos_item:nth-child(3n - 1){
	margin-top: 16px;
}







@media print, screen and (min-width:960px) {
	.profileMain:before{
		height: 650px;
	}
	.profileMainInner{
		flex-direction: row;
	}
	.profileMainBd{
		width: 50%;
	}
	.profileMainName{
		position: relative;
		margin-left: 0;
		padding: 0;
	}
	.profileMainName:before{
		left: 0;
		top: 0;
		font-size: 14rem;
	}
	.profileMainName:after{
		left: 0;
		top: 133px;
		width: 100%;
		text-align: right;
		font-size: 4rem;
		transform: rotate(0deg);
	}
	.profileMainName_txt{
		position: relative;
		z-index: 1;
		padding-top: 0;
		font-size: 8.7rem;
	}
	.profileMainName_txt span{
		margin-left: 24px;
		font-size: 3.0rem;
		font-weight: bold;
	}
	.profileMainName_txt span::before{
		margin-right: 24px;
	}
	.h1-pagename{
		font-size: 2.4rem;
	}
	.mirushiruid{
		padding: 12px;
	}
	.mirushiruid dl{
		padding: 20px 8px;
	}
	.mirushiruid dt{
		font-size: 1.6rem;
	}
	.mirushiruid dd{
		font-size: 4.0rem;
	}

	/* profile */
	.profileList{
		margin: 40px 0 0;
		padding: 64px 36px 40px;
		border-radius: 24px;
	}
	.profileList:before{
		top: 4px;
		width: 131px;
		height: 58px;
	}
	.profileList_item{
		padding: 0 24px;
	}
	.profileList_item dt{
		width: 200px;
	}
	.profileList_item dt .m-ico{
		margin-right: 16px;
		font-size: 3.0rem;
	}
	.profileLink{
		margin: -8px 0 0 -8px;
	}
	.profileLink_item{
		margin: 8px 0 0 8px;
	}
	.profileLink_item a{
		width: 45px;
		height: 45px;
		font-size: 2.6rem;
	}

	/* profileMainImg */
	.profileMainImg{
		margin-top: -40px;
		padding: 0;
		width: 50%;
	}
	.profileMainImg figure:before{
		height: 200px;
	}

	/* ranking */
	.rankingWp{
		display: flex;
		justify-content: center;
		margin: 0 0 0 -40px;
	}
	.rankingBox{
		margin: 0 0 0 40px;
		width: calc(100% / 3 - 40px);
	}
	.rankingBox:before{
		width: 86px;
		height: 37px;
	}	
	.rankingBox_ttl{
		font-size: 2.6rem;
	}
	.rankingList_item:before{
		width: 65px;
	}
	.rankingList_itembox{
		padding: 8px 16px;
		min-height: 70px;
	}

	/* photos */
	.photos_ttl{
		font-size: 2.0rem;
	}
	.photos_ttl:before{
		margin-bottom: 16px;
		font-size: 4.0rem;
		background: url("/animals/profile/_images/photos_border.png") center bottom / 100% 7px no-repeat;
	}
	.photosWp{
		margin: 32px 0 0 -40px;
	}
	.photos_item{
		margin-left: 40px;
		width: calc(100% / 3 - 40px);
	}
	.photos_item:nth-child(3n - 1){
		margin-top: 56px;
	}
}





.history_item{
	display: flex;
}
.history_item-date{
	width: 80px;
}
.history_item-content {
	position: relative;
	width: calc(100% - 90px);
	padding: 0 10px 30px 20px;
	border-left: dotted 3px #aaaaaa;
}
.history_item-content::before {
	content: "";
	position: absolute;
	top: 0;
	left: -13px;
	width: 20px;
	height: 20px;
	background-color: #fff;
	border: solid 1px #ccc;
	border-radius: 50%;
}
.histry_box{
	margin-top: 20px;
}
.histry_box.-sns{
	max-width: 400px;
}
.histry_box.-sns .instagram-media.instagram-media-rendered{
	min-width: inherit!important;
}
.histry_box a{
	display: flex;
	flex-direction: row-reverse;
	padding: 10px;
	line-height: 1.3;
	border: solid 5px #f5f5f5;
}
.histroy_photo{
	width: 100px;
}
.history_body{
	margin-left: 10px;
	width: calc(100% - 110px);
}

.histry_media{
	padding: 15px;
	background: #f9f9f9;
}
.histry_media .list-pet{
	margin-top: 5px;
}

@media print, screen and (min-width:960px) {
	.history_item-date{
		width: 150px;
		padding-left: 20px;
	}
	.history_item-content {
		width: calc(100% - 150px);
		padding: 0 20px 60px 50px;
	}
	.history_item-content::before {
		content: "";
		position: absolute;
		top: -2px;
		left: -17px;
		width: 30px;
		height: 30px;
	}
	.histry_box a{
		padding: 20px;
	}	
	.histroy_photo{
		width: 150px;
	}
	.history_body{
		width: calc(100% - 160px);
	}}