@charset "utf-8";

/* ## PC/SP切り替え */
@media (min-width: 769px) {
  .u-sp {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .u-pc {
    display: none !important;
  }
  .u-sp {
    display: block;
  }
}

/* ## 記事の間隔ルール */
.u-content-rule :is(h2, h3, h4) {
  line-height: 2.4;
  color: var(--pink);
}
.u-content-rule :is(h2, h3, h4) + :is(h2, h3, h4) {
  margin-top: 16px;
}
.u-content-rule :is(h3, h4) {
  line-height: 1.6;
}
.u-content-rule h2 {
  font-size: 2rem;
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 5px;
  text-underline-offset: 12px;
  font-weight: bold;
  margin-bottom: 32px;
}
.u-content-rule h3 {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 16px;
}
.u-content-rule h4 {
  margin-bottom: 8px;
  font-weight: bold;
}
.u-content-rule a:not(.c-btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--beige);
}
.u-content-rule h3:is(.u-bg-blue, .u-bg-yellow, .u-bg-green) {
  width: fit-content;
}
@media (max-width: 768px) {
  .u-content-rule h2 {
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
    font-size: 1.6rem;
    margin-bottom: 24px;
  }
  .u-content-rule h3 {
    font-size: 1.6rem;
    bottom: 8px;
  }
  .u-content-rule h4 {
    font-size: 1.4rem;
    margin-bottom: 4px;
  }
}

/* ## 言語 */
.u-en-1 {
  font-family: var(--en-1);
}
.u-ja-1 {
  font-family: var(--ja-1);
}

/* ## imgのトリミング */
.u-img-cover :is(img, picture) {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.u-img-contain :is(img, picture) {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* ## クリックエリアを拡大 */
.u-expand-click {
  position: relative;
}
.u-expand-click::before {
  content: "";
  position: absolute;
  inset: -12px;
}

/* ## フォーム */
.u-unit::after {
  position: absolute;
  right: -24px;
  top: 0;
  bottom: 0;
  margin: auto;
  height: fit-content;
}
.u-unit--people::after {
  content: "人";
}

/* underline */
.u-underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--beige);
}

/* ## border-radius */
.u-border-radius-large {
  border-radius: 53px;
}
.u-border-radius-medium {
  border-radius: 30px;
}
.u-border-radius-small {
  border-radius: 20px;
}
:is(
  .u-border-radius-large,
  .u-border-radius-medium,
  .u-border-radius-small
).u-img-cover {
  overflow: hidden;
}

@media (max-width: 768px) {
  .u-border-radius-large {
    border-radius: 30px;
  }
  .u-border-radius-medium {
    border-radius: 20px;
  }
  .u-border-radius-small {
    border-radius: 12px;
  }
}

/* ## fsz */
.u-fsz-80percent {
  font-size: 80%;
}

/* ## bg */
.u-bg-white {
  background: var(--white);
}
.u-bg-yellow {
  background: var(--yellow);
}
.u-bg-blue {
  background: var(--blue);
}
.u-bg-green {
  background: var(--green);
}
.u-bg-light-pink {
  background: var(--light-pink);
}

/* ## color */
.u-color-pink {
  color: var(--pink);
}
.u-color-blue {
  color: var(--blue);
}
.u-color-yellow {
  color: var(--yellow);
}
.u-color-green {
  color: var(--green);
}
.u-color-white {
  color: var(--white);
}
.u-color-dark-brown {
  color: var(--dark-brown) !important;
}

/* ## フォーム */
.u-unit::after {
  position: absolute;
  right: -32px;
  top: 0;
  bottom: 0;
  margin: auto;
  height: fit-content;
}
.u-unit--age::after {
  content: "歳";
}

/* ## u-txt-right-arrow */
.u-txt-right-arrow {
  position: relative;
  margin-left: 24px;
}
.u-txt-right-arrow::before {
  content: "";
  background: var(--pink);
  border-radius: 100vmax;
  position: absolute;
  top: 5px;
  left: -24px;
  width: 18px;
  height: 18px;
}
.u-txt-right-arrow--blue::before {
  background: var(--blue);
}
.u-txt-right-arrow--yellow::before {
  background: var(--yellow);
}
.u-txt-right-arrow::after {
  content: "";
  border-top: 2px solid var(--white);
  border-right: 2px solid var(--white);
  rotate: 45deg;
  position: absolute;
  top: 11px;
  left: -19px;
  width: 6px;
  height: 6px;
}
.u-txt-right-arrow--blue::after,
.u-txt-right-arrow--yellow::after {
  border-color: var(--dark-brown);
}
[style*="font-size: 130%"] .u-txt-right-arrow::before,
[style*="font-size: 130%"] .u-txt-right-arrow::after {
  translate: 0 2px;
}
@media (max-width: 768px) {
  .u-txt-right-arrow {
    margin-left: 18px;
  }
  .u-txt-right-arrow::before {
    top: 4px;
    left: -18px;
    width: 14px;
    height: 14px;
  }
  .u-txt-right-arrow::after {
    top: 8px;
    left: -14px;
    width: 5px;
    height: 5px;
  }
}

/* ## u-txt-bottom-arrow */
.u-txt-bottom-arrow {
  position: relative;
  margin-left: 24px;
}
.u-txt-bottom-arrow::before {
  content: "";
  background: var(--pink);
  border-radius: 100vmax;
  position: absolute;
  top: 5px;
  bottom: 0;
  left: -24px;
  width: 18px;
  height: 18px;
}
.u-txt-bottom-arrow--blue::before {
  background: var(--blue);
}
.u-txt-bottom-arrow--yellow::before {
  background: var(--yellow);
}
.u-txt-bottom-arrow::after {
  content: "";
  border-bottom: 2px solid var(--white);
  border-right: 2px solid var(--white);
  rotate: 45deg;
  position: absolute;
  top: 10px;
  left: -18px;
  width: 6px;
  height: 6px;
}
@media (max-width: 768px) {
  .u-txt-bottom-arrow {
    margin-left: 18px;
  }
  .u-txt-bottom-arrow::before {
    top: 4px;
    left: -18px;
    width: 14px;
    height: 14px;
  }
  .u-txt-bottom-arrow::after {
    top: 7px;
    left: -13.5px;
    width: 5px;
    height: 5px;
  }
}

/* ## u-text-decoration-color */
.u-text-decoration-color-yellow {
  text-decoration-color: var(--yellow) !important;
}
.u-text-decoration-color-blue {
  text-decoration-color: var(--blue) !important;
}
.u-text-decoration-color-pink {
  text-decoration-color: var(--pink) !important;
}
.u-text-decoration-color-light-pink {
  text-decoration-color: var(--light-pink) !important;
}

/* ##  */
.u-fw-bold {
  font-weight: bold;
}