@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap");
/* Default Options */
/* Media Query */
/**
 * Media Query Mixin
 * @param {string} $mq  - min | max | min-max
 * @param {string} $bp1 - breakpoint key (e.g. "lg")
 * @param {string} $bp2 - breakpoint key (e.g. "xl") for min-max upper bound
 */
/* Transform Font Size */
/* custom property ------------------------ */
:root {
  --contents-inner-padding: max(6vw, 20px);
  --accent-color: rgba(222, 17, 94, 1);
  --space-lg: clamp(120px, 15vw, 240px);
  --space-md: clamp(80px, 10vw, 160px);
  --space-sm: clamp(40px, 5vw, 80px);
  --space-xs: clamp(20px, 3vw, 40px);
  --space-xxs: clamp(10px, 1vw, 20px);
}

/* ---------------------------------------- */
.main-contents {
  position: relative;
  overflow: hidden;
}
.main-contents .page-header-child {
  position: relative;
  z-index: 1;
}
.main-contents .contents-child {
  max-width: none;
  padding-inline: 0;
}
.main-contents .product-contact {
  padding-inline: var(--contents-inner-padding);
}

/* ---------------------------------------- */
.skill-head {
  margin-block-end: var(--space-md);
  display: flex;
  flex-direction: column;
  row-gap: var(--space-xs);
}
.skill-head .image {
  display: flex;
  justify-content: center;
  position: relative;
}
.skill-head .image img {
  width: 60%;
  max-width: 400px;
  position: relative;
  z-index: 2;
}
.skill-head .image:after {
  content: "";
  width: 90%;
  height: 80%;
  display: block;
  background-color: #044179;
  border-radius: 0 var(--space-sm) var(--space-sm) 0;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  opacity: 0.2;
  transform: translateY(-50%);
}
.skill-head .inner {
  padding-inline: var(--contents-inner-padding);
  display: flex;
  flex-direction: column;
  row-gap: var(--space-xs);
}
.skill-head .inner .catch {
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: rgb(0, 0, 0);
}
.skill-head .inner .catch span {
  display: inline-block;
}
.skill-head .inner p {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2;
  color: rgb(0, 0, 0);
}
.skill-head .inner p br {
  display: none;
}
.skill-list {
  display: flex;
  flex-direction: column;
}
.skill-list .item {
  position: relative;
}
.skill-list .item:before, .skill-list .item:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.skill-list .item:before {
  z-index: 1;
}
.skill-list .item:after {
  z-index: 0;
}
.skill-list .item:nth-child(1) {
  z-index: 3;
}
.skill-list .item:nth-child(1):before {
  background-color: #f58b5d;
  border-radius: 0 var(--space-sm) 0 0;
}
.skill-list .item:nth-child(2) {
  z-index: 2;
}
.skill-list .item:nth-child(2):before {
  background-color: #ef595a;
  border-radius: var(--space-sm) 0 0 0;
}
.skill-list .item:nth-child(2):after {
  background-color: #f58b5d;
}
.skill-list .item:nth-child(3) {
  z-index: 1;
}
.skill-list .item:nth-child(3):before {
  background-color: #9097e2;
  border-radius: 0 var(--space-sm) 0 0;
}
.skill-list .item:nth-child(3):after {
  background-color: #ef595a;
}
.skill-list .item .wrap {
  padding-block: var(--space-md);
  padding-inline: var(--contents-inner-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--space-xs);
  position: relative;
  z-index: 2;
}
.skill-list .item .wrap .image {
  width: 100%;
  display: flex;
  justify-content: center;
}
.skill-list .item .wrap .image div {
  width: 40%;
  max-width: 250px;
  position: relative;
}
.skill-list .item .wrap .image div img {
  position: relative;
  z-index: 1;
}
.skill-list .item .wrap .image div:after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: var(--space-xs);
  position: absolute;
  top: var(--space-xxs);
  left: var(--space-xxs);
  z-index: 0;
  filter: blur(6px);
  transition: all 0ms linear;
}
.skill-list .item .wrap .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: clamp(10px, 2vw, 30px);
  color: rgb(255, 255, 255);
}
.skill-list .item .wrap .inner .icon {
  width: var(--space-sm);
}
.skill-list .item .wrap .inner .icon:after {
  display: none;
}
.skill-list .item .wrap .inner .number {
  font-size: 1.4rem;
  font-family: "Bree Serif", serif;
  line-height: 1;
  color: rgba(255, 255, 255, 0.5);
}
.skill-list .item .wrap .inner .title {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
}
.skill-list .item .wrap .inner p {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .skill-head {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
  }
  .skill-head .image {
    padding-inline-start: var(--space-sm);
  }
  .skill-head .image:after {
    width: 100%;
  }
  .skill-head .inner .catch {
    max-width: 600px;
    text-align: left;
  }
  .skill-list .item .wrap {
    max-width: 1200px;
    margin-inline: auto;
    padding-block: var(--space-xxs);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .skill-list .item .wrap .image {
    position: relative;
    top: var(--space-sm);
  }
  .skill-list .item .wrap .image div {
    width: 60%;
  }
  .skill-list .item .wrap .image div:before {
    content: "";
    width: 120%;
    height: calc(var(--space-sm) + var(--space-xxs));
    display: block;
    position: absolute;
    bottom: calc((var(--space-xxs) + var(--space-xxs)) * -1);
    left: 0;
    z-index: 1;
    transition: all 0ms linear;
  }
  .skill-list .item .wrap .inner p {
    max-width: 400px;
  }
  .skill-list .item:nth-child(1) .wrap .image div:before {
    background-color: #ef595a;
  }
  .skill-list .item:nth-child(2) .wrap .image {
    grid-area: 1/2/2/3;
  }
  .skill-list .item:nth-child(2) .wrap .image div:before {
    background-color: #9097e2;
  }
  .skill-list .item:nth-child(2) .wrap .inner {
    grid-area: 1/1/2/2;
  }
  .skill-list .item:nth-child(3) .wrap .image div:before {
    background-color: rgb(242, 242, 242);
  }
}
@media screen and (min-width: 992px) {
  .skill-head .inner .catch span {
    font-size: 4rem;
  }
  .skill-head .inner p {
    font-size: 1.6rem;
  }
  .skill-head .inner p br {
    display: block;
  }
  .skill-list .item .wrap .inner .number,
  .skill-list .item .wrap .inner p {
    font-size: 1.6rem;
  }
  .skill-list .item .wrap .inner .title {
    font-size: 3.6rem;
  }
}
@media screen and (min-width: 1280px) {
  .skill-head .inner .catch span {
    font-size: 4.8rem;
  }
}
@media screen and (min-width: 1600px) {
  .skill-head .inner .catch span {
    font-size: 6.4rem;
  }
}