@charset "utf-8";
/* CSS Document */
/* ------------------------------------------- */
/* = お問い合わせ
/* ------------------------------------------- */
.must{
	background:#f39128;
	color:#fff;
	display:inline-block;
	padding:0.3em 0.8em;
	font-size:70%;
	line-height:140%;
	position: relative;
	top:-0.1em;
	font-weight:normal;
	margin-left:0.5em;
}
.form_block dl{
	border-bottom:1px solid #dcdcdc;
}
.form_block dl:first-of-type{
	border-top:1px solid #dcdcdc;
}
.form_block dt{
	font-weight:var(--semi-bold);
}
@media print, screen and ( min-width : 896px ) {
	.form_block dl{
		display: flex;
		align-items: center;
	}
	.form_block dt{
		width:35%;
		padding:2em 3em;
	}
	.form_block dd{
		width:65%;
		padding:2em 0em;
	}
}
@media only screen and ( max-width : 896px ) {
	.form_block{
		margin-left:-6%;
		margin-right:-6%;
	}
	.form_block dt,
	.form_block dd{
		padding-left:2.5em;
		padding-right:2.5em;
	}
	.form_block dt{
		padding-top:1.5em;
	}
	.form_block dd{
		padding-top:0.5em;
		padding-bottom:1.5em;
	}
}
.form1 dd p{
	font-size:90%;
	margin-bottom:0;
}
.submit_block{
	text-align:center;
	padding-top:3em;
}
.submit_block input,
.submit_block button{
	padding:1.3em 3em;
	margin:1em !important;
}
/* ------------------------------------------- */
/* = トップページ
/* ------------------------------------------- */
/* ------------------------------------------- */
/* = ギャラリー
/* ------------------------------------------- */
body.home #wrap section.top_mainimg{
	padding:0;
}
@media only screen and ( max-width : 896px ) {
	.mainimg_pc_only{
		display:none !important;
	}
}
@media print, screen and ( min-width : 896px ) {
	.mainimg_sp_only{
		display:none !important;
	}
}
/* ------------------------------------------- */
/* = はじめに透明に
/* ------------------------------------------- */
.top_facilities_gallery,
.top_gallery{
	opacity: 0;
	position: relative;
	overflow:hidden;
	-webkit-transition: opacity .6s linear;
	transition: opacity .6s linear;
}
.top_facilities_gallery.slick-initialized,
.top_gallery.slick-initialized{
	opacity: 1;
}
/* ------------------------------------------- */
/* = メインビジュアル
/* ------------------------------------------- */
.top_mainimg_bg{
	z-index:-1;
}
.top_mainimg_gallery {
	background-color: #fff;
	position: absolute;
	top: 0%;
	right: 0%;
	width: 50%; 
	clip-path: circle(65.6% at 66% 31%);
}
.top_gallery {
	width: 100%;
	height: 90%;
	z-index: 2;
}
.top_gallery li {
	width: 100%;
}
.top_gallery li img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 画像が欠けないようにしつつ、要素を埋める */
}
@media only screen and ( max-width :896px ) {
	.top_mainimg_gallery{
		position: absolute;
		width:100%;
		clip-path: circle(57.3% at 64% 12%);
	}
}
.top_mainimg .scroll_down{
	position: absolute;
	bottom: 200px;
	right: 5%;
	color:#fff;
	z-index:3;
	-webkit-transition: opacity .6s linear;
	transition: opacity .6s linear;
	font-size:110%;
}
.top_mainimg .scroll_down::before {
	animation: scroll 2s infinite;
	background-color: #fff;
	bottom: -115px;
	content: "";
	height: 100px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	width: 1px;
}
@keyframes scroll {
	0% {
		transform: scale(1, 0);
		transform-origin: 0 0;
	}
	50% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}
	51% {
		transform: scale(1, 1);
		transform-origin: 0 100%;
	}
	100% {
		transform: scale(1, 0);
		transform-origin: 0 100%;
	}
}
.scrollstart2 .scroll_down{
	opacity: 0;

}

/* ------------------------------------------- */
/* = 詳しく見る
/* ------------------------------------------- */
span.more{
	display:block;
	text-align:right;
}
body.home #wrap section.top_news{
	padding:4em 0;
}
body.home h2.title .eng{
	margin-bottom:0.1em;
}
/* ------------------------------------------- */
/* = お知らせ
/* ------------------------------------------- */
@media print, screen and ( min-width : 1000px ) {
	.top_news{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.top_news h2{
		flex-grow: 0;
		text-align:right;
	}
	.news_list{
		flex-basis: 0;
		flex-grow: 1;
		padding:0 3% 0 6%;
	}
	.top_news .more{
		width:240px;
	}
}
@media only screen and ( max-width :1000px ) {
	.top_news h2.title{
		margin-bottom:0em;
		text-align:center;
	}
	.top_news h2 .eng{
		text-align:center;
	}
	.top_news .more{
		padding-top:2em;
	}
}
.news_list li{
	border-bottom:1px solid #ccc;
}
.news_list li:last-child{
	border-bottom:none;
}
.news_list a{
	color:currentColor;
	padding:1em 0em;
}
.news_list .link_block:hover,
.news_list .link_block:hover:after{
	opacity: 1;
}
.news_days{
	color:#999999;
	font-size:80%;
}
.news_list .news_title{
	line-height:var(--base_line_height);
}
@media print, screen and ( min-width : 896px ) {
	.news_list a.link_block {
		display: flex;
		align-items: flex-start;
	}
	.news_list a.link_block:hover{
		color:#555;
	}
	.news_list .news_days {
		width: 9.5em;
		flex-shrink: 0;
		padding-left:0.5em;
	}
	.news_list .news_title {
		flex-grow: 1; 
	}
}
@media only screen and ( max-width :1000px ) {
	.news_list .news_days,
	.news_list .news_title {
		display:block;
	}
}
/* ------------------------------------------- */
/* = 設備紹介　製品紹介
/* ------------------------------------------- */
.top_facilities h2,
.top_product h2{
	text-align:center;
}
.top_facilities h2 .eng_title .eng,
.top_product h2 .eng_title .eng{
	text-align:center;
}
/* ------------------------------------------- */
/* = 設備紹介　背景
/* ------------------------------------------- */
.top_facilities_bg:after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0%;
	bottom: 0em;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	z-index:-1;
	background: #fcfcfc;
}
.top_facilities_gallery__block{
	margin-bottom:2em;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}
/* ------------------------------------------- */
/* = コンテンツアニメーション
/* ------------------------------------------- */
body.home .wrap h2,
body.home .wrap p,
body.home .wrap a{
	z-index:3;
}

.top_facilities:before,
.top_product:before{
	-webkit-transition: all 1s .0s ease;
	transition: all 1s .0s ease;
}

.top_facilities:after,
.top_img_right .top_img_text:before{
	-webkit-transition: all 1s .5s ease;
	transition: all 1s .5s ease;
}
.top_facilities:before{
	content: "";
	display: block;
	position: absolute;
	top: 2.5em;
	left: 0;
	height:1px;
	z-index:0;
	width: 0vw;
	margin-left: calc(50% - 50vw);
	background: var(--primary-color);
}
.top_facilities.active:before{
	width: 100vw;
}
.top_facilities:after{
	content: "";
	display: block;
	position: absolute;
	top: 2.5em;
	right: 5%;
	height: 0;
	width: 1px;
	z-index:0;
	background: var(--primary-color);
}
.top_facilities.active:after{
	height: 100%;
}
.top_product:before{
	content: "";
	display: block;
	position: absolute;
	top: 2.5em;
	left: 0;
	height:1px;
	z-index:0;
	width: 0vw;
	margin-left: calc(50% - 50vw);
	background: var(--primary-color);
}
.top_product.active:before{
	width: 100vw;
}
/* ------------------------------------------- */
/* = リストに使えるFLEX
/* ------------------------------------------- */
.site_list{
	display: flex;
	flex-wrap: wrap;
}
.site_list a,
.site_list .inner{
	height:100%;
}
.site_list .inner{
	padding:2px;
}
/* ------------------------------------------- */
/* = ブログ
/* ------------------------------------------- */
@media print, screen and ( min-width : 896px ) {
	.blog_list li{
		width:50%;
	}
	.blog_list li:nth-of-type(2n) .inner:before{
		display:none;
	}
	.blog_list li:nth-child(n+3):after{
		display:none;
	}
}
@media only screen and ( max-width :896px ) {
	.blog_list li{
		width:100%;
	}
	.blog_list li:nth-child(n+2):after{
		display:none;
	}
}
.blog_list > li:after{
	content: "";
	display: block;
	position: absolute;
	top:0;
	left:5px;
	right:5px;
	height: 1px;
	z-index:2;
	background: #ccc;
}
.blog_list li:before{
	content: "";
	display: block;
	position: absolute;
	bottom:0;
	left:5px;
	right:5px;
	height: 1px;
	z-index:2;
	background: #ccc;
}
.blog_list li .inner:before{
	content: "";
	display: block;
	position: absolute;
	top:5px;
	left:0px;
	bottom:5px;
	width: 1px;
	z-index:2;
	background: #ccc;
}
.blog_list li .inner:after{
	content: "";
	display: block;
	position: absolute;
	top:5px;
	right:0px;
	bottom:5px;
	width: 1px;
	z-index:2;
	background: #ccc;
}
.blog_list .link_block,
.product_list  .link_block{
	color:#000;
	overflow:hidden;
}
.blog_list li .link_block{
	padding:3em;
}
.blog_list li .link_block:hover{
	background: #fcfcfc;
	opacity: 1 !important;
}
.blog_list img{
	margin-bottom:1.5em;
	width:100%;
}
.blog_list .entry_days{
	margin-bottom:1em;
	display:block;
	color: var(--primary-color);
	font-size:90%;
}
.blog_list h2,
.blog_list h3{
	margin-bottom:1em;
	padding:0em 0em 1em 0em;
	font-size:110%;
	line-height:var(--base_line_height);
	text-align:left;
	color:#000;
	font-weight:var(--semi-bold);
}
.blog_list h3{
	border-bottom:1px solid #ccc;
}
.blog_list h3:before{
	display:none;
}
.blog_list p{
	padding-bottom:2em;
	font-size:90%;
}
.blog_list .read_more{
	position: absolute;
	bottom: 2px;
	right: 2px;
	color:#fff;
	text-align:center;
	padding:1em;
	z-index:2;
}
.blog_list .read_more:after{
	content: "";
	display: block;
	position: absolute;
	bottom: -7em;
	right: -4em;
	width:12em;
	height:12em;
	z-index:-1;
	border-radius:  50%;
	color:#fff;
	background: var(--primary-color);
	text-align:center;
}
@media print, screen and ( min-width : 896px ) {
	.blog_list li .link_block:hover .read_more:after{
		animation: kakudai 0.7s;
		animation-fill-mode: forwards;
	}
}
@keyframes kakudai {
	0%   { transform: scale(0.8, 0.8) translate(0%, 0%); }
	50%  { transform: scale(1.5, 1.5) translate(0%, 0%); }
	60%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
	80%  { transform: scale(1.1, 1.1) translate(0%, 0%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); } 
}



/* ------------------------------------------- */
/* = ページ
/* ------------------------------------------- */
/* ------------------------------------------- */
/* = History会社沿革
/* ------------------------------------------- */
.enkaku_dl:after{
	content: "";
	display: block;
	background:linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(204, 204, 204, 1) 5%, rgba(204, 204, 204, 1) 95%, rgba(255, 255, 255, 1) 100%);
	width:1px;
	position: absolute;
	top: -4em;
	left: 50%;
	bottom: -4em;
	margin-left:-1px;
	z-index:-1;
}
@media only screen and ( max-width :700px ) {
	.enkaku_dl:after{
		position: absolute;
		top: -3em;
		left: 0%;
	}
}
.enkaku_dl dt{
	color: var(--primary-color);
	font-weight:var(--semi-bold);
	letter-spacing:0.1em;
	font-family: "Outfit", sans-serif;
}
.enkaku_dl dt::after{
	content: "";
	width:20px;
	height:20px;
	display: block;
	position: absolute;
	top: 50%;
	margin-top:-9px;
	border-radius:  50%;
	background: var(--primary-color);
	border:5px solid #fcfcfc;
}
.enkaku_dl dt::before{
	content: "";
	display: block;
	background:#ccc;
	width:30%;
	height:1px;
	position: absolute;
	top: 50%;
	right: -15%;
	z-index:-1;
}
@media only screen and ( max-width :700px ) {
	.enkaku_dl dt::before{
		position: absolute;
		top: 50%;
		left: 0%;
		width:3em;
	}
}
.enkaku_dl dd,
.enkaku_dl dt{
	line-height:var(--base_line_height_big);
}

@media print, screen and ( min-width : 700px ) {
	.enkaku_dl{
		display:flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	.enkaku_dl dt,
	.enkaku_dl dd{
		flex-grow: 1;
		flex-basis: 50%;
		padding:1.5em 0;
	}
	.enkaku_dl dt{
		text-align:right;
		padding-right:8%;
		font-size:110%;
	}
	.enkaku_dl dd{
		padding-left:8%;
	}
	.enkaku_dl dt::after{
		position: absolute;
		top: 50%;
		right: -9px;
	}
}
@media only screen and ( max-width :700px ) {
	.enkaku_dl{
		margin:0 10%;
	}
	.enkaku_dl dt::after{
		position: absolute;
		top: 50%;
		left: -11px;
	}
	.enkaku_dl dt,
	.enkaku_dl dd{
		padding-left:3em;
	}
	.enkaku_dl dd{
		padding-bottom:3em;
	}
	.enkaku_dl dd:last-child{
		padding-bottom:0em;
	}
}
/* ------------------------------------------- */
/* = Mapアクセスマップ
/* ------------------------------------------- */
@media print, screen and ( min-width : 896px ) {
	.map_list{
		display: flex;
		gap:5%;
	}
	.map_list li{
		width:50%;
	}
}
.map_list{
	font-size:90%;
}
.map_list p{
	line-height:var(--base_line_height_big);
}
.map_list iframe{
	width:100%;
	height:300px;
}

/* ------------------------------------------- */
/* = privacy policyプライバシーポリシー
/* ------------------------------------------- */
.privacy_policy{
	font-size:90%;
	line-height:var(--base_line_height);
}
.privacy_policy p{
	line-height:var(--base_line_height);
}
.privacy_policy h4{
	margin-bottom:0.8em;
	font-size:110%;
}
.privacy_policy h3{
	padding:0.5em 0 !important;
	margin-bottom:0.5em !important;
	border-bottom:1px solid #0762b3;
}
.privacy_policy h3:before{
	display:none;
}
.privacy_policy ul{
	margin-left:3em;
	margin-top:-1em;
}
.privacy_policy .indent1em{
	padding-left:1.5em;
	text-indent:-1.5em;
	padding-bottom:0.5em;
}

/* ------------------------------------------- */
/* = Product製品紹介
/* ------------------------------------------- */
/* -------ページリンクリスト------------------------------------ */
.page_link_list{
	border-left:1px solid #aaa;
	border-top:1px solid #aaa;
}
.page_link_list li{
	border-right:1px solid #aaa;
	border-bottom:1px solid #aaa;
}
.page_link_list li a{
	padding:0.7em 2.5em 0.7em 0.5em;
	font-size:90%;
	line-height:150%;
	color:#000;
}
.page_link_list li a:after{
	content: "";
	display:inline-block;
	background:url(images/common/page_link_list.png) 50% 50% no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	width:1em;
	height:1em;
	position: absolute;
	top: 50%;
	right: 1em;
	margin-top:-0.5em;
}
.page_link_list li a:hover{
	background:#ccc;
	color:#000;
}
@media print, screen and ( min-width : 1300px ) {
	.page_link_list li{
		width:25%;
	}
}
@media print, screen and ( max-width :1300px ) and ( min-width : 896px ) {
	.page_link_list li{
		width:33%;
	}
}
@media only screen and ( max-width :896px ) {
	.page_link_list li{
		width:50%;
	}
}
/* -------各セクション------------------------------------ */
/* 工場名 */
.koujyou{
	font-style:italic;
	color:#333;
}
/* -------product_block----------------------------------- */
/* ちょっと大きく */
@media print, screen and ( min-width : 896px ) {
	body.slug-product #wrap{
		padding-left:2%;
		padding-right:2%;
	}
	body.slug-product #wrap .width100 .inner_block{
		padding-left:2%;
		padding-right:2%;
	}
}
@media only screen and ( max-width :896px ) {
	.product_section .title .eng{
		font-size:250%;
		line-height:110%;
		text-align:left;
	}
}
.product_block{
	padding:80px 0;
}
section.product_section{
	padding-bottom:0 !important;
}
.product_section h2{
	margin-bottom:0;
}
.product_side{
	font-size:95%;
	line-height:160%;
}
.product_side h3{
	font-size:210%;
	padding:0.5em 0;
	display:block;
	letter-spacing:0em;
	font-weight:var(--semi-bold);
	margin-bottom:0em;
}
.product_side h3:before{
	display:none;
}
.product_side h4{
	padding-bottom:1em;
	font-weight:var(--semi-bold);
}
.product_side p{
	line-height:200%;
	font-size:100%;
}
.product_side h3,
.product_info{
	width:100%;
	line-height:var(--base_line_height);
}
.product_info{
	background: var(--primary-color);
	padding:2em;
	color:#fff;
}
.product_info p{;
	font-size:80%;
	line-height:160%;
}


@media print, screen and ( min-width : 950px ) {
	.product_block{
		display: flex;
		justify-content: space-between;
	}
	.product_side{
		width:35%;
		flex-grow:1;
		flex-shrink: 0;
		margin-right:60px;
	}
	.product_main{
		flex-grow:0;
	}
	.product_side h3,
	.product_side p{
		margin-left:10px;
	}
	.product_side .product_info p{
		margin-left:0px;
	}
}
@media only screen and ( max-width :950px ) {
	.product_side{
		width:100%;
		margin-bottom:50px;
	}
	.product_side h3{
		padding-top:0;
		font-size:180%;
	}
}

/* ------------------------------------------- */
/* = “ワンストップ・ソリューション”で応える鋼板加工の総合メーカー
/* ------------------------------------------- */
/* アイコンメニュー--------------------------------------------- */
.total_service_of_steel_menu{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 10px;
}
.total_service_of_steel_menu li{
	font-weight:var(--semi-bold);
	font-size:110%;
	background:#0762b3;
	color:#fff;
}
.total_service_of_steel_menu li img{
	margin:0.5em;
	vertical-align: middle;
}
@media only screen and  ( max-width : 896px ) {
	.total_service_of_steel_menu{
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}
	.total_service_of_steel_menu li{
		font-size:90%;
	}
	.total_service_of_steel_menu li img{
		transform: scale(0.8);
	}
}
.total_service_of_steel_sec h2.title{
	margin-bottom:0.5em;
}
.total_service_of_steel .slick-track {
	display: flex;
}
.total_service_of_steel .slick-slide {
	height: auto !important;
}
.total_service_of_steel{
	margin-top:-20%;
	padding-left:50px;
}
@media only screen and  ( max-width : 750px ) {
	.total_service_of_steel{
		padding-left:30px;
		padding-right:30px;
	}
}
.total_service_of_steel:after{
	content: "";
	height:100%;
	width:20%;
	position: absolute;
	top: 0;
	right:0;
	background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,1));
	z-index:2;
}
@media only screen and  ( max-width : 750px ) {
	.total_service_of_steel:after{
		display:none;
	}
}
.total_service_of_steel li.block{
	padding:30px;
	background:#f5f5f5;
	font-size:80%;
	margin:0.5em;
}
@media only screen and  ( max-width : 896px ) {
	.total_service_of_steel li.block{
		font-size:90%;
	}
}
.total_service_of_steel h3{
	padding:0;
	color:#000;
}
.total_service_of_steel h3:before{
	display:none;
}
.total_service_of_steel p{
	line-height:180%;
}
/* アイコン--------------------------------------------- */
.icon_maru,
.icon_mizu,
.icon_kou{
	color:#fff;
	display:inline-block;
	font-size:70%;
	line-height:1.8em;
	width:1.9em;
	text-align:center;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	margin-right:0.2em;
	top:-0.1em;
}
.icon_maru{
	background:var(--primary-color);
}
.icon_mizu{
	background:#00a0e8;
}
.icon_kou{
	background:#a98667;
}
/* --------------------------------------------- */
.ph1 h3,
.ph2 h3,
.ph3 h3,
.ph4 h3,
.ph5 h3,
.ph6 h3{
	padding-right:30px;

}
.ph1:after,
.ph2:after,
.ph3:after,
.ph4:after,
.ph5:after,
.ph6:after{
	content: "";
	display:block;
	width:50px;
	height:32px;
	position: absolute;
	top: 2em;
	right:0;
}
@media only screen and  ( max-width : 896px ) {
	.ph1:after,
	.ph2:after,
	.ph3:after,
	.ph4:after,
	.ph5:after,
	.ph6:after{
		position: absolute;
		top: 1.8em;
		right:0;
		width:40px;
	}
}
.ph1:after{
	background: url(images/about/ph1.png) 50% 50% no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto;
}
.ph2:after{
	background: url(images/about/ph2.png) 50% 50% no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto;
}
.ph3:after{
	background: url(images/about/ph3.png) 50% 50% no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto;
}
.ph4:after{
	background: url(images/about/ph4.png) 50% 50% no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto;
}
.ph5:after{
	background: url(images/about/ph5.png) 50% 50% no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto;
}
.ph6:after{
	background: url(images/about/ph6.png) 50% 50% no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto;
}
/* --------------------------------------------- */
.total_service_of_steel .slide-arrow{
	position: absolute;
	top: 50%;
	width:50px;
	height:50px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	background: url(images/about/slide-arrow.png) 50% 50% no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	z-index:3;
	padding:14px 12px;
	margin-top:-2em;
	cursor: pointer;
	border:1px solid #fff;
}
.total_service_of_steel .prev-arrow{
	position: absolute;
	top: 50%;
	left:20px;
 	transform: rotate(180deg);
}
.total_service_of_steel .next-arrow{
	position: absolute;
	top: 50%;
	right:20px;
}
@media only screen and  ( max-width : 750px ) {
	.total_service_of_steel .prev-arrow{
		position: absolute;
		left:5px;
		transform: scale(0.8) rotate(180deg);
	}
	.total_service_of_steel .next-arrow{
		position: absolute;
		right:5px;
		transform: scale(0.8);
	}
}
/* ------------------------------------------- */
/* = New Scene Of　Human & Metal　Founding Spirit
/* ------------------------------------------- */
section.human_metal{
	color:#fff;
	background:#000 url(images/top/human_metal_shadow.jpg) 50% 50% no-repeat;
	-moz-background-size:cover;
	background-size:cover;
}
.human_metal h3{
	color:#fff;
	padding:0;
	font-weight:var(--semi-bold);
	margin-bottom:1em;
}
.human_metal h3:before{
	display:none;
}
/* ------まとめてスタイル------------------------------- */
body.home #wrap section.founding_sprit,
body.not-home #wrap section.founding_sprit{
	color:#fff;
	padding:0 !important;
}
.founding_sprit_title{
	background:#000 url(images/about/founding-sprit_bg1.jpg) 50% 50% no-repeat;
	-moz-background-size:cover;
	background-size:cover;
}
.founding_sprit_text{
	background:#000 url(images/about/founding-sprit_bg2.jpg) 50% 50% no-repeat;
	-moz-background-size:cover;
	background-size:cover;
}
.human_metal h2,
.founding_sprit h2{
	margin-bottom:0em;
}
.founding_sprit h2{
	text-shadow: 0 0 20px #000, 0 0 10px #000, 0 0 10px #000, 0 0 10px #000;
}
.human_metal h2{
	text-shadow: 0 0 20px #012a68, 0 0 10px #012a68, 0 0 10px #012a68, 0 0 10px #012a68, 0 0 10px #012a68;
}

.human_metal h2,
.human_metal h2 .eng,
.founding_sprit h2,
.founding_sprit h2 .eng{
	color:#fff;
}
.founding_sprit h2 img{
	margin-bottom:0.3em;
}
/* ---title---- */
.founding_sprit h2,
.human_metal h2{
	line-height:var(--base_line_height);
}
.founding_sprit h2 .title_jp,
.human_metal h2 .title_jp{
	padding-top:1em;
	line-height:200%;
	font-weight:700;
}
.founding_sprit,
.human_metal{
	font-size:90%;
	line-height:var(--base_line_height);
}
.founding_sprit_text_inner,
.human_metal_text_inner{
	background-color: rgba(0,0,0,0.7);
	padding:3em;
	font-weight:500;
}
@media print, screen and ( min-width : 1200px ) {
	.human_metal,
	.founding_sprit{
		display:flex;
		justify-content: space-around;
	}
	.founding_sprit_title{
		width:45%;
		padding:8%;
		padding-right:3%;
	}
	.founding_sprit_text{
		width:55%;
		padding:5%;
	}
	.human_metal_title{
		width:60%;
		padding-left:8%;
	}
	.human_metal_text{
		width:40%;
		padding-right:5%;
		margin-top:20%;
	}
}
@media only screen and  ( max-width : 1200px ) {
	section.human_metal{
		padding:0;
	}
	.human_metal_text,
	.founding_sprit_text{
		padding:4em 5%;
	}
	.human_metal_title,
	.founding_sprit_title{
		padding:4em;
	}
	.human_metal_title h2.title,
	.human_metal_title h2.title .eng,
	.founding_sprit h2.title,
	.founding_sprit h2.title .eng{
		text-align:center;
	}
}
/* ------------------------------------------- */
/* = 製品紹介バナー
/* ------------------------------------------- */
.top_product_banner{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap:1px;
}
@media only screen and  ( max-width : 1280px ) {
	.top_product_banner{
		grid-template-columns: repeat(2, 1fr);
	}
}
@media only screen and  ( max-width : 750px ) {
	.top_product_banner{
		grid-template-columns: repeat(1, 1fr);
	}
}
.top_product_banner li{
	padding-top: 100%;
	width: 100%;
	overflow:hidden;
}
.top_product_banner a{
	background-color: rgba(0,0,0,0.3);
	color:#fff;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
	padding:30px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	transition: all .3s linear;
}
.top_product_banner a:hover{
	background-color: rgba(0,0,0,0.5);
}

.top_product_banner a:hover{
	opacity: 1;
	color:#fff;
}
li.top_product_banner01:before,
li.top_product_banner02:before,
li.top_product_banner03:before,
li.top_product_banner04:before,
li.top_product_banner05:before,
li.top_product_banner06:before{
	content: "";
	display:block;
	position: absolute;
	top: 0;
	left: 0;
	right:0;
	bottom:0;
	width: 100%;
	height: 100%;
	-moz-background-size:cover;
	background-size:cover;
	transition: transform 0.3s ease;
	filter: blur(0px);
}
/* マウスオーバー時のスタイル（拡大） */
li.top_product_banner01:hover:before,
li.top_product_banner02:hover:before,
li.top_product_banner03:hover:before,
li.top_product_banner04:hover:before,
li.top_product_banner05:hover:before,
li.top_product_banner06:hover:before{
	transform: scale(1.2);
	filter: blur(2px);
}
li.top_product_banner01:before{
	background:url(images/top/products/top_product_banner01.jpg) 50% 50% no-repeat;
}
li.top_product_banner02:before{
	background:url(images/top/products/top_product_banner02.jpg) 50% 50% no-repeat;
}
li.top_product_banner03:before{
	background:url(images/top/products/top_product_banner03.jpg) 50% 50% no-repeat;
}
li.top_product_banner04:before{
	background:url(images/top/products/top_product_banner04.jpg) 50% 50% no-repeat;
}
li.top_product_banner05:before{
	background:url(images/top/products/top_product_banner05.jpg) 50% 50% no-repeat;
}
li.top_product_banner06:before{
	background:url(images/top/products/top_product_banner06.jpg) 50% 50% no-repeat;
}

/* テキストのクラス------------------------------------- */
.top_product_banner h3{
	padding:0;
	font-size:200%;
	color:#fff;
	margin-bottom:0em;
	font-weight:var(--bold);
	letter-spacing:0em;
}
.top_product_banner h3{
	color:#fff;
	letter-spacing:0.05em;
}
.top_product_banner02 h3{
	letter-spacing:0.01em;
}
.top_product_banner h3:before{
	display:none;
}
.top_product_banner h3 span{
	display:inline-block;
	padding:15px 0 15px 0;
	margin-bottom:15px;
}
.top_product_banner h3 span:before,
.top_product_banner h3 span:after{
	content: "";
	display:block;
	position: absolute;
	top:calc(100% - 9px);
	left:-30px;
	background:#e82126;
	height:4px;
	width:calc(100% + 60px);
}
.top_product_banner h3 span:after{
	content: "";
	display:block;
	position: absolute;
	top:100%;
	background:#009d4f;
}
.top_product_banner h3:before{
	display:none;
}
.top_product_banner p{
	font-size:85%;
	line-height:var(--base_line_height);
}
.tpb_icon_block{
	display: flex;

}
.tpb_icon_block span{
	font-size:60%;
	line-height:130%;
	flex-grow: 1;
	font-weight:800;
}

.tpb_icon_block span span{
	font-size:150%;
	line-height:130%;
}
.tpb_icon_block img{
	margin-right:15px;
}