@charset "UTF-8";

html {
  font-size: 62.5%;
  font-weight: 100;
  height: 100%;
}
*, *::before, *::after {
  box-sizing: border-box;
}
body{
  background: url('../img/back.jpg') repeat;
  font-family: 'Questrial', sans-serif, 'Yu Gothic', 'Century Gothic', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  height: 100%;
}
a{
  text-decoration: none;
}
li {
  list-style: none;
}
*, *::before, *::after {
  box-sizing: border-box;
}
body,p,ul,li,h1,h2,h3,h4,h5,h6{
  margin: 0;
  padding: 0;
  font-weight: 100;
}
.text-thin{
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.text-medium{
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-weight: 900;
}
.text-bold{
  font-weight: 900;
}
.container{
  width: 100%;
  max-width: 960px;
  margin: auto;
}
.contentWidth-single{
  max-width: 700px;
  width: 80%;
}
.contentWidth-group{
  max-width: 700px;
  width: 90%;
  margin: auto;
}

ul,li {
  margin:0;
  padding:0;
  list-style: none;
}
.header,
.footer {
  width: 100%;
  background: slategray;
  color: #fff;
  padding: 20px 0;
  padding-bottom: 35px;
  text-align: center;
}

/*Header*/
.header {
  background-color: rgba(34, 49, 52, 0.9);
  position: fixed;
  z-index: 9999;
}
.header-logo {
  float: left;
  width: 15%;
  margin-top: 10px;
}
.header .container{
  height: 100%;
  list-style-position: outside;
  position: relative;
}
.header-logo img {
  width: 100%;
}
/* --------------------------------
* gloval navi
* -------------------------------- */
.gnav {
  display: inline;
  float: right;
  line-height: 15px;
  padding: 0;
  color: white;
  transition: all 0.1s;
  font-size: 10px;
  margin-top: 30px;
}
.gnav-item{
  display: inline-block;
  margin-left: 20px;
}
.gnav-item ;first-child{
  margin-left: 0;
}
.gnav a{
  color: #fff;
}
.gnav-item{
  margin-left: 20px;
  line-height: 15px;
  padding: 0 15px;
  color: #fff;
  display: block;
  float: left;
  transition: all 0.1s;
  font-size: 1.5rem;
  position: relative;
}
.gnav-item a:after{
  content: '';
  display: block;
  width: 0px;
  margin: 6px auto 0;
  border-bottom: 1px solid #b17b30;
  transition: width 0.3s ease-in-out;
}
.gnav-item a:hover::after {
  width: 100%;
}
.gnav-item-sub{
  display: none;
  position: absolute;
}
.gnav-item-sub-item{
  text-align: left;
}


/* TOP view */
.mvTop{
  width: 100%;
  height: auto;
  padding: 95px 0 0;
}
.mvTop img{
  width: 100%;
}

/* Ourservice */
/*共通部分*/
.ourservice{
  margin-top: 60px;
  margin-bottom: 100px;
}
.ourservice__title{
  width: 100%;
  font-size: 3rem;
  color: #b17b30;
  border-bottom: 1px solid #b17b30;
  transition: width 0.3s ease-in-out;
}
.ourservice__name{
  font-size: 2rem;
  color: #b17b30;
  border-bottom: 1px solid #b17b30;
  transition: width 0.3s ease-in-out;
  margin: 30px 0 0;
}
.ourservice__contents-wrap{
  background-color: #00a29a;
  padding: 30px 0 100px;
}
.service-sect__title {
  background-color: #fff;
  font-size: 3.5rem;
  color: #00a29a;
  white-space: pre;
  letter-spacing: 0.1rem;
  height: 60px;
  line-height: 60px;
  padding-left: 3rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.service-sect{
  margin: 80px auto 0;
}

/*紹介導入*/
.ourservice-descript {
  text-align: center;
}
.service-des__logo-box {
  margin: auto;
}
.service-des__logo-img {
  max-width: 130px;
  width:35%;
  margin: auto;
}
.service-des__logo-name {
  margin: 20px auto 0;
  max-width: 400px;
  width: 80%;
}
.service-des__logo-subdescript {
  margin: 20px auto 0;
  max-width: 300px;
  width: 70%;
}
.service-des__screen {
  margin: 30px auto 0;
  box-shadow: 0 3px 6px 0 rgba(0,0,0,0.15);
}
.service-des__screen img {
  width: 100%;
}
.service-des__des-head {
  color: #fff;
  font-size: 2.7rem;
  line-height: 160%;
  letter-spacing: 0.1rem;
  margin-top: 20px;
}
.service-des__des-detail {
  color: #fff;
  line-height: 180%;
  margin-top: 15px;
  font-size: 1.5rem;
}

/*スペシャルムービー*/
.servce-mo__youtube {
  position: relative;
  padding-top: 45%;
  margin: 60px auto 0;
}
.ourservice-movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100% ;
}

/*従来技術との比較*/
.service-com__chart-area-pc{
  margin-top: 60px;
}
.service-com__chart-area-sp{
  display: none;
}
.service-com__flow {
}
.service-com__result {
  text-align: center;
  font-size: 3rem;
  color: #fff;
  letter-spacing: 0.4rem;
  height: 85px;
  line-height: 85px;
  border: 2px solid rgba(255,255,255, 0.8);
  background-color: #19ABA4;
  margin-top: 10px;
  border-radius: 5px;
}

/*システム利用イメージ*/
.ourservice__system {
  margin-top: 150px;
}
.service-sys__sect1 {
  margin-top: 100px;
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.service-sys__feature-box {
  background-color: #fff;
  width: 30%;
  position: relative;
  border-radius: 50%;
}
.service-sys__feature-box::before{
  content: '';
  padding-top: 100%;
  float: left;
}
.service-sys__feature-box::after {
  content: '';
  display: block;
  clear: both;
}
.feature-box__image {
  position: relative;
}
.feature-box__image img{
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  top: -30px;
}
.feature-box__image [alt="パソコン画面"] {
  max-width: 120px;
  width: 60%;
  transform: scaleY(0.95)
}
.feature-box__image [alt="フラッグ"]{
  max-width: 120px;
  width: 60%;
  top: -40px;
  transform: scaleY(0.9)
}
.feature-box__image [alt="虫眼鏡"] {
  max-width: 110px;
  width: 60%;
  transform: scaleY(1)
}
.feature-box__descript {
  position: absolute;
  margin: 44% auto 0;
  left: 0;
  right: 0; 
}
.feature-box__descript p {
  font-size: 1.8vw;
  line-height: 160%;
}
/*画面サイズ広がったら文字サイズ固定*/
@media screen and (min-width:790px){
  .feature-box__descript p{
    font-size: 1.38rem;
  }
}
.service-sys__feature-box:nth-child(2) p{
  line-height: 130%;
}

.service-sys__sect2 {
  margin-top: 100px;
  color: #fff;
}
.service-sys__operate-box {
  position: relative;
  margin-top: 100px;
}
.service-sys__operate-box:not(:last-child)::after{
  content: '';
  position: absolute;
  width: 0px;
  height: 0px;
  background-color: #fff;
  margin: auto;
  left: 0;
  right: 0;
  bottom: -70px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 40px 0 40px;
  border-color: #fff #00a29a #00a29a #00a29a;
}
.operate-box__title {
  font-size: 2.5rem;
  letter-spacing: 0.15rem;
  line-height: 140%;
  border-bottom: 3px solid #fff;
}
.operate-box__title-box {
  display: flex;
  align-items: flex-end;
  position: relative;
}
.operate-box__title-icon {
  flex-grow: 0;
  padding-right: 10px;
}
.operate-box__title-icon[alt="手順1"]{
  width: 90px;
}
.operate-box__title-icon[alt="手順2"]{
  height: 90px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  top: 15px;
}
.operate-box__title-icon[alt="手順3"]{
  height: 90px;
  padding-left: 10px;
  position: relative;
  top: 15px;
}
.operate-box__title {
  width: 100%;
}

.operate-box__descript-part {
  width: 97%;
  margin: auto;
  display: flex;
  margin-top: 25px;
}
.operate-box__descript {
  flex-basis: 50%;
  flex-shrink: 0 ;
  font-size: 1.6rem;
  padding: 5px 15px 0 0;
  line-height: 150%;
  letter-spacing: .05rem;
}
.operate-box__image {
  flex-basis: 50%;
  flex-shrink: 0 
}
.operate-box__image img{
  width: 100%;
}

/*無料公開中*/
.ourservice__topic .service-topic__wrap{
  display: flex;
  margin-top: 60px;
  color: #fff;
}
.ourservice__topic .service-topic__left-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 1rem;
}
.ourservice__topic .service-topic__head {
  font-size: 2.5rem;
  line-height: 150%;;
}
.container .service-topic__detail {
  margin-top: 20px;
  flex: 1 1 auto;
  font-size: 1.8rem;
}

.container .service-topic__detail a {
  text-decoration: underline;
  color: #fff;
  transition: color 0.2s;
}
.container .service-topic__detail a:hover{
  color: #12D6C8;
}
.container [class^="service-topic__note"] {
  font-size: 1.4rem;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.service-topic__note--pc{
  padding: 50px 30px 0 0;
}
.service-topic__note--sp{
  display: none;
}
.service-topic__image {
  flex-basis: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.service-topic__image img:hover{
  opacity: 0.8;
}
.service-topic__image img {
  width: 100%;
  border: 2px solid #fff;
  transition: opacity 0.2s;
}
.service-topic__image .under-layer{
  background-color: #fff;
}


/*Footer*/
.footer {
  width: 100%;
  color: #fff;
  background-color: rgba(34, 49, 52, 0.9);
  padding: 20px 0 35px;
}
.footer-logo{
  width: 10%;
  float: left;
}
.footer-logo img{
  width: 100%;
}
.footer-company-des{
  width: 25%;
  float: left;
}
.footer-company-des-item{
  font-size: 0.8em;
  line-height: 1.5;
  margin-top: 10px;
  text-align: left;
}
.footer-company-des-item:first-child{
  margin-top: 0;
}
.footer-sitemap{
  width: 60%;
  float: right;
  font-size: 0.8em;
}
.footer-sitemap-item{
  display: inline-block;
  padding: 0 15px;
  vertical-align: top;
}
.footer-sitemap-item a:after {
  content: '';
  display: block;
  width: 0px;
  margin: 6px auto 0;
  border-bottom: 1px solid #b17b30;
  transition: width 0.3s ease-in-out;
}
.footer-sitemap-item a:hover::after {
  width: 100%;
}
.footer-sitemap-item a{
  color: #fff;
}
.footer-copyright{
  font-size: 2rem;
  clear: both;
  padding-top: 20px;
  text-align: center;
}