@charset "utf-8";

/*
ホーム
/
*/

html {
	overflow-x: hidden;
}


/*
***********************************************************************************************
ヘッダー
***********************************************************************************************
*/

#header {
}

	.viewmode-mobile #header {
	}


/*
***********************************************************************************************

***********************************************************************************************
*/

.viewmode-mobile .content {
	min-height: 0;
	padding: 0px 0px 0px 0px;
}


/*
***********************************************************************************************
グローバルナビゲーション（PC専用）
***********************************************************************************************
*/

#nav-global ul#menu-global li.current-menu-item a{
	/*
	background: none;
	*/
}


/*
***********************************************************************************************
カルーセル（Swiper版）
***********************************************************************************************
*/

.slider {
	overflow-x: hidden;
	position: relative;
}

	.viewmode-mobile .slider {

	}

	.slider ul > li + li {
		margin-top: 0;
	}

	.slider ul li a {
		display: block;
	}

	.slider ul li a img {
		vertical-align: top;
	}

		.slider ul li a:hover img {
			opacity: .8;
		}

.swiper-container {
	/*
	height: 400px;
	*/
	overflow: visible;
	position: relative;
}

	.viewmode-mobile .swiper-container {
		background-color: transparent;
		height: auto;
		overflow: hidden;
		width: auto;
	}

	.swiper-wrapper {
		list-style-type: none;
		padding: 0;
	}

		.swiper-slide {
			background-position: center;
			background-size: cover;
			box-sizing: border-box;
			/*
			color: #fff;
			font-size: 18px;
			*/
		}

			.swiper-slide img {
				max-width: 100%;
				vertical-align: top;
			}

	.swiper-container-horizontal > .swiper-pagination-bullets {
		bottom: 0px;
	}


	/* 前へ */
	/* 次へ */
	.swiper-button-prev,
	.swiper-button-next {
		background-image: none !important;
		height: 40px;
		width: 40px;
	}

	.swiper-button-prev {
		left: 0px;
	}

	.swiper-button-next {
		right: 0px;
	}

		.viewmode-mobile .swiper-button-prev,
		.viewmode-mobile .swiper-button-next {
			transform: scale(0.5);
		}

		.viewmode-mobile .swiper-button-prev {
			left: 0px;
		}

		.viewmode-mobile .swiper-button-next {
			right: 0px;
		}

		/* 矢印の飾り（未使用） */
		/*
		.swiper-button-prev::after,
		.swiper-button-next::after {
			background-color: var(--wp--preset--color--color-1);
			content: '';
			display: block;
			line-height: 1;
			height: 30px;
			width: 30px;
			left: auto;
			right: 1em;
			top: 1em;
			-webkit-mask-image: url('../../img/icon_arrow_01.svg');
			mask-image: url('../../img/icon_arrow_01.svg');
			-webkit-mask-size: contain;
			mask-size: contain;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			transition: all .2s ease;
		}
		*/

		.swiper-button-prev::after {
			transform: scaleX(-1);
		}

		.swiper-button-next::before {
		}

			.swiper-button-prev:hover::after,
			.swiper-button-next:hover::after {
				opacity: .7;
			}

		.swiper-button-prev::after,
		.swiper-button-next::after {
			content: none;
		}

	span.swiper-pagination-bullet {
		margin: 0 8px !important;
		height: 8px;
		width: 8px;
	}

		span.swiper-pagination-bullet-active {
			background-color: #000;
		}


/*
***********************************************************************************************
カルーセル（KV）
***********************************************************************************************
*/

#slider {
	/*
	background-color: #000;
	*/
	overflow-y: hidden;
	padding: 0px;
	position: relative;
}

	.viewmode-mobile #slider {
		padding: 0px;
	}

	.swiper-wrapper {
		border-top: 1px solid #fff;	/* 隙間の修正用 */
		border-bottom: 1px solid #fff;	/* 隙間の修正用 */
		position: relative;
		z-index: 0;
	}

	#slider .swiper-slide {
		background-color: var(--wp--preset--color--color-1);
		box-sizing: border-box;
		letter-spacing: normal; /* 文字間を通常に戻す */
		list-style-type: none;
		/*
		display: inline-block;
		min-height: 505px;
		*/
		overflow: hidden;
		margin: 0 0px;
		/*
		max-height: 80vh;
		*/
		padding: 0 0;
		position: relative;
		vertical-align: top;
		/*
		width: 276px;
		*/
	}

		.viewmode-mobile #slider .swiper-slide {
			display: block;
			max-height: none;
			/*
			min-height:455px;
			*/
			padding: 0px 0px;
			width: auto;
		}

			#slider h1 {
				top: 50%;
				left: 0;
				margin: 0px auto 0 auto;
				padding: 0px;
				position: absolute;
				text-align: center;;
				z-index: 1;
				width: 100%;
				transform: translateY(-50%);

				/*
				text-shadow: -1px 1px 10px #000000,
							-1px 1px 10px #000000;
				-webkit-writing-mode: horizontal-tb;
				-ms-writing-mode: lr-tb;
				writing-mode: horizontal-tb;
				*/
			}

				.viewmode-mobile #slider h1 {
					/*
					bottom: 8%;
					*/
					font-size: 24px;
					left: 0;
					padding: 0 10px;
					/*
					transform: translateY(-50%);
					*/
				}

					.landscape .viewmode-mobile #slider h1 {
						/*
						font-size: 19.5px;
						top: 5%;
						*/
					}

				/*
				.mobile .viewmode-pc #slider h1 {
					top: 0px;
				}

				#slider a:hover h1 img {
					opacity: 1;
				}

					.viewmode-mobile #slider h1 img {
						max-height: 400px;
						width: auto;
					}
				*/

					/* 英語のキャッチコピー */
					#slider h1 span {
						/*
						color: var(--wp--preset--color--color-1);
						*/
						color: #fff;
						display: block;
						font-family: 'Roboto Condensed', sans-serif;
						font-size: 75px;
						font-style: italic;
						font-optical-sizing: auto;
						font-weight: 500;
						line-height: 1.5;
						/*
						transform: skew(-10deg,0deg);
						text-shadow: 0px 0px 15px rgba(0,0,0,1),
							0px 0px 15px rgba(0,0,0,1),
							0px 0px 15px rgba(0,0,0,1),
							0px 0px 15px rgba(0,0,0,1),
							0px 0px 15px rgba(0,0,0,1),
							0px 0px 15px rgba(0,0,0,1);
						*/
					}

						.viewmode-mobile #slider h1 span {
							font-size: 38px;
							white-space: nowrap;
						}

					/* 和文のコピー */
					#slider h1 small {
						color: #fff;
						display: block;
						text-shadow: 0px 0px 10px rgba(0,0,0,.1),
							0px 0px 10px rgba(0,0,0,.1),
							0px 0px 10px rgba(0,0,0,.1),
							0px 0px 10px rgba(0,0,0,.1);
					}

					/* リンクボタン（未使用） */
					/*
					#slider .swiper-slide .btn {
						background-color: rgba(0,0,0,.5);
						border: 1px solid #fff;
						color: #fff;
						font-size: 17px;
						font-weight: normal;
						margin-top: 1em;
						min-width: 250px;
						padding: .75em 3em .75em 1em;
						z-index: 1;
					}

						#slider .swiper-slide .btn::after {
							background-color: #fff;
							bottom: 1.1em;
						}

						.viewmode-mobile #slider .swiper-slide .btn {
							margin-top: .75em;
							transform: scale(.7);
							transform-origin: top left;
						}

							.landscape .viewmode-mobile #slider .swiper-slide .btn {
							}

						.viewmode-pc #slider .swiper-slide .btn:hover {
							background-color: var(--wp--preset--color--color-1);
							color: #fff;
						}
					*/

					#slider .swiper-slide .bg {
						/*
						opacity: .8;
						*/
					}

						#slider .swiper-slide .bg img {
							opacity: 0;
							width: 100%;
							transition: all .2s ease;
							-webkit-backface-visibility: hidden;
						}

							/* アクティブなカルーセル */
							#slider .swiper-slide-active .bg img {
								opacity: 1;
							}

							.viewmode-mobile #slider .swiper-slide .bg img {
								margin-top: 0px;
							}

								.mobile .viewmode-pc #slider .swiper-slide .bg img {
									margin-top: 0px;
								}

	#slider .swiper-pagination {
		background-color: rgba(0,0,0,.5);
		bottom: 1px;
		left: auto;
		line-height: 1;
		margin-top: 0;
		padding: 10px;
		position: absolute;
		right: 0;
		z-index: 1;
		width: auto;
	}

		.viewmode-mobile #slider .swiper-pagination {
			transform: scale(.8);
			transform-origin: right bottom;
		}

		#slider .swiper-pagination-bullet {
			background-color: #fff;
			border-radius: 0;
			height: 10px;
			opacity: .2;
			width: 40px;
		}

			.viewmode-mobile #slider .swiper-pagination-bullet {
				height: 8px;
				width: 30px;
			}

			#slider .swiper-horizontal > .swiper-pagination-bullets span.swiper-pagination-bullet,
			#slider .swiper-pagination-horizontal.swiper-pagination-bullets span.swiper-pagination-bullet {
				margin: 0 10px;
			}

			#slider .swiper-pagination-bullet-active {
				opacity: 1;
			}


/*
***********************************************************************************************
各カルーセル毎の設定
***********************************************************************************************
*/

/* カルーセル1「●●●」 */
#slider .item1.swiper-slide-active .bg img,
#slider .item1.swiper-slide-duplicate-active .bg img,
#slider .item1.swiper-slide-prev .bg img {
	animation: kenburns1 50s forwards;
}

	.viewmode-mobile #slider .item1.swiper-slide-active .bg img,
	.viewmode-mobile #slider .item1.swiper-slide-duplicate-active .bg img,
	.viewmode-mobile #slider .item1.swiper-slide-prev .bg img {
		animation: mobileburns1 50s forwards;
	}

/* カルーセル2「●●●」 */
#slider .item2 h1 {
}

	.viewmode-mobile #slider .item2 h1 {
	}

#slider .item2.swiper-slide-active .bg img,
#slider .item2.swiper-slide-duplicate-active .bg img,
#slider .item2.swiper-slide-prev .bg img {
	animation: kenburns1 50s forwards;
}

	.viewmode-mobile #slider .item2.swiper-slide-active .bg img,
	.viewmode-mobile #slider .item2.swiper-slide-duplicate-active .bg img,
	.viewmode-mobile #slider .item2.swiper-slide-prev .bg img {
		animation: mobileburns1 50s forwards;
	}

/* カルーセル3「●●●」 */
#slider .item3.swiper-slide-active .bg img,
#slider .item3.swiper-slide-duplicate-active .bg img,
#slider .item3.swiper-slide-prev .bg img {
	animation: kenburns1 50s forwards;
}

	.viewmode-mobile #slider .item3.swiper-slide-active .bg img,
	.viewmode-mobile #slider .item3.swiper-slide-duplicate-active .bg img,
	.viewmode-mobile #slider .item3.swiper-slide-prev .bg img {
		animation: mobileburns1 50s forwards;
	}

/* カルーセル4「●●●」 */
#slider .item4.swiper-slide-active .bg img,
#slider .item4.swiper-slide-duplicate-active .bg img,
#slider .item4.swiper-slide-prev .bg img {
	animation: kenburns1 50s forwards;
}

	.viewmode-mobile #slider .item4.swiper-slide-active .bg img,
	.viewmode-mobile #slider .item4.swiper-slide-duplicate-active .bg img,
	.viewmode-mobile #slider .item4.swiper-slide-prev .bg img {
		animation: mobileburns1 50s forwards;
	}

/* アニメーション（PC用） */
@keyframes kenburns1 {
	0% {
		transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px) rotate(0.1deg);
		/*
		animation-timing-function: ease-in;
		*/
	}
	100% {
		transform: scale3d(1.5, 1.5, 1.5) translate3d(-100px, -30px, 0px) rotate(0.1deg);
		/*
		animation-timing-function: ease-in;
		*/
	}
}

@keyframes kenburns2 {
	0% {
		transform: scale3d(1.5, 1.5, 1.5) translate3d(-100px, -30px, 0px) rotate(0.1deg);
		/*
		animation-timing-function: ease-in;
		*/
	}
	100% {
		transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px) rotate(0.1deg);
		/*
		animation-timing-function: ease-in;
		*/
	}
}

/* アニメーション（スマホ用） */
@keyframes mobileburns1 {
	0% {
		transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
		/*
		animation-timing-function: ease-in;
		*/
	}
	100% {
		transform: scale3d(2.5, 2.5, 2.5) translate3d(-30px, -15px, 0px);
		/*
		animation-timing-function: ease-in;
		*/
	}
}

@keyframes mobileburns2 {
	0% {
		transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
		/*
		animation-timing-function: ease-in;
		*/
	}
	100% {
		transform: scale3d(2.5, 2.5, 2.5) translate3d(-30px, -15px, 0px);
		/*
		animation-timing-function: ease-in;
		*/
	}
}


/*
***********************************************************************************************
重要なお知らせ（未使用）
***********************************************************************************************
*/

/*
.block-news2 {
	background-color: #f4e343;
	color: #000;
	display: flex;
	justify-content: center;
	margin-top: 0px !important;
	padding: 23px 10px 18px 10px;
	position: relative;
}

	.viewmode-mobile .block-news2 {
		display: block;
		padding: 10px 10px 10px 10px;
		text-align: center;
	}

	/＊ 注目のお知らせ ＊/
	.block-news2 h2 {
		background-color: #000;
		color: #fff;
		/＊
		font-family: 'Noto Sans JP', sans-serif;
		＊/
		font-weight: bold;
		font-size: 15px;
		height: 42px;
		line-height: 1.3;
		margin: 0;
		padding: 10px 15px 10px 15px;
		position: relative;
	}

		.viewmode-mobile .block-news2 h2 {
			display: inline-block;
			font-size: 14px;
			height: auto;
			padding: 5px 10px 5px 10px;
		}

	.block-news2 a {
		color: #000;
	}

	.block-news2 dl {
		margin: 0 0 0 1.5em;
		padding: 0px;
		width: 960px;
	}

		.viewmode-mobile .block-news2 dl {
			margin: 0;
			text-align: center;
			width: auto;
		}

		/＊ 日付 ＊/
		.block-news2 dt {
			clear: both;
			color: #000;
			/＊
			font-family: 'Roboto', sans-serif;
			＊/
			float: left;
			font-size: 16px;
			font-weight: bold;
			line-height: 1.0;
			margin: 0px 0px 0px 0px;
			min-width: 7em;
			padding: .9em 0px 0px 0px;
			position: relative;
		}

			.viewmode-mobile .block-news2 dt {
				/＊
				float: none;
				＊/
				font-size: 100%;
				text-align: left;
				/＊
				margin: 0 0 0 0;
				padding: 0px 0px 0px 0px;
				＊/
			}

			.block-news2 dt small {
				background-color: #ca2a7a;
				color: #fff;
				display: inline-block;
				/＊
				font-family: 'Noto Sans JP', sans-serif;
				＊/
				font-weight: bold;
				float: left;
				margin: -4px 15px 0 0;
				padding: 5px 7px;
				text-align: center;
				min-width: 100px;
			}

		.block-news2 dd {
			font-size: 17px;
			font-weight: bold;
			/＊
			letter-spacing: .05em;
			＊/
			line-height: 1.7;
			margin: 0;
			padding: .5em 0 .5em 7em;
			position: relative;
			text-align: left;
		}

			.viewmode-mobile .block-news2 dd {
				font-size: 100%;
				/＊
				padding: 0px 0 0px 0px;
				＊/
				text-align: left;
			}

			.block-news2 dd a {
				display: inline-block;
				text-decoration: underline;
			}

				.block-news2 dd a:hover {
					text-decoration: none;
				}
*/


/*
***********************************************************************************************
コンテナ
***********************************************************************************************
*/

.container {
	margin: 0px auto 0px auto;
	max-width: none;
	width: auto;
}

	.viewmode-mobile .container {
		margin: 0px auto 0px auto;
	}

	#content_wrapper {
		float: none;
		margin: 0px auto;
		padding: 0px 0px 0px 0px;
		width: auto;
	}

		.viewmode-mobile #content_wrapper {

		}

	.content {
		margin-top: 0px;
		min-height: 0;
		padding: 0px 0px 0px 0px;
	}

		.viewmode-mobile .content {

		}


/*
***********************************************************************************************
ホームのコンテンツ
***********************************************************************************************
*/

#block-entry {
	clear: both;
	padding-top: 0px;
	margin: 25px auto 50px auto;
	width: auto;
}

	.viewmode-mobile #block-entry {
		margin: 25px auto 0px auto;
		padding: 0 10px;
	}

	#block-entry a:hover img {
		/*
		opacity: 0.7;
		filter:  alpha(opacity=70);	/＊ for below IE8 ＊/
		*/
	}

	#block-entry .icon_external {
		display: none;
	}

	/*
	#block-entry h2:first-child{
		background-color: transparent;
		background-image: none;
		border-top: 0px solid #fff;
		border-bottom: 2px solid #3498DB;
		font-size: 150%;
		margin-bottom: 25px;
		padding-left: 0px;
		padding-right: 0px;
		text-align: center;
	}
	*/


/*
	.home ul#blocks-entry{
		list-style-type: none;
		width: 520px;
		padding: 0px;
	}

		.home ul#blocks-entry li{
			list-style-type: none;
			float: left;
			margin-right: 20px;
			margin-bottom: 20px;
		}
			.home ul#blocks-entry li h2{
				margin: 0px;
				padding: 0px;
				border: 0px solid #fff;
			}
				.home ul#blocks-entry li h2 a{
					padding-left: 0px;
					background-image: none;
				}

					.home ul#blocks-entry li a img{
						cursor: pointer;
					}
						.home ul#blocks-entry li a:hover img{
							opacity: 0.7;
							filter:  alpha(opacity=70);	/＊ for below IE8 ＊/
						}
*/


/*
***********************************************************************************************
ホームのバナー（未使用）
***********************************************************************************************
*/

/*
.banner-news {
	letter-spacing: -.40em; /＊ 文字間を詰めて隙間を削除する ＊/
	text-align: center;
	margin: 0px auto 0 auto;
	padding: 0px 0px 0px 0px;
}

	.viewmode-mobile .banner-news {
		background-color: var(--wp--preset--color--color-4);
		margin: 20px -10px 0 -10px;
		padding: 40px 0;
	}

	.banner-news ul {
		padding: 0;
	}

		.banner-news li {
			display: block;
			letter-spacing: normal; /＊ 文字間を通常に戻す ＊/
			margin: 0 auto 0px auto;
			text-align: center;
			vertical-align: top;
		}

			.banner-news li + li {
				margin-top: 25px;
			}

				.viewmode-mobile .banner-news li + li {
				}

			.banner-news img {
				max-width: 300px;
			}

			.viewmode-mobile .banner-news img {
				max-width: 270px;
			}

				.banner-news a img {
					vertical-align: top;
					transition: all 0.2s ease;
				}

					.banner-news a:hover img {
						opacity: 0.7;
					}
*/

/*
***********************************************************************************************
SERVICE
***********************************************************************************************
*/

.sec-service {
	margin: 5em auto 0 auto;
	padding-bottom: 4em;
	position: relative;
	text-align: center;
}

	.viewmode-mobile .sec-service {
		margin: 6em auto 0 auto;
		padding-bottom: 2em;
	}

	/* SERVICE */
	.sec-service h2 {
	}

		.viewmode-mobile .sec-service h2 {
		}

		.sec-service h2::before,
		.sec-service h2::after {
			right: calc(50% + 2.5em);
		}

			.viewmode-mobile .sec-service h2::before,
			.viewmode-mobile .sec-service h2::after {
				right: calc(50% + 2.1em);
			}

	/* 私たちは、ネットワークインフラ分野を… */
	.sec-service > p {
		font-size: 23px;
		font-weight: bold;
		position: relative;
		text-align: center;
		z-index: 1;
	}

		.viewmode-mobile .sec-service > p {
			font-size: 17.5px;
			line-height: 1.5;
			/*
			text-align: left;
			*/
		}

		.sec-service > p br {
			display: none;
		}

			.viewmode-mobile .sec-service > p br {
				display: inline;
			}

	/* サービス×3 */
	.sec-service ul {
		letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */
		list-style-type: none;
		margin: 30px auto 0 auto;
		/*
		max-width: 1200px;
		*/
		padding: 0;
		text-align: center;
	}

		.viewmode-mobile .sec-service ul {
			margin: 30px auto 0 auto;
		}

		.sec-service li {
			display: inline-block;
			letter-spacing: normal; /* 文字間を通常に戻す */
			margin: 0 1px 45px 1px;
			padding: 0px;
			position: relative;
			text-align: center;
			vertical-align: top;
			z-index: 1;
			width: 400px;
		}

			.viewmode-mobile .sec-service li {
				display: block;
				margin: 0 auto 0 auto;
				padding: 0 0;
				width: 50%;
				width: 100%;
			}

				.viewmode-mobile .sec-service li + li {
					margin-top: 4em;
				}

		.sec-service figure {
			background-color: var(--wp--preset--color--color-1);
			margin: 0;
			position: relative;
		}

			.viewmode-mobile .sec-service figure {
				margin-left: auto;
				margin-right: auto;
				max-width: 250px;
			}

			/* 罫線の飾り */
			.sec-service figure::before,
			.sec-service figure::after {
				background-color: #fff;
				bottom: 0;
				content: '';
				display: block;
				height: 30px;
				left: 50%;
				position: absolute;
				width: 2px;
				z-index: 2;
			}

			.sec-service figure::after {
				background-color: #000;
				bottom: -30px;
			}

			.viewmode-mobile .sec-service figure::before,
			.viewmode-mobile .sec-service figure::after {
				height: 20px;
			}

			.viewmode-mobile .sec-service figure::after {
				bottom: -20px;
			}

			.sec-service img {
				aspect-ratio: 1;
				display: block;
				margin: 0px auto 0 auto;
				object-fit: cover;
				opacity: .6;
				position: relative;
				text-align: center;
				z-index: 1;
				vertical-align: top;
				transition: all .3s ease;
			}

				.viewmode-mobile .sec-service img {
				}

			.sec-service figcaption {
				color: #000;
				display: block;
				font-family: 'Roboto Condensed', sans-serif;
				font-size: 48px;
				font-style: italic;
    			font-optical-sizing: auto;
				left: 0;
				line-height: 1;
				position: absolute;
				/*
				-webkit-text-stroke: 1px #fff;
				text-stroke: 1px #fff;
				*/
				top: 50%;
				z-index: 2;
				width: 100%;
				text-shadow:1px 1px 0 #fff, -1px -1px 0 #fff,
					-1px 1px 0 #fff, 1px -1px 0 #fff,
					0px 1px 0 #fff,  0-1px 0 #fff,
					-1px 0 0 #fff, 1px 0 0 #fff;
				transform: translateY(-50%);
				mix-blend-mode: screen;
			}

				.viewmode-mobile .sec-service figcaption {
					font-size: 32px;
					padding-left: 1em;
					padding-right: 1em;
				}

		.sec-service h3 {
			border: none;
			color: #000;
			font-size: 23px;
			font-weight: bold;
			/*
			letter-spacing: .05em;
			*/
			line-height: 1.6;
			margin: 2.5em auto 0 auto;
			padding: 0;
			text-align: center;
		}

			.viewmode-mobile .sec-service h3 {
				font-size: 18.5px;
				letter-spacing: 0;
				margin: 1.5em auto 0px auto;
			}

			.sec-service h3 small {
				color: var(--wp--preset--color--color-1);
				display: block;
				font-size: 70%;
				font-weight: normal;
				margin-top: .5em;
			}

				.viewmode-mobile .sec-service h3 small {
				}

		.sec-service li p {
			font-size: 15px;
			line-height: 1.8;
			margin-top: 1.5em;
			padding-left: 2em;
			padding-right: 2em;
			text-align: left;
		}

			.viewmode-mobile .sec-service li p {
				font-size: inherit;
				margin-top: 1em;
				padding-left: 15px;
				padding-right: 15px;
			}

		/* 詳しく見る */
		.sec-service li a {
			margin-top: 1.5em;
		}

			.viewmode-mobile .sec-service li a {
			}


/*
***********************************************************************************************
What's NISS?
***********************************************************************************************
*/

.sec-about {
	background-color: var(--wp--preset--color--color-4);
	margin: 0px auto 0 auto;
	max-width: var(--wp--style--global--content-size);
	max-width: none;
	padding: 6em 585px 4em 0;
	padding: 3em 0 3em 0;
	position: relative;
}

	.viewmode-mobile .sec-about {
		margin: 3em auto 0 auto;
		padding: 2em 15px 2.5em 15px;
	}

	/* フキダシのひげ */
	.sec-about::before {
		background-color: var(--wp--preset--color--color-4);
		content: '';
		height: calc(tan(60deg) * 50px / 2);
		left: calc( 50% - 30px );
		clip-path: polygon(50% 0, 100% 100%, 0 100%);
		position: absolute;
		top: calc(tan(60deg) * 50px / 2 * -.98);
		width: 50px;
		transform: scaleY(.8);
		transform-origin: bottom;
	}

		.viewmode-mobile .sec-about::before {
			transform: scale(.8, .6);
		}

	/* 背景を左右に延長（未使用） */
	/*
	.sec-about::before,
	.sec-about::after {
		background-color: inherit;
		content: '';
		display: block;
		position: absolute;
		top: 0;
		height: 100%;
		z-index: -1;
		width: calc((100vw - var(--wp--style--global--content-size))/2);
	}

	.sec-about::before {
		left: calc(((100vw - var(--wp--style--global--content-size))/2)*-1);
	}

	.sec-about::after {
		right: calc(((100vw - var(--wp--style--global--content-size))/2)*-1);
	}
	*/

	/* What's NISS？ */
	.sec-about h2 {
		color: #858dae;
	}

		.viewmode-mobile .sec-about h2 {
			margin-bottom: .25em;
		}

	/* ナビックのNISSサービス */
	.sec-about h3 {
		font-size: 26px;
		max-width: var(--wp--style--global--content-size);
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}

		.viewmode-mobile .sec-about h3 {
			font-size: 21px;
			text-align: center;
		}

	/* 画像 */
	.sec-about figure {
		content: '';
		display: block;
		height: 100%;
		height: calc(100% - 100px);
		left: 50%;
		position: absolute;
		top: 9em;
	}

		.viewmode-mobile .sec-about figure {
			left: auto;
			position: relative;
			text-align: center;
			top: auto;
		}

		.sec-about img {
			max-width: none;
			vertical-align: top;
			width: 685px;
		}

			.viewmode-mobile .sec-about img {
				max-width: 100%;
				width: 250px;
			}

	.sec-about p {
		font-size: 15px;
		max-width: var(--wp--style--global--content-size);
		margin-left: auto;
		margin-right: auto;
		padding-right: 580px;
		position: relative;
		text-align: left;
		z-index: 1;
	}

		.viewmode-mobile .sec-about p {
			font-size: 95%;
			padding-right: 0;
		}

		.viewmode-mobile .sec-about figure + p {
			margin-top: 1em;
		}


/*
***********************************************************************************************
CASE
***********************************************************************************************
*/

.sec-case {
	background-image: url(bg_case_01.webp);
	background-repeat: no-repeat;
	background-size: cover;
	margin-top: 11em;
	margin-left: auto;
	margin-right: auto;
	max-width: none;
	padding: 4em 0px 4em 0px;
	position: relative;
	text-align: center;
}

	.viewmode-mobile .sec-case {
		margin-top: 6em;
		padding: 3.5em 15px 3.5em 15px;
	}

	/* CASE */
	.sec-case h2 {
	}

		.viewmode-mobile .sec-case h2 {
		}

		.sec-case h2::before,
		.sec-case h2::after {
			right: calc(50% + 1.8em);
		}

			.viewmode-mobile .sec-case h2::before,
			.viewmode-mobile .sec-case h2::after {
				right: calc(50% + 1.5em);
			}

	.sec-case > p {
		text-align: center;
	}

		.viewmode-mobile .sec-case > p {
			text-align: left;
		}

	.sec-case > div {
		margin-top: 2.5em;
		margin-left: auto;
		margin-right: auto;
		max-width: var(--wp--style--global--content-size);
		min-height: 485px;
		padding-left: 620px;
		position: relative;
		text-align: left;
	}

		.viewmode-mobile .sec-case > div {
			min-height: 0;
			padding-left: 0;
			text-align: center;
		}

		.sec-case h3 {
			font-size: 26px;
		}

			.viewmode-mobile .sec-case h3 {
				font-size: 21px;
				text-align: center;
			}

			/* 導入事例のカテゴリ */
			.sec-case h3 small {
				background-color: var(--wp--preset--color--color-1);
				color: #fff;
				display: table;
				font-size: .6em;
				margin-bottom: .85em;
				padding: .45em .65em .35em .65em;
			}

				.viewmode-mobile .sec-case h3 small {
					font-size: .6em;
					margin-left: auto;
					margin-right: auto;
				}

			/* 導入事例の場所 */
			.sec-case h3 span {
				display: block;
				font-size: .6em;
				font-weight: normal;
				margin-top: .85em;
				text-align: left;
			}

				.viewmode-mobile .sec-case h3 span {
					font-size: .7em;
					margin-top: .5em;
					text-align: center;
				}

		.sec-case figure {
			display: flex;
			flex-wrap: wrap;
			gap: 20px;
			left: 0;
			max-width: 570px;
			position: absolute;
			top: 0;
			z-index: 2;
		}

			.viewmode-mobile .sec-case figure {
				gap: 15px;
				max-width: 100%;
				position: relative;
				text-align: ;
			}

			.viewmode-mobile .sec-case h3 + figure {
				margin-top: 1em;
			}

			.sec-case figure img {
				vertical-align: top;
			}

				.viewmode-mobile .sec-case figure img {
					width: calc((100% - 20px)/3);
				}

				.sec-case figure img:first-child {
					width: 100%;
				}

					.viewmode-mobile .sec-case figure img:first-child {
					}

				.sec-case figure img:nth-of-type(2),
				.sec-case figure img:nth-of-type(3) {
				}

		.sec-case > div p {
		}

			.viewmode-mobile .sec-case > div p {
				/*
				font-size: 15px;
				*/
				margin: 0px auto 0 auto;
				text-align: left;
			}

			.sec-case > div figure + p {
				margin-top: 1.1em;
			}

	/* 詳しく見る */
	.sec-case .btn {
		margin-top: 1.5em;
	}

		.viewmode-mobile .sec-case .btn {

		}


/*
***********************************************************************************************
RECRUIT
***********************************************************************************************
*/

.sec-recruit {
	margin: 10em auto 0 auto;
	/*
	max-width: var(--wp--style--global--content-size);
	*/
	padding: 6em 50% 4.5em 0;
	position: relative;
	text-align: right;
}

	.viewmode-mobile .sec-recruit {
		margin: 5.5em auto 0 auto;
		padding: 3em var(--wp--style--root--padding-left) 5em var(--wp--style--root--padding-right);
		text-align: center;
	}

	/* RECRUIT*/
	.sec-recruit h2 {
		left: 50%;
		position: absolute;
		top: 0;
		width: 100%;
		transform: translateX(-50%);
	}

		.viewmode-mobile .sec-recruit h2 {
		}

		.sec-recruit h2::before,
		.sec-recruit h2::after {
			right: calc(50% + 2.5em);
		}

		.viewmode-mobile .sec-recruit h2::before,
		.viewmode-mobile .sec-recruit h2::after {
			right: calc(50% + 2.3em);
		}

	/* 次の世界へつなげるために> */
	.sec-recruit h3 {
		position: relative;
		z-index: 1;
	}

		.viewmode-mobile .sec-recruit h3 {
			margin-top: 1.3em;
			text-align: center;
		}

	.sec-recruit p {
		position: relative;
		z-index: 1;
	}

		.viewmode-mobile .sec-recruit p {
			/*
			font-size: 90%;
			*/
			text-align: left;
		}

	/* 詳しく見る */
	.sec-recruit .btn {
		margin-top: 1em;
	}

		.viewmode-mobile .sec-recruit .btn {
			margin-top: 1em;
		}

		.sec-recruit .btn:hover {
		}

	.sec-recruit img {
		vertical-align: top;
	}

	/* 社員のイメージ */
	.sec-recruit > figure {
		left: 50%;
		margin: 0;
		position: absolute;
		top: 0;
		z-index: -1;
	}

		.viewmode-mobile .sec-recruit > figure {
			left: auto;
			margin: 0 auto 0 auto;
			position: relative;
		}

		.sec-recruit > figure img {
			max-width: 100%;
			width: 725px;
		}

			.viewmode-mobile .sec-recruit > figure img {
				width: 100%;
			}

	/* 就業イメージ×3 */
	.sec-recruit > ul {
		display: flex;
		gap: 20px;
		/*
		flex-wrap: wrap;
		*/
		justify-content: end;
		margin-top: 2em;
		padding: 0;
		position: relative;
		z-index: 1;
	}

		.viewmode-mobile .sec-recruit > ul {
			gap: 10px;
			margin-top: -.5em;
		}

		.sec-recruit > ul li {
			list-style-type: none;
			max-width: 235px;
		}

			.viewmode-mobile .sec-recruit > ul li {
				max-width: 100%;
				width: calc((100% - 20px)/3);
			}

			.sec-recruit > ul li + li {
				margin-top: 0;
			}


/*
***********************************************************************************************
ボトムバー（未使用）
***********************************************************************************************
*/

/*
#bottombar {
	background-color: transparent;
	position: static;
	text-align: center;
}

	#bottombar:before{
		content: none;
	}
*/


/*
***********************************************************************************************
各種SNSのウィジェット（未使用）
***********************************************************************************************
*/

/*
#block-sns{
	box-sizing:border-box;
	margin: 40px 0 0 0;
}

	.viewmode-mobile #block-sns {
		margin: 35px 0 0 0;
		text-align: center;
	}

	#block-sns h3{
		background-color: transparent;
		font-family: 'Roboto', sans-serif;
		font-weight: normal;
		margin: 0;
		padding: 7px 0px;
	}

		#block-sns h3::before{
			background-repeat:no-repeat;
			background-size:100%;
			content:"";
			display:inline-block;
			margin-right:5px;
			width:40px;
			height:40px;
			vertical-align:middle;
		}

	#block-sns .icon_external{
		display:none;
	}
*/


/*
***********************************************************************************************
フッター
***********************************************************************************************
*/

#footer {
}

	.viewmode-mobile #footer {
	}