@charset "utf-8";
	
:root{
}

/*-----------------------------------------------------	*/
/*	for all						*/
/*-----------------------------------------------------	*/
	/*** main px ***/
	#contact{
		width:min(860px,100%);
		background:white;
		margin:30px auto 0 auto;
		border:1px solid silver;
		padding:40px;
		border-radius:10px;
		article{
			text-align: left;
			display:grid;
			grid-template-columns: 12em 1fr;
			> *{
				padding:20px;
				border-top:1px solid silver;
			}
			> *:nth-child(odd){
				text-align: right;
				border-left:1px solid silver;
				padding-top:calc(20px + .5em);
			}
			> *:nth-child(even){
				border-right:1px solid silver;
				aside{
					font-size: .9rem;
					margin:.3em auto 0 auto;
					&:has(+ *){
						margin:.3em auto;
					}
				}
				aside + label{
					margin-bottom:0;
				}
				&:has(ul){/*チェックやラジオはフレックス*/
					ul{
						
						display:flex;
						justify-content: start;
						gap:.3em 1em;
						flex-wrap:wrap;
						li:has(input){
							input{
								width:auto;
							}
						}
					}
				}
			}
			
			> *:nth-last-child(1),
			> *:nth-last-child(2){
				border-bottom:1px solid silver;
				border-bottom:1px solid silver;
			}
			> *:nth-child(even):not(:nth-child(4n)) {
				background:#f4f4f4;
			}
			> *:nth-child(2n-1):not(:nth-child(4n-1)) {
				background:#f4f4f4;
			}
			> *:nth-child(1){
				margin-top:0;
			}
		}
		@media (max-width: 768px) {
			padding:20px;
			article{
			grid-template-columns: 1fr;
			> *{
				padding:0 ;
				border:none;
			}
			> *:nth-child(odd){
				text-align: left;
				border:1px solid silver;
				border-bottom:none;
				padding:20px 20px 0 20px; 
			}
			> *:nth-child(even){
				border-left:1px solid silver;
				border-right:1px solid silver;
				padding:10px 20px 20px 20px;
			}
		}

		}
	}
	
 
	#tel_fax{
		margin:20px auto 0 auto;
		svg{
			fill:rgb(var(--baceFontColor));
			margin:0 .3em 0 0;
		}
		span{
			font-weight: 600;
			--clamp-min: 20;
			--clamp-max: 25;
			font-size: var(--clamp);
			&:nth-of-type(1){
				margin-right:1em;
			}
			&:nth-of-type(2){
				--clamp-min: 17;
				--clamp-max: 22;
				font-size: var(--clamp);
			}
		}
		br{
			display:none;
		}
		@media (max-width: 768px) {
			span{
				&:nth-of-type(1){
					margin-right:0;
				}
			}
			br{
				display:block;
			}
		}
	}

	#privacy{
		margin:60px auto 0 auto;
		width:860px;
		max-width:calc(100% - 66px);
		padding:30px;
		background:#eee;
		border:3px solid gray;
		height:40vh;
		overflow-x: auto;
		ul{
			li{
				h3{
					font-size: 1.1rm;
				}
			}
		}
		@media (max-width: 1200px) {
			width:auto;
			max-width:none;
		}
		@media (max-width: 768px) {
			padding:20px;
		}
	}

	#top_com{
		text-align:left;
		}
	


/************************不動産**/

#estate_list{
	margin:0 auto;
	> * + *{
		margin-top:50px;
	}
	section{
		position:relative;

		display:grid;
		grid-template-columns: repeat(auto-fill,minmax(min(400px,100%),1fr));
		gap:30px;
		grid-template-areas: "A B";
		figure{
			display:flex;
			justify-content: center;
			gap:10px;
			flex-wrap:wrap;
			grid-area: A;
			a{
				display:block;

				aspect-ratio: 4 / 3;
				position:relative;
        overflow: hidden;
        display:flex;
		    align-items: center;
			  justify-content: center;
				border-radius: 10px;
				background:silver;
				img{
					width:auto;
					height:auto;
					max-width:100%;
					max-height:100%;
					vertical-align: middle;
				}
				&:hover{
					img{
						opacity: .75;
					}
				}
			}
			ul{
				display:grid;
				grid-template-columns: repeat(auto-fill,minmax(min(120px,100%),1fr));
				gap:7px;
			}
		}
		> div{
			grid-area: B;
			h3{
				background:#004080;
				color:white;
				font-weight: 500;
				padding:.3em .7em;
				text-align: left;
				border-radius: 10px;

				--clamp-max: 25;
				--clamp-min: 20;
				font-size: var(--clamp);
			}
			table{
				width:100%;
				background:rgba(255 255 255 /.7);
				margin:1em auto 0 auto;
			tr{
				border-top:1px solid silver;
				th{
					padding:10px;
					text-align: right;
				}
				td{
					padding:10px;
					text-align: left;
				}
				&:last-of-type{
					border-bottom:1px solid silver;
				}
			}
		}
		}
		
		> p{
			position:absolute;
			top:10px;
			right:10px;
		}
	}
	@media (max-width: 900px) {
		section{
			grid-template-columns: 1fr;
			grid-template-areas:
			"B"
			"A";
		}
	}
}

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

#rec_top{
	width:min(860px,100%);
	text-align: left;
	margin:0 auto;
}

#rec_list{
	width:min(860px,100%);
	margin:0 auto;
	
	section{
		background:white;
		padding:30px;
		border-radius: 15px;
		margin-top:50px;
		box-shadow: 0 0 3px 3px #ddd;
		> h3{
			text-align: left;
			font-size: 1.4em;
			font-weight: 500;
			padding-bottom:.2em;
			border-bottom:1px solid #333;
		}
		> ul{
			margin:20px auto 0 auto;
			> li{
				display:grid;
				padding:10px 0;
				grid-template-columns: 10em 1fr;
				h4 + *{
					text-align: left;
				}
				ul{
					display:flex;
					justify-content: start;
					flex-wrap:wrap;
					gap:.3em 1em;
					font-size: .9em;
					margin:.5em auto 0 auto;
					li{
						text-align: left;
						margin-left:2em;
						list-style:decimal;
					}
				}
			}
		}
		aside{
			margin:20px auto 0 auto;
			background:#ffffdf;
			padding:20px;
			border-radius: 15px;
			text-align: left;
			border:1px solid #ffe3a2;
			h4{
				font-weight: 500;
				font-size: 1.2em;
			}
			p{
				margin:.5em auto 0 auto;
			}
		}
	}
	@media (max-width: 860px) {
		section{
			> ul{
				> li{
					display:block;
					h4{
						text-align: left;
						font-weight: 500;

					}
					h4 + *{
						text-align: left;
						margin-top:5px;
					}
				}
			}
		}
	}
}

form{
	div.g-recaptcha{
		> div{
			margin:20px auto 0 auto;
		}
	}
}