@font-face {
  font-family: 'DIN';
  src: url("/common/fonts/D-DIN/D-DIN-Bold.woff") format("woff");
  font-weight: 700;
}

@font-face {
  font-family: 'DIN';
  src: url("/common/fonts/D-DIN/D-DIN.woff") format("woff");
  font-weight: 400;
}

.support-inner {
  position: relative;
  z-index: 5;
}

.support-inner h2 {
  color: #142c4b;
  padding-bottom: 10px;
}

@media print, screen and (min-width: 768px) {
  .support-inner h2 {
    margin-bottom: 35px;
  }
}

@media only screen and (max-width: 767px) {
  .support-inner h2 {
    margin-bottom: 20px;
  }
}

.support-inner h2 span {
  position: relative;
  border-bottom: 3px solid #a2d827;
  line-height: 2;
}

@media print, screen and (min-width: 768px) {
  .support-inner h2 span {
    padding-bottom: 12px;
  }
}

@media only screen and (max-width: 767px) {
  .support-inner h2 span {
    padding-bottom: 6px;
  }
}

.support-inner h3 {
  font-weight: bold;
  padding-left: 0;
  border: none;
}

@media print, screen and (min-width: 768px) {
  .support-inner h3 {
    font-size: 30px;
    margin-bottom: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .support-inner h3 {
    font-size: 20px;
    margin-bottom: 20px;
  }
}

.support-inner h4 {
  border-left: 3px solid  #29aae3;
  font-weight: 400;
}

@media print, screen and (min-width: 768px) {
  .support-inner h4 {
    font-size: 27px;
    padding-left: 20px;
    margin-bottom: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .support-inner h4 {
    font-size: 19px;
    padding-left: 15px;
    margin-bottom: 20px;
  }
}

.support-inner h5 {
  position: relative;
  font-weight: bold;
  counter-increment: num;
}

@media print, screen and (min-width: 768px) {
  .support-inner h5 {
    font-size: 20px;
    padding-left: 100px;
    margin-bottom: 55px;
    letter-spacing: 5px;
  }
}

@media only screen and (max-width: 767px) {
  .support-inner h5 {
    font-size: 17px;
    padding-left: 70px;
    margin-bottom: 25px;
    letter-spacing: 3px;
  }
}

.support-inner h5::before, .support-inner h5::after {
  position: absolute;
  display: block;
}

.support-inner h5::before {
  content: counter(num, decimal-leading-zero);
  left: 0;
  color: #29aae3;
  font-family: 'DIN';
  line-height: 1.6;
  font-weight: 700;
  z-index: 2;
}

@media print, screen and (min-width: 768px) {
  .support-inner h5::before {
    top: -10px;
    font-size: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .support-inner h5::before {
    top: -5px;
    font-size: 27px;
  }
}

.support-inner h5::after {
  content: "";
  background-color: #ebf4f8;
  -webkit-transform: matrix(1, 0, -1, 1, 0, 0);
  transform: matrix(1, 0, -1, 1, 0, 0);
  z-index: 1;
}

@media print, screen and (min-width: 768px) {
  .support-inner h5::after {
    width: 20px;
    height: 60px;
    top: -10px;
    left: 45px;
  }
}

@media only screen and (max-width: 767px) {
  .support-inner h5::after {
    width: 14px;
    height: 40px;
    top: -5px;
    left: 30px;
  }
}

@media print, screen and (min-width: 768px) {
  .support-inner + .support-inner {
    margin-top: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .support-inner + .support-inner {
    margin-top: 40px;
  }
}

.support-inner img {
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .support-contents:first-of-type {
    margin-top: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .support-contents:first-of-type {
    margin-top: 40px;
  }
}

@media print, screen and (min-width: 768px) {
  .support-contents + .support-contents {
    margin-top: 80px;
    padding-top: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .support-contents + .support-contents {
    margin-top: 40px;
    padding-top: 40px;
  }
}

.support-contents-inner {
  counter-reset: num;
}

@media print, screen and (min-width: 768px) {
  .support-contents-inner + .support-contents-inner {
    margin-top: 95px;
  }
}

@media only screen and (max-width: 767px) {
  .support-contents-inner + .support-contents-inner {
    margin-top: 50px;
  }
}

@media print, screen and (min-width: 768px) {
  .support-contents-inner-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

@media print, screen and (min-width: 768px) {
  .support-contents-inner-group div {
    width: calc(50% - 25px);
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .support-contents-inner-group div {
    margin-bottom: 30px;
  }
}

.support-contents-inner-group div strong {
  display: block;
  border-bottom: 1px solid #d8d8d8;
  position: relative;
}

@media print, screen and (min-width: 768px) {
  .support-contents-inner-group div strong {
    font-size: 20px;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .support-contents-inner-group div strong {
    font-size: 17px;
    padding-bottom: 5px;
    margin-bottom: 10px;
  }
}

.support-contents-inner-group div strong::before {
  content: '';
  position: absolute;
  display: block;
  height: 1px;
  width: 80px;
  background-color: #142c4b;
  left: 0;
  bottom: -1px;
}

@media print, screen and (min-width: 768px) {
  .support-contents-inner-group div + div {
    margin-left: 50px;
  }
}

@media only screen and (max-width: 767px) {
  .support-contents-inner-group div + div {
    margin-top: 30px;
  }
}

.support-contents-inner-group div:nth-of-type(2n+1) {
  margin-left: 0;
}

.support-contents-inner-group div:nth-child(2n+1):nth-last-child(-n+2),
.support-contents-inner-group div:nth-child(2n+1):nth-last-child(-n+2) ~ div {
  margin-bottom: 0;
}

.support-contents-inner-group div ul {
  margin-top: 10px;
  padding-left: 20px;
}

.support-contents-inner-group div li {
  list-style-type: disc;
}

@media print, screen and (min-width: 768px) {
  .support-contents-inner-item + .support-contents-inner-item {
    margin-top: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .support-contents-inner-item + .support-contents-inner-item {
    margin-top: 40px;
  }
}

@media print, screen and (min-width: 768px) {
  .support-contents-inner-image {
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .support-contents-inner-image {
    margin-bottom: 20px;
  }
}

@media print, screen and (min-width: 768px) {
  .support-contents-inner-image .operational-support {
    margin-bottom: 60px;
  }
}

@media only screen and (max-width: 767px) {
  .support-contents-inner-image .operational-support {
    margin-bottom: 45px;
  }
}

.support-contents.border {
  border-top: 1px solid #fff;
}

@media print, screen and (min-width: 768px) {
  .support-contents-image figure {
    text-align: center;
  }
}

@media print, screen and (min-width: 768px) {
  .support-contents-image .imgSize {
    max-width: 900px;
    width: 100%;
  }
}

.support-efforts-area {
  border: 3px solid #e7e8ef;
}

@media print, screen and (min-width: 768px) {
  .support-efforts-area {
    padding: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media only screen and (max-width: 767px) {
  .support-efforts-area {
    padding: 20px 20px 30px;
  }
}

@media print, screen and (min-width: 768px) {
  .support-efforts-image {
    min-width: 400px;
  }
}

@media print, screen and (min-width: 768px) {
  .support-efforts-image + .support-efforts-contents {
    margin-left: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .support-efforts-image + .support-efforts-contents {
    margin-top: 15px;
  }
}

.support-efforts-contents strong {
  display: block;
}

@media print, screen and (min-width: 768px) {
  .support-efforts-contents strong {
    font-size: 20px;
    margin-bottom: 10px;
  }
}

@media only screen and (max-width: 767px) {
  .support-efforts-contents strong {
    font-size: 17px;
    margin-bottom: 5px;
  }
}

@media print, screen and (min-width: 768px) {
  .support-efforts-contents .btn {
    margin-top: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .support-efforts-contents .btn {
    margin-top: 20px;
  }
}

@media print, screen and (min-width: 768px) {
  .support-efforts-contents .btn a {
    margin: inherit;
  }
}


/*------------------------------------------------------

    CONTACT

------------------------------------------------------*/
#contact{
    .section__contents{
        background-color: rgb(255 255 255 / 70%);
        padding: 80px;
        border: 1px solid #fff;
    }
    form{
        table{
            width: 100%;
            th,td{
                display: block;
                text-align: left;
                padding: 5px 0;
            }
            th{
                color:$mainColor;
                span{
                    background-color: $mainColor;
                    color: #fff;
                    font-size: 11px;
                    padding: 2px 14px 4px;
                    margin-right: 10px;
                    font-weight: 300;
                    border-radius: 3px;
                    vertical-align: 2px;
                }
            }
            td{
                padding-bottom: 40px;
            }
        }
        input,
        textarea{
            width: 100%;
            padding: 10px 20px;
        }
        .btn{
            display: flex;
            gap: 15px;
            input.confirmation-btn{
                background-color: $mainColor;
                border-color: $mainColor;
                color: #fff;
                padding: 15px 0;
                border-radius: 4px;
                width: 65%;
                margin: 0 auto;
            }
        }
    }
}