@charset "utf-8";

#top-banner {
 width: 100%;
 /*height: 80vh;*/
 height: 265px;
 background-image: url(../image/bg_head_i.png);
 background-size: auto 101%;
 background-repeat: repeat-x;
 position: relative;
}

#head-clouds {
 width: 100%;
 height: 100%;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display : flex;
}

#head-clouds .head-cloud {
 height: 100%;
 width: 33.33%;
 background-position: center center;
 background-repeat: no-repeat;
 /*background-size: auto 67%;*/
 background-size: 85% auto;
}

.cloud-left {
 background-image: url(../image/head_cloud_left.png);
}
.cloud-center {
 background-image: url(../image/head_cloud_center.png);
}
.cloud-right {
 background-image: url(../image/head_cloud_right.png);
}

#top-banner .rpa-head {
 width: 100%;
 text-align: center;
 font-size: 1.6em;
 font-weight: bold;
 position: absolute;
 bottom: 0;
}

#top-title {
 width: 100%;
}
h2.hands-head {
 width: 100%;
 text-align: center;
}
h2.hands-head img {
 max-width: 100%;
}


section {
 padding-top: 3em;
 position: relative;
}

div.box-contents {
 width: 100%;
 position: relative;
 height: auto;
 padding: 0 5% 2em;
 z-index: 0;
}
div.box-contents > div.contents-inner {
 width: 100%;
 padding: 0px 10px 20px;
}
div.contents-inner > div.contents-title {
 font-weight: bold;
 color: #ffffff;
 -webkit-text-stroke: 0.3px #333333;
 text-stroke: 0.3px #333333;
 font-size: 1.7em;
 position: relative;
 padding: 20px 40% 20px 0px;
 line-height: 1em;
}
div.contents-inner > div.contents-title:before {
 content: "";
 display: block;
 background-color: orange;
 position: absolute;
 top: 0;
 left: 0;
 width: 150%;
 height: 100%;
 margin: 0 -20% 0;
 z-index: -1;
}
div.contents-inner > div.contents-body {
 color: #333333;
 font-weight: bold;
 -webkit-text-stroke: 0.1px #ffffff;
 text-stroke: 0.1px #ffffff;
 font-size: 1.2em;
 padding: 1em;
 /*padding-right: 52%;*/
 width: 100%;
}
div.contents-inner > div.contents-body.feature {
 padding-right: 52%;
}
div.contents-inner > div.hands-image {
 position: absolute;
 top: 0;
 left: 55%;
 height: 100%;
 right: 0;
}
div.contents-inner > div.hands-image > img {
 height: 100%;
 max-height: 90%;
 position: relative;
 -ms-transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 top: 50%;
 left: 50%;
}

.idle-time {
 position: absolute;
 width: 45%;
 right: 0;
 z-index: 2;
 -ms-transform: translate(0%, -50%);
 -webkit-transform: translate(0%, -50%);
 transform: translate(0%, -50%);
 top: 50%;
}
.idle-time > img {
 width: 60%;
}

div.effect {
 width: 100%;
 padding-top: 40px;
 margin-bottom: -100px;
}
div.effect ul {
 width: 100%;
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: -moz-flex;
 display: flex;
 list-style: none;
}
div.effect ul li {
 width: 33.33%;
 padding: 10px;
}
div.effect ul li dl {
 width: 100%;
}
div.effect ul li dl dt {
 color: #ffffff;
 background:-webkit-linear-gradient(140deg, #d7e4bd, #00b23c);
 background:-moz-linear-gradient(140deg, #d7e4bd, #00b23c);
 background:-o-linear-gradient(140deg, #d7e4bd, #00b23c);
 background:linear-gradient(140deg, #d7e4bd, #00b23c);
 border-radius: 50%;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.4);
 -webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.4);
 -o-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.4);
 -ms-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.4);
 box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.4);
 border: solid 3px #ffffff;
 text-align: center;
 padding: 65px 10px;
 margin: 0px 10px 15px 10px;
 font-size: 1.3em;
}
div.effect ul li dl dd {
 color: #00b23c;
 font-size: 0.8em;
 text-align: center;
}

div.why-hands {
 width: 100%;
 position: relative;
 overflow: hidden;
 z-index: 0;
 padding-bottom: 30px;
 margin-bottom: -1.5em;
}
div.why-hands:before {
 content: "";
 display: block;
 /*background-color: #0052aa;*/
 background-color: #00aff0;
 position: absolute;
 top: 0;
 left: 0;
 width: 140%;
 height: 100%;
 margin: 0% -15% 0;
 -webkit-transform-origin: right center;
 -ms-transform-origin: right center;
 transform-origin: right center;
 -webkit-transform: rotate(-3.5deg);
 -ms-transform: rotate(-3.5deg);
 transform: rotate(-3.5deg);
 z-index: -1;
}
div.why-hands > div.why-hands-title {
 font-size: 5em;
 font-weight: bold;
 -webkit-text-stroke: 3px #ffffff;
 text-stroke: 3px #ffffff;
 padding: 50px 0 50px 10%;
}
div.why-hands-title > .why {
 color: #333333;
}
div.why-hands-title > .hands-x {
 color: #0070c0;
 font-family: "Cooper Black";
}
div.why-hands > div.why-hands-inner {
 width: 100%;
 /*padding-left: 25%;*/
 padding-left: 5%;
 padding-top: 20px;
 padding-bottom: 10px;
 /*padding-right: 30px;*/
 padding-right: 5%;
}
div.why-hands-inner ul {
 list-style: none;
 width: 100%;
}
div.why-hands-inner ul li {
 /*display: -webkit-box;*/
 /*display: -moz-box;*/
 /*display: -ms-flexbox;*/
 /*display: -webkit-flex;*/
 /*display: -moz-flex;*/
 /*display: flex;*/
 /*-webkit-flex-pack: justify;*/
 /*-moz-flex-pack: justify;*/
 /*-ms-flex-pack: justify;*/
 /*-webkit-justify-content: space-between;*/
 /*-moz-justify-content: space-between;*/
 /*justify-content: space-between;*/
 width: 100%;
}
div.why-hands-inner ul li.one {
 /*padding-bottom: 1em;*/
 font-size: 1.5em;
}
div.why-hands-inner ul li.two {
 font-size: 1.2em;
}
div.why-hands-inner ul li > div {
 background-color: #ffffff;
 font-weight: bold;
 padding: 1em;
 position: relative;
 padding-left: 1.5em;
 width: 100%;
 margin-bottom: 5px;
}
div.why-hands-inner ul li.one > div {
 /*width: 49%;*/
 width: 100%;
}
div.why-hands-inner ul li.two > div {
 /*width: 32%;*/
 width: 100%;
}
div.why-hands-inner ul li > div > span {
 position: absolute;
 -ms-transform: translate(25%, -50%);
 -webkit-transform: translate(25%, -50%);
 transform: translate(25%, -50%);
 top: 50%;
 left: 0;
}

div.contents-title {
 /*padding-left: 5%;*/
 /*padding-right: 5%;*/
 color: #f79646;
 font-weight: bold;
 font-size: 1.5em;
 padding-bottom: 6px;
}

table.mightiness {
 /*padding-left: 5%;*/
 /*padding-right: 5%;*/
 width: 100%;
 border-collapse: separate;
 border-spacing: 5px;
 font-size: 1.2em;
}
table.mightiness th {
 background-color: #f79646;
 border: solid 3px #f79646;
 color: #ffffff;
 padding: 5px 10px;
 font-weight: bold;
 text-align: center;
 vertical-align: middle;
 white-space: nowrap;
}
table.mightiness td {
 background-color: #ffffff;
 border: dotted 3px #f79646;
 padding: 11px;
 word-break: break-all;
 text-align: center;
}
.mightiness-sub-title {
 color: #f79646;
 padding-bottom: 7px;
}

div.table-area {
 width: 100%;
}

table.simple-table {
 border-collapse: collapse;
 border-spacing: 0px;
 width: 100%;
}
table.simple-table th {
 border: solid 1px #333333;
 font-weight: bold;
 text-align: center;
 vertical-align: middle;
 white-space: nowrap;
 padding: 5px;
}
table.simple-table td {
 border: solid 1px #333333;
 text-align: center;
 padding: 5px;
 font-size: 0.8em;
}
table.simple-table tr.this-product {
 background-color: #ebf1de;
 color: #002060;
}
table.simple-table th .hands-tool {
 color: #0070c0;
}
table.simple-table tr.this-product td {
 font-weight: bold;
}
table.simple-table th.noborder {
 border: 0;
}

img.image-hands {
 width: 100%;
}

.boldface {
 font-weight: bold;
 display: block;
}

table.simple-table th.align-right,
table.simple-table td.align-right {
 text-align: right;
}

div.environment-contents {
 width: 100%;
 background-color: #00b0f0;
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: -moz-flex;
 display: flex;
}
div.environment-contents > div.environment-inner {
 width: 50%;
 padding: 20px;
}
div.environment-title {
 color: #ffffff;
 font-weight: bold;
 font-size: 1.1em;
}
div.environment-info {
 color: #ffffff;
 border: solid 2px #ffffff;
 padding: 5px;
}
div.environment-info dl {
 width: 100%;
}
div.environment-info dl:after {
 content: '';
 display: block;
 clear: both;
}
div.environment-info dl dt {
 width: 30%;
 float: left;
 position: relative;
}
div.environment-info dl dt:after {
 content: ':';
 display: block;
 position: absolute;
 right: 5px;
 top: 0;
}
div.environment-info dl dd {
 width: 70%;
 float: left;
 word-break: break-all;
}
div.agency {
 width: 100%;
 background-color: #ffffff;
 border-radius: 20px;
 -webkit-border-radius: 20px;
 padding: 12px;
}
div.agency > div.agency-title {
 width: 100%;
 color: #00b0f0;
 font-weight: bold;
 text-align: center;
 font-size: 1.1em;
 padding-bottom: 4px;
}
div.agency > div.agency-contact {
 width: 100%;
 padding-left: 105px;
 position: relative;
}
div.agency > div.agency-contact:before {
 content: '';
 display: block;
 position: absolute;
 width: 90px;
 top: 0;
 left: 5px;
 bottom: 0;
 background-image: url(../image/isTechnoport.png);
 background-position: center center;
 background-repeat: no-repeat;
 background-size: 100% auto;
}
div.agency-contact .agency-name {
 font-size: 1.0em;
 font-weight: bold;
}
div.agency-contact .agency-address {
 font-size: 0.8em;
}
div.agency-contact .agency-department {
 font-size: 0.8em;
}
div.agency-contact .agency-tel {
 font-size: 0.8em;
}




/* mobile media */
@media screen and (max-width: 768px) {
 #head-clouds .head-cloud {
  background-size: 90% auto;
 }
 #top-banner .rpa-head {
  font-size: 1.4em;
 }
 div.box-contents {
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 0;
 }
 div.box-contents > div.contents-inner {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
 }
 div.contents-inner > div.contents-title {
  padding-left: 0;
  padding-right: 0;
  font-size: 1.1em;
 }
 div.contents-inner > div.hands-image {
  position: relative;
  left: 0;
  width: 100%;
  height: auto;
 }
 div.contents-inner > div.hands-image > img {
  transform: translate(0%, 0%);
  top: 0;
  left: 0;
  height: auto;
  width: 100%;
 }
 div.contents-inner > div.contents-body.feature {
  padding-right: 1em;
 }
 .idle-time {
  width: 35%;
  text-align: right;
 }
 .idle-time > img {
  width: 130%;
 }
 div.contents-inner > div.contents-body {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
 }
 div.effect {
  margin-bottom: -50px;
 }
 div.effect ul {
  display: block;
 }
 div.effect ul li {
  width: 100%;
 }
 div.why-hands > div.why-hands-title {
  font-size: 3em;
  -webkit-text-stroke: 1px #ffffff;
  text-stroke: 1px #ffffff;
  padding: 20px 0 20px 0;
  text-align: center;
 }
 table.mightiness th,
 table.mightiness td {
  float: left;
  width: 100%;
 }
 table.mightiness td {
  font-size: 0.8em;
 }
 div.table-area {
  overflow-x: scroll;
 }
 table.simple-table td {
  min-width: 200px;
 }
 div.environment-contents {
  display: block;
 }
 div.environment-contents > div.environment-inner {
  width: 100%;
  padding-left: 1%;
  padding-right: 1%;
 }
 div.environment-info dl dt,
 div.environment-info dl dd {
  float: none;
  width: 100%;
 }
 div.environment-info dl dt:after {
  display: none;
 }
 div.environment-info dl dd {
  padding-left: 8px;
 }
 div.agency {
  padding-left: 5px;
  padding-right: 5px;
 }
 div.agency > div.agency-title {
  font-size: 1.0em;
 }
 div.agency > div.agency-contact {
  padding-left: 95px;
 }
 div.agency > div.agency-contact:before {
  width: 80px;
 }
}