@charset "UTF-8";
/*------------------------------------------------------------------------------
    トップページ
------------------------------------------------------------------------------*/
.display_none {
  display: none;
}

.mv_box {
  height: 300px;
  padding: 15px 0;
  overflow: hidden;
}

.top01_wrap {
  background: url(../img/top/bg_top.gif) 0 0 repeat;
  overflow: hidden;
  width: 100%;
}
.top01_wrap h2 {
  color: #08abc7;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  padding: 50px 0 45px 0;
}
.top01_wrap dl {
  float: left;
  width: 244px;
  padding: 0 100px 0 5px;
}
.top01_wrap dl.p_no {
  padding: 0;
}
.top01_wrap dl dd {
  padding: 20px 0 20px 0;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', sans-serif;
}

@media (max-width: 960px) {
    .top01_wrap dl {
      float: none!important;
      width: 100%;
      display: block!important;
      padding: 0 100px 0 5px;
    }
}

.top02_wrap {
  background-color: #fdfcf2;
  overflow: hidden;
  width: 100%;
  text-align: left;
}
.top02_wrap h2 {
  color: #836104;
  font-size: 24px;
  font-weight: bold;
  padding: 45px 0 20px 0;
}
.top02_wrap ul {
  margin-top: 20px;
}
.top02_wrap ul li {
  list-style: none;
  float: left;
}

.top03_wrap {
  background-color: #fff;
  padding: 30px 0;
}

.top_info {
  float: left;
  width: 440px;
  text-align: left;
}
@media (max-width: 960px) {
    .top_info {
      float: none!important;
      width: 100%;
      display: block!important;
      text-align: left;
    }
}

.top_info h2 {
  font-size: 16px;
  font-weight: bold;
  padding: 15px 0 15px 50px;
}
.top_info h2.news {
  background: url(../img/top/icon_news.png) 0 0 no-repeat;
}
.top_info h2.seminar {
  background: url(../img/top/icon_seminar.png) 0 0 no-repeat;
}
.top_info h2 .right {
  font-weight: normal;
  font-size: 12px;
  float: right;
}
.top_info h2 .right a {
  background: url(../img/icon_black.png) 0 0px no-repeat;
  padding: 2px 0 2px 20px;
}
.top_info dl {
  border-bottom: 1px dotted #a88628;
  padding: 15px 0;
}
.top_info dl dt {
  clear: both;
  float: left;
  width: 110px;
}
.top_info dl dt span {
  display: block;
  overflow: hidden;
  width: 96px;
  height: 96px;
}
.top_info dl dt span img {
  width: auto;
  height: 90px;
  border: 3px solid #ece7b5;
}
.top_info dl dd {
  padding: 0 0 0 110px;
}
.top_info dl dd .time {
  background-color: #ffe52a;
  color: #000;
  display: block;
  width: 86px;
  padding: 5px 2px;
  font-size: 12px;
  text-align: center;
  font-family: 'Arial', 'Tahoma', sans-serif;
  margin-bottom: 15px;
}

/*------------------------------------------------------------------------------
    最新情報
------------------------------------------------------------------------------*/
#info dl {
  border-bottom: 1px dotted #a88628;
  padding: 15px 0;
}
#info dl dt {
  clear: both;
  float: left;
  width: 110px;
}
#info dl dt span {
  display: block;
  overflow: hidden;
  width: 96px;
  height: 96px;
}
#info dl dt span img {
  width: auto;
  height: 90px;
  border: 3px solid #ece7b5;
}
#info dl dd {
  padding: 0 0 0 110px;
}
#info dl dd .time {
  background-color: #ffe52a;
  color: #000;
  display: block;
  width: 86px;
  padding: 5px 2px;
  font-size: 12px;
  text-align: center;
  font-family: 'Arial', 'Tahoma', sans-serif;
  margin-bottom: 15px;
}

/*------------------------------------------------------------------------------
    最新情報-個別
------------------------------------------------------------------------------*/
#info_detail {
  min-height: 500px;
}
#info_detail h1 {
  margin-bottom: 10px;
}
#info_detail p {
  margin-bottom: 1em;
}

/*------------------------------------------------------------------------------
    個人情報保護方針
------------------------------------------------------------------------------*/
#policy ol {
  margin: 10px 10px 10px 20px;
  padding-left: 0;
  list-style-position: outside;
}

#policy ol li {
  font-size: 15px;
  line-height: 30px;
  padding-left: 0em;   /* 本文全体を右へ */
  text-indent: 0em;   /* 1行目を左へ戻す */
  margin-bottom: 0.8em;
  font-family: sans-serif;
}

/*------------------------------------------------------------------------------
    サイトマップ
------------------------------------------------------------------------------*/
#sitemap {
  overflow: hidden;
  padding-bottom: 30px;
  text-align: left;
}
#sitemap a {
  color: #231815;
}
#sitemap .left {
  width: 350px;
  float: left;
}
#sitemap .right {
  width: 350px;
  float: left;
  margin-left: 120px;
}
 @media (max-width: 959px) {
  #sitemap .left {
    margin-left: 10px!important;
 }
  #sitemap .right {
    margin-left: 10px!important;
 }
 }
#sitemap p,
#sitemap dt {
  border-bottom: 1px solid #96d3de;
  padding-top: 5px;
  padding-bottom: 5px;
}
#sitemap p, #sitemap dl {
  margin-bottom: 20px;
}
#sitemap dd {
  margin: 8px 0;
}

.arrow_blue {
  background: url(../img/arrow_blue.png) 0 center no-repeat;
  padding-left: 20px;
}

/*------------------------------------------------------------------------------
    お問い合わせ
------------------------------------------------------------------------------*/
#contact01 {
  overflow: hidden;
  margin-bottom: 60px;
}
#contact01 .tit {
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', sans-serif;
  font-size: 18px;
  line-height: 28px;
}
#contact01 dl dt {
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', sans-serif;
  font-size: 18px;
  width: 220px;
  float: left;
  clear: both;
  padding-top: 15px;
}
#contact01 dl dd {
  padding-left: 220px;
}

#form_wrap dl {
  padding: 18px 5px;
  border-bottom: 1px dotted #a88628;
  width: 696px;
  margin-left: 5px;
}
#form_wrap dl dt {
  width: 180px;
  float: left;
  clear: both;
}
#form_wrap dl dt img {
  margin-left: 5px;
}
#form_wrap dl dd {
  padding-left: 180px;
}
#form_wrap dl dd input[type=text],
#form_wrap dl dd textarea {
  border: 1px solid #cbcbbc;
  padding: 3px;
}
#form_wrap dl dd input[type=checkbox] {
  margin-right: 5px;
}
#form_wrap dl dd label {
  margin-right: 10px;
}
#form_wrap dl dd #add1, #form_wrap dl dd #add2 {
    width:100%;
  margin-top: 5px;
}

@media (max-width: 960px) {
    #form_wrap dl dd #add1, #form_wrap dl dd #add2 {
        width:90%!important;
    }
}

#form_wrap .btn_wrap {
  margin: 0 auto;
  padding: 15px 0;
  width: 680px;
  text-align: center;
}
#form_wrap .btn_wrap input {
  border: none;
  color: #fff;
  background-color: #2f2f2f;
  padding: 10px 0;
  width: 160px;
  text-align: center;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  margin-right: 10px;
}
#form_wrap .btn_wrap input:hover {
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
}

#form_wrap #name,
#form_wrap #kana {
  width: 200px;
}
#form_wrap #company {
  width: 300px;
}
#form_wrap #mail {
  width: 350px;
}
#form_wrap #naiyo {
  width: 400px;
}

/*------------------------------------------------------------------------------
    会社情報
------------------------------------------------------------------------------*/
#idea dt {
  clear: both;
  float: left;
  padding-bottom: 15px;
  width: 130px;
}
#idea dd {
  padding-left: 130px;
  padding-top: 45px;
}

#outline dl {
  padding: 15px 0;
}

#history dl {
  padding: 1em 0 0 0;
}

#outline dl,
#history dl {
  border-bottom: 1px dotted #a88628;
}
#outline dt,
#history dt {
  clear: both;
  color: #08abc7;
  float: left;
  line-height: 22px;
  font-weight: bold;
  width: 120px;
}

#outline dl dd p .li_span{
  padding-left: 1em;   /* 本文全体を右へ */
  text-indent: -1em;   /* 1行目を左へ戻す */
  margin-bottom: 0.8em;
  display: block;
}

@media (max-width: 959px) {
    #outline dt,
    #history dt {
        float: none!important;
        width: 100%!important;
    }
}
#outline dd,
#history dd {
  padding: 0 0 0 120px;
}
@media (max-width: 959px) {
#outline dd,#outline dd ul li,
    #history dd , #history dd ul li {
        float: none!important;
        width: 100%!important;
        padding-left:0px!important;
        font-size:15px!important;
        line-height:22px!important;
    }
}
#outline dd p,
#history dd p {
  padding: 0 0 0 0px;
  margin-bottom: 1em;
}

.acf-map {
  width: calc(100% - 10px);
  height: 350px;
  border: 3px solid #e5e5e5;
}
.acf-map iframe{
  width:100%!important;
}
/*------------------------------------------------------------------------------
    導入事例
------------------------------------------------------------------------------*/
#works .box {
  width: calc(50% - 35px);
  float: left;
  margin-bottom: 70px;
}
#works .box img {
  width:100%!important;
  height:auto!important;
  border: 3px solid #e5e5e5;
}
#works .box p {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.icon_blue {
  background: url(../img/icon_blue.png) 0 center no-repeat;
  padding-left: 20px;
}

#works_detail dl {
  border-bottom: 1px dotted #a88628;
  padding: 15px 0;
}
#works_detail dt {
  clear: both;
  color: #08abc7;
  float: left;
  line-height: 22px;
  font-weight: bold;
  width: 120px;
}
#works_detail dd {
  padding: 0 0 0 120px;
}
#works_detail .motion {
  display: none;
  margin-top: 25px;
}
#works_detail .motion img {
  width:100%;
  height:auto!important;
}
#works_detail #motion_area1 {
  display: block;
}
#works_detail .flowing {
  list-style: none;
  margin: 15px 0;
}

#works_detail .flowing li {
  float: left;
  width:calc((100% / 5));
  text-align: center;
}

#works_detail .flowing li img {
  width:calc(100% - 10px);
  height:auto!important;
  margin:0 auto;
}

/*------------------------------------------------------------------------------
    事業内容
------------------------------------------------------------------------------*/
@media (min-width: 959px) {
    #service01 .service01_box {
/*      background: url(../img/service/service01_img01.png) right 20px no-repeat;
      min-height: 340px;*/
    }
}

@media (max-width: 959px) {
    #service01 .service01_box {
        position: relative;
        min-height: 340px;
    }

    #service01 .service01_box::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
/*        background: url(../img/service/service01_img01.png) right 20px no-repeat;
        opacity: 0.1;  50%透過 
        pointer-events: none;  背景画像がクリックなどの影響を受けない */
    }
}


#service01 .service01_box h4 {
  font-size: 18px;
  font-weight: bold;
  padding: 20px 0 10px 0;
}
@media (min-width: 959px) {
    #service01 .service01_box p {
/*      width: calc(100% - 280px);*/
        margin-bottom:20px;
    }
}
@media (max-width: 959px) {
    #service01 .service01_box p {
      width: 100%!important;
    }
}
@media (min-width: 959px) {
    #service01 li {
      list-style: none;
      float: left;
      width:calc(50% - 25px)!important;
    }
}
@media (max-width: 959px) {
    #service01 li {
      list-style: none;
      float: left;
      width:calc(50% - 5px)!important;
    }
}

#service01 li img {
  width:100%!important;
  height:auto!important;
  border-radius: 5px;
}

#service02 ol {
  color: #e9655d;
}
#service02 li {
  padding: 5px 0;
}
#service02 .num1 {
  background: url(../img/service/num1.png) 0 0 no-repeat;
  color: #9bc342;
  font-size: 16px;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', sans-serif;
  font-weight: bold;
  padding: 6px 0 16px 35px;
}
#service02 .num2 {
  background: url(../img/service/num2.png) 0 0 no-repeat;
  color: #9bc342;
  font-size: 16px;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', sans-serif;
  font-weight: bold;
  padding: 6px 0 16px 35px;
}
#service02 .num3 {
  background: url(../img/service/num3.png) 0 0 no-repeat;
  color: #9bc342;
  font-size: 16px;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', sans-serif;
  font-weight: bold;
  padding: 6px 0 16px 35px;
}
#service02 .num4 {
  background: url(../img/service/num4.png) 0 0 no-repeat;
  color: #9bc342;
  font-size: 16px;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', sans-serif;
  font-weight: bold;
  padding: 6px 0 16px 35px;
}

#service03 h4 {
  font-size: 18px;
  font-weight: bold;
  padding: 20px 0 10px 0;
}
#service03 p {
    width:100%;
  clear:both;
}
#service03 li {
  list-style: none;
}
#service03 ul.blue li {
  color: #08abc7;
  padding: 5px 0;
}

@media (min-width: 959px) {
    #service03 li {
      list-style: none;
      float: left;
      width:calc(50% - 25px)!important;
    }
}

#service03 li img {
  width:100%!important;
  height:auto!important;
  border-radius: 5px;
}

@media (max-width: 959px) {
    .service03_box img {
        float:none!important;
        width:100%!important;
        height:auto!important;
        margin-left:0px!important;
        border-radius: 5px;
    }
    
    #service03 li .mgnR15 {
        margin-right:5px!important;
    }
    #service03 li .mgnL15 {
        margin-left:5px!important;
    }
    #service03 ul:not(.blue) {
        clear:both;
        margin-bottom:30px;
    }
    #service03 li {
        float:left;
        width: calc((100% / 2) - 5px) !important;
    }
    #service03 .blue li {
        float:none!important;
        width:100%!important;
    }
    
}

/*------------------------------------------------------------------------------
    導入の流れ
------------------------------------------------------------------------------*/
.flow_wrap {
  padding: 35px 0 25px 0;
}

.flowbox {
  background-color: #fff;
  width: calc(100% - 20px);
  padding: 10px;
  position: relative;
}
.flowbox h4 {
  position: absolute;
  top: -23px;
}
.flowbox .flow1 {
  background: url(../img/flow/step1.png) 0 0 no-repeat;
  font-size: 16px;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', sans-serif;
  font-weight: bold;
  padding: 30px 0 12px 65px;
}
.flowbox .flow2 {
  background: url(../img/flow/step2.png) 0 0 no-repeat;
  font-size: 16px;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', sans-serif;
  font-weight: bold;
  padding: 30px 0 12px 65px;
}
.flowbox .flow3 {
  background: url(../img/flow/step3.png) 0 0 no-repeat;
  font-size: 16px;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', sans-serif;
  font-weight: bold;
  padding: 30px 0 12px 65px;
}
.flowbox .flow4 {
  background: url(../img/flow/step4.png) 0 0 no-repeat;
  font-size: 16px;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', sans-serif;
  font-weight: bold;
  padding: 30px 0 12px 65px;
}
.flowbox .flow5 {
  background: url(../img/flow/step5.png) 0 0 no-repeat;
  font-size: 16px;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', sans-serif;
  font-weight: bold;
  padding: 30px 0 12px 65px;
}
.flowbox .flow6 {
  background: url(../img/flow/step6.png) 0 0 no-repeat;
  font-size: 16px;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', sans-serif;
  font-weight: bold;
  padding: 30px 0 12px 65px;
}


@media (max-width: 959px) {
    .flowbox img {
        width:100%!important;
        height:auto!important;
    }
}

#contactbox {
  background: url(../img/flow/bg_contact.png) 0 0 no-repeat;
  min-height: 172px;
  width: 675px;
  margin: 0 auto;
}

@media (max-width: 959px) {
    #contactbox {
      background: url(../img/flow/bg_contact.png) 0 0 no-repeat;
      width: 100%!important;
      margin: 0 auto 50px auto!important;
      text-align: center;
    }
    #contactbox li {
        margin:0px!important;
        float:none!important;
    }
    #contactbox img {
      width:100%!important;
      height:auto!important;
      padding-bottom:10px;
      margin:0 auto!important;
    }
}


#contactbox h4 {
  color: #fff;
  font-size: 21px;
  font-weight: bold;
  text-align: center;
  padding: 15px 0 20px 0;
}
#contactbox li {
  list-style: none;
  float: left;
}

/*------------------------------------------------------------------------------
    製品情報
------------------------------------------------------------------------------*/
.item-box {
  padding: 15px 0;
  border-bottom: 1px dotted #a88628;
}

.item-box div img { 
    width:calc((100% / 3) - 30px)!important;
    height:auto!important;
    border-radius: 5px;
}

/*------------------------------------------------------------------------------
    ユーテクスの想い
------------------------------------------------------------------------------*/
#heart02 img {
    margin-top:20px;
}
/*------------------------------------------------------------------------------
    お問い合わせ
------------------------------------------------------------------------------*/
.p-country-name {
    display:none;
}