/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

.MESP_svg {
  display:inline;
}
.MESP_svg img{
  width: 280px;
  height: auto;
}
@media (max-width:480px) {
  .MESP_svg img{
    width:200px;
  }
}

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
.sec01,.sec02,.sec03,.sec04,.sec05{
      --w: calc(100% - 20px);
    --g: #2aafe8 20px, transparent 20px var(--w), #2aafe8 var(--w);
    box-sizing: border-box;
    position: relative;
    width: 100%;
    padding: 7% 5% 3%;
    box-sizing: border-box;
    background: linear-gradient(90deg, var(--g)) 0 0/100% 1px, linear-gradient(90deg, var(--g)) 0 100%/100% 1px, linear-gradient(0, var(--g)) 0 0/1px 100%, linear-gradient(0, var(--g)) 100% 0/1px 100% #f0f9fd;
    background-repeat: no-repeat;
    margin-bottom: 7%;
}
body{
  width:100%;
}
/*ヘッダー*/
.Sf_title{
  height:200px;
	text-align: center;
	display: flex;
  justify-content: center;
  align-items: center;
  padding:20px;
}
.Sf_title h1{
font-size:60px;
}
.title_br{
  font-size:16px;
  display:block;
}
/*キャッチフレーズ*/
.catchphrase{
  text-align:center;
} 
  
@media screen and (max-width:480px) { 
.Sf_title{
  height:150px;
  }
.Sf_title h1{
font-size:45px;
}
.assessment_title span{
   display:block;
  }
   /*キャッチフレーズ*/
.catchphrase span{
  display:block;
}
}
.pahtn {
  color: #666666;
  font-weight: bold;
  font-size:13px;
}
.pahtn a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #666666;
}
/*
.pahtn a::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #666666;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
.pahtn a:hover::after {
  transform: scale(1, 1);
}
*/
.pahtn a:hover{
  color:#0056b9;
}

/*特長*/
.circle {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #2aafe8;
  text-align: center;
  line-height: 100px;
  margin-right: 30px;
}
.sec0_list ul li {
  line-height: 2;
  list-style: disc !important;
  padding:0px!important;
}
.sec0 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
/*カテゴリ一覧*/

/*MES*/
.sec01{
  background: #f0f9fd;
  position: relative;
  padding: 50px;
}
.fixed_img_MES {
  position: absolute;
  top: 7.5%;
  left:7%
}
.fixed_img_MES img{
  width: 110px;
  height: auto;
}
.sec01_title {
  margin: 0 auto;
  text-align: center;
  margin-top: 30px;
    display: flex;
	  justify-content: center;
	  align-items: center;
}
.MES_svg {
  display:inline;
}
.MES_svg img{
  width:290px;
  height: auto;
}
.title_sp {
  font-size: 22px!important;
  display:inline;
  margin-left:5px;
}
.sec0_text {
  margin-top: 60px;
  line-height: 1.7;
}
.sec01_kinou {
  text-align: center;
  background: #fff;
  padding: 20px;
  margin-top:40px;
}
.kinou_title {
  color: #0056b9;
  font-weight: bold;
  margin-bottom: 20px;
}
.sec01_ul_box {
  display: flex;
  justify-content: center;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.sec01_ul_box ul{
}
.sec01_ul_box ul li {
  padding: 5px;
  text-align:left;
}
/*Y’s-SF Equip*/
.sec02 {
  background: #f0f9fd;
  position: relative;
  padding: 50px;
}
.fixed_img_equip {
  position: absolute;
  top: 5%;
  left: 8%;
}
.fixed_img_equip img {
  width: 140px;
  height: auto;
}
.sec02_title {
  margin: 0 auto;
  text-align: center;
  margin-top: 30px;
  display: flex;
	justify-content: center;
	align-items: center;
}
.Equip_svg {
display:inline;
}
.Equip_svg img {
  width: 220px;
  height: auto;
	vertical-align: bottom;
}
.title_sp {
display:inline;

}
.sec02_text {
 margin-top: 70px;
  line-height: 1.7;
}
.sec02_img_box {
  margin-top: 50px;
  text-align: center;
}
/*Y’s-SF Viewer*/
.sec03 {
  background: #f0f9fd;
  position: relative;
  padding: 50px;
}
.fixed_img_Viewer {
  position: absolute;
  top: 5.5%;
  left: 8%;
}
.fixed_img_Viewer img {
  width: 130px;
  height: auto;
}
.sec03_title {
  margin: 0 auto;
  text-align: center;
  margin-top: 40px;
  display: flex;
justify-content: center;
align-items: center;
}
.Viewer_svg {
display:inline;
}
.Viewer_svg img {
  width: 220px;
  height: auto;
}
.title_sp {
display:inline;
}
.sec03_text {
  margin-top: 80px;
  line-height: 1.7;
}
.sec03_img_box {
  display: flex;
  width: 100%;
  height: auto;
  margin-top: 50px;
  justify-content: space-between;
}
.sec03_img_box_inner {
  width: 30%;
  height: auto;
  text-align: center;
}
/*Y’s-SF Scheduler*/
.sec04 {
  background: #f0f9fd;
  position: relative;
  padding: 50px;
}
.fixed_img_Scheduler {
  position: absolute;
  top: 3%;
  left: 8%;
}
.fixed_img_Scheduler img {
  width: 120px;
  height: auto;
}
.sec04_title {
  margin: 0 auto;
  text-align: center;
  margin-top: 40px;
  display: flex;
justify-content: center;
align-items: center;
}
.Scheduler_svg {
  display: inline;
}
.Scheduler_svg img {
  width: 280px;
  height: auto;
  vertical-align: bottom;
}
.title_sp {
}
.sec04_text {
  margin-top: 80px;
  line-height: 1.7;
}
.sec04_img_title {
  text-align: center;
}
.border_box{
  border: 1px solid #2a56b9;
  padding: 20px 10px;
  margin-top:20px;
 background:#fff;
}
.sec04_img_box {
  display: flex;
  width: 100%;
  height: auto;
  margin-top: 10px;
  justify-content: space-between;
  
}
.sec04_img_box_inner01 {
  width: 55%;
  height: auto;
}
.sec04_img_box_inner02 {
  width: 40%;
  height: auto;
  text-align:center;
}
.sec04_img_box_inner01 ul {
  margin-top: 10px;
}
.sec04_img_box_inner01 ul li {
}
.sec04_customer {
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
}
.border_bt {
  font-size: 30px;
  text-underline-position: under;
  position: relative;
  margin: 20px 0px 50px 0px;
}
.border_bt::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px; /*下線の上下位置調整*/
  display: inline-block;
  width: 50px; /*下線の幅*/
  height: 2px; /*下線の太さ*/
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%); /*位置調整*/
  background-color: #005bd0; /*下線の色*/
}
.sec04_customer img {
  width: 300px;
  height: auto;
}
.sec04_customer p {
  margin-top: 30px;
}
/*Y’s-SF  WorkNavi*/
.sec05 {
  background: #f0f9fd;
  position: relative;
  padding: 50px;
}
.fixed_img_WorkNavi {
  position: absolute;
  top: 6%;
  left: 8%;
}
.fixed_img_WorkNavi img {
  width: 120px;
  height: auto;
}
.sec05_title {
  margin: 0 auto;
  text-align: center;
  margin-top: 40px;
  display: flex;
justify-content: center;
align-items: center;
}
.WorkNavi_svg {
  display: inline;
}
.WorkNavi_svg img {
  width: 290px;
  height: auto;
  vertical-align: bottom;
}
.title_sp {
}
.sec05_text {
  margin-top: 80px;
  line-height: 1.7;
}
.sec05_img_title {
  margin-top: 50px;
  text-align: center;
}
.sec05_img_box_title {
  text-align: center;
  margin-top: 50px;
}
.sec05_img_box {
  display: flex;
  width: 100%;
  height: auto;
  margin-top: 30px;
  justify-content: space-between;
  align-items: center;
}
.sec05_img_box_inner01 {
  width: 15%;
  height: auto;
}
.sec05_img_box_inner02 {
  width: 60%;
  height: auto;
}
.sec05_img_box_inner03 {
  width: 10%;
  height: auto;
}
.triangle_box {
  width: 10%;
  height: auto;
}
/*右三角*/
.triangle1 {
  width: 0;
  height: 0;
  border-left: 20px solid #2aafe8;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  margin: 0 auto;
}
/*下三角*/
.triangle2 {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #2aafe8;
  margin: 20px auto;
}
.triangle2 {
  display: none;
}
/*適正事例*/
.title{
	text-align: center;
}
.title h3{
	font-size: 32px;
	color: #009966;
}
.title h3::after {
   content: '';
  position: absolute;
  left: 50%;
  bottom: -10px; /*下線の上下位置調整*/
  display: inline-block;
  width: 50px; /*下線の幅*/
  height: 2px; /*下線の太さ*/
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%); /*位置調整*/
  background-color: #009966; /*下線の色*/
}
/*適正事例_1*/
.sec07_title_box {
  display: flex;
}
.cp_h1title{
  font-size: 26px;
}
.cp_h1title {
  position: relative;
  padding:10px 30px 4px 45px;
  background: #096;
  z-index: 1;
  color: #ffffff;
  display: inline;
}
.cp_h1title:before {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px; /*ボーダーサイズ分マイナス*/
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px #fff; /*bodyのカラーと同じ色に*/
  border-bottom: solid 55px transparent;
}
.cp_h1title:after {
  position: absolute;
  content: '';
  right: 0px;
  top: 0px; /*ボーダーサイズ分マイナス*/
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px transparent; /*bodyのカラーと同じ色に*/
  border-bottom: solid 55px #fff;
}
.cp_h1title2 {
  color: #096;
  display: inline;
  font-size: 22px;
  padding: 15px 0px 5px 0px;
}
.sec07_border_box {
  border: 2px solid #096;
  padding: 30px;
  display: flex;
  justify-content: space-between;
  margin-top:5px;
  z-index:10
}
.flex_innner01 {
  width: 50%;
  height: auto;
}
.flex_innner02 {
  width: 45%;
  height: auto;
}
.sec07_p {
  margin-top: 15px;
  color: #096;
  font-weight: bold;
}
.sec07_solu {
margin-top: 20px;
  margin-left: 20px;
  display: inline;
}
.flex_innner01 ul li{
  list-style: disc !important;
}
.flex_innner01 ul li {
  margin-left: 30px;
  padding: 5px 0px;
}
/*適正事例_2*/
.sec8_title_box{
  display: flex;
}{
  display: flex;
}
.sec08_border_box {
  border: 2px solid #096;
  padding: 30px;
  display: flex;
  justify-content: space-between;
   margin-top:5px;
}
.flex_innner01 {
  width: 50%;
  height: auto;
}
.flex_innner02 {
  width: 45%;
  height: auto;
}
.sec08_p {
  margin-top: 15px;
  color: #096;
  font-weight: bold;
}
.sec08_solu {
  margin-left: 20px;
}
.flex_innner01 ul li{
   list-style: disc !important;
}
.flex_innner01 ul li {
  margin-left: 30px;
  padding: 5px 0px;
}
.tekisei_wrap{
	display: flex;
	width: 100%;
  height: auto;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}
.flex_innner02 img{
  width:100%;
  height: auto;
}
/*適正事例_3*/
.sec9_title_box{
  display: flex;
}
.sec09_border_box {
  border: 2px solid #096;
  padding: 30px;
  display: flex;
  justify-content: space-between;
   margin-top:5px;
}
.flex_innner01 {
  width: 50%;
  height: auto;
}
.flex_innner02 {
  width: 45%;
  height: auto;
}
.sec09_p {
  margin-top: 15px;
  color: #096;
  font-weight: bold;
}
.sec09_solu {
margin-top: 20px;
  margin-left: 20px;
}
.flex_innner01 ul li{
   list-style: disc !important;
}
.flex_innner01 ul li {
  margin-left: 30px;
  padding: 5px 0px;
}
.tekisei_wrap{
	display: flex;
	width: 100%;
  height: auto;
	flex-wrap: wrap;
	align-items: center;
}
/*Customer*/
.sec10_customer {
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
}
.sec10_img_box {
  display: flex;
  width: 100%;
  height: auto;
  justify-content: center;
}
.sec10_img_box_inner {
  width: 30%;
  margin: 30px auto;
}
.sec10_link {
  font-size:12px;
  margin-top:5px;
}
.sec10_link {
  color:#65676b;
  text-decoration: underline;
}
/*==================================================
ふわっ
===================================*/
/* fadeUp */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger {
  opacity: 0;
}

@media (max-width:767px) {
  /*特長*/
 .sec0 {
    display: block;
    margin:0 auto;
  }
  .sec0_list {
  padding-left:20px;
    margin:0 auto;
}
   .circle {
     margin:0 auto;
     display: block;
     margin-bottom:20px;
}
  /*MES*/
  .sec01_title {
    display:block;
  }
  .MES_svg {
  }
  .title_sp {
  margin-left: 0;
  padding-top:0;
}
.fixed_img_MES{
    top: 5%;
    left: 7%
  }
  .fixed_img_MES img{
  width: 120px;
}
  .fixed_img_MES {
    width: 100px;
  }
  .title_sp {
    display: block;
    margin-top: 10px;
  }
  .sec01_kinou ul {
  
  }
  .sec01_ul_box {
 display:block;
  }
  .sec01_ul_box ul{
   display: flex;
    justify-content: center;
    width:100%;
    margin:0 auto;
  }
  .sec01_ul_box ul li{
  width:50%;
    margin:0 auto;
  }

/*Y’s-SF Equip*/
   .sec02_title {
    display:block;
  }
.fixed_img_equip {
  top: 8%;
  left: 8%
}
.fixed_img_equip img {
  width: 120px;
}
  .title_sp {
    display: block;
	  margin-top: 10px;
  }
 .Equip_svg{
  width: 120px;
  }
 /*Y’s-SF Viewer*/
   .sec03_title {
    display:block;
  }
  .fixed_img_Viewer {
    top: 2%;
    left: 5%;
  }
  .fixed_img_Viewer img {
    width: 120px;
  }
  .title_sp {
    display: block;
    margin-top: 10px;
  }
  .Viewer_svg {
    width: 120px;
  }
  .sec03 {
    padding: 15px;
  }
  .sec03_title {
    margin-top: 50px;
  }
  .sec03_img_box {
    display: block;
    margin-top: 30px;
  }
  .sec03_img_box_inner {
    width: 100%;
    margin: 0 auto;
    margin-top: 50px;
  }
  /*Y’s-SF Viewer*/
   .sec04_title {
    display:block;
  }
  .fixed_img_Scheduler {
    top: 2%;
    left: 5%;
  }
  .fixed_img_Scheduler img {
    width: 120px;
  }
  .title_sp {
    display: block;
    margin-top: 10px;
  }
  .Scheduler_svg {
    width: 120px;
  }
  .sec04 {
    padding: 15px;
  }
  .sec04_title {
    margin-top: 50px;
  }
  .sec04_img_box {
    display: block;
    margin-top: 30px;
    width: 90%;
  }
  .sec04_img_box_inner01 {
    width: 100%;
  }
  .sec04_img_box_inner02 {
    width: 100%;
    margin-top: 50px;
  }
   /*Y’s-SF WorkNavi*/
   .sec05_title {
    display:block;
  }
  .fixed_img_WorkNavi {
    top: 2%;
    left: 5%;
  }
  .fixed_img_WorkNavi img {
    width: 120px;
  }
  .title_sp {
    display: block;
    margin-top: 10px;
  }
  .WorkNavi_svg {
    width: 120px;
  }
  .sec05 {
    padding: 15px;
  }
  .sec05_title {
    margin-top: 20px;
  }
  .sec05_img_box {
    display: block;
    margin-top: 100px;
    width: 100%;
    text-align: center;
  }
  .sec05_img_box_inner01 {
    width: 50%;
    margin: 0px auto;
  }
  .sec05_img_box_inner02 {
    width: 100%;
    margin: 0px auto;
  }
  .sec05_img_box_inner03 {
    width: 50%;
    margin: 0px auto;
  }
  .triangle_box {
    width: 100%;
  }
  .triangle1 {
    display: none;
  }
  .triangle2 {
    display: block;
    margin-top: 80px;
    margin-bottom: 80px;
  }
  @media (max-width:767px) {
   .pahtn{
      font-size:12px;
    }
   .sec02_br{
      display:block;
    }
	/*適正事例_1*/
  .sec07_border_box {
    display: block;
  }
  .flex_innner01 {
    width: 100%
  }
  .flex_innner02 {
    width: 100%
  }
    /*適正事例_2*/
  .sec08_border_box {
    display: block;
  }
  .flex_innner01 {
    width: 100%
  }
  .flex_innner02 {
    width: 100%
  }
    /*適正事例_3*/
  .sec09_border_box {
    display: block;
  }
  .flex_innner01 {
    width: 100%
  }
  .flex_innner02 {
    width: 100%
  }
}
@media (max-width:480px) {
   .circle {
  display:block;
    margin:0 auto;
     margin-bottom:20px;
}
   /*MES*/
  .title_sp {
  font-size: 18px!important;
}
  .MES_svg img{
  width:205px;
  margin: 0 auto;
}
  .fixed_img_MES {
  position: absolute;
  top:7%;
  left:5%
}
  .fixed_img_MES img{
  width: 60px;
}
  .sec01_text {
  margin-top: 20px;
}
  	.sec01 {
  padding: 20px;
}
  /*Y’s-SF Equip*/
  .fixed_img_equip {
  top: 8%;
  left: 5%;
}
	.fixed_img_equip img {
  width:60px;
}
	.Equip_svg img {
  width: 150px;
}
	.sec02 {
  padding: 20px;
}
	.sec02_text {
  margin-top: 20px;
}
  	 /*Y’s-SF Viewer*/
  .fixed_img_Viewer img {
    width: 60px;
  }
  .fixed_img_Viewer {
    top: 3.5%;
    left: 5%;
  }
  .Viewer_svg img {
    width: 150px;
  }
  .sec03_title {
    margin-top: 30px;
  }
  .sec03 {
    padding: 20px;
  }
  .sec03_text {
    margin-top: 40px;
  }
    /*Y’s-SF acheduler*/
  .fixed_img_Scheduler img {
    width: 50px;
  }
  .fixed_img_Scheduler {
    top: 3%;
    left: 5%;
  }
  .sec04_img_box {
    padding: 10px;
    width: 92%;
    margin: 0 auto；
  }
  .Scheduler_svg img {
    width: 190px;
  }
  .sec04_title {
    margin-top: 30px;
  }
  .sec04 {
    padding: 20px;
  }
  .sec04_text {
    margin-top: 40px;
  }
   /*Y’s-SF WorkNavi*/
  .fixed_img_WorkNavi img {
    width: 50px;
  }
  .fixed_img_WorkNavi {
    top: 3%;
    left: 5%;
  }
  .sec05_img_box {
    padding: 10px;
    width: 92%;
    margin: 0 auto；
  }
  .WorkNavi_svg img {
    width: 190px;
  }
  .sec05_title {
    margin-top: 30px;
  }
  .sec05 {
    padding: 20px;
  }
  .sec05_text {
    margin-top: 10px;
  }
  .sec05_img_box {
    margin-top: 50px;
    margin-bottom: 50px;
  }
  /*適正事例_1*/
  .cp_h1title2 {
    font-size: 18px;
    margin-bottom:8px;
}
.cp_h1title {
    font-size: 20px;
}
	.sec07_border_box {
  padding:20px;
}
    /*適正事例_2*/
	.sec08_border_box {
  padding:20px;
}
  	.sec09_border_box {
  padding:20px;
}
 .cp_h1title {
  padding:10px 22px 4px 35px;
}
      /*導入実績*/
  .sec10_img_box {
  display: block;
  }
  .sec10_img_box_inner {
  width: 300px;
  margin: 30px auto;
  }
  }
  

  /*===================================
ふわっ
===================================*/
/* fadeUp */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger {
  opacity: 0;
}