@charset "utf-8";

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*
#memattach .h1 + .memattach-body, #memattach .h2 + .memattach-body, #memattach .ex + .memattach-body,
#memattach .h1 + .element, #memattach .h2 + .element, #memattach .ex + .element {
	margin-top: 20px;
}
*/
/*~~*/

#memattach .memattach-body ul {
	padding-bottom: 50px; display: flex; flex-wrap: wrap;
}

/*~~*/
/*
□・15・□
*/
#memattach .memattach-body li {
	width: calc((100% - 15px) / 2); margin-top: 15px; margin-left: 15px; display: flex; position:relative;
}

#memattach .memattach-body li:nth-child(-n + 2) {
	margin-top: 0;
}

#memattach .memattach-body li:nth-of-type(2n+1) {
	margin-left: 0;
}

#memattach .memattach-body li .hukidashi {
	flex: 1; padding: 5px; border: 1px solid #000; position: relative; z-index: 0; display: flex;
}

#memattach .memattach-body li .hukidashi:before {
	width: 15px; height: 15px; margin-left: 0; border-radius: 50%; background: #000; content: ""; display: block; position: absolute; bottom: -17px; left: calc(50% - 43px); z-index: 0;
}

#memattach .memattach-body li .hukidashi:after {
	width: 10px; height: 10px; margin-left: 0; border-radius: 50%; background: #000; content: ""; display: block; position: absolute; bottom: -25px; left: calc(50% - 33px); z-index: 0;
}

#memattach .memattach-body li .fbody {
	padding: 5px; display: flex; flex-direction: column; flex:1;
}

#memattach .memattach-body li .fbody .body {
	margin-top: 5px; margin-bottom: 10px; padding-top: 5px; border-top: 1px solid #000;
}

#memattach .memattach-body li .fbody .name {
	margin-top: auto; text-align: center;
}

#memattach .memattach-body li .fbody .name span {
	padding: 5px 20px; border: 1px solid #000; display: inline-block;
}

#memattach .memattach-body li .face {
	width: 100%; position: absolute; bottom: -50px; text-align: center;
}

#memattach .memattach-body li .face img {
	width: 40px; height: 40px; border-radius: 40px;
}

/*~~*/

#memattach .memattach-none {
	padding: 10px;
}

#memattach .memattach-none p {
	text-align: center;
}

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

@media screen and (min-width: 769px) {
/****************************************************************************************************************************************************************/
/*
#memattach .h1 + .memattach-body, #memattach .h2 + .memattach-body, #memattach .ex + .memattach-body,
#memattach .h1 + .element, #memattach .h2 + .element, #memattach .ex + .element {
	margin-top: 25px;
}
*/
/*~~*/

#memattach .memattach-body ul {
	padding-bottom: 80px;
}

#memattach .memattach-body li .hukidashi:before {
	width: 17px; height: 17px; bottom: -20px; left: calc(50% - 57px);
}

#memattach .memattach-body li .hukidashi:after {
	width: 12px; height: 12px; bottom: -30px; left: calc(50% - 45px);
}

/*
□・15・□・15・□・15・□
*/
#memattach .memattach-body li {
	width: calc((100% - 45px) / 4); margin-left: 15px;
}

#memattach .memattach-body li:nth-child(-n + 4) {
	margin-top: 0;
}

#memattach .memattach-body li:nth-of-type(4n+1) {
	margin-left: 0;
}

#memattach .memattach-body li .face {
	width: 100%; position: absolute; bottom: -90px; text-align: center;
}

#memattach .memattach-body li .face img {
	width: 80px; height: 80px; border-radius: 80px;
}

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

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