@charset "UTF-8";
/*----------------------------------------
ネーム刺繍ページ スタイル(Sass)
----------------------------------------*/
/* ネーム刺繍例
---------------------------------------- */
.nameSisyuExamples {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2em;
}
@media screen and (min-width: 770px) {
  .nameSisyuExamples {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  .nameSisyuExamples {
    grid-template-columns: repeat(2, 1fr);
  }
}
.nameSisyuExamples figure > figcaption {
  margin-top: 4px;
}

.nameSisyuException > figure {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media screen and (min-width: 770px) {
  .nameSisyuException > figure {
    grid-template-columns: repeat(2, 2fr) 1fr;
  }
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  .nameSisyuException > figure {
    grid-template-columns: repeat(2, 1fr);
  }
}
.nameSisyuException > figure > figcaption {
  position: relative;
  border: 2px solid var(--mainBgColor);
  border-radius: 4px;
  padding: 0.8em;
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  .nameSisyuException > figure > figcaption {
    font-size: 0.875rem;
  }
}
.nameSisyuException > figure > figcaption > div.figTitle {
  background-color: #FFF84B;
  border-radius: 4px;
  text-align: center;
  font-weight: 700;
  margin-bottom: 0.4em;
}
.nameSisyuException > figure > figcaption > p strong {
  font-size: 1.25rem;
  color: var(--mainBgColor);
}
.nameSisyuException > figure > figcaption > p a {
  color: var(--mainBgColor);
  text-decoration: underline;
}
.nameSisyuException > figure > figcaption > .connectionLine {
  position: absolute;
  top: -38px;
  left: 50%;
  width: 1px;
  height: 46px;
  background-color: var(--mainBgColor);
}
@media screen and (min-width: 770px) {
  .nameSisyuException > figure > figcaption > .connectionLine {
    top: 50%;
    left: -34px;
    width: 42px;
    height: 1px;
  }
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  .nameSisyuException > figure > figcaption > .connectionLine {
    top: 50%;
    left: -34px;
    width: 42px;
    height: 1px;
  }
}
.nameSisyuException > figure > figcaption > .connectionLine::before {
  content: "";
  position: absolute;
  top: -9px;
  left: -9px;
  width: 19px;
  height: 19px;
  background-color: var(--mainBgColor);
  border: 4px solid #D3E8FF;
  border-radius: 50%;
}

/* 文字サイズについて
---------------------------------------- */
.textSizeExamples {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2em;
}
@media screen and (min-width: 770px) {
  .textSizeExamples {
    grid-template-columns: 200px 1fr;
  }
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  .textSizeExamples {
    grid-template-columns: 200px 1fr;
  }
}
.textSizeExamples figure > figcaption {
  display: grid;
  grid-template-columns: 1.3fr 1fr 0.8fr;
  margin-top: 4px;
  text-align: center;
}
@media screen and (min-width: 770px) {
  .textSizeExamples p {
    line-height: 1.8;
  }
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  .textSizeExamples p {
    font-size: 0.875rem;
    line-height: 1.8;
  }
}/*# sourceMappingURL=name2.css.map */