@charset "utf-8";

:root{
}

#profile{
	width:var(--container-width);
	margin:0 auto;
	> section{
		> div{
			&:nth-of-type(1){
			display:grid;
			grid-template-columns: repeat(2,1fr);
			gap:30px;
			align-items: center;
			figure{
				padding:10px;
				position:relative;
				img{
					box-shadow: 0 0 3px 1px #eee;
				}
				&::before{
					content:url(grp/waku_flowr-1.png);
					position:absolute;
					top:0;
					left:0;
				}
				&::after{
					content:url(grp/waku_flowr-2.png);
					position:absolute;
					bottom:0;
					right:0;
				}
			}
			div{
				h3{
					font-family: var(--font-family-minchou);
					font-size: 1.3em;
					font-weight: 500;
					color:rgb(var(--mainColor));
				}
				ul{
					display:inline-block;
					margin:30px auto 0 auto;
					border-bottom:1px dotted silver;
					li{
						display:grid;
						grid-template-columns: 7em 1fr;
						align-items: center;
						border-top:1px dotted silver;
						padding:.7em 0;
						p{
							padding:0 1em;
							&:nth-of-type(2){
								text-align: left;
								span{
									font-size: 1.2em;
									font-weight: 500;
								}
							}
						}
					}
				}
			}
			}
			&:nth-of-type(2){
				margin:3em auto 0 auto;
				display:grid;
				grid-template-columns: 2fr 1fr;
				gap:1em;
				align-items: start;
				iframe{
					width:100%;
					height:min(500px,90vh);
				}
				> div{
					background:#f8f7eb;
					border-radius: .5rem;
					padding:1em;
					figure{
						span{
							display:block;
							background:white;
							border-radius: .5rem;
							overflow: hidden;
							width:min(680px,100%);
							margin:0 auto;
							border:1px solid silver;
						}
						figcaption{
							font-size: 1.1em;
							font-weight: 400;
							margin:.7em auto 0 auto;
						}
					}
					p{
						margin:.5em auto 0 auto;
					}
				}
			}
		}
	}
	@media (max-width: 900px) {
		> section{
			> div{
				&:nth-of-type(1){
					display:block;
					figure{
						width:min(680px,100%);
						margin:0 auto;
					}
					div{
						margin:2em auto 0 auto;
					}
				}
				&:nth-of-type(2){
					display:block;
					div{
						margin-top:2em;
					}
				}
			}
		}
	}
}