// スタイルシート common

@charset "utf-8";

@import "mixin";

body{
	@include root;
}

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

//::selection{
//	background-color:$accentcolor;
//	color:$themetextcolor;
//	text-shadow: none;
//}

a:hover {
	opacity: .75;
}

div.pager {
	display:flex;
	flex-wrap:wrap;

	justify-content: center;
	margin-top: 40px !important;

	@include f_all(14);
	span, a {
		padding: 1em;
		min-width: 3em;
		box-sizing:border-box;
		border: 1px solid rgba($basetextcolor, .35);
		margin: 0 .5em .35em 0;
		text-align:center;
		&:last-child {margin-right:0;}
		&.current {
			border: 1px solid $themecolor;
			background-color:$themecolor;
			color:$themetextcolor;
			@include fw_b;
		}
	}
}

div#wrapper {
}





div#gnavtogglewrapper {
	display:none;
	@include maxwidth(1000){
		display:block;
	}
	div.container {
		div#gnavtoggle {
			position:fixed;
			width: 70px;
			height: 70px;
			right: 0;
			top: 0;
			@include fixed_top_adminbar_exists(0);
			z-index:4;
			a {
				width: 100%;
				height: 100%;
				display:block;
				box-sizing:border-box;
				position:relative;
				background-color:$themecolor;
				&:hover {
					opacity: 1;
				}
				span.b {
					display:block;
					width: 30px;
					height: 2px;
					background-color:$themetextcolor;
					@include absolute_centering;
					&.b1 {transform: translateY(-10px);}
					&.b2 {}
					&.b3 {transform: translateY(10px);}
				}
				body.menu_open & {
					background-color:#d00;
					span.b {
						background-color:#fff;
						&.b1 {transform: rotateZ(-45deg);}
						&.b2 {transform: rotateY(90deg);}
						&.b3 {transform: rotateZ(45deg);}
					}
				}
			}
		}
	}
}








div#header {
	position:fixed;
	left: 0;
	top:0;
	@include fixed_top_adminbar_exists(0);
	width:100%;
	background-color:$basecolor;
	color:$basetextcolor;
	z-index: 3;
	div.container {
		@include container(1280, 40);
		@include maxwidth(480){
			margin-left: 25px;
		}
		display:flex;
		height:70px;
		align-items: center;
		div#headerLogo {
			flex: 0 0 195px;
			h1 {
				a {
					img {
						width: 195px;
					}
				}
			}
		}

		div#headerNav {
			flex: 1 1 auto;
			@include fw_b;
			div#gnav {
				@include f_all(12);
				ul {
					display:flex;
					justify-content: flex-end;
					li {
						margin-left: 2em;
						&:first-child {
							margin-left:0;
						}
						a {
						}
					}
				}
				@include maxwidth(1000){
					display:none;
					@include f_all(16);
					position:fixed;
					@include fixed_top_adminbar_exists(0);
					left:0;
					right:0;
					top:0;
					bottom:0;
					overflow-y: auto;
					background-color:rgba(#fff, .95);
					color:#333;
					body.menu_open & {
						display:block;
					}
					ul {
						display:block;
						padding-top: 80px;
						li {
							margin-left:0;
							text-align:center;
							a {
								display:block;
								padding:1.3em 0;
							}
						}
					}
				}
			}
		}

		div#headerContact {
			flex: 0 0 120px;
			@include f_all(12);
			@include fw_b;
			font-family:Yu Gothic;
			margin-left: 40px;
			@include maxwidth(1000){
				margin-left:0;
				margin-right:50px;
			}
			a {
				background-color:$themecolor;
				color:$themetextcolor;
				display:block;
				padding: 1em 0 .75em;
				text-align:center;
				border-radius:3px;
				img {
					width: 14px;
					vertical-align:middle;
					transform: translateY(-2px);
				}
			}
			@include maxwidth(480){
				@include f_all(18);
				position:fixed;
				left:0;
				right:0;
				bottom:0;
				margin-right:0;
				a {
					padding: .75em 0 .5em;
					img {
						width: 21px;
						margin-right: 5px;
					}
				}
			}
		}
	}
}


div#mainVisual {
	margin-top: 70px;
	position:relative;
	//body.toppage.pc &:before {
	body.toppage.pc & span.mask {
		content:'';
		display:block;
		position:absolute;
		top:0;right:0;bottom:0;left:0;
		//top:0;left:0;width: 100%; height:100%;
		background: url(../images/movie-mask.png);
		z-index: 1;
		@include maxwidth(640){
			display:none;
		}
		pointer-events: none;
	}
	body.toppage &:after {
		z-index: 2;
		content:'';
		display:block;
		width: 78px;
		height: 78px;
		bottom: -39px;
		@include maxwidth(740){
			width: 50px;
			height: 50px;
			bottom: -25px;
		}
		background: url(../images/icon-circlearrow-down-color.png) center center / cover no-repeat;
		position:absolute;
		left:0;
		right:0;
		margin:auto;
	}
	div.container {
		body.toppage.sp &, body.subpage & {
			@include container(1280, 0);
		}
		body.toppage.pc & {
			height: 720px;
			//動画元サイズ→854:480
			//横幅に合わせたサイズ→1280:約720
			img {
				display:none;
			}
			@include maxwidth(1280){
				height: auto;
			}

			@include maxwidth(1024){
				//height: 500px;
			}
			@include maxwidth(640){
				height:auto;
				img {display:inline;}
				video {display:none;}
			}
		}
		img {
		}
		video {
			object-fit: cover;
			max-width: none;//override
			height: 100%;//override
			width: 100%;
		}
	}
}

@mixin toppage_common_h2 {
	padding: .8em 0;
	text-align:center;
	background-color:$themecolor;
	color:$themetextcolor;
	//margin: 0 0 5px 0;
	border-radius: 5px;
	position:relative;
	&:before {
		content:'';
		display:block;
		position:absolute;
		left:0;
		right:0;
		bottom:-10px;
		margin:auto;
		z-index:1;

		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10px 10px 0 10px;
		border-color: $themecolor transparent transparent transparent;
	}
}

@mixin toppage_headerside_button{
	flex: 0 0 120px;
	border: 2px solid $themecolor;
	//margin: 5px;
	margin-left:5px;
	border-radius: 5px;
	@include flex_centering;
	@include f_all(11);
	@include fw_b;
	color: $themecolor;
}

div#topicPath {
	@include f_all(12, "", 20);
	background-color:#eff3f6;
	div.container {
		@include container(1160, 20);
		padding: 1.85em 0;
		@include maxwidth(1000){
			padding: .6em 0;
		}
		ul {
			display: flex;
			flex-wrap: wrap;
			li {
				&:before {
					content:'/';
					margin: 0 1em;
				}
				&:first-child:before {
					display:none;
				}
				a {
				}
			}
		}
	}
}

div#content {

	body.subpage & {
		padding: 60px 0 80px;
	}

	div.default {
		div.container {
			@include container(1260, 5);
			@include contentdefault;
		}
	}

}

div#historyContent {
	margin-top: 60px;
	div.container {
		@include container(900, 5);
		line-height: 20px;
	}
}


div#toppageConcept {
	background: url(../images/toppage-concept-01.jpg) center center / cover no-repeat;
	color:#000;
	div.container {
		@include container(600, 20);
		padding: 70px 0 40px 0;
		div.lead {
			text-align:center;
			margin-bottom: 30px;
			@include f_all(24, "", 35);
			h2 {
			}
		}
		div.logo {
			text-align:center;
			margin-bottom: 30px;
			img {
				width: 201px;
			}
		}
		div.text {
			@include f_all(16,"",30);
			p {
			}
		}
		@include maxwidth(600){
			div.lead {
				@include f_all(20);
			}
			div.text {
				@include f_all(13);
			}
		}
		@include maxwidth(440){
			div.lead {
				@include fw_b;
				@include f_all(15, "", 26);
			}
			div.logo {
				img {
					width: 120px;
				}
			}
			div.text {
				@include f_all(11);
			}
		}
		@include maxwidth(350){
			div.lead {
				@include f_all(13);
			}
		}
	}
}

div#toppageService {
	div#service.container {
		@include container(1260, 0);
		div.heading {
			@include f_all(18);
			margin: 5px 5px;
			h2 {
				@include toppage_common_h2;
			}
		}
		div.body {
			background-color:#f1f8fe;
			ul {
				display:flex;
				flex-wrap: wrap;
				justify-content: center;
				li {
					flex: 0 0 210px;
					border:1px solid #fff;
					border-width:0 2px;
					&:first-child {border-left-width:0;}
					&:last-child {border-right-width:0;}
					//margin: 20px -1px;
					margin: 45px -1px;
					box-sizing: border-box;
					span {
						display:block;
						margin: 0 10px 20px;
						&:last-child{margin-bottom:0;}
					}
					span.image {
						width: 126px;
						height:126px;
						margin: 0 auto 20px;
						img {
							border-radius: 126px;
						}
					}
					span.title {
						@include f_all(14);
						text-align:center;
						color:#000;
					}
					span.excerpt {
						@include f_all(10, "", 21);
						color:$themecolor;
						min-height: 8em;
						//outline: 1px solid red;
					}
					span.more {
						text-align:center;
						a {
							border: 2px solid $themecolor;
							color:$themecolor;
							width: 140px;
							padding:1em 0;
							display:inline-block;
							@include f_all(12);
							@include fw_b;
							border-radius: 4px;
						}
					}
					@include maxwidth(860) {
						flex-basis: 25%;
						&:nth-child(2) {
							border-right-width: 0;
						}
						span.excerpt {
							//@include f_all(14,"",24);
							min-height: 13em;
							margin: 0 20px 20px;
							//作業中
						}
					}
					@include maxwidth(670) {
						flex-basis: 50%;
						span.excerpt {
							min-height: 8em;
						}
					}
					@include maxwidth(500) {
						span.excerpt {
							min-height: 12em;
						}
					}
					@include maxwidth(360) {
						flex-basis: 100%;
						border-width: 0;
						span.excerpt {
							min-height: 0;
						}
					}
				}
			}
		}
	}
}

div#toppageCompany {
	margin-bottom: 20px;
	div.container {
		@include container(1260, 0);
		ul {
			display:flex;
			flex-wrap: wrap;
			width: 100%;
			li {
				flex: 0 1 50%;
				height: 290px;
				a {
					@include flex_centering;
					width:100%;
					height:100%;
					background: url(../images/toppage-company-01.jpg) center center / cover no-repeat ;
					span.heading {
						@include f_all(24);
						background-color:$themecolor;
						color:$themetextcolor;
						width: 44%;
						min-width: 200px;
						padding: .45em 0 .35em;
						text-align:center;
						border-radius: 10px;
					}
				}
				&:nth-child(1) a{background-image:url(../images/toppage-company-01.jpg);}
				&:nth-child(2) a{background-image:url(../images/toppage-company-02.jpg);}
				&:nth-child(3) a{background-image:url(../images/toppage-company-03.jpg);}
				&:nth-child(4) a{background-image:url(../images/toppage-company-04.jpg);}
				@include maxwidth(640){
					height: 160px;
					a {
						span.heading {
							@include f_all(18);
						}
					}
				}
				@include maxwidth(460){
					height: 120px;
					flex-basis: 100%;
					margin-bottom:1px;
				}
			}
		}
	}
}

div#toppageWorks {
	margin-bottom:20px;
	div.container {
		@include container(1260, 0);
		div.heading {
			display:flex;
			margin: 0 5px 20px;
			h3 {
				flex: 1 1 auto;
				@include toppage_common_h2;
			}
			a {
				@include toppage_headerside_button;
			}
		}
		div.body {
			ul {
				display: flex;
				flex-wrap: wrap;
				li {
					flex: 0 1 18.5%;
					margin: 0 .75%;
					body.subpage &{
						margin: 0 .75% 1.5%;
					}
					@include maxwidth(900){
						flex-basis: 31.8%;
						margin:0 .75% .75*2%;
					}
					@include maxwidth(540){
						flex-basis: 48.5%;
						margin:0 .75% .75*2%;
					}
					&:last-child {
						margin-right:0;
					}
					a {
						display: block;
						position:relative;
						span.image {
							img {
							}
						}
						span.title {
							position:absolute;
							left:0;
							right:0;
							bottom:0;
							padding:1.6em 1em;
							background-color:rgba(#000,.5);
							color: #fff;
							@include f_all(12, "", 18);
						}
					}
				}
			}
		}
	}
}


div#contentFooter {
	div.container {
		@include container(1260, 5);
		display:flex;
		@include maxwidth(960){
			display:block;
		}
	}
}

div#contentFooterNews {
	flex: 1 1 auto;
	&.subpage {
		@include container(830,20);
	}
	div.heading {
		margin-bottom:30px;
		display:flex;
		h3 {
			flex: 1 1 auto;
			@include toppage_common_h2;
		}
		a {
			@include toppage_headerside_button;
		}
	}
	div.body {
		@include maxwidth(1300){
			margin-left:20px;
			margin-right:20px;
		}
		ul {
			li {
				margin-bottom:25px;
				a {
					display:block;
					& > span {
						display:block;
					}
					span.postheading {
						@include f_all(18, "", 24);
						@include fw_b;
						margin-bottom:10px;
						display:flex;
						@include maxwidth(640){
							display:block;
							@include f_all(16, "", 23);
							span {
								display:block;
								margin-bottom: .25em;
							}
							span.date {
								@include f_all(13, "", 13);
							}
						}
						span.date {
							margin-right:1em;
							flex: 0 0 auto;
						}
						span.title {
						}
					}
					span.excerpt {
						@include f_all(12, "", 24);
					}
				}
			}
		}
	}
}
div#contentFooterBanner {
	flex: 0 0 390px;
	margin-left:30px;
	@include maxwidth(960){
		margin-left: 0;
		margin-top: 40px;
	}
	ul {
		li {
			max-width: 390px;
			margin: 0 auto 20px;
			&:last-child {
				margin-bottom:0;
			}
			a {
				display:block;
				/*
				border: 2px solid $themecolor;
				display: flex;
				align-items: center;
				height: 70px;
				span.image {
					flex: 0 0 100px;
					margin-left: 30px;
					img {
					}
				}
				span.name {
					flex: 1 1 auto;
					margin-left: 10px;
				}
				*/
			}
		}
		@include maxwidth(450){
			li {
				max-width: 300px;
				a {
					span.image {
						flex-basis: 60px;
						margin-left:15px;
					}
					span.name {
						@include f_all(14);
					}
				}
			}
		}
	}
}


div#totop {
	margin: 40px 0 20px;
	div.container {
		@include container(1260, 20);
		@include maxwidth(960){
			padding: 40px 0 0;
		}
		ul {
			display:flex;
			justify-content: flex-end;
			li {
				margin-right: 25px;
				&:last-child {
					margin-right:0;
				}
				a {
					@include f_all(13);
					img {
						width: 16px;
						margin-right: 15px;
					}
				}
			}
		}
	}
}

div#footer {
	div.area1 {
		background-color:#eee;
		color:#000;
		padding: 30px 0;
		div.container {
			@include container(1260, 20);
			div.logo {
				margin-bottom:30px;
				img {
					width:200px;
				}
			}
			div.address {
				ul {
					display:flex;
					li {
						flex: 0 1 31.3%;
						margin-left: 2%;
						@include f_all(13, "", 22);
						color:#333;
						display:flex;
						span.h {
							margin-right: 20px;
							white-space: nowrap;
						}
						span.b {
						}
					}
					@include maxwidth(768){
						display:table;
						li {
							display: table-row;
							span {
								display: table-cell;
								padding-bottom: 10px;
								&.h {
									padding-right: 20px;
								}
							}
						}
					}
				}
			}
		}
	}
	div.area2 {
		background-color:#393939;
		color:#fff;
		@include maxwidth(480){
			padding-bottom:50px;
		}
		div.container {
			@include container(1260, 20);
			div.subarea1 {
				display:flex;
				padding-top: 30px;
				@include maxwidth(1280){
					display:block;
				}
				div#footerMenu {
					flex: 1 1 auto;
					flwx-wrap: wrap;
					@include f_all(13, "", 18);
					display:flex;
					flex-wrap: wrap;
					div.item {
						//outline: 1px solid red;
						margin-right: 60px;
						@include maxwidth(1280){
							flex: 1 1 25%;
							margin-right: 0;
						}
						@include maxwidth(760){
							flex-basis: 45%;
							margin: 0 2.5%;
							a {
								display:block;
								background-color:rgba(#fff,.1);
								//margin: 0 10px 0 0;
								padding:.75em;;
							}
							& > ul > li {
								@include fw_b;
								& > ul {
									@include fw_n;
								}
							}
						}
						@include maxwidth(460){
							flex-basis: 100%;
						}
						& > ul {
							& > li {
								display: flex;
								color:#ddd;
								@include maxwidth(1000){
									display:block;
								}
								& > ul {
									margin-left: 20px;;
									margin-bottom: 20px;
									color:#fff;
									@include maxwidth(1000){
										margin-left: 0;
										margin-top:16px;
										margin-bottom:32px;
									}
									& > li {
										margin-bottom:9px;
										a {
										}
									}
								}
							}
						}
					}
				}

				div#footerSNS {
					flex: 0 0 120px;
					ul {
						display:flex;
						justify-content: flex-end;
						li {
							margin-left: 20px;
							a {
								img {
									width: 16px;
								}
							}
						}
					}
					@include maxwidth(1280){
						margin:20px 0 45px;
						ul {
							justify-content: center;
							li {
								margin: 0 15px;
								a {
									img {
										width: 24px;
									}
								}
							}
						}
					}
				}
			}
			div.subarea3 {
				@include f_all(13, "", 18);
				ul {
					li {
						margin-bottom: .5em;
					}
				}
				@include maxwidth(1280){
					text-align:center;
					margin-bottom: 40px;
				}
			}
			div.subarea2 {
				display:flex;
				padding-bottom: 30px;
				justify-content: space-between;
				align-items: flex-end;
				div#footerCopy {
					@include f_all(10, "", 18);
					p {
					}
				}

				div#footerBanner {
					ul {
						li {
							a {
								img {
								}
							}
						}
					}
				}
				@include maxwidth(1280){
					display:block;
					text-align:center;
					div {
						margin: 20px 0;
					}
				}
			}
		}
	}
}
// 2025-09-12追加 採用情報ページに漫画掲載
// ※漫画や背景画像は他社支給物
div#recruit_comic {
	background: url('https://www.nabt.co.jp/recruit-comics/images/bg_02.png') #00377a;
	@media screen and (max-width: 1270px) {
		margin-left:  -5px;
		margin-right:  -5px;
	}
	div.recruit_comic_wrapper {
		background: url('https://www.nabt.co.jp/recruit-comics/images/bg.png');
		padding: 0 5.5vw;
		max-width: 600px;
		margin: 0 auto;
		p {
			background: #ffffff;
			img {
				vertical-align: bottom !important;
			}
		}
	}
}