@charset 'utf-8';
/* ======================================================
CSS information

 File Name  : businesscard.css
 Style Info : 「名刺制作」のCSS
====================================================== */

#price-list-block .items {
  display: grid;
  gap: 3rem;
}

/* 768px～（タブレット）
------------------------------------*/
@media (min-width: 768px) {

  #price-list-block .items {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    overflow: hidden;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media (min-width: 960px) {

  #price-list-block .items {
    grid-template-columns: 1.5fr 1fr;
    gap: 8rem;
  }

}

#price-list-block .items:not(:first-child) {
  margin-top: 4rem;
}

/* 768px～（タブレット）
------------------------------------*/
@media (min-width: 768px) {

  #price-list-block .items:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 0;
  }

}

#price-list-block .img-box {
  position: relative;
}

/* 768px～（タブレット）
------------------------------------*/
@media (min-width: 768px) {

  #price-list-block .items > .img-box {
    order: 2;
  }

}

#price-list-block .img-box > img:not(:first-child) {
  position: absolute;
  top: 0;
  right: 0;
}

#price-list-block .text-box {
  z-index: 2;
  position: relative;
}

/* 768px～（タブレット）
------------------------------------*/
@media (min-width: 768px) {

  #price-list-block .items > .text-box {
    order: 1;
  }

}

#price-list-block .text-box h3 {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  font-size: calc(20 / var(--base-w) * 100vw);
  font-weight: 300;
  border-bottom: 1px dashed rgb(55 57 46 / .2);
}

/* 768px～（タブレット）
------------------------------------*/
@media (min-width: 768px) {

  #price-list-block .text-box h3 {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media (min-width: 960px) {

  #price-list-block .text-box h3 {
    margin-bottom: 2rem;
  }

}

#price-list-block .text-box h3::before {
  content: '';
  margin-top: 3px;
  aspect-ratio: 1;
  width: 22px;
  border: 5px solid var(--basecolor5);
  border-radius: 50%;
}

/* 768px～（タブレット）
------------------------------------*/
@media (min-width: 768px) {

  #price-list-block .text-box h3::before {
    margin-top: 3.5px;
    width: 24px;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media (min-width: 960px) {

  #price-list-block .text-box h3::before {
    margin-top: 4px;
    width: 26px;
  }

}

#price-list-block .text-box p {
  line-height: 1.8;
  margin-bottom: 2rem;
  font-size: calc(15 / var(--base-w) * 100vw);
}

/* 768px～（タブレット）
------------------------------------*/
@media (min-width: 768px) {

  #price-list-block .text-box p {
    margin-bottom: 2.5rem;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media (min-width: 960px) {

  #price-list-block .text-box p {
    line-height: 2;
    margin-bottom: 3rem;
  }

}

#first-block > .first-box > ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

#first-block > .first-box li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 200px;
}

/* 768px～（タブレット）
------------------------------------*/
@media (min-width: 768px) {

  #first-block > .first-box li {
    height: 250px;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media (min-width: 960px) {

  #first-block > .first-box li {
    height: 300px;
  }

}

#first-block > .first-box li:nth-child(1) {
  background: rgb(244 91 105 / .7);
}

#first-block > .first-box li:nth-child(2) {
  background: rgb(180 227 61 / .7);
}

#first-block > .first-box li:nth-child(3) {
  background: rgb(135 145 158 / .7);
}

#first-block > .first-box li:not(:last-child)::before {
  content: '';
  z-index: 1;
  position: absolute;
  top: 50%;
  left: calc(100% - (25px / 2));
  translate: 0 -50%;
  aspect-ratio: 1;
  width: 25px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M18 12.998h-5v5a1 1 0 0 1-2 0v-5H6a1 1 0 0 1 0-2h5v-5a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2'/%3E%3C/svg%3E") no-repeat center center / contain;
}

/* 768px～（タブレット）
------------------------------------*/
@media (min-width: 768px) {

  #first-block > .first-box li:not(:last-child)::before {
    left: calc(100% - (30px / 2));
    width: 30px;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media (min-width: 960px) {

  #first-block > .first-box li:not(:last-child)::before {
    left: calc(100% - (35px / 2));
    width: 35px;
  }

}

#first-block > .first-box li::after {
  content: '';
  z-index: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  max-width: 350px;
  width: calc(100vw / 3);
  max-height: 350px;
  height: calc(100vw / 3);
  border-radius: 50%;
  filter: blur(3px);
}

/* 768px～（タブレット）
------------------------------------*/
@media (min-width: 768px) {

  #first-block > .first-box li::after {
    filter: blur(4px);
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media (min-width: 960px) {

  #first-block > .first-box li::after {
    filter: blur(5px);
  }

}

#first-block > .first-box li > p {
  z-index: 1;
  letter-spacing: var(--spacing);
  line-height: 1.6;
  color: var(--basecolor2);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  text-shadow: 1px 1px 2px rgb(55 57 46 / .2);
}

/* 768px～（タブレット）
------------------------------------*/
@media (min-width: 768px) {

  #first-block > .first-box li > p {
    font-size: 2rem;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media (min-width: 960px) {

  #first-block > .first-box li > p {
    font-size: 2.4rem;
  }

}

#first-block > .first-box li > span {
  z-index: 1;
  display: block;
  margin-top: .2rem;
  color: var(--basecolor2);
  font-size: 1.2rem;
  font-weight: 400;
  text-shadow: 1px 1px 2px rgb(55 57 46 / .2);
}

/* 768px～（タブレット）
------------------------------------*/
@media (min-width: 768px) {

  #first-block > .first-box li > span {
    font-size: 1.2rem;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media (min-width: 960px) {

  #first-block > .first-box li > span {
    font-size: 1.3rem;
  }

}