/*---------------------------------
  Reset
---------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p,
figure,
dl,
dd {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/*---------------------------------
  Usage Rule
---------------------------------
  ・PC：calc(数値 * var(--pc))
  ・SP：calc(数値 * var(--sp))

  ※主に以下で使用
    - 見出し
    - ボタン
    - 余白（margin / padding）

  ※以下はpx固定でOK
    - テーブル
    - 注意書きなど細かい文字
---------------------------------*/

/*---------------------------------
  Design Tokens / Variables
---------------------------------*/
:root {

  /* ===============================
     PCサイズ基準
     --------------------------------
     デザインカンプ：1920px想定
     → vwで可変させるための基準値
     使用例：
     45px → calc(45 * var(--pc))
     =============================== */
  --pc-base: 1920;

  /* ===============================
     SPサイズ基準
     --------------------------------
     デザインカンプ：375px想定
     =============================== */
  --sp-design-base: 375;

  /* ===============================
     カラー
     -------------------------------- */
  --maincolor: #e62320;
  --textcolor: #282828;
  --bgcolor: #fff;

  /* ===============================
     スケール値（PC）
     --------------------------------
     1px（デザイン）= 100vw / 1920
     =============================== */
  --pc: calc(100vw / var(--pc-base));

  /* ===============================
     スケール値（SP初期値）
     --------------------------------
     PCでも使えるように定義しておく
     =============================== */
  --sp: calc(100vw / var(--pc-base));
}

/* ===============================
   SP用スケール上書き
   --------------------------------
   768px以下でSP基準に切り替え
   =============================== */
@media screen and (max-width: 768px) {
  :root {
    --sp: calc(100vw / var(--sp-design-base));
  }
}

/*---------------------------------
  Base
---------------------------------*/
body {
  min-width: 320px;
  color: var(--textcolor);
  background: var(--bgcolor);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media screen and (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
}

/*---------------------------------
  Utilities
---------------------------------*/
.inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

@media screen and (max-width: 768px) {
  .inner {
    padding: 0 5.3333333333vw;
  }
}

.only-pc {
  display: block;
}

.only-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .only-pc {
    display: none !important;
  }

  .only-sp {
    display: block !important;
  }
}

.txt-left {
  text-align: left;
}

.pcno-break:before {
  content: "";
  white-space: pre;
}

.spno-break:before {
  content: "\A";
  white-space: pre;
}

@media screen and (max-width: 768px) {
  .pcno-break:before {
    content: "\A";
    white-space: pre;
  }

  .spno-break:before {
    content: "";
    white-space: pre;
  }
}