@charset "utf-8";

#oubo{/*サイドの求人応募*/
   padding:10px 0;
   > a{
        background:#f95700 !important;
        color:white !important;
        font-weight: 500;
        border-radius:5px;
        text-align: center;
        svg{
            margin:0 .3em 0 0;
            fill:white;
            vertical-align: middle;
        }
    }
}

#job_list{
    display:none;
    ul{
        display:grid;
        grid-template-columns: repeat(3,1fr);
        gap:20px;
        li{
            padding:15px;
            border:1px solid silver;
            border-radius:10px;
            a{
                display:block;
                text-decoration: none;
                color:rgb(var(--baceFontColor));
                figure{
                    img{
                        border-radius:10px;
                    }
                }
                h3{
                    margin:10px auto 0 auto;
                    font-weight: 500;
                }
                p{
                    margin:5px auto 0 auto;
                    text-align: left;
                    @include font-size(14);
                }
                aside{
                    margin:10px auto 0 auto;
                    padding:10px 0 0 0;
                    border-top:1px solid silver;
                    @include font-size(14);
                    text-align: left;
                }
                &:hover{
                    h3{
                        color:rgb(var(--mainColor));
                    }
                    figure{
                        img{
                            @include opacity(0.75);
                        }
                    }
                }
            }
            
        }
    }
}

.article_box{/*求人詳細*/
    i{
        font-style:normal;
    }
    > h2{
        margin-bottom:20px;
	    font-size: 1.3em;
	    text-align: left;
	    background:rgba(var(--mainColor) / .1);
	    padding:.3em .5em;
	    border-radius:10px;
	    font-weight: 500;
        margin:30px auto 0 auto;
        span{
            display:block;
            font-size: .8em
        }
        i{
            @include font-size(18);
        }
        &.title_top{
            margin-top:0;
        }
    }
    hr{
        margin:30px auto;
        border-top:3px dotted silver;
    }
    > ul{
        display:flex;
        justify-content: start;
        gap:10px;
        margin:20px auto 0 auto;
        > li{
            padding:.3em .5em;
            background:#fff0c1;
            border-radius:10px;
            font-weight: 500;
            color:red;
            font-size: 1.1em;
        }
    }
    > div{/*詳細*/
        margin:30px auto 0 auto;
        border:1px solid silver;
        padding:30px;
        border-radius:10px;
        background:#fffeea;
        > h3{
            font-weight: 500;
            font-size: 1.2em;
        }
        > ul{
            margin:20px auto 0 auto;
            border-bottom:1px solid silver;
            > li{
                display:grid;
                grid-template-columns: 10em 1fr;
                padding:15px 10px;
                gap:1em;
                border-top:1px solid silver;
                h3{
                    font-weight: 500;
                    color:#f95700;
                }
                div{
                    text-align: left;
                }
            }
        }
        &:nth-of-type(1){
            margin-top:20px;
        }
        > aside{
            background:#337d44;
            border-radius:10px;
            color:white;
            padding:20px;
            margin:20px auto 0 auto;
            svg{
                fill:white;
            }
            > div{
                display:grid;
                grid-template-columns: auto auto;
                gap:20px;
                justify-content: center;
                align-items: center;
                > p{
                    svg{
                        vertical-align: middle;
                        margin:0 .3em 0 0;
                        
                    }
                    span{
                        a{
                            color:white;
                            font-size: 1.3em;
                            font-weight: 500;
                        }
                    }
                }
                > div{
                    text-align: left;
                    h3{

                    }
                    p{
                        @include font-size(22,28);
                        font-weight: 500;
                    }
                }
            }
            > p{
                margin:10px auto 0 auto;
            }
        }
    }
    > p{
        margin:30px auto 0 auto;
        a{
            display:inline-block;
            font-size: 1.2em;
            text-decoration: none;
            font-weight: 500;
            padding:7px 15px;
            border:2px solid rgb(var(--mainColor));
            color:rgb(var(--mainColor));
            background:rgba(rgb(var(--mainColor)),.06);
            border-radius:10px;
            &:hover{
                background:#ffffc6;
            }
        }
    }
    @media (max-width: 1200px) {
        > div{
            > ul{
                > li{
                    display:block;
                    h3{
                        text-align: left;
                    }
                    p{
                        margin:5px auto 0 auto;
                    }
                }
            }
            > aside{
                > div{
                    display:block;
                    
                    p{
                        text-align: center;
                    }
                    > div{
                        text-align: center;
                    }
                }
            }
        }
    }
}

#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{
						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) {
			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;
		}
	}

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