@import url(./common/_variable.css);

/* about */
/* ============================================ */

.column_header_service {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 3.57cqw;
  padding: 8cqw 0 0;
  @media (width < 480px) {
    grid-template-columns: repeat(1,1fr);
    gap: 70px;
    padding: 40px 0 0;
  }
}

.header_service {
  a {
    border: var(--main_c) solid 6px;
    border-radius: 16px;
    padding: 5cqw 3.57cqw 3.57cqw;
    position: relative;
    display: block;
    height: 100%;
    transition: all 0.3s ease-out;
    @media (width < 480px) {
      border: var(--main_c) solid 4px;
      padding: 30px 20px 20px;
    }
    &::after {
      content: "";
      display: block;
      aspect-ratio: 4;
      clip-path: polygon(50% 100%,100% 0,0 0);
      background: var(--main_c);
      position: absolute;
      height: 50px;
      bottom: -50px;
      left: 50%;
      transform: translateX(-50%);
      transition: all 0.3s ease-out;
      @media (width < 480px) {
        height: 30px;
        bottom: -30px;
      }
    }
    .box_icon {
      width: 10cqw;
      min-width: 60px;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      background-color: var(--main_c);
      position: absolute;
      top: -6cqw;
      left: 50%;
      transform: translateX(-50%);
      transition: all 0.3s ease-out;
      @media (width < 480px) {
        top: -36px;
      }
    }
    &:hover {
      border: var(--fac01) solid 6px;
      &::after {
        background-color: var(--fac01);
      }
      .box_icon {
        background-color: var(--fac01);
      }
      .txt_head_small {
        color: var(--fac01);
      }
    }
  }
}

.box_txt_head {
  text-align: center;
}
.txt_head_large {
  font-size: clamp(2rem, 1.29vw + 1.515rem, 4rem);
  font-weight: 700;
}
.txt_head_small {
  font-size: clamp(1.8rem, 0.26vw + 1.703rem, 2.2rem);
  font-weight: 700;
  color: var(--main_c);
  transition: all 0.3s ease-out;
}

.txt_service_head {
  border-top: #666 dotted 1px;
  padding: 1.78cqw 0 0;
  margin: 1.78cqw 0 0;
  text-align: justify;
}

.arrow {
  &::after {
    content: "";
    display: block;
    width: 50cqw;
    aspect-ratio: 4;
    clip-path: polygon(50% 100%,100% 0,0 0);
    background: var(--main_c);
    opacity: 0.3;
    position: absolute;
    height: 7cqw;
    bottom: -11cqw;
    left: 50%;
    transform: translateX(-50%);
  }
}

.box_plando {
  padding: 3.57cqw 0 0;
  position: relative;
  @media (width < 896px) {
    padding: 20px 0 0;
  }
  table {
    width: 100%;
    th,td {
      padding: 20px;
      vertical-align: middle;
      box-sizing: border-box;
      @media (width < 896px) {
        padding: 10px;
      }
    }
    th {
      font-size: clamp(1.8rem, 0.39vw + 1.654rem, 2.4rem);
      font-weight: 700;
      width: 60%;
    }
    td {
      border-bottom: #666 dotted 1px;
      dl {
        dt {
          font-size: clamp(1.8rem, 0.39vw + 1.654rem, 2.4rem);
          font-weight: 700;
        }
        dd {
          padding: 5px 0 0 1em;
        }
      }
      ul {
        li {
          padding: 4px 0 4px 0.6em;
          text-indent: -0.6em;
          line-height: 1.4em;
          &::before {
            content: "- ";
          }
        }
      }
    }
  }
}
.plan_th {
  background-color: #e9faff;
  position: relative;
  &::before,&::after {
    content: "";
    display: block;
    height: 50%;
    aspect-ratio: 1 / 1;
    background-image: url(/andbrand/assets/images/service/tri.svg);
    background-size: 100% 100%;
    position: absolute;
  }
  &::before {
    top: 0px;
    right: 0px;
  }
  &::after {
    bottom: 0px;
    right: 0px;
    transform: scaleY(-1);
  }
}
.do_th {
  background-color: #d0f5db;
}

.hd_solution {
  padding: 2cqw 0 0;
  font-size: clamp(2rem, 0.65vw + 1.757rem, 3rem);
  font-weight: 700;
}

.column_solution {
  padding: 2cqw 0 0;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
  @media (width < 896px) {
    grid-template-columns: repeat(2,1fr);
    padding: 20px 0 0;
  }
  @media (width < 480px) {
    grid-template-columns: repeat(1,1fr);
  }
  dl {
    border: var(--main_c) solid 6px;
    border-radius: 16px;
    padding: 20px;
    position: relative;
    @media (width < 480px) {
      border: var(--main_c) solid 4px;
    }
    dt {
      font-size: clamp(1.8rem, 0.26vw + 1.703rem, 2.2rem);
      font-weight: 700;
      font-feature-settings: "palt";
      letter-spacing: 0.1em;
    }
    dd {
      padding: 16px 0 0;
      margin: 16px 0 0;
      border-top: #666 dotted 1px;
      text-align: justify;
    }
  }
}

.annai {
  font-size: clamp(1.8rem, 0.26vw + 1.703rem, 2.2rem);
  font-weight: 700;
  padding: 5vw 0 0;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  @media (width < 480px) {
    padding: 30px 0 0;
  }
}


.block__copy {
  padding:8vw 0 0;
  @media (width < 480px) {
    padding: 40px 0 0;
  }
}

.catch_copy_about {
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-size: clamp(3rem, 1.94vw + 2.272rem, 6rem);
  line-height: 1.4em;
  font-weight: 900;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  font-family: "Noto Sans JP", serif;
}

.box_lead_copy {
  padding: 30px 0 0;
}

.lead_copy_about {
  padding: 20px 0 0;
  font-size: clamp(1.6rem, 0.52vw + 1.406rem, 2.4rem);
  line-height: 1.9em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.etc {
  font-family: "Roboto", sans-serif;
  font-size: clamp(1.8rem, 0.26vw + 1.703rem, 2.2rem);
  font-weight: 900;
  position: absolute;
  right: 0px;
  bottom: -2em;
}

.block__service--ttl {
  background-color: var(--main_c);
  color: #FFF;
  border-radius: 50px;
  display: flex;
  align-items: center;
  padding: 10px;
}

.hd_major_s_en {
  aspect-ratio: 1 / 1;
  width: 80px;
  text-align: center;
  align-content: center;
  border-radius: 50%;
  background-color: #FFF;
  color: var(--main_c);
  font-family: "Roboto", sans-serif;
  font-size: 2.0rem;
  line-height: 1em;
  font-weight: 900;
}

.hd_major_s {
  font-size: clamp(2rem, 1.29vw + 1.515rem, 4rem);
  font-weight: 700;
  line-height: 1.3em;
  width: calc(100% - 80px);
  box-sizing: border-box;
  padding: 0 10px;
}