html{
background: url(https://www.rivage.jp/files/img/common/bg.gif) repeat 0 0;
color:#000;
}

/* テーブルレイアウトをモバイルでブロック化 */
@media screen and (max-width: 768px) {
  .c-form__table {
    border-collapse: collapse;
  }
  .c-form__table tr {
    display: block;
    margin-bottom: 1em;
  }
  .c-form__table th,
  .c-form__table td {
    display: block;
    width: 100%;
    padding: 4px 0;
  }
  .c-form__table th {
    font-weight: bold;
  }

  /* 入力欄を幅いっぱいに */
  .c-input--text {
    width: 100%;
    padding: 8px;
    font-size: 1rem;
  }

  /* ボタンを幅いっぱいに */
  .c-button--login,
  .c-button--primary,
  .c-button-sm {
    display: block;
    width: 100%;
    margin: 0.5em 0;
    box-sizing: border-box;
  }

  /* ヘッダーのロゴ中央寄せ */
  .p-shop__header--title {
    text-align: center;
    padding: 1em 0;
  }
  .p-shop__title {
    display: inline-block;
    font-size: 1.2rem;
  }

  /* タイトル文字サイズ調整 */
  .p-page__title {
    font-size: 1.5rem;
    text-align: center;
    margin: 0.5em 0;
  }
}
/*  変数定義（好きなところに） */
:root {
  /* メインのぶどう色 / ロゴのタイトル文字に近い深いパープル */
  --rivage-primary: #7d1648;
  /* ロゴ周りの白抜き背景や大見出し背景に合うクリーミーベージュ */
  --rivage-bg-light: #f7f2f4;
  /* ボタンホバーやリンクホバーに映えるいちごレッド */
  --rivage-accent: #c33f41;
  /* 基本文字色 */
  --rivage-text: #333;
}

/*  ロゴタイトル */
.p-shop__title {
  color: var(--rivage-primary);
}

/*  リンクカラー */
a {
  color: var(--rivage-primary);
  transition: color .2s;
}
a:hover,
a:focus {
  color: var(--rivage-accent);
}

/*  プライマリボタン（ログイン等） */
.c-button--primary,
.c-button--login {
  background-color: var(--rivage-primary);
  border: 1px solid var(--rivage-primary);
  color: #fff;
  transition: background-color .2s, border-color .2s;
}
.c-button--primary:hover,
.c-button--login:hover {
  background-color: var(--rivage-accent);
  border-color: var(--rivage-accent);
}