@charset "utf-8";

:root{
}
	
	#page_title:after{
		content:url("grp/page_title_img.png");
	}
	
	#reform_list{
		/*background:#F2F2F2;*/
		margin:0 auto;
		width:min(660px,100%);
		padding-bottom:20px;
		ul{
			li{
				margin:40px 0 0 0;
				padding:0 0 30px 0;
				text-align:left;
				position:relative;
				a{
					text-decoration:none;
					color:#333;
					h3{
						background:#fffae6;
						margin:0 0 0 150px;
						padding:.5em .5em .5em 25px;
						font-size:1em;
						font-weight: 500;
						position:relative;
						border-radius: 0 10px 0 0;
						img{
							position:absolute;
							top:-17px;
							left:20px;
							
						}
					}
					p{
						background:#fffae6;
						border-top:2px solid white;
						margin:0 0 0 150px;
						padding:.5em .5em .5em 25px;
						border-radius: 0 0 10px 0;
						font-size: .9em;
					}
					> img{
						width:160px;
						position:absolute;
						top:-10px;
						left:0;
						border:2px solid white;
						transform: rotate(356deg) scale(1) skew(1deg) translate(0px);
						-webkit-transform: rotate(356deg) scale(1) skew(1deg) translate(0px);
						-moz-transform: rotate(356deg) scale(1) skew(1deg) translate(0px);
						-o-transform: rotate(356deg) scale(1) skew(1deg) translate(0px);
						-ms-transform: rotate(356deg) scale(1) skew(1deg) translate(0px);
						-moz-box-shadow: 2px 3px 5px #939393;
						-webkit-box-shadow: 2px 3px 5px #939393;
						box-shadow: 2px 3px 5px #939393;
					}
					&:hover{
						color:#999;
					}
				}
			}
		}
		@media (max-width: 860px) {
			padding:0 0 0 0;
			margin:0 0 0 0;
			width:100%;
			ul{
				display:grid;
				gap:20px;
				grid-template-columns: repeat(auto-fill,minmax(min(250px,100%),1fr));
				margin:20px auto 0 auto;
				
				li{
					margin:0;
					padding:0;
					border-top:3px solid silver;
					border-radius: 10px;
					overflow: hidden;
					border-radius: 0;
					
					a{
						h3{
							margin:0 auto;
							padding:20px 10px 0px 10px;
							background:none;
							font-weight: 500;
						}
						p{
							margin:10px 20px 0 20px;
							background:none;
							padding:0 0 0 0;
						}
						> img{
							width:auto;
							position:static;
							top:auto;
							left:auto;
							transform:none;
							box-shadow: none;
							border:none;
							margin:10px auto 0 auto;
							border-radius: 10px;
						}
					}
				}
			}
		}
	}


#preamble {
	& main:has(> div > nav) {
		& > div {
			&:nth-of-type(2) {
				p#reform_sitai{
					font-size:15px;
					text-align:left;
					font-weight:bold;
					color:#1A3562;
					padding:5px 0 7px 0;
					position:relative;
					a{
						position:absolute;
						top:0;
						right:0;
						display:block;
						font-size:13px;
						text-decoration:none;
						padding:.3em .5em;
						background:#F5F5F5;
						color:#333;
						&::before{
							display: inline-block;
								content: "";
								background-color: rgb(var(--mainColor));
						
								-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="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 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="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>');
								mask-size: contain;
								mask-repeat: no-repeat;
						
								height: 1em;
								width: 1em;
								margin:0 .3em 0 0;
								vertical-align: middle;
						}
					}
				}
				p#reform_catch{/*キャッチ*/
					text-align: left;
					font-size: 1.1em;
					font-weight: 500;
				}
				> img{
					margin:30px auto 0 auto;
					border-radius: 15px;
					& + p{
						text-align: left;
						width:min(640px,100%);
						margin:20px auto 0 auto;
						text-align: left;
					}
				}
				section{
					margin:20px auto 0 auto;
					border:1px solid #eee;
					border-radius: 15px;
					overflow: hidden;
					padding-bottom:20px;
					> * + *{
						margin:20px 20px 0 20px;
					}
					h2{
						text-align:left;
						background:url(grp/hougan.png) center center;
						padding:.5em 20px;
						border:1px solid #eee;
						font-size:1.2em;
						font-weight:500;
						color:#534E35;
						&::before{
							display: inline-block;
							content: "";
							background-color: rgb(var(--baceFontColor));
					
							-webkit-mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M64 80c-8.8 0-16 7.2-16 16l0 320c0 8.8 7.2 16 16 16l320 0c8.8 0 16-7.2 16-16l0-320c0-8.8-7.2-16-16-16L64 80zM0 96C0 60.7 28.7 32 64 32l320 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></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 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M64 80c-8.8 0-16 7.2-16 16l0 320c0 8.8 7.2 16 16 16l320 0c8.8 0 16-7.2 16-16l0-320c0-8.8-7.2-16-16-16L64 80zM0 96C0 60.7 28.7 32 64 32l320 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>');
							mask-size: contain;
							mask-repeat: no-repeat;
					
							height: 1em;
							width: 1em;
							margin:0 .3em 0 0;
							vertical-align: -2px;
						}
					}
					> img{
						border-radius: 15px;
						width:calc(100% - 40px);
					}
					> ul{
						display:grid;
						grid-template-columns: repeat(auto-fill,minmax(min(300px,100%),1fr));
						gap:20px;
						align-items: center;
						> li{
							img{
								border-radius: 10px;
							}
							> * + *{
								margin-top:10px;
							}
						}
					}
					> p{
						text-align: left;
						margin:10px auto 0 auto;
						width:min(640px,100%);
					}
					div.column{
						display:grid;
						gap:20px;
						&:has(> figure + p){/*左に写真　その隣に文字*/
							grid-template-columns: 2fr 3fr;
							@media (max-width: 860px) {
								grid-template-columns: repeat(auto-fill,minmax(min(300px,100%),1fr));
							}
						}
						figure{
							img{
								border-radius: 10px;
							}
							figcaption{
								font-size: .9em;
								margin:.5em auto 0 auto;
							}
						}
						p{
							text-align: left;
						}
						
				}
				> div{
					display:grid;
					grid-template-columns: repeat(2,1fr);
					gap:20px;
				}
			}
		}
	}
	}
}