@charset "utf-8";
/* CSS Document */
.mainvisual{
  background:url("../img/mv.png")no-repeat center;
  background-size: cover;
}
.floc {
    width: 93.75%;
    margin: 0 0 0 auto;
    background: url(../img/bg_flocking.png) no-repeat bottom;
  -webkit-background-size: cover;
  background-size: cover;
    padding: 100px 0;
}
.floc_innre {
    max-width: 1024px;
  width: 100%;
  margin: auto;
}
.floc_innre h2{
    max-width: 510px;
    width: 100%;
  margin-left: auto;
    box-sizing: content-box;

}
.floc .sec-subtitle,.floc .sec-title{
  color: #fff;
  font-size: 3rem;
  line-height: 1.2;
}
.floc .sec-subtitle,.floc .sec-title .ft-1{
  font-size: 7rem;
}
.floc .sec-subtitle,.floc .sec-title .ft-2{
  font-size: 3.9rem;
}
.floc .sec-subtitle,.floc .sec-title .ft-3{
  font-size: 4.8rem;
}
/* 
------------------------------------------------------*/
.title_innre{
    max-width: 1024px;
    width: 100%;
    margin: auto;
  background: #fff;
  box-shadow: #0000001A 2px 4px 5px;
}
.usage {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}
.usage_card {
    max-width: 190px;
    width: 100%;
    font-size: 1.3rem;
    font-weight: bold;
    color: #164E90;
    text-align: center;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.usage_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 146px;
    height: 146px;
    box-shadow: 2px 4px 5px #0000001a;
    border-radius: 50%;
    background: #E4ECF5;
}
.center{
  font-size: 1.2rem;
}
.in_floc{
  margin-top: 60px;
}
.in_floc_inner{
  max-width: 880px;
  width: 100%;
  margin: 50px auto;
  padding: 40px 0 50px;
}
.in_floc_inner.last{
  margin-bottom: 100px
}
.in_floc_inner h2{
  font-size: 3rem;
  font-weight: 800;
}
.in_floc_inner h4{
  color: #164E90;
  border-bottom: 1px solid #AAA;
  padding-bottom: 10px;
  max-width: 850px;
  width: 100%;
  margin: auto;
  font-size: 3rem;
  font-weight: 800;
}
.flex{
  display: flex;
  max-width: 850px;
  width: 100%;
  margin: auto;
  margin-top: 20px;
  justify-content: space-between;
}
.flex_none{
  max-width: 850px;
  width: 100%;
  margin: auto;
  margin-top: 20px;
  justify-content: space-between;
}
.flex_left{
  max-width: 305px;
  width: 100%;
}
.flex_right{
  max-width: 520px;
  width: 100%;
  font-size: 1.5rem;
}
.img_flex{
  display: flex;
  justify-content: space-between;
  margin: 50px auto 0; 
  max-width: 850px;
  width: 100%;
}
.stru_block h5{
  font-size: 1.8rem;
  color: #164E90;
  font-weight: 800;
  text-align: center;
}
.usage_text{
  padding-top: 15px;
  line-height: 1.5;
}


.intro {
    width: 93.75%;
    margin: 0 0 0 auto;
    background: url("../img/bg_00.png") no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
    padding: 100px 0;
}
.intro_innre{
    max-width: 1024px;
    width: 100%;
    margin: auto;
    padding-right: 6vw;
    box-sizing: content-box;
}
.intro .sec-subtitle,.intro .sec-title{
  color: #fff;
}

.intro_inner{
  display: flex;
  margin-top: 50px;
  justify-content: space-between;
}
.intro_inner .intro_img{
  max-width: 473px;
  width: 100%;
}
.intro_text{
  max-width: 512px;
  width: 100%;
  color: #fff;
}
.flow{
  padding-bottom: 50px;
}
.flow_inner{
  max-width: 850px;
  width: 100%;
  margin: auto;
}
.flow_inner h2{
  font-size: 3rem;
  padding-top: 50px;
  font-weight: 800;
}
.flow_cell {
    margin-top: 40px;
}
.flow_midashi {
    font-size: 2rem;
    font-weight: 800;
  border-bottom: 1px solid #aaa;
}
.flow_midashi .num{
  color: #164E90;
  font-size: 4rem;
}

.flow_text {
    margin-top: 15px;
}
.flow_img {
    margin-top: 15px;
}


.flow_flex {
  width: calc(100% - 30px);
}

.flow_flex li {
  position: relative;
}

.flow_flex li::before,
.flow_flex li::after {
  content: "";  /* 疑似要素では必須 */
  width: 0;     /* 横幅を0に指定 */
  height: 0;/* 高さを0に指定 */
  display: block;/* ブロック要素にする */
  position: absolute; /* 相対位置に指定 */
}

.flow_flex li:nth-child(2)::before {
  border: solid 77px transparent;     /* 32pxのborderを指定 */
  border-right: solid 18px transparent;  /* 幅を合わせるため右線は13pxにする */
  border-left: solid 18px #FFF;          /* 白い三角形を作成して▷の形で上に重ねて削り取る */
  top: 0px;  /* 重ねる位置(縦軸)を調整 */
  left: 0px;    /* 重ねる位置(横軸)を調整 */
  z-index: 1; /* 重なり順を指定 */
}
.flow_flex li:nth-child(3)::before {
  border: solid 77px transparent;     /* 32pxのborderを指定 */
  border-right: solid 18px transparent;  /* 幅を合わせるため右線は13pxにする */
  border-left: solid 18px #FFF;          /* 白い三角形を作成して▷の形で上に重ねて削り取る */
  top: 0px;  /* 重ねる位置(縦軸)を調整 */
  left: 0px;    /* 重ねる位置(横軸)を調整 */
  z-index: 1; /* 重なり順を指定 */
}

.flow_flex li:nth-child(1)::after {
    border: solid 77px transparent;
    border-left: solid 18px #E1E7F5;
    border-right: solid 18px transparent;
    top: 0px;
    right: -36px;
    z-index: 2;
}
.flow_flex li:nth-child(2)::after {
  border: solid 77px transparent;  /* 25pxのborderを指定 */
  border-left: solid 18px #C4D7EC; /* 左のborderで背景色と同じ▶の部分を作成する */
  border-right: solid 18px transparent; /* 幅を合わせるために右線は10pxにする */
  top: 0px;       /* 重ねる位置(縦軸)を調整 */
  right: -36px; /* 重ねる位置(横軸)を調整 */
  z-index: 2;   /* 重なり順の優先度を他よりも上げる */
}

.flow_flex {
    display: flex;
    justify-content: space-around;
  margin: auto;
  margin-top: 50px;
}

.flow_flex li{
  padding: 20px 0 10px;
  width: 270px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.flow_flex li:nth-child(1){
  background: #E1E7EE;
}
.flow_flex li:nth-child(2){
  background: #C4D7EC;
}
.flow_flex li:nth-child(3){
  background: #A0B8D5;
}



.flow_flex li:nth-child(3)::after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  width: 0;
  height: 0;
  border-left: 20px solid #A0B8D5;
  border-top: 77px solid transparent;
  border-bottom: 77px solid transparent;
}

/*加工*/
.flow_flex_num02{
  display: flex;
  justify-content: space-around;
  margin: auto;
  margin-top: 50px;
}
.flow_flex_num02 li:nth-child(1){
  background: #E1E7EE;
  width: 230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.flow_flex_num02 .sec_num02:nth-child(1){
  background: #C4D7EC;
  width: 520px;
  padding: 15px 0;
  margin-bottom: 5px;
}
.flow_flex_num02 .sec_num02:nth-child(2){
  background: #A0B8D5;
  width: 520px;
  padding: 15px 0;
}

.flow_flex_num02 li {
  position: relative;
}

.flow_flex_num02 li::before,
.flow_flex_num02 li::after {
  content: "";  /* 疑似要素では必須 */
  width: 0;     /* 横幅を0に指定 */
  height: 0;/* 高さを0に指定 */
  display: block;/* ブロック要素にする */
  position: absolute; /* 相対位置に指定 */
}

.flow_flex_num02 li:nth-child(3)::before {
  border: solid 77px transparent;     /* 32pxのborderを指定 */
  border-right: solid 18px transparent;  /* 幅を合わせるため右線は13pxにする */
  border-left: solid 18px #FFF;          /* 白い三角形を作成して▷の形で上に重ねて削り取る */
  top: 0px;  /* 重ねる位置(縦軸)を調整 */
  left: 0px;    /* 重ねる位置(横軸)を調整 */
  z-index: 1; /* 重なり順を指定 */
}

.flow_flex_num02 .ft_num02:nth-child(1)::after {
    border: solid 183px transparent;
    border-left: solid 42px #E1E7EE;
    border-right: solid 18px transparent;
    top: 0px;
    right: -60px;
    z-index: 2;
}
.flow_flex_num02 .sec_num02:nth-child(1)::after {
    border: solid 91px transparent;
    border-left: solid 30px #C4D7EC;
    border-right: solid 18px transparent;
    top: 0px;
    right: -48px;
    z-index: 2;
}
.flow_flex_num02 .sec_num02:nth-child(2)::after {
    border: solid 91px transparent;
    border-left: solid 30px #A0B8D5;
    border-right: solid 18px transparent;
    top: 0px;
    right: -48px;
    z-index: 2;
}

.flex_num02_inner{
  display: flex;
  justify-content: space-between;
  max-width: 450px;
  width: 100%;
  margin: auto;
}
.flex_num02_inner .left h4{
  font-weight: bold;
  padding-bottom: 20px;
}

/*検査*/
.flow_flex_num03{
  display: flex;
  justify-content: center;
  margin: auto;
  margin-top: 50px;
}
.flow_flex_num03 {
  width: calc(100% - 30px);
}

.flow_flex_num03 li {
  position: relative;
}

.flow_flex_num03 li::before,
.flow_flex_num03 li::after {
  content: "";  /* 疑似要素では必須 */
  width: 0;     /* 横幅を0に指定 */
  height: 0;/* 高さを0に指定 */
  display: block;/* ブロック要素にする */
  position: absolute; /* 相対位置に指定 */
}

.flow_flex_num03 li:nth-child(2)::before {
    border: solid 146px transparent;
    border-right: solid 54px transparent;
    border-left: solid 54px #FFF;
    top: -8px;
    left: 0px;
    z-index: 1;
}
.flow_flex_num03 li:nth-child(3)::before {
  border: solid 138px transparent;     /* 32pxのborderを指定 */
  border-right: solid 36px transparent;  /* 幅を合わせるため右線は13pxにする */
  border-left: solid 36px #FFF;          /* 白い三角形を作成して▷の形で上に重ねて削り取る */
  top: 0px;  /* 重ねる位置(縦軸)を調整 */
  left: 0px;    /* 重ねる位置(横軸)を調整 */
  z-index: 1; /* 重なり順を指定 */
}

.flow_flex_num03 li:nth-child(1)::after {
    border: solid 138px transparent;
    border-left: solid 49px #E1E7F5;
    border-right: solid 49px transparent;
    top: 0px;
    right: -98px;
    z-index: 2;
}
.flow_flex_num03 li:nth-child(2)::after {
  border: solid 138px transparent;  /* 25pxのborderを指定 */
  border-left: solid 36px #C4D7EC; /* 左のborderで背景色と同じ▶の部分を作成する */
  border-right: solid 36px transparent; /* 幅を合わせるために右線は10pxにする */
  top: 0px;       /* 重ねる位置(縦軸)を調整 */
  right: -36px; /* 重ねる位置(横軸)を調整 */
  z-index: 2;   /* 重なり順の優先度を他よりも上げる */
}
.flow_flex_num03 li:nth-child(1){
  background: #E1E7EE;
  width: 560px;
  padding: 30px 0;
  padding-left: 25px;
}
.flow_flex_num03 li:nth-child(2){
  background: #A0B8D5;
  width: 300px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  line-height: 3;
  text-align: center;
}

.flow_flex_num03 li:nth-child(2)::after {
  content: "";
  position: absolute;
  top: 0;
  right: -68px;
  width: 0;
  height: 0;
  border-left: 32px solid #A0B8D5;
  border-top: 138px solid transparent;
  border-bottom: 138px solid transparent;
}

.num03_flex{
  display: flex;
  width: 429px;
  justify-content: space-between;
}
.num03_text{
  padding-bottom: 20px;
  font-weight: bold;
  width: 429px;
}
.flow_flex_num03 p{
  text-align: center;
}

.bus_bnr .bnr_list {
    margin-top: 100px;
}

.mat_table_outer {
    margin-top: 40px;
}
.mat_table {
    width: 100%;
    background: #fff;
}
.mat_table th {
    background:#6282b0;
    color: #fff;
    font-weight: normal;
    text-align: center;
    padding: 15px;
}
.mat_table td {
    padding: 15px;
  border-right: 1px solid #164E9050;
  border-bottom: 1px solid #164E9050;
}
.mat_table td:last-child{
  border-right: none;
}

.mat_gallery {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    text-align: center;
}
.mat_card {
    margin-top: 30px;
}
.mat_name{
  margin-top: 10px;
}
.mb_20{
  position: relative;
  left: 20px;
}
.nouhin{
  position: relative;
  left: 1px;
}
.nouhin p{
  position: relative;
  left: 30px;
}
/* 固有レスポンシブ
------------------------------------------------------
------------------------------------------------------*/
/*タブレット（縦）*/
@media screen and (orientation: portrait) and (min-width: 768px){
  .ipadposi{
    position: relative;
    left: 15px;
  }
}

@media screen and (max-width: 767px) {

.intro_innre{
  padding: 0;
}
.intro {
    width: 100%;
    padding: 60px 5%;
}
.intro_inner {
    flex-direction: column;
    align-items: center;
}
.intro_text {
    margin-top: 30px;
}
.content {
    padding: 60px 5%;
}
.content_flex {
    flex-direction: column;
    align-items: center;
}
.floc {
  width: 100%;
  background-position: 20%;
}
.flow_midashi {
    max-width: 100%;
    padding: 10px 10%;
    font-size: 1.6rem;
}
.flow_cell.mr {
    margin-right: 5%;
}
.flow_text.sp_left {
    text-align: left;
    min-height: 150px;
}

.mb_20,.nouhin p{
  position: relative;
  left: 0px;
}

.mat_table,
.mat_table tr,
.mat_table th,
  .mat_table td{
    display: block;
    width: 100%;
  }
.mat_table td:first-child{
  background: #164E9030;
  border-right: none;
}
.mat_card {
    max-width: 49%;
}
.mat_name {
    font-size: 1.2rem;
}
.floc .sec-title {
    font-size: 2.5rem;
  max-width: 90%;
  margin: auto;
}
.floc .sec-title .ft-1 {
    font-size: 5rem;
}
.in_floc_inner {
    max-width: 90%;
    width: 100%;
    margin: 50px auto;
}
.flex {
    flex-wrap: wrap-reverse;
    justify-content: center;
}
.flex_right {
  margin-bottom: 20px;
}
.usage {
    justify-content: space-around;
    flex-wrap: wrap;
}
.usage_card {
    max-width: 160px;
  margin: 20px 0;
}
  
.flow_inner {
    max-width: 90%;
  margin: auto;
}
.flow_flex {
  display: block;
}
  .flow_flex li{
    margin: auto;
    padding: 30px 0;
  margin-bottom: 10px;
  }
.flow_flex li:nth-child(1)::after {
    border: solid 138px transparent;
    border-left: solid 18px #E1E7EE;
    border-right: solid 18px transparent;
    top: 65px;
    right: 118px;
    z-index: 2;
    transform: rotate(90deg);
}
.flow_flex li:nth-child(2)::before {
    border: solid 136px transparent;
    border-right: solid 18px transparent;
    border-left: solid 18px #FFF;
    top: -118px;
    left: 116px;
    z-index: 1;
    transform: rotate(90deg);
}
.flow_flex li:nth-child(2)::after {
    border: solid 135px transparent;
    border-left: solid 18px #C4D7EC;
    border-right: solid 18px transparent;
    top: 53px;
    right: 118px;
    z-index: 2;
  transform: rotate(90deg);
}
.flow_flex li:nth-child(3)::before {
    border: solid 136px transparent;
    border-right: solid 18px transparent;
    border-left: solid 18px #FFF;
    top: -118px;
    left: 116px;
    z-index: 1;
    transform: rotate(90deg);
}
.flow_flex li:nth-child(3)::after {
    content: "";
    position: absolute;
    top: 55px;
    right: 122px;
    width: 0;
    height: 0;
    border-left: 20px solid #A0B8D5;
    border-top: 133px solid transparent;
    border-bottom: 133px solid transparent;
    transform: rotate(90deg);
  }
  .sp_flex_num02{
    display: flex;
    width: 300px;
}
.flow_flex_num02 {
    flex-wrap: wrap;
}

.flex_num02_inner {
    max-width: 90%;
    flex-wrap: wrap;
}
.flow_flex_num02 .sec_num02:nth-child(1) {
    width: 100%;
    padding: 15px 0;
    margin-bottom: 0px;
}
.flow_flex_num02 .sec_num02:nth-child(2) {
    width: 100%;
    padding: 15px 0;
}
  .ft_num02{
    margin-bottom: 70px;
  }
  .flow02_img01{
    margin-top: 30px;
  }
  .flow02_img{
    margin-top: 72px;
  }
.flex_num02_inner .left p{
    line-height: 1.5;
  }
.flow_flex_num02 li:nth-child(1) {
    background: #E1E7EE;
    width: 300px;
  padding: 30px 0;
}
.flow_flex_num02 .ft_num02:nth-child(1)::after {
    border: solid 150px transparent;
    border-left: solid 42px #E1E7EE;
    border-right: solid 18px transparent;
    top: 78px;
    right: 121px;
    z-index: 2;
    transform: rotate(90deg);
}
.flow_flex_num02 .sec_num02:nth-child(1)::after {
    border: solid 76px transparent;
    border-left: solid 30px #C4D7EC;
    border-right: solid 18px transparent;
    top: 260px;
    right: 51px;
    z-index: 2;
    transform: rotate(90deg);
}
.flow_flex_num02 .sec_num02:nth-child(2)::after {
    border: solid 76px transparent;
    border-left: solid 30px #A0B8D5;
    border-right: solid 18px transparent;
    top: 260px;
    right: 51px;
    z-index: 2;
    transform: rotate(90deg);
}
  .flow_row.last{
    margin-bottom: 50px;
  }
.flow_flex_num03 {
    display: block;
}
.flow_flex_num03 li:nth-child(1) {
  width: 300px;
  margin-bottom: 5px;
  padding-left: 0px;
  margin: auto;
}
.num03_flex {
    display: flex;
    width: 100%;
    justify-content: center;
  flex-wrap: wrap;
}
.num03_text {
    text-align: center;
    width: 100%;
}
.flow_flex_num03 li:nth-child(2) {
    padding: 80px 0 30px;
  margin: auto;
}
.flow_flex_num03 li:nth-child(1)::after {
    border: solid 153px transparent;
    border-left: solid 18px #E1E7F5;
    border-right: solid 18px transparent;
    top: 307px;
    right: 132px;
    z-index: 2;
    transform: rotate(90deg);
}
.nouhin {
  position: relative;
  left: 0px;
  bottom: -7px;
}
.flow_flex_num03 li:nth-child(2)::before {
    border: solid 153px transparent;
    border-right: solid 18px transparent;
    border-left: solid 18px #FFF;
    top: -135px;
    left: 131px;
    z-index: 1;
    transform: rotate(90deg);
}
.flow_flex_num03 li:nth-child(2)::after {
    content: "";
    position: absolute;
    top: 88px;
    right: 116px;
    width: 0;
    height: 0;
    border-left: 32px solid #A0B8D5;
    border-top: 150px solid transparent;
    border-bottom: 150px solid transparent;
    transform: rotate(90deg);
}
.flow_flex_num03 {
    width: 100%;
}
.in_floc_inner.last {
    margin-bottom: 50px;
}
}