// スタイルシート common

@charset "utf-8";

@import "mixin";

html { scroll-behavior: smooth; }

body {
	@include root;
	position: relative;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

img, video {
	max-width: 100%;
	height: auto;
}

//a:hover { opacity: 0.75; }

.default {
	@include contentdefault;
	@include eachcss;
}

body { background-color: #ccc;}

header { }


@function add-px($value) {
	@if (unitless($value)) { @return $value + px; }
	@return $value;
}

@mixin absolute($t:null, $r:$t, $b:$t, $l:$r) {
	position:absolute;
	@if $t { top: add-px($t); }
	@if $r { right: add-px($r); }
	@if $b { bottom: add-px($b); }
	@if $l { left: add-px($l); }
}
@mixin wh($w:null, $h:$w) {
	@if $w { width: add-px($w); }
	@if $h { height: add-px($h); }
}
@mixin borderbox($t:null, $r:$t, $b:$t, $l:$r) {
	box-sizing: border-box;
	@if $t { padding-top: add-px($t); }
	@if $r { padding-right: add-px($r); }
	@if $b { padding-bottom: add-px($b); }
	@if $l { padding-left: add-px($l); }
}

@mixin before_as_image($image_url, $w:null, $h:$w, $display_as:null) {
	content:'';
	@if $w or $h {
		@include wh($w, $h);
	}
	background:url($image_url) center / contain no-repeat;
	@if $display_as { display: $display_as+"";}
}

@mixin obj100($fit_method: cover) {
	@include wh(100%);
	object-fit: $fit_method;
}


div#header {
	position:absolute;
	inset: 30px auto auto 40px;
	z-index:1;
	body.sp_menu & {
		background-color:$basetextcolor;
		inset: 0 0 auto 0;
		height:90px;
		display:flex;
		align-items:center;
		padding-inline:20px 80px;
		box-sizing: border-box;
	}
	@include maxwidth(500){
		body.sp_menu & {
			height:140px;
			padding-top: 50px;
		}
	}
	div.container {
		div.sitename {
			position:relative;
			div.outline {
				color: #FFF;
				text-shadow: 0 0 10px rgba(0, 0, 0, 0.20);
				font-family: "Noto Sans JP";
				font-size: 13px;
				font-weight: 500;
				position:relative;
				inset: 13px auto auto 70px;
				body.sp_menu & {
					position:static;
					font-size: 10px;
					margin-bottom:10px;
					line-height:1.2;
				}
			}
			h1 {
				a {
					display:flex;
					gap: 15px;
					align-items:flex-end;
					span.logomark {
						flex: 55px 0 0;
						body.sp_menu & { flex-basis: 25px; }
					}
					span.logotype {
						flex: auto 0 0;
						margin-bottom:5px;
						img {
							@include wh(auto, 30);
						}
						body.sp_menu & {
							margin-bottom:2px;
							img { height: 25px; }
						}
					}
				}
			}
		}
	}
}

div#gnav {
	position:absolute;
	inset: 52px 30px auto auto;
	display:flex;
	gap: 30px;
	align-items:center;
	z-index:1;
	div.logo {
		text-align:center;
		margin-bottom:30px;
		display:none;
		body.sp_menu & { display:block; }
		span { display:inline-block; vertical-align: bottom;}
		span.logomark img {
			height:55px; width: auto; margin-right:10px;
		}
		span.logotype img {
			height:30px; width:auto;;
		}
	}
	nav {
		ul {
			color: #FFF;
			font-size: 14px;
			font-weight: 700;
			display:flex;
		}
		& > ul {
			gap: 20px;
			& > li {
				flex: 0 0 auto;
				& > ul {
					display:block;
					//clip-path: inset(0 0 100% 0);
					transition: clip-path .25s;
					position:absolute;
					//flex-direction:column;
					background-color: $basetextcolor;
					color:$basecolor;
					padding: 20px 20px;
					top: 45px;
					& > li {
						margin-bottom:.8em;
						&:last-child { margin-bottom:0;}
						& > a {
							display:flex;
							line-height:1.3;
							align-items:center;
							gap: 10px;
							&:before {
								@include before_as_image('../images/icon-disc-white.svg', 5);
							}
							&:hover {
								text-decoration:underline;
							}
						}
					}
				}
				& > a {
					display:flex;
					gap: 7px;
					align-items:center;
					&:after {
						flex: 0 0 10px;
						@include before_as_image('../images/icon-arrow3-right-white.svg', 10);
						position:relative;
						top: 2px;
						display:none;
					}
					&:hover {
						text-decoration:underline;
					}

				}
				&:has( > ul), &.haschild { //.haschildはjsで付与される
					a:after {
						transform: rotateZ(90deg);
						display:block;
					}
					//&.open {
					//	& > ul {
					//		clip-path: inset(0);
					//	}
					//}
				}
			}
		}
	}
	div.contact {
		a {
			display:flex;
			justify-content:center;
			align-items:center;
			gap: 8px;
			@include wh(160, 50);
			background-color: #c30d23;
			color: #fff;
			img {
			}
			span.text {
				font-family: "Noto Sans JP";
				font-size: 13px;
				font-weight: 700;
			}
		}
	}
	body.sp_menu & {
		display:block;
		position:fixed;
		padding: 80px 0;
		inset:0;
		background-color:rgba($basetextcolor, .75);
		//backdrop-filter: blur(12px) grayscale(1);
		color: $basecolor;
		//flex-direction:column;
		//height: 100vh;
		z-index:10;
		overflow:auto;
		box-sizing: border-box;
		nav, div.contact {
			width: 280px;
			margin-inline:auto;
		}
		nav {
			& > ul {
				flex-direction:column;
				gap: 2px;
				& > li {
					& > a {
						gap: 12px;
						flex-direction:row-reverse;
						justify-content:flex-end;
						@include wh(auto, 55);
						background-color:$basecolor;
						color:$basetextcolor;
						padding: 0 15px 2px;
						box-sizing: border-box;
						font-size: 15px;
						&:after {
							display:block;//子ulなしでも表示
							transition: .5s;
							filter: invert(100%);
						}
					}
					& > ul {
						position:static;
						background-color:rgba($themecolor, .8);
						& > li {
							& > a {
							}
						}
					}
					&.open {
						& > a {
							background-color: mix($basecolor, $basetextcolor, .8);
							&:after {
								transform: rotateZ(270deg);
							}
						}
					}
				}
			}
		}
		div.contact {
			margin-top:10px;
			a {
				width: auto;
				height:55px;
				img {
					width:20px;
				}
				span.text {
					font-size: 17px;
				}
			}
		}
		clip-path: inset(0 100% 0 0);
		transition: clip-path .5s;
	}
	body.sp_menu.menu_open & {
		//display:block !important;
		clip-path: inset(0);
	}
	body.sp_menu.admin-bar & {
		top:32px;
	}
}

div#gnavToggleWrapper {
	a#gnavToggle {
		transition: .5s;
		transform: translateY(-70px);
		body.sp_menu & { transform: translateY(0px); }
		position:fixed;
		display:block;
		@include wh(48);
		inset: 22px 15px auto auto;
		body.admin-bar & { top: 54px; }
		@include maxwidth(500){
			top:0;
			right:0;
			@include wh(50);
			body.admin-bar & { top: 32px; }
		}
		z-index:100;
		background-color:$themecolor;
		span.b {
			@include wh(20, 2);
			position:absolute;
			inset:0;
			margin:auto;
			background-color:$themetextcolor;
			&.b1 { transform: translateY(-6px);}
			&.b3 { transform: translateY(6px);}
		}
	}
}

div#gnavContact {
	position:fixed;
	inset: 0 0 auto auto;
	transform: rotateZ(-90deg);
	transform-origin:bottom right;
	top: calc((100vh - 50px - 345px) / 2);
	z-index:9999;
	display:flex;
	gap: 5px;
	width: 345px;
	height: 50px;
	@include maxwidth(500){
		inset: 0 0 auto 0;
		transform: none;
		width: calc(100% - 55px);
		body.admin-bar & {
			top: 32px;
		}
	}
	& > div {
		flex: 0 0 50px;
		height:100%;
		background-color:$accentcolor;
		color:$accenttextcolor;
		a {
			display:flex;
			@include wh(100%);
			align-items:center;
			justify-content:center;
			background-color:$accentcolor;
			transition: .25s;
			&:hover {
				background-color: $themecolor;
			}
		}
		img {
			@include obj100(contain);
			@include wh(22);
		}
	}
	//div.instagram { }
	//div.youtube { }
	//div.mailform { }
	div.tel {
		flex: 1 1 auto;
		a {
			gap: 4px;
			span.icon {
				img {
					width: 16px;
					aspect-ratio: 1/1;
					@include maxwidth(400){ width: clamp(10px, 4vw, 16px); }
				}
			}
			span.num {
				font-size: 18px;
				@include maxwidth(400){ font-size: clamp(10px, 4vw, 18px); }
				font-weight: 700;
			}
		}
	}
}

@keyframes zoomUp {
	0% { transform: scale(1); }
	100% { transform: scale(1.15); }
}
.add-animation {
	// クロスフェードが完全に終わるまでの時間を指定
	// autoplaySpeed4000 speed2000 なら 2000+4000+2000=8000
	// ただし余裕をもって1000程度追加した方がいいかもしれない
	animation: zoomUp 9000ms linear 0s normal both;
}

div#mainVisual {
	height: 100vh;
	body.admin-bar & { height: calc(100vh - 32px); }
	div.container {
		position:relative;
		div.slides {
			&:hover {
				button.slick-arrow {
					clip-path: circle(100%);
				}
			}
			&:after {
				content:'';
				display:block;
				position:absolute;
				inset: 0;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.00) 60%, rgba(0, 0, 0, 0.45) 100%);
				pointer-events: none;
			}
			div.item-slider {
				height:100vh;
				body.admin-bar & { height: calc(100vh - 32px);}
				img {
					@include obj100;
				}
			}
			button.slick-arrow {
				position:absolute;
				z-index:1;
				@include wh(80);
				inset: 0 auto;
				body.sp_menu & { top: 90px; }
				margin:auto;
				color:#fff;
				font-size: 10px;
				font-weight: 500;
				box-sizing: border-box;
				padding-top: 25px;
				background: url(../images/icon-arrow-left-white.svg) left 50% top 40% / 9px auto no-repeat $themecolor;
				border-radius:9999px;
				border:none;
				cursor:pointer;
				clip-path: circle(0%);
				transition: .5s;
				@include maxwidth(800){
					@include wh(50);
					background-size: 7px auto;
				}
				&.slick-prev {
					left: 40px;
					@include maxwidth(800){ left: 10px; }
				}
				&.slick-next {
					right: 120px;
					@include maxwidth(800){ right: 110px; }
					@include maxwidth(500){ right: 10px; }
					background-image: url(../images/icon-arrow-right-white.svg);
					background-position:left 52.5% top 40%;
				}
			}
			ul.slick-dots {
				position: absolute;
				inset: 0 80px 0 auto;
				body.sp_menu & { top: 90px; }
				margin:auto;
				display: flex !important;
				flex-direction: column;
				justify-content: center;
				list-style-type: none;
				z-index:1;
				gap: 12px;
				li {
					button {
						cursor: pointer;
						display: block;
						@include wh(12);
						padding: 0;
						border: none;
						background-color: #fff;
						text-indent: 9999px;
						overflow: hidden;
					}
					&.slick-active button {
						background-color: #c30d23;
					}
				}
				@include maxwidth(800){
					right:75px;
					gap: 10px;
					li {
						button {
							@include wh(10);
						}
					}
				}
				@include maxwidth(500){
					inset: auto auto 31px 130px !important;
					flex-direction: row;
				}
			}
		}
		div.overlay {
			position:absolute;
			inset: auto 18px 119px;
			z-index:1;
			color:#fff;
			text-align:center;
			pointer-events: none;
			body.sp_menu & {
				text-align:initial;
				bottom: 60px;
			}
			p.leadtext1 {
				text-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
				@include ff_en;
				//font-size: 80px;
				font-size: clamp(32px, 5.556vw, 80px);
				font-weight: 400;
				line-height: 110%;
				margin-bottom:10px;
			}
			p.leadtext2 {
				text-shadow: 0 0 10px rgba(0, 0, 0, 0.20);
				font-size: 18px;
				font-size: clamp(14px, 1.25vw, 18px);
				font-weight: 500;
				line-height: 120%;
			}
		}
		div.headerscroll {
			color: #FFF;
			@include ff_en;
			font-size: 14px;
			font-weight: 600;
			a {
				position:absolute;
				inset: auto 0 40px;
				margin:auto;
				background: url(../images/icon-arrow2-down-white.svg) top center / 14px auto no-repeat;
				width:200px;
				box-sizing: border-box;
				display:block;
				text-align:center;
				padding-top:35px;
			}
			body.sp_menu & {
				font-size: 12px;
				font-weight: 500;
				a {
					bottom:30px;
					padding: 0 0 0 15px;
					background: url(../images/icon-arrow2-down-white.svg) top -1px left / 8px auto no-repeat;
					width: auto;
					text-align:initial;
					margin: auto auto auto 20px;
				}
			}
		}
	}
}

div#subpageHeadingVisual {
	div.container {
		height:250px;
		position:relative;
		&:after {
			content:'';
			display:block;
			position:absolute;
			inset:0;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.00) 100%);
		}
		img {
			@include obj100;
		}
	}
}

main { }

*.common_heading {
	span.en {
		&:before {
			content:'';
			display:block;
			@include wh(8);
			background-color: $accentcolor;
			transform: translateX(6px) rotateZ(45deg);
		}
		display:flex;
		flex-direction: column;
		gap: 10px;
		align-items:center;
		@include ff_en;
		font-size: 60px;
		font-weight: 300;
		@include maxwidth(1020) {
			font-size: clamp(32px, 4.167vw , 60px);
		}
	}
	&.larger_on_sp {
		span.en {
			@include maxwidth(1020) {
				font-size: clamp(40px, 4.167vw , 60px);
			}
		}
	}
}

@mixin common_button_pc {
	display:inline-flex;
	gap: 25px;
	align-items:center;
	font-size: 14px;
	font-weight: 700;
	position:relative;
	transition: .35s;
	&:before {
		content:'';
		@include wh(45);
		flex: 0 0 45px;
		background: url(../images/icon-arrow-right-white.svg) 55% / 8px auto no-repeat $themecolor;
	}
	&:hover {
		//&:after {
		//	inset: auto 0 0;
		//}
		padding: 0 20px 0 0;
		// $c: mix($themecolor, $themetextcolor, .75);
		$c: mix($themecolor, $themetextcolor, 1);
		background-color: $c;
		color:$themetextcolor;
		gap: 5px;
		&:before { background-color: $c; }
	}
}
@mixin common_button_pc_ac {
	&:before {
		background-color: $accentcolor;
	}
	// $c: mix($accentcolor, $accenttextcolor, .75);
	$c: mix($accentcolor, $accenttextcolor, 1);
	&:hover {
		background-color: $c;
		color:$accenttextcolor;
		&:before { background-color: $c; }
	}
}

@mixin common_button_sp {
	gap:0 !important;
	justify-content:center;
	//position:relative;
	height: 45px;
	width: 270px;
	max-width:100%;
	background-color:$themecolor;
	color:$themetextcolor;
	padding: 0 35px 2px;
	box-sizing: border-box;
	line-height:1.3;
	&:before {
		position:absolute;
		@include wh(13);
		inset: 0 auto 1px 14px;
		background-position: center;
		background-size: contain;
		margin-block:auto;
		background-color:transparent !important;
		transition: .25s;
	}
	&:hover {
		padding: 0 35px 2px;
		$c: mix($themecolor, $themetextcolor, .75);
		background-color:  $c !important;
		&:before {
			left: 20px;
		}
	}
}
@mixin common_button_sp_ac {
	//background-color:$accentcolor !important;
	//color:$accenttextcolor;
	background-color: $accentcolor;
	color:$accenttextcolor;
	&:hover {
		$c: mix($accentcolor, $accenttextcolor, .75);
		background-color:  $c !important;
	}
}

*.common_button { // 付与した要素が対象
	@include common_button_pc;
	&.accentcolor { @include common_button_pc_ac; }
	@include maxwidth(1020){
		@include common_button_sp;
		&.accentcolor { @include common_button_sp_ac; }
	}

}
*.common_buttons { // 領域内のaが対象
	a { @include common_button_pc; }
	&.accentcolor {
		a { @include common_button_pc_ac; }
	}
	@include maxwidth(1020){
		a { @include common_button_sp; }
		&.accentcolor {
			a { @include common_button_sp_ac; }
		}
	}
}

div#content {

	section { }

	// サブページ
	div#subpageTopicPath {
		position:relative;
		background-color:$basecolor;
		color: $basetextcolor;
		div.container {
			@include ff_en;
			position:absolute;
			top: 175px;
			left: calc((100% - 900px) / 2 - 80px);
			font-size: 16px;
			font-weight: 600;
			transform: rotateZ(90deg);
			transform-origin: left bottom;
			@include maxwidth(1180){
				width: auto;
				margin-inline:20px;
				inset: auto;
				transform: none;
				padding-block: 15px 0;
			}
			@include maxwidth(600){
				font-size: 13px;
				width:auto;
				margin-inline:10px;
				padding-block:7px 0;
			}
			ul {
				display:inline;
				li {
					display:inline;
					&:before {
						content:'';
						display:inline-block;
						@include wh(12);
						background: url(../images/icon-arrow-right-white.svg) center / 4px auto no-repeat $themecolor;
						margin-inline:.5em .7em;
						@include maxwidth(600){
							top: 1px;
							position:relative;
						}
					}
					&:first-child:before {
						display:none;
					}
					a {
					}
				}
			}
		}
	}

	div#subpageHeading {
		padding-top:60px;
		background-color:$basecolor;
		color: $basetextcolor;
		div.container {
			div.heading {
				h2 {
					display:flex;
					flex-direction:column;
					align-items:center;
					&:before {
						content:attr(data-parentslug);
						// color: mix($basetextcolor, $basecolor, .1);
						color: #f6f6f6;
						@include ff_en;
						font-size: 96px;
						@include maxwidth(1020){
							font-size: 64px;
						}
						font-weight: 400;
						width: 100%;
						display:flex;
						overflow:hidden;
						justify-content:center;
					}
					span.en {
						margin-top: -60px;
						margin-bottom: 7px;
						color:$themecolor;
						@include ff_en;
						font-size: 20px;
						font-weight: 600;
					}
					span.ja {
						font-size: 24px;
						font-weight: 700;
						margin-inline: 10px;
						line-height:1.25;
					}
				}
			}
		}
	}

	div#subpageContent {
		background-color:$basecolor;
		color: $basetextcolor;
		padding-block: 40px 140px;
		div.container {
			@include container(900, 20);
			min-height: 300px; // コンテンツが少ない場合、トピックパスより短くなる可能性があるため
			div.default {
				div.single_recruitment_contents {
					@include maxwidth(600){
						table tbody tr {
							th, td { padding: 10px; }
							th { width: 85px; font-size: 12px;}
						}
					}
				}
			
			}

			div.sibling_page_list {
				margin-top:100px;
				ul {
					display:flex;
					gap: 20px;
					list-style-type: none;
					margin:0;
					flex-wrap: wrap;
					@include maxwidth(680){
						gap:10px;						
					}
					li {
						margin:0;
						flex: 0 1 calc((100% - 20px) / 2);
						@include maxwidth(680){
							flex: 0 1 100%;
						}
						a {
							display:flex;
							text-decoration:none;
							@include wh(100%, 45);
							&:before {
								content:'';
								flex: 0 0 45px;
								@include wh(45);
								background: url(../images/icon-arrow-right-white.svg) center / 9px auto no-repeat $themecolor;
							}
							span.label {
								flex: 1 1 auto;
								align-items:center;
								font-size: 14px;
								font-weight: 700;
								padding: 0 25px 2px;
								box-sizing: border-box;
								display:flex;
								background-color: mix($basecolor, $basetextcolor, .95);
							}
							&:hover{
								&:before {
									background-color: $accentcolor;
								}
							}
						}
						&.current {
							a {
								pointer-events: none;
								&:before {
									background-color: mix($basecolor, $basetextcolor, .5);
								}
								span.label {
									background-color: mix($basecolor, $basetextcolor, .85);
								}
							}
						}
					}
				}
			}

		}
	}

	// トップページ
	div#toppageAbout {
		background-color:$basecolor;
		color: $basetextcolor;

position:relative;
//height:600vh;
height:150vh;
@include maxwidth(1020){ height:auto; }

		div.cover {
			@include maxwidth(1020){
				display:none !important;
			}

position:sticky;
//position:absolute;
inset:0 0 0 0;
pointer-events: none;

			height:100vh;
			display:flex;
			justify-content:center;
			align-items:center;
			img {
				width: 200px;
			}
			&.cover1 {
				z-index:3;
				//opacity:.75;
				img {
				}
			}
			&.cover2 {
				z-index:2;
				//opacity:.75;
				img {
				}
			}
			//opacity:1;
			clip-path: inset(0);
			transition: 1s;
			&.cover1.ani {
				//opacity:0;
				clip-path: inset(0 0 0 100%);
			}
			&.cover2 {
				transition-delay: .75s;
				&.ani {
					//opacity:0;
					clip-path: inset(0 100% 0 0);
				}
			}
		}
		div.container {
			@include container(1200, 20);
			display:flex;
			flex-direction: row-reverse;
			align-items:center;
			gap: 70px;
			height:100vh;


position:sticky;
inset: 0 0 0 0;


			@include maxwidth(1100){
				gap: 20px;
			}
			@include maxwidth(1020){
				display:block;
				height:auto;
				margin-inline:0;

position:static;
			}
			div.docs {
				flex: 0 0 480px;
				padding: 0 50px;
				@include maxwidth(1100){
					padding: 60px 20px;
					max-width: 480px;
					margin-inline:auto;
				}
				div.heading.common_heading {
					margin-bottom:30px;
				}
				div.body {
					div.catch {
						color: $themecolor;
						font-size: 32px;
						font-weight: 500;
						line-height: 130%;
						margin-bottom: 30px;
						text-align:center;
						@include maxwidth(1020){
							font-size: clamp(24px, 3.137vw, 32px);
						}
					}
					div.text {
						font-size: 14px;
						font-weight: 500;
						line-height: 200%;
						margin-bottom:27px;
					}
					div.link {
						@include maxwidth(1020){
							text-align:center;
						}
						ul.common_buttons {
							li {
								a {
									min-width: 180px;
								}
							}
						}
					}
				}
			}
			div.visual {
				flex: 0 1 550px;
				height:550px;
				img {
					@include obj100;
				}
			}
		}
	}

	div#toppageBusiness {
		background-color: $basetextcolor;
		color: $basecolor;
		padding:120px 0 174px;
		@include maxwidth(1020){
			padding: 50px 0 86px;
		}
		position:relative;
		&:before {
			content:'';
			display:block;
			background: url(../images/wave-01.svg) center / cover no-repeat;
			position:absolute;
			inset:0;
			opacity:.15;
			z-index:1;
			pointer-events: none;
		}
		div.bgslides {
			position:absolute;
			inset:0 auto 0 0;
			width:100%;
			pointer-events: none;
			span.slide {
				display:block;
				//@include wh(100%);
				height:100%;
				img {
					@include obj100;
				}
			}
			&:after {
				content:'';
				display:block;
				position:absolute;
				inset:0;
				background: rgba(0, 0, 0, 0.65);
				backdrop-filter: blur(5px);
			}
		}
		div.container {
			z-index:1;
			@include container(1200, 20);
			@include maxwidth(1020){
				max-width:500px; margin-inline:auto;
			}
			@include maxwidth(530){
				max-width:none; margin-inline:20px;
			}
			div.heading.common_heading {
				margin-bottom:30px;
			}
			div.body {
				display:flex;
				gap: 16px;
				@include maxwidth(1020){
					display:block;
				}
				div.item {
					height: 580px;
					@include maxwidth(1020){
						height: 200px;
						margin-bottom: 3px;
					}
					flex: 0 0 calc((100% - 16px * 3) / 4);
					&.item1 { transition-delay: 0.00s;}
					&.item2 { transition-delay: 0.15s;}
					&.item3 { transition-delay: 0.30s;}
					&.item4 { transition-delay: 0.45s;}
					clip-path: inset(0 100% 0 0);
					transition: .5s;
					a {
						display:block;
						height:100%;
						position:relative;
						span.visual {
							position:absolute;
							inset: 0;
							img {
								@include obj100;
							}
							&:after {
								content:'';
								display:block;
								position:absolute;
								inset: 0;
								background: rgba(0, 0, 0, 0.60);
								transition: 1s;
							}
						}
						span.caption {
							position:absolute;
							inset: 0;
							display:flex;
							flex-direction: column;
							justify-content:center;
							gap: 10px;
							span { text-align:center; }
							span.main {
								font-size: 24px;
								font-weight: 700;
								line-height: 110%;
							}
							span.sub {
								font-size: 14px;
								font-weight: 500;
								line-height: 150%;
								min-height:1.5em; // 空の場合があるため
							}
						}
						span.caption_en {
							position:absolute;
							color:$themecolor;
							inset: 10px auto auto 10px;
							mix-blend-mode: plus-lighter;
							writing-mode: vertical-rl;
							font-size: 15px;
							font-weight: 500;
							br { display:none; }
							@include maxwidth(1020){
								inset: 20px auto 20px 10px;
								text-align:center;
								font-size: 14px;
								font-weight: 400;
								line-height: 120%;
								br { display:inline-block; }
							}
						}
						&:after {
							content:'';
							display: flex;
							@include wh(45);
							justify-content: center;
							align-items: center;
							background: url(../images/icon-arrow-right-white.svg) center / 8px no-repeat $themecolor;
							position:absolute;
							inset: auto 0 50px;
							margin:auto;
							transition: 1s;
						}
						&:hover {
							span.visual {
								&:after {
									background: rgba(0, 0, 0, 0.85);
									backdrop-filter: blur(2px);
								}
							}
							&:after {
								border-radius:45px;
							}
						}
						@include maxwidth(1020){
							span.caption {
								gap: 5px;
								inset: 0 0 25px 0;
								span.main {
									font-size: 20px;
								}
								span.sub {
									font-size: 13px;
								}
							}
							&:after {
								inset: auto 0 30px;
								@include wh(30);
							}
						}
					}
				}
				&.showing {
					div.item {
						clip-path: inset(0);
					}
				}
			}
		}
	}

	//div.termsnav.results_termsnav {
	div.termsnav {
		margin-bottom:39px;
		div.container {
			@include container(1200, 20);
			@include maxwidth(1020){
				max-width: 500px; margin-inline:auto;
			}
			@include maxwidth(530){
				max-width:none; margin-inline:20px;
			}
			ul {
				li {
					clip-path: inset(0 0 100% 0);
					transition: .5s;
					&:nth-child(1) { transition-delay: 0.1s;}
					&:nth-child(2) { transition-delay: 0.2s;}
					&:nth-child(3) { transition-delay: 0.3s;}
					&:nth-child(4) { transition-delay: 0.4s;}
					&:nth-child(5) { transition-delay: 0.5s;}
					&:nth-child(6) { transition-delay: 0.6s;}
				}
			}
		}
		ul {
			display:flex;
			gap: 5px;
			flex-wrap:wrap;
			@include maxwidth(1020){
				gap: 2px 3px;
			}
			li {
				flex: 0 0 160px;
				height:45px;
				@include maxwidth(1020){
					flex: 0 0 calc((100% - 3px * 1) / 2);
					height:40px;
					&:first-child { flex: 0 0 100%; }
				}
				a {
					color:$basetextcolor;
					font-size: 14px;
					font-weight: 700;
					letter-spacing: -0.7px;
					display:flex;
					@include wh(100%);
					align-items:center;
					justify-content:center;;
					@include maxwidth(1020){
						width:100%;
					}
					z-index:1;
					position:relative;
					&:before, &:after {
						content: "";
						display:block;
						position: absolute;
						inset: 0;
					}
					&:before {
						z-index: -2;
						background-color:mix($basecolor,$basetextcolor, .95);
					}
					&:after {
						z-index: -1;
						background: mix($themecolor, $themetextcolor, .75);
						transform-origin: 100% 50%;
						transform: scaleX(0);
						transition: transform ease .3s;
					}
					&:hover {
						color: #fff;
						&:after {
							transform-origin: 0% 50%;
							transform: scaleX(1);
						}
					}
				}
				&.current a {
					&:before {
					background-color: $themecolor;
					}
					color:$themetextcolor;
				}
			}
			&.showing {
				li {
					clip-path: inset(0) !important;
				}
			}
		}
	}

	div.headline.results_headline {
		div.container {
			position:relative;
			div.item {
				clip-path: inset(0 100% 0 0);
				transition: .5s;
				//margin-inline: 10px;
				margin-inline: clamp(5px, 0.694vw, 10px);
				//width: 425px;
				width: clamp(315px, 29.514vw, 425px);
			}
			&.showing {
				div.item {
					clip-path: inset(0);
				}
			}
		}
		div.item {
			a {
				display:flex;
				flex-direction: column;
				gap: 12px;
				position:relative;
				width: 100%;
				span.visual {
					display:block;
					aspect-ratio: 1/1;
					span { display:block; }
					position:relative;
					span.image {
						position:absolute;
						inset: 0;
						@include maxwidth(780){
							margin-bottom: 25px;
						}
						img {
							@include obj100;
						}
					}
					span.terms {
						position:absolute;
						inset: auto auto 15px 15px;
						display:flex;
						flex-wrap:wrap;
						gap: 10px;
						@include maxwidth(780){
							bottom: -8px;
							left: 0;
						}
						span.term {
							font-size: 12px;
							font-weight: 500;
							color:$themetextcolor;
							background-color: $themecolor;
							display: flex;
							height: 20px;
							justify-content: center;
							align-items: center;
							padding: 0 10px 3px;
							box-sizing: border-box;
						}
					}
				}
				span.title {
					//font-size: 18px;
					font-size: clamp(15px, 1.25vw, 16px);
					font-weight: 700;
					line-height: 130%;
				}
			}
		}

		&.subpage_headline {
			display:flex;
			gap: 50px 20px;
			flex-wrap:wrap;
			@include maxwidth(780){
				gap: 30px 10px;
			}
			div.item {
				flex: 0 0 calc((100% - 20px * 2) / 3);
				@include maxwidth(780){
					flex: 0 0 calc((100% - 5px * 2) / 2);
				}
			}
		}

		button.slick-arrow {
			position:absolute;
			z-index:1;
			//@include wh(45);
			width: clamp(40px, 3.125vw, 45px);
			aspect-ratio: 1/1;
			//inset: calc(((100vw - 44px * 2 - 20px * 3) / 3 - 45px) / 2) auto auto;
			inset: clamp(135px, 13.194vw, 190px) auto auto;
			color:#fff;
			font-size: 10px;
			font-weight: 500;
			box-sizing: border-box;
			background: url(../images/icon-arrow-left-white.svg) center / 8.5px auto no-repeat $basetextcolor;
			border:none;
			cursor:pointer;
			text-indent: 9999px;
			overflow: hidden;
			&.slick-prev {
				//left: 35px;
				left: clamp(10px, 2.431vw, 35px);
			}
			&.slick-next {
				right: 85px;
				right: clamp(70px, 5.903vw, 85px);
				background-image: url(../images/icon-arrow-right-white.svg);
				@include maxwidth(500){
					right:10px;
				}
			}
		}
		ul.slick-dots {
			//margin: 33px auto 0;
			margin: clamp(23px, 2.292vw, 33px) auto 0;
			display: flex;
			justify-content: center;
			list-style-type: none;
			z-index:1;
			gap: 12px;
			li {
				button {
					cursor: pointer;
					display: block;
					@include wh(12);
					padding: 0;
					border: none;
					background-color: mix($basecolor, $basetextcolor, .9);
					text-indent: 9999px;
					overflow: hidden;
				}
				&.slick-active button {
					background-color: $basetextcolor;
				}
			}
		}
	}

	div#toppageResults {
		background-color: $basecolor;
		color:$basetextcolor;
		padding:120px 0 105px;
		position:relative;
		@include maxwidth(1020){
			padding: 50px 0 66px;
		}
		div.heading.common_heading {
			margin-bottom:65px;
			@include maxwidth(1020){ margin-bottom:20px;}
			div.container {
				@include container(1200, 20);
				@include maxwidth(1020){
					max-width: 500px; margin-inline:auto;
				}
				@include maxwidth(530){
					max-width:none; margin-inline:20px;
				}
				span.en {
					align-items:initial;;
				}
			}
		}
		div.body {
			div.termsnav.results_termsnav {
			}
			div.headline.results_headline {
			}
		}
		div.link {
			div.container {
				position:absolute;
				top:147px;
				right: calc((100% - 1200px) / 2);
				@include maxwidth(1240){
					position:static;
					text-align:center;
					margin-top:40px;
				}
				a {
				}
			}
		}
	}

	div#toppageRecruit {
		background-color: green;//$basetextcolor;
		color:$basecolor;

position:relative;
//height:1000vh;
@include maxwidth(1020){ height:auto; }


		div.cover {
			@include maxwidth(1020){
				display:none;
			}

position:sticky;
inset:0 0 0 0;

			height:100vh;
			display:flex;
			justify-content:center;
			align-items:center;
			span.caption.common_heading {
				span.en:before {
					background-color: currentcolor;
				}
			}

			clip-path: inset(0);
			transition: 1s;
				transform:1s;


			&.cover1 {
				padding-bottom: 40px;
				box-sizing: border-box;
				z-index:3;
				clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);
				&.ani {
					clip-path: polygon(100% 0, 100% 0, 100% 0, 0 100%, 0 100%, 0 100%);
				}
			}
			&.cover2 {
				z-index:2;
				clip-path: polygon(0 0, 100% 100%, 0 100%);
				&.ani {
					clip-path: polygon(0 100%, 0 100%, 0 100%);
					transition-delay: 1s;
				}
				//background-color:yellow !important;
			}
			&.cover3 {
				z-index:2;
				clip-path: polygon(0 0, 100% 0, 100% 100%);
				&.ani {
					clip-path: polygon(100% 0, 100% 0, 100% 0);
					transition-delay: 1s;
				}
				//background-color:green !important;
			}
		}
		div.container {
			position:relative;


position:sticky;
top:0;
//inset: -200vh 0 0 0;

//margin-top:-150vh;
position:relative;
margin-top: -300vh;
@include maxwidth(1020){
	margin-top:initial;
}

			div.visual {
				position:absolute;
				inset: 0;
				img {
					@include obj100;
				}
				&:after {
					content:'';
					display:block;
					position:absolute;
					inset: 0;
					background: rgba(0, 0, 0, 0.50);
				}
			}
			div.body {
				position:relative;
				z-index:1;
				height:100vh;
				min-height:700px;//中央ドキュメントの高さ未満にしない
				position:sticky;
				top: 0;
				display:flex;
				flex-direction: column;
				align-items:center;
				justify-content:center;
				transform: translateY(60px);
				opacity:0;
				transition: 2s;
				margin-inline: 20px;
				@include maxwidth(1020){
					opacity:1;
					transform: translateY(0);
				}
				&.showing {
					transform: translateY(0);
					opacity:1;
					transition-delay: 1.25s;
				}
				@include maxwidth(1140){
					//margin-inline: 360px;
					position: relative;
				}
				@include maxwidth(740){
					min-height:initial;
					height:initial;
					padding:80px 0 10px;
				}

				div.heading.common_heading {
					margin-bottom:25px;
					h2 {
						span.en {
						}
					}
				}
				div.docs {
					text-align: center;
					//@include maxwidth(1260){
					//	text-align:initial;
					//}
					div.catch {
						//font-size: 32px;
						font-size: clamp(28px, 2.222vw, 32px);
						font-weight: 500;
						line-height: 130%;
						margin-bottom:23px;
					}
					div.text {
						font-size: 14px;
						font-weight: 500;
						line-height: 200%;
						p {
							margin-bottom: 2em;
						}
					}
				}
			}
			div.link {
				// 1260: サムネイルを小型化
				// 1140: サムネイル戻して通常のフローに変更
				// 920:  サムネイルを小型化
				// 740:  スマホデザインに移行
				position:relative;
				z-index:1;
				div.pc {
					@include maxwidth(740){
						display:none;
					}
					margin-block: -240px auto;
					//margin-inline: 60px;
					@include container(1320, 60);
					padding-bottom:110px;
					padding-top:200px;
					@include maxwidth(1140){
						margin-block: auto;
						padding-top:0;
					}
					ul {
						display:flex;
						flex-direction:column;
						li {
							margin-top:-70px;
							@include maxwidth(1140){
								margin-top: -110px;
								&:first-child { margin-top: -40px;}
							}
							@include maxwidth(920){
								margin-top: -80px;
								&:first-child { margin-top: -70px;}
							}
							a {
								display:inline-flex;
								gap: 18px;
								span.visual {
									width: 300px;
									@include maxwidth(1260){
										width:240px;
									}
									@include maxwidth(1140){
										width:340px;
									}
									@include maxwidth(920){
										width:240px;
									}
									aspect-ratop: 1/1;
									img {
										@include obj100;
									}
									box-shadow: -12px 12px 0 0 $accentcolor;
									transition: .5s;
								}
								span.caption {
									writing-mode: vertical-rl;
									font-size: 18px;
									font-weight: 700;
									letter-spacing: .2em;
									&:after {
										content:'';
										display:inline-block;
										@include wh(25);
										background: url(../images/icon-arrow-right-white.svg) center / 6px auto no-repeat $accentcolor;
										margin-inline-start: 15px;
										transition: .25s;
									}
								}
								&:hover {
									span.visual {
									box-shadow: -12px 12px 0 0 $themecolor !important;
									}
									span.caption:after {
										background-color:$themecolor;
										border-radius:9999px;
									}
								}
							}
							&:nth-child(2n+1) {
								align-self: flex-end;
								a {
									flex-direction: row-reverse;
									span.visual {
										box-shadow: 12px 12px 0 0 $accentcolor;
									}
									&:hover {
										span.visual {
											box-shadow: 12px 12px 0 0 $themecolor !important;
										}
									}
								}
							}
						}
					}
				}
				div.sp {
					display:none;
					@include maxwidth(740){ display:block; }
					padding-bottom:50px;
					div.nav {
						margin-bottom:40px;
						ul {
							li {
								margin: auto auto 4px;
								&:last-child { margin-bottom:0;}
								@include wh(314, 45);
								a {
									width:100%;
								}
							}
						}
					}
					div.slide {
						span.image {
							width: 315px;
							aspect-ratio: 1/1;
							margin-inline:1px;
							img {
								@include obj100;
							}
						}
					}
				}
			}
		}
	}

	div#toppageMisc {
		background-color:$basetextcolor;
		color:$basecolor;
		padding-block: 80px;
		@include maxwidth(1120){
			padding-block: 60px 50px;
		}
		position:relative;
		&:before {
			content:'';
			display:block;
			background: url(../images/wave-02.svg) center / cover no-repeat;
			position:absolute;
			inset:0;
			opacity:.15;
		}
		div.container {
			@include container(1280, 20);
			@include maxwidth(1120){
				max-width:500px;
				margin-inline:auto;
			}
			@include maxwidth(530){
				max-width:initial;
				margin-inline:20px;
			}
			div.body {
				display:flex;
				gap: 10px;
				@include maxwidth(1120){
					display:block;
				}
				&.showing {
					div.item {
						clip-path: inset(0);
					}
				}
				div.item {
					flex: 0 0 calc((100% - 10px * 2) / 3);
					height:200px;
					clip-path: inset(0 100% 0 0);
					transition: .5s;
					&:nth-child(1) { transition-delay: 0.15s;}
					&:nth-child(2) { transition-delay: 0.30s;}
					&:nth-child(3) { transition-delay: 0.45s;}
					@include maxwidth(1120){
						height:150px;
						margin-bottom: 5px;
						&:last-child { margin-bottom:0;}
					}
					a {
						display:flex;
						@include wh(100%);
						flex-direction: column-reverse;
						justify-content:center;
						align-items:center;
						gap: 10px;
						position:relative;
						&:after {
							content:'';
							background: url(../images/icon-arrow-right-white.svg) center / 8px auto no-repeat $themecolor;
							display:block;
							@include wh(45);
							position:absolute;
							inset: auto 0 0 auto;
						}
						&[target="_blank"]:after {
							background: url(../images/icon-external-white.svg) center / 16px auto no-repeat $themecolor;
						}
						span.visual {
							position:absolute;
							inset: 0;
							img {
								@include obj100;
							}
							&:after {
								content:'';
								display:block;
								position:absolute;
								inset: 0;
								background: rgba(0, 0, 0, 0.50);
								transition: .5s;
							}
						}
						&:hover {
							span.visual:after {
								background: rgba(0, 0, 0, 0.25);
							}
						}
						span.caption {
							position:relative;
							z-index:1;
							font-size: 24px;
							font-weight: 700;
						}
						span.caption_en {
							position:relative;
							z-index:1;
							color:$themecolor;
							mix-blend-mode: plus-lighter;
							font-size: 15px;
							font-weight: 500;
						}
						@include maxwidth(1120){
							span.caption {
								font-size: 20px;
							}
							span.caption_en {
								font-size: 12px;
							}
						}
					}
				}
			}
		}
	}

	div#toppageNewsTopics {
		background-color:$basecolor;
		color:$basetextcolor;
		padding-block: 80px 64px;
		@include maxwidth(1020){
			padding-block:60px;
		}
		div.container {
			@include container(1200, 20);
			@include maxwidth(1020){
				max-width: 500px;
				margin-inline:auto;
			}
			@include maxwidth(530){
				max-width:initial;
				margin-inline:20px;
			}
			div.heading.common_heading {
				margin-bottom:40px;
				@include maxwidth(1020){
					margin-bottom:34px;
				}
				h2 {
					span.en {
					}
				}
			}
			div.body {
				div.cols {
					display:flex;
					gap: 40px;
					@include maxwidth(1020){
						display:block;
					}
					div.col {
						flex: 0 0 calc((100% - 40px * 1) / 2);
						@include maxwidth(1020){
							margin-bottom:30px;
							&:last-child { margin-bottom:0; }
						}
						div.newstopics_headline.headline {
							margin-bottom:28px;
							&.showing {
								div.item {
									clip-path: inset(0);
									transition: .5s;
									&:after {
										inset: 0 0 0 100%;
										transition: .5s;
									}
									&:nth-child(1) { transition-delay: 0.00s;}
									&:nth-child(2) { transition-delay: 0.15s;}
									&:nth-child(3) { transition-delay: 0.30s;}
									&:nth-child(4) { transition-delay: 0.45s;}
									&:nth-child(1):after { transition-delay: 0.50s;}
									&:nth-child(2):after { transition-delay: 0.65s;}
									&:nth-child(3):after { transition-delay: 0.80s;}
									&:nth-child(4):after { transition-delay: 0.95s;}
								}
							}
							div.item {
								clip-path: inset(0 100% 0 0);
								&:after {
									content:'';
									display:block;
									position:absolute;
									inset:0;
									background-color:$themecolor;
								}
							}
							&.newstopics_information_headline {
							}
							&.newstopics_staffblog_headline {
								div.item {
									&:before {
										background-color: $accentcolor;
									}
								}
								div.item a span.docs span.terms span.term {
									background-color: $accentcolor;
									color:$accenttextcolor;
								}
							}
						}
						div.link {
							text-align:right;
							@include maxwidth(1020){
								text-align:center;
							}
							a {
							}
						}
					}
				}
			}
		}
	}

						div.newstopics_headline.headline {
							margin-bottom:28px;
							div.item {
								padding: 12px 0;
								border-bottom: 1px solid #efefef;
								position:relative;
								&:before {
									content:'';
									display:block;
									position:absolute;
									inset: auto 100% 0 0;
									background-color:$themecolor;
									height:2px;
									transition: .5s;
								}
								&:last-child {
									border-bottom:none;
								}
								a {
									display:block;
									background: url(../images/icon-arrow-right-color.svg) right 15px center / 6px auto no-repeat;
									span.docs {
										display:flex;
										gap: 23px;
										margin-bottom: 5px;
										span.date {
											font-size: 16px;
											font-weight: 500;
											@include maxwidth(1020){
												font-size: 14px;
											}
										}
										span.terms {
											display:flex;
											gap: 10px;
											span.term {
												font-size: 12px;
												font-weight: 500;
												display: flex;
												height: 20px;
												padding: 0 10px 3px;
												box-sizing: border-box;
												align-items: center;
												background-color: $themecolor;
												color:$themetextcolor;
												@include maxwidth(1020){
													font-size: 11px;
													padding-bottom:2px;
												}
											}
										}
									}
								}
								span.title {
									font-size: 15px;
									font-weight: 500;
									line-height: 180%;
									@include maxwidth(1020){
										font-size: 14px;
									}
								}
								&:hover {
									&:before {
										inset: auto 0 0;
									}
								}
							}
							&.newstopics_information_headline {
							}
							&.newstopics_staffblog_headline {
								div.item {
									&:before {
										background-color: $accentcolor;
									}
								}
								div.item a span.docs span.terms span.term {
									background-color: $accentcolor;
									color:$accenttextcolor;
								}
							}
						}

	div#toppageInstagram {
		background-color: $themecolor;
		color:$themetextcolor;
		padding-block: 60px 80px;
		@include maxwidth(1020){
			padding-block: 50px 60px;
			background-color: mix($basecolor, $basetextcolor, .6);
		}
		div.container {
			@include container(1200, 20);
			@include maxwidth(1020){
				max-width:604px;
				margin-inline:auto;
			}
			@include maxwidth(634){
				max-width: 402px;
			}
			@include maxwidth(432){
				margin-inline:20px;
			}
			div.heading.common_heading {
				margin-bottom:50px;
				@include maxwidth(1020){
					margin-bottom:30px;
				}
				h2 {
					span.en {
					}
				}
			}
			div.body {
				div.list {
					display:flex;
					gap: 2px;
					@include maxwidth(1020){ flex-wrap:wrap; }
					span.item {
						flex: 0 0 calc((100% - 2px * 5) / 6);
						@include maxwidth(1020){
							flex: 0 0 calc((100% - 2px * 2) / 3);
						}
						@include maxwidth(634){
							flex: 0 0 calc((100% - 2px * 1) / 2);
						}
						aspect-ratio: 1/1;
						img {
							@include obj100;
						}
					}
				}
				div.link {
					margin-block-start:35px;
					text-align:center;
					a {
						display:inline-flex;
						@include wh(290, 45);
						max-width:100%;
						justify-content: center;
						align-items: center;
						background-color:$basetextcolor;
						color:$basecolor;
						@include maxwidth(1020){
							background-color: $themecolor;
							color: $themetextcolor;
						}
						font-size: 14px;
						font-weight: 500;
						gap: 8px;
						&:before {
							@include before_as_image('../images/icon-instagram-white.svg', 14);
						}
						&:after {
							@include before_as_image('../images/icon-external-white.svg', 11);
						}
						transition: opacity .5s;
						&:hover {
							opacity:.7;
						}
					}
				}
			}
		}
	}

	div#contentFooter {

		div#contentFooterContact {
			position:relative;
			background-color: $basetextcolor;
			color:$basecolor;
			div.visual {
				position:absolute;
				inset: 0;
				img {
					@include obj100;
				}
				&:after {
					content:'';
					position:absolute;
					inset: 0;
					background: rgba(0, 0, 0, 0.40);
				}
			}
			div.container {
				padding-block: 60px 80px;
				@include maxwidth(1020){
					padding-block: 40px 46px;
				}
				position:relative;
				@include container(1050, 20);
				@include maxwidth(1020){
					max-width: 500px;
					margin-inline:auto;
				}
				@include maxwidth(530){
					max-width:initial;
					margin-inline:20px;
				}
				div.heading.common_heading {
					margin-bottom:40px;
					@include maxwidth(1020){
						margin-bottom:20px;
					}
					h2 {
					}
				}
				div.body {
					display:flex;
					gap: 10px;
					@include maxwidth(1020){
						display:block;
					}
					div.item {
						flex: 0 0 calc((100% - 10px * 1) / 2);
						@include maxwidth(1020){
							margin-bottom:5px;
							&:last-child { margin-bottom:0; }
						}
						a {
							display:flex;
							height: 150px;
							@include maxwidth(1020){
								height:80px;
							}
							justify-content:center;
							align-items:center;

							transition: opacity .5s;
							&:hover {
								opacity:.7;
							}

						}
						&.phone {
							a {
								background-color: $basetextcolor;
								color:$basecolor;
								flex-direction: column;
								gap: 15px;
								@include maxwidth(1020){
									gap: 5px;
									background-color: $themecolor;
									color:$themetextcolor;
								}
								span.tel {
									display:flex;
									gap: 7px;
									img {
										width: 22px;
										@include maxwidth(1020){ width: 15px; }
									}
									span.telnum {
										font-size: 32px;
										font-weight: 700;
										@include maxwidth(1020){ font-size: 24px; }
									}
								}
								span.teltime {
									font-size: 14px;
									font-weight: 500;
									@include maxwidth(1020){ font-size: 12px; }

								}
							}
						}
						&.mail1, &.mail2 {
							a {
								background-color: $themecolor;
								color:$themetextcolor;
								img {
									width: 26px;
									margin-right:13px;
									@include maxwidth(1020){
										width:20px;
										margin-right:5px;
									}
								}
								span.caption {
									font-size: 19px;
									font-weight: 700;
									margin-right:8px;
									@include maxwidth(1020){
										font-size: 14px;
									}
								}
								&:after {
									@include before_as_image('../images/icon-arrow-right-white.svg', 13);
								}
							}
						}
					}
				}
			}
		}

		div#contentFooterMap {
			height:320px;
			position:relative;
			div.map {
				@include wh(100%);
				overflow: hidden;
				iframe {
					width:100%;
					height:calc(100% + 400px);
					top:-140px;
					position:relative;
				}
			}
			@include maxwidth(1020){
				height:250px;
				div.map {
					iframe {
					}
				}
			}
			div.link {
				position:absolute;
				inset: 0;
				a {
					background-color:$basecolor;
					@include wh(97, 108);
					box-sizing: border-box;
					padding: 0 10px;
					position:absolute;
					inset: 0;
					margin:auto;
					display:flex;
					align-items:center;
					justify-content:center;
					&:after {
						content:'';
						@include wh(18, 12);
						clip-path: polygon(0 0, 100% 0, 50% 100%);
						position:absolute;
						z-index:1;
						inset: auto 0 -10px;
						margin:auto;
						display:block;
						background-color:$basecolor;
					}
					img {
					}
				}
			}
		}
	}
}

footer { }

div#footer {
	background-color: $basetextcolor;
	color:$basecolor;
	padding-block:60px 35px;
	@include maxwidth(1020){
		padding-block: 50px 65px;
	}
	div.footermain {
		margin-bottom:40px;
		@include maxwidth(1020){
			margin-bottom:17px;
		}
		div.container {
			@include container(1200, 20);
			display:flex;
			@include maxwidth(1020){
				flex-direction:column;
				align-items:center;
				div.col { flex: 0 0 auto !important; }
			}
			div.col.col1 {
				flex: 1 1 497px;
				@include maxwidth(1280){ flex-basis: 420px; }
				@include maxwidth(1020){
					width: 300px;
					max-width:100%;
					margin-bottom:30px;
				}
				div.sitename {
					margin-bottom:15px;
					@include maxwidth(1020){
						text-align:center;
					}
					a {
						//display:inline-flex;
						display:inline-block;
						vertical-align:middle;
						//gap: 10px;
						//align-items:center;
						span {
							vertical-align:middle;
							display:inline-block;
						}
						span.main {
							//flex: 0 0 40px;
							img {
								width: 40px;
								margin-right:10px;
							}
						}
						span.sub {
							//flex: 0 0 160px;
							img {
								width:160px;
							}
						}
					}
				}
				div.address {
					div.item {
						margin-bottom:8px;
						&:last-child { margin-bottom:0; }
						&.item1 {}//1～6
						font-size: 13px;
						font-weight: 500;
						line-height: 130%;
						display:flex;
						span.name {
							flex: 0 0 100px;
						}
						span.place {
							flex: 1 1 auto;
						}
						@include maxwidth(1020){
							font-size: 12px;
							span.name {
								flex-basis: 85px;
							}
						}
					}

				}
			}
			div.col.col2 {
				@include maxwidth(530){
					align-self: stretch;
				}
				div#footermenu {
					display:flex;
					gap: 130px;
					@include maxwidth(1280){ gap: 70px; }
					@include maxwidth(1180){ gap: 50px; }
					@include maxwidth(1020){
						width:500px;
						margin-inline:auto;
						display:block;
						max-width: 100%;
					}
					//@include maxwidth(530){
					//	width: 100%;
					//}
					div.item {
						&.item1 { } // 1～3
						font-size: 14px;
						font-weight: 500;
						line-height:120%;
						& > ul {
							li {
								margin-bottom: .8em;
								&:last-child { margin-bottom: 0; }
								a {
								}
								ul {
									margin: 1em 0 0 .85em;
									list-style-type: disc;
									li {
										a {
										}
									}
								}
							}
						}
						@include maxwidth(1020){
							width:100%;
							& > ul {
								width:100%;
								li {
									display:block;
									margin-bottom: 1px;
									a {
										display:block;
										align-items:center;
										padding: 12px 14px 12px 34px;
										background: url(../images/icon-arrow3-right-white.svg) left 17px center / 6px auto no-repeat #000;
									}
									ul {
										margin: 1px 0 0;
										list-style-type:none;
										li {
											a {
												background: url(../images/icon-disc-white.svg) left 16px center / 5px auto no-repeat #3E3A39;

											}
										}
									}
								}
							}
						}
						&.item3 {
							div#footerasidemenu {
								margin-top: 3em;
								@include maxwidth(1020){
									margin-top:1em;
								}
								div.item {
									ul {
										li {
											a {
												@include maxwidth(1020){
													font-size: 13px;
													padding-block: 9px;
												}
											}
										}
									}
								}
								div.icons {
									margin-top: 2em;
									ul {
										display:flex;
										gap: 15px;
										align-items:center;
										@include maxwidth(1020){
											justify-content:center;
										}
										li {
											&.instagram { }
											&.youtube { }
											a {
												img {
													width: 28px;
												}
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
	div.footerbanner {
		div.container {
			@include container(1200, 20);
			display:flex;
			justify-content:center;
			div.items {
				display:flex;
				gap: 10px;
				margin-bottom:20px;
				flex-wrap:wrap;
				@include maxwidth(1100){ width: calc(280px * 3 + 10px * 2); }
				@include maxwidth(920){ width: calc(280px * 2 + 10px * 1); }
				@include maxwidth(620){ width: 280px; gap: 3px; }
				div.item {
					flex: 0 0 calc((100% - 10px * 3) / 4);
					@include maxwidth(1100){ flex: 0 0 280px; }
					&.item1 {}
					a {
						img {
						}
					}
				}
			}
		}
	}

	div#footercopyright {
		div.container {
			@include container(1200, 20);
			font-size: 12px;
			font-weight: 500;
			text-align:right;
			@include maxwidth(1020){
				text-align:center;
			}
		}
	}
}

div#totopWrapper {
	a#totop {
		//@include wh(45);
		@include wh(50);
		//@include maxwidth(500){
		//	@include wh(50);
		//}
		display:flex;
		background: url(../images/icon-arrow-up-white.svg) center 70% / 9px auto no-repeat $themecolor;
		color:$themetextcolor;
		position:fixed;
		inset: auto 0 0 auto;
		z-index:1;
		align-items:center;
		justify-content:center;
		box-sizing: border-box;
		padding-block: 0 10px;
		@include ff_en;
		font-size: 12px;
		font-weight: 700;
	}
}

// Pager
div.pager {
	text-align: center;
	margin: 80px 0 40px;
	@include maxwidth(680) {
		margin-top: 60px;
	}
	@include f_all(13);
	a,
	span {
		display: inline-block;
		margin: 0 0 0.25em 0.75em;
		min-width: 3em;
		padding: 1em;
		box-sizing: border-box;
		background-color: #f3f3f5;
	}
	& .current {
		color: $themetextcolor;
		background-color: $themecolor;
		font-weight: bold;
	}
}

// 求人検索フォーム
form#myForm {
	margin-top:50px;
	div.show_all {
		margin-bottom:10px;
		a {
			display:flex;
			height:45px;
			padding: 0 1em 2px;
			box-sizing: border-box;
			align-items:center;
			justify-content:center;
			background-color:$themecolor;
			color:$themetextcolor;
			font-size: 14px;
			font-weight: 700;
			letter-spacing: -0.7px;
			&:hover {
				background-color: mix($themecolor, $themetextcolor, .8);
			}
		}
	}
	div.submit_button {
		margin-top:10px;
		text-align:center;
		[type="submit"] {
			cursor: pointer;
			display:inline-flex;
			gap: 5px;
			align-items:center;
			&:before {
				content:'';
				flex: 0 0 13px;
				width:13px;
				height:13px;
				content:'';
				background: url(../images/icon-search-white.svg) center / contain no-repeat;
			}
			@include wh(250, 45);
			padding: 0 10px 1px;
			box-sizing: border-box;
			justify-content: center;
			background-color:$basetextcolor;
			color:$basecolor;
			font-size: 14px;
			font-weight: 700;
			letter-spacing: -0.7px;
			border:none;
			&:hover {
				background-color: mix($basetextcolor, $basecolor, .8);
			}
		}
	}
	div.reset_all {
		text-align:center;
		margin-top: 15px;
		a {
			display:inline-flex;
			gap: 5px;
			align-items:center;
			&:before {
				content:'';
				flex: 0 0 13px;
				width:13px;
				height:13px;
				content:'';
				background: url(../images/icon-reset-color.svg) center / contain no-repeat;
				margin-top: 2px;
			}
			color:$themecolor;
			font-size: 14px;
			font-weight: 700;
			letter-spacing: -0.7px;
			&:hover {
				opacity: .75;
			}
		}
	}
}
div.recruit_terms {
	font-size: 14px;
	font-weight: 700;
	& > ul {
		& > li {
			flex: 0 0 100%;
			display:flex;
			margin-bottom:5px;
			@include maxwidth(550){
				display:block;
			}
			gap: 12px;
			& > span {
				flex: 0 0 153px;
				display:flex;
				align-items:center;
				justify-content:center;
				background-color:$basetextcolor;
				color:$basecolor;
				@include maxwidth(800){
					padding-block:.75em;
					font-size: 13px;
				}
				@include maxwidth(550){
					//background-color: mix($basetextcolor, $basecolor, .55);
					margin-block-end: .5em;
				}
			}
			& > ul{
				flex: 1 1 auto;
				display:flex;
				flex-wrap:wrap;
				gap: 6px;
				& > li {
					flex: 0 0 179px;
					@include maxwidth(800){
						flex: 0 0 auto;
					}
					label {
						cursor: pointer;
						display:flex;
						height:45px;
						align-items:center;
						justify-content:center;
						padding: 0 ;
						input {
							position:absolute;
							transform: scale(0);
						}
						&:hover {
							background-color:mix($accentcolor, $accenttextcolor, .1);
						}
						&:has(input[type="checkbox"]:checked) {
							background-color:$accentcolor;
							color:$accenttextcolor;
						}
						background-color: mix($basecolor, $basetextcolor, .9);
						color:$basetextcolor;
						transition: .2s;
						@include maxwidth(800){
							padding: 0 1em .2em;
							height:25px;
						}
					}
				}
			}
		}
	}
}

@keyframes animation_bar_loader {
    100% {background-position:right}
}

#search_result {
	display:flex;
	flex-wrap:wrap;
	gap: 20px;
	margin-top:30px;
	@include maxwidth(580){
		gap: 10px;
	}
	div.item {
		background: mix($themecolor, $basecolor, .15);
		color:$basetextcolor;
		flex: 0 0 calc((100% - 20px * 2) / 3);
		@include maxwidth(930){
			flex: 0 0 calc((100% - 20px * 1) / 2);
		}
		@include maxwidth(580){
			flex: 0 0 100%;
		}
		position:relative;
		a {
			display:block;
			padding:20px;
			position:relative;
			& > span {
				display:block;
			}
			span.terms {
				display:flex;
				flex-wrap:wrap;
				gap: 5px;
				margin-bottom:14px;
				span.term {
					height: 22px;
					padding: 0 10px 1px;
					display:inline-flex;
					align-items:center;
					box-sizing: border-box;
					font-size: 13px;
					font-weight: 600;
					background-color: $basetextcolor;
					color:$basecolor;
				}
			}
			span.title {
				font-size: 15px;
				font-weight: 700;
				line-height: 150%;
				margin-bottom:10px;
				min-height: 50px;
			}
			span.place {
				font-size: 13px;
				font-weight: 500;
				span.label {
					font-size: 14px;
					font-weight: 700;
					display:block;
					margin-bottom:10px;
					&:after {
						content:'';
						display:block;
						@include wh(21, 2);
						background-color: $themecolor;
						margin-top: 5px;
					}
				}
				span.pm { display:none; }
			}
		}
		&:after {
			content:'';
			@include wh(40);
			display: block;
			background: url(../images/icon-arrow-right-white.svg) center / 9px auto no-repeat $themecolor;
			position:absolute;
			inset: auto 0 0 auto;
		}
	}
	div.noposts {
		background-color: mix($basecolor, $basetextcolor, .9);
		padding:5em 1em;
		text-align:center;
		flex: 1 1 100%;
	}
	div.nowloading {
		background-color: mix($basecolor, $basetextcolor, .9);
		padding:5em 1em;
		text-align:center;
		flex: 1 1 100%;
		div.loader {
			margin-inline:auto;
			width: calc(60px / cos(45deg));
			height: 8px;
			background: repeating-linear-gradient(-45deg,$themecolor 0 15px,transparent 0 20px) left/200% 100%;
			animation: animation_bar_loader 1s infinite linear;
		}
		div.text {
			margin-top:10px;
			font-size: 12px;
			font-weight: 700;
			letter-spacing: .05em;
		}
	}
}