/* pc style */

/* フォントカラー指定 */
.attention {
    color: hsl(0, 100%, 46%);
}

/* フォントサイズ指定 */
.subTitle {
    font-size: 1.2em;
}

/* グルーピング領域 */
.groupingArea {
    min-height: 24px;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: hsl(0, 0%, 100%);
}

/* 要素を非表示にする */
.displayNone {
    display: none !important;
}

/* 要素を非活性にする */
.disabled {
    opacity: 0.4 !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* ローダー表示のトリガー (body要素にloadingクラスを付与) */
.loading .loader {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

/* ローダー表示中の背景及びローダーアイコンの位置指定 */
.loader {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0 !important;
    background-color: hsla(0,0%,20%,0.5);
    -ms-flex-direction: column;
    -ms-flex-wrap: nowrap;
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    z-index: 5;
}

    /* ローダーアイコン表示 アニメーションの指定 */
    .loader .icon-loading {
        width: 100px;
        height: 100px;
        display: block;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url("../image/loadIcon.png");
        -ms-animation-name: nowLoadingEffect;
        -ms-animation-duration: 1s;
        -ms-animation-timing-function: linear;
        -ms-animation-iteration-count: infinite;
        -moz-animation-name: nowLoadingEffect;
        -moz-animation-duration: 1s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
        -webkit-animation-name: nowLoadingEffect;
        -webkit-animation-duration: 1s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
    }

    /* ローダーのテキスト */
    .loader > h1 {
        width: 300px;
        height: 1.4em;
        font-size: 1.2em;
        text-align: center;
        position: relative;
        color: white;
    }

/*コンテンツ上黒半透明*/
.anmDialog .closeOverlay {
    background-color: hsl(0,0%,20%);
    opacity: 0.5;
    z-index: 3;
}

/* ポップアップ時コンテンツオーバーレイ */
.closeOverlay {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: -1;
}

/* コンテンツ部分 */
#contents {
    position: absolute;
    top: 104px;
    bottom: 94px;
    left: 0;
    right: 0;
    height: auto !important;
    margin: auto;
    overflow-y: hidden;
}

/* 宛名マッピング項目選択 */
.addressListPageInfo {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -ms-flex-wrap: nowrap;
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    position: relative;
}

.addressTableContainer {
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 100%;
    margin-bottom: 10px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    border: 1px solid hsl(0, 0%, 78%);
    position: absolute;
    top: 0;
    bottom: 0;
}

@media all and (-ms-high-contrast:none) {
    *::-ms-backdrop, .disabled:before {
        opacity: 0.4 !important;
    }
}

/* 宛名リストテーブル */
.addressTableContainer {
    background-color: #fefefe;
}

    .addressTableContainer .columnHeader > li,
    .addressTableContainer .row > li {
        border-right: 1px solid hsl(0, 0%, 78%);
        height: 28px;
        line-height: 28px;
        width: 113px;
        box-sizing: border-box;
        padding: 0 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.addressTableHeader {
    overflow-x: hidden;
    margin-right: 17px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.addressTableContainer .columnHeader > li:first-child,
.addressTableContainer .row > li:first-child {
    width: 52px;
}

.addressTableContainer .columnHeader > li:nth-child(2),
.addressTableContainer .row > li:nth-child(2) {
    width: 110px;
    padding: 0 7px;
}

.addressTableContainer .row > li .ui-checkbox {
    height: 28px;
}

.addressTableContainer .row > li input[type="checkbox"] {
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
}

.addressTableContainer .columnHeader li.narrow,
.addressTableContainer .row li.narrow {
    width: 45px;
}

.addressTableContainer .columnHeader {
    background-color: #fefefe;
}

.addressTableContainer .columnHeader,
.addressTableContainer .row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -ms-flex-wrap: nowrap;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
}

.addressListTable {
    overflow-y: scroll;
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    border-top: 2px solid #aaaaaa;
    position: absolute;
    top: 28px;
    bottom: 0;
    left: 0;
    right: 0;
}

.addressTableContainer .row {
    border-bottom: 1px solid hsl(0, 0%, 78%);
}

.addressTableContainer > .addressListTable > li:nth-child(odd) > .row {
    background-color: #f9f9f9;
}

.addressTableContainer > .addressListTable > li:nth-child(even) > .row {
    background-color: #fefefe;
}

.addressTableContainer > .addressListTable > li.selected:nth-child(odd) > .row {
    background-color: #ffcccc;
}

.addressTableContainer > .addressListTable > li.selected:nth-child(even) > .row {
    background-color: #ffcccc;
}

.addressTableContainer input[type=checkbox] + label {
    margin: 5px auto !important;
}

.addressListTable select {
    padding-left: 6px;
    padding-right: 5px;
}

/* 宛名リストアップロード */
.addressListUploadContents {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    bottom: 84px;
}

.addressListUploadTitle {
    padding: 0 20px;
}

    .addressListUploadTitle p {
        font-size: 15px;
    }

.addressListUploadContents > .groupingArea {
    padding: 21px 18px;
    flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    margin-left: 80px;
    margin-right: 80px;
    margin-top: 22px;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
}

.groupingAreaHeader {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    padding-bottom: 15px;
}

    .groupingAreaHeader > div {
        display: flex;
        display: -ms-flexbox;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
    }

        .groupingAreaHeader > div > select + button {
            margin-left: 15px;
        }

.addressListUploadContents .inputArea + .subTitle {
    margin-left: 6px;
    font-size: 15px;
}

/*table empty*/
.addressListUploadContents .addressListPageInfo .addressListTable {
    background-color: #e8e8e8;
}
/*override table style*/
.addressListUploadContents .addressTableHeader {
    border: solid 1px #4a4a4a;
    margin-right: 17px;
}

.addressListUploadContents .columnHeader li,
.addressListUploadContents .columnHeader li:first-child,
.addressListUploadContents .columnHeader li:nth-child(2),
.addressListUploadContents .row > li,
.addressListUploadContents .row > li:first-child,
.addressListUploadContents .row > li:nth-child(2) {
    min-width: calc(12.5% - (12.5% - 20vw)); /* スクロールバー分のズレを防止する */
    flex: 0 0 auto;
    position: relative;
}

.addressListUploadContents .addressTableHeader li {
    height: 20px;
}

.addressListUploadContents .addressTableHeader li {
    line-height: 20px;
}

.addressListUploadContents .addressTableContainer {
    border: none;
    height: 100%;
}

.addressListUploadContents .columnHeader li.narrow,
.addressListUploadContents .row > li.narrow {
    width: 45px;
}

.addressListUploadContents .columnHeader li {
    border-right: 1px solid #4a4a4a;
}

.addressListUploadContents .addressListTable {
    border: solid 1px #aaaaaa;
    border-top: solid 2px #aaaaaa;
    top: 22px;
}

    .addressListUploadContents .addressListTable .row {
        border: none;
    }

        .addressListUploadContents .addressListTable .row > li {
            background-color: #f9f9f9;
            border-bottom: 1px solid #c7c7c7;
        }

    .addressListUploadContents .addressListTable > li:nth-child(2n) .row > li {
        background-color: #fefefe;
    }

    .addressListUploadContents .addressListTable .row > li.disabled {
        background-color: #dcdcdc;
        color: #999999;
    }

    .addressListUploadContents .addressListTable > li:nth-child(2n) .row > li.disabled {
        background-color: #e2e2e2;
    }

.addressListUploadContents .addressTableContainer .row {
    width: auto;
}

.addressListUploadContents .columnHeader li.pullDown {
    padding: 0;
}

    .addressListUploadContents .columnHeader li.pullDown > select {
        width: 100%;
        height: 100%;
        border: none;
        padding: 0;
    }

.addressListUploadContents .columnHeader li input[type=checkbox] + label {
    margin: auto !important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.inputArea .attention {
    float: left;
}

    .inputArea .attention::after {
        content: "";
        display: block;
        clear: both;
    }

/* 各画面ポップアップ */
.popup {
    opacity: 1;
    z-index: 11;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-width: 2px;
    border-color: hsl(0,0%,79.2%);
    border-style: solid;
    border-radius: 8px;
    background-color: hsl(0,0%,100%);
    /*サイズ変更箇所*/
    width: 50%;
    height: 70%;
    max-width: 626px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -ms-flex-wrap: nowrap;
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

    .popup.fileFormatSelect {
        height: 500px;
        min-width: 714px;
    }

        .popup.fileFormatSelect[import-mode="Excel"] .csv {
            display: none;
        }

        .popup.fileFormatSelect[import-mode="CSV"] .excel {
            display: none;
        }

    .popup.addressListImportWithToiNoDlg {
        height: 210px;
        width: 500px;
        z-index: 4;
    }

    .popup .popupHeader {
        -ms-flex: 0 0 auto;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        padding: 10px 20px;
        font-size: 18px;
    }

    .popup .popupContent {
        -ms-flex: 1 1 100%;
        -webkit-flex: 1 1 100%;
        flex: 1 1 100%;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        padding: 0 10px 10px;
    }

    .fileFormatSelect::before,
    .addressListDownloadDlg::before,
    .popup.uploadSelectDlg::before,
    .popup.addressListImportWithToiNoDlg::before,
    .popup.confirmDlg::before {
        content: "";
        position: absolute;
        height: 54px;
        width: 100%;
        bottom: 0;
        left: 0;
        background-color: #f2f2f2;
        box-sizing: border-box;
        z-index: -1;
    }

.fileFormatSelect .dlgText {
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 10px 30px;
    font-size: 1.2em;
}

.fileFormatSelect .fileFormatListArea {
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px 30px;
}

.addressListImportWithToiNoDlg .dlgText {
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 10px 30px;
    font-size: 1.2em;
}

.dlgFooter {
    -ms-flex: 0 0 53px;
    -webkit-flex: 0 0 53px;
    flex: 0 0 53px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

    .dlgFooter .dlgFooterBtnLeftArea,
    .dlgFooter .dlgFooterBtnRightArea {
        width: 50%;
        position: relative;
    }

    .dlgFooter .dlgFooterBtnCenterArea {
        width: 100%;
        position: relative;
    }

.fileFormatSelect .fileFormatList > li {
    background-color: hsl(0, 0%, 100%);
    box-shadow: 0px 3px 7px hsla(0, 0%, 0%, 0.4);
    box-sizing: border-box;
    width: 100%;
    padding: 10px 20px;
    margin-bottom: 10px;
    position: relative;
    cursor: pointer;
}

.fileFormatSelect .csvFileUploadTxt {
    font-size: 1.2em;
}

.fileFormatSelect .inputArea {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    margin-top: 14px;
    position: relative;
    height: 38px;
}

    .fileFormatSelect .inputArea .subTitle {
        -ms-flex: 0 0 142px;
        -webkit-flex: 0 0 142px;
        flex: 0 0 142px;
    }

.fileFormatSelect .fileFormatList > li.selected {
    border: 5px solid #c8aa00;
    padding: 5px 15px;
    box-shadow: none;
}

.fileFormatSelect .fileExtension {
    color: hsl(0, 100%, 46%);
    font-size: 0.8em;
    padding-left: 1em;
}

.fileFormatSelect .fileFormatDescription {
    margin-top: 10px;
}

.fileFormatSelect .supplementation {
    margin-top: 10px;
}

/* 確認用プレビューエリア */
.confirmPrintPreviewArea {
    min-width: 110px;
    min-height: 163px;
    width: 100%;
    height: 100%;
    margin: auto;
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 275px;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

    .confirmPrintPreviewArea > .confirmPrintPreviewImg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

/* firefox向け */
_:lang(x)::-moz-placeholder, .confirmPrintPreviewArea {
    min-width: 150px;
    min-height: 222px;
    width: 100%;
    height: 100%;
    margin: auto;
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 275px;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

    /* firefox向け */
    _:lang(x)::-moz-placeholder, .confirmPrintPreviewArea > .confirmPrintPreviewImg {
        width: 100%;
        height: 100% !important;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-color: transparent;
    }

.popup.confirmPreviewDlg {
    height: 90% !important;
    width: 90% !important;
    max-width: 1960px !important;
    min-width: 300px !important;
    min-height: 300px !important;
    margin: auto;
    background-color: #f0f0f0; /* ダイアログの背景色 */
}
/* firefox向け */
_:lang(x)::-moz-placeholder, .popup.confirmPreviewDlg {
    height: 90% !important;
    width: 90% !important;
    max-width: 1960px !important;
    min-width: 850px !important;
    min-height: 700px !important;
    margin: auto;
    background-color: #f0f0f0; /* ダイアログの背景色 */
}
/* プレビュー確認ダイアログ等のダイアログ向けのオーバーレイ */
.OverlayConfirmPreviewDialog {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(100, 100, 100, .7);
}

.confirmPreviewDlgContainer {
    display: flex;
    flex-direction: column;
}

/* ●header（△！アイコン、文言、×アイコン） */
.popup.confirmPreviewDlg .alertHeader {
    position: absolute;
    top: 5px;
    left: 0px;
    width: 100%;
    background-color: transparent;
    line-height: 48px;
    font-size: 1.2em;
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
}
/* 左上の「△！」アイコン */
.popup.confirmPreviewDlg .alertIcon {
    display: inline-block;
    width: 54px;
    height: 54px;
    margin-left: 10px;
    background-image: url(../image/icon_attention_l.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: top;
}
/* 右上の「×」アイコン（ボタン）*/
.popup.confirmPreviewDlg .closeIcon {
    display: inline-block;
    width: 48px;
    height: 48px;
    background-image: url(../image/icon_close.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: top;
}
/* ●データ表示（プレビュー(10×2)） */
.popup.confirmPreviewDlg .alertData {
    position: absolute;
    top: 45px;
    left: 0px;
    width: 100%;
    height: calc(100% - 45px);
    background-color: transparent;
}
/* プレビュー表示(10×2)table */
.popup.confirmPreviewDlg .previewTable {
    position: relative;
    width: 90%;
    height: 90%;
    margin: auto;
    background-color: transparent;
}
/* firefox向け */
_:lang(x)::-moz-placeholder, .popup.confirmPreviewDlg .previewTable {
    position: relative;
    width: 90%;
    height: 90%;
    margin: auto;
    background-color: transparent;
}
/* firefox向け */
_:lang(x)::-moz-placeholder, .PreviewTableRow {
    height: 45%;
}
/* firefox向け */
_:lang(x)::-moz-placeholder, .ProgressTableRow {
    height: 40px;
    background-color: transparent;
}
/* プレビュー表示(10×2)tableのtd */
.popup.confirmPreviewDlg .previewTd {
    padding: 2px 5px 8px 5px;
    background-color: transparent;
}
/* firefox向け */
_:lang(x)::-moz-placeholder, .popup.confirmPreviewDlg .previewTd {
    position: relative;
    padding: 2px 5px 8px 5px;
    background-color: transparent;
}

/* 進捗表示 */
.popup.confirmPreviewDlg .progressArea {
    font-size: 1.1em;
    padding-right: 25px;
    margin-top: auto;
    margin-bottom: auto;
    background-color: transparent;
}

.popup.confirmPreviewDlg .progressTd {
    height: 1.8em;
    text-align: right;
    vertical-align: middle;
    padding-bottom: 3px;
    background-color: transparent;
}

.popup.confirmPreviewDlg .dlgFooter {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.popup.confirmPreviewDlg .message {
    display: inline-block;
    margin-left: 10px;
}

/* プレビュー確認ダイアログ（ポップアップ） */
.popup.addressListDownloadDlg {
    height: auto;
    top: 50%;
    left: 50%;
    bottom: auto;
    width: 50%;
    /*chrome用*/
    margin: 0;
    -webkit-transform: translate(-50%, -50%);
    /*firefox,ie用*/
    transform: translate(-50%, -50%);
    padding: 0 10px;
}

    .popup.addressListDownloadDlg .alartHeader {
        line-height: 24px;
        margin: 10px 0;
        font-size: 1.2em;
        -ms-flex: 1 1 auto;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
    }

    .popup.addressListDownloadDlg .alartIcon {
        display: inline-block;
        width: 54px;
        height: 54px;
        background-image: url(../image/icon_attention_l.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: top;
    }

    .popup.addressListDownloadDlg .message {
        display: inline-block;
        margin-left: 10px;
    }

.popup.uploadSelectDlg {
    height: auto;
    top: 50%;
    left: 50%;
    bottom: auto;
    width: 50%;
    /*chrome用*/
    margin: 0;
    -webkit-transform: translate(-50%, -50%);
    /*firefox,ie用*/
    transform: translate(-50%, -50%);
    padding: 0 10px;
}

    .popup.uploadSelectDlg .alartHeader {
        line-height: 24px;
        margin: 10px 0;
        font-size: 1.2em;
        -ms-flex: 1 1 auto;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
    }

    .popup.uploadSelectDlg .alartIcon {
        display: inline-block;
        width: 54px;
        height: 54px;
        background-image: url(../image/icon_attention_l.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: top;
    }

    .popup.uploadSelectDlg .message {
        display: inline-block;
        margin-left: 10px;
    }

    .popup.uploadSelectDlg .radioBtnArea {
        margin-bottom: 10px;
        margin-left: 50px;
        font-size: 1.2em;
        line-height: 24px;
    }

    .popup.uploadSelectDlg input {
        display: none;
    }

    .popup.uploadSelectDlg label {
        display: block;
        margin-right: 55px;
        position: relative;
    }

    .popup.uploadSelectDlg #uploadSelectInAddition + #uploadSelectInAdditionBtn::before,
    .popup.uploadSelectDlg #uploadSelectDeleted + #uploadSelectDeletedBtn::before {
        content: '';
        display: inline-block;
        margin-right: 5px;
        width: 1.1em;
        height: 1.1em;
        border-radius: 50%;
        box-sizing: border-box;
        border: 1px solid #000;
        vertical-align: middle;
        background-color: #fff;
    }

    .popup.uploadSelectDlg #uploadSelectInAddition:checked + #uploadSelectInAdditionBtn::before,
    .popup.uploadSelectDlg #uploadSelectDeleted:checked + #uploadSelectDeletedBtn::before {
        box-shadow: 0 0 0 2px #fff inset;
        background-color: #231815;
    }

.popup.confirmDlg {
    height: auto;
    top: 50%;
    left: 50%;
    bottom: auto;
    width: 50%;
    /*chrome用*/
    margin: 0;
    -webkit-transform: translate(-50%, -50%);
    /*firefox,ie用*/
    transform: translate(-50%, -50%);
    padding: 0 10px;
}

    .popup.confirmDlg .alartHeader {
        line-height: 24px;
        margin: 10px 0;
        font-size: 1.2em;
        -ms-flex: 1 1 auto;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
    }

    .popup.confirmDlg .alartIcon {
        display: inline-block;
        width: 44px;
        height: 44px;
        background-image: url(../image/icon_information_l.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: top;
    }

    .popup.confirmDlg .message {
        display: inline-block;
        margin-left: 10px;
    }

    .popup.confirmDlg .dlgFooter {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

.closeIcon {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 24px;
    height: 24px;
    background-image: url(../image/icon_close.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: top;
}

/*** エラーダイアログ ***/
.messageDialog {
    opacity: 1;
    z-index: 20 !important;
}

    /*エラーダイアログ タイトル部分追加*/
    .messageDialog .message {
        font-size: 1.2em;
        padding: 15px;
        padding-left: 20px;
        border-bottom: solid 1px hsl(0,0%,79.2%);
        box-sizing: border-box;
    }

    .messageDialog button {
        z-index: 21 !important;
    }

    .messageDialog > * {
        -ms-user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
    }

/*テキスト内容に応じて可変するポップアップ*/
.messageDialog {
    height: auto;
    top: 50%;
    left: 50%;
    bottom: auto;
    width: 40%;
    /*chrome用*/
    margin: 0;
    -webkit-transform: translate(-64%, -50%);
    /*firefox,ie用*/
    transform: translate(-64%, -50%);
    padding-bottom: 54px;
}

    /*テキスト間隔*/
    .messageDialog .message {
        padding: 20px;
        word-wrap: break-word;
    }

    .messageDialog::before {
        content: "";
        position: absolute;
        height: 54px;
        width: 100%;
        bottom: 0;
        left: 0;
        background-color: #f2f2f2;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        box-sizing: border-box;
        z-index: -1;
    }

    .messageDialog::before {
        bottom: -0.5px;
    }

/* エラーダイアログ */
.errorDialog {
    height: auto;
    top: 50%;
    left: 50%;
    bottom: auto;
    width: 40%;
    padding: 10px;
    /*chrome用*/
    margin: 0;
    -webkit-transform: translate(-64%, -50%);
    /*firefox,ie用*/
    transform: translate(-64%, -50%);
}

.errorHeader {
    height: 24px;
    line-height: 24px;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.errorIcon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../image/status_icon_info.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.errorTitle {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-left: 10px;
}

/* アニメーション */
@-ms-keyframes nowLoadingEffect {
    0% {
        -ms-transform: rotate(0deg);
    }

    12.5% {
        -ms-transform: rotate(0deg);
    }

    12.6% {
        -ms-transform: rotate(45deg);
    }

    25% {
        -ms-transform: rotate(45deg);
    }

    25.1% {
        -ms-transform: rotate(90deg);
    }

    37.5% {
        -ms-transform: rotate(90deg);
    }

    37.6% {
        -ms-transform: rotate(135deg);
    }

    50% {
        -ms-transform: rotate(135deg);
    }

    50.1% {
        -ms-transform: rotate(180deg);
    }

    62.5% {
        -ms-transform: rotate(180deg);
    }

    62.6% {
        -ms-transform: rotate(225deg);
    }

    75% {
        -ms-transform: rotate(225deg);
    }

    75.1% {
        -ms-transform: rotate(270deg);
    }

    87.5% {
        -ms-transform: rotate(270deg);
    }

    87.6% {
        -ms-transform: rotate(315deg);
    }

    100% {
        -ms-transform: rotate(315deg);
    }
}

@-moz-keyframes nowLoadingEffect {
    0% {
        -moz-transform: rotate(0deg);
    }

    12.5% {
        -moz-transform: rotate(0deg);
    }

    12.6% {
        -moz-transform: rotate(45deg);
    }

    25% {
        -moz-transform: rotate(45deg);
    }

    25.1% {
        -moz-transform: rotate(90deg);
    }

    37.5% {
        -moz-transform: rotate(90deg);
    }

    37.6% {
        -moz-transform: rotate(135deg);
    }

    50% {
        -moz-transform: rotate(135deg);
    }

    50.1% {
        -moz-transform: rotate(180deg);
    }

    62.5% {
        -moz-transform: rotate(180deg);
    }

    62.6% {
        -moz-transform: rotate(225deg);
    }

    75% {
        -moz-transform: rotate(225deg);
    }

    75.1% {
        -moz-transform: rotate(270deg);
    }

    87.5% {
        -moz-transform: rotate(270deg);
    }

    87.6% {
        -moz-transform: rotate(315deg);
    }

    100% {
        -moz-transform: rotate(315deg);
    }
}

@-webkit-keyframes nowLoadingEffect {
    0% {
        -webkit-transform: rotate(0deg);
    }

    12.5% {
        -webkit-transform: rotate(0deg);
    }

    12.6% {
        -webkit-transform: rotate(45deg);
    }

    25% {
        -webkit-transform: rotate(45deg);
    }

    25.1% {
        -webkit-transform: rotate(90deg);
    }

    37.5% {
        -webkit-transform: rotate(90deg);
    }

    37.6% {
        -webkit-transform: rotate(135deg);
    }

    50% {
        -webkit-transform: rotate(135deg);
    }

    50.1% {
        -webkit-transform: rotate(180deg);
    }

    62.5% {
        -webkit-transform: rotate(180deg);
    }

    62.6% {
        -webkit-transform: rotate(225deg);
    }

    75% {
        -webkit-transform: rotate(225deg);
    }

    75.1% {
        -webkit-transform: rotate(270deg);
    }

    87.5% {
        -webkit-transform: rotate(270deg);
    }

    87.6% {
        -webkit-transform: rotate(315deg);
    }

    100% {
        -webkit-transform: rotate(315deg);
    }
}

/* 選択時の青枠除去 */
section:focus {
    outline: none;
}

#addressListDownloadBtn2 {
    padding: 0 10px 0 10px !important;
    white-space: nowrap;
    width: auto;
    margin-right: 8px !important;
    background-color: #f4f4f4 !important;
    color: #333;
    border: #de0000 1px solid !important;
    border-radius: 3px !important;
    height: 40px !important;
    line-height: 40px !important;
    opacity: 1;
    text-align: center;
    cursor: pointer !important;
    min-width: 153px;
}

    #addressListDownloadBtn2:hover {
        background: #c8aa00 !important;
        color: #fff !important;
        border: #de0000 1px solid !important;
    }

/* 宛名リスト項目削減分調整 */
/* リストヘッダー */
.addressTableContainer .columnHeader > li,
.addressTableContainer .row > li {
    width: unset;
    width: calc(20% - (20% - 20vw)); /* スクロールバー分のズレを防止する */
}
/* 行全体 */
.addressTableContainer .columnHeader,
.addressTableContainer .row {
    width: unset !important;
    min-width: 100% !important;
}
    /* 削除チェックボックス */
    .addressTableContainer .row > li:first-child,
    .addressTableContainer .columnHeader > li:first-child {
        min-width: 12.3% !important;
    }
    /* No. */
    .addressTableContainer .columnHeader li.narrow,
    .addressTableContainer .row li.narrow {
        width: 12% !important;
    }


/* ポップアップ */
.popup {
    border-radius: unset !important;
}

    .popup .popupHeader {
        color: #f4f4f4 !important;
        background: rgb(204, 0, 0) !important;
    }

/* CSV取り込みポップアップ（暫定対応） */
.fileFormatSelect .csvFileUploadArea {
    padding-top: 10px;
    margin-top: 40px;
}

/* アップロードするファイル名 */
#csvUploadTxt {
    color: transparent;
}

/* AtenaModify編 */
.groupingArea {
    min-height: 24px;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: rgba(250,250,250,0);
}

/* AtenaCsvMapping 編 */
.atenaCsvMapping {
    background: #fff;
}

.addressListUploadContents > .groupingArea {
    background: #f2f2f2;
}

[fileType="Excel"] .fileTypeExcel,
[fileType="CSV"] .fileTypeCSV {
    display: block;
}

[fileType="Excel"] .fileTypeCSV,
[fileType="CSV"] .fileTypeExcel {
    display: none;
    transform: scale(0) !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* エラー画面 */

#Error_PC .errorMessageArea {
    width: 50%;
    min-height: 100px;
    margin: auto;
    padding: 10px 20px 20px 20px;
    box-sizing: border-box;
    position: absolute;
    top: 35%;
    left: 50%;
    /*safari用*/
    -webkit-transform: translate(-50%, -50%);
    /*chrome,firefox,ie用*/
    transform: translate(-50%, -50%);
    border-radius: 0px;
    border-radius: 3px;
    padding: 10px;
    margin-top: 10px;
    overflow: hidden;
}

#Error_PC .errorTitleArea {
    line-height: 36px;
    margin-bottom: 10px;
    border-bottom: 1px solid #000;
    color: #de0000;
    font-size: 24px;
}

    #Error_PC .errorTitleArea:before {
        content: "";
        display: inline-block;
        width: 36px;
        height: 36px;
        margin-right: 5px;
        background-image: url(../image/icon_caution.gif);
        background-size: auto;
        background-position: center;
        background-repeat: no-repeat;
        vertical-align: middle;
    }
    /* アイコン(擬似要素)とテキストの縦位置を揃える */
    #Error_PC .errorTitleArea > span {
        vertical-align: middle;
    }

#Error_PC .errorMessage {
    max-height: 300px;
    overflow-y: auto;
    min-height: 20px;
}

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
    @media {
        .addressListUploadContents > .groupingArea,
        .fileFormatSelect::before,
        .addressListDownloadDlg::before,
        .popup.uploadSelectDlg::before,
        .popup.addressListImportWithToiNoDlg::before,
        button:hover {
            background: #f4f4f4 !important;
        }
    }
}