@charset "utf-8";

/* mainimage
--------------------------------------------------------------*/
.mainimage-hoop,
.mainimage-sheetmetal{
  position:relative;
  overflow:hidden;
  width:100%;
  /*height:calc(100vh - 70px);*/
  /*background:url(../product/img/mainimage.jpg) no-repeat center center/cover;*/
  text-align:center;
  margin-top:70px;
}
.mainimage-hoop h1,
.mainimage-sheetmetal h1{
  margin:80px auto 0;
  max-width:700px;
  width:90%;
  font-size:3.6rem;
  line-height:1.3;
}
.mainimage-hoop h1 .logo-hoop,
.mainimage-sheetmetal h1 .logo-sheetmetal{
  display:block;
  margin-top:10px;
}
.mainimage-sheetmetal h1 .logo-sheetmetal{
  font-size:6.0rem;
  line-height:1.0;
  color:#004094;
}
.mainimage-hoop h1 .logo-hoop img{width:100%;}
.mainimage-hoop h1 .title,
.mainimage-sheetmetal h1 .title{font-size:2.4rem;}
.mainimage-sheetmetal h1 .title{color:#0093D8;}
.mainimage-auto{background-color:#e4e656; color:#333;}
.mainimage-manual{background-color:#3982c4;}
.mainimage-other{background-color:#98dcd5; color:#333;}
.mainimage-hoop .main-product,
.mainimage-sheetmetal .main-product{
  display:flex;
  justify-content:space-between;
  width:90%;
  max-width:1100px;
  margin:50px auto 80px;
}
.mainimage-hoop .main-left,
.mainimage-sheetmetal .main-left{
  order:1;
  width:50%;
  text-align:left;
}
.mainimage-hoop .main-right,
.mainimage-sheetmetal .main-right{
  order:2;
  width:44%;
  position:relative;
}
.mainimage-sheetmetal .main-right .logo-gta{
  position:absolute;
  bottom:0;
  right:0;
  width:140px;
}
.mainimage-hoop h2{
  font-size:2.0rem;
  line-height:1.2;
  margin-bottom:10px;
  position:relative;
}
.mainimage-hoop h2.new{padding-left:80px;}
.mainimage-hoop h2 .model,
.mainimage-sheetmetal h2 .model{
  font-size:5.0rem;
  font-family:Arial, Helvetica, sans-serif;
}
.mainimage-hoop h2 .newIcon{
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
  width:70px;
}
.mainimage-hoop h2 .newIcon img{width:100%;}
.mainimage-hoop .detail,
.mainimage-sheetmetal .detail{
  margin-bottom:10px;
  font-size:1.8rem;
}
.mainimage-hoop .workWide{
  margin-bottom:20px;
  display:inline-block;
  padding:1px 5px;
  border-radius:3px;
}
.mainimage-auto .workWide{
  background-color:#333;
  color:#fff;
}
.mainimage-manual .workWide{
  background-color:#fff;
  color:#004097;
}
.mainimage-hoop .workTable,
.mainimage-sheetmetal .workSupport{
  display:flex;
  justify-content:space-between;
}
.mainimage-hoop .workTable .photo,
.mainimage-sheetmetal .workSupport .photo{width:50%;}
.mainimage-hoop .workTable .photo img,
.mainimage-sheetmetal .workSupport .photo img{width:100%;}
.mainimage-hoop .workTable .text,
.mainimage-sheetmetal .workSupport .text{width:46%;}
.mainimage-hoop .workPhoto{
  display:flex;
  justify-content:space-between;
  font-size:1.4rem;
}
.mainimage-hoop .workPhoto .photo{width:32%;}
.mainimage-hoop .workPhoto .photo img{width:100%; margin-bottom:5px;}
.mainimage-hoop .workPhoto .photo p{margin-left:1em; text-indent:-1em;}
.mainimage-auto .note-owners-manual,
.mainimage-manual .note-owners-manual,
.mainimage-sheetmetal .note-owners-manual {
	margin-top: 1.5em;
	padding: 0.5em 1em;
	border: solid 1px #333;
	display: inline-block;
}
.mainimage-manual .note-owners-manual {border: solid 1px #fff;}
.mainimage-sheetmetal .point{
  background-color:#0093D8;
  display:inline-block;
  padding:10px 15px;
  font-size:1.8rem;
  font-weight:bold;
  color:#fff;
  margin-bottom:20px;
}
.mainimage-hoop .main-photo,
.mainimage-sheetmetal .main-photo{width:100%;}
.mainimage-hoop .main-photo img,
.mainimage-sheetmetal .main-photo img{width:100%;}
/*.mainimage-auto .partsBtn a{
  text-decoration:none;
  width:160px;
  height:40px;
  line-height:40px;
  background-color:#333;
  display:inline-block;
  margin-top:30px;
  border:solid 1px #333;
}
.mainimage-auto .partsBtn a:hover{
  background-color:transparent;
  color:#333;
}*/
.mainimage-hoop .hoop-auto,
.mainimage-hoop .hoop-manual{display:flex;}
.mainimage-hoop .hoop-auto,
.mainimage-hoop .hoop-manual{width:50%;}
.mainimage-hoop .hoop-auto li img,
.mainimage-hoop .hoop-manual li img{width:100%;}
@media only screen and (max-width:768px) {
  .mainimage-hoop h1,
  .mainimage-sheetmetal h1{margin-top:50px;}
  .mainimage-hoop .main-product,
  .mainimage-sheetmetal .main-product{display:block; margin:30px auto 50px;}
  .mainimage-hoop .main-left,
  .mainimage-hoop .main-right,
  .mainimage-sheetmetal .main-left,
  .mainimage-sheetmetal .main-right{width:100%;}
  .mainimage-hoop .main-photo{width:50%; margin:0 auto 30px;}
  .mainimage-sheetmetal .main-photo{margin:0 auto 30px;}
  .mainimage-hoop .hoop-auto,
  .mainimage-hoop .hoop-manual{display:flex;}
  .mainimage-hoop .hoop-auto,
  .mainimage-hoop .hoop-manual{width:100%;}
  .mainimage-hoop .hoop-manual{margin-top:30px;}
}
@media only screen and (max-width:480px) {
  .mainimage-hoop h1{margin-top:30px;}
  .mainimage-sheetmetal h1 .logo-sheetmetal{font-size:10vw;}
  .mainimage-sheetmetal h1 .title{font-size:5vw;}
  .mainimage-sheetmetal .main-right .logo-gta{width:120px; top:0; left:0; right:auto; bottom:auto;}
  .mainimage-hoop h2.new{padding-left:60px;}
  .mainimage-hoop h2 .model{font-size:4.0rem;}
  .mainimage-hoop h2 .newIcon{width:50px;}
  .mainimage-sheetmetal h2 .model{font-size:4.0rem;}
  .mainimage-hoop .workTable,
  .mainimage-sheetmetal .workSupport{display:block;}
  .mainimage-hoop .workTable .photo,
  .mainimage-hoop .workTable .text,
  .mainimage-sheetmetal .workSupport .photo,
  .mainimage-sheetmetal .workSupport .text{width:100%;}
  .mainimage-hoop .workTable .photo,
  .mainimage-sheetmetal .workSupport .photo{margin-bottom:5px;}
  .mainimage-hoop .workPhoto{flex-wrap:wrap;}
  .mainimage-hoop .workPhoto .photo{width:48%;}
  .mainimage-hoop .workPhoto .photo:not(:last-child){padding-bottom:10px;}
  .mainimage-hoop .main-photo{width:100%; margin:0 auto 30px;}
}



/* HOOP WELDER Feature page
--------------------------------------------------------------*/
.hoop-feature-area{
  margin:80px auto;
  background-color:#1a53a2;
  padding:80px 0;
}
.hoop-feature{
  margin:0 auto;
  max-width:1100px;
  width:90%;
}
.hoop-feature h2{
  text-align:center;
  font-size:3.6rem;
  line-height:1.3;
  margin-bottom:50px;
}
.hoop-feature h3{
  font-size:2.4rem;
  line-height:1.3;
  margin-bottom:10px;
}
.hoop-feature h3 span{font-size:1.6rem;}
.hoop-feature > ul > li{
  display:flex;
  justify-content:space-between;
}
.hoop-feature > ul > li:nth-child(even){flex-flow:row-reverse;}
.hoop-feature > ul > li:not(:last-child){margin-bottom:80px;}
.hoop-feature .feature-text{
  width:40%;
  border:solid 1px #3982c4;
  box-sizing:border-box;
  padding:35px;
  display:flex;
  align-items:center;
}
.hoop-feature .feature-image{width:54%;}
.hoop-feature .feature-image > div:not(:last-child){margin-bottom: 1em;}
.hoop-feature .feature-image img{width:100%; margin-bottom:5px;}
.hoop-feature .feature-image .caption{font-size:1.4rem;}
.hoop-feature .feature-image > ul{
  display:flex;
  justify-content:space-between;
}
.hoop-feature .feature-image > ul > li{width:48%;}

.touchpanel-and-sequencer{
  margin:80px auto;
  max-width:1100px;
  width:90%;
}
.touchpanel-and-sequencer h2{
  text-align:center;
  font-size:3.6rem;
  line-height:1.3;
  margin-bottom:50px;
}
.touchpanel-and-sequencer h3{
  font-size:2.4rem;
  line-height:1.3;
  margin-bottom:10px;
}
.touchpanel-and-sequencer .data{
  display:flex;
  justify-content:space-between;
  padding:50px 0;
  border-top:solid 1px #3982c4;
}
.touchpanel-and-sequencer .panel{
  padding:50px 0;
  border-top:solid 1px #3982c4;
}
.touchpanel-and-sequencer .stop{
  display:flex;
  justify-content:space-between;
  padding:50px 0;
  border-top:solid 1px #3982c4;
  border-bottom:solid 1px #3982c4;
}
.touchpanel-and-sequencer .data-text{width:60%;}
.touchpanel-and-sequencer .panel-text{
  display:flex;
  justify-content:space-between;
  margin-bottom:50px;
}
.touchpanel-and-sequencer .panel-text .textL{width:32%;}
.touchpanel-and-sequencer .panel-text ul{
  width:66%;
  display:flex;
  flex-wrap:wrap;
  margin-top:10px;
  background-color:#1a53a2;
  padding:15px 30px;
  box-sizing:border-box;
}
.touchpanel-and-sequencer .panel-text ul li{
  min-width:33%;
  padding:5px 0;
}
.touchpanel-and-sequencer .panel-text ul li:nth-child(1){min-width:66%;}
.touchpanel-and-sequencer .panel-text ul li:nth-child(2),
.touchpanel-and-sequencer .panel-text ul li:nth-child(5),
.touchpanel-and-sequencer .panel-text ul li:nth-child(8){min-width:33%;}
.touchpanel-and-sequencer .panel-text ul li:nth-child(3),
.touchpanel-and-sequencer .panel-text ul li:nth-child(6){min-width:35%;}
.touchpanel-and-sequencer .panel-text ul li:nth-child(4),
.touchpanel-and-sequencer .panel-text ul li:nth-child(7){min-width:31%;}
.touchpanel-and-sequencer .stop-text{width:31%;}
.touchpanel-and-sequencer .data-image{width:36%;}
.touchpanel-and-sequencer .stop-image{width:65.5%;}
.touchpanel-and-sequencer .panel-image ul,
.touchpanel-and-sequencer .stop-image ul{
  display:flex;
  justify-content:space-between;
}
.touchpanel-and-sequencer .panel-image ul li{width:31%;}
.touchpanel-and-sequencer .stop-image ul li{width:47.5%;}
.touchpanel-and-sequencer .data-image img,
.touchpanel-and-sequencer .panel-image img,
.touchpanel-and-sequencer .stop-image img{width:100%; margin-bottom:5px;}
.touchpanel-and-sequencer .caption{font-size:1.4rem;}

.expert-area{
  margin:80px auto;
  background-color:#1a53a2;
  padding:80px 0;
}
.expert{
  margin:0 auto;
  max-width:1100px;
  width:90%;
}
.expert h2{
  text-align:center;
  font-size:3.6rem;
  line-height:1.3;
  margin-bottom:15px;
}
.expert h3{
  font-size:2.0rem;
  line-height:1.3;
  margin-bottom:10px;
}
.expert .subtitle{
  text-align:center;
  font-size:2.4rem;
  color:#e4e656;
  font-weight:bold;
  margin-bottom:10px;
  line-height:1.3;
}
.expert .lead{
  text-align:center;
  font-size:2.0rem;
  line-height:1.3;
}
.expert ul{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.expert ul li{
  width:48%;
  margin-top:50px;
  display:flex;
  justify-content:space-between;
}
.expert ul li:nth-child(5){width:100%;}
.expert ul li:nth-child(5) .expert-text{width:69%;}
.expert ul li:nth-child(5) .expert-image{width:29%;}
.expert ul li .expert-text{
  width:36%;
  border-top:solid 5px #3982c4;
  padding-top:10px;
}
.expert ul li .expert-image{width:60%;}
.expert ul li .expert-image img{width:100%;}

.hoop-sample{
  margin:80px auto;
  max-width:1100px;
  width:90%;
}
.hoop-sample a{
  text-align:center;
  text-decoration:none;
  background-color:#fff;
  border:solid 1px #fff;
  color:#004097;
  font-weight:bold;
  font-size:2.0rem;
  width:320px;
  height:60px;
  line-height:60px;
  display:block;
  margin:0 auto;
}
.hoop-sample a:hover{
  background-color:transparent;
  color:#fff;
}
@media only screen and (max-width:1135px) and (min-width:1101px) {
  .touchpanel-and-sequencer .panel-text ul li:nth-child(1){min-width:100%;}
}
@media only screen and (max-width:1100px) and (min-width:769px) {
  .touchpanel-and-sequencer .panel-text ul li:nth-child(2),
  .touchpanel-and-sequencer .panel-text ul li:nth-child(5),
  .touchpanel-and-sequencer .panel-text ul li:nth-child(8),
  .touchpanel-and-sequencer .panel-text ul li:nth-child(3),
  .touchpanel-and-sequencer .panel-text ul li:nth-child(6),
  .touchpanel-and-sequencer .panel-text ul li:nth-child(4),
  .touchpanel-and-sequencer .panel-text ul li:nth-child(7){min-width:50%;}
}
@media only screen and (max-width:768px) {
  .hoop-feature-area{margin-top:10px;}
  .hoop-feature > ul > li{display:block;}
  .hoop-feature .feature-text{
	width:100%;
	margin-bottom:30px;
  }
  .hoop-feature .feature-image{width:100%;}
  .touchpanel-and-sequencer .data-text,
  .touchpanel-and-sequencer .data-image{width:47.5%;}
  .touchpanel-and-sequencer .panel-text{
    display:block;
	margin-bottom:20px;
  }
  .touchpanel-and-sequencer .panel-text .textL{width:100%;}
  .touchpanel-and-sequencer .panel-text ul{width:100%;}
  .touchpanel-and-sequencer .stop{display:block;}
  .touchpanel-and-sequencer .stop-text{
    width:100%;
	margin-bottom:20px;
  }
  .touchpanel-and-sequencer .stop-image{width:100%;}
  .touchpanel-and-sequencer .stop-image ul li:first-child{margin-bottom:10px;}
  .expert ul{display:block;}
  .expert ul li{width:100%;}
  .expert ul li .expert-text{width:50%;}
  .expert ul li .expert-image{width:46%;}
  .expert ul li:nth-child(5) .expert-text{width:50%;}
  .expert ul li:nth-child(5) .expert-image{width:46%;}
}
@media only screen and (max-width:480px) {
  .touchpanel-and-sequencer .data{display:block;}
  .touchpanel-and-sequencer .data-text{
    width:100%;
	margin-bottom:10px;
  }
  .touchpanel-and-sequencer .data-image{width:100%;}
  .touchpanel-and-sequencer .panel-text ul{display:block;}
  .touchpanel-and-sequencer .panel-text ul li{width:100%;}
  .touchpanel-and-sequencer .panel-image ul,
  .touchpanel-and-sequencer .stop-image ul{display:block;}
  .touchpanel-and-sequencer .panel-image ul li,
  .touchpanel-and-sequencer .stop-image ul li{
    width:100%;
	margin-top:10px;
  }
  .expert ul li{display:block;}
  .expert ul li .expert-text,
  .expert ul li .expert-image,
  .expert ul li:nth-child(5) .expert-text,
  .expert ul li:nth-child(5) .expert-image{width:100%;}
  .expert ul li .expert-text{margin-bottom:10px;}
  .hoop-sample a{width:100%;}
}



/* HOOP WELDER Deatil page
--------------------------------------------------------------*/
.speed_auto{
  text-align:center;
  margin:80px auto 0;
  max-width:1100px;
  width:90%;
}
.speed_auto source{width:100%;}
.speed_auto img{width:100%;}
.spec-area{
  margin:80px auto;
  max-width:1100px;
  width:90%;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.spec-area .spec{width:48%;}
.spec-area .thickness{width:48%;}
.spec-area .feature{width:48%;}
.spec-area .spec h2,
.spec-area .thickness h2,
.spec-area .feature h2{margin-bottom:5px;}

/* Servo Clamp Seamer */
.spec-servoClampSeamer .feature{order:1;}
.spec-servoClampSeamer .spec{order:3; width:100%;}
.spec-servoClampSeamer .sample{order:2;}
.spec-servoClampSeamer .feature ul{margin-bottom:20px;}
.spec-servoClampSeamer .feature ul li{
  text-indent:-1em;
  margin-left:1em;
  font-size:1.8rem;
  font-weight: bold;
}
.spec-servoClampSeamer .feature ul li::before{
  content:'';
  display:inline-block;
  width:14px;
  height:14px;
  background-color:#98dcd5;
  border-radius:100px;
  margin-right:.3rem;
}
.spec-servoClampSeamer .table{margin-bottom:10px;}
.spec-servoClampSeamer .table table th,
.spec-servoClampSeamer .table table td{width:25%;}
.spec-servoClampSeamer .table table td{text-align: center;}
.spec-servoClampSeamer .table table td:not(:last-child){border-right:dotted 1px #fff;}
.spec-servoClampSeamer .table table td ul{
  display: inline-flex;
  flex-wrap: wrap;
}
.spec-servoClampSeamer .table table td ul li:not(:last-child){
  margin-right: 1em;
}
.spec-servoClampSeamer .sample p{text-align:center;}
.spec-servoClampSeamer .sample img{width:50%;}

/* table */
.table table {
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  border-top:solid #ccc 1px;
}
.table table th,
.table table td{
  padding:7px 10px;
  border-bottom:solid #ccc 1px;
  line-height:normal;
}
.table table th{
  background-color:rgba(255,255,255,.2);
  font-weight:normal;
  width:30%;
}
.table table td{text-align:left;}

.list_hoopwelder,
.list_category{
  margin:0 auto 80px;
  max-width:1100px;
  width:90%;
}
.list_hoopwelder .hoopwelder{
  display:flex;
  justify-content:space-between;
  border:solid 1px #fff;
  margin-top:15px;
}
.list_hoopwelder .hoopwelder .type{
  width:18%;
  text-align:center;
  display:block;
  height:60px;
  line-height:60px;
  color:#fff;
  font-weight:bold;
}
.list_hoopwelder .hoopwelder ul{
  display:flex;
  justify-content:space-between;
  width:calc(100% - 18%);
  padding:10px 20px 10px 0;
}
.list_hoopwelder .hoopwelder ul li{
  border:solid 1px #fff;
  text-align:center;
  display:block;
  width:32%;
  height:40px;
  line-height:40px;
}
.list_hoopwelder .hoopwelder ul li a{
  text-decoration:none;
  display:block;
  background-color:#3982c4;
}
.list_hoopwelder .hoopwelder ul li a:hover{
  background-color:transparent;
  color:#fff;
}
.list_category .category ul{
  display:flex;
  justify-content:space-between;
  margin-top:15px;
}
.list_category .category ul li{
  width:32%;
  border:solid 1px #fff;
  box-sizing:border-box;
}
.list_category .category ul li a img{width:100%;}
@media only screen and (max-width:768px) {
  .spec-area{display:block;}
  .spec-area .spec,
  .spec-area .thickness,
  .spec-area .feature{width:100%;}
  .spec-area .thickness,
  .spec-servoClampSeamer .spec,
  .spec-servoClampSeamer .sample{margin-top:30px;}
}
@media only screen and (max-width:480px) {
  .table table th{width:calc(100% - 20px);}
  .table table td{text-align:center;}
  .spec-servoClampSeamer .table{overflow-x: scroll;}
  .spec-servoClampSeamer .table table th,
  .spec-servoClampSeamer .table table td{display:table-cell; word-break:keep-all; width:auto;}
  .spec-servoClampSeamer .sample img{width:75%;}
  .list_hoopwelder .hoopwelder{display:block;}
  .list_hoopwelder .hoopwelder .type{width:100%;}
  .list_hoopwelder .hoopwelder ul{
    display:block;
	width:90%;
	padding:0;
	margin:0 auto 20px;
  }
  .list_hoopwelder .hoopwelder ul li{
    width:100%;
	height:60px;
	line-height:60px;
  }
  .list_hoopwelder .hoopwelder ul li:not(:last-child){margin-bottom:10px;}
  .list_category .category ul{display:block;}
  .list_category .category ul li{width:100%;}
  .list_category .category ul li:not(:last-child){margin-bottom:10px;}
}



/* HOOP WELDER Sample page
--------------------------------------------------------------*/
.hoop-sample-area{
  margin:80px auto;
  background-color:#1a53a2;
  padding:80px 0;
}
.hoop-sample_list{
  margin:0 auto;
  max-width:1100px;
  width:90%;
}
.hoop-sample_list h2{
  text-align:center;
  font-size:3.6rem;
  line-height:1.3;
  margin-bottom:50px;
}
.hoop-sample_list > ul{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.hoop-sample_list > ul > li{width:22%; margin-bottom:30px;}
.hoop-sample_list > ul > li:nth-child(1),
.hoop-sample_list > ul > li:nth-child(2),
.hoop-sample_list > ul > li:nth-child(15),
.hoop-sample_list > ul > li:nth-child(16),
.hoop-sample_list > ul > li:nth-child(17),
.hoop-sample_list > ul > li:nth-child(18){width:48%;}
.hoop-sample_list > ul > li img{width:100%; margin-bottom:5px;}
@media only screen and (max-width:480px) {
  .hoop-sample_list > ul > li{width:48%;}
  .hoop-sample_list > ul > li:nth-child(1),
  .hoop-sample_list > ul > li:nth-child(2),
  .hoop-sample_list > ul > li:nth-child(15),
  .hoop-sample_list > ul > li:nth-child(16),
  .hoop-sample_list > ul > li:nth-child(17),
  .hoop-sample_list > ul > li:nth-child(18){width:100%;} 
  .hoop-sample_list > ul > li:last-child{margin-bottom:0;}
}