@charset "UTF-8";
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

  ユーザーエージェント系の関数

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*------------------------------------------
　メディアクエリの設定
-------------------------------------------*/
/*------------------------------------------
　フォントの指定
-------------------------------------------*/
body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/*------------------------------------------
　フォントサイズの指定
-------------------------------------------*/
/* 各要素の指定用に1remを10px(62.5%)に設定 */
html {
  font-size: 62.5%;
}

body {
  line-height: 100%;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
}

/*-----------------------------------------------
  font-sizeのレスポンシブ対応レイアウト関連
  デフォルト　：　最大値[rem]
  タブレット~スマホ：以下フォントサイズ計算式
  font-size: clamp(
    スマホ(550px以下),
    32px + 32px  (100vw - 550px) / 730px
    最大(1280px以上)
  );
  font-size: calc(A[rem] + B[px] * (100vw - C)/D);
    A・・・最小文字サイズ[rem]
    B・・・最大文字サイズ (remをpx変換)– 最小文字サイズ (remをpx変換)[px]
    C・・・最小画面幅 [px]
    D・・・最大画面幅 – 最小画面幅[px]
  スマホ：最小値[rem]
------------------------------------------------*/
/*
  テキストスタイル
*/
.animation-button .design-box {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
}
.animation-button .design-box h3 {
  font-size: 1.8rem;
  line-height: 180%;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--theme-content);
  width: 100%;
  text-align: left;
}
.animation-button .design-box .button-area {
  display: grid;
  place-items: center;
  gap: 4px;
}
.animation-button .design-box .button-area button {
  display: grid;
  place-items: center;
  width: 100%;
  height: 60px;
  padding: 12px 24px;
}
.animation-button .design-box .design-1 button {
  color: var(--theme-content);
  border: 1px solid var(--theme-content);
  background-color: var(--theme-main);
  transition: 0.4s;
}
@media (hover: hover) and (pointer: fine) {
  .animation-button .design-box .design-1 button:hover {
    color: var(--theme-main);
    background-color: var(--theme-content);
  }
}
.animation-button .design-box .design-2 button, .animation-button .design-box .design-3 button, .animation-button .design-box .design-4 button {
  position: relative;
  border: 1px solid var(--theme-content);
  overflow: hidden;
}
.animation-button .design-box .design-2 button::before, .animation-button .design-box .design-3 button::before, .animation-button .design-box .design-4 button::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--theme-content);
  transition: 0.4s;
}
.animation-button .design-box .design-2 button span, .animation-button .design-box .design-3 button span, .animation-button .design-box .design-4 button span {
  color: var(--theme-white);
  mix-blend-mode: difference;
}
@media (hover: hover) and (pointer: fine) {
  .animation-button .design-box .design-2 button:hover::before, .animation-button .design-box .design-3 button:hover::before, .animation-button .design-box .design-4 button:hover::before {
    transform: translate(0, 0);
  }
}
.animation-button .design-box .design-2 button::before {
  width: 100%;
  transform: translate(-100%, 0);
}
.animation-button .design-box .design-3 button::before {
  width: 135%;
  transform: translate(-100%, 0);
  -webkit-clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
}
.animation-button .design-box .design-4 button::before {
  width: 100%;
  transform: translate(0, 100%);
}/*# sourceMappingURL=button-style.css.map */