@charset "utf-8";
/* CSS Document */

body#sub-page {	
background-color:#FFF;
color:#192f60!important;
}

ul.breadcrumbs {
  list-style: none;
  font-size: .8em;
  padding:1em 0 0;
  position:relative;
  z-index:1;
}
.breadcrumbs li{
  display: inline;
  color:#192f60!important;
}
.breadcrumbs li a{
  color:#192f60!important;
}
.breadcrumbs li a::before{
	content:"";
    display: inline-block;
    width: 7px;
    height: 7px;
	margin-right:8px;
	margin-bottom:1px;
    border-top: solid 1px #192f60;
    border-right: solid 1px #192f60;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  position:relative;
}

.breadcrumbs li a:hover { filter:alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;}

ul.next-previous {
  list-style: none;
  width:100%;
  padding:0;
  margin:0;
}
ul.next-previous li {
display:inline-block;
}
ul.next-previous li.next {
float:right;
}

h2.subpage-title {
	font-size:30px !important;
  position: relative;
  color:#fff;
  background:rgba(255,255,255,0.2);
  width:100%;
  margin-top:-10px;
  padding:45px 1.5rem 60px;
  font-weight:normal;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif!important;
}

@media only screen and (max-width: 748px) {
h2.subpage-title {font-size:30px !important;position:absolute;z-index: -1;color:#fff;background:rgba(255,255,255,0.2);width:100%;top: 85px;padding: 105px 1.5rem 40px;font-weight:normal;text-align: center;font-family: 'Noto Sans JP', sans-serif!important;}
	
}

h2.subpage-title::after {
display:block;
font-size:18px;
text-align:center;
color:rgba(255,255,255,0.5);
}
h2.subpage-title.news-title::after {
content: 'NEWS'; }
h2.subpage-title.company-title::after {
content: 'COMPANY'; }
h2.subpage-title.precision-sheet-metal-title::after {
content: 'PRECISION SHEET METAL'; }
h2.subpage-title.quality-policy-title::after {
content: 'QUALITY POLICY'; }
h2.subpage-title.our-strength-title::after {
content: 'OUR STRENGTH'; }
h2.subpage-title.prototype-support-title::after {
content: 'PROTOTYPE SUPPORT'; }
h2.subpage-title.equipment-title::after {
content: 'EQIPMENT'; }
/*h2.subpage-title.medical-apparatus-title::after {
content: 'MEDICAL APPARANTUS'; }*/
h2.subpage-title.medical-device-title::after {
content: 'MEDICAL DEVICE'; }
h2.subpage-title.usces-cart-title::after {
content: 'CART'; }
h2.subpage-title.robotparts-title::after {
content: 'ROBOT PARTS'; }
h2.subpage-title.terms-title::after {
content: 'TERMS'; }
h2.subpage-title.contact-title::after {
content: 'CONTACT US'; }
h2.subpage-title.thanks-title::after {
content: 'Message sent successfully'; }
h2.subpage-title.link-title::after {
content: 'LINKS'; }
.news-pageback,
.company-pageback,
.quality-policy-pageback,
.precision-sheet-metal-pageback,
.our-strength-pageback,
.prototype-support-pageback,
.equipment-pageback,
/*.medical-apparatus-pageback,*/
.medical-device-pageback,
.robotparts-pageback,
.usces-cart-pageback,
.terms-pageback,
.contact-pageback,
.thanks-pageback,
.link-pageback {
	z-index: -999;
	margin:-50px 0 0 0;
	padding:0;
	height: 360px;
	width: 100%;
	position: absolute;
	background-size:cover;
	background-repeat:no-repeat;
}

.news-pageback {
    background-image: url(../img/single-top.jpg);
}
.company-pageback {
    background-image: url(../img/company/company-top.jpg);
}
.link-pageback {
    background-image: url(../img/other-top.jpg);
}
.quality-policy-pageback {
    background-image: url(../img/company/company-top.jpg);
}
.precision-sheet-metal-pageback {
    background-image: url(../img/ourworks/ourworks-top.jpg);
}
.our-strength-pageback {
    background-image: url(../img/strength/strength-top.jpg);
}
.prototype-support-pageback {
    background-image: url(../img/ourtechniques/ourtechniques-top.jpg);
}
.equipment-pageback {
    background-image: url(../img/equipment/equipment-top.jpg);
}
.robotparts-pageback {
    background-image: url(../img/shop/shop-top.jpg);
}
.medical-device-pageback {
    background-image: url(../img/medical-apparatus/medical-apparatus-top.jpg);
}
/*.medical-apparatus-pageback {
    background-image: url(../img/medical-apparatus/medical-apparatus-top.jpg);
}*/
.usces-cart-pageback {
    background-image: url(../img/shop/shop-top.jpg);
}
.terms-pageback {
    background-image: url(../img/shop/shop-top.jpg);
}
.contact-pageback {
    background-image: url(../img/other-top.jpg);
}
.thanks-pageback {
    background-image: url(../img/other-top.jpg);
}
.news-pageback::after,
.company-pageback::after,
.link-pageback::after,
.quality-policy-pageback::after,
.precision-sheet-metal-pageback::after,
.our-strength-pageback::after,
.prototype-support-pageback::after,
.equipment-pageback::after,
.medical-device::after,
/*.medical-apparatus-pageback::after,*/
.robotparts-pageback::after,
.usces-cart-pageback::after,
.terms-pageback::after,
.contact-pageback::after,
.thanks-pageback::after {
    z-index:999;
content: '';
top:0;
    height:360px;
    width: 100%;
    position: absolute;
    background-image: url(../img/slide/overlays/07.png);
    background-size: auto;
    background-repeat: repeat;
    opacity: 0.2;
}

@media screen and (max-width: 767px){
.news-pageback,
.company-pageback,
.link-pageback,
.quality-policy-pageback,
.precision-sheet-metal-pageback,
.our-strength-pageback,
.prototype-support-pageback,
.equipment-pageback,
.medical-device-pageback,
/*.medical-apparatus-pageback::after,*/
.robotparts-pageback,
.usces-cart-pageback,
.terms-pageback,
.contact-pageback,
.thanks-pageback {
    height: 330px;
}
.news-pageback::after,
.company-pageback::after,
.link-pageback::after,
.quality-policy-pageback::after,
.precision-sheet-metal-pageback::after,
.our-strength-pageback::after,
.prototype-support-pageback::after,
.equipment-pageback::after,
.medical-device-pageback::after,
/*.medical-apparatus-pageback::after,*/
.robotparts-pageback::after,
.usces-cart-pageback::after,
.terms-pageback::after,
.contact-pageback::after,
.thanks-pageback::after {
    height:330px;
}
}

/* 共通
------------------------------------------------------------*/
h2 { text-align:left;}

@media screen and (max-width: 767px){
h2 { text-align:center; }
}
h2.page-ti {
  font-size: 4rem;
  position: relative;
  padding: 1.5rem;
  font-weight:bold;
  text-align: center;
color:rgba(25,47,96,0.1);
}

h2.page-ti span {
  font-size: 18px;
  font-size: 1.8rem;
  display: block;
  color:#192f60;
}

h2.page-ti:before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  border-radius: 3px;
  background:#1e90ff;
}


h2.our-mission {
font-size:46px;
position: relative;
/*overflow: hidden;*/
padding:0;
margin:0 0 20px 0;
}

h2.our-mission span {
font-family: 'Roboto', sans-serif;
font-size: 7rem;
color:rgba(25,47,96,0.1);
position: relative;
z-index: 1;
top:35px;
left:-20px;
display: inline-block;
padding-top: 3px;
padding-left: 16px;
}

h2.our-strength {
font-size:46px;
position: relative;
/*overflow: hidden;*/
padding:0;
color:#ff6347;
margin:0 0 20px 0;
}

h2.our-strength span {
font-family: 'Roboto', sans-serif;
font-size: 7rem;
color:rgba(25,47,96,0.1);
position: relative;
z-index: 1;
top:35px;
left:-20px;
display: inline-block;
padding-top: 3px;
padding-left: 16px;
}

.kakko {
  position: relative;
  padding: 1em 2em;
  text-align: center;
  margin:50px 0;
  font-size:26px;
}

.kakko:before,
.kakko:after {
  position: absolute;
  content: '';
}

.kakko:after {
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
}

.kakko:before {
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
}


.btn-flat {
    display: inline-block;
    padding: 1.6em 1.2em;
    margin: 1em auto;
	text-align:center;
    text-decoration: none;
    color: #FFF !important;
    width: 300px;
    font-size: 15px;
    background:rgba(25,47,96,0.8);
    transition: .4s;
    position: relative;
    clear: both;
}

.btn-flat:hover {
    background-color:rgba(25,47,96,0.6);
}

.btn-flat::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: -5px;transition: .4s;
    right:-19px;
    margin: auto;
    width: 11px;
    height: 10px;
    border-top: 1px solid rgba(25,47,96,0.6);
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
}
.btn-flat::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 5px;transition: .4s;
    right:-20px;
    margin: auto;
    width: 50px;
    height: 10px;
    border-bottom: 1px solid rgba(25,47,96,0.6);
}

.btn-flat:hover::before {
 right:-30px;
}
.btn-flat:hover::after {
 right:-30px;
}


  
/* 会社概要のテーブル */
dl.table-takumi
,dt.table-takumi
,dd.table-takumi {
    margin: 0 auto; padding: 0;
}

.table-takumi { width:100%;margin:0 auto;}

/* 表組の基本設定 */
.table-takumi dt
{ color:rgba(25,47,96,0.7);
    line-height:1.7;
    padding: 30px 0 30px 20px;
    float: left;
	position: relative;
	display: block;
	clear: left;
    border-top:1px solid rgba(25,47,96,0.7);
    width:30%;
	box-sizing:border-box;
	vertical-align:middle;margin:0;
}

.table-takumi dd
{ width:70%;
	margin:0;
    padding:30px;
	color:#444;
	box-sizing:border-box;
	line-height:1.7;
    float: left;position: relative;display: block;
    border-top: 1px solid rgb(210, 210, 210);
}

/* 幅が指定より狭いときは見出し列と内容を上下に表示 */
@media screen and (max-width: 631px) { /* 表＋左右マージンを取る事を考えて、幅を指定する */
    .table-takumi {width: 85%;margin:0 auto;}
    .table-takumi dt
     {
        width: 100%;
		text-align:center;
		padding: 20px 0 20px 0;
    }
.table-takumi dd
     {
        width: 100%;
    }
.table-takumi dt.last { border:none;}
.table-takumi dd.last { border:none; border-top: 1px solid rgb(210, 210, 210);}

}


/* 沿革のテーブル */
dl.table-history
,dt.table-history
,dd.table-history {
    margin: 0 auto; padding: 0;
}

.table-history { width:100%;margin:0 auto;
}

/* 表組の基本設定 */
.table-history dt
{ color:rgba(25,47,96,0.7);
    line-height:1.7;
    padding: 20px 0 20px 20px;
    float: left;
	position: relative;
	display: block;
	clear: left;
    border-top:2px solid rgba(255,255,255,1.0);
    width:30%;
	box-sizing:border-box;
	vertical-align:middle;margin:0;
}

.table-history dd
{ width:70%;
	margin:0;
    padding:20px;
	box-sizing:border-box;
	line-height:2;
    float: left;position: relative;display: block;
    border-top: 2px solid rgba(255,255,255,1.0);
}


/* 幅が指定より狭いときは見出し列と内容を上下に表示 */
@media screen and (max-width: 631px) { /* 表＋左右マージンを取る事を考えて、幅を指定する */
    .table-history {width: 85%;margin:0 auto;}
    .table-history dt
     {
        width: 100%;
		text-align:center;
		padding: 20px 0 20px 0;
    }
.table-history dd
     {
        width: 100%;
    }
.table-history dt.last { border:none;}
.table-history dd.last { border:none; border-top: 1px solid rgb(210, 210, 210);}
}

.stickarrow {
  width: 100px;
  height: 8px;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  transform: skew(45deg);
}


/* ニュースアーカイブ　*/

.category-title a { 
	text-decoration:none;
	font-size:15px;
}
.category-title a:hover { filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}

@media screen and (max-width: 414px) {
h2.category-title {
text-align:left!important;
}
}

.category-date {
	display: inline;
	float: none;
	padding: 0 5px;
	font-size: 13px;
	color: #192f60;
}
	
.category-name {
	background:rgba(25,47,96,0.9);
		display: block;
	float: left;
	width: 6em; /*カゴテリー名による*/
	margin: 0 10px 10px 0;
	padding: 2px 3px 5px;
	text-align: center;
	font-size: 12px; }
	
.category-name a {
	color:#fff !important;
	text-decoration:none!important;
}
.category-name:hover { filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}

/* レスポンシブボックス
------------------------------------------------------------*/
*, *:before, *:after {
	box-sizing: border-box;
}

.col_2{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_2 > div{
	width: 50%;
	padding: 0px;
	margin:0;
}


@media screen and (max-width: 960px) {
	.col_2 > div{
		width: 100%;
	}
}

.col_3{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_3 > div{
	width: 33.33333%;
	padding: 10px;
}
@media screen and (max-width: 960px) {
	.col_3 > div{
		width: 50%;
	}
}
@media screen and (max-width: 480px) {
	.col_3 > div{
		width: 100%;
	}
}

.col_4{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_4 > div{
	width: 25%;
	padding: 10px;
}
@media screen and (max-width: 960px) {
	.col_4 > div{
		width: 33.33333%;
	}
}
@media screen and (max-width: 480px) {
	.col_4 > div{
		width: 50%;
	}
}

.col_5{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_5 > div{
	width: 20%;
	padding: 10px;
}
.col_5 > div > div{
	position: relative;
	overflow: hidden
}
@media screen and (max-width: 960px) {
	.col_5 > div{
		width: 25%;
	}
}
@media screen and (max-width: 480px) {
	.col_5 > div{
		width: 33.33333%;
	}
}

/*その他と主な共通部分は省略*/

a.btn-pdf {
  color: #fff;
  background-color: #eb6100;
  font-size:15px;
  position: relative;
  display:block;
  width:300px;
  margin:30px auto !important;
  text-align:center;
  clear:both;
  padding: 1.5rem 3rem 1.5rem 2rem;
 text-decoration:none;
}

a.btn-pdf:hover {
  color: #fff;
  background: #f56500;
}

a.btn-pdf:before {
  font-family: 'Font Awesome 5 Free';
  position: absolute;
  top: calc(50% - .8rem);
  right: 1rem;
  margin: 0;
  padding: 0;
  content:url(../img/pdf.png);
}

.products { margin:100px auto 100px!important;}

.products div h3 {
position: relative;
padding:0 0 2rem;
font-size:28px;
margin-bottom:40px;
}

.products div h3:before {
position:absolute;
  bottom:0;
  left:0;
  width: 60px;
  height: 1px;
  content: '';
  background:#192f60;
}

.products div p { 
	margin:15px 20px 15px 0;
	font-size:16px;
	clear:both!important;
}

section.blueback {
	position: relative;
}
section.blueback:before {
  position: absolute;
  top: -20px;
  left:0;
  width: 70%;
  height: 600px;
  content: '';
  background:#f6f8fb;
  z-index:-1;
}


section.blueback-right {
	position: relative;
}
section.blueback-right:before {
  position: absolute;
  top: -20px;
  right:0;
  width: 70%;
  height: 500px;
  content: '';
  background:#f6f8fb;
  z-index:-1;
}

@media screen and (max-width: 747px) {
.products { margin:50px auto 50px!important;}
}

.square-list { 
	margin:30px 0;
	padding:0 25px 0 30px;
	list-style:square;
	line-height:1.6;
}



/* 制作事例テーブル */
dl.table-works,
dt.table-works,
dd.table-works {
    margin: 0 auto; padding: 0;clear:both;
}

.table-works { width:90%;margin:50px 10% 0 0!important;
}

@media screen and (max-width: 768px) {
.table-works { width:90%;margin:50px auto 0!important;
}
}
/*.table-works dt
{ color:rgb(25,47,96);
    line-height:1.7;
    padding: 15px 0 15px 15px;
    float: left;
	font-weight:bold;
	position: relative;
	display: block;
	clear: left;
    border-top:1px solid rgba(25,47,96,0.5);
    width:50%;
	box-sizing:border-box;
	vertical-align:middle;margin:0;
}
*/
.table-works dd
{ width:100%;
	margin:0;
    padding:15px;
	box-sizing:border-box;
	line-height:2;
    float: left;position: relative;display: block;
    border-top: 1px solid rgba(25,47,96,0.5);
}


/* 幅が指定より狭いときは見出し列と内容を上下に表示 */
@media screen and (max-width: 767px) { /* 表＋左右マージンを取る事を考えて、幅を指定する */
    .table-works {width:100%!important;margin:0 auto!important;}
/*    .table-works dt
     {
        width: 100%;
		text-align:center;
		padding: 15px 0 15px 0;
    }*/
.table-works dd
     {
        width: 100%;
    }
.table-works dd.last { border:none; border-bottom: rgba(25,47,96,0.5);}
}



/* 主要設備テーブル */
dl.table-simple,
dt.table-simple,
dd.table-simple {
    margin: 0 auto; padding: 0;
}

.table-simple { width:90%;margin:50px 10% 0 0!important;
}

@media screen and (max-width: 768px) {
.table-simple { width:90%;margin:50px auto 0!important;
}
}
.table-simple dt
{ color:rgb(25,47,96);
    line-height:1.7;
    padding: 20px 0 20px 20px;
    float: left;
	font-weight:bold;
	position: relative;
	display: block;
	clear: left;
    border-top:1px solid rgba(25,47,96,0.5);
    width:30%;
	box-sizing:border-box;
	vertical-align:middle;margin:0;
}

.table-simple dd
{ width:70%;
	margin:0;
    padding:20px;
	box-sizing:border-box;
	line-height:2;
    float: left;position: relative;display: block;
    border-top: 1px solid rgba(25,47,96,0.5);
}


/* 幅が指定より狭いときは見出し列と内容を上下に表示 */
@media screen and (max-width: 767px) { /* 表＋左右マージンを取る事を考えて、幅を指定する */
    .table-simple {width: 85%!important;margin:0 auto!important;}
    .table-simple dt
     {
        width: 100%;
		text-align:center;
		padding: 20px 0 20px 0;
    }
.table-simple dd
     {
        width: 100%;
    }
.table-simple dt.last { border:none;}
.table-simple dd.last { border:none; border-top: rgba(25,47,96,0.5);}
}


.equipment-table table { width:100%!important; margin :0 auto; border-top: solid 1px rgba(25,47,96,0.5);}
table.equipment-table {
  margin: 20px auto;
}

.equipment-table .tbl-r02 th {
  background: #f6f8fb;
  text-align:left;
  border-bottom: solid 1px rgba(25,47,96,0.5);
  color: rgb(25,47,96);
  padding: 15px 20px;
   text-align:left;
}
.equipment-table .tbl-r02 td {
border-bottom: solid 1px rgba(25,47,96,0.5);
text-align:center;
width:25%;
padding: 10px;
}
 
@media screen and (max-width: 640px) {
.equipment-table td.first { display:none!important;}
.equipment-table .last td:last-child {
    border-bottom: none;
    width: 100%;
  }
.equipment-table .tbl-r02 {
    width: 80%;
  }
.equipment-table .tbl-r02 th,
.equipment-table .tbl-r02 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}

.waku { 
	border:6px solid #f6f8fb;
	padding:30px;
	margin-top:30px;
}

.waku2 { 
	border:6px solid #f6f8fb;
	padding:30px;
	margin-top:30px;
}

.waku2 p { 
font-size:18px;
}

.waku3 { 
	border:6px solid #f6f8fb;
	padding:30px;
	margin:60px auto;
}

.waku3 p { 
font-size:18px;
overflow:visible;
}

.waku3 p:before{
    display: inline-block;
    position: absolute;
    top:-25px;
    left: 15px;
    content: "“";
    color:rgba(25,47,96,0.3);
    font-size:110px!important;
    line-height: 1;overflow:visible;
    font-weight: 900;
	font-family: 'Noto Sans JP', sans-serif;
}

.waku-white { 
	border:6px solid #fff;
	padding:30px;
	margin:30px auto;
}

.waku-white p { 
font-size:18px;
}


.kore {
/*  display: inline-block;*/
  padding-top: 70px;
  position: relative;
  width:100%;
  margin:0 auto;
}
.kore::before {
  animation: kore 2s infinite;
  border: solid #999;
  border-width: 0 0 4px 4px;
  content: "";
  display: inline-block;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: rotate(-45deg);
  width: 24px;
  height: 24px;
}
@keyframes kore {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  80% {
    transform: rotate(-45deg) translate(-30px, 30px);
  }
  0%, 80%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
 
 
.nec { 
	background:rgba(25,47,96,0.5);
	color:#fff;margin-right:5px;
	font-size:13px;padding:2px 5px 3px;
}

.tape {
position: absolute;
  right:0;
  left:0;
  margin:auto;
  top:-20px;
  width:110px;
  height:35px;
  background-color: rgba(255,255,255,.4);
  border-left:2px dotted rgba(0,0,0,.1);
  border-right:2px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,0.2);
  padding: 0.5em 2em;
  color:#192f60;
  transform: rotate(-2deg);
  z-index:999;
}

@media only screen and (max-width: 767px) {
.tape {
  padding: 0.25em 1em;
}
}