@charset "utf-8";

:root{
}

	#member_nav{
		margin:2rem auto 0 auto;
		ul{
			display:flex;
			flex-wrap:wrap;
			justify-content: center;
			gap:.3em .5em;
			li{
				a{
					font-size: 1.1em;
					padding:.3em .7em;
					border-radius: .5rem;
					border:1px solid #1c7eec;
					color:#333;
				}
				&.this_page{
					a{
						background:#1c7eec;
						color:white;
					}
				}
			}
		}
	}

	.member_list{
		ul{
			display:grid;
			grid-template-columns: repeat(auto-fill,minmax(380px,1fr));
			gap:15px;
			
			margin-top:15px;
			li{
				border-radius: .5rem;
				padding:20px;
				border:1px solid silver;
				display:grid;
				grid-template-columns: 120px 1fr;
				gap:10px 20px;
				align-items:start;
				img{
					border:1px solid silver;
				}
				dl{
					font-size: .9em;
					border-bottom:1px dashed #CCC;
					display:grid;
					grid-template-columns: 5em 1fr;
					gap:0;
					dt{
						padding:0.7em 0 0.5em 0;
						border-top:1px dashed #CCC;
						position:relative;
						a{
							display:block;
							text-align:center;
							font-size: .9em;
							background:#449a16;
							color:white;
							text-decoration:none;
							padding:.2em .3em;
							margin:0 10px;
							border-radius: .3em;
							&:hover{
								opacity: .75;
							}
						}
					}
					dd{
						text-align:left;
						padding:0.7em 0.5em 0.5em 0.5em;
						border-top:1px dashed #CCC;
						span{
							font-size: .9em;
							margin:0 0.5em 0 0;
						}
					}
				}
				p{
					grid-column: 1 / -1;
					background:#EEE;
					padding:15px;
					text-align:left;
					border-radius: .5em;
					font-size: .9rem;
					height:8em;
					overflow-y: scroll;
				}
			}
		}
	}