@charset "UTF-8";

.p-10 {
    padding: 10px;
}

.p-20 {
    padding: 20px;
}

.p-30 {
    padding: 30px;
}

.p-40 {
    padding: 40px;
}

.p-50 {
    padding: 50px;
}

.p-60 {
    padding: 60px;
}

.p-70 {
    padding: 70px;
}

.p-80 {
    padding: 80px;
}

.p-90 {
    padding: 90px;
}

.p-100 {
    padding: 100px;
}

.p-t_15 {
    padding-top: 15px;
}

.p-t_30 {
    padding-top: 30px;
}

.p-t_50 {
    padding-top: 50px;
}

.p-l_50 {
    padding-left: 50px;
}

.p-l_6rem {
    padding-left: 6rem;
}

.p-l_15rem {
    padding-left: 15rem;
}

.m-10 {
    margin: 10px;
}

.m-20 {
    margin: 20px;
}

.m-30 {
    margin: 30px;
}

.m-40 {
    margin: 40px;
}

.m-50 {
    margin: 50px;
}

.m-60 {
    margin: 60px;
}

.m-70 {
    margin: 70px;
}

.m-80 {
    margin: 80px;
}

.m-90 {
    margin: 90px;
}

.m-100 {
    margin: 100px;
}

.m-lr_10 {
    margin-left: 10px;
    margin-right: 10px;
}

.m-b_1rem {
    margin-bottom: 1rem;
}

.w-10 {
    width: 10%;
}

.w-20 {
    width: 20%;
}

.w-25 {
    width: 25%;
}

.w-30 {
    width: 30%;
}

.w-33 {
    width: 33%;
}

.w-34 {
    width: 34%;
}

.w-40 {
    width: 40%;
}

.w-50 {
    width: 50%;
}

.w-60 {
    width: 60%;
}

.w-70 {
    width: 70%;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}

.w-100p {
    width: 100px;
}

.w-150p {
    width: 150px;
}

.w-200p {
    width: 200px;
}

.w-300p {
    width: 300px;
}

.w-e12 {
    width: 12em;
}

.w-e3 {
    width: 3em;
}

.w-e4 {
    width: 4em;
}

.h-100p {
    height: 100px;
}

.h-200p {
    height: 200px;
}

.h-300p {
    height: 300px;
}

.fx {
    display: flex;
    justify-content: center
}

.fx-block_item {
    display: block
}

.fx-jc_sb {
    justify-content: space-between
}

.fx-jc_sa {
    justify-content: space-around
}

.fx-jc_fs {
    justify-content: flex-start
}

.fx-wrap {
    flex-wrap: wrap
}

.fx-jc_end {
    justify-content: flex-end
}

.fx-fg2 {
    flex-grow: 2
}

.fx-ai_fe {
    align-items: flex-end
}

.fx-ai_c {
    align-items: center
}

.fx-ac_c {
    align-content: center
}

.fx-as_c {
    align-self: center;
}

.fx-as_s {
    align-self: stretch;
}

.fx-as_fe {
    align-self: flex-end
}

.bkg-purple {
    background-color: purple;
}

.bkg-blue {
    background-color: #00f;
}

.bkg-orange {
    background-color: orange;
}

.bkg-gray {
    background-color: gray;
}

.bkg-black {
    background-color: #000;
}

.fc-red {
    color: red
}

.fw-b {
    font-weight: 700
}

.label-danger {
    color: red;
}

body:not(.layout-fixed) .main-sidebar {
    position: fixed;;
    height: 100%;;
    overflow-y: scroll;
}

nav.main-header {
    position: fixed;;
    top: 0;;
    width: calc(100% - 250px);
}

.content-wrapper {
    margin-top: 56px
}

.content-header {
    background-color: #f4f6f9
}

#modal-content {
    width: 60%;
    max-height: 90%;
    margin: 0;
    padding: 10px 20px;
    border: 2px solid #aaa;
    background: #fff;
    position: fixed;
    display: none;
    z-index: 2;
    color: #000
}

#modal-content #modal_open {
    height: 50%
}

#modal-content #modal_open #modal_header {
    margin: 20px
}

#modal-content #modal_open #modal_main {
    overflow: scroll
}

#modal-content #modal_open #modal_main p,
#modal-content #modal_open #modal_main th,
#modal-content #modal_open #modal_main input,
#modal-content #modal_open #modal_main select,
#modal-content #modal_open #modal_main option {
    color: #000;
}

#modal-content #modal_open #modal_footer {
    margin-top: 20px
}

.modal {
    height: 60%;
}

.modal-table {
    border-collapse: collapse;
    display: block
}

.modal-table tbody {
    width: 100%
}

.modal-table tbody tr:nth-child(odd) {
    background-color: #ddd
}

.modal-table tbody tr {
    width: 100%
}

.modal-table tbody tr th,
.modal-table tbody tr td {
    padding: 5px 10px
}

.modal-table tbody tr th p,
.modal-table tbody tr th select,
.modal-table tbody tr th option,
.modal-table tbody tr td p,
.modal-table tbody tr td select,
.modal-table tbody tr td option {
    display: table-cell;
    vertical-align: middle;
    font-size: 20px
}

.modal-table tbody tr td,
.modal-table tbody tr th {
    width: 20%
}

.modal-body {
    height: auto;
}

::-webkit-scrollbar {
    display: none
}

#modal-overlay {
    z-index: 1;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-color: #000000bf
}

#comment {
    resize: none;
    height: 150px;
    width: 100%
}

.now-status {
    padding: 10px;
    border: 2px solid #aaa
}

.fild {
    margin-bottom: 70px;
    border-bottom: rgba(0, 0, 0, .125) 2px solid
}

.progressbar {
    display: flex
}

.progressbar .item {
    width: 33%;
    text-align: center;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 13px 0;
    line-height: 1.5;
    background: #F5F5F5;
    color: #999
}

.progressbar .item:not(:last-child):before,
.progressbar .item:not(:last-child):after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 100%;
    content: "";
    border: 37px solid transparent;
    border-left: 20px solid #F5F5F5;
    margin: auto
}

.progressbar .item:not(:last-child):before {
    margin-left: 1px;
    border-left-color: #fff
}

@media screen and (max-width: 767px) {
    .progressbar .item {
        font-size: 11px;
        line-height: 1.4;
        padding: 10px 0
    }

    .progressbar .item:not(:last-child):before,
    .progressbar .item:not(:last-child):after {
        border-width: 25px;
        border-left-width: 12px
    }
}

.progressbar .item.active {
    z-index: 1;
    background: #0070BD;
    color: #fff
}

.progressbar .item.active:not(:last-child):after {
    border-left-color: #0070bd
}

.progressbar .item.active:not(:last-child):before {
    border-left: none
}

/* タイピングアニメーション　カーソル　点滅 */
.ityped-cursor {
    font-size: 4.0625rem;
    opacity: 1;
    animation: blink 0.3s infinite;
    animation-direction: alternate;
}

@keyframes blink {
    100% {
        opacity: 0;
    }
}


.orbit-spinner,
.orbit-spinner * {
    box-sizing: border-box;
}

.orbit-spinner {
    height: 55px;
    width: 55px;
    border-radius: 50%;
    perspective: 800px;
}

.orbit-spinner .orbit {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.orbit-spinner .orbit:nth-child(1) {
    left: 0%;
    top: 0%;
    animation: orbit-spinner-orbit-one-animation 1200ms linear infinite;
    border-bottom: 3px solid #ff1d5e;
}

.orbit-spinner .orbit:nth-child(2) {
    right: 0%;
    top: 0%;
    animation: orbit-spinner-orbit-two-animation 1200ms linear infinite;
    border-right: 3px solid #ff1d5e;
}

.orbit-spinner .orbit:nth-child(3) {
    right: 0%;
    bottom: 0%;
    animation: orbit-spinner-orbit-three-animation 1200ms linear infinite;
    border-top: 3px solid #ff1d5e;
}

@keyframes orbit-spinner-orbit-one-animation {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes orbit-spinner-orbit-two-animation {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes orbit-spinner-orbit-three-animation {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}