/* Introduction Page */
body .container {
  width: 62.5rem;
  margin: 0 auto;
  margin-bottom: 5rem;
}
.introduction-banner {
  margin-bottom: 5rem;
  margin-top: 0.2rem;
}
.img-banner {
  max-width: 100%;
  width: 120rem;
  min-width: 62.5rem;
  height: auto;
  min-width: 62.5rem;
  background-size: cover;
}
.introduction-caption-container {
  width: 62.5rem;
  margin: 0 auto;
  position: relative;
}
.introduction-caption {
  position: absolute;
  bottom: 2.5rem;
}
.introduction-caption-heading {
  font-size: 2.5rem;
  font-weight: bold;
  width: 43.75rem;
  line-height: 1.25;
}
/* We have removed the "Benefits of NDC" part since it is confirmed by JAL that it is not required in Phase1. */
#grid-list {
  display: none;
}
.benefit-title {
  font-size: 2rem;
  margin-bottom: 2.5rem;
  font-weight: bold;
  color: #000000;
}
.benefit-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 1.5rem 1.25rem;
  margin-bottom: 3rem;
}
.benefit-box {
  padding: 1.5rem;
  border-radius: 0.625rem;
  border: solid 1px #cccccc;
}
.img-icon {
  width: 5rem;
  height: 5rem;
}
.benefit-content-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin: 1.5rem 0;
  color: #000000;
}
.benefit-content-explanation {
  font-size: 1rem;
  margin-bottom: 0;
  line-height: 1.5rem;
  color: #333333;
}
.functionality-title-container {
  display: flex;
  margin-bottom: 2.5rem;
}
.functionality-title {
  font-size: 2rem;
  font-weight: bold;
  color: #000000;
  line-height: 2.5rem;
}
.functionality-annotation {
  font-size: 1rem;
  display: flex;
  align-items: flex-end;
  margin-left: 0.5rem;
}
.technology-partner-heading {
  font-size: 1.5rem;
  font-weight: bold;
  color: #000000;
  margin-bottom: 2rem;
  /* we confirmed that we can hide the heading as long as the aggregator is only one company. Therefore, we removed the heading part as of Phase1.*/
  display: none;
}
.technology-partner-table {
  border-collapse: collapse;
  border: solid 1px #cccccc;
  width: 100%;
  margin-bottom: 8px;
}
.technology-partner-table th {
  box-sizing: border-box;
  border: 1px solid #cccccc;
  padding: 0.875rem 0;
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: bold;
  text-align: center;
  background-color: #e2e7ed;
}
.technology-partner-table td {
  height: 5rem;
  text-align: center;
  font-size: 1rem;
  border: 1px solid #cccccc;
}
.technology-partner-table .aggregator-image {
  width: 8.3125rem;
  height: 1.375rem;
}
#technology_partner_SP {
  display: none;
}
.ndc-api-functionality-heading {
  font-size: 2rem;
  font-weight: bold;
  color: #000000;
  line-height: 2.5rem;
  margin: 2.5rem 0 2rem;
}
.ndc-api-functionality-table {
  width: 100%;
  margin-bottom: 0.5rem;
}
.table_1 {
  margin-bottom: 0rem !important;
}
.table_2 th {
  /* width: 9.25rem; */
  border: 1px solid #cccccc;
  box-sizing: content-box;
  text-align: center;
  background-color: #e2e7ed;
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1.5rem;
  padding: 0.75rem 1rem;
}
.table_2 .ndc-api-functionality-function-title {
  box-sizing: content-box;
  background-color: #d5dbe2;
}
.table_2 .ndc-api-functionality-feature-title {
  width: 11.5rem;
  box-sizing: content-box;
}
.table_2 .ndc-api-functionality-table-shop {
  height: 4.5rem;
  font-size: 1rem;
  font-weight: bold;
  background-color: #d5dbe2;
  text-align: left;
  padding: 0;
  padding-left: 1.875rem;
}
.table_2 .ndc-api-functionality-table-shop p {
  width: 7.75rem;
  text-align: center;
}
.table_2 .ndc-api-functionality-table-shopping {
  box-sizing: border-box;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  padding: 1.75rem 0;
  background-color: #e2e7ed;
}
.table_2 td {
  height: auto;
  border: 1px solid #cccccc;
  line-height: 1.5rem;
  padding: 0.75rem 1.25rem;
  text-align: center;
  font-size: 1rem;
  min-height: 4.5rem;
  word-break: break-all;
  overflow-wrap: break-word;
}
.table_2 td:first-child {
  text-align: left;
}
.table_2 th:nth-child(2),
.table_2 th:nth-child(3) {
  width: 18rem;
}
.tick-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.functionality-none {
  width: 1.25rem;
  height: 1.25rem;
  text-align: center;
}
.text-nowrap {
  white-space: nowrap;
}
.ndc-api-functionality-table td {
    word-break: normal;
    overflow-wrap: break-word;
}
#ndc_api_functionality_SP {
  display: none;
}
/* MEDIA QUERY FOR Introduction Page */
@media only screen and (max-width: 767px) {
  body .container {
    width: 100%;
    margin-bottom: 5rem;
  }
  .introduction-banner {
    height: auto;
    margin-bottom: 0;
  }
  .img-banner {
    height: auto;
    max-width: 100%;
    min-width: 0;
  }
  .introduction-caption {
    display: none;
  }
  .benefit-title {
    font-size: 1.25rem;
    margin: 0 0.625rem 1.5rem;
  }
  .benefit-container {
    display: block;
    margin: 0 0.625rem 1rem;
  }
  .benefit-box {
    padding: 1rem 0.625rem;
    margin-bottom: 1rem;
  }
  .benefit-content-title {
    font-size: 1.125rem;
    margin: 1rem 0;
  }
  .functionality-title {
    font-size: 1.25rem;
    margin: 0 0 1.5rem;
  }
  .table_1,
  .table_2 {
    display: none;
  }
  #technology_partner_SP {
    display: block;
  }
  .functionality-title-container-SP {
    display: flex;
    margin: 2rem 0.625rem 1.5rem;
  }
  .functionality-title-SP {
    font-size: 1.25rem;
    font-weight: bold;
    color: #000000;
  }
  .functionality-annotation-SP {
    font-size: 0.875rem;
    display: flex;
    align-items: end;
    margin-left: 0.5rem;
  }
  .technology-partner-heading-SP {
    font-size: 1.125rem;
    font-weight: bold;
    color: #000000;
    margin: 0 0.625rem 1.5rem;
    /* we confirmed that we can hide the heading as long as the aggregator is only one company. Therefore, we removed the heading part as of Phase1.*/
    display: none;
  }
  .technology-partner-box-SP {
    width: auto;
    background-color: #f4f5f6;
    padding: 0 0.625rem;
    border-radius: 0.375rem;
    margin: 0 0.625rem 2rem;
  }
  .technology-partner-message {
    width: auto;
    background-color: #ffffff;
    padding: 0 0.625rem;
    border-radius: 0.375rem;
    margin: 2rem 0.625rem 2rem;
  }
  .content-heading-SP {
    font-size: 0.875rem;
    color: #333333;
    padding: 1rem 0;
  }
  .aggregator-image-SP {
    width: 7.6875rem;
    height: 1.25rem;
    margin-bottom: 1rem;
  }
  .dotted-line {
    border-bottom: 1px dashed #cccccc;
  }
  .content-aggregator-SP {
    font-size: 0.875rem;
    font-weight: bold;
    color: #000000;
    padding-bottom: 1rem;
  }
  .content-version-SP {
    font-size: 0.875rem;
    font-weight: bold;
    color: #000000;
    padding-bottom: 1rem;
  }
  .content-contact-SP {
    font-size: 0.875rem;
    font-weight: bold;
    color: #000000;
    padding-bottom: 1rem;
  }
  #ndc_api_functionality_SP {
    display: block;
  }
  .ndc-api-functionality-heading-SP {
    font-size: 1.25rem;
    font-weight: bold;
    color: #000000;
    margin: 0 0.625rem 1.5rem;
  }
  /* Kcam No.10 */
  .ndc-api-functionality-p {
    margin: 0 0.625rem 1.5rem;
  }
  .ndc-api-functionality-box-SP {
    margin: 0 0.625rem;
    padding: 1rem 0.625rem;
    border-bottom: solid 1px #2a344b;
  }
  .ndc-api-functionality-box-SP:nth-child(odd) {
    background-color: #e2e7ed;
  }
  .ndc-api-functionality-box-SP:nth-child(even) {
    background-color: #f7fcfb;
  }
  .ndc-api-functionality-box-SP:last-child {
    border: none;
    margin-bottom: 5rem;
  }
  .functionality-SP {
    font-size: 0.875rem;
    color: #333333;
    padding-bottom: 1rem;
  }
  .functionality-heading-SP {
    font-size: 1rem;
    font-weight: bold;
    color: #000000;
    padding-bottom: 1rem;
    border-bottom: 1px dashed #cccccc;
  }
  .functionality-flex-box-with-line {
    display: flex;
    padding: 1rem 0;
    border-bottom: 1px dashed #cccccc;
    justify-content: space-between;
  }
  .jal-ndc-api {
    font-size: 0.875rem;
    color: #333333;
    flex-shrink: 0;
    width: 35%;
  }
  .jal-ndc-api-val {
    font-weight: bold;
  }
  .functionality-flex-box-with-line p {
    margin: 0;
    padding-left: 0.5rem;
    text-align: right;
    word-break: break-all;
    overflow-wrap: break-word;
  }
  .functionality-flex-box {
    display: flex;
    padding-top: 1rem;
    justify-content: space-between;
  }
  .gds-edifact {
    font-size: 0.875rem;
    color: #333333;
  }
  .ndc-api-functionality-span {
    margin: 0.25rem 0.625rem 3rem;
  }
  .functionality-flex-box-with-line p {
    word-break: normal;
    overflow-wrap: break-word;
  }
}

/* Kcam No.10 */
.ndc-api-functionality-table td:first-child {
  background: #e6e8eb;
  font-weight: bold;
  text-align: left;
}