@charset "utf-8";

@import url("style/variables.css");/*変数定義*/
	
:root{
}
#preamble{
	main{
		background:none;
		padding:0;
		box-shadow: none;
	}
	@media (max-width: 860px) {
		padding:20px 20px 0 20px;
	}
}

#top_img{
	width: 100%;
  aspect-ratio: 24 / 6;
  background: url(grp/top_img.jpg);
  background-size: cover;
  background-position: center center;
	position:relative;
	> div{
		position:absolute;
		bottom:20px;
		right:20px;
		width:100%;
		display:flex;
		justify-content: end;
		gap:20px;
		a{
			font-size: 1.8rem;
			color:white;
			padding:.5em 1em;
			border-radius: 10px;
			border:3px solid white;
			width:250px;
			svg{
				fill:white;
			}
			span{
				display:block;
			}
			&:nth-of-type(1){
				background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
				&:hover{
					background: linear-gradient(45deg, rgba(156,56,187,1) 0%,rgba(194,49,134,1) 50%,rgba(229,61,93,1) 70%,rgba(254,212,117,1) 100%);
				}
			}
			&:nth-of-type(2){
				background:#00ac0d;
				&:hover{
					background:#0c8b01;
				}
			}
		}
	}
	@media (max-width: 1200px) {
		aspect-ratio: 12 / 5;
  	background: url(grp/top_img_m.jpg);
		background-size: cover;
  	background-position: center center;
		position:relative;
		> div{
			justify-content: center;
		}
	}
	@media (max-width: 700px) {
		aspect-ratio: 7 / 5;
  	background: url(grp/top_img_s.jpg);
  	background-size: cover;
  	background-position: center center;
		position:relative;
		> div{
			position:absolute;
			bottom:20px;
			width:calc(100% - 40px);
			display:grid;
			grid-template-columns: repeat(2,1fr);
			gap:20px;
			a{
				width:auto;
				font-size: 1.5rem;
			}
		}
	}
	@media (max-width: 500px) {
		> div{
			a{
				font-size: 1.2rem;
			}
		}
	}
}

.slideshow{
	width:min(960px,100%);
	margin:0 auto;
	> div{
		a{
			font-family: var(--font-family-minchou);
			font-size: 2rem;
			color:white;
			text-shadow: 0 0 3px #333;
		}
		&:nth-of-type(1){
			display:grid;
			grid-template-columns: 3fr 2fr;
			gap:20px;
			p{
				padding-bottom:80px;
				align-self: center;
				font-size: 2rem;
				font-family: var(--font-family-minchou);
			}
			a{
				&::after{
					content:"土木";
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					-webkit-transform: translate(-50%, -50%);
					-ms-transform: translate(-50%, -50%);
				}
			}
		}
		&:nth-of-type(2){
			> div{
				margin:-50px auto 0 auto;
				width:40%;
				a{
					&::after{
						content:"建築";
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						-webkit-transform: translate(-50%, -50%);
						-ms-transform: translate(-50%, -50%);
					}
				}
			}
		}
		&:nth-of-type(3){
			margin-top:-50px;
			display:grid;
			grid-template-columns: 2fr 3fr;
			gap:20px;
			a{
				&::after{
					content:"住宅";
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					-webkit-transform: translate(-50%, -50%);
					-ms-transform: translate(-50%, -50%);
				}
			}
		}
	}
	@media (max-width: 768px) {
		> div{
			a{
				display:block;
			}
			&:nth-of-type(1){
				display:block;
				p{
					padding-bottom:50px;
				}
			}
			&:nth-of-type(2){
				> div{
					width:min(60%,100%);
				}
			}
			&:nth-of-type(3){
				display:block;
				display:flex;
				flex-wrap:wrap;
				justify-content: end;
			}
		}
	}
}

.slide-container {
	position: relative;
	width: 100%;  /* スライドの幅 */
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 20px;
	.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 3s ease-in-out; /* フェードイン・フェードアウトの速度を3秒に設定 */
	}
	@media (max-width: 768px) {
		width:min(60%,100%);
			aspect-ratio: 1 / 1;
	}
}
	
#breadcrumb{
	display:none;
}

#top_banner{
	margin:0 auto 50px auto;
	display:grid;
	grid-template-columns: repeat(auto-fill,minmax(min(300px,100%),1fr));
	gap:20px;
	> div{
		figure{
		a{
			display:block;
			&:hover{
				img{
					opacity: .75;
				}
			}
		}
	}
	aside{
		text-align: right;
		margin:.5em auto 0 auto;
		a{
			display:inline-block;
			padding:.3em .5em;
			background:orange;
			color:white;
			font-size: 1.1em;
			border-radius: 5px;
			svg{
				fill:white;
			}
			&:hover{
				background:orangered;
			}
		}
	}
	}
}

#kouken{
	font-size: 2rem;
	font-family: var(--font-family-minchou);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .3em;
	display:none;
}

#pattern2{/*pattern2*/
	display:grid;
	grid-template-columns: repeat(3,1fr);
	gap:30px;
	margin:40px auto 0 auto;

	a{
		display:block;
		figure{
			position:relative;
			span{
				display:block;
				aspect-ratio: 1 / 1;
        position:relative;
        overflow: hidden;
				border-radius: 10px;
				img{
          min-width:100%;
					min-height:100%;
					object-fit: cover;
					position: absolute;
					top: 50%;
					transform: translate(-50%, -50%);

					filter: contrast(0.7);
        }
			}
			figcaption{
				position: absolute;
    		top: 50%;
    		left: 50%;
    		transform: translate(-50%, -50%);
    		-webkit-transform: translate(-50%, -50%);
    		-ms-transform: translate(-50%, -50%);

				font-size: 2.3rem;
				font-weight: 600;
				color:white;
				text-shadow: 0 0 3px #333;
			}
		}
		&:hover{
			figure{
				span{
					img{
						filter: saturate(120%);
					}
				}
			}
		}
	}
}

#pattern3{/*pattern3*/
	margin:40px auto 0 auto;
	display:grid;
	grid-template-areas: 
		"A A A B B"
		"A A A C C";
	gap:3px;

	aspect-ratio: 4 / 2;
	width:100%;
	height:auto;
	a{
		display:block;
		height:100%;
		width:100%;
		figure{
			width: 100%;
  		height: 100%;
  		margin: 0;
			position:relative;
			span {
				display: block;
  			position: relative;
  			width: 100%;
  			height: 100%; /* figcaption の高さを引いた値に調整 */
  			overflow: hidden;
				img {
					position: absolute;
					top: 50%;
					left: 50%;
					min-width: 100%;
					min-height: 100%;
					object-fit: cover;
					transform: translate(-50%, -50%);

					filter: contrast(0.7);
				}
			}
			figcaption{
				position: absolute;
    		top: 50%;
    		left: 50%;
    		transform: translate(-50%, -50%);
    		-webkit-transform: translate(-50%, -50%);
    		-ms-transform: translate(-50%, -50%);

				font-size: 2.3rem;
				font-weight: 600;
				color:white;
				text-shadow: 0 0 3px #333;
			}
		}
		&:nth-of-type(1){
			grid-area: A;
		}
		&:nth-of-type(2){
			grid-area: B;
		}
		&:nth-of-type(3){
			grid-area: C;
		}
		&:hover{
			figure{
				span{
					img{
						filter: saturate(120%);
					}
				}
			}
		}
	}
}

#jigyou{
	width:min(900px,100%);
	margin:0 auto;
	map{
		area{
			cursor: pointer;
		}
	}
}

#infobox{
	margin:40px auto 0 auto;
	display:grid;
	grid-template-columns: 200px 1fr;
	gap:30px;
	align-items: center;
	h2{
		font-size: 1.2rem;
		font-family: var(--font-family-minchou);
		position:relative;
		padding:0 0 5px 0;
		&::before{
			content:"";
			height:1px;
			width:2em;
			position:absolute;
			bottom:0;
			left:50%;
			margin-left:-1em;
			background:#333;
		}
	}
	ul{
		border-bottom:1px solid silver;
		li{
			display:grid;
			grid-template-columns: 7em 1fr;
			gap:10px;
			padding:15px;
			border-top:1px solid silver;
			time{
			}
			div{
				text-align: left;
			}
		}
	}
}

#aisatu{
	margin:80px auto 0 auto;
	background:white;
	border:1px solid silver;
	border-radius: 10px;
	padding:30px;
	> * + *{
		margin-top:1em;
	}
	h2{
		font-size: 1.4rem;
		font-weight: 600;
	}
	p{
		text-align: left;
	}
	aside{
		text-align: right;
		font-size: 1.2rem;
		font-weight: 600;
		span{
			font-size: 1rem;
			margin:0 .3em 0 0;
		}
	}
	@media (max-width: 768px) {
		margin-top:50px;
	}
}