@charset "utf-8";
	
:root{
}
	
	#sekou_list{
		padding:15px;
		border-radius:10px;
		background:#fffae6;
		ul{
			display:flex;
			justify-content: start;
			gap:.3em 1em;
			flex-wrap:wrap;
			li{
				margin:0 0 0 2em;
				list-style-type: square;
				a{
					color:#5b3c17;
					text-decoration: underline;
					font-size: .9em;
					&:hover{
						text-decoration: none;
					}
				}
			}
		}
	}
	
	#reform_list{
		section{
			margin:30px 0 0 0;
			padding:20px;
			background:#fffae6;
			border-radius: 15px;
			> h2{
				text-align: left;
				span{
					display:inline-block;
					background:rgb(var(--subColor));
					color:white;
					font-size: 1.2rem;
					padding:.2em .5em;
					border-radius:5px;
				}
			}
			> div{
				display:grid;
				grid-template-columns: repeat(2,1fr);
				gap:30px;
				position:relative;
				&::after{
					content:url(grp/arrow_y.png);
					top:0;
					left:50%;
					position:absolute;
					margin-left:-34px;
					rotate: 16deg;
				}
				figure{
					position:relative;
					img{
						border:3px solid white;
					}
				}
				> div{
					&:nth-of-type(1){/*after*/
						figure{
							&:nth-of-type(1){
								rotate:-6deg;
								&::after{
									content:url(grp/after.png);
									position:absolute;
									left:-10px;
									top:-10px;
								}
							}
							&:nth-of-type(2){
								rotate:3deg;
								margin-top:-30px;
								text-align: right;
							}
						}
						p{
							margin:20px auto 0 auto;
							a{
								display:inline-block;
								background:white;
								border:1px solid rgb(var(--subColor));
								padding:.5em .7em;
								color:rgb(var(--baceFontColor));
								border-radius:5px;
								&::after{
									display: inline-block;
            			content: "";
            			background-color: rgb(var(--subColor));
        
            			-webkit-mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>');
            			-webkit-mask-size: contain;
            			mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>');
            			mask-size: contain;
            			mask-repeat: no-repeat;
        
            			height: 1em;
            			width: 1em;
									vertical-align:middle;
									margin:0 0 0 .3em;
								}
								&:hover{
									background:rgb(var(--subColor));
									color:white;
									&::after{
										background:white;
									}
								}
							}
						}
					}
					&:nth-of-type(2){/*before*/
						position:relative;
						figure{
							rotate:6deg;
							&::after{
								content:url(grp/before.png);
								position:absolute;
								right:-10px;
								top:-10px;
							}
						}
						p{
							background:white;
							padding:20px;
							text-align: left;
							margin:20px auto 0 auto;
							border-radius:5px;
						}
					}
				}
				&:nth-of-type(2){
					margin-top:50px;
				}
			}
		}
		@media (max-width: 768px) {
			section{
				> div{
					display:block;
					&::after{
						content:"";
					}
					figure{
					}
					> div{
						&:nth-of-type(1){/*after*/
							margin-top:30px;
							figure{
								&:nth-of-type(1){
									rotate:0deg;
									&::after{
										content:url(grp/after.png);
										position:absolute;
										left:50%;
										top:-20px;
										rotate:6deg;
										margin-left:-85px;
									}
								}
								&:nth-of-type(2){
									rotate:0deg;
								}
							}
						}
						&:nth-of-type(2){/*before*/
							position:relative;
							margin:30px auto 0 auto;
							figure{
								rotate:0deg;
								&::after{
									position:absolute;
									left:50%;
									right:auto;
									margin-left:-85px;
									top:-30px;
									rotate:-20deg;
								}
							}
						}
					}
				}
			}
		}
	}