@charset "UTF-8";

  
/***********************************
common
************************************/
body{
  position: relative;
  background-color: #FFF;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-weight: 500;
  font-size: 16px;
}

.wrapper {
  position: relative;
  z-index: 1;
}

a {
  color: #00769D;
  text-decoration: underline;
}

br.sp {
  display:none;
}

/* header
------------------------------*/
header {
  width: 100%;
  left: 0px;
  top: 0px;
  z-index: 2;
  margin-bottom: 50px;
}

#TOP header {
  position: absolute;
}

header .logo { 
  width: 980px;
  margin: 24px auto 34px auto;
  text-align: left;
}

header .logo img:first-of-type { display:none; }
#TOP header  .logo img:first-of-type { display:block; }
#TOP header  .logo img:last-of-type { display:none; }

header .menu {
  display: none;
}

header nav {
  background-color: #00769D;
  color: #FFF;
  font-size: 14px;
  padding: 20px 0;
  overflow: hidden;
}

header nav ul {
  width: 980px;
  background: url("../img/common/menu_border.gif") right top no-repeat;
  display: flex;
  justify-content: space-around;
  text-align: center;
  color: #FFF;
  margin: 0 auto ;
}

header nav li {
  background: url("../img/common/menu_border.gif") left top no-repeat;
  flex-grow:1;
}

header nav a {
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  transition: all 200ms linear;
}

header nav a:hover {
  color: #FFBF00;
}

#company header nav li:nth-of-type(2) a { color: #FFBF00; }
#usd header nav li:nth-of-type(3) a { color: #FFBF00; }
#service header nav li:nth-of-type(4) a { color: #FFBF00; }
#tools header nav li:nth-of-type(5) a { color: #FFBF00; }
#develop header nav li:nth-of-type(6) a { color: #FFBF00; }
#link header nav li:nth-of-type(7) a { color: #FFBF00; }


/* contents
------------------------------*/
.contents {
  width: 980px;
  min-height: 380px;
  margin: 0 auto 0 auto;
}

.borderTitle1 {
  border-top: #00769D 5px solid;
  text-align: center;
  color: #00769D;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 60px;
}

.borderTitle1 img {
  display: block;
  background-color: #FFF;
  margin: 0 auto 18px auto;
  margin: -13px auto 20px auto;
  padding :0px 10px;
}

.borderTitle2 {
  background: url("../img/common/ttl_border.gif") left 0.3em repeat-x;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 25px;
}

.borderTitle2 .inner {
  display: inline-block;
  background-color: #FFF;
  padding: 0 10px;
}

.tabMenu {
  display: flex;
  justify-content: space-between;
  margin: 0 auto 60px auto;
}

.tabMenu a {
  display: block;    
  background-color: #FFBF00;
  border-radius: 6px;
  text-align: center;
  color: #333;
  text-decoration: none;
  font-size: 21px;
  font-weight: bold;
  padding: 20px 0;
  transition: background-color 400ms linear;
}

.tabMenu a:hover {
  background-color: #FF8000;
  color: #FFF;
}



/* footer
------------------------------*/
footer {
  padding-top: 60px;
}

footer .inquiry {
  background-color: #EEE;
  font-size: 14px;
  margin: 0 auto;
  padding: 10px 0;
}
  
footer .inquiry br.sp {
  display: none;
}

footer .inquiry .inner {
  width: 980px;
  display: flex;
  align-items: center;
  margin: 0 auto;
}

footer .inquiry .txt {
  width : 250px;
  text-align: left;
  font-weight: bold;
  line-height: 1.5;
}

footer .inquiry .btn a {
  display: block;    
  background-color: #FFBF00;
  border-radius: 6px;
  text-align: center;
  color: #333;
  text-decoration: none;
  font-size: 21px;
  font-weight: bold;
  padding: 10px;
  margin-left: 10px;
  transition: background-color 400ms linear;
}

footer .inquiry .btn a:hover {
  background-color: #FF8000;
  color: #FFF;
}

footer .inquiry .tel a { width : 272px; }
footer .inquiry .fax a  { width : 222px; }
footer .inquiry .mail a { width : 166px; }

footer .inquiry .btn span {
  display: block;
  font-size: 12px;
  margin-top: 8px;
}

footer .counter {
  background-color: #00769D;  
  text-align: center;
  color: #000;
  padding: 30px 0 10px 0;
}

footer .counter p {
  display: inline-block;
  margin-right: 30px;
  font-size: 12px;
}

footer .counter p img {
  vertical-align: bottom;
}

footer .copy {
  background-color: #00769D;  
  text-align: center;
  color: #FFF;
  padding: 20px 0;
}


/***********************************
TOP
************************************/
#TOP .kv{
  position: relative;
  z-index: 1;
  margin-bottom: 70px;
  overflow: hidden;
  transition: all 4000ms 0s ease;
  opacity: 0;
}

#TOP .zoom {
  opacity: 1;
}

#TOP .kv img {
  width: 100%;
  transition: all 6500ms 0s ease;
}

#TOP .zoom img{
    transform: scale(1.1, 1.1);
}

#TOP .category {
  display: flex;
  flex-wrap: wrap;
  justify-content :space-between;
}

#TOP .category li {
  width: 285px;
  border: #00769D 5px solid;
  text-align: center;
  padding-bottom: 25px;
  margin-bottom: 50px;
}

#TOP .category h2 {
  text-align: center;
  color: #00769D;
  font-size: 18px;
  font-weight: bold;
  margin: -13px 0 25px 0;
}

#TOP .category h2 img {
  display: block;
  background-color: #FFF;
  margin: 0 auto 18px auto;
  padding :0px 10px;
}

#TOP footer {
  padding-top: 20px;
}



/***********************************
会社概要
************************************/
#company .txt1 {
  text-align: center;
  line-height: 1.6;
}

#company .txt1 span {
  display: block;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    text-align: right;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin: 30px 0 50px;
}

#company .overview {
  width: 100%;
  display: flex;
  margin-bottom: 40px;
}

#company .overview table {
  width: 470px;  
  margin-right: 40px;
}
#company .overview td,
#company .overview th {
  background-color: #EEE;
  border: #FFF solid;
  border-width: 0 0 2px 0;
  text-align: left;
  font-size: 15px;
  padding: 17px 13px;
}

#company .overview th {
  border-width: 0 2px 2px 0;
  font-weight: normal;
}

#company .overview tr:last-of-type td,
#company .overview tr:last-of-type th {
  border-bottom: none;
}

#company .overview img {
  height:100%;
}

#company .overview p {
  width: 470px;
  overflow:hidden;
}


/***********************************
中古機械販売
************************************/
#usd .tabMenu {
  width: 836px;
}

#usd .tabMenu a {
  width: 272px;
}

#sesak .tabMenu li:nth-of-type(1) a { background-color: #FF8000;  color: #FFF; cursor: default; }
#kenma .tabMenu li:nth-of-type(2) a { background-color: #FF8000;  color: #FFF; cursor: default; }
#sonot .tabMenu li:nth-of-type(3) a { background-color: #FF8000;  color: #FFF; cursor: default; }

#usd .borderTitle2 {
  margin-bottom: 50px;
}

#usd .list {
  display: flex;
  flex-wrap: wrap;
  justify-content :space-between;
}

#usd .list li {
  width: 470px;
  margin-bottom: 40px;
}
#usd .list li h3 {
  background-color: #00769D;
  text-align: center;
  color: #FFF;
  font-size: 16px;
  padding: 15px;
  margin-bottom: 2px;
}



/***********************************
サービス
************************************/
#service .tabMenu {
  width: 980px;
}

#service .tabMenu a {
  width: 238px;
  font-size: 15px;
}

#service .tabMenu a span{
  font-size: 13px;
}

#engrv .tabMenu li:nth-of-type(1) a { background-color: #FF8000;  color: #FFF; cursor: default; }
#sandb .tabMenu li:nth-of-type(2) a { background-color: #FF8000;  color: #FFF; cursor: default; }
#stonep .tabMenu li:nth-of-type(3) a { background-color: #FF8000;  color: #FFF; cursor: default; }
#laser .tabMenu li:nth-of-type(4) a { background-color: #FF8000;  color: #FFF; cursor: default; }

#service .list {
  display: flex;
  flex-wrap: wrap;
  justify-content :space-between;
}

#service .list li {
  width: 100%;
  position: relative;
  text-align: center;
  margin-bottom: 40px;
}


/* 文字印字・ゴム切りサービス
------------------------------*/
#engrv .txt1 {
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 30px;
}

#engrv .list li h3 {
  background-color: #00769D;
  text-align: left;
  color: #FFF;
  font-size: 16px;
  padding: 15px;
  margin-bottom: 40px;
}

#engrv .list li .zoom {
  position: absolute;
  right: 20px;
  top: -15px;
  cursor: pointer;
}

#engrv li.price {
  margin-bottom: 60px;  
}

#engrv table {
  margin: 0 auto 40px;
}

#engrv table:last-of-type {
  margin-bottom: 0px;
}

#engrv td {
  width: 276px;
  border: #FFF 4px solid;
  font-size: 16px;
  padding: 15px;
}

#engrv thead td {
  background-color: #333;
  color: #FFF;
}

#engrv tbody td {
  background-color: #EEE;
}

#engrv .flow > div {
  width: 900px;
  position: relative;
  display: flex;
  margin: 0 auto 45px auto;
}

#engrv .flow > div:nth-of-type(2) {
  margin-bottom: 10px;
}

#engrv .flow > div > div {
  width: 230px;
  background-color: #EEE;
  padding: 20px;
}

#engrv .flow > div > div:nth-of-type(2) {
  margin: 0 45px;
}

#engrv .flow > div:nth-of-type(2) > div:nth-of-type(2) {
  display: flex;
  flex-wrap: wrap;
  align-items :center;
  width: 270px;
  padding: 0px;
}

#engrv .flow > div:nth-of-type(2) > div:nth-of-type(2) > div {
    width: 230px;
    padding: 24px;
}

#engrv .flow > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) {
  border-bottom: #FFF 3px solid;
  padding: 50px;
}

#engrv .flow .arrow1 { position: absolute;  left: 124px;  bottom: -40px; }
#engrv .flow .arrow2 { position: absolute;  left: 272px;  bottom: 50px; }

#engrv .flow h4 {
  color: #00769D;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}

#engrv .flow > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1)  h4 {
  margin-bottom: 0;

}

#engrv .flow p {
  font-size: 14px;
  line-height: 1.6;
}

#engrv .flow p span {
  font-size: 12px;
  line-height: 1.3;
}

#engrv .txt2 {
  width: 900px;
  text-align: left;
  margin: 0 auto;
}


/* サンドブラスト彫刻
------------------------------*/


/* 影彫り（ストーンベッカー）彫刻
------------------------------*/
#stonep h2 {
  margin-bottom: 40px;
}


/* レーザー彫刻
------------------------------*/
#laser .txt1 {
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 60px;
}

#laser .txt1 span {
  display: block;
  color: #00769D;
  font-weight: bold;
  margin-bottom: 20px;
}

#laser .img1 {
  text-align: center;
  margin-bottom: 40px;
}

#laser h3 {
  background-color: #00769D;
  text-align: left;
  color: #FFF;
  font-size: 16px;
  padding: 15px;
  margin-bottom: 40px;
}

#laser .txt2 {
  text-align: left;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 60px;
}

#laser .txt2 span {
  color: #00769D;
  font-size: 16px;
}



/***********************************
機械工具販売
************************************/
#tools .category {
  display: flex;
  justify-content :space-between;
}

#tools .category li {
  width: 216px;
  border: #00769D 5px solid;
  text-align: center;
  padding: 25px 0;
  margin-bottom: 50px;
}

#tools .category h2 {
  text-align: center;
  color: #00769D;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}



/***********************************
新開発商品
************************************/
#develop .new {
  width: 100%;
  margin: 0 auto 130px auto;
}

#develop .new h2 {
  height: 37px;
  position: relative;
  background-color: #00769D;
  text-align: center;
  color: #FFF;
  font-size: 24px;
  font-weight: bold;
  padding-top: 15px;
  margin-bottom: 60px;
}

#develop .new h2 span {
  width: 100%;
  display: block;
  position: absolute;
  top: -37px;
}

#develop .new h2 img {
  position: relative;
  left: -434px;
}
#develop .new p {
  text-align: center;
}

#develop .list > li {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 50px; 
}

#develop .list h3 {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* 新商品1
------------------------------*/
#develop .product1 {
  position: relative;
  margin-bottom: 80px!important; 
}

#develop .product1 h3 {
  position: relative;
  overflow:visible;
}

#develop .product1 h3 span {
  display: block;
  font-size: 16px;
  margin-top: 5px;
}

#develop .product1 h4 {
  font-weight: bold;
  margin-bottom: 20px;
}

#develop .product1 ul {
  width: 560px;
  margin-bottom: 30px;
}

#develop .product1 li {
  background: url("../img/common/icon_list.gif") left 0.6em no-repeat;
  padding: 0 0 20px 10px;
}

#develop .product1 .img1 {
  position: absolute;
  right: 70px;
  bottom: -340px;
}

#develop .product1 .inquiry {
  position: relative;
  margin-top: -50px;
}

#develop .product1 .link {
  position: absolute;
  right: 0;
  top: -14px;
}

#develop .product1 .link a {
  display: block;    
  background-color: #FFBF00;
  border-radius: 6px;
  text-align: center;
  color: #333;
  text-decoration: none;
  font-size: 21px;
  font-weight: bold;
  padding: 10px 25px;
  margin-left: 10px;
  transition: background-color 400ms linear;
}

#develop .product1 .link a:hover {
  background-color: #FF8000;
  color: #FFF;
}


/* 新商品2
------------------------------*/
#develop .product2 h3 {
  margin-bottom: 60px;
}

#develop .product2 .img1,
#develop .product2 .img2 {
  text-align: center;
  margin-bottom: 30px;
}

#develop .product2 .link {
  background: url("../img/common/icon_arrow.gif") left 0.4em no-repeat;
  padding: 0 0 15px 19px;
}


/* 新商品3
------------------------------*/
#develop .product3 .img1 {
  text-align: center;
  margin-bottom: 30px;
}

#develop .product3 .link {
  background: url("../img/common/icon_arrow.gif") left 0.4em no-repeat;
  padding: 0 0 15px 19px;
}



/***********************************
新開発商品
************************************/
#link .link {
  font-size: 16px;
  background: url("../img/common/icon_arrow.gif") left 0.1em no-repeat;
  padding: 0 0 25px 19px;
}



/***********************************
スマホ対応
************************************/
@media screen and (max-width: 1024px)  {

br.sp {
  display:inline;
}


/* header
------------------------------*/
header {
  width: 100%;
  position: relative;
  background-color: #FFF;
  margin-bottom: 20px;
}

#TOP header {
  position: relative;
  margin-bottom: 0px;
}

header .logo { 
  width: 100%;
  height: 128px;
  margin: 0;
  text-align: left;
  z-index: 1;
  padding-top: 30px;

}

header .logo img {
  width: 580px;
  margin-left: 20px;
}

header .logo img:first-of-type { display:none; }
#TOP header  .logo img:first-of-type { display:none; }
#TOP header  .logo img:last-of-type { display:block; }

header .menu {
  display: block;
  position: absolute;
  top : 30px;
  right: 30px;
  cursor: pointer;
}
  
header .menu img {
  width: 100px;
}
  
header nav {
  display: none;
  background-color: #00769D;
  color: #FFF;
  font-size: 14px;
  padding: 40px 0 0 0;
  overflow: hidden;
}

header nav ul {
  width: 100%;
  background: none;
  display: block;
  text-align: left;
  color: #FFF;
  margin: 0 auto ;
}

header nav li {
  background: url("../img/common/icon_arrow2.gif") calc(100vw - 80px) no-repeat;
  border-bottom: 2px #FFF solid;
  font-size: 40px;
  padding: 60px;
}

/* contents
------------------------------*/
.wrapper_ {
  padding-top: 128px;  
}
  
#TOP .contents {
  width: 100%;
}

#TOP .kv{
  width: 100%;
  position: relative;
  z-index: 1;
  margin-bottom: 70px;
  overflow: hidden;
  transition: all 4000ms 0s ease;
  opacity: 0;
}

#TOP .zoom {
  opacity: 1;
}

#TOP .kv img {
  width: 100%;
  transition: all 6500ms 0s ease;
}

#TOP .zoom img{
    transform: scale(1.1, 1.1);
}

#TOP .category {
  display: block;
}

#TOP .category li {
  width: 90vw;
  border: #00769D 5px solid;
  text-align: center;
  padding-bottom: 25px;
  margin: 0 auto 50px auto;
}

#TOP .category h2 {
  text-align: center;
  color: #00769D;
  font-size: 26px;
  font-weight: bold;
  margin: -13px 0 25px 0;
}

#TOP .category h2 img {
  display: block;
  background-color: #FFF;
  margin: 0 auto 18px auto;
  padding :0px 10px;
}
  
#TOP .category li div img {
  width: 30%;

}

#TOP footer {
  padding-top: 20px;
}


/* footer
------------------------------*/
footer {
  padding-top: 60px;
}

footer .inquiry {
  background-color: #EEE;
  font-size: 24px;
  margin: 0 auto;
  padding: 20px 0;
}

footer .inquiry .inner {
  width: 980px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
}

footer .inquiry .txt {
  width : 100%;
  text-align: center;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 20px;
}

footer .inquiry .btn a {
  display: block;    
  background-color: #FFBF00;
  border-radius: 10px;
  text-align: center;
  color: #333;
  text-decoration: none;
  font-size: 36px;
  font-weight: bold;
  padding: 14px;
  transition: background-color 400ms linear;
}

footer .inquiry .btn a:hover {
  background-color: #FF8000;
  color: #FFF;
}
  
footer .inquiry br.sp {
  display: inline;
}
  
footer .inquiry .tel a { width : 264px; }
footer .inquiry .fax a  { width : 264px; }
footer .inquiry .mail a { width : 264px; }

footer .inquiry .btn span {
  display: block;
  font-size: 17px;
  line-height: 1.5;
  margin-top: 8px;
}

footer .counter p {
  display: block;
  text-align: center;
  margin-bottom : 10px;
}

footer .counter p span {
  display: inline-block;
  transform: scale(3);
  padding: 10px 0;
}

footer .copy {
  font-size: 24px;
  padding: 20px 20px 40px 20px;
  line-height: 1.5;
}



}