@charset "utf-8";

:root{
}

#breadcrumb{
	display:none;
}

#top_img{
	aspect-ratio: 5 / 2;
	background:#eee;
	background: url(../../img/top/top_img.jpg);
  background-size: cover;
  background-position: center center;

	display: grid;
  place-items: center;
	cursor: default;
	div{
		p{
			--clamp-max: 43;
			--clamp-min: 30;
			font-size: var(--clamp);
			text-shadow: 0 0 .2em #333;
			color:white;
			font-weight: 600;
			span{
				font-size: .8em;
			}
		}
		aside{
			margin:.5rem auto 0 auto;
			display:inline-block;
			background:rgba(57 88 151 / .7);
			color:white;
			font-weight: 600;
			--clamp-max: 39;
			--clamp-min: 27;
			font-size: var(--clamp);
			padding:.1em .5em;
			box-shadow: 0 0 2px 2px white;
		}
	}
	@media (max-width: 600px) {
		aspect-ratio: 4 / 3;
		background:#eee;
		background: url(../../img/top/top_img.jpg);
  	background-size: cover;
  	background-position: center center;
	}
	@media (max-width: 480px) {
		aspect-ratio: 3 / 4;
		background:#eee;
		background: url(../../img/top/top_img.jpg);
  	background-size: cover;
  	background-position: center center;
	}
}

#infobox{
	ul{
		li{
			display:grid;
			grid-template-columns: 7em 1fr;
			gap:10px;
			padding:10px 0;
			time{
			}
			div{
				text-align: left;
				a{
					text-decoration: revert;
					@media (any-hover: hover) {
						&:hover {
							text-decoration: none;
						}
					}
				}
			}
		}
	}
}

.normal_box{
	padding:6rem 0;
	> *{
		width:var(--container-width);
		margin:0 auto;
	}
}

#boshu{/*地域の「安心・安全」を守る消防設備点検・工事スタッフ（正社員）を募集しています。*/
	> section{
		position:relative;
		&::before{
			/*content:url(../../img/top/car.png);*/
			position:absolute;
			bottom:-6.4rem;
			right:0;
		}
		> div{
			display:grid;
			grid-template-columns: 2fr 3fr;
			gap:2rem;
			figure{
				border-radius: .5em;
				overflow: hidden;
			}
			p{
				font-size: 1.2em;
				text-align: left;
				line-height: 1.8em;
				font-weight: 400;
			}
		}
	}
	@media (max-width: 600px) {
		> section{
			> div{
				display:block;
				figure{
					width:min(450px,100%);
					margin:0 auto;
				}
				p{
					margin:1rem auto 0 auto;
				}
			}
		}
	}
}

#tokuchou{/*当社の特徴*/
	background: url(../../img/top/sky_load.jpg);
  background-size: cover;
  background-position: center center;
	background-attachment: fixed;
	article{
		> h2{
			color:white;
			text-shadow: 0 0 3px #333;
		}
		> div#donna{
			display:grid;
			grid-template-columns: repeat(3,1fr);
			gap:1rem;
			section{
				border:3px solid #333;
				border-radius: .5rem;
				padding:1.5rem;
				background:white;
				display: grid;
				grid-template-rows: subgrid;
				grid-row: span 3;
				gap:1rem;
				position:relative;
				figure{
					aspect-ratio: 3 / 2;
					border-radius: .5rem;
					overflow: hidden;
				}
				h3{
					font-size: 1.2em;
					font-weight: 500;
					text-align: left;
					span{
						position:absolute;
						top:.5em;
						left:.5em;
						display:inline-block;
						width:2em;
						height:2em;
						background:#333;
						color:white;
						border-radius: 50%;
						text-align: center;
						padding-top:.2em;
					}
				}
				p{
					text-align: left;
				}
			}
		}
		> aside{
			margin:3rem auto 0 auto;
			text-align: left;
			color:white;
			text-shadow: 0 0 3px #333;
			h3{
				font-size: 1.5em;
				font-weight: 500;
			}
			p{
				font-size: 1.1em;
				font-weight: 400;
				margin:.5em auto 0 auto;
			}
		}
		
	}
	@media (max-width: 900px) {
		article{
			> div#donna{
				grid-template-columns: repeat(auto-fill,minmax(min(300px,100%),1fr));
				figure{
					width:min(450px,100%);
					margin:0 auto;
				}
			}
		}
	}
}

div.slide_ph{/*トップバナーズ*/
		margin:50px auto 0 auto;
		width: 100%;
  	overflow: hidden;
		ul{
			display: flex;
  		width: max-content;
			gap:1rem;
  		animation: slide 60s linear infinite; /* 流れる速度はここ */
			&:hover {
      	animation-play-state: paused;
    	}
			li{
				width: 320px;     /* 好きな幅に調整 */
  			flex-shrink: 0;
				background:white;
				a{
					&:hover{
						img{
							opacity: .75;
						}
					}
				}
			}
		}
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); 
    /* ←画像2セット分のうち、ちょうど1セット分だけ左へ動かす */
  }
}

#jinzai{/*求める人材*/
	article{
		> p{
			display:inline-block;
			text-align: left;
			font-size: 1.2em;
			font-weight: 400;
		}
		> div{
			margin:2rem auto 0 auto;
			display:grid;
			grid-template-columns: repeat(auto-fill,minmax(min(300px,100%),1fr));
			gap:1rem;
			section{
				border:3px solid #333;
				padding:2rem 1.5rem;
				background:var(--yellow);
				display: grid;
				grid-template-rows: subgrid;
				grid-row: span 3;
				gap:.5rem;
				position:relative;
				overflow: hidden;
				&::before{
					content: "";
					width: 6rem;
					height: 6rem;
					background: #333;
    			position: absolute;
    			top: -4em;
    			left: -4em;
    			z-index: 1;
					transform: rotate(45deg);
				}
				h3{
					font-size: 1.3em;
					text-align: left;
					font-weight: 500;
					inline-size: fit-content;
					margin-inline: auto;
					text-align: left;
				}
				p{
					text-align: left;
					font-weight: 400;
				}
			}
			
		}
		> aside{
			margin:4rem auto 0 auto;
			font-size: 1.4em;
			font-weight: 400;
			line-height: 1.8em;
			h3{
				font-size: 1.3em;
				font-weight: 600;
				text-decoration: underline;
				text-decoration-thickness: 1px;
				text-underline-offset: .3em;
			}
			p{
				margin:.7em auto 0 auto;
			}
		}
	}
}

#day_flow{/*一日の業務の流れ*/
	background:#0c9ddc;

	background: url(../../img/top/sky.jpg);
  background-size: cover;
  background-position: center center;

	background-attachment: fixed;
	section{
		> h2.section_title{
			font-weight: 600;
			color:white;
			text-shadow: 0 0 3px #333;
		}
		> p{
			display:inline-block;
			text-align: left;
			font-size: 1.2em;
			font-weight: 400;
			color:white;
			text-shadow: 0 0 3px #333;
		}
	}
	
	div#day_flow_dl{
		display:grid;
		grid-template-columns: repeat(auto-fill,minmax(min(400px,100%),1fr));
		gap:5px;
		margin:3rem auto 0 auto;
		dl{
			display:grid;
			grid-template-columns: 1fr;
			gap:5px;
			div{
				display:grid;
				grid-template-columns: 6em 1fr;
				padding:1rem;
				gap:.5rem 1rem;
				background:white;
				border-radius: .5em;
				dt{
					text-align: right;
					font-size: 1.5em;
					font-weight: 500;
					
				}
				dd{
					text-align: left;
					h3{
						font-size: 1.5em;
						font-weight: 400;
					}
				}
			}
		}
	}
}

#steps{/*入社後の流れ*/
	display:grid;
	grid-template-columns: repeat(auto-fill,minmax(min(300px,100%),1fr));
	gap:2rem;
	section{
		--title_bg:white;

		background:white;
		border:3px solid;
		h3{
			font-size: 2em;
			font-weight: 600;
			padding:1em .3em;
			background:var(--title_bg);
			img{
				height:1em;
				margin:0 .3em 0 0;
				vertical-align: -.1em;
			}
			span{
				display:block;
				font-weight: 500;
				font-size: .6em;
			}
		}
		p{
			padding:1.5rem;
			text-align: left;
			strong{
				font-weight: 500;
				font-size: 1.1em;
			}
		}
		&:nth-of-type(2){
			--title_bg:#dcf2ff;
		}
		&:nth-of-type(3){
			--title_bg:#b9e5ff;
		}
		&:nth-of-type(4){
			--title_bg:#96d8ff;
		}
		&:nth-of-type(5){
			--title_bg:#73bfff;
		}
	}
	figure{
		align-self: center;
	}
}

#faq{/*よくある質問*/
	border-top:1px solid silver;
	> section{
		> div{
			width:min(860px,100%);
			margin:0 auto;
			details {
    		margin-bottom: 7px;
    		background-color: white;
    		border-radius: 8px;
				border:1px solid silver;
				summary {
    			display: flex;
    			justify-content: space-between;
    	align-items: center;
    	position: relative;
    	padding: 1em 3em 1em 1em;
    	color: #333333;
			font-size: 1.2em;
    	font-weight: 500;
    	cursor: pointer;
			text-align: left;
			&::-webkit-details-marker {
    		display: none;
			}
			&::before,&::after {
				width: 3px;
				height: .9em;
				border-radius: 5px;
				background-color: #008080;
				content: '';

				position: absolute;
				top: 50%;
				margin-top:-.4em;
				right: 1.5em;
			}
			&::before {
				rotate: 90deg;
			}
			&::after {
				transition: rotate .3s;
			}
		}
		&[open] summary::after {
			rotate: 90deg;
		}
		p {
			transform: translateY(-10px);
			opacity: 0;
			margin: 0;
			padding: .3em 2em 1.5em;
			color: #333333;
			transition: transform .5s, opacity .5s;
			font-weight: 400;
			font-size: 1.1em;
			text-align: left;
			strong{
				font-weight: 500;
				font-size: 1.1em;
			}
		}
		&[open] p {
    	transform: none;
    	opacity: 1;
		}
		}
		}
	}
}

#tel_fax{
		margin:1.5em auto 0 auto;
		svg{
			fill:rgb(var(--baceFontColor));
			margin:0 .3em 0 0;
		}
		span{
			font-weight: 600;
			font-size: 1.2em;
			&:nth-of-type(1){
				font-size: 1.2em;
				margin-right:1em;
				a{
					font-size: 1.2em;
					font-weight: 600;
				}
			}
			&: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;
			}
		}
	}

	#inquiry{
		background:url(../../img/top/contact_bg.png);
		background-attachment: fixed;
		
		> article{
			width:min(960px,100%);
			position:relative;
			&::before{
				content:url(../../img/top/c1.png);
				position:absolute;
				bottom:0;
				left:0;
				display:none;
			}
			&::after{
				content:url(../../img/top/c2.png);
				position:absolute;
				bottom:0;
				right:0;
				display:none;
			}
		}
	}

			#contact{
				width:min(860px,100%);
				background:white;
				margin:30px auto 0 auto;
				border:3px solid #333;
				padding:2em;
				border-radius:.7em;
				article{
					text-align: left;
					display:grid;
					grid-template-columns: 12em 1fr;
					> *{
						padding:1.2em;
						border-top:1px solid silver;
					}
					> *:nth-child(odd){
						text-align: right;
						border-left:1px solid silver;
						padding-top:calc(1.2em + .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{
								padding-top:.5em;
								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) {
					article{
						grid-template-columns: 1fr;
						> *{
							padding:0 ;
							border:none;
						}
						> *:nth-child(odd){
							text-align: left;
							border:1px solid silver;
							border-bottom:none;
							padding:1.2em 1.2em 0 1.2em; 
						}
						> *:nth-child(even){
							border-left:1px solid silver;
							border-right:1px solid silver;
							padding:.5em 1.2em 1.2em 1.2em;
						}
					}
				}
			}
			#privacy{
				margin:3em auto 0 auto;
				width:min(860px,100%);
				padding:1.5em;
				background:#efefef;
				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:1.2em;
				}
			}

	form{
	div.g-recaptcha{
		> div{
			margin:1.5em auto 0 auto;
		}
	}
}