@charset "UTF-8";

/* --- 背景 --- */
.wrapper {
}


/* 参加方法 */
#frame-howto {
}
.howto {
  width: calc(var(--width-howto) / var(--width-raw) * var(--width-cooked) * 1px);
}
.text-howto {
  left: calc(50% + var(--offset-text-howto) / var(--width-raw) * var(--width-cooked) * 1px);
  width: calc(var(--width-text-howto) / var(--width-raw) * var(--width-cooked) * 1px);
  height: calc(var(--height-text-howto) / var(--height-raw) * var(--height-cooked) * 1px);

  font-size: 24px;
}
.text-howto-1 {
  top: calc(var(--top-text-howto-1) / var(--width-raw) * var(--width-cooked) * 1px);
}
.text-howto-2 {
  top: calc(var(--top-text-howto-2) / var(--width-raw) * var(--width-cooked) * 1px);
}
.text-howto-3 {
  top: calc(var(--top-text-howto-3) / var(--width-raw) * var(--width-cooked) * 1px);
}
.text-howto-4 {
  top: calc(var(--top-text-howto-4) / var(--width-raw) * var(--width-cooked) * 1px);
}


/* 参加条件 */
#frame-condition {
}
.condition {
  width: calc(var(--width-condition) / var(--width-raw) * var(--width-cooked) * 1px);
}
.text-condition {
  top: calc(var(--top-text-condition) / var(--width-raw) * var(--width-cooked) * 1px);
  left: calc(50% + var(--offset-text-condition) / var(--width-raw) * var(--width-cooked) * 1px);
  width: calc(var(--width-text-condition) / var(--width-raw) * var(--width-cooked) * 1px);
  height: calc(var(--height-text-condition) / var(--width-raw) * var(--width-cooked) * 1px);

  font-size: 17px;
  overflow-y: scroll;

border: solid yellow 0px;
}

/* 規約 */
#frame-rules {
}
.rules {
  width: calc(var(--width-rules) / var(--width-raw) * var(--width-cooked) * 1px);
}
.text-rules {
  top: calc(var(--top-text-rules) / var(--width-raw) * var(--width-cooked) * 1px);
  left: calc(50% + var(--offset-text-rules) / var(--width-raw) * var(--width-cooked) * 1px);
  width: calc(var(--width-text-rules) / var(--width-raw) * var(--width-cooked) * 1px);
  height: calc(var(--height-text-rules) / var(--width-raw) * var(--width-cooked) * 1px);

  font-size: 17px;
  overflow-y: scroll;

border: solid yellow 0px;
}

/* フッタ */
#frame-footer {
}
.logo {
/*  width: calc(var(--width-logo) / var(--width-raw) * var(--width-cooked) * 1px); */
  width: calc(var(--width-logo) * 1px);
}