@charset "utf-8";

@import "mixin";

::selection{
	background-color: $themecolor;
	color: $basecolor;
}

html{
	@include rootstyles;
}

div.container{
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	position:relative;
	.toppage &{
		width: 1176px;
	}
	.subpage &{
		width: 1064px;
	}
}


div#wrapper {}

header {}

/*============================
#mainVisual
============================*/
div#mainVisual {
	div.container {
		//width: 1456px;
		width:100% !important;
		div.visual {
			display:none;
			&.slick-initialized {
				display:block;
			}
			p {
				@include maxwidth(600){
					height:calc(100vh - 100px);
				}
				img {
					width: 100%;
					height:100% !important;
					object-fit: cover;
				}
			}
			.slick-arrow{
				background-color: transparent;
				border: none;
				cursor: pointer;
				outline: none;
				padding: 0;
				appearance: none;
				width: 42px;
				height: 42px;
				top:0;bottom:0;z-index:1;margin:auto;position:absolute;
				background: none no-repeat center center / 42px 42px;
				overflow: hidden;
				text-indent: 100px;
				@mixin tmp2($d){
					background-image:url(../images/slider-arrow-#{$d}.png);
					#{$d} :30px;
					@include maxwidth(768){#{$d}: 2px; background-size: 32px 32px;}
					@include maxwidth(520){background-size: 24px 24px;}
					@include maxwidth(420){background-size: 24px 24px;}
				}
				&.slick-prev{@include tmp2(left);}
				&.slick-next{@include tmp2(right);}
			}

		}
	}
}

/*============================
#siteHeading
============================*/
div#siteHeading {
	// $foobar: 900; ※メニュー追加により変更
	$foobar: 1200;
	$toggle: 740;
	margin-bottom: 98px;
	@include maxwidth(520){
		margin-bottom: 50px;
	}
	body.subpage &{
		margin-bottom: 0;
	}
	.container{
		width: 1456px;
		display:flex;
		@include maxwidth($foobar){
			display:block;
		}
/*============================
#headerTitle
============================*/
		div#headerTitle {
			width: 38%;
			display: flex;
			flex-direction: column;
			justify-content: center;//縦方向中央
			@include maxwidth($foobar){
				width: auto;
				text-align:center;
			}
			.large{
				display:block;
				// @include maxwidth(1270){
				@include maxwidth(1400){
					display: none;
				}
				.subpage &{display:none;}
				//align-items: center;//横方向中央
				//text-align: center;
				margin-left: 28px;;
				h1 {
					position:absolute;
					width: 426px;
					height: 182px;
					top:-10px;
					bottom: 0;
					margin: auto;
					//@include maxwidth(1024){
					//		position:relative;
					//		margin: -20px 0 -5px;
					//}
				}
			}
			.small{
				display:none;
				// @include maxwidth(1270){
				@include maxwidth(1400){
					display: block;
				}
				.subpage &{display:block;}
				//outline: 1px solid red;
				h1{
					margin-left: 32px;
					width: 225px;
					height: 48px;
					@include maxwidth($foobar){
						margin:auto;
						padding: 24px 0;
					}
					@include maxwidth($toggle){
						margin: 0 0 0 20px;
					}
				}
			}
		}


		div#menuToggle {
			display:none;
			@include maxwidth($toggle){
				display:block;
			}
			a {
				opacity: 1;
				display:block;
				width: 40px;
				height: 40px;
				position:absolute;//fixed;
				right: 28px;
				top:28px;
				z-index:1;
				margin: auto;
				background-color:$themecolor;//#f0f0f0;
				-webkit-tap-highlight-color:rgba(0,0,0,0);
				span.b {
					transition: .5s;
					display:block;
					width:26px;
					height: 2px;
					background-color:$basecolor;
					position:absolute;
					top:0;
					bottom:0;
					left:0;
					right:0;
					margin:auto;
					&.b1{transform: translateY(-7px);}
					&.b2{}
					&.b3{transform: translateY(7px);}
				}
				&.show {
					background-color: #f0f0f0;
					span.b {
						background-color:#d00;
						&.b1{transform: rotateZ(45deg);}
						&.b2{transform: rotateY(90deg);}
						&.b3{transform: rotateZ(-45deg);}
					}
				}
			}
		}
/*============================
#headerMenu
============================*/
		div#headerMenu {
			width: 62%;
			@include maxwidth(1400){
				width: 85%;
			}
			@include maxwidth($toggle){
				display:none;
				//position:absolute;//fixed;
				left:0;
				right: 0;
				top:95px;
				z-index: 1;
				width:100%;
				&.show{
					display:block;
				}
			}
			@include maxwidth($foobar){
				width:auto;
			}
			background-color:#222222;
			color:#fff;
			div#webMenu {
				@include f_all(12, 40, "");
				//@include maxwidth(520){@include fs(10);}
				@include fw_bold;
				border-bottom: 1px solid rgba(255,255,255,.2);
				ul {
					display:flex;
					flex-wrap: wrap;
					margin: 0 75px 0 15px;
					@include maxwidth(1400){
						margin: 0 35px 0 15px;
					}
					@include maxwidth(1200){
						margin: 0 30px;
					}
					justify-content: flex-end;
					@include maxwidth($foobar){
						margin: 0;
						justify-content: space-around;
					}
					li {
						// margin-left: 32px;
						margin-left: 25px;
						@include maxwidth(1010){
							margin-left: 16px;
						}
						&:first-child{margin-left:0;}
						@include maxwidth($foobar){
							margin: 0;
						}
						a {
							padding: 13px 0;
							body.subpage &{padding: 6px 0;}
							@include maxwidth($foobar){
								padding: 11px 0!important;
							}
							display:block;
							img {
								//height: 14px;
								//width: auto;
								vertical-align:middle;
								margin-right: 6px;
								margin-top: -1px;
								@include maxwidth($foobar){
									display:none;
								}
							}
						}
					}
				}
			}
			div#gNav {
				ul {
					margin: 0 75px;
					display:flex;
					@include fw_bold;
					justify-content: space-between;
					@include f_all(15, "", "");
					@include maxwidth(1400){
						margin: 0 35px 0 60px;
					}
					@include maxwidth(1200){
						@include fs(13);
						margin: 0 30px;
					}
					@include maxwidth(1080){
					}
					@include maxwidth($foobar){
						//@include fs(12);
						flex-wrap: wrap;
						margin: 0;
						justify-content: space-around;
					}
					li {
						a {
							display:block;
							padding: 26px 0;
							body.subpage &{padding: 23px 0;}
							@include maxwidth(800){padding:20px 0;}
						}
					}
				}
			}
			@include maxwidth($toggle){
				div#webMenu, div#gNav {
					ul {
						//display:block;
						justify-content: flex-start;
						li {
							flex: 0 1 50%;
							text-align:center;
							border: none !important;
							border-width: 0 1px 1px 0 !important;
							&:first-child{border-top:none;}
							box-sizing: border-box;
						}
					}
				}
				div#webMenu {
					ul{
						background-color:#444;
						@include f_all(14, "", "");
					}
				}
				div#gNav {
					ul{
						@include f_all(16, "", "");
						li {
							flex: 0 0 100%;
						}
					}
				}
			}
		}
		div#headerMenu2 {
			width: 62%;
			@include maxwidth(1400){
				width: 85%;
			}
			@include maxwidth($toggle){
				display:none;
				//position:absolute;//fixed;
				left:0;
				right: 0;
				top:95px;
				z-index: 1;
				width:100%;
				&.show{
					display:block;
				}
			}
			@include maxwidth($foobar){
				width:auto;
			}
			div#gNav2 {
				background-color:#222222;
				color:#fff;
				& > ul {
					margin: 0 75px;
					display:flex;
					@include fw_bold;
					justify-content: space-between;
					@include f_all(15, "", "");
					@include maxwidth(1400){
						margin: 0 35px 0 60px;
					}
					@include maxwidth(1200){
						@include fs(13);
						margin: 0 30px;
					}
					@include maxwidth(1080){
					}
					@include maxwidth($foobar){
						//@include fs(12);
						flex-wrap: wrap;
						margin: 0;
						justify-content: space-around;
					}
					& > li {
						position:relative;
						& > ul {
							position:absolute;
							z-index:1;
							//bottom:150px;
							clip-path: inset(100% 0 0 0);
							body.subpage & { clip-path: inset(0 0 100% 0); }
							transition: clip-path .25s;
							& > li {
								height: 40px;
								width:200px;
								padding-top:1px;
								& > a {
									display:flex;
									height: 100%;
									justify-content:center;
									align-items:center;
									background-color: #222;
								}
							}
						}
						&.show > ul {
							clip-path: inset(0) !important;
						}
						&.has_child {
							& > a {
								display:flex;
								gap: 4px;
								&:after {
									flex: 0 0 14px;
									content:'';
									display:block;
									width:14px;
									height:14px !important;
									background: url(../images/202512/icon-arrow-up-color.svg) center / contain no-repeat;
								}
								body.subpage &:after {
									transform: rotateZ(180deg);
								}
							}
						}
						& > a {
							display:flex;
							//padding: 26px 0;
							height: 60px;
							align-items:center;
							//body.subpage &{padding: 23px 0;}
							//@include maxwidth(800){padding:20px 0;}
						}
					}
				}
			}
			div#webMenu2 {
				background-color:#fff;
				color:#222222;
				color: #222;
				font-size: 14px;
				body.subpage & {
					font-size: 12px;
				}
				@include fw_bold;
				border-bottom: 1px solid rgba(255,255,255,.2);
				ul {
					display:flex;
					flex-wrap: wrap;
					margin: 0 75px 0 15px;
					@include maxwidth(1400){
						margin: 0 35px 0 15px;
					}
					@include maxwidth(1200){
						margin: 0 30px;
					}
					justify-content: flex-end;
					@include maxwidth($foobar){
						margin: 0;
						justify-content: space-around;
					}
					li {
						// margin-left: 32px;
						margin-left: 25px;
						@include maxwidth(1010){
							margin-left: 16px;
						}
						&:first-child{margin-left:0;}
						@include maxwidth($foobar){
							margin: 0;
						}
						a {
							padding: 13px 0;
							body.subpage &{padding: 6px 0;}
							@include maxwidth($foobar){
								padding: 11px 0!important;
							}
							display:block;
							img {
								//height: 14px;
								//width: auto;
								vertical-align:middle;
								margin-right: 6px;
								margin-top: -1px;
								//@include maxwidth($foobar){
								//	display:none;
								//}
							}
						}
					}
				}
			}
			@include maxwidth($toggle){
				div#webMenu2, div#gNav2 {
					ul {
						//display:block;
						justify-content: flex-start;
						li {
							flex: 0 1 50%;
							text-align:center;
							border: none !important;
							border-width: 0 1px 1px 0 !important;
							&:first-child{border-top:none;}
							box-sizing: border-box;
						}
					}
				}
				div#gNav2 {
					& > ul{
						@include f_all(16, "", "");
						& > li {
							flex: 0 0 100%;
							& > a {
								padding-inline: 20px;
								border-bottom: 1px solid rgba(#fff, .5);
							}
							&.has_child a {
								&:after {
									transform:rotateZ(180deg);
									flex: 0 0 20px;
									width: 20px;
									height:20px !important;
								}
							}
							& > ul {
								//clip-path: inset(0 0 100% 0);
								clip-path: inset(0) !important;
								//bottom:auto !important;
								//top:50px;
								//right:2px !important;
								//left:20px;
								//z-index:1;
								//display:inline-flex;
								
								position:static;
								
								//flex-wrap:wrap;
								//background-color:rgba(#fff, .85);
								backdrop-filter: blur(5px);
								///font-size: 13px;
								box-sizing: border-box;
								display:flex;
								width: 100%;
								flex-wrap:wrap;
								gap: 1px;
								& > li {
								//	flex: 0 0 33.33%;
									flex: 0 0 calc((100% - 1px) / 2);
									height: 50px;
									padding:0;
									& > a {
										background-color: #555;
									}
								}
							}
							&.open > ul {
							}
						}
					}
				}
				div#webMenu2 {
					& > ul{
						background-color:#fff;
						@include f_all(14, "", "");
						& > li {
							& > a {
								padding: 15px 0 !important;
								border-bottom: 1px solid #ccc;
								border-right: 1px solid #ccc;
							}
						}
					}
				}
			}
		}






	}
}

div#pageHeading{
	margin-bottom: 112px;
	div.container{
		width: 1456px;
		height: 224px;
		@include maxwidth(1080){
			height: 162px;
		}
		@include maxwidth(640){
			height: 96px;
		}
		.heading{
			width: 100%;
			height: 100%;
			@include flex_centering;
			// background:url(../images/mainvisual-subpage.jpg) no-repeat center center / cover $themecolor;
			background:no-repeat center center / cover $themecolor;
			color: $basecolor;
			position: relative;
			&::before{
				content: "";
				position: absolute;
				background-color: rgba(#000,.3);
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				display: block;
			}
			h1{
				@include f_all(25,100,120);
				@include maxwidth(640){
					@include fs(20);
				}
				@include fw_bold;
				position: relative;
			}
			small{
				font-family: "Roboto Condensed";
				font-weight: 700;
				font-style: italic;
				@include f_all(11,120,"");
				margin-top: .75em;
				@include maxwidth(640){
				margin-top: .5em;
				}
				position: relative;
			}
		}
		.topicpath{
			position:absolute;
			left:0;
			bottom:0;
			@include f_all(12,40,"");
			@include maxwidth(1080){
				@include f_all("","",140);
			}
			@include fw_bold;
			@include maxwidth(1080){
				position:static;
			}
			ul{
				display:block;
				background-color:$basecolor;
				@include clearfloat;
				padding: 15px 30px;
				@include maxwidth(1080){
					padding: 10px 20px;
				}
				li{
					display:inline-block;
					float:left;
					background: url(../images/topicpath-marker.png) no-repeat right center / 4px 8px;
					padding-right: 16px;
					margin-right: 14px;
					&:last-child{
						background: none;
						padding-left: 0;
						margin-left: 0;
					}
					a{
						color: $themecolor;
						text-decoration: underline;
					}
				}
			}
		}
	}
}


/*============================
#content
============================*/
div#content {
	main {
		//div#main
	}
	aside {
		clear: both;
		div#aside {
		}
	}
}

/*============================
#main
============================*/
div#main {
	div.container{
		max-width: 95%;
		body.subpage &{
			padding-bottom: 70px;
		}
		.default{
			@include contentdefault;
		}
	}
}
/*============================
#toppageAnniversary
============================*/
#toppageAnniversary{
	div.container{
		width: 1176px;
		margin:  40px auto 50px;
		@include maxwidth(1176){
			max-width: 95%;
			width: 100%;
		}
		@include maxwidth(520){
			margin: 0 auto 80px;
		}
		div.body{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 60px 20px 40px;
			box-sizing: border-box;
			position: relative;
			&:before{
				content: "";
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: rgba($color: #000000, $alpha: 0.75);
			}
			p.anniv_logo{
				position: relative;
				margin-bottom: 40px;
				text-align: center;
				img{
					width: 464px;
					height: auto!important;
				}
			}
			p.link{
				position: relative;
				width: 31.3%;
				margin: 0 auto;
				@include maxwidth(1176){
					max-width: 95%;
					width: 100%;
				}
				a{
					color: #fff;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 40px;
					background:url(../images/50th-anniversary/list-marker-w.png) right 28px center / 14px no-repeat #183F7E;
					font-size: 0.875rem;
					letter-spacing: 0.04rem;
					font-weight: 700;
				}
			}
		}
	}
}

/*============================
#toppageMessage
============================*/
div#toppageMessage {
	margin-bottom: 10px;
	position:relative;
	padding:177px 40px 182px;
	@include maxwidth(600){
		padding:0;
	}
	div.bgimage {
		position:absolute;
		inset:0;
		@include maxwidth(600){
			display:none;
		}
		img {
			width:100%;
			height:100% !important;
			object-fit: cover;
		}
		&:after {
			content:'';
			background-color: #000;
			opacity:50%;
			display:block;
			inset:0;
			position:absolute;
			mix-blend-mode: overlay;
		}
	}
	div.container {
		width: 1360px;
		display:flex;
		@include maxwidth(1080){
			display:block;
		}
		div.text {
			flex: 0 0 50%;
			background: rgba(255, 255, 255, 0.90);
			display:flex;
			padding:160px 20px;
			box-sizing: border-box;
			justify-content:center;
			align-items:center;
			flex-direction:column;
			@include maxwidth(1080){
				padding:40px 20px;
			}
			@include maxwidth(600){
				position:static;
				display:block;
				padding:0 30px;
				margin-bottom: 40px;
				br{display:none;}
			}
			div.heading {
				margin-bottom: 45px;
				text-align:center;
				h2 {
					@include f_all(25, 100, 120);
					@include fw_bold;
					margin-bottom: 4px;
				}
				small {
					@include roboto_con_bi;
				}
			}
			div.body {
				p {
					text-align:center;
					@include maxwidth(600){
						text-align: initial;
					}
					@include f_all(14, "", 200);
					font-weight: 700;
				}
			}
		}
		div.visual {
			flex: 0 0 50%;
			position:relative;
			img {
				display:block;
				width: 100%;
				height: 100% !important;
				object-fit: cover;
			}
		}
	}
}

/*============================
#toppageWorks
============================*/
div#toppageWorks {
	body.toppage &{
		padding: 70px 0 100px;
		div.container {
			width: 1464px;
			//outline: 1px solid red;
			div.heading {
				@include toppagenormalheading;
				margin-bottom: 40px;
			}
			div.body {
				div.worksheadline {
					ul{
						display:none;
						&.slick-initialized {
							display:block;
						}
						li{
							margin-bottom:0;
						}
					}
				}
			}
		}
	}
}

.headline {
	.more{
		p {
			a {
				display:block;
				//max-width: 1176px;
				max-width: 355px;
				width: 100%;
				@include maxwidth(400){
					max-width: 280px;
				}
				margin:auto;
				border: 1px solid $themecolor;
				background: url(../images/list-marker-b.png) right 30px center / 14px 14px no-repeat;
				padding: 13px 0;
				text-align:center;
				@include f_all(14, 40, "");
				color: #222;
				@include fw_bold;
			}
		}
	}
}

/*============================
#toppageInformation
============================*/
div#toppageInformation {
	background-color:#fafafa;
	padding: 70px 0 100px;
	div.container {
		width: 1176px;
		div.heading {
			@include toppagenormalheading;
		}
		div.body {
			div.tabs {
				ul {
					display: flex;
					@include maxwidth(440){
						flex-wrap: wrap;
					}
					//justify-content: space-between;
					li {
						flex: 1 1 100%;
						@include maxwidth(440){
							flex-basis: 50%;
						}
						display:block;
						//outline: 1px solid red;
						a {
							display:block;
							background-color:rgba(24,63,126,.2);
							color:rgba(24,63,126,.6);
							padding: 15px 0;
							text-align:center;
							border:1px solid #fff;;
							border-width: 0 0 1px 1px;
							@include f_all(14, 40 ,"");
							&.current{
								background-color: $themecolor;
								color: #fff;
								@include fw_bold;
							}
							&:hover{opacity: 1;}
						}
					}
				}
			}
			//div.informationheadline {}
		}
	}
}

/*============================
#toppageAbout
============================*/
div#toppageAbout {
	background: url(../images/toppage-about-bg.jpg) no-repeat center center / cover $themecolor;
	color: #fff;
	margin-bottom: 60px;
	div.container {
		padding: 100px 0 75px;
		max-width: 90%;
		div.heading {
			display:flex;
			margin-bottom: 90px;
			@include maxwidth(540){
				display:block;
			}
			div.title {
				flex: 1 1 420px;
				margin-bottom: 60px;
				h2 {
					@include f_all(19, 40, "");
					@include fw_bold;
					margin-bottom: 5px;
				}
				small {
					@include roboto_con_bi;
					color: inherit;
				}
			}
			div.text {
				flex: 1 1 755px;
				@include f_all(14, "", 246);
				@include fw_bold;
				margin-top: -0.46em;
				p {
				}
			}
		}
		div.links {
			ul {
				display:flex;
				justify-content: space-between;
				flex-wrap: wrap;
				li {
					flex: 0 1 31.3%;
					@include maxwidth(800){
						flex-basis: 49%;
					}
					@include maxwidth(500){
						flex-basis: 100%;
					}
					margin-bottom: 2.5%;
					a {
						@include flex_centering;
						height: 40px;
						border: 1px solid #fff;
						background: url(../images/list-marker-b.png) right 28px center / 14px no-repeat rgba(255,255,255,.8);
						color:#222;
						@include f_all(14,40,"");
						@include fw_bold;
						@include maxwidth(500){
							background-color:rgba(255,255,255,.1);
							color:#fff;
						}
					}
				}
			}
		}
	}
}


/*============================
#toppageRecruit
============================*/
div#toppageRecruit {
	padding: 60px 0 27px;
	div.container {
		div.heading {
			@include toppagenormalheading;
		}

		div.body {
			ul {
				display: flex;
				justify-content: space-between;
				@include maxwidth(700){
					display:block;
				}
				gap: 12px;
				li {
					//flex: 1 1 100%;
					flex: 0 0 calc((100% - 12px * 2) / 3);
					//width: 33.3%;
					//height: 252px;
					aspect-ratio:1 / 1;
					@include maxwidth(700){
						aspect-ratio: 3 / 2;
					}
					//max-width: 373px;
					background: none no-repeat center center / cover;
					@mixin tmp($n:"01"){
						background-image: url(../images/toppage-recruit-image-#{$n}.jpg);
					}
					&:nth-child(1){@include tmp("01");}
					&:nth-child(2){@include tmp("02");}
					&:nth-child(3){@include tmp("03");}
					a {
						@include flex_centering;
						position:relative;
						width: 100%;
						height: 100%;
						span.text {
							display:block;
							text-align:center;
							color:#fff;
							background: url(../images/list-marker-w.png) right 28px center / 14px no-repeat;
							width: 100%;
							padding: 0 50px;
							box-sizing: border-box;

							span.ja {
								@include f_all(19, 40, 120);
								@include fw_bold;
								display:block;
								margin-bottom: 6px;
							}
							span.en {
								@include roboto_con_bi;
								color:inherit;
								display:block;
							}
						}
					}
				}
			}
		}
	}
}

div#toppageGallery {
	div.container {
		div.heading {
			@include toppagenormalheading;
		}
		div.body {
			div.gallery {
			}
		}
	}
}

div.gallery {
	display: flex;
	flex-wrap: wrap;
	.gallery-item {
		flex:0 1 calc(100% / 6);
		margin:0 !important;
		@include maxwidth(960){
			flex-basis: 25%;
		}
		@include maxwidth(720){
			flex-basis: 33.33%;
		}
		.gallery-icon {
		}
		.gallery-caption {
			padding: .5em .5em .5em 0;
			@include f_all(13, 40, 140);
		}
	}
}


/*============================
#siteToTop
============================*/

#siteToTop{
	.container{
		width: 1456px;
		padding: 15px;
		box-sizing: border-box;
		text-align:right;
	}
	@include maxwidth(520){
		position:fixed;
		bottom: 0px;
		right: 0px;
		z-index: 100;;
		a{
			display:inline-block;
			border-radius: 1000px;
			background-color:rgba(255,255,255,.8);
			-webkit-tap-highlight-color:rgba(0,0,0,0);
		}
	}
}


footer {
	//div#footer
	//div#bottomline
}

/*============================
#footer
============================*/
div#footer {
	$bp1: 860;
	$bp2: 500;
	background-color: #222;
	color: rgba(255, 255, 255, .5);
	padding: 55px 0 50px;
	div.container {
		max-width: 95%;
		display:flex;
		justify-content: space-between;
		@include maxwidth($bp1){
			display:block;
		}
		div.footeraddress {
			flex: 0 0 auto;
			@include maxwidth($bp1){
				text-align:center;
				margin-bottom: 40px;
			}
			p{
				@include f_all(13, 40, "");
				margin-bottom:11px;
				img {
					width: 181px;
					height:36px;
				}
			}
			address {
				p {
					@include f_all(12, "", 170);
					&:last-child{margin-bottom: 0;}
				}
			}
		}
		div.footermenu {
			flex: 0 0 545px;
			//width: 545px;
			@include f_all(12,"","");
			color:#888;
			display: flex;
			ul{
				flex: 1 1 100%;
				//@include flex_centering;
				//align-items: flex-start;
				border-left: 1px solid #4E4E4E;
				padding-left: 1em;
				padding-top: 1.5em;
				li{
					margin-top: 1.34em;
					&:first-child{margin-top: 0;}
					&:before{content: '- ';}
				}
			}
			@include maxwidth($bp2){
				display:block;
				@include f_all(14,"","");
				ul {
					border-left: none;
					text-align:center;
					padding: 0;
					li {
						margin: 0;
						display:block;
						&:before {display:none;}
						border-bottom: 1px solid #444;
						a {
							display:block;
							padding: .75em 0;
							text-align:center;
						}
					}
				}
			}
		}
	}
}

/*============================
#bottomline
============================*/
div#bottomline {
	padding: 8px 0;
	border-top: 1px solid rgba(255,255,255,.2);
	background-color:#222;
	color:#888;
	div.container {
		@include f_all(11,60,"");
		@include roboto_con;
		text-align:center;
	}
}




.slick-arrow{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
	width: 42px;
	height: 42px;
	top:0;bottom:8%;z-index:1;margin:auto;position:absolute;
	background: none no-repeat center center / 42px 42px;
	overflow: hidden;
	text-indent: 100px;
	@mixin tmp($d){
		background-image:url(../images/slider-arrow2-#{$d}.svg);
		#{$d} :-10px;
		@include maxwidth(768){bottom:12%; #{$d}: -9px; background-size: 32px 32px;}
		@include maxwidth(520){bottom:10%; background-size: 24px 24px;}
		@include maxwidth(420){bottom:6%; background-size: 24px 24px;}
	}
	&.slick-prev{@include tmp(left);}
	&.slick-next{@include tmp(right);}
}

.wpcf7-form{
	table{
		tbody{
			tr{
				th{
					//width: 200px;
					&.must {
						&:after {
							content: '*';
							color:#e00;
							@include f_all(18,"",100);
							margin-left: .15em;
						}
					}
				}
				td {
					div.g-recaptcha{
						iframe {
							margin:0;
						}
					}
				}
			}
		}
	}
	@include maxwidth(500){
		table, tbody, tr, th, td {
			display:block;
			width:auto;
			padding-left: 3px !important;
			padding-right: 3px !important;
		}
	}
	input[type="text"],
	input[type="url"],
	input[type="tel"],
	input[type="email"],
	textarea{
		@include f_all(17, 40, 120);
		box-sizing:border-box;
		width: 100%;
		padding: 3px;
	}
	div.wpcf7c-message{
		p{
			margin: 0!important;
			border: 4px solid $themecolor;
			padding: 1em;
			&.wpcf7c-elm-step1{border-color:$themecolor;}
			&.wpcf7c-elm-step2{border-color:#693;}
			&.wpcf7c-elm-step3{border-color:$themecolor;}
		}
	}
	.wpcf7c-conf{
		background-color:#fafafa!important;
		border: 4px solid #693!important;
	}
	.wpcf7-buttons{
		border: 1px solid #ccc;
		background-border: #eee;
		text-align:center;
		padding: 20px 5px;
		input[type="button"], input[type="submit"]{
			width: 140px;
			height: 40px;
			border: none;
			@include f_all(14, 40, "");
			background-color: $themecolor;
			color:$basecolor;
			position:relative;
			&:hover{top: 1px;left: 1px;}
			&:active{top: 2px;left: 2px;}
			margin-top: 20px;
		}
	}
	.wpcf7-response-output {
		border-width: 10px;
		padding: 1em;
		text-align:center;
		@include f_all(16, "" , 140);
	}
}

div.informationheadline {
	ul {
		margin-bottom:40px;
		li {
			border-bottom:1px solid #e6e6e6;
			a {
				//display:flex;
				//display: table;
				display: flex;
				align-items: center;
				width: 100%;
				//align-items: center;
				background: url(../images/headline-marker.png) no-repeat right 28px center / 5px 9px;
				height: 56px;
				@include maxwidth(700){
					flex-wrap: wrap;
					height: auto;
					padding:15px 0;
				}

				span{
					&.date {
						flex: 0 0 150px;
						text-align:center;
						@include maxwidth(700){
							flex-basis: 85px;
							text-align:left;
						}
						@include f_all(14, 40, 170);
						@include roboto_con_b;
						color: #222;
					}
					&.cat {
						flex: 0 0 100px;
						@include cat_label;
					}
					&.title {
						@include maxwidth(700){
							flex: 1 1 100%;
						}
						@include f_all(14, "", 170);
						text-decoration:underline;
						padding: 5px 47px 3px 37px;
						@include maxwidth(700){
							padding-left: 0;
						}
					}
				}
			}
		}
	}
	div.more {
		a {
		}
	}
}

div.workscategorylist {
	margin: 0 0 35px;
	&.page {
		padding: 1.3em .5em .5em;
		border: 1px solid #ccc;
	}
	&.categoryarchive {
		margin-bottom:-60px;
		padding: 1.3em .5em .5em;
		border: 1px solid #ccc;
	}
	@include f_all(14, "", "");
	ul {
		display: block;
		text-align:center;
		li {
			display:inline-block;
			margin: 0 10px 10px;
			a {
				padding: 0 0 4px;
				display:inline-block;
				border-bottom: 1px solid #ccc;
				&.current {
					border-bottom: 2px solid $themecolor;
					font-weight: bold;
				}
			}
		}
	}
}

div.worksheadline {
	ul {
		margin-bottom:40px;

		display:flex;
		justify-content: space-between;
		flex-wrap: wrap;

//.slick-slide {
//  margin-inline: 12px;
//}

		li {
			//margin-inline:12px;
			//width: calc((100% - 24px * 4) / 4);
			flex: 0 1 32.3%;
			//flex: 0 1 33.3%;
			//aspect-ratio:1 / 1;
			body.toppage & {
				padding-inline:12px;
			}
			body.subpage & {
				@include maxwidth(800){
					flex-basis: 49.3%;
					margin-bottom: 25px;
				}
			}
			margin-bottom: 1.65%;
			&:first-child{ margin-left: 0;}

			//background-color:#222222;
			&.empty {
				background-color: transparent;
			}
			a {
				display:block;
				position:relative;

				span.visual {
					display:block;
					//height:100%;
					aspect-ratio:1 / 1;
					img {
						width:100%;
						height:100% !important;
						object-fit: cover;
					}
				}
				span.text {
					//position:absolute;
					//left:0;
					//bottom:0;
					//right: 0;
					//background-color:rgba(0,0,0,.8);
					//padding: 12px 17px;
					display:block;
					margin-top:15px;
					@include f_all(14, 40, 120);
					@include fw_bold;
					//color: #fff;
					color:black;
				}
			}
		}
	}
	div.more {

	}
}

div.pager{
	@include f_all(13, "", "");
	text-align:center;
	margin-bottom: 80px;
	.page-numbers{
		display:inline-block;
		padding: 1em 1em;
		text-align:center;
		min-width: 3em;
		border: 1px solid #ccc;
		background-color:#eee;
		box-sizing: border-box;
		&.current{
			border-color:$themecolor;
			background-color: $themecolor;
			color: $basecolor;
		}
	}
}

/*============================
#page-anniversary
============================*/
$annivacolor: #172A88;
$partsbgccolor: #e8ebf2;

@mixin bgcparts{
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	padding-right: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
}

#page-anniversary.default{
	font-family: 'BIZ UDPMincho', Roboto Condensed , serif;
	max-width: 764px;
	margin: 40px auto;

//position:relative;

	//ページ内ジャンプ用アンカータグ
	a[id]:not([href]) {
		padding-top: 30px;
		margin-top:-30px;
	}

	h2{
		background-color: $annivacolor!important;
		font-size: 16px!important;
		color: #fff;
		border-left: none!important;
		font-weight: normal!important;
		padding: 15px 25px!important;
		height: 64px;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 2;
	}
	div.section-gratitude{
		position: relative;
		&::before{
			content: "Gratitude";
			position: absolute;
			top: 3vw;
			left: -5vw;
			color: #EEEEEE;
			z-index: 1;
			font-size: 120px!important;
			transform-origin: bottom left;
			transform: rotate(-90deg) translateX(-50%);
			@include maxwidth(900){
				content: none;
			}
		}
		p{
			letter-spacing: .2rem;
			position: relative;
			z-index: 2;
			& > *{
				position: relative;
				z-index: 2;
			}
			&.img-logomark{
				margin-top: 80px!important;
				margin-bottom: 60px!important;
			}
			&.signature{
				display: flex;
				justify-content: flex-end;
				white-space: nowrap;
			}
		}
	}
	div.section-history{
		position: relative;
		p{
			position: relative;
			z-index: 2;
		}
		&::before{
			content: "History";
			position: absolute;
			top: 8vw;
			left: -5vw;
			color: #EEEEEE;
			z-index: 1;
			font-size: 120px!important;
			transform-origin: bottom left;
			transform: rotate(-90deg) translateX(-50%);
			@include maxwidth(1280){
				content: none;
			}
		}
		&::after{
			content: "";
			position: absolute;
			top: 220px;
			left: 24px;
			width: 1px;
			height: calc(100% - 370px);
			background-color: #848484;
			z-index: 1;
			@include maxwidth(800){
				height: calc(100% - 420px);
			}
			@include maxwidth(520){
				height: calc(100% - 540px);
			}
		}
	}
	div.history-part{
		background-color: $partsbgccolor;
		position: relative;
		z-index: 1;
		padding: 60px 0 60px 75px;
		@include maxwidth(500){
			padding-left:60px;
		}
		margin: 60px 0!important;
		&:first-of-type{
			margin-top: 30px!important;
		}
		& > *{
			position: relative;
			z-index: 2;
			font-size: 15px!important;
		}
		p{
			background-color: #fff;
			padding: 25px 35px;
			font-size: 14px!important;
			@include maxwidth(520){
				padding: 25px;
			}

		}
		table{
			margin: 0 0 40px!important;
			tr{
				td{
					border-color: transparent!important;
					border-width: 0.5px;
					padding: 8px!important;
					box-sizing: border-box;
					vertical-align: top;
					@include maxwidth(800){
						font-size: 14px!important;
					}
					&:first-child{
						width: 160px;
					}
				}
			}
			@include maxwidth(520){
				& {
								display:block;
					tbody {
								display:block;
						tr {
								display:block;
								margin-bottom:15px;
							* {
								display:block;
								padding:0 !important;
							}
						}
					}
				}
			}
		}
		&::before{
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			// background-color: $partsbgccolor;
			background-image: linear-gradient( to right,transparent 0% 28.5vw, $partsbgccolor 28.5vw 100%);
			@include maxwidth(1280){
				background-image: linear-gradient( to right,transparent 0% 8.5vw, $partsbgccolor 8.5vw 100%);
			}
			@include maxwidth(930){
				background-image: linear-gradient( to right,#fff 0% 5vw, $partsbgccolor 5vw 100%);
			}
			margin: 0 calc(50% - 50vw);
			//width: 100vw;
			width: calc(100vw - 17px);
			@include maxwidth(800){
				margin: 0 calc(50% - 66.5vw);
			}
			@include maxwidth(500){
				margin: 0 calc(50% - 62vw);
			}
		}
		div.gallery {
			margin-bottom: 40px;
			dl.gallery-item{
				flex: 0 1 calc(25% - 10px)!important;
				margin: 0 5px;
			}
			@include maxwidth(800){
				flex-wrap:wrap;
				dl.gallery-item{
					flex: 0 1 calc(50% - 20px)!important;
					margin: 0 10px 20px;
				}
			}
		}
		.has_bgcfff{
			background-color: #fff;
			margin-bottom: 30px;
			p{
				padding: 10px 20px;
				margin: 0;
				&:first-child{
					padding-top: 30px;
				}
				&:last-child{
					padding-bottom: 30px;
				}
			}
		}
	}

	//テスト
	div.historyparts_test01{
		height:2000px;
		position:absolute;
		top:0;
		bottom:0;
		div.historyparts_test01_inner {
			position:sticky;
			top:0;
			left:0;
			font-weight: bold;
		}
	}

	div.historyparts_titles{
		position: absolute;
		left: 80px;
		top: 0;
		z-index: 1;

position:fixed;
left: 0;
width: 100px;
z-index:100;
width:0;

&:before {
	content:'';
	width:15px;
	height:15px;
	background:rgba($annivacolor, 1);
	position:absolute;
	left:77px;
	top:0;//33px;
	transition: .2s;
}
&.fix_start:before {
	transform: rotateZ(45deg);
	background-color:#C30D23;
}
&.scrollout {
	opacity:0;
	transition: .2s;
}
margin-top:35px;
&.smartphone {
	padding-top:0px;
	//padding-top:40px !important;
	padding-left:1px;
	&:before {
		left: 7px;
		top: 0px;
	}
	div.historyparts_title{
		transform: translateY(40px);
		div.title {
			p.letter {
				font-size: 28px!important;
				margin: 0 !important;
				padding: 15px 0 !important;
				//background-color:rgba(#fff, .75);
				text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
				span {
					font-size: 24px!important;
				}
			}
		}
	}
}


		div.historyparts_title{
			display: inline-block;
			vertical-align: top;
			text-align: center;
			margin: 0;
			div.title{
				font-size: 48px!important;
				color: $annivacolor;
				// writing-mode: vertical-lr;
				// -ms-writing-mode: tb-lr;
				position: absolute;
				opacity: 0;
				span{
					text-combine-upright: all;
					-webkit-text-combine-horizontal: all;
					-ms-text-combine-horizontal: all;
					font-size: 40px!important;
				}
				p.letter {
					font-size: 48px!important;
					line-height: 1rem!important;
					display: inline-block;
					position: relative;
					float: left;
					transform: translateZ(25px);
					transform-origin: 50% 50% 25px;
				}
				p.letter.out {
					transform: rotateX(90deg);
					transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);

//&:nth-child(1) { transition-delay: 0ms;}
//&:nth-child(2) { transition-delay: 80ms;}
//&:nth-child(3) { transition-delay: 160ms;}
//&:nth-child(4) { transition-delay: 240ms;}
//&:nth-child(5) { transition-delay: 320ms;}
//&:nth-child(6) { transition-delay: 400ms;}
//&:nth-child(7) { transition-delay: 480ms;}
//&:nth-child(8) { transition-delay: 560ms;}
//&:nth-child(9) { transition-delay: 640ms;}

				}
				p.letter.behind {
					transform: rotateX(-90deg);
				}
				p.letter.in {
					transform: rotateX(0deg);
					transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);


//&:nth-child(1) { transition-delay: 340ms;}
//&:nth-child(2) { transition-delay: 420ms;}
//&:nth-child(3) { transition-delay: 500ms;}
//&:nth-child(4) { transition-delay: 580ms;}
//&:nth-child(5) { transition-delay: 660ms;}
//&:nth-child(6) { transition-delay: 740ms;}
//&:nth-child(7) { transition-delay: 820ms;}
//&:nth-child(8) { transition-delay: 900ms;}
//&:nth-child(9) { transition-delay: 980ms;}


				}
			}
		}



	}
}

div#mainvisual_15anniv {
	width:100%;
	//height:100vh;
	background-color:#ccc;
	position:relative;
	div.mvanniv_container {
		display:flex;
		flex-wrap:wrap;
		div.photo {
			display:block;
			flex:0 0 20%;
			height:33.3vh;
			position:relative;
			user-select: none;
			filter: grayscale(1);
			@include maxwidth(800){
				flex:0 0 33.33%;
				height:30vw;
			}
			img {
				position:absolute;
				top:0;
				left:0;
				width:100%;
				height:100% !important;
				object-fit: cover;
				z-index: 1;
				&.back {
					z-index: 0;
				}
			}
			//@media screen and (max-width: 1200px) {
			//	flex: 0 0 33.33%;
			//	height:33.33vw;
			//}
		}
	}
	div.mvanniv_overlay {
		background-color: rgba(#000 , .77);
		display:flex;
		justify-content:center;
		position:absolute;
		left:0;
		right:0;
		top:0;
		bottom:0;
		margin:auto;
		height: 425px;
		align-items:center;
		box-sizing: border-box;
		padding: 20px;
		img {
			width:464px;
		}
		@include maxwidth(800){
			height: 200px;
		}
	}
}

div#s15anniv_headinglist {
	position:fixed;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	width:165px;
	//height:371px;
	height:405px;
	background-color:$annivacolor;
	color:#fff;
	box-sizing: border-box;
	padding:30px 0 0 37px;
	z-index:100;
	@include maxwidth(1120){
		display:none;
	}
	&:before {
		content:'';
		width: 8px;
		height:8px;
		display:block;
		background-color:currentcolor;
		position:absolute;
		left:16px;
		top:35px;
		transform: rotateZ(45deg);
		transition: .5s;
		//transition-delay: 1s;
	}
	&[data-pos="1"]:before { top: calc(35px + 36px * 1);}
	&[data-pos="2"]:before { top: calc(35px + 36px * 2);}
	&[data-pos="3"]:before { top: calc(35px + 36px * 3);}
	&[data-pos="4"]:before { top: calc(35px + 36px * 4);}
	&[data-pos="5"]:before { top: calc(35px + 36px * 5);}
	&[data-pos="6"]:before { top: calc(35px + 36px * 6);}
	&[data-pos="7"]:before { top: calc(35px + 36px * 7);}
	&[data-pos="8"]:before { top: calc(35px + 36px * 8);}
	&[data-pos="9"]:before { top: calc(35px + 36px * 9);}
	a {
		text-decoration:none !important;
	}
	& > div.items {
		div.item {
			font-size: 15px !important;
			position:relative;
			margin-bottom: 22px !important;
			line-height: 1 !important;
			&.sub {
				font-size: 14px !important;
				padding-left:20px;
				&:before {
					content:'';
					display:block;
					width:9px;
					height:2px;
					background-color:currentcolor;
					position:absolute;
					left:0;
					top:7px;
				}
			}
		}
	}
}

#s15anniv_backtomainsite {
	a {
		//opacity:0;
		display:block;
		position:fixed;
		right:0;
		bottom:0;
		@include maxwidth(520){
			right:auto;
			left:0;
		}
		transition: .5s;
		transform: translateY(100%);
		z-index:101;
		img {
			width:165px;
			@include maxwidth(520){
				width:140px;
			}
		}
	}
	&.show a {
		transform: translateY(0);
	}
}

/*
* 2023-08-29　サイト改修（協力会社の皆様へ）
*/
div.list-partnercategory {
	margin-bottom: 40px;
	ul {
		display: flex;
		flex-wrap: wrap;
		li {
			flex-basis: calc(100% / 4);
			@include maxwidth(440){
				flex-basis: 50%;
			}
			display:block;
			a {
				display:block;
				background-color:rgba(24,63,126,.2);
				color:rgba(24,63,126,.6);
				padding: 15px 0;
				text-align:center;
				border:1px solid #fff;;
				border-width: 0 0 1px 1px;
				@include f_all(14, 40 ,"");
				&.current{
					background-color: $themecolor;
					color: #fff;
					@include fw_bold;
				}
				&:hover{opacity: 1;}
			}
		}
	}
}