@charset "utf-8";

/* ======================================
   Base
====================================== */

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  font-size: 1.6rem;
  line-height: 1.75;
  color: #222;
  background: #fff;
  letter-spacing: 0.02em;
  -webkit-text-size-adjust: 100%;
}

a {
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.8;
}

/* ======================================
   Layout base
====================================== */
.l-container {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

/* .l-main {
  padding-top: 56px;
  padding-bottom: 120px;
} */

/* ======================================
   Utility
====================================== */
.u-hidden {
  display: none !important;
}

.u-ta-c {
  text-align: center !important;
}

.u-ta-l {
  text-align: left !important;
}

.u-ta-r {
  text-align: right !important;
}

.u-mt-0 {
  margin-top: 0 !important;
}

.u-mb-0 {
  margin-bottom: 0 !important;
}

.u-bold {
  font-weight: 700 !important;
}

.u-normal {
  font-weight: 400 !important;
}

/* ======================================
   Color tokens
====================================== */
:root {
  --color-red: #eb3b2d;
  --color-red-dark: #e32f20;
  --color-text: #222;
  --color-sub-text: #777;
  --color-line: #dddddd;
  --color-bg: #f3f3f3;
  --color-box: #efeded;
  --color-orange: #f29b72;
  --color-gray-btn: #b7b6c2;
}

@media screen and (max-width: 767px) {
  html {
    font-size: 56.25%;
  }

  body {
    min-width: 0;
  }

  .l-container {
    width: calc(100% - 32px) !important;
    margin: 0 auto;
  }

  .l-main,
  .l-page {
    padding-top: 1rem !important;
    padding-bottom: 5rem !important;
  }
}