@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
body {
  --bs-body-font-family: "Noto Sans JP", sans-serif;
}

/* .p-* (padding) */
.p-20px { padding: 20px; }
.p-56px { padding: 56px; }

/* .pt-* (padding-top) */
.pt-6px { padding-top: 6px; }
.pt-8px { padding-top: 8px; }  /* TODO:【非推奨】この class は使用せず、".pt-2" を使用してください */
.pt-14px { padding-top: 14px; }
.pt-20px { padding-top: 20px; }

/* .pb-* (padding-bottom) */
.pb-12px { padding-bottom: 12px; }
.pb-16px { padding-bottom: 16px; }  /* TODO:【非推奨】この class は使用せず、".pb-3" を使用してください */

/* .pl-* (padding-left) */
.pl-32px { padding-left: 32px; }

/* .pr-* (padding-right) */
.pr-40px { padding-right: 40px; }

/* .px-* (padding-left and right) */
.px-12px { padding-left: 12px; padding-right: 12px; }
.px-20px { padding-left: 20px; padding-right: 20px; }
.px-40px { padding-left: 40px; padding-right: 40px; }
.px-96px-responsive {
  padding-left: 96px;
  padding-right: 96px;
  padding: 0 clamp(12px, 8vw, 96px);
}

/* .py-* (padding-top and bottom) */
.py-4px { padding-top: 4px; padding-bottom: 4px; }  /* TODO:【非推奨】この class は使用せず、".py-1" を使用してください */
.py-7-point-5 { padding-top: 7.5px; padding-bottom: 7.5px; }
.py-16px { padding-top: 16px; padding-bottom: 16px; }  /* TODO:【非推奨】この class は使用せず、".py-3" を使用してください */

/* .mt-* (margin-top) */
.mt-6px { margin-top: 6px; }

/* .mb-* (margin-bottom) */
.mb-2px { margin-bottom: 2px; }
.mb-16px { margin-bottom: 16px; }  /* TODO:【非推奨】この class は使用せず、".mb-3" を使用してください */
.mb-18px { margin-bottom: 18px; }
.mb-56px { margin-bottom: 56px; }

/* .mx-* (margin-left and margin-right) */
.mx-56px { margin-left: 56px; margin-right: 56px; } 

/* .my-* (margin-top and margin-bottom) */
.my-56px { margin-top: 56px; margin-bottom: 56px; } 

/* .gap-* (gap) */
.gap-6px { gap: 6px; }
.gap-8px { gap: 8px; }  /* TODO:【非推奨】この class は使用せず、".gap-2" を使用してください */
.gap-16px { gap: 16px; }  /* TODO:【非推奨】この class は使用せず、".gap-3" を使用してください */

/* .row-gap-* (row-gap) */
.row-gap-2px { row-gap: 2px; }

/* .column-gap-* (column-gap) */
.column-gap-20px { column-gap: 20px; }

/* .h-* (height) */
.h-fit-content { height: fit-content; }
.h-16px { height: 16px; }
.h-24px { height: 24px; }
.h-26px { height: 26px; }
.h-29px { height: 29px; }
.h-35px { height: 35px; }
.h-38px { height: 38px; }
.h-62px { height: 62px; }
.h-110px { height: 110px; }
.h-80vh { height: 80vh; }
.h-100vh { height: 100vh; }  /* TODO:【非推奨】この class は使用せず、".vh-100" を使用してください */

/* .w-* (width) */
.w-fit-content { width: fit-content; }
.w-3 { width: 3%; }
.w-6 { width: 6%; }
.w-9 { width: 9%; }
.w-10 { width: 10%; }
.w-11 { width: 11%; }
.w-12 { width: 12%; }
.w-13 { width: 13%; }
.w-15 { width: 15%; }
.w-16 { width: 16%; }
.w-17 { width: 17%; }
.w-20 { width: 20%; }
.w-28 { width: 28%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-16px { width: 16px; }
.w-24px { width: 24px; }
.w-35px { width: 35px; }
.w-38px { width: 38px; }
.w-40px { width: 40px; }
.w-90px { width: 90px; }
.w-110px { width: 110px; }
.w-120px { width: 120px; }
.w-126px { width: 126px; }
.w-130px { width: 130px; }
.w-140px { width: 140px; }
.w-150px { width: 150px; }
.w-160px { width: 160px; }
.w-180px { width: 180px; }
.w-184px { width: 184px; }
.w-190px { width: 190px; }
.w-200px { width: 200px; }
.w-215px { width: 215px; }
.w-220px { width: 220px; }
.w-230px { width: 230px; }
.w-240px { width: 240px; }
.w-250px { width: 250px; }
.w-300px { width: 300px; }
.w-340px { width: 340px; }
.w-480px { width: 480px; }
.w-740px { width: 740px; }

/* .min-h-* (min-height) */
.min-h-35px { min-height: 35px; }
.min-h-38px { min-height: 38px; }

/* .min-w-* (min-width) */
.min-w-90px { min-width: 90px; }
.min-w-120px { min-width: 120px; }
.max-w-250px { max-width: 250px; }
.max-w-960px { max-width: 960px; }

/* .fs-* (font-size) */
.fs-24px { font-size: 24px; }
.fs-10px { font-size: 10px; }
.fs-12px { font-size: 12px; }
.fs-14px { font-size: 14px; }
.fs-18px { font-size: 18px; }
.fs-28px { font-size: 28px; }
.fs-32px { font-size: 32px; }

/* .fw-* (font-weight) */
.fw-700 { font-weight: 700; }  /* TODO:【非推奨】この class は使用せず、".fw-bold" を使用してください */

/* .border-* (border) */
.border-dashed { border-style: dashed !important; }

/* TODO: 【非推奨】この class は使用せず、table コンポーネントを使用してください */
/* テーブルのレイアウトを親要素の幅で固定する */
.table-fixed {
  table-layout: fixed;
  width: 100%;
}

/* TODO: 【非推奨】bootstrap の .text-truncate を使用してください */
/* テキストが長すぎる場合に「...」で省略表示する */
.text-overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* TODO: 【非推奨】bootstrap の .d-none を使用してください */
.display-none {
    display: none;
}

/* TODO: .gray-outはCSS方針設計に従ってglobal.cssではなくコンポーネント化してそこにスタイルをカプセル化する */
.gray-out {
    background-color: var(--op-gray-200);
    color: var(--op-gray-900) !important;
}

/* TODO: .gray-outはCSS方針設計に従ってglobal.cssではなくコンポーネント化してそこにスタイルをカプセル化する */
.gray-out:focus {
    background-color: var(--op-gray-200);
    color: var(--op-gray-900) !important;
    outline: none;
}

/* TODO: .form-*はCSS方針設計に従ってglobal.cssではなくform をコンポーネント化してそこにスタイルをカプセル化する */
.from-required-badge {
    background-color: var(--op-red-100);
    color: var(--op-red-500);
    border: solid 1px var(--op-red-500);
}

/* TODO: .form-*はCSS方針設計に従ってglobal.cssではなくform をコンポーネント化してそこにスタイルをカプセル化する */
.form-control-mgmt:checked {
    background-color: var(--op-blue-600) !important;
    border-color: var(--op-blue-600) !important;
}