@charset "UTF-8";
html {
    font-size: 62.5%;
    list-style: none;
}

a:hover {
    color: inherit; /* 文字色を親要素と同じにする */
}

body .loader {
    align-items: center;
    display: none;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
}
body .loader.isActive {
    display: flex;
}
body .loader .mask {
    background-color: #000000;
    bottom: 0;
    height: 100%;
    left: 0;
    opacity: 0.3;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
}
body .loader .loaderWrap {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
}
body .loader .loaderWrap .bindingLine {
    border: 3px solid #ffffff;
    content: "";
    height: 6px;
    margin: 0 auto;
    width: 60px;
}
body .loader .loaderWrap .box {
    border: 2px solid #ffffff;
    border-top: 0;
    display: flex;
    flex-direction: column;
    height: 70px;
    justify-content: center;
    margin: 0 auto;
    padding: 10px 3px 10px 7px;
    width: 60px;
}
body .loader .loaderWrap .box .line {
    animation: writeLine 3s infinite ease-in;
    border-top: 2px solid #ffffff;
    margin-bottom: 8px;
    opacity: 0;
    width: 40px;
}
body .loader .loaderWrap .box .line.line1 {
    animation-delay: 0s;
}
body .loader .loaderWrap .box .line.line2 {
    animation-delay: 0.5s;
}
body .loader .loaderWrap .box .line.line3 {
    animation-delay: 1s;
}
body .loader .loaderWrap .box .line.line4 {
    animation-delay: 1.5s;
}
body .loader .loaderWrap .loaderText {
    color: #ffffff;
    font-size: 2rem;
    margin-top: 10px;
    text-align: center;
}
@keyframes writeLine {
    0% {
        opacity: 0;
        width: 0;
    }
    45% {
        opacity: 1;
        width: 40px;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* z-index
* ナビゲーションバー（ハンバーガー） 1
* ヘッダー　1
* 下部固定エリア　10
* labelModalOverlay 1
* labelModalBody 2
* navbar.container-fluid 1
* bottomArea 1
*/
body {
    font-size: 1.6rem;
}
body .container-fluid {
    padding: 0;
    background-color: #fff;
    /* ヘッダー ========================================================= */
}
body .container-fluid header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 10px 20px 0;
    background-color: #fff;
    z-index: 1;
    /* ラベル表示、表示切り替え、複数選択 =========================================================*/
}
body .container-fluid header .generalMode {
    display: block;
}
body .container-fluid header .generalMode .container-fluid {
    position: absolute;
    top: 0%;
    left: 0%;
    background-color: #fff;
    padding: 0 10px 20px;
    z-index: 1;
}
body .container-fluid header .generalMode .container-fluid .navbar-brand {
    font-size: 3rem;
}
body .container-fluid header .generalMode .container-fluid .navbar-collapse .navbar-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
body .container-fluid header .generalMode .container-fluid .navbar-collapse .navbar-nav .myBoxNavBtn {
    width: 100%;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
    transition: 0.5s;
    cursor: pointer;
}
body .container-fluid header .generalMode .container-fluid .navbar-collapse .navbar-nav .myBoxNavBtn.isShow {
    background-color: #696969;
    color: #fff;
}
body .container-fluid header .generalMode .container-fluid .navbar-collapse .navbar-nav .accordion.isShow .accordion-button {
    background-color: #696969;
    color: #fff;
}
body .container-fluid header .generalMode .container-fluid .navbar-collapse .navbar-nav .accordion .accordion-button {
    display: block;
    height: 40px;
    text-align: center;
    color: #000;
    background-color: #fff;
    border-color: #333;
    font-size: 1.6rem;
    box-shadow: none;
    padding: 0;
}
body .container-fluid header .generalMode .container-fluid .navbar-collapse .navbar-nav .accordion .accordion-button::after {
    color: #000;
    transform: rotate(0deg);
}
body .container-fluid header .generalMode .container-fluid .navbar-collapse .navbar-nav .accordion .accordion-collapse {
    padding: 10px;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
}
body .container-fluid header .generalMode .container-fluid .navbar-collapse .navbar-nav .accordion .accordion-body {
    padding: 0 0 20px;
    max-height: 100px;
    overflow-y: scroll;
    padding: 0;
}
body .container-fluid header .generalMode .container-fluid .navbar-collapse .navbar-nav .accordion .generalNavShareBtn {
    width: 100%;
}
body .container-fluid header .generalMode .container-fluid .navbar-collapse .navbar-nav .accordion .generalNavShareBtn::after {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    color: #000;
    line-height: 1;
    width: 10px;
    height: 10px;
    border: 1px solid #000;
    border-left: 0;
    border-bottom: 0;
    transform: translateY(-25%) rotate(135deg);
    background-image: none;
}
body .container-fluid header .generalMode .container-fluid .navbar-collapse .navbar-nav .accordion .generalNavShareBtn.isShow {
    color: #fff;
    background-color: #696969;
}
body .container-fluid header .generalMode .container-fluid .navbar-collapse .navbar-nav .accordion .generalNavShareBtn.isShow::after {
    border: 1px solid #fff;
    border-left: 0;
    border-bottom: 0;
}
body .container-fluid header .generalMode .container-fluid .navbar-collapse .navbar-nav .accordion .generalNavBtn {
    font-size: 1.6rem;
    outline: none;
    width: 100%;
    text-align: center;
}
body .container-fluid header .generalMode .container-fluid .navbar-collapse .navbar-nav .accordion .generalNavBtn span {
    margin-left: 10px;
}
body .container-fluid header .generalMode .container-fluid .navbar-collapse .navbar-nav .accordion .generalNavBtn.isShow {
    color: #fff;
    background-color: #696969;
}
body .container-fluid header .generalMode .container-fluid .navbar-collapse .navbar-nav .accordion .generalNavBtn:hover {
    color: #fff;
    background-color: #a9a9a9;
}
body .container-fluid header .generalMode .container-fluid .navbar-collapse .navbar-nav .accordion-body .generalNavBtn {
    display: block;
    cursor: pointer;
}
body .container-fluid header .generalMode .container-fluid .navbar-collapse .commonHeaderBtn {
    font-size: 1.6rem;
}
body .container-fluid header .generalMode .container-fluid .navbar-collapse .commonHeaderBtn .nav-item {
    border: 1px solid #000;
}
body .container-fluid header .generalMode .container-fluid .navbar-collapse .commonHeaderBtn .nav-item:hover {
    background-color: #696969;
    color: #fff;
}
body .container-fluid header .supporterMode {
    display: none;
}
body .container-fluid header .supporterMode .container-fluid {
    position: absolute;
    top: 0%;
    left: 0%;
    background-color: #fff;
    padding: 0 10px 20px;
    z-index: 1;
}
body .container-fluid header .supporterMode .container-fluid .navbar-brand {
    font-size: 3rem;
}
body .container-fluid header .supporterMode .container-fluid .navbar-collapse .navbar-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 1.6rem;
}
body .container-fluid header .supporterMode .container-fluid .navbar-collapse .navbar-nav .myBoxNavBtn {
    width: 100%;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
    transition: 0.5s;
    cursor: pointer;
}
body .container-fluid header .supporterMode .container-fluid .navbar-collapse .navbar-nav .myBoxNavBtn.isShow {
    background-color: #333;
    color: #fff;
}
body .container-fluid header .supporterMode .container-fluid .navbar-collapse .navbar-nav .accordion.isShow .accordion-button {
    background-color: #696969;
    color: #fff;
}
body .container-fluid header .supporterMode .container-fluid .navbar-collapse .navbar-nav .accordion .accordion-button {
    display: block;
    height: 40px;
    text-align: center;
    color: #000;
    background-color: #fff;
    border-color: #333;
    font-size: 1.6rem;
    box-shadow: none;
    padding: 0;
}
body .container-fluid header .supporterMode .container-fluid .navbar-collapse .navbar-nav .accordion .accordion-button::after {
    color: #000;
    transform: rotate(0deg);
}
body .container-fluid header .supporterMode .container-fluid .navbar-collapse .navbar-nav .accordion .accordion-collapse {
    padding: 10px;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
}
body .container-fluid header .supporterMode .container-fluid .navbar-collapse .navbar-nav .accordion .accordion-body {
    padding: 0 0 20px;
    max-height: 100px;
    overflow-y: scroll;
    padding: 0;
}
body .container-fluid header .supporterMode .container-fluid .navbar-collapse .navbar-nav .accordion .supporterNavShareBtn {
    width: 100%;
}
body .container-fluid header .supporterMode .container-fluid .navbar-collapse .navbar-nav .accordion .supporterNavShareBtn::after {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    color: #000;
    line-height: 1;
    width: 10px;
    height: 10px;
    border: 1px solid #000;
    border-left: 0;
    border-bottom: 0;
    transform: translateY(-25%) rotate(135deg);
    background-image: none;
}
body .container-fluid header .supporterMode .container-fluid .navbar-collapse .navbar-nav .accordion .supporterNavShareBtn.isShow {
    color: #fff;
    background-color: #333;
}
body .container-fluid header .supporterMode .container-fluid .navbar-collapse .navbar-nav .accordion .supporterNavShareBtn.isShow::after {
    border: 1px solid #fff;
    border-left: 0;
    border-bottom: 0;
}
body .container-fluid header .supporterMode .container-fluid .navbar-collapse .navbar-nav .accordion .supporterNavBtn {
    font-size: 1.6rem;
    outline: none;
    width: 100%;
    text-align: center;
}
body .container-fluid header .supporterMode .container-fluid .navbar-collapse .navbar-nav .accordion .supporterNavBtn.isShow {
    color: #fff;
    background-color: #333;
}
body .container-fluid header .supporterMode .container-fluid .navbar-collapse .navbar-nav .accordion .supporterNavBtn:hover {
    color: #fff;
    background-color: #a9a9a9;
}
body .container-fluid header .supporterMode .container-fluid .navbar-collapse .navbar-nav .accordion-body .supporterNavBtn {
    display: block;
    cursor: pointer;
}
body .container-fluid header .supporterMode .container-fluid .navbar-collapse .commonHeaderBtn {
    font-size: 1.6rem;
}
body .container-fluid header .supporterMode .container-fluid .navbar-collapse .commonHeaderBtn .nav-item {
    border: 1px solid #000;
}
body .container-fluid header .supporterMode .container-fluid .navbar-collapse .commonHeaderBtn .nav-item:hover {
    background-color: #333;
    color: #fff;
}
body .container-fluid header .upperArea {
    display: flex;
    gap: 10px;
    margin-top: 61px;
    flex-direction: row-reverse;
}
body .container-fluid header .upperArea .selectLanguage {
    text-align: right;
}
body .container-fluid header .upperArea .selectLanguage .languageBtn {
    font-size: 1.6rem;
    color: #000;
    border: 1px solid #000;
    background-color: #fff;
}
body .container-fluid header .upperArea .selectLanguage .languageMenu {
    min-width: 7rem;
    font-size: 1.6rem;
}
body .container-fluid header .upperArea .upperBtnBlock {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
body .container-fluid header .upperArea .upperBtnBlock .shareBoxCreateBtn,
body .container-fluid header .upperArea .upperBtnBlock .upLoadBtn {
    display: block;
    font-size: 1.6rem;
}
body .container-fluid header .headerOperationMenu {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
    position: sticky;
    top: 0;
    gap: 20px;
    border-bottom: 2px solid #ccc;
}
body .container-fluid header .headerOperationMenu .displayType {
    display: flex;
    align-items: center;
    gap: 10px;
}
body .container-fluid header .headerOperationMenu .displayType .displayIcon {
    display: flex;
    gap: 10px;
    cursor: pointer;
}
body .container-fluid header .headerOperationMenu .displayType .displayIcon .tileDisplayBtn {
    font-size: 4rem;
    color: #ffa07a;
}
body .container-fluid header .headerOperationMenu .displayType .displayIcon .tileDisplayBtn.inActive {
    color: #000;
}
body .container-fluid header .headerOperationMenu .displayType .displayIcon .tileDisplayBtn:hover {
    opacity: 0.5;
}
body .container-fluid header .headerOperationMenu .displayType .displayIcon .listDisplayBtn {
    font-size: 4rem;
}
body .container-fluid header .headerOperationMenu .displayType .displayIcon .listDisplayBtn:hover {
    opacity: 0.5;
}
body .container-fluid header .headerOperationMenu .displayType .displayIcon .listDisplayBtn.isActive {
    color: #ffa07a;
}
body .container-fluid header .headerOperationMenu .displayType .showCover {
    visibility: hidden;
    opacity: 0;
}
body .container-fluid header .headerOperationMenu .displayType .showCover .showCoverToggleBtn {
    position: relative;
    width: 50px;
    height: 20px;
    margin: auto;
}
body .container-fluid header .headerOperationMenu .displayType .showCover .showCoverToggleBtn .showCoverinput {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
body .container-fluid header .headerOperationMenu .displayType .showCover .showCoverToggleBtn .showCoverinput:checked + .showCoverLabel {
    background-color: #0d6efd;
}
body .container-fluid header .headerOperationMenu .displayType .showCover .showCoverToggleBtn .showCoverinput:checked + .showCoverLabel::after {
    left: 30px;
}
body .container-fluid header .headerOperationMenu .displayType .showCover .showCoverLabel {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 20px;
    background-color: #ccc;
    border-radius: 40px;
    transition: 0.4s;
}
body .container-fluid header .headerOperationMenu .displayType .showCover .showCoverLabel::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: 0.4s;
    top: 0;
    left: 0;
}
body .container-fluid header .headerOperationMenu .displayType .showCover.isListDisplayed {
    visibility: visible;
    opacity: 1;
}
body .container-fluid header .headerOperationMenu .selectMultipleBtn {
    height: 38px;
    font-size: 1.6rem;
}
body .container-fluid header .headerOperationMenu .supporterOnly {
    display: none;
    cursor: pointer;
}
body .container-fluid header .headerOperationMenu .supporterOnly.isShow {
    display: block;
}

body {
    font-size: 1.6rem;
}
body .container-fluid main {
    display: flex;
    align-items: start;
    margin-top: 130px;
    padding: 0 10px 10px 10px;
}
body .container-fluid main .mainArea {
    width: 100%;
    height: calc(100vh - 250px);
    padding: 20px;
    overflow-y: auto;
}
body .container-fluid main .mainArea .mainAreaMenu {
    display: flex;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort {
    display: flex;
    gap: 20px;
    margin-right: auto;
    margin-bottom: 20px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .labelSelectBtn {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .labelSelectBtn.isHidden {
    display: none;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .labelSelectMenu {
    padding: 5px;
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .labelSelectMenu .labelLi {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .labelSelectMenu .labelLi .labelImgSvg {
    width: 25px;
    height: 15px;
    fill: #556b2f;
    pointer-events: none;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .labelSelectMenu .labelLi:nth-of-type(2) .labelImgSvg {
    fill: #6495ed;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .labelSelectMenu .labelLi:nth-of-type(3) .labelImgSvg {
    fill: #ffb6c1;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelBtn {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addNewLabel .currentNewLabel {
    display: flex;
    align-items: center;
    width: 200px;
    height: 30px;
    border: 1px solid #000;
    border-radius: 10px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addNewLabel .currentNewLabel .addLabelImg {
    width: 25px;
    height: 15px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body label {
    display: flex;
    flex-direction: column;
    align-items: center;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addLabelNameInput {
    display: flex;
    flex-direction: column;
    width: 200px;
    padding: 5px;
    border: 1px solid #000;
    border-radius: 10px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addLabelNameInput.isChange::placeholder {
    color: red;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .chooseColor {
    display: flex;
    flex-direction: column;
    align-items: center;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .chooseColor .chooseColorInput {
    width: 80px;
    height: 40px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .chooseColor .addNewColorLabelSvg {
    width: 25px;
    height: 15px;
    display: none;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addNewLabelDisplay {
    width: 200px;
    height: 30px;
    border: 1px solid #000;
    padding: 5px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addNewLabelDisplay.isHidden {
    visibility: hidden;
    opacity: 0;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addNewLabelDisplay .labelLi {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 5px;
    cursor: pointer;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addNewLabelDisplay .labelLi .addNewColorLabelSvg {
    width: 25px;
    height: 15px;
    pointer-events: none;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addNewLabelDisplay .labelLi span {
    pointer-events: none;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addNewColorLabelSvg {
    width: 25px;
    height: 15px;
    margin-right: 5px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addLabelPlaceMask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    opacity: 0.5;
    z-index: 3000;
    display: none;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addLabelPlaceMask.isVisible {
    display: block;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addLabelPlaceModal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(90vw, 500px);
    height: 400px;
    background-color: #fff;
    z-index: 3010;
    display: none;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addLabelPlaceModal.isVisible {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addLabelPlaceModal .heading {
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 10px;
    margin-bottom: 20px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addLabelPlaceModal .currentLabelListWrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 200px;
    max-height: 150px;
    padding: 10px;
    overflow-y: scroll;
    border: 1px solid #000;
    border-radius: 10px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addLabelPlaceModal .currentLabelListWrap .currentLabelList {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    /* 現在のラベル */
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addLabelPlaceModal .currentLabelListWrap .currentLabelList .labelLi {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addLabelPlaceModal .currentLabelListWrap .currentLabelList .labelLi .labelImgSvg {
    width: 25px;
    height: 15px;
    fill: #556b2f;
    pointer-events: none;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addLabelPlaceModal .currentLabelListWrap .currentLabelList .labelLi:nth-of-type(2) .labelImgSvg {
    fill: #6495ed;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addLabelPlaceModal .currentLabelListWrap .currentLabelList .labelLi:nth-of-type(3) .labelImgSvg {
    fill: #ffb6c1;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addLabelPlaceModal .addNewLabelDisplayText {
    display: block;
    pointer-events: none;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addLabelPlaceModal .addNewLabelDisplayText.isHidden {
    display: none;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addLabelPlaceModal .addNewLabelDisplay {
    display: flex;
    align-items: center;
    border-radius: 5px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addLabelPlaceModal .addLabelSecondModalBtnBlock {
    display: flex;
    gap: 10px;
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 3010;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addLabelPlaceModal .addLabelSecondModalBtnBlock .addLabelPlaceBackBtn,
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-body .addLabelPlaceModal .addLabelSecondModalBtnBlock .addLabelPlaceSaveBtn {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-footer .addLabelModalSaveBtn,
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelModal .modal-content .modal-footer .addLabelModalCloseBtn {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .addLabelNextBtn,
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelBtn {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body {
    display: flex;
    justify-content: center;
    gap: 30px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel {
    display: flex;
    flex-direction: column;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel .currentLabelList {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 200px;
    max-height: 150px;
    margin-bottom: 20px;
    padding: 10px;
    overflow-y: scroll;
    border: 1px solid #000;
    border-radius: 10px;
    /* 現在のラベル */
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel .currentLabelList .labelLi {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel .currentLabelList .labelLi .labelImgSvg {
    width: 25px;
    height: 15px;
    fill: #556b2f;
    pointer-events: none;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel .currentLabelList .labelLi:nth-of-type(2) .labelImgSvg {
    fill: #6495ed;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel .currentLabelList .labelLi:nth-of-type(3) .labelImgSvg {
    fill: #ffb6c1;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel .editLabelListWrap {
    margin-bottom: 10px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel .editLabelListWrap .editLabelList {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 200px;
    max-height: 150px;
    border: 1px solid #000;
    border-radius: 10px;
    margin: 0 auto;
    padding: 10px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel .editLabelListWrap .editLabelList .labelItem {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel .editLabelListWrap .editLabelList .labelItem .labelImg {
    width: 25px;
    height: 15px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel .currentEditLabelWrap {
    margin-bottom: 10px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel .currentEditLabelWrap .currentEditLabel {
    display: flex;
    align-items: center;
    width: 200px;
    height: 30px;
    border: 1px solid #000;
    margin: 0 auto;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel .currentEditLabelWrap .currentEditLabel .labelDiv {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel .currentEditLabelWrap .currentEditLabel .labelDiv .labelImgSvg {
    width: 25px;
    height: 15px;
    fill: #556b2f;
    pointer-events: none;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel .currentEditLabelWrap .currentEditLabel .labelDiv:nth-of-type(2) .labelImgSvg {
    fill: #6495ed;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel .currentEditLabelWrap .currentEditLabel .labelDiv:nth-of-type(3) .labelImgSvg {
    fill: #ffb6c1;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel .currentEditLabelWrap .currentEditLabel .labelItem {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel .currentEditLabelWrap .currentEditLabel .labelItem .labelImg {
    width: 25px;
    height: 15px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel .currentEditLabelWrap .editLabelModalBtnBlock {
    display: flex;
    justify-content: center;
    gap: 5px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel .currentEditLabelWrap .editLabelModalBtnBlock .startEditLabelBtn,
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .beforeEditLabel .currentEditLabelWrap .editLabelModalBtnBlock .deleteLabelBtn {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 400px;
    background-color: #fff;
    z-index: 3010;
    display: none;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal.isVisible {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal.isVisible .currentSelectEditLabel {
    display: flex;
    align-items: center;
    width: 200px;
    height: 30px;
    padding: 5px;
    border: 1px solid #000;
    border-radius: 10px;
    margin-bottom: 20px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal.isVisible .currentSelectEditLabel .labelDiv {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal.isVisible .currentSelectEditLabel .labelDiv .labelImgSvg {
    width: 25px;
    height: 15px;
    fill: #556b2f;
    pointer-events: none;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal.isVisible .currentSelectEditLabel .labelDiv:nth-of-type(2) .labelImgSvg {
    fill: #6495ed;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal.isVisible .currentSelectEditLabel .labelDiv:nth-of-type(3) .labelImgSvg {
    fill: #ffb6c1;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal.isVisible label {
    text-align: center;
    margin-bottom: 20px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal.isVisible label .editLabelNameInput {
    width: 200px;
    height: 30px;
    padding: 5px;
    text-align: left;
    color: #a9a9a9;
    border: 1px solid #000;
    border-radius: 10px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal.isVisible label .editLabelNameInput .labelLi {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal.isVisible label .editLabelNameInput .labelLi .labelImgSvg {
    width: 25px;
    height: 15px;
    fill: #556b2f;
    pointer-events: none;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal.isVisible label .editLabelNameInput .labelLi:nth-of-type(2) .labelImgSvg {
    fill: #6495ed;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal.isVisible label .editLabelNameInput .labelLi:nth-of-type(3) .labelImgSvg {
    fill: #ffb6c1;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal.isVisible .editChooseColor {
    display: grid;
    place-items: center;
    margin-bottom: 50px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal.isVisible .editChooseColor .heading {
    margin-bottom: 10px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal.isVisible .editChooseColor .editChooseColorInput {
    text-align: center;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal.isVisible .editChooseColor .editNewColorLabelSvg {
    width: 25px;
    height: 15px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal.isVisible .editLabelSecondModalBtnBlock {
    display: flex;
    gap: 10px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal.isVisible .editLabelSecondModalBtnBlock .editLabelBackBtn,
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal.isVisible .editLabelSecondModalBtnBlock .editLabelSaveBtn {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal .editNewLabelDisplay {
    display: flex;
    align-items: center;
    border-radius: 5px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal .editLabelPlaceSaveBtn {
    display: none;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelNameAndColorModal .editLabelPlaceSaveBtn.isVisible {
    display: block;
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 1.6rem;
    z-index: 3010;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelMask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    opacity: 0.5;
    z-index: 3000;
    display: none;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .editLabelMask.isVisible {
    display: block;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .labeleditOperation {
    display: none;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .labeleditOperation.isVisible {
    display: flex;
    flex-direction: column;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .labeleditOperation .changeLabelName .labelInputName {
    width: 150px;
    border: 1px solid #000;
    border-radius: 5px;
    padding: 5px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .labeleditOperation .channgeLabelColor {
    text-align: center;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .labeleditOperation .channgeLabelColor .labelColorList {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 150px;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #000;
    border-radius: 10px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .labeleditOperation .channgeLabelColor .labelColorList .labelColorItem {
    display: flex;
    align-items: center;
    cursor: pointer;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .labeleditOperation .channgeLabelColor .labelColorList .labelColorItem.isActive {
    transform: scale(1.3);
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .labeleditOperation .channgeLabelColor .labelColorList .labelColorItem .labelColorImg {
    width: 25px;
    height: 15px;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-body .labeleditOperation .editExecutionBtn {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .label .editLabelModal .modal-footer .editLabelModalCloseBtn {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .sort {
    align-items: end;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .sort .sortSelectBtn {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .mainAreaMenu .labelAndSort .sort .sortSelectMenu {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .dataVolume {
    margin-left: auto;
}
body .container-fluid main .mainArea .dataVolume.isHidden {
    display: none;
}
body .container-fluid main .mainArea .dataVolume .dataGauge {
    width: 100px;
    height: 30px;
}
body .container-fluid main .mainArea .displayBookArea {
    display: none;
    grid-template-columns: repeat(6, 1fr);
    justify-items: center;
    padding-bottom: 70px;
}
body .container-fluid main .mainArea .displayBookArea.isShow {
    display: grid;
}
body .container-fluid main .mainArea .displayBookArea .eachBook {
    position: relative;
    display: grid;
    justify-items: center;
    align-items: end;
    width: 100%;
    padding: 10px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
body .container-fluid main .mainArea .displayBookArea .eachBook .bookSelectCheck {
    display: none;
    position: absolute;
    top: 0;
    left: 7px;
}
body .container-fluid main .mainArea .displayBookArea .eachBook .bookSelectCheck .bookSelectCheckBtn {
    transform: scale(1.8);
}
body .container-fluid main .mainArea .displayBookArea .eachBook .bookSelectCheck.isShow {
    display: block;
}
body .container-fluid main .mainArea .displayBookArea .eachBook .bookImg {
    width: 10vw;
    height: auto;
    cursor: pointer;
}
body .container-fluid main .mainArea .displayBookArea .eachBook .bookImg img {
    width: 100%;
}
body .container-fluid main .mainArea .displayBookArea .eachBook .bookTitleAndAuthor {
    word-break: break-word;
    text-align: center;
}
body .container-fluid main .mainArea .displayBookArea .eachBook .bookTitleAndAuthor .bookTitle {
    font-size: 2rem;
}
body .container-fluid main .mainArea .displayBookArea .eachBook .bookTitleAndAuthor .bookAuthor {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .displayBookArea .eachBook .listDisplayedOnly {
    display: none;
}
body .container-fluid main .mainArea .displayBookArea .eachBook .listDisplayedOnly .bookBtn {
    font-size: 2rem;
    display: block;
}
body .container-fluid main .mainArea .displayBookArea .eachBook .listDisplayedOnly .bookBtn:hover {
    opacity: 0.5;
}
body .container-fluid main .mainArea .displayBookArea .attachAndDetachLabelModal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background-color: #fff;
    z-index: 3010;
    display: none;
}
body .container-fluid main .mainArea .displayBookArea .attachAndDetachLabelModal.isVisible {
    display: block;
}
body .container-fluid main .mainArea .displayBookArea .attachAndDetachLabelModal .currentLabelListWrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 200px;
    max-height: 150px;
    padding: 10px;
    overflow-y: scroll;
}
body .container-fluid main .mainArea .displayBookArea .attachAndDetachLabelModal .currentLabelListWrap .currentLabelList {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 5px;
    /* 現在のラベル */
}
body .container-fluid main .mainArea .displayBookArea .attachAndDetachLabelModal .currentLabelListWrap .currentLabelList .labelLi {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
body .container-fluid main .mainArea .displayBookArea .attachAndDetachLabelModal .currentLabelListWrap .currentLabelList .labelLi .attachAndDetachLabelCheckBox {
    margin-right: 5px;
    transform: scale(1.5);
}
body .container-fluid main .mainArea .displayBookArea .attachAndDetachLabelModal .currentLabelListWrap .currentLabelList .labelLi .labelImgSvg {
    width: 25px;
    height: 15px;
    fill: #556b2f;
    pointer-events: none;
}
body .container-fluid main .mainArea .displayBookArea .attachAndDetachLabelModal .currentLabelListWrap .currentLabelList .labelLi:nth-of-type(2) .labelImgSvg {
    fill: #6495ed;
}
body .container-fluid main .mainArea .displayBookArea .attachAndDetachLabelModal .currentLabelListWrap .currentLabelList .labelLi:nth-of-type(3) .labelImgSvg {
    fill: #ffb6c1;
}
body .container-fluid main .mainArea .displayBookArea .attachAndDetachLabelModal .attachAndDetachLabelModalBtnBlock {
    display: flex;
    gap: 10px;
    position: absolute;
    right: 20px;
    bottom: 20px;
}
body .container-fluid main .mainArea .displayBookArea .attachAndDetachLabelModal .attachAndDetachLabelModalBtnBlock .attachAndDetachLabelModalSaveBtn,
body .container-fluid main .mainArea .displayBookArea .attachAndDetachLabelModal .attachAndDetachLabelModalBtnBlock .attachAndDetachLabelModalCloseBtn {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .displayBookArea .attachAndDetachMask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    opacity: 0.5;
    z-index: 3000;
    display: none;
}
body .container-fluid main .mainArea .displayBookArea .attachAndDetachMask.isVisible {
    display: block;
}
body .container-fluid main .mainArea .displayBookArea .eachBookModal .modal-dialog {
    justify-content: center;
}
body .container-fluid main .mainArea .displayBookArea .eachBookModal .modal-dialog .modal-content {
    width: 90%;
    overflow: visible;
}
body .container-fluid main .mainArea .displayBookArea .eachBookModal .modal-dialog .modal-content .modal-header {
    justify-content: center;
    border: none;
    padding: 20px;
}
body .container-fluid main .mainArea .displayBookArea .eachBookModal .modal-dialog .modal-content .modal-header img {
    width: 50%;
    height: auto;
}
body .container-fluid main .mainArea .displayBookArea .eachBookModal .modal-dialog .modal-content .modal-body {
    text-align: center;
    overflow: visible;
}
body .container-fluid main .mainArea .displayBookArea .eachBookModal .modal-dialog .modal-content .modal-body .bookReadBtn {
    font-size: 1.6rem;
    cursor: pointer;
}
body .container-fluid main .mainArea .displayBookArea .eachBookModal .modal-dialog .modal-content .modal-body .installAnAppBtn {
    font-size: 1.6rem;
    cursor: pointer;
}
body .container-fluid main .mainArea .displayBookArea .eachBookModal .modal-dialog .modal-content .modal-body .deleteBookbtn {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .displayBookArea .eachBookModal .modal-dialog .modal-content .modal-body .bookOperationBtn {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .displayBookArea .eachBookModal .modal-dialog .modal-content .modal-body .bookOperationMenu {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .displayBookArea .eachBookModal .modal-dialog .modal-content .modal-footer {
    border: none;
}
body .container-fluid main .mainArea .displayBookArea .eachBookModal .modal-dialog .modal-content .modal-footer .eachBookSelectMenuClose {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .displayBookArea .eachBookModal .modal-dialog .modal-content.inActive {
    display: none;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start; /* 垂直方向に中央揃え */
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook {
    display: grid;
    place-items: center;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook .bookImg {
    display: grid;
    grid-row: 1/4;
    grid-column: 1/2;
    width: 10vw; /* 本のサイズ*/
    pointer-events: none;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook .bookImg img {
    width: 100%;
    max-height: 120px;
    -o-object-fit: contain;
    object-fit: contain;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook .bookImg.isHidden {
    display: none;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook .bookTitleAndAuthor {
    grid-column: 2/3;
    grid-row: 1/3;
    text-align: center;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook .bookTitleAndAuthor .bookTitle {
    grid-column: 2/3;
    grid-row: 1/2;
    font-size: 2rem;
    text-align: center;
    white-space: nowrap;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook .bookTitleAndAuthor .bookAuthor {
    grid-column: 2/3;
    grid-row: 2/3;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook .listDisplayedOnly {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook .listDisplayedOnly .bookDate {
    display: flex;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook .listDisplayedOnly .bookDate .bookVersion::after {
    content: " / ";
    margin: 0 15px;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook .listDisplayedOnly .bookDate .bookExpiration {
    grid-column: 2/3;
    grid-row: 1/2;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook .listDisplayedOnly .eachBookBtnBlock {
    justify-content: center;
    display: flex;
    gap: 10px;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook .listDisplayedOnly .eachBookBtnBlock .bookReadBtn {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook .listDisplayedOnly .eachBookBtnBlock .installAnAppBtn {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook .listDisplayedOnly .eachBookBtnBlock .deleteBookbtn {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook .listDisplayedOnly .bookOperationBtn {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook .listDisplayedOnly .bookOperationMenu {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed.isChange {
    grid-template-columns: repeat(4, 1fr);
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed.isChange .eachBook .bookSelectCheck {
    position: absolute;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed.isChange .eachBook .bookSelectCheck .bookSelectCheckBtn {
    transform: scale(1.8);
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed.isChange .eachBook .bookSelectCheck.isShow {
    display: block;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed.isChange .eachBook .bookTitleAndAuthor {
    grid-column: 1/2;
    grid-row: 1/3;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed.isChange .eachBook .bookTitleAndAuthor .bookTitle {
    grid-column: 1/2;
    grid-row: 1/2;
    font-size: 2rem;
    text-align: center;
    white-space: nowrap;
}
body .container-fluid main .mainArea .displayBookArea.isListDisplayed.isChange .eachBook .bookTitleAndAuthor .bookAuthor {
    grid-column: 1/2;
    grid-row: 2/3;
}
body .container-fluid main .mainArea .generalDocument {
    display: none;
}
body .container-fluid main .mainArea .generalDocument.isShow {
    display: block;
}
body .container-fluid main .mainArea .generalDocument .eachBook {
    position: relative;
    display: grid;
    justify-items: center;
    align-items: end;
    width: 100%;
    padding: 10px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
body .container-fluid main .mainArea .generalDocument .eachBook .bookSelectCheck {
    display: none;
    position: absolute;
    top: 0;
    left: 7px;
}
body .container-fluid main .mainArea .generalDocument .eachBook .bookSelectCheck .bookSelectCheckBtn {
    transform: scale(1.8);
}
body .container-fluid main .mainArea .generalDocument .eachBook .bookSelectCheck.isShow {
    display: block;
}
body .container-fluid main .mainArea .generalDocument .eachBook .bookImg {
    width: 10vw;
    height: auto;
    cursor: pointer;
}
body .container-fluid main .mainArea .generalDocument .eachBook .bookImg img {
    width: 100%;
}
body .container-fluid main .mainArea .generalDocument .eachBook .bookTitleAndAuthor {
    word-break: break-word;
    text-align: center;
}
body .container-fluid main .mainArea .generalDocument .eachBook .bookTitleAndAuthor .bookTitle {
    font-size: 2rem;
}
body .container-fluid main .mainArea .generalDocument .eachBook .bookTitleAndAuthor .bookAuthor {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .generalDocument .eachBook .listDisplayedOnly {
    display: none;
}
body .container-fluid main .mainArea .generalDocument .eachBook .listDisplayedOnly .bookBtn {
    font-size: 2rem;
    display: block;
}
body .container-fluid main .mainArea .generalDocument .eachBook .listDisplayedOnly .bookBtn:hover {
    opacity: 0.5;
}
body .container-fluid main .mainArea .generalTest {
    display: none;
}
body .container-fluid main .mainArea .generalTest.isShow {
    display: block;
}
body .container-fluid main .mainArea .generalTest .eachBook {
    position: relative;
    display: grid;
    justify-items: center;
    align-items: end;
    width: 100%;
    padding: 10px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
body .container-fluid main .mainArea .generalTest .eachBook .bookSelectCheck {
    display: none;
    position: absolute;
    top: 0;
    left: 7px;
}
body .container-fluid main .mainArea .generalTest .eachBook .bookSelectCheck .bookSelectCheckBtn {
    transform: scale(1.8);
}
body .container-fluid main .mainArea .generalTest .eachBook .bookSelectCheck.isShow {
    display: block;
}
body .container-fluid main .mainArea .generalTest .eachBook .bookImg {
    width: 10vw;
    height: auto;
    cursor: pointer;
}
body .container-fluid main .mainArea .generalTest .eachBook .bookImg img {
    width: 100%;
}
body .container-fluid main .mainArea .generalTest .eachBook .bookTitleAndAuthor {
    word-break: break-word;
    text-align: center;
}
body .container-fluid main .mainArea .generalTest .eachBook .bookTitleAndAuthor .bookTitle {
    font-size: 2rem;
}
body .container-fluid main .mainArea .generalTest .eachBook .bookTitleAndAuthor .bookAuthor {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .generalTest .eachBook .listDisplayedOnly {
    display: none;
}
body .container-fluid main .mainArea .generalTest .eachBook .listDisplayedOnly .bookBtn {
    font-size: 2rem;
    display: block;
}
body .container-fluid main .mainArea .generalTest .eachBook .listDisplayedOnly .bookBtn:hover {
    opacity: 0.5;
}
body .container-fluid main .mainArea .supporterContent .fa-envelope {
    font-size: 3rem;
    cursor: pointer;
    position: absolute;
    top: -33px;
    right: 0;
}
body .container-fluid main .mainArea .supporterContent .mailLinkModal1 .modal-dialog .modal-content .modal-body,
body .container-fluid main .mainArea .supporterContent .mailLinkModal2 .modal-dialog .modal-content .modal-body {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .supporterContent .mailLinkModal1 .modal-dialog .modal-content .modal-body .sharingLinkMail,
body .container-fluid main .mainArea .supporterContent .mailLinkModal2 .modal-dialog .modal-content .modal-body .sharingLinkMail {
    padding: 10px;
    border: 1px solid #000;
    border-radius: 10px;
}
body .container-fluid main .mainArea .supporterContent .mailLinkModal1 .modal-dialog .modal-content .modal-body .modal-footer .sharingLinkSubmitMail,
body .container-fluid main .mainArea .supporterContent .mailLinkModal2 .modal-dialog .modal-content .modal-body .modal-footer .sharingLinkSubmitMail {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .supporterContent .mailLinkModal1 .modal-dialog .modal-content .modal-body .modal-footer .sharingLinkModalClose,
body .container-fluid main .mainArea .supporterContent .mailLinkModal2 .modal-dialog .modal-content .modal-body .modal-footer .sharingLinkModalClose {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .supporterContent .mailLinkModal1 .modal-dialog .modal-content .modal-body .selectSharingBtn,
body .container-fluid main .mainArea .supporterContent .mailLinkModal2 .modal-dialog .modal-content .modal-body .selectSharingBtn {
    font-size: 1.6rem;
    margin-bottom: 30px;
    cursor: pointer;
}
body .container-fluid main .mainArea .supporterContent .selectsharePartnerBtn {
    margin-bottom: 30px;
    font-size: 1.6rem;
    cursor: pointer;
    position: absolute;
    top: -33px;
    right: 50px;
}
body .container-fluid main .mainArea .supporterContent .selectsharePartnerModal1 .modal-dialog .modal-content .modal-body,
body .container-fluid main .mainArea .supporterContent .selectsharePartnerModal2 .modal-dialog .modal-content .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}
body .container-fluid main .mainArea .supporterContent .selectsharePartnerModal1 .modal-dialog .modal-content .modal-body .searchSharingPartner,
body .container-fluid main .mainArea .supporterContent .selectsharePartnerModal2 .modal-dialog .modal-content .modal-body .searchSharingPartner {
    padding: 5px;
    border: 1px solid #000;
    border-radius: 5px;
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .supporterContent .selectsharePartnerModal1 .modal-dialog .modal-content .modal-body .searchSharingPartnerBtn,
body .container-fluid main .mainArea .supporterContent .selectsharePartnerModal2 .modal-dialog .modal-content .modal-body .searchSharingPartnerBtn {
    padding: 5px;
    color: #fff;
    background-color: #0d6efd;
    border: 1px solid #0d6efd;
    border-radius: 5px;
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .supporterContent .selectsharePartnerModal1 .modal-dialog .modal-content .modal-body .sharingLists,
body .container-fluid main .mainArea .supporterContent .selectsharePartnerModal2 .modal-dialog .modal-content .modal-body .sharingLists {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .supporterContent .selectsharePartnerModal1 .modal-dialog .modal-content .modal-body .modal-footer,
body .container-fluid main .mainArea .supporterContent .selectsharePartnerModal2 .modal-dialog .modal-content .modal-body .modal-footer {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .supporterDocument {
    display: none;
}
body .container-fluid main .mainArea .supporterDocument.isShow {
    display: block;
}
body .container-fluid main .mainArea .supporterDocument .eachBook {
    position: relative;
    display: grid;
    justify-items: center;
    align-items: end;
    width: 100%;
    padding: 10px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
body .container-fluid main .mainArea .supporterDocument .eachBook .bookSelectCheck {
    display: none;
    position: absolute;
    top: 0;
    left: 7px;
}
body .container-fluid main .mainArea .supporterDocument .eachBook .bookSelectCheck .bookSelectCheckBtn {
    transform: scale(1.8);
}
body .container-fluid main .mainArea .supporterDocument .eachBook .bookSelectCheck.isShow {
    display: block;
}
body .container-fluid main .mainArea .supporterDocument .eachBook .bookImg {
    width: 10vw;
    height: auto;
    cursor: pointer;
}
body .container-fluid main .mainArea .supporterDocument .eachBook .bookImg img {
    width: 100%;
}
body .container-fluid main .mainArea .supporterDocument .eachBook .bookTitleAndAuthor {
    word-break: break-word;
    text-align: center;
}
body .container-fluid main .mainArea .supporterDocument .eachBook .bookTitleAndAuthor .bookTitle {
    font-size: 2rem;
}
body .container-fluid main .mainArea .supporterDocument .eachBook .bookTitleAndAuthor .bookAuthor {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .supporterDocument .eachBook .listDisplayedOnly {
    display: none;
}
body .container-fluid main .mainArea .supporterDocument .eachBook .listDisplayedOnly .bookBtn {
    font-size: 2rem;
    display: block;
}
body .container-fluid main .mainArea .supporterDocument .eachBook .listDisplayedOnly .bookBtn:hover {
    opacity: 0.5;
}
body .container-fluid main .mainArea .supporterTest {
    display: none;
}
body .container-fluid main .mainArea .supporterTest.isShow {
    display: block;
}
body .container-fluid main .mainArea .supporterTest .eachBook {
    position: relative;
    display: grid;
    justify-items: center;
    align-items: end;
    width: 100%;
    padding: 10px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
body .container-fluid main .mainArea .supporterTest .eachBook .bookSelectCheck {
    display: none;
    position: absolute;
    top: 0;
    left: 7px;
}
body .container-fluid main .mainArea .supporterTest .eachBook .bookSelectCheck .bookSelectCheckBtn {
    transform: scale(1.8);
}
body .container-fluid main .mainArea .supporterTest .eachBook .bookSelectCheck.isShow {
    display: block;
}
body .container-fluid main .mainArea .supporterTest .eachBook .bookImg {
    width: 10vw;
    height: auto;
    cursor: pointer;
}
body .container-fluid main .mainArea .supporterTest .eachBook .bookImg img {
    width: 100%;
}
body .container-fluid main .mainArea .supporterTest .eachBook .bookTitleAndAuthor {
    word-break: break-word;
    text-align: center;
}
body .container-fluid main .mainArea .supporterTest .eachBook .bookTitleAndAuthor .bookTitle {
    font-size: 2rem;
}
body .container-fluid main .mainArea .supporterTest .eachBook .bookTitleAndAuthor .bookAuthor {
    font-size: 1.6rem;
}
body .container-fluid main .mainArea .supporterTest .eachBook .listDisplayedOnly {
    display: none;
}
body .container-fluid main .mainArea .supporterTest .eachBook .listDisplayedOnly .bookBtn {
    font-size: 2rem;
    display: block;
}
body .container-fluid main .mainArea .supporterTest .eachBook .listDisplayedOnly .bookBtn:hover {
    opacity: 0.5;
}

body {
    font-size: 1.6rem;
}
body .container-fluid main .sideArea {
    display: none;
    width: clamp(250px, 20vw, 300px);
    height: calc(100vh - 250px);
    padding: 20px 5px 0;
    border-right: 2px solid #ccc;
}
body .container-fluid main .sideArea.isVisible {
    display: block;
}
body .container-fluid main .sideArea .generalMode .generalSideBtn {
    font-size: 1.6rem;
}
body .container-fluid main .sideArea .generalMode .generalSideBtn.isShow {
    display: block;
    background-color: #333;
    color: #fff;
    width: 100%;
}
body .container-fluid main .sideArea .generalMode .generalSideBtn:hover {
    color: #fff;
    background-color: #a9a9a9;
}
body .container-fluid main .sideArea .generalMode .myBoxSideBtn {
    width: 100%;
    border: 1px solid #000;
    height: 40px;
    font-size: 1.6rem;
    text-align: center;
    transition: 0.5s;
    outline: none;
    cursor: pointer;
}
body .container-fluid main .sideArea .generalMode .myBoxSideBtn:hover {
    color: #fff;
    background-color: #333;
}
body .container-fluid main .sideArea .generalMode .dropdown {
    position: relative;
    margin-bottom: 10px;
}
body .container-fluid main .sideArea .generalMode .dropdown .generalSideShareBtn {
    width: 100%;
    font-size: 1.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
body .container-fluid main .sideArea .generalMode .dropdown .generalSideShareBtn::after {
    content: "";
    width: 10px;
    height: 10px;
    background-color: #fff;
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
    clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
}
body .container-fluid main .sideArea .generalMode .dropdown .dropdown-menu {
    position: absolute;
    width: 500px;
    padding: 10px;
    max-height: 500px;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 5px;
    overflow-y: scroll;
    cursor: pointer;
}
body .container-fluid main .sideArea .generalMode .dropdown .dropdown-menu.show {
    padding: 10px;
    transform: translate(clamp(190px, 16vw, 250px), -40px) !important;
}
body .container-fluid main .sideArea .generalMode .commonSideBtn {
    font-size: 1.6rem;
}
body .container-fluid main .sideArea .generalMode .commonSideBtn li {
    width: 100%;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    transition: 0.3s;
    cursor: pointer;
}
body .container-fluid main .sideArea .generalMode .commonSideBtn li.isShow {
    background-color: #333;
    color: #fff;
}
body .container-fluid main .sideArea .generalMode .commonSideBtn li:hover {
    background-color: #333;
    color: #fff;
}
body .container-fluid main .sideArea .supporterMode .supporterSideBtn {
    font-size: 1.6rem;
}
body .container-fluid main .sideArea .supporterMode .supporterSideBtn.isShow {
    display: block;
    background-color: #333;
    color: #fff;
    width: 100%;
}
body .container-fluid main .sideArea .supporterMode .supporterSideBtn:hover {
    color: #fff;
    background-color: #a9a9a9;
}
body .container-fluid main .sideArea .supporterMode .myBoxSideBtn {
    width: 100%;
    border: 1px solid #000;
    height: 40px;
    font-size: 1.6rem;
    text-align: center;
    transition: 0.5s;
    outline: none;
    cursor: pointer;
}
body .container-fluid main .sideArea .supporterMode .myBoxSideBtn:hover {
    color: #fff;
    background-color: #333;
}
body .container-fluid main .sideArea .supporterMode .dropdown {
    position: relative;
    margin-bottom: 10px;
}
body .container-fluid main .sideArea .supporterMode .dropdown .supporterSideShareBtn {
    width: 100%;
    font-size: 1.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
body .container-fluid main .sideArea .supporterMode .dropdown .supporterSideShareBtn::after {
    content: "";
    width: 10px;
    height: 10px;
    background-color: #fff;
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
    clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
}
body .container-fluid main .sideArea .supporterMode .dropdown .dropdown-menu {
    position: absolute;
    width: 500px;
    padding: 10px;
    max-height: 500px;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 5px;
    overflow-y: scroll;
    cursor: pointer;
    font-size: 1.6rem;
}
body .container-fluid main .sideArea .supporterMode .dropdown .dropdown-menu.show {
    padding: 10px;
    transform: translate(clamp(190px, 16vw, 250px), -40px) !important;
}
body .container-fluid main .sideArea .supporterMode .commonSideBtn {
    font-size: 1.6rem;
}
body .container-fluid main .sideArea .supporterMode .commonSideBtn li {
    width: 100%;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    transition: 0.3s;
    cursor: pointer;
}
body .container-fluid main .sideArea .supporterMode .commonSideBtn li.isShow {
    background-color: #333;
    color: #fff;
}
body .container-fluid main .sideArea .supporterMode .commonSideBtn li:hover {
    background-color: #333;
    color: #fff;
}

.container-fluid .bottomArea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    padding: 5px 10px;
    width: 100%;
    height: 70px;
    margin-top: 20px;
    background-color: #fff;
    border-top: 2px solid #ccc;
    z-index: 2;
}
.container-fluid .bottomArea .comSwitching {
    display: flex;
    gap: 20px;
    justify-content: center;
    width: 100vw;
}
.container-fluid .bottomArea .comSwitching.isHidden {
    display: none;
}
.container-fluid .bottomArea .comSwitching .onlineBtn {
    width: 40vw;
    font-size: 2rem;
    background-color: darkorange;
    color: #fff;
}
.container-fluid .bottomArea .comSwitching .DownLoadBtn {
    width: 40vw;
    font-size: 2rem;
}
.container-fluid .bottomArea .comSwitching .DownLoadBtn .spOnly {
    display: none;
}
.container-fluid .bottomArea .dataVolume.isHidden {
    display: none;
}
.container-fluid .bottomArea .dataVolume .dataGauge {
    width: 100px;
    height: 30px;
}
.container-fluid .bottomArea .selectMultipleModeOnly {
    display: none;
    width: 100%;
}
.container-fluid .bottomArea .selectMultipleModeOnly.isShow {
    display: flex;
    justify-content: space-between;
}
.container-fluid .bottomArea .selectMultipleModeOnly .deleteLabel {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.container-fluid .bottomArea .selectMultipleModeOnly .deleteLabel .fa-trash-alt {
    font-size: 3rem;
}
.container-fluid .bottomArea .selectMultipleModeOnly .deleteLabel p {
    font-size: 1.6rem;
}
.container-fluid .bottomArea .selectMultipleModeOnly .addLabel {
    cursor: pointer;
}
.container-fluid .bottomArea .selectMultipleModeOnly .addLabel .labelSelectBtn {
    font-size: 1.6rem;
}
.container-fluid .bottomArea .selectMultipleModeOnly .addLabel .labelSelectMenu {
    font-size: 1.6rem;
}
.container-fluid .bottomArea .selectMultipleModeOnly .addLabel .labelSelectMenu li {
    display: flex;
    align-items: center;
}
.container-fluid .bottomArea .selectMultipleModeOnly .addLabel .labelSelectMenu li .labelImg {
    width: 25px;
    height: 15px;
}
.container-fluid .bottomArea .selectMultipleModeOnly .selectDeleteLabelBtn {
    font-size: 1.6rem;
    cursor: pointer;
}

body {
    font-size: 1.6rem;
}
body .container {
    padding: 20px;
}
body .container .upperArea {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
body .container .upperArea .title {
    margin-right: auto;
    font-size: 3rem;
}
body .container .upperArea .upperAreaMenu {
    align-self: end;
    display: flex;
}
body .container .upperArea .upperAreaMenu .linkBookShelf {
    cursor: pointer;
    color: darkorange;
}
body .container .upperArea .upperAreaMenu .selectLanguage .languageBtn {
    font-size: 1.6rem;
    color: #000;
    border: 1px solid #000;
    background-color: #fff;
}
body .container .upperArea .upperAreaMenu .selectLanguage .languageMenu {
    min-width: 7rem;
    font-size: 1.6rem;
}

body {
    font-size: 1.6rem;
}
body .container main .processArea {
    margin-bottom: 50px;
}
body .container main .processArea .processDescription {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: #faf0e6;
    margin-bottom: 50px;
}
body .container main .processArea .processDescription p {
    font-family: "a-otf-ud-shin-go-pr6n";
}
body .container main .processArea .processDescription .fa-circle-info {
    font-size: 3rem;
}
body .container main .processArea .selsectProcess {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
body .container main .processArea .selsectProcess .selectList {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 120px;
    height: 120px;
    border: 3px solid #000;
    border-radius: 10px;
    line-height: 1.2;
    cursor: pointer;
    transition: 0.3s;
}
body .container main .processArea .selsectProcess .selectList.isActive {
    background-color: orange;
    color: #fff;
    border: 1px solid #fff;
    transform: scale(1.1);
}
body .container main .processArea .selsectProcess .selectList:hover {
    transform: scale(1.1);
}
body .container main .processArea .selsectProcess .DAISYReplay {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 120px;
    height: 120px;
    border: 3px solid #000;
    border-radius: 10px;
    line-height: 1.2;
    cursor: pointer;
    transition: 0.3s;
    font-family: "a-otf-ud-shin-go-pr6n", sans-serif;
    gap: 5px;
}
body .container main .processArea .selsectProcess .DAISYReplay.isActive {
    background-color: orange;
    color: #fff;
    border: 1px solid #fff;
    transform: scale(1.1);
}
body .container main .processArea .selsectProcess .DAISYReplay:hover {
    transform: scale(1.1);
}
body .container main .processArea .selsectProcess .DAISYReplay .bi-play-btn {
    font-size: 5rem;
}
body .container main .processArea .selsectProcess .PDFAndWord {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 120px;
    height: 120px;
    border: 3px solid #000;
    border-radius: 10px;
    line-height: 1.2;
    cursor: pointer;
    transition: 0.3s;
    gap: 5px;
}
body .container main .processArea .selsectProcess .PDFAndWord.isActive {
    background-color: orange;
    color: #fff;
    border: 1px solid #fff;
    transform: scale(1.1);
}
body .container main .processArea .selsectProcess .PDFAndWord:hover {
    transform: scale(1.1);
}
body .container main .processArea .selsectProcess .PDFAndWord .bi-filetype-pdf,
body .container main .processArea .selsectProcess .PDFAndWord .bi-file-earmark-word {
    gap: 5px;
    font-size: 4rem;
}
body .container main .processArea .selsectProcess .text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 120px;
    height: 120px;
    border: 3px solid #000;
    border-radius: 10px;
    line-height: 1.2;
    cursor: pointer;
    transition: 0.3s;
    gap: 5px;
}
body .container main .processArea .selsectProcess .text.isActive {
    background-color: orange;
    color: #fff;
    border: 1px solid #fff;
    transform: scale(1.1);
}
body .container main .processArea .selsectProcess .text:hover {
    transform: scale(1.1);
}
body .container main .processArea .selsectProcess .text .textIcon {
    display: flex;
    gap: 5px;
    font-size: 4rem;
}
body .container main .processArea .selsectProcess .clipboard {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 120px;
    height: 120px;
    border: 3px solid #000;
    border-radius: 10px;
    line-height: 1.2;
    cursor: pointer;
    transition: 0.3s;
}
body .container main .processArea .selsectProcess .clipboard.isActive {
    background-color: orange;
    color: #fff;
    border: 1px solid #fff;
    transform: scale(1.1);
}
body .container main .processArea .selsectProcess .clipboard:hover {
    transform: scale(1.1);
}
body .container main .processArea .selsectProcess .clipboard .bi-clipboard {
    font-size: 4rem;
}
body .container main .processArea .selsectProcess .textbook {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 120px;
    height: 120px;
    border: 3px solid #000;
    border-radius: 10px;
    line-height: 1.2;
    cursor: pointer;
    transition: 0.3s;
}
body .container main .processArea .selsectProcess .textbook .textbookLink.isActive {
    background-color: orange;
    color: #fff;
    transform: scale(1.1);
}
body .container main .processArea .selsectProcess .textbook .textbookLink.isActive:hover {
    color: #fff;
}
body .container main .processArea .selsectProcess .textbook .textbookLink .bi-book {
    font-size: 4rem;
}
body .container main .processArea .selsectProcess .spImage {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 120px;
    height: 120px;
    border: 3px solid #000;
    border-radius: 10px;
    line-height: 1.2;
    cursor: pointer;
    transition: 0.3s;
}
body .container main .processArea .selsectProcess .spImage.isActive {
    background-color: orange;
    color: #fff;
    border: 1px solid #fff;
    transform: scale(1.1);
}
body .container main .processArea .selsectProcess .spImage:hover {
    transform: scale(1.1);
}
body .container main .processArea .selsectProcess .spImage .spImageIcon {
    display: flex;
}
body .container main .processArea .selsectProcess .spImage .spImageIcon .bi-phone,
body .container main .processArea .selsectProcess .spImage .spImageIcon .bi-file-earmark-image {
    display: flex;
    gap: 5px;
    font-size: 3rem;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .pageRange {
    margin-bottom: 20px;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .pageRange .Subheading {
    text-align: center;
    background-color: #8fbc8f;
    color: #fff;
    margin-bottom: 10px;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .pageRange .pageRangeStart {
    text-align: center;
    border: 1px solid #000;
    border-radius: 5px;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .pageRange .pageRangeEnd {
    text-align: center;
    border: 1px solid #000;
    border-radius: 5px;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .layoutType {
    margin-bottom: 20px;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .layoutType .Subheading {
    text-align: center;
    background-color: #8fbc8f;
    color: #fff;
    margin-bottom: 10px;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .layoutType form {
    margin-bottom: 10px;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .layoutType .aboutlayoutType {
    display: flex;
    align-items: center;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .layoutType .aboutlayoutType .fa-question-circle {
    color: orange;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .layoutType .aboutlayoutType a {
    color: #0d6efd;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .audioType {
    margin-bottom: 10px;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .audioType .Subheading {
    text-align: center;
    background-color: #8fbc8f;
    color: #fff;
    margin-bottom: 10px;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .audioType form {
    margin-bottom: 10px;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .audioType .warningStatement {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .audioType .warningStatement .fa-warning {
    color: red;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .rubyType {
    margin-bottom: 20px;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .rubyType .Subheading {
    text-align: center;
    background-color: #8fbc8f;
    color: #fff;
    margin-bottom: 10px;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .separation .Subheading {
    text-align: center;
    background-color: #8fbc8f;
    color: #fff;
    margin-bottom: 10px;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .separation .selectSeparation {
    display: flex;
    margin-bottom: 10px;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .separation .aboutSeparation {
    display: flex;
    align-items: center;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .separation .aboutSeparation .fa-question-circle {
    color: orange;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-body .separation .aboutSeparation a {
    color: #0d6efd;
}
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-footer .PDFAndWordModalCancelBtn,
body .container main .processArea .selsectProcessModal .PDFAndWordModal .modal-footer .PDFAndWordModalSubmitBtn {
    font-size: 1.6rem;
}
body .container main .processArea .selsectProcessModal .textModal .modal-body .audioType {
    margin-bottom: 10px;
}
body .container main .processArea .selsectProcessModal .textModal .modal-body .audioType .Subheading {
    text-align: center;
    background-color: #8fbc8f;
    color: #fff;
    margin-bottom: 10px;
}
body .container main .processArea .selsectProcessModal .textModal .modal-body .audioType form {
    margin-bottom: 10px;
}
body .container main .processArea .selsectProcessModal .textModal .modal-body .audioType .warningStatement {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
body .container main .processArea .selsectProcessModal .textModal .modal-body .audioType .warningStatement .fa-warning {
    color: red;
}
body .container main .processArea .selsectProcessModal .textModal .modal-body .rubyType {
    margin-bottom: 20px;
}
body .container main .processArea .selsectProcessModal .textModal .modal-body .rubyType .Subheading {
    text-align: center;
    background-color: #8fbc8f;
    color: #fff;
    margin-bottom: 10px;
}
body .container main .processArea .selsectProcessModal .textModal .modal-body .separation .Subheading {
    text-align: center;
    background-color: #8fbc8f;
    color: #fff;
    margin-bottom: 10px;
}
body .container main .processArea .selsectProcessModal .textModal .modal-body .separation .selectSeparation {
    display: flex;
    margin-bottom: 10px;
}
body .container main .processArea .selsectProcessModal .textModal .modal-body .separation .aboutSeparation {
    display: flex;
    align-items: center;
}
body .container main .processArea .selsectProcessModal .textModal .modal-body .separation .aboutSeparation .fa-question-circle {
    color: orange;
}
body .container main .processArea .selsectProcessModal .textModal .modal-body .separation .aboutSeparation a {
    color: #0d6efd;
}
body .container main .processArea .selsectProcessModal .textModal .modal-footer .textModalCancelBtn,
body .container main .processArea .selsectProcessModal .textModal .modal-footer .textModalSubmitBtn {
    font-size: 1.6rem;
}
body .container main .processArea .selsectProcessModal .spImageModal .modal-body {
    font-size: 2rem;
}
body .container main .processArea .selsectProcessModal .spImageModal .modal-body .selectSpImage {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body .container main .processArea .selsectProcessModal .spImageModal .modal-body .selectSpImage .launchCamera {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
body .container main .processArea .selsectProcessModal .spImageModal .modal-body .selectSpImage .launchCamera .spCameraIcon {
    font-size: 3rem;
}
body .container main .processArea .selsectProcessModal .spImageModal .modal-body .selectSpImage .accessImage {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
body .container main .processArea .selsectProcessModal .spImageModal .modal-body .selectSpImage .accessImage .spImageIcon {
    font-size: 3rem;
}

body {
    font-size: 1.6rem;
}
body .container main .selectFileArea {
    position: relative;
    padding: 10px;
    height: 200px;
    background-color: #f5f5f5;
    border: 1px dashed #000;
    border-radius: 10px;
    margin-bottom: 30px;
    opacity: 0.2;
}
body .container main .selectFileArea.isVisible {
    opacity: 1;
}
body .container main .selectFileArea .dragAndDragMode {
    display: none;
}
body .container main .selectFileArea .dragAndDragMode.isVisible {
    display: block;
}
body .container main .selectFileArea .dragAndDragMode .inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
body .container main .selectFileArea .dragAndDragMode .inner .selectFileHeading {
    display: flex;
    align-self: flex-start;
    margin-bottom: 50px;
}
body .container main .selectFileArea .dragAndDragMode .inner .selectFileHeading .selectFileBtn {
    font-size: 1.6rem;
    background-color: #f5deb3;
}
body .container main .selectFileArea .dragAndDragMode .inner .selectFilePromt {
    font-size: 2rem;
    opacity: 0.5;
}
body .container main .selectFileArea .pasteMode {
    display: none;
}
body .container main .selectFileArea .pasteMode.isVisible {
    display: flex;
}
body .container main .selectFileArea .pasteMode .inner {
    display: flex;
    align-items: center;
}
body .container main .selectFileArea .pasteMode .inner .clipboardSubmitBtn {
    font-size: 1.6rem;
    position: absolute;
    bottom: -50px;
    right: 0;
}

body {
    font-size: 1.6rem;
}
body .container .bottomArea {
    display: none;
    gap: 10px;
}
body .container .bottomArea.isVisible {
    display: flex;
}
body .container .bottomArea .readPDFBtn {
    display: grid;
    place-items: center;
    text-align: center;
    width: 150px;
    height: 75px;
    background-color: #800000;
    color: #fff;
    border-radius: 10px;
    font-size: 1.6rem;
    transition: 0.5s;
    cursor: pointer;
}
body .container .bottomArea .readPDFBtn:hover {
    transform: scale(1.1);
    background-color: #fff;
    color: #800000;
    border: 1px solid #800000;
}
body .container .bottomArea .versionBtn {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body .container .uploadSuccessMask {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.3;
}
body .container .uploadSuccessMask.isActive {
    display: block;
}
body .container .uploadSuccess {
    display: none;
    position: relative;
    width: 300px;
    height: 200px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid #000;
    border-radius: 10px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
body .container .uploadSuccess.isActive {
    display: flex;
}
body .container .uploadSuccess .uploadSuccessClose {
    position: absolute;
    top: 22px;
    right: 0;
    transform: translate(-50%, -50%);
    cursor: pointer;
    border-radius: 10px;
}
body .container .uploadSuccess .uploadSuccessClose .bi-x-square-fill {
    margin-top: 50px;
    font-size: 2.5rem;
}
body .container .uploadSuccess .uploadSuccessClose :hover {
    opacity: 0.7;
}
body .container .uploadSuccess .uploadSpace {
    width: 100%;
    height: 40px;
}
body .container .uploadSuccess p {
    font-size: 2rem;
}
body .container .uploadSuccess .bi-check-circle {
    font-size: 6rem;
    color: #008080;
}

body {
    font-size: 1.6rem;
}
body .container-fruid {
    padding: 20px;
}
body .container-fruid .heading {
    font-size: 3rem;
    margin-bottom: 10px;
}
body .container-fruid .upperArea .discription {
    display: inline-block;
    margin-bottom: 15px;
    padding: 10px; /*内側余白*/
    background-color: #f4f4f4; /*背景色*/
    position: relative;
}
body .container-fruid .upperArea .discription::after {
    position: absolute;
    content: "";
    right: 0px;
    top: 0px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #ccc #fff #ccc;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
body .container-fruid .upperArea .sarch {
    display: flex;
    gap: 20px;
}
body .container-fruid .upperArea .sarch .sarchBook {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
body .container-fruid .upperArea .sarch .sarchBook .keyword {
    width: 250px;
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #000;
    border-radius: 5px;
}
body .container-fruid .upperArea .sarch .sarchBook .dropdown button {
    font-size: 1.6rem;
}
body .container-fruid .upperArea .sarch .sarchBook .dropdown .dropdown-menu .dropdown-item {
    font-size: 1.6rem;
}
body .container-fruid .upperArea .sarch .btnBlock .sarchBtn,
body .container-fruid .upperArea .sarch .btnBlock .clearBtn {
    border-radius: 10px;
    font-size: 1.6rem;
    background-color: darkorange;
    color: #fff;
    transition: 0.5s;
}
body .container-fruid .upperArea .sarch .btnBlock .sarchBtn:hover,
body .container-fruid .upperArea .sarch .btnBlock .clearBtn:hover {
    background-color: #fff;
    color: darkorange;
    transform: scale(1.1);
    border: 1px solid darkorange;
}
body .container-fruid .upperArea .sarch .btnBlock .sarchBtn {
    margin-right: 10px;
}
body .container-fruid .upperArea .select {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
body .container-fruid .upperArea .select .selectBookBtn {
    margin-right: 20px;
    font-size: 1.6rem;
    background-color: #333;
    color: #fff;
    transition: 0.1s;
}
body .container-fruid .upperArea .select .selectBookBtn:hover {
    background-color: #fff;
    color: #333;
    border: 1px solid #333;
    transform: scale(1.1);
}
body .container-fruid .upperArea .select .allRemovableBtn {
    transition: 0.5s;
}
body .container-fruid .upperArea .select .allRemovableBtn .allBookSelectBtn {
    font-size: 1.6rem;
    background-color: #000080;
    color: #fff;
    transition: 0.5s;
    margin-right: 10px;
}
body .container-fruid .upperArea .select .allRemovableBtn .allBookSelectBtn:hover {
    background-color: #fff;
    color: #000080;
    border: 1px solid #000080;
    transform: scale(1.1);
}
body .container-fruid .upperArea .select .allRemovableBtn .allBookReleaseBtn {
    font-size: 1.6rem;
    background-color: #fff;
    color: #000080;
    border: 1px solid #000080;
    transition: 0.5s;
}
body .container-fruid .upperArea .select .allRemovableBtn .allBookReleaseBtn:hover {
    background-color: #000080;
    color: #fff;
    border: 1px solid #fff;
    transform: scale(1.1);
}

body {
    font-size: 1.6rem;
}
body .container-fruid .mainArea .displayBookArea .eachBookList {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
}
body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook {
    display: flex;
    position: relative;
    justify-items: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 10px;
    gap: 10px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}
body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook .bookImg {
    width: 15vw;
    height: auto;
    cursor: pointer;
    align-items: center;
}
body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook .bookImg img {
    width: 100%;
}
body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook .bookInfoList {
    width: 100%;
    align-items: start;
    gap: 5px;
}
body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook .bookInfoList .bookHeading {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook .bookInfoList .bookHeading .bookCategory {
    font-size: 3rem;
}
body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook .bookInfoList .bookHeading .pageRange {
    vertical-align: middle;
    padding: 0 5px;
    background-color: #333;
    color: #fff;
    border-radius: 10px;
}
body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook .bookInfoList .bookTitle {
    margin-bottom: 10px;
    background-color: #faf0e6;
    padding: 3px;
    text-align: center;
    border-radius: 5px;
}
body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook .bookInfoList .bookUnit {
    margin-bottom: 10px;
}
body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook .bookSelectCheck {
    position: absolute;
    right: 20px;
    bottom: 20px;
    justify-self: end;
}
body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook .bookSelectCheck .bookSelectCheckBtn {
    transform: scale(1.8);
}
body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook.isSelected {
    background-color: #fff0f5;
    animation-name: changeBookSize;
    animation-duration: 0.7s;
    animation-timing-function: ease-out;
}
@keyframes changeBookSize {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.04);
    }
    100% {
        transform: scale(1);
        /*アニメーションを終了するときのCSSを記述*/
    }
}
body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook.isSelected .bookTitle {
    border: 1px solid #000;
    border-radius: 5px;
    box-sizing: border-box;
}

body .container-fruid .bottomArea {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: fixed;
    bottom: 0;
    width: calc(100% - 40px);
    height: 70px;
    margin-top: 20px;
    background-color: #fff;
    border-top: 2px solid #ccc;
}
body .container-fruid .bottomArea .inMyBoxBtn {
    font-size: 1.6rem;
}

body {
    font-size: 1.6rem;
}
body .container {
    padding: 20px;
}
body .container .upperArea {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
body .container .upperArea .title {
    margin-right: auto;
    font-size: 3rem;
}
body .container .upperArea .upperAreaMenu {
    display: flex;
    align-self: end;
}
body .container .upperArea .upperAreaMenu .linkBookShelf {
    cursor: pointer;
    color: darkorange;
}
body .container .upperArea .upperAreaMenu .selectLanguage .languageBtn {
    font-size: 1.6rem;
    color: #000;
    border: 1px solid #000;
    background-color: #fff;
}
body .container .upperArea .upperAreaMenu .selectLanguage .languageMenu {
    min-width: 7rem;
    font-size: 1.6rem;
}

body {
    font-size: 1.6rem;
}
body .container .processArea {
    margin-bottom: 50px;
}
body .container .processArea .processDescription {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: #faf0e6;
    margin-bottom: 50px;
}
body .container .processArea .processDescription .fa-circle-info {
    font-size: 3rem;
}
body .container .processArea .brailleConversion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}
body .container .processArea .brailleConversion .beforeBrailleConversion {
    display: flex;
    gap: 20px;
    border: 3px solid #000;
    border-radius: 20px;
    padding: 10px;
}
body .container .processArea .brailleConversion .beforeBrailleConversion .PDFGroup,
body .container .processArea .brailleConversion .beforeBrailleConversion .textGroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
body .container .processArea .brailleConversion .beforeBrailleConversion .pdfWord,
body .container .processArea .brailleConversion .beforeBrailleConversion .textWord {
    background-color: darkorange;
    color: #fff;
    border-radius: 5px;
    padding: 3px;
}
body .container .processArea .brailleConversion .beforeBrailleConversion .fa-file-pdf,
body .container .processArea .brailleConversion .beforeBrailleConversion .fa-file-lines {
    font-size: 5rem;
}
body .container .processArea .brailleConversion .fa-arrow-right {
    font-size: 5rem;
}
body .container .processArea .brailleConversion .afterBrailleConversion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border: 3px solid #000;
    border-radius: 20px;
    padding: 10px;
}
body .container .processArea .brailleConversion .afterBrailleConversion .brailleGroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
body .container .processArea .brailleConversion .afterBrailleConversion .brailleWord {
    background-color: darkorange;
    color: #fff;
    border-radius: 5px;
    padding: 3px;
}
body .container .processArea .brailleConversion .afterBrailleConversion .brailleIcon {
    font-size: 5rem;
}

body {
    font-size: 1.6rem;
}
body .selectFileArea {
    position: relative;
    padding: 10px;
    height: 200px;
    background-color: #f5f5f5;
    border: 1px dashed #000;
    border-radius: 10px;
    margin-bottom: 30px;
}
body .selectFileArea .dragAndDragMode {
    display: none;
}
body .selectFileArea .dragAndDragMode.isVisible {
    display: block;
}
body .selectFileArea .dragAndDragMode .inner {
    display: flex;
    align-items: center;
}
body .selectFileArea .dragAndDragMode .inner .selectFileBtn {
    font-size: 1.6rem;
    background-color: #f5deb3;
}
body .selectFileArea .pasteMode {
    display: none;
}
body .selectFileArea .pasteMode.isVisible {
    display: flex;
}
body .selectFileArea .pasteMode .inner {
    display: flex;
    align-items: center;
}
body .selectFileArea .pasteMode .inner .submitBtn {
    font-size: 1.6rem;
    position: absolute;
    bottom: -50px;
    right: 0;
}

body {
    font-size: 1.6rem;
}
body .container .bottomArea .separation {
    text-align: right;
}
body {
    font-size: 1.6rem;
}
body .container {
    padding: 20px;
}
body .container .upperArea {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
body .container .upperArea .title {
    margin-right: auto;
    font-size: 3rem;
}
body .container .upperArea .upperAreaMenu {
    align-self: end;
    display: flex;
}
body .container .upperArea .upperAreaMenu .linkBookShelf {
    cursor: pointer;
    color: darkorange;
}
body .container .upperArea .upperAreaMenu .selectLanguage .languageBtn {
    font-size: 1.6rem;
    color: #000;
    border: 1px solid #000;
    background-color: #fff;
}
body .container .upperArea .upperAreaMenu .selectLanguage .languageMenu {
    min-width: 7rem;
    font-size: 1.6rem;
}

body {
    font-size: 1.6rem;
}
body .container .processArea {
    margin-bottom: 50px;
}
body .container .processArea .processDescription {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: #faf0e6;
    margin-bottom: 50px;
}
body .container .processArea .processDescription .fa-circle-info {
    font-size: 3rem;
}
body .container .processArea .addFurigana {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}
body .container .processArea .addFurigana .beforeAddFurigana {
    display: flex;
    gap: 20px;
    border: 3px solid #000;
    border-radius: 20px;
    padding: 10px;
}
body .container .processArea .addFurigana .beforeAddFurigana .PDFGroup,
body .container .processArea .addFurigana .beforeAddFurigana .HTMLGroup,
body .container .processArea .addFurigana .beforeAddFurigana .textGroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
body .container .processArea .addFurigana .beforeAddFurigana .pdfWord,
body .container .processArea .addFurigana .beforeAddFurigana .HTMLWord,
body .container .processArea .addFurigana .beforeAddFurigana .textWord {
    background-color: darkorange;
    color: #fff;
    border-radius: 5px;
    padding: 3px;
}
body .container .processArea .addFurigana .beforeAddFurigana .fa-file-pdf,
body .container .processArea .addFurigana .beforeAddFurigana .fa-code,
body .container .processArea .addFurigana .beforeAddFurigana .fa-file-lines {
    font-size: 5rem;
}
body .container .processArea .addFurigana .fa-arrow-right {
    font-size: 5rem;
}
body .container .processArea .addFurigana .afterAddFurigana {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border: 3px solid #000;
    border-radius: 20px;
    padding: 10px;
}
body .container .processArea .addFurigana .afterAddFurigana .furiganaWord {
    text-align: center;
    padding: 5px;
    background-color: #333;
    color: #fff;
    border: 1px solid #333;
    border-radius: 10px;
}
body .container .processArea .addFurigana .afterAddFurigana .HTMLAndTextBlock {
    display: flex;
    gap: 20px;
}
body .container .processArea .addFurigana .afterAddFurigana .HTMLAndTextBlock .HTMLGroup,
body .container .processArea .addFurigana .afterAddFurigana .HTMLAndTextBlock .textGroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
body .container .processArea .addFurigana .afterAddFurigana .HTMLAndTextBlock .HTMLWord,
body .container .processArea .addFurigana .afterAddFurigana .HTMLAndTextBlock .textWord {
    background-color: darkorange;
    color: #fff;
    border-radius: 5px;
    padding: 3px;
}
body .container .processArea .addFurigana .afterAddFurigana .HTMLAndTextBlock .fa-file-pdf,
body .container .processArea .addFurigana .afterAddFurigana .HTMLAndTextBlock .fa-code,
body .container .processArea .addFurigana .afterAddFurigana .HTMLAndTextBlock .fa-file-lines {
    font-size: 5rem;
}

body {
    font-size: 1.6rem;
}
body .selectFileArea {
    position: relative;
    height: 200px;
    padding: 10px;
    background-color: #f5f5f5;
    border: 1px dashed #000;
    border-radius: 10px;
    margin-bottom: 30px;
}
body .selectFileArea .dragAndDragMode {
    display: none;
}
body .selectFileArea .dragAndDragMode.isVisible {
    display: block;
}
body .selectFileArea .dragAndDragMode .inner {
    display: flex;
    align-items: center;
}
body .selectFileArea .dragAndDragMode .furiganaModal .modal-body .furiganaFileType .subheading {
    text-align: center;
    padding: 5px;
    background-color: darkorange;
    color: #fff;
    margin-bottom: 10px;
}
body .selectFileArea .dragAndDragMode .furiganaModal .modal-body .furiganaFileType form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    border: 3px solid #000;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
}
body .selectFileArea .dragAndDragMode .furiganaModal .modal-body .furiganaFileType form .HTMLLabel,
body .selectFileArea .dragAndDragMode .furiganaModal .modal-body .furiganaFileType form .textLabel {
    display: flex;
    align-items: center;
    gap: 5px;
}
body .selectFileArea .dragAndDragMode .furiganaModal .modal-body .furiganaFileType form .fa-code,
body .selectFileArea .dragAndDragMode .furiganaModal .modal-body .furiganaFileType form .fa-file-lines {
    font-size: 3rem;
}
body .selectFileArea .dragAndDragMode .furiganaModal .modal-body .separation .Subsubheading {
    text-align: center;
    background-color: #8fbc8f;
    color: #fff;
    margin-bottom: 10px;
}
body .selectFileArea .dragAndDragMode .furiganaModal .modal-body .separation .selectSeparation {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 10px;
}
body .selectFileArea .dragAndDragMode .furiganaModal .modal-body .separation .aboutSeparation {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
body .selectFileArea .dragAndDragMode .furiganaModal .modal-body .separation .aboutSeparation .fa-question-circle {
    color: orange;
}
body .selectFileArea .dragAndDragMode .furiganaModal .modal-body .separation .aboutSeparation a {
    color: #0d6efd;
}
body .selectFileArea .dragAndDragMode .furiganaModal .modal-footer .furiganaCancelBtn,
body .selectFileArea .dragAndDragMode .furiganaModal .modal-footer .furiganaSaveBtn {
    font-size: 1.6rem;
}
body .selectFileArea .dragAndDragMode .selectFileBtn {
    font-size: 1.6rem;
    background-color: #f5deb3;
}
body .selectFileArea .pasteMode {
    display: none;
}
body .selectFileArea .pasteMode.isVisible {
    display: flex;
}
body .selectFileArea .pasteMode .inner {
    display: flex;
    align-items: center;
}
body .selectFileArea .pasteMode .inner .submitBtn {
    font-size: 1.6rem;
    position: absolute;
    bottom: -50px;
    right: 0;
}

body {
    font-size: 1.6rem;
}
body .container {
    padding: 20px;
}
body .container .upperArea {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
body .container .upperArea .title {
    margin-right: auto;
    font-size: 3rem;
}
body .container .upperArea .upperAreaMenu {
    display: flex;
    align-self: end;
}
body .container .upperArea .upperAreaMenu .linkBookShelf {
    cursor: pointer;
    color: darkorange;
}
body .container .upperArea .upperAreaMenu .selectLanguage .languageBtn {
    font-size: 1.6rem;
    color: #000;
    border: 1px solid #000;
    background-color: #fff;
}
body .container .upperArea .upperAreaMenu .selectLanguage .languageMenu {
    min-width: 7rem;
    font-size: 1.6rem;
}

body {
    font-size: 1.6rem;
}
body .container .processArea {
    margin-bottom: 50px;
}
body .container .processArea .processDescription {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: #faf0e6;
    margin-bottom: 50px;
}
body .container .processArea .processDescription .fa-circle-info {
    font-size: 3rem;
}
body .container .processArea .characteRecognition {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
body .container .processArea .characteRecognition .beforeRecognition {
    display: flex;
    gap: 20px;
    border: 3px solid #000;
    border-radius: 20px;
    padding: 10px;
}
body .container .processArea .characteRecognition .beforeRecognition .imagePDFGroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
body .container .processArea .characteRecognition .beforeRecognition .imagePDFWord {
    background-color: darkorange;
    color: #fff;
    border-radius: 5px;
    padding: 3px;
}
body .container .processArea .characteRecognition .beforeRecognition .imagePDFIcon {
    display: flex;
    align-items: center;
    gap: 10px;
}
body .container .processArea .characteRecognition .beforeRecognition .imagePDFIcon .fa-file-pdf,
body .container .processArea .characteRecognition .beforeRecognition .imagePDFIcon .fa-image {
    font-size: 5rem;
}
body .container .processArea .characteRecognition .beforeRecognition .pdfWord,
body .container .processArea .characteRecognition .beforeRecognition .textWord {
    background-color: darkorange;
    color: #fff;
    border-radius: 5px;
    padding: 3px;
}
body .container .processArea .characteRecognition .beforeRecognition .fa-file-pdf,
body .container .processArea .characteRecognition .beforeRecognition .fa-file-lines {
    font-size: 5rem;
}
body .container .processArea .characteRecognition .fa-arrow-right {
    font-size: 5rem;
}
body .container .processArea .characteRecognition .afterRecognition {
    display: flex;
    align-items: center;
    gap: 20px;
    border: 3px solid #000;
    border-radius: 20px;
    padding: 10px;
}
body .container .processArea .characteRecognition .afterRecognition .textPDFGroup, body .container .processArea .characteRecognition .afterRecognition .EPUBGroup, body .container .processArea .characteRecognition .afterRecognition .HTMLGroup, body .container .processArea .characteRecognition .afterRecognition .textGroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
body .container .processArea .characteRecognition .afterRecognition .textPDFGroup .textPDFWord, body .container .processArea .characteRecognition .afterRecognition .textPDFGroup .EPUBword, body .container .processArea .characteRecognition .afterRecognition .textPDFGroup .HTMLWord, body .container .processArea .characteRecognition .afterRecognition .textPDFGroup .textWord, body .container .processArea .characteRecognition .afterRecognition .EPUBGroup .textPDFWord, body .container .processArea .characteRecognition .afterRecognition .EPUBGroup .EPUBword, body .container .processArea .characteRecognition .afterRecognition .EPUBGroup .HTMLWord, body .container .processArea .characteRecognition .afterRecognition .EPUBGroup .textWord, body .container .processArea .characteRecognition .afterRecognition .HTMLGroup .textPDFWord, body .container .processArea .characteRecognition .afterRecognition .HTMLGroup .EPUBword, body .container .processArea .characteRecognition .afterRecognition .HTMLGroup .HTMLWord, body .container .processArea .characteRecognition .afterRecognition .HTMLGroup .textWord, body .container .processArea .characteRecognition .afterRecognition .textGroup .textPDFWord, body .container .processArea .characteRecognition .afterRecognition .textGroup .EPUBword, body .container .processArea .characteRecognition .afterRecognition .textGroup .HTMLWord, body .container .processArea .characteRecognition .afterRecognition .textGroup .textWord {
    background-color: darkorange;
    color: #fff;
    border-radius: 5px;
    padding: 3px;
}
body .container .processArea .characteRecognition .afterRecognition .textPDFGroup .textPDFIcon, body .container .processArea .characteRecognition .afterRecognition .EPUBGroup .textPDFIcon, body .container .processArea .characteRecognition .afterRecognition .HTMLGroup .textPDFIcon, body .container .processArea .characteRecognition .afterRecognition .textGroup .textPDFIcon {
    display: flex;
    gap: 10px;
}
body .container .processArea .characteRecognition .afterRecognition .textPDFGroup .textPDFIcon .fa-file-lines, body .container .processArea .characteRecognition .afterRecognition .textPDFGroup .textPDFIcon .fa-file-pdf, body .container .processArea .characteRecognition .afterRecognition .EPUBGroup .textPDFIcon .fa-file-lines, body .container .processArea .characteRecognition .afterRecognition .EPUBGroup .textPDFIcon .fa-file-pdf, body .container .processArea .characteRecognition .afterRecognition .HTMLGroup .textPDFIcon .fa-file-lines, body .container .processArea .characteRecognition .afterRecognition .HTMLGroup .textPDFIcon .fa-file-pdf, body .container .processArea .characteRecognition .afterRecognition .textGroup .textPDFIcon .fa-file-lines, body .container .processArea .characteRecognition .afterRecognition .textGroup .textPDFIcon .fa-file-pdf {
    font-size: 5rem;
}
body .container .processArea .characteRecognition .afterRecognition .textPDFGroup .fa-microphone-slash, body .container .processArea .characteRecognition .afterRecognition .textPDFGroup .fa-code, body .container .processArea .characteRecognition .afterRecognition .textPDFGroup .fa-file-lines, body .container .processArea .characteRecognition .afterRecognition .EPUBGroup .fa-microphone-slash, body .container .processArea .characteRecognition .afterRecognition .EPUBGroup .fa-code, body .container .processArea .characteRecognition .afterRecognition .EPUBGroup .fa-file-lines, body .container .processArea .characteRecognition .afterRecognition .HTMLGroup .fa-microphone-slash, body .container .processArea .characteRecognition .afterRecognition .HTMLGroup .fa-code, body .container .processArea .characteRecognition .afterRecognition .HTMLGroup .fa-file-lines, body .container .processArea .characteRecognition .afterRecognition .textGroup .fa-microphone-slash, body .container .processArea .characteRecognition .afterRecognition .textGroup .fa-code, body .container .processArea .characteRecognition .afterRecognition .textGroup .fa-file-lines {
    font-size: 5rem;
}

body {
    font-size: 1.6rem;
}
body .selectFileArea {
    position: relative;
    padding: 10px;
    height: 200px;
    background-color: #f5f5f5;
    border: 1px dashed #000;
    border-radius: 10px;
    margin-bottom: 30px;
}
body .selectFileArea .dragAndDragMode {
    display: none;
}
body .selectFileArea .dragAndDragMode.isVisible {
    display: block;
}
body .selectFileArea .dragAndDragMode .inner {
    display: flex;
    align-items: center;
}
body .selectFileArea .dragAndDragMode .inner .selectFileBtn {
    font-size: 1.6rem;
    background-color: #f5deb3;
}
body .selectFileArea .recognitionModal .modal-body .recognitionFileType .subheading {
    text-align: center;
    padding: 5px;
    background-color: darkorange;
    color: #fff;
    margin-bottom: 10px;
}
body .selectFileArea .recognitionModal .modal-body .recognitionFileType form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    border: 3px solid #000;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
}
body .selectFileArea .recognitionModal .modal-body .recognitionFileType form .selectRecognitionFile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr); /* 2行を等しい高さで定義 */
    gap: 20px; /* グリッドセル間の隙間を10pxに設定 */
    flex-direction: column;
    align-items: center;
}
body .selectFileArea .recognitionModal .modal-body .recognitionFileType form .selectRecognitionFile .textPDFWordLabel,
body .selectFileArea .recognitionModal .modal-body .recognitionFileType form .selectRecognitionFile .EPUBLabel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
body .selectFileArea .recognitionModal .modal-body .recognitionFileType form .selectRecognitionFile .fa-file-lines,
body .selectFileArea .recognitionModal .modal-body .recognitionFileType form .selectRecognitionFile .fa-file-pdf,
body .selectFileArea .recognitionModal .modal-body .recognitionFileType form .selectRecognitionFile .fa-microphone-slash {
    font-size: 3rem;
}
body .selectFileArea .recognitionModal .modal-body .recognitionFileType form .selectRecognitionFile .HTMLLabel,
body .selectFileArea .recognitionModal .modal-body .recognitionFileType form .selectRecognitionFile .textLabel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
body .selectFileArea .recognitionModal .modal-body .recognitionFileType form .selectRecognitionFile .fa-code,
body .selectFileArea .recognitionModal .modal-body .recognitionFileType form .selectRecognitionFile .fa-file-lines {
    font-size: 3rem;
}
body .selectFileArea .recognitionModal .modal-footer .furiganaCancelBtn,
body .selectFileArea .recognitionModal .modal-footer .furiganaSaveBtn {
    font-size: 1.6rem;
}

body {
    font-size: 1.6rem;
}
body .container-fruid header .loginHeader {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding-left: 20px;
    background-image: url("../images/header_background.png");
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100px;
    border-bottom: 2px solid #0f5cd6;
}
body .container-fruid header .loginHeader .navLogo {
    width: 200px;
    height: auto;
}
body .container-fruid header .loginHeader .navLogo img {
    width: 100%;
}
body .container-fruid main .login {
    position: absolute;
    top: calc(50% + 50px);
    left: 50%;
    transform: translate(-50%, -50%);
}
body .container-fruid main .login .loginBox {
    width: min(80vw, 700px);
    box-shadow: 7px 5px 2px #ccc, -1px 5px 2px #ccc;
    border-radius: 10px;
    margin-bottom: 30px;
}
body .container-fruid main .login .loginBox .loginHeading {
    width: 100%;
    padding: 10px;
    background-color: #0f5cd6;
    color: #fff;
    text-align: center;
    border-radius: 10px 10px 0 0;
    font-size: 2rem;
}
body .container-fruid main .login .loginBox .loginForm {
    margin: 0 auto;
    padding: 20px;
    border-radius: 0 0 10px 10px;
}
body .container-fruid main .login .loginBox .loginForm .username {
    display: flex;
    height: 50px;
    border-radius: 20px;
    margin-bottom: 30px;
    background-color: rgba(123, 202, 248, 0.1);
}
body .container-fruid main .login .loginBox .loginForm .username .bi-person-square {
    display: grid;
    place-items: center;
    width: 70px;
    height: 48px;
    padding-left: 5px;
    background-color: #fff;
    border-right: none;
    font-size: 3rem;
    color: #0f5cd6;
    background-color: rgba(123, 202, 248, 0.1);
    border-radius: 20px 0 0 20px;
    transition: 0.2s;
    cursor: pointer;
}
body .container-fruid main .login .loginBox .loginForm .username .bi-person-square.isActive {
    background-color: #0f5cd6;
    color: #fff;
}
body .container-fruid main .login .loginBox .loginForm .username .inputUsername {
    width: 100%;
    padding-left: 20px;
    cursor: pointer;
}
body .container-fruid main .login .loginBox .loginForm .username .inputUsername:focus {
    outline: none;
}
body .container-fruid main .login .loginBox .loginForm .userpassword {
    display: flex;
    height: 50px;
    border-radius: 20px;
    margin-bottom: 30px;
    background-color: rgba(123, 202, 248, 0.1);
}
body .container-fruid main .login .loginBox .loginForm .userpassword .bi-lock {
    display: grid;
    place-items: center;
    width: 70px;
    height: 48px;
    padding-left: 5px;
    background-color: #fff;
    border-right: none;
    font-size: 3rem;
    color: #0f5cd6;
    background-color: rgba(123, 202, 248, 0.1);
    border-radius: 20px 0 0 20px;
    transition: 0.2s;
    cursor: pointer;
}
body .container-fruid main .login .loginBox .loginForm .userpassword .bi-lock.isActive {
    background-color: #0f5cd6;
    color: #fff;
}
body .container-fruid main .login .loginBox .loginForm .userpassword .inputUserpasword {
    width: 100%;
    padding-left: 20px;
    cursor: pointer;
}
body .container-fruid main .login .loginBox .loginForm .userpassword .inputUserpasword:focus {
    outline: none;
}
body .container-fruid main .login .loginBox .loginForm .usernameIcon,
body .container-fruid main .login .loginBox .loginForm .passwordIcon {
    font-size: 3rem;
}
body .container-fruid main .login .loginBox .loginForm .loginExecution {
    display: flex;
    justify-content: space-between;
}
body .container-fruid main .login .loginBox .loginForm .loginExecution .rememberLoginInfo {
    padding: 10px;
    transition: 0.3s;
    cursor: pointer;
}
body .container-fruid main .login .loginBox .loginForm .loginExecution .rememberLoginInfo:hover {
    opacity: 0.7;
}
body .container-fruid main .login .loginBox .loginForm .loginExecution .rememberLoginInfo input {
    width: 20px;
    height: 20px;
}
body .container-fruid main .login .loginBox .loginForm .loginExecution .loginBtn {
    background-image: url("../images/btn-yellow.png");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 40px;
    font-size: 20px;
    font-weight: bold;
    padding: 0 5px;
    color: #0f5cd6;
    border: 2px solid #ffc107;
    border-radius: 5px;
    background-color: #ffc107;
}
body .container-fruid main .login .loginBox .loginForm .loginExecution .loginBtn:hover {
    opacity: 0.7;
}
body .container-fruid main .login .loginBox .loginForm .fogetPassword {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    padding: 5px;
    border-radius: 10px;
}
body .container-fruid main .login .loginBox .loginForm .fogetPassword .fogetPasswordLink:hover {
    opacity: 0.7;
}
body .container-fruid main .login .loginBox .loginForm .fogetPassword .fogetPasswordLink .bi-person-lock,
body .container-fruid main .login .loginBox .loginForm .fogetPassword .fogetPasswordLink .bi-question-circle {
    font-size: 2rem;
}
body .container-fruid main .login .userRegistration {
    display: flex;
    justify-content: flex-end;
}
body .container-fruid main .login .userRegistration .userRegistrationBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    background-color: #fff;
    color: #0f5cd6;
    border: 3px solid #0f5cd6;
    border-radius: 10px;
    transition: 0.3s;
    width: min(80vw, 700px);
    background-color: rgba(123, 202, 248, 0.1);
}
body .container-fruid main .login .userRegistration .userRegistrationBtn:hover {
    color: #fff;
    background-color: #0f5cd6;
    border: 2px solid #0f5cd6;
}
body .container-fruid main .login .userRegistration .userRegistrationBtn .userRegistrationLink {
    display: flex;
    align-items: center;
    gap: 10px;
}
body .container-fruid main .login .userRegistration .userRegistrationBtn .userRegistrationLink .bi-person-plus {
    font-size: 3rem;
}

@media screen and (max-width: 768px) {
    body .container-fruid main .login .loginBox .loginForm .loginExecution {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    body .container-fruid main .login .loginBox .loginForm .loginExecution .loginBtn {
        margin-bottom: 20px;
    }
}
@media screen and (max-width: 1919px) {
    body .container-fluid main .mainArea .displayBookArea {
        grid-template-columns: repeat(5, 1fr);
    }
    body .container-fluid main .mainArea .displayBookArea.isListDisplayed {
        grid-template-columns: repeat(2, 1fr);
    }
    body .container-fluid main .mainArea .displayBookArea.isListDisplayed.isChange {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    body .container-fluid main .mainArea .displayBookArea.isListDisplayed.isChange .eachBook {
        display: block;
        text-align: center;
    }
}
@media screen and (max-width: 1400px) {
    body .container-fluid main .mainArea .displayBookArea {
        grid-template-columns: repeat(4, 1fr);
    }
    body .container-fluid main .mainArea .displayBookArea.isListDisplayed {
        display: flex;
        flex-direction: column;
    }
    body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    body .container-fluid main .mainArea .displayBookArea.isListDisplayed.isChange {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    body .container-fluid main .mainArea .displayBookArea.isListDisplayed.isChange .eachBook {
        display: block;
        text-align: center;
    }
}
@media screen and (max-width: 1200px) {
    body .container-fluid main .mainArea .displayBookArea {
        grid-template-columns: repeat(3, 1fr);
    }
    body .container-fluid main .mainArea .displayBookArea .eachBook .bookImg {
        width: 10vw; /* 本のサイズ  */
    }
}
@media screen and (max-width: 992px) {
    body .container-fluid header .navbar .container-fluid {
        padding: 0 10px 10px;
    }
    body .container-fluid header .navbar .container-fluid .navbar-brand {
        font-size: 3rem;
    }
    body .container-fluid header .navbar .container-fluid .navbar-collapse .navbar-nav {
        flex-direction: column;
    }
    body .container-fluid header .upperArea {
        margin-top: 55px;
    }
    body .container-fluid main .mainArea .displayBookArea .eachBook .bookImg {
        width: 15vw; /* 本のサイズ  */
    }
    body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook {
        display: grid;
        justify-content: space-evenly;
    }
    body .container-fluid main .mainArea .displayBookArea.isListDisplayed.isChange {
        display: flex;
        flex-direction: column;
    }
    body .container-fluid main .mainArea .displayBookArea.isListDisplayed.isChange .eachBook {
        display: flex;
        justify-content: space-between;
        text-align: start;
    }
    body .container-fluid main .mainArea .displayBookArea.isListDisplayed.isChange .eachBook .bookSelectCheck {
        position: static;
    }
}
@media screen and (max-width: 768px) {
    body .container-fluid header .navbar {
        display: block;
    }
    body .container-fluid main .sideArea.isVisible {
        display: none;
    }
    body .container-fluid main .mainArea {
        width: 100%;
    }
    body .container-fluid main .mainArea .displayBookArea {
        display: none;
    }
    body .container-fluid main .mainArea .displayBookArea .eachBook .bookImg {
        width: 15vw; /* 本のサイズ  */
    }
    body .container-fluid main .mainArea .displayBookArea.isListDisplayed.isChange {
        display: flex;
        flex-direction: column;
    }
}
@media screen and (max-width: 576px) {
    body .container-fluid main {
        padding: 0;
    }
    body .container-fluid main .mainArea .mainAreaMenu {
        flex-direction: column;
    }
    body .container-fluid main .mainArea .displayBookArea {
        grid-template-columns: repeat(2, 1fr);
    }
    body .container-fluid main .mainArea .displayBookArea .eachBookModal .modal-dialog .modal-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook {
        display: flex;
        flex-direction: column;
    }
    body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook .bookImg {
        width: 20vw; /* 本のサイズ*/
    }
    body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook .listDisplayedOnly .bookDate {
        flex-direction: column;
    }
    body .container-fluid main .mainArea .displayBookArea.isListDisplayed .eachBook .listDisplayedOnly .bookDate .bookVersion::after {
        content: " ";
    }
    body .container-fluid main .mainArea .displayBookArea.isListDisplayed.isChange {
        grid-template-columns: repeat(2, 1fr);
    }
    body .container-fluid main .mainArea .displayBookArea.isListDisplayed.isChange .eachBook {
        display: flex;
        flex-direction: column;
    }
    body .container-fluid main .mainArea .generalDocument .fa-envelope {
        top: 10px;
        left: 160px;
    }
    body .container-fluid main .mainArea .generalDocument .selectsharePartnerBtn {
        top: 10px;
        left: 0;
        width: 150px;
    }
    body .container-fluid main .mainArea .supporterContent .fa-envelope {
        top: 10px;
        left: 160px;
    }
    body .container-fluid main .mainArea .supporterContent .selectsharePartnerBtn {
        top: 10px;
        left: 0;
        width: 150px;
    }
    body .container-fluid .bottomArea .comSwitching .onlineBtn {
        font-size: 1.6rem;
    }
    body .container-fluid .bottomArea .comSwitching .DownLoadBtn {
        font-size: 1.6rem;
    }
    body .container-fluid .bottomArea .comSwitching .DownLoadBtn .spOnly {
        display: block;
    }
}
@media screen and (max-width: 992px) {
    body .container main .processArea .selsectProcess {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 30px;
        place-items: center;
    }
}
@media screen and (max-width: 576px) {
    body .container main .processArea .selsectProcess {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 30px;
    }
}
@media screen and (max-width: 1919px) {
    body .container-fruid .mainArea .displayBookArea .eachBookList {
        grid-template-columns: repeat(3, 1fr);
    }
    body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook .bookImg {
        width: 15vw;
    }
}
@media screen and (max-width: 1400px) {
    body .container-fruid .mainArea .displayBookArea .eachBookList {
        grid-template-columns: repeat(3, 1fr);
    }
    body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook .bookInfoList .bookHeading {
        display: block;
    }
    body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook .bookInfoList .bookHeading .pageRange {
        display: inline-block;
        margin: 0 auto;
        margin-bottom: 10px;
    }
}
@media screen and (max-width: 992px) {
    body .container-fruid .mainArea .displayBookArea .eachBookList {
        grid-template-columns: repeat(2, 1fr);
    }
    body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook .bookImg {
        width: 20vw;
    }
}
@media screen and (max-width: 768px) {
    body .container-fruid .upperArea .sarch {
        flex-direction: column;
        gap: 0;
    }
    body .container-fruid .upperArea .sarch .sarchBook {
        margin-bottom: 0;
    }
    body .container-fruid .upperArea .sarch .btnBlock {
        margin-bottom: 30px;
    }
    body .container-fruid .mainArea .displayBookArea .eachBookList {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 576px) {
    body .container-fruid .mainArea .displayBookArea .eachBookList {
        grid-template-columns: repeat(2, 1fr);
    }
    body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook {
        flex-direction: column;
    }
    body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook .bookImg {
        flex-grow: 1;
    }
    body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook .bookInfoList {
        flex-grow: 1;
    }
    body .container-fruid .mainArea .displayBookArea .eachBookList .eachBook .bookSelectCheck {
        position: static;
        text-align: right;
    }
}
@media screen and (max-width: 992px) {
    body .container .processArea {
        margin-bottom: 20px;
    }
    body .container .processArea .processDescription {
        margin-bottom: 20px;
    }
    body .container .processArea .characteRecognition {
        flex-direction: column;
    }
    body .container .processArea .characteRecognition .fa-arrow-right {
        transform: rotate(90deg);
    }
}
@media screen and (max-width: 768px) {
    body .container .processArea .processDescription {
        flex-direction: column;
    }
}
@media screen and (max-width: 576px) {
    body .container .processArea .brailleConversion {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    body .container .processArea .brailleConversion .beforeBrailleConversion .pdfWord,
    body .container .processArea .brailleConversion .beforeBrailleConversion .HTMLWord,
    body .container .processArea .brailleConversion .beforeBrailleConversion .textWord {
        padding: 1px;
    }
    body .container .processArea .brailleConversion .beforeBrailleConversion .brailleIcon {
        font-size: 4rem;
    }
    body .container .processArea .fa-arrow-right {
        font-size: 4rem;
        transform: rotate(90deg);
    }
    body .container .processArea .afterBrailleConversion .HTMLAndTextBlock .brailleWord {
        padding: 1px;
    }
    body .container .processArea .afterBrailleConversion .HTMLAndTextBlock .brailleIcon {
        font-size: 3rem;
    }
}
@media screen and (max-width: 992px) {
    body .container .processArea {
        margin-bottom: 20px;
    }
    body .container .processArea .processDescription {
        margin-bottom: 20px;
    }
}
@media screen and (max-width: 768px) {
    body .container .processArea .processDescription {
        flex-direction: column;
    }
    body .container .processArea .addFurigana {
        flex-direction: column;
    }
    body .container .processArea .addFurigana .fa-arrow-right {
        transform: rotate(90deg);
    }
}
@media screen and (max-width: 576px) {
    body .container .processArea .addFurigana {
        gap: 5px;
        flex-direction: column;
    }
    body .container .processArea .addFurigana .beforeAddFurigana .pdfWord,
    body .container .processArea .addFurigana .beforeAddFurigana .HTMLWord,
    body .container .processArea .addFurigana .beforeAddFurigana .textWord {
        padding: 1px;
    }
    body .container .processArea .addFurigana .beforeAddFurigana .fa-file-pdf,
    body .container .processArea .addFurigana .beforeAddFurigana .fa-code,
    body .container .processArea .addFurigana .beforeAddFurigana .fa-file-lines {
        font-size: 4rem;
    }
    body .container .processArea .addFurigana .fa-arrow-right {
        font-size: 4rem;
        transform: rotate(90deg);
    }
    body .container .processArea .addFurigana .afterAddFurigana .HTMLAndTextBlock .HTMLWord,
    body .container .processArea .addFurigana .afterAddFurigana .HTMLAndTextBlock .textWord {
        padding: 1px;
    }
    body .container .processArea .addFurigana .afterAddFurigana .HTMLAndTextBlock .fa-file-pdf,
    body .container .processArea .addFurigana .afterAddFurigana .HTMLAndTextBlock .fa-code,
    body .container .processArea .addFurigana .afterAddFurigana .HTMLAndTextBlock .fa-file-lines {
        font-size: 3rem;
    }
}
@media screen and (max-width: 992px) {
    body .container .processArea {
        margin-bottom: 20px;
    }
    body .container .processArea .processDescription {
        margin-bottom: 20px;
    }
    body .container .processArea .characteRecognition {
        flex-direction: column;
    }
    body .container .processArea .characteRecognition .fa-arrow-right {
        transform: rotate(90deg);
    }
}
@media screen and (max-width: 768px) {
    body .container .processArea .processDescription {
        flex-direction: column;
    }
}
@media screen and (max-width: 576px) {
    body .container .processArea .characteRecognition .afterRecognition {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    body .container .selectFileArea .recognitionModal .modal-dialog {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    body .container .selectFileArea .recognitionModal .modal-dialog .modal-content {
        width: min(300px, 90vw);
    }
    body .container .selectFileArea .recognitionModal .modal-dialog .modal-content .modal-body form .selectRecognitionFile {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr); /* 2行を等しい高さで定義 */
    }
}/*# sourceMappingURL=style.css.map */