@charset "utf-8";

/* -----------------------------------------------------------
    下層タイトル
-------------------------------------------------------------- */
 .page-title.lower-page {
	width: 100%;
	height: auto;
    display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.page-title.lower-page::before{
	content: "";
	display: block;
	width: 50%;
	height: 380px;
	border-radius: 190px 0 0 190px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}
#sitemap .page-title.lower-page::before,
#privacy .page-title.lower-page::before {
	display: none;
}
#news .page-title.lower-page::before{
	background: url("../img/page-title-news.jpg") no-repeat center / cover;
}
#aboutus .page-title.lower-page::before{
	background: url("../img/page-title-aboutus.jpg") no-repeat center / cover;
}
#plant-engineering.index .page-title.lower-page::before{
	background: url("../img/page-title-plant-en.jpg") no-repeat center / cover;
}
#plant-engineering.process .page-title.lower-page::before{
	background: url("../img/page-title-plant-en-process.jpg") no-repeat left center / cover;
}
#plant-engineering.first-processed .page-title.lower-page::before{
	background: url("../img/page-title-plant-en-first.jpg") no-repeat center / cover;
}
#plant-engineering.second-processed .page-title.lower-page::before{
	background: url("../img/page-title-plant-en-second.jpg") no-repeat center / cover;
}
#products-index.index .page-title.lower-page::before{
	background: url("../img/page-title-products-index.jpg") no-repeat center / cover;
}
#products.list .page-title.lower-page::before,
#products.detail-page .page-title.lower-page::before{
	background: url("../img/page-title-products.jpg") no-repeat center / cover;
}
/*製品カテゴリ*/
#products.list .page-title.lower-page.first-processed-product::before{
	background: url("../img/mv-first.jpg") no-repeat left center / cover;
}
#products.list .page-title.lower-page.second-processed-product::before{
	background: url("../img/mv-second.jpg") no-repeat left center / cover;
}
#products.list .page-title.lower-page.material::before{
	background: url("../img/mv-material.jpg") no-repeat left center / cover;
}
#products.list .page-title.lower-page.building::before{
	background: url("../img/mv-building.jpg") no-repeat center center / cover;
}
#products.list .page-title.lower-page.civil-engineering::before{
	background: url("../img/mv-civil.jpg") no-repeat center center / cover;
}
#products.list .page-title.lower-page.shipbuilding::before{
	background: url("../img/mv-shipbuilding.jpg") no-repeat left center / cover;
}
#products.list .page-title.lower-page.bridge::before{
	background: url("../img/mv-bridge.jpg") no-repeat right center / cover;
}
#products.list .page-title.lower-page.plant::before{
	background: url("../img/mv-plant.jpg") no-repeat center center / cover;
}
#products.list .page-title.lower-page.industrial-machinery::before{
	background: url("../img/mv-industrial.jpg") no-repeat center center / cover;
}
#products.list .page-title.lower-page.construction-machinery::before{
	background: url("../img/mv-construction.jpg") no-repeat center center / cover;
}
#products.list .page-title.lower-page.car::before{
	background: url("../img/mv-car.jpg") no-repeat center center / cover;
}

#products.list .page-title.lower-page.leveler::before{
	background: url("../img/mv-leveler.jpg") no-repeat center center / cover;
}
#products.list .page-title.lower-page.sliter::before{
	background: url("../img/mv-sliter.jpg") no-repeat center center / cover;
}
#products.list .page-title.lower-page.shear::before{
	background: url("../img/mv-shear.jpg") no-repeat center center / cover;
}
#products.list .page-title.lower-page.shotprimer::before{
	background: url("../img/mv-shotprimer.jpg") no-repeat center center / cover;
}
#products.list .page-title.lower-page.fusing::before{
	background: url("../img/mv-fusing.jpg") no-repeat center center / cover;
}
#products.list .page-title.lower-page.timbering::before{
	background: url("../img/mv-timbering.jpg") no-repeat center center / cover;
}
#products.list .page-title.lower-page.bh-bt::before{
	background: url("../img/mv-bhbt.jpg") no-repeat center center / cover;
}
#products.list .page-title.lower-page.column::before{
	background: url("../img/mv-column.jpg") no-repeat center center / cover;
}
#products.list .page-title.lower-page.bending::before{
	background: url("../img/mv-bending.jpg") no-repeat center center / cover;
}
#products.list .page-title.lower-page.other::before{
	background: url("../img/mv-other.jpg") no-repeat center center / cover;
}


#company-index .page-title.lower-page::before{
	background: url("../img/page-title-company-index.jpg") no-repeat center / cover;
}
#c-message .page-title.lower-page::before{
	background: url("../img/page-title-company-message.jpg") no-repeat center / cover;
}
#c-outline .page-title.lower-page::before{
	background: url("../img/page-title-company-outline.jpg") no-repeat center / cover;
}
#c-office .page-title.lower-page::before{
	background: url("../img/page-title-company-office.jpg") no-repeat center / cover;
}
#case .page-title.lower-page::before{
	background: url("../img/page-title-case.jpg") no-repeat center / cover;
}
#form .page-title.lower-page::before{
	background: url("../img/page-title-contact.jpg") no-repeat center / cover;
}
#recruit.rec-about .page-title.lower-page::before{
	background: url("../img/page-title-recruit-about.jpg") no-repeat center / cover;
}
#recruit.work .page-title.lower-page::before{
	background: url("../img/page-title-recruit-work.jpg") no-repeat center / cover;
}
#recruit.interview-index .page-title.lower-page::before{
	background: url("../img/page-title-recruit-interview.jpg") no-repeat center/ cover;
}
#recruit.interview-crosstalk.sales .page-title.lower-page::before{
	background: url("../img/page-title-recruit-interview-sales.jpg") no-repeat center / cover;
}
#recruit.interview-crosstalk.technical .page-title.lower-page::before{
	background: url("../img/page-title-recruit-interview-technical.jpg") no-repeat center / cover;
}
#recruit.environment .page-title.lower-page::before{
	background: url("../img/page-title-recruit-environment.jpg") no-repeat center / cover;
}
#recruit.positions .page-title.lower-page::before{
	background: url("../img/page-title-recruit-positions.jpg") no-repeat center / cover;
}
#form.entry .page-title.lower-page::before{
	background: url("../img/page-title-entry.jpg") no-repeat center / cover;
}
.page-title.lower-page .titlebox{
	height: 380px;
	width: calc(1000px + ((100% - 1000px)/2));
	margin: 60px auto 0 0;
	padding: 0 0 0 calc((100% - 1200px)/2);
	display: flex;
	justify-content: center;
	flex-direction: column;
	background: url("../img/bg-blueprint.png") repeat left top , var(--main);
	border-radius: 0 190px 190px 0;
	text-align: left;
}
#sitemap .page-title.lower-page .titlebox,
#privacy .page-title.lower-page .titlebox{
	margin: 0 auto 0 0;
}
#recruit .page-title.lower-page .titlebox,
.entry .page-title.lower-page .titlebox{
	background-color: var(--bg-green);
}
.page-title.lower-page .titlebox .title-en,
.page-title.lower-page .titlebox .title-jp{
	color: #fff;
}
.page-title.lower-page .titlebox .title-en{
	margin: -40px 0 0 -20px;
	opacity: .15;
	/*font-size: 8rem;*/
    position: absolute;
	white-space: nowrap;
}
.page-title.lower-page .titlebox .title-en.type1{
	font-size: 5rem;
}
.page-title.lower-page .titlebox .title-en.type2{
	font-size: 4rem;
}
.page-title.lower-page .titlebox .title-jp{
	color: #fff;
	font-size: 4rem;
    margin: 0;
	padding: 0 0 0;
	position: relative;
	z-index: 1;
}

.first-processed-product.page-title.lower-page .titlebox .title-en.type1,
.second-processed-product.page-title.lower-page .titlebox .title-en.type1{
	font-size: 3.8rem;
}

#plant-engineering.index .page-title.lower-page .titlebox .title-en{
	/*letter-spacing: -0.05em;
	font-size: 3.9rem;
	margin: 0 0 5px;*/
}
#recruit .page-title.lower-page .titlebox .title-en,
#recruit .page-title.lower-page .titlebox .title-jp,
.entry .page-title.lower-page .titlebox .title-en,
.entry .page-title.lower-page .titlebox .title-jp{
	color: var(--recruit-main);
}

/*h1・パンくず*/
.h1-area.lower-page{
    position: absolute;
    /*top: 545px;
    right: calc((100% - 1200px)/2);
	left: auto;
	z-index: 1;*/
	top: 100px;
    right: calc((100% - 1200px)/2);
	left: auto;
	z-index: -1;
}
#sitemap .h1-area.lower-page,
#privacy .h1-area.lower-page{
	left: -500px;
	top: 300px;
	right: auto;
}
.breadcrumblist.lower-page {
	padding: 0;
    margin: 10px auto 60px calc((100% - 1200px)/2);
}
#recruit .breadcrumblist.lower-page {
  padding: 0;
  margin: 20px auto 60px calc((100% - 1200px)/2);
}

.breadcrumblist.lower-page>p {
    width: 100%;
	text-align: left;
    font-size: 1.2rem;
}
.page-title.lower-page .titlebox .title-jp span.smalltxt {
	font-size: 2rem;
	line-height: 1.1!important;
}

@media screen and (max-width: 768px){
	.page-title.lower-page {
		margin: 0 0 30px;
		padding: 0 0 120px;
		height: auto;
		position: relative;
	}
	#sitemap .page-title.lower-page,
	#privacy .page-title.lower-page {
		padding: 0;
	}
	.page-title.lower-page::before{
		width: 100%;
		max-width: 480px;
		height: 150px;
		top: auto;
		bottom: 0;
		z-index: 1;
	}
	.page-title.lower-page .titlebox{
		height: 140px;
		width: 100%;
		margin: 0;
		padding: 30px 10px 0 20px;
		display: block;
		text-align: left;
	}
	
	.page-title.lower-page .titlebox .title-en{
		margin: 0 0 0 -10px;
		opacity: .15;
		/*font-size: 4rem;*/
	}
	.page-title.lower-page .titlebox .title-en.type1{
		font-size: 2.8rem;
		padding: 5px 0 0;
	}
	.page-title.lower-page .titlebox .title-en.type2{
		font-size: 2.4rem;
		padding: 5px 0 0;
	}
	.page-title.lower-page .titlebox .title-jp{
		padding: 20px 0 0;
		font-size: 2.2rem;
	}
	

	.first-processed-product.page-title.lower-page .titlebox .title-en.type1,
	.second-processed-product.page-title.lower-page .titlebox .title-en.type1{
		font-size: 2.2rem;
		padding: 5px 0 0;
	}

	#sitemap .page-title.lower-page .titlebox,
	#privacy .page-title.lower-page .titlebox{
		margin: 0;
		padding: 40px 0 0 20px;
	}
	
    /*h1・パンくず*/
    .h1-area.lower-page {
        margin: 0 auto 0;
        top: -50px;
        left: 0px;
    }
	#recruit .h1-area.lower-page{
		top: -50px;
	}
	#sitemap .h1-area.lower-page,
	#privacy .h1-area.lower-page{
		top: -50px;
        left: 0px;
	}
}

/* -----------------------------------------------------------
	link-area
-------------------------------------------------------------- */
.common-link{
    margin: 80px 0 0;
}
.common-link-wrap{
    display: flex;
    justify-content: center;
    gap: 0 60px;
}
.common-link-wrap a{
    display: flex;
    width: 560px;
    height: 200px;
    background-color: #fff;
    border-radius: 15px;
	border: 1px solid var(--main);
	padding: 15px;
	position: relative;
	align-items: center;
}
.common-link-wrap a img{
    width: 167px;
	height: 167px;
	border-radius: 10px;
	object-fit: cover;
}
.common-link-wrap a img.l{
	object-position: left center;
}
.common-link-wrap a .titlebox{
    margin: 0 0 0 50px;
    text-align: left;
}
.common-link-wrap a .titlebox .title-en{
	font-size: 3.6rem;
	margin: 0 0 8px;
}
.common-link-wrap a .titlebox .title-jp{
    font-size: 2rem;
}
.common-link-wrap a span.arrow-b{
	display: block;
	width: 40px;
	height: 8px;
	position: absolute;
	right: 20px;
	bottom: 30px;
	transition: 0.5s;
	background: url("../img/arrow-b.svg") no-repeat center / contain;
}
.common-link-wrap a:hover span.arrow-b{
	right: 10px;
}

/*3カラム用*/
.common-link-wrap.col3{
    gap: 0 30px;
}
.common-link-wrap.col3 a{
	width: calc((100% - 60px) / 3);
    height: 100%;
}
.common-link-wrap.col3 a img{
    width: 140px;
	height: 140px;
}
.common-link-wrap.col3 a .titlebox{
    margin: 0 0 0 25px;
}
.common-link-wrap.col3 a .titlebox .title-en{
	font-size: 2.6rem;
}
.common-link-wrap.col3 a .titlebox .title-jp{
    font-size: 1.8rem;
}

/*採用*/
#recruit .common-link-wrap a{
	border: 1px solid var(--recruit-main);
}
#recruit .common-link-wrap a span.arrow-b{
	background: url("../img/arrow-g.svg") no-repeat center / contain;
}
#recruit .common-link-wrap a .titlebox .title-en {
	color: var(--recruit-main);
}
#recruit .common-link-wrap a .titlebox .title-jp {
	color: var(--recruit-main);
	/*color: #333;*/
}


@media screen and (max-width: 768px){
    .common-link{
        margin: 40px 0 0;
    }
    .common-link-wrap,
	.common-link-wrap.col3{
        flex-direction: column;
        gap: 20px 0;
    }
    .common-link-wrap a,
	.common-link-wrap.col3 a{
        width: 100%;
        height: 120px;
		padding: 10px;
    }
	.common-link-wrap a img,
	.common-link-wrap.col3 a img{
		width: 100px;
		height: 100px;
		margin: 0;
	}
    .common-link-wrap a .titlebox,
	.common-link-wrap.col3 a .titlebox{
        margin: 0 0 0 20px;
    }
	.common-link-wrap a .titlebox .title-en,
	.common-link-wrap.col3 a .titlebox .title-en{
		font-size: 2.4rem;
		margin: 0 0 5px;
	}
	.common-link-wrap a .titlebox .title-jp,
	.common-link-wrap.col3 a .titlebox .title-jp{
		font-size: 1.7rem;
	}
	.common-link-wrap a span.arrow-b{
		right: 15px;
		bottom: 15px;
	}
	

}

/* -----------------------------------------------------------
	products
-------------------------------------------------------------- */
.products-list {
	margin: 0 0 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
	align-items: flex-start;
}

.products-list li {
	width: calc((100% - 100px ) / 4);
	background-color: #fff;
	border-radius: 10px;
}

/*リスト（リンクエリア）*/
.products-list li a {
	display: flex;
	width: 100%;
	align-items: flex-start;
	color: #333;
	flex-wrap: wrap;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.16);
	border-radius: 10px;
}

.products-list li a .thumb{
    width: 275px;
    height: 250px;
    transition: 0.5s;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.products-list li .thumb img {
    /*width: auto;
    height: 100%;
    max-width: none;
    max-height: 100%;*/
    width: 100%;
    /*min-height: 250px;*/
    height: 100%;
    object-fit: cover;
    object-position: center;
	border-radius: 10px 10px 0 0;
}

.products-list li a .txt-wrap{
    padding: 20px 20px;
    text-align: left;
    margin: 0;
    width: auto;
}
.products-list li a .products-cate{
    font-size: 1.3rem;
    display: inline-block;
    line-height: 1.5;
    margin: 0 10px 10px 0;
}
.products-list li a .products-title{
	line-height: 1.5;
}
@media screen and (max-width: 768px){
    .products-list {
		margin: 0 0 20px;
		gap: 20px 10px;
	}

	.products-list li {
		width: calc((100% - 10px ) / 2);
	}

	/*リスト（リンクエリア）*/
	.products-list li a {
		width: 100%;
        color: #333;
        box-shadow: 0px 0px 5px rgba(0,0,0,0.16);
        padding: 0;
	}

	.products-list li a .thumb{
		width: 100%;
		/*height: calc(((100vw - 10px) / 2) × 0.93);*/
		
		height: 140px;
	}
	.products-list li a .txt-wrap{
		padding: 10px;
        text-align: left;
        margin: 0;
	}
	.products-list li a .products-cate{
		font-size: 1.2rem;
        line-height: 1.5;
  		margin: 0 5px 2px 0;
	}
	.products-list li a .products-title{
		line-height: 1.5;
	}
	
}


/* -----------------------------------------------------------
	分野導線　category-list
-------------------------------------------------------------- */
.category-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.category-list li{
	width: 284px;
	height: 100px;
	border-radius: 10px;
	box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
}
/*------ ふわっと　アニメーション ------*/
.category-list li.fadeUp {
    animation-name:fadeUpAnime;
    animation-duration: 1.5s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.category-list a{
	width: 100%;
	background-color: #fff;
	border-radius: 10px;
	display: flex;
}
.category-list li .img{
	flex-shrink: 0;
	border-radius: 10px 0 0 10px;
	overflow: hidden;
}
.category-list li .txt-area{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.category-list .list-ttl{
	font-size: 2.0rem;
	font-weight: 600;
}
.category-list .arrow{
	display: block;
	width: 26px;
	height: 5px;
	position: absolute;
	right: 10px;
	bottom: 10px;
	transition: 0.5s;
	background: url("../img/arrow-g-small.svg") no-repeat center / contain;
}
.category-list a:hover .arrow{
	right: 5px;
}


@media screen and (max-width: 768px){
    .category-list {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 20px;
	}
	.category-list li{
		width: calc((100% - 20px)/2);
		height: auto;
		border-radius: 10px;
		box-shadow: none;
	}	
		/*------ ふわっと　アニメーション ------*/
	.product-area .category-wrap .category-list li.fadeUp {
		animation-name:fadeUpAnime;
		animation-duration: 1.5s;
		animation-fill-mode:forwards;
		opacity: 0;
	}

	@keyframes fadeUpAnime{
		from {
			opacity: 0;
			transform: translateY(100px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	.category-list a{
		width: 100%;
		background-color: #fff;
		border-radius: 10px;
		flex-direction: column;
	}
	.category-list li .img{
		width: 100%;
		height: 122px;
		object-position: center;
		border-radius: 10px;
		overflow: hidden;
	}
	.category-list li .img img{
		width: 100%;
		height: 100%;
	}
	.category-list li .txt-area{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.category-list .list-ttl{
		font-size: 1.7rem;
		padding: 3px 0 5px;
		text-align: center;
	}
	.category-list .arrow{
		display: none;
	}

}


/* -----------------------------------------------------------
    採用共通 menu-box
-------------------------------------------------------------- */
#recruit .recruit-nav-wrap{
	background-color: var(--recruit-main);
	padding: 5px 0;
	position: relative;
	z-index: 500;
}
#recruit #menu-box.is-fixed .recruit-nav-wrap{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 500;
}
#recruit .recruit-nav-wrap ul{
	width: 1300px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	gap: 0 10px;
}
#recruit .recruit-nav-wrap ul li{
	width: 177px;
	height: 70px;
}
#recruit .recruit-nav-wrap ul li a{
	width: 177px;
	height: 70px;
	color: #fff;
	background-color: var(--recruit-main);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.8rem;
	font-weight: 500;
	border-radius: 10px;
}
#recruit .recruit-nav-wrap ul li.entry a{
	/*背景の色と形状*/
    /*background: linear-gradient( 270deg, #E54A5A 0%, #C13B9D 50%, #E54A5A 100%);*/
	/*background: linear-gradient(270deg, #F8A13D 0%, #F87C3D 50%, #F8A13D 100%);*/
	
	background: linear-gradient(270deg, #F8A13D 0%, #ff4b00 50%, #ff4b00 100%);
    background-position: 1% 50%;
    background-size: 200% auto;
    /*アニメーションの指定*/
    transition: all 0.3s ease-out;
}
#recruit .recruit-nav-wrap ul li.entry a::before{
    display: inline-block;
    content: "\f2bd";
    font-weight: 700;
    font-family: "Font Awesome 5 Free";
    padding: 0 5px 0 0;
    font-size: 2.2rem;
}
#recruit .recruit-nav-wrap ul li a:hover{
	color: var(--recruit-main);
	background-color: #fff;
	opacity: 1;
}
#recruit .recruit-nav-wrap ul li.entry a:hover{
	background-position: 99% 50%;
	color: #fff;
	opacity: 1;
}


@media screen and (max-width: 768px){
	
	#recruit .recruit-nav-wrap{
		background-color: var(--recruit-main);
		padding: 0;
	}
	#recruit .recruit-nav-wrap .nav-ttl{
		width: 100%;
		box-shadow: 0 3px 11px -2px rgba(0,0,0,0.1);
		color: #fff;
		padding: 17px 20px;
		display: block;
		cursor: pointer;
		font-weight: bold;
		font-size: 2rem;
		position: relative;
		line-height: 1;
	}
	#recruit .recruit-nav-wrap .nav-ttl.open{
		box-shadow: none;
	}
	#recruit .recruit-nav-wrap .nav-ttl::after{
		content: "";
		display: block;
		width: 23px;
		height: 23px;
		background: url("../img/icon-plus.svg") no-repeat center / cover;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		right: 20px;
	}
	#recruit  .recruit-nav-wrap .nav-ttl.open::after{
		content: "";
		display: block;
		width: 23px;
		height: 3px;
		background: url("../img/icon-minus.svg") no-repeat center / cover;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		right: 20px;
	}
	#recruit .recruit-nav-wrap .nav-list{
		display: none;
	}
	#recruit .recruit-nav-wrap  ul{
		width: 100%;
		flex-direction: column;
		gap: 3px 0;
		padding: 0 20px 20px;
	}
	#recruit .recruit-nav-wrap ul li{
		width: 100%;
		height: auto;
	}
	#recruit .recruit-nav-wrap ul li a{
		width: auto;
		height: auto;
		display: block;
		font-size: 1.7rem;
		border-radius: 0;
		padding: 15px;
		color: #333;
		background-color: #fff;
		border-radius: 10px;
		margin: 0 0 3px;
		font-weight: 500;
	}
	#recruit .recruit-nav-wrap ul li.entry a{
		/*背景の色と形状*/
		/*background: linear-gradient( 270deg, #C13B9D 0%, #E54A5A 100%);*/
		background: background: linear-gradient(270deg, #F8A13D 0%, #F87C3D 50%, #F8A13D 100%);
		background-position: 1% 50%;
		background-size: 200% auto;
		/*アニメーションの指定*/
		transition: all 0.3s ease-out;
		color: #fff;
		margin: 0;
	}
	#recruit .recruit-nav-wrap ul li a:hover{
		color: var(--recruit-main);
		background-color: #fff;
		opacity: 1;
	}
	#recruit .recruit-nav-wrap ul li.entry a:hover{
		background-position: 99% 50%;
		color: #fff;
		opacity: 1;
	}
}