// スタイルシート common

@charset "utf-8";

@import "mixin";

html {
	scroll-behavior: smooth;
}

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

	background-color:$basetextcolor;
}

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

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

	div#topBar {

		display:none;
		body.subpage & {
			display:block;
		}

		background-color:$basetextcolor;
		color:$basecolor;
		position:fixed;
		inset:0 0 auto 0;
		body.admin-bar & { top: calc(0px + 32px); }
		height:90px;
		z-index:100;
		div.container {
			@include container(1360, 40);
			font-size: 24px;
			display:flex;
			height:100%;
			align-items:center;
			padding-block-end: 2px;
			box-sizing: border-box;
			@include maxwidth(768){
				margin-inline:clamp(20px, 5.208vw , 40px);
				font-size: clamp(16px, 3.125vw, 24px);
			}
		}
	}

/*============================
#header
============================*/
	div#header {
		div.container {
			@include container(1280, 40);
			@include maxwidth(1000){
				margin-inline: 25px;
			}
			div.sitename {
				h1 {
					a {
						color:$basecolor;
						position:absolute;
						inset: 150px auto auto 0;
						@include maxwidth(1000){
							top:25px;
						}
						z-index:1;
						span {
							display:block;
						}
						span.logo {
							margin-bottom:8px;
							img {
								width: 120px;
								@include maxwidth(1000){
									width: 60px;
								}
							}
						}
						span.en {
							font-size: 32px;
							line-height: 130%; /* 41.6px */
							@include maxwidth(1000){
								font-size: 26px;
							}
						}
						span.ja {
							font-size: 20px;
							line-height: 150%; /* 30px */
							letter-spacing: 0.6px;
							@include maxwidth(1000){
								font-size: 16px;
								letter-spacing: 0;
							}
						}
						@include maxwidth(360){
							span.en { font-size: 16px; }
							span.ja { font-size: 10px; }
						}

					}
				}
			}
		}
	}
}

div#subpageTopicPath {
	background-color: $basecolor;
	color:$basetextcolor;
	div.container {
		@include container(900,20);
		padding-block:15px;
		font-size: 14px;
		line-height:1.3;
		@include maxwidth(768){
			margin-inline: 10px;
			padding-block:10px;
			font-size: 12px;
		}
		ul {
			li {
				display:inline;
				a {
					&:before {
						display:inline-block;
						@include before_as_image('../images/icon-arrow-right-color.svg', 10, 10);
						margin-inline: .25em .5em;
						@include maxwidth(768){
							@include wh(7);
							margin-inline: .15em .35em;
						}
					}
				}
				&:first-child a:before {
					display:none;
				}
			}
		}
	}
}

div#subpageHeadingVisual {
	padding-block-start: 90px;
	height: 142px;
	@include maxwidth(768){
		height: 18.49vw;
		min-height: 90px;
	}
	div.container {
		height: 100%;
		img {
			@include obj100;
		}
	}
}

/*============================
#subpageHeading
============================*/
div#subpageHeading {
	background-color: $basecolor;
	color: $basetextcolor;
	div.container {
		padding-block-end: 80px;
		&:before {
			content:'';
			@include wh(1, 50);
			display:block;
			background-color:currentcolor;
			margin: auto auto 20px;
		}
		div.heading.common_heading {
			text-align:center;

		}
	}
}

/*============================
#subpageContent
============================*/
div#subpageContent {
	background-color:$basecolor;
	color:$basetextcolor;
	padding-block-end: 100px;
	div.container {
		@include container(900, 20);
		div.default {
		}
	}
}

/*============================
#mainVisual
============================*/
div#mainVisual {
	background-color:$basecolor;
	color:$basetextcolor;
	padding-block-start: 30px;
	@include maxwidth(1000){
		background-color:$basetextcolor;
		color:$basecolor;
		padding-block-start: 50px;
	}
	div.container {
		position:relative;
		div.slides {
			height:637px;
			@include maxwidth(1000){
				height: 400px;
			}
			div { height: 100%;}
			margin-inline-end: 100px;
			@include maxwidth(1000){
				margin-inline-end: 6.915vw;
			}
			div.item-slider {
				position:relative;
				img {
					@include obj100;
				}
				&:after {
					content:'';
					display:block;
					position:absolute;
					inset:0;
					background: rgba(0, 0, 0, 0.15);
					blend-mode: darken;
				}
			}
			ul.slick-dots {
				position:absolute;
				inset: auto 40px 40px auto;
				display:flex;
				gap: 4px;
				z-index:1;
				li {
					width: 12px;
					aspect-ratio: 1/1;
					background-color: $basecolor;
					overflow:hidden;
					&.slick-active {
						background-color: $accentcolor;
					}
					button {
						@include wh(100%);
						text-indent: 9999px;
						border:none;
						background:transparent;
						cursor: pointer;
					}
				}
				@include maxwidth(1000){
					inset: auto auto 24px 20px;
					gap: 5px;
					li {
						width:8px;
					}
				}
			}
		}
		div.overlay {
			color:$basecolor;
			position:absolute;
			inset: auto 0 40px 0;
			@include maxwidth(1000){
				position:relative;
				inset: auto;
				text-align:center;
				padding-block: 20px 26px;
				//background-color:red;
			}
			div.c {
				@include container(1280, 40);
				@include maxwidth(1000){ margin-inline: 10px;}
				p.catch {
					font-size: 32px;
					line-height: 150%; /* 48px */
					@include maxwidth(1000){
						font-size: clamp(20px, 6.93vw, 32px);
					}
				}
				p.text {
					font-size: 16px;
					line-height: 150%; /* 24px */
					@include maxwidth(1000){
						font-size: clamp(10px, 3.73vw, 16px);
					}
				}
				//@include maxwidth(1000){
				//	p.catch { font-size: 26px; }
				//	p.text { font-size: 14px; }
				//}
			}
		}
	}
}



/*============================
#headerScroll
============================*/
div#headerScroll {

display:none;

	background-color:$basecolor;
	color:$basetextcolor;
	font-size: 10px;
	font-weight: 900;
	a {
		display:block;
		display:flex;
		flex-direction:column;
		align-items: center;
		justify-content:center;
		gap: 14px;
		height:50px;
		&:after {
			@include before_as_image('../images/icon-arrow-down-black.svg', 9, 5);
		}
	}
}

/*============================
#gnav
============================*/
@keyframes ani2{
	0%{ clip-path: inset(0 0 100% 0); }
	100%{ clip-path: inset(0); }
}

div#gnav2 { // 動的に作成した方 右上に固定表示
	position:absolute;
	inset: 0 0 auto auto;
	padding-block-start: 60px;
	body.subpage &,
	body.sp_menu & {
		display:none;
	}
	clip-path: inset(0 0 100% 0);
	animation: ani2 1s .5s forwards;
}
div#gnav { // もともと存在する方 ハンバーガーボタンで表示
	position:fixed;
	inset: 0 0 auto auto;
	transition: clip-path .25s;
	clip-path: inset(0 0 0 100%);
	padding-block-start: 130px;
	//body.subpage & {
	//	padding-block-start: 200px;
	//}
	transition: clip-path .25s;
	body.header_scrollout.menu_open &,
	body.subpage.menu_open & ,
	body.sp_menu.menu_open & {
		clip-path: inset(0);
	}
	@include maxwidth(450){
		padding-block-start: 45px;
	}
}
div.common_gnav {
	min-width: 275px;
	height: auto;
	background-color: $basetextcolor;
	color:$basecolor;
	padding: 0 45px 50px;
	box-sizing: border-box;
	font-size: 15px;
	line-height: 120%;
	z-index:1000;
	nav {
		margin-bottom:40px;
		ul {
			display:flex;
			flex-direction:column;
			gap: 30px;
			li {
				a {
					display:flex;
					align-items:center;
					gap: 15px;
					position:relative;
					&:before {
						flex: 0 0 7px;
						@include before_as_image('../images/icon-arrow-left-color.svg', 6, 10);
					}
					&:after {
						content:'';
						display:block;
						position:absolute;
						inset: auto 100% -.25em 22px;
						height:1px;
						background-color: currentcolor;
						transition: .25s;
					}
					&:hover {
						&:after {
							right: 0;
						}
					}
				}
			}
		}
	}
	div.gnavButton {
		ul.common_commbuttons {
		}
	}
}

ul.common_commbuttons {
	display:flex;
	gap: 5px;
	li {
		a {
			display:flex;
			align-items:center;
			justify-content:center;
			@include wh(36);
			background-color: $accentcolor;
			img {
				@include wh(auto, 13);
			}
			&:hover {
				background-color: mix($basecolor, $basetextcolor, .95);
				img {
					filter: invert(1);
					opacity:.65;
				}
			}
		}
	}
}

// デザインにないため未実装
// html出力はしている
div#gnavToggleWrapper {
	a#gnavToggle {
		width: 50px;
		aspect-ratio: 1/1;
		background-color:$accentcolor;
		position:fixed;
		inset: 20px 40px auto auto;
		z-index:10000;
		transform: translateY(-70px);
		transition: transform .25s;
		body.admin-bar & {
			top: calc(20px + 32px);
			transform: translateY(-102px);
		}
		@include maxwidth(450){
			//inset: auto 0 0 auto !important;
			//transform: translateY(0) !important;
			right: 20px !important;
		}
		body.header_scrollout &,
		body.subpage &,
		body.sp_menu & {
			transform: translateY(0);
		}
		span.b {
			display:block;
			@include wh(20, 1);
			background-color:$accenttextcolor;
			position:absolute;
			margin:auto;
			inset:0;
		}
		span.b.b1 {
			transform: translateY(-7px);
		}
		span.b.b2 {
		}
		span.b.b3 {
			transform: translateY(7px);
		}
	}
}
//div#gnavContact {
//	display:none;
//	@include maxwidth(450){ display:block; }
//	a {
//		display:flex;
//		align-items:center;
//		justify-content:center;
//		position:fixed;
//		inset: auto 50px 0 0;
//		background: $basetextcolor;
//		color:$basecolor;
//		height:50px;
//		font-size: 13px;
//		font-weight: 700;
//		z-index:10000;
//		gap: 4px;
//		&:after {
//			@include before_as_image('../images/icon-arrow-right-white.svg', 6, 10);
//			margin-top: 3px;
//		}
//	}
//}


// 1文字ずつ表示
//.textanimation{
//	font-size: 25px;
//}
@keyframes showTextFromBottom{
	0%{ transform: translateY( -100% ); }
	100%{ transform: translateY( 0px ); }
}
.textanimation{
	span { display: inline-block; }
	& > span{
		overflow: hidden;
		& > span{ transform: translateY(-100%); }
	}
}
.effect[data-top="already"]{
	.textanimation > span > span{
		animation: showTextFromBottom 0.5s forwards;
	}
}

.effect {
	.tgt {
		// data-effectstyle="fadein"は動的に付与されるので
		// 何もしないと一瞬見えてしまう
		// →opacity:0を付与しておき、いらない場合は1にする
		opacity:0;
		//clip-path: inset(100% 0 0 0);
		&[data-effectstyle="fadein"] {
			transform: translateY(40px);
		}
		&[data-effectstyle="flash"] {
			opacity:1;
			filter: brightness(0) invert(1);
			clip-path: xywh(0 0 100% 100% round 10px);
		}
		&[data-effectstyle="opacity"] {
		}
		transition: 1s;
		//.i1～は.tgtを付与した要素に動的に付けられる
		&.i1  { transition-delay: 0.20s;}
		&.i2  { transition-delay: 0.40s;}
		&.i3  { transition-delay: 0.60s;}
		&.i4  { transition-delay: 0.75s;}
		&.i5  { transition-delay: 0.90s;}
		&.i6  { transition-delay: 1.05s;}
		&.i7  { transition-delay: 1.20s;}
		&.i8  { transition-delay: 1.35s;}
		&.i9  { transition-delay: 1.50s;}
		&.i10 { transition-delay: 1.65s;}
	}
}
.effect[data-top="already"] {
	.tgt {
		&[data-effectstyle="fadein"] {
			transform: translateY(0px);
			opacity:1;
		}
		&[data-effectstyle="flash"] {
			filter: brightness(1);
			clip-path: xywh(0 0 100% 100% round 0%);

		}
		&[data-effectstyle="opacity"] {
			opacity:1;
		}
	}
}


main { }

div#content {
	section {
	}
}

div.heading.common_heading {
	font-size: 20px;
	h2 > span { margin-inline-end: .05em; }
}

div#toppageNews {
	background-color:$basecolor;
	color:$basetextcolor;
	padding-block: 80px 60px;
	//div.headline div.item {
	//	clip-path: inset(100% 0 0 0);
	//	transform:translateY(100%);
	//	transition: 1s;
	//}
	////div.heading { transform:translateY(-100%); }
	//div.headline div.item {
	//	transform:translateY(100%);
	//	&:nth-child(1) { transition-delay: .2s;}
	//	&:nth-child(2) { transition-delay: .4s;}
	//	&:nth-child(3) { transition-delay: .6s;}
	//}
	//div.more a {
	//	transition-delay: 1s;
	//	transform:translateY(10px);
	//}
	//&[data-top="already"] {
	//	//div.heading {
	//	//	clip-path: inset(0);
	//	//	transform:translateX(0px);
	//	//}
	//	div.headline {
	//		div.item {
	//			clip-path: inset(0);
	//			transform:translateX(0px);
	//		}
	//	}
	//	//div.more a {
	//	//	opacity: 1;
	//	//	transform:translateY(0px);
	//	//}
	//}
	div.container {
		@include container(1240, 40);
		@include maxwidth(360){
			margin-inline: 25px;
		}
		div.cols {
			display:flex;
			gap: 80px;
			@include maxwidth(1000){
				gap: 40px;
			}
			@include maxwidth(840){
				display:block;
			}
			div.col {
				flex: 0 0 calc((100% - 80px * 1) / 2);
				@include maxwidth(1000){
					flex: 0 0 calc((100% - 40px * 1) / 2);
				}
				@include maxwidth(840){
					margin-bottom: 60px;
					&:last-child { margin-bottom:0; }
				}
				position:relative;
				div.heading.common_heading {
					margin-block-end: 20px;
					@include maxwidth(500){
						color:$accentcolor;
					}
					h2 {
					}
				}
				div.body {
					// div.pressrelease_headline.headline,
					// div.news_headline.headline,
					div.headline {
						div.item {
							a {
								span.term.taxonomy_informationcategory { display:none; }
							}
						}
					}
				}
				div.more {
					a {
						right: 10px;
					}
				}
			}
		}
	}
}

// div.pressrelease_headline.headline,
// div.news_headline.headline,
div.information_headline.headline {
//div.headline {
	div.item {
		border-bottom: 1px solid #EFEFEF;
		&:last-child {
			border-bottom:none;
		}
		@include maxwidth(500){
			margin-bottom:20px;
		}
		a {
			display:flex;
			//align-items:center;
			padding: 18px 70px 19px 0;
			position:relative;
			@include maxwidth(500){
				display:block;
				padding:0 0 15px;
			}
			&:after {
				content:'';
				display:block;
				background-color:currentcolor;
				position:absolute;
				inset: auto 100% 0 0;
				height:1px;
				transition: .25s;
			}
			&:hover:after {
				right:0;
			}
			span.col {
			}
			span.col.col1 {
				flex: 0 0 95px;
				& > span { display:block; }
				span.date {
					color: #0F1626;
					font-size: 14px;
					margin-block-end:14px;
				}
				span.mark {
					color: $accentcolor;
					font-size: 12px;
				}
			}
			span.col.col2 {
				flex: 1 1 auto;
				& > span {
					display:block;
				}
				span.terms_list {
					display:inline-flex;
					margin-block-end: 10px;
					span.term {
					}
				}
				span.title {
					font-size: 14px;
					line-height: 135%;
					display:flex;
					gap: 15px;
					&:after {
						display:block;
						flex: 0 0 6px;
						@include before_as_image('../images/icon-arrow-right-color.svg', 6, 10);
						align-self: center;
						position:absolute;
						inset: 2px 20px 0 auto;
						margin: auto 0 auto auto;
						@include maxwidth(500){
							position:relative;
							inset: 2px 10px 0 auto;
						}
					}
				}
			}
		}
	}
}

div.job_headline.headline {
	display:flex;
	gap: 20px;
	flex-wrap:wrap;
	div.item {
		flex: 0 0 calc((100% - 20px * 1) / 2);
		@include maxwidth(768){
			flex-basis: 100%;
		}
		a {
			display:block;
			//align-items:center;
			padding: 18px 70px 19px 20px;
			position:relative;

			min-height: 150px;

			border: 1px solid #efefef;
			box-sizing: border-box;
			box-shadow: 5px 5px 10px 0 rgba($basetextcolor, .2);

			span.col {
				display:block;
			}
			span.col.col1 {
				margin-block-end: 15px;
				span.date {
					color: #0F1626;
					font-size: 14px;
					margin-block-end:14px;
				}
				span.mark {
					color: $accentcolor;
					font-size: 12px;
				}
			}
			span.col.col2 {
				flex: 1 1 auto;
				& > span {
					display:block;
				}
				span.terms_list {
					display:inline-flex;
					margin-block-end: 7px;
					span.term {
					}
				}
				span.title {
					font-size: 18px;
					line-height: 135%;
					display:flex;
					gap: 15px;
					&:after {
						display:block;
						flex: 0 0 6px;
						@include before_as_image('../images/icon-arrow-right-color.svg', 6, 10);
						align-self: center;
						position:absolute;
						inset: 2px 20px 0 auto;
						margin: auto 0 auto auto;
						@include maxwidth(500){
							position:relative;
							inset: 2px 10px 0 auto;
						}
					}
				}
			}
		}
	}
}




*.terms_list {
	display:flex;
	flex-wrap:wrap;
	gap: 10px;
	span.term {
		display: block;
		height: 19px;
		padding: 3px 12px 0;
		box-sizing: border-box;
		line-height:1;//.default内でも存在しうるため
		align-items: center;
		background-color: $basetextcolor;
		color: $basecolor;
		font-size: 12px;
		white-space:nowrap;
		text-overflow: ellipsis;
		max-width:100%;
		overflow:hidden;
	}
	&.single { // 記事ページ用
		//justify-content:center;
		span.term {
			font-size: 14px;
			height:24px;
			padding: 4px 16px 0;
		}
		& + h3 {
			margin-top:0;
		}
	}
}

div.termlist {
	//border-bottom: 1px solid $themecolor;
	margin-block-end: 30px;
	ul {
		display:flex;
		flex-wrap:wrap;
		gap: 10px 5px;
		li {
			a {
				font-size: 13px;
				height: 35px;
				display:flex;
				box-sizing: border-box;
				padding-block-end: 1px;
				align-items:center;
				padding-inline: 20px;
				background-color: mix($basecolor, $basetextcolor, .9);
				color:$basetextcolor;
			}
			&.current {
				a {
					background-color: $themecolor;
					color:$themetextcolor;
				}
			}
		}
	}
}

div.pager {
	margin-block-start: 30px;
	text-align: center;
	font-size: .875em;
	@media screen and (max-width: 540px) {
		font-size: .6875em;
	}
	a, span {
		display: inline-block;
		margin: 0 0.25em 0.75em;
		min-width: 2.75em;
		padding: .8em 1em;
		box-sizing: border-box;
		background-color: mix($themecolor, $themetextcolor, .1);
		color:$themecolor;
		&.current {
			background-color: $themecolor;
			color: $themetextcolor;
		}
	}
}

div.monthly_archive_link {
	@include container(800, 10);
	margin-block-start: 30px;
	@include f_all(14);
	a.show_archive_links {
		display: block;
		width: 200px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: mix($basetextcolor, $basecolor, .1);
		margin: auto;
		border-radius: 30px;
		position: relative;
		&:after {
			content: '>';
			display: inline-block;
			transform: rotateZ(90deg) scaleX(.5);
			position: absolute;
			right: 30px;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	}
	ul {
		margin-top: 20px;
		display: none;
		&.show {
			display: flex;
		}
		justify-content: center;
		flex-wrap: wrap;
		li {
			margin: 0 5px 10px;
			flex: 0 0 113px;
			text-align: center;
			a {
				display: block;
				background-color: mix($basetextcolor, $basecolor, .05);
				padding: 7px 0;
				border-radius: 3px;
			}
		}
	}
}


div.more.common_more {
	@include maxwidth(500){
		text-align:center;
	}
	a {
		position:absolute;
		inset: -6px 0 auto auto;
		color: $accentcolor;
		font-size: 14px;
		font-weight: 900;
		display:flex;
		align-items:center;
		gap: 9px;
		
		padding: 0 10px 1px 12px;
		box-sizing: border-box;
		height:32px;
		transition: .25s;
		&:after {
			@include before_as_image('../images/icon-arrow-right-color.svg', 6, 10);
		}
		&:hover {
			background-color: #eee;
		}
		@include maxwidth(500){
			@include wh(325, 45);
			max-width:100%;
			background-color: $accentcolor;
			color:$accenttextcolor;
			position:static;
			display:inline-flex;
			&:after {
				@include before_as_image('../images/icon-arrow-right-color.svg', 6, 10);
				flex: 0 0 8px;
				order:-1;
				filter: brightness(300%);
			}
			&:hover {
				color: $accentcolor;
				&:after {
					filter: brightness(100%);
				}
			}
		}
	}
}


div#toppageAboutus {
	position:relative;
	background-color:$basetextcolor;
	color:$basecolor;
	padding-block:120px;
	@include maxwidth(1000){
		padding-block: 0;
	}
	div.bgimage {
		position:absolute;
		inset: 0;
		img {
			@include obj100;
		}
		&:after {
			content:'';
			display:block;
			position:absolute;
			inset:0;
			background: rgba(0, 0, 0, 0.60);
			backdrop-filter: blur(2px);
		}
	}
	div.container {
		position:relative;
		@include container(1240, 45);
		@include maxwidth(1000){
			margin-inline: 0;
		}
		div.heading.common_heading {
			margin-bottom:60px;
			text-align:center;
			@include maxwidth(1000){ margin-block-end: 40px;}
			h2 {
			}

			@include maxwidth(1000){ 
				background: rgba(#000, .6);
				backdrop-filter: blur(2px);
				margin-bottom:0;
				padding-block: 80px 40px;
			}


		}
		div.body {
			div.cols {
				display:flex;
				gap: 94px;
				@include maxwidth(1000){
					display:block;
				}
				div.col.docs {
					flex: 1 1 586px;
					@include maxwidth(1000){
						background: rgba(#000, .6);
						backdrop-filter: blur(2px);
						padding-bottom: 38px;
						& > * {
							width: 500px;
							max-width: calc(100% - 25px * 2);
							margin-inline: auto;
						}
					}
					div.logo {
						margin-block-end:60px;
						text-align:center;
						@include maxwidth(1000){ margin-block-end: 25px;}
						img {
							@include maxwidth(1000){ width: 80px;}
						}
					}
					div.leadtext, div.subheader {
						margin-block-end:30px;
						font-size: 18px;
						line-height:1.25;
						@include maxwidth(1000){
							margin-block-end: 25px;
							text-align:center;
						}
					}
					div.subheader {
						margin-block-end:30px;
						font-size: 16px;
						line-height:1.25;
						@include maxwidth(1000){
							text-align:center;
						}
					}
					div.text {
						margin-block-end:50px;
						font-size: 14px;
						line-height: 180%;
						@include maxwidth(1000){ margin-block-end: 30px;}
					}
					div.link {
						ul.common_links {
							li {
								a {
								}
							}
							@include maxwidth(1000){
								gap: 5px;
								li {
									flex-basis: 100%;
								}
							}
						}
					}
				}
				div.col.visual {
					flex: 1 1 560px;
					aspect-ratio: 1/1;
					@include maxwidth(1000){
						width: 500px;
						max-width: calc(100% - 25px * 2);
						margin-inline: auto;
						padding: 13px 0 40px;
					}
					img {
						@include obj100;
					}
				}
			}
		}
	}
}

ul.common_links {
	display:flex;
	flex-wrap:wrap;
	gap: 10px;
	li {
		flex: 0 0 calc((100% - 10px * 1) / 2);
		a {
			display:flex;
			align-items:center;
			gap: 24px;
			padding:18px 18px 20px 20px;
			box-sizing: border-box;
			position:relative;
			&:before {
				flex: 0 0 6px;
				@include before_as_image('../images/icon-arrow-right-color.svg', 6, 10);
			}
			background-color:$basetextcolor;
			color:$basecolor;
			font-size: 14px;
			line-height: 130%;
			z-index:1;
			&:after {
				content: "";
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
				background: $basecolor;
				transform-origin: 100% 50%;
				transform: scaleX(0);
				transition: transform ease .5s;
			}
			&:hover {
				color: $basetextcolor;
				&:before { filter: brightness(0%); }
				&:after {
					transform-origin: 0% 50%;
					transform: scaleX(1);
				}
			}
		}
	}
}

div#toppageGroup {
	padding-block:80px;
	background-color:$basecolor;
	color:$basetextcolor;
	@include maxwidth(700){
		padding-block: 60px 40px;
	}
	div.container {
		@include container(1240, 25);
		div.heading.common_heading {
			text-align:center;
			margin-bottom:40px;
			@include maxwidth(470){
				margin-bottom:20px;
			}
			h2 {
			}
		}
		div.body {
			display:flex;
			flex-wrap:wrap;
			gap: 40px 20px;
			@include maxwidth(470){
				gap: 8px;
			}
			div.item {
				flex: 0 0 calc((100% - 20px * 2) / 3);
				@include maxwidth(700){
					flex-basis: calc((100% - 20px * 1) / 2);
				}
				@include maxwidth(470){
					flex-basis: 100%;
				}
				a {
					display:block;
					position:relative;
					& > span {
						display:block;
					}
					span.image {
						height: 200px;
						margin-block-end: 10px;
						img {
							@include obj100;
						}
						@include maxwidth(470){
							aspect-ratio: 325/220;
							height:auto;
							margin-block-end: initial;
						}
					}
					span.docs {
						@include maxwidth(470){
							position:absolute;
							inset: auto 0 0 0;
							color: $basecolor;
							background-color: rgba($basetextcolor, .6);
							padding:10px;
						}
						span.labels {
							display:flex;
							gap: 10px;
							margin-block-end: 7px;
							span.label {
								background-color:$basetextcolor;
								color:$basecolor;
								display: flex;
								height: 19px;
								padding: 0 12px 1px;
								box-sizing: border-box;
								align-items: center;
								gap: 10px;
								font-size: 12px;
							}
						}
						span.name {
							display:flex;
							align-items:center;
							gap: 10px;
							font-size: 18px;
							line-height: 1.3;
							@include maxwidth(470){
								gap: 6px;
							}
							&:after {
								flex: 0 0 6px;
								@include before_as_image('../images/icon-arrow-right-color.svg', 6, 10);
								margin-block-start: 4px;
								@include maxwidth(470){
									margin-block-start: 2px;
									order: -1;
								}
							}
							@include maxwidth(700){
								font-size: 16px;
							}
						}
					}
				}
			}
		}
	}
}

div#toppageOutline {
	background-color:$basetextcolor;
	color:$basecolor;
	padding-block:60px 50px;
	@include maxwidth(820){
		padding-block:0;
	}
	div.container {
		@include container(1240,20);
		@include maxwidth(820){
			margin-inline: initial;
		}
		div.body {
			div.item {
				display:flex;
				margin-block-end: 20px;
				position:relative;
				&:last-child {
					margin-block-end: 0;
				}
				@include maxwidth(820){
					margin-block-end: 0;
				}
				div.col.visual {
					flex: 1 1 610px;
					position:relative;
					@include maxwidth(820){
						position:absolute;
						inset: 0;
					}
					img {
						position:absolute;
						inset:0;
						@include obj100;
					}
				}
				div.col.docs {
					flex: 1 1 630px;
					padding-block: 40px 50px;
					background-color: darken($basetextcolor, 15%);
					@include maxwidth(820){
						background-color: rgba(darken($basetextcolor, 15%), .6);
						z-index:1;
						padding-block: 50px;
					}
					display:flex;
					align-items:center;
					div.w {
						position:relative;
						margin-inline: 40px;
						@include maxwidth(820){
							margin-inline: auto;
							width: calc(100% - 25px * 2);
							max-width: 500px;
						}

						div.heading.common_heading {
							margin-block-end: 30px;
							@include maxwidth(820){
								text-align:center;
							}
							h2 {
							}
						}
						div.text {
							font-size: 14px;
							line-height: 180%;
						}
						div.more {
							@include maxwidth(500){
								margin-top:25px;
							}
							a {
							}
						}
					}
				}
				&:nth-child(2n) {
					flex-direction:row-reverse;
				}
			}
		}
	}
}

div#toppageVisual {
	background-color:$basecolor;
	padding-block: clamp(20px, 2.08vw, 30px);
	div.container {
		height: clamp(250px, 27.78vw, 400px);
		img {
			@include obj100;
		}
	}
}

div#toppageRecruit {
	position:relative;
	background-color:$basetextcolor;
	color:$basecolor;
	padding-block:100px 160px;
	@include maxwidth(1000){
		padding-block:clamp(25px, 5vw, 100px) 40px;
	}
	div.bgimage {
		position:absolute;
		inset:0;
		background-color:red;
		img {
			object-fit: cover;
			width:100%;
			height:calc(100% - 40px);
			@include maxwidth(1000){
				height: 100%;
			}
		}
		&:after {
			content:'';
			display:block;
			position:absolute;
			inset:0 0 40px 0;
			@include maxwidth(1000){
				bottom: 0;
				backdrop-filter: grayscale(100%)
			}
			background: rgba(0, 0, 0, 0.50);
		}
		&:before {
			content:'';
			background-color: $basecolor;
			display:block;
			height:40px;
			position:absolute;
			inset: auto 0 0 0;
			@include maxwidth(1000){
				display:none;
			}
		}
	}
	div.container {
		@include container(1240, 60);
		display:flex;
		gap: 120px;
		position:relative;
		align-items:flex-start;
		@include maxwidth(1200){
			gap: 60px;
		}
		@include maxwidth(1000){
			display:block;
			width: 500px;
			margin-inline: auto;
			max-width: calc(100% - 25px * 2);
		}
		&:before, &:after {
			content:'';
			display:block;
			@include wh(80);
			background-color:$accentcolor;
			position:absolute;
			@include maxwidth(1000){
				@include wh(40)
			}
		}
		&:before {
			inset: -40px auto auto -40px;
			z-index:0;
			@include maxwidth(1000){
				inset: -15px auto auto -15px;
			}
		}
		&:after {
			inset: auto -40px -40px auto;
			z-index:2;
			@include maxwidth(1000){
				inset: auto -15px -15px auto;
			}
		}
		& > div {
			position:relative;
			z-index:1;
		}
		div.col.docs {
			flex: 1 1 580px;
			div.image {
				height:280px;
				margin-block-end: 57px;
				img {
					@include obj100;
				}
				@include maxwidth(1000){
					margin-block-end: 30px;
				}
				@include maxwidth(435){
					height:auto;
					aspect-ratio: 325/238;
				}
			}
			div.heading.common_heading {
				margin-block-end: 35px;
				@include maxwidth(1000){
					margin-block-end: 30px;
				}
				h2 {
				}
			}
			div.leadtext {
				margin-block-end: 22px;
				font-size: 18px;
				font-weight: 700;
				@include maxwidth(1000){
					margin-block-end: 27px;
				}
			}
			div.text {
				margin-block-end: 26px;
				font-size: 14px;
				line-height: 180%;
				@include maxwidth(1000){
					margin-block-end: 30px;
				}
			}
			div.link {
				@include maxwidth(1000){
					margin-block-end: 20px;
				}
				ul.common_links {
					@include maxwidth(1000){
						gap: 5px;
					}
					li {
						@include maxwidth(1000){
							flex-basis: 100%;
						}
						a {
						}
					}
				}
			}
		}
		div.col.visual {
			flex: 1 1 540px;
			position:relative;
			aspect-ratio: 540/706;
			@include maxwidth(1000){
				aspect-ratio: 1/1;
			}
			img {
				position:absolute;
				inset:0;
				@include obj100;
			}
		}
	}
}


footer { }

div#footer {
	background-color: $basetextcolor;
	@include maxwidth(1000){
		background-color: darken($basetextcolor, .15);
	}
	color:$basecolor;
	padding-block:60px 40px;
	div.container {
		@include container(1240, 100);
		@include maxwidth(1000){
			margin-inline: auto;
			width:500px;
			max-width: calc(100% - 25px * 2);
		}
		div#footerMainMenu {
			display:flex;
			justify-content:space-between;
			margin-block-end: 60px;
			@include maxwidth(1000){
				display:block;
				margin-block-end: 40px;
			}
			div.item {
				@include maxwidth(1000){
				}
				& > ul {
					margin-block-end: 30px;
					&:last-child {
						margin-block-end: 0;
					}
					@include maxwidth(1000){
						margin-block-end: 5px;
						&:last-child {
							margin-block-end: 5px;
						}
					}
					li {
						line-height: 130%;
					}
					& > li {
						font-size: 16px;
						a {
							display:inline-flex;
							position:relative;
							@include maxwidth(1000){
								background: $basetextcolor;
								height:45px;
								display:flex;
								align-items:center;
								padding: 0 18px;
							}
							&:after {
								content:'';
								display:block;
								position:absolute;
								inset: auto 100% -.25em 21px;
								height:1px;
								background: currentcolor;
								transition:  right .25s;
								@include maxwidth(1000){
									inset: auto 100% 0 0;
									opacity:.25;
									height:3px;
								}
								@include maxwidth(768){
									display:none;
								}
							}
							&:hover:after {
								right: 0;
							}
						}
						& > a {
							gap: 15px;
							&:before {
								flex: 0 0 6px;
								@include before_as_image('../images/icon-arrow-right-color.svg', 6, 10);
								margin-block-start: calc((16px * 1.3  - 10px) / 2);
								@include maxwidth(1000){
									flex: 0 0 10px;
									@include before_as_image('../images/icon-plus-color.svg', 10, 10);
									margin-block-start: 2px;
								}
							}
						}
						& > ul {
							margin-block-start: 20px;
							@include maxwidth(1000){
								margin-block-start: 5px;
							}
							& > li {
								font-size: 14px;
								font-weight: 500;
								margin-block-end: 5px;
								&:last-child {
									margin-block-end: 0;
								}
								& > a {
									gap: 12px;
									&:before {
										@include before_as_image('../images/icon-bar-horizontal-color.svg', 8, 1);
										margin-block-start: calc((14px * 1.3 - 1px) / 2);
									}
									@include maxwidth(1000){
										gap: 15px;
										background-color: rgba($basecolor,.15);
										//color:$basetextcolor;
										height:40px;
										&:before {
											@include before_as_image('../images/icon-bar-horizontal-color.svg', 10, 10);
											margin-block-start: 2px;
										}
									}

								}
							}
						}
					}
				}
			}
		}
		div.footerButton {
			margin-block-end: 25px;
			ul {
				justify-content:center;
				li {
					a {
						img {
						}
					}
				}
			}
		}

		div#footerSitename {
			margin-block-end: 20px;
			text-align:center;
			font-size: 16px;
		}

		div#footerAsideMenu {
			margin-block-end: 30px;
			ul {
				display:flex;
				justify-content:center;
				gap: 1em;
				font-size: 14px;
				li {
					a {
					}
				}
			}
		}

		div#footerCopyright {
			text-align:center;
			p {
				font-size: 12px;
			}
		}
	}
}
div.single_recruitment_contents {
	margin-block: 40px;
		:first-child { margin-top: 0;}
		:last-child { margin-bottom: 0;}
	h4 {
		margin-block: 40px 20px;
		font-size: 18px;
		border-bottom: 1px ;
	}
	p {
		margin-block: 1.2em;
		line-height:1.5;
	}
	div.recruitment_job_contents {
		border: 1px solid #aaa;
		padding:2em;
		margin-bottom:40px;
		div.heading {
			margin-bottom:1.5em;
			border-bottom: 1px solid #ccc;
			padding-bottom: .75em;
			h4 {
			}
		}
		div.text {
			font-size: 15px;
			p {
			}
		}
	}
	table {
		width: 100%;
		tbody {
			tr {
				th, td {
					border: 1px solid #aaa;
					padding:16px;
					line-height: 1.5;
					font-size: 14px;
					@include maxwidth(768){
						font-size: 12px;
					}
				}
				th {
					width: 160px;
					@include maxwidth(768){
						width:100px;;
					}
					background-color: mix($basetextcolor, $basecolor, .1);
				}
				td {
				}
			}
		}
	}
	ul.common_links {
		margin-block:40px;
		li {
			@include maxwidth(768){
				flex-basis: 100%;
			}
			a {
			}
		}
	}
}