@charset "utf-8";
@import "common.css";

/*-----------------------------------------------
	index
-----------------------------------------------*/
.btn{
	display:block;
	width:144px;
	height:42px;
	margin:0 auto;
	padding:15px 0 13px;
	border:1px solid #fff;
	border-radius:21px;
	background-color:#000;
	color:#fff;
	font-size:14px;
	text-align:center;
}
@media only screen and (max-width:767px){
	.btn{
		width:130px;
		padding:14px 0 12px;
	}
}

/* top */
.top{
	width:100%;
	height:554px;
	background:url(../img/index/img_top.jpg) center center no-repeat;
}
.top .inner{
	max-width:970px;
	margin:0 auto;
	padding-top:145px;
}
.top h2{
	margin-bottom:60px;
}
@media only screen and (min-width:1400px){
	.top{
		background-size:cover;
	}
}
@media only screen and (max-width:767px){
	.top{
		height:auto;
		background-image:url(../img/index/img_top.jpg);
		background-size:cover;
	}
	.top .inner{
		padding:130px 12px 95px 14px;
	}
	.top h2{
		margin-bottom:30px;
	}
	.top h2 img{
		width:294px;
		max-width:100%;
		height:auto;
	}
	.top h3 img{
		width:254px;
		max-width:100%;
		height:auto;
	}
}

/* topics */
.topics{
	max-width:950px;
	margin:0 auto;
	padding:38px 0 52px;
	font-size:0;
}
.topics .heading{
	display:inline-block;
	width:170px;
	margin-right:14px;
	padding-top:4px;
	text-align:center;
	vertical-align:top;
}
.topics .tit{
	margin-bottom:4px;
	font-size:33px;
	line-height:48px;
}
.topics .tit .fa{
	display:block;
	margin-bottom:12px;
	color:#ff8e00;
	font-size:25px;
}
.topics .list{
	display:inline-block;
	width:730px;
	vertical-align:top;
}
.topics .list a{
	display:block;
	padding:9px 5px;
}
.topics .list p{
	display:inline-block;
}
.topics .list li{
	border-bottom:1px solid #E1E1E1;
	font-size:14px;
}
.topics .list li:last-child{
	border-bottom:none;
}
.topics .list span{
	display:inline-block;
	width:60px;
	margin-right:10px;
	padding:3px 0 2px;
	border-radius:8px;
	color:#fff;
	font-weight:bold;
	font-size:12px;
	text-align:center;
}
.topics .list .recruit_cat{
	background-color:#448ac9;
}
.topics .list .company_cat{
	background-color:#ff8e00;
}
.topics .list .news_cat{
	background-color:#949494;
}
.topics .list .products_cat{
	background-color:#85B200;
}
/*20201028Add*/
.topics .list .cat72_cat{
	background-color:#d27c94;
}
/*
.topics .list time{
	margin-right:10px;
	font-size:12px;
}
*/
.topics .list p.time{
	margin-right:10px;
	font-size:12px;
}

@media only screen and (max-width:767px){
	.topics{
		position:relative;
		padding:13px 10px;
	}
	.topics .heading{
		width:100%;
		margin-right:0;
	}
	.topics .tit{
		font-size:24px;
		line-height:25px;
	}
	.topics .tit .fa{
		display:inline-block;
		margin-right:5px;
		font-size:24px;
	}
	.topics .btn{
		position:absolute;
		bottom:20px;
		left:50%;
		margin-left:-65px;
	}
	.topics .list{
		width:100%;
		margin-bottom:60px;
	}
	.topics .list a{
		padding:8px 5px;
	}
	.topics .list p{
		margin-top:5px;
		font-size:14px;
		line-height:16px;
	}
	.topics .list span{
		width:50px;
		margin-right:5px;
		font-size:10px;
	}
	.topics .list time{
		margin-right:0;
		font-size:10px;
	}
}

/* contents */
.contents{
	font-size:0;
}
.contents > div{
	font-size:14px;
	vertical-align:top;
}
.contents p.tit{
	display:inline-block;
	position:relative;
	margin-bottom:13px;
	padding-bottom:5px;
	font-size:28px;
	line-height:50px;
}
.contents .tit::after{
	position:absolute;
	bottom:0;
	left:50%;
	width:110px;
	height:4px;
	margin-left:-55px;
	background-color:#000;
	content:"";
}
.contents .tit .fa{
	display:block;
	margin-bottom:12px;
	font-size:28px;
}
.contents p.txt{
	margin-bottom:6px;
	font-size:16px;
	line-height:24px;
}
@media only screen and (max-width:767px){
	.contents p.tit{
		margin-bottom:10px;
		padding-bottom:5px;
		font-size:24px;
		line-height:25px;
	}
	.contents .tit .fa{
		display:inline-block;
		margin:0 8px 0 0;
		font-size:24px;
	}
	.contents .tit::after{
		width:140px;
		height:2px;
		margin-left:-70px;
	}
	.contents p.txt{
		margin-bottom:8px;
		font-size:14px;
		line-height:18px;
	}
}

/* company, business */
.company{
	background:url(../img/index/img_company.jpg) right center no-repeat;
}
.business{
	background:url(../img/index/img_business.jpg) left center no-repeat;
}
.company,
.business{
	display:inline-block;
	position:relative;
	width:50%;
	height:280px;
}
.company .inner,
.business .inner{
	position:relative;
	float:right;
	width:262px;
	height:280px;
	padding-top:25px;
	background-color:rgba(0,0,0,0.5);
	color:#fff;
	text-align:center;
}
.company .inner::before,
.business .inner::before{
	position:absolute;
	top:50%;
	left:-20px;
	width:0;
	height:0;
	margin-top:-15px;
	border-width:15px 20px 15px 0;
	border-style:solid;
	border-color:transparent rgba(0,0,0,0.5) transparent transparent;
	content:"";
}
.company .tit::after,
.business .tit::after{
	background-color:#fff;
}
.contents .company .tit .fa,
.contents .business .tit .fa{
	font-size:25px;
}
.contents .company .txt,
.contents .business .txt{
	min-height:72px;
	font-size:14px;
}
@media only screen and (min-width:1400px){
	.company,
	.business{
		background-size:cover;
	}
}
@media only screen and (max-width:767px){
	.company{
		margin-bottom:2px;
		background-image:url(../img/index/img_company.jpg);
		background-position:center top;
	}
	.business{
		background-image:url(../img/index/img_business_sp.jpg);
		background-position:center top;
	}
	.company,
	.business{
		display:block;
		width:100%;
		height:190px;
		background-size:cover;
	}
	.company .inner,
	.business .inner{
		width:173px;
		height:190px;
		padding-top:37px;
	}
	.contents .company .tit::after,
	.contents .business .tit::after{
		width:125px;
		margin-left:-62.5px;
	}
	.contents .company .tit .fa,
	.contents .business .tit .fa{
		font-size:24px;
	}
	.contents .company .txt,
	.contents .business .txt{
		min-height:inherit;
		font-size:11px;
	}
}

/* management */
.management{
	clear:right;
	background:url(../img/index/img_management.jpg) center top no-repeat;
}
.management .inner.technology{
	position:relative;
	max-width:960px;
	height:478px;
	margin:0 auto;
	padding-top:54px;
}
.management .technology .heading{
	position:absolute;
	top:128px;
	right:0;
	width:320px;
	text-align:center;
}
.contents .management .technology .txt{
	min-height:48px;
}
.management .technology .figure{
	position:relative;
	width:670px;
	text-align:center;
}
.management .figure li{
	position:absolute;
	max-width:190px;
	min-width:140px;
	padding:16px 10px 8px;
	border-radius:6px;
	box-shadow:0 16px 16px rgba(103,200,207,0.16);
	background-color:rgba(255,255,255,0.8);
	font-weight:bold;
	font-size:14px;
	line-height:18px;
	text-align:center;
}
.management .mgt1{
	top:-38px;
	left:385px;
	color:#f39100;
}
.management .mgt2{
	top:78px;
	left:505px;
	color:#00abcd;
}
.management .mgt3{
	top:294px;
	left:462px;
	color:#007e9e;
}
.management .mgt4{
	top:295px;
	left:32px;
	color:#699a03;
}
.management .mgt5{
	top:78px;
	left:-10px;
	color:#eb3a3d;
}
.management .inner.facilities{
	padding:20px 0 30px;
	background-color:rgba(255,255,255,0.3);
}
.management .facilities ul{
	font-size:0;
	text-align:center;
}
.management .facilities li{
	display:inline-block;
	margin:0 5px;
	font-size:14px;
	vertical-align:top;
}
.management .facilities a{
	display:block;
}
.management .facilities .txt{
	height:88px;
}
.management .facilities .txt p{
	line-height:1.8;
}
.management .facilities .txt strong{
	font-size:24px;
}
.management .facilities .e-mac .txt img{
	margin-top:3px;
}
.management .facilities .n2u-bridge .txt img{
	margin-top:6px;
}
@media only screen and (min-width:1400px){
	.management{
		background-size:cover;
	}
}
@media only screen and (max-width:767px){
	.management{
		background-size:cover;
	}
	.management .inner.technology{
		height:auto;
		padding:25px 10px 12px;
	}
	.management .technology .heading{
		position:relative;
		top:inherit;
		width:100%;
		margin-bottom:10px;
	}
	.contents .management .technology .txt{
		min-height:inherit;
	}
	.management .technology .figure{
		width:auto;
	}
	.management .technology .figure img{
		width:283px;
		max-width:100%;
		height:auto;
	}
	.management .technology .figure ul{
		display:none;
	}
	.management .inner.facilities{
		padding:28px 5px 20px;
	}
	.management .facilities li a{
		display:flex;
		flex-direction:row-reverse;
		align-items:center;
		margin:0 0 10px;
	}
	.management .facilities li:last-child a{
		margin-bottom:0;
	}
	.management .facilities .txt{
		width:50%;
		height:auto;
	}
	.management .facilities .txt p{
		font-size:11px;
		line-height:16px;
	}
	.management .facilities .txt strong{
		font-size:14px;
	}
	.management .facilities .e-mac .txt img{
		margin-top:10px;
		width:127px;
		height:auto;
	}
	.management .facilities .n2u-bridge .txt img{
		margin-top:10px;
		width:115px;
		height:auto;
	}
	.management .facilities .img{
		width:50%;
	}
	.management .facilities .img img{
		width:100%;
		height:auto;
	}
}

/* products */
.products .inner{
	padding:55px 0;
}
.products .heading{
	text-align:center;
}
.contents .products .tit{
	margin-bottom:8px;
	font-size:33px;
}
.products{
	position:relative;
	background:url(../img/index/bg_products.jpg) center top no-repeat;
}
.products .list{
	max-width:1160px;
	margin:0 auto;
}
.products .bx-wrapper{
	position:relative;
	max-width:1160px !important;
}
.products .bx-wrapper::after{
	position:absolute;
	top:0;
	right:0;
	width:20px;
	height:100%;
	background-color:#fff;
	content:"";
}
.products .bx-viewport{
	padding:0 20px;
}
.products .bx-pager{
	position:relative;
	z-index:999;
	margin-top:40px;
	padding:0;
	text-align:center;
	font-size:0;
}
.products .bx-pager .bx-pager-item{
	display:inline-block;
	vertical-align:top;
	width:12px;
	margin:0 7.5px;
}
.products .bx-pager a{
	display:block;
	width:12px;
	height:12px;
	border-radius:50%;
	background:#e0e0e0;
}
.products .bx-prev,
.products .bx-next{
	display:block;
	position:absolute;
	top:50%;
	margin-top:-80px;
	font-size:0;
}
.products .bx-prev{
	left:-80px;
}
.products .bx-prev::before{
	color:#DDD;
	font-size:70px;
	font-family:FontAwesome;
	content:'\f0a8';
}
.products .bx-next{
	right:-80px;
}
.products .bx-next::before{
	color:rgba(0,0,0,0.2);
	font-size:70px;
	font-family:FontAwesome;
	content:'\f0a9';
}
.products ul{
	padding-top:21px;
}
.products li{
	position:relative;
	width:265px !important;
	min-height:347px;
	background:url(../img/index/bg_item.jpg) center top no-repeat;
	padding:10px;
	box-sizing:border-box;
}
.products li::before{
	position:absolute;
	top:-21px;
	left:-20px;
	width:252px;
	height:251px;
	background: url(../img/index/bg_shadow.png) center center no-repeat;
	content:"";
}
.products li a{
	display:block;
	/*position:relative;*/
}
.products .list .txt{
	position:absolute;
	bottom:6px;
	left:0;
	bottom:20px;
	margin-bottom:0;
	padding:10px;
}
.products .list .txt p{
	margin-bottom:8px;
	font-size:16px;
	line-height:22px;
}
.ellipsis {  
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.products .list .txt span{
	display:inline-block;
	min-width:82px;
	padding:5px 13px 3px;
	border-radius:11px;
	color:#fff;
	font-size:14px;
	/*text-align:center;*/
}
.products .list .txt .overview{
	display:block;
	padding:0 0 5px;
	line-height:16px;
	color:inherit;
}
.products .list .txt .cat1:nth-of-type(even){
	background-color:#313131;
}
.products .list .txt .cat1:nth-of-type(odd){
	background-color:#ff8e00;
}
img.img_r{
		width:100%;
		height:200px;
		text-align:center;
		object-fit: cover;
	}
@media only screen and (min-width:1400px){
	.products{
		background-size:100% auto;
	}
}
@media only screen and (max-width:767px){
	.products .inner{
		padding:28px 0 40px;
	}
	.products .heading{
		margin-bottom:16px;
	}
	.contents .products .tit{
		font-size:25px;
	}
	.contents .products .tit::after{
		width:120px;
		margin-left:-60px;
	}
	.products .list{
		width:100%;
		overflow:hidden;
	}
	.slider{
		width:9999% !important;
	}


	.products .bx-wrapper{
		position:inherit;
		width:189px !important;
		margin:0 auto;
	}
	.products .bx-wrapper::after{
		display:none;
	}
	.products .bx-viewport{
		overflow:visible !important;
	}
	.products li{
		width:149px !important;
	    min-height:210px;
		background-size:contain;
	    background:url(../img/index/bg_item.jpg) center top repeat;
	}
	.products li::before{
		top:-11px;
		left:-10px;
		width:126px;
		height:125px;
		background-size:contain;
	}
	.products .bx-pager{
		width:375px;
		left:50%;
		margin:30px 0 0 -187.5px;
	}
	.products .bx-pager .bx-pager-item{
		margin:0 6px 12px;
	}
	.products .bx-pager a{
		width:10px;
		height:10px;
	}
	.products .bx-prev{
		left:9px;
	}
	.products .bx-next{
		right:9px;
	}
	.products .bx-prev,
	.products .bx-next{
		margin-top:0;
	}
	.products .bx-prev::before,
	.products .bx-next::before{
		font-size:35px;
	}
	.products .list .txt{
		bottom:4px;
		padding:8px;
	}
	.products .list .txt p{
		margin-bottom:4px;
		font-size:11px;
		line-height:16px;
	}
	.products .list .txt span{
		min-width:61px;
		padding:3px 10px 2px;
		font-size:10px;
	}
	.products .list .txt p span{
		font-size:9px;
		text-align:left;
	}
	.products .list .txt .overview{
	    display:block;
		font-size:9px;
	    padding:0 0 5px;
	    line-height:9px;
	    color:inherit;
    }   

    img.img_r{
		width:100%;
		height:100px;
		text-align:center;
		object-fit: cover;
	}
}

/* recruit */
.recruit{
	height:516px;
	padding:62px 0 70px;
	background:url(../img/index/img_recruit.jpg) center top no-repeat;
	color:#fff;
	text-align:center;
}
.contents .recruit .tit{
	margin-bottom:28px;
	font-size:33px;
}
.recruit .tit::after{
	bottom:-2px;
	background-color:#fff;
}
.contents .recruit .txt{
	margin-bottom:74px;
}
.recruit ul{
	margin-bottom:28px;
	font-size:0;
}
.recruit li{
	display:inline-block;
}
.recruit li a{
	display:block;
	width:238px;
	margin:0 8px;
	padding:22px 0 20px;
	border:1px solid #fff;
	border-radius:32px;
	background-color:rgba(0,0,0,0.5);
	color:#fff;
	font-size:20px;
}
.recruit .site{
	display:block;
	width:228px;
	margin:0 auto;
	padding:16px 0 15px;
	background-color:#fff;
	font-size:14px;
}
@media only screen and (min-width:1400px){
	.recruit{
		background-size:cover;
	}
}
@media only screen and (max-width:767px){
	.recruit{
		height:auto;
		padding:40px 0 25px;
		background-image:url(../img/index/img_recruit_sp.jpg);
		background-size:cover;
	}
	.contents .recruit .tit{
		margin-bottom:16px;
		font-size:24px;
	}
	.contents .recruit .tit::after{
		width:125px;
		margin-left:-62.5px;
	}
	.contents .recruit .txt{
		margin-bottom:30px;
	}
	.recruit ul{
		margin-bottom:14px;
	}
	.recruit li a{
		width:130px;
		margin:0 7px;
		padding:13px 0;
		border-radius:20px;
		font-size:12.5px;
	}
	.recruit .site{
		display:block;
		width:150px;
		padding:11px 0;
		font-size:10px;
	}
}


/* 1. 見えていないスライド（aria-hidden="true"）の中にあるリンクを無効化する */
.bx-wrapper li[aria-hidden="true"] a {
    visibility: hidden !important; /* 物理的に存在しないことにする */
    pointer-events: none !important; /* クリックも不可にする */
}

/* 2. 見えているスライド（aria-hidden="false"）にだけフォーカス枠を許可する */
.bx-wrapper li[aria-hidden="false"] a:focus {
    outline: 5px solid #005bac !important; /* 濃い青 */
    outline-offset: -5px !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.5) !important;
}

/* 3. 矢印ボタンのフォーカスも視覚化する */
.bx-wrapper .bx-controls-direction a:focus {
    outline: 3px solid #ff9800 !important; /* 矢印はオレンジ */
    background: rgba(255, 152, 0, 0.2) !important;
}
/* フォーカスが当たったスライドを強制的に最前面に表示し、色を付ける */
.slider li a:focus {
    outline: 5px solid #ff8e00 !important; 
    outline-offset: -5px;
    z-index: 999 !important; 
}