@charset "utf-8";
@import url("../../assets/css/secondary.css");
@import url("../../assets/plugin/luminous/css/luminous-basic.min.css");
@import url("../../assets/css/popup.css");
@import url("../../assets/css/ttl.css");
@import url("../../assets/css/sub_ttl.css");
@import url("../../assets/css/image.css");
@import url("../../assets/css/bg_caption.css");
@import url("../../assets/css/contact_info.css");
@import url("../../assets/css/third.css");
@import url("../../assets/css/move.css");
@import url("../../assets/css/print.css");

.bus_menu{
/*	background-color: var(--main-color3);  */
	background-color: white;
}
a.active {
  background-color: #28bfe7;
  color: #fff;
}

/*上書き*/
@media screen and (max-width: 380px) {
.side-nav-list li{
	width: 100%;
}
}
article {
	overflow-x: hidden;
	overflow-y: clip;
  /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
  -ms-overflow-style: none;
  /*Firefoxへの対応*/
  scrollbar-width: none;
}
#first_sec{
	background-image:url("../images/page_ttl.jpg");
	background-size: 150% auto;
}
.bg_caption::before{
	content: "Business";
}
.bg_color>.flex_box{
	display: flex;
  	flex-direction: column-reverse;
	height: 100%
}
.bg_color>.flex_box>.txt_box{
	width: 100%;
}
.bg_color>.flex_box figure{
	margin-bottom: 1.5em;
	position: relative;
	width: 100%;
	height: 13em;
	right: 0;
}
.bg_color>.flex_box figure img{
	width: 100vw;
	height: 100%;
	border-radius: 1em 0 0 1em;
	object-fit: cover;
	object-position: left
}
@media screen and (min-width: 480px) {
.bg_color>.flex_box figure{
	height: 17em;
}	
}
@media screen and (min-width: 580px) {
.bg_color>.flex_box figure{
	height: 20em;
}
}
@media screen and (min-width: 930px) {
.bg_color>.flex_box{
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	height: 100%
}
.bg_color>.flex_box>.txt_box{
	width: 55%;
}
.bg_color>.flex_box figure{
	width: 40%;
	height: 21em;
}
.bg_color>.flex_box figure img{
	width: 60vw;
	height: 100%;
    border-radius: 1.5em 0 0 1.5em;
	object-fit: cover;
  object-position: top left;
}
}
@media screen and (min-width: 1024px) {
.bg_color>.flex_box figure{
	margin-bottom: 0
}
}
@media screen and (min-width: 1200px) {
.bg_color>.flex_box figure{
	height: 27em;
}
.bg_color>.flex_box figure img{
    border-radius: 2em 0 0 2em;
}
}
@media screen and (min-width: 1600px) {
.bg_color>.flex_box figure{
	height: 29em;
}
	}

/*精密板金・製缶・塗装*/
#precision{}
.bg_color .ttl_box .ttl{
	margin-bottom: 1em;
	padding-left: 3.2em;
	color: var(--main-color2);
	font-size: 1.2em;
	line-height: .9;
}
.bg_color .ttl_box .ttl span{
	margin-top: .3em;
	display: block;
}
.bg_color .ttl_box .ttl i {
	-webkit-text-stroke: 0.5px var(--main-color2);
	text-stroke: 0.5px var(--main-color2);
}
.br_first{
	display: block
}
.br_second{
	display: block
}
@media screen and (min-width: 380px) {
.bg_color .ttl_box .ttl{
	font-size: 1.4em;
}
}
@media screen and (min-width: 600px) {
.bg_color .ttl_box .ttl{
	padding-left: 2.8em;
	font-size: 1.8em;
}
.br_second{
	display: none
}
}
@media screen and (min-width: 768px) {
.bg_color .ttl_box .ttl{
	font-size: 2em;
}
}
@media screen and (min-width: 1024px) {
.bg_color .ttl_box .ttl{
	font-size: 2.4em;
}
}
@media screen and (min-width: 1200px) {
.bg_color .ttl_box .ttl{
	font-size: 2.6em;
}
}
@media print{
#precision .bg_color>.flex_box{
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
  	flex-direction:row
}
#precision .bg_color>.flex_box>.txt_box{
	width: 55% 
}
#precision .bg_color>.flex_box figure{
	width: 40%;
	height: 21em;
}
#precision .bg_color>.flex_box figure img{
	width: 60vw;
	height: 100%;
    border-radius: 1.5em 0 0 1.5em;
	object-fit: cover;
  object-position: top left;
}
 #precision .business_list_img {
    height: 18em !important
  }
}
.bg_color {
	padding: 2.5em 0 2em 1.5em;
	position: relative;
}
#precision .bg_color::after{
	content: "";
	width: 200%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	border-top-left-radius: 1em;
	z-index: -10;
	background: linear-gradient(to top, #FFF, #E3F3F3);
}
@media screen and (min-width: 380px) {
.bg_color {
	padding: 2.5em 0 3.5em 1.5em;
}
}
@media screen and (min-width: 600px) {
.bg_color {
	width: 100%;
	padding: 2.5em 0 3.5em 2em;
}
#precision .bg_color::after{
	border-top-left-radius: 2em;
}
}
@media screen and (min-width: 768px) {
.bg_color {
	padding: 3.5em 0 3.5em 3em;
}
}
@media screen and (min-width: 1200px) {
.bg_color {
	padding: 3.5em 0 3.5em 3.5em;
}
.bg_color::aftere{
	border-top-left-radius: 3em;
}
}
@media screen and (min-width: 1500px) {
 .bg_color {
	padding: 5em 0 3.5em 6em;
}
}
@media print{
@-moz-document url-prefix() {
 #precision .bg_color::after {
   content: "";
	width: 200%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	border-top-left-radius: 1em;
	z-index: -10;
	background: none
  }
}
}

/*上書き*/
#precision .ttl::before {
	width: 2.8em;
  	height: 4.3em;
	background:url("../images/business_ttl01.svg") center / 100% no-repeat
}
@media screen and (min-width: 600px) {
#precision .ttl::before {
	width: 2.2em;
 	 height: 3.4em;
}
#precision .ttl b{
	margin-left: 2em
}
}

#precision .ttl h2{
	font-size: .65em
}
#precision .ttl h2::before {
	background-color: var(--main-color2)
}
/*ページ内共通*/
#precision dl,#industrial dl{
	width: 100%;
	/*margin-top: 1em;*/
}
#precision dt,#industrial dt{
	margin-bottom: .5em;
	font-size: 1.2em;
	font-weight: bold
}
#precision dd,#industrial dd{
	font-size: 1em;
	line-height: 1.6
}
@media screen and (min-width: 480px) {
#precision dt,#industrial dt{
	font-size: 1.4em;
}
}
@media screen and (min-width: 930px) {
#precision dl,#industrial dl{
	margin-bottom: 1em
}
}
@media screen and (min-width: 1024px) {
#precision dl,#industrial dl{
	margin-bottom: 0
}
}
@media screen and (min-width: 1200px) {
#precision dt,#industrial dt{
	margin-bottom: 1em;
	font-size: 1.6em;
}
#precision dd,#industrial dd{
	font-size: 1.1em;
	line-height: 1.8
}
}
@media screen and (min-width: 1600px) {
#precision dt,#industrial dt{
	font-size: 1.8em;
}
#precision dd,#industrial dd{
	font-size: 1.15em;
}
}
.material_list{
	margin-top: 2em
}
/*アニメーション*/
#precision .flex_box.fade-up {
	transition-delay: 1.2s;	
}
#precision .material_list.fade-up {
	transition-delay: 1.8s;
}
#precision .scroll-trigger .ttl::before {
	transform: translateY(-50px)
}
#precision .scroll-trigger.is-active .ttl::before { 
	transform: translateY(0)
}

@media print{
#precision .scroll-trigger .ttl::before {
	transform: none
}
#precision .scroll-trigger.is-active .ttl::before { 
	transform: none
}
}
/*ページ内共通*/
.detail{
	margin-bottom: .3em;
	display: flex;
	align-items: center;
	position: relative;
	font-size: 1.1em;
	font-weight: bold
}
.detail::before{
	content: "";
	width: .5em;
	height: .5em;
	margin-right: .3em;
	display: block;
	background: linear-gradient(to top, #28939E, #35B9C5);
}
@media screen and (min-width: 768px) {
.detail{
	font-size: 1.2em;
}
}
/* スクロール */
.scroll {
  overflow: auto;
  white-space: nowrap;
}
.scroll::-webkit-scrollbar {
  height: 5px;
}
.scroll::-webkit-scrollbar-track {
  background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {
  background: #BCBCBC;
}
.scroll_txt{
	margin-top: 0.5em;
	display: block;
	font-size: 0.9em;	
}
@media print, screen and (min-width: 782px) {
.scroll_txt{
	display: none
}
}
.material_list table{
	width: 600px;
	margin-top: 1em;
	font-size: .9em;
	border: 1px solid #707070
}
.material_list th,.material_list td{
	border: 1px solid #707070
}
.material_list_th{
	padding: .5em 1em;
	color: #fff;
	text-align: center;
	background-color:  var(--main-color2)
}
.material_list_th2{
	vertical-align: middle;
	background-color: #F2F2F2
}
.material_list th:first-child{
	width: 100px;
}
.material_list th:nth-child(2n){
	width: 250px;
}
.material_list th:nth-child(3n){
	width: 250px;
}
.material_list td{padding: .5em 1em;
	background-color: #fff
}
.business_list{
	margin-top: 5em;
}
.business_list li{
	margin-bottom: 3em;
	display: flex;
  	flex-wrap: wrap
}
.business_list_txt{
	width: 100%;
	margin-bottom: 1em;
}
.business_list_txt p{
	line-height: 1.6
}
.business_list_img{
	width: 100%;
	height: 11em;
	object-fit: cover;
	border-radius: 0.5em;
}
.business_list figure{
	width: 90%;
}
.business_list_img2{
	width: 100%;
	height: auto;
}
.business_list_ttl {
	margin-bottom: .5em;
	padding-left: .6em;
	position: relative;
	font-size: 1.3em;
	font-weight: bold
}
.business_list_ttl span{
	margin-left: .25em;
	display: block;
	font-family: 'Arial';
	color: var(--main-color2);
	font-size: .6em
}
.business_list_ttl::before{
	content: "";
	width: 3px;
	height: 100%;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	background: linear-gradient(to top, #28939E, #35B9C5);
}
/*ボタン 共通化*/
#precision .btn1 {
    width: 9em;
    height: 2.5em;
	margin: 1em 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 0.9em;
    font-weight: 500;
    background: linear-gradient(to left, #28939E, #35B9C5);
    border-radius: 25px;
	cursor: pointer;
	transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
}
#precision .btn1.grad {
	background:  linear-gradient(to left, #28939E, #35B9C5);
	background-size: auto;
	background-size: 200% 100%;
	border: none;
	position: relative
}
#precision .btn1.grad::after{
	content: "→";
	display: inline-block;
	margin-left: 0.4em;
	transition: 500ms;
}
#precision .btn1.grad:hover::after{
	transform: translateX(0.2em);
}
#precision .btn1.grad:hover {
	background-position: 100% 0;
background: linear-gradient(50deg, #28939E, #35B9C5);
}
@media screen and (min-width: 1200px) {
#precision .btn1 {
    width: 10em;
    height: 2.8em;
    font-size: 1em;
}	
}
@media print{
.business_list li{
	justify-content: space-between
}
.business_list_txt{
	width: 50%;
	margin-bottom: 1em;
}
.business_list_img{
	width: 45%;
	height: 11em;
	object-fit: cover;
	border-radius: 0.5em;
}
	.business_list figure{
		width: 45%
	}
}

.possible_box{
	margin-top: 1em
}
.possible_box p{
	margin-top: .7em;
	padding: 1em;
	font-size: 0.9em;
	line-height: 1.8;
	border: 1px solid #979797
}
@media screen and (min-width: 380px) {
.business_list_img{
	height: 12em;
}
}
@media screen and (min-width: 480px) {
.business_list_img{
	height: 15em;
}
.possible_box p{
	font-size: 1em
}
}
@media screen and (min-width: 600px) {
.business_list figure{
	width: 400px
}
}
@media screen and (min-width: 768px) {
.material_list table{
	font-size: 1em;
}
.business_list li{
	display: flex;
	justify-content: space-between;
}
.business_list li:nth-child(2) {
	margin-bottom: 4em;
}
.business_list_txt{
	width: 50%;
	margin-bottom: 0;
}
.business_list_img{
	width: 46%;
	height: 18em;
	border-radius: 1em;
}
.business_list figure{
	width: 46%;
}
}
@media screen and (min-width: 1024px) {
.business_list_ttl {
	margin-bottom: .8em;
	font-size: 1.6em;
}
.business_list_txt p{
	font-size: 1em;
}
.business_list_img{
	height: 20em;
}
.business_list_txt p{
	font-size: 1.05em;
}
}
@media screen and (min-width: 1200px) {
.business_list_txt p{
	line-height: 1.8
}
.business_list li{
	margin-bottom: 5em;
}
.business_list li:nth-child(2) {
	margin-bottom: 5em;
}
}
@media screen and (min-width: 1600px) {
.business_list_ttl {
	font-size: 1.8em;
}
}

@media screen and (min-width: 768px) {
	.wrap .fade-bg-cover::before {
		width: 100vw
	}
}
@media screen and (min-width: 930px) {
	.wrap .fade-bg-cover::before {
		width: 60vw
	}
}

/*精密板金・製缶・塗装*/
#industrial{
	padding: 2em 0;
	background: linear-gradient(to top, #f9f9f900, #e1e1e12e 10%)
}
@media screen and (min-width: 600px) {

#industrial .ttl b{
	margin-left: 3em
}
}
/*上書き*/
#industrial .ttl::before {
	width: 2.8em;
  	height: 4.3em;
	top: -1em;
	background:url("../images/business_ttl02.svg") center / 100% no-repeat
}
@media screen and (min-width: 600px) {
#industrial .ttl::before {
	width: 2.4em;
 	 height: 3.4em;
	top: -0.6em;
}
}
#industrial .possible_box p{
	width: 100%;
}
.contact-sentence {
	margin: 8em auto 0;
  }
.contact-sentence::after {
    width: 9em;
    height: 16.5em;
	top: 1em;
	right: 3em;
	background: url("../images/business_icon01.svg") top / 100% no-repeat;
	z-index:-1 
  }
#industrial .ttl h2{
	font-size: .65em
}
#industrial .ttl h2::before {
	background-color: var(--main-color2)
}
@media screen and (min-width: 480px) {
#industrial .possible_box p{
	width: 80%;
}
}
@media screen and (min-width: 670px) {
.contact-sentence {
	margin: 5em auto 0;
  }
.contact-sentence::after {
    width: 9em;
	top: -2em;
  }
}
@media screen and (min-width: 960px) {
.contact-sentence::after {
	right: 5em;
  }
}
@media screen and (min-width: 1200px) {
.contact-sentence::after {
	right: 8em;
  }
}
@media print{
#industrial .bg_color>.flex_box{
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
  	flex-direction:row
}
#industrial .bg_color>.flex_box>.txt_box{
	width: 55% 
}
#industrial .bg_color>.flex_box figure{
	width: 40%;
	height: 21em;
}
#industrial .bg_color>.flex_box figure img{
	width: 60vw;
	height: 100%;
    border-radius: 1.5em 0 0 1.5em;
	object-fit: cover;
  object-position: top left;
}

.contact-sentence {
	padding-bottom: 1em
  }
.contact-sentence::after {
    width: 7em;
	top: -2em;
  }
}
/*アニメーション*/
#industrial .scroll-trigger .ttl::before {
	transform: translateY(-50px)
}
#industrial .scroll-trigger.is-active .ttl::before { 
	transform: translateY(0)
}

@media print{
#industrial .scroll-trigger .ttl::before {
	transform: none
}
#industrial .scroll-trigger.is-active .ttl::before { 
	transform: none
}
}

/*制作実績*/
#achievements{
	position: relative;
	padding: 2em 0;
}
#achievements::before {
	content: "";
	position: absolute;
	z-index: -2;
	top: 0;
	left: 0;
	background: var(--sub-grada-bg-blue);
	width: 100%;
	height: 100%
}
#achievements .ttl{
	padding-left: 2em;
	color: var(--main-color);
	font-size: 1.4em;
	line-height: .9;
}
#achievements .ttl::before {
	width: 1.5em;
 	 height: 2.6em;
	top: -0.6em;
	background:url("../images/business_ttl03.svg") center / 100% no-repeat
}
#achievements .ttl span{
	margin-top: .3em;
	display: block;
}
#achievements .ttl i {
	-webkit-text-stroke: 0.5px var(--main-color);
	text-stroke: 0.5px var(--main-color);
}
#achievements .ttl b{
	margin-left: 3em
}
#achievements .ttl h2::before {
	background-color: var(--main-color2)
}
#achievements ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#achievements ul li{
	 width : 100% ;
	margin-bottom: 1.5em;
}
#achievements ul li>.list_ttl{
	margin-bottom: 0.3em;
	color: var(--main-color3);
	font-size: 1em;
	font-weight: bold;
	flex-grow: 1;
}
#achievements ul li img{
	width: 100%;
	height: 200px;
	margin-bottom: 0.3em;
	object-fit: cover;
	object-position: top center
}
#achievements ul li p{
	margin-bottom: 0.5em;
	font-size: 0.9em;
}
#achievements ul li p b{
	display: block;
	font-weight: bold
}
@media screen and (min-width: 380px) {
#achievements .ttl {
	font-size: 1.5em;
	}
}
@media screen and (min-width: 420px) {
#achievements ul li{
	 width : calc(95% / 2) ;
	margin-bottom: 2em;
	display: flex;
	flex-direction: column
}
#achievements ul li img{
	height: 120px;
}
}
@media screen and (min-width: 480px) {
#achievements .ttl {
		font-size: 2.1em
		}
#achievements ul li>.list_ttl{
	font-size: 1.1em;
}
#achievements ul li p{
	font-size: 1em;
}
#achievements ul li img{
	height: 150px;
}
}
@media screen and (min-width: 600px) {
#achievements .ttl::before {
}
#achievements ul li>.list_ttl{
	font-size: 1.2em;
}
#achievements ul li img{
	height: 230px;
	margin-bottom: 1em;
}
#achievements ul li p{
	font-size: 1.05em;
}
}
@media screen and (min-width: 800px) {
#achievements .ttl {
	font-size: 2.5em
}
}
@media print,screen and (min-width: 900px) {
#achievements ul li{
	 width : calc(93% / 3) ;
	margin-bottom: 3em;
}
}
@media screen and (min-width: 1200px) {
#achievements .ttl {
font-size: 
3.35em
}
#achievements ul li>.list_ttl{
	font-size: 1.3em;
}
#achievements ul li img{
	height: 250px;
}
#achievements ul li p{
	font-size: 1.15em;
}
}
@media screen and (min-width: 1400px) {
#achievements .ttl {
		font-size: 3.5em
		}
}

@media screen and (min-width: 1600px) {
#achievements ul li>.list_ttl{
	font-size: 1.4em;
}
}
@media print{
#achievements ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
  #achievements ul li {
    margin-bottom: 1em !important
  }
}
/*アニメーション*/
#achievements ul.fade-up {
	transition-delay: 1.2s
}

.scroll-trigger.is-active .fade-bg-cover::before {
	transition-delay: 1.1s;	
}
@media screen and (min-width: 768px) {
.scroll-trigger.is-active .fade-bg-cover::before {
	transition-delay: 1.2s;	
}
}