@import url(common.css);

/* --------------------------


ベースのトライアングル
（..c-triangle）


-------------------------- */

.c-triangle {
  --triangle-color: #ffb500;
  --tri-right-y: clamp(18px, 4vw, 55px); /* 上下（高さの半分） */
  --tri-right-x: clamp(16px, 3.6vw, 50px); /* 左border（横幅） */
  --tri-bottom-x: clamp(18px, 4vw, 50px); /* 左右（横幅の半分） */
  --tri-bottom-y: clamp(14px, 3.2vw, 40px); /* 上border（縦） */

  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
}

/* 右向き（modifier） */
.c-triangle--right {
  margin: 1em auto;
  border-top-width: var(--tri-right-y);
  border-bottom-width: var(--tri-right-y);
  border-left-width: var(--tri-right-x);
  border-right-width: 0;
  border-left-color: var(--triangle-color);
}

/* 下向き（modifier） */
.c-triangle--bottom {
  margin: auto;
  border-left-width: var(--tri-bottom-x);
  border-right-width: var(--tri-bottom-x);
  border-top-width: var(--tri-bottom-y);
  border-bottom-width: 0;
  border-top-color: var(--triangle-color);
}