@charset "utf-8";

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#followdata .fhead {
	margin-bottom: 30px; text-align: center;
}

#followdata .fhead .pict + .name {
	margin-top: 20px;
}

#followdata .fhead .name h2:before {
	content: "〜";
}

#followdata .fhead .name h2:after {
	content: "〜";
}

/*~~*/

#followdata .follow-head {
	text-align: center;
}

#followdata .follow-head li {
	margin: 0 auto; text-align: center; position:relative; display: none;
}

#followdata .follow-head li:nth-of-type(1) {
	display: inline-block;
}

#followdata .follow-head .hline {
	padding: 10px;
}

#followdata .follow-head h1 {
	display: flex;
}

#followdata .follow-head h1 .body {
	margin: 0 10px;
}

#followdata .follow-head img {
	width: 100px; border-radius: 100px;
}

#followdata .follow-head .face {
	margin-top: 20px; position: relative;
}

#followdata .follow-head .face:before {
	width: 20px; height: 20px; border-radius: 50%; background: #000; content: ""; top: -15px; left: calc(50% - 65px); position: absolute; z-index: 0; display: block;
}

#followdata .follow-head .face:after {
	width: 12px; height: 12px; border-radius: 50%; background: #000; content: ""; top:  2px; left: calc(50% - 48px); position: absolute; z-index: 0; display: block;
}

#followdata .follow-head .hukidashi {
	padding: 5px 30px; border: 1px solid #000; text-align: center; position: relative; z-index: 0; display: inline-block;
}

#followdata .follow-head .hukidashi:after {
	width: 0px; height: 0px; margin-left: -10px; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #000 transparent;
	content: ""; top: -10px; left: 50%; position: absolute; display: block;
}

/*~~*/

#followdata .follow-body {
	margin-top: 25px; border-top: 1px solid #000; display: flex; justify-content: center; flex-wrap: wrap;
}

#followdata .follow-body li {
	width: calc((100% - 50px) / 5); min-width: 100px; margin: 5px; padding: 10px; text-align: center;
}

#followdata .follow-body img {
	width: 70px; border-radius: 70px;
}

#followdata .hukidashi {
	margin-top: 10px; display: flex; justify-content: center; align-items: center;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (min-width: 769px) {
/****************************************************************************************************************************************************************/

#followdata .follow-head .face {
	margin-top: 25px;
}

#followdata .follow-head .face:before {
	width: 30px; height: 30px; top: -23px; left: calc(50% - 80px);
}

#followdata .follow-head .face:after {
	width: 15px; height: 15px; top:  4px; left: calc(50% - 55px);
}

/*~~*/

#followdata .follow-body li {
	width: calc((100% - 140px) / 7); margin: 10px; border: 1px solid transparent;
}

#followdata .follow-body li:hover {
	border: 1px solid #000; background: rgba(0,0,0,0.5); cursor: pointer;
}

#followdata .follow-body .hukidashi {
	width: 100%; padding: 5px; border: 1px solid #000; position: relative; z-index: 0;
}

#followdata .follow-body .hukidashi:after {
	width: 0px; height: 0px; margin-left: -10px; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #000 transparent;
	content: ""; top: -10px; left: 50%; position: absolute; display: block;
}

/****************************************************************************************************************************************************************/
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/