@import url('default.css');

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

html { font-size: 16px; }

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

dl { margin: 0; }
dl dt,
dl dd { margin: 0; }

.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; }

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

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

/* --------------------- 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-center { 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: start; }
.fx-ai-end { align-items: end; }
.fx-ai-center { align-items: center; }
.fx-ac-center { align-content: center; }
.fx-ai-sb { align-content: space-between; }

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

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

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

.pd-t-05 { padding-top: 0.5rem; }
.pd-t-1 { padding-top: 1rem; }
.pd-t-15 { padding-top: 1.5rem; }
.pd-t-2 { padding-top: 2rem; }

.pd-b-05 { padding-bottom: 0.5rem; }
.pd-b-1 { padding-bottom: 1rem; }
.pd-b-15 { padding-bottom: 1.5rem; }
.pd-b-2 { padding-bottom: 2rem; }

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

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

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