@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-width-800 {
  width: 800px;
}
.u-width-1500 {
  width: 1500px;
}

/* ## 記事の間隔ルール */
.u-content-rule p + p {
  margin-top: 2em;
}
.u-content-rule p + p:has(:is(img, picture)),
.u-content-rule p:has(:is(img, picture)) + p {
  margin-top: 5em;
}
.u-content-rule p:has(:is(img, picture)) + p:has(:is(img, picture)) {
  margin-top: 1em;
}
@media (max-width: 768px) {
  .u-content-rule p + p:has(:is(img, picture)),
  .u-content-rule p:has(:is(img, picture)) + p {
    margin-top: 3em;
  }
}

/* ## 言語 */
.u-en01 {
  font-family: var(--en01);
}
.u-ja01 {
  font-family: var(--ja01);
}
.u-ja02 {
  font-family: var(--ja02);
}
.u-uppercase {
  text-transform: uppercase;
}

/* ## ボーダー */
.u-bt {
  position: relative;
}
.u-bt::before {
  content: "";
  position: absolute;
  background: var(--navy);
  height: 1px;
  width: 100%;
  top: -5px;
}

/* ## 矢印 */
.u-has-left-arrow {
  position: relative;
}
.u-has-left-arrow::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -32px;
  margin: auto;
  width: 10px;
  height: 12px;
  background: url(../img/common/i_arrow--black.svg) var(--bg-standard);
}
.u-has-left-arrow.u-color-navy::after {
  background: url(../img/common/i_arrow--navy.svg) var(--bg-standard);
}

@media (max-width: 768px) {
  .u-has-left-arrow::after {
    right: -16px;
    width: 8px;
    height: 9px;
  }
}

.u-has-right-arrow {
  position: relative;
}
.u-has-right-arrow::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -32px;
  margin: auto;
  width: 10px;
  height: 12px;
  rotate: 180deg;
  background: url(../img/common/i_arrow--black.svg) var(--bg-standard);
}
.u-has-right-arrow.u-color-navy::after {
  background: url(../img/common/i_arrow--navy.svg) var(--bg-standard);
}

@media (max-width: 768px) {
  .u-has-right-arrow::after {
    left: -16px;
    width: 8px;
    height: 9px;
  }
}

/* ## 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;
}

/* ## itemホバーでtxtがopacity:.5 */
.u-link-item > :not(:is(img, :has(img))) {
  transition: opacity 0.4s;
}
.u-link-item:hover > :not(:is(img, :has(img))) {
  opacity: 0.5;
}