/* 
 * component.css
 * コンポーネントスタイル
 *
 * ⚫︎規則
 * 　margin等コンポーネント外部のレイアウトに影響するスタイル禁止
 */

/**************************************
 * ボタン
**************************************/

/* ボタン */
.c-btn {
  display: block;
  max-width: 374px;
  width: 78.2%;
  border-radius: 100vmax;
  padding: 5.3% 8.6%;
  margin: 0 auto;
  will-change: filter;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
  position: relative;
  text-align: center;
  font-weight: 900;
}

.c-btn[data-btn-arrow='left']::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 7%;
  width: 0.55em;
  height: 0.55em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(-135deg);
  pointer-events: none;
}
.m .c-btn[data-btn-arrow='left']::after {
  border-top-width: 3px;
  border-right-width: 3px;
}

.c-btn[data-btn-arrow='right']::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 7%;
  width: 0.55em;
  height: 0.55em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
.m .c-btn[data-btn-arrow='right']::after {
  border-top-width: 3px;
  border-right-width: 3px;
}

.c-btn:hover {
  cursor: pointer;
  opacity: 0.6;
  transition: 0.3s all;
}
.c-btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}