@charset "utf-8";

/* 基本設定（フォント、カラー） */
:root {
  --color-container-shadow: #d9e5ed; /* コンテナ（コンテンツ領域）の影の色 */
  --font-family: "Noto Sans JP", sans-serif; /* フォント名 */
  --font-weight: 500; /* フォント太さ（400,500,700） */
  --color-text: #000000; /* 文字色 */
  --color-bg: #ffffff; /* 背景色 */
  --color-form-control-text: #000000; /* 入力欄の文字色 */
  --color-form-control-bg: #f1f1f1; /* 入力欄の背景色 */
  --color-form-control-border: #a8a8a8; /* 入力欄の枠色 */
  --color-placeholder-text: #bfbfbf; /* 入力欄のプレースホルダの色 */
  --color-footer-text: #152752; /* フッターの文字色 */
  --color-footer-bg: #fff; /* フッターの背景色 */
  --color-pagetop-text: #ffffff; /* ページトップボタンの文字色 */
  --color-pagetop-bg: #f9e8ef; /* ページトップボタンの背景色 */
}

/* カウントダウン */
:root {
  --color-countdown-text: #ff0000; /* 文字色 */
  --color-countdown-bg: #ffff00; /* 背景色 */
}

/* 追従ボタン */
:root {
  --follow-width-sp: 600; /* SPデザインでのpx幅 */
}

/* レイヤー設定 */
:root {
  /* レイヤー1 */
  --layer1-width-sp: 600; /* SPデザインでのpx幅 */
  --layer1-top-sp: 88%; /* SPで親要素の上端を0%,下端を100%とする位置 */
  /* レイヤー2 */
  --layer2-width-sp: 600; /* SPデザインでのpx幅 */
  --layer2-top-sp: 80%; /* SPで親要素の上端を0%,下端を100%とする位置 */
  /* レイヤー3 */
  --layer3-width-sp: 600; /* SPデザインでのpx幅 */
  --layer3-top-sp: 82%; /* SPで親要素の上端を0%,下端を100%とする位置 */
  /* レイヤー4 */
  --layer4-width-sp: 600; /* SPデザインでのpx幅 */
  --layer4-top-sp: 35%; /* SPで親要素の上端を0%,下端を100%とする位置 */
  /* レイヤー5 */
  --layer5-width-sp: 600; /* SPデザインでのpx幅 */
  --layer5-top-sp: 26%; /* SPで親要素の上端を0%,下端を100%とする位置 */
}

/* サブページ（プライバシーポリシー、特商法ページ等） */
:root {
  --color-subpage-title: #000000; /* タイトルの文字色 */
  --color-subpage-heading: #000000; /* 見出しの文字色 */
  --color-subpage-heading-bg: #fbfbfb; /* 見出しの背景色 */
  --color-subpage-heading-border1: #dfdfdf; /* 見出しのボーダー色（薄） */
  --color-subpage-heading-border2: #000000; /* 見出しのボーダー色（濃） */
}