@charset "utf-8";

/* ======================================================================
/* root
====================================================================== */
:root {
  --color-brand: #00a9c8;
  --color-white: #ffffff;
  --color-black: #040000;
  --color-gray: #f0f0f0;
  --color-green: #25a840;
  --color-blue: #00a1e9;
}

/* ======================================================================
/* body
====================================================================== */
body {
  font-size: 16px;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.8;
  color: var(--color-black);
  text-align: justify;
  letter-spacing: 0.03em;
}

@media screen and (width <=768px) {
  body {
    font-size: 14px;
  }
}

/* ======================================================================
/* #container
====================================================================== */
#container {
  inline-size: 500px;
  block-size: auto;
  margin-inline: auto;
  background: #fff;
  box-shadow: 0 0 30px 0px rgb(0 0 0 / 10%);
  position: relative;
  z-index: 2;
}

@media screen and (width <= 768px) {
  #container {
    inline-size: 100%;
  }
}

/* ======================================================================
/* .inner
====================================================================== */
.inner {
  max-inline-size: 100%;
  block-size: auto;
  margin: 0 auto;
  padding: 60px 25px;
}

@media screen and (width <= 768px) {
  .inner {
    inline-size: 100%;
    block-size: auto;
    padding: 40px 20px;
  }
}