@charset "UTF-8";
/*=============================================
*
* 共通
*
=============================================*/
:root {
  --color-black-text: #000;
  --color-white-text: #fff;
  --color-text: #98623d;
  --color-button: #006b94;
  --color-input-bg: #ffffff;
  --color-bg-texture: url("../images/common/bg-parchment.jpg");
  --content-max-width: 500px;
  --design-width: 375;
  --color-hud-bg: #000000;
  --color-hud-tab: #016B86;
  --color-hud-tab-active-comm: #fff611;
  --color-hud-tab-active-log: #bb77ff;
  --color-hud-tab-active-status: #b78137;
  --color-hud-banner: #fff60f;
  --color-hud-timer-bar: #939393;
  --color-hud-timer-bar-active: #02ad1d;
  --color-hud-send-btn: #016B86;
  --color-hud-camera: #ffc400;
  --color-hud-area: #915f3b;
  --color-hud-text-light: #ffffff;
  --color-hud-input-placeholder: #d8d8d8;
  --color-modal-overlay: rgba(0, 0, 0, 0.72);
  --color-btn-cancel: #fff738;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  background-color: #c9b995;
  background-image: var(--color-bg-texture);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--color-text);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

.page {
  margin: 0 auto;
  max-width: var(--content-max-width);
  min-height: 100vh;
  position: relative;
  width: 100%;
}