@charset "UTF-8";

#footer {
	.footer {
		width: calc(100% - 40px);
		max-width: 1760px;
		margin:0 auto;
		padding-bottom: 100px;
		.footer_recruit {
			background-color: #212121;
			border-radius: 80px;
			padding:150px 100px;
			margin-bottom: 240px;
			.ttl_h2 {
				color:#FFFFFF;
				margin-bottom: 5em;
			}
			ul {
				font-size: 2.4rem;
				display: grid;
				grid-row-gap: 1em;
				justify-items: start;
				li {
					a {
						display: grid;
						grid-template-columns: 9.3em 10.7em .75em;
						align-items: center;
						color:#FFFFFF;
						line-height: 1.5;
						.font_en {
							font-size: 1.5rem;
							color:inherit;
						}
					}
				}
			}
		}
		.footer_inner {
			display: grid;
			grid-template-columns: repeat(3,auto);
			justify-content: space-between;
			align-items: space-between;
			grid-column-gap: 50px;
			.footer_logo {
				img {
					display: block;
					width: 127px;
				}
			}
			.footer_menu {
				max-width: 1000px;
				grid-area: 1/2/3/3;
				display: flex;
				flex-wrap: wrap;
				font-size: 1.4rem;
				gap:60px 40px;
				.parent {
					width: calc(25% - 40px);
					flex-grow: 1;
					&:first-child {
						width: calc(35% - 40px);
					}
					&:nth-child(2) {
						width: calc(40% - 40px);
					}
					&:nth-child(3),&:last-child {
						width: 8em;
					}
					.haschild {
						font-size: 2.0rem;
						color:var(--color_blue);
						display: block;
						icon {
							display: none;
						}
					}
					ul {
						display: grid;
						grid-row-gap: .66em;
						padding-top: 1.75em;
						li {
							a {
								color:#555555;
								line-height: 1.6;
							}
						}
					}
				}
			}
			.footer_entry {
				display: grid;
				font-size: 2.2rem;
				grid-row-gap: .9em;
				align-content: start;
				li {
					a {
						display: grid;
						grid-template-columns: 1fr .8em;
						align-items: center;
						grid-column-gap: .5em;
					}
				}
			}
			.footer_menu2 {
				font-size: 1.4rem;
				display: grid;
				grid-row-gap: 1.2em;
				align-content: end;
				li {
					a {
						display: grid;
						width: 10.5em;
						grid-template-columns: 1fr .8em;
						align-items: center;
					}
				}
			}
			.copyright {
				grid-area: 2/1/3/2;
				font-size: 1.5rem;
				align-self: end;
			}
		}
	}
}

@media screen and (min-width:769px){

	#footer {
		.footer {
			.footer_inner {
				.footer_menu {
					.parent {
						ul {
							display: grid!important;
						}
					}
				}
			}
		}
	}

}

@media (hover:hover) {

	#footer {
		.footer {
			.footer_recruit {
				ul {
					li {
						a {
							img {
								transition: .3s;
							}
							&:hover {
								img {
									transform: translateX(5px);
								}
							}
						}
					}
				}
			}
			.footer_inner {
				.footer_menu {
					.parent {
						ul {
							li {
								a {
									transition: .3s;
									&:hover {
										opacity: .66;
									}
								}
							}
						}
					}
				}
				.footer_entry {
					li {
						a {
							img {
								transition: .3s;
							}
							&:hover {
								img {
									transform: translateX(5px);
								}
							}
						}
					}
				}
				.footer_menu2 {
					li {
						a {
							transition: .3s;
							&:hover {
								opacity: .66;
							}
						}
					}
				}
			}
		}
	}

}

@media screen and (max-width:1500px){
}

@media screen and (max-width:1200px){

	#footer {
		.footer {
			.footer_inner {
				grid-template-columns: repeat(2,auto);
				grid-row-gap: 50px;
				.footer_logo {
					grid-area: 1/1/2/3;
				}
				.footer_menu {
					grid-area: 2/1/4/2;
				}
				.copyright {
					grid-area: 4/1/5/3;
					font-size: 1.5rem;
				}
			}
		}
	}

}

@media screen and (max-width:1024px){

	#footer {
		.footer {
			padding-bottom: 80px;
			.footer_recruit {
				border-radius: 60px;
				padding:100px 60px;
				margin-bottom: 160px;
				ul {
					font-size: 2.2rem;
					li {
						a {
							.font_en {
								font-size: 1.4rem;
							}
						}
					}
				}
			}
			.footer_inner {
				grid-template-columns: 1fr;
				grid-row-gap: 40px;
				.footer_logo {
					grid-area: unset;
				}
				.footer_menu {
					grid-area: unset;
				}
				.footer_entry {
					width: 7em;
				}
				.copyright {
					grid-area: unset;
					font-size: 1.5rem;
					align-self: end;
				}
			}
		}
	}

}

@media screen and (max-width:768px){

	#footer {
		.footer {
			padding-bottom: 60px;
			.footer_recruit {
				border-radius: 40px;
				padding:90px 20px;
				margin-bottom: 90px;
				.ttl_h2 {
					text-align: center;
					justify-items: center;
					margin-bottom: 2.5em;
				}
				ul {
					font-size: 2.2rem;
					grid-row-gap: 1.33em;
					justify-items: unset;
					li {
						a {
							grid-template-columns: 1fr .75em;
							grid-row-gap: .25em;
							padding-bottom: .66em;
							border-bottom:1px solid #000000;
							.font_en {
								font-size: 1.2rem;
								color:inherit;
								grid-area: 1/1/2/3;
							}
						}
					}
				}
			}
			.footer_inner {
				grid-row-gap: 50px;
				.footer_logo {
					display: none;
				}
				.footer_menu {
					display: grid;
					gap:0;
					grid-row-gap: 30px;
					.parent {
						width: 100%;
						&:first-child,&:nth-child(2),&:nth-child(3),&:last-child {
							width: 100%;
						}
						.haschild {
							display: grid;
							grid-template-columns: 1fr .66em;
							cursor: pointer;
							font-size: 2.0rem;
							.icon {
								height: 1em;
								position: relative;
								&::before,&::after {
									content:'';
									display: block;
									width: 100%;
									height: 1px;
									position: absolute;
									left: 50%;
									top:50%;
									transform: translate(-50%,-50%) rotate(0deg);
									background-color: var(--color_blue);
									transition:.3s;
								}
								&::after {
									transform: translate(-50%,-50%) rotate(90deg);
									width: 100%;
								}
							}
						}
						&.open {
							.haschild {
								.icon {
									&::before {
										transform: translate(-50%,-50%) rotate(90deg);
										width: 66%;
										opacity: 0;
									}
									&::after {
										transform: translate(-50%,-50%) rotate(180deg);
										width: 100%;
									}
								}
							}
						}
						ul {
							display: none;
							padding-top: 1.5em;
							padding-left: 1em;
							li {
								&:not(:last-child) {
									margin-bottom: .66em;
								}
							}
						}
					}
				}
			}
		}
	}

	.fixbtn {
		position: sticky;
		width: 100%;
		z-index: 10;
		left: 0;
		bottom:30px;
		.fixbtn_entry {
			font-size: 1.8rem;
			color:#FFFFFF;
			text-align: center;
			width: 100%;
			max-width: 320px;
			border-radius: 1.5em;
			height: 3em;
			background-color: var(--color_blue);
			padding:0 1.33em 0 2.2em;
			display: grid;
			grid-template-columns: 1fr .8em;
			align-items: center;
			margin:0 auto;
    }
	}

}