#vi_lower {
  background-image: url("/cms/wp-content/themes/sdat_renew/img/tech/vi.webp"); }
  @media screen and (max-width: 767px) {
    #vi_lower {
      background-position: center center; } }

/* techtop
------------------------------------------*/
#contents #techtop .toplink {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5rem;
  flex-wrap: wrap; }
  #contents #techtop .toplink li {
    width: 30%; }
#contents #techtop .specialtyLink ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  #contents #techtop .specialtyLink ul a {
    color: #FFF;
    text-decoration: none;
    font-size: 1.8rem; }
    #contents #techtop .specialtyLink ul a dt:before {
      display: inline-block;
      content: "";
      border: 5px solid transparent;
      border-left: 5px solid #FFF;
      vertical-align: middle;
      margin-right: 5px; }
    #contents #techtop .specialtyLink ul a dd {
      position: relative; }
      #contents #techtop .specialtyLink ul a dd:before {
        content: "";
        width: 100%;
        height: 100%;
        z-index: 2;
        background: #001650;
        opacity: 0.5;
        position: absolute;
        top: 0;
        left: 0; }
    #contents #techtop .specialtyLink ul a:hover dt:before {
      transform: translateX(5px); }
    #contents #techtop .specialtyLink ul a:hover dd:before {
      opacity: 0.3; }
  #contents #techtop .specialtyLink ul li {
    background: #1f4584;
    margin-bottom: 2%; }
  #contents #techtop .specialtyLink ul li:nth-child(2n+1) {
    width: 49%; }
    #contents #techtop .specialtyLink ul li:nth-child(2n+1) dl {
      display: flex;
      align-items: center; }
      #contents #techtop .specialtyLink ul li:nth-child(2n+1) dl dt {
        width: 55%;
        padding: 20px; }
      #contents #techtop .specialtyLink ul li:nth-child(2n+1) dl dd {
        width: 45%; }
  #contents #techtop .specialtyLink ul li:nth-child(2n) {
    width: 49%; }
    #contents #techtop .specialtyLink ul li:nth-child(2n) dl {
      display: flex;
      flex-direction: row-reverse;
      align-items: center; }
      #contents #techtop .specialtyLink ul li:nth-child(2n) dl dt {
        width: 55%;
        padding: 20px; }
      #contents #techtop .specialtyLink ul li:nth-child(2n) dl dd {
        width: 45%; }
@media screen and (max-width: 767px) {
  #contents #techtop .toplink li {
    width: 100%;
    margin-bottom: 10px; }
  #contents #techtop .specialtyLink ul a {
    font-size: 1.4rem; }
    #contents #techtop .specialtyLink ul a dd:before {
      opacity: 0.2; }
  #contents #techtop .specialtyLink ul li:nth-child(1) {
    width: 49%; }
    #contents #techtop .specialtyLink ul li:nth-child(1) dl {
      display: grid;
      align-items: center; }
      #contents #techtop .specialtyLink ul li:nth-child(1) dl dt {
        order: 2;
        width: 100%;
        padding: 10px; }
      #contents #techtop .specialtyLink ul li:nth-child(1) dl dd {
        order: 1;
        width: 100%; }
  #contents #techtop .specialtyLink ul li:nth-child(2) {
    width: 49%; }
    #contents #techtop .specialtyLink ul li:nth-child(2) dl {
      display: grid;
      flex-direction: row-reverse;
      align-items: center; }
      #contents #techtop .specialtyLink ul li:nth-child(2) dl dt {
        order: 2;
        width: 100%;
        padding: 10px; }
      #contents #techtop .specialtyLink ul li:nth-child(2) dl dd {
        order: 1;
        width: 100%; }
  #contents #techtop .specialtyLink ul li:nth-child(n+3) {
    width: 100%; }
    #contents #techtop .specialtyLink ul li:nth-child(n+3) dl {
      display: flex;
      align-items: center; }
      #contents #techtop .specialtyLink ul li:nth-child(n+3) dl dt {
        width: 51%;
        order: 2;
        text-align: left;
        padding: 10px; }
      #contents #techtop .specialtyLink ul li:nth-child(n+3) dl dd {
        width: 49%;
        order: 1; } }

/* concept
------------------------------------------*/
#contents #concept .define {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5rem;
  flex-wrap: wrap;
  align-items: center; }
  #contents #concept .define dt {
    width: 15em;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #0c1f55;
    position: relative; }
    #contents #concept .define dt span:first-child {
      border: 1px solid #CCC;
      display: inline-block;
      padding: 1rem; }
    #contents #concept .define dt span:last-child {
      padding-left: 2rem; }
    #contents #concept .define dt:nth-child(1) span:first-child {
      background: #fff1dc; }
    #contents #concept .define dt:nth-child(3) span:first-child {
      background: #fee4db; }
    #contents #concept .define dt:nth-child(5) span:first-child {
      background: #fddad9; }
    #contents #concept .define dt:nth-child(7) span:first-child {
      background: #f6d3e4; }
    #contents #concept .define dt:nth-child(9) span:first-child {
      background: #f2d4eb; }
    #contents #concept .define dt:nth-child(11) span:first-child {
      background: #ead6f1; }
    #contents #concept .define dt:nth-child(13) span:first-child {
      background: #ddd9f7; }
    #contents #concept .define dt:after {
      content: "";
      width: 1px;
      height: calc(100% - 2rem);
      position: absolute;
      top: 1rem;
      right: 0;
      background: #a6abbf; }
  #contents #concept .define dd {
    width: calc(100% - 15em);
    padding: 1rem 1rem 1rem 3rem;
    margin-bottom: 1rem; }
#contents #concept .example {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  #contents #concept .example .image {
    width: 20%; }
    #contents #concept .example .image img {
      max-width: 140px; }
  #contents #concept .example .data {
    width: 75%; }
    #contents #concept .example .data .difinition {
      padding: 10px;
      margin-bottom: 30px;
      background: #eaf2f6; }
@media screen and (max-width: 1024px) {
  #contents #concept .example {
    align-items: flex-start; }
    #contents #concept .example .image img {
      max-width: 100%; }
    #contents #concept .example .tableformat01 th {
      white-space: nowrap; } }
@media screen and (max-width: 767px) {
  #contents #concept .example .data .tableformat01 th, #contents #concept .example .data .tableformat01 td {
    display: block; }
  #contents #concept .example .data .tableformat01 th {
    background: #eff0f4; }
  #contents #concept .define {
    display: block; }
    #contents #concept .define dt {
      width: 100%;
      padding: 1rem 1rem 0 1rem; }
      #contents #concept .define dt:after {
        display: none; }
    #contents #concept .define dd {
      width: 100%;
      padding: 0rem 1rem 1rem 6rem; } }

/* facility
------------------------------------------*/
#contents #facility .tableformat01 {
  width: 100%; }
  #contents #facility .tableformat01 tbody th {
    width: 50%; }
  #contents #facility .tableformat01 tbody td:nth-child(2) {
    width: 6em;
    text-align: center; }
@media screen and (max-width: 1024px) {
  #contents #facility .tableformat01 {
    width: 100%; }
    #contents #facility .tableformat01 tr {
      width: 100%;
      display: flex;
      flex-wrap: wrap; }
    #contents #facility .tableformat01 thead th {
      text-align: left; }
    #contents #facility .tableformat01 thead th:first-child {
      width: 100%;
      border-bottom: 1px solid #CCC; }
    #contents #facility .tableformat01 thead th:nth-child(2) {
      width: 6em; }
    #contents #facility .tableformat01 thead th:nth-child(3) {
      width: calc(100% - 6em); }
    #contents #facility .tableformat01 tbody th {
      width: 100%;
      background: #eff0f4; }
    #contents #facility .tableformat01 tbody td {
      width: calc(100% - 6em); }
    #contents #facility .tableformat01 tbody td:nth-child(2) {
      width: 6em;
      text-align: center; } }

/* property
------------------------------------------*/
#contents #property .tokuseilist {
  display: grid;
  grid-template-columns: 1fr 1fr; }
#contents #property .tokusei thead th {
  vertical-align: middle; }

/* swading 
------------------------------------------*/
#contents #swading .swading_01 {
  display: flex;
  justify-content: space-between;
  grid-gap: 20px;
  flex-wrap: wrap; }
  #contents #swading .swading_01 .text {
    width: calc(35% - 10px); }
  #contents #swading .swading_01 .photo {
    width: calc(60% - 10px); }
#contents #swading .swading_02 {
  display: flex;
  justify-content: space-between;
  grid-gap: 20px;
  flex-wrap: wrap; }
  #contents #swading .swading_02 .text {
    width: calc(60% - 10px); }
  #contents #swading .swading_02 .photo {
    width: calc(35% - 10px); }
@media screen and (max-width: 1024px) {
  #contents #swading .swading_01 > * {
    width: 100% !important; }
  #contents #swading .swading_02 > * {
    width: 100% !important; } }

/* angle 
------------------------------------------*/
#contents #angle .angle_facility {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
  grid-gap: 2.5%; }
  #contents #angle .angle_facility dl {
    width: 45%;
    margin-bottom: 60px; }
    #contents #angle .angle_facility dl dt {
      color: #0c1f55;
      font-size: 2.0rem;
      padding-left: 26px;
      position: relative;
      font-weight: bold; }
      #contents #angle .angle_facility dl dt:before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width: 12px;
        height: 1px;
        background: #d2d5df; }
      @media screen and (max-width: 1024px) {
        #contents #angle .angle_facility dl dt {
          font-size: 1.6rem; } }
    #contents #angle .angle_facility dl dd.photo {
      margin: 1rem 0; }
@media screen and (max-width: 1024px) {
  #contents #angle .angle_facility {
    grid-gap: 4%; }
    #contents #angle .angle_facility dl {
      width: 48%; } }
@media screen and (max-width: 767px) {
  #contents #angle .angle_facility {
    grid-gap: 2%; }
    #contents #angle .angle_facility dl {
      width: 100%; } }

/* machining
------------------------------------------*/
#contents #machining .photo {
  margin: 5rem 0; }

/* weld
------------------------------------------*/
#contents #weld .weld_01 {
  display: flex;
  justify-content: space-between;
  grid-gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 3rem;
  align-items: flex-start; }
  #contents #weld .weld_01 .text {
    width: calc(50% - 10px); }
  #contents #weld .weld_01 .photo {
    width: calc(48% - 10px); }
@media screen and (max-width: 767px) {
  #contents #weld .weld_01 .text {
    width: 100%;
    margin-bottom: 3rem; }
  #contents #weld .weld_01 .photo {
    width: 100%; } }