@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*ランキングページ用
************************************/
.ad-rank-title {
	color: #663399;
	border-bottom: 5px solid #663399;
	font-size: 24px;
	font-weight: bold;
	padding: 0 0 0 10px;
	border-radius: 2px;
}
@media screen and (max-width: 480px) {
	.ad-rank-title {
		font-size: 20px;
	}
}

.ranking-item-descri-img {
	text-align: center;
	margin-bottom: 1em;
}
.ranking-item-descri-img img {
	width: 75%;
}
.ad-rank-merit {
	background-color: #6666cc;
	border-radius: 10px;
	color: #ffffff;
	font-size: 24px;
	font-weight: bold;
	padding: 5px 0 2px 10px;
}
.ad-rank-demerit {
	background-color: #ff6633;
	border-radius: 10px;
	color: #ffffff;
	font-size: 24px;
	font-weight: bold;
	padding: 5px 0 2px 10px;
}
.ad-rank-tech {
	color: #663399;
	border-bottom: 2px solid #663399;
	font-size: 24px;
	font-weight: bold;
	padding: 20px 0 0 10px;
}
@media screen and (max-width: 480px) {
	.ad-rank-merit, .ad-rank-demerit, .ad-rank-tech {
		font-size: 20px;
	}
}

.ranking-item-detail a {
	background-color: #6666cc;
}
.ranking-item-link a {
	background-color: #663399;
}

/*プロフリスト用
************************************/
.proflist {
	width: 100%;
}
.proflist table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
}
.proflist td {
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 1px dotted #ccc;
}
.proflist-even {
	background-color: #ffffff;
}
.proflist-thumb {
	width: 15%;
	padding: auto 0 auto 0;
}
.proflist-thumb img {
	width: 100%;
}
.proflist-meta {
	width: 75%;
	margin: 0;
	padding: 0 0 5px 5px;
	vertical-align: top;
}
.proflist-meta br {
	display: none;
}
.proflist-meta p {
	margin: 0 0 5px 0;
	padding: 0;
}
.proflist-name {
	margin: 0;
	padding: 0;
	font-size: 1.3em;
	font-weight: bold;
	color: #000000;
}
.proflist-area {
	margin: 0;
	padding: 0;
	color: #333;
}
.proflist-age {
	margin-left: 20px;
}
.proflist-message {
	margin: 0;
	padding: 0;
	color: #333;
	line-height: 1.2em;
}
.proflist-mail {
	width: 10%;
	margin: 0;
	padding: auto 0 auto 0;
}
.proflist-mail img {
	width: 100%;
}


/*SPページ用
************************************/
.pc_no {
	display: none;
}
@media screen and (max-width: 800px) {
	.pc_no {
		display: block;
	}
	.sp_no {
		display: none;
	}
}

/*共通
************************************/
.u_pink {
	background: linear-gradient(transparent 60%, #ffccff 60%);
}
.u_salmon {
	background: linear-gradient(transparent 60%, #fa8072 60%);
}
.u_fuchsia {
	background: linear-gradient(transparent 60%, #ff00ff 60%);
}
.u_skyblue {
	background: linear-gradient(transparent 60%, #87ceeb 60%);
}
.u_yellow {
	background: linear-gradient(transparent 60%, #ffff99 60%);
}
.u_lime {
	background: linear-gradient(transparent 60%, #99ff99 60%);
}
.u_aqua {
	background: linear-gradient(transparent 60%, #99ffff 60%);
}

/*フッター用
************************************/
.widget-footer-left a, .widget-footer-left a:hover,
.widget-footer-center a, .widget-footer-center a:hover,
.widget-footer-right a, .widget-footer-right a:hover {
	color: #fff;
	text-decoration: none;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}