@charset "utf-8";
#pof-container {
	width: 100%;
	height: 100%;
	display: flex;
	}
#pof-container .pof-contents {
	flex: 1;
	}
#pof-container a:hover { /* Flashing Effects */
	opacity: 1;
	-webkit-animation: flash 1s;
	animation: flash 1s;
	}
@-webkit-keyframes flash {
	0% {
	opacity: .4;
	}
	100% {
	opacity: 1;
	}
	}
@keyframes flash {
	0% {
	opacity: .4;
	}
	100% {
	opacity: 1;
	}
}
.pof-h1{
	margin:0.2rem;
	padding:0;
	font-size:3vmin;
	color: #34495E;
	}
.breadcrumbs{
	margin:0.5rem;
	}
.pof-contents {
	margin: 0;
	padding: 0 0 3%;
	}
/* ranking */
.ranking { /* pof-flex-container をrankingに変更 */
  counter-reset: rank;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-end;
  list-style: none;
  position: relative;
}
/* 王冠のスタイル */
/*
.ranking li:nth-child(-n + 3){
  font-family: "Font Awesome 5 Free";
  content: "\f521";
  font-weight: 600;
  font-size: 20px;
	left: -20px;
} 
*/
/* 1位のスタイル */
.ranking li:nth-child(1){
  font-family: "Font Awesome 5 Free";
	content: "\f521";
	font-weight: 600;
  font-size: 20px;
	left: -20px;
	color: #e6c300;
}
/* 2位のスタイル */
.ranking li:nth-child(2){ 
  color: #a9a9a9;
}
/* 3位のスタイル */
.ranking li:nth-child(3){ 
  color: #815a2b;
}
/* 3位以下のスタイル */
.ranking li:nth-child(n + 4){
  content: "";
}
.ranking li::before {
  counter-increment: rank;
	content:counter(rank)"位";
	left: 20px;
  font-size: 1.4rem;
}

/* 順位（文字）のスタイル */
/*
.ranking li::after { 
  counter-increment: rank;
  content: counter(rank) " 位";
  font-size: 1.2em;
  top: 10px;
  left: 10px;
  position: absolute;
  top: 10px;
  left: 10px;
  color: #fff;
}
*/

.ranking p{
  margin: 1vmin;
	padding: 1vmin;
	width: 150px;
	height: 200px;
	text-align: center;
	border:1px solid #eee;
	border-radius:8px;
	box-shadow: 0 0 20px #eee;
}
.contain { /* img class, list & Tags style（内接リサイズ） */
	object-fit: contain;
	padding: 0.3rem;
	width: auto;
	height: auto;
	max-width: 130px;
	max-height: 130px;
	}

@media screen and (max-width : 640px ){
#pof-container { /* sideを下に並びを変える*/
	flex-flow: column-reverse nowrap;
	height:100%;
	}
.pof-contents {
	flex-flow: column nowrap;
	width:100%;
	margin: 0;
	padding: 0 0 5%;
	height: 100%;
	}
.pof-contents p{
	padding: 5%;
	border-bottom:#ccc 1px solid;
	}
}

@media screen and (max-width: 480px) {
.pof-contents {
	margin: 0;
	padding: 1% 0;
	}
}