@charset 'utf-8';
:root {
  /* topic_num の直径 */
  --topic-circle: 67px;
}
.l_nav {
  display: flex;
  margin-top: calc(var(--spacing-unit) * -1);
  padding-bottom: var(--spacing-vertical);

  flex-wrap: wrap;
  justify-content: space-between;
}
.l_nav_link {
  font-size: var(--font-size-22);
  flex-basis: calc((100% - var(--spacing-unit)) / 2);
  margin: var(--spacing-unit-lg) 0 0;
  font-weight: 700;
  position: relative;
  display: flex;
  min-height: 222px;
  padding: var(--spacing-unit);
  background: #EDF5FA;
  border: 1px solid #ccc;
  border-radius: 10px;

  justify-content: center;
  align-items: center;
}
.l_nav_link::after {
  position: absolute;
  left: 50%;
  bottom: 18px;
  display: block;
  content: '';
  border-bottom: solid 3px #2199de;
  border-right: solid 3px #2199de;
  width: 17px;
  height: 17px;
  transform: translateX(-50%) rotate(45deg);
}

.topic_num {
  width: var(--topic-circle);
  height: var(--topic-circle);
  line-height: var(--topic-circle);
  top: calc(var(--topic-circle) * -1/2);
  left: calc(50% - calc(var(--topic-circle) * 1/2));
  font-size: var(--font-size-30);
  position: absolute;
  display: block;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  background: #2199de;
}
.topic .topic_num {
  left: 0;
  top: .6em;
}
.bgclr_pnk.topic .topic_num,
.bgclr_blu.topic .topic_num,
.bgclr_grn.topic .topic_num {
  background: #FFF;
  color: #2199de;
}

.topic .sec_ttl.h2 {
  position: relative;
  text-align: left;
  padding-left: calc(var(--topic-circle) + 10px);
}
.topic .sec_ttl.h3:not(.klweb_item_ttl) {
  text-align: left;
  padding-bottom: .6em;
  border-bottom: 2px solid;
}

.feature_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 calc(var(--spacing-unit) * -1/2) 0 calc(var(--spacing-unit) * -1/2);
}
.feature_item {
  font-size: var(--font-size-18);
  font-weight: 700;
  flex-basis: calc(100% / 3 - var(--spacing-unit));
  margin: var(--spacing-unit) calc(var(--spacing-unit) / 2) 0 calc(var(--spacing-unit) / 2);
  display: flex;
  min-height: 164px;
  padding: calc(var(--spacing-unit) / 2);
  color: #38393c;
  border: calc(var(--spacing-unit) / 2) solid #F0F0F0;
  background: #fff;
  text-align: center;

  justify-content: center;
  align-items: center;
}

.topic_img_col2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-top: calc(var(--spacing-vertical-sm) - var(--spacing-unit));
}
.topic_img_col2 > div {
  flex-basis: calc((100% - var(--spacing-unit)) /2);
  margin-top: var(--spacing-unit);
}
.topic_img_col2.topic_img_sub > div:first-child {
  flex-basis: 60%;
}
.topic_img_col2.topic_img_sub > div:last-child {
  flex-basis: 40%;
}

.klweb_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: calc(var(--spacing-vertical) - var(--spacing-unit));
}
.klweb_item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #38393c;
  flex-basis: calc((100% - var(--spacing-unit)) /2);
  margin-top: var(--spacing-unit);
  padding: var(--spacing-unit-sm) var(--spacing-unit) var(--spacing-unit);
  background: #fff;
}
.klweb_item_top {
  flex: 1 0 auto;
  background: #F0F0F0;
}
.klweb_item_ttl {
  background: #FFF;
  min-height: 3.5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.klweb_item_ttl p {
  text-align: center!important;
}
.klweb_item_ttl p > span {
  border-bottom: 5px solid #2199DE;
  padding: 0 .5em;
}
.klweb_item_txt {
  background: #FFF;
  text-align: center;
  font-size: var(--font-size-18);
  padding-top: var(--spacing-unit-sm);
  padding-bottom: var(--spacing-unit-sm);
}
.klweb_item_txt > span {
  font-size: var(--font-size-20);
  font-weight: 500;
  color: #2199DE;
}
.klweb_item_box {
  padding: var(--spacing-unit-sm);
}

.klweb_item_label {
  display: flex;
  flex-wrap: wrap;
}
.klweb_item_label > p {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  flex-basis: 85px;
  width: 85px;
  height: 85px;
  border: 5px solid #00A9F4;
  margin: var(--spacing-unit-sm) var(--spacing-unit-sm) var(--spacing-unit-sm) 0;
}
p.klweb_label_blu {
  border-color: #00A9F4;
  background: #D8F3FF;
}
p.klweb_label_pnk {
  border-color: #EB79A2;
  background: #F7E4EB;
}
p.klweb_label_grn {
  border-color: #1FB088;
  background: #d8f0e7;
}
/* 表組
*****************************************/
  .sec_table_box {
    overflow-x: auto;
    width: 100%;
    margin-top: var(--spacing-vertical-sm);
  }
  .sec_table_box table {
    font-size: var(--font-size-14);
    width: 100%;
    text-align: center;
    color: #38393c;
    background: #fff;
    border-collapse: collapse;
  }
  .sec_table_box table.sec_table_md {
    min-width: 550px;
  }
  .sec_table_box table.sec_table_lg {
    min-width: 800px;
  }
  .sec_table_box table th,
  .sec_table_box table td {
    padding: calc(var(--spacing-unit) * 1/3);
    border: 1px solid #dadada;
  }
  .sec_table_box table thead th {
    background: #F0F0F0;
    white-space: nowrap;
  }

.sec_img_box > div {
  position: relative;
}
.sec_img_box > div .img_copy {
  color: #FFF;
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: var(--font-size-14);
}
#topic1 .sec_img_box img {
  background: #FFF;
  border: calc(var(--spacing-unit) / 2) solid #F0F0F0;
}

/* （CASE）中距離特定ご納品先様向けミニプラットフォーム
*****************************************/
  .minpf_case {
    align-items: flex-start;
  }
  .minpf_case_img,
  .minpf_case_txt {
    position: relative;
  }
  .minpf_case_txt {
    margin-top: 10px;
    padding: 0 6%;
  }
  .minpf_case_txt p {
    font-weight: 700;
    padding: .6em;
    text-align: center;
    border: 1px solid #aaa;
    border-radius: 8px;
    background: #dbf0fc;
  }
  .minpf_case_txt ul {
    margin-top: 10px;
  }
  .minpf_case > div:first-child .minpf_case_img::before,
  .minpf_case > div:first-child .minpf_case_img::after,
  .minpf_case > div:first-child .minpf_case_txt::before {
    right: -8%;
    right: calc(var(--spacing-unit) / -2 - 18px);
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    content: '';
    border-width: 19px 0 19px 32.9px;
    border-style: solid;
    border-color: transparent transparent transparent #0070bd;
  }
  .minpf_case > div:first-child .minpf_case_img::before {
    top: 7.5%;
  }
  .minpf_case > div:first-child .minpf_case_img::after {
    top: 54%;
  }
  .minpf_case > div:first-child .minpf_case_txt::before {
    top: -.5%;
  }

/* 各種約款
*****************************************/
  .yakkan_list_txt_box {
      color: #0070bd;
      text-decoration: underline;
  }
  .yakkan_list_txt_cont li + li {
      margin-top: 25px;
  }
  .yakkan_list_txt_cont {
      max-width: 330px;
      margin: auto;
  }


@media screen and (max-width: 767px) {
  :root {
    /* topic_num の直径 */
    --topic-circle: 50px;
  }
  .l_nav {
    display: block;
    padding-bottom: var(--spacing-vertical-sm);
  }
  .l_nav_link {
    min-height: 100%;
    padding: calc(var(--spacing-unit-lg)) var(--spacing-unit);
  }
  .l_nav_link::after {
    bottom: 16px;
    width: 12px;
    height: 12px;
  }
  .feature_list {
    display: block;
  }
  .feature_item {
    min-height: 100%;
  }
  .klweb_list {
    display: block;
  }
  .klweb_item {
    padding: calc(var(--spacing-unit) * 3/2) var(--spacing-unit);
  }
  .klweb_item_ttl {
    min-height: 100%;
  }
  .klweb_item_ttl p > span {
    border-width: 3px;
  }
  .klweb_item_txt {
    padding-top: var(--spacing-unit);
  }
  .sp_topic_img_col1 {
    display: block;
  }

/* （CASE）中距離特定ご納品先様向けミニプラットフォーム
*****************************************/
  .minpf_case > div:first-child .minpf_case_img::before,
  .minpf_case > div:first-child .minpf_case_img::after {
    display: none;
  }
  .minpf_case_txt {
    padding: 0 5.8%;
  }
  .minpf_case > div:first-child {
    margin-bottom: 70px;
  }
  .minpf_case > div:first-child .minpf_case_txt::before {
    top: auto;
    right: 50%;
    bottom: -60px;
    transform: translateX(50%) rotate(90deg);
  }

}