@font-face {
font-family: "NotoSansJP";
src: url("../fonts/NotoSansJP-Medium.woff2") format("woff2"),
url("../fonts/NotoSansJP-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "NotoSansJP";
src: url("../fonts/NotoSansJP-Bold.woff2") format("woff2"),
url("../fonts/NotoSansJP-Bold.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}

/* フォント系 */
.text-xs {
font-size: var(--font-xs);
}
.text-sm {
font-size: var(--font-sm);
}
.text-sub {
font-size: var(--font-sub);
}
.text-base {
font-size: var(--font-base);
}
.text-md {
font-size: var(--font-md);
}
.text-lg {
font-size: var(--font-lg);
}
.text-xl {
font-size: var(--font-xl);
}
.text-xxl {
font-size: var(--font-xxl);
}
.font-regular {
font-weight: 400;
}
.font-bold {
font-weight: 700;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}

@media (min-width: 768px) {
.text-md-center {
text-align: center;
}
.text-md-right {
text-align: right;
}
}
@media (min-width: 992px) {
.text-lg-center {
text-align: center;
}
}

/* スペーシング */
.mt-sm {
margin-top: var(--space-sm);
}
.mt-xs {
margin-top: var(--space-xs);
}
.mt-md {
margin-top: var(--space-md);
}
.mt-lg {
margin-top: var(--space-lg);
}
.mb-xs {
margin-bottom: var(--space-xs);
}
.mb-sm {
margin-bottom: var(--space-sm);
}
.mb-md {
margin-bottom: var(--space-md);
}
.my-xs {
margin-block: var(--space-xs);
}
.my-sm {
margin-block: var(--space-sm);
}
.my-md {
margin-block: var(--space-md);
}
.my-lg {
margin-block: var(--space-lg);
}
.ml-sm {
margin-left: var(--space-sm);
}
.mr-xs {
margin-right: var(--space-xs);
}
.pt-sm {
padding-top: var(--space-sm);
}
.pt-xs {
padding-top: var(--space-xs);
}
.pt-md {
padding-top: var(--space-md);
}
.pl-md {
padding-left: var(--space-md);
}
.pl-sm {
padding-left: var(--space-sm);
}
.pb-md {
padding-bottom: var(--space-md);
}
.px-md {
padding-inline: var(--space-md);
}
.px-sm {
padding-inline: var(--space-sm);
}
.py-md {
padding-block: var(--space-md);
}
.py-lg {
padding-block: var(--space-lg);
}
.py-sm {
padding-block: var(--space-sm);
}
.p-sm {
padding: var(--space-sm);
}
.p-md {
padding: var(--space-md);
}
.p-lg {
padding: var(--space-lg);
}
.mx-auto {
margin: 0 auto;
}
.mt-auto {
margin-top: auto;
}
.ml-auto {
margin-left: auto;
}

/*カラー系 */
.bg-navy {
background: var(--color-navy);
}
.bg-green {
background: var(--color-green);
}
.bg-lgreen {
background: var(--color-lgreen);
}
.bg-dgreen {
background: var(--color-dgreen);
}
.bg-lgray {
background: var(--color-lgray);
}
.bg-white {
background: var(--color-white);
}
.text-gray {
color: var(--color-gray);
}
.text-dgreen {
color: var(--color-dgreen);
}
.text-red {
color: var(--color-red);
}
.color-base a,
a.color-base {
color: var(--color-base);
}
.color-base a:hover,
a.color-base:hover {
color: var(--color-base-hover);
}

.color-dgreen a,
a.color-dgreen {
color: var(--color-dgreen);
}
.color-dgreen a:hover,
a.color-dgreen:hover {
color: var(--color-dgreen-hover);
}

.color-red a,
a.color-red {
color: var(--color-red);
}
.color-red a:hover,
a.color-red:hover {
color: var(--color-red-hover);
}

.btn-navy {
background: var(--color-navy);
color: var(--color-white) !important;
}
.btn-navy:hover {
background: var(--color-navy-hover);
}

.btn-green {
background: var(--color-green);
color: var(--color-white) !important;
}
.btn-green:hover {
background: var(--color-green-hover);
}

/* 幅・高さ・表示 */
.w-100 {
width: 100%;
}
.h-100 {
height: 100%;
}
.d-block {
display: block;
}
.d-grid {
display: grid;
}
.d-inline-block {
display: inline-block;
}
.d-flex {
display: flex;
}
.d-inline-flex {
display: inline-flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.align-items-center {
align-items: center;
}
.justify-content-center {
justify-content: center;
}
.justify-content-end {
justify-content: end;
}
.justify-content-between {
justify-content: space-between;
}
.gap-xs {
gap: var(--space-xs);
}
.gap-sm {
gap: var(--space-sm);
}
.gap-md {
gap: var(--space-md);
}
.position-relative {
position: relative;
}

/* 背景・ボーダー・色 */
.rounded-base {
border-radius: 8px;
}
.rounded-all {
border-radius: 9999px;
}
hr.border-dotted{
border-top:1px dotted var(--border-color);
}

/* d-none系 */
.d-none {
display: none;
}
@media (min-width: 576px) {
.d-sm-none {
display: none !important;
}
.d-sm-block {
display: block !important;
}
.d-sm-flex {
display: flex !important;
}
.d-sm-inline {
display: inline !important;
}
}
@media (min-width: 768px) {
.d-md-none {
display: none !important;
}
.d-md-block {
display: block !important;
}
.d-md-flex {
display: flex !important;
}
.d-md-inline {
display: inline !important;
}
}
@media (min-width: 992px) {
.d-lg-none {
display: none !important;
}
.d-lg-block {
display: block !important;
}
.d-lg-flex {
display: flex !important;
}
}
@media (min-width: 1200px) {
.d-xl-none {
display: none !important;
}
}
@media (min-width: 1400px) {
.d-xxl-none {
display: none !important;
}
}

/* */
.overflow-hidden {
overflow: hidden;
}
p + p {
margin-top: 0.5em;
}
@media (min-width: 576px) {
.lh-lg {
line-height: 2.2;
}
}