/* -------------------------------------------- Reset */

h1,
p,
ul,
ol,
li,
body {
  margin: 0;
  padding: 0;
}
img {
  vertical-align: middle;
}
a {
  text-decoration: none;
  color: #000;
}

body {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 16px;
}

ul,
ol,
li {
  list-style-type: none;
}

h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: normal; margin: 0; }
table,
th,
td {
	border-collapse: collapse;
	border-spacing: 0;
}

.cfx:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.cfx { min-height: 1px; }

* html .cfx {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

/* -------------------------------------------- base */

html { font-size: 16px; }

body { 
    font-size: 16px; 
    font-family: "Noto Sans JP", sans-serif;
}

.overlayed { position: relative; }
.overlayed::before { display: block; content: ''; position: absolute; width: 100%; height: 100%; z-index: 1; left: 0; top: 0; }

._before,
._after { position: relative; }

._before::before, 
._after::after { display: block; content: ''; z-index: 1; margin: auto; position: absolute; }

img { width: 100%; height: auto; }

/* --------------------- bg-img */

.bg-img-cover { background-position: center; background-repeat: no-repeat; background-size: cover; }

/* --------------------- position */

.pos-f { position: fixed; }
.pos-a { position: absolute; }
.pos-r { position: relative; }
.pos-center { margin: auto !important; top: 0; bottom: 0; }

/* --------------------- font-weight  */

.fw-100 { font-weight: 100; }
.fw-200 { font-weight: 200; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 700; }
.fw-900 { font-weight: 700; }

/* --------------------- letter spacing  */

.ls-1 { letter-spacing: 0.1rem; }
.ls-2 { letter-spacing: 0.4rem; }

/* --------------------- border-raduis  */

.br-1 { border-radius: 1rem; }
.br-2 { border-radius: 2rem; }

/* --------------------- border  */

.b-1 { border: 1px solid #000; }

/* --------------------- font-size  */

.fs-1 { font-size: 0.8rem; }
.fs-2 { font-size: 1rem; }
.fs-3 { font-size: 1.2rem; }
.fs-4 { font-size: 1.4rem; }
.fs-5 { font-size: 1.8rem; }

/* --------------------- text-align  */

.txt-ac { text-align: center; }
.txt-al { text-align: left; }
.txt-ar { text-align: right; }

/* --------------------- flex  */

.flex { display: flex; flex-wrap: wrap; justify-content: center; }
.fx-start { justify-content: flex-start; }
.fx-end { justify-content: flex-end; }
.fx-sb { justify-content: space-between; }
.fx-ai-start { align-items: flex-start; }
.fx-ai-center { align-items: center; }
.fx-ai-end { align-items: end; }
.fx-ai-sb { align-content: space-between; }
.fx-ac-center { align-content: center; }
.fx-ac-start { align-content: flex-start; }


.col-50 { width: 50%; }
.col-25 { width: 25%; }

/* --------------------- padding  */

.pd-1 { padding: 0.5rem; }
.pd-2 { padding: 1rem; }
.pd-3 { padding: 1.5rem; }

.pdt-1 { padding-top: 0.5rem; }
.pdt-2 { padding-top: 1rem; }
.pdt-3 { padding-top: 1.5rem; }

.pd-tb-1 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.pd-tb-2 { padding-top: 1rem; padding-bottom: 1rem; }
.pd-tb-3 { padding-top: 1.5rem; padding-bottom: 1.5rem; }

.pd-lr-1 { padding-left: 0.5rem; padding-right: 0.5rem; }
.pd-lr-2 { padding-left: 1rem; padding-right: 1rem; }
.pd-lr-3 { padding-left: 1.5rem; padding-right: 1.5rem; }

/* --------------------- margin  */

@media screen and (max-width: 640px) {
    html { font-size: 14px; }
}