/* リセットCSS */
*,
*::before,
*::after {
  min-width: 0 !important;
  box-sizing: border-box !important;

  @media (prefers-reduced-motion: reduce) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd) {
  margin: 0;
}

a:link, a:visited, a:hover, a:active {
  color: inherit ;
}

svg{
  fill: currentColor;
}



/* 共通パーツ */
/* ボタン */
/*
<a href="/" class="ar-button-primary">
  <span class="ar-button-primary__label">サンプルボタン</span>

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" class="ar-button-primary__icon" width="26" height="26">
      <path d="M13,0C5.82,0,0,5.82,0,13s5.82,13,13,13,13-5.82,13-13S20.18,0,13,0ZM17.36,13.89l-5.77,5.83c-.49.5-1.28.5-1.77,0-.49-.5-.49-1.3,0-1.79l4.87-4.93-4.87-4.93c-.49-.5-.49-1.3,0-1.79.49-.5,1.29-.5,1.77-.01l5.77,5.83c.49.5.49,1.3,0,1.79Z"/>
  </svg>
</a>
 */
.ar-button-primary {
  --background-grade: linear-gradient(90deg, #ff8e9f, #ea3a55);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 45px;
  min-height: 65px;
  max-width: 100%;

  font-family: 'Noto Sans JP';
  font-size: 20px;
  line-height: 1.4;
  font-weight: bold;
  color: #fff !important;

  background: var(--background-grade);

  border-radius: 9999px;
  box-shadow: 0px 5px 0px #7c6c6c;

  @media (min-width:1024px) {
    min-height: 74px;
    font-size: 24px;
  }

  &:hover {
    color: #fff;
  }

  .ar-button-primary__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
  }
}

/* 見出し */
/*
<header class="ar-heading-primary">
  <h2 class="ar-heading-primary__label">日本語テキスト</h2>
  <span class="ar-heading-primary__sub" lang="en" aria-hidden="true">英語テキスト</span>
</header>
*/
.ar-heading-primary {
  --label-color:#fff;
  --sub-color:#7c93cf;

  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;

  .ar-heading-primary__label {
    font-size: 20px;
    line-height: 120%;
    font-family: 'Noto Sans JP';
    font-weight: bold;
    color: var(--label-color);

    @media (min-width:1024px) {
      font-size: 26px;
    }
  }

  .ar-heading-primary__sub {
    font-size: 40px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    font-family: 'Nico Moji';
    color: var(--sub-color);
    text-align: center;
    line-height: 120%;
    font-weight: bold;

    @media (min-width:1024px) {
      font-size: 82px;
    }
  }
}